/* ════════════════════════════════════════════════════════════════════════════
   SEMHYS · Capa interactiva de las cartillas
   ────────────────────────────────────────────────────────────────────────────
   QUÉ RESUELVE: la cartilla enseña un criterio —«el retrolavado se dispara entre
   2,0 y 2,5 m c.a.»— y ahí se detiene. Quien la lee todavía tiene que coger sus
   propias lecturas y decidir a mano si le toca lavar. Esta capa cierra ese paso:
   el criterio se aplica a los números de quien está delante del filtro y devuelve
   un veredicto.

   TRES REGLAS QUE NO SE ROMPEN:

   1 · El documento manda. Todo lo interactivo va DENTRO del texto que ya explica
       el criterio, nunca en lugar de él. Si el navegador no ejecuta el script, la
       cartilla se lee entera igual: los bloques interactivos no existen hasta que
       el JS los crea.

   2 · Se imprime limpio. Al imprimir desaparecen deslizadores y botones y quedan
       solo los valores y el veredicto, ya calculados. La cartilla en papel sigue
       siendo la cartilla en papel — con los números de quien la usó.

   3 · El color significa. Verde cumple, ámbar vigila, rojo actúa. No hay color
       decorativo en un veredicto.

   Este archivo lo comparten las nueve cartillas.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --ci-fondo: #f2f8fa;
  --ci-caja: #fff;
  --ci-linea: #d4e0e7;
  --ci-tinta: #0f1f29;
  --ci-suave: #5f7280;
  --ci-acento: #0a7ea4;
  --ci-ok: #2e9e63;
  --ci-ambar: #d99a00;
  --ci-rojo: #d0453b;
  --ci-ok-f: #eefaf3;
  --ci-ambar-f: #fdf6e3;
  --ci-rojo-f: #fdeeed;
}

/* ── Modo oscuro ──
   No es estética: estas cartillas se usan en sala de bombas y en turno de noche,
   donde una pantalla blanca a oscuras deslumbra. Se respeta la preferencia del
   sistema y además se puede forzar con el botón. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --ci-fondo: #16242e; --ci-caja: #1c2c37; --ci-linea: #2f4552;
    --ci-tinta: #e8f1f5; --ci-suave: #9fb6c2; --ci-acento: #4bb8d8;
    --ci-ok-f: #17301f; --ci-ambar-f: #322709; --ci-rojo-f: #351917;
  }
}
:root[data-tema="oscuro"] {
  --ci-fondo: #16242e; --ci-caja: #1c2c37; --ci-linea: #2f4552;
  --ci-tinta: #e8f1f5; --ci-suave: #9fb6c2; --ci-acento: #4bb8d8;
  --ci-ok-f: #17301f; --ci-ambar-f: #322709; --ci-rojo-f: #351917;
}
:root[data-tema="oscuro"] body,
:root:not([data-tema="claro"]) body { }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) body { background: #101c24; color: var(--ci-tinta); }
  :root:not([data-tema="claro"]) figure { background: #16242e; }
  :root:not([data-tema="claro"]) figure svg { filter: invert(.92) hue-rotate(180deg); }
  :root:not([data-tema="claro"]) table { background: #1c2c37; }
  :root:not([data-tema="claro"]) th { background: #22343f !important; color: var(--ci-tinta) !important; }
  :root:not([data-tema="claro"]) td { border-color: #2f4552 !important; }
}
:root[data-tema="oscuro"] body { background: #101c24; color: var(--ci-tinta); }
:root[data-tema="oscuro"] figure { background: #16242e; }
:root[data-tema="oscuro"] figure svg { filter: invert(.92) hue-rotate(180deg); }
:root[data-tema="oscuro"] th { background: #22343f !important; color: var(--ci-tinta) !important; }
:root[data-tema="oscuro"] td { border-color: #2f4552 !important; }

/* ════════ BLOQUE DE CÁLCULO ════════ */

.ci {
  background: var(--ci-caja);
  border: 1px solid var(--ci-linea);
  border-radius: 13px;
  margin: 1.7rem 0;
  overflow: hidden;
}

.ci-cab {
  background: var(--ci-acento);
  color: #fff;
  padding: .75rem 1.05rem;
  display: flex;
  align-items: center;
  gap: .55rem;
  flex-wrap: wrap;
}
.ci-cab h4 { font-size: .97rem; font-weight: 800; margin: 0; letter-spacing: -.01em; }
.ci-cab .ci-et {
  font-size: .61rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase;
  background: rgba(255,255,255,.22); padding: .2rem .48rem; border-radius: 3px;
  margin-left: auto;
}

.ci-cuerpo { padding: 1.05rem; }

/* ── Campos ──
   Número y deslizador sobre el MISMO valor: el deslizador para tantear un rango
   y ver cómo se mueve el veredicto, la casilla para escribir la lectura exacta
   del manómetro. En un móvil, en el pasillo del filtro, el deslizador es lo
   único que se puede usar con una mano. */
.ci-campos { display: grid; gap: .85rem; }
@media (min-width: 620px) { .ci-campos { grid-template-columns: 1fr 1fr; } }

.ci-campo label {
  display: block; font-size: .73rem; font-weight: 700; color: var(--ci-suave);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: .3rem;
}
.ci-campo .ci-fila { display: flex; align-items: center; gap: .5rem; }
.ci-campo input[type="number"] {
  width: 5.6rem; flex-shrink: 0; padding: .42rem .5rem; font-size: 1rem;
  font-weight: 700; text-align: right; color: var(--ci-tinta);
  background: var(--ci-fondo); border: 1px solid var(--ci-linea);
  border-radius: 7px; font-family: inherit;
}
.ci-campo input[type="number"]:focus { outline: 2px solid var(--ci-acento); outline-offset: -1px; }
.ci-campo .ci-uni { font-size: .8rem; color: var(--ci-suave); flex-shrink: 0; min-width: 3.6rem; }
.ci-campo input[type="range"] {
  flex: 1; min-width: 0; accent-color: var(--ci-acento); height: 1.5rem; cursor: pointer;
}
.ci-campo .ci-nota { font-size: .72rem; color: var(--ci-suave); margin-top: .18rem; line-height: 1.4; }

/* ── Veredicto ── */
.ci-veredicto {
  margin-top: 1.05rem; border-radius: 10px; padding: .85rem 1rem;
  border-left: 4px solid var(--ci-suave); background: var(--ci-fondo);
}
.ci-veredicto .ci-titulo {
  font-size: 1.02rem; font-weight: 800; line-height: 1.3; display: block; margin-bottom: .15rem;
}
.ci-veredicto .ci-porque { font-size: .87rem; line-height: 1.55; color: var(--ci-tinta); }
.ci-veredicto.ok    { border-color: var(--ci-ok);    background: var(--ci-ok-f); }
.ci-veredicto.ok    .ci-titulo { color: var(--ci-ok); }
.ci-veredicto.ambar { border-color: var(--ci-ambar); background: var(--ci-ambar-f); }
.ci-veredicto.ambar .ci-titulo { color: #a87700; }
.ci-veredicto.rojo  { border-color: var(--ci-rojo);  background: var(--ci-rojo-f); }
.ci-veredicto.rojo  .ci-titulo { color: #b03830; }

/* ── Resultados numéricos ── */
.ci-salidas {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: .55rem; margin-top: .9rem;
}
.ci-salida {
  background: var(--ci-fondo); border-radius: 9px; padding: .6rem .7rem;
  border: 1px solid var(--ci-linea);
}
.ci-salida b {
  display: block; font-size: .64rem; font-weight: 800; color: var(--ci-suave);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: .2rem; line-height: 1.3;
}
.ci-salida span { font-size: 1.16rem; font-weight: 800; color: var(--ci-tinta); letter-spacing: -.02em; }
.ci-salida span .u { font-size: .72rem; font-weight: 600; color: var(--ci-suave); margin-left: .25rem; }
.ci-salida.destaca { border-color: var(--ci-acento); background: rgba(10,126,164,.07); }
.ci-salida.destaca span { color: var(--ci-acento); }

/* ── Avisos que dependen de los números ── */
.ci-avisos { margin-top: .75rem; display: grid; gap: .4rem; }
.ci-aviso {
  font-size: .845rem; line-height: 1.5; padding: .5rem .7rem; border-radius: 7px;
  border-left: 3px solid var(--ci-suave); background: var(--ci-fondo);
}
.ci-aviso.ok    { border-color: var(--ci-ok);    background: var(--ci-ok-f); }
.ci-aviso.ambar { border-color: var(--ci-ambar); background: var(--ci-ambar-f); }
.ci-aviso.rojo  { border-color: var(--ci-rojo);  background: var(--ci-rojo-f); }
.ci-aviso b { color: var(--ci-tinta); }

/* ── Gráfica que responde a los datos ── */
.ci-grafica { margin-top: .95rem; background: var(--ci-fondo); border-radius: 9px; padding: .6rem; }
.ci-grafica svg { display: block; width: 100%; height: auto; }

/* ════════ LISTA DE COMPROBACIÓN ════════
   Un retrolavado dura media hora y se hace de pie. Marcar el paso hecho y que
   siga marcado si se bloquea el teléfono es la diferencia entre usar la cartilla
   y abandonarla a medias. */
.ci-lista { background: var(--ci-caja); border: 1px solid var(--ci-linea);
  border-radius: 13px; margin: 1.7rem 0; overflow: hidden; }
.ci-lista .ci-cab { background: var(--ci-tinta); }
:root[data-tema="oscuro"] .ci-lista .ci-cab { background: #22343f; }
.ci-lista ol { margin: 0; padding: .5rem .6rem; list-style: none; }
.ci-lista li { margin: 0; }
.ci-paso {
  display: flex; gap: .65rem; align-items: flex-start; padding: .6rem .55rem;
  border-radius: 8px; cursor: pointer; line-height: 1.5; font-size: .92rem;
}
.ci-paso:hover { background: var(--ci-fondo); }
.ci-paso input { margin-top: .22rem; width: 1.05rem; height: 1.05rem; accent-color: var(--ci-ok); flex-shrink: 0; cursor: pointer; }
.ci-paso .ci-txt b { display: block; color: var(--ci-tinta); }
.ci-paso .ci-txt small { color: var(--ci-suave); font-size: .81rem; line-height: 1.45; display: block; margin-top: .1rem; }
.ci-paso.hecho .ci-txt b { text-decoration: line-through; color: var(--ci-suave); }
.ci-lista .ci-pie {
  padding: .6rem 1rem; border-top: 1px solid var(--ci-linea); font-size: .82rem;
  color: var(--ci-suave); display: flex; justify-content: space-between;
  align-items: center; gap: .6rem; flex-wrap: wrap;
}
.ci-barra { height: 5px; background: var(--ci-linea); border-radius: 3px; overflow: hidden; flex: 1; min-width: 90px; }
.ci-barra i { display: block; height: 100%; background: var(--ci-ok); width: 0; transition: width .25s ease; }

/* ════════ BOTONES ════════ */
.ci-bots { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .9rem; }
.ci-bot {
  border: 1px solid var(--ci-linea); background: var(--ci-fondo); color: var(--ci-tinta);
  border-radius: 8px; padding: .48rem .85rem; font-size: .83rem; font-weight: 700;
  cursor: pointer; font-family: inherit;
}
.ci-bot:hover { border-color: var(--ci-acento); color: var(--ci-acento); }
.ci-bot.primario { background: var(--ci-acento); color: #fff; border-color: var(--ci-acento); }
.ci-bot.primario:hover { filter: brightness(1.1); color: #fff; }

/* ════════ BARRA DE HERRAMIENTAS ════════ */
.ci-herramientas {
  position: sticky; top: 0; z-index: 50; background: var(--ci-caja);
  border-bottom: 1px solid var(--ci-linea); padding: .5rem 1.1rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.ci-herramientas .ci-marca { font-size: .74rem; font-weight: 800; color: var(--ci-acento);
  letter-spacing: .1em; text-transform: uppercase; margin-right: auto; }
.ci-progreso { position: fixed; top: 0; left: 0; height: 3px; background: var(--ci-acento); z-index: 60; width: 0; }

/* ════════ VALORES QUE VIAJAN A LA HOJA DE REGISTRO ════════
   Lo que se midió arriba aparece ya escrito abajo. No se vuelve a teclear. */
.ci-dato {
  display: inline-block; min-width: 3rem; padding: 0 .3rem;
  border-bottom: 1.5px solid var(--ci-acento); font-weight: 800; color: var(--ci-acento);
  text-align: center;
}
.ci-dato:empty::before { content: '—'; color: var(--ci-linea); font-weight: 400; }

/* ════════ IMPRESIÓN ════════
   Fuera los mandos, dentro los valores. La hoja que sale de la impresora es la
   cartilla de siempre con los números de quien la usó, no una captura de una
   aplicación. */
@media print {
  .ci-herramientas, .ci-progreso, .ci-bots, .ci-lista .ci-pie { display: none !important; }
  .ci-campo input[type="range"] { display: none !important; }
  .ci-campo input[type="number"] {
    border: none; border-bottom: 1.5px solid #0a7ea4; border-radius: 0;
    background: transparent; padding: 0 .2rem; -moz-appearance: textfield; appearance: textfield;
  }
  .ci-campo input[type="number"]::-webkit-outer-spin-button,
  .ci-campo input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
  .ci, .ci-lista { break-inside: avoid; border: 1px solid #d4e0e7; }
  .ci-cab { background: #f2f8fa !important; color: #0f1f29 !important; border-bottom: 1px solid #d4e0e7; }
  .ci-cab h4 { color: #0f1f29 !important; }
  .ci-cab .ci-et { background: #0a7ea4 !important; color: #fff !important; }
  .ci-paso input { -webkit-appearance: none; appearance: none; border: 1.4px solid #5f7280;
    border-radius: 3px; width: .95rem; height: .95rem; }
  .ci-paso.hecho input { background: #2e9e63; border-color: #2e9e63; }
  .ci-veredicto, .ci-aviso, .ci-salida { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}