/* ============================================================
   SIRENE — Censo hospitalar · painel estilo aeroporto (split-flap)
   Tema claro/escuro: tokens --cs-* (escuro por padrão; claro via
   [data-theme="light"], o mesmo mecanismo do template iPadOS).
   ============================================================ */
:root, [data-theme="dark"] {
  --cs-bg: #0b0d10;            /* fundo do painel */
  --cs-cell: #15181d;          /* células */
  --cs-row: linear-gradient(180deg, #14171c, #0f1216);
  --cs-row-hover: #1b1f26;
  --cs-txt: #f5d76e;           /* texto principal (âmbar Solari) */
  --cs-txt2: #d9dde5;          /* hora / tipo */
  --cs-dim: #8a8f98;           /* rótulos */
  --cs-line: #22262d;
  --cs-bar: #262b33;
  --cs-spin: #e9e9e9;          /* letra girando */
  --cs-off-bg: #3a3f47; --cs-off-txt: #cdd2da;
  --cs-stale-bg: #4a3b12;
  --cs-ok: #30d158; --cs-warn: #ff9f0a; --cs-bad: #ff453a;
  --cs-badge-txt: #000;
  --cs-full-bg: #06070a;
}
[data-theme="light"] {
  --cs-bg: #e9e9ee;
  --cs-cell: #ffffff;
  --cs-row: linear-gradient(180deg, #f7f7fa, #ededf2);
  --cs-row-hover: #e3e3ea;
  --cs-txt: #1c1c1e;
  --cs-txt2: #3a3a3c;
  --cs-dim: #6c6c70;
  --cs-line: #d1d1d6;
  --cs-bar: #e5e5ea;
  --cs-spin: #6c6c70;
  --cs-off-bg: #d1d1d6; --cs-off-txt: #3a3a3c;
  --cs-stale-bg: #fff1cc;
  --cs-ok: #1f9d47; --cs-warn: #c77600; --cs-bad: #d93025;
  --cs-badge-txt: #fff;
  --cs-full-bg: #f2f2f7;
}

.cs-board { background: var(--cs-bg); border-radius: 16px; padding: 14px; font-family: var(--font-mono); color: var(--cs-txt); overflow: hidden; overflow-x: auto; transition: background .25s, color .25s; }
.cs-kpis { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; margin-bottom: 12px; }
.cs-kpi { background: var(--cs-cell); border-radius: 10px; padding: 10px 12px; text-align: center; }
.cs-kpi b { display: block; font-size: 26px; line-height: 1; letter-spacing: .06em; }
.cs-kpi span { display: block; font-size: 10px; letter-spacing: .14em; color: var(--cs-dim); margin-top: 6px; }
.cs-kpi.ok b { color: var(--cs-ok); } .cs-kpi.warn b { color: var(--cs-warn); } .cs-kpi.bad b { color: var(--cs-bad); }
.cs-head, .cs-row { display: grid; grid-template-columns: 62px minmax(220px, 2.2fr) 84px 110px 64px 64px 64px 92px 60px 150px 36px; gap: 6px; align-items: center; min-width: 940px; }
.cs-head { padding: 0 6px 8px; font-size: 10.5px; letter-spacing: .14em; color: var(--cs-dim); border-bottom: 1px solid var(--cs-line); margin-bottom: 8px; }
.cs-head span { padding: 0 6px; }
.cs-row { padding: 6px; border-radius: 10px; margin-bottom: 6px; background: var(--cs-row); cursor: pointer; transition: background .2s; }
.cs-row:hover { background: var(--cs-row-hover); }
.cs-row.stale { opacity: .82; }
.cs-row.stale .cs-cell.hora .cs-flap { color: var(--cs-warn); }
.cs-cell { min-height: 40px; display: flex; align-items: center; padding: 0 8px; background: var(--cs-cell); border-radius: 6px; font-size: 15px; letter-spacing: .08em; white-space: nowrap; overflow: hidden; }
.cs-cell.nome { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
.cs-cell.nome .cs-flap { font-size: 15px; font-weight: 700; }
.cs-cell.nome small { font-size: 10px; letter-spacing: .12em; color: var(--cs-dim); }
.cs-cell.tipo, .cs-cell.hora { color: var(--cs-txt2); font-size: 13px; }
.cs-cell.leitos { flex-direction: column; align-items: stretch; justify-content: center; gap: 4px; }
.cs-bar { display: block; height: 4px; background: var(--cs-bar); border-radius: 3px; overflow: hidden; }
.cs-bar b { display: block; height: 100%; background: var(--cs-ok); }
.cs-bar b.warn { background: var(--cs-warn); } .cs-bar b.bad { background: var(--cs-bad); }
.cs-cell.num, .cs-cell.vagas { justify-content: center; font-weight: 700; }
.cs-cell.ok { color: var(--cs-ok); } .cs-cell.warn { color: var(--cs-warn); } .cs-cell.bad { color: var(--cs-bad); }
.cs-cell.sit { justify-content: center; background: transparent; padding: 0; }
.cs-badge { display: inline-flex; align-items: center; justify-content: center; width: 100%; min-height: 40px; border-radius: 6px; font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--cs-badge-txt); background: var(--cs-ok); }
.cs-badge.warn { background: var(--cs-warn); } .cs-badge.bad { background: var(--cs-bad); color: #fff; } .cs-badge.off { background: var(--cs-off-bg); color: var(--cs-off-txt); }
.cs-row.stale .cs-badge { background: var(--cs-stale-bg); color: var(--cs-warn); }
.cs-cell.tend { justify-content: center; background: transparent; font-size: 15px; color: var(--cs-dim); }
.cs-cell.tend .bad { color: var(--cs-bad); } .cs-cell.tend .ok { color: var(--cs-ok); }
.cs-flap i { display: inline-block; font-style: normal; min-width: .62em; text-align: center; transform-origin: center; }
.cs-flap i.spin { animation: cs-spin .09s linear infinite; color: var(--cs-spin); }
.cs-flap i.set { animation: cs-set .35s ease-out; }
@keyframes cs-spin { 0% { transform: rotateX(0deg); } 50% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); } }
@keyframes cs-set { 0% { transform: rotateX(-90deg); } 100% { transform: rotateX(0deg); } }
.cs-empty { padding: 30px; text-align: center; color: var(--cs-dim); letter-spacing: .14em; }
.cs-foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; font-size: 10.5px; letter-spacing: .12em; color: var(--cs-dim); }
.cs-legend span { margin-right: 14px; } .cs-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.cs-legend i.ok { background: var(--cs-ok); } .cs-legend i.warn { background: var(--cs-warn); } .cs-legend i.bad { background: var(--cs-bad); }
.cs-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.cs-toolbar .ipad-segmented { margin-left: auto; }
.cs-live { min-height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--ipad-separator); background: var(--ipad-bg-secondary); color: var(--ipad-text-secondary); font: 600 13px var(--font); cursor: pointer; }
.cs-live.on { color: var(--ipad-green); border-color: var(--ipad-green); }
@media (max-width: 1200px) { .cs-head, .cs-row { grid-template-columns: 56px minmax(160px, 2fr) 70px 96px 56px 56px 56px 80px 50px 120px 30px; } .cs-cell { font-size: 13px; } .cs-kpis { grid-template-columns: repeat(4, 1fr); } }

/* ---- modo videowall (censo.html) ---- */
.cs-full { position: fixed; inset: 0; background: var(--cs-full-bg); color: var(--cs-txt); font-family: var(--font-mono); display: flex; flex-direction: column; padding: 20px 28px; overflow: hidden; transition: background .25s, color .25s; }
.cs-full-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-bottom: 12px; border-bottom: 2px solid var(--cs-txt); margin-bottom: 14px; }
.cs-full-top h1 { margin: 0; font: 800 26px var(--font-mono); letter-spacing: .2em; }
.cs-full-top h1 small { display: block; font-size: 11px; letter-spacing: .3em; color: var(--cs-dim); margin-top: 4px; }
.cs-full-top .clock { font-size: 40px; font-weight: 800; letter-spacing: .1em; text-align: right; }
.cs-full-top .clock small { display: block; font-size: 11px; letter-spacing: .3em; color: var(--cs-dim); }
.cs-full-top .cs-tools { display: flex; gap: 8px; margin-left: auto; margin-right: 16px; }
.cs-tool { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--cs-line); background: var(--cs-cell); color: var(--cs-txt); cursor: pointer; font-size: 15px; }
.cs-tool:hover { background: var(--cs-row-hover); }
.cs-full .cs-board { flex: 1; padding: 0; background: transparent; border-radius: 0; overflow-x: hidden; }
.cs-full .cs-head, .cs-full .cs-row { grid-template-columns: 90px minmax(280px, 2.4fr) 110px 140px 90px 90px 90px 120px 80px 220px 50px; min-width: 0; }
.cs-full .cs-cell { min-height: 54px; font-size: 22px; }
.cs-full .cs-cell.nome .cs-flap { font-size: 21px; } .cs-full .cs-cell.nome small { font-size: 12px; }
.cs-full .cs-cell.tipo, .cs-full .cs-cell.hora { font-size: 16px; }
.cs-full .cs-badge { min-height: 54px; font-size: 15px; }
.cs-full .cs-kpi b { font-size: 36px; } .cs-full .cs-kpi span { font-size: 12px; }
.cs-full .cs-head { font-size: 13px; }
.cs-full .cs-foot { font-size: 13px; }
.cs-full .cs-row { cursor: default; }
@media (max-width: 1500px) {
  .cs-full .cs-head, .cs-full .cs-row { grid-template-columns: 70px minmax(200px, 2fr) 96px 110px 70px 70px 70px 100px 60px 170px 40px; }
  .cs-full .cs-cell { font-size: 17px; min-height: 46px; }
  .cs-full .cs-cell.nome .cs-flap { font-size: 17px; }
  .cs-full .cs-cell.tipo, .cs-full .cs-cell.hora { font-size: 13px; }
  .cs-full .cs-badge { font-size: 12px; min-height: 46px; }
  .cs-full .cs-kpi b { font-size: 28px; }
}
@media (max-width: 1100px) { .cs-full { padding: 12px 14px; } .cs-full .cs-head, .cs-full .cs-row { grid-template-columns: 56px minmax(150px, 2fr) 76px 92px 56px 56px 56px 84px 48px 130px 30px; } .cs-full .cs-cell { font-size: 14px; min-height: 40px; } .cs-full .cs-cell.nome .cs-flap { font-size: 14px; } .cs-full .cs-badge { font-size: 11px; min-height: 40px; } .cs-full-top h1 { font-size: 20px; } .cs-full-top .clock { font-size: 30px; } }