/* ==========================================================================
   ANDROS PERFORMANCE
   La marca: negro #000000, lima #D6EB42 y oliva #4F4F2E. Anton para los
   titulares, Poppins para todo lo demás. Sin monoespaciada: la marca no
   tiene una, y donde hacía falta textura de dato va Poppins en versalitas.

   Las banderas clínicas conservan sus colores —ámbar, morado, turquesa,
   gris— porque significan cosas y no son de la marca. El verde de «bien»
   tampoco es el lima: son roles distintos y están a 86° de tono.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Poppins:wght@300;400;500;600;700&display=swap');

:root {
  /* Tema Oscuro Futurista por defecto (Longevidad & Performance) */
  --papel: #000000;
  --papel-suave: #070705;
  --carta: #0C0C08;
  --carta-elevada: #14140E;
  --carta-vidrio: rgba(12, 12, 8, 0.88);
  --tinta: #FFFFFF;
  /* Grises con sesgo al oliva de la marca: un gris puro se ve prestado. */
  --suave: #A8A894;
  --suave-tenue: #7A7A66;
  --linea: #26261A;
  --linea-fuerte: #4F4F2E;

  /* Acentos de Telemetría Biológica */
  --acento: #D6EB42;
  --acento-brillo: #E6F578;
  --acento-suave: rgba(214, 235, 66, 0.12);
  --acento-borde: rgba(214, 235, 66, 0.45);
  /* Plano, no degradado: la marca usa el lima liso. */
  --acento-degrade: #D6EB42;
  --oliva: #4F4F2E;

  /* Banderas Clínicas de Precisión */
  --ambar: #F59E0B;
  --ambar-fondo: rgba(245, 158, 11, 0.14);
  --ambar-borde: rgba(245, 158, 11, 0.35);

  --morado: #A78BFA;
  --morado-fondo: rgba(167, 139, 250, 0.14);
  --morado-borde: rgba(167, 139, 250, 0.35);

  --turquesa: #06B6D4;
  --turquesa-fondo: rgba(6, 182, 212, 0.14);
  --turquesa-borde: rgba(6, 182, 212, 0.35);

  --verde: #00D97A;
  --verde-fondo: rgba(0, 217, 122, 0.14);
  --verde-borde: rgba(0, 217, 122, 0.35);

  --rojo: #EF4444;
  --rojo-fondo: rgba(239, 68, 68, 0.14);
  --rojo-borde: rgba(239, 68, 68, 0.35);

  --gris-chip: rgba(255, 255, 255, 0.07);

  /* Resplandores y Sombras de Alta Tecnología */
  --sombra: 0 4px 20px -2px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.06);
  --sombra-alta: 0 12px 36px -4px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255,255,255,.05);
  --glow-cyan: none;
  --glow-verde: none;
  --glow-ambar: none;

  /* El resplandor del fondo: el mismo en todas las páginas —portada, filtro,
     portal del paciente y consola— para que se vean de la misma casa
     (Dr. León, 12-09-2026). Arriba del todo y muy bajo; el segundo es apenas
     un recuerdo verde a la derecha. */
  --fondo-resplandor:
    radial-gradient(ellipse 85% 55% at 50% -5%, rgba(214, 235, 66, 0.07) 0%, transparent 62%),
    radial-gradient(ellipse at 85% 28%, rgba(0, 255, 136, 0.022) 0%, transparent 45%);

  /* Bloques por Profesional */
  --b1: #38BDF8;   /* Apertura y Dirección */
  --b2: #818CF8;   /* Medicina Funcional */
  --b3: #F472B6;   /* Nutrición */
  --b4: #A3E635;   /* Entrenamiento */
  --b5: #38BDF8;   /* Cierre */
  --b6: #94A3B8;   /* Deliberación Conjunta */
}

/* Modo Claro Adaptativo de Precisión de Titanio */
:root[data-theme="light"] {
  --papel: #FFFFFF;
  --papel-suave: #F3F6F3;
  --carta: #FFFFFF;
  --carta-elevada: #F7F9F7;
  --carta-vidrio: rgba(255, 255, 255, 0.92);
  --tinta: #050705;
  --suave: #4A554C;
  --suave-tenue: #7C877E;
  --linea: #E4E4DB;
  --linea-fuerte: #C9C9B4;

  /* Sobre blanco el lima no se lee: el texto va en el oliva de la marca y
     el lima se reserva para rellenos, con texto negro encima. */
  --acento: #55631A;
  --acento-brillo: #3F4A12;
  --acento-suave: rgba(214, 235, 66, 0.22);
  --acento-borde: #B9CF2E;
  --acento-degrade: #D6EB42;
  --oliva: #4F4F2E;

  --ambar: #D97706;
  --ambar-fondo: #FEF3C7;
  --ambar-borde: #FDE68A;

  --morado: #7C3AED;
  --morado-fondo: #EDE9FE;
  --morado-borde: #DDD6FE;

  --turquesa: #0891B2;
  --turquesa-fondo: #CFFAFE;
  --turquesa-borde: #A5F3FC;

  --verde: #067A4A;
  --verde-fondo: #DFF7EA;
  --verde-borde: #A9E8C6;

  --rojo: #DC2626;
  --rojo-fondo: #FEE2E2;
  --rojo-borde: #FECACA;

  --gris-chip: #E2E8F0;
  --sombra: 0 4px 16px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --sombra-alta: 0 12px 28px rgba(15, 23, 42, 0.1);
  --glow-cyan: none;
  --glow-verde: none;
  --glow-ambar: none;

  --b1: #0284C7;
  --b2: #4F46E5;
  --b3: #DB2777;
  --b4: #4D7C0F;
  --b5: #0284C7;
  --b6: #64748B;
}

/* El oscuro pedido a mano: repite los tokens de `:root` para ganarle al
   bloque del tema claro cuando alguien lo elige explícitamente. */
:root[data-theme="dark"] {
  /* Tema Oscuro Futurista por defecto (Longevidad & Performance) */
  --papel: #000000;
  --papel-suave: #070705;
  --carta: #0C0C08;
  --carta-elevada: #14140E;
  --carta-vidrio: rgba(12, 12, 8, 0.88);
  --tinta: #FFFFFF;
  /* Grises con sesgo al oliva de la marca: un gris puro se ve prestado. */
  --suave: #A8A894;
  --suave-tenue: #7A7A66;
  --linea: #26261A;
  --linea-fuerte: #4F4F2E;

  /* Acentos de Telemetría Biológica */
  --acento: #D6EB42;
  --acento-brillo: #E6F578;
  --acento-suave: rgba(214, 235, 66, 0.12);
  --acento-borde: rgba(214, 235, 66, 0.45);
  /* Plano, no degradado: la marca usa el lima liso. */
  --acento-degrade: #D6EB42;
  --oliva: #4F4F2E;

  /* Banderas Clínicas de Precisión */
  --ambar: #F59E0B;
  --ambar-fondo: rgba(245, 158, 11, 0.14);
  --ambar-borde: rgba(245, 158, 11, 0.35);

  --morado: #A78BFA;
  --morado-fondo: rgba(167, 139, 250, 0.14);
  --morado-borde: rgba(167, 139, 250, 0.35);

  --turquesa: #06B6D4;
  --turquesa-fondo: rgba(6, 182, 212, 0.14);
  --turquesa-borde: rgba(6, 182, 212, 0.35);

  --verde: #00D97A;
  --verde-fondo: rgba(0, 217, 122, 0.14);
  --verde-borde: rgba(0, 217, 122, 0.35);

  --rojo: #EF4444;
  --rojo-fondo: rgba(239, 68, 68, 0.14);
  --rojo-borde: rgba(239, 68, 68, 0.35);

  --gris-chip: rgba(255, 255, 255, 0.07);

  /* Resplandores y Sombras de Alta Tecnología */
  --sombra: 0 4px 20px -2px rgba(0, 0, 0, 0.8), 0 0 1px 1px rgba(255, 255, 255, 0.06);
  --sombra-alta: 0 12px 36px -4px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255,255,255,.05);
  --glow-cyan: none;
  --glow-verde: none;
  --glow-ambar: none;

  /* Bloques por Profesional */
  --b1: #38BDF8;   /* Apertura y Dirección */
  --b2: #818CF8;   /* Medicina Funcional */
  --b3: #F472B6;   /* Nutrición */
  --b4: #A3E635;   /* Entrenamiento */
  --b5: #38BDF8;   /* Cierre */
  --b6: #94A3B8;   /* Deliberación Conjunta */
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  font-size: 15.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-image: var(--fondo-resplandor);
  background-attachment: fixed;
}

/* Envoltorios de alta precisión */
.envoltorio {
  max-width: 54rem;
  margin: 0 auto;
  padding: 2.5rem 1.5rem 5rem;
}

.envoltorio.angosto {
  max-width: 46rem;
  padding-top: 3.5rem;
}

.envoltorio.ancho {
  max-width: 78rem;
  padding-top: 2rem;
}

.envoltorio.ancho:has(h1 + .ayuda + .tarjeta) {
  padding-top: 3.5rem;
}

/* Tipografía Futurista */
h1, h2, h3, h4, .titular-futurista {
  font-family: 'Poppins', system-ui, sans-serif;
  letter-spacing: -0.02em;
  color: var(--tinta);
}

h1 {
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 0.6rem;
}

.sobretitulo + h1 { margin-top: 0.25rem; }
.pie + h1, .pie + h2 { margin-top: 1.4rem; line-height: 1.25; }

h2 {
  font-weight: 600;
  font-size: 1.35rem;
  margin: 0 0 0.4rem;
}

h3 {
  font-weight: 600;
  font-size: 1.15rem;
  line-height: 1.35;
  margin: 0 0 0.35rem;
  max-width: 60ch;
}

code, .mono, .n, .id, .sello, .chip, .cifra {
  font-family: 'Poppins', system-ui, sans-serif;
}

.sobretitulo {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--acento);
  margin: 0 0 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 500;
}

.sobretitulo::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--acento);
}

.entrada {
  font-size: 1.05rem;
  color: var(--suave);
  max-width: 62ch;
  line-height: 1.6;
}

a {
  color: var(--acento);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--acento-brillo);
}

/* ── Barra Superior / HUD Telemetría ────────────────────────────────────── */
.top {
  position: sticky;
  top: -2.5rem;
  z-index: 20;
  background: var(--carta-vidrio);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linea);
  padding: 0.85rem 1rem;
  margin-bottom: 2rem;
  display: flex;
  gap: 0.85rem;
  align-items: center;
  flex-wrap: wrap;
  border-radius: 8px;
  box-shadow: 0 8px 24px -10px rgba(0, 0, 0, 0.4);
}

.top .marca {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.top .marca span {
  color: var(--acento);
}

.top .quien-soy {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.78rem;
  background: var(--gris-chip);
  border: 1px solid var(--linea);
  padding: 0.2rem 0.6rem;
  border-radius: 4px;
  color: var(--suave);
  /* Sin margen: en una fila centrada el margen cuenta como parte del
     elemento, y uno abajo lo sube a él. */
  margin: 0;
}

.top .crece { flex: 1; }

.top button.activo {
  border-color: var(--acento);
  color: var(--acento);
  background: var(--acento-suave);
}

/* ── Botones Futuristas y Controles ─────────────────────────────────────── */
button, a.boton {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 6px;
  border: 1px solid var(--linea-fuerte);
  background: var(--carta-elevada);
  color: var(--tinta);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  text-decoration: none;
}

button:hover, a.boton:hover {
  border-color: var(--acento);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

button.primario, a.boton.primario {
  background: var(--acento-degrade);
  border-color: transparent;
  color: #000000;
  font-weight: 700;
}

button.primario:hover, a.boton.primario:hover {
  background: var(--acento-brillo);
  color: #000000;
  transform: translateY(-1px);
}

button:disabled, a.boton:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

button.chico {
  font-size: 0.78rem;
  padding: 0.28rem 0.65rem;
  border-radius: 4px;
}

:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 3px;
}

/* ── Tarjetas Estilo Glassmorphism / Titanio ────────────────────────────── */
.tarjeta {
  background: var(--carta);
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 1.35rem 1.65rem;
  margin-bottom: 1rem;
  box-shadow: var(--sombra);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  position: relative;
}

.tarjeta:hover {
  border-color: rgba(255, 255, 255, 0.16);
}

.tarjeta.condicional {
  margin-left: 1.5rem;
  border-left: 3px solid var(--acento);
  background: linear-gradient(90deg, rgba(0, 255, 136, 0.045) 0%, var(--carta) 100%);
}

.tarjeta.destacada {
  border-left: 3px solid var(--ambar);
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.04) 0%, var(--carta) 100%);
}

.fila {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

/* Un hijo de flex no se encoge por debajo del ancho de su contenido, y hay
   contenido que a propósito no se encoge: la lámina de Bristol mide 26 rem
   para seguir siendo legible. Sin esto, esa lámina estiraba **toda la fila**
   —enunciado, ayuda y opciones— y en el teléfono la pregunta se salía de la
   pantalla. Con `min-width: 0` la fila se ajusta y lo ancho hace su propio
   scroll adentro de su caja, que es donde tiene que hacerlo. */
.fila > * { min-width: 0; }
.fila > .n { flex: 0 0 auto; }

.n {
  font-size: 0.82rem;
  color: var(--acento);
  padding-top: 0.25rem;
  min-width: 2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ayuda {
  font-size: 0.86rem;
  color: var(--suave);
  margin: 0.2rem 0 0.85rem;
  max-width: 60ch;
  line-height: 1.5;
}

.opciones {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0.5rem 0 0;
}

.opciones label {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.02);
  transition: all 0.15s ease;
}

.opciones label:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--linea);
}

/* Lo que está marcado tiene que verse marcado.
   Solo el recuadro del navegador no alcanza: sobre negro es un cuadradito de
   16 píxeles, y con seis opciones a la vista nadie encuentra cuál eligió.
   Se pinta la fila entera. */
.opciones label:has(input:checked) {
  background: var(--acento-suave);
  border-color: var(--acento);
  color: var(--tinta);
}

.opciones label:has(input:checked) span { font-weight: 500; color: var(--tinta); }

/* «Marca hasta tres.» Cuántas quedan, arriba de la lista; y lo que ya no se
   puede marcar, apagado en vez de escondido: el paciente tiene que ver que
   está ahí y que ya llegó al tope (Dr. León, 22-09-2026). */
.cuantas-quedan {
  margin: 0 0 .35rem;
  font-size: .8rem;
  color: var(--acento);
  letter-spacing: .02em;
}

.opciones label.al-tope { opacity: .45; cursor: not-allowed; }
.opciones label.al-tope:hover { background: rgba(255, 255, 255, 0.02); border-color: transparent; }

/* Qué hace el equipo con cada objetivo, debajo de la opción. */
.ayuda-opcion {
  margin: -.2rem 0 .35rem 2.4rem;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--suave);
  max-width: 54ch;
}

/* Y sigue viéndose con el teclado: el foco no puede quedar tapado por el
   relleno de la selección. */
.opciones label:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ── la caja y la bolita, dibujadas ─────────────────────────────────────────
   El control del navegador se pinta solo por dentro y en oscuro queda blanco
   sobre blanco: no se distingue una marcada de una vacía. Se dibujan a mano,
   que además es lo único que permite ponerles el lima de la marca. */
.opciones input[type=checkbox],
.opciones input[type=radio],
.escala input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  margin: 0.2rem 0 0;
  flex-shrink: 0;
  width: 1.15rem;
  height: 1.15rem;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 4px;
  background-color: transparent;
  position: relative;
  cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease;
}

/* La bolita es redonda; la caja, cuadrada. La forma dice si se puede marcar
   una sola o varias, y eso no se toca. */
.opciones input[type=radio],
.escala input[type=radio] { border-radius: 50%; }

.opciones label:hover input:not(:checked),
.escala label:hover input:not(:checked) { border-color: var(--acento); }

/* Marcada: lima llena. */
.opciones input:checked,
.escala input:checked {
  background-color: var(--acento-degrade);
  border-color: var(--acento-degrade);
}

/* El visto, en negro sobre el lima. */
.opciones input[type=checkbox]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8.4l3.3 3.3L13 4.8' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 0.85rem;
}

/* El punto de la bolita, también como imagen: un pseudo-elemento dentro de un
   `input` no pinta en todos los navegadores, y el punto es justo lo que dice
   que está marcada. */
.opciones input[type=radio]:checked,
.escala input[type=radio]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.2' fill='%23000'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}

/* En la escala, la caja elegida ya es lima entera: ahí la bolita se invierte
   —negra con el punto lima— o desaparecería sobre su propio color. */
.escala label:has(input:checked) input {
  background-color: #000000;
  border-color: #000000;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.2' fill='%23D6EB42'/%3E%3C/svg%3E");
}

.opciones input:focus-visible,
.escala input:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Campos de Formulario */
input[type=text], input[type=number], input[type=password], input[type=time],
input[type=date], select, textarea {
  font: inherit;
  font-size: 0.92rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 6px;
  background: var(--carta-elevada);
  color: var(--tinta);
  max-width: 100%;
  transition: all 0.2s ease;
}

input[type=text]:focus, input[type=number]:focus, input[type=password]:focus,
input[type=time]:focus, input[type=date]:focus, select:focus, textarea:focus {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
  outline: none;
  background: var(--carta);
}

input[type=number] { width: 8.5rem; }
textarea { width: 100%; min-height: 4rem; resize: vertical; }

input.codigo {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  width: 18rem;
  font-weight: 600;
  text-align: center;
  color: var(--acento);
  background: var(--carta);
  border: 1px solid var(--acento-borde);
}

input.codigo::placeholder {
  letter-spacing: normal;
  text-transform: none;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.9rem;
  color: var(--suave-tenue);
  font-weight: 400;
}

.detalle {
  margin: 0.4rem 0 0.3rem 2rem;
  display: flex;
  gap: 0.6rem;
  align-items: center;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--suave);
}

/* Escalas Biométricas */
.escala {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.escala label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  color: var(--suave);
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--linea);
  min-width: 2.2rem;
  transition: all 0.15s ease;
}

.escala label:hover {
  border-color: var(--acento);
  color: var(--tinta);
  background: var(--acento-suave);
}

/* El número elegido, en sólido: el mismo problema que arriba, y peor —son
   once cajas iguales en fila y la elegida se perdía entre las otras diez. */
.escala label:has(input:checked) {
  /* El lima liso, no `--acento`: en el tema claro el acento es el oliva
     oscuro y el número habría quedado negro sobre oscuro. `--acento-degrade`
     es el lima de la marca en los dos temas, y encima siempre va negro. */
  background: var(--acento-degrade);
  border-color: var(--acento-degrade);
  color: #000000;
  font-weight: 600;
}

.escala label:has(input:focus-visible) { outline: 2px solid var(--acento); outline-offset: 2px; }

.anclas {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--suave);
  max-width: 32rem;
  margin-top: 0.4rem;
  font-weight: 500;
}

/* Tablas Clínicas */
table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 0.88rem;
  margin-top: 0.6rem;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--linea);
}

th, td {
  border-bottom: 1px solid var(--linea);
  border-right: 1px solid var(--linea);
  padding: 0.55rem 0.75rem;
  text-align: left;
}

th:last-child, td:last-child { border-right: none; }
tr:last-child td { border-bottom: none; }

th {
  background: var(--carta-elevada);
  color: var(--suave);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

td input, td select { width: 100%; min-width: 5rem; }
.tabla-envoltorio { overflow-x: auto; border-radius: 6px; }

/* ── Avisos y Alertas ───────────────────────────────────────────────────── */
.aviso {
  padding: 0.85rem 1.25rem;
  border-radius: 6px;
  font-size: 0.92rem;
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1.5;
  border: 1px solid transparent;
}

.aviso.info {
  background: var(--acento-suave);
  color: var(--acento-brillo);
  border-color: var(--acento-borde);
}

.aviso.mal {
  background: var(--rojo-fondo);
  color: #FCA5A5;
  border-color: var(--rojo-borde);
}

.aviso.bien {
  background: var(--verde-fondo);
  color: #6EE7B7;
  border-color: var(--verde-borde);
}

/* «Ojo»: hay que mirar algo. Se usaba desde el principio y no tenía estilo:
   salía como un párrafo suelto, que es justo lo que un aviso no puede ser
   (17-09-2026). */
.aviso.ojo {
  background: var(--ambar-fondo);
  color: var(--ambar);
  border-color: var(--ambar-borde);
}

/* ── Chips y Banderas de Telemetría ─────────────────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.15rem 0.55rem;
  border-radius: 4px;
  background: var(--gris-chip);
  border: 1px solid var(--linea);
  letter-spacing: 0.04em;
}

.chip.AMBAR {
  background: var(--ambar-fondo);
  color: var(--ambar);
  border-color: var(--ambar-borde);
}

.chip.MORADO {
  background: var(--morado-fondo);
  color: var(--morado);
  border-color: var(--morado-borde);
}

.chip.TURQUESA {
  background: var(--turquesa-fondo);
  color: var(--turquesa);
  border-color: var(--turquesa-borde);
}

.chip.CONTEXTO, .chip.GRIS {
  background: var(--gris-chip);
  color: var(--suave);
}

.chip.APTO, .chip.APTO_CON_CONDICION {
  background: var(--verde-fondo);
  color: var(--verde);
  border-color: var(--verde-borde);
}

.chip.NO_APTO {
  background: var(--rojo-fondo);
  color: var(--rojo);
  border-color: var(--rojo-borde);
}

.chip.DIFERIDO, .chip.SIN_REVISAR {
  background: var(--ambar-fondo);
  color: var(--ambar);
  border-color: var(--ambar-borde);
}

.chip.RENOVADO {
  background: var(--acento-suave);
  color: var(--acento);
  border-color: var(--acento-borde);
}

.chip.ALTA {
  background: var(--gris-chip);
  color: var(--suave);
}

/* Puntos indicadores luminosos */
.punto {
  display: inline-block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  margin-right: 0.55rem;
  vertical-align: 0.05rem;
  background: var(--suave);
}

.punto.AMBAR {
  background: var(--ambar);
}

.punto.MORADO {
  background: var(--morado);
}

.punto.TURQUESA {
  background: var(--turquesa);
}

.punto.ROJO {
  background: var(--rojo);
}

.punto.CONTEXTO, .punto.GRIS {
  background: var(--suave-tenue);
}

/* ── Barra de Avance de Telemetría ──────────────────────────────────────── */
.barra-avance {
  height: 6px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 4px;
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
}

.barra-avance i {
  display: block;
  height: 100%;
  background: var(--acento-degrade);
  transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* El plan del paciente, al final del seguimiento: sus dos botones, centrados
   debajo de lo que hacen. */
.lo-del-plan { text-align: center; }
.lo-del-plan .pie { justify-content: center; }
/* `.ayuda` mide 60ch y se apoya a la izquierda: centrar las líneas adentro de
   esa caja no centra la caja. Va al medio de la tarjeta. */
.lo-del-plan .ayuda { max-width: 48ch; margin-left: auto; margin-right: auto; }

/* Los tres renglones del paciente, juntos: código, plan y consultas. */
.ficha-paciente { margin: 0 0 1.1rem; }
.ficha-paciente p { margin: 0 0 .15rem; }
.ficha-paciente p:last-child { margin-bottom: 0; }

/* Las unidades de un número —meses o años, litros o vasos— al lado del campo
   y las dos a la vista. Un desplegable con «unidad…» dentro ocupaba lo mismo y
   escondía las opciones. */
.unidades { display: inline-flex; gap: .4rem; align-items: center; }
/* Día · mes · año, en ese orden. */
.fecha-latina { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.fecha-latina select, .fecha-latina input { width: auto; min-width: 0; }
.fecha-latina input { width: 5.5rem; }

.unidades .unidad {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .3rem .7rem;
  border: 1px solid var(--linea-fuerte);
  border-radius: 999px;
  font-size: .86rem;
  color: var(--suave);
  cursor: pointer;
}

.unidades .unidad:hover { border-color: var(--acento); color: var(--tinta); }

.unidades .unidad:has(input:checked) {
  border-color: var(--acento);
  background: var(--acento-suave);
  color: var(--acento);
}

.unidades input[type=radio] {
  appearance: none;
  -webkit-appearance: none;
  width: .8rem;
  height: .8rem;
  margin: 0;
  border: 1.5px solid var(--linea-fuerte);
  border-radius: 50%;
  cursor: pointer;
}

.unidades input[type=radio]:checked {
  border-color: var(--acento);
  background: var(--acento);
}

/* La firma del consentimiento: el nombre y el documento, cada uno en su
   renglón y con su rótulo encima. */
.firma-datos { display: grid; gap: .9rem; margin: .6rem 0 1.2rem; }
.campo-firma { display: grid; gap: .3rem; }
.campo-firma label { color: var(--suave); font-size: .86rem; }
.campo-firma input { width: 100%; }

/* Quitar una fila de una tabla repetible. Discreto: no compite con el dato. */
.quitar-fila {
  padding: .15rem .5rem;
  line-height: 1;
  color: var(--suave);
  border-color: var(--linea);
}

.quitar-fila:hover { color: var(--rojo); border-color: var(--rojo); }

/* Volver, arriba del todo y alineado con el título. */
.volver-arriba { margin: 0 0 .9rem; }

/* ── La pregunta y lo que contestó antes ──────────────────────────────────
   En el cuestionario de seguimiento, lo que contestó la vez pasada **es** la
   referencia para contestar: iba como un renglón suelto, sin estilo, encima
   de una pregunta en 18 px, y no se distinguía de nada (Dr. León,
   14-09-2026). La pregunta baja de tamaño y la referencia va en su caja. */
.tarjeta h3 { font-size: 1.02rem; line-height: 1.4; }

.antes {
  margin: .55rem 0 .8rem;
  padding: .55rem .7rem;
  border-left: 3px solid var(--acento);
  border-radius: 0 6px 6px 0;
  background: var(--acento-suave);
}

.antes .de {
  display: block;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--suave);
  margin-bottom: .25rem;
}

.antes .valores { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; }

.antes .uno { display: flex; align-items: baseline; gap: .45rem; }

.antes .uno em {
  font-style: normal;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--suave);
}

.antes .uno strong {
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--acento);
}

/* La tabla de una pregunta —la semana día por día, las siete comidas— tiene
   hasta seis columnas: no entra ni en el iPad ni en una ventana de laptop,
   porque lo que la limita no es la pantalla sino el ancho de la tarjeta. Se
   desplazaba de lado y la última columna —«cómo terminaste»— quedaba fuera de
   la vista (Dr. León, 14-09-2026).

   Por eso se mide **la tarjeta y no la ventana**: cuando no hay 700 px para
   la tabla, cada fila pasa a ser una tarjeta con el día arriba y debajo cada
   dato con el nombre de su columna. */
.matriz-pregunta { container-type: inline-size; }

/* La versión compacta: los días —o los momentos del día— arriba, una columna
   cada uno, y a la izquierda lo que se anota. Siete filas de cuatro columnas
   ocupaban media pantalla en la consulta (Dr. León, 18-09-2026). Acá no se
   apila en tarjetas: se desplaza de lado, que es lo que conserva la lectura
   de calendario. */
/* Entra entera, sin desplazarse de lado: son siete columnas y la pantalla es
   la que hay (Dr. León, 18-09-2026). Ancho fijo repartido en partes iguales —
   el nombre de la fila a la izquierda y el resto entre los siete— y el texto
   crece hacia arriba, que es lo que deja achicar el ancho sin perder nada. */
/* El renglón que va a la historia se ve: en una tabla de sesenta analitos hay
   que saber de un vistazo cuáles se marcaron (Dr. León, 21-09-2026). */
.lectura-lab tr.va-a-la-historia { background: var(--acento-suave); }
.lectura-lab select.lab-direccion { min-width: 5.2rem; font-size: .8rem; }
.lectura-lab tbody input[type=checkbox] { width: 1.1rem; height: 1.1rem; }

/* Rojo lo alto y verde lo bajo: la tabla se lee sin leer cada renglón
   (Dr. León, 21-09-2026). Se pinta el desplegable entero, no solo la opción:
   una opción coloreada no se ve en todos los navegadores. */
.lectura-lab select.lab-ALTO, .lectura-lab option.lab-ALTO {
  color: var(--rojo);
  font-weight: 500;
}
.lectura-lab select.lab-BAJO, .lectura-lab option.lab-BAJO {
  color: var(--verde);
  font-weight: 500;
}

/* Deshacer y rehacer van con los atajos de cada tabla, separados por una
   línea y en el amarillo de la marca, para no confundirlos con ellos. */
.lectura-lab .separador-atajos {
  width: 1px;
  align-self: stretch;
  margin: 0 .35rem;
  background: var(--linea-fuerte);
}
.lectura-lab button.historial {
  border-color: var(--acento);
  color: var(--acento);
}
.lectura-lab button.historial:disabled { opacity: .35; }
.lectura-lab td input { font-size: .82rem; padding: .25rem .35rem; }

/* La ayuda en viñetas: mismas palabras, una regla por renglón. */
ul.ayuda.en-puntos { margin: .3rem 0 .6rem 1.05rem; padding: 0; }
ul.ayuda.en-puntos li { margin: .12rem 0; }

.matriz-compacta { overflow-x: auto; }
.matriz-compacta table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
  border-collapse: collapse;
}
.matriz-compacta th { font-weight: 500; }
.matriz-compacta thead th {
  text-transform: uppercase;
  letter-spacing: .02em;
  color: var(--acento);
  padding: .2rem .25rem;
  font-size: .62rem;
  line-height: 1.15;
  white-space: normal;
  word-break: break-word;
}
.matriz-compacta tbody th {
  text-align: left;
  /* El nombre de la fila viene partido en dos renglones a propósito: entero se
     comía el ancho de la tabla. */
  white-space: pre-line;
  width: 5.4rem;
  font-size: .67rem;
  line-height: 1.2;
  padding: .15rem .45rem .15rem 0;
  color: var(--suave);
  vertical-align: top;
}
.matriz-compacta td { padding: .12rem .15rem; vertical-align: top; }
.matriz-compacta td select, .matriz-compacta td input,
.matriz-compacta td textarea {
  width: 100%;
  /* Sin esto, el ancho del texto más largo de un desplegable manda sobre la
     tabla y la saca de la pantalla. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  text-overflow: ellipsis;
  padding: .25rem .3rem;
  font-size: .74rem;
}
/* La flecha del desplegable se lleva 2,4 rem de relleno a la derecha: en una
   columna de 90 px eso es un tercio del ancho, y es lo que sacaba la tabla
   de la pantalla (Dr. León, 18-09-2026). */
.matriz-compacta td select { padding-right: 1.25rem; background-size: .55rem; }
/* El texto crece hacia arriba mientras se escribe: en un renglón de una línea
   lo escrito se corre de costado y deja de verse. */
.matriz-compacta td textarea {
  min-height: 2.4rem;
  resize: vertical;
  line-height: 1.25;
  overflow: hidden;
}
/* El texto crece hacia arriba mientras se escribe: en un renglón de una línea
   lo escrito se corre de costado y deja de verse. */
.matriz-compacta td textarea {
  min-height: 2.6rem;
  resize: vertical;
  line-height: 1.3;
  overflow: hidden;
}

@container (max-width: 700px) {
  .matriz-pregunta { overflow-x: visible; }
  .matriz-pregunta table, .matriz-pregunta tbody, .matriz-pregunta tr,
  .matriz-pregunta td, .matriz-pregunta tbody th { display: block; width: auto; }
  .matriz-pregunta thead { display: none; }
  .matriz-pregunta tr {
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: .7rem .85rem;
    margin-bottom: .7rem;
    background: var(--carta);
  }
  .matriz-pregunta tbody th {
    text-align: left;
    padding: 0 0 .5rem;
    border: 0;
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--acento);
  }
  .matriz-pregunta td {
    border: 0;
    padding: .3rem 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .9rem;
  }
  .matriz-pregunta td::before {
    content: attr(data-etiqueta);
    color: var(--suave);
    font-size: .8rem;
    flex: 1 1 auto;
    min-width: 0;
  }
  /* Todas las cajas del mismo ancho. Con `0 1 55%` cada una se encogía según
     lo largo que fuera su rótulo y la columna quedaba en escalera
     (Dr. León, 15-09-2026). */
  .matriz-pregunta td select, .matriz-pregunta td input {
    flex: 0 0 55%; min-width: 0; width: 55%; font-size: 16px;
  }

  /* El botón de quitar la fila, al final y sin rótulo que lo empuje. */
  .matriz-pregunta td.quitar { justify-content: flex-end; padding-top: .5rem; }
  .matriz-pregunta td.quitar::before { content: none; }
  .matriz-pregunta td.quitar button { flex: 0 0 auto; width: auto; }
}

/* ── Partes del Cuestionario del Paciente ────────────────────────────────── */
.lista-partes {
  display: grid;
  gap: 0.85rem;
}

.parte {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  /* Arriba, no al medio: las tarjetas no miden lo mismo —«Ten a mano» ocupa
     dos líneas en una y tres en otra— y con `center` el botón de cada una
     caía a distinta altura. Leídas en lista, los minutos y los botones tienen
     que formar una columna recta (Dr. León, 14-09-2026). */
  align-items: flex-start;
  justify-content: space-between;
  border: 1px solid var(--linea);
  border-radius: 8px;
  padding: 1.1rem 1.4rem;
  background: var(--carta);
  box-shadow: var(--sombra);
  transition: all 0.2s ease;
}

.parte:hover {
  border-color: var(--linea-fuerte);
  transform: translateY(-1px);
}

.parte .area {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento);
}

/* La columna de la derecha —los minutos, el porcentaje y el botón— mide lo
   mismo en todas: era un `div` suelto, así que su ancho lo daba el texto
   («5 min · 100%» contra «18 min · 100%») y el botón se corría de tarjeta en
   tarjeta. */
.parte .derecha {
  flex: 0 0 8.5rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  text-align: center;
}

.parte .derecha .ayuda { margin: 0; white-space: nowrap; }
.parte .derecha button { width: 100%; }

/* En el teléfono no hay sitio para dos columnas: una de 8,5 rem deja el texto
   en una tira de diez letras. La tarjeta se apila —el cuestionario arriba y,
   debajo, los minutos con su botón— y así las cuatro siguen midiendo igual. */
@media (max-width: 560px) {
  .parte { flex-direction: column; align-items: stretch; gap: .8rem; }
  .parte .derecha {
    flex: 1 1 auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
  }
  .parte .derecha button { width: auto; flex: 1 1 auto; min-height: 40px; }
}

.parte.hecho {
  border-color: var(--verde-borde);
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.06) 0%, var(--carta) 100%);
}

.parte.bloqueado {
  opacity: 0.5;
}

.necesitas {
  font-size: 0.84rem;
  color: var(--suave);
  margin: 0.3rem 0 0;
}

.pie {
  margin-top: 2rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
}

/* Pestañas de Navegación */
.pestanas {
  display: flex;
  gap: 0.6rem;
  margin: 0 0 1.5rem;
  flex-wrap: wrap;
}

button.pestana {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.65rem 1.1rem;
  text-align: left;
  border-radius: 6px;
  border: 1px solid var(--linea);
  background: var(--carta-elevada);
  cursor: pointer;
  transition: all 0.2s ease;
}

button.pestana strong {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--tinta);
}

button.pestana span {
  font-size: 0.78rem;
  color: var(--suave);
}

button.pestana:hover {
  border-color: var(--acento);
  background: var(--carta);
}

button.pestana.activa {
  border-color: var(--acento);
  background: var(--acento-suave);
}

button.pestana.activa strong {
  color: var(--acento);
}

/* Las cuatro del paciente van en una línea y sin descripción: eran cuatro
   tarjetas de dos renglones —título y explicación— que se comían media
   pantalla antes de llegar a la historia. Lo que decía cada una está en el
   `title`, al pasar el mouse. */
.pestanas.en-linea { gap: .4rem; margin-bottom: 1.1rem; }

.pestanas.en-linea button.pestana {
  flex-direction: row;
  align-items: center;
  padding: .42rem .85rem;
}

.pestanas.en-linea button.pestana strong { font-size: .86rem; }

@media (max-width: 560px) {
  /* En el teléfono se reparten el ancho en dos filas parejas, en vez de
     quedar una sola colgando. */
  .pestanas.en-linea button.pestana { flex: 1 1 auto; justify-content: center; }
}

/* El código del enlace, para leerlo y dictarlo sin equivocarse. */
.codigo-enlace {
  margin: 0 0 .45rem;
  display: flex;
  align-items: baseline;
  gap: .5rem;
  flex-wrap: wrap;
}

.codigo-enlace strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 1.15rem;
  letter-spacing: .08em;
  color: var(--acento);
}

/* Filtros en Tablero */
.filtros-tablero {
  margin-bottom: 1.2rem;
}

.filtros-tablero button.pestana span {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
}

.pestanas.dentro {
  margin-top: 0.5rem;
}

.pestanas.dentro button.pestana {
  padding: 0.45rem 0.85rem;
}

.pestanas.dentro button.pestana strong {
  font-size: 0.88rem;
}

/* ── Veredicto del Filtro de Admisión ───────────────────────────────────── */
.veredicto {
  border: 1px solid var(--linea);
  border-left: 4px solid var(--linea);
  border-radius: 8px;
  padding: 1.35rem 1.65rem;
  margin-bottom: 1.2rem;
  background: var(--carta);
  box-shadow: var(--sombra);
}

.veredicto.ROJO {
  border-left-color: var(--rojo);
  background: linear-gradient(90deg, var(--rojo-fondo) 0%, var(--carta) 100%);
}

.veredicto.AMBAR {
  border-left-color: var(--ambar);
  background: linear-gradient(90deg, var(--ambar-fondo) 0%, var(--carta) 100%);
}

.veredicto.VERDE {
  border-left-color: var(--verde);
  background: linear-gradient(90deg, var(--verde-fondo) 0%, var(--carta) 100%);
}

.veredicto .quien {
  margin: 0 0 0.2rem;
  font-size: 1.25rem;
  font-weight: 700;
  font-family: 'Poppins', system-ui, sans-serif;
}

.veredicto .titular {
  margin: 0 0 0.9rem;
  color: var(--suave);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sello {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
  color: #fff;
  font-weight: 700;
}

.sello.ROJO { background: var(--rojo); }
.sello.AMBAR { background: var(--ambar); }
.sello.VERDE { background: var(--verde); }

.banderas {
  list-style: none;
  margin: 0;
  padding: 0;
}

.banderas li {
  padding: 0.5rem 0;
  border-top: 1px solid var(--linea);
  font-size: 0.94rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.banderas li.ROJO strong { color: var(--rojo); }
.banderas .porque { color: var(--suave); font-size: 0.88rem; }
.banderas code {
  font-size: 0.72rem;
  color: var(--suave);
  background: var(--gris-chip);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

/* ── Tableros Médicos (Pacientes / Prospectos) ──────────────────────────── */
table.tablero {
  table-layout: auto;
  border-radius: 8px;
}

table.tablero td {
  vertical-align: top;
  padding: 0.75rem 0.85rem;
}

table.tablero tr.rojo td:first-child {
  box-shadow: inset 4px 0 var(--rojo);
}

table.tablero tr.rojo {
  background: var(--rojo-fondo);
}

table.tablero tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.id {
  font-size: 0.76rem;
  color: var(--acento);
  font-weight: 500;
}

.id.bajo {
  display: block;
  margin-top: 0.15rem;
  color: var(--suave);
}

.tag {
  display: inline-block;
  font-size: 0.74rem;
  padding: 0.15rem 0.5rem;
  border-radius: 3px;
  background: var(--gris-chip);
  color: var(--suave);
  margin-bottom: 0.2rem;
  font-family: 'Poppins', system-ui, sans-serif;
}

.tag.rojo { background: var(--rojo-fondo); color: var(--rojo); }
.tag.ambar { background: var(--ambar-fondo); color: var(--ambar); }

.tablero .barra-avance {
  width: 7rem;
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.5rem;
}

/* ── Consulta Clínica en Vivo (3 Médicos) ────────────────────────────────── */
.dos-tablas h4 {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--suave);
  margin: 1.5rem 0 0.5rem;
}

.cruce {
  background: rgba(0, 255, 136, 0.035);
}

.grupo {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  color: var(--acento);
  margin: 1.2rem 0 0.2rem;
  font-weight: 600;
}

.parte-clinica {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.6rem 0 0.35rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--linea);
  color: var(--tinta);
  font-family: 'Poppins', system-ui, sans-serif;
}

/* Columnas de escritura médica durante videollamada */
table td.notas {
  padding: 0.25rem;
}

table td.notas textarea {
  min-height: 2.3rem;
  font-size: 0.86rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
}

table td.notas textarea:hover {
  border-color: var(--linea-fuerte);
  background: var(--carta-elevada);
}

table td.notas textarea:focus {
  background: var(--carta);
  border-color: var(--acento);
  box-shadow: 0 0 0 2px var(--acento-suave);
}

table td.notas textarea.guardando {
  border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-suave);
}

table td.notas textarea.guardado {
  border-color: var(--verde);
  background: var(--verde-fondo);
}

table td.notas textarea.falla {
  border-color: var(--rojo);
}

table td.notas.vacia {
  color: var(--suave);
}

table tr.sin-cubrir td:first-child {
  box-shadow: inset 4px 0 var(--ambar);
}

.cifra {
  font-size: 0.84rem;
  white-space: nowrap;
}

.cifra.mal { color: var(--ambar); }
.cifra.bien { color: var(--verde); }

button.sin-novedad {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  padding: 0.15rem 0.45rem;
  color: var(--suave);
  border: 1px solid var(--linea);
  background: transparent;
}

td.escribible:hover button.sin-novedad,
td.escribible:focus-within button.sin-novedad {
  border-color: var(--linea-fuerte);
  color: var(--tinta);
}

/* Bloques del Plan Clínico */
.bloque-plan {
  border-left: 4px solid var(--linea-fuerte);
  background: var(--carta);
  border-radius: 8px;
  padding: 1.35rem 1.65rem;
  margin-bottom: 1.2rem;
  box-shadow: var(--sombra);
}

.bloque-plan.B1 { border-left-color: var(--b1); }
.bloque-plan.B2 { border-left-color: var(--b2); }
.bloque-plan.B3 { border-left-color: var(--b3); }
.bloque-plan.B4 { border-left-color: var(--b4); }
.bloque-plan.B5 { border-left-color: var(--b5); }
.bloque-plan.B6 { border-left-color: var(--b6); }

.cabecera-bloque {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.cabecera-bloque h3 {
  margin: 0;
  font-size: 1.2rem;
}

.sigla {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  padding: 0.15rem 0.45rem;
  border-radius: 3px;
  color: #070B10;
  font-weight: 700;
  background: var(--linea-fuerte);
}

.B1 .sigla { background: var(--b1); }
.B2 .sigla { background: var(--b2); }
.B3 .sigla { background: var(--b3); }
.B4 .sigla { background: var(--b4); }
.B5 .sigla { background: var(--b5); }
.B6 .sigla { background: var(--b6); }

.duenio {
  font-size: 0.84rem;
  color: var(--suave);
  margin: 0.2rem 0 0.6rem;
  font-family: 'Poppins', system-ui, sans-serif;
}

.B1 .duenio { color: var(--b1); }
.B2 .duenio { color: var(--b2); }
.B3 .duenio { color: var(--b3); }
.B4 .duenio { color: var(--b4); }
.B5 .duenio { color: var(--b5); }
.B6 .duenio { color: var(--b6); }

/* Avisos flotantes de sincronización simultánea */
.novedad {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%);
  background: var(--carta-elevada);
  border: 1px solid var(--acento);
  border-radius: 6px;
  padding: 0.65rem 1.1rem;
  font-size: 0.9rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.6);
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--tinta);
}

/* Indicadores de Laboratorio */
.lab.alto, .lab.bajo {
  display: inline-block;
  width: 1.25rem;
  font-weight: 700;
  font-family: 'Poppins', system-ui, sans-serif;
}
.lab.alto { color: var(--rojo); }
.lab.bajo { color: var(--acento); }

/* Enlaces de Pacientes */
.enlace-mes {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--suave);
  margin: 0.35rem 0 0;
  word-break: break-all;
}

input.enlace-mes {
  width: 100%;
  padding: 0.6rem 0.85rem;
  background: var(--carta-elevada);
  border: 1px solid var(--linea-fuerte);
  border-radius: 6px;
  color: var(--acento);
  font-family: 'Poppins', system-ui, sans-serif;
}

/* ══════════════════════════════════════════════════════════════════════════
   PORTADA · Andros Performance
   Anton en versalitas para los titulares, con la parte que importa en lima.
   La etiqueta en recuadro con filo lima es el recurso de la marca en sus
   piezas: acá hace de rótulo de sección. Nada brilla y nada va centrado.
   ══════════════════════════════════════════════════════════════════════════ */

/* La portada tenía el fondo plano: era la única página sin resplandor. */
.es-portada { background: var(--papel); background-image: var(--fondo-resplandor);
  background-attachment: fixed; }

.barra-portada {
  border-bottom: 1px solid var(--linea);
  background: var(--papel);
  position: sticky;
  top: 0;
  z-index: 30;
}

.barra-portada .envoltorio {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 2rem;
  max-width: 76rem;
}

.barra-portada .marca-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
}

.barra-portada .logo-texto {
  font-family: 'Poppins', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.14em;
  color: var(--tinta);
}

.barra-portada .logo-texto span { color: var(--suave); font-weight: 400; }

.nav-links { display: flex; align-items: center; gap: 1.5rem; }

.nav-links a {
  font-size: 0.85rem;
  color: var(--suave);
  text-decoration: none;
  transition: color .15s ease;
}

.nav-links a:hover { color: var(--tinta); }

/* ── la columna ─────────────────────────────────────────────────────────── */
.envoltorio.angosto-web {
  max-width: 62rem;
  margin: 0 auto;
  padding: 0 2rem;
}

.bloque {
  border-top: 1px solid var(--linea);
  padding: 4.5rem 0;
}

.bloque.hero { border-top: 0; padding: 5rem 0 4.5rem; }

/* ── el rótulo en recuadro, el recurso de la marca ──────────────────────── */
.tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--acento);
  border: 1px solid var(--acento-borde);
  border-radius: 4px;
  padding: 0.4rem 0.8rem;
  margin: 0 0 1.6rem;
}

/* ── titulares ──────────────────────────────────────────────────────────── */
.es-portada h1,
.es-portada h2 {
  font-family: 'Anton', 'Poppins', system-ui, sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  line-height: 1.03;
  color: var(--tinta);
  text-wrap: balance;
}

/* Lo que la marca pinta de lima es la parte que importa, no el titular
   entero: si todo es lima, nada resalta. */
.es-portada h1 em,
.es-portada h2 em { font-style: normal; color: var(--acento); }

.es-portada h1 {
  font-size: clamp(2.6rem, 7vw, 4.6rem);
  margin: 0 0 1.5rem;
}

.es-portada h2 {
  font-size: clamp(1.8rem, 4vw, 2.7rem);
  margin: 0 0 2rem;
}

.bajada {
  font-size: 1.08rem;
  line-height: 1.6;
  color: var(--suave);
  max-width: 46ch;
  margin: 0 0 2rem;
}

.bajada strong { color: var(--tinta); font-weight: 600; }

.acciones { display: flex; flex-wrap: wrap; gap: 0.7rem; }

.letra-chica {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  color: var(--suave-tenue);
  margin: 1.6rem 0 0;
}

/* ── lo que se trabaja ──────────────────────────────────────────────────── */
.marcas {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15.5rem, 1fr));
  gap: 0;
}

.marcas li {
  border-top: 1px solid var(--linea);
  padding: 1.4rem 1.75rem 1.4rem 0;
  color: var(--suave);
  font-size: 0.92rem;
  line-height: 1.6;
}

.marcas li span {
  display: block;
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--tinta);
  margin-bottom: 0.45rem;
}

/* Un filo lima corto sobre el nombre: la marca usa el recuadro, acá basta
   con el trazo para no repetir el recurso seis veces. */
.marcas li span::before {
  content: "";
  display: block;
  width: 1.5rem;
  height: 2px;
  background: var(--acento);
  margin-bottom: 0.7rem;
}

/* ── los pasos ──────────────────────────────────────────────────────────── */
.pasos {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pasos li { padding: 1.6rem 1.75rem 1.6rem 0; border-top: 1px solid var(--linea); }
.pasos li:nth-child(odd) { border-right: 1px solid var(--linea); padding-right: 2.25rem; }
.pasos li:nth-child(even) { padding-left: 2.25rem; }
.pasos li:nth-last-child(-n+2) { border-bottom: 1px solid var(--linea); }

.paso-n {
  display: block;
  font-family: 'Anton', system-ui, sans-serif;
  font-size: 1.5rem;
  color: var(--oliva);
  margin-bottom: 0.5rem;
}

.pasos h3 { font-weight: 600; font-size: 1rem; margin: 0 0 0.4rem; color: var(--tinta); }
.pasos p { margin: 0; color: var(--suave); font-size: 0.9rem; line-height: 1.6; }

/* ── el equipo ──────────────────────────────────────────────────────────── */
.equipo-lista { list-style: none; margin: 0; padding: 0; }

.equipo-lista li {
  display: grid;
  gap: 0.3rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--linea);
}

.equipo-lista li:last-child { border-bottom: 1px solid var(--linea); }

.equipo-lista .rol {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento);
}

.equipo-lista .nombre { font-weight: 600; font-size: 1.05rem; color: var(--tinta); }
.equipo-lista .desc { color: var(--suave); font-size: 0.93rem; line-height: 1.6; }

/* ── para quién sí y para quién no ──────────────────────────────────────── */
.dos-columnas {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5rem;
}

.col-titulo {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--linea);
}

.col-titulo.si { color: var(--acento); }
.col-titulo.no { color: var(--suave-tenue); }

.lista-simple { list-style: none; margin: 0; padding: 0; }

.lista-simple li {
  position: relative;
  padding: 0 0 0.9rem 1.1rem;
  color: var(--suave);
  font-size: 0.93rem;
  line-height: 1.55;
}

.lista-simple li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 5px;
  height: 5px;
  background: var(--oliva);
}

.col-titulo.si + .lista-simple li::before { background: var(--acento); }

/* ── cierre y pie ───────────────────────────────────────────────────────── */
.bloque.cierre { padding: 4.5rem 0 5rem; }
.bloque.cierre h2 { margin-bottom: 2rem; }

.pie-portada { border-top: 1px solid var(--linea); padding: 2.5rem 0 3.5rem; }
/* Centrado: es la firma del sitio, no un párrafo de lectura. Todo lo demás
   sigue alineado a la izquierda. */
.pie-portada .envoltorio { text-align: center; }
.pie-portada p { margin: 0 0 0.5rem; color: var(--suave-tenue); font-size: 0.85rem; }
.pie-portada a { color: var(--suave-tenue); text-decoration: none; border-bottom: 1px solid var(--linea); }
.pie-portada a:hover { color: var(--tinta); }

/* En el teléfono nada puede desbordar a lo ancho: la página no se mueve de
   lado, y lo que no entra se ajusta o hace scroll dentro de su propia caja. */
html, body { max-width: 100%; overflow-x: hidden; }

/* Safari en el iPhone agranda por su cuenta el texto de los bloques que
   considera anchos —«inflación de texto»—, y por eso en la misma tabla una
   respuesta salía más grande que la de al lado. El tamaño lo decidimos acá
   (Dr. León, 14-09-2026). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
img, svg { max-width: 100%; height: auto; }

@media (max-width: 760px) {
  .envoltorio.angosto-web { padding: 0 1.25rem; }
  .barra-portada .envoltorio { padding: .9rem 1.25rem; gap: .75rem; }
  /* La barra no se parte en dos líneas: la marca se encoge y el botón se
     queda entero, que es lo que hay que poder tocar. */
  .barra-portada .logo-texto { font-size: .82rem; letter-spacing: .1em; }
  .barra-portada .marca-logo img { width: 24px; height: 24px; }
  .nav-links { gap: .8rem; }
  .nav-links a { font-size: .8rem; }
  .acciones .boton { flex: 1 1 100%; text-align: center; }
  .bloque { padding: 3rem 0; }
  .pasos, .dos-columnas { grid-template-columns: minmax(0, 1fr); }
  .pasos li:nth-child(odd) { border-right: 0; padding-right: 0; }
  .pasos li:nth-child(even) { padding-left: 0; }
  .pasos li:nth-last-child(-n+2) { border-bottom: 0; }
  .pasos li:last-child { border-bottom: 1px solid var(--linea); }
  .dos-columnas { gap: 2rem; }
}

/* Responsividad */
@media (max-width: 768px) {
  .envoltorio {
    padding: 1.5rem 1rem 3rem;
  }
  /* `.envoltorio.angosto` son dos clases y le ganaba a la línea de arriba: el
     cuestionario del paciente seguía con 3,5 rem de aire arriba y el botón de
     volver quedaba colgando lejos de la barra (Dr. León, 14-09-2026). */
  .envoltorio.angosto { padding-top: 1.5rem; }
  .barra-portada .envoltorio {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .nav-links {
    width: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
  }
  .portada-hero {
    padding: 2.5rem 0.5rem 2rem;
  }
  .top {
    position: static;
    margin-bottom: 1.2rem;
  }
}

/* ==========================================================================
   Usabilidad — revisión del 3 de septiembre de 2026
   Ajustes sobre el rediseño: nada de esto cambia qué significa un color, sólo
   qué se lee primero.
   ========================================================================== */

/* 1 · El tablero se lee por el nombre del paciente, no por su código. El
   nombre manda; el código y el plan bajan de tono y de tamaño. */
.tablero tbody td:first-child strong { font-size: 1.02rem; letter-spacing: -.01em; }
.tablero .id.bajo { display: block; margin-top: .15rem; font-size: .74rem;
  color: var(--suave-tenue); letter-spacing: .02em; }

/* 2 · Las filas se distinguen al pasar el ratón: con nueve pacientes y ocho
   columnas, el ojo pierde el renglón a mitad de camino. */
.tablero tbody tr { transition: background .12s ease; }
.tablero tbody tr:hover { background: var(--acento-suave); }
.tablero tbody td { vertical-align: middle; }

/* 3 · Una acción por fila es la principal; las demás no compiten. En el
   tablero, «Abrir» es la de siempre y «Habilitar…» la excepcional. */
.tablero td:last-child { white-space: nowrap; }
.tablero td:last-child button + button,
.tablero td:last-child button + a { margin-left: .35rem; }

/* 4 · Los números de las columnas se alinean por la coma: comparar 74 con 8
   de un vistazo exige que compartan el eje. */
.tablero td:nth-child(3), .tablero td:nth-child(4), .tablero td:nth-child(5),
.tablero td:nth-child(6) { font-variant-numeric: tabular-nums; }

/* 5 · «Sin consulta todavía» y demás estados vacíos: se leen como ausencia,
   no como dato. */
.tablero .ayuda { color: var(--suave-tenue); font-style: normal; }

/* 6 · Foco visible en todo lo que se puede tocar con teclado. Un formulario
   clínico se llena a golpe de tabulador. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

/* 7 · Quien pide menos movimiento, no lo tiene. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important;
    animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 8 · En el teléfono, todo lo que se toca mide al menos 44 px de alto: es el
   dedo, no el ratón, y el paciente llena sus cuestionarios desde el móvil.
   Los seis botones de «Revisar» y «Subir» quedaban en 37. */
@media (max-width: 640px) {
  button, a.boton, input[type="file"] { min-height: 44px; }
  button.chico { min-height: 40px; }
  .pie { gap: .5rem; }
  /* Y el formulario, a una columna: dos campos por fila en 375 px no se
     llenan, se adivinan. */
  .campo, .pregunta { min-width: 0; }
}

/* 9 · La pestaña activa: el texto de ayuda heredaba el color claro del tema
   oscuro y quedaba en 2.9 de contraste sobre el fondo pálido del tema claro.
   Los dos textos salen ahora de tokens que existen en los dos temas. */
button.pestana.activa { color: var(--tinta); }
button.pestana.activa strong { color: var(--acento); }
button.pestana.activa span { color: var(--suave); }

/* 10 · La escala visual de una pregunta (Bristol, color de orina). Se mira
   antes de contestar, así que va entre la ayuda y las opciones, y ocupa el
   ancho: en el teléfono se desplaza de costado en vez de encogerse hasta ser
   ilegible. */
.escala-visual { margin: .7rem 0 .9rem; overflow-x: auto; color: var(--tinta);
  background: var(--carta-elevada, var(--carta)); border: 1px solid var(--linea);
  border-radius: 10px; padding: .6rem; }
.escala-visual img { display: block; width: 100%; min-width: 30rem; height: auto; }
@media (max-width: 640px) { .escala-visual img { min-width: 26rem; } }

/* El botón de empezar o seguir la consulta va **dentro** de la línea que dice
   si está lista: es la única frase que decide si se puede, y tenerlos
   separados obligaba a subir y bajar para saberlo. */
.documento .listo,
.documento .bloqueo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
}

.junto-al-estado { margin-left: auto; }

@media (max-width: 640px) {
  .junto-al-estado { margin-left: 0; width: 100%; }
  .junto-al-estado button { width: 100%; }
}

/* ── las tres consultas del plan ────────────────────────────────────────────
   Una tarjeta por consulta, con su estado a la derecha del título. Lo que se
   puede hacer ahora está adentro de su tarjeta y en ningún otro sitio. */
.consultas-del-plan { display: grid; gap: 1rem; margin-bottom: 1.5rem; }

.cabeza-consulta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.cabeza-consulta h2 { margin: 0; }

.sello-consulta {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .28rem .6rem;
  border-radius: 4px;
  border: 1px solid var(--linea-fuerte);
  color: var(--suave);
  white-space: nowrap;
}

.sello-consulta.hecha  { color: var(--suave-tenue); }
.sello-consulta.abierta { color: #000; background: var(--acento); border-color: var(--acento); }
.sello-consulta.lista  { color: var(--acento); border-color: var(--acento-borde); }

/* ── cómo se movió cada bandera, mes a mes ──────────────────────────────────
   En cada celda hay dos cosas distintas: **lo que contestó** ese mes y **lo
   que se anotó** al lado. Iban como dos `span` sin estilo, uno pegado al otro:
   se leía «Sí · 3 vecesLo relaciona con el trabajo» y no se podía comparar un
   mes con el siguiente (Dr. León, 14-09-2026). Ahora la respuesta va sola en
   su renglón y el comentario debajo, más chico y con su marca. */
table.movimiento td.mes { vertical-align: top; min-width: 11rem; }

table.movimiento .valor {
  display: block;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

table.movimiento .apunte {
  display: block;
  margin-top: .35rem;
  padding-left: .55rem;
  border-left: 2px solid var(--linea-fuerte);
  font-size: .82rem;
  line-height: 1.45;
  color: var(--suave);
  white-space: normal;
}

/* La primera columna —qué bandera es y de quién— también llevaba el nombre
   pegado al punto de color. */
table.movimiento td:first-child { min-width: 13rem; }
table.movimiento td:first-child .punto { margin-right: .4rem; }

@media (max-width: 560px) {
  /* En el teléfono cada fila es una tarjeta y cada celda una línea con su
     rótulo —BASAL, MES 2— a la izquierda. La respuesta va al lado del rótulo
     y el comentario **debajo, de lado a lado**: dejados como dos columnas,
     «deseo sexual 5/10» salía cortado en tres renglones de dos palabras. */
  table.movimiento td.mes, table.movimiento td:first-child { min-width: 0; }
  table.movimiento td.mes { flex-wrap: wrap; }
  table.movimiento .valor { flex: 1 1 auto; }
  table.movimiento .apunte {
    flex: 1 0 100%;
    margin-top: .3rem;
    padding: 0 0 0 .55rem;
    text-align: left;
  }
}

/* ── la ventana del consentimiento ──────────────────────────────────────────
   Va antes de la primera pregunta y tapa todo: lo que sigue son datos de
   salud, y la persona tiene que poder leer esto sin nada más compitiendo. */
.ventana-fondo {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(0, 0, 0, .82);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}

.ventana {
  background: var(--carta);
  border: 1px solid var(--linea-fuerte);
  border-radius: 10px;
  padding: 1.75rem;
  width: min(44rem, 100%);
  max-height: min(85vh, 52rem);
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.ventana h2 { margin: 0; font-size: 1.35rem; }
.ventana > .ayuda { margin: 0; }

/* Lo único que hace scroll es el texto: la casilla y los botones se quedan a
   la vista, para que nadie tenga que buscarlos al final de trece puntos. */
.ventana-cuerpo {
  overflow-y: auto;
  padding-right: .75rem;
  border-top: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.punto-consentimiento { margin-bottom: 1.1rem; }

.punto-consentimiento h3 {
  margin: 0 0 .25rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--acento);
}

.punto-consentimiento p {
  margin: 0;
  font-size: .92rem;
  line-height: 1.55;
  color: var(--suave);
}

.ventana .declaracion {
  margin: 1.5rem 0 .75rem;
  padding: 1rem;
  border-left: 2px solid var(--acento);
  background: var(--acento-suave);
  color: var(--tinta);
  font-size: .95rem;
  line-height: 1.55;
}

.ventana-pie {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  align-items: center;
}

@media (max-width: 620px) {
  .ventana { padding: 1.25rem; max-height: 92vh; }
  .ventana-pie { flex-direction: column-reverse; align-items: stretch; }
}

/* La fila que se abre debajo de un lead con lo que alcanzó a llenar. */
.tablero tr.desplegada > td {
  background: var(--papel-suave);
  border-top: 1px solid var(--acento-borde);
  padding: 1rem 1.25rem 1.25rem;
}

.tablero tr.desplegada:hover > td { background: var(--papel-suave); }

/* Los tres campos de «cambiar mi contraseña», uno debajo de otro. */
.campo-clave { display: block; margin: 0 0 .9rem; max-width: 22rem; }
.campo-clave span {
  display: block;
  font-size: .8rem;
  font-weight: 500;
  color: var(--suave);
  margin-bottom: .35rem;
}
.campo-clave input { width: 100%; }

/* Una tabla que el paciente llenó por filas, dibujada dentro de la celda de
   su pregunta: el recordatorio de 24 h, la semana de entrenamiento, la
   intensidad del dolor por zona. Aplanada a texto no se lee. */
.tabla-adentro { width: 100%; border-collapse: collapse; margin: .2rem 0; }
.tabla-adentro th, .tabla-adentro td {
  padding: .35rem .6rem;
  border-bottom: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
  font-size: .86rem;
}
.tabla-adentro thead th {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--suave-tenue);
}
.tabla-adentro tbody th { color: var(--tinta); font-weight: 600; white-space: nowrap; }
.tabla-adentro tbody td { color: var(--suave); }
.tabla-adentro tr:last-child th, .tabla-adentro tr:last-child td { border-bottom: 0; }

/* ── el consentimiento informado ──────────────────────────────────────────
   Un documento legal se lee distinto de un formulario: renglón más suelto,
   ancho de lectura y los numerales con su número a la vista. Que se vea como
   lo que es —un documento— importa: es lo que la persona está firmando. */
.documento-legal { border:1px solid var(--linea); border-radius:10px;
  padding:1.25rem 1.5rem; margin:1rem 0; max-height:60vh; overflow-y:auto;
  background:var(--carta-elevada); }
.documento-legal h2 { font-size:.95rem; letter-spacing:.06em;
  text-transform:uppercase; margin:1.5rem 0 .5rem; }
.documento-legal h2:first-child { margin-top:0; }
.documento-legal p, .documento-legal li { line-height:1.65; max-width:70ch; }
.documento-legal ol.numerales { padding-left:1.5rem; }
.documento-legal ol.numerales li { margin:.9rem 0; }
.documento-legal .manifestacion { border-left:3px solid var(--acento);
  padding-left:.9rem; }

/* La casilla de aceptar: grande y con el texto al lado, no debajo. */
label.casilla { display:flex; gap:.6rem; align-items:flex-start;
  margin:1rem 0; cursor:pointer; font-weight:500; }
label.casilla input { margin-top:.15rem; flex:none; }

.pie-legal { font-size:.78rem; color:var(--suave); line-height:1.5;
  max-width:70ch; margin:.5rem 0 0; }

/* ── Teléfono y tablet: la consola también se abre desde ahí ───────────────
   Pedido del Dr. León (12-09-2026): los tres entran desde el iPad o el
   teléfono. Lo que rompía: los campos medían 14,7 px y el iPhone acercaba la
   página al tocarlos —y ya acercada, media pantalla queda fuera—; y la barra
   de arriba, con siete botones y el nombre, se comía 180 px de alto. */
@media (max-width: 820px) {
  /* Con los mismos selectores de arriba: `input` a secas pierde contra
     `input[type="password"]`, y los campos se quedaban en 14,7 px. */
  input[type="text"], input[type="number"], input[type="password"],
  input[type="time"], input[type="date"], input[type="email"],
  input[type="search"], input[type="tel"], select, textarea { font-size: 16px; }
  .campo-clave { max-width: none; }
}

@media (max-width: 640px) {
  .top { gap: .45rem; padding: .6rem .7rem; margin-bottom: 1rem; }
  /* El nombre y el rol están en «Mi cuenta»: en el teléfono no ocupan la
     barra. */
  .top .quien-soy { display: none; }
  .top .marca { font-size: .8rem; width: 100%; }
  .top .crece { display: none; }
  .top button.chico { flex: 1 1 auto; min-height: 40px; }
}

/* En el teléfono, una tabla de seis columnas no se lee: se desplaza de lado y
   el botón de la última columna —«Abrir», el que se usa— queda fuera de la
   vista. Cada fila pasa a ser una tarjeta, y cada dato lleva delante el nombre
   de su columna, que `etiquetarCeldas` copia de la cabecera.
   No se esconde ninguna columna: se apilan. */
@media (max-width: 560px) {
  /* En el teléfono, cada pregunta tenía 53 px de relleno y 50 px de número
     antes de empezar: de 375 px de pantalla le quedaban 239 al contenido, y
     ahí adentro entraba una tabla de seis columnas (Dr. León, 14-09-2026). */
  .tarjeta { padding: 1rem 1rem; }
  .fila { gap: .55rem; }
  .fila > .n { min-width: 1.5rem; font-size: .75rem; }

  /* Las tablas de una pregunta se arman solas, más arriba, midiendo la
     tarjeta y no la ventana: si además entraran acá, la última celda perdería
     su rótulo —«cómo terminaste»— por la regla de los botones de fila. */
  .tabla-envoltorio:not(.matriz-pregunta) table { display: block; }
  .tabla-envoltorio:not(.matriz-pregunta) thead { display: none; }
  .tabla-envoltorio:not(.matriz-pregunta) tbody, .tabla-envoltorio:not(.matriz-pregunta) tr { display: block; }
  .tabla-envoltorio:not(.matriz-pregunta) tr {
    border: 1px solid var(--linea);
    border-radius: 8px;
    padding: .7rem .85rem;
    margin-bottom: .7rem;
    background: var(--carta);
  }
  .tabla-envoltorio:not(.matriz-pregunta) td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: .9rem;
    border: 0;
    padding: .25rem 0;
    white-space: normal;
    text-align: right;
  }
  .tabla-envoltorio:not(.matriz-pregunta) td[data-etiqueta]::before {
    content: attr(data-etiqueta);
    color: var(--suave);
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-align: left;
    flex: 0 0 auto;
  }
  /* La primera celda es el nombre: manda, y va sola en su renglón. */
  .tabla-envoltorio:not(.matriz-pregunta) td:first-child { display: block; text-align: left; }
  .tabla-envoltorio:not(.matriz-pregunta) td:first-child::before { display: none; }
  /* Y los botones de la fila, anchos, al final de la tarjeta. */
  .tabla-envoltorio:not(.matriz-pregunta) td:last-child { display: flex; justify-content: flex-end;
    flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
  .tabla-envoltorio:not(.matriz-pregunta) td:last-child::before { display: none; }
  .tabla-envoltorio:not(.matriz-pregunta) td:last-child button,
  .tabla-envoltorio:not(.matriz-pregunta) td:last-child a.boton { flex: 1 1 auto; }
}

/* El desplegable, con su flecha dibujada por nosotros. En el teléfono la
   flecha del sistema casi no se ve sobre fondo oscuro, y «Plan de 3 meses»
   parecía un texto fijo en vez de una lista para elegir (Dr. León,
   12-09-2026). */
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.4rem;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' fill='none' stroke='%23D6EB42' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .85rem center;
  background-size: .8rem;
}
select:disabled { background-image: none; }

/* ── Las láminas del cuestionario de medidas ────────────────────────────── */
/* La guía dejó de ser una página aparte: el dibujo va dentro de su zona, en el
   propio cuestionario (Dr. León, 17-09-2026). */
.figura-guia { margin: .8rem 0 1.2rem; }
.figura-guia img { display: block; width: 100%; max-width: 520px; height: auto; margin: 0 auto; border-radius: 12px; }

/* ── Lo que se leyó del PDF del laboratorio ─────────────────────────────── */
.lectura-lab { background: var(--carta-elevada); }
.lectura-lab .area { margin: 1rem 0 .2rem; }
.lectura-lab td:first-child, .lectura-lab th:first-child { width: 2.2rem; text-align: center; }
.lectura-lab .ayuda { font-size: .82rem; }

/* Lo que se copia para el generador de rutinas, cuando el navegador no deja
   escribir en el portapapeles. */
.para-la-rutina { width: 100%; margin-top: .6rem; font-family: ui-monospace, monospace;
                  font-size: .78rem; }

/* ── qué quiere mejorar ─────────────────────────────────────────────────────
   La primera pantalla después de firmar. Tarjetas con dibujo: se recorre con
   los ojos antes que con la lectura, y el paciente encuentra el suyo sin leer
   catorce frases (Dr. León, 22-09-2026). */
.objetivos {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: .7rem;
  margin: .6rem 0 1.4rem;
}

.objetivo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .45rem;
  text-align: left;
  padding: 1rem;
  border-radius: 10px;
  border: 1px solid var(--linea);
  background: rgba(255, 255, 255, 0.02);
  color: var(--suave);
  cursor: pointer;
  font: inherit;
  transition: all .15s ease;
}

.objetivo:hover:not(:disabled) { border-color: var(--acento); background: rgba(255, 255, 255, 0.05); }

.objetivo.puesto {
  border-color: var(--acento);
  background: var(--acento-suave);
  color: var(--tinta);
}

.objetivo.al-tope { opacity: .4; cursor: not-allowed; }

.dibujo-objetivo { width: 30px; height: 30px; color: var(--acento); flex: none; }
.objetivo .nombre { font-size: .95rem; font-weight: 500; color: var(--tinta); line-height: 1.3; }
.objetivo .que-es { font-size: .82rem; line-height: 1.4; color: var(--suave); }

.objetivo-principal { margin: 0 0 1rem; }
.pregunta-corta {
  font-size: 1rem;
  color: var(--tinta);
  margin: 1.2rem 0 .3rem;
}

/* La equivalencia debajo del número: se contesta convirtiendo, sin calculadora. */
.con-equivalencia { display: flex; flex-direction: column; gap: .3rem; }
.equivalencia {
  margin: 0;
  font-size: .82rem;
  color: var(--suave);
  line-height: 1.4;
}

/* ── los tramos de un cuestionario largo ────────────────────────────────────
   Dieciocho minutos seguidos es donde la gente se cansa y empieza a contestar
   rápido. En tres paradas, no (Dr. León, 22-09-2026). */
.tramos {
  /* La tarjeta es un flex de dos columnas; los tramos van debajo de las dos,
     a todo el ancho. Metidos como tercera columna, el nombre de cada tramo se
     partía en cuatro renglones. */
  flex-basis: 100%;
  order: 3;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--linea);
}

.tramo {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9rem;
  padding: .35rem 0;
}

.tramo .que { flex: 1; color: var(--tinta); }
.tramo .cuanto {
  font-size: .8rem;
  color: var(--suave);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tramo.hecho .que { color: var(--suave); }
.tramo.hecho .que::before { content: "✓ "; color: var(--acento); }
.tramo.bloqueado { opacity: .45; }

/* El plan, dentro del portal: se lee acá mismo, sin salir a otra página. */
.el-plan {
  width: 100%;
  height: 70vh;
  min-height: 420px;
  border: 1px solid var(--linea);
  border-radius: 8px;
  background: #fff;
  margin-top: 1rem;
}
@media (max-width: 640px) { .el-plan { height: 60vh; } }