@font-face{font-family:"Merriweather";font-weight:700;font-style:italic;font-display:swap;src:url(/fonts/merriweather-latin-700-italic.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:400;font-display:swap;src:url(/fonts/open-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Open Sans";font-weight:700;font-display:swap;src:url(/fonts/open-sans-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:400;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-weight:700;font-display:swap;src:url(/fonts/atkinson-hyperlegible-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-weight:400;font-display:swap;src:url(/fonts/lexend-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-weight:700;font-display:swap;src:url(/fonts/lexend-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Merriweather";font-weight:400;font-display:swap;src:url(/fonts/merriweather-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Merriweather";font-weight:700;font-display:swap;src:url(/fonts/merriweather-latin-700-normal.woff2) format("woff2")}
*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;font:16px system-ui,sans-serif;background:#f4f5f7;color:#1c2330}
main{max-width:900px;margin:0 auto;padding:1rem}
button,.btn{font:inherit;padding:.55em 1em;border:0;border-radius:8px;background:#2f5fd0;color:#fff;cursor:pointer;text-decoration:none;display:inline-block}
button.sec{background:#e1e5ec;color:#1c2330}button.del{background:#c0392b}button:disabled{opacity:.45;cursor:not-allowed}
input{font:inherit;padding:.5em;border:1px solid #c5cbd6;border-radius:8px;max-width:100%}
.card{background:#fff;border-radius:12px;padding:1rem;margin:.6rem 0;box-shadow:0 1px 3px #0001}
.row{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.between{justify-content:space-between}.grow{flex:1;min-width:0}
.muted{color:#667085}.err{color:#c0392b}
.bar{height:6px;background:#dde1e8;border-radius:3px;overflow:hidden;margin:.5rem 0}.bar>i{display:block;height:100%;background:#2f5fd0}
.stage{background:#fff;border-radius:12px;padding:1rem;min-height:60vh;display:flex;flex-direction:column}
.stage h2{margin:.1em 0 .6em}.stage img{max-width:100%;max-height:68vh;object-fit:contain;margin:auto}
.stage embed{width:100%;height:68vh;border:0;border-radius:8px}
body.full main{max-width:none}body.full .stage{min-height:84vh}body.full .stage img,body.full .stage embed{max-height:76vh;height:76vh}
.thumb{width:64px;height:48px;object-fit:cover;border-radius:6px;background:#dde1e8;display:grid;place-items:center;font-size:.75rem}
/* Himno: recuadro 16:9 con el texto fijo; color y fondo los pone cada persona */
main{max-width:1100px}
.stage.hym{background:none;padding:0;min-height:0}
.hs{container-type:size;aspect-ratio:16/9;width:min(100%,calc((100vh - 190px)*16/9));margin:0 auto;background:#fff center/cover no-repeat;color:#000;display:flex;flex-direction:column;padding:4% 7%;border-radius:8px;box-shadow:0 1px 3px #0003;overflow:hidden}
.hh{display:flex;justify-content:space-between;font-size:2.3cqw;border-bottom:.15cqw solid currentColor;padding-bottom:1.2cqw}
.hb{flex:1;display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
.hl p{margin:0;padding:0 .15em;text-align:center;white-space:nowrap;line-height:1.45}
/* contorno por fuera de la letra (la línea se pinta detrás del relleno, así no adelgaza el texto) */
.hs.cn .hl,.hs.cn .hh{-webkit-text-stroke:.12em var(--co);paint-order:stroke fill;stroke-linejoin:round}
:fullscreen main{max-width:none}
:fullscreen .hs{width:min(100%,calc((100vh - 110px)*16/9))}
.buscar{position:sticky;top:0;z-index:2;background:#f4f5f7;padding:.5rem 0}
.buscar input{width:100%;font-size:1.05rem}
a.item{color:inherit;text-decoration:none}a.item:hover,a.item:focus-visible{outline:2px solid #2f5fd0}
a{color:#2f5fd0}
/* Pantalla secundaria (popup): solo el recuadro, centrado sobre negro */
body.proy{background:#000;overflow:hidden}
body.proy main{max-width:none;padding:0}
.pj{width:100vw;height:100vh;display:flex;align-items:center;justify-content:center}
.pj .hs{width:min(100vw,calc(100vh*16/9));border-radius:0;box-shadow:none}
.pj img{max-width:100vw;max-height:100vh;object-fit:contain}.pj embed{width:100vw;height:100vh;border:0}
.pj-fs{position:fixed;right:12px;bottom:12px;opacity:.8}
:fullscreen .pj-fs{display:none}:fullscreen body.proy{cursor:none}
/* Pantalla completa de la ventana principal: solo el slide, sobre negro; avanza con flechas o clics */
:fullscreen body:not(.proy){background:#000}
:fullscreen .ui{display:none!important}
:fullscreen main{padding:0}
:fullscreen .stage{background:#000;padding:0;border-radius:0;min-height:100vh;justify-content:center;cursor:pointer}
:fullscreen .stage h2{display:none}
:fullscreen .stage .hs{width:min(100vw,calc(100vh*16/9));border-radius:0;box-shadow:none}
:fullscreen .stage img{max-width:100vw;max-height:100vh}
:fullscreen .stage embed{width:100vw;height:100vh;max-height:none;border-radius:0}
.aviso{display:none}
:fullscreen .aviso:not(:empty){display:block;position:fixed;bottom:14px;left:50%;transform:translateX(-50%);background:#000b;color:#fff;padding:.4em .9em;border-radius:8px;z-index:5}
body.quieto,body.quieto .stage{cursor:none}
/* Música del himno (YouTube): reproductor visible de 356x200 (mínimo permitido 200x200) con su barra */
.vid{display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.vp{width:356px;height:200px;background:#000;border-radius:8px;overflow:hidden}.vp iframe{display:block}
.vc{flex:1;min-width:230px;display:flex;flex-wrap:wrap;gap:.6rem;align-items:center}.vc input[type=range]{flex:1 1 100%}
:fullscreen .vid{position:fixed;right:14px;bottom:14px;z-index:6;margin:0}
/* Editor */
.badge{background:#c0392b;color:#fff;border-radius:6px;padding:.1em .5em;font-size:.75rem;margin-left:.5rem}
.lineas{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#667085;font-size:.9rem}
.barra{position:sticky;top:0;z-index:3}
