/* Pipetflow — pensado para leerse con guantes, a un brazo de distancia.
 *
 * Reglas de la gama:
 *   1. El modo oscuro es el principal (mesón en penumbra, sala de microscopía).
 *   2. Los seis canales (--azul --verde --naranja --rojo --lejano --infrarrojo) son DATOS:
 *      aproximan la emisión real del fluoróforo y NO cambian con el tema.
 *   3. Los colores de estado (--ok --aviso --error) van menos saturados que los
 *      canales, para que un distintivo verde no se confunda con un Alexa 488.
 *   4. Todo texto sobre su fondo pasa 4.5:1 (AA); los bordes de los controles
 *      pasan 3:1 contra el relleno y contra lo que tienen al lado.
 */
:root {
  color-scheme: dark;

  --fondo: #0A0E14;          /* casi negro, azulado: no tiñe los canales */
  --fondo-2: #131A24;        /* tarjetas */
  --fondo-3: #1C2532;        /* campos, chips, rellenos hundidos */
  --borde: #2C3848;          /* separación entre superficies */
  --borde-fuerte: #64758C;   /* borde de los controles (3:1) */
  --texto: #E8EEF6;
  --texto-2: #A9B8CA;
  --texto-3: #8798AC;

  --marca: #2FD8EF;          /* cian: el único hueco libre entre los 5 canales */
  --marca-oscura: #0E7F94;
  --sobre-marca: #04141A;    /* texto encima de la marca */

  --ok: #35D68F;
  --aviso: #FFB528;
  --error: #FF7070;

  /* Canales de fluorescencia — emisión aproximada, iguales en los dos temas */
  --azul: #4D8DFF;           /* DAPI / Hoechst, 461 nm */
  --verde: #25EE72;          /* Alexa 488 / FITC / GFP, 519 nm */
  --naranja: #FF8A2E;        /* Alexa 555 / Cy3 / TRITC, 565-576 nm: el «rojo» del 561 */
  --rojo: #FF3B3B;           /* Alexa 594 / Texas Red, 610 nm */
  --lejano: #F35BD8;         /* Alexa 647 / Cy5: magenta convenido, 668 nm */
  --infrarrojo: #8FA6C4;     /* IRDye 680RD / 800CW: no se ve, lo pinta el escáner */

  /* Tintes y líneas derivados (sin color-mix, para que no dependan del motor) */
  --marca-tenue: rgba(47, 216, 239, .07);
  --marca-suave: rgba(47, 216, 239, .13);
  --marca-linea: rgba(47, 216, 239, .34);
  --ok-suave: rgba(53, 214, 143, .13);
  --ok-linea: rgba(53, 214, 143, .34);
  --aviso-suave: rgba(255, 181, 40, .12);
  --aviso-linea: rgba(255, 181, 40, .32);
  --error-suave: rgba(255, 112, 112, .12);
  --error-linea: rgba(255, 112, 112, .34);
  --velo-fondo: rgba(2, 5, 9, .68);
  --anillo-punto: rgba(0, 0, 0, .25);   /* el punto de canal ya destaca sobre el fondo oscuro */

  --barra: rgba(10, 14, 20, .90);
  --nav: rgba(19, 26, 36, .96);

  --radio: 14px;
  --sombra: 0 6px 22px rgba(0, 0, 0, .45);
  --seguro-abajo: env(safe-area-inset-bottom, 0px);

  --tipo: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", sans-serif;
  --tipo-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ===================================================================== */
/*  Modo claro: el PC del laboratorio tiene luz de techo y el oscuro      */
/*  cansa. Mismos nombres, mismos papeles, distinta luminancia.           */
/* ===================================================================== */
@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;

    --fondo: #F4F7FA;
    --fondo-2: #FFFFFF;
    --fondo-3: #EAEFF5;
    --borde: #D4DDE7;
    --borde-fuerte: #717F92;
    --texto: #0E1620;
    --texto-2: #46566A;
    --texto-3: #586A80;

    --marca: #086E80;
    --marca-oscura: #05505E;
    --sobre-marca: #FFFFFF;

    --ok: #0C6E4A;
    --aviso: #7E5200;
    --error: #B52D2A;

    --marca-tenue: rgba(8, 110, 128, .06);
    --marca-suave: rgba(8, 110, 128, .11);
    --marca-linea: rgba(8, 110, 128, .38);
    --ok-suave: rgba(12, 110, 74, .10);
    --ok-linea: rgba(12, 110, 74, .36);
    --aviso-suave: rgba(126, 82, 0, .10);
    --aviso-linea: rgba(126, 82, 0, .34);
    --error-suave: rgba(181, 45, 42, .09);
    --error-linea: rgba(181, 45, 42, .34);
    --velo-fondo: rgba(14, 22, 32, .42);
    --anillo-punto: rgba(0, 0, 0, .48);   /* sobre blanco, el verde y el naranja necesitan borde */

    --barra: rgba(244, 247, 250, .90);
    --nav: rgba(255, 255, 255, .96);

    --sombra: 0 6px 22px rgba(14, 22, 32, .14);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--fondo); color: var(--texto);
  font-family: var(--tipo);
  font-size: 17px; line-height: 1.5;
  font-feature-settings: "tnum";     /* cifras de ancho fijo en toda la app */
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { display: flex; flex-direction: column; min-height: 100dvh; }

/* Foco visible para quien navega con teclado (el mesón también tiene teclado) */
:focus-visible {
  outline: 2px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- cabecera ---------- */
header.barra {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px;
  padding-top: calc(13px + env(safe-area-inset-top, 0px));
  background: var(--barra); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--borde);
}
header.barra h1 { font-size: 1.12rem; margin: 0; font-weight: 600; letter-spacing: -.015em; }
header.barra .sub { font-size: .8rem; color: var(--texto-3); margin-top: -1px; }
header.barra .crece { flex: 1; }

.logo {
  width: 32px; height: 32px; flex: 0 0 32px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, var(--marca), var(--marca-oscura));
  border-radius: 10px; color: var(--sobre-marca);
  overflow: hidden;
}
.logo svg { width: 100%; height: 100%; display: block; }

/* ---------- contenido ---------- */
main {
  flex: 1; padding: 16px 16px 100px 16px;
  max-width: 900px; width: 100%; margin: 0 auto;
}
.pantalla { display: none; animation: entra .18s ease-out; }
.pantalla.activa { display: block; }
@keyframes entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

h2 { font-size: 1.42rem; margin: 0 0 5px; letter-spacing: -.022em; font-weight: 600; }
h3 { font-size: 1.02rem; margin: 24px 0 10px; color: var(--texto-2); font-weight: 600; }
p.guia { color: var(--texto-2); font-size: .93rem; margin: 0 0 18px; max-width: 62ch; }

/* ---------- tarjetas ---------- */
.tarjeta {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: var(--radio); padding: 16px; margin-bottom: 12px;
}
.tarjeta.pulsable { cursor: pointer; transition: border-color .15s, transform .1s; }
.tarjeta.pulsable:active { transform: scale(.995); border-color: var(--marca-oscura); }

.fila { display: flex; align-items: center; gap: 12px; }
.fila.entre { justify-content: space-between; }
.fila.envuelve { flex-wrap: wrap; }
.crece { flex: 1; min-width: 0; }
.apilado { display: flex; flex-direction: column; gap: 10px; }

.rejilla-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 420px) { .rejilla-3 { grid-template-columns: 1fr 1fr; } }

/* Comunidad: pestañas segmentadas, cabecera del grupo y filas de lista. */
.segmentos {
  display: flex; gap: 2px; padding: 3px; margin-bottom: 14px;
  background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 12px;
}
.segmentos button {
  flex: 1; min-height: 34px; padding: 6px 4px; border: none; border-radius: 9px;
  background: none; color: var(--texto-2); font-size: .82rem; font-weight: 500;
}
.segmentos button.activa { background: var(--marca-suave); color: var(--marca); font-weight: 650; }
button .cuenta { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--error);
  color: #fff; font-size: .72rem; line-height: 18px; text-align: center; vertical-align: middle; }
.segmentos .cuenta {
  display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px;
  background: var(--marca); color: #fff; font-size: .72rem; line-height: 18px; text-align: center;
}
.cabecera-lab {
  padding: 16px; margin-bottom: 8px; border-radius: var(--radio);
  background: linear-gradient(160deg, var(--marca-suave), var(--fondo-2) 70%); border: 1px solid var(--borde);
}
.cabecera-lab .nombre { font-size: 1.2rem; font-weight: 650; letter-spacing: -.015em; line-height: 1.2; }
.fila-lista {
  display: flex; align-items: center; gap: 10px; padding: 10px 2px;
  border-bottom: 1px solid var(--borde); font-size: .92rem;
}
.fila-lista.pulsable { cursor: pointer; }
.fila-lista:last-child { border-bottom: none; }
details.plegable summary {
  cursor: pointer; font-size: .82rem; color: var(--marca); font-weight: 600; list-style: none;
  padding: 4px 0; user-select: none;
}
details.plegable summary::-webkit-details-marker { display: none; }
details.plegable summary::after { content: ' ›'; }
details.plegable[open] summary::after { content: ' ˅'; }
.enlace-suave { font-size: .84rem; color: var(--texto-3); cursor: pointer; text-decoration: underline; }
.enlace-suave.peligro { color: var(--error); }

/* Inicio: las cifras en una línea, como pastillas pequeñas y pulsables. */
.mini-cifras { display: flex; flex-wrap: wrap; gap: 6px; }
.mini-cifra {
  background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 999px;
  color: var(--texto-2); font-size: .82rem; font-weight: 500; padding: 6px 12px; min-height: 0;
}
.mini-cifra b { color: var(--texto); font-weight: 650; font-variant-numeric: tabular-nums; margin-right: 2px; }

/* Filtros discretos: desplegables pequeños en vez de filas de chips. */
.filtros-finos { gap: 8px; margin-bottom: 12px; }
select.fino { font-size: .86rem; padding: 8px 10px; min-height: 0; }

.numerote {
  font-size: 2.15rem; font-weight: 600; line-height: 1.05; letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.etiqueta {
  font-size: .755rem; color: var(--texto-3); text-transform: uppercase;
  letter-spacing: .07em; font-weight: 600;
}

/* ---------- distintivos ---------- */
.distintivo {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: 999px;
  font-size: .77rem; font-weight: 600;
  background: var(--fondo-3); color: var(--texto-2); border: 1px solid var(--borde);
}
.distintivo.ok { background: var(--ok-suave); color: var(--ok); border-color: var(--ok-linea); }
.distintivo.aviso { background: var(--aviso-suave); color: var(--aviso); border-color: var(--aviso-linea); }
.distintivo.error { background: var(--error-suave); color: var(--error); border-color: var(--error-linea); }
.distintivo.marca { background: var(--marca-suave); color: var(--marca); border-color: var(--marca-linea); }

/* El punto lleva el color del canal; el anillo lo despega de los fondos claros
   (un Alexa 488 o un Cy3 sobre blanco quedan en 1.5:1 sin él). */
.punto {
  width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px;
  box-shadow: inset 0 0 0 1.5px var(--anillo-punto);
}

/* ---------- formularios ---------- */
label { display: block; font-size: .84rem; color: var(--texto-2); margin: 0 0 6px; font-weight: 500; }
input, select, textarea {
  width: 100%; padding: 12px 13px;
  background: var(--fondo-3); color: var(--texto);
  border: 1px solid var(--borde-fuerte); border-radius: 10px;
  font-size: 1rem; font-family: inherit;
}
input::placeholder, textarea::placeholder { color: var(--texto-3); opacity: 1; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--marca); box-shadow: 0 0 0 3px var(--marca-suave);
}
input[type="number"] { -moz-appearance: textfield; }
input[type="checkbox"], input[type="radio"] { accent-color: var(--marca); }
textarea { resize: vertical; min-height: 72px; }
.campo { margin-bottom: 14px; }
.campo .pista { font-size: .8rem; color: var(--texto-3); margin-top: 5px; }

button, .boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 11px 18px;
  border-radius: 10px; border: 1px solid transparent;
  background: var(--marca); color: var(--sobre-marca);
  font-size: .95rem; font-weight: 600; font-family: inherit;
  cursor: pointer; transition: filter .15s, transform .1s, border-color .15s;
}
button:active { transform: scale(.98); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.fantasma { background: transparent; color: var(--texto); border-color: var(--borde-fuerte); }
button.fantasma:hover { border-color: var(--marca); }
button.peligro { background: transparent; color: var(--error); border-color: var(--error-linea); }
button.ancho { width: 100%; }
button.chico { min-height: 38px; padding: 8px 13px; font-size: .84rem; }
button.grandote { min-height: 56px; padding: 16px; font-size: 1.08rem; }

/* ---------- navegación inferior ---------- */
nav.abajo {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; background: var(--nav); backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
  padding-bottom: var(--seguro-abajo);
}
nav.abajo button {
  flex: 1; flex-direction: column; gap: 3px;
  background: none; border: none; border-radius: 0;
  color: var(--texto-3); padding: 10px 2px 9px; font-size: .72rem; font-weight: 500;
  min-height: 56px;
}
nav.abajo button { position: relative; }
nav.abajo button.activa { color: var(--marca); font-weight: 650; }
/* La pestaña activa se ve sin mirar: pastilla de color detrás del icono y trazo más grueso. */
nav.abajo button.activa svg { stroke-width: 2.4; background: var(--marca-suave); border-radius: 12px; padding: 4px 12px; box-sizing: content-box; }
nav.abajo svg { width: 22px; height: 22px; stroke-width: 1.9; padding: 4px 12px; box-sizing: content-box; border-radius: 12px; transition: background .15s; }

/* ---------- cronómetro ---------- */
/* Se mira de reojo y de lejos: cifras de ancho fijo y trazo con cuerpo.
   Una 3.6rem en peso 250 se deshace en penumbra. */
.cronometro {
  font-variant-numeric: tabular-nums; font-size: 4rem; font-weight: 600;
  letter-spacing: -.045em; text-align: center; margin: 8px 0 2px;
  font-feature-settings: "tnum"; line-height: 1.02;
}
.cronometro.urgente { color: var(--aviso); }
.cronometro.vencido { color: var(--ok); }
.aro { position: relative; width: 190px; height: 190px; margin: 0 auto 14px; }
.aro svg { transform: rotate(-90deg); }
.aro .centro {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 2px;
}

/* ---------- pasos ---------- */
.paso {
  display: flex; gap: 12px; padding: 13px 14px;
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: 12px; margin-bottom: 8px;
}
.paso.actual {
  border-color: var(--marca); background: var(--marca-tenue);
  box-shadow: inset 3px 0 0 var(--marca);
}
.paso.hecho { opacity: .52; }
.paso .orden {
  width: 27px; height: 27px; flex: 0 0 27px; border-radius: 8px;
  background: var(--fondo-3); display: grid; place-items: center;
  font-size: .82rem; font-weight: 700; color: var(--texto-2);
}
.paso.actual .orden { background: var(--marca); color: var(--sobre-marca); }
.paso.hecho .orden { background: var(--ok-suave); color: var(--ok); }
.paso .tiempo { font-size: .84rem; color: var(--texto-3); font-variant-numeric: tabular-nums; }

/* Etapa del protocolo: los artículos escriben el procedimiento por etapas
   («criosección», «tinción», «adquisición») y verlas separadas es lo que
   permite seguirlo en el mesón sin perder el hilo. */
.etapa {
  margin: 16px 0 8px; padding-left: 2px;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--texto-3);
}
.etapa:first-child { margin-top: 4px; }

/* La calculadora: se usa en mitad de cualquier otra cosa, así que vive en el
   borde y no gasta un sitio en la barra de abajo. Va por encima del contenido
   pero sin tapar la navegación. */
.flotante {
  position: fixed;
  right: 16px;
  bottom: calc(56px + var(--seguro-abajo) + 16px);   /* justo encima de la barra */
  width: 52px; height: 52px; padding: 0;
  border-radius: 50%;
  background: var(--marca); color: var(--sobre-marca);
  border: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  display: grid; place-items: center; cursor: pointer;
  z-index: 40;
}
.flotante svg { width: 24px; height: 24px; stroke-width: 1.8; }
.flotante:active { transform: scale(.94); }

/* Editar una receta: tres campos y el botón de quitar, que tiene que caber en
   un celular sin apretar los dedos. */
.comp-fila {
  display: grid; grid-template-columns: 1fr 88px 88px 34px;
  gap: 6px; margin-bottom: 6px; align-items: center;
}
.comp-fila input { min-width: 0; }
.comp-fila .quitar {
  width: 34px; height: 38px; padding: 0; border-radius: 9px;
  background: var(--fondo-3); color: var(--texto-3);
  border: 1px solid var(--borde); font-size: 1.1rem; line-height: 1;
}
.comp-fila .quitar:hover { color: var(--error); border-color: var(--error); }
@media (max-width: 420px) {
  .comp-fila { grid-template-columns: 1fr 1fr 34px; }
  .comp-fila input:first-child { grid-column: 1 / -1; }
}

/* La rejilla de horas de un equipo: se mira de un vistazo para ver dónde hay
   hueco, así que las cogidas tienen que distinguirse sin leer. */
.huecos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px; margin-top: 4px;
}
.hueco {
  padding: 10px 4px; border-radius: 9px; font-size: .82rem; font-weight: 600;
  background: var(--marca-tenue); color: var(--marca);
  border: 1px solid transparent; cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.hueco:active { transform: scale(.96); }
.hueco.tomado {
  background: var(--fondo-3); color: var(--texto-3);
  text-decoration: line-through; cursor: default;
}

/* Permisos de cada persona dentro del grupo. */
.permisos {
  display: grid; gap: 4px; margin-top: 8px; padding: 9px 11px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
}

/* Lo que hay que preparar antes de empezar: va arriba y se puede pinchar. */
.antelacion {
  border: 1px solid var(--borde); border-radius: 12px;
  padding: 11px 12px; margin: 14px 0;
  background: var(--fondo-2);
}
.antelacion .etiqueta { margin-bottom: 8px; }
.preparar-fila {
  display: flex; align-items: baseline; gap: 10px; width: 100%;
  padding: 9px 10px; margin-bottom: 6px;
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
  font: inherit; font-size: .88rem; color: inherit; text-align: left;
  cursor: pointer;
}
.preparar-fila:last-child { margin-bottom: 0; }
.preparar-fila:hover:not(:disabled) { border-color: var(--marca); }
.preparar-fila:disabled { cursor: default; opacity: .75; }

/* Reactivos y recetas que vinieron con el artículo. */
.lista-reactivos { border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; }
.reactivo-fila {
  display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap;
  padding: 8px 12px; font-size: .86rem;
  border-bottom: 1px solid var(--borde);
}
.reactivo-fila:last-child { border-bottom: 0; }

/* Dónde está el frasco. Es lo único del inventario que nunca sale del grupo:
   fuera se sabe que lo tienen, jamás en qué estante. */
.donde {
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: 12px; padding: 12px; margin: 6px 0 10px;
}
.donde .pista { font-size: .8rem; color: var(--texto-3); margin-top: 6px; }
.sitio::before { content: "\2316\00A0"; color: var(--marca); }
.receta {
  border: 1px solid var(--borde); border-radius: 12px;
  margin-bottom: 8px; padding: 4px 0;
}
.receta > summary {
  cursor: pointer; padding: 8px 12px; font-weight: 600; font-size: .9rem;
}

/* Problemas frecuentes, tal como los publica el autor. */
.apuro {
  padding: 11px 13px; margin-bottom: 8px; border-radius: 11px;
  background: var(--fondo-2); border: 1px solid var(--borde);
  border-left: 3px solid var(--aviso, var(--marca));
}

/* ---------- avisos del panel ---------- */
.nota-panel {
  display: flex; gap: 11px; padding: 13px 14px; border-radius: 12px;
  margin-bottom: 9px; border: 1px solid; font-size: .9rem; line-height: 1.45;
}
.nota-panel.bloqueante { background: var(--error-suave); border-color: var(--error-linea); }
.nota-panel.aviso { background: var(--aviso-suave); border-color: var(--aviso-linea); }
.nota-panel.nota { background: var(--marca-tenue); border-color: var(--marca-linea); }
.nota-panel .icono { font-size: 1.1rem; line-height: 1.3; }
.nota-panel b { display: block; margin-bottom: 3px; font-size: .94rem; }

/* ---------- listas ---------- */
.lista-vacia {
  text-align: center; padding: 44px 20px; color: var(--texto-3);
  border: 1px dashed var(--borde); border-radius: var(--radio);
}
.lista-vacia .emoji { font-size: 2rem; display: block; margin-bottom: 10px; opacity: .7; }

/* ---------- hoja inferior ---------- */
.velo {
  position: fixed; inset: 0; z-index: 50; background: var(--velo-fondo);
  display: none; align-items: flex-end; backdrop-filter: blur(3px);
}
.velo.abierta { display: flex; }
.hoja {
  width: 100%; max-height: 92dvh; overflow-y: auto;
  background: var(--fondo-2); border-radius: 20px 20px 0 0;
  border-top: 1px solid var(--borde);
  padding: 8px 16px calc(24px + var(--seguro-abajo));
  animation: sube .22s cubic-bezier(.2, .8, .2, 1);
}
@keyframes sube { from { transform: translateY(100%); } to { transform: none; } }
.hoja .asa {
  width: 38px; height: 4px; background: var(--borde-fuerte);
  border-radius: 2px; margin: 8px auto 16px; opacity: .6;
}
@media (min-width: 640px) {
  .velo { align-items: center; justify-content: center; }
  .hoja { max-width: 560px; border-radius: 18px; border: 1px solid var(--borde); box-shadow: var(--sombra); }
}

/* ---------- avisos flotantes ---------- */
#avisos {
  position: fixed; left: 12px; right: 12px; bottom: calc(80px + var(--seguro-abajo));
  z-index: 60; display: flex; flex-direction: column; gap: 8px; pointer-events: none;
}
.globo {
  background: var(--fondo-3); border: 1px solid var(--borde);
  border-left: 3px solid var(--marca);
  border-radius: 10px; padding: 12px 14px; font-size: .93rem;
  box-shadow: var(--sombra); animation: entra .2s;
}
.globo.error { border-left-color: var(--error); }
.globo.ok { border-left-color: var(--ok); }

/* ---------- varios ---------- */
.separador { height: 1px; background: var(--borde); margin: 18px 0; }
.mono { font-variant-numeric: tabular-nums; font-family: var(--tipo-mono); }
.recorta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tenue { color: var(--texto-3); }
.suave { color: var(--texto-2); }
.centrado { text-align: center; }

/* El chip lleva el color del canal como fondo; el texto va oscuro siempre,
   porque los cinco canales son colores emitidos (claros) en los dos temas. */
.chip-canal {
  padding: 2px 8px; border-radius: 6px; font-size: .74rem; font-weight: 700;
  color: #04141A; letter-spacing: .01em;
}

.cargando { display: inline-block; width: 15px; height: 15px; border: 2px solid var(--borde);
  border-top-color: var(--marca); border-radius: 50%; animation: gira .7s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- entrada ---------- */
.portada {
  min-height: 100dvh; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 24px; gap: 6px;
}
.portada .marca-grande {
  width: 68px; height: 68px; border-radius: 20px; margin-bottom: 16px;
  background: linear-gradient(145deg, var(--marca), var(--marca-oscura));
  display: grid; place-items: center; color: var(--sobre-marca);
  overflow: hidden; box-shadow: var(--sombra);
}
.portada .marca-grande svg { width: 100%; height: 100%; display: block; }
.portada h2 { font-size: 1.6rem; letter-spacing: -.028em; }
.portada h2 .flow { font-weight: 400; color: var(--texto-2); }
.portada form { width: 100%; max-width: 340px; margin-top: 20px; }
.portada .cambiar { margin-top: 16px; font-size: .88rem; color: var(--texto-2); }
.portada .cambiar a { color: var(--marca); text-decoration: none; cursor: pointer; font-weight: 500; }

/* ===================================================================== */
/*  Pantallas grandes: el mesón tiene celular, pero el escritorio tiene   */
/*  monitor. A partir de tablet la navegación pasa al lado y el           */
/*  contenido respira en dos columnas.                                    */
/* ===================================================================== */
@media (min-width: 760px) {
  main { padding: 24px 24px 48px; max-width: 1040px; }
  header.barra { padding-left: 24px; padding-right: 24px; }
  .rejilla-3 { grid-template-columns: repeat(3, 1fr); }
  .cronometro { font-size: 4.8rem; }
  #avisos { left: auto; right: 24px; bottom: 24px; max-width: 380px; }
}

@media (min-width: 900px) {
  body { flex-direction: row; }

  nav.abajo {
    position: fixed; top: 0; bottom: 0; left: 0; right: auto;
    width: 96px; flex-direction: column; justify-content: flex-start;
    gap: 4px; padding: 88px 8px 16px;
    border-top: none; border-right: 1px solid var(--borde);
  }
  nav.abajo button { flex: 0 0 auto; padding: 14px 4px; border-radius: 10px; font-size: .74rem; }
  nav.abajo button.activa { background: var(--marca-suave); }
  nav.abajo svg { width: 23px; height: 23px; }

  header.barra { left: 0; padding-left: 24px; }
  #app { padding-left: 96px; }
  main { padding-bottom: 48px; }
  #avisos { bottom: 24px; }

  /* Dos columnas en las pantallas que son listas largas */
  #lista-anticuerpos, #lista-protocolos, #ultimas-corridas {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start;
  }
  #lista-anticuerpos .tarjeta, #lista-protocolos .tarjeta, #ultimas-corridas .tarjeta {
    margin-bottom: 0;
  }
  .lista-vacia { grid-column: 1 / -1; }
}

@media (min-width: 1240px) {
  main { max-width: 1180px; }
  #p-correr .paso { max-width: 780px; }
}

/* El ratón sí tiene estado de reposo; el dedo no. */
@media (hover: hover) {
  .tarjeta.pulsable:hover { border-color: var(--marca-oscura); }
  button:hover:not(:disabled) { filter: brightness(1.08); }
  nav.abajo button:hover { color: var(--texto-2); }
}

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

/* Pantallas muy angostas: que nada se salga. */
@media (max-width: 360px) {
  html, body { font-size: 16px; }
  main { padding-left: 12px; padding-right: 12px; }
  .numerote { font-size: 1.75rem; }
  .cronometro { font-size: 3.2rem; }
  nav.abajo button { font-size: .66rem; }
}

/* Apaisado en el celular: la barra de navegación roba demasiada altura. */
@media (max-height: 460px) and (orientation: landscape) {
  header.barra { padding-top: 8px; padding-bottom: 8px; }
  .cronometro { font-size: 2.6rem; margin: 2px 0; }
  main { padding-bottom: 76px; }
  nav.abajo button { min-height: 44px; padding: 6px 2px; }
}

/* ---------- galería de resultados ---------- */
.galeria {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px; margin-bottom: 12px;
}
.galeria figure {
  margin: 0; background: var(--fondo-2); border: 1px solid var(--borde);
  border-radius: 12px; overflow: hidden; cursor: pointer;
}
.galeria img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.galeria figcaption {
  padding: 7px 9px; font-size: .8rem; line-height: 1.35; color: var(--texto-2);
}
img.mini {
  width: 76px; height: 76px; object-fit: cover; border-radius: 9px;
  margin: 8px 6px 0 0; cursor: pointer; border: 1px solid var(--borde);
}
input[type="file"] {
  padding: 9px; font-size: .88rem; background: var(--fondo-3);
}
input[type="range"] { padding: 0; accent-color: var(--marca); border: none; background: none; }

/* ---------- impresión: que salga el protocolo, no la aplicación ---------- */
@media print {
  nav.abajo, header.barra, #avisos, .velo, button { display: none !important; }
  body, main { background: #fff !important; color: #000 !important; padding: 0 !important; }
  .tarjeta, .paso { border-color: #ccc !important; background: #fff !important; break-inside: avoid; }
  .tenue, .suave { color: #555 !important; }
  a { color: #000 !important; text-decoration: none; }
}


/* Cajitas de filtro: la elegida se ve elegida. */
button.chico.activa, .filtro-ab.activa, .esp.activa, .tab-calc.activa, .tab-prot.activa {
  background: var(--marca-suave);
  border-color: var(--marca);
  color: var(--marca);
}

/* ===================================================================== */

/*                                                                        */
/*  El color de cada canal lo manda el servidor (fluorophores.py,         */
/*  CANAL_COLOR) y app.js lo escribe como estilo en línea, así que las    */
/*  variables --azul/--verde/--naranja/--rojo/--lejano de arriba no       */
/*  llegan solas al punto ni al chip. Mientras esa tabla siga con la      */
/*  gama antigua, reasignamos aquí sus cinco hexadecimales.               */
/*  BORRAR este bloque en cuanto CANAL_COLOR use los valores nuevos.      */
/* ===================================================================== */

/* El girito pequeño que dice «esto es lo guardado, sigo buscando». */
.cargando.chica { width: 11px; height: 11px; border-width: 2px; vertical-align: -1px; }

/* Por qué salió este resultado: dónde coincidió la búsqueda, con la palabra marcada. */
.coincide { font-size: .78rem; color: var(--texto-3); margin-top: 4px; line-height: 1.35; }
.coincide .donde { color: var(--marca); font-weight: 600; }
.coincide .donde::after { content: ":"; }
.coincide mark { background: var(--marca-tenue); color: var(--texto); padding: 0 2px; border-radius: 3px; }

/* Las vueltas de un paso repetido (3 × 5 min): cuál va y cuáles quedan. */
.vueltas { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 8px; }
.vueltas .vuelta {
  width: 26px; height: 26px; border-radius: 50%; display: inline-flex;
  align-items: center; justify-content: center; font-size: .8rem; font-weight: 650;
  border: 1.5px solid var(--borde-fuerte); color: var(--texto-2);
}
.vueltas .vuelta.actual { border-color: var(--marca); color: var(--marca); }
.vueltas .vuelta.hecha { background: var(--marca); border-color: var(--marca); color: var(--sobre-marca); }

/* Dentro de la cuenta de otra persona: se ve todo el rato, y volver está a un toque. */
#suplantacion {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 16px; font-size: .86rem;
  background: var(--aviso); color: #1a1200;
}
#suplantacion button { background: #1a1200; color: var(--aviso); border-color: #1a1200; }

/* Los tres sitios donde puede estar un reactivo: lo mío, lo que puedo pedir, lo de fuera. */
.ambitos { display: flex; gap: 4px; margin: 2px 0 12px; background: var(--fondo-3); border-radius: 12px; padding: 4px; }
.ambitos .ambito {
  flex: 1; padding: 8px 6px; border-radius: 9px; border: 0; background: transparent;
  color: var(--texto-2); font-size: .84rem; font-weight: 600;
}
.ambitos .ambito.activa { background: var(--fondo); color: var(--texto); box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.ambitos .cuenta { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 9px; font-size: .72rem; background: var(--marca-tenue); color: var(--marca); }
.ambitos .cuenta:empty { display: none; }

/* Deslizar una tarjeta: a la izquierda la quita, a la derecha la edita. */
.deslizable { position: relative; overflow: hidden; border-radius: 14px; margin-bottom: 10px; }
.deslizable > .tarjeta { position: relative; z-index: 1; margin-bottom: 0; transition: transform .18s ease; touch-action: pan-y; }
.deslizable .fondo {
  position: absolute; inset: 0; display: flex; align-items: center; padding: 0 18px;
  font-weight: 650; font-size: .9rem; opacity: .55; transition: opacity .12s;
}
.deslizable .fondo.editar { justify-content: flex-start; background: var(--marca-oscura); color: #fff; }
.deslizable .fondo.quitar { justify-content: flex-end; background: var(--error); color: #1a0505; }
.deslizable.va-editar .fondo.editar, .deslizable.va-quitar .fondo.quitar { opacity: 1; }

/* Anticuerpos de un paso: la casilla lleva el color del fluoróforo y el veredicto. */
.ab-paso { margin-top: 8px; }
.ab-fila { border: 1px solid var(--borde); border-left: 4px solid var(--borde-fuerte); border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; background: var(--fondo-3); }
.ab-fila.incompatible { border-color: var(--error); border-left-color: var(--error); }
.ab-fila .dilucion { width: 78px; flex: 0 0 78px; padding: 6px 8px; font-size: .86rem; text-align: center; }
.ab-fila .quitar { width: 30px; height: 30px; padding: 0; border-radius: 8px; flex: 0 0 30px; }
.veredicto { font-size: .78rem; margin-top: 5px; }
.veredicto.bien { color: var(--ok); }
.veredicto.mal { color: var(--error); }
.veredicto.duda { color: var(--aviso); }
.reactivo-paso { font-size: .82rem; color: var(--texto-2); border-left: 3px solid transparent; padding-left: 8px; margin-top: 3px; }
.reactivo-paso.incompatible { border-left-color: var(--error); }

/* La foto de dónde está el reactivo. */
/* El tramo del plan que no se puede reservar: en rojo, pero se sigue igual. */
.tarjeta.tramo-rojo { background: color-mix(in srgb, var(--error) 7%, var(--fondo-2, transparent)); }
.nota-panel.error { border-color: var(--error); }
.nota-panel.error .icono { color: var(--error); }

/* Muestras: la rejilla de espacios de una caja del tanque */
.rejilla-espacios { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin-top: 4px; }
.rejilla-espacios .espacio { text-align: center; font-size: .72rem; padding: 8px 0; border-radius: 6px;
  border: 1px solid var(--ok-linea); background: var(--ok-suave); color: var(--ok); }
.rejilla-espacios .espacio.ocupado { border-color: var(--error-linea); background: var(--error-suave); color: var(--error); cursor: pointer; }
#mu-rejilla .espacio { cursor: pointer; padding: 11px 0; font-size: .82rem; user-select: none; }
.rejilla-espacios .espacio.ocupado.ajeno { border-color: var(--borde); background: var(--fondo-2, transparent); color: var(--texto-3); }
#mu-rejilla .espacio.elegido { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 700; }

/* Aviso plegado: una línea de color; se abre al pinchar */
details.aviso-plegado { border: 1px solid var(--aviso-linea); background: var(--aviso-suave); border-radius: 12px; margin-bottom: 10px; }
details.aviso-plegado.error { border-color: var(--error-linea); background: var(--error-suave); }
details.aviso-plegado summary { display: flex; align-items: center; gap: 8px; padding: 9px 12px; cursor: pointer; list-style: none; font-size: .9rem; }
details.aviso-plegado summary::-webkit-details-marker { display: none; }
details.aviso-plegado summary .icono { font-weight: 700; }
details.aviso-plegado summary .flecha { color: var(--texto-3); transition: transform .15s; }
details.aviso-plegado[open] summary .flecha { transform: rotate(90deg); }
details.aviso-plegado .cuerpo { padding: 0 12px 10px 34px; font-size: .88rem; }

/* La cajita de stock de un reactivo: verde, amarillo, rojo */
button.stock { min-height: 32px; padding: 5px 11px; border-radius: 999px; font-size: .72rem; font-weight: 650; border: 1px solid; white-space: nowrap; }
button.stock.stock-ok { background: var(--ok-suave); color: var(--ok); border-color: var(--ok-linea); }
button.stock.stock-poco { background: var(--aviso-suave); color: var(--aviso); border-color: var(--aviso-linea); }
button.stock.stock-agotado { background: var(--error-suave); color: var(--error); border-color: var(--error-linea); }

/* Un componente que es un reactivo del estante: se pincha y lleva a dónde está */
.enlace-reactivo { color: var(--marca); cursor: pointer; text-decoration: underline dotted; padding: 4px 0; display: inline-block; }
.enlace-reactivo.sin-estante { color: inherit; text-decoration-color: var(--tenue, #8a97a8); }

/* Estadísticas de uso: barras por grupo */
.barra-uso { margin-bottom: 8px; }
.pista-barra { height: 8px; border-radius: 999px; background: var(--fondo); border: 1px solid var(--borde); overflow: hidden; margin-top: 3px; }
.pista-barra .relleno { height: 100%; background: var(--marca); border-radius: 999px; }

/* Recetas favoritas: estrella en la tarjeta y caja arriba */
.caja-favoritas { padding: 10px 10px 2px; margin-bottom: 6px; border-radius: 12px;
  border: 1px solid var(--aviso-linea); background: color-mix(in srgb, var(--aviso) 8%, var(--fondo-2)); }
button.estrella { float: right; background: none; border: none; min-height: 32px; min-width: 32px; padding: 0 0 0 8px; margin: -6px 0 0 0;
  font-size: 1.15rem; line-height: 1; color: var(--texto-3); }
button.estrella.puesta { color: var(--aviso); }

/* La caja de anticuerpos de un paso de primario o secundario, en el editor */
.caja-anticuerpos { margin: 8px 0 4px; padding: 10px 11px; border: 1px dashed var(--marca-oscura, var(--marca)); border-radius: 12px; background: var(--fondo); }
.ab-fila.pendiente { border-left-color: var(--borde); background: transparent; }

/* Los anticuerpos de un paso durante la corrida */
.abs-paso { font-size: .84rem; margin-top: 4px; display: grid; gap: 2px; }
.abs-paso.grande { font-size: .92rem; margin: 8px 0 2px; }

/* Tarjeta de equipo: el marco lleva el color del estado. */
.tarjeta.equipo { padding: 8px 10px; margin-bottom: 8px; border-left-width: 4px; }
.tarjeta.equipo > .fila { gap: 8px; }
.tarjeta.equipo .icono-equipo { width: 42px; height: 42px; flex-basis: 42px; margin-right: 4px; border-radius: 10px; }
.tarjeta.equipo .icono-equipo.vacio { font-size: 1.15rem; }
.tarjeta.equipo button.chico { padding: 6px 10px; min-height: 0; font-size: .8rem; align-self: center; }
.tarjeta.equipo details.plegable { margin-top: 2px; }
.tarjeta.equipo details.plegable summary { font-size: .76rem; padding: 2px 0; }
.tarjeta.equipo .distintivo { padding: 2px 7px; font-size: .7rem; }
.tarjeta.equipo.estado-operativo { border-left-color: var(--ok); }
.tarjeta.equipo.estado-mantencion { border-left-color: var(--aviso); border-color: var(--aviso-linea); }
.tarjeta.equipo.estado-malo { border-left-color: var(--error); border-color: var(--error-linea); }
.nombre-equipo { font-weight: 650; font-size: .92rem; line-height: 1.2; }
.tarjeta.equipo .tenue { font-size: .76rem !important; line-height: 1.25; }
.estado-equipo { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 600; margin-top: 2px; }
.estado-equipo .punto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.estado-operativo .estado-equipo { color: var(--ok); }
.estado-mantencion .estado-equipo { color: var(--aviso); }
.estado-malo .estado-equipo { color: var(--error); }

/* La foto del equipo como icono de su tarjeta */
.icono-equipo { width: 52px; height: 52px; flex: 0 0 52px; object-fit: cover; border-radius: 12px;
  border: 1px solid var(--borde); margin-right: 10px; cursor: zoom-in; background: var(--fondo-2); }
.icono-equipo.vacio { display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
  color: var(--texto-3); cursor: pointer; }

/* Invitaciones con QR */
.qr-caja { background: #fff; border-radius: 14px; padding: 12px; max-width: 260px; margin: 10px auto; }
.qr-caja svg { width: 100%; height: auto; display: block; }
.invitacion-banner { margin: 14px 0 4px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--marca);
  background: var(--marca-suave); font-size: .92rem; text-align: left; width: 100%; }
.invitacion-banner img { height: 34px; width: auto; margin-bottom: 6px; display: block; }

/* Logos de la unidad: instituto › centro › grupo, en fila y a la misma altura. */
.logos-unidad { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-bottom: 8px; }
.logos-unidad img { height: var(--alto, 40px); width: auto; max-width: 42%; object-fit: contain; cursor: zoom-in; }
img.logo-unidad { height: 44px; width: auto; max-width: 140px; object-fit: contain; border-radius: 6px; }
img.logo-unidad.chico { height: 32px; max-width: 90px; margin-right: 8px; }
.foto-sitio { margin-top: 8px; }
.foto-sitio img.mini { display: block; max-width: 100%; max-height: 180px; width: auto; border-radius: 10px; border: 1px solid var(--borde); cursor: zoom-in; }

/* La campana de la cabecera con su número. */
#btn-avisos { position: relative; }
#btn-avisos .cuenta { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px;
  padding: 0 5px; border-radius: 9px; background: var(--marca); color: var(--sobre-marca);
  font-size: .7rem; font-weight: 700; line-height: 18px; text-align: center; }
#btn-avisos .cuenta:empty { display: none; }

/* Resultado de una corrida: estrellas que se tocan y galería de fotos. */
.estrellas-editables { display: flex; align-items: center; gap: 2px; }
.estrellas-editables .estrella { background: none; border: 0; padding: 2px 4px; font-size: 1.6rem; line-height: 1;
  color: var(--texto-3); cursor: pointer; }
.estrellas-editables .estrella.llena { color: var(--aviso); }
.galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-bottom: 8px; }
.foto-corrida { position: relative; margin: 0; }
.foto-corrida img.mini { width: 100%; height: 110px; object-fit: cover; border-radius: 10px; border: 1px solid var(--borde); cursor: zoom-in; }
.foto-corrida .quitar { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; padding: 0; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff; border: 0; }

/* Tubos iguales plegados en una entrada: el resumen es la fila, dentro va cada sitio. */
details.lote-tubos { margin-bottom: 8px; }
details.lote-tubos > summary { list-style: none; cursor: pointer; }
details.lote-tubos > summary::-webkit-details-marker { display: none; }
details.lote-tubos[open] > summary { border-bottom: 1px solid var(--borde); padding-bottom: 8px; margin-bottom: 4px; }

/* Jerarquía en Buscar: el centro es el resumen, sus laboratorios cuelgan dentro. */
details.jerarquia > summary { list-style: none; cursor: pointer; }
details.jerarquia > summary::-webkit-details-marker { display: none; }
details.jerarquia[open] > summary { border-bottom: 1px solid var(--borde); padding-bottom: 6px; margin-bottom: 4px; }

/* Dilución: el «1:» va impreso y solo se escribe el número. Así nadie pelea
   con los dos puntos en el teclado del celular ni se guarda «500» a secas. */
.dil-campo { display: inline-flex; align-items: stretch; flex: 1; min-width: 0; }
.dil-campo .dil-uno {
  display: flex; align-items: center; padding: 0 8px; font-weight: 650;
  color: var(--texto-3); background: var(--fondo-2, transparent);
  border: 1px solid var(--borde); border-right: none; border-radius: 10px 0 0 10px;
  font-variant-numeric: tabular-nums;
}
.dil-campo input.dilucion { border-radius: 0 10px 10px 0; min-width: 0; flex: 1; }

/* Visor de la cámara para leer el código de invitación. */
.visor-qr { position: relative; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 1; }
.visor-qr video { width: 100%; height: 100%; object-fit: cover; display: block; }
.visor-qr::after {
  content: ""; position: absolute; inset: 18%; border: 3px solid var(--marca);
  border-radius: 12px; pointer-events: none;
}

/* Equipos antes de empezar: lo que no está disponible se ve sin leer. */
.equipo-plan.no-disponible b { color: var(--error); }
.equipo-plan.no-disponible { background: var(--error-suave); border-radius: 8px; padding-left: 8px; padding-right: 8px; }

/* La dilución dentro de una fila del resumen: el «1:» impreso y un hueco corto. */
.reactivo-fila .dil-uno { display: inline-flex; align-items: center; gap: 2px; font-weight: 650; color: var(--texto-3); }
.reactivo-fila .dil-uno input { width: 5.5rem; text-align: right; padding: 5px 8px; font-variant-numeric: tabular-nums; }

/* ---------- pestañas de arriba ---------- */
/* Mismo lenguaje que la barra de abajo —icono encima, nombre debajo, pastilla
   en la elegida— para que se lean igual sin tener que aprender dos cosas.
   Se quedan pegadas al bajar, que es cuando hacen falta para cambiar. */
nav.arriba {
  display: flex; gap: 2px; margin: 0 0 14px;
  position: sticky; top: 0; z-index: 30;
  background: var(--fondo); padding-top: 2px;
  border-bottom: 1px solid var(--borde);
}
nav.arriba button {
  flex: 1; flex-direction: column; gap: 3px;
  background: none; border: none; border-radius: 0;
  color: var(--texto-3); padding: 8px 2px 8px; font-size: .72rem; font-weight: 500;
  min-height: 52px; min-width: 0;
}
nav.arriba button svg {
  width: 21px; height: 21px; stroke-width: 1.9;
  padding: 3px 11px; box-sizing: content-box; border-radius: 11px;
  transition: background .15s;
}
nav.arriba button.activa { color: var(--marca); font-weight: 650; }
nav.arriba button.activa svg { stroke-width: 2.4; background: var(--marca-suave); }

/* Dos líneas y a otra cosa: en la lista del cuaderno se lee de qué va cada
   entrada, no la entrada entera. */
.recorta-2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---------- cuaderno ---------- */
/* El texto de una entrada se lee como texto, no como una ficha: respeta los
   saltos de línea que escribió quien lo puso y va más ancho de lo normal. */
.cuerpo-cuaderno {
  white-space: pre-wrap; font-size: .92rem; line-height: 1.55;
  margin: 10px 0; color: var(--texto-2);
}
.galeria-cuaderno { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.galeria-cuaderno figure { margin: 0; position: relative; }
.galeria-cuaderno img {
  width: 100%; border-radius: 10px; display: block;
  border: 1px solid var(--borde); background: var(--fondo-3);
}
.galeria-cuaderno figcaption { font-size: .76rem; color: var(--texto-3); margin-top: 3px; }
.galeria-cuaderno figure > button { position: absolute; top: 5px; right: 5px; padding: 2px 7px; }

/* ---------- recortar una hoja de cuaderno ---------- */
/* La foto con sus cuatro esquinas arrastrables encima. El recuadro se dibuja
   en un SVG que se estira con la imagen, así no hay que recalcular nada al
   girar el teléfono. */
.recorte { position: relative; display: inline-block; max-width: 100%; touch-action: none; }
.recorte img { max-width: 100%; display: block; border-radius: 10px; }
.recorte svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.recorte svg polygon { fill: rgba(47, 216, 239, .16); stroke: var(--marca); stroke-width: .6; }
.recorte .esquina {
  position: absolute; width: 30px; height: 30px; padding: 0; margin: -15px 0 0 -15px;
  border-radius: 50%; background: var(--marca); border: 3px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: grab; touch-action: none;
}
.recorte .esquina:active { cursor: grabbing; transform: scale(1.15); }

/* El calendario del mes. Los días se tocan con el dedo y con guantes: 40 px
   de lado como mínimo, que es lo que mide una yema. El color dice si queda
   sitio, pero nunca lo dice *solo* el color: el día completo va tachado. */
.cal-cabecera {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin: 2px 0 8px;
}
.cal-cabecera b { font-size: .95rem; text-transform: capitalize; }
.cal-flecha {
  width: 38px; height: 38px; border-radius: 10px; font-size: 1.3rem; line-height: 1;
  background: var(--fondo-3); color: var(--texto); border: 1px solid var(--borde);
  cursor: pointer;
}
.cal-flecha:active { transform: scale(.94); }
.cal-rejilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-nombre {
  text-align: center; font-size: .72rem; color: var(--texto-3);
  padding-bottom: 2px; font-weight: 600;
}
.cal-dia {
  min-height: 40px; border-radius: 10px; border: 1px solid transparent;
  background: var(--fondo-3); color: var(--texto); font-size: .88rem;
  font-variant-numeric: tabular-nums; cursor: pointer; padding: 0;
}
.cal-dia:active { transform: scale(.93); }
.cal-dia:disabled { opacity: .35; cursor: default; }
.cal-dia.hoy { border-color: var(--borde-fuerte); font-weight: 700; }
.cal-dia.libre { background: var(--marca-tenue); color: var(--marca); border-color: var(--marca-oscura); }
.cal-dia.algo { background: var(--fondo-3); color: var(--texto); border-color: var(--aviso); }
.cal-dia.completo { color: var(--texto-3); text-decoration: line-through; }
.cal-dia.elegido {
  background: var(--marca); color: var(--sobre-marca); font-weight: 700;
  border-color: var(--marca);
}

/* La fecha como campo: el botón enseña el día escrito con todas sus letras,
   que es como se dice en voz alta, y despliega el calendario debajo. */
.cal-campo {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; padding: 11px 12px; border-radius: 10px; text-align: left;
  background: var(--fondo-3); color: var(--texto);
  border: 1px solid var(--borde-fuerte); font-size: .95rem; cursor: pointer;
}
.cal-cuerpo {
  margin-top: 6px; padding: 10px; border-radius: 12px;
  background: var(--fondo-2); border: 1px solid var(--borde);
}
.cal-leyenda {
  display: flex; gap: 12px; flex-wrap: wrap;
  font-size: .76rem; color: var(--texto-3);
}
.cal-leyenda span { display: inline-flex; align-items: center; gap: 5px; }
.cal-leyenda i {
  width: 11px; height: 11px; border-radius: 3px; display: inline-block;
  background: var(--fondo-3); border: 1px solid var(--borde);
}
.cal-leyenda i.libre { background: var(--marca-tenue); border-color: var(--marca-oscura); }
.cal-leyenda i.algo { border-color: var(--aviso); }
.cal-leyenda i.completo { background: var(--fondo); border-color: var(--texto-3); }

/* El cuaderno leído en pantalla: son las hojas del PDF de verdad, así que lo
   que se ve aquí es exactamente lo que se imprime. Fondo oscuro alrededor para
   que el papel se lea como papel. */
.visor-hojas {
  background: var(--fondo); border: 1px solid var(--borde); border-radius: 10px;
  overflow: auto; max-height: 68vh; text-align: center; padding: 8px;
  -webkit-overflow-scrolling: touch;
}
.visor-hojas img {
  width: 100%; height: auto; border-radius: 4px; background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .35); user-select: none;
}
.visor-barra {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 8px;
}
.visor-barra .tenue { font-variant-numeric: tabular-nums; min-width: 110px; text-align: center; }

/* Para lectores de pantalla y nada más. El cronómetro cambia cada segundo:
   leerlo en voz alta sería insoportable, así que se marca aria-hidden y al
   lado va esto, que dice lo mismo una vez. */
.oculto-visual {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}