/*
 * Estilo del portal.
 *
 * Sin framework y sin JavaScript. Dos razones concretas, no purismo:
 *
 * 1. Buena parte de la red pública trabaja con equipos viejos y conexiones
 *    lentas. Una hoja de 6 KB carga donde un bundle de 300 KB no.
 * 2. Todo funciona con el formulario enviándose al servidor. Si el navegador
 *    de un centro rural no ejecuta el script, la consulta se documenta igual.
 *
 * Las medidas van en rem para que respeten el tamaño de letra del sistema:
 * mucho personal de salud lo tiene subido, y fijarlo en píxeles lo ignora.
 */

:root {
  --tinta: #1a2733;
  --tinta-suave: #55636f;
  --fondo: #f4f6f8;
  --papel: #ffffff;
  --borde: #d5dbe1;
  /* El borde de un campo no es decoración: es lo que dice dónde se escribe.
     La WCAG 2.1 (1.4.11) pide 3:1 para el contorno de un control, y --borde
     da 1,40 sobre papel — invisible para quien tenga poca visión. Este da
     3,17 incluso sobre el fondo gris, que es el peor caso.
     --borde se queda para separadores y tarjetas, donde 1,40 es aceptable
     porque son decorativos y no hay que acertarles con el cursor. */
  --borde-campo: #7f8c99;
  --primario: #00629b;
  --primario-oscuro: #004871;
  --exito: #0f7b3f;
  --aviso: #8a5a00;
  --error: #a5252b;
  --radio: 6px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--tinta);
  background: var(--fondo);
}

/* El salto al contenido sólo aparece al enfocarlo con el teclado. */
.salto {
  position: absolute;
  left: -9999px;
  background: var(--primario);
  color: #fff;
  padding: 0.75rem 1rem;
  z-index: 10;
}
.salto:focus { left: 0; top: 0; }

/* Foco siempre visible: quitarlo rompe la navegación por teclado. */
:focus-visible {
  outline: 3px solid var(--primario);
  outline-offset: 2px;
}

/* ── Cabecera ────────────────────────────────────────────────────────────── */

.cabecera {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 1.25rem;
  background: var(--primario);
  color: #fff;
}

.marca {
  font-weight: 600;
  color: #fff;
  text-decoration: none;
  margin-right: auto;
}

.menu { display: flex; gap: 1.25rem; }
.menu a { color: #fff; text-decoration: none; padding: 0.25rem 0; }
.menu a:hover { text-decoration: underline; }

.sesion { display: flex; align-items: center; gap: 0.75rem; }
.sesion .nombre { font-size: 0.9rem; opacity: 0.9; }
.sesion form { margin: 0; }

.enlace {
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  color: #fff;
  border-radius: var(--radio);
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}
.enlace:hover { background: rgba(255, 255, 255, 0.15); }

/* ── Estructura ──────────────────────────────────────────────────────────── */

.contenido {
  max-width: 62rem;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 3rem;
}

.pie {
  border-top: 1px solid var(--borde);
  padding: 1rem 1.25rem;
  color: var(--tinta-suave);
  font-size: 0.85rem;
  text-align: center;
}

h1 { font-size: 1.6rem; margin: 0 0 0.35rem; }
h2 { font-size: 1.2rem; margin: 2rem 0 0.75rem; }
.subtitulo { color: var(--tinta-suave); margin: 0 0 1.5rem; }

/* ── Avisos ──────────────────────────────────────────────────────────────── */

.avisos { margin-bottom: 1.5rem; }

.aviso {
  margin: 0 0 0.5rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radio);
  border-left: 4px solid var(--tinta-suave);
  background: var(--papel);
}
/* El texto lleva el color, no sólo el borde: pedido por Iván el 16/09/2026,
   para que se vea de un vistazo si lo que se hizo salió (verde) o no (rojo).
   Los tres tonos son oscuros a propósito: siguen leyéndose sobre blanco. */
.aviso--success { border-left-color: var(--exito); color: var(--exito); font-weight: 500; }
.aviso--warning { border-left-color: var(--aviso); color: var(--aviso); font-weight: 500; }
.aviso--error   { border-left-color: var(--error); color: var(--error); font-weight: 500; }

/* ── Tarjetas y paneles ──────────────────────────────────────────────────── */

.panel {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.rejilla {
  display: grid;
  /* Sin media queries: las columnas se acomodan solas desde un móvil de 320px
     hasta un monitor de escritorio. */
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

.tarjeta {
  display: block;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 1.25rem;
  text-decoration: none;
  color: inherit;
}
.tarjeta:hover { border-color: var(--primario); }
.tarjeta h2 { margin: 0 0 0.35rem; color: var(--primario-oscuro); }
.tarjeta p { margin: 0; color: var(--tinta-suave); font-size: 0.92rem; }

/* ── Formularios ─────────────────────────────────────────────────────────── */

.campo { margin-bottom: 1rem; }

.campo label {
  display: block;
  font-weight: 600;
  margin-bottom: 0.3rem;
  font-size: 0.92rem;
}

.campo .ayuda {
  display: block;
  color: var(--tinta-suave);
  font-size: 0.85rem;
  margin-top: 0.25rem;
}

input[type="text"], input[type="password"], input[type="date"],
input[type="time"],
input[type="search"], input[type="number"], input[type="email"],
input[type="tel"], select, textarea {
  width: 100%;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--borde-campo);
  border-radius: var(--radio);
  font: inherit;
  background: var(--papel);
  color: var(--tinta);
}

textarea { min-height: 6rem; resize: vertical; }

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

.boton {
  display: inline-block;
  padding: 0.65rem 1.25rem;
  border: 1px solid var(--primario);
  border-radius: var(--radio);
  background: var(--primario);
  color: #fff;
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { background: var(--primario-oscuro); }
/* Todo lo que lleva a otro sitio o hace algo se señala con la mano, en todo el
   portal: pedido por Iván el 16/09/2026. Un `summary` también: abre algo. */
a, button, summary, select, input[type="submit"], input[type="checkbox"],
input[type="radio"], label[for] { cursor: pointer; }
/* Y un `summary` además se *ve*. Por omisión es texto del mismo color que el
   resto: el puntero sólo lo delata a quien ya pasó por encima. Dos pantallas
   se lo habían pintado por su cuenta —la matriz de camas y la cámara— y las
   demás se quedaron en texto plano; Iván no encontró «Se fue sin que lo
   valoraran» en la cola de emergencia el 21/09/2026, y preguntó dónde había
   que pulsar. Se dice una vez, aquí, y con subrayado además del color:
   señalar una acción sólo con color la esconde de quien no lo distingue. */
summary { color: var(--primario); text-decoration: underline; }
summary:hover { color: var(--primario-oscuro); }
button:disabled, input:disabled { cursor: not-allowed; }
/* Y se ve: un botón deshabilitado con el mismo azul que uno activo invita a
   pulsarlo y no hace nada (visto el 17/09/2026 en «Cerrar la hoja»). */
.boton:disabled, .boton:disabled:hover {
  background: var(--borde); border-color: var(--borde); color: var(--tinta-suave);
}

.boton--secundario {
  background: var(--papel);
  color: var(--primario-oscuro);
}
.boton--secundario:hover { background: #eaf2f8; }

.boton--peligro { background: var(--error); border-color: var(--error); }
.boton--peligro:hover { background: #82191e; }

/* ── Listas y tablas ─────────────────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; background: var(--papel); }
th, td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--borde); }
th { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--tinta-suave); }

/* Una tabla ancha se desplaza dentro de su caja; la página nunca lo hace. */
.tabla-envoltura { overflow-x: auto; border-radius: var(--radio); border: 1px solid var(--borde); }

.etiqueta {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  background: #e8edf2;
  color: var(--tinta-suave);
}
.etiqueta--firmada { background: #dff0e4; color: var(--exito); }
.etiqueta--borrador { background: #fdf0d9; color: var(--aviso); }
.etiqueta--anulada { background: #f8e0e1; color: var(--error); }

/* Una fila que sigue ahí pero ya no cuenta: cita anulada, rol revocado,
   cuenta inactiva. Se usaba en la agenda desde el principio y no estaba
   definida aquí, así que una cita anulada se veía igual que una vigente. */
.fila--apagada { opacity: 0.55; }
.fila--apagada td { text-decoration-color: var(--tinta-suave); }

.dias { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.dia {
  display: block;
  min-width: 8.5rem;
  padding: 0.75rem 1rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  text-decoration: none;
  color: inherit;
}
.dia:hover { border-color: var(--primario); }
.dia strong { display: block; }
.dia span { font-size: 0.85rem; color: var(--tinta-suave); }

/* Un día que esta persona no puede tomar por la regla de los 30 días (§I.8).
   Se enseña apagado en vez de esconderse: un hueco sin explicar obliga a
   adivinar si es que no hay turnos o que este paciente no puede.

   No se distingue sólo por el color —hay quien no lo percibe— sino también
   por el cursor, el texto «No disponible para este paciente» y el motivo en
   el título. El color es el refuerzo, no la información. */
.dia--bloqueado {
  background: var(--fondo);
  border-style: dashed;
  color: var(--tinta-suave);
  cursor: not-allowed;
}
.dia--bloqueado strong { text-decoration: line-through; }

/* El día en que ya tiene su cita, distinto del que está en gris por caer
   dentro de los treinta días: uno es un sitio donde ir y el otro no.
   Pintados igual, la persona busca un hueco que ella misma ocupa.

   El color no va solo: se queda el borde discontinuo, se quita el tachado
   —esa fecha sí cuenta— y el motivo escrito debajo dice cuál es. Quien no
   distingue estos dos azules, que es alrededor de uno de cada doce hombres,
   tiene que poder leerlo igual. */
.dia--suyo {
  background: #e7f1f8;
  border-color: var(--primario);
  color: var(--primario-oscuro);
}
.dia--suyo strong { text-decoration: none; }

/* El resumen de los días bloqueados ocupa su propia línea dentro de la
   rejilla: intercalado entre las tarjetas se leería como una más. */
.dias__resumen {
  flex-basis: 100%;
  margin: 0.2rem 0;
  font-size: 0.9rem;
  color: var(--tinta-suave);
}

.vacio {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--tinta-suave);
  background: var(--papel);
  border: 1px dashed var(--borde);
  border-radius: var(--radio);
}

/* ── Acceso ──────────────────────────────────────────────────────────────── */

.acceso {
  max-width: 24rem;
  margin: 3rem auto;
}

.acceso .panel { padding: 1.75rem; }
.acceso h1 { font-size: 1.35rem; }


/* ── Inscripción del segundo factor ─────────────────────────────────────────
   Se hace una sola vez, de pie y con el teléfono en la mano. Todo grande y
   en una sola columna: quien está aquí no puede entrar al sistema todavía, y
   una pantalla apretada aquí acaba en una llamada a soporte. */

.pasos {
  margin: 0 0 1.25rem;
  padding-left: 1.25rem;
  color: var(--tinta-suave);
  line-height: 1.5;
}

.pasos li { margin-bottom: 0.35rem; }

.qr {
  display: flex;
  justify-content: center;
  padding: 1rem;
  background: var(--papel);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  margin-bottom: 1rem;
}

/* El QR se lee con una cámara: el blanco tiene que ser blanco de verdad, así
   que no hereda color del tema ni se le aplica ningún filtro. */
.qr svg {
  width: 100%;
  max-width: 15rem;
  height: auto;
  background: #ffffff;
  shape-rendering: crispEdges;
}

.sin-camara {
  margin-bottom: 1.25rem;
  font-size: 0.9rem;
}

.sin-camara summary {
  cursor: pointer;
  padding: 0.35rem 0;
}

.sin-camara p { color: var(--tinta-suave); margin: 0.5rem 0; }

/* Se teclea a mano mirando la pantalla, así que va en monoespaciada y con
   aire entre caracteres: en una proporcional, 0 y O son el mismo trazo. */
.secreto {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.12em;
  word-break: break-all;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 0.6rem 0.75rem;
  color: var(--tinta) !important;
}

/* Los códigos de respaldo se copian a papel. Cuadrícula, monoespaciada y
   tamaño cómodo: se leen una sola vez y se transcriben a mano. */
.codigos {
  list-style: none;
  margin: 0 0 1.25rem;
  padding: 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.5rem 1rem;
  background: var(--fondo);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.codigos li {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 1.1rem;
  letter-spacing: 0.08em;
  text-align: center;
}


/* Un botón que se lee como un enlace.
   Abrir una consulta CREA un contacto asistencial, así que tiene que ir en un
   formulario —un enlace lo dispararía con una precarga del navegador—, pero
   dentro de una tabla de agenda debe verse como las demás acciones. La
   apariencia sigue al resto de la fila; la semántica, a lo que hace. */
.en-linea { display: inline; }

/* Un formulario corto metido dentro de otra cosa —completar un dato que
   faltaba, sin salir de la ficha—. `en-linea` no sirve: es `display: inline`,
   pensada para un solo botón, y con etiqueta, campo y ayuda dentro amontona
   todo en la línea del texto que lo precede. */
.completar {
  display: block;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid var(--borde);
}
.completar label { display: block; font-weight: 600; margin-bottom: 0.25rem; }
.completar__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.completar__fila input { max-width: 12rem; }
.completar .ayuda { display: block; margin-top: 0.4rem; }

/* Varias acciones en una misma celda: `en-linea` no sirve ahí porque
   cada una es un <form>, y un form en display:inline sigue rompiendo
   la fila. */
.acciones-de-fila {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}
.acciones-de-fila form { display: inline; }

/* ── Triaje ────────────────────────────────────────────────────────────────
   Los colores son los de la escala clínica, no una decisión estética: quien
   trabaja en emergencia los lee antes que el número. El número va igualmente,
   porque el color solo no sirve a quien no lo distingue. */
.nivel {
  display: inline-block;
  min-width: 1.6rem;
  padding: 0.1rem 0.4rem;
  border-radius: 0.25rem;
  font-weight: 700;
  text-align: center;
  color: #fff;
}
.nivel--1 { background: #c0392b; }
.nivel--2 { background: #d35400; }
.nivel--3 { background: #b7950b; }
.nivel--4 { background: #1e8449; }
.nivel--5 { background: #2471a3; }

/* Quien lleva esperando más de lo que su nivel permite. Fondo y borde, no
   sólo color de texto: tiene que verse de un vistazo desde lejos. */
.fila--vencida { background: #fdecea; }
.fila--vencida td:first-child { box-shadow: inset 3px 0 0 var(--error); }

.tenue { color: var(--tinta-suave); font-size: 0.85rem; }

.campo--opcion {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.campo--opcion label { font-weight: 400; }

fieldset {
  border: 1px solid #dfe6ec;
  border-radius: 0.4rem;
  padding: 1rem;
  margin-bottom: 1rem;
}
legend { font-weight: 600; padding: 0 0.4rem; }

.boton--enlace {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.75rem;
  color: var(--primario);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

.boton--enlace:hover { color: var(--primario-oscuro); }

/* El ojo para ver la contraseña, dentro de la caja y a la derecha. El campo
   deja sitio a la derecha para que el texto no quede debajo del icono. */
.caja-contrasena { position: relative; display: block; }
.caja-contrasena input { padding-right: 2.75rem; }
.ver-contrasena {
  position: absolute;
  top: 50%;
  right: 0.35rem;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: none;
  border-radius: var(--radio);
  background: none;
  color: var(--tinta-suave);
}
.ver-contrasena:hover { color: var(--primario); }
.ver-contrasena[aria-pressed="true"] { color: var(--primario); }
.ver-contrasena:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 1px;
}

/* El foco no se hereda del botón normal porque aquí no hay fondo que lo
   delate: sin contorno visible, quien navega con teclado no sabe dónde está. */
.boton--enlace:focus-visible {
  outline: 2px solid var(--primario);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Impresión: la nota firmada acaba en papel más veces de las que nos gustaría,
   así que al menos que salga legible y sin la navegación. */
@media print {
  .cabecera, .pie, .acciones, .avisos { display: none; }
  body { background: #fff; }
  .panel { border: none; padding: 0; }
}

/* ── Matriz de camas ─────────────────────────────────────────────────────── */
/* El color dice el estado de un vistazo, pero nunca solo: cada cama lleva su
   estado escrito, porque el color no lo distingue todo el mundo y en una sala
   con mala luz tampoco. */
.matriz {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: 0.75rem;
  margin: 1rem 0 1.5rem;
}
.cama {
  background: var(--papel);
  border: 1px solid var(--borde);
  border-left: 0.5rem solid var(--borde-campo);
  border-radius: var(--radio);
  padding: 0.75rem 0.9rem;
}
.cama h2 { font-size: 1.1rem; margin: 0 0 0.35rem; }
.cama p { margin: 0.2rem 0; }
.cama--verde    { border-left-color: #1e8449; }
.cama--rojo     { border-left-color: #c0392b; }
.cama--amarillo { border-left-color: #b7950b; }
.cama--gris     { border-left-color: #7f8c99; }
.cama--azul     { border-left-color: #2471a3; }
/* Una limpieza que se pasó del límite: el borde entero, no sólo el izquierdo,
   y el aviso escrito dentro de la tarjeta. */
.cama--excedida { border-color: var(--aviso); }
.cama .aviso { margin-top: 0.5rem; padding: 0.4rem 0.6rem; }
.cama details { margin-top: 0.5rem; }
.cama details summary { cursor: pointer; }
.cama form { margin-top: 0.5rem; }
.cama .campo { margin-bottom: 0.5rem; }
.resumen-camas {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0 1rem;
}

/* La fila elegida de una tabla de resultados. El color no es la señal:
   la señal es la etiqueta «elegido» de la fila, que se lee en voz alta. */
tr.elegida { background: var(--fondo); }

/* La planilla de una atención (RF-V-19). El dinero se lee en columna, así que
   va alineado a la derecha; leerlo alineado a la izquierda obliga a comparar
   cifras de distinta longitud dígito a dígito. */
td.numero, th.numero { text-align: right; white-space: nowrap; }

/* Un renglón que se consumió y nadie supo tarifar. El color no es la señal:
   la señal es la columna «de dónde sale el precio», que dice «Sin valorar» y
   se lee en voz alta. */
tr.fila--sin-valorar { background: #fdf6e6; }

/* Una acción dentro de un texto o de una lista, sobre fondo claro.
   NO es `.enlace`: aquélla está pintada en blanco porque vive en la cabecera
   oscura, y usada dentro de un panel daba botones blancos sobre blanco —
   «Marcar principal» y «Quitar» existían y no se veían (visto el 17/09/2026,
   en la codificación CIE). Un control que no se ve es un control que no está. */
.accion {
  background: none;
  border: none;
  padding: 0;
  margin-left: 0.6rem;
  color: var(--primario);
  text-decoration: underline;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}
.accion:hover { color: var(--primario-oscuro); }
.accion--peligro { color: var(--error); }

/* La receta se escribe en la misma fila del medicamento buscado: los campos
   van compactos para que cantidad, dosis, frecuencia, días e indicaciones
   quepan en una línea sin que la tabla se salga de la pantalla. */
.grilla-receta input[type="text"] { padding: 0.35rem 0.5rem; width: auto; min-width: 4rem; }
.grilla-receta td { vertical-align: top; }

/* Etiqueta que lee el lector de pantalla y no ve nadie más: en una tabla
   de campos, la cabecera de la columna ya lo dice a la vista. */
.oculto-visualmente { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }