/* Todo o estilo.css vive na cascade layer "legacy" (declarada e ordenada abaixo
   das layers do Tailwind em app/tailwind/input.css). Assim ele continua
   estilizando as telas ainda não migradas, mas perde para as classes Tailwind
   nas telas já migradas. Ao terminar a migração, este arquivo será removido. */
@layer legacy {
:root {
  --fundo: #0f1115;
  --painel: #171a21;
  --painel-alto: #1e222b;
  --borda: #2a2f3a;
  --texto: #e6e9ef;
  --texto-fraco: #98a1b3;
  --acento: #4c8dff;
  --entrada: #35c07a;
  --saida: #f0a03c;
  --alerta: #ef5d5d;
  --raio: 10px;
}

@media (prefers-color-scheme: light) {
  :root {
    --fundo: #f4f6fa;
    --painel: #ffffff;
    --painel-alto: #eef1f7;
    --borda: #d9dfea;
    --texto: #182034;
    --texto-fraco: #5c6577;
    --acento: #1f6feb;
    --entrada: #12864f;
    --saida: #b06a10;
    --alerta: #c2382f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
}

a { color: var(--acento); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- cabeçalho */

header.topo {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 12px 24px;
  background: var(--painel);
  border-bottom: 1px solid var(--borda);
  position: sticky;
  top: 0;
  z-index: 10;
  flex-wrap: wrap;
}

.marca { font-weight: 700; font-size: 17px; letter-spacing: .2px; }
.marca span { color: var(--acento); }

nav.menu { display: flex; gap: 4px; flex: 1; flex-wrap: wrap; }
nav.menu a {
  padding: 7px 14px;
  border-radius: var(--raio);
  color: var(--texto-fraco);
  font-weight: 500;
}
nav.menu a:hover { background: var(--painel-alto); text-decoration: none; color: var(--texto); }
nav.menu a.ativo { background: var(--acento); color: #fff; }

.relogio { font-variant-numeric: tabular-nums; color: var(--texto-fraco); font-size: 14px; }

main { padding: 24px; max-width: 1400px; margin: 0 auto; }

/* ---------------------------------------------------------------- avisos */

.aviso {
  padding: 12px 16px;
  border-radius: var(--raio);
  margin-bottom: 18px;
  border: 1px solid transparent;
}
.aviso.ok { background: color-mix(in srgb, var(--entrada) 15%, transparent); border-color: var(--entrada); }
.aviso.erro { background: color-mix(in srgb, var(--alerta) 15%, transparent); border-color: var(--alerta); }
.aviso.atencao { background: color-mix(in srgb, var(--saida) 15%, transparent); border-color: var(--saida); }

/* ---------------------------------------------------------------- cartões */

.cartoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.cartao {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px 18px;
}
.cartao .rotulo { color: var(--texto-fraco); font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
.cartao .valor { font-size: 34px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cartao.destaque .valor { color: var(--acento); }

.bloco {
  background: var(--painel);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin-bottom: 22px;
  overflow: hidden;
}
.bloco > h2 {
  margin: 0;
  padding: 14px 18px;
  font-size: 15px;
  border-bottom: 1px solid var(--borda);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bloco > h2 .contagem { color: var(--texto-fraco); font-weight: 400; font-size: 13px; }
.bloco .corpo { padding: 18px; }

.colunas { display: grid; grid-template-columns: 2fr 1fr; gap: 22px; align-items: start; }
@media (max-width: 1000px) { .colunas { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- tabelas */

table { width: 100%; border-collapse: collapse; }
th, td { padding: 11px 18px; text-align: left; border-bottom: 1px solid var(--borda); }
th { color: var(--texto-fraco); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--painel-alto); }
td.numero { font-variant-numeric: tabular-nums; }
.rolagem { overflow-x: auto; }

.placa {
  font-family: "Consolas", "SF Mono", monospace;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 1px;
}

.vazio { padding: 40px 18px; text-align: center; color: var(--texto-fraco); }

/* ---------------------------------------------------------------- etiquetas */

.etiqueta {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid currentColor;
}
.etiqueta.entrada { color: var(--entrada); }
.etiqueta.saida { color: var(--saida); }
.etiqueta.patio { color: var(--acento); }
.etiqueta.alerta { color: var(--alerta); }
.etiqueta.neutra { color: var(--texto-fraco); }

.ponto { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 7px; }
.ponto.on { background: var(--entrada); }
.ponto.off { background: var(--alerta); }

/* ---------------------------------------------------------------- formulários */

form.linha { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }

label.campo { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--texto-fraco); }

input, select, button {
  font: inherit;
  padding: 9px 12px;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
  background: var(--fundo);
  color: var(--texto);
}
input:focus, select:focus { outline: 2px solid var(--acento); outline-offset: -1px; }

input.placa-entrada {
  text-transform: uppercase;
  font-family: "Consolas", monospace;
  font-weight: 700;
  letter-spacing: 2px;
  font-size: 18px;
  width: 170px;
}

button {
  background: var(--acento);
  color: #fff;
  border-color: transparent;
  cursor: pointer;
  font-weight: 600;
}
button:hover { filter: brightness(1.1); }
button.secundario { background: transparent; color: var(--texto); border-color: var(--borda); }
button.perigo { background: transparent; color: var(--alerta); border-color: var(--alerta); }
button.pequeno { padding: 6px 11px; font-size: 13px; }

/* ---------------------------------------------------------------- câmeras */

.cameras { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.camera-cartao { background: var(--painel); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.camera-cartao img { width: 100%; display: block; background: #000; aspect-ratio: 16/9; object-fit: contain; }
/* Ocupa a mesma caixa da imagem: sem isso o cartão encolhe e a grade inteira
   pula a cada câmera que perde e recupera o sinal. */
.camera-cartao .preview-vazio { aspect-ratio: 16/9; background: #000; padding: 0;
  display: flex; align-items: center; justify-content: center; }
.camera-cartao .rodape { padding: 12px 14px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.camera-cartao .meta { color: var(--texto-fraco); font-size: 13px; }

.miniatura { width: 96px; border-radius: 6px; border: 1px solid var(--borda); display: block; }
.foto-grande { width: 100%; border-radius: var(--raio); border: 1px solid var(--borda); }

/* ---------------------------------------------------------------- eventos */

.eventos { list-style: none; margin: 0; padding: 0; max-height: 420px; overflow-y: auto; }
.eventos li { padding: 10px 18px; border-bottom: 1px solid var(--borda); display: flex; gap: 10px; align-items: baseline; }
.eventos li:last-child { border-bottom: none; }
.eventos .quando { color: var(--texto-fraco); font-size: 12px; font-variant-numeric: tabular-nums; min-width: 62px; }

/* ---------------------------------------------------------------- paginação */

.paginacao { display: flex; gap: 8px; align-items: center; justify-content: center; padding: 16px; }
.paginacao a, .paginacao span { padding: 7px 12px; border-radius: var(--raio); border: 1px solid var(--borda); }
.paginacao .atual { background: var(--acento); color: #fff; border-color: transparent; }

.detalhes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.detalhes dt { color: var(--texto-fraco); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; }
.detalhes dd { margin: 4px 0 0; font-size: 16px; }

footer.rodape { padding: 20px 24px; text-align: center; color: var(--texto-fraco); font-size: 13px; }

.usuario-topo { display: flex; align-items: center; gap: 10px; }
.usuario-topo .meta { color: var(--texto-fraco); font-size: 13px; }

.camera-pausada {
  aspect-ratio: 16/9;
  display: grid;
  place-items: center;
  text-align: center;
  background: var(--painel-alto);
  color: var(--texto-fraco);
  border-bottom: 1px solid var(--borda);
}
.camera-pausada .icone-pausa { font-size: 34px; margin-bottom: 8px; opacity: .7; }
.acoes-camera { display: flex; gap: 8px; align-items: flex-start; }

/* ---------------------------------------------------------------- cadastro de câmera */

.grade-formulario {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}
.grade-formulario .campo-largo { grid-column: 1 / -1; }
.grade-formulario input, .grade-formulario select { width: 100%; }
.campo-checkbox { justify-content: center; gap: 4px; }
.campo-checkbox span:first-child {
  display: flex; align-items: center; gap: 8px;
  color: var(--texto); font-size: 15px;
}
.campo-checkbox input { width: auto; }

.acoes-formulario { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

.camera-cartao .meta.url {
  font-family: "Consolas", monospace;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 340px;
}

/* ---------------------------------------------------------------- análise de vídeo */

.barra {
  height: 10px;
  background: var(--painel-alto);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}
.barra-cheia {
  height: 100%;
  background: var(--acento);
  border-radius: 999px;
  transition: width .4s ease;
}
input[type="file"] { padding: 7px; cursor: pointer; }

/* ---------------------------------------------------------------- seleção de recorte */

.area-recorte {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 0;
  touch-action: none;      /* o arraste desenha a seleção, não rola a página */
  cursor: crosshair;
  user-select: none;
}
.area-recorte img {
  max-width: 100%;
  display: block;
  border-radius: var(--raio);
  border: 1px solid var(--borda);
}
.selecao {
  position: absolute;
  border: 2px solid var(--acento);
  background: color-mix(in srgb, var(--acento) 18%, transparent);
  pointer-events: none;
  border-radius: 3px;
}

.dica-recorte {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, .65);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--raio);
  font-size: 14px;
  line-height: 1.4;
  pointer-events: none;
}

.editor-recorte {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 22px;
  align-items: start;
}
@media (max-width: 1100px) { .editor-recorte { grid-template-columns: 1fr; } }

.painel-previa {
  background: var(--painel-alto);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  padding: 16px;
}
.painel-previa .rotulo {
  color: var(--texto-fraco);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-bottom: 10px;
}
.painel-previa canvas {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 6px;
  border: 1px solid var(--borda);
  background: #000;
}

/* Alças de redimensionamento nos cantos da seleção. */
.selecao { pointer-events: auto; }
.alca {
  position: absolute;
  width: 16px;
  height: 16px;
  background: var(--acento);
  border: 2px solid #fff;
  border-radius: 50%;
  pointer-events: auto;
}
.alca[data-canto="no"] { left: -8px;  top: -8px;    cursor: nwse-resize; }
.alca[data-canto="ne"] { right: -8px; top: -8px;    cursor: nesw-resize; }
.alca[data-canto="so"] { left: -8px;  bottom: -8px; cursor: nesw-resize; }
.alca[data-canto="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }

/* ================================================================ tela de câmeras
   Três layouts na mesma tela (Central / Claro / Leitura), escolhidos no seletor
   e guardados no navegador. Cada layout é uma PALETA (variáveis) + alguns ajustes
   de estrutura; os componentes são escritos uma vez e leem as variáveis, então a
   troca é instantânea e nada aqui depende do tema do sistema operacional.
   Classes próprias (cams-/cam-/lp-/leitura-/seletor-) — DVR e Painel não são
   tocados, que ainda usam .cameras / .camera-cartao. */

.cams-tela {
  --acc-tx: #052027;
  border-radius: 14px;
  padding: 18px 18px 22px;
  background: var(--bg);
  color: var(--tx);
}
.cams-tela[data-layout="central"] {
  --bg:#0A0D10; --card:#0F1318; --field:#12171D; --stage:#06080b; --line:#1E252D;
  --tx:#E8EDF2; --dim:#98A5B4; --acc:#FFB223; --acc-tx:#0A0D10;
  --live:#34D399; --off:#F5556D; --wait:#FFC85C; --chip:rgba(8,11,14,.72); --shadow:none;
}
.cams-tela[data-layout="claro"] {
  --bg:#f4f6f9; --card:#ffffff; --field:#ffffff; --stage:#eef1f6; --line:#e4e8ef;
  --tx:#1a2233; --dim:#66708a; --acc:#4f46e5; --acc-tx:#ffffff;
  --live:#12a150; --off:#e5484d; --wait:#c77d00; --chip:#ffffff; --shadow:0 1px 2px rgba(20,30,50,.05);
}
.cams-tela[data-layout="leitura"] {
  --bg:#151210; --card:#1e1a15; --field:#171310; --stage:#0c0a08; --line:#332c24;
  --tx:#f2ece1; --dim:#a89a86; --acc:#FFB223; --acc-tx:#0A0D10;
  --live:#34D399; --off:#ef6b62; --wait:#f0b64e; --chip:rgba(10,8,6,.66); --shadow:none;
}

.cams-tela [hidden] { display: none !important; }
.cams-tela a { color: var(--acc); }
.cams-tela .meta, .cams-tela .vazio { color: var(--dim); }

/* ---- cabeçalho da tela + seletor ---- */
.cams-topo { display:flex; align-items:flex-end; gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.cams-titulo h1 { margin:0; font-size:22px; font-weight:700; letter-spacing:.2px; color:var(--tx); }
.cams-resumo { margin:5px 0 0; font-size:13.5px; color:var(--dim); }
.cams-resumo b { font-weight:700; }
.tx-vivo { color:var(--live); } .tx-sem { color:var(--off); } .tx-pend { color:var(--wait); }
.cams-controles { margin-left:auto; display:flex; align-items:center; gap:12px; }
.seletor-layout { display:inline-flex; gap:3px; padding:4px; border-radius:11px; background:var(--field); border:1px solid var(--line); }
.seletor-layout .op { padding:7px 13px; border:none; border-radius:8px; background:transparent; color:var(--dim);
  font:inherit; font-weight:600; font-size:13px; cursor:pointer; }
.seletor-layout .op:hover { color:var(--tx); }
.seletor-layout .op[aria-pressed="true"] { background:var(--card); color:var(--tx); box-shadow:0 1px 3px rgba(0,0,0,.18); }

/* ---- grade e cartão de câmera (comuns aos três layouts) ---- */
.cams-grade { display:grid; gap:14px; grid-template-columns:repeat(auto-fill, minmax(270px, 1fr)); }
.cam-cartao { background:var(--card); border:1px solid var(--line); border-radius:13px; overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow); }
.cam-cartao[data-st="semsinal"] { border-color:color-mix(in srgb, var(--off) 45%, var(--line)); }

/* 16:9 é o palco padrão. A proporção real é corrigida no backend por câmera
   (campo "proporcao": esticar 960x1080 anamórfico para 16:9), então a imagem
   chega aqui já certa; object-fit:contain acomoda quem estiver em outra razão. */
.cam-palco { position:relative; aspect-ratio:16/9; background:var(--stage); display:grid; place-items:center; overflow:hidden; }
.cam-palco img.preview { width:100%; height:100%; object-fit:contain; display:block; }
.cam-vazio { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; color:var(--dim); padding:14px; }
.cam-vazio b { font-size:14px; font-weight:700; letter-spacing:.4px; color:var(--tx); }
.cam-vazio span { font-size:11.5px; color:var(--dim); }
.cam-cartao[data-st="semsinal"] .cam-vazio b { color:var(--off); }

.cam-selo { position:absolute; top:10px; left:10px; display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px; border-radius:7px; font-size:11px; font-weight:700; letter-spacing:.4px;
  background:var(--chip); backdrop-filter:blur(3px); box-shadow:var(--shadow); }
.cam-led { width:7px; height:7px; border-radius:50%; background:currentColor; }
.cam-selo-aovivo { color:var(--live); } .cam-selo-semsinal { color:var(--off); }
.cam-selo-pausada { color:var(--wait); } .cam-selo-desativada, .cam-selo-conectando { color:var(--dim); }

.cam-pend { position:absolute; left:10px; bottom:10px; display:flex; flex-wrap:wrap; gap:6px; }
.cam-pend-item { display:inline-flex; align-items:center; gap:6px; padding:4px 7px; border-radius:7px;
  background:var(--chip); border:1px solid var(--wait); font-size:11px; font-weight:700; color:var(--wait); backdrop-filter:blur(3px); }
.cam-pend-lp { font-family:"Consolas","SF Mono",monospace; letter-spacing:1px; background:#eef2f6; color:#10151b; padding:1px 6px; border-radius:4px; }

.cam-rodape { padding:11px 13px; display:flex; flex-direction:column; gap:8px; border-top:1px solid var(--line); }
.cam-ident { display:flex; align-items:center; gap:9px; min-width:0; }
.cam-ident strong { font-size:14.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cam-dir { flex:none; font-size:10.5px; font-weight:700; color:var(--dim); border:1px solid var(--line); padding:2px 7px; border-radius:6px; letter-spacing:.3px; }
.cam-acoes { display:flex; gap:6px; flex-wrap:wrap; }
.cam-acoes form { margin:0; }
.cams-tela .cam-acoes button { background:transparent; color:var(--tx); border:1px solid var(--line); }
.cams-tela .cam-acoes button:hover { border-color:var(--acc); color:var(--acc); filter:none; }
.cam-erro { font-size:12px; color:var(--off); }

.cam-tec { font-size:12.5px; }
.cam-tec > summary { cursor:pointer; color:var(--dim); font-weight:600; list-style:none; }
.cam-tec > summary::-webkit-details-marker { display:none; }
.cam-tec > summary::before { content:"▸ "; font-size:11px; }
.cam-tec[open] > summary::before { content:"▾ "; }
.cam-tec-corpo { margin-top:8px; display:flex; flex-direction:column; gap:5px; }
.cam-tec-linha { display:flex; gap:10px; align-items:baseline; }
.cam-tec-linha span { flex:none; color:var(--dim); min-width:88px; }
.cam-tec-linha code { font-family:"Consolas",monospace; font-size:11.5px; color:var(--tx);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ---- painel de leitura (só no layout leitura) ---- */
.leitura-painel { display:none; }
.cams-tela[data-layout="leitura"] .leitura-painel {
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:18px; margin-bottom:20px;
}
.lp-hero { background:linear-gradient(160deg, color-mix(in srgb, var(--card) 88%, #fff 4%), var(--card));
  border:1px solid var(--line); border-radius:16px; padding:20px; display:flex; flex-direction:column; gap:8px; }
.lp-hero-rot, .lp-feed-rot { font-size:11px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--dim); }
.lp-selo { align-self:flex-start; font-size:12px; font-weight:700; padding:4px 10px; border-radius:999px;
  background:color-mix(in srgb, var(--acc) 16%, transparent); color:var(--acc); }
.lp-selo-saida { background:color-mix(in srgb, var(--wait) 16%, transparent); color:var(--wait); }
.lp-texto { font-size:30px; font-weight:800; letter-spacing:.5px; color:var(--tx); line-height:1.1; }
.lp-meta { font-size:13px; color:var(--dim); }
.lp-espera { font-size:16px; color:var(--dim); padding:14px 0; }
.lp-feed { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px 18px; }
.lp-feed-rot { margin-bottom:6px; }
.lp-ev { display:flex; align-items:center; gap:11px; padding:11px 0; border-bottom:1px solid var(--line); }
.lp-ev:last-child { border-bottom:none; }
.lp-ev-k { flex:none; width:26px; height:26px; border-radius:7px; display:grid; place-items:center; font-weight:800;
  background:color-mix(in srgb, var(--live) 14%, transparent); color:var(--live); }
.lp-ev-saida .lp-ev-k { background:color-mix(in srgb, var(--wait) 14%, transparent); color:var(--wait); }
.lp-ev-tx { font-weight:700; font-size:14px; }
.lp-ev-cam { color:var(--dim); font-size:12px; }
.lp-ev-h { margin-left:auto; color:var(--dim); font-size:12px; font-variant-numeric:tabular-nums; }
.lp-feed-vazio { color:var(--dim); font-size:13px; padding:10px 0; }

/* ---- layout CLARO: mais espaço, cartões maiores ---- */
.cams-tela[data-layout="claro"] { padding:20px 22px 26px; }
.cams-tela[data-layout="claro"] .cams-grade { gap:18px; grid-template-columns:repeat(auto-fill, minmax(360px, 1fr)); }
.cams-tela[data-layout="claro"] .cam-palco { aspect-ratio:16/9; }
.cams-tela[data-layout="claro"] .cam-cartao { border-radius:16px; }

/* ---- layout LEITURA: câmeras viram tiras compactas de apoio ---- */
.cams-tela[data-layout="leitura"] .cams-grade { gap:10px; grid-template-columns:repeat(auto-fill, minmax(158px, 1fr)); }
.cams-tela[data-layout="leitura"] .cam-acoes,
.cams-tela[data-layout="leitura"] .cam-tec,
.cams-tela[data-layout="leitura"] .cam-erro { display:none; }
.cams-tela[data-layout="leitura"] .cam-rodape { padding:8px 10px; }
.cams-tela[data-layout="leitura"] .cam-ident strong { font-size:13px; }
.cams-tela[data-layout="leitura"] .cam-selo span:not(.cam-led) { display:none; }
.cams-tela[data-layout="leitura"] .cam-selo { padding:5px; gap:0; }

/* ---- formulários e blocos dobráveis, na paleta do layout ---- */
.cams-tela .bloco.dobra { background:var(--card); border:1px solid var(--line); border-radius:13px; overflow:hidden; margin-top:16px; }
.cams-tela .dobra > summary { cursor:pointer; list-style:none; padding:14px 17px; font-size:15px; font-weight:600;
  color:var(--tx); display:flex; align-items:center; gap:10px; }
.cams-tela .dobra > summary::-webkit-details-marker { display:none; }
.cams-tela .dobra > summary::before { content:"▸"; color:var(--dim); font-size:12px; }
.cams-tela .dobra[open] > summary::before { content:"▾"; }
.cams-tela .dobra-dica { margin-left:auto; color:var(--dim); font-weight:400; font-size:12.5px; }
.cams-tela .dobra .corpo { padding:17px; border-top:1px solid var(--line); }
.cams-tela .dobra .corpo p { color:var(--tx); }
.cams-tela .cancelar-edicao { display:inline-block; margin-bottom:14px; }
.cams-tela label.campo { color:var(--dim); }
.cams-tela .campo-checkbox span:first-child { color:var(--tx); }
.cams-tela input, .cams-tela select { background:var(--field); border:1px solid var(--line); color:var(--tx); }
.cams-tela .acoes-formulario button[type="submit"] { background:var(--acc); color:var(--acc-tx); border:none; }
.cams-tela .bloco.dobra code { color:var(--acc); }

@media (max-width: 640px) {
  .cams-tela[data-layout="leitura"] .leitura-painel { grid-template-columns:1fr; }
  .cams-controles { margin-left:0; width:100%; }
}

/* ================================================================ painel (dashboard)
   Usa os tokens de tema (claro/escuro flipam sozinhos). Escopo em .painel para
   não mexer em Histórico/Leituras/Movimento, que compartilham .bloco e tabelas. */
.painel .estatisticas {
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:14px; margin-bottom:22px;
}
.painel .estat {
  display:flex; align-items:center; gap:14px; background:var(--painel);
  border:1px solid var(--borda); border-radius:14px; padding:16px 18px;
}
.painel .estat-icone {
  width:46px; height:46px; flex:none; border-radius:12px; display:grid; place-items:center;
  background:var(--painel-alto); color:var(--texto-fraco);
}
.painel .estat-valor { font-size:30px; font-weight:800; line-height:1.05; font-variant-numeric:tabular-nums; }
.painel .estat-rotulo { font-size:12px; color:var(--texto-fraco); text-transform:uppercase; letter-spacing:.5px; margin-top:2px; }
.painel .estat-destaque { border-color:color-mix(in srgb, var(--acento) 45%, var(--borda)); }
.painel .estat-destaque .estat-icone { background:color-mix(in srgb, var(--acento) 15%, transparent); color:var(--acento); }
.painel .estat-destaque .estat-valor { color:var(--acento); }
.painel .estat-entrada .estat-icone { background:color-mix(in srgb, var(--entrada) 15%, transparent); color:var(--entrada); }
.painel .estat-saida  .estat-icone { background:color-mix(in srgb, var(--saida) 15%, transparent); color:var(--saida); }

.painel .bloco { border-radius:14px; }

/* registro manual: alinhar os campos e o botão pela base */
.painel form.linha { align-items:flex-end; }
.painel form.linha button[type="submit"] { padding:10px 18px; }

/* pátio: placa em chip, foto arredondada, linha com hover */
.painel .placa {
  display:inline-block; font-family:"Consolas","SF Mono",monospace; font-weight:700; letter-spacing:1px;
  background:var(--painel-alto); border:1px solid var(--borda); border-radius:8px; padding:4px 10px; color:var(--texto);
}
.painel .placa:hover { text-decoration:none; border-color:var(--acento); color:var(--acento); }
.painel .miniatura {
  width:66px; height:42px; object-fit:cover; border-radius:8px; border:1px solid var(--borda);
}
.painel tbody tr:hover { background:var(--painel-alto); }
.painel table th, .painel table td { padding:12px 18px; }

/* eventos e lista de câmeras um pouco mais espaçados */
.painel .eventos li { padding:12px 18px; }
.painel .eventos .quando { min-width:58px; }
.painel #lista-cameras td { padding:11px 18px; }
.painel #lista-cameras a { font-weight:600; }

/* ================================================================ formulário em cards
   O cadastro/edição de câmera vira cards temáticos (Identificação, Conexão, Imagem,
   Análise, Situação), cada um com título e uma linha de ajuda. Tudo lê as variáveis
   do layout (--field/--card/--line/--tx/--dim/--acc…), então os três layouts
   (central/claro/leitura) ficam coerentes sem cor fixa. Classes próprias (.form-*),
   sem tocar nas regras já existentes acima. */

.cams-tela .form-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 920px;
  margin-bottom: 4px;
}

.cams-tela .form-card {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.cams-tela .form-card-cab {
  padding: 13px 16px 12px;
  border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--tx) 3.5%, transparent);
}
.cams-tela .form-card-tit {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--tx);
  display: flex;
  align-items: center;
  gap: 9px;
}
.cams-tela .form-card-tit::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--acc);
  flex: none;
}
.cams-tela .form-card-ajuda {
  margin: 6px 0 0;
  padding-left: 17px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--dim);
}
.cams-tela .form-card-ajuda strong { color: var(--tx); font-weight: 700; }

.cams-tela .form-card-grade {
  padding: 15px 16px 17px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px 16px;
}
.cams-tela .form-card-grade .campo-largo { grid-column: 1 / -1; }
.cams-tela .form-card-grade input,
.cams-tela .form-card-grade select { width: 100%; }
/* o checkbox não pode esticar como os demais campos */
.cams-tela .form-card-grade .campo-checkbox input { width: auto; }
.cams-tela .form-card-grade .campo-checkbox { justify-content: flex-start; gap: 6px; }
.cams-tela .form-card-grade .campo-checkbox .meta { padding-left: 26px; }

/* barra de ações como rodapé do formulário */
.cams-tela .acoes-formulario {
  max-width: 920px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.cams-tela .acoes-formulario button { padding: 10px 18px; }
.cams-tela .acoes-formulario .cancelar-edicao { display: inline-flex; margin: 0; }
.cams-tela .acoes-formulario button.secundario,
.cams-tela .acoes-formulario .cancelar-edicao button {
  background: transparent;
  color: var(--tx);
  border: 1px solid var(--line);
}
.cams-tela .acoes-formulario button.secundario:hover,
.cams-tela .acoes-formulario .cancelar-edicao button:hover { border-color: var(--acc); color: var(--acc); filter: none; }
/* Excluir: destrutivo, separado à direita e na cor de alerta do layout */
.cams-tela .acoes-formulario button.perigo,
.cams-tela .acoes-formulario button.perigo[type="submit"] {
  margin-left: auto;
  background: transparent;
  color: var(--off);
  border: 1px solid var(--off);
}
.cams-tela .acoes-formulario button.perigo:hover { background: color-mix(in srgb, var(--off) 12%, transparent); filter: none; }

@media (max-width: 560px) {
  .cams-tela .acoes-formulario button,
  .cams-tela .acoes-formulario .cancelar-edicao { flex: 1 1 100%; }
  .cams-tela .acoes-formulario .cancelar-edicao button { width: 100%; }
  .cams-tela .acoes-formulario button.perigo { margin-left: 0; }
}

} /* fim @layer legacy */