:root{--fs:22px;--fondo:#faf7f2;--tinta:#1c1a17;--acento:#26418f;--suave:#e9e2d6;--carta:#fff}
@media (prefers-color-scheme:dark){:root{--fondo:#14161f;--tinta:#eae6df;--acento:#8fa8e8;--suave:#242836;--carta:#1b1e2b}}
*{box-sizing:border-box;margin:0}
body{font:var(--fs)/1.45 Georgia,'Times New Roman',serif;background:var(--fondo);color:var(--tinta)}
main{max-width:560px;margin:0 auto;padding:16px 16px 130px}
.centro{text-align:center;padding-top:8vh}
h1{font-size:1.6em;margin-bottom:.3em}
h2{font-size:1.15em;margin:.6em 0 .3em}
h3,h4{font-size:1em;margin:.5em 0 .2em}
.sub{opacity:.7;font-size:.8em}
label{display:block;margin:14px 0;text-align:left}
input,textarea,select{width:100%;font:inherit;padding:12px;border:2px solid var(--suave);border-radius:10px;background:var(--carta);color:inherit;margin-top:6px}
.btn{display:block;width:100%;font:inherit;font-weight:bold;padding:18px;margin:18px 0;border:0;border-radius:14px;background:var(--acento);color:#fff;cursor:pointer}
.btn.sec{background:transparent;color:var(--acento);border:2px solid var(--acento)}
.btn.grande{font-size:1.2em;padding:22px}
.mini{font:inherit;font-size:.75em;padding:8px 12px;border:1px solid var(--suave);border-radius:8px;background:var(--carta);color:inherit;cursor:pointer}
.cab{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--suave);margin-bottom:12px}
.cab.min{font-size:.8em;opacity:.9}
.cod{letter-spacing:.15em}
.lista{list-style:none;padding:0}
.lista li{padding:8px 4px;border-bottom:1px solid var(--suave);display:flex;gap:6px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.lista .txt{flex:1}
.parte{border-left:6px solid var(--suave);padding:12px 14px;margin:14px 0;border-radius:0 12px 12px 0;background:var(--carta)}
.parte.p1{border-color:var(--acento)}
.rol{display:block;font-size:.65em;font-weight:bold;letter-spacing:.08em;color:var(--acento);margin-bottom:6px;font-family:system-ui,sans-serif}
.denario{display:flex;gap:8px;justify-content:center;margin:10px 0}
.cuenta{width:20px;height:20px;border-radius:50%;border:2px solid var(--acento)}
.cuenta.llena{background:var(--acento)}
figure{margin:0 0 12px}
figure img{width:100%;border-radius:12px;max-height:46vh;object-fit:contain}
figcaption{font-size:.65em;opacity:.6;text-align:right}
.mis{text-align:center}
.med{font-style:italic;margin:10px 0}
.cita{font-size:.75em;opacity:.7;text-align:right}
.pie{position:fixed;left:0;right:0;bottom:0;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:var(--fondo);border-top:1px solid var(--suave)}
.pie-int{display:flex;gap:10px;align-items:center;max-width:560px;margin:0 auto}
.pie .btn{margin:0;flex:1}
.espera{flex:1;text-align:center;opacity:.7}
.guia{border:2px dashed var(--acento);border-radius:14px;padding:12px;margin-top:18px}
.fila{display:flex;gap:8px;align-items:center}
.fuente button{font-size:16px;padding:6px 10px;margin-left:4px;border:1px solid var(--suave);border-radius:8px;background:var(--carta);color:inherit}
.aviso{position:fixed;top:14px;left:50%;transform:translateX(-50%);background:var(--acento);color:#fff;padding:10px 18px;border-radius:10px;font-family:system-ui;font-size:16px;z-index:9}
hr{border:0;border-top:1px solid var(--suave);margin:22px 0}

.velo{position:fixed;inset:0;background:rgba(0,0,0,.55);display:flex;align-items:center;justify-content:center;z-index:20;padding:16px}
.velo-caja{background:var(--fondo);border-radius:16px;padding:20px;max-width:420px;width:100%;max-height:90vh;overflow:auto}
.qr{background:#fff;border-radius:12px;padding:14px;margin:12px auto;max-width:320px}
.qr svg{display:block;width:100%;height:auto}
@keyframes entra{from{opacity:.25;transform:translateY(10px)}to{opacity:1;transform:none}}
.rezo .parte,.rezo figure,.rezo .mis{animation:entra .35s ease-out}
@keyframes pulso{0%{transform:scale(1)}35%{transform:scale(1.7)}100%{transform:scale(1)}}
.cuenta.nueva{animation:pulso 1.1s ease-out}