/* componentes.css — las piezas de la interfaz de F1.
 *
 * DELIBERADAMENTE CRUDO. El sistema visual definitivo entra en F6 y reemplaza
 * este archivo. Lo único que debe sobrevivir a F6 son los NOMBRES de las
 * clases, para que rediseñar no obligue a tocar el JavaScript.
 *
 * Lo que sí está resuelto de verdad acá, y F6 no puede romper:
 *   · nada que se toque con el dedo mide menos de 44 px
 *   · los campos van a 16 px, que es el mínimo con el que iOS no hace zoom
 *   · las zonas seguras del iPhone se respetan arriba y abajo
 */

/* ---------------------------------------------------------------- armazón */

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

.cabecera {
  position: sticky; top: 0; z-index: 100;
  background: var(--verde); color: #fff;
  padding: calc(env(safe-area-inset-top, 0px) + 14px) 16px 14px;
}
.cabecera-titulo { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.cabecera-sub { font-size: 13px; opacity: .85; }

/*
 * El espacio de abajo lo MIDE `vigilarAltoDeLaPila()` en montar.js y lo deja
 * en --alto-pila. No es un numero escrito a mano a proposito: la franja de
 * modo demostracion aparece y desaparece, y ocupa una o dos lineas segun el
 * ancho de la pantalla y el tamano de letra del sistema. Cualquier numero fijo
 * queda mal en alguna pantalla — con 96px, la franja de dos lineas tapaba 20px
 * del borde de la ultima tarjeta (medido en la app desplegada, 13-ago).
 *
 * El respaldo de 96px es para el instante entre que se pinta y se mide.
 */
.contenido {
  flex: 1;
  padding: 12px 12px calc(env(safe-area-inset-bottom, 0px) + var(--alto-pila, 96px) + 12px);
  display: flex; flex-direction: column; gap: 10px;
  overflow-y: auto;
}

.barra {
  position: fixed; left: 0; right: 0;
  bottom: 0; z-index: 200;
  display: flex;
  background: var(--tarjeta);
  border-top: 1px solid var(--borde);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.barra-boton {
  flex: 1; min-height: var(--toque);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; padding: 8px 2px;
  border: none; background: none; color: var(--texto-3);
}
.barra-boton.esta { color: var(--verde); }
.barra-icono { font-size: 19px; line-height: 1; }
.barra-etiqueta { font-size: 10px; font-weight: 700; }

/* --------------------------------------------------------------- tarjetas */

.tarjeta {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 14px 16px;
}

.seccion-titulo {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; font-weight: 700; color: var(--texto-2);
  text-transform: uppercase; letter-spacing: .04em;
  margin-bottom: 10px;
}

.ayuda { font-size: 12.5px; color: var(--texto-3); line-height: 1.5; margin-top: 6px; }

.vacio { text-align: center; padding: 26px 16px; color: var(--texto-2); }

/* ------------------------------------------------------------- destacada */

.destacada-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.destacada-numero {
  font-size: 38px; font-weight: 800; line-height: 1;
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
/* El guion de "sin dato" NO va al tamaño del número.
 * A 38 px y en gris, una raya larga se lee como una barra de carga: parece que
 * el dato está por llegar, cuando lo que pasa es que no existe. Más chico y
 * centrado, se lee como lo que es. */
.destacada-numero.sin-dato {
  color: var(--sin-dato);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0;
}
.destacada-etiqueta { font-size: 12px; color: var(--texto-3); margin-top: 4px; }

.pastilla {
  font-size: 12px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; white-space: nowrap;
}
.pastilla--ok { background: var(--ok-fondo); color: var(--ok); }
.pastilla--ambar { background: var(--ambar-fondo); color: var(--ambar); }
.pastilla--alerta { background: var(--alerta-fondo); color: var(--alerta); }
.pastilla--sin-dato { background: var(--sin-dato-fondo); color: var(--sin-dato); }

/* --------------------------------------------------------------- métrica */

.metrica-cabecera { display: flex; align-items: center; gap: 9px; }
.metrica-nombre { flex: 1; font-size: 14.5px; font-weight: 600; }
.metrica-valor {
  font-size: 19px; font-weight: 800;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* El rango va SIEMPRE bajo el valor: la app anterior pintaba colores sin
   decir nunca contra qué comparaba. */
.rango { font-size: 12px; color: var(--texto-3); margin-top: 3px; font-variant-numeric: tabular-nums; }

.tomas { margin-top: 10px; border-top: 1px solid var(--borde); padding-top: 8px; }
.toma {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 0; font-size: 14px; font-variant-numeric: tabular-nums;
}
.hora-toma { font-size: 12px; color: var(--texto-3); font-variant-numeric: tabular-nums; min-width: 42px; }

.punto { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.punto--ok { background: var(--ok); }
.punto--ambar { background: var(--ambar); }
.punto--alerta { background: var(--alerta); }
.punto--sin-dato { background: var(--sin-dato); }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-size: 12px; padding: 5px 10px; border-radius: 999px;
  background: var(--sin-dato-fondo); color: var(--texto-2);
}
.chip--tenue { background: transparent; border: 1px solid var(--borde); color: var(--texto-3); font-size: 11px; }
.chip--alerta { background: var(--alerta-fondo); color: var(--alerta); }

/* --------------------------------------------------------------- botones */

.boton {
  display: block; width: 100%; min-height: var(--toque);
  padding: 13px 16px; border: none; border-radius: var(--radio-chico);
  background: var(--verde); color: #fff; font-size: 15px; font-weight: 700;
}
.boton:active { opacity: .85; }
.boton--segundo { background: transparent; color: var(--verde); border: 1.5px solid var(--verde); }
.boton--peligro { background: transparent; color: var(--alerta); border: 1.5px solid var(--alerta); }

/* -------------------------------------------------------------- historial */

.fila-historial {
  display: flex; align-items: center; gap: 9px;
  width: 100%; min-height: var(--toque);
  padding: 9px 2px; border: none; background: none;
  border-bottom: 1px solid var(--borde);
  text-align: left; color: var(--texto); font-size: 14px;
}
.fila-historial:last-child { border-bottom: none; }
.fila-nombre { flex: 1; }
.fila-valor { font-weight: 700; font-variant-numeric: tabular-nums; }

.linea-diag {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 0; font-size: 12px; color: var(--texto-2);
  border-bottom: 1px solid var(--borde);
}

/* -------------------------------------------------------------- medicación */

.racha .destacada-numero { color: var(--verde); }

.toma-rapida .boton { margin-top: 10px; }

/* Botón que se ve como un enlace: para acciones secundarias dentro de una
   fila, donde un botón completo robaría toda la atención. Igual respeta el
   mínimo tocable. */
.enlace {
  border: none; background: none; padding: 0 6px;
  min-height: var(--toque);
  color: var(--texto-3); font-size: 12px; text-decoration: underline;
}

/* ----------------------------------------------------------------- bitácora */

.nota-entrada { border-bottom: 1px solid var(--borde); padding-bottom: 9px; margin-bottom: 9px; }
.nota-cabecera { display: flex; align-items: center; gap: 8px; }
.nota-texto { font-size: 14px; line-height: 1.5; margin-top: 2px; white-space: pre-wrap; }

.campo-nota {
  width: 100%; margin-top: 10px; padding: 12px 13px;
  border: 1.5px solid var(--borde); border-radius: var(--radio-chico);
  font-size: 16px;   /* el mínimo con el que iOS no hace zoom */
  line-height: 1.5; resize: vertical; min-height: 68px;
}
.campo-nota:focus { outline: none; border-color: var(--verde); }

/* ----------------------------------------------------------------- avisos */

.aviso-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; }
.aviso-texto { flex: 1; min-width: 0; }
.aviso-titulo { font-size: 14.5px; font-weight: 600; }

.aviso-fila input[type="time"] {
  min-height: var(--toque); padding: 9px 12px;
  border: 1.5px solid var(--borde); border-radius: var(--radio-chico);
  font-variant-numeric: tabular-nums;
}
/* La casilla se ve de 26 px, pero el cuadrado que responde al dedo mide 44.
   Se mide en la prueba: cualquier control por debajo de 44 px la hace fallar. */
.interruptor {
  display: flex; align-items: center; justify-content: center;
  width: var(--toque); height: var(--toque);
  flex: 0 0 auto; cursor: pointer;
}

/* ------------------------------------------------------------------ hojas */

.hoja-fondo {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: flex-end;
}
.hoja {
  background: var(--tarjeta); width: 100%;
  max-height: 88dvh; overflow-y: auto;
  border-radius: 18px 18px 0 0;
  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
}
.hoja-cabecera {
  position: sticky; top: 0; z-index: 2;
  background: var(--tarjeta); border-bottom: 1px solid var(--borde);
  padding: 15px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.hoja-cabecera h2 { font-size: 17px; font-weight: 700; }
.hoja-cerrar {
  width: var(--toque); height: var(--toque);
  border: none; background: none; color: var(--texto-3); font-size: 20px;
}
.hoja-cuerpo { padding: 4px 16px 12px; }
.hoja-pie { padding: 8px 16px 4px; }

.campo { display: block; padding: 11px 0 0; }
.campo-etiqueta { display: block; font-size: 13px; font-weight: 600; color: var(--texto-2); margin-bottom: 5px; }
.campo input {
  width: 100%; min-height: var(--toque); padding: 12px 13px;
  border: 1.5px solid var(--borde); border-radius: var(--radio-chico);
  /* 16 px es el mínimo con el que iOS no hace zoom al enfocar. Con menos, la
     pantalla salta cada vez que se escribe un peso. */
  font-size: 16px;
}
.campo input:focus { outline: none; border-color: var(--verde); }
.campo .rango { margin-top: 4px; }

/* --------------------------------------------- pila de elementos flotantes
 *
 * Todo lo que se apoya sobre la barra inferior va en esta pila y se ordena en
 * columna. Antes cada elemento calculaba su propia distancia al borde y se
 * pisaban: medido el 2026-08-12, el aviso emergente terminaba en el píxel 768
 * y la franja empezaba en el 744.
 *
 * `pointer-events: none` en la pila y `auto` en los hijos: así la pila no
 * bloquea los toques del contenido que queda debajo de un hueco.
 */

#pila-inferior {
  position: fixed; left: 0; right: 0;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 58px);
  z-index: 300;
  display: flex; flex-direction: column; gap: 8px;
  pointer-events: none;
}
#pila-inferior > * { pointer-events: auto; }

#pila-avisos { display: flex; flex-direction: column; gap: 8px; padding: 0 16px; }

.aviso-flotante {
  background: var(--ok); color: #fff;
  padding: 13px 16px; border-radius: var(--radio-chico);
  font-size: 14px; font-weight: 600; text-align: center;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .2);
}
.aviso-flotante--ambar { background: var(--ambar); }
.aviso-flotante--alerta { background: var(--alerta); }

#franja-demo:not([hidden]) {
  background: var(--ambar); color: #fff;
  font-size: 12px; font-weight: 700; text-align: center;
  padding: 7px 14px;
}

/* ------------------------------------------------- guía de instalación iOS */

.pasos { counter-reset: p; list-style: none; padding: 0; margin: 10px 0; }
.paso {
  counter-increment: p;
  position: relative;
  padding: 11px 12px 11px 44px;
  margin-bottom: 8px;
  background: var(--fondo);
  border-radius: var(--radio-chico);
  font-size: 14px; line-height: 1.45;
}
.paso::before {
  content: counter(p);
  position: absolute; left: 12px; top: 11px;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--verde); color: #fff;
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}