/* Verde inglés en ambos temas. Estilo: fondo claro, banner con degradé, tarjetas verdes redondeadas, botones y chips en píldora, títulos DM Sans en negrita. */
:root{
  --bg:#ffffff; --surface:#ffffff; --tint:#eaf2ed; --fg:#1e1e1e; --muted:#4e5f55; --line:#cfddd5;
  --green:#004225; --green-deep:#002d19; --green-mid:#0d5c38; --on-green:#ffffff;
  --chip-bg:#dcebe2; --chip-fg:#004225; --accent:#004225; --on-accent:#ffffff;
  --good:#17703f; --bad:#b42318; --bad-soft:#fde8e6; --shadow:0 2px 8px rgba(0,45,25,.18);
  --font-head:"DM Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:Roboto,system-ui,-apple-system,"Segoe UI",sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0a1510; --surface:#10201a; --tint:#14291f; --fg:#e9f2ed; --muted:#a2b8ab; --line:#25392f;
    --green:#0c4a2c; --green-deep:#04271a; --green-mid:#136a40; --on-green:#ffffff;
    --chip-bg:#1b3a2a; --chip-fg:#a5dcbb; --accent:#2a8559; --on-accent:#ffffff;
    --good:#4cc283; --bad:#ff8a80; --bad-soft:#3a1f1d; --shadow:0 2px 8px rgba(0,0,0,.5); color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0a1510; --surface:#10201a; --tint:#14291f; --fg:#e9f2ed; --muted:#a2b8ab; --line:#25392f;
  --green:#0c4a2c; --green-deep:#04271a; --green-mid:#136a40; --on-green:#ffffff;
  --chip-bg:#1b3a2a; --chip-fg:#a5dcbb; --accent:#2a8559; --on-accent:#ffffff;
  --good:#4cc283; --bad:#ff8a80; --bad-soft:#3a1f1d; --shadow:0 2px 8px rgba(0,0,0,.5); color-scheme:dark;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:16px/1.5 var(--font-body);
  padding-block:20px 56px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main{max-width:680px;margin:0 auto;display:grid;gap:18px}
header{display:grid;gap:14px}
.hero{background:linear-gradient(120deg,var(--green-deep),var(--green) 55%,var(--green-mid));color:var(--on-green);border-radius:18px;padding:28px 24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center}
h1{margin:0;text-align:center;font:700 clamp(26px,6vw,36px)/1.12 var(--font-head);text-wrap:balance}
.lead{margin:0;font-size:16px;max-width:46ch;opacity:.92;text-align:center}
.chip{display:inline-block;font:700 11px/1 var(--font-head);letter-spacing:.07em;text-transform:uppercase;background:var(--chip-bg);color:var(--chip-fg);padding:7px 11px;border-radius:999px}
.school{display:grid;gap:4px;justify-items:center;padding-bottom:14px;margin-bottom:4px;border-bottom:1px solid rgba(255,255,255,.22);width:100%}
.school-name{margin:0;font:700 clamp(22px,6vw,32px)/1.15 var(--font-head);text-wrap:balance;text-align:center}
.school-loc{margin:0;font:500 clamp(16px,4.4vw,20px)/1.2 var(--font-head);opacity:.95}
.school-addr{margin:0;font-size:14px;opacity:.88}
.school-name span,.school-addr span{white-space:nowrap}
.counts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:340px){.counts{grid-template-columns:1fr}}
.count{background:var(--green);color:var(--on-green);border-radius:14px;padding:14px 16px;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.count b{display:block;font:700 34px/1.05 var(--font-head);font-variant-numeric:tabular-nums}
.count span{font-size:14px;opacity:.92}
nav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
nav .chip{margin-left:auto}
nav button{background:var(--tint);border:0;color:var(--chip-fg);font:700 14px var(--font-head);padding:10px 20px;border-radius:999px;cursor:pointer}
nav button[aria-selected="true"]{background:var(--green);color:var(--on-green)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px}
form{display:grid;gap:18px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:480px){.row{grid-template-columns:1fr}}
label{display:grid;gap:6px;font:500 14px var(--font-head);min-width:0}
label small{font:400 13px var(--font-body);color:var(--muted)}
input,select,textarea{width:100%;font:16px var(--font-body);padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--fg);min-width:0}
input:focus,select:focus,textarea:focus{border-color:var(--green-mid)}
fieldset{border:0;margin:0;padding:0;display:grid;gap:12px;min-width:0}
legend{padding:0;margin-bottom:10px}
.note{font-size:13px;color:var(--muted);margin:0}
button.primary{background:linear-gradient(90deg,var(--accent),var(--green-deep));color:var(--on-accent);border:0;border-radius:999px;font:700 16px var(--font-head);padding:13px 24px;cursor:pointer}
button.primary:disabled{opacity:.55;cursor:default}
button.ghost{background:var(--surface);color:var(--fg);border:1px solid var(--line);border-radius:999px;font:500 14px var(--font-head);padding:8px 16px;cursor:pointer}
button.danger{color:var(--bad);border-color:var(--bad)}
.msg{padding:11px 14px;border-radius:12px;font-size:14px;border:1px solid var(--line);background:var(--tint)}
.msg.err{background:var(--bad-soft);border-color:var(--bad);color:var(--bad)}
.msg.ok{border-color:var(--good);color:var(--good)}
.tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
.tools input{flex:1 1 220px;border-radius:999px;box-shadow:var(--shadow);padding-inline:18px}
.list{display:grid;gap:12px}
.item{border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:14px 16px;display:grid;gap:6px;min-width:0}
.item h3{margin:0;font:700 17px/1.25 var(--font-head);color:var(--chip-fg);overflow-wrap:anywhere}
.pill{display:inline-block;font:700 11px/1 var(--font-head);letter-spacing:.07em;text-transform:uppercase;background:var(--chip-bg);color:var(--chip-fg);padding:5px 9px;border-radius:999px;margin-left:8px;vertical-align:2px}
.meta{font-size:14px;color:var(--muted);margin:0}
.item ul{margin:0;padding-left:18px;font-size:15px}
.empty{color:var(--muted);text-align:center;padding:26px 8px;margin:0}
.actions{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}
[hidden]{display:none!important}
/* ---- panel de administración ---- */
.login{max-width:420px;margin:8vh auto 0}
.login form{gap:14px}
.tabs{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tabs button{background:var(--tint);border:0;color:var(--chip-fg);font:700 14px var(--font-head);padding:10px 20px;border-radius:999px;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--green);color:var(--on-green)}
.tabs .chip{margin-left:auto}
.counts4{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
table{width:100%;border-collapse:collapse;font-size:14px}
th{font:700 12px var(--font-head);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line)}
td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}
.bar{height:8px;border-radius:999px;background:var(--tint);overflow:hidden;min-width:70px}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.tablewrap{overflow-x:auto}
details{border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--surface)}
summary{cursor:pointer;font:700 15px var(--font-head);color:var(--chip-fg)}
details ul{margin:10px 0 2px;padding-left:20px;columns:2 220px}
.top{display:flex;justify-content:flex-end}
main.wide{max-width:880px}
td:first-child{white-space:nowrap}
button.ghost[aria-pressed="true"]{background:var(--chip-bg);color:var(--chip-fg);border-color:transparent}
.modos{margin-bottom:6px}
/* Fondo de la página pública: construcciones a la izquierda, electromecánica a la derecha */
body.conFondo{background:#e5ebe3 url(/fondo.jpg) center top/cover no-repeat fixed}
@media (max-width:700px){body.conFondo{background-attachment:scroll}}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) body.conFondo{background:linear-gradient(rgba(10,21,16,.86),rgba(10,21,16,.86)),#0a1510 url(/fondo.jpg) center top/cover no-repeat fixed}}
:root[data-theme="dark"] body.conFondo{background:linear-gradient(rgba(10,21,16,.86),rgba(10,21,16,.86)),#0a1510 url(/fondo.jpg) center top/cover no-repeat fixed}
.reglas{padding:14px 18px}
.reglas{padding:0 18px 14px}
.reglas summary{cursor:pointer;font:700 15px var(--font-head);color:#fff;background:var(--green);margin:0 -18px;padding:12px 18px;border-radius:15px}
.reglas[open] summary{border-radius:15px 15px 0 0;margin-bottom:12px}
.reglas ul{margin:10px 0 0;padding-left:20px;display:grid;gap:8px;font-size:14px;line-height:1.45}
.reglas li::marker{color:var(--green-mid)}
textarea{resize:vertical;min-height:90px}
h2{margin:0 0 10px;font:700 18px var(--font-head);color:var(--green)}
.cronograma ol{margin:0 0 12px;padding-left:22px;display:grid;gap:10px;font-size:14px;line-height:1.45}
.cronograma li.actual{background:var(--tint);border-left:4px solid var(--green);margin-left:-22px;padding:8px 10px 8px 18px;border-radius:0 10px 10px 0}
.cronograma li.actual::marker{color:var(--green)}
.pub details{margin:0}
.cronograma ol{margin-top:0}

/* Halloween (31 de octubre) */
body.halloween{--green:#3a1766; --green-deep:#1c0b36; --green-mid:#6a2fa0; --tint:#f3ebfa; --line:#d9c8ea; --chip-bg:#ecdcfa; --chip-fg:#3a1766; --accent:#e8590c; --on-accent:#fff; --muted:#5d4b72}
body.halloween.conFondo{background:linear-gradient(rgba(28,11,54,.78),rgba(28,11,54,.78)),#1c0b36 url(/fondo.jpg) center top/cover no-repeat fixed !important}
body.halloween .hero{background:linear-gradient(120deg,#1c0b36,#3a1766 55%,#e8590c);box-shadow:0 0 0 2px #ff8a1f inset}
body.halloween .hero h1{text-shadow:0 2px 0 rgba(0,0,0,.35)}
body.halloween button.primary{background:linear-gradient(120deg,#e8590c,#ff8a1f);color:#fff}
body.halloween .panel{border-color:#ff8a1f55;box-shadow:0 2px 14px rgba(232,89,12,.25)}
body.halloween .reglas summary,body.halloween .cronograma summary{background:linear-gradient(120deg,#3a1766,#6a2fa0)}
body.halloween::before{content:"🦇 🎃 🕸️ 👻 🎃 🦇";display:block;text-align:center;font-size:22px;letter-spacing:6px;margin:-8px 0 12px}

/* Halloween: más gráficos (decoración fija, sin interacción) */
#deco{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
main{position:relative;z-index:1}
#deco span{position:absolute;line-height:1;user-select:none}
#deco .luna{top:10px;right:14px;font-size:56px;filter:drop-shadow(0 0 18px #ffd27a)}
#deco .murci{top:70px;left:-60px;font-size:30px;animation:vuelo 16s linear infinite}
#deco .m2{top:150px;font-size:24px;animation-duration:22s;animation-delay:-8s}
#deco .m3{top:260px;font-size:34px;animation-duration:28s;animation-delay:-15s}
@keyframes vuelo{0%{transform:translate(0,0) rotate(-6deg)}25%{transform:translate(30vw,-24px) rotate(6deg)}50%{transform:translate(60vw,10px) rotate(-6deg)}75%{transform:translate(85vw,-20px) rotate(6deg)}100%{transform:translate(115vw,0) rotate(-6deg)}}
#deco .fantasma{font-size:38px;opacity:.85;animation:flota 6s ease-in-out infinite}
#deco .f1{left:6px;top:42%}#deco .f2{right:8px;top:68%;animation-delay:-3s}
@keyframes flota{0%,100%{transform:translateY(0)}50%{transform:translateY(-18px)}}
#deco .arana{top:-4px;font-size:30px;animation:cuelga 5s ease-in-out infinite;transform-origin:top center}
#deco .a1{left:18%}#deco .a2{right:22%;animation-delay:-2s;font-size:24px}
@keyframes cuelga{0%,100%{transform:translateY(0)}50%{transform:translateY(36px)}}
#deco .golo{top:-40px;font-size:26px;animation:cae 14s linear infinite}
#deco .g1{left:12%}#deco .g2{left:38%;animation-delay:-5s}#deco .g3{left:64%;animation-delay:-9s}#deco .g4{left:86%;animation-delay:-2s}
@keyframes cae{0%{transform:translateY(0) rotate(0)}100%{transform:translateY(110vh) rotate(360deg)}}
#deco .zap{bottom:6px;font-size:40px}
#deco .z1{left:10px}#deco .z2{right:70px}
#deco .tela{font-size:54px;opacity:.7}
#deco .t1{top:0;left:0}#deco .t2{top:0;right:84px;display:none}
#deco .bruja{bottom:4px;right:10px;font-size:44px;animation:flota 5s ease-in-out infinite}
.acceso .calabaza{text-align:center;font-size:84px;line-height:1;margin-bottom:6px;animation:late 2.4s ease-in-out infinite;filter:drop-shadow(0 0 14px #ff8a1f)}
@keyframes late{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
body.halloween .acceso{text-align:center}
body.halloween .acceso h2{color:#e8590c;font-size:26px}
body.halloween .acceso label{text-align:left}
@media (prefers-reduced-motion:reduce){#deco span,.acceso .calabaza{animation:none !important}}

#btnMusica{position:fixed;left:12px;bottom:12px;z-index:5;background:#1c0b36;color:#fff;border:2px solid #ff8a1f;border-radius:999px;padding:8px 14px;font:700 14px var(--font-head);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.5)}
body.halloween .cronograma li.actual{background:#3a1766;color:#fff;border-left-color:#ff8a1f}
body.halloween .cronograma li.actual::marker{color:#ff8a1f}
body.halloween .cronograma li.actual b{color:#ffb15c}