/* ═══════════════════════════════════════════════════════════════════════════
   digestivo-cola — la hoja de estilo (copiada de derma-cola el 2026-10-21), compartida por el panel, la entrada y las
   páginas del paciente (formulario y respuestas a la oferta).

   El criterio: esto lo mira alguien de recepción entre llamada y llamada, con
   un paciente esperando al otro lado. Tiene que leerse de un vistazo y no
   cansar a las siete de la tarde. Calma antes que color, jerarquía antes que
   adorno.

   🔑 Desde el 2026-10-02 lleva la MISMA marca que el portal del centro
      (portal-cma/static/estilo.css): letra Figtree dentro del repo, azul Pantone
      285 de la ficha del Centro Médico, la banda azul con el logo en blanco y la
      cruz difuminada de fondo. Quien salta del portal a la cola no debe notar que
      ha cambiado de programa. Si se toca la marca allí, se toca aquí.

   🔑 Los nombres de las variables NO se han cambiado (--tinta, --acento,
      --rojo-flojo…): panel.js las usa en estilos en línea.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face {
  font-family: "Figtree";
  src: url("/fuentes/figtree.woff2") format("woff2");   /* licencia OFL: fuentes/OFL.txt */
  font-weight: 300 900;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light;

  /* marca: azul Pantone 285 #0072B0, medido sobre Logos.jpeg */
  --marca: #0072b0;
  --marca-fuerte: #005a8c;
  --banda: #0072b0;
  --banda-luz: #1a8fd0;

  /* tinta y papel; los grises tiran un punto hacia el azul, todos de la misma familia */
  --tinta: #18222d;          /* texto principal      15:1 sobre papel */
  --tinta-media: #3e4a57;    /* subtítulos           9:1 */
  --suave: #56606c;          /* apoyo, nunca datos   6.4:1 */
  --tenue: #8a939e;          /* solo adorno: nunca texto que haya que leer */
  --linea: #e2e6eb;
  --linea-fuerte: #cdd4dc;
  --fondo: #f3f5f8;
  --papel: #fff;
  --papel-hundido: #f6f8fa;

  --acento: #0072b0;
  --acento-vivo: #005a8c;    /* el hover: oscurece, no aclara */
  --acento-flojo: #e9f3fa;
  --rojo: #b52424;   --rojo-flojo: #fdeded;   --rojo-linea: #f0c2c2;
  --verde: #0a7d45;  --verde-flojo: #e6f5ec;  --verde-linea: #b6e0c7;
  --ambar: #8f4f05;  --ambar-flojo: #fdf3e3;  --ambar-linea: #efd3a6;
  --gris-flojo: #edf0f3;

  /* Ritmo de 4 px. Todo lo que separa sale de aquí. */
  --e1: 4px; --e2: 8px; --e3: 12px; --e4: 16px; --e5: 24px; --e6: 32px; --e7: 48px;
  /* Un solo juego de esquinas: 12 contenedores, 8 controles, redondo las pastillas. */
  --r: 12px; --r-chico: 8px;
  /* sombras teñidas del azul de la marca, no negras: sobre fondo frío el negro ensucia */
  --sombra: 0 1px 2px rgba(16,42,67,.05);
  --sombra-media: 0 1px 2px rgba(16,42,67,.05), 0 8px 24px -6px rgba(16,42,67,.10);
  --sombra-alta: 0 2px 4px rgba(16,42,67,.06), 0 24px 56px -12px rgba(16,42,67,.28);
  --paso: .16s cubic-bezier(.23, 1, .32, 1);
  --marca-agua: .14;
  --letra: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
}

/* --- modo oscuro ----------------------------------------------------------------
   Solo en el panel y en la entrada (llevan `class="sigue-sistema"` en <html>). Las
   páginas del paciente se quedan siempre en claro: las abre gente desde móviles que
   no controlamos, y un formulario médico tiene que verse igual en todos. El
   interruptor guarda la elección en localStorage('tema'), la misma clave que el
   portal. Los valores son los del portal. */
@media (prefers-color-scheme: dark) {
  :root.sigue-sistema:not([data-tema="claro"]) {
    color-scheme: dark;
    --marca: #6cb8e6; --marca-fuerte: #8ccbf0; --banda: #004f7c; --banda-luz: #0068a3;
    --tinta: #e9edf1; --tinta-media: #c3cad2; --suave: #a7b0ba; --tenue: #7f8995;
    --linea: #29313a; --linea-fuerte: #39424d;
    --fondo: #0f1318; --papel: #171c22; --papel-hundido: #1b2128;
    --acento: #6cb8e6; --acento-vivo: #8ccbf0; --acento-flojo: #14293a;
    --rojo: #f38b8b;  --rojo-flojo: #2d1618;  --rojo-linea: #4d2528;
    --verde: #5fd394; --verde-flojo: #10281d; --verde-linea: #1f4a35;
    --ambar: #f2b45c; --ambar-flojo: #2c2110; --ambar-linea: #4d3a17;
    --gris-flojo: #20262d;
    --sombra: 0 1px 2px rgba(0,0,0,.4);
    --sombra-media: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -6px rgba(0,0,0,.45);
    --sombra-alta: 0 2px 4px rgba(0,0,0,.4), 0 24px 56px -12px rgba(0,0,0,.7);
    --marca-agua: .3;
    /* en oscuro el azul de relleno es claro: el texto encima va oscuro, no blanco */
    --sobre-acento: #06202f;
  }
}
:root[data-tema="oscuro"] {
  color-scheme: dark;
  --marca: #6cb8e6; --marca-fuerte: #8ccbf0; --banda: #004f7c; --banda-luz: #0068a3;
  --tinta: #e9edf1; --tinta-media: #c3cad2; --suave: #a7b0ba; --tenue: #7f8995;
  --linea: #29313a; --linea-fuerte: #39424d;
  --fondo: #0f1318; --papel: #171c22; --papel-hundido: #1b2128;
  --acento: #6cb8e6; --acento-vivo: #8ccbf0; --acento-flojo: #14293a;
  --rojo: #f38b8b;  --rojo-flojo: #2d1618;  --rojo-linea: #4d2528;
  --verde: #5fd394; --verde-flojo: #10281d; --verde-linea: #1f4a35;
  --ambar: #f2b45c; --ambar-flojo: #2c2110; --ambar-linea: #4d3a17;
  --gris-flojo: #20262d;
  --sombra: 0 1px 2px rgba(0,0,0,.4);
  --sombra-media: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px -6px rgba(0,0,0,.45);
  --sombra-alta: 0 2px 4px rgba(0,0,0,.4), 0 24px 56px -12px rgba(0,0,0,.7);
  --marca-agua: .3;
  --sobre-acento: #06202f;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--linea-fuerte) transparent; }

body {
  margin: 0; min-height: 100dvh;
  background: var(--fondo); color: var(--tinta);
  font: 15px/1.55 var(--letra);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  /* Las fichas llevan cifras en columna —días, horas, huecos—: que no bailen. */
  font-variant-numeric: tabular-nums;
}

/* La cruz del logo, enorme y muy difuminada, por detrás de todo: la misma del
   portal. Más tenue que allí porque aquí casi todo es tabla. */
body::before {
  content: ''; position: fixed; z-index: -1; pointer-events: none;
  left: 62%; top: 60%; width: 88vmin; height: 88vmin;
  background: url("/marca/cruz_fondo.svg") center / contain no-repeat;
  opacity: var(--marca-agua); filter: blur(24px);
  transform: translate(-50%, -50%) rotate(-10deg);
}
@media print { body::before { display: none; } }

a { color: var(--acento); text-underline-offset: 2px; }
h1, h2, h3 { text-wrap: balance; }
p, li { text-wrap: pretty; }

.envoltura { max-width: 780px; margin: 0 auto; padding: var(--e5) var(--e4) 96px; }
.ancho { max-width: 1240px; }
@media (min-width: 720px) { .envoltura { padding-left: var(--e5); padding-right: var(--e5); } }

/* --- cabecera: la banda azul con el logo, quién firma y las pestañas ----------
   Pegada arriba. 🔴 Aquí había una barra naranja a todo lo ancho con el nombre de
   quien había entrado. Fuera el 2026-09-15: el nombre no es una alarma, y una
   barra que sale siempre deja de verse a los dos días. */
.cabecera {
  position: sticky; top: 0; z-index: 30; overflow: hidden;
  color: #fff;
  background:
    radial-gradient(90% 200% at 0% 0%, var(--banda-luz) 0%, transparent 60%),
    var(--banda);
  box-shadow: 0 1px 0 rgba(0,0,0,.08), 0 6px 20px -10px rgba(0,40,70,.5);
}
/* la misma cruz, en blanco y muy tenue, a la derecha de la banda */
.cabecera::after {
  content: ''; position: absolute; pointer-events: none;
  right: 4%; top: -80px; width: 240px; height: 240px;
  background: #fff;
  -webkit-mask: url("/marca/cruz.svg") center / contain no-repeat;
          mask: url("/marca/cruz.svg") center / contain no-repeat;
  opacity: .07; filter: blur(1.5px); transform: rotate(-8deg);
}
.cabecera > * { position: relative; z-index: 1; }
.fila-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--e4); padding-top: 12px; padding-bottom: 6px;
}
.titulo { min-width: 0; display: flex; align-items: center; gap: 14px; }
.titulo .logo { height: 38px; width: auto; display: block; flex: none; }
.titulo .que-es {
  min-width: 0; padding-left: 14px; border-left: 1px solid rgba(255,255,255,.3);
}
.cabecera h1 { color: #fff; font-size: 18px; line-height: 1.2; }
.cabecera .sub {
  margin: 1px 0 0; color: rgba(255,255,255,.8); font-size: 13px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.quien { display: flex; align-items: center; gap: 6px; flex: none; }
.firma {
  font-size: 13px; font-weight: 600; color: #fff;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2);
  padding: 4px 11px; border-radius: 999px; white-space: nowrap;
}
.cabecera .flojo, .cabecera .boton-ekon { color: rgba(255,255,255,.9); }
.cabecera .flojo:hover, .cabecera .boton-ekon:hover { background: rgba(255,255,255,.12); color: #fff; }
.lado-cabecera { display: flex; align-items: center; gap: 6px; flex: none; }

/* el interruptor de tema, el mismo del portal */
.tema {
  background: none; border: 1px solid rgba(255,255,255,.22); cursor: pointer; box-shadow: none;
  color: rgba(255,255,255,.88); border-radius: var(--r-chico);
  width: 34px; height: 34px; padding: 0; display: grid; place-items: center;
  transition: background var(--paso), color var(--paso), transform var(--paso);
}
.tema:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.3); color: #fff; }
.tema:active { transform: scale(.94); }
.tema .luna { display: none; }
:root[data-tema="oscuro"] .tema .luna { display: block; }
:root[data-tema="oscuro"] .tema .sol  { display: none; }
@media (prefers-color-scheme: dark) {
  :root.sigue-sistema:not([data-tema="claro"]) .tema .luna { display: block; }
  :root.sigue-sistema:not([data-tema="claro"]) .tema .sol  { display: none; }
}

h1 { font-size: 22px; margin: 0; letter-spacing: -.02em; font-weight: 700; }
h2 { font-size: 17px; margin: var(--e6) 0 var(--e2); letter-spacing: -.015em; font-weight: 680; }
h3 { font-size: 14.5px; margin: 0 0 var(--e2); font-weight: 650; letter-spacing: -.005em; }
.sub { color: var(--tinta-media); margin: 2px 0 var(--e5); font-size: 14px; max-width: 76ch; }
h2 + .sub { margin-top: 0; }

/* --- pestañas ---------------------------------------------------------------
   Siete, y el orden es el del día: primero lo que hay que hacer. Van sobre la
   banda, como el menú del portal. */
.pestanas {
  display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none;
  max-width: 1240px; margin: 0 auto; padding: 4px var(--e4) 0;
}
@media (min-width: 720px) { .pestanas { padding-left: var(--e5); padding-right: var(--e5); } }
.pestanas::-webkit-scrollbar { display: none; }
.pestanas button {
  position: relative;
  background: none; border: 0; border-radius: var(--r-chico) var(--r-chico) 0 0;
  color: rgba(255,255,255,.78); box-shadow: none;
  padding: 9px 13px 11px; font-weight: 600; font-size: 14.5px;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 7px;
  transition: color var(--paso), background var(--paso);
}
.pestanas button:hover { color: #fff; background: rgba(255,255,255,.08); }
.pestanas button:active { transform: none; }
.pestanas button.activa { color: #fff; background: rgba(255,255,255,.14); }
.pestanas button.activa::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: #fff;
}
/* «+ Alta» no es un sitio, es una acción: se aparta a la derecha y se ve como
   botón. Sigue siendo una pestaña por dentro (#alta), así que nada más cambia. */
.pestanas button:last-child {
  margin: 0 0 7px auto; align-self: center; border-radius: var(--r-chico);
  padding: 6px 14px; color: var(--banda); background: #fff;
  box-shadow: 0 1px 2px rgba(0,40,70,.25);
}
.pestanas button:last-child:hover { background: #eaf4fb; color: var(--banda); }
.pestanas button:last-child:active { transform: scale(.97); }
.pestanas button:last-child.activa { outline: 2px solid rgba(255,255,255,.55); outline-offset: 2px; }
.pestanas button:last-child.activa::after { display: none; }
:root[data-tema="oscuro"] .pestanas button:last-child { color: #06202f; background: #cfe7f6; }
@media (prefers-color-scheme: dark) {
  :root.sigue-sistema:not([data-tema="claro"]) .pestanas button:last-child { color: #06202f; background: #cfe7f6; }
}

.cuenta {
  display: inline-block; min-width: 20px; text-align: center;
  padding: 0 7px; border-radius: 999px; background: var(--gris-flojo); color: var(--tinta-media);
  font-size: 12px; font-weight: 700; line-height: 19px;
}
.pestanas .cuenta { background: rgba(255,255,255,.18); color: #fff; }
/* Solo lo que tiene fecha límite se pinta en rojo. Si todo grita, nada grita. */
.cuenta.alerta, .pestanas .cuenta.alerta { background: #d9473e; color: #fff; }

/* --- filtros de «Solicitudes», y su buscador -------------------------------- */
.filtros {
  display: flex; gap: 6px; flex-wrap: wrap; align-items: center;
  margin-bottom: var(--e5);
}
.filtros button, .carpetas button {
  background: var(--papel); color: var(--tinta-media); border: 1px solid var(--linea);
  padding: 6px 13px; font-size: 13.5px; border-radius: 999px; box-shadow: var(--sombra);
  display: inline-flex; align-items: center; gap: 6px;
}
.filtros button:hover, .carpetas button:hover {
  background: var(--papel); border-color: var(--linea-fuerte); color: var(--tinta);
}
.filtros button.activa, .carpetas button.activa {
  background: var(--acento); border-color: var(--acento); color: var(--sobre-acento, #fff);
}
.filtros button.activa .cuenta { background: rgba(255,255,255,.22); color: inherit; }
.buscador {
  flex: 1 1 230px; min-width: 190px; max-width: 340px; margin-left: auto;
  padding: 8px 14px 8px 36px; border: 1px solid var(--linea-fuerte); border-radius: 999px;
  font: inherit; font-size: 14px; color: var(--tinta);
  background: var(--papel) no-repeat 13px 50% / 15px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a939e' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.buscador::-webkit-search-cancel-button { cursor: pointer; }
.resultado-busqueda { margin: -10px 0 var(--e3); }

/* --- formulario ------------------------------------------------------------- */
label { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 5px; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search],
input[type=password], input[type=date], input[type=time], input:not([type]), select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico);
  font: inherit; background: var(--papel); color: var(--tinta);
  transition: border-color var(--paso), box-shadow var(--paso);
}
/* los que llevan `size` en el panel (huecos apartados, triaje) se quedan con su ancho */
input[size] { width: auto; max-width: 100%; }
input::placeholder, textarea::placeholder { color: var(--suave); opacity: .8; }
input:hover, select:hover, textarea:hover { border-color: var(--tenue); }
/* El foco se ve SIEMPRE. Quitarlo es dejar sin panel a quien va por teclado. */
:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento) 20%, transparent);
}
.cabecera :focus-visible { outline-color: #fff; }

.rejilla { display: grid; gap: var(--e4); grid-template-columns: 1fr 1fr; }
.rejilla .ancho-total { grid-column: 1 / -1; }
@media (max-width: 620px) { .rejilla { grid-template-columns: 1fr; } }

.casilla {
  display: flex; gap: 11px; align-items: flex-start; padding: 11px 13px;
  border: 1px solid var(--linea-fuerte); border-radius: var(--r-chico); margin-bottom: var(--e2);
  cursor: pointer; background: var(--papel);
  transition: border-color var(--paso), background var(--paso);
}
.casilla:hover { border-color: var(--tenue); }
.casilla input { margin: 2px 0 0; width: 18px; height: 18px; flex: none; accent-color: var(--acento); }
.casilla.marcada { border-color: var(--acento); background: var(--acento-flojo); }
.casilla span { font-weight: 500; }
.seguimiento { margin: -2px 0 10px 40px; display: flex; align-items: center; gap: 9px;
               font-size: 14px; color: var(--tinta-media); }
.seguimiento input { width: 78px; }

/* --- botones ---------------------------------------------------------------- */
button {
  font: inherit; font-weight: 600; font-size: 14.5px; padding: 8px 16px;
  border-radius: var(--r-chico); border: 1px solid var(--acento);
  background: var(--acento); color: var(--sobre-acento, #fff); cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,60,100,.18), inset 0 1px 0 rgba(255,255,255,.12);
  transition: background var(--paso), border-color var(--paso), color var(--paso),
              transform var(--paso), box-shadow var(--paso);
}
button:hover { background: var(--acento-vivo); border-color: var(--acento-vivo); }
/* el botón se hunde al pulsarlo: confirma que el clic ha llegado */
button:active { transform: scale(.97); }
button.plano {
  background: var(--papel); color: var(--tinta); border-color: var(--linea-fuerte);
  box-shadow: var(--sombra);
}
button.plano:hover { background: var(--papel-hundido); border-color: var(--tenue); }
/* El terciario: liberar un hueco, salir. Está, pero no pide que lo pulses. */
button.flojo {
  background: none; color: var(--acento); border-color: transparent; box-shadow: none;
  padding: 4px 9px; font-size: 13.5px;
}
button.flojo:hover { background: var(--acento-flojo); border-color: transparent; }

/* El botón de ekon de la cabecera. Es un enlace —abre otra pestaña—, así que no
   hereda nada de `button`, y se le pone a mano la misma forma que al terciario.
   Discreto a propósito: se mira cien veces al día y no compite con el trabajo. */
.boton-ekon {
  display: inline-flex; align-items: center; gap: 4px;
  font-weight: 600; font-size: 13.5px; text-decoration: none;
  color: var(--acento); background: none;
  padding: 5px 10px; border: 1px solid transparent; border-radius: var(--r-chico);
  white-space: nowrap; transition: background var(--paso), color var(--paso);
}
.boton-ekon:hover { background: var(--acento-flojo); }
button.pequeno { padding: 5px 12px; font-size: 13.5px; }
button.pequeno.rojo, button.rojo { background: var(--rojo); border-color: var(--rojo); color: #fff; }
button.pequeno.rojo:hover, button.rojo:hover { filter: brightness(.9); }
button:disabled, button:disabled:hover {
  opacity: .45; cursor: default; transform: none;
  background: var(--acento); border-color: var(--acento);
}
button.plano:disabled, button.plano:disabled:hover { background: var(--papel); border-color: var(--linea-fuerte); }
button.flojo:disabled, button.flojo:disabled:hover { background: none; border-color: transparent; }

/* --- tarjetas ---------------------------------------------------------------- */
.tarjeta {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  padding: var(--e5); box-shadow: var(--sombra-media); margin-bottom: var(--e4);
}
.tarjeta hr { border: 0; border-top: 1px solid var(--linea); margin: var(--e5) 0; }
/* Una tabla ancha se desplaza DENTRO de su tarjeta: en el móvil empujaba la página
   entera de lado. */
.tarjeta:has(table) { overflow-x: auto; }
code { white-space: nowrap; }

/* --- avisos -----------------------------------------------------------------
   La barra de color a la izquierda hace de icono: el color solo nunca basta. */
.aviso {
  padding: 11px 14px 11px 15px; border-radius: var(--r-chico); font-size: 14px; margin: 10px 0;
  border: 1px solid transparent; border-left-width: 4px; line-height: 1.5;
}
.aviso.ambar { background: var(--ambar-flojo); color: var(--ambar); border-color: var(--ambar-linea);
               border-left-color: var(--ambar); }
.aviso.rojo  { background: var(--rojo-flojo);  color: var(--rojo);  border-color: var(--rojo-linea);
               border-left-color: var(--rojo); }
.aviso.verde { background: var(--verde-flojo); color: var(--verde); border-color: var(--verde-linea);
               border-left-color: var(--verde); }
.aviso ul { padding-left: 18px; }
.aviso li + li { margin-top: 3px; }
.aviso code { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }
.aviso a { color: inherit; }

/* --- la pestaña de avisos ----------------------------------------------------
   Cada bloque es una tarjeta con su título en frase normal: antes iba en
   mayúsculas pequeñas, y siete títulos iguales en fila se dejaban de leer. El
   punto de color dice cuánto corre (rojo: tiene fecha límite). */
.bloque-aviso {
  margin-bottom: var(--e4); padding: var(--e4) var(--e5) var(--e2);
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r);
  box-shadow: var(--sombra);
}
.titulo-aviso {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 650; color: var(--tinta); margin: 0 0 2px;
}
.titulo-aviso::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--tenue);
}
.titulo-aviso.rojo::before  { background: var(--rojo);  box-shadow: 0 0 0 3px var(--rojo-flojo); }
.titulo-aviso.ambar::before { background: var(--ambar); box-shadow: 0 0 0 3px var(--ambar-flojo); }
.titulo-aviso.verde::before { background: var(--verde); box-shadow: 0 0 0 3px var(--verde-flojo); }
.nada-que-ver { font-size: 18px; font-weight: 680; color: var(--tinta); margin-bottom: 4px; }

/* --- lo que se pliega: está, pero no ocupa ----------------------------------- */
.plegable { margin-top: var(--e6); border-top: 1px solid var(--linea); padding-top: var(--e4); }
.plegable > summary {
  cursor: pointer; display: flex; align-items: baseline; gap: var(--e2);
  font-size: 14px; padding: var(--e1) 0; list-style: none;
}
.plegable > summary::-webkit-details-marker { display: none; }
.plegable > summary::before {
  content: '›'; color: var(--suave); font-size: 17px; line-height: 1; font-weight: 700;
  transition: transform var(--paso); display: inline-block;
}
.plegable[open] > summary::before { transform: rotate(90deg); }
.plegable > summary:hover { color: var(--acento); }

/* --- pastillas de estado ------------------------------------------------------ */
.pastilla {
  display: inline-block; padding: 1px 9px; border-radius: 999px; font-size: 12px;
  font-weight: 650; background: var(--gris-flojo); color: var(--tinta-media); white-space: nowrap;
  border: 1px solid transparent; line-height: 1.6;
}
.pastilla.telederma, .pastilla.de-paciente {
  background: var(--acento-flojo); color: var(--acento);
  border-color: color-mix(in srgb, var(--acento) 22%, transparent);
}
.pastilla.presencial, .pastilla.de-cola { background: var(--ambar-flojo); color: var(--ambar); border-color: var(--ambar-linea); }
.pastilla.revision, .pastilla.de-nosotros { background: var(--rojo-flojo); color: var(--rojo); border-color: var(--rojo-linea); }
.pastilla.receta { background: var(--verde-flojo); color: var(--verde); border-color: var(--verde-linea); }
/* De quién es la pelota (de-nosotros / de-paciente / de-cola, arriba). Es la
   primera columna que se mira de una ficha.
   Terminada CON lo que pedía (cita, telediagnóstico o receta) y terminada SIN nada
   son dos cosas distintas, y a partir del 2026-09-17 se ven distintas: el verde es
   un final bueno; el gris, uno que no lo es. */
.pastilla.de-resuelta     { background: var(--verde-flojo); color: var(--verde); border-color: var(--verde-linea); }
.pastilla.de-sin-resolver { background: var(--gris-flojo);  color: var(--tinta-media); border-color: var(--linea); }
.pastilla.de-aparcada     { background: var(--ambar-flojo); color: var(--ambar); border-color: var(--ambar-linea); }

/* --- tablas ------------------------------------------------------------------- */
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 12.5px; font-weight: 650;
  color: var(--suave); padding: 10px 12px; border-bottom: 1px solid var(--linea);
  white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--linea); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background var(--paso); }
tr.fila:hover, tbody tr:hover { background: var(--papel-hundido); }
.turno { color: var(--suave); font-size: 13px; }
code {
  background: var(--gris-flojo); color: var(--tinta-media);
  padding: 1px 6px; border-radius: 5px; font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
pre {
  background: var(--papel-hundido); border: 1px solid var(--linea); border-radius: var(--r-chico);
  padding: var(--e4); white-space: pre-wrap; font-size: 13px; line-height: 1.55; overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.silencio { color: var(--suave); font-size: 13.5px; }
/* Una reserva de hueco que se pierde en menos de 48 h si nadie llama. No caduca
   sola (2026-09-11): que se vea es lo único que evita que se pierda. */
.urgente { color: var(--rojo); font-size: 13.5px; font-weight: 700; }
.vacio { padding: var(--e6) var(--e3); text-align: center; color: var(--suave); font-size: 14.5px; }

/* --- bandeja de correo --------------------------------------------------------- */
.carpetas { display: flex; gap: 6px; margin-bottom: var(--e3); flex-wrap: wrap; }
.correo {
  border-bottom: 1px solid var(--linea); padding: var(--e3) 12px; cursor: pointer;
  transition: background var(--paso);
}
.correo:hover { background: var(--papel-hundido); }
.correo.sin-leer { box-shadow: inset 3px 0 0 var(--acento); }
.correo .cabeza { display: flex; justify-content: space-between; gap: var(--e3); }
.correo .asunto { font-weight: 600; }
.correo .cuerpo { display: none; margin-top: 10px; }
.correo.abierto .cuerpo { display: block; }

/* Estado de un correo. Descartado = no llegó a salir: tiene que verse de lejos
   que ahí el paciente no recibió nada. (2026-09-13) */
.marca {
  display: inline-block; margin-top: 5px; padding: 1px 8px; border-radius: 999px;
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
}
.marca.sin-enviar { background: var(--ambar-flojo); color: var(--ambar); }
.marca.ok         { background: var(--verde-flojo); color: var(--verde); }
.marca.mal        { background: var(--rojo-flojo);  color: var(--rojo); }
.marca.descartada { background: var(--gris-flojo); color: var(--suave); text-decoration: line-through; }
.correo.descartado .asunto { text-decoration: line-through; opacity: .65; }
.correo.descartado { opacity: .8; }

/* --- «Hacer», partido en dos: llamar/agendar y leer/decidir ---------------------
   Dos niveles que antes se veían iguales (dos rayas subrayadas, una debajo de otra,
   y no se sabía cuál mandaba). Ahora el primero es un selector de tres partes y el
   segundo —las «mesas», botones `.pequeno`— unas pastillas más pequeñas. */
.subpestanas {
  display: inline-flex; flex-wrap: wrap; gap: 3px; padding: 3px; margin-bottom: var(--e1);
  background: var(--gris-flojo); border: 1px solid var(--linea); border-radius: 10px;
}
.subpestanas button {
  background: none; border: 0; box-shadow: none; color: var(--suave);
  padding: 7px 14px; font-size: 14px; font-weight: 600; border-radius: 7px;
  display: inline-flex; align-items: center; gap: 7px;
}
.subpestanas button:hover { color: var(--tinta); background: color-mix(in srgb, var(--papel) 55%, transparent); }
.subpestanas button.activa {
  color: var(--tinta); background: var(--papel);
  box-shadow: 0 1px 2px rgba(16,42,67,.1), 0 0 0 1px var(--linea);
}
/* las mesas: segundo nivel, sin caja, más discretas */
.subpestanas:has(button.pequeno) {
  display: flex; background: none; border: 0; padding: 0; gap: 6px; margin-top: var(--e4) !important;
}
.subpestanas button.pequeno {
  border: 1px solid var(--linea); background: var(--papel); border-radius: 999px;
  padding: 4px 12px; font-size: 13.5px;
}
.subpestanas button.pequeno.activa {
  background: var(--acento-flojo); color: var(--acento);
  border-color: color-mix(in srgb, var(--acento) 30%, transparent); box-shadow: none;
}

/* Un hueco que se pierde hoy: se mira una vez y se actúa. Por eso el primer
   candidato lleva los botones y los demás solo están para saber quién viene. */
.tarjeta.hueco-ya {
  padding: var(--e3) var(--e4) var(--e3) 20px; margin-bottom: 10px;
  box-shadow: inset 4px 0 0 var(--rojo), var(--sombra-media);
}
.cabeza-hueco {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding-bottom: var(--e2); border-bottom: 1px solid var(--linea);
}
.cabeza-hueco strong { font-size: 18px; letter-spacing: -.015em; }
.candidatos { list-style: none; margin: 0; padding: 0; }
.candidatos li {
  padding: 10px 0; display: flex; gap: var(--e3); align-items: center;
  flex-wrap: wrap; justify-content: space-between;
}
.candidatos li + li { border-top: 1px dashed var(--linea); }
.candidatos li.siguiente { opacity: .62; font-size: 13.5px; }
.candidatos li.siguiente .quien strong { font-weight: 600; }
.candidatos .quien { min-width: 0; display: block; padding: 0; }
.que-hago { display: flex; gap: var(--e2); flex-wrap: wrap; }

/* --- las acciones de una ficha: desplegable por intención, y confirmar antes ----
   Los botones sueltos y apelotonados son lo que hizo que se cerraran cuatro fichas
   con cita el 2026-09-14: «Cerrar…» estaba a dos huecos de «Ya la he agendado». */
.grupos-accion { display: grid; gap: 10px; margin: 6px 0 var(--e1); }
@media (min-width: 620px) { .grupos-accion { grid-template-columns: 1fr 1fr; } }
.grupo-accion { display: flex; flex-direction: column; gap: 4px; }
.grupo-accion > .silencio { font-size: 12.5px; font-weight: 600; }
.grupo-accion select { width: 100%; }

.confirmar {
  margin-top: var(--e4); padding: var(--e4) 18px; border-radius: var(--r-chico);
  background: var(--papel); border: 1px solid var(--linea); border-left: 4px solid var(--acento);
  box-shadow: var(--sombra-media);
}
.confirmar.peligro { border-left-color: var(--rojo); background: color-mix(in srgb, var(--rojo-flojo) 40%, var(--papel)); }
.confirmar h3 { margin: 0 0 4px; font-size: 16px; }
.confirmar ul { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 5px; }
.confirmar li { font-size: 14px; line-height: 1.45; }
.confirmar .aviso { font-size: 13.5px; }
/* Un campo solo ocupa la fila; varios se reparten. La etiqueta SIEMPRE encima del
   campo: al lado se lee como si fuera de otra cosa. */
.campos-accion {
  margin-top: var(--e3); display: grid; gap: 10px 14px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.campos-accion .campo { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.campos-accion label { font-size: 12.5px; font-weight: 600; color: var(--tinta-media); }
.campos-accion input { width: 100%; }
.campos-accion .casilla { align-items: center; padding: 9px 12px; }
.campos-accion .casilla input { width: 18px; margin: 0; }

/* --- «+ Alta»: una columna, un ancho ------------------------------------------
   Los campos iban con `size`, que da un ancho por campo: cinco anchos distintos en
   un formulario de seis líneas. El ancho lo pone la columna. */
.campos-alta { display: grid; gap: 12px; max-width: 520px; }
.campos-alta input[type=text], .campos-alta input[type=email], .campos-alta input[type=tel],
.campos-alta select { width: 100%; margin-top: 4px; }
.campos-alta > label { font-weight: 600; }
/* Las dos altas lado a lado: la de receta debajo no se veía (2026-10-02). */
.altas { display: grid; gap: var(--e5); align-items: start; }
@media (min-width: 960px) { .altas { grid-template-columns: 1fr 1fr; } }
.altas .campos-alta { max-width: none; }

/* --- la ficha de una solicitud, encima de todo ---------------------------------
   El velo tiene que aislar: con uno flojo se sigue leyendo la tabla de detrás y la
   ficha parece parte de la página, no lo único que hay que mirar. */
.velo {
  position: fixed; inset: 0; z-index: 40; padding: var(--e5) var(--e4);
  background: rgba(8,22,34,.55); backdrop-filter: blur(3px);
  display: grid; place-items: center; overflow-y: auto;
  animation: velo-entra .18s ease-out;
}
.ficha {
  max-width: 700px; width: 100%; max-height: 88dvh; overflow: auto; margin: 0;
  box-shadow: var(--sombra-alta); border-radius: 14px;
  animation: ficha-entra .22s cubic-bezier(.23, 1, .32, 1);
}
@keyframes velo-entra { from { opacity: 0; } }
@keyframes ficha-entra { from { opacity: 0; transform: translateY(8px) scale(.985); } }
.cabeza-ficha {
  display: flex; justify-content: space-between; align-items: flex-start;
  gap: var(--e3); padding-bottom: var(--e3); border-bottom: 1px solid var(--linea);
}
/* Dentro de la ficha, la tabla de datos es una lista de etiqueta/valor. */
.ficha table th {
  width: 140px; font-size: 13px; vertical-align: top; padding-left: 0;
  white-space: normal;
}
.ficha table tbody tr:hover { background: none; }

/* --- el embudo de «Dar citas» --------------------------------------------------
   🔴 Aquí había cuatro cifras sueltas en fila —huecos libres, esperando, se pueden
      ofertar, se quedan sin hueco— que leídas juntas se contradecían: 147 huecos y
      44 «sin hueco». Un número sin el de al lado no dice nada; puestos en escalera,
      cada uno explica el siguiente. */
.embudos { display: grid; gap: var(--e4); margin-bottom: var(--e5);
           /* Cada columna con su altura: estiradas dejan un hueco vacío al pie
              que se lee como si faltara algo. */
           align-items: start; }
@media (min-width: 860px) { .embudos { grid-template-columns: 1fr 1fr; } }
.embudo { margin-bottom: 0; padding: var(--e4) var(--e5) var(--e5); }
.embudo h3 { margin: 0 0 2px; font-size: 16px; }
.embudo > .silencio { display: block; margin-bottom: var(--e3); }

.escalon { display: flex; align-items: baseline; gap: var(--e3); padding: 8px 0; }
.escalon + .escalon { border-top: 1px solid var(--linea); }
.escalon b {
  flex: none; min-width: 64px; text-align: right;
  font-size: 24px; font-weight: 700; letter-spacing: -.03em; line-height: 1.15;
}
.escalon span { font-size: 14px; }
.escalon em { display: block; font-size: 12.5px; color: var(--suave); font-style: normal; }
/* Lo que resta se lee como que resta, sin tener que sumar mentalmente. */
.escalon.menos b, .escalon.menos span { color: var(--suave); }
/* El resultado de cada tramo: es el número que se usa para decidir. */
.escalon.total { border-top: 1px solid var(--linea-fuerte); }
.escalon.total b { color: var(--acento); }
.escalon.total span { font-weight: 600; }
/* Y lo que es un problema de verdad, no un escalón más. */
.escalon.malo b { color: var(--rojo); }
.escalon.malo span { font-weight: 600; }

.pie-accion {
  margin-top: var(--e4); display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
}

/* Un matiz sobre el escalón de arriba, no otro escalón: si se pintara como uno más
   parecería que suma, y los grupos de la cola dejarían de cuadrar con el total. */
.apostilla {
  margin-top: var(--e3); padding: 9px 12px; border-radius: var(--r-chico);
  background: var(--ambar-flojo); color: var(--ambar); font-size: 13.5px; line-height: 1.5;
}

/* --- páginas del paciente: el logo en color arriba ------------------------------
   El formulario y las respuestas a la oferta los abre el paciente desde un correo.
   Que lo primero que vea sea el logo del Centro Médico es lo que le dice que el
   enlace es de verdad nuestro. */
.membrete { display: block; padding: 4px 0 var(--e5); }
.membrete img { height: 46px; width: auto; display: block; }

/* --- la entrada ----------------------------------------------------------------
   Dos mitades: la marca a la izquierda, el formulario a la derecha. En el móvil,
   la marca arriba y en pequeño. */
.entrada {
  min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
}
.entrada-marca {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(80% 70% at 0% 0%, var(--banda-luz) 0%, transparent 65%),
    radial-gradient(60% 60% at 100% 100%, rgba(0,40,70,.35) 0%, transparent 70%),
    var(--banda);
  padding: 48px 56px; display: flex; flex-direction: column; justify-content: space-between;
}
.entrada-marca::after {
  content: ''; position: absolute; pointer-events: none;
  right: -18%; bottom: -22%; width: 80%; aspect-ratio: 1;
  background: #fff;
  -webkit-mask: url("/marca/cruz.svg") center / contain no-repeat;
          mask: url("/marca/cruz.svg") center / contain no-repeat;
  opacity: .08; filter: blur(2px); transform: rotate(-10deg);
}
.entrada-marca > * { position: relative; z-index: 1; }
.entrada-marca .logo { height: 54px; width: auto; display: block; align-self: flex-start; }
.entrada-marca h1 {
  color: #fff; font-size: clamp(32px, 3.8vw, 46px); line-height: 1.06;
  letter-spacing: -.035em; font-weight: 700; margin: 0 0 14px;
}
.entrada-marca p { margin: 0; max-width: 40ch; color: rgba(255,255,255,.84); font-size: 16px; }
.entrada-marca .pie { font-size: 13px; color: rgba(255,255,255,.62); }

.entrada-form { display: grid; place-items: center; padding: 40px 24px; }
.entrada-form form { width: 100%; max-width: 380px; }
.entrada-form h2 { margin: 0 0 4px; font-size: 24px; letter-spacing: -.025em; }
.entrada-form .sub { margin-bottom: var(--e5); }
.entrada-form .campo { margin-bottom: var(--e4); }
.entrada-form .ayuda { margin: 6px 0 0; color: var(--suave); font-size: 13px; }
.entrada-form input { padding: 11px 14px; font-size: 15.5px; }
.entrada-form button[type=submit] { width: 100%; padding: 11px 16px; font-size: 15.5px; margin-top: 6px; }
.entrada-form .aviso { margin-top: var(--e4); }
.entrada .tema {
  position: fixed; top: 16px; right: 16px; z-index: 2;
  color: var(--suave); border-color: var(--linea-fuerte); background: var(--papel);
}
.entrada .tema:hover { color: var(--tinta); background: var(--papel-hundido); border-color: var(--tenue); }

@media (max-width: 820px) {
  .entrada { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .entrada-marca { padding: 24px 24px 28px; gap: 26px; }
  .entrada-marca .logo { height: 38px; }
  .entrada-marca h1 { font-size: 28px; margin-bottom: 6px; }
  .entrada-marca p { font-size: 15px; }
  .entrada-marca .pie { display: none; }
  .entrada-form { place-items: start center; padding-top: 32px; }
  .entrada .tema { color: rgba(255,255,255,.88); border-color: rgba(255,255,255,.22); background: none; }
}

/* --- teléfonos ------------------------------------------------------------------
   Nadie ha rellenado el formulario entero desde un móvil todavía, pero el panel sí
   se abre desde uno en el mostrador. Que al menos no haya scroll lateral. */
@media (max-width: 720px) {
  .titulo .que-es { padding-left: 0; border-left: 0; }
  .titulo .logo { display: none; }
}
@media (max-width: 560px) {
  h1 { font-size: 20px; }
  /* En el móvil la banda no se queda pegada: con el título, la firma y las
     pestañas ocupaba un tercio de la pantalla. */
  .cabecera { position: static; }
  .cabecera .sub { white-space: normal; }
  .fila-cabecera { flex-wrap: wrap; gap: var(--e2); }
  .buscador { margin-left: 0; max-width: none; }
  .tarjeta { padding: var(--e4); }
  .escalon b { font-size: 19px; min-width: 52px; }
  /* 16 px en los campos: con menos, el iPhone hace zoom al tocarlos */
  input[type=text], input[type=email], input[type=tel], input[type=number], input[type=search],
  input[type=password], select, textarea { font-size: 16px; }
}

/* Quien pide menos movimiento, menos movimiento. */
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* ═══ digestivo-cola: lo que añade a la hoja de derma (2026-10-21) ═════════════ */

/* Páginas del paciente: un poco más estrechas y con más aire entre bloques. */
.paciente { max-width: 640px; }
.paciente h1 { margin-bottom: var(--e2); }
.paciente .tarjeta { margin-top: var(--e4); }
.paciente .tarjeta h2 { margin-top: 0; }
.paciente .tarjeta h3 { font-size: 15px; margin: var(--e5) 0 var(--e2); }
.paciente .tarjeta.ok { border-color: var(--verde-linea); }
.paciente .ayuda { color: var(--suave); font-size: 13px; margin: 5px 0 0; }
.opciones { display: grid; gap: var(--e2); }
.si-para-otro { display: none; margin-top: var(--e3); }
.tarjeta:has(input[name=para_otro][value=si]:checked) .si-para-otro { display: block; }
.privacidad { margin-top: var(--e3); font-size: 13.5px; }
.privacidad summary { cursor: pointer; color: var(--acento); }
.privacidad dt { font-weight: 650; margin-top: var(--e3); }
.privacidad dd { margin: 2px 0 0; color: var(--tinta-media); }
button.enviar { width: 100%; padding: 14px; font-size: 16px; margin-top: var(--e5); }

/* La oferta: el día y la hora es lo único que importa, así que es lo más grande. */
.hueco .cuando { font-size: 24px; font-weight: 700; letter-spacing: -.02em; margin: 0 0 4px; }
.hueco .cuando::first-letter { text-transform: uppercase; }
.botones { display: grid; gap: var(--e2); margin: var(--e5) 0 var(--e4); }
.botones button { width: 100%; padding: 14px; font-size: 16px; }

/* El panel: una sola pantalla, sin pestañas. */
.cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--e3); margin: var(--e5) 0; }
.cifra { background: var(--papel); border: 1px solid var(--linea); border-radius: var(--r); padding: var(--e3) var(--e4); }
.cifra b { display: block; font-size: 26px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifra span { color: var(--suave); font-size: 13px; }
.seccion { margin-top: var(--e6); }
.seccion > h2 { display: flex; align-items: center; gap: var(--e2); }
.vacio { color: var(--suave); padding: var(--e4); border: 1px dashed var(--linea-fuerte); border-radius: var(--r); }
.ficha-citar { display: grid; grid-template-columns: 1fr auto; gap: var(--e3) var(--e5); align-items: start; }
.ficha-citar dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px var(--e3); margin: var(--e2) 0 0; font-size: 14px; }
.ficha-citar dt { color: var(--suave); }
.ficha-citar dd { margin: 0; font-variant-numeric: tabular-nums; }
.ficha-citar .cuando { font-weight: 700; font-size: 17px; }
.acciones { display: flex; flex-direction: column; gap: var(--e2); }
.mensaje-leer pre { white-space: pre-wrap; font: inherit; margin: var(--e2) 0; max-height: 260px; overflow: auto;
  background: var(--papel-hundido); padding: var(--e3); border-radius: var(--r-chico); }
.historial { font-size: 13.5px; margin: 0; padding-left: 18px; }
.historial li + li { margin-top: 3px; }
.fila-form { display: flex; flex-wrap: wrap; gap: var(--e2); }
.fila-form input { flex: 1 1 220px; }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th { text-align: left; color: var(--suave); font-weight: 600; font-size: 12.5px; padding: 6px 8px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 8px; border-bottom: 1px solid var(--linea); vertical-align: top; }
.tabla tr.clic { cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .tabla tr.clic:hover td { background: var(--papel-hundido); } }
dialog.ficha { border: 0; border-radius: var(--r); padding: 0; width: min(720px, calc(100vw - 32px)); max-height: 85vh;
  background: var(--papel); color: var(--tinta); box-shadow: var(--sombra-alta);
  opacity: 1; transform: scale(1); transition: opacity .2s ease-out, transform .2s cubic-bezier(.23, 1, .32, 1); }
@starting-style { dialog.ficha[open] { opacity: 0; transform: scale(.97); } }
dialog.ficha::backdrop { background: rgba(16, 42, 67, .35); }
dialog.ficha .dentro { padding: var(--e5); overflow: auto; max-height: 85vh; }
@media (max-width: 640px) { .ficha-citar { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { dialog.ficha { transition: opacity .2s ease; transform: none; } }