/* F2-T02 — acréscimos à folha extraída das telas aprovadas (app.css). Sem estilo inline nas páginas (CSP style-src 'self'). */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
a.brand{text-decoration:none}
.theme{margin:0} .theme button{opacity:1}
.sair{margin:0}
.btn{text-decoration:none;display:inline-block} .btn.sm{padding:6px 10px;font-size:.75rem}
.btn.p{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
a.stat{text-decoration:none}
.empilha{display:grid;gap:8px}
.alertas{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.alertas .stat{margin:0}
.cota{justify-content:space-between;margin-bottom:8px}
/* login (desenho = login do portal Cogn.IA, foto do dono 01/10) */
main.publico{padding:28px 16px}
.login{max-width:480px;margin:0 auto;text-align:center}
.brand.grande{font-size:3.4rem;letter-spacing:-2px;color:var(--fg);margin-bottom:26px}
.login-card{padding:28px 26px;text-align:left}
.login-titulo{text-align:center;font-weight:800;letter-spacing:.02em;text-transform:uppercase;font-size:1.05rem}
.centro{text-align:center}
.login .sub{margin:6px 0 18px}
.form-col{display:grid;gap:12px}
input.grande{padding:14px 16px;font-size:1rem}
.btn.entrar{width:100%;padding:15px;font-size:1rem;text-transform:uppercase;letter-spacing:.06em;font-weight:800;margin-top:2px}
.rodape-marca{margin-top:26px;display:flex;gap:10px;justify-content:center;align-items:baseline}
.rodape-marca .brand{font-size:1.4rem;letter-spacing:-1px;color:var(--mut)}
.rodape-marca .brand span{color:var(--accent-2)}
/* câmeras: filtros */
.filtros{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:12px}
.chips{border:0;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chip-f{display:inline-flex;align-items:center;gap:6px;margin:0;padding:7px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--panel3);color:var(--fg);font-family:var(--display);font-size:.8rem;font-weight:600;letter-spacing:.02em;text-transform:none;cursor:pointer;position:relative}
.chip-f input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip-f:has(input:checked){background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
.chip-f:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.field.busca{margin-left:auto;width:240px;max-width:100%}
.rodape-tabela{margin:10px 0 0}
.empty .btn{margin-top:4px}
/* nova câmera */
.modos{border:0;margin:0 0 14px;padding:0;display:grid;gap:8px}
.modos legend{font-family:var(--display);font-size:.74rem;color:var(--mut);letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px;padding:0}
.modo{display:flex;gap:10px;align-items:flex-start;margin:0;padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--panel2);color:var(--fg);text-transform:none;letter-spacing:0;font-family:var(--body);font-size:.86rem;cursor:pointer}
.modo input{width:auto;margin-top:4px}
.modo small{display:block;color:var(--mut);font-size:.78rem;margin-top:2px}
.modo:has(input:checked){border-color:var(--accent);background:var(--accent-s)}
.modo:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.modo.off{cursor:not-allowed;border-style:dashed}
.modo.off .pill{margin-left:6px}
.acao{margin-top:12px}
.urlbox{padding:11px;background:var(--bg);border-radius:var(--r-sm);border:1px solid var(--line2);margin:12px 0 4px;user-select:all}
h2.sec{margin-top:18px;font-size:1.05rem}
.receptor-ve{margin-top:8px}
.card .msg{margin-top:8px}
.det{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;margin:0 0 10px}
.det dt{color:var(--mut)} .det dd{margin:0}
.kpis{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:12px}
.kpi-b{flex:1;min-width:90px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--panel2)}
.kpi-b b{display:block;font-family:var(--display);font-size:1.7rem;line-height:1.1;font-variant-numeric:tabular-nums}
.kpi-b span{color:var(--mut);font-size:.8rem}
.sec-h{margin:22px 0 10px;font-size:1.05rem}
.sec-lista{margin-top:16px}
.sel-cliente select{width:auto;min-width:180px}
::placeholder{color:var(--mut);opacity:1}
/* "sem flash": sem JS, sem @import de fonte externa */

/* ---- CONTRASTE (P3 do card, WCAG AA): ajustes sobre os tokens das telas aprovadas que ficavam abaixo de 4,5:1 / 3:1 ----
   medidos no navegador por cerebro/web-prova (razão da cor computada contra o pior pixel do fundo). Mudanças e motivo:
   claro: --mut2 (rótulos), --warn/--ok (texto sobre o fundo translúcido da pílula), --top-mut (chip no degradê marinho);
   escuro: --accent (botão primário #008896 com texto branco dava 4,23:1), brilho do fundo (#477ac0 -> #365f99: texto sobre ele < 4,5:1),
   item ativo do menu em teal. Identidade preservada (mesmos matizes). */
:root{--mut2:#566b79;--warn:#7a4f0a;--ok:#17703c;--top-mut:#d3e2e8;--brand-ia:var(--accent-2)}
.brand.grande span,.rodape-marca .brand span{color:var(--brand-ia)}
.publico .note,.publico .eyebrow,.publico .sub,.rodape-marca .brand{color:var(--fg)}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--accent:#00788a;--brand-ia:var(--teal);--fundo:radial-gradient(ellipse at 74% 110%,#365f99 0,transparent 54%),linear-gradient(145deg,#071523 20%,#071725 46%,#103e70 100%)}
  :root:not([data-theme="light"]) nav.rail a.on{color:var(--teal)}
}
:root[data-theme="dark"]{--accent:#00788a;--brand-ia:var(--teal);--fundo:radial-gradient(ellipse at 74% 110%,#365f99 0,transparent 54%),linear-gradient(145deg,#071523 20%,#071725 46%,#103e70 100%)}
:root[data-theme="dark"] nav.rail a.on{color:var(--teal)}
.lic-card{grid-column:1/-1}
/* tela Câmera (F2-T03): player, estados, timeline do dia, fotos */
#camera{display:grid;gap:16px}
.player{aspect-ratio:16/9;max-width:100%;background:#05070a;border-radius:var(--r);position:relative;overflow:hidden;border:1px solid var(--line2)}
.player video{width:100%;height:100%;display:block;object-fit:contain;background:#05070a}
.player .estado{position:absolute;top:10px;left:10px;background:rgba(0,0,0,.72);color:#fff;padding:5px 10px;border-radius:5px;font-size:.78rem;font-family:var(--display);letter-spacing:.03em}
.player .estado[data-estado="online"]{color:#ff8a8d}
.player .estado[data-estado="offline"],.player .estado[data-estado="sem_codec"],.player .estado[data-estado="sem_permissao"]{background:rgba(120,20,25,.9)}
.player.play{aspect-ratio:auto;max-height:420px;margin-top:12px}
.player-barra{margin:12px 0;gap:10px;flex-wrap:wrap}
.msg-foto{margin-top:8px}
.dia-nav{gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.tl{position:relative;height:44px;background:var(--panel2);border:1px solid var(--line2);border-radius:var(--r-sm);overflow:hidden}
.tl .trecho{position:absolute;top:6px;bottom:6px;min-width:6px;padding:0;border:0;border-radius:4px;background:var(--accent);cursor:pointer}
.tl .trecho:hover,.tl .trecho:focus-visible{background:var(--accent-2);outline:2px solid var(--fg);outline-offset:1px}
.tl .buraco{position:absolute;top:14px;bottom:14px;background:var(--crit);opacity:.55;border-radius:3px}
.tl-eixo{display:flex;justify-content:space-between;font-size:.7rem;color:var(--mut);margin-top:4px}
.trechos{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:6px;font-family:var(--mono);font-size:.8rem}
.fotos-lista{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:6px}
.fotos-lista li{display:flex;gap:10px;align-items:center}

/* F2-T02b: revenda = telas do cliente com o cliente escolhido no topo */
.chip.troca{display:inline-flex;align-items:center;gap:6px;padding:3px 6px 3px 11px}
.chip.troca label{margin:0;font-family:var(--body);font-size:.78rem;letter-spacing:0;text-transform:none;color:var(--top-mut)}
.chip.troca select{width:auto;max-width:220px;padding:3px 8px;border:0;border-radius:999px;background:rgba(255,255,255,.14);color:var(--top-fg);font-size:.78rem;font-weight:600}
.chip.troca select option{color:#14354c;background:#fff}
.tbl.rola{max-height:68vh;overflow:auto}
.tbl.rola thead th{position:sticky;top:0;z-index:2;background:var(--panel)}
.tbl.rola tr.grupo th{position:static;background:var(--panel2);color:var(--fg);font-size:.8rem;letter-spacing:.02em;text-transform:none;padding:10px 8px;border-top:1px solid var(--line2)}
.novo-cli{display:flex;flex-wrap:wrap;gap:8px;align-items:center} .novo-cli input{width:240px;max-width:100%} .novo-cli .msg{flex-basis:100%}
.btn.p:hover{background:#07386a}
:root[data-theme="dark"] .btn.p:hover{background:#066975}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn.p:hover{background:#066975}}
.codigobox{font-size:1.7rem;letter-spacing:.22em;text-align:center;padding:16px;border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--bg);font-family:var(--display);font-weight:700;margin:12px 0 4px;user-select:all}
.login-card a{color:var(--fg);text-decoration:underline}

/* F2-T02b-2 (E19): "+ Nova câmera" como painel lateral sobre a tela Câmeras. Só tokens dos dois temas. */
.drawer-fundo{position:fixed;inset:0;z-index:40;background:rgba(7,21,35,.55)}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:41;width:min(560px,100vw);overflow-y:auto;padding:18px;
  background:var(--panel);color:var(--fg);border-left:1px solid var(--line2);box-shadow:var(--shadow)}
.drawer[hidden],.drawer-fundo[hidden]{display:none}
.drawer-cab{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;margin-bottom:16px}
.drawer-cab .sub{color:var(--mut);font-size:.84rem;margin-top:2px}
.drawer .grid{grid-template-columns:1fr}