:root{
  --lit:#19D3FF;--lit-on:#0B1F33;--lit-txt-claro:#0078D4;--lit-txt-oscuro:#19D3FF;--lit-txt:var(--lit-txt-claro);
  --bg:#f6f5f2;--card:#fff;--ink:#1c2230;--mute:#7d8290;--chip:#efede8;--line:#e4e1da;
  --soft:color-mix(in srgb,var(--lit) 12%,#fff);
  --fs:18px;
}
@media (prefers-color-scheme:dark){
  /* Modo oscuro: mismo contraste que el claro, invertido → fondo negro y tarjetas gris */
  :root{--bg:#000000;--card:#1f1f22;--ink:#f2f0ea;--mute:#9d9da6;--chip:#2e2e33;--line:#3a3a40;
    --soft:color-mix(in srgb,var(--lit) 26%,#1f1f22)}
  :root{--lit-txt:var(--lit-txt-oscuro)}
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:Manrope,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
main{max-width:560px;margin:0 auto;padding:6px 16px 120px;min-height:100vh}
a{color:inherit}
button{font:inherit;color:inherit}

/* Cabecera */
.hd{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:20px}
.logo{width:44px;height:44px;border-radius:50%;background:var(--card);display:grid;place-items:center;box-shadow:0 1px 3px #0001;flex:none}
.logo svg{width:24px;height:24px;stroke:var(--lit-txt);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.date{text-align:right}
.date b{font-size:20px;font-weight:800;display:block;line-height:1.2}
.date small{display:block;font-size:11px;letter-spacing:.08em;color:var(--mute);margin-top:4px;text-transform:uppercase}
.tag{display:inline-block;margin-top:6px;font-size:10px;letter-spacing:.08em;font-weight:700;color:var(--lit-txt);background:var(--soft);padding:3px 8px;border-radius:10px;text-transform:uppercase}
.otro-dia{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:var(--lit-txt);text-decoration:none}

/* Pensamiento */
.hero{background:var(--lit);color:var(--lit-on);border-radius:24px;padding:22px;margin-bottom:14px;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-30px;bottom:-40px;width:160px;height:160px;border-radius:50%;background:#ffffff14;pointer-events:none}
.hero small{font-size:11px;letter-spacing:.1em;opacity:.85;font-weight:700}
.hero p{font-family:Literata,serif;font-style:italic;font-size:19px;line-height:1.45;margin:10px 0 12px}
.hero span{font-size:12px;opacity:.85}

/* Tarjetas */
.grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.card{background:var(--card);border-radius:22px;padding:16px;box-shadow:0 1px 2px #0000000a;position:relative;text-decoration:none;display:block;min-height:128px}
.card:active{transform:scale(.985)}
.ic{width:42px;height:42px;border-radius:50%;background:var(--soft);display:grid;place-items:center;margin-bottom:14px;flex:none}
.ic svg{width:22px;height:22px;stroke:var(--lit-txt);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.card b{font-size:17px;font-weight:800;display:block;line-height:1.2}
.card em{font-style:normal;font-size:16px;display:block;line-height:1.25}
.card small{display:block;margin-top:4px;font-size:11px;color:var(--mute);letter-spacing:.05em;text-transform:uppercase}
.wide{grid-column:1/-1;display:flex;gap:14px;align-items:center;min-height:0}
.wide .ic{margin:0}
.play{position:absolute;top:14px;right:14px;width:42px;height:42px;border-radius:50%;background:var(--lit);border:none;display:grid;place-items:center;cursor:pointer;box-shadow:0 3px 10px color-mix(in srgb,var(--lit) 40%,transparent)}
.play svg{width:18px;height:18px;fill:var(--lit-on)}
.play .pa{display:none}.play.on .pl{display:none}.play.on .pa{display:block}

/* Barra inferior */
.tab{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));background:var(--card);border-radius:28px;padding:10px 16px;display:flex;gap:6px;box-shadow:0 6px 24px #0002;font-size:11px;z-index:5}
.tab a{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:56px;color:var(--mute);text-decoration:none}
.tab svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.8}
.tab a.on{color:var(--ink);font-weight:700}
.tab a.on::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--lit)}

/* Reproductor */
.mini{position:fixed;left:50%;transform:translateX(-50%);width:min(528px,calc(100% - 32px));bottom:calc(84px + env(safe-area-inset-bottom));background:var(--ink);color:var(--bg);border-radius:16px;padding:10px 14px;font-size:13px;display:flex;align-items:center;gap:10px;box-shadow:0 6px 20px #0003;z-index:6}
.mini[hidden]{display:none}
.mini b{flex:1}
.mini button{background:none;border:none;color:inherit;font-size:14px;cursor:pointer;padding:4px 8px}

/* Pantallas de lectura */
.bar{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;color:var(--mute);font-size:14px}
.bar a{text-decoration:none;font-weight:600}
.bar .tools{display:flex;gap:6px}
.bar .tools button{background:var(--chip);border:none;border-radius:10px;padding:6px 10px;cursor:pointer;font-weight:700;color:var(--ink)}
.seg{display:flex;background:var(--chip);border-radius:14px;padding:4px;margin-bottom:22px;font-size:13px;overflow-x:auto}
.seg button{flex:1;border:none;background:none;padding:8px 6px;border-radius:10px;color:var(--mute);font-weight:600;white-space:nowrap;cursor:pointer}
.seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px #0001}
.rd h2{font-size:24px;font-weight:800;margin:0 0 4px;text-align:center;line-height:1.2}
.rd h3{font-family:Literata,serif;font-size:calc(var(--fs) + 3px);font-weight:600;line-height:1.3;color:var(--lit-txt);margin:0 0 6px}
.rd .ref{font-family:Literata,serif;font-style:italic;color:var(--mute);font-size:15px;margin:0 0 16px;text-align:center}
.rd .txt p{font-family:Literata,serif;font-size:var(--fs);line-height:1.75;margin:0 0 14px}
.rd .fin{font-size:13px;font-weight:700;color:var(--mute)}
.fuente{margin-top:28px;padding-top:14px;border-top:1px solid var(--line);font-size:12px;color:var(--mute)}
.cab{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.listen{flex:none;width:44px;height:44px;border-radius:50%;background:var(--lit);border:none;display:grid;place-items:center;cursor:pointer}
.listen svg{width:18px;height:18px;fill:var(--lit-on)}
.listen .pa{display:none}.listen.on .pl{display:none}.listen.on .pa{display:block}

/* Listas e información */
.list a{display:flex;gap:14px;align-items:center;background:var(--card);border-radius:18px;padding:14px 16px;margin-bottom:10px;text-decoration:none}
.list b{display:block;font-size:16px}.list small{color:var(--mute);font-size:13px}
.panel{background:var(--card);border-radius:20px;padding:18px;margin-bottom:12px;line-height:1.6;font-size:15px}
.panel h3{margin:0 0 8px;font-size:15px}
.cal input{width:100%;font:inherit;font-size:17px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink);margin:8px 0 12px}
.cal .row{display:flex;gap:8px}
.cal .row button{flex:1;background:var(--chip);border:none;border-radius:12px;padding:12px;font-weight:700;cursor:pointer}
.cal .go{display:block;width:100%;background:var(--lit);color:var(--lit-on);border:none;border-radius:14px;padding:14px;font-weight:800;margin-top:12px;cursor:pointer;font-size:15px}
.aviso{background:var(--soft);color:var(--ink);border-radius:14px;padding:12px 14px;font-size:13px;margin-bottom:14px}
.cargando{color:var(--mute);text-align:center;padding:40px 0}

/* Punteros */
.form label{display:block;font-size:13px;font-weight:700;margin:14px 0 6px}
.form input,.form textarea{width:100%;font:inherit;font-size:16px;padding:12px;border-radius:14px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.form textarea{min-height:260px;font-family:Literata,serif;line-height:1.6;resize:vertical}
.form .acc{display:flex;gap:8px;margin-top:16px}
.form .acc button{flex:1;border:none;border-radius:14px;padding:14px;font-weight:800;cursor:pointer;font-size:15px}
.form .sec{background:var(--chip)}.form .pri{background:var(--lit);color:var(--lit-on)}
.prev{background:var(--card);border-radius:18px;padding:18px;margin-top:16px}
.estado{margin-top:12px;font-size:14px;font-weight:600}

/* Ajustes */
.hd-izq{display:flex;gap:8px}
a.logo{text-decoration:none}
.panel .seg{margin:6px 0 14px;flex-wrap:wrap}
.panel .seg button{flex:1 1 30%}
.prox ul{margin:0;padding-left:18px;color:var(--mute)}

/* Ajustes: tamaños mostrados a su propio tamaño */
.seg button.tam{font-family:Literata,serif;font-weight:400;line-height:1.2;padding:10px 6px;flex:1 1 auto}
.seg button.tam.on{font-weight:600}
/* Colaboradores */
.quien{margin:4px 0 12px;line-height:1.4}.quien small{color:var(--mute)}
.lbl{display:block;font-size:13px;font-weight:700;margin:6px 0 6px}
.mute{color:var(--mute);font-size:14px}
.btn-sec{background:var(--chip);border:none;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;font-size:14px;color:var(--ink)}
.btn-peligro{background:none;border:1px solid #b3261e55;color:#b3261e;border-radius:12px;padding:10px 14px;font-weight:700;cursor:pointer;margin-top:12px;width:100%}
.btn-link{background:none;border:none;color:#b3261e;font-weight:700;cursor:pointer;font-size:13px}
.acc2{display:flex;flex-direction:column;gap:8px}
#gbtn{min-height:44px}
.dias{display:grid;grid-template-columns:repeat(auto-fill,minmax(98px,1fr));gap:8px}
.dia{background:var(--card);border-radius:14px;padding:10px;text-decoration:none;display:flex;flex-direction:column;gap:2px;border:2px solid transparent}
.dia .d1{font-weight:800;font-size:14px;text-transform:capitalize}.dia .d2{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dia.falta{border-color:color-mix(in srgb,#b3261e 35%,transparent)}.dia.falta .d2{color:#b3261e;font-weight:700}
.dia.ok .d2{color:var(--lit-txt);font-weight:700}
.mini-date{font:inherit;padding:6px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.usuarios{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.usr{background:var(--card);border-radius:16px;padding:12px 14px;display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center}
.usr small{display:block;color:var(--mute);font-size:12px}.usr.baja{opacity:.6}
.usr-acc{display:flex;gap:6px;align-items:center}
.usr select,.form select{font:inherit;padding:9px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.form select{width:100%}
.form textarea.corto{min-height:90px}
.it .it-cab{display:flex;justify-content:space-between;align-items:center}
.apartado{border-left:3px solid var(--soft);padding-left:10px;margin:12px 0}
.apartado input,.apartado textarea{margin-top:6px}
.barras{display:flex;align-items:flex-end;gap:3px;height:120px;margin-top:10px}
.barras span{flex:1;background:var(--lit);border-radius:3px 3px 0 0;min-height:2px}
.ejes{display:flex;justify-content:space-between;color:var(--mute)}
.hbar{display:grid;grid-template-columns:120px 1fr 36px;gap:8px;align-items:center;margin:8px 0;font-size:14px}
.hbar i{height:10px;background:var(--lit);border-radius:5px;display:block}.hbar b{text-align:right}

#probarVoz{display:inline-flex;align-items:center;gap:6px}
#probarVoz svg{width:14px;height:14px;fill:currentColor}

.prueba{position:sticky;top:0;z-index:7;background:#0B1F33;color:#fff;text-align:center;font-size:12px;font-weight:700;padding:calc(6px + env(safe-area-inset-top)) 12px 6px;letter-spacing:.02em}

.wide .crece{flex:1}
.ext{flex:none;color:var(--mute)}.ext svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

.oracion{margin:26px 0 8px}
.oracion h3{margin-bottom:10px}
.rd .txt p.versos{line-height:1.7;margin:0}
.oracion+.oracion{padding-top:22px;border-top:1px solid var(--line)}

.rd.centrado{text-align:center}





.seg-or button.on{background:var(--lit);color:var(--lit-on);box-shadow:0 2px 8px color-mix(in srgb,var(--lit) 35%,transparent)}

.rd .txt p.versos+p.versos{margin-top:1.1em}
.seg-sub{justify-content:center;background:none;padding:0;gap:8px;margin:2px 0 4px}
.seg-sub button{flex:0 0 auto;padding:6px 18px;border:1px solid var(--line);border-radius:999px;background:var(--card)}
.seg-sub button.on{border-color:transparent}

.rd .txt p.antifona{font-weight:700;font-style:italic}

.rd p.lema{font-family:Literata,serif;font-style:italic;color:var(--mute);font-size:calc(var(--fs) - 2px);line-height:1.5;margin:-4px 0 16px}

/* Cabecera con el logo en todas las pantallas */
.top{max-width:560px;margin:0 auto;padding:calc(14px + env(safe-area-inset-top)) 16px 8px;display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.top .logo{text-decoration:none}
#topDer{flex:1;min-width:0}

/* Cabecera de la pantalla principal: tiempo litúrgico + taco de calendario */
.fecha-cab{display:flex;justify-content:flex-end;align-items:center;gap:12px}
.fecha-txt{text-align:right}.fecha-txt b{display:block;font-weight:800;font-size:16px;line-height:1.2}
.fecha-txt small{display:block;color:var(--mute);font-size:13px;margin-top:2px}
.taco{position:relative;width:60px;border-radius:12px;overflow:hidden;background:var(--card);box-shadow:0 1px 4px #0002;text-align:center;flex:none;cursor:pointer;display:flex;flex-direction:column}
.taco .m{background:var(--lit);color:var(--lit-on);font-size:10px;font-weight:800;letter-spacing:.1em;padding:3px 0}
.taco .n{font-size:25px;font-weight:800;line-height:1.1;padding-top:2px;color:var(--ink)}
.taco .d{font-size:10px;color:var(--mute);padding-bottom:5px;text-transform:uppercase;font-weight:700}
.taco input{position:absolute;inset:0;opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.taco:active{transform:scale(.96)}

/* ===== Formato unificado de las secciones ===== */
.rd .seg{margin:18px 0 6px}
.rd .seg button{white-space:normal;line-height:1.25}
.rd .seg+.seg{margin-top:8px}
.ap{text-align:center;margin:24px 0 16px}
.ap .ref{margin:2px 0 0}
.ap .listen{margin:12px auto 0}
.rd .seg+.txt{margin-top:22px}
.rd > .ref + .txt{margin-top:4px}
.rd .txt p.versos{text-align:center}
.rd .txt ul{font-family:Literata,serif;font-size:var(--fs);line-height:1.6;margin:-6px 0 14px;padding-left:1.3em}
.rd .txt li{margin:2px 0}
.rd .txt strong{font-weight:700}

/* ===== Ordenador: puntero y teclado (en móvil no cambia nada) ===== */
@media (hover:hover){
  .card,.list a{transition:box-shadow .15s,transform .15s}
  .card:hover,.list a:hover{box-shadow:0 6px 18px #00000014}
  .seg button:not(.on):hover,.bar a:hover,.tab a:hover{color:var(--ink)}
  .listen:hover,.taco:hover{filter:brightness(1.05)}
}
a:focus-visible,button:focus-visible,.taco:focus-within{outline:2px solid var(--lit-txt);outline-offset:2px}

/* ===== Barra inferior: botón central de usuario ===== */
.tab{align-items:flex-end;gap:10px;padding:8px 18px}
.tab a{min-width:64px;cursor:pointer;white-space:nowrap}
.usr-ic{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--lit-txt);box-shadow:0 0 0 2px var(--card),0 0 0 4px var(--lit);margin:2px 0 1px}
.tab .usr-ic svg{width:20px;height:20px}
.usr-tab.on,.usr-tab.abierto{color:var(--ink);font-weight:700}
.usr-tab.abierto .usr-ic{background:var(--lit);color:var(--lit-on)}
.usr-tab.on::after{display:none}

/* ===== Panel «Modo de uso» ===== */
.velo-u{position:fixed;inset:0;background:#0B1F3333;z-index:8;animation:aparece .15s}
.panel-u{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom));width:min(528px,calc(100% - 24px));max-height:calc(100vh - 120px);overflow:auto;background:var(--card);color:var(--ink);border-radius:22px;padding:18px;box-shadow:0 10px 34px #0003;z-index:9;animation:sube .18s ease-out}
.panel-u h3{margin:0 0 12px;font-size:17px}
.panel-u .seg{margin:0 0 4px}
.panel-u .seg button.on{background:var(--lit);color:var(--lit-on)}
.panel-u .seg button.bloq:not(.on){opacity:.55}
.panel-u .desc{font-size:13.5px;color:var(--mute);line-height:1.5;margin:12px 2px}
.acc-u{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:4px 0 6px}
.acc-u a,.acc-u span{background:var(--chip);border-radius:14px;padding:11px 12px;text-decoration:none;color:var(--ink);font-size:14px}
.acc-u b{display:block}.acc-u small{display:block;color:var(--mute);font-size:12px;margin-top:2px}
.acc-u.off{opacity:.5}
.panel-u .nota{font-size:12.5px;color:var(--mute);margin:6px 2px 0}
.pie-u{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.pie-u .quien{margin:0 0 10px}
.pie-u .demo{margin-top:10px}
#gbtn{display:flex;justify-content:center;min-height:44px}
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:#fff;color:#1f1f1f;border:1px solid #dadce0;border-radius:22px;padding:10px 16px;font:600 14.5px/1.2 inherit;cursor:pointer}
.btn-google .g{width:20px;height:20px;flex:none}
@media (hover:hover){.btn-google:hover{background:#f7f8f8}.acc-u a:hover{filter:brightness(.97)}}
@keyframes sube{from{opacity:0;transform:translate(-50%,10px)}to{opacity:1;transform:translate(-50%,0)}}
@keyframes aparece{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.panel-u,.velo-u{animation:none}}
.tab{z-index:10}
.btn-google span{white-space:nowrap}@media (max-width:340px){.btn-google{font-size:13.5px;padding:10px 12px}.panel-u{padding:14px}}

/* Punteros: días asignados */
.dia .d3{font-size:11px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dia .d3.sin{color:#b3261e}
.usr-dias{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--mute)}
.usr-dias input{width:84px;font:inherit;padding:8px;border-radius:10px;border:1px solid var(--line);background:var(--card);color:var(--ink)}
.usr-acc{flex-wrap:wrap}.usr-acc .btn-sec{white-space:nowrap}

/* Mis notas (orantes) */
.notas{margin-top:8px}
.nota-it{background:var(--card);border-radius:18px;padding:14px 16px;margin-bottom:10px}
.nota-it h4{margin:0 0 6px;font-size:13px;color:var(--lit-txt);font-weight:800}
.nota-it .txt p{margin:0 0 8px}
.abrir-doc{text-align:center;margin:6px 0 12px;font-size:14px}
.abrir-doc a{color:var(--lit-txt);font-weight:700;display:inline-flex;gap:6px;align-items:center}
.abrir-doc svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}
.panel .btn-google{margin-top:4px}
.nota-it .txt p{font-family:Literata,serif;font-size:var(--fs);line-height:1.6}

/* Días de puntos: pendiente en rojo, subido en verde */
.dia.ok{border-color:color-mix(in srgb,#1e8e3e 45%,transparent);background:color-mix(in srgb,#1e8e3e 6%,var(--card))}
.dia.ok .d2{color:#1e8e3e;font-weight:700}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dia.ok .d2{color:#5cc97a}}
.ruego{margin:14px 2px 0;padding:12px 14px;border-left:3px solid var(--lit);background:var(--card);border-radius:0 14px 14px 0;font-family:Literata,serif;font-style:italic;font-size:14.5px;line-height:1.55;color:var(--ink)}
.ruego b{font-style:normal;font-family:inherit}

/* ===== Botón flotante de nota (arrastrable) ===== */
.fab-nota{position:fixed;z-index:7;width:52px;height:52px;border-radius:50%;border:none;background:var(--lit);color:var(--lit-on);display:grid;place-items:center;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;
  box-shadow:0 6px 18px color-mix(in srgb,var(--lit) 45%,transparent),0 2px 6px #0002;opacity:.92;transition:transform .12s,opacity .12s}
.fab-nota svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.fab-nota.arrastrando{cursor:grabbing;transform:scale(1.08);opacity:1;transition:none}
.fab-nota[hidden]{display:none}
@media (hover:hover){.fab-nota:hover{opacity:1}}

/* ===== Hoja de nota y formulario ===== */
.panel-n{max-height:calc(100dvh - 110px)}
.cab-n{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.cab-n h3{margin:0;flex:1}
.ver-n{font-size:13px;font-weight:700;color:var(--lit-txt)}
.cerrar-n{border:none;background:var(--chip);color:var(--ink);width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:14px}
.fnota .seg{margin:0 0 6px}
.fnota .seg button.on{background:var(--lit);color:var(--lit-on)}
.doc-dest{font-size:11.5px;color:var(--mute);margin:0 2px 10px}
.fnota .nf,.fnota .ns{margin-bottom:8px}
.fnota .ns{font-style:italic}
.fnota .nt{min-height:150px}
.panel-n .fnota .nt{min-height:120px}
.demo-n{font-size:12px;margin:6px 2px 0}
.sec-n{margin:-2px 0 6px;font-family:Literata,serif;font-style:italic;color:var(--mute);font-size:13.5px}
.acc-u > :only-child{grid-column:1/-1;justify-self:center;text-align:center;min-width:60%}

/* Botón de nota: transparente, borde e icono del color litúrgico */
.fab-nota{background:transparent;color:var(--lit-txt);border:2px solid var(--lit);box-shadow:none;opacity:1;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.fab-nota svg{stroke-width:2.2}
.fab-nota.arrastrando{box-shadow:0 4px 14px #0002}
@media (hover:hover){.fab-nota:hover{background:color-mix(in srgb,var(--lit) 10%,transparent)}}

/* Tabla de permisos (panel de usuario) */
.permisos{width:100%;border-collapse:separate;border-spacing:0;font-size:12.5px;margin:0 0 12px;table-layout:fixed}
.permisos caption{text-align:left;color:var(--mute);font-size:12px;margin:-6px 0 8px}
.permisos th,.permisos td{padding:7px 3px;border-bottom:1px solid var(--line);vertical-align:middle}
.permisos thead th{font-size:11.5px;font-weight:800;text-align:center;color:var(--ink);border-bottom:2px solid var(--line);padding-top:4px}
.permisos thead th small{display:block;font-weight:600;font-size:10px;color:var(--mute)}
.permisos thead th:first-child{width:41%}
.permisos tbody th{text-align:left;font-weight:700;line-height:1.25;padding-right:6px}
.permisos tbody th small{display:block;font-weight:500;color:var(--mute);font-size:11px;margin-top:1px}
.permisos td{text-align:center;font-size:15px}
.permisos .si{color:var(--lit-txt);font-weight:800}
.permisos .no{color:var(--line);font-weight:700}
.permisos tbody tr:last-child th,.permisos tbody tr:last-child td{border-bottom:none}
/* columna del usuario actual */
.permisos .yo{background:var(--soft)}
.permisos thead th.yo{color:var(--lit-txt);border-radius:10px 10px 0 0;border-bottom-color:var(--lit)}
.permisos thead th.yo small{color:var(--lit-txt)}
.permisos tbody tr:last-child td.yo{border-radius:0 0 10px 10px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.lbl-u{font-size:12px;font-weight:800;color:var(--mute);margin:4px 2px 6px;letter-spacing:.04em}
@media (max-width:340px){.permisos{font-size:11.5px}.permisos thead th{font-size:10.5px}}
.permisos thead th{font-size:10.5px;padding-left:1px;padding-right:1px;letter-spacing:-.01em;overflow-wrap:anywhere}
.permisos thead th small{font-size:9.5px;line-height:1.15}
.permisos thead th:first-child{width:38%}

/* Itinerarios en preparación (solo administradores) */
.list a.oculto{opacity:.55;border:1.5px dashed var(--line)}
.rd.oculto{opacity:.7}
.tag-oculto{display:inline-block;margin-top:4px;font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--mute);background:var(--chip);border-radius:8px;padding:2px 7px}
.chk{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;margin:4px 0 8px;flex-wrap:wrap}
.chk input{width:18px;height:18px}
.chk small{color:var(--mute);font-weight:500}
.tag-oculto + .tag-oculto{margin-left:4px}.tag-reg{color:var(--lit-txt);background:var(--soft)}

/* Botón del tiempo fuerte (pantalla principal): relleno del color litúrgico */
.card.tiempo{background:var(--lit);color:var(--lit-on);box-shadow:0 4px 14px color-mix(in srgb,var(--lit) 35%,transparent)}
.card.tiempo small{color:var(--lit-on);opacity:.8}
.card.tiempo .ic{background:color-mix(in srgb,var(--lit-on) 14%,transparent);color:var(--lit-on)}
.card.tiempo .ic svg{stroke:var(--lit-on)}

/* Elección «Misas cerca» */
.op-m{display:flex;gap:12px;align-items:center;width:100%;text-align:left;border:1.5px solid var(--line);background:var(--card);color:var(--ink);border-radius:16px;padding:12px;margin-bottom:8px;cursor:pointer;font:inherit}
.op-m.on{border:2px solid var(--lit);padding:11.5px}
.op-m svg{width:38px;height:38px;padding:8px;border-radius:50%;background:var(--soft);stroke:var(--lit-txt);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.op-m b{display:block;font-size:14.5px}.op-m small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.op-m em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:800;color:var(--lit-txt);background:var(--soft);border-radius:8px;padding:3px 7px;white-space:nowrap}
@media (hover:hover){.op-m:hover{border-color:var(--lit)}}

/* Estudio de uso */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.kpis div{background:var(--card);border-radius:16px;padding:12px 10px;text-align:center}
.kpis b{display:block;font-size:20px;font-weight:800;line-height:1.15}
.kpis small{display:block;font-size:11px;color:var(--mute);margin-top:2px}
.kpis .sube b,.t-est .sube{color:#1e8e3e}.kpis .baja b,.t-est .baja{color:#b3261e}
.conclusiones ul{margin:0;padding-left:1.1em;line-height:1.55;font-size:14px}
.conclusiones li{margin:2px 0}
.t-est{width:100%;border-collapse:collapse;font-size:13px}
.t-est th{font-size:11px;color:var(--mute);font-weight:700;text-align:right;padding:0 4px 6px}
.t-est th:first-child{text-align:left}
.t-est td{padding:6px 4px;border-top:1px solid var(--line);text-align:right;white-space:nowrap}
.t-est td:first-child{text-align:left;white-space:normal;font-weight:600}
.t-est td.bar{width:22%}.t-est td.bar i{display:block;height:8px;border-radius:4px;background:var(--lit)}
.cols{display:flex;gap:8px;align-items:flex-end;height:150px;padding-top:6px}
.cols div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;min-width:0}
.cols .v{width:70%;max-width:46px;background:var(--lit);border-radius:6px 6px 0 0}
.cols b{font-size:12px;margin-top:4px}
.cols small{font-size:11px;color:var(--mute);text-align:center;line-height:1.2}
@media (max-width:360px){.t-est{font-size:12px}.t-est td.bar{display:none}.t-est th:nth-child(2){display:none}}
.t-est td.bar{min-width:56px;padding-left:8px}

/* Itinerarios: vídeo, índice y navegación entre apartados */
.video{position:relative;aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;margin:6px 0 14px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.intro-it{text-align:center;margin-top:8px}
.indice{list-style:none;margin:14px 0 0;padding:0}
.indice li{margin:0 0 8px}
.indice a{display:flex;gap:12px;align-items:center;background:var(--card);border-radius:14px;padding:12px 14px;text-decoration:none;color:var(--ink);font-weight:700;font-size:15px}
.indice a span{flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--soft);color:var(--lit-txt);font-size:13px;font-weight:800}
@media (hover:hover){.indice a:hover{box-shadow:0 4px 14px #00000014}}
.pasos{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:14px;border-top:1px solid var(--line);font-size:13.5px;font-weight:700}
.pasos a{color:var(--lit-txt);text-decoration:none;max-width:48%}
.pasos a:last-child{text-align:right}

/* Barra inferior oculta; aparece al tocar el logo */
.tab{transition:transform .22s ease,opacity .22s ease}
body.sin-barra .tab{transform:translate(-50%,calc(100% + 30px));opacity:0;pointer-events:none}
body.sin-barra main{padding-bottom:48px}
body.sin-barra .mini{bottom:calc(16px + env(safe-area-inset-bottom))}
body.sin-barra .panel-n{bottom:calc(16px + env(safe-area-inset-bottom))}
.top .logo{cursor:pointer;transition:box-shadow .15s}
.top .logo[aria-expanded="true"]{box-shadow:0 0 0 2px var(--lit)}
.aviso-logo{position:fixed;top:calc(64px + env(safe-area-inset-top));left:max(16px,calc(50% - 264px));z-index:9;background:var(--ink);color:var(--bg);font-size:13px;font-weight:600;padding:8px 12px;border-radius:12px;box-shadow:0 6px 18px #0003;animation:aparece .2s}
.aviso-logo::before{content:"";position:absolute;top:-6px;left:16px;border:6px solid transparent;border-top:0;border-bottom-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.tab{transition:none}}
.top .logo{position:relative;z-index:10}
/* Aviso «Menú desplegable»: fondo semitransparente */
.aviso-logo{background:rgba(11,31,51,.55);color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 4px 14px #0002}
.aviso-logo::before{border-bottom-color:rgba(11,31,51,.55)}

/* Aviso «Menú desplegable»: compacto bajo el logo; mientras se ve, el contenido baja para no taparse */
.aviso-logo{top:calc(62px + env(safe-area-inset-top));font-size:12px;padding:5px 10px;border-radius:10px;line-height:1.2}
main{transition:padding-top .25s ease}
body.con-aviso main{padding-top:30px}

/* Página del puntero: subir puntos */
.btn-lect{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:2px solid var(--lit);background:var(--card);color:var(--lit-txt);border-radius:16px;padding:13px;font:inherit;font-weight:800;font-size:15px;cursor:pointer;margin:2px 0 16px}
.btn-lect svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.form-puntos label{margin-top:6px}
.ayuda{margin:-2px 2px 8px;font-size:13px;line-height:1.45;color:var(--mute)}
.form textarea.corta{min-height:90px}
.contador{text-align:right;font-size:11.5px;color:var(--mute);margin:4px 2px 0}
/* Ventana emergente de lecturas */
.emergente{position:fixed;z-index:20;inset:max(16px,env(safe-area-inset-top)) 12px 12px;margin:0 auto;max-width:600px;background:var(--bg);border-radius:22px;box-shadow:0 12px 40px #0005;display:flex;flex-direction:column;overflow:hidden;animation:aparece .18s}
.emergente .cont-e{overflow:auto;padding:16px 18px 30px;flex:1}
.cerrar-e{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:50%;border:none;background:var(--chip);color:var(--ink);font-size:16px;cursor:pointer;box-shadow:0 1px 4px #0002}
.emergente .rd h2{padding:0 34px}
#veloL{z-index:19}
body.sin-scroll{overflow:hidden}
/* Frase clave (opción 1): relleno del color litúrgico, cursiva, sin negrita ni comillas */
.frase-clave{margin:6px 0 20px;padding:18px 20px;border-radius:18px;background:var(--lit);color:var(--lit-on);text-align:center}
.frase-clave p{margin:0;font-family:Literata,serif;font-style:italic;font-size:calc(var(--fs) + 2px);line-height:1.45;font-weight:600}

/* Logo principal: siempre con borde del color litúrgico (claro y oscuro); al abrir el menú, además, fondo suave */
.top .logo{box-shadow:0 0 0 2px var(--lit),0 1px 3px #0001}
.top .logo[aria-expanded="true"]{box-shadow:0 0 0 3px var(--lit);background:var(--soft)}

.frase-clave p{font-weight:400}

/* Puntos de oración: texto justificado y con guiones */
.rd .txt.justif p,.rd .txt.justif li{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
/* Recuadro de los puntos: se agranda arrastrando la esquina inferior derecha */
.redim{position:relative}
.redim textarea{display:block;resize:vertical;min-height:220px}
.asa-redim{position:absolute;right:2px;bottom:2px;width:26px;height:26px;cursor:ns-resize;touch-action:none;border-radius:0 0 12px 0;
  background:linear-gradient(135deg,transparent 0 46%,var(--mute) 46% 52%,transparent 52% 62%,var(--mute) 62% 68%,transparent 68% 78%,var(--mute) 78% 84%,transparent 84%);opacity:.7}
.redim textarea{resize:none}

/* Constancia del puntero */
.constancia .cifra{margin:4px 0 10px;font-size:15px}
.constancia .cmp{display:grid;grid-template-columns:150px 1fr 48px;gap:8px;align-items:center;font-size:13px;margin:6px 0}
.constancia .cmp i{height:12px;border-radius:6px;background:var(--chip);overflow:hidden;display:block}
.constancia .cmp b{display:block;height:100%;background:var(--mute);border-radius:6px}
.constancia .cmp b.yo{background:var(--lit)}
.constancia .cmp em{font-style:normal;font-weight:800;text-align:right}
.constancia .vis-tot{margin-top:14px}
.constancia .ayuda{margin:10px 0 0}
.dia .d3.vis{color:var(--mute)}
@media (max-width:360px){.constancia .cmp{grid-template-columns:110px 1fr 42px}}
.panel.constancia{margin-top:14px}

/* ¡GRACIAS! del puntero, como escrito a mano */
.gracias{font-family:Caveat,"Segoe Script","Bradley Hand","Comic Sans MS",cursive;font-size:56px;font-weight:700;line-height:1;text-align:center;color:var(--lit-txt);margin:4px 0 10px;transform:rotate(-3deg);animation:aparece .4s}
/* Histórico del puntero */
.dia.futuro{background:color-mix(in srgb,var(--lit) 12%,transparent);border-color:color-mix(in srgb,var(--lit) 45%,transparent)}
.dia.futuro .d2{color:var(--lit-txt);font-weight:700}
.dia.mas{display:grid;place-items:center;background:transparent;border:2px dashed color-mix(in srgb,var(--lit) 35%,transparent);color:var(--lit-txt);font-size:24px;font-weight:800;letter-spacing:.1em}
/* Calendario del mes (administrador) */
.mes-nav{display:flex;align-items:center;justify-content:space-between;margin:4px 0 10px}
.mes-nav b{font-size:17px}
.cal-mes{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-mes .dsem{text-align:center;font-size:11px;font-weight:800;color:var(--mute);padding-bottom:2px}
.cel{min-height:74px;border-radius:10px;padding:4px 4px 5px;text-decoration:none;color:var(--ink);background:var(--card);border:2px solid transparent;display:flex;flex-direction:column;gap:2px;overflow:hidden}
.cel.vacia{background:transparent}
.cel .n{font-weight:800;font-size:13px}
.cel .q{font-size:9.5px;line-height:1.15;color:var(--ink);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.cel .q.sin{color:#b3261e;font-style:italic}
.cel.ok{border-color:color-mix(in srgb,#1e8e3e 55%,transparent);background:color-mix(in srgb,#1e8e3e 8%,var(--card))}
.cel.falta{border-color:color-mix(in srgb,#b3261e 45%,transparent)}
.cel.futuro{background:color-mix(in srgb,var(--lit) 10%,var(--card));border-color:color-mix(in srgb,var(--lit) 35%,transparent)}
.cel.hoy{box-shadow:0 0 0 2px var(--lit-txt) inset}
@media (min-width:520px){.cel{min-height:86px;padding:6px}.cel .q{font-size:11px}}
.leyenda-cal i{display:inline-block;width:11px;height:11px;border-radius:3px;vertical-align:-1px;margin:0 3px 0 6px;border:2px solid}
.leyenda-cal i:first-child{margin-left:0}
.leyenda-cal .c-ok{border-color:#1e8e3e}.leyenda-cal .c-falta{border-color:#b3261e}.leyenda-cal .c-fut{border-color:var(--lit)}
.cel .q{word-break:normal;overflow-wrap:normal;hyphens:auto;-webkit-hyphens:auto;font-size:9px}
@media (min-width:520px){.cel .q{font-size:11px}}

/* ===== Menú en burbuja desde el logo (sustituye a la barra inferior) ===== */
.tab{bottom:auto;transform:none;left:16px;top:70px;border-radius:20px;padding:10px 14px;z-index:12;transform-origin:var(--cola,22px) 0;
  transition:transform .18s ease,opacity .18s ease;box-shadow:0 12px 34px #0003}
.tab::before{content:"";position:absolute;top:-7px;left:var(--cola,14px);width:16px;height:16px;background:var(--card);transform:rotate(45deg);border-radius:3px}
body.sin-barra .tab{transform:scale(.85) translateY(-6px);opacity:0;pointer-events:none}
body.sin-barra main{padding-bottom:48px}
main{padding-bottom:48px}
.mini{bottom:calc(16px + env(safe-area-inset-bottom))}
.panel-u{bottom:calc(16px + env(safe-area-inset-bottom))}
.panel-n{bottom:calc(16px + env(safe-area-inset-bottom))}

/* ===== Velo traslúcido detrás de cualquier menú, diálogo o ventana ===== */
.velo-u,#veloL{background:rgba(8,12,20,.38);-webkit-backdrop-filter:blur(4px) saturate(.9);backdrop-filter:blur(4px) saturate(.9)}
#veloMenu{z-index:11}
#veloFecha{z-index:4}
.top .logo{z-index:13}

/* ===== Opción seleccionada en TODOS los menús: sin relleno, borde y texto del color litúrgico ===== */
.seg button.on,.rd .seg button.on,.seg-or button.on,.seg-sub button.on,.panel-u .seg button.on,.fnota .seg button.on,.panel .seg button.on{
  background:transparent;color:var(--lit);box-shadow:inset 0 0 0 2px var(--lit);border-color:transparent}
.seg-sub button.on{border-color:var(--lit);box-shadow:none}

/* ===== Títulos de apartado y enlaces de Información en el color del tiempo litúrgico ===== */
.rd h3{color:var(--lit)}
.info a{color:var(--lit);font-weight:700}

/* Examen de la oración: pasos numerados */
.pasos-ex{list-style:none;margin:18px 0 8px;padding:0}
.pasos-ex>li{display:flex;gap:12px;align-items:flex-start;background:var(--card);border-radius:18px;padding:14px 14px 4px;margin-bottom:10px}
.pasos-ex .num{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:14px;color:var(--lit);box-shadow:inset 0 0 0 2px var(--lit);margin-top:2px}
.pasos-ex>li>div{flex:1;min-width:0}
.pasos-ex .ap{text-align:left;margin:2px 0 6px}
.pasos-ex .txt p{margin-bottom:10px}
.pasos-ex ul{list-style:disc}

/* Globo «¡Novedad!» (mismo estilo que el aviso del menú) */
.velo-nov{z-index:14}
.globo-nov{position:fixed;z-index:15;background:rgba(11,31,51,.86);color:#fff;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:16px;padding:12px 14px;box-shadow:0 10px 30px #0004;font-size:14px;line-height:1.45;display:flex;flex-direction:column;gap:4px;animation:aparece .2s}
.globo-nov b{font-family:Caveat,"Segoe Script","Bradley Hand",cursive;font-size:24px;line-height:1;color:var(--lit)}
.globo-nov button{align-self:flex-end;margin-top:6px;border:none;border-radius:10px;padding:6px 12px;font:inherit;font-weight:800;font-size:13px;background:var(--lit);color:var(--lit-on);cursor:pointer}
.globo-nov::before{content:"";position:absolute;left:var(--cola,24px);width:14px;height:14px;background:rgba(11,31,51,.86);transform:rotate(45deg)}
.globo-nov.abajo::before{top:-7px}.globo-nov.arriba::before{bottom:-7px}
.resalte-nov{position:relative;z-index:15;box-shadow:0 0 0 3px var(--lit),0 8px 24px #0003 !important}
/* Notas: plantilla del Examen de la oración (5 apartados con espacio para escribir) */
.fnota .plantilla{display:flex;flex-direction:column;gap:8px;margin:0 0 8px}
.fnota .ap-n{display:flex;flex-direction:column;gap:3px}
.fnota .ap-n span{font-size:13px;font-weight:700;color:var(--lit-txt)}
.fnota .nt-p{min-height:52px;resize:vertical}
.fnota .plantilla + .nt{min-height:60px}
.panel-n .fnota .plantilla + .nt{min-height:60px}
/* Estudio de uso: registrados y punteros */
.t-est .band{font-size:15px}
.t-punt td:first-child a{color:var(--lit-txt);text-decoration:none;font-weight:700}
.t-punt td small.sin{color:#b3261e;font-weight:600;font-size:11px}
.t-punt td{white-space:normal}
.dia.otro{border-color:color-mix(in srgb,var(--mute) 40%,transparent)}.dia.otro .d2{color:var(--mute);font-weight:700}
.kpis + .kpis{margin-top:-4px}
@media (max-width:360px){.t-punt{font-size:12px}.t-punt th:nth-child(2),.t-punt td:nth-child(2){display:none}.t-punt th,.t-punt td{padding-left:2px;padding-right:2px}}
/* Menú del logo en VERTICAL: una opción por línea (icono + texto), saliendo del logo */
.tab{flex-direction:column;align-items:stretch;gap:2px;padding:8px;min-width:172px;font-size:15px}
.tab a{flex-direction:row;align-items:center;justify-content:flex-start;gap:12px;min-width:0;padding:9px 12px;border-radius:12px;color:var(--ink)}
.tab a svg{width:22px;height:22px;flex:none;color:var(--lit-txt)}
.tab a.on{background:transparent;box-shadow:inset 0 0 0 2px var(--lit);color:var(--lit-txt);font-weight:700}
.tab a.on::after{display:none}
.tab .usr-ic{width:30px;height:30px;margin:0 -4px;flex:none}
.tab .usr-ic svg{width:17px;height:17px}
.tab a + a{margin-top:2px}
/* Menú del logo: solo iconos, en columna */
.tab{min-width:0;width:auto;padding:6px;gap:4px}
.tab a{justify-content:center;width:46px;height:46px;padding:0;gap:0;border-radius:14px}
.tab a svg{width:24px;height:24px}
.tab .usr-ic{width:32px;height:32px;margin:0}
.tab a + a{margin-top:0}
/* Texto corrido JUSTIFICADO en todas las secciones; solo las oraciones en verso (Inicio de la oración) van centradas */
.rd .txt p:not(.versos),.rd .txt li,.intro-it p,.panel.info,.nota-it .txt p{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
.rd .txt p.versos{text-align:center;hyphens:manual;-webkit-hyphens:manual}
/* Títulos dentro de cada sección: centrados y en el color del tiempo litúrgico */
.rd h3,.ap h3,.panel.info h3{text-align:center;color:var(--lit)}
.pasos-ex .ap{text-align:center}
/* Recorrido de la primera vez (mismo globo que «¡Novedad!») */
.velo-tour{z-index:14}
.globo-tour{z-index:17}
.globo-tour b{font-size:26px}
.globo-tour.sin-cola::before{display:none}
.pie-tour{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.puntos-tour{display:flex;gap:5px;flex-wrap:wrap}
.puntos-tour i{width:7px;height:7px;border-radius:50%;background:#ffffff55}
.puntos-tour i.on{background:var(--lit)}
.btns-tour{display:flex;gap:6px}
.globo-tour .btns-tour button{margin:0;align-self:auto}
.globo-tour .btns-tour button.ant,.globo-tour .btns-tour button.saltar{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.5px #ffffff66}
.acc-tour{display:flex;flex-direction:column;gap:8px}
.globo-tour span b{font-family:inherit;font-size:inherit;line-height:inherit;color:inherit;font-weight:800}
.puntos-tour{gap:4px}.puntos-tour i{width:6px;height:6px}
.top .logo.resalte-nov,.resalte-nov{z-index:15 !important}
/* Puntos tomados de la web (octubre de 2026) */
.fuente-web{font-size:13px;color:var(--mute);font-style:italic;text-align:center;margin:18px 0 0}
.fuente-web a{color:var(--lit)}
.cel.web{background:color-mix(in srgb,var(--mute) 10%,var(--card));border-color:color-mix(in srgb,var(--mute) 30%,transparent)}
.cel.web .q{color:var(--mute);font-style:italic}
/* Santo del día, bajo el tiempo litúrgico y la semana */
.fecha-txt small.santo{font-family:Literata,serif;font-style:italic;color:var(--lit-txt);font-size:12.5px;line-height:1.25;margin-top:3px;max-width:210px;margin-left:auto}
/* Navegación de las secciones: «‹» y «Aa» arriba a la derecha, a la altura del logo (diseño 4) */
.nav-sec{display:flex;justify-content:flex-end;align-items:center;gap:10px;position:relative;height:44px}
.nav-sec .circ{width:44px;height:44px;border-radius:50%;background:var(--chip);border:none;display:grid;place-items:center;color:var(--ink);text-decoration:none;cursor:pointer;padding:0}
.nav-sec .circ svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.nav-sec .aa{font-family:Literata,serif;font-weight:600;font-size:18px}
.nav-sec .aa[aria-expanded="true"]{box-shadow:0 0 0 2px var(--lit)}
.nav-sec .pop-aa{position:absolute;right:0;top:56px;background:var(--card);border-radius:16px;box-shadow:0 8px 24px #0003;display:flex;gap:6px;padding:6px;z-index:12;animation:aparece .15s}
.nav-sec .pop-aa[hidden]{display:none}
.nav-sec .pop-aa::before{content:"";position:absolute;top:-6px;right:16px;width:12px;height:12px;background:var(--card);transform:rotate(45deg)}
.nav-sec .pop-aa button{position:relative;width:52px;height:42px;border-radius:12px;border:none;background:var(--chip);color:var(--ink);font:800 15px Manrope,sans-serif;cursor:pointer}
@media (hover:hover){.nav-sec .circ:hover,.nav-sec .pop-aa button:hover{filter:brightness(.95)}}
/* «Aa» se despliega en horizontal: A− y A+ aparecen entre «‹» y «Aa», en la misma línea (sin tapar el título) */
.nav-sec .pop-aa{position:static;top:auto;right:auto;background:none;box-shadow:none;padding:0;gap:8px;display:flex;animation:abreAa .18s ease-out}
.nav-sec .pop-aa::before{display:none}
.nav-sec .pop-aa[hidden]{display:none}
.nav-sec .pop-aa button{width:44px;height:44px;border-radius:50%;background:var(--card);box-shadow:0 0 0 2px var(--lit);color:var(--ink);font:800 14px Manrope,sans-serif}
@keyframes abreAa{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.nav-sec .pop-aa{animation:none}}
/* Lecturas: cabecera en ficha suave (diseño 7): «1ª lectura  Gal 1, 13-24» + botón de escuchar a la derecha */
.rd .ficha-l{display:flex;align-items:center;gap:10px;background:color-mix(in srgb,var(--lit) 9%,transparent);border-radius:16px;padding:10px 10px 10px 14px;margin:16px 0 14px}
.rd .ficha-l .tit-l{flex:1;min-width:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:10px;row-gap:0}
.rd .ficha-l h3{margin:0;text-align:left;white-space:nowrap}
.rd .ficha-l .ref-l{font-family:Literata,serif;font-style:italic;color:var(--mute);font-size:calc(var(--fs) - 2px);white-space:nowrap}
.rd .ficha-l .listen{flex:none;margin:0}
.emergente .ficha-l{margin-top:6px}
/* Botones de tamaño de letra sin borde de color: mismo estilo gris que «‹» y «Aa» */
.nav-sec .pop-aa button{background:var(--chip);box-shadow:none}
.nav-sec .aa[aria-expanded="true"]{box-shadow:none;filter:brightness(.93)}
/* Lecturas: el salmo, centrado (no justificado) */
.rd .txt.salmo p,.emergente .txt.salmo p{text-align:center;hyphens:manual;-webkit-hyphens:manual}