/* Sostenerte — estilo común
   Un archivo para todas las pantallas, así se ven y se comportan igual. */

html[data-modo="dia"]{
  --fondo:#EDF0EA; --superficie:#F6F8F3; --superficie2:#E4E9E0;
  --borde:#D4DBCF; --borde2:#B8C4B3;
  --texto:#1F2A25; --tenue:#66766D;
  --acento:#C0843C; --acento-tinta:#FFFFFF;
  --sereno:#6E8F7D; --sereno-tinta:#FFFFFF;
  --halo:rgba(192,132,60,.10);
}
html[data-modo="noche"]{
  --fondo:#121A20; --superficie:#1A242B; --superficie2:#233039;
  --borde:#2A373F; --borde2:#3B4C57;
  --texto:#DFE6E3; --tenue:#8397A0;
  --acento:#E0A75C; --acento-tinta:#1A1208;
  --sereno:#7FA890; --sereno-tinta:#0E1A14;
  --halo:rgba(224,167,92,.09);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--fondo);color:var(--texto);
  font-family:"Source Serif 4",Georgia,serif;font-size:17px;line-height:1.55;
  background-image:radial-gradient(130% 50% at 50% -8%,var(--halo) 0%,transparent 70%);
  background-attachment:fixed;
  min-height:100dvh;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── tipografía ─────────────────────────────────────── */
h1,h2,h3,.g,button,.btn,.chip,label,.nav-inf a{font-family:"Bricolage Grotesque",system-ui,sans-serif;letter-spacing:-.012em}
h1{font-size:1.5rem;font-weight:600;line-height:1.15;margin:0 0 .5rem}
h2{font-size:1.05rem;font-weight:600;margin:0}
h3{font-size:.95rem;font-weight:600;margin:0}
p{margin:0 0 .85rem}
a{color:var(--acento)}
.tenue{color:var(--tenue)}
.chico{font-size:.86rem}
.centro{text-align:center}
.oculto{display:none!important}

/* ── estructura ─────────────────────────────────────── */
.hoja{max-width:32rem;margin:0 auto;padding:.9rem 1.1rem 2rem}
header.cab{
  display:flex;justify-content:space-between;align-items:center;
  padding:.2rem 0 .9rem;
}
.marca{display:flex;align-items:center;gap:.45rem;font-family:"Bricolage Grotesque",system-ui,sans-serif;
  font-weight:600;font-size:1rem;color:var(--texto);text-decoration:none}
.marca svg{width:18px;height:18px}
.pastilla{
  appearance:none;background:transparent;border:1px solid var(--borde);border-radius:999px;
  color:var(--tenue);font-size:.78rem;padding:.26rem .66rem;cursor:pointer;text-decoration:none;
}

/* ── barra inferior ─────────────────────────────────── */
.nav-inf{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:var(--superficie);border-top:1px solid var(--borde);
  padding-bottom:env(safe-area-inset-bottom);
}
.nav-inf ul{list-style:none;margin:0 auto;padding:0;max-width:32rem;display:flex}
.nav-inf li{flex:1}
.nav-inf a{
  display:flex;flex-direction:column;align-items:center;gap:.15rem;
  padding:.55rem 0 .5rem;color:var(--tenue);text-decoration:none;font-size:.74rem;
}
.nav-inf a svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.nav-inf a[aria-current="page"]{color:var(--acento)}

/* ── tarjetas y campos ──────────────────────────────── */
.tarjeta{background:var(--superficie);border:1px solid var(--borde);border-radius:14px;padding:1rem;margin-bottom:.8rem}
.tarjeta.hijo{border-left:3px solid var(--sereno)}
.tarjeta-tope{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem;margin-bottom:.7rem}

.campo{margin-bottom:.95rem}
.campo:last-child{margin-bottom:0}
.campo>label{display:block;font-size:.92rem;margin-bottom:.38rem}
.campo .extremos{display:flex;justify-content:space-between;font-size:.74rem;color:var(--tenue);margin-top:.22rem;font-family:"Source Serif 4",Georgia,serif}

.escala{display:flex;gap:.3rem}
.escala button{
  flex:1;appearance:none;background:transparent;border:1px solid var(--borde);border-radius:8px;
  color:var(--tenue);font-size:.98rem;padding:.5rem 0;cursor:pointer;min-height:40px;
  transition:background-color .12s,color .12s,border-color .12s;
}
.escala button[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--acento-tinta)}
.sereno .escala button[aria-pressed="true"]{background:var(--sereno);border-color:var(--sereno);color:var(--sereno-tinta)}

.chips{display:flex;flex-wrap:wrap;gap:.3rem}
.chip,.chips button{
  appearance:none;background:transparent;border:1px solid var(--borde);border-radius:999px;
  color:var(--tenue);font-size:.84rem;padding:.3rem .68rem;cursor:pointer;
  transition:background-color .12s,color .12s;
}
.chips button[aria-pressed="true"]{background:var(--superficie2);color:var(--texto);border-color:var(--borde2)}

.plegar{
  appearance:none;background:none;border:none;padding:0;cursor:pointer;
  color:var(--tenue);font-size:.84rem;text-decoration:underline;text-underline-offset:3px;
}
.desplegado{margin-top:.5rem}

input[type=text],input[type=email],input[type=password],input[type=month],textarea{
  width:100%;background:var(--fondo);border:1px solid var(--borde);border-radius:9px;
  color:var(--texto);font-family:inherit;font-size:1rem;padding:.62rem .72rem;
}
textarea{resize:vertical;min-height:3.2rem}
input[type=month]{color-scheme:dark}
html[data-modo="dia"] input[type=month]{color-scheme:light}

button:focus-visible,a:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--acento);outline-offset:2px}

/* ── botones ────────────────────────────────────────── */
.btn{
  display:block;width:100%;text-align:center;appearance:none;border:none;border-radius:11px;
  font-size:1rem;font-weight:600;padding:.85rem;cursor:pointer;text-decoration:none;
}
.btn-1{background:var(--acento);color:var(--acento-tinta)}
.btn-1:disabled{background:var(--superficie2);color:var(--tenue);cursor:default}
.btn-2{background:var(--superficie);color:var(--texto);border:1px solid var(--borde2)}
.btn .sub{display:block;font-weight:400;font-size:.82rem;opacity:.75;margin-top:.1rem}

/* ── puertas (landing) ──────────────────────────────── */
.puertas{display:grid;gap:.6rem;margin:1.4rem 0}
.puerta{
  display:flex;align-items:center;gap:.9rem;text-decoration:none;color:var(--texto);
  background:var(--superficie);border:1px solid var(--borde);border-radius:14px;padding:.95rem 1rem;
}
.puerta svg{width:26px;height:26px;flex:none;stroke:var(--acento);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.puerta b{display:block;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;font-size:1rem}
.puerta span{display:block;font-size:.86rem;color:var(--tenue)}

/* ── segmentos (Hoy · Historial · Hijos) ────────────── */
.segmentos{display:flex;gap:.3rem;margin:0 0 1rem}
.segmentos button{
  flex:1;appearance:none;background:transparent;border:1px solid var(--borde);border-radius:9px;
  color:var(--tenue);font-size:.86rem;padding:.42rem 0;cursor:pointer;
}
.segmentos button[aria-current="page"]{background:var(--superficie2);color:var(--texto);border-color:var(--borde2)}

/* ── hoja inferior (sesión y hogar) ─────────────────── */
.velo{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:60;display:none}
.velo.abierto{display:block}
.hoja-inf{
  position:fixed;left:0;right:0;bottom:0;z-index:61;
  background:var(--superficie);border-top:1px solid var(--borde);
  border-radius:18px 18px 0 0;padding:1.1rem 1.1rem calc(1.2rem + env(safe-area-inset-bottom));
  max-width:32rem;margin:0 auto;transform:translateY(100%);transition:transform .22s ease;
  max-height:88dvh;overflow-y:auto;
}
.hoja-inf.abierta{transform:none}
.hoja-inf h2{margin-bottom:.25rem}
.hoja-inf .campo{margin-bottom:.7rem}
.hoja-inf .estado{font-size:.88rem;color:var(--tenue);margin:.6rem 0 0;min-height:1.2em}
.hoja-inf .pie{display:flex;justify-content:space-between;align-items:center;margin-top:.8rem;font-size:.84rem}

/* ── historial ──────────────────────────────────────── */
.dia{border-bottom:1px solid var(--borde);padding:.75rem 0}
.dia:last-child{border-bottom:none}
.dia-tope{display:flex;justify-content:space-between;align-items:baseline;gap:.5rem}
.barras{display:flex;gap:.55rem;margin-top:.35rem;flex-wrap:wrap}
.barra{display:flex;align-items:center;gap:.3rem;font-size:.78rem;color:var(--tenue)}
.puntos{display:flex;gap:2px}
.pt{width:7px;height:7px;border-radius:2px;background:var(--borde2);opacity:.5}
.pt.on{background:var(--acento);opacity:1}
.pt.on.s{background:var(--sereno)}
.nota-hist{font-size:.88rem;color:var(--tenue);margin-top:.3rem;font-style:italic}
.aviso{border-left:2px solid var(--acento);padding:.05rem 0 .05rem .85rem;margin:.4rem 0 1.1rem}
.aviso .g{font-size:1.2rem;color:var(--acento);line-height:1.2}
.vacio{text-align:center;color:var(--tenue);padding:2rem 1rem}

/* ── respirar ───────────────────────────────────────── */
#respirar{position:fixed;inset:0;background:var(--fondo);z-index:70;display:none;
  flex-direction:column;align-items:center;justify-content:center;gap:1.6rem}
#respirar.abierto{display:flex}
.circulo{width:150px;height:150px;border-radius:50%;background:var(--acento);opacity:.16;
  border:1px solid var(--acento);transform:scale(.62)}
.circulo.corriendo{animation:respiro 12s ease-in-out infinite}
@keyframes respiro{0%{transform:scale(.62);opacity:.14}33%{transform:scale(1);opacity:.30}50%{transform:scale(1);opacity:.30}100%{transform:scale(.62);opacity:.14}}
.instruccion{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:1.15rem;min-height:1.6em;margin:0}
.res-arriba{position:absolute;top:1.6rem;left:0;right:0;padding:0 1.1rem;display:flex;flex-direction:column;align-items:center}
.res-abajo{position:absolute;bottom:1.4rem;left:0;right:0;padding:0 1.1rem;display:flex;flex-direction:column;align-items:center;gap:.6rem;max-width:26rem;margin:0 auto}
.res-arriba .chips,.res-abajo .chips{justify-content:center}
.res-nota{color:var(--tenue);font-size:.84rem;text-align:center;max-width:22rem;margin:.6rem auto 0}
.volumen{display:flex;align-items:center;gap:.6rem;width:100%;max-width:16rem}
.volumen input[type=range]{flex:1;accent-color:var(--acento);background:transparent}
.res-salir{appearance:none;background:none;border:1px solid var(--borde);border-radius:9px;color:var(--tenue);
  font-size:.9rem;cursor:pointer;padding:.45rem 1.5rem}

/* ── chat ───────────────────────────────────────────── */
.hilo{max-width:32rem;margin:0 auto;padding:.4rem 1.1rem 1rem}
.turno{margin-bottom:1rem;animation:entrar .22s ease}
@keyframes entrar{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.yo{display:flex;justify-content:flex-end}
.yo div{background:var(--superficie2);border:1px solid var(--borde);border-radius:14px 14px 4px 14px;
  padding:.55rem .8rem;max-width:85%;white-space:pre-wrap}
.el{max-width:92%}
.el p{margin:0 0 .7rem}
.el p:last-child{margin-bottom:0}
.ficha{background:var(--superficie);border:1px solid var(--borde);border-left:3px solid var(--sereno);
  border-radius:12px;padding:.9rem .9rem .75rem;margin:.8rem 0}
.ficha h3{font-size:1rem;margin:0 0 .5rem}
.ficha .util{display:flex;gap:.4rem;margin-top:.8rem}
.pensando{display:flex;gap:.3rem;padding:.4rem 0}
.pensando i{width:6px;height:6px;border-radius:50%;background:var(--tenue);animation:latir 1.1s ease-in-out infinite}
.pensando i:nth-child(2){animation-delay:.16s}.pensando i:nth-child(3){animation-delay:.32s}
@keyframes latir{0%,100%{opacity:.25}50%{opacity:.85}}
.entrada-chat{
  position:fixed;left:0;right:0;bottom:calc(58px + env(safe-area-inset-bottom));z-index:39;
  background:var(--fondo);border-top:1px solid var(--borde);padding:.6rem 1.1rem;
}
.entrada-chat .caja{max-width:32rem;margin:0 auto;display:flex;gap:.5rem;align-items:flex-end}
.entrada-chat textarea{flex:1;background:var(--superficie);border-radius:12px;resize:none;max-height:8rem;line-height:1.4;padding:.6rem .75rem}
.entrada-chat .btn{width:auto;padding:.62rem .95rem;font-size:.92rem}
.atajos{display:grid;gap:.45rem}
.atajos button{appearance:none;text-align:left;background:var(--superficie);border:1px solid var(--borde);
  border-radius:11px;color:var(--texto);font-family:"Source Serif 4",Georgia,serif;font-size:.96rem;padding:.7rem .9rem;cursor:pointer}