/* WebApp · móvil primero, una sola columna */
:root{--gold-mark:#D6B466;--maxw:40rem;--tab:4.25rem}
body{padding-bottom:calc(var(--tab) + env(safe-area-inset-bottom))}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:.5rem 1rem;z-index:50}
.skip:focus{left:.5rem;top:.5rem}
.small{font-size:.875rem}
.muted{color:var(--ink-soft)}
.rubric{color:var(--rubric);font-family:var(--sans);font-weight:600;font-size:.9rem;margin:0 0 .35rem;letter-spacing:.01em}
h1,h2,h3{font-weight:600;line-height:1.2;margin:0}

/* Barra superior */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:calc(.6rem + env(safe-area-inset-top)) 1rem .6rem;background:var(--paper);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-weight:600;font-size:1rem;letter-spacing:-.005em}
.mark{width:1.9rem;height:1.9rem;flex:none}
.icon-btn{width:2.75rem;height:2.75rem;display:grid;place-items:center;border:0;background:none;border-radius:50%;cursor:pointer;color:var(--ink)}
.icon-btn svg{width:1.5rem;height:1.5rem}
.icon-btn:hover{background:var(--paper-2)}
.resume{position:sticky;top:calc(3.6rem + env(safe-area-inset-top));z-index:19;display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.45rem 1rem;background:var(--paper-2);font-family:var(--sans);font-size:.85rem;color:var(--ink-soft)}
.resume-btn{border:0;background:none;color:var(--rubric);font-weight:600;font-family:var(--sans);font-size:.85rem;cursor:pointer;padding:.35rem 0;min-height:2.25rem}
.offline{margin:0;padding:.4rem 1rem;background:var(--gold-soft);font-family:var(--sans);font-size:.85rem}

main{max-width:var(--maxw);margin:0 auto;padding:1.5rem 1rem 2.5rem;outline:none}
.page-title{font-size:1.75rem;margin:0 0 .75rem;letter-spacing:-.01em}
.lead{font-size:1.1rem;color:var(--ink-soft);margin:0 0 1.25rem}
.back{display:inline-block;font-family:var(--sans);font-size:.85rem;color:var(--ink-soft);text-decoration:none;margin-bottom:.6rem;padding:.3rem 0}
.back::before{content:"‹ ";}

/* Botones */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.9rem;padding:.6rem 1.15rem;border-radius:.6rem;border:1px solid var(--line);background:var(--card);color:var(--ink);font-family:var(--sans);font-weight:600;font-size:.95rem;cursor:pointer;text-decoration:none}
.btn:hover{border-color:var(--ink-soft)}
.btn.primary{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn.primary:hover{opacity:.92}
.btn.ghost{background:transparent}
.btn.danger{color:var(--rubric);border-color:var(--rubric);background:transparent}
.small-btn{min-height:2.4rem;font-size:.85rem;margin-top:.75rem}
.row{display:flex;flex-wrap:wrap;gap:.6rem}

/* Hoy */
.eyebrow-quiet{font-family:var(--sans);color:var(--ink-soft);font-size:.95rem;margin:0 0 .5rem}
.today-q{font-size:clamp(2rem,8.5vw,2.85rem);font-weight:500;font-style:italic;line-height:1.08;letter-spacing:-.02em;margin:0 0 1.5rem;max-width:14ch}
.today-card{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--rubric);border-radius:.5rem;padding:1.25rem 1.25rem 1.35rem}
.today-card h2{font-size:1.45rem;margin:.1rem 0 .4rem}
.today-card p{margin:0 0 1rem}
.block-progress{margin-top:1.75rem}
.block-progress p{margin:.2rem 0}
.beads{list-style:none;display:flex;gap:.55rem;padding:0;margin:.6rem 0}
.beads li a{display:block;width:1.65rem;height:1.65rem;border-radius:50%;border:1.5px solid var(--ink-soft)}
.beads li.now a{border-color:var(--rubric);box-shadow:inset 0 0 0 4px var(--paper),inset 0 0 0 9px var(--rubric)}
.beads li.done a{background:var(--ink);border-color:var(--ink)}
.beads li.synth a{border-radius:.35rem;transform:rotate(45deg) scale(.82);border-color:var(--gold)}
.beads li.synth.done a{background:var(--gold)}
.note{margin-top:1.5rem;padding:1rem;border-radius:.5rem;background:var(--paper-2)}
.note p{margin:0 0 .75rem}

/* Ruta */
.chips{display:flex;gap:.45rem;overflow-x:auto;padding-bottom:.5rem;margin:0 -1rem 1rem;padding-left:1rem;padding-right:1rem;scrollbar-width:none}
.chip{flex:none;border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.4rem .85rem;font-family:var(--sans);font-size:.85rem;cursor:pointer;min-height:2.25rem}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.ejes{list-style:none;padding:0;margin:0}
.eje{display:grid;grid-template-columns:2.25rem 1fr;gap:.25rem;padding:1rem 0;border-top:1px solid var(--line)}
.eje-n{font-size:1.35rem;font-style:italic;color:var(--rubric);line-height:1.2}
.eje h2{font-size:1.15rem;margin-bottom:.35rem}
.eje.soon h2{color:var(--ink-soft);font-weight:500}
.eje.soon .eje-n{color:var(--ink-soft)}
.topic-list{list-style:none;padding:0;margin:.25rem 0 0}
.topic-list a{display:flex;align-items:flex-start;gap:.7rem;padding:.6rem 0;text-decoration:none;min-height:2.75rem}
.topic-list a:hover span:not(.tid){text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.tid{flex:none;font-family:var(--sans);font-size:.8rem;color:var(--ink-soft);width:2rem;padding-top:.2rem}
.topic-list .is-done span:not(.tid){color:var(--ink-soft)}
.check{width:1rem;height:1rem;color:var(--ok);margin-left:auto;flex:none;margin-top:.3rem}
.results a{border-top:1px solid var(--line);padding:.85rem 0}

/* Campos */
.field{width:100%;padding:.75rem .85rem;border:1px solid var(--line);border-radius:.55rem;background:var(--card);font-family:var(--sans);font-size:1rem}
textarea.field{font-family:var(--serif);line-height:1.5;resize:vertical}
.field-label{display:block;font-family:var(--sans);font-weight:600;font-size:.9rem;margin:0 0 .4rem}
#results{margin-top:1rem}
.empty{color:var(--ink-soft);font-style:italic}

/* Diario */
.journal{list-style:none;padding:0;margin:1rem 0 1.5rem}
.journal li{padding:1rem 0;border-top:1px solid var(--line)}
.journal p{margin:0}
.journal-text{margin-top:.35rem!important;white-space:pre-wrap}

/* Tema: los seis momentos, como un misal */
.topic-head h1{font-size:clamp(1.65rem,6.5vw,2.2rem);letter-spacing:-.015em;margin-bottom:.6rem}
.principles{display:flex;flex-wrap:wrap;gap:.35rem;margin:0 0 1rem}
.principles span{font-family:var(--sans);font-size:.78rem;padding:.2rem .55rem;border-radius:999px;background:var(--paper-2);color:var(--ink-soft)}
.seg{display:flex;align-items:center;gap:.3rem;flex-wrap:wrap}
.seg-label{font-family:var(--sans);font-size:.85rem;color:var(--ink-soft);margin-right:.25rem}
.seg button{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:.4rem .9rem;font-family:var(--sans);font-size:.85rem;cursor:pointer;min-height:2.4rem}
.seg button[aria-checked="true"]{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.moments{list-style:none;padding:0;margin:1.5rem 0 0;position:relative}
.moments::before{content:"";position:absolute;left:1.05rem;top:1.4rem;bottom:1.4rem;width:1px;background:var(--line)}
.moment{position:relative;margin:0 0 .35rem}
.moment h2{margin:0}
.moment-head{display:flex;align-items:center;gap:.8rem;width:100%;padding:.55rem 0;border:0;background:none;cursor:pointer;text-align:left;min-height:3rem}
.m-num{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;background:var(--paper);border:1.5px solid var(--rubric);color:var(--rubric);font-family:var(--serif);font-style:italic;font-size:1rem;position:relative;z-index:1}
.moment.done .m-num{background:var(--rubric);color:var(--paper)}
.m-title{font-family:var(--sans);font-weight:600;font-size:1rem;color:var(--rubric)}
.moment:not(.open):not(.done) .m-title{color:var(--ink-soft)}
.moment:not(.open):not(.done) .m-num{border-color:var(--line);color:var(--ink-soft)}
.moment-body{padding:.25rem 0 1.25rem 2.9rem}
.moment-body > p{margin:0 0 1rem;max-width:62ch}
.moment.m5 .m-num{border-color:var(--gold);color:var(--gold)}
.moment.m5.done .m-num{background:var(--gold);color:var(--paper)}
.moment.m5 .m-title{color:var(--gold)}
.next{margin-top:.25rem}
.gospel{margin:0 0 1.25rem;padding:.25rem 0 .25rem 1.1rem;border-left:2px solid var(--gold)}
.gospel p{font-size:1.3rem;font-style:italic;line-height:1.45;margin:0 0 .5rem}
.gospel footer,.church footer,.ref{font-family:var(--sans);font-size:.82rem;color:var(--ink-soft)}
.ref{margin:-.5rem 0 1rem!important}
.church{margin:0 0 1rem;padding:1rem 1.1rem;background:var(--card);border:1px solid var(--line);border-radius:.5rem}
.church p{margin:0 0 .6rem;font-size:1.08rem}
.for-you{margin:0 0 1.1rem;padding:.9rem 1rem;border-radius:.5rem;background:var(--paper-2)}
.for-you p{margin:0}
.discern-q{font-weight:600;font-size:1.12rem;margin:0 0 .3rem!important}
.options{display:grid;gap:.6rem;margin:.75rem 0 0}
.option{border:1px solid var(--line);border-radius:.55rem;background:var(--card);overflow:hidden}
.option.selected{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink)}
.option.other:not(.revealed){opacity:.72}
.option-btn{display:flex;gap:.75rem;align-items:flex-start;width:100%;padding:.85rem .9rem;border:0;background:none;text-align:left;cursor:pointer;line-height:1.45}
.opt-letter{flex:none;font-family:var(--sans);font-weight:600;font-size:.8rem;width:1.6rem;height:1.6rem;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--ink-soft)}
.option.selected .opt-letter{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.conseq{margin:0;padding:0 .9rem .9rem 3.25rem;display:grid;gap:.45rem}
.conseq div{display:grid;gap:.05rem}
.conseq dt{font-family:var(--sans);font-size:.78rem;font-weight:600;color:var(--rubric)}
.conseq dd{margin:0;font-size:.95rem}
.action{font-size:1.12rem;font-weight:500}
#jrState{margin:.35rem 0 1rem}
.prayer{font-style:italic;font-size:1.12rem;line-height:1.7;max-width:58ch}

/* Síntesis */
.synth section{margin:1.75rem 0}
.ideas{padding-left:1.25rem;margin:.5rem 0 0}
.ideas li{margin:0 0 .6rem}
.ideas li::marker{color:var(--rubric);font-style:italic}
.thermo{border:0;padding:0;margin:1rem 0}
.thermo legend{margin-bottom:.5rem}
.scale{display:flex;gap:.45rem}
.scale label{position:relative}
.scale input{position:absolute;opacity:0;inset:0}
.scale span{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;border:1px solid var(--line);background:var(--card);font-family:var(--sans);cursor:pointer}
.scale input:checked + span{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.scale input:focus-visible + span{outline:2px solid var(--rubric);outline-offset:2px}
.testimony h3{font-size:1.25rem}
.testimony p{margin:.4rem 0}
.lesson{font-style:italic}
.team-q{font-size:1.2rem;font-style:italic;margin:.25rem 0 1rem}

/* Ajustes */
.set{padding:1rem 0;border-top:1px solid var(--line)}
.set p{margin:.25rem 0 .75rem}
.signin p,.about p{max-width:62ch}
.mail-form{display:grid;gap:.6rem;margin:1.25rem 0}
.gbtn{margin:1rem 0}
.signin > .btn{margin-top:.5rem}

/* Barra inferior */
.tabbar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;grid-template-columns:repeat(4,1fr);height:calc(var(--tab) + env(safe-area-inset-bottom));padding-bottom:env(safe-area-inset-bottom);background:var(--paper);border-top:1px solid var(--line)}
.tabbar a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;text-decoration:none;font-family:var(--sans);font-size:.74rem;color:var(--ink-soft)}
.tabbar svg{width:1.5rem;height:1.5rem}
.tabbar a[aria-current="page"]{color:var(--ink)}
.tabbar a[aria-current="page"] span{font-weight:600}
.toast{position:fixed;left:50%;bottom:calc(var(--tab) + 1rem + env(safe-area-inset-bottom));transform:translateX(-50%);background:var(--ink);color:var(--paper);padding:.6rem 1rem;border-radius:.5rem;font-family:var(--sans);font-size:.9rem;z-index:40;max-width:calc(100% - 2rem)}

/* Pantallas grandes: la misma columna, con aire */
@media (min-width:56rem){
  main{padding-top:2.5rem}
  .tabbar{left:50%;right:auto;transform:translateX(-50%);width:32rem;bottom:1rem;border:1px solid var(--line);border-radius:1rem;height:var(--tab);padding-bottom:0}
  body{padding-bottom:calc(var(--tab) + 2rem)}
}
.conseq[hidden]{display:none}
#view:focus,#view:focus-visible{outline:none}
.confirm{display:grid;gap:.5rem;margin-top:.5rem}