/*
  RÉPLICAS DEL PRODUCTO — el celular de la limpiadora (.lz-*) y el panel de quien coordina (.pn-*).

  Solo para enseñarlas en la web. Los valores salen de `research/PRODUCT_TRUTH.md` §6 (tokens
  exactos del código en producción) y de las capturas de la demo; los textos, de §1 y §2. Los
  prefijos `lz-` son los mismos que usa la app de verdad, para que quien compare los encuentre.

  Cada réplica es un contenedor y todo su interior se mide en «píxeles de diseño» (--px): el
  celular se dibuja a 390 de ancho y el panel a 660, y se escalan enteros al tamaño que les deje
  la página. Así la réplica no se reordena al encoger: se ve igual, más pequeña.

  Nada de esto es interactivo: el escenario lleva `inert` y `aria-hidden` en el HTML. Lo que
  cuentan estas pantallas está escrito en el texto de cada paso.
*/

@font-face {
  font-family: "Geist";
  src: url("../assets/fuentes/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../assets/fuentes/bricolage-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   CELULAR DE LA LIMPIADORA
   ════════════════════════════════════════════════════════════════════════════════════════ */

/*
  El marco mide 410 de diseño: 390 de pantalla más un bisel de 10 por lado (DESIGN §4.7). Una
  pantalla blanca sobre el papel queda a 1,04:1 y desaparece: el bisel de tinta y la sombra no son
  adorno, son lo que la separa.
*/
.movil {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 410 / 864;
}

.movil__marco {
  position: absolute;
  inset: 0;
  border-radius: calc(100cqi * 44 / 410);
  background: #0e1b1c;
  box-shadow: 0 1px 1px rgb(14 27 28 / 0.06), 0 10px 24px -8px rgb(14 27 28 / 0.16), 0 32px 64px -28px rgb(14 27 28 / 0.22);
}
/* La isla: el único detalle de hardware. */
.movil__marco::after {
  content: "";
  position: absolute;
  z-index: 6;
  top: calc(100cqi * 20 / 410);
  left: 50%;
  width: calc(100cqi * 90 / 410);
  height: calc(100cqi * 26 / 410);
  border-radius: 999px;
  background: #0e1b1c;
  transform: translateX(-50%);
}

.lz {
  --px: calc(100cqi / 410);
  inset: calc(10 * var(--px)) !important;
  border-radius: calc(34 * var(--px));
  overflow: hidden;
  --lz-fondo: #ffffff;
  --lz-superficie: #f6f5f3;
  --lz-borde: #dedad4;
  --lz-borde-tarjeta: #e7e3dd;
  --lz-separador: #efece7;
  --lz-tinta: #14110f;
  --lz-tinta-suave: #55504b;
  --lz-azul: #17418a;
  --lz-verde: #075c31;
  --lz-verde-suave: #e7f4ec;
  --lz-ambar: #8a5a00;
  --lz-ambar-suave: #fdf3e0;
  --lz-rojo: #a11b1b;
  --lz-rojo-suave: #fdecec;
  --lz-radio: calc(14 * var(--px));

  position: absolute;
  inset: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: calc(17 * var(--px));
  line-height: 1.5;
  color: var(--lz-tinta);
  background: var(--lz-fondo);
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0;
}

/* Barra de estado del teléfono: la hora es la del paso, para que el reloj de la historia y el
   del celular digan lo mismo. */
.lz-estado {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  height: calc(46 * var(--px));
  padding: calc(14 * var(--px)) calc(30 * var(--px)) 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-size: calc(15 * var(--px));
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  background: var(--lz-fondo);
}
.lz-estado svg { height: calc(12 * var(--px)); width: auto; }
.lz-estado-iconos { display: flex; gap: calc(6 * var(--px)); align-items: center; }

/* Las vistas se superponen; el escenario decide cuál se ve (css/historia.css). */
.lz-vista {
  position: absolute;
  inset: calc(46 * var(--px)) 0 calc(66 * var(--px)) 0;
  overflow: hidden;
}
.lz-pagina {
  padding: calc(10 * var(--px)) calc(16 * var(--px)) calc(40 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(16 * var(--px));
}

.lz-volver {
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--px));
  min-height: calc(30 * var(--px));
  font-size: calc(15 * var(--px));
  font-weight: 650;
  color: var(--lz-azul);
}
.lz-volver svg { width: calc(16 * var(--px)); height: calc(16 * var(--px)); }

/* Cabecera */
.lz-cab { display: flex; flex-direction: column; gap: calc(12 * var(--px)); }
.lz-cab-quien { display: flex; align-items: center; gap: calc(12 * var(--px)); }
.lz-avatar {
  flex: none;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  border-radius: 50%;
  background: var(--lz-azul);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: calc(17 * var(--px));
  font-weight: 700;
}
.lz-hola { margin: 0; font-size: calc(22 * var(--px)); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.lz-cab-sub { margin: 0; font-size: calc(14 * var(--px)); color: var(--lz-tinta-suave); line-height: 1.35; }

.lz-prog { display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.lz-prog-t {
  margin: 0;
  display: flex;
  justify-content: space-between;
  font-size: calc(13 * var(--px));
  color: var(--lz-tinta-suave);
}
.lz-prog-t b { color: var(--lz-tinta); font-weight: 700; }
.lz-prog-b {
  height: calc(7 * var(--px));
  border-radius: 999px;
  background: var(--lz-borde);
  overflow: hidden;
}
.lz-prog-b > i {
  display: block;
  height: 100%;
  width: var(--avance, 0%);
  border-radius: inherit;
  background: var(--lz-verde);
  transition: width 700ms cubic-bezier(0.23, 1, 0.32, 1);
}

.lz-dia-alerta {
  margin: 0;
  padding: calc(10 * var(--px)) calc(12 * var(--px));
  border-left: calc(4 * var(--px)) solid var(--lz-rojo);
  border-radius: calc(8 * var(--px));
  background: var(--lz-rojo-suave);
  color: var(--lz-rojo);
  font-size: calc(14 * var(--px));
  font-weight: 650;
  line-height: 1.4;
}

/* Tarjeta de piso */
.lz-lista-pisos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.lz-piso {
  position: relative;
  display: grid;
  grid-template-columns: calc(28 * var(--px)) 1fr;
  column-gap: calc(12 * var(--px));
  padding: calc(15 * var(--px)) calc(16 * var(--px));
  border: 1px solid var(--lz-borde-tarjeta);
  border-radius: var(--lz-radio);
  background: var(--lz-fondo);
  box-shadow: 0 1px 2px rgb(20 17 15 / 0.05), 0 2px 10px rgb(20 17 15 / 0.035);
  transition: background-color 500ms ease, border-color 500ms ease, box-shadow 500ms ease;
}
.lz-piso--ahora {
  border-color: var(--lz-azul);
  box-shadow: 0 0 0 calc(2 * var(--px)) rgb(23 65 138 / 0.18), 0 1px 2px rgb(20 17 15 / 0.05);
}
.lz-piso--listo { background: var(--lz-verde-suave); border-color: color-mix(in srgb, var(--lz-verde) 35%, transparent); }
.lz-piso-cuerpo { min-width: 0; display: flex; flex-direction: column; gap: calc(4 * var(--px)); }

.lz-tick {
  width: calc(28 * var(--px));
  height: calc(28 * var(--px));
  border: calc(2 * var(--px)) solid var(--lz-borde);
  border-radius: calc(8 * var(--px));
  background: var(--lz-fondo) center / 62% no-repeat;
  transition: background-color 300ms ease, border-color 300ms ease;
}
.lz-tick--ok,
.lz-piso--listo .lz-tick {
  border-color: var(--lz-verde);
  background-color: var(--lz-verde);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.lz-piso-nombre { margin: 0; font-size: calc(17 * var(--px)); font-weight: 700; line-height: 1.3; }
.lz-piso--listo .lz-piso-nombre { color: var(--lz-verde); }
.lz-piso-anuncio,
.lz-piso-sitio { margin: 0; font-size: calc(14 * var(--px)); color: var(--lz-tinta-suave); line-height: 1.35; }
.lz-piso-anuncio { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.lz-insignias { list-style: none; margin: calc(4 * var(--px)) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)); }
.lz-insignia {
  padding: calc(2 * var(--px)) calc(9 * var(--px));
  border: 1px solid var(--lz-borde);
  border-radius: calc(7 * var(--px));
  background: var(--lz-superficie);
  color: var(--lz-tinta-suave);
  font-size: calc(13 * var(--px));
  font-weight: 700;
  line-height: 1.4;
}
.lz-insignia--urgente { color: var(--lz-rojo); background: var(--lz-rojo-suave); border-color: color-mix(in srgb, var(--lz-rojo) 35%, transparent); }
.lz-insignia--tranquilo { color: var(--lz-verde); background: var(--lz-verde-suave); border-color: color-mix(in srgb, var(--lz-verde) 35%, transparent); }
.lz-insignia--duda { color: var(--lz-ambar); background: var(--lz-ambar-suave); border-color: color-mix(in srgb, var(--lz-ambar) 30%, transparent); }

.lz-piso-pie {
  grid-column: 2;
  margin-top: calc(12 * var(--px));
  padding-top: calc(12 * var(--px));
  border-top: 1px solid var(--lz-separador);
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--lz-azul);
  font-weight: 700;
}
.lz-piso--listo .lz-piso-pie { color: var(--lz-verde); border-top-color: color-mix(in srgb, var(--lz-verde) 20%, transparent); }
.lz-piso-pie svg { width: calc(18 * var(--px)); height: calc(18 * var(--px)); }

/* Aviso de relevo dentro de la ficha */
.lz-relevo {
  padding: calc(12 * var(--px)) calc(14 * var(--px));
  border: 1px solid;
  border-left-width: calc(5 * var(--px));
  border-radius: var(--lz-radio);
  font-size: calc(15 * var(--px));
  line-height: 1.4;
}
.lz-relevo-t { display: flex; align-items: center; gap: calc(8 * var(--px)); margin: 0 0 calc(4 * var(--px)); font-size: calc(18 * var(--px)); font-weight: 700; }
.lz-relevo-t svg { flex: none; width: calc(20 * var(--px)); height: calc(20 * var(--px)); }
.lz-relevo p { margin: 0; }
.lz-relevo--tranquilo { background: var(--lz-verde-suave); border-color: color-mix(in srgb, var(--lz-verde) 30%, transparent); border-left-color: var(--lz-verde); }
.lz-relevo--tranquilo .lz-relevo-t { color: var(--lz-verde); }
.lz-relevo--urgente { background: var(--lz-rojo-suave); border-color: color-mix(in srgb, var(--lz-rojo) 30%, transparent); border-left-color: var(--lz-rojo); }
.lz-relevo--urgente .lz-relevo-t { color: var(--lz-rojo); }

/* Los dos botones grandes y sus recibos */
.lz-acciones { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--px)); }
.lz-accion,
.lz-hecho {
  position: relative;
  min-height: calc(72 * var(--px));
  border-radius: var(--lz-radio);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.lz-accion { color: #fff; background: var(--lz-azul); font-size: calc(22 * var(--px)); font-weight: 650; }
.lz-accion--terminar { background: var(--lz-verde); }
.lz-hecho {
  gap: calc(8 * var(--px));
  padding: 0 calc(12 * var(--px));
  justify-content: flex-start;
  background: var(--lz-verde-suave);
  color: var(--lz-verde);
  font-size: calc(16 * var(--px));
  font-weight: 650;
  line-height: 1.3;
  text-align: left;
}
.lz-hecho svg { flex: none; width: calc(18 * var(--px)); height: calc(18 * var(--px)); }

.lz-boton {
  min-height: calc(52 * var(--px));
  border: 1px solid var(--lz-borde);
  border-radius: var(--lz-radio);
  background: var(--lz-superficie);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(8 * var(--px));
  padding: 0 calc(12 * var(--px));
  font-weight: 650;
  text-align: center;
  line-height: 1.25;
}
.lz-boton--blanco { background: var(--lz-fondo); }
.lz-boton--peligro { color: var(--lz-rojo); background: var(--lz-fondo); border-color: color-mix(in srgb, var(--lz-rojo) 45%, transparent); }
.lz-boton--primario { color: #fff; background: var(--lz-azul); border-color: var(--lz-azul); }
.lz-boton svg { width: calc(18 * var(--px)); height: calc(18 * var(--px)); }

.lz-recibo {
  margin: 0;
  padding: calc(13 * var(--px)) calc(16 * var(--px));
  border: 1px solid color-mix(in srgb, var(--lz-verde) 35%, transparent);
  border-radius: var(--lz-radio);
  background: var(--lz-verde-suave);
  color: var(--lz-verde);
  line-height: 1.4;
}

.lz-titulo { margin: 0; font-size: calc(20 * var(--px)); font-weight: 700; line-height: 1.25; }
.lz-titulo small { font-size: 1em; font-weight: 500; color: var(--lz-tinta-suave); }
.lz-ayuda { margin: 0; font-size: calc(14 * var(--px)); color: var(--lz-tinta-suave); line-height: 1.45; }
.lz-bloque { display: flex; flex-direction: column; gap: calc(10 * var(--px)); }

/* «Qué hay que hacer» */
.lz-puntos { list-style: none; margin: 0; padding: 0; }
.lz-puntos li {
  display: flex;
  align-items: center;
  gap: calc(14 * var(--px));
  min-height: calc(44 * var(--px));
  border-bottom: 1px solid var(--lz-separador);
}
.lz-puntos li::before { content: ""; width: calc(7 * var(--px)); height: calc(7 * var(--px)); border-radius: 50%; background: var(--lz-tinta-suave); }

/* La lista del piso */
.lz-cuenta { font-weight: 500; color: var(--lz-tinta-suave); font-variant-numeric: tabular-nums; }
.lz-zona-t {
  margin: calc(6 * var(--px)) 0 0;
  font-size: calc(13 * var(--px));
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--lz-tinta-suave);
  font-variant-numeric: tabular-nums;
}
.lz-casillas { list-style: none; margin: 0; padding: 0; }
.lz-casilla {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  min-height: calc(46 * var(--px));
  border-bottom: 1px solid var(--lz-separador);
  line-height: 1.3;
}
.lz-casilla-marca {
  flex: none;
  width: calc(26 * var(--px));
  height: calc(26 * var(--px));
  border: calc(2 * var(--px)) solid var(--lz-borde);
  border-radius: calc(6 * var(--px));
  background: var(--lz-fondo) center / 66% no-repeat;
  transition: background-color 260ms ease, border-color 260ms ease;
}
.lz-casilla-texto { flex: 1; min-width: 0; transition: color 260ms ease; }
.lz-casilla.hecha .lz-casilla-marca {
  border-color: var(--lz-verde);
  background-color: var(--lz-verde);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.lz-casilla.hecha .lz-casilla-texto { color: var(--lz-tinta-suave); text-decoration: line-through; text-decoration-thickness: 1px; }
.lz-casilla-foto {
  flex: none;
  padding: calc(1 * var(--px)) calc(6 * var(--px));
  border: 1px solid var(--lz-borde);
  border-radius: calc(4 * var(--px));
  font-size: calc(11 * var(--px));
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--lz-tinta-suave);
}

/* Fotos */
.lz-dos { display: grid; grid-template-columns: 1fr 1fr; gap: calc(8 * var(--px)); }
.lz-fotos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(8 * var(--px)); }
.lz-foto {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border: 1px solid var(--lz-borde);
  border-radius: calc(10 * var(--px));
  background: var(--lz-superficie);
}
.lz-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lz-foto-pie {
  position: absolute;
  inset: auto 0 0 0;
  padding: calc(4 * var(--px)) calc(8 * var(--px));
  background: rgb(0 0 0 / 0.68);
  color: #fff;
  font-size: calc(12 * var(--px));
  font-weight: 600;
}
.lz-quitar {
  position: absolute;
  top: calc(5 * var(--px));
  right: calc(5 * var(--px));
  width: calc(26 * var(--px));
  height: calc(26 * var(--px));
  border-radius: 50%;
  background: rgb(0 0 0 / 0.68);
  display: grid;
  place-items: center;
}
.lz-quitar svg { width: 50%; height: 50%; }

/* Avisos */
.lz-tarjeta {
  padding: calc(14 * var(--px));
  border: 1px solid var(--lz-borde);
  border-radius: var(--lz-radio);
  background: var(--lz-superficie);
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--px));
}
.lz-campo { margin: 0; font-weight: 700; }
.lz-chips { display: flex; flex-wrap: wrap; gap: calc(7 * var(--px)); }
.lz-chip {
  min-height: calc(40 * var(--px));
  padding: 0 calc(15 * var(--px));
  border: calc(1.5 * var(--px)) solid var(--lz-borde);
  border-radius: 999px;
  background: var(--lz-fondo);
  display: inline-flex;
  align-items: center;
  font-size: calc(16 * var(--px));
  line-height: 1.2;
  transition: background-color 240ms ease, color 240ms ease, border-color 240ms ease;
}
.lz-chip.pulsado { background: var(--lz-azul); border-color: var(--lz-azul); color: #fff; }
.lz-detalle {
  padding-left: calc(12 * var(--px));
  border-left: calc(3 * var(--px)) solid var(--lz-azul);
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--px));
}
.lz-detalle-t { margin: 0; font-size: calc(15 * var(--px)); font-weight: 650; }
.lz-texto {
  min-height: calc(76 * var(--px));
  padding: calc(10 * var(--px)) calc(12 * var(--px));
  border: calc(1.5 * var(--px)) solid var(--lz-borde);
  border-radius: calc(12 * var(--px));
  background: var(--lz-fondo);
  font-size: calc(16 * var(--px));
  color: var(--lz-tinta);
}
.lz-texto--vacio { color: #8b857e; }

/* Barra inferior */
.lz-tabs {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 3;
  height: calc(66 * var(--px));
  padding-bottom: calc(10 * var(--px));
  border-top: 1px solid var(--lz-separador);
  background: var(--lz-fondo);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.lz-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(2 * var(--px));
  font-size: calc(13 * var(--px));
  font-weight: 600;
  color: var(--lz-tinta-suave);
}
.lz-tab svg { width: calc(20 * var(--px)); height: calc(20 * var(--px)); }
.lz-tab--activa { color: var(--lz-azul); }

/* Conversación de WhatsApp (el primer día): no es la app, es el mensaje que le llega. */
.lz-chat { position: absolute; inset: 0; display: flex; flex-direction: column; background: #efeae2; }
.lz-chat-cab {
  display: flex;
  align-items: center;
  gap: calc(10 * var(--px));
  padding: calc(8 * var(--px)) calc(14 * var(--px));
  background: #f6f5f3;
  border-bottom: 1px solid var(--lz-separador);
  font-size: calc(15 * var(--px));
}
.lz-chat-cab b { display: block; font-size: calc(16 * var(--px)); }
.lz-chat-cab span { color: var(--lz-tinta-suave); font-size: calc(13 * var(--px)); }
.lz-chat-avatar { width: calc(34 * var(--px)); height: calc(34 * var(--px)); border-radius: 50%; background: #d8f5f8; color: #00646e; display: grid; place-items: center; font-size: calc(14 * var(--px)); font-weight: 700; }
.lz-chat-cuerpo { flex: 1; padding: calc(18 * var(--px)) calc(12 * var(--px)); display: flex; flex-direction: column; justify-content: flex-end; gap: calc(8 * var(--px)); }
.lz-burbuja {
  max-width: 86%;
  padding: calc(8 * var(--px)) calc(10 * var(--px)) calc(6 * var(--px));
  border-radius: calc(10 * var(--px));
  background: #fff;
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13);
  font-size: calc(15.5 * var(--px));
  line-height: 1.4;
}
.lz-burbuja p { margin: 0 0 calc(6 * var(--px)); }
.lz-burbuja .enlace { position: relative; color: #027eb5; word-break: break-all; }
.lz-burbuja time { display: block; text-align: right; font-size: calc(11 * var(--px)); color: #667781; }
/* El dedo de Marisol sobre su enlace, no suelto por el chat. */
.lz-toque {
  position: absolute;
  left: 36%;
  top: 50%;
  width: calc(40 * var(--px));
  height: calc(40 * var(--px));
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: rgb(23 65 138 / 0.22);
  box-shadow: 0 0 0 calc(8 * var(--px)) rgb(23 65 138 / 0.08);
  pointer-events: none;
}

/* ════════════════════════════════════════════════════════════════════════════════════════
   PANEL DE QUIEN COORDINA
   ════════════════════════════════════════════════════════════════════════════════════════ */

.panel {
  container-type: inline-size;
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
}

/* Marco de la web alrededor del panel (DESIGN §4.8): borde de 1 px, radio 12, sombra teñida de
   tinta y una barra con el sello de demostración. Sin los tres puntos de ventana. */
.panel__marco {
  --px: calc(100cqi / 660);
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid #d2dddd;
  border-radius: 12px;
  background: #fcfcfc;
  box-shadow: 0 1px 1px rgb(14 27 28 / 0.06), 0 10px 24px -8px rgb(14 27 28 / 0.16), 0 32px 64px -28px rgb(14 27 28 / 0.22);
}
.panel__barra {
  height: calc(36 * var(--px));
  padding-inline: calc(14 * var(--px));
  display: flex;
  align-items: center;
  gap: calc(8 * var(--px));
  background: #eef5f5;
  border-bottom: 1px solid #d2dddd;
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: calc(12.5 * var(--px));
  font-weight: 600;
  color: #425051;
  white-space: nowrap;
}
.panel__barra svg { flex: none; width: calc(14 * var(--px)); height: calc(14 * var(--px)); }
.panel__barra span { font-weight: 500; color: #596667; }

/* Por debajo de 1024 px el panel se dibuja a 480 de diseño: se reordena en vez de encogerse hasta
   no leerse. */
.panel--estrecho .panel__marco,
.panel--estrecho .pn { --px: calc(100cqi / 480); }
.panel--estrecho .pn-cifras { grid-template-columns: repeat(2, 1fr); }

.pn {
  --px: calc(100cqi / 660);
  --pn-fondo: #fcfcfc;
  --pn-tinta: #0b0b0b;
  --pn-tarjeta: #ffffff;
  --pn-primario: oklch(0.33 0.07 195);
  --pn-sobre-primario: #fcfcfc;
  --pn-suave: #606060;
  --pn-borde: #e4e4e4;
  --pn-lateral: #f5f5f5;
  --pn-rojo-texto: #c10007;
  --pn-rojo: #e7000b;
  --pn-rojo-borde: #fb2c36;
  --pn-ambar-texto: #973c00;
  --pn-ambar: #fe9a00;
  --pn-ambar-icono: #e17100;
  --pn-verde-texto: #007a55;
  --pn-verde: #009966;
  --pn-azul-texto: #1447e6;
  --pn-azul: #155dfc;

  position: absolute;
  inset: calc(36 * var(--px)) 0 0 0;
  font-family: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: calc(14 * var(--px));
  line-height: 1.45;
  color: var(--pn-tinta);
  background: var(--pn-fondo);
  -webkit-font-smoothing: antialiased;
}

.pn-mono {
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: calc(10.5 * var(--px));
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.pn-vista { position: absolute; inset: 0; overflow: hidden; }
.pn-cuerpo { padding: calc(14 * var(--px)) calc(16 * var(--px)) calc(40 * var(--px)); display: flex; flex-direction: column; gap: calc(12 * var(--px)); }

.pn-seccion {
  border: 1px solid var(--pn-borde);
  border-radius: calc(14 * var(--px));
  background: var(--pn-tarjeta);
  overflow: hidden;
}
.pn-seccion-t {
  margin: 0;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--px));
  color: var(--pn-suave);
}
.pn-seccion-t svg { width: calc(14 * var(--px)); height: calc(14 * var(--px)); }

/* Cabecera «Operación de hoy» */
.pn-franja {
  padding: calc(16 * var(--px));
  background: var(--pn-primario);
  color: var(--pn-sobre-primario);
  display: grid;
  grid-template-columns: 1fr auto;
  row-gap: calc(2 * var(--px));
}
.pn-franja .pn-mono { opacity: 0.7; letter-spacing: 0.14em; }
.pn-fecha {
  grid-column: 1;
  margin: 0;
  font-family: "Bricolage Grotesque", "Geist", ui-sans-serif, sans-serif;
  font-size: calc(26 * var(--px));
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.pn-franja-sub { grid-column: 1; margin: 0; font-size: calc(13 * var(--px)); opacity: 0.75; }
.pn-sello {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: start;
  display: flex;
  align-items: center;
  gap: calc(6 * var(--px));
  font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
  font-size: calc(11 * var(--px));
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #5ee9b5;
  font-variant-numeric: tabular-nums;
}
.pn-sello::before { content: ""; width: calc(7 * var(--px)); height: calc(7 * var(--px)); border-radius: 50%; background: currentColor; }
.pn-dia {
  grid-column: 1 / -1;
  margin-top: calc(14 * var(--px));
  display: grid;
  grid-template-columns: auto 1fr;
  row-gap: calc(7 * var(--px));
  align-items: center;
}
.pn-dia-cuenta { justify-self: end; font-size: calc(12.5 * var(--px)); font-variant-numeric: tabular-nums; }
.pn-dia-pista {
  grid-column: 1 / -1;
  height: calc(6 * var(--px));
  border-radius: 999px;
  background: rgb(255 255 255 / 0.15);
  display: flex;
  overflow: hidden;
}
.pn-dia-pista i { display: block; height: 100%; transition: width 700ms cubic-bezier(0.23, 1, 0.32, 1); }
.pn-dia-pista .hecho { width: var(--hecho, 0%); background: #00d492; }
.pn-dia-pista .curso { width: var(--curso, 0%); background: #51a2ff; }

/* Las cuatro cifras */
.pn-cifras {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--pn-borde);
}
.pn-cifras li { padding: calc(12 * var(--px)) calc(14 * var(--px)); background: var(--pn-tarjeta); display: flex; flex-direction: column; gap: calc(2 * var(--px)); }
.pn-cifras .pn-mono { color: var(--pn-suave); letter-spacing: 0.09em; }
.pn-cifra {
  font-family: "Bricolage Grotesque", "Geist", ui-sans-serif, sans-serif;
  font-size: calc(32 * var(--px));
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.pn-cifra--verde { color: var(--pn-verde-texto); }
.pn-cifra--azul { color: var(--pn-azul-texto); }
.pn-cifra--ambar { color: var(--pn-ambar-texto); }
.pn-cifra--rojo { color: var(--pn-rojo-texto); }
.pn-matiz { font-size: calc(11.5 * var(--px)); color: var(--pn-suave); line-height: 1.35; }

/* «El equipo hoy» */
.pn-equipo { padding: calc(12 * var(--px)); display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.pn-equipo > ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pn-persona { padding: calc(8 * var(--px)) 0; border-top: 1px solid var(--pn-borde); }
.pn-persona:first-child { border-top: 0; padding-top: 0; }
.pn-persona-res {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: calc(10 * var(--px));
  row-gap: calc(2 * var(--px));
  font-size: calc(12.5 * var(--px));
  color: var(--pn-suave);
  font-variant-numeric: tabular-nums;
}
.pn-punto {
  flex: none;
  width: calc(20 * var(--px));
  height: calc(20 * var(--px));
  border-radius: 50%;
  border: 1px solid var(--borde-p);
  background: var(--fondo-p);
  color: var(--tinta-p);
  display: grid;
  place-items: center;
  font-size: calc(10 * var(--px));
  font-weight: 600;
}
.pn-alias { font-size: calc(14 * var(--px)); font-weight: 500; color: var(--pn-tinta); }
.pn-pips { display: inline-flex; gap: calc(2 * var(--px)); }
.pn-pips i {
  width: calc(6 * var(--px));
  height: calc(10 * var(--px));
  border-radius: calc(2 * var(--px));
  background: rgb(96 96 96 / 0.25);
  transition: background-color 400ms ease;
}
.pn-pips i.listo { background: var(--pn-verde); }
.pn-pips i.curso { background: var(--pn-azul); }
.pn-en-curso { color: var(--pn-azul-texto); }

.pn-pisos {
  list-style: none;
  margin: calc(6 * var(--px)) 0 0 calc(9 * var(--px));
  padding: 0 0 0 calc(12 * var(--px));
  border-left: 1px solid var(--pn-borde);
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
}
.pn-pisos li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: calc(12 * var(--px));
  align-items: baseline;
  font-size: calc(12.5 * var(--px));
}
.pn-piso { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-piso b { font-weight: 500; }
.pn-piso span { color: var(--pn-suave); font-size: calc(11.5 * var(--px)); }
.pn-estado { display: inline-flex; align-items: baseline; gap: calc(6 * var(--px)); white-space: nowrap; color: var(--pn-suave); }
.pn-estado::before {
  content: "";
  flex: none;
  align-self: center;
  width: calc(6 * var(--px));
  height: calc(6 * var(--px));
  border-radius: 50%;
  background: rgb(96 96 96 / 0.4);
  transition: background-color 400ms ease;
}
.pn-estado--ambar { color: var(--pn-ambar-texto); }
.pn-estado--ambar::before { background: var(--pn-ambar); }
.pn-estado--verde { color: var(--pn-verde-texto); }
.pn-estado--verde::before { background: var(--pn-verde); }
.pn-estado--azul::before { background: var(--pn-azul); }
.pn-relevo { color: var(--pn-rojo-texto); }
.pn-zona { color: var(--pn-suave); }

/* Personas: paleta de 8 tonos por orden de alta (color-persona.ts). Nunca en la banda del rojo o
   del ámbar, para que el color de una persona no se lea como una alarma. */
.tono-1 { --tinta-p: #645500; --fondo-p: #f3efd9; --borde-p: #d6cfa2; }
.tono-2 { --tinta-p: #39621c; --fondo-p: #e6f3df; --borde-p: #bdd7b0; }
.tono-3 { --tinta-p: #00684c; --fondo-p: #dcf5eb; --borde-p: #a7dbc8; }
.tono-4 { --tinta-p: #00646e; --fondo-p: #d8f5f8; --borde-p: #a0dae0; }
.tono-5 { --tinta-p: #005b8b; --fondo-p: #ddf2ff; --borde-p: #abd4f2; }
.tono-6 { --tinta-p: #444e91; --fondo-p: #e8edff; --borde-p: #c2cbf6; }

/* Alarma de relevos sin empezar */
.pn-alarma {
  padding: calc(12 * var(--px)) calc(14 * var(--px));
  border: 1px solid color-mix(in srgb, var(--pn-rojo-borde) 60%, transparent);
  border-radius: calc(14 * var(--px));
  background: color-mix(in srgb, var(--pn-rojo) 6%, white);
  color: var(--pn-rojo-texto);
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
}
.pn-alarma-t { margin: 0; font-size: calc(15 * var(--px)); font-weight: 700; }
.pn-alarma-d { margin: 0; font-size: calc(12.5 * var(--px)); line-height: 1.4; }
.pn-alarma-fila {
  margin-top: calc(6 * var(--px));
  padding-top: calc(8 * var(--px));
  border-top: 1px solid color-mix(in srgb, var(--pn-rojo) 18%, transparent);
  display: flex;
  justify-content: space-between;
  gap: calc(10 * var(--px));
  color: var(--pn-tinta);
  font-size: calc(13.5 * var(--px));
}
.pn-alarma-fila b { color: var(--pn-rojo-texto); font-weight: 600; }
.pn-alarma-fila span { color: var(--pn-suave); font-variant-numeric: tabular-nums; }

/* Incidencias abiertas */
.pn-incidencias { padding: calc(12 * var(--px)) calc(14 * var(--px)); display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.pn-incidencias-t { margin: 0; font-size: calc(15 * var(--px)); font-weight: 600; }
.pn-incidencias-t span { color: var(--pn-suave); font-weight: 400; margin-left: calc(4 * var(--px)); }
.pn-incidencia {
  display: grid;
  grid-template-columns: calc(4 * var(--px)) calc(16 * var(--px)) minmax(0, 1fr) auto;
  column-gap: calc(10 * var(--px));
  align-items: center;
  padding: calc(8 * var(--px)) 0;
}
.pn-incidencia-barra { height: calc(32 * var(--px)); border-radius: 999px; background: var(--pn-ambar); }
.pn-incidencia svg { width: calc(16 * var(--px)); height: calc(16 * var(--px)); color: var(--pn-ambar-icono); }
.pn-incidencia-t { margin: 0; font-size: calc(13.5 * var(--px)); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-incidencia-c { margin: 0; color: var(--pn-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-accion { color: var(--pn-primario); font-weight: 700; display: inline-flex; align-items: center; gap: calc(4 * var(--px)); }
.pn-accion svg { width: calc(12 * var(--px)); height: calc(12 * var(--px)); color: inherit; }

/* Cerrar el día */
.pn-cierre { padding: calc(14 * var(--px)); display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.pn-cierre-t { margin: 0; display: flex; align-items: center; gap: calc(8 * var(--px)); font-size: calc(15 * var(--px)); font-weight: 600; }
.pn-cierre-t span { color: var(--pn-suave); font-weight: 400; font-variant-numeric: tabular-nums; }
.pn-cierre-d { margin: 0; font-size: calc(12.5 * var(--px)); color: var(--pn-suave); line-height: 1.45; }
.pn-cierre-d b { color: var(--pn-tinta); font-weight: 600; }
.pn-limpieza {
  padding: calc(12 * var(--px)) calc(14 * var(--px));
  border: 1px solid var(--pn-borde);
  border-radius: calc(14 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(10 * var(--px));
}
.pn-limpieza-cab { display: flex; flex-wrap: wrap; align-items: center; gap: calc(8 * var(--px)); }
.pn-limpieza-cab h4 { margin: 0; font-size: calc(15 * var(--px)); font-weight: 500; }
.pn-insignia {
  height: calc(22 * var(--px));
  padding: 0 calc(9 * var(--px));
  border: 1px solid var(--pn-borde);
  border-radius: calc(26 * var(--px));
  display: inline-flex;
  align-items: center;
  gap: calc(6 * var(--px));
  font-size: calc(12 * var(--px));
  font-weight: 500;
  white-space: nowrap;
  transition: color 400ms ease, border-color 400ms ease;
}
.pn-insignia i { width: calc(7 * var(--px)); height: calc(7 * var(--px)); border-radius: 50%; background: currentColor; transition: background-color 400ms ease; }
.pn-insignia--ambar { color: var(--pn-ambar-texto); border-color: color-mix(in srgb, var(--pn-ambar) 60%, transparent); }
.pn-insignia--ambar i { background: var(--pn-ambar); }
.pn-insignia--verde { color: var(--pn-verde-texto); border-color: color-mix(in srgb, #00bc7d 60%, transparent); }
.pn-insignia--verde i { background: var(--pn-verde); }
.pn-insignia--persona { color: var(--pn-verde-texto); border-color: color-mix(in srgb, #00bc7d 45%, transparent); }

.pn-aviso {
  padding: calc(4 * var(--px)) 0 calc(4 * var(--px)) calc(12 * var(--px));
  border-left: calc(2 * var(--px)) solid color-mix(in srgb, var(--pn-ambar) 60%, transparent);
  display: flex;
  flex-direction: column;
  gap: calc(4 * var(--px));
}
.pn-aviso-t { margin: 0; display: flex; align-items: center; gap: calc(8 * var(--px)); font-size: calc(14 * var(--px)); font-weight: 500; }
.pn-aviso-t svg { width: calc(16 * var(--px)); height: calc(16 * var(--px)); color: var(--pn-ambar-icono); }
.pn-aviso-t span { font-size: calc(12 * var(--px)); font-weight: 400; color: var(--pn-suave); }
.pn-aviso-q { margin: 0; font-size: calc(13.5 * var(--px)); }

.pn-botones { display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)); }
.pn-boton {
  height: calc(34 * var(--px));
  padding: 0 calc(12 * var(--px));
  border: 1px solid var(--pn-borde);
  border-radius: calc(10 * var(--px));
  background: var(--pn-tarjeta);
  display: inline-flex;
  align-items: center;
  gap: calc(7 * var(--px));
  font-size: calc(13.5 * var(--px));
  font-weight: 500;
  white-space: nowrap;
}
.pn-boton svg { width: calc(15 * var(--px)); height: calc(15 * var(--px)); }
.pn-boton--primario { background: var(--pn-primario); border-color: var(--pn-primario); color: var(--pn-sobre-primario); }
.pn-firmada { margin: 0; font-size: calc(12.5 * var(--px)); color: var(--pn-suave); }

/* Semáforo: la leyenda de las cuatro luces */
.pn-semaforo { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(6 * var(--px)) calc(14 * var(--px)); font-size: calc(12.5 * var(--px)); }
.pn-semaforo li { display: inline-flex; align-items: center; gap: calc(6 * var(--px)); }
.pn-semaforo i { width: calc(8 * var(--px)); height: calc(8 * var(--px)); border-radius: 50%; }

/* Fotos de hoy y el visor con la revisión automática */
.pn-fotos { padding: calc(12 * var(--px)) calc(14 * var(--px)); display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.pn-fotos-t { margin: 0; display: flex; align-items: center; gap: calc(8 * var(--px)); font-size: calc(14 * var(--px)); font-weight: 600; }
.pn-fotos-t .num { color: var(--pn-suave); font-weight: 400; font-variant-numeric: tabular-nums; }
.pn-fotos-quien { margin: 0; font-size: calc(12.5 * var(--px)); color: var(--pn-suave); }
.pn-fotos-quien b { color: var(--pn-tinta); font-weight: 500; }
.pn-miniaturas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: calc(8 * var(--px)); }
.pn-miniatura {
  position: relative;
  width: calc(84 * var(--px));
  height: calc(84 * var(--px));
  overflow: hidden;
  border: 1px solid var(--pn-borde);
  border-radius: calc(10 * var(--px));
  background: #eee;
}
.pn-miniatura img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pn-nota {
  position: absolute;
  right: calc(4 * var(--px));
  bottom: calc(4 * var(--px));
  padding: calc(1 * var(--px)) calc(6 * var(--px));
  border-radius: calc(4 * var(--px));
  background: var(--pn-verde);
  color: #fff;
  font-size: calc(11 * var(--px));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.pn-nota--baja { background: #d70000; }

/* Fotos anteriores */
.pn-anteriores { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(6 * var(--px)); }
.pn-anteriores li {
  display: grid;
  grid-template-columns: calc(16 * var(--px)) minmax(0, 1fr) auto;
  column-gap: calc(10 * var(--px));
  align-items: center;
  padding: calc(9 * var(--px)) calc(12 * var(--px));
  border: 1px solid var(--pn-borde);
  border-radius: calc(12 * var(--px));
  background: var(--pn-tarjeta);
  font-size: calc(13 * var(--px));
}
.pn-anteriores svg { width: calc(15 * var(--px)); height: calc(15 * var(--px)); color: var(--pn-suave); }
.pn-anteriores .quien b { display: block; font-weight: 500; }
.pn-anteriores .quien span { display: block; font-size: calc(11.5 * var(--px)); color: var(--pn-suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pn-anteriores .cuanto { text-align: right; font-size: calc(11.5 * var(--px)); color: var(--pn-suave); font-variant-numeric: tabular-nums; }

/* Enlace del día de una persona («El equipo») */
.pn-ficha { padding: calc(14 * var(--px)); display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.pn-ficha-cab { display: flex; align-items: center; gap: calc(10 * var(--px)); }
.pn-ficha-cab .pn-punto { width: calc(28 * var(--px)); height: calc(28 * var(--px)); font-size: calc(13 * var(--px)); }
.pn-ficha-cab b { font-size: calc(15 * var(--px)); font-weight: 500; }
.pn-ficha-cab span { color: var(--pn-suave); font-size: calc(12.5 * var(--px)); }
.pn-ficha-ayuda { margin: 0; font-size: calc(12.5 * var(--px)); color: var(--pn-suave); line-height: 1.45; }

/* Tramos que el escenario enciende: un cambio que acaba de pasar se subraya un momento. */
.pn-destello { position: relative; }
.pn-destello::after {
  content: "";
  position: absolute;
  inset: calc(-4 * var(--px)) calc(-6 * var(--px));
  border-radius: calc(8 * var(--px));
  background: color-mix(in srgb, var(--pn-primario) 9%, transparent);
  opacity: 0;
  transition: opacity 500ms ease;
  pointer-events: none;
}

/* Calendario del mes, recortado a la semana: quién trabaja, cuántos pisos y quién libra. */
.pn-calendario { padding: calc(14 * var(--px)); display: flex; flex-direction: column; gap: calc(12 * var(--px)); }
.pn-cal-t { margin: 0; display: flex; align-items: center; gap: calc(8 * var(--px)); font-size: calc(15 * var(--px)); font-weight: 600; }
.pn-cal-t svg { width: calc(16 * var(--px)); height: calc(16 * var(--px)); color: var(--pn-suave); }
.pn-semana { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: calc(8 * var(--px)); }
.pn-cal-dia {
  min-height: calc(210 * var(--px));
  padding: calc(8 * var(--px));
  border: 1px solid var(--pn-borde);
  border-radius: calc(10 * var(--px));
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--px));
  font-size: calc(12 * var(--px));
  color: var(--pn-suave);
}
.pn-cal-dia.hoy { background: #fafafa; }
.pn-cal-dia.manana { border-color: color-mix(in srgb, var(--pn-primario) 45%, transparent); box-shadow: 0 0 0 calc(2 * var(--px)) color-mix(in srgb, var(--pn-primario) 12%, transparent); }
.pn-cal-n { color: var(--pn-tinta); font-variant-numeric: tabular-nums; }
.pn-cal-n b { font-weight: 600; margin-right: calc(4 * var(--px)); }
.pn-chip-p {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--px));
  padding: calc(3 * var(--px)) calc(8 * var(--px)) calc(3 * var(--px)) calc(3 * var(--px));
  border: 1px solid var(--borde-p);
  border-radius: 999px;
  background: var(--fondo-p);
  color: var(--tinta-p);
  font-size: calc(12 * var(--px));
  font-weight: 500;
  white-space: nowrap;
}
.pn-chip-p .pn-punto { width: calc(18 * var(--px)); height: calc(18 * var(--px)); background: #fff; }
.pn-chip-p b { margin-left: auto; font-variant-numeric: tabular-nums; }
.pn-cal-libra { color: var(--pn-suave); font-style: italic; }
.pn-cal-pie { margin: 0; font-size: calc(12.5 * var(--px)); color: var(--pn-suave); }
.pn-cal-pie b { color: var(--pn-tinta); font-weight: 500; }

/* Lo que se abre en WhatsApp al pulsar «Mandarle su enlace» */
.pn-mensaje { padding: calc(12 * var(--px)) calc(14 * var(--px)); display: flex; flex-direction: column; gap: calc(6 * var(--px)); font-size: calc(13.5 * var(--px)); }
.pn-mensaje .pn-mono { color: var(--pn-suave); }
.pn-mensaje p { margin: 0; }
.pn-enlace { color: #027eb5; }

/* Las tres gravedades, dichas como consecuencia */
.pn-gravedades { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(8 * var(--px)); }
.pn-gravedades li {
  display: grid;
  grid-template-columns: calc(10 * var(--px)) 1fr;
  column-gap: calc(10 * var(--px));
  padding: calc(8 * var(--px)) calc(10 * var(--px));
  border: 1px solid var(--pn-borde);
  border-radius: calc(10 * var(--px));
  font-size: calc(13 * var(--px));
}
.pn-gravedades li.elegida { border-color: color-mix(in srgb, var(--pn-ambar) 60%, transparent); background: color-mix(in srgb, var(--pn-ambar) 6%, white); }
.pn-gravedades .luz { grid-row: 1 / span 2; width: calc(9 * var(--px)); height: calc(9 * var(--px)); border-radius: 50%; margin-top: calc(5 * var(--px)); }
.pn-gravedades b { font-weight: 600; }
.pn-gravedades span { color: var(--pn-suave); font-size: calc(12 * var(--px)); }
.pn .luz--rojo { background: var(--pn-rojo); }
.pn .luz--ambar { background: var(--pn-ambar); }
.pn .luz--verde { background: var(--pn-verde); }
.pn .luz--gris { background: rgb(96 96 96 / 0.4); }

.pn-estado-fila { display: inline-flex; align-items: baseline; gap: calc(6 * var(--px)); white-space: nowrap; }
.pn-ayuda-peso { margin: calc(4 * var(--px)) 0 0; font-size: calc(11.5 * var(--px)); color: var(--pn-suave); line-height: 1.4; }
.pn-limpieza-t { margin: 0; font-size: calc(15 * var(--px)); font-weight: 500; }

/* Lo que va debajo del nombre en la ficha (relevo, botones, recibo) ocupa la tarjeta entera. */
.ficha-resto { grid-column: 1 / -1; margin-top: calc(14 * var(--px)); display: flex; flex-direction: column; gap: calc(10 * var(--px)); }
.pn-cal-pie { max-width: 62%; }
/* ── Añadidos tras la verificación del 11-sep ─────────────────────────────────────────── */

/* WhatsApp separa los días con una etiqueta: el enlace llegó el primer día, no hoy. */
.lz-chat-fecha {
  align-self: center;
  margin: 0 0 calc(4 * var(--px));
  padding: calc(4 * var(--px)) calc(12 * var(--px));
  border-radius: calc(8 * var(--px));
  background: #fff;
  box-shadow: 0 1px 0.5px rgb(11 20 26 / 0.13);
  color: #54656f;
  font-size: calc(12.5 * var(--px));
}

/* «El equipo»: cada persona con su «Editar {alias}», como en la app; la de Marisol, abierta. */
.pn-editar { align-self: flex-start; height: calc(30 * var(--px)); font-size: calc(12.5 * var(--px)); }
.pn-editar--abierto { background: #f4f4f5; }
.pn-ficha--plegada { gap: calc(8 * var(--px)); }

/* Cerrar el día: la persona al lado del nombre, y la insignia que cambia al final. */
.pn-limpieza-cab > .alterna { order: 1; }

/* El destello de la alarma es un anillo: un velo encima del rosa la volvía gris. */
.pn-alarma.pn-destello::after {
  inset: calc(-3 * var(--px));
  border-radius: calc(17 * var(--px));
  background: transparent;
  box-shadow: 0 0 0 calc(3 * var(--px)) color-mix(in srgb, var(--pn-rojo-borde) 28%, transparent);
}
.pn-cifras .pn-destello::after { inset: 0; border-radius: 0; }

/* Donde el marco corta filas al pie (el tablero y el equipo), se funden en vez de partirse por la
   mitad. Solo ahí: en el resto el fundido apagaba contenido entero, como la leyenda del cierre. */
.estado[data-paso-actual="2"] .pn,
.estado[data-paso-actual="3"] .pn,
.estado[data-paso-actual="4"] .pn,
.figura-paso[data-paso-actual="6"] .pn { -webkit-mask-image: linear-gradient(#000 90%, transparent); mask-image: linear-gradient(#000 90%, transparent); }