/* Layout: plano del salón (como la hoja) + lista de niños; en celular se apilan. */
:root{
  --bg:#f4f6fb; --surface:#ffffff; --ink:#1c2440; --muted:#5d6788; --line:#c9d0e4;
  --accent:#2b4bb0; --accent-ink:#ffffff; --gold:#e3b23c; --gold-soft:#fbefcc; --gold-ink:#5a4310;
  --teal:#1f8a7a; --teal-soft:#d9f1ec; --teal-ink:#0f4a41; --danger:#b3261e;
  --seat-empty:#ffffff; --seat-on:#e6ecff; --table:#ecebe3;
  --display:"Fredoka","Trebuchet MS",system-ui,sans-serif;
  --body:"Nunito","Segoe UI",system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#11162a; --surface:#1a2038; --ink:#e7eaf6; --muted:#9aa3c3; --line:#343c5c;
  --accent:#8ea5ff; --accent-ink:#0f1430; --gold:#e8bf55; --gold-soft:#3a3018; --gold-ink:#f3d98f;
  --teal:#5cc8b6; --teal-soft:#17352f; --teal-ink:#a9eadf; --danger:#ff8a80;
  --seat-empty:#1a2038; --seat-on:#26305a; --table:#262b40; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#11162a; --surface:#1a2038; --ink:#e7eaf6; --muted:#9aa3c3; --line:#343c5c;
  --accent:#8ea5ff; --accent-ink:#0f1430; --gold:#e8bf55; --gold-soft:#3a3018; --gold-ink:#f3d98f;
  --teal:#5cc8b6; --teal-soft:#17352f; --teal-ink:#a9eadf; --danger:#ff8a80;
  --seat-empty:#1a2038; --seat-on:#26305a; --table:#262b40; color-scheme:dark}

*{box-sizing:border-box}
html{padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:15px;line-height:1.45;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:24px 40px}
[hidden]{display:none!important}
.wrap{max-width:1440px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
header{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px}
.eyebrow{font-weight:800;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
h1{font-family:var(--display);font-weight:600;font-size:clamp(28px,4.5vw,42px);line-height:1.05;margin:4px 0 0;text-wrap:balance}
h1 em{font-style:normal;color:var(--accent)}
.actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
button,input,select{font:inherit}
button{cursor:pointer}
.btn{border:1.5px solid var(--line);background:var(--surface);color:var(--ink);border-radius:999px;padding:9px 16px;font-weight:700}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);padding:11px 22px;font-size:16px}
.btn.danger{color:var(--danger);border-color:var(--danger)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:focus-visible,.seat:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.status{font-size:14px;color:var(--muted);min-height:1.4em}
.status.err{color:var(--danger);font-weight:700}
.confirm{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--gold-soft);color:var(--gold-ink);border-radius:12px;padding:10px 14px;font-weight:700}

/* Kinder A | plano | Kinder B */
.main{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);grid-template-areas:"a plan b";gap:20px;align-items:start}
.main .plan{grid-area:plan}
.main .list-a{grid-area:a}
.main .list-b{grid-area:b}
@media (max-width:1100px){.main{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"plan plan" "a b"}}
@media (max-width:640px){.main{grid-template-columns:minmax(0,1fr);grid-template-areas:"plan" "a" "b"}}

.plan{background:var(--surface);border:1.5px solid var(--line);border-radius:18px;padding:18px 12px 20px;display:flex;flex-direction:column;gap:14px;align-items:center}
.plan-head{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;padding-inline:6px;gap:8px}
.plan-head strong{font-family:var(--display);font-weight:600;font-size:18px}
.plan-head span{font-size:13px;color:var(--muted)}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--muted);justify-content:center}
.legend i{display:inline-block;width:12px;height:12px;border-radius:50%;border:2px solid;vertical-align:-2px;margin-right:5px}
.legend .l-on{background:var(--seat-on);border-color:var(--accent)}
.legend .l-dir{background:var(--gold-soft);border-color:var(--gold)}
.legend .l-res{background:var(--teal-soft);border-color:var(--teal)}
.floor{--s:clamp(50px,12.5vw,74px);--rows:9;display:grid;
  grid-template-columns:var(--s) var(--s) clamp(56px,16vw,150px) var(--s) var(--s);
  grid-template-rows:auto repeat(var(--rows),var(--s));column-gap:clamp(6px,2vw,18px);row-gap:clamp(6px,1.2vw,10px);max-width:100%}
.front{grid-column:2/5;grid-row:1;background:var(--gold);color:#3b2a05;border-radius:4px;text-align:center;font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;padding:5px 0;margin-bottom:8px}
.table{grid-column:3;grid-row:2/span 9;background:var(--table);border:1.5px solid var(--line);border-radius:4px}
.seat{width:var(--s);height:var(--s);border-radius:50%;border:2px solid var(--line);background:var(--seat-empty);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;position:relative;transition:transform .18s,background .2s,border-color .2s}
.seat .n{position:absolute;top:-6px;right:-6px;background:var(--bg);color:var(--muted);border:1.5px solid var(--line);border-radius:999px;font-size:10px;font-weight:800;min-width:20px;padding:0 4px;line-height:16px;font-variant-numeric:tabular-nums}
.seat .code{font-family:var(--display);font-weight:600;font-size:clamp(14px,3.6vw,20px);line-height:1;font-variant-numeric:tabular-nums}
.seat .code.two{font-size:clamp(11px,2.8vw,14px);line-height:1.1;text-align:center}
.seat .empty{font-size:12px;color:var(--muted)}
.seat.on{background:var(--seat-on);border-color:var(--accent)}
.seat.dir{background:var(--gold-soft);border-color:var(--gold);color:var(--gold-ink)}
.seat.res{background:var(--teal-soft);border-color:var(--teal);color:var(--teal-ink)}
.seat.flick{border-color:var(--gold);transform:scale(1.08)}
.seat.sel{outline:3px solid var(--accent);outline-offset:3px}
.seat.land{animation:land .35s ease-out}
@keyframes land{0%{transform:scale(1.25)}100%{transform:scale(1)}}
.detail{width:100%;min-height:58px;background:var(--bg);border-radius:12px;padding:10px 14px;font-size:14px;display:flex;flex-direction:column;gap:8px}
.detail b{font-family:var(--display);font-weight:600;font-size:16px}
.muted{color:var(--muted)}

.list{display:flex;flex-direction:column;gap:18px;min-width:0}
.group h2{font-family:var(--display);font-weight:600;font-size:20px;margin:0 0 8px;display:flex;justify-content:space-between;align-items:baseline}
.group h2 small{font-family:var(--body);font-size:13px;color:var(--muted);font-weight:600}
ol.kids{list-style:none;margin:0;padding:0;background:var(--surface);border:1.5px solid var(--line);border-radius:14px;overflow:hidden}
.kid{display:grid;grid-template-columns:44px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 12px;border-top:1px solid var(--line);cursor:pointer}
.kid:first-child{border-top:0}
.kid:hover{background:var(--bg)}
.kid .num{font-family:var(--display);font-weight:600;color:var(--accent);font-variant-numeric:tabular-nums}
.kid .who{min-width:0}
.kid .name{font-weight:700;overflow-wrap:anywhere}
.kid .tutor{font-size:12.5px;color:var(--muted)}
.kid .mesa{font-size:12px;font-weight:800;border-radius:999px;padding:3px 10px;background:var(--bg);color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.kid .mesa.on{background:var(--accent);color:var(--accent-ink)}
.kid .mesa.dir{background:var(--gold);color:#3b2a05}
.kid .mesa.res{background:var(--teal);color:var(--surface)}
.note{font-size:13px;color:var(--muted)}
.note b{color:var(--ink)}
@media (prefers-reduced-motion:reduce){.seat{transition:none}.seat.land{animation:none}}