/* ============================================================
   SEGUIMIENTO DE UNAI — el aspecto
   ============================================================
   Esta app NO es de las de los ninos. La usan dos adultos, de
   noche, cansados y con una mano. De ahi las tres decisiones:

   1. TODO SE TOCA, NADA SE ESCRIBE. Botones grandes (48 px
      minimo) en vez de campos. Escribir en el movil de noche es
      lo que hace que un registro se abandone en tres dias.
   2. CALMA, NO ALEGRIA. Es un registro clinico de un nino con un
      problema de peso y de sueno. Los colores de las apps de
      juegos aqui estarian fuera de sitio.
   3. RESPETA EL MODO OSCURO. Se rellena de noche, muchas veces a
      oscuras y en la cama.
   ============================================================ */

:root {
  --fondo: #f4f6f8;
  --papel: #ffffff;
  --tinta: #16202b;
  --tinta-floja: #5c6b7a;
  --linea: #dde4ea;
  --azul: #2b4c6f;
  --azul-claro: #e8eef4;
  --verde: #2f7d5c;
  --verde-claro: #e4f2eb;
  --ambar: #9a6212;
  --ambar-claro: #fbf0dc;
  --rojo: #a8342a;
  --rojo-claro: #fbe8e6;
  --sombra: 0 1px 2px rgba(22,32,43,.06), 0 3px 10px rgba(22,32,43,.05);
  --radio: 14px;
  --hueco: 12px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #11161c;
    --papel: #1b232c;
    --tinta: #e7edf3;
    --tinta-floja: #93a3b3;
    --linea: #2c3742;
    --azul: #7fb0dd;
    --azul-claro: #22303d;
    --verde: #6fc79c;
    --verde-claro: #1c3129;
    --ambar: #e0ab5c;
    --ambar-claro: #322818;
    --rojo: #e8867c;
    --rojo-claro: #341f1d;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 3px 10px rgba(0,0,0,.25);
  }
}

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

html, body {
  margin: 0; padding: 0;
  background: var(--fondo);
  color: var(--tinta);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
}

/* Este es el mismo fallo que ya aparecio en JARVIS y en Plan de
   Domingo: una regla de display gana al atributo hidden y el
   elemento sale igual. Con esto no vuelve a pasar. */
[hidden] { display: none !important; }

button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

/* ══════════════ LA PUERTA ══════════════ */

.puerta {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: var(--fondo);
}
.puerta-caja {
  width: 100%; max-width: 360px; text-align: center;
}
.puerta-icono { color: var(--azul); margin-bottom: 10px; }
.puerta h1 { font-size: 1.35rem; margin: 0 0 6px; letter-spacing: -.01em; }
.puerta-texto { color: var(--tinta-floja); font-size: .92rem; margin: 0 0 22px; }
#puerta-form { display: flex; flex-direction: column; gap: 10px; }
#puerta-clave {
  padding: 14px 16px; border: 1.5px solid var(--linea); border-radius: 12px;
  background: var(--papel); text-align: center; font-size: 1.05rem;
}
#puerta-clave:focus { outline: none; border-color: var(--azul); }
#puerta-boton {
  padding: 14px; border: 0; border-radius: 12px;
  background: var(--azul); color: #fff; font-weight: 600; font-size: 1rem;
}
#puerta-boton:disabled { opacity: .55; }
.puerta-aviso {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--rojo-claro); color: var(--rojo);
  font-size: .88rem; line-height: 1.35;
}
.puerta-ok {
  margin: 14px 0 0; padding: 10px 12px; border-radius: 10px;
  background: var(--verde-claro); color: var(--verde);
  font-size: .86rem; line-height: 1.4;
}
.enlace {
  margin-top: 18px; border: 0; background: none;
  color: var(--tinta-floja); font-size: .84rem;
  text-decoration: underline; text-underline-offset: 3px;
  padding: 8px;
}

/* ══════════════ CABECERA ══════════════ */

.cabecera {
  position: sticky; top: 0; z-index: 20;
  padding: max(14px, env(safe-area-inset-top)) 16px 10px;
  background: var(--fondo);
  border-bottom: 1px solid var(--linea);
}
.cabecera-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cabecera h1 { font-size: 1.3rem; margin: 0; letter-spacing: -.01em; }
.subtitulo { margin: 2px 0 0; color: var(--tinta-floja); font-size: .82rem; }

.sync {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border: 1px solid var(--linea); border-radius: 999px;
  background: var(--papel); color: var(--tinta-floja);
  font-size: .72rem; white-space: nowrap;
}
.sync-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--tinta-floja); flex: none; }
.sync[data-s="listo"]     { color: var(--verde); border-color: color-mix(in srgb, var(--verde) 35%, transparent); }
.sync[data-s="listo"] .sync-punto { background: var(--verde); }
.sync[data-s="pendiente"] { color: var(--ambar); border-color: color-mix(in srgb, var(--ambar) 40%, transparent); }
.sync[data-s="pendiente"] .sync-punto { background: var(--ambar); }
.sync[data-s="sinred"]    { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 35%, transparent); }
.sync[data-s="sinred"] .sync-punto { background: var(--rojo); }

/* ══════════════ ESTRUCTURA ══════════════ */

#lienzo {
  padding: 14px 16px calc(86px + env(safe-area-inset-bottom));
  max-width: 620px; margin: 0 auto;
}
.pantalla { animation: entra .18s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.tarjeta {
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); padding: 14px;
  margin-bottom: var(--hueco); box-shadow: var(--sombra);
}
.tarjeta-titulo { font-weight: 650; font-size: .98rem; margin-bottom: 2px; }
.tarjeta-ayuda { margin: 0 0 10px; color: var(--tinta-floja); font-size: .8rem; line-height: 1.4; }

/* ══════════════ NAVEGACION DE DIA / SEMANA ══════════════ */

.navdia {
  display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
.navdia-b {
  width: 46px; height: 46px; flex: none;
  border: 1px solid var(--linea); border-radius: 12px;
  background: var(--papel); color: var(--tinta);
  font-size: 1.5rem; line-height: 1; box-shadow: var(--sombra);
}
.navdia-b:disabled { opacity: .35; }
.navdia-centro { flex: 1; text-align: center; min-width: 0; }
.navdia-nombre { font-weight: 650; font-size: 1.02rem; }
.navdia-fecha { color: var(--tinta-floja); font-size: .8rem; }

.avisohoy {
  margin: -4px 0 10px; padding: 7px 12px; border-radius: 10px;
  background: var(--ambar-claro); color: var(--ambar);
  font-size: .8rem; text-align: center;
}

/* ══════════════ LAS FICHAS DEL DIA ══════════════ */

.opciones { display: flex; gap: 8px; flex-wrap: wrap; }

/* 48 px de alto minimo: es el tamano por debajo del cual un dedo
   falla, y aqui se toca a oscuras. */
.op {
  flex: 1 1 0; min-width: 84px; min-height: 48px;
  padding: 10px 8px;
  border: 1.5px solid var(--linea); border-radius: 12px;
  background: var(--papel); color: var(--tinta-floja);
  font-size: .9rem; font-weight: 550;
  display: flex; align-items: center; justify-content: center; text-align: center;
  transition: background .12s, border-color .12s, color .12s;
}
.op[aria-pressed="true"] { color: #fff; border-color: transparent; font-weight: 650; }
.op[aria-pressed="true"][data-tono="bien"]  { background: var(--verde); }
.op[aria-pressed="true"][data-tono="medio"] { background: var(--ambar); }
.op[aria-pressed="true"][data-tono="mal"]   { background: var(--rojo); }
.op[aria-pressed="true"][data-tono="neutro"]{ background: var(--azul); }

/* El contador de episodios: menos, numero, mas. */
.contador { display: flex; align-items: center; gap: 10px; }
.contador-b {
  width: 52px; height: 52px; flex: none;
  border: 1.5px solid var(--linea); border-radius: 12px;
  background: var(--papel); font-size: 1.5rem; line-height: 1;
}
.contador-v {
  flex: 1; text-align: center; font-size: 1.7rem; font-weight: 650;
  font-variant-numeric: tabular-nums;
}
.contador-v.vacio { color: var(--tinta-floja); font-weight: 400; font-size: 1.1rem; }

/* El animo va de 1 a 5 y se pinta como una escala, no como cinco
   botones sueltos: la escala se lee de un vistazo. */
.escala { display: flex; gap: 6px; }
.escala .op { min-width: 0; font-size: 1.05rem; }

textarea, .peso-fila input, .periodo input {
  width: 100%; padding: 11px 12px;
  border: 1.5px solid var(--linea); border-radius: 11px;
  background: var(--fondo); resize: vertical;
}
textarea:focus, input:focus { outline: none; border-color: var(--azul); }

.peso-fila { display: flex; align-items: center; gap: 10px; }
.peso-fila input { max-width: 130px; font-size: 1.15rem; font-weight: 600; text-align: center; }
.peso-kg { color: var(--tinta-floja); font-weight: 600; }
.peso-nota { color: var(--tinta-floja); font-size: .8rem; margin-left: auto; text-align: right; }

/* ══════════════ LA SEMANA ══════════════ */

.tablaenvoltorio { overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: var(--papel); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra); margin-bottom: var(--hueco); }
table.sem { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.sem th, table.sem td { padding: 9px 6px; text-align: center; border-bottom: 1px solid var(--linea); }
table.sem thead th {
  font-size: .68rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--tinta-floja); font-weight: 600; white-space: nowrap;
}
table.sem tbody tr:last-child td { border-bottom: 0; }
table.sem td.dia { text-align: left; font-weight: 600; white-space: nowrap; padding-left: 12px; }
table.sem td.dia small { display: block; font-weight: 400; color: var(--tinta-floja); font-size: .72rem; }
table.sem tr.hoy { background: var(--azul-claro); }
table.sem tr.futuro { opacity: .4; }
.pip { display: inline-block; min-width: 22px; padding: 2px 6px; border-radius: 7px; font-weight: 650; font-size: .78rem; }
.pip-bien   { background: var(--verde-claro); color: var(--verde); }
.pip-medio  { background: var(--ambar-claro); color: var(--ambar); }
.pip-mal    { background: var(--rojo-claro); color: var(--rojo); }
.pip-nada   { color: var(--linea); }

/* ══════════════ CIFRAS Y GRAFICAS ══════════════ */

.cifras { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--hueco); margin-bottom: var(--hueco); }
.cifra {
  background: var(--papel); border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 12px 14px; box-shadow: var(--sombra);
}
.cifra-n { font-size: 1.6rem; font-weight: 680; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.cifra-t { font-size: .76rem; color: var(--tinta-floja); line-height: 1.3; margin-top: 1px; }
.cifra-p { font-size: .72rem; margin-top: 5px; font-weight: 600; }
.sube { color: var(--rojo); } .baja { color: var(--verde); } .igual { color: var(--tinta-floja); }

.grafica { margin-bottom: var(--hueco); }
.grafica canvas { width: 100%; height: 150px; display: block; }
.grafica-pie { font-size: .74rem; color: var(--tinta-floja); margin-top: 6px; line-height: 1.35; }

.vacio {
  text-align: center; color: var(--tinta-floja); font-size: .9rem;
  padding: 44px 20px; line-height: 1.5;
}

/* ══════════════ CONSULTA ══════════════ */

.nota-form { display: flex; gap: 8px; align-items: flex-start; }
.nota-form textarea { flex: 1; }
.boton {
  padding: 11px 16px; border: 0; border-radius: 11px;
  background: var(--azul); color: #fff; font-weight: 600; font-size: .9rem;
  white-space: nowrap; min-height: 46px;
}
.boton-suave { background: var(--azul-claro); color: var(--azul); }
.botonera { display: flex; gap: 8px; margin-top: 12px; }
.botonera .boton { flex: 1; }

.notas { list-style: none; margin: 12px 0 0; padding: 0; }
.notas li {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid var(--linea); font-size: .88rem;
}
.notas li:first-child { border-top: 0; }
.notas .n-fecha { color: var(--tinta-floja); font-size: .74rem; white-space: nowrap; padding-top: 2px; }
.notas .n-texto { flex: 1; }
.notas .n-quita {
  border: 0; background: none; color: var(--tinta-floja);
  font-size: 1.15rem; line-height: 1; padding: 0 2px;
}

.periodo { display: flex; gap: 10px; margin-bottom: 12px; }
.periodo label { flex: 1; font-size: .76rem; color: var(--tinta-floja); }
.periodo input { margin-top: 3px; }

.informe {
  background: var(--fondo); border: 1px solid var(--linea); border-radius: 11px;
  padding: 12px 14px; font-size: .86rem; line-height: 1.55;
}
.informe h4 { margin: 14px 0 4px; font-size: .8rem; text-transform: uppercase;
  letter-spacing: .04em; color: var(--tinta-floja); }
.informe h4:first-child { margin-top: 0; }
.informe ul { margin: 0; padding-left: 18px; }
.informe li { margin-bottom: 3px; }
.informe b { font-weight: 650; }

/* ══════════════ LAS COMIDAS DEL DIA ══════════════ */

.comida { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; }
.comida:last-child { margin-bottom: 0; }
.comida label {
  flex: none; width: 74px; font-size: .78rem; font-weight: 600;
  color: var(--tinta-floja);
}
.comida input {
  flex: 1; min-width: 0; padding: 9px 11px;
  border: 1.5px solid var(--linea); border-radius: 10px;
  background: var(--fondo); font-size: .88rem;
}

/* ══════════════ CATALOGO DE ALIMENTOS ══════════════ */

.alimento { padding: 12px 14px; }
.alimento-fila { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.alimento-nombre { font-weight: 620; font-size: .95rem; }
.alimento-grupo {
  display: inline-block; margin-left: 7px; padding: 1px 7px;
  border-radius: 6px; background: var(--azul-claro); color: var(--azul);
  font-size: .68rem; font-weight: 600; vertical-align: middle;
}
.alimento-nota {
  margin: 7px 0 0; font-size: .84rem; line-height: 1.45; color: var(--tinta-floja);
}
.alimento-acciones { display: flex; gap: 6px; margin-top: 10px; }

.campo select {
  width: 100%; padding: 11px 12px;
  border: 1.5px solid var(--linea); border-radius: 11px;
  background: var(--fondo);
}

#busca-alimento {
  padding: 11px 13px; border: 1.5px solid var(--linea);
  border-radius: 11px; background: var(--papel);
}

/* ══════════════ HISTORIAL DE CONSULTAS ══════════════ */

.consulta-cab {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
  padding-bottom: 10px; border-bottom: 1px solid var(--linea);
}
.consulta-fecha { font-weight: 680; font-size: 1rem; letter-spacing: -.01em; }
.consulta-quien { color: var(--azul); font-size: .82rem; font-weight: 600; margin-top: 1px; }
.consulta-acciones { display: flex; gap: 6px; flex: none; }
.mini {
  border: 1px solid var(--linea); background: var(--fondo); color: var(--tinta-floja);
  border-radius: 9px; padding: 6px 10px; font-size: .74rem; font-weight: 600;
}
.mini-quita { color: var(--rojo); border-color: color-mix(in srgb, var(--rojo) 30%, transparent); }

.consulta-bloque { margin-bottom: 12px; }
.consulta-bloque:last-child { margin-bottom: 0; }
.consulta-bloque h5 {
  margin: 0 0 3px; font-size: .72rem; text-transform: uppercase;
  letter-spacing: .05em; color: var(--tinta-floja); font-weight: 650;
}
.consulta-bloque p { margin: 0 0 5px; font-size: .88rem; line-height: 1.5; }
.consulta-bloque p:last-child { margin-bottom: 0; }

.campo { margin-bottom: 14px; }
.campo label { display: block; font-size: .8rem; font-weight: 650; margin-bottom: 3px; }
.campo .tarjeta-ayuda { margin-bottom: 5px; }
.campo input[type="text"], .campo input[type="date"], .campo textarea {
  width: 100%; padding: 11px 12px;
  border: 1.5px solid var(--linea); border-radius: 11px;
  background: var(--fondo);
}

/* ══════════════ BARRA DE ABAJO ══════════════ */

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; background: var(--papel);
  border-top: 1px solid var(--linea);
  padding-bottom: env(safe-area-inset-bottom);
}
/* Seis pestanas en 375 px salen a 62 px cada una. La letra baja a
   .62rem y se corta con puntos suspensivos antes que descuadrar la
   barra: es preferible leer "Evoluci…" a que se rompa la fila. */
.barra-b {
  flex: 1; min-width: 0; border: 0; background: none; color: var(--tinta-floja);
  padding: 9px 1px 8px; font-size: .62rem; font-weight: 600;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.barra-i { font-size: 1.1rem; line-height: 1.1; }
.barra-b[aria-current="page"] { color: var(--azul); }

/* ══════════════ TOSTADA ══════════════ */

.tostada {
  position: fixed; left: 50%; bottom: calc(78px + env(safe-area-inset-bottom));
  transform: translate(-50%, 12px); z-index: 60;
  background: var(--tinta); color: var(--fondo);
  padding: 10px 16px; border-radius: 999px; font-size: .84rem;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  max-width: 88vw; text-align: center;
}
.tostada.ver { opacity: 1; transform: translate(-50%, 0); }

/* ══════════════ IMPRESION ══════════════ */
/* Se imprime el resumen, no la app: sin barras, sin botones y en
   negro sobre blanco aunque el movil este en modo oscuro. */

@media print {
  .cabecera, .barra, .botonera, .nota-form, .periodo, .tostada, .puerta { display: none !important; }
  body { background: #fff; color: #000; }
  #lienzo { padding: 0; max-width: none; }
  .tarjeta, .informe { border: 0; box-shadow: none; background: #fff; padding: 0; }
  .informe { font-size: 11pt; }
  .pantalla { animation: none; }
}