/* Light theme (default). Colour tokens only here; the dark theme below redefines the same names. */
:root{
  /* layout made for a TV first: the page fills the screen inside a safe zone (TV overscan),
     and everything sized in rem grows with the root font below */
  --safe-top:clamp(8px,1.4vh,20px);--safe-bottom:clamp(8px,1.4vh,20px);
  --safe-x:clamp(14px,2.2vw,42px);
  --content-pad-x:clamp(16px,2vw,36px);--content-pad-y:clamp(14px,2vh,28px);
  --rose:#ff3762;--teal:#54C3C5;--ink:#13201E;--plum:#681657;
  --bg:#F6F2F2;--card:#FFFFFF;--line:#E6DEDE;--muted:#6B7472;--danger:#C0392B;
  --text:var(--ink);--link:var(--plum);
  --bar-bg:var(--ink);--bar-line:transparent;
  --field-bg:#FFFFFF;--code-bg:#F1ECEC;--pill-bg:#EEEEEE;
  /* buttons and highlighted tiles: #ff3762 with white text in both themes (3.5:1, so the text
     on it is bold and never small or faded) */
  --accent:var(--rose);--on-accent:#FFFFFF;
  /* chart marks: --rose (occupied) and --fut (future), validated for lightness, chroma,
     colour-blind separation and contrast on both themes' surfaces */
  --fut:#00A3A6;--track:#ECE6E6;
  /* service types, by Scala's order; --st-2 is darker here for contrast on white (#ffb435 in dark).
     "Não definido" is a hatched neutral */
  --st-1:var(--rose);--st-2:#9A7400;--st-3:#8B5CF6;--st-4:#16A34A;--st-other:#6B7472;
  --st-none:#9AA3AD;--st-none-2:#C9CFD5;
  --warn-bg:#FFF4E5;--warn-ink:#8A4B00;--warn-line:#F3D9B1;
  --info-bg:#EAF7F7;--info-ink:#0B5E60;--info-line:#BFE6E7;
  --ok-bg:rgba(49,228,176,.15);--ok-ink:#0d7a5a;--ok-line:rgba(13,122,90,.25);
  --err-bg:rgba(192,57,43,.08);--err-line:rgba(192,57,43,.3);
  --future-bg:rgba(0,163,166,.14);--future-ink:#006E70;
  --shadow:0 6px 18px rgba(19,32,30,.08);
  --overlay:rgba(19,32,30,.45);
  /* video and image preview: always on black, in both themes */
  --video-bg:#000000;--video-ink:#FFFFFF;
  /* printed report: always paper colours, in both themes */
  --paper:#FFFFFF;--paper-ink:#13201E;--paper-muted:#5D6664;--paper-line:#E6DEDE;--paper-track:#ECE6E6;--paper-alert:#C0392B;
  color-scheme:light;
}
/* Dark theme: chosen in the header (data-theme), else follows the system setting */
:root[data-theme=dark]{
  --bg:#05070b;--card:#0E131B;--line:#1F2833;--muted:#8D98A5;--danger:#FF6B6B;
  --text:#E7EBEF;--link:#ff6f8f;
  --bar-bg:#0A0E14;--bar-line:#1F2833;
  --field-bg:#0A0F16;--code-bg:#1A212B;--pill-bg:#1A212B;
  --track:#1C2430;
  --st-2:#ffb435;--st-none:#5B6672;--st-none-2:#3A434E;
  --warn-bg:#251B0A;--warn-ink:#F5C26B;--warn-line:#4A3510;
  --info-bg:#08262A;--info-ink:#7FD8DA;--info-line:#12474B;
  --ok-bg:rgba(49,228,176,.12);--ok-ink:#5FE3B8;--ok-line:rgba(95,227,184,.3);
  --err-bg:rgba(255,55,98,.12);--err-line:rgba(255,55,98,.35);
  --future-bg:rgba(0,163,166,.18);--future-ink:#5FD4D6;
  --shadow:0 6px 18px rgba(0,0,0,.45);
  --overlay:rgba(0,0,0,.65);
  color-scheme:dark;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    --bg:#05070b;--card:#0E131B;--line:#1F2833;--muted:#8D98A5;--danger:#FF6B6B;
    --text:#E7EBEF;--link:#ff6f8f;
    --bar-bg:#0A0E14;--bar-line:#1F2833;
    --field-bg:#0A0F16;--code-bg:#1A212B;--pill-bg:#1A212B;
    --track:#1C2430;
    --st-2:#ffb435;--st-none:#5B6672;--st-none-2:#3A434E;
    --warn-bg:#251B0A;--warn-ink:#F5C26B;--warn-line:#4A3510;
    --info-bg:#08262A;--info-ink:#7FD8DA;--info-line:#12474B;
    --ok-bg:rgba(49,228,176,.12);--ok-ink:#5FE3B8;--ok-line:rgba(95,227,184,.3);
    --err-bg:rgba(255,55,98,.12);--err-line:rgba(255,55,98,.35);
    --future-bg:rgba(0,163,166,.18);--future-ink:#5FD4D6;
    --shadow:0 6px 18px rgba(0,0,0,.45);
    --overlay:rgba(0,0,0,.65);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
/* 15px on a laptop, about 17px on a 1080p TV, up to 24px on bigger screens */
html{font-size:clamp(15px,calc(.45vw + 8.5px),24px);height:100%}
body{margin:0;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font:1rem/1.5 'Ubuntu',system-ui,-apple-system,'Segoe UI',sans-serif}
/* full-screen frame: header on top, the content scrolls inside it instead of being cut off */
.safe-zone-frame{width:100%;height:100vh;height:100dvh;max-height:100dvh;min-height:0;display:flex;flex-direction:column;gap:var(--safe-top);padding:var(--safe-top) var(--safe-x) var(--safe-bottom);background:var(--bg);overflow:hidden}
a{color:var(--link)}
code{font-size:0.867rem;background:var(--code-bg);padding:1px 6px;border-radius:6px}
.bar{flex:none;background:var(--bar-bg);border:1px solid var(--bar-line);border-radius:16px;color:#fff;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:clamp(10px,1.2vh,18px) var(--content-pad-x);flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none}
.brand img{height:1.733rem;width:auto}
.brand span{font-size:0.8rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.bar-right{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.clock{text-align:right;line-height:1.15}
.clock-time{font-size:1.6rem;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.clock-date{font-size:0.8rem;opacity:.6}
.sync-box{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.synced{display:flex;flex-direction:column;align-items:flex-end;font-size:0.867rem;line-height:1.35;margin-right:4px}
.synced > span:first-child{opacity:.85}
.synced > span + span{opacity:.65}

/* buttons */
.btn-sync{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:0.867rem;font-weight:700;height:2.267rem;padding:0 14px;border-radius:10px;border:1px solid var(--accent);background:var(--accent);color:var(--on-accent);cursor:pointer;white-space:nowrap}
.btn-sync:hover:not(:disabled){filter:brightness(1.08)}
.btn-sync:disabled{opacity:.7;cursor:progress}
.btn-sync .ico{flex:none}
@keyframes spin{to{transform:rotate(360deg)}}
/* sync lock: covers the whole page while a sync runs */
body.is-locked{overflow:hidden}
.sync-overlay{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:16px;background:var(--overlay);backdrop-filter:blur(3px);cursor:progress}
.sync-dialog{width:min(420px,100%);background:var(--card);color:var(--text);border:1px solid var(--line);border-radius:16px;padding:28px 24px;text-align:center;box-shadow:var(--shadow);outline:none}
.sync-dialog h2{font-size:1.2rem;margin:14px 0 6px}
.sync-dialog p{margin:0;color:var(--muted);font-size:0.933rem}
.sync-dialog .sync-elapsed{margin-top:12px;font-variant-numeric:tabular-nums;font-size:0.867rem}
.sync-spin{display:inline-flex;align-items:center;justify-content:center;width:3.467rem;height:3.467rem;border-radius:50%;background:var(--accent);color:var(--on-accent)}
.sync-spin .ico{width:1.6rem;height:1.6rem;animation:spin 1s linear infinite}
@media (prefers-reduced-motion:reduce){.sync-spin .ico{animation:none}}
.card.empty .btn-sync{height:2.8rem;padding:0 20px;font-size:1rem}
.btn-theme{display:inline-flex;align-items:center;justify-content:center;width:2.267rem;height:2.267rem;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer}
.btn-theme:hover{background:rgba(255,255,255,.1)}
.btn-theme .ico-sun{display:none}
:root[data-theme=dark] .btn-theme .ico-sun{display:block}
:root[data-theme=dark] .btn-theme .ico-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]) .btn-theme .ico-sun{display:block}
  :root:not([data-theme=light]) .btn-theme .ico-moon{display:none}
}

.wrap{flex:1;min-height:0;width:100%;overflow:auto;padding:var(--content-pad-y) var(--content-pad-x)}
h1{font-size:1.733rem;margin:0 0 4px}
h2{font-size:1.2rem;margin:0 0 14px}
.sub{color:var(--muted);margin:0 0 22px}
.crumb{margin:0 0 10px;font-size:0.933rem}
.crumb a{text-decoration:none}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:20px}
.card.empty{text-align:center;padding:48px 22px}
.spread{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.spread.tight{align-items:center;margin-bottom:10px}
.spread.tight h2{margin:0}
.cols{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:20px}
.cols .card{margin-bottom:20px}

/* notices */
.notice{border-radius:12px;padding:12px 16px;margin:0 0 20px;font-size:0.933rem}
.notice.warn{background:var(--warn-bg);color:var(--warn-ink);border:1px solid var(--warn-line);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.notice p{margin:0}
.notice.info{background:var(--info-bg);color:var(--info-ink);border:1px solid var(--info-line)}
.notice.ok{background:var(--ok-bg);color:var(--ok-ink);border:1px solid var(--ok-line)}
.notice.err{background:var(--err-bg);color:var(--danger);border:1px solid var(--err-line)}

/* KPI tiles */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:24px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;flex-direction:column;gap:2px}
.kpi-label{font-size:0.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kpi-value{font-size:1.867rem;font-weight:700;font-variant-numeric:tabular-nums;line-height:1.2}
/* H:i:s.v values are long: smaller so they fit a narrow tile */
.kpi-value.time{font-size:1.6rem}
.kpi-note{font-size:0.8rem;color:var(--muted)}
.kpi.alert{border-color:var(--danger)}
.kpi.alert .kpi-note{color:var(--danger)}

/* toolbar & fields */
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;margin-bottom:14px}
.field{display:flex;flex-direction:column;min-width:10rem}
.field.grow{flex:1 1 240px}
label{display:block;font-size:0.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
input[type=search],input[type=number],select{width:100%;height:2.8rem;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;background:var(--field-bg);color:var(--text)}
input:focus-visible,select:focus-visible,a:focus-visible,button:focus-visible{outline:2px solid var(--teal);outline-offset:2px}

/* legend & occupancy bar */
.legend{display:flex;gap:18px;flex-wrap:wrap;font-size:0.867rem;color:var(--muted);margin:0 0 12px}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{display:inline-block;width:0.8rem;height:0.8rem;border-radius:3px}
.sw.now{background:var(--rose)}
.sw.fut{background:var(--fut)}
.sw.free{background:var(--track)}
.occ{display:flex;gap:2px;height:0.8rem;background:var(--track);border-radius:6px;overflow:hidden}
.occ .seg{display:block;height:100%}
.occ .seg.now{background:var(--rose)}
.occ .seg.fut{background:var(--fut)}
.occ .seg:last-child{border-radius:0 4px 4px 0}
.occ.big{height:1.067rem;border-radius:8px}
/* service type colours, shared by bars, swatches and legends */
.st-1{background:var(--st-1)}
.st-2{background:var(--st-2)}
.st-3{background:var(--st-3)}
.st-4{background:var(--st-4)}
.st-other{background:var(--st-other)}
.st-none{background:repeating-linear-gradient(135deg,var(--st-none) 0 4px,var(--st-none-2) 4px 8px)}
.network-types .sub{margin:0}
.network-types .occ{margin:12px 0 14px}
.type-totals{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(12rem,1fr));gap:10px}
.type-totals li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;column-gap:8px;background:var(--bg);border-radius:12px;padding:10px 14px}
.type-totals .tt-name{font-size:.867rem;color:var(--muted)}
.type-totals .tt-value{grid-column:2/3;font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums}
.type-totals .tt-share{grid-row:1/3;grid-column:3;font-size:1.2rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)}
.type-totals li.none .tt-value{color:var(--muted)}
.service-table{margin-top:14px}
.service-table .sw,.service-cell .sw,th .sw{vertical-align:-1px}
.service-table .row-none td{color:var(--muted)}
.service-cell{white-space:nowrap}
.service-cell.none{color:var(--muted)}
td.zero{color:var(--muted);opacity:.6}
.field.compact{min-width:12rem}
.field.compact label{margin-bottom:4px}
.field.compact select{height:2.267rem}

/* panel cards */
.panels{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(14rem,12vw,22rem),1fr));gap:clamp(12px,1vw,20px)}
.panel-card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;color:inherit;text-decoration:none;display:flex;flex-direction:column;gap:10px;transition:border-color .15s,box-shadow .15s}
.panel-card:hover{border-color:var(--link);box-shadow:var(--shadow)}
.panel-card.alert{border-color:var(--danger)}
.pc-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pc-head h2{font-size:1.067rem;margin:0}
.pc-main{display:flex;align-items:baseline;gap:6px}
.pc-free{font-size:1.733rem;font-weight:700;font-variant-numeric:tabular-nums}
.pc-free-label{color:var(--muted);font-size:0.933rem}
.pc-facts{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:4px 0 0}
.pc-facts div{display:flex;flex-direction:column}
.pc-facts dt{font-size:0.733rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.pc-facts dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums}
.pc-note{margin:0;font-size:0.867rem;color:var(--muted)}

/* tables */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:0.933rem}
th{text-align:left;font-size:0.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:500;padding:10px 8px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:0}
th.num,td.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.item-name{word-break:break-word}
#table td:first-child{white-space:nowrap}
.pill{display:inline-block;font-size:0.8rem;padding:2px 10px;border-radius:999px;background:var(--pill-bg);color:var(--muted);white-space:nowrap}
.pill.big{font-size:0.933rem;padding:6px 14px}
.pill.on{background:var(--ok-bg);color:var(--ok-ink)}
.pill.off{background:var(--err-bg);color:var(--danger)}
.pill.warn{background:var(--warn-bg);color:var(--warn-ink)}
.pill.future{background:var(--future-bg);color:var(--future-ink)}

/* filter chips & range nav: the active one wears the accent, like the buttons */
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{font:inherit;font-size:0.867rem;border:1px solid var(--line);background:var(--field-bg);color:var(--text);border-radius:999px;padding:4px 12px;cursor:pointer}
.chip span{color:var(--muted);margin-left:2px}
.chip[aria-pressed=true]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}
.chip[aria-pressed=true] span{color:var(--on-accent);opacity:.9}
.range{display:flex;gap:4px}
.range a{font-size:0.867rem;text-decoration:none;color:var(--text);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
.range a[aria-current]{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700}

/* simulator */
.sim-out{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:8px 0 12px}
.sim-out div{background:var(--bg);border-radius:12px;padding:10px 14px}
.sim-out dt{font-size:0.8rem;color:var(--muted)}
.sim-out .wide{grid-column:1/-1}
.sim-out dd{margin:0;font-size:1.333rem;font-weight:700;font-variant-numeric:tabular-nums}
.sim-verdict{margin:0;font-weight:500}
.sim-verdict.ok{color:var(--ok-ink)}
.sim-verdict.over{color:var(--danger)}

/* pager */
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);font-size:0.867rem}
.pager:empty{display:none}
.pager-info{color:var(--muted)}
.pages{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pg{font:inherit;font-size:0.867rem;min-width:2.133rem;height:2.133rem;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--field-bg);color:var(--text);cursor:pointer}
.pg:hover:not(:disabled){border-color:var(--accent)}
.pg.current{background:var(--accent);border-color:var(--accent);color:var(--on-accent);font-weight:700;cursor:default}
.pg:disabled{opacity:.4;cursor:default}
.pages .gap{color:var(--muted);padding:0 4px}

.chart-box{position:relative;height:clamp(18.667rem,34vh,36rem)}

/* ---- evolution (evolucao.php) ---- */
.field .label{display:block;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.evo-controls{align-items:flex-end}
.evo-controls .range{flex-wrap:wrap}
.evo-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
.trend{color:var(--muted)}
.trend.up{color:var(--ok-ink)}
.trend.down{color:var(--danger)}
.chart-box.short{height:clamp(14rem,24vh,26rem)}
.rank-bar{width:40%}
.rank-bar span{display:block;height:.6rem;border-radius:4px;background:var(--rose)}
.h-link{font-size:.8rem;font-weight:500;margin-left:8px;text-decoration:none;white-space:nowrap}
.evo-data summary{cursor:pointer;list-style:none}
.evo-data summary::-webkit-details-marker{display:none}
.evo-data summary h2{display:inline;margin:0}
.evo-data summary::after{content:' ▾';color:var(--muted)}
.evo-data[open] summary{margin-bottom:12px}

/* ---- panel items: thumbnail and preview ---- */
/* the name keeps a readable width; on a narrow screen the table scrolls sideways instead */
.item-name{min-width:16rem}
.item-open{display:inline-flex;align-items:center;gap:10px;background:none;border:0;padding:0;font:inherit;color:inherit;text-align:left;cursor:zoom-in}
.item-open:hover .item-label{color:var(--link);text-decoration:underline}
.item-thumb{flex:none;width:4.267rem;height:2.133rem;object-fit:cover;border-radius:6px;background:var(--track);border:1px solid var(--line)}
.item-thumb.empty{display:inline-block}
.item-open:hover .item-thumb{border-color:var(--accent)}
.preview{width:min(960px,94vw);max-height:92vh;padding:0;border:1px solid var(--line);border-radius:16px;background:var(--card);color:var(--text);box-shadow:var(--shadow)}
.preview::backdrop{background:var(--overlay);backdrop-filter:blur(3px)}
.preview-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.preview-head h2{margin:0;font-size:1rem;word-break:break-word}
.preview-close{color:var(--text);border-color:var(--line);flex:none}
.preview-body{background:var(--video-bg);display:flex;justify-content:center;align-items:center;min-height:12rem}
.preview-body video,.preview-body img{display:block;width:100%;max-height:72vh;object-fit:contain}
.preview-error{color:var(--video-ink);padding:24px;margin:0;text-align:center}
.preview-meta{margin:0;padding:12px 18px;font-size:.867rem;color:var(--muted)}

/* ---- account & admin (phase 4) ---- */
.user-nav{display:flex;align-items:center;justify-content:flex-end;gap:4px 14px;flex-wrap:wrap;font-size:.8rem}
.user-nav a,.user-nav button{display:inline-flex;align-items:center;gap:6px;color:#fff;opacity:.75;text-decoration:none;background:none;border:0;padding:2px 0;font:inherit;cursor:pointer}
.user-nav a:hover,.user-nav button:hover{opacity:1}
.user-nav .ico{width:.95rem;height:.95rem}
.user-nav form{margin:0}
.auth-card{max-width:26rem;margin:6vh auto 0}
.form{display:flex;flex-direction:column;gap:14px}
.form .field{min-width:0}
input[type=text],input[type=password],input[type=time]{width:100%;height:2.8rem;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;background:var(--field-bg);color:var(--text)}
.btn-block{justify-content:center;width:100%;height:2.8rem;font-size:.933rem}
a.btn-sync{text-decoration:none}
.btn-small{display:inline-flex;align-items:center;font:inherit;font-size:.8rem;font-weight:500;height:2rem;padding:0 10px;border-radius:8px;border:1px solid var(--line);background:var(--field-bg);color:var(--text);cursor:pointer;text-decoration:none;white-space:nowrap;list-style:none}
.btn-small::-webkit-details-marker{display:none}
.btn-small:hover:not(:disabled){border-color:var(--accent)}
.btn-small:disabled{opacity:.4;cursor:default}
.btn-small.danger{color:var(--danger)}
.btn-small.danger:hover:not(:disabled){border-color:var(--danger)}
.hint{display:block;font-size:.8rem;color:var(--muted);margin-top:4px}
.form-card{max-width:56rem}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));align-items:end;gap:14px}
.params-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));gap:18px}
.form-actions{grid-column:1/-1;display:flex;gap:10px;align-items:center;margin-top:6px}
.admin-tabs{align-self:center}
.admin-table td{vertical-align:middle}
.admin-table tr.inactive td{color:var(--muted)}
.admin-table select{height:2.2rem;width:auto}
.actions{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
form.inline{display:inline-flex;gap:6px;align-items:center;margin:0}
form.inline input[type=password]{height:2rem;width:13rem}
.inline-details{display:inline-flex;gap:6px;align-items:center}
.inline-details[open] summary{border-color:var(--accent)}
.export-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr));gap:20px}
.export-grid .btn-sync{display:inline-flex}

/* ---- printable report (exportar.php?formato=pdf) ---- */
.report-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:16px}
.report{background:var(--paper);color:var(--paper-ink);border-radius:16px;padding:28px 32px;
  /* the light theme's type colours: the report is paper even in the dark theme */
  --st-2:#9A7400;--st-none:#9AA3AD;--st-none-2:#C9CFD5;--track:var(--paper-track)}
.report .sub,.report th,.report .service-table .row-none td{color:var(--paper-muted)}
.report-head{display:flex;align-items:center;gap:20px;margin-bottom:18px}
.report-logo{height:2.4rem;width:auto}
.report h1{margin:0}
.report h2{font-size:1.1rem;margin:18px 0 10px}
.report-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.report-summary div{border:1px solid var(--paper-line);border-radius:10px;padding:10px 14px;display:flex;flex-direction:column}
.report-summary span{font-size:.75rem;text-transform:uppercase;letter-spacing:.06em;color:var(--paper-muted)}
.report-summary b{font-size:1.3rem;font-variant-numeric:tabular-nums}
.report .occ{background:var(--paper-track)}
.report table{font-size:.8rem}
.report td,.report th{border-color:var(--paper-line);padding:6px}
.report tr.excess td{color:var(--paper-alert)}
.report-foot{margin-top:14px;font-size:.75rem;color:var(--paper-muted)}
@media print{
  @page{size:A4 landscape;margin:12mm}
  html{font-size:11px}
  body,body.report{height:auto;overflow:visible;background:var(--paper)}
  .safe-zone-frame{height:auto;max-height:none;overflow:visible;padding:0;background:var(--paper)}
  .safe-zone-frame > header,.no-print,#sync-status,.notice{display:none!important}
  .wrap{overflow:visible;padding:0}
  .report{padding:0;border-radius:0}
  .report tr{break-inside:avoid}
  .occ .seg,.sw{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---- TV view (tv.php): one slide fills the content area, nothing scrolls ---- */
body.tv .wrap{overflow:hidden;display:flex;flex-direction:column}
body.tv.hide-cursor,body.tv.hide-cursor *{cursor:none!important}
.tv-show{flex:1;min-height:0;display:flex;flex-direction:column;gap:clamp(8px,1.4vh,18px)}
.tv-stage{flex:1;min-height:0;position:relative}
.tv-slide{position:absolute;inset:0;display:grid;grid-template-rows:auto auto minmax(min-content,1fr) auto;gap:clamp(10px,2vh,28px);background:var(--card);border:1px solid var(--line);border-radius:20px;padding:clamp(16px,3vh,40px) clamp(18px,2.5vw,48px);overflow:auto}
.tv-slide.is-active{animation:tv-in .5s ease}
.tv-slide.alert{border-color:var(--danger)}
@keyframes tv-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.tv-slide.is-active{animation:none}}
.tv-head{display:flex;align-items:baseline;gap:0 24px;flex-wrap:wrap}
.tv-kicker{width:100%;margin:0;font-size:clamp(.8rem,1.6vh,1.2rem);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tv-title{margin:0;font-size:clamp(2rem,6vh,5rem);line-height:1.05}
.tv-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(10px,1.2vw,24px)}
.tv-kpi{display:flex;flex-direction:column;gap:4px;background:var(--bg);border-radius:16px;padding:clamp(12px,2vh,26px) clamp(14px,1.4vw,28px);min-width:0}
.tv-kpi.accent{background:var(--accent);color:var(--on-accent)}
.tv-kpi.accent .tv-label,.tv-kpi.accent .tv-note{color:var(--on-accent);opacity:.92}
.tv-kpi.alert{outline:2px solid var(--danger)}
.tv-label{font-size:clamp(.8rem,1.6vh,1.2rem);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tv-big{font-size:clamp(2.4rem,8vh,6.5rem);font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.tv-big.time{font-size:clamp(1.6rem,4.6vh,3.8rem)}
.tv-note{font-size:clamp(.8rem,1.6vh,1.2rem);color:var(--muted)}
.tv-spots{display:flex;flex-direction:column;gap:2px;font-size:clamp(1rem,2.2vh,1.6rem);color:var(--muted)}
.tv-spots b{font-size:clamp(1.4rem,3.4vh,2.6rem);color:var(--text);font-variant-numeric:tabular-nums;margin-right:6px}
.tv-types{display:flex;flex-direction:column;gap:clamp(8px,1.6vh,18px)}
/* keep their size: in a short window the slide scrolls instead of squashing the bar to nothing */
.tv-types > *{flex:none}
.tv-types h2{margin:0;font-size:clamp(1rem,2.2vh,1.6rem);color:var(--muted);font-weight:500}
.tv-types .occ.big{height:clamp(14px,2.6vh,32px);border-radius:10px}
.tv-types .type-totals{grid-template-columns:repeat(auto-fit,minmax(clamp(11rem,14vw,20rem),1fr))}
.tv-types .type-totals .tt-name{font-size:clamp(.85rem,1.7vh,1.25rem)}
.tv-types .type-totals .tt-value,.tv-types .type-totals .tt-share{font-size:clamp(1.2rem,3vh,2.2rem)}
.tv-facts{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px;font-size:clamp(.9rem,2vh,1.4rem);color:var(--muted)}
.tv-facts b{color:var(--text)}
.tv-facts .warn,.tv-facts .warn b{color:var(--warn-ink)}
.tv-controls{flex:none;display:flex;flex-direction:column;gap:8px}
.tv-progress{height:4px;border-radius:2px;background:var(--track);overflow:hidden}
.tv-progress span{display:block;height:100%;width:0;background:var(--accent)}
.tv-buttons{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.tv-btn{color:var(--text);border-color:var(--line)}
.tv-btn:hover{background:var(--card)}
.tv-btn .ico-play{display:none}
.is-paused .tv-btn .ico-play{display:block}
.is-paused .tv-btn .ico-pause{display:none}
.is-paused .tv-progress span{background:var(--muted)}
.tv-speed{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:.867rem;color:var(--muted);letter-spacing:0;text-transform:none}
.tv-speed select{width:auto;height:2.267rem;padding:0 8px}
.tv-counter{min-width:4.5rem;text-align:center;font-variant-numeric:tabular-nums;color:var(--muted);font-size:.933rem}

@media (max-width:860px){
  .evo-cols{grid-template-columns:minmax(0,1fr)}
  /* minmax(0,…): the chart canvas must shrink with the column, not widen it */
  .cols{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  /* phones: back to normal page scroll, no frame */
  body{height:auto;overflow:visible}
  .safe-zone-frame{height:auto;max-height:none;overflow:visible;padding:0;gap:0}
  .wrap{overflow:visible;padding:20px 16px 48px}
  .bar{padding:12px 16px;border-radius:0;border-width:0 0 1px}
  .bar-right{width:100%;align-items:stretch}
  .clock{display:flex;align-items:baseline;justify-content:space-between;gap:12px;text-align:left}
  .clock-time{font-size:1.333rem}
  .sync-box{width:100%;justify-content:space-between}
  .synced{align-items:flex-start;flex:1 1 auto}
  .field{min-width:0;flex:1 1 140px}
  .kpi-value{font-size:1.6rem}
  .kpi-value.time{font-size:1.267rem}
  /* TV view on a phone: slides stack and the page scrolls */
  body.tv .wrap{overflow:visible}
  .tv-stage{min-height:0}
  .tv-slide{position:static}
  .tv-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
}