/* ============================================================
   Seguimiento de colon - hoja de estilos unica
   Mobile-first. Modo claro y oscuro automaticos.
   ============================================================ */

:root {
  --bg:        #faf7f3;
  --bg-alto:   #f2ede7;
  --sup:       #ffffff;
  --sup-2:     #f7f3ef;
  --borde:     #e5ddd4;
  --borde-2:   #d6cbbf;
  --texto:     #2d2723;
  --texto-2:   #6f665e;
  --texto-3:   #a1968b;
  --acento:    #3f8578;
  --acento-cl: #e3f0ec;
  --acento-tx: #2c5f55;

  --ok: #3f9d6a;
  --s1: #dc9a1f;
  --s2: #dd6f36;
  --s3: #7c63b8;
  --s4: #d24343;

  --ok-cl: #e6f4ec;
  --s1-cl: #fbf0d8;
  --s2-cl: #fbe7db;
  --s3-cl: #ece7f8;
  --s4-cl: #fae0e0;

  --sombra:   0 1px 2px rgba(45, 39, 35, .05), 0 4px 14px rgba(45, 39, 35, .05);
  --sombra-2: 0 2px 6px rgba(45, 39, 35, .08), 0 12px 32px rgba(45, 39, 35, .10);
  --r:    14px;
  --r-sm: 10px;
  --r-lg: 20px;
  --seguro-abajo: env(safe-area-inset-bottom, 0px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #14131a;
    --bg-alto:   #1b1a22;
    --sup:       #201f28;
    --sup-2:     #272631;
    --borde:     #322f3c;
    --borde-2:   #423e4e;
    --texto:     #eceaf2;
    --texto-2:   #a8a2b5;
    --texto-3:   #766f83;
    --acento:    #6fbdac;
    --acento-cl: #1f3a35;
    --acento-tx: #9fd8c9;

    --ok: #5cbc85;
    --s1: #e5b64a;
    --s2: #ea8a58;
    --s3: #9b85d4;
    --s4: #e46464;

    --ok-cl: #1d3628;
    --s1-cl: #3a3018;
    --s2-cl: #3d2a1c;
    --s3-cl: #2b2540;
    --s4-cl: #3c2020;

    --sombra:   0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
    --sombra-2: 0 2px 6px rgba(0,0,0,.4), 0 12px 32px rgba(0,0,0,.35);
  }
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--texto);
  font-family: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

body { min-height: 100dvh; }

button, input, textarea, select { font: inherit; color: inherit; }

button { cursor: pointer; -webkit-tap-highlight-color: transparent; }

h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.01em; }

/* ---------- Layout general ---------- */

.app {
  max-width: 620px;
  margin: 0 auto;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

.contenido {
  flex: 1;
  padding: 14px 16px calc(96px + var(--seguro-abajo));
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--borde);
  padding: 10px 16px;
}

.cabecera-fila { display: flex; align-items: center; gap: 8px; }
.cabecera-titulo { font-size: 1.05rem; font-weight: 800; flex: 1; min-width: 0; }
.cabecera-sub { font-size: .78rem; color: var(--texto-2); font-weight: 600; }

.nav-fecha { display: flex; align-items: center; gap: 6px; margin-top: 8px; }
.nav-fecha .centro { flex: 1; text-align: center; min-width: 0; }

.nav-fecha .dia-nombre {
  font-weight: 800;
  font-size: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-fecha .dia-rel {
  font-size: .74rem;
  color: var(--acento-tx);
  background: var(--acento-cl);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 700;
  display: inline-block;
  margin-top: 2px;
}

.flecha {
  width: 38px; height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  border: 1px solid var(--borde);
  background: var(--sup);
  color: var(--texto-2);
  font-size: 1.1rem;
  display: grid; place-items: center;
  transition: background .15s, transform .1s;
}
.flecha:active { transform: scale(.92); }
.flecha:disabled { opacity: .3; cursor: default; }

/* ---------- Tarjetas ---------- */

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

.tarjeta-titulo { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.tarjeta-titulo h3 { font-size: .95rem; }
.tarjeta-titulo .detalle { font-size: .78rem; color: var(--texto-2); font-weight: 600; }

.seccion-rotulo {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .07em;
  font-weight: 800;
  color: var(--texto-3);
  margin: 4px 0 8px;
}

/* ---------- Botones de sintoma ---------- */

.sintomas-grilla {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: 8px;
}

.sintoma {
  border: 1.5px solid var(--borde);
  background: var(--sup-2);
  border-radius: var(--r-sm);
  padding: 10px 6px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-height: 68px;
  justify-content: center;
  transition: transform .1s, border-color .15s, background .15s;
  color: var(--texto-2);
}
.sintoma:active { transform: scale(.95); }
.sintoma .emoji { font-size: 1.25rem; line-height: 1; }
.sintoma .txt { font-size: .74rem; font-weight: 700; text-align: center; line-height: 1.15; }

.sintoma[data-activo="si"] { color: var(--texto); font-weight: 800; }
.sintoma[data-activo="si"][data-c="ok"] { border-color: var(--ok); background: var(--ok-cl); }
.sintoma[data-activo="si"][data-c="animo"] { border-color: var(--acento); background: var(--acento-cl); }
.sintoma[data-activo="si"][data-c="1"]  { border-color: var(--s1); background: var(--s1-cl); }
.sintoma[data-activo="si"][data-c="2"]  { border-color: var(--s2); background: var(--s2-cl); }
.sintoma[data-activo="si"][data-c="3"]  { border-color: var(--s3); background: var(--s3-cl); }
.sintoma[data-activo="si"][data-c="4"]  { border-color: var(--s4); background: var(--s4-cl); }

.momento-encabezado { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.momento-encabezado .emoji { font-size: 1.15rem; }
.momento-encabezado .nombre { font-weight: 800; font-size: .95rem; }
.momento-encabezado .detalle { font-size: .76rem; color: var(--texto-2); font-weight: 600; }
.momento-encabezado .estado { margin-left: auto; font-size: .72rem; font-weight: 700; color: var(--texto-3); }

/* ---------- Chips ---------- */

.chips { display: flex; flex-wrap: wrap; gap: 7px; }

.chip {
  border: 1.5px solid var(--borde);
  background: var(--sup-2);
  color: var(--texto-2);
  border-radius: 999px;
  padding: 7px 13px;
  font-size: .82rem;
  font-weight: 700;
  transition: transform .1s, border-color .15s, background .15s, color .15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chip:active { transform: scale(.94); }
.chip[data-activo="si"] {
  border-color: var(--acento);
  background: var(--acento-cl);
  color: var(--acento-tx);
}
.chip.sugerido { border-style: dashed; }
.chip .x { opacity: .55; font-weight: 800; }

/* ---------- Controles varios ---------- */

.stepper {
  display: inline-flex;
  align-items: center;
  border: 1.5px solid var(--borde);
  border-radius: 999px;
  background: var(--sup-2);
  overflow: hidden;
}
.stepper button {
  width: 40px; height: 40px;
  background: none; border: none;
  font-size: 1.2rem; font-weight: 800;
  color: var(--acento);
}
.stepper button:disabled { color: var(--texto-3); }
.stepper .valor { min-width: 34px; text-align: center; font-weight: 800; }

.campo {
  width: 100%;
  background: var(--sup-2);
  border: 1.5px solid var(--borde);
  border-radius: var(--r-sm);
  padding: 11px 12px;
  outline: none;
  transition: border-color .15s;
  font-size: .95rem;
}
.campo:focus { border-color: var(--acento); }
.campo::placeholder { color: var(--texto-3); }

textarea.campo { resize: vertical; min-height: 88px; line-height: 1.5; }

.fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fila-entre { display: flex; align-items: center; justify-content: space-between; gap: 8px; }

.boton {
  border: none;
  border-radius: var(--r-sm);
  background: var(--acento);
  color: #fff;
  font-weight: 800;
  padding: 12px 18px;
  transition: transform .1s, opacity .15s;
}
.boton:active { transform: scale(.97); }
.boton:disabled { opacity: .5; }
.boton.secundario {
  background: var(--sup-2);
  color: var(--texto);
  border: 1.5px solid var(--borde);
}
.boton.ancho { width: 100%; }
.boton.chico { padding: 8px 14px; font-size: .85rem; }

/* ---------- Barra de pestanas ---------- */

.pestanas {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 30;
  display: flex;
  background: color-mix(in srgb, var(--sup) 92%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--borde);
  padding: 6px 8px calc(6px + var(--seguro-abajo));
}
.pestanas-int { display: flex; width: 100%; max-width: 620px; margin: 0 auto; }

.pestana {
  flex: 1;
  background: none;
  border: none;
  border-radius: var(--r-sm);
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  color: var(--texto-3);
  font-size: .68rem;
  font-weight: 800;
  transition: color .15s, background .15s;
}
.pestana .emoji { font-size: 1.2rem; line-height: 1.2; }
.pestana[data-activo="si"] { color: var(--acento); background: var(--acento-cl); }

/* ---------- Grilla del historial ---------- */

.grilla-envoltura {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--borde);
  border-radius: var(--r);
  background: var(--sup);
  box-shadow: var(--sombra);
}

table.grilla {
  border-collapse: separate;
  border-spacing: 0;
  font-size: .78rem;
  width: max-content;
  min-width: 100%;
}

table.grilla th, table.grilla td {
  border-bottom: 1px solid var(--borde);
  border-right: 1px solid var(--borde);
  padding: 0;
  text-align: center;
}
table.grilla tr:last-child th, table.grilla tr:last-child td { border-bottom: none; }

table.grilla th.rotulo {
  position: sticky;
  left: 0;
  z-index: 2;
  background: var(--sup-2);
  text-align: left;
  padding: 7px 10px;
  font-weight: 800;
  font-size: .74rem;
  white-space: nowrap;
  min-width: 106px;
  color: var(--texto-2);
}

table.grilla thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--sup-2);
  padding: 6px 4px;
  min-width: 46px;
  font-weight: 700;
  line-height: 1.15;
}
table.grilla thead th.rotulo { z-index: 3; }
table.grilla thead th .dow { font-size: .62rem; color: var(--texto-3); text-transform: uppercase; }
table.grilla thead th .num { font-size: .88rem; font-weight: 800; }
table.grilla thead th[data-hoy="si"] .num { color: var(--acento); }

td.celda { height: 36px; }
td.celda button {
  width: 100%; height: 36px;
  border: none; background: none;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  font-size: .7rem; font-weight: 800;
}

.punto { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.punto[data-c="ok"] { background: var(--ok); }
.punto[data-c="1"]  { background: var(--s1); }
.punto[data-c="2"]  { background: var(--s2); }
.punto[data-c="3"]  { background: var(--s3); }
.punto[data-c="4"]  { background: var(--s4); }
.punto[data-c="vacio"] { background: var(--borde-2); opacity: .5; }

.leyenda { display: flex; flex-wrap: wrap; gap: 10px; font-size: .76rem; color: var(--texto-2); font-weight: 600; }
.leyenda span { display: inline-flex; align-items: center; gap: 5px; }

/* ---------- Resumen / estadisticas ---------- */

.tarjetas-dato {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
}

.dato {
  background: var(--sup);
  border: 1px solid var(--borde);
  border-radius: var(--r);
  padding: 12px 14px;
  box-shadow: var(--sombra);
}
.dato .n { font-size: 1.6rem; font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }
.dato .r { font-size: .76rem; color: var(--texto-2); font-weight: 700; margin-top: 2px; }

.barra-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 9px; }
.barra-fila .nom { font-size: .82rem; font-weight: 700; width: 106px; flex: 0 0 106px; }
.barra-fila .pista { display: block; flex: 1; height: 12px; background: var(--sup-2); border-radius: 999px; overflow: hidden; }
.barra-fila .relleno { display: block; height: 100%; min-width: 3px; border-radius: 999px; transition: width .4s ease; }
.barra-fila .val { font-size: .78rem; font-weight: 800; color: var(--texto-2); width: 46px; text-align: right; }

/* ---------- Estados ---------- */

.vacio { text-align: center; color: var(--texto-2); padding: 34px 18px; font-size: .9rem; }
.vacio .emoji { font-size: 2.2rem; display: block; margin-bottom: 8px; }

.cargando {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 40px 0; color: var(--texto-2); font-weight: 700; font-size: .88rem;
}
.girador {
  width: 18px; height: 18px;
  border: 2.5px solid var(--borde-2);
  border-top-color: var(--acento);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

.aviso {
  border-radius: var(--r-sm);
  padding: 11px 13px;
  font-size: .85rem;
  font-weight: 600;
  border: 1px solid;
}
.aviso.error { background: var(--s4-cl); border-color: var(--s4); color: var(--texto); }
.aviso.info  { background: var(--acento-cl); border-color: var(--acento); color: var(--texto); }

.tostada {
  position: fixed;
  left: 50%;
  bottom: calc(84px + var(--seguro-abajo));
  transform: translateX(-50%);
  background: var(--texto);
  color: var(--bg);
  padding: 9px 16px;
  border-radius: 999px;
  font-size: .82rem;
  font-weight: 800;
  box-shadow: var(--sombra-2);
  z-index: 50;
  animation: subir .25s ease;
  pointer-events: none;
  max-width: 88vw;
  text-align: center;
}
@keyframes subir { from { opacity: 0; transform: translate(-50%, 10px); } }

.guardando { font-size: .74rem; font-weight: 800; color: var(--texto-3); display: inline-flex; align-items: center; gap: 5px; }
.guardando[data-estado="ok"] { color: var(--ok); }

/* ---------- Login / configuracion ---------- */

.portada {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
  padding: 26px 20px calc(26px + var(--seguro-abajo));
  max-width: 420px;
  margin: 0 auto;
  width: 100%;
}
.portada .marca { text-align: center; margin-bottom: 4px; }
.portada .marca .logo { font-size: 2.6rem; }
.portada .marca h1 { font-size: 1.45rem; margin-top: 6px; }
.portada .marca p { color: var(--texto-2); font-size: .88rem; margin: 6px 0 0; }
.portada label { display: block; font-size: .78rem; font-weight: 800; color: var(--texto-2); margin-bottom: 5px; }
.portada .grupo { margin-bottom: 12px; }
.portada .enlace {
  background: none; border: none; color: var(--acento);
  font-weight: 800; font-size: .85rem; padding: 6px; text-align: center; width: 100%;
}
.portada .ayuda { font-size: .76rem; color: var(--texto-3); line-height: 1.5; }
.portada code {
  background: var(--sup-2); border: 1px solid var(--borde);
  padding: 1px 5px; border-radius: 5px; font-size: .78em;
}

/* ---------- Utilidades ---------- */

.mini { font-size: .78rem; color: var(--texto-2); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.pila { display: flex; flex-direction: column; gap: 12px; }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}