/* =====================================================
   LA JORNADA CON MIGUEL — Design System "Luz Serena"
   Paleta y tokens: docs/01-DESIGN-SYSTEM.md
   ===================================================== */
:root{
  --stone-0:#FFFDFA; --stone-50:#FAF7F2; --stone-100:#F2EDE5;
  --stone-200:#E5DDD1; --stone-300:#CFC4B4; --stone-400:#A89B88;
  --stone-500:#7D7266; --stone-700:#4A443C; --stone-900:#26221D;

  --custodia-50:#EEF2F8; --custodia-100:#D6E0EE; --custodia-300:#8CA5C6;
  --custodia-500:#4A6B96; --custodia-700:#2C4569; --custodia-900:#182B45;
  --custodia-950:#0E1A2B;

  --oro-100:#F7EFDD; --oro-300:#E3C88E; --oro-500:#C9A253; --oro-700:#9C7A34;
  --salvia-100:#E7EDE6; --salvia-400:#8CA383; --salvia-600:#5C7355;
  --exito:#5C8A62; --error:#A8574F;

  --grad-amanecer:linear-gradient(168deg,#FDF6E9 0%,#F5E9D6 38%,#E8DCC8 100%);
  --grad-vigilia:linear-gradient(170deg,#1D3252 0%,#14243C 55%,#0E1A2B 100%);
  --grad-custodia:linear-gradient(135deg,#35527C 0%,#2C4569 100%);
  --grad-gloria:radial-gradient(120% 90% at 50% 0%,#FBEFD5 0%,#F0DFBE 45%,#E3C88E 100%);

  --sh1:0 1px 2px rgba(56,44,30,.05),0 1px 3px rgba(56,44,30,.04);
  --sh2:0 2px 6px rgba(56,44,30,.06),0 6px 14px rgba(56,44,30,.05);
  --sh3:0 4px 12px rgba(56,44,30,.07),0 14px 30px rgba(56,44,30,.06);
  --glow-oro:0 0 0 1px rgba(201,162,83,.28),0 0 28px rgba(201,162,83,.22);

  --ease:cubic-bezier(.22,1,.36,1);
  --font-display:'Fraunces',Georgia,'Times New Roman',serif;
  --font-body:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}

/* Fuentes: Fraunces + Inter (Google Fonts, cacheadas por el sw) */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400..600;1,9..144,400..600&family=Inter:wght@400;500;600&display=swap');

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:100%}
html[data-fontscale="l"]{font-size:115%}
html[data-fontscale="xl"]{font-size:130%}
body{
  margin:0;font-family:var(--font-body);background:var(--stone-0);color:var(--stone-900);
  line-height:1.6;-webkit-font-smoothing:antialiased;min-height:100dvh;
}
#app{max-width:640px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;position:relative}

/* ── tipografía ── */
h1,h2,h3,.d-xl,.d-l,.d-m,.t-l{font-family:var(--font-display);font-weight:600;letter-spacing:-.015em;margin:0;text-wrap:balance}
.d-xl{font-size:2.4rem;line-height:1.15}
.d-l{font-size:1.9rem;line-height:1.24}
.d-m{font-size:1.55rem;line-height:1.3}
.t-l{font-size:1.3rem;line-height:1.35}
.t-m{font-size:1.05rem;line-height:1.45;font-weight:600;margin:0}
.t-s{font-size:.95rem;font-weight:600;margin:0}
.b-l{font-size:1.03rem;line-height:1.78;margin:0;color:var(--stone-700)}
.b-m{font-size:.94rem;line-height:1.6;margin:0;color:var(--stone-700)}
.b-s{font-size:.82rem;line-height:1.5;margin:0;color:var(--stone-500)}
.ovl{font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin:0;color:var(--oro-700)}
.cap{font-size:.72rem;letter-spacing:.02em;color:var(--stone-400);margin:0}
.pray{font-family:var(--font-display);font-size:1.1rem;line-height:1.95;margin:0}
.scrip{font-family:var(--font-display);font-style:italic;font-size:1.12rem;line-height:1.75;margin:0}
.center{text-align:center}

/* contenido devocional generado (markdown → html) */
.devocional{font-size:1.03rem;line-height:1.8;color:var(--stone-700)}
.devocional p{margin:0 0 1.15em}
.devocional h4{font-family:var(--font-display);font-size:1.25rem;color:var(--stone-900);margin:1.6em 0 .6em;letter-spacing:-.01em}
.devocional blockquote{
  margin:1.4em 0;padding:1em 1.2em;background:var(--stone-50);
  border-left:3px solid var(--oro-300);border-radius:0 12px 12px 0;
}
.devocional blockquote p{margin:0 0 .8em}
.devocional blockquote p:last-child{margin:0}
.devocional ul{margin:0 0 1.15em;padding-left:1.3em}
.devocional li{margin-bottom:.4em}
.devocional strong{color:var(--stone-900)}
.devocional.oracion blockquote{
  background:transparent;border:0;padding:0;text-align:center;
  font-family:var(--font-display);font-size:1.12rem;line-height:1.95;
}

/* ── layout ── */
.stack{display:flex;flex-direction:column}
.g8{gap:8px}.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g24{gap:24px}.g32{gap:32px}
.pad{padding:20px}
.scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.view{display:none;flex-direction:column;flex:1;min-height:0}
.view.on{display:flex;animation:amanece .5s var(--ease)}
@keyframes amanece{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ── botones ── */
.btn{
  font:inherit;font-size:1rem;font-weight:600;min-height:52px;padding:14px 22px;
  border-radius:14px;border:0;background:var(--grad-custodia);color:var(--stone-0);
  cursor:pointer;width:100%;transition:transform .09s ease-out,filter .15s;
  display:flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;
}
.btn:active{transform:scale(.975);filter:brightness(.94)}
.btn:focus-visible{outline:2px solid var(--custodia-500);outline-offset:3px}
.btn.oro{background:var(--oro-500);color:var(--custodia-950)}
.btn.sec{background:transparent;color:var(--custodia-700);border:1.5px solid var(--custodia-300)}
.btn.ter{background:none;color:var(--stone-400);min-height:42px;font-weight:500;font-size:.9rem}
.btn.on-dark{background:var(--oro-500);color:var(--custodia-950)}
.btn[disabled]{background:var(--stone-200);color:var(--stone-400);cursor:not-allowed}

.sticky-cta{
  position:sticky;bottom:0;padding:14px 20px calc(14px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--stone-0) 32%,rgba(255,253,250,0));backdrop-filter:blur(10px);
}
.sticky-cta.dark{background:linear-gradient(to top,#0E1A2B 34%,rgba(14,26,43,0))}

/* ── app bar + barra de momentos ── */
.appbar{display:flex;align-items:center;gap:10px;padding:calc(12px + env(safe-area-inset-top)) 16px 10px;flex:none}
.icon-btn{
  width:40px;height:40px;border-radius:999px;border:0;background:var(--stone-100);
  color:var(--stone-700);font:inherit;font-size:1.05rem;cursor:pointer;
  display:grid;place-items:center;flex:none;
}
.icon-btn:active{transform:scale(.94)}
.appbar .title{flex:1;font-size:.82rem;font-weight:600;color:var(--stone-500);text-align:center}
.momentos{display:flex;gap:2px;padding:0 16px 12px;flex:none}
.momentos i{height:3px;flex:1;border-radius:2px;background:var(--stone-200);transition:background .32s var(--ease)}
.momentos i.done{background:var(--custodia-700)}
.momentos i.now{background:var(--oro-500)}

/* ── tab bar ── */
.tabbar{
  flex:none;display:flex;border-top:1px solid var(--stone-200);
  background:rgba(255,253,250,.92);backdrop-filter:blur(18px) saturate(140%);
  padding-bottom:env(safe-area-inset-bottom);position:sticky;bottom:0;z-index:10;
}
.tabbar button{
  flex:1;background:none;border:0;font:inherit;cursor:pointer;
  padding:8px 2px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--stone-400);font-size:.62rem;font-weight:600;position:relative;
}
.tabbar svg{width:23px;height:23px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
.tabbar button[aria-current="true"]{color:var(--custodia-700)}
.tabbar button[aria-current="true"]::before{content:"";position:absolute;top:2px;width:18px;height:3px;border-radius:999px;background:var(--oro-500)}

/* ── cards ── */
.card{background:#fff;border:1px solid rgba(229,221,209,.7);border-radius:20px;padding:20px;box-shadow:var(--sh2)}
.card.flat{box-shadow:none;background:var(--stone-50);border-color:transparent}
.continuar{position:relative;border-radius:26px;padding:20px;background:var(--grad-amanecer);box-shadow:var(--sh3);overflow:hidden}
.quote{background:var(--stone-50);border-left:3px solid var(--oro-300);border-radius:0 12px 12px 0;padding:16px 18px}

/* ── anillo ── */
.ring{position:relative;width:138px;height:138px;margin:0 auto}
.ring svg{transform:rotate(-90deg)}
.ring .track{stroke:var(--stone-200)}
.ring .fill{stroke:url(#rg);stroke-linecap:round;transition:stroke-dashoffset .9s var(--ease)}
.ring.full .fill{stroke:var(--oro-500)}
.ring .mid{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.ring .mid b{font-family:var(--font-display);font-size:2.3rem;font-weight:600;line-height:1;color:var(--custodia-700)}
.ring .mid span{font-size:.72rem;color:var(--stone-400)}

/* ── racha ── */
.streak{display:flex;gap:6px;justify-content:space-between}
.streak>div{flex:1;display:flex;flex-direction:column;align-items:center;gap:5px}
.dot{width:27px;height:27px;border-radius:999px;display:grid;place-items:center;font-size:.72rem;color:#fff}
.dot.done{background:var(--oro-500)}
.dot.today{border:2px solid var(--custodia-700)}
.dot.today i{width:7px;height:7px;border-radius:999px;background:var(--custodia-700);animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.dot.miss{background:var(--stone-100)}
.dot.future{border:1.5px dashed var(--stone-200)}

/* ── accesos rápidos ── */
.quick{display:flex;gap:10px}
.quick button{
  flex:1;font:inherit;text-align:left;color:inherit;background:var(--stone-50);border:0;
  border-radius:18px;padding:14px 12px;display:flex;flex-direction:column;gap:8px;
  min-height:100px;justify-content:space-between;cursor:pointer;
}
.quick svg{width:24px;height:24px;stroke:var(--custodia-500);fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ── mapa de la jornada ── */
.dias{display:flex;flex-direction:column;gap:8px}
.dia{
  display:flex;gap:14px;align-items:center;background:#fff;font:inherit;text-align:left;color:inherit;
  border:1px solid rgba(229,221,209,.75);border-radius:16px;padding:12px 14px;box-shadow:var(--sh1);cursor:pointer;
}
.dia .n{
  width:40px;height:40px;flex:none;border-radius:999px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:1rem;font-weight:600;background:var(--stone-100);color:var(--stone-500);
}
.dia.done .n{background:var(--oro-100);color:var(--oro-700);border:1px solid var(--oro-300)}
.dia.done{border-color:var(--oro-300)}
.dia.now{border:2px solid var(--custodia-700);box-shadow:var(--sh2)}
.dia.now .n{background:var(--grad-custodia);color:#fff}
.dia.lock{background:var(--stone-50);box-shadow:none;border-color:transparent;cursor:default}
.dia.lock .n{color:var(--stone-300)}
.dia.lock .t-m{color:var(--stone-400)}
.dia .end{margin-left:auto;color:var(--stone-300);flex:none;font-size:.95rem}
.dia.shake{animation:shake .3s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

/* ── vigilia (oración) ── */
.vigilia-bg{background:var(--grad-vigilia);color:#EDE7DC}
.vigilia-bg .b-l,.vigilia-bg .b-m,.vigilia-bg .devocional{color:rgba(237,231,220,.85)}
.vigilia-bg .devocional strong{color:#EDE7DC}
.vigilia-bg .devocional blockquote{background:transparent;border:0;padding:0;text-align:center;font-family:var(--font-display);font-size:1.12rem;line-height:1.95}
.vigilia-bg .ovl{color:var(--oro-300)}
.vigilia-bg .cap{color:rgba(237,231,220,.5)}
.vigilia-bg .icon-btn{background:rgba(237,231,220,.1);color:#EDE7DC}
.vigilia-bg .appbar .title{color:rgba(237,231,220,.55)}
.vigilia-bg .momentos i{background:rgba(237,231,220,.16)}
.vigilia-bg .momentos i.done{background:var(--oro-300)}
.vigilia-bg .momentos i.now{background:var(--oro-500)}
.hair{width:38px;height:1px;background:var(--oro-300);border:0;margin:0 auto}

/* ── silencio ── */
.silencio{
  background:var(--grad-vigilia);color:#EDE7DC;flex:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:28px;text-align:center;
}
.breath{width:210px;height:210px;display:grid;place-items:center;position:relative;margin:26px 0}
.breath .circle{
  position:absolute;inset:0;margin:auto;width:140px;height:140px;border-radius:999px;
  background:rgba(140,163,131,.16);border:1.5px solid rgba(140,163,131,.5);
  animation:breathe 12s ease-in-out infinite;
}
@keyframes breathe{0%{transform:scale(1)}33%{transform:scale(1.5)}50%{transform:scale(1.5)}83%{transform:scale(1)}100%{transform:scale(1)}}
.breath .word{position:relative;font-family:var(--font-display);font-size:1.2rem}
.silencio .anchor{font-family:var(--font-display);font-size:1.25rem;color:var(--oro-300);margin:0;text-wrap:balance}
.silencio .timer{font-size:.82rem;color:rgba(237,231,220,.55);font-variant-numeric:tabular-nums;letter-spacing:.05em}
.silencio .ctrl{display:flex;gap:10px;margin-top:20px}
.silencio .ctrl button{
  font:inherit;font-size:.85rem;font-weight:600;padding:11px 20px;border-radius:999px;
  background:transparent;border:1px solid rgba(237,231,220,.24);color:rgba(237,231,220,.8);cursor:pointer;
}
.sil-chips{display:flex;gap:8px;justify-content:center}
.sil-chips button{
  font:inherit;font-size:.85rem;font-weight:600;padding:9px 16px;border-radius:999px;
  border:1.5px solid rgba(237,231,220,.24);background:transparent;color:rgba(237,231,220,.8);cursor:pointer;
}
.sil-chips button[aria-pressed="true"]{background:var(--oro-500);border-color:var(--oro-500);color:var(--custodia-950)}

/* ── gloria (celebración) ── */
.gloria-bg{background:var(--grad-gloria)}
.sello{width:96px;height:96px;margin:0 auto;position:relative}
.sello svg{width:100%;height:100%;stroke:var(--oro-700);fill:none;stroke-width:1.6}
.sello.stamp{animation:stamp .42s var(--ease) both}
@keyframes stamp{0%{transform:scale(1.5) rotate(-7deg);opacity:0}60%{opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
.sello.stamp::after{content:"";position:absolute;inset:-14px;border-radius:999px;box-shadow:var(--glow-oro);animation:flash .95s ease-out both}
@keyframes flash{from{opacity:1}to{opacity:0}}
.stats3{display:flex;text-align:center}
.stats3>div{flex:1}
.stats3 b{font-family:var(--font-display);font-size:1.25rem;font-weight:600;color:var(--stone-900)}

/* ── campos de escritura ── */
.field{border-bottom:1px solid var(--stone-200);padding-bottom:10px;transition:border-color .26s;display:flex;flex-direction:column;gap:6px}
.field.filled{border-color:var(--oro-500)}
.field textarea{
  width:100%;border:0;background:none;font:inherit;font-size:1rem;line-height:1.6;
  color:var(--stone-900);resize:none;padding:6px 0 0;min-height:52px;outline:0;
}
.field textarea::placeholder{color:var(--stone-300)}
.bigwrite{
  width:100%;border:0;background:none;font:inherit;font-size:1.03rem;line-height:1.8;
  color:var(--stone-900);resize:none;min-height:180px;outline:0;
}
.bigwrite::placeholder{color:var(--stone-300)}

/* ── chips ── */
.chips{display:flex;gap:7px;overflow-x:auto;padding-bottom:2px}
.chip{
  font:inherit;font-size:.8rem;font-weight:600;padding:7px 13px;border-radius:999px;
  border:1.5px solid var(--stone-200);background:var(--stone-0);color:var(--stone-500);
  white-space:nowrap;cursor:pointer;flex:none;
}
.chip[aria-pressed="true"]{background:var(--custodia-50);border-color:var(--custodia-500);color:var(--custodia-700)}

/* ── diario ── */
.entry{display:flex;gap:12px;background:#fff;border:1px solid rgba(229,221,209,.7);border-radius:16px;padding:14px;box-shadow:var(--sh1)}
.entry .bar{width:3px;border-radius:2px;flex:none}
.fab{
  position:fixed;right:max(16px,calc(50vw - 304px));bottom:calc(76px + env(safe-area-inset-bottom));
  width:54px;height:54px;min-height:0;border-radius:999px;padding:0;box-shadow:var(--sh3);font-size:1.2rem;z-index:11;
}

/* ── biblioteca ── */
.libitem{
  display:flex;gap:13px;align-items:center;background:#fff;font:inherit;text-align:left;color:inherit;width:100%;
  border:1px solid rgba(229,221,209,.7);border-radius:16px;padding:11px;box-shadow:var(--sh1);cursor:pointer;
}
.libitem .thumb{width:56px;height:56px;flex:none;border-radius:13px;background:var(--stone-50);display:grid;place-items:center;font-size:1.3rem;color:var(--custodia-500)}

/* ── perfil ── */
.avatar{
  width:82px;height:82px;border-radius:999px;background:var(--custodia-100);color:var(--custodia-700);
  display:grid;place-items:center;font-family:var(--font-display);font-size:2rem;font-weight:600;margin:0 auto;
}
.rows{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(229,221,209,.7);border-radius:18px;overflow:hidden}
.rows>*{display:flex;align-items:center;gap:12px;padding:15px 16px;border-bottom:1px solid var(--stone-100);font-size:.94rem;background:none;border-left:0;border-right:0;border-top:0;font-family:inherit;width:100%;text-align:left;color:inherit;cursor:pointer}
.rows>*:last-child{border-bottom:0}
.rows .v{margin-left:auto;color:var(--stone-400);font-size:.82rem;font-variant-numeric:tabular-nums}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.badge{
  aspect-ratio:1;border-radius:16px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:8px;font-size:.6rem;font-weight:600;line-height:1.25;
}
.badge.got{background:var(--oro-100);border:1px solid var(--oro-300);color:var(--oro-700)}
.badge.no{background:var(--stone-50);color:var(--stone-300);border:1px solid transparent}
.badge .em{font-size:1.4rem}

/* ── toast ── */
.toast{
  position:fixed;left:50%;transform:translate(-50%,14px);bottom:calc(78px + env(safe-area-inset-bottom));
  width:min(calc(100% - 40px),560px);background:var(--custodia-900);color:#EDE7DC;border-radius:14px;
  padding:13px 16px;font-size:.88rem;box-shadow:var(--sh3);opacity:0;pointer-events:none;
  transition:all .24s var(--ease);z-index:30;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

/* ── login ── */
.login-page{min-height:100dvh;background:var(--grad-vigilia);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px;color:#EDE7DC}
.login-card{width:min(420px,100%);display:flex;flex-direction:column;gap:20px}
.login-card .logo{text-align:center;margin-bottom:8px}
.login-card label{display:flex;flex-direction:column;gap:6px;font-size:.8rem;font-weight:600;color:rgba(237,231,220,.7)}
.login-card input{
  font:inherit;font-size:1rem;height:54px;padding:0 16px;border-radius:12px;
  border:1.5px solid rgba(237,231,220,.2);background:rgba(237,231,220,.06);color:#EDE7DC;outline:0;
}
.login-card input:focus{border-color:var(--oro-300)}
.login-card .err{color:#E8A79F;font-size:.85rem;line-height:1.5;display:none}
.login-card .err.on{display:block}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:120ms!important}
}