/* ==========================================================================
   VPARK — painel operacional
   --------------------------------------------------------------------------
   Identidade herdada do site da Valongo's Park: fundo quase preto,
   carmim #cd0e3b, raio de 8px.

   Sem CDN e sem webfont, de proposito: o sistema roda na maquina do
   estacionamento, junto do NVR, e precisa abrir igual com a internet caida.
   ========================================================================== */

:root {
    /* Superficies — mesma escala do site (HSL 0 0% 4/7/12/15%) */
    --bg: #0a0a0a;
    --surface: #121212;
    --surface-2: #1f1f1f;
    --surface-3: #262626;
    --border: #262626;
    --border-strong: #3a3a3a;

    /* Texto */
    --fg: #fafafa;
    --fg-muted: #a6a6a6;
    --fg-dim: #6f6f6f;

    /* Marca */
    --primary: #cd0e3b;
    --primary-hover: #e31045;
    --primary-dim: rgba(205, 14, 59, 0.12);
    --primary-line: rgba(205, 14, 59, 0.35);

    /* Semantica — leitura de placa, estado de captura */
    --ok: #22c55e;
    --ok-dim: rgba(34, 197, 94, 0.12);
    --ok-linha: rgba(34, 197, 94, 0.3);
    --warn: #eab308;
    --warn-dim: rgba(234, 179, 8, 0.12);
    --warn-linha: rgba(234, 179, 8, 0.3);
    --corrigida: #c4b5fd;
    --corrigida-dim: rgba(139, 92, 246, 0.16);
    --corrigida-linha: rgba(139, 92, 246, 0.4);
    --danger: #ef4444;
    --danger-dim: rgba(239, 68, 68, 0.12);
    --danger-linha: rgba(239, 68, 68, 0.3);

    /* Superficies translucidas, realce de hover e as luzes do fundo.
       Tokens porque mudam de sinal entre os dois temas: no escuro o
       realce e um veu branco, no claro e um veu preto. */
    --vidro: rgba(10, 10, 10, 0.85);
    --vidro-forte: rgba(10, 10, 10, 0.8);
    --veu: rgba(0, 0, 0, 0.6);
    --realce: rgba(255, 255, 255, 0.03);
    --brilho-1: rgba(205, 14, 59, 0.07);
    --brilho-2: rgba(205, 14, 59, 0.04);

    --radius: 0.5rem;
    --radius-sm: 0.375rem;
    --radius-lg: 0.875rem;

    --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas, "Liberation Mono", monospace;

    --shadow: 0 1px 2px rgba(0, 0, 0, 0.6), 0 8px 24px -12px rgba(0, 0, 0, 0.8);

    /* Faz o seletor nativo de data/hora e as barras de rolagem
       acompanharem o tema escuro. */
    color-scheme: dark;
}


/* ===== Tema claro =======================================================

   O desenho nasceu escuro, entao o :root acima e o tema escuro e o claro
   entra por cima, em dois lugares: pela preferencia do sistema (quando
   ninguem escolheu nada) e pelo botao (que manda nos dois sentidos).

   As cores das series dos graficos NAO mudam: o par azul/ambar foi
   verificado contra os dois fundos e passa nos dois.                      */

@media (prefers-color-scheme: light) {
    :root:not([data-tema="escuro"]) {
    /* Superficies: off-white levemente puxado para o carmim, nunca branco
       puro no fundo — branco puro fica duro numa tela de operacao usada
       o dia inteiro. O branco fica reservado aos cartoes. */
    --bg: #f7f4f5;
    --surface: #ffffff;
    --surface-2: #f1ecee;
    --surface-3: #e6dee1;
    --border: #e4dbdf;
    --border-strong: #cdc1c6;

    --fg: #1a1416;
    --fg-muted: #6a5f63;
    --fg-dim: #958a8e;

    --primary: #cd0e3b;
    --primary-hover: #a80a2f;
    --primary-dim: rgba(205, 14, 59, 0.08);
    --primary-line: rgba(205, 14, 59, 0.28);

    /* Semantica fechada: os tons claros do tema escuro somem no branco. */
    --ok: #15803d;
    --ok-dim: rgba(21, 128, 61, 0.1);
    --ok-linha: rgba(21, 128, 61, 0.28);
    --warn: #a16207;
    --warn-dim: rgba(161, 98, 7, 0.1);
    --warn-linha: rgba(161, 98, 7, 0.28);
    --corrigida: #6d28d9;
    --corrigida-dim: rgba(109, 40, 217, 0.1);
    --corrigida-linha: rgba(109, 40, 217, 0.3);
    --danger: #b91c1c;
    --danger-dim: rgba(185, 28, 28, 0.1);
    --danger-linha: rgba(185, 28, 28, 0.28);

    --vidro: rgba(247, 244, 245, 0.88);
    --vidro-forte: rgba(247, 244, 245, 0.85);
    --veu: rgba(26, 20, 22, 0.45);
    --realce: rgba(26, 20, 22, 0.035);
    --brilho-1: rgba(205, 14, 59, 0.05);
    --brilho-2: rgba(205, 14, 59, 0.03);

    --grade: rgba(26, 20, 22, 0.08);

    --shadow: 0 1px 2px rgba(26, 20, 22, 0.05), 0 8px 24px -14px rgba(26, 20, 22, 0.22);

    color-scheme: light;
    }
}

:root[data-tema="claro"] {
    /* Superficies: off-white levemente puxado para o carmim, nunca branco
       puro no fundo — branco puro fica duro numa tela de operacao usada
       o dia inteiro. O branco fica reservado aos cartoes. */
    --bg: #f7f4f5;
    --surface: #ffffff;
    --surface-2: #f1ecee;
    --surface-3: #e6dee1;
    --border: #e4dbdf;
    --border-strong: #cdc1c6;

    --fg: #1a1416;
    --fg-muted: #6a5f63;
    --fg-dim: #958a8e;

    --primary: #cd0e3b;
    --primary-hover: #a80a2f;
    --primary-dim: rgba(205, 14, 59, 0.08);
    --primary-line: rgba(205, 14, 59, 0.28);

    /* Semantica fechada: os tons claros do tema escuro somem no branco. */
    --ok: #15803d;
    --ok-dim: rgba(21, 128, 61, 0.1);
    --ok-linha: rgba(21, 128, 61, 0.28);
    --warn: #a16207;
    --warn-dim: rgba(161, 98, 7, 0.1);
    --warn-linha: rgba(161, 98, 7, 0.28);
    --corrigida: #6d28d9;
    --corrigida-dim: rgba(109, 40, 217, 0.1);
    --corrigida-linha: rgba(109, 40, 217, 0.3);
    --danger: #b91c1c;
    --danger-dim: rgba(185, 28, 28, 0.1);
    --danger-linha: rgba(185, 28, 28, 0.28);

    --vidro: rgba(247, 244, 245, 0.88);
    --vidro-forte: rgba(247, 244, 245, 0.85);
    --veu: rgba(26, 20, 22, 0.45);
    --realce: rgba(26, 20, 22, 0.035);
    --brilho-1: rgba(205, 14, 59, 0.05);
    --brilho-2: rgba(205, 14, 59, 0.03);

    --grade: rgba(26, 20, 22, 0.08);

    --shadow: 0 1px 2px rgba(26, 20, 22, 0.05), 0 8px 24px -14px rgba(26, 20, 22, 0.22);

    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-ui);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* Textura sutil de fundo: duas luzes carmim muito fracas, para a tela
   nao ficar um retangulo preto morto. */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(60rem 30rem at 85% -10%, var(--brilho-1), transparent 70%),
        radial-gradient(50rem 25rem at 0% 0%, var(--brilho-2), transparent 70%);
}

a {
    color: inherit;
}

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

/* ===== Barra lateral ===================================================== */

:root {
    --larg-lateral: 15rem;
    --larg-lateral-fechada: 4.25rem;
    /* Altura do cabecalho que so existe no celular. Esta aqui porque dois
       lugares precisam concordar: o proprio cabecalho e a altura minima do
       conteudo, que desconta ele. */
    --alt-cabecalho-movel: 3.5rem;
}

/* Recolhida: so os icones. A escolha fica salva no navegador de quem usa. */
html.lateral-fechada {
    --larg-lateral: var(--larg-lateral-fechada);
}

.lateral {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 40;
    width: var(--larg-lateral);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border-right: 1px solid var(--border);
    padding-top: env(safe-area-inset-top, 0px);
    transition: width 0.18s ease, transform 0.18s ease;
    overflow: hidden;
}

.lateral-topo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    height: 4rem;
    padding: 0 0.75rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.lateral-logo {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
    text-decoration: none;
    overflow: hidden;
}

.lateral-logo img {
    height: 1.75rem;
    width: auto;
    display: block;
}

/* O link inteiro sai, nao so a imagem: com flex:1 ele continuava ocupando
   a faixa e empurrava o botao para o canto. */
html.lateral-fechada .lateral-logo {
    display: none;
}

/* Recolhida sobra so o botao, centrado: e por ele que se volta. */
html.lateral-fechada .lateral-topo {
    justify-content: center;
    padding: 0 0.5rem;
}

html.lateral-fechada .lateral-alternar {
    display: grid;
}

/* A seta so aparece recolhida; aberta, volta o traco triplo. */
.icone-expandir {
    display: none;
}

html.lateral-fechada .lateral-alternar .icone-recolher {
    display: none;
}

html.lateral-fechada .lateral-alternar .icone-expandir {
    display: block;
}

.lateral-alternar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-dim);
    cursor: pointer;
}

.lateral-alternar:hover {
    background: var(--surface-2);
    color: var(--fg);
}

.lateral-nav {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.75rem 0.5rem;
    /* overflow-x explicito: com apenas overflow-y:auto o navegador promove
       o eixo horizontal de visible para auto, e qualquer coisa que passe da
       borda vira barra de rolagem. */
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
}

/* Recolhida, o nome de cada item e um balao posicionado fora da barra.
   Nenhum dos dois containers pode recortar, senao o balao some e a
   largura extra vira rolagem horizontal. */
html.lateral-fechada .lateral,
html.lateral-fechada .lateral-nav,
html.lateral-fechada .lateral-rodape {
    overflow: visible;
}

.lateral-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.6875rem;
    border-radius: var(--radius);
    color: var(--fg-muted);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    position: relative;
}

.lateral-item svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

.lateral-item:hover {
    background: var(--surface-2);
    color: var(--fg);
}

.lateral-item[aria-current="page"] {
    background: var(--primary-dim);
    color: var(--fg);
    box-shadow: inset 0 0 0 1px var(--primary-line);
}

.lateral-item[aria-current="page"] svg {
    color: var(--primary);
}

.lateral-texto {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}

html.lateral-fechada .lateral-texto {
    display: none;
}

html.lateral-fechada .lateral-item {
    justify-content: center;
    padding: 0.625rem 0;
}

/* Recolhida, o nome vira balao no hover — senao viram cinco icones mudos. */
html.lateral-fechada .lateral-item::after {
    content: attr(data-nome);
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    color: var(--fg);
    font-size: 0.8125rem;
    white-space: nowrap;
    pointer-events: none;
    box-shadow: var(--shadow);
    /* display e nao visibility: escondido por visibility o balao continua
       ocupando largura, e essa largura empurrava a rolagem horizontal. */
    display: none;
}

html.lateral-fechada .lateral-item:hover::after,
html.lateral-fechada .lateral-item:focus-visible::after {
    display: block;
}

.lateral-rodape {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.625rem 0.5rem 0.75rem;
    border-top: 1px solid var(--border);
    font-size: 0.6875rem;
    color: var(--fg-dim);
    white-space: nowrap;
    overflow: hidden;
}

.lateral-creditos {
    padding: 0 0.1875rem;
}

html.lateral-fechada .lateral-creditos {
    display: none;
}

/* ===== Botao de tema ===================================================== */

.tema-botao {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.5rem 0.6875rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: transparent;
    color: var(--fg-muted);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
    position: relative;
}

.tema-botao:hover {
    background: var(--surface-2);
    color: var(--fg);
}

.tema-botao svg {
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
}

html.lateral-fechada .tema-botao {
    justify-content: center;
    padding: 0.5rem 0;
}

html.lateral-fechada .tema-botao .lateral-texto {
    display: none;
}

html.lateral-fechada .tema-botao::after {
    content: attr(data-nome);
    position: absolute;
    left: calc(100% + 0.5rem);
    top: 50%;
    transform: translateY(-50%);
    z-index: 50;
    padding: 0.375rem 0.625rem;
    border-radius: var(--radius-sm);
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    color: var(--fg);
    font-size: 0.8125rem;
    pointer-events: none;
    box-shadow: var(--shadow);
    display: none;
}

html.lateral-fechada .tema-botao:hover::after,
html.lateral-fechada .tema-botao:focus-visible::after {
    display: block;
}

/* O botao anuncia para onde vai, nao onde esta: no escuro mostra o sol
   ("ir para o claro"), no claro mostra a lua. Trocado por CSS, com os
   mesmos seletores do tema, para nao piscar o rotulo errado na carga. */
.tema-para-claro { display: inline-flex; }
.tema-para-escuro { display: none; }

@media (prefers-color-scheme: light) {
    :root:not([data-tema="escuro"]) .tema-para-claro { display: none; }
    :root:not([data-tema="escuro"]) .tema-para-escuro { display: inline-flex; }
}

:root[data-tema="claro"] .tema-para-claro { display: none; }
:root[data-tema="claro"] .tema-para-escuro { display: inline-flex; }


/* Cabecalho que so aparece no celular, para abrir a gaveta.
   Fixed e nao sticky: sticky fica no fluxo, entao a altura dele somava aos
   100vh do conteudo e a pagina nascia rolando. Fora do fluxo, quem abre
   espaco para ele e o padding do conteudo, que o border-box ja conta
   dentro da altura minima. */
.lateral-movel {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 30;
    align-items: center;
    gap: 0.75rem;
    height: var(--alt-cabecalho-movel);
    padding: 0 1rem;
    padding-top: env(safe-area-inset-top, 0px);
    background: var(--vidro);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
}

.lateral-movel img {
    height: 1.375rem;
    width: auto;
}

.lateral-sombra {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 35;
    background: var(--veu);
}

/* ===== Estrutura da pagina ================================================ */

.conteudo {
    margin-left: var(--larg-lateral);
    transition: margin-left 0.18s ease;
    /* Coluna para o rodape encostar no fim da janela em pagina curta, em
       vez de parar no meio da tela com branco embaixo. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.shell {
    position: relative;
    z-index: 1;
    flex: 1 0 auto;
    width: 100%;
    max-width: 72rem;
    margin: 0 auto;
    padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) 4rem;
}

.page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}

.page-title {
    margin: 0;
    font-size: clamp(1.5rem, 3.5vw, 1.875rem);
    font-weight: 650;
    letter-spacing: -0.02em;
    text-wrap: balance;
}

.page-sub {
    margin: 0.375rem 0 0;
    color: var(--fg-muted);
    max-width: 52ch;
}

.eyebrow {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary);
    margin-bottom: 0.375rem;
}

/* ===== Cartoes =========================================================== */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.card + .card {
    margin-top: 1.25rem;
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.card-title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.card-note {
    margin: 0.1875rem 0 0;
    font-size: 0.8125rem;
    color: var(--fg-muted);
}

.card-body {
    padding: 1.25rem;
}

/* ===== Formularios ======================================================= */

.field {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.field-label {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.input {
    width: 100%;
    min-width: 0;
    padding: 0.625rem 0.75rem;
    background: var(--bg);
    color: var(--fg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    font-family: inherit;
    font-size: 0.9375rem;
}

.input::placeholder {
    color: var(--fg-dim);
}

.input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-dim);
}

/* Campo de placa: caixa alta, espacado, monoespacado — igual a placa real */
.input-placa {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.input-codigo {
    font-family: var(--font-mono);
    font-size: 1.125rem;
    letter-spacing: 0.08em;
}

/* Placa, codigo e botao dividem uma coluna da grade de busca. As larguras
   minimas padrao do .form-row nao cabem nela, e os campos quebravam um por
   linha — o codigo precisa ficar ao lado da placa, nao embaixo dela.
   O codigo e um numero curto: do mesmo tamanho da placa, sugeriria que cabe
   mais coisa nele. */
.busca-placa .form-row > .field {
    flex: 1 1 9rem;
}

.busca-placa .form-row > .field-codigo {
    flex: 0 1 8.5rem;
}

.form-row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.form-row > .field {
    flex: 1 1 14rem;
}

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 0.875rem;
    align-items: end;
}

/* Bloco de busca da consulta: os dois caminhos lado a lado, separados
   por uma regra com "ou" no meio. */
.busca {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.25rem;
    align-items: start;
}

.busca-ou {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    color: var(--fg-dim);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.busca-ou::before,
.busca-ou::after {
    content: "";
    flex: 1;
    width: 1px;
    background: var(--border);
}

.atalhos-data {
    display: flex;
    justify-content: center;
    gap: 0.375rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

@media (max-width: 860px) {
    .busca {
        grid-template-columns: 1fr;
    }

    .busca-ou {
        flex-direction: row;
        align-self: auto;
    }

    .busca-ou::before,
    .busca-ou::after {
        width: auto;
        height: 1px;
        flex: 1;
    }
}

/* ===== Botoes ============================================================ */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4375rem;
    padding: 0.625rem 1.125rem;
    border: 1px solid transparent;
    border-radius: var(--radius);
    background: var(--surface-2);
    color: var(--fg);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 550;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.btn:hover {
    background: var(--surface-3);
}

.btn-primary {
    background: var(--primary);
    color: #fff;
}

.btn-primary:hover {
    background: var(--primary-hover);
}

.btn-ghost {
    background: transparent;
    border-color: var(--border-strong);
    color: var(--fg-muted);
}

.btn-ghost:hover {
    background: var(--surface-2);
    color: var(--fg);
}

.btn-sm {
    padding: 0.375rem 0.6875rem;
    font-size: 0.8125rem;
}

/* ===== Placa ============================================================= */

.placa {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.5625rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    font-family: var(--font-mono);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-decoration: none;
    white-space: nowrap;
}

a.placa:hover {
    border-color: var(--primary);
    background: var(--primary-dim);
}

.placa.is-vazia {
    color: var(--warn);
    border-color: var(--warn-linha);
    background: var(--warn-dim);
    letter-spacing: 0.08em;
    font-size: 0.75rem;
    font-weight: 600;
}

/* ===== Chips e indicadores =============================================== */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    border: 1px solid transparent;
}

.chip-ok {
    background: var(--ok-dim);
    color: var(--ok);
    border-color: var(--ok-linha);
}

.chip-warn {
    background: var(--warn-dim);
    color: var(--warn);
    border-color: var(--warn-linha);
}

.chip-neutro {
    background: var(--surface-2);
    color: var(--fg-muted);
    border-color: var(--border-strong);
}

.dot {
    width: 0.4375rem;
    height: 0.4375rem;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

/* Confianca da leitura, em barra: o operador precisa saber quando
   desconfiar do texto da placa e buscar pela janela de horario. */
.conf {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.conf-bar {
    width: 2.75rem;
    height: 0.25rem;
    border-radius: 999px;
    background: var(--surface-3);
    overflow: hidden;
    flex-shrink: 0;
}

.conf-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: var(--ok);
}

.conf.is-baixa .conf-fill {
    background: var(--warn);
}

.conf-valor {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

.conf.is-baixa .conf-valor {
    color: var(--warn);
}

/* ===== Tabela de registros =============================================== */

.table-wrap {
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.table thead th {
    position: sticky;
    top: 0;
    padding: 0.625rem 1rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    text-align: center;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
    white-space: nowrap;
}

/* Centrado junto com o cabecalho: titulo no centro sobre valor encostado a
   esquerda nao fica sobre a propria coluna, parece desalinhado. */
.table tbody td {
    padding: 0.6875rem 1rem;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
    text-align: center;
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover {
    background: var(--realce);
}

.col-id {
    font-family: var(--font-mono);
    color: var(--fg-dim);
    font-size: 0.8125rem;
}

.col-hora {
    font-family: var(--font-mono);
    white-space: nowrap;
}

.col-acoes {
    text-align: center;
    white-space: nowrap;
}

.acoes {
    display: inline-flex;
    gap: 0.375rem;
    justify-content: center;
}

.table-resumo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    font-size: 0.8125rem;
    color: var(--fg-muted);
}

.table-resumo strong {
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}

/* ===== Estados vazios ==================================================== */

.vazio {
    padding: 3rem 1.5rem;
    text-align: center;
}

.vazio-icone {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0 auto 0.875rem;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--fg-dim);
}

.vazio-titulo {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
}

.vazio-texto {
    margin: 0.375rem auto 0;
    max-width: 44ch;
    color: var(--fg-muted);
}

/* ===== Ficha do veiculo (pagina de cameras) ============================== */

.ficha {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 4vw, 2.5rem);
    flex-wrap: wrap;
    padding: 1.25rem;
}

.ficha-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    min-width: 0;
    text-align: center;
}

.ficha-rotulo {
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.ficha-valor {
    font-family: var(--font-mono);
    font-size: 1rem;
    font-variant-numeric: tabular-nums;
}

.ficha-acoes {
    margin-left: auto;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* ===== Seletor de angulo de camera ======================================= */

/* O operador pensa espacialmente ("a avaria esta na lateral direita
   traseira"), entao os angulos ficam dispostos em volta do carro
   em vez de empilhados numa lista. */
.angulos {
    display: grid;
    grid-template-columns: 1fr minmax(8rem, 0.8fr) 1fr;
    grid-template-areas:
        "fle  teto  fld"
        ".    carro ."
        "tle  tras  tld";
    gap: 0.75rem;
    align-items: center;
    padding: 1.5rem clamp(0.75rem, 3vw, 2rem) 2rem;
}

.angulo-fle { grid-area: fle; }
.angulo-fld { grid-area: fld; }
.angulo-teto { grid-area: teto; }
.angulo-tle { grid-area: tle; }
.angulo-tld { grid-area: tld; }
.angulo-tras { grid-area: tras; }

.carro {
    grid-area: carro;
    display: grid;
    place-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
}

.carro svg {
    width: 100%;
    max-width: 8rem;
    height: auto;
    display: block;
}

.carro-eixo {
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.angulo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.875rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}

.angulo:hover {
    border-color: var(--primary);
    background: var(--primary-dim);
    transform: translateY(-1px);
}

/* O nome do angulo abre o video; a seta ao lado baixa sem abrir. Sao duas
   acoes no mesmo cartao, por isso o link ocupa o espaco todo que sobra: o
   alvo de clique continua grande, e nao so o texto. */
.angulo-link {
    display: flex;
    flex-direction: column;
    gap: 0.3125rem;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.angulo-baixar {
    display: grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-dim);
    cursor: pointer;
}

.angulo-baixar:hover {
    border-color: var(--border-strong);
    background: var(--surface-2);
    color: var(--fg);
}

.angulo-canal {
    font-family: var(--font-mono);
    font-size: 0.6875rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fg-dim);
}

.angulo:hover .angulo-canal {
    color: var(--primary);
}

.angulo-nome {
    font-weight: 600;
    font-size: 0.9375rem;
    line-height: 1.25;
}

.angulos-rodape {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--fg-muted);
}

/* ===== Aviso de geracao de video ========================================= */

/* O FFmpeg leva ate 60s puxando o trecho do NVR. Sem este aviso a tela
   fica parada e o operador clica de novo. */
.overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    place-items: center;
    padding: 1.5rem;
    background: var(--vidro-forte);
    backdrop-filter: blur(4px);
}

.overlay[hidden] {
    display: none;
}

.overlay-caixa {
    width: 100%;
    max-width: 24rem;
    padding: 1.75rem;
    text-align: center;
    background: var(--surface);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
}

.spinner {
    width: 2rem;
    height: 2rem;
    margin: 0 auto 1rem;
    border: 2px solid var(--surface-3);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: girar 0.8s linear infinite;
}

@keyframes girar {
    to { transform: rotate(360deg); }
}

.overlay-titulo {
    margin: 0 0 0.375rem;
    font-size: 1rem;
    font-weight: 600;
}

.overlay-texto {
    margin: 0 0 1.25rem;
    color: var(--fg-muted);
    font-size: 0.875rem;
}

/* A caixa do player e maior que a do aviso: um trecho de 1920x1080 num
   cartao de 24rem nao deixa ver avaria nenhuma. */
.overlay-video {
    max-width: min(56rem, 92vw);
}

.overlay-video video {
    width: 100%;
    max-height: min(60vh, 32rem);
    border-radius: var(--radius);
    background: #000;
    display: block;
}

.overlay-acoes {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

/* O mesmo aviso serve para a espera e para a falha: so muda a cor da borda
   e do titulo, para o operador perceber que parou de carregar. */
.overlay.is-erro .overlay-caixa {
    border-color: var(--danger-linha);
}

.overlay.is-erro .overlay-titulo {
    color: var(--danger);
    margin-bottom: 1rem;
}

.overlay-detalhe {
    margin: 0 0 1.25rem;
    text-align: left;
    font-size: 0.8125rem;
    color: var(--fg-muted);
}

.overlay-detalhe summary {
    cursor: pointer;
    text-align: center;
    color: var(--fg-dim);
}

.overlay-detalhe p {
    margin: 0.625rem 0 0;
    padding: 0.625rem 0.75rem;
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    line-height: 1.5;
    /* Caminho de arquivo e mensagem de sistema nao tem espaco para quebrar:
       sem isto a caixa estoura para fora da tela. */
    overflow-wrap: anywhere;
}

/* ===== Relatorio: indicadores ============================================ */

/* Cartoes soltos, e nao uma faixa unida por vaos de 1px: com quatro
   indicadores em tres colunas sobra uma celula, e no tema claro a celula
   vazia virava um bloco cinza no meio da tela. */
.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 1rem;
}

.indicador {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 1.125rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.indicador-rotulo {
    display: flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.indicador-valor {
    font-size: 1.75rem;
    font-weight: 650;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.indicador-nota {
    font-size: 0.75rem;
    color: var(--fg-dim);
}

/* ===== Relatorio: grafico de barras empilhadas ===========================

   Cores de dado separadas das cores de marca, de proposito: o carmim e a
   identidade da interface e nao pode valer tambem como categoria. O par
   abaixo passou na verificacao de daltonismo sobre o fundo escuro
   (ΔE 23 em protanopia).                                                   */

:root {
    --serie-placa: #0284c7;
    --serie-sem-captura: #d97706;
    --grade: rgba(255, 255, 255, 0.07);
}

.grafico {
    display: grid;
    /* minmax(0, 1fr) e nao 1fr: com 1fr a coluna nunca encolhe abaixo do
       conteudo dela, e os rotulos do eixo horizontal empurram o grafico
       para fora da tela quando ha muitas colunas. */
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 0.75rem;
    padding: 1.5rem 1.25rem 1.25rem;
}

.grafico-eixo {
    display: flex;
    flex-direction: column;
    height: 15rem;
    font-size: 0.6875rem;
    line-height: 1;
    color: var(--fg-dim);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Quatro faixas de altura igual: o topo de cada uma coincide com uma linha
   de grade. O deslocamento sobe o texto para sentar em cima da linha. */
.grafico-eixo span {
    flex: 1 1 0;
    transform: translateY(-0.35em);
}

/* O zero fica colado na linha de base, sem faixa propria. */
.grafico-eixo span:last-child {
    flex: 0 0 0;
}

.grafico-area {
    position: relative;
    height: 15rem;
    border-bottom: 1px solid var(--border-strong);
    /* Trava horizontal para o balao de nenhuma coluna empurrar a largura
       da pagina. 'clip' e nao 'hidden': so corta, nao cria area rolavel,
       e o eixo vertical segue livre para o balao subir acima das barras. */
    overflow-x: clip;
    overflow-y: visible;
}

/* Linhas de grade recuadas, para nao competirem com as barras */
.grafico-grade {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    pointer-events: none;
}

/* Quatro faixas iguais: a borda superior de cada uma e a linha de grade,
   caindo em 0%, 25%, 50% e 75% da altura. */
.grafico-grade span {
    display: block;
    flex: 1 1 0;
    border-top: 1px solid var(--grade);
}

.barras {
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 2px;
    height: 100%;
}

.barra {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    /* Com poucas faixas (anual, por exemplo) a barra viraria um bloco
       de meia tela; o teto mantem a proporcao e centraliza o grupo. */
    max-width: 5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 2px;
    cursor: default;
}

.barra:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.barra-seg {
    display: block;
    width: 100%;
    min-height: 2px;
    border-radius: 2px;
}

/* Topo arredondado so no segmento mais alto da pilha */
.barra-seg-topo {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.barra-placa {
    background: var(--serie-placa);
}

.barra-sem-captura {
    background: var(--serie-sem-captura);
}

.barra:hover .barra-seg {
    filter: brightness(1.18);
}

/* Faixa clara de fundo revela a coluna inteira no hover, inclusive
   quando o dia nao teve nenhuma entrada. */
.barra::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: var(--radius-sm);
    background: transparent;
}

.barra:hover::before,
.barra:focus-visible::before {
    background: var(--realce);
}

.barra-tip {
    position: absolute;
    bottom: calc(100% + 0.5rem);
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    min-width: 9rem;
    padding: 0.5rem 0.625rem;
    background: var(--surface-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    text-align: left;
    white-space: nowrap;
}

.barra:hover .barra-tip,
.barra:focus-visible .barra-tip {
    opacity: 1;
    visibility: visible;
}

/* Nas colunas das pontas o balao centralizado sairia da tela — mesmo
   escondido ele conta para a rolagem horizontal da pagina. Nessas, o
   balao encosta na borda em vez de centralizar. */
.barra:nth-child(-n + 3) .barra-tip {
    left: 0;
    transform: none;
}

.barra:nth-last-child(-n + 3) .barra-tip {
    left: auto;
    right: 0;
    transform: none;
}

.barra-tip-titulo {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: 0.3125rem;
}

.barra-tip-linha {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--fg-muted);
}

.barra-tip-linha strong {
    margin-left: auto;
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}

.marca-serie {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    flex-shrink: 0;
}

.marca-placa {
    background: var(--serie-placa);
}

.marca-sem-captura {
    background: var(--serie-sem-captura);
}

/* Rotulos do eixo horizontal */
.grafico-rotulos {
    grid-column: 2;
    display: flex;
    justify-content: center;
    gap: 2px;
    margin-top: 0.5rem;
}

.grafico-rotulo {
    flex: 1 1 0;
    min-width: 0;
    /* Mesmo teto das barras, senao os rotulos saem do lugar. */
    max-width: 5rem;
    font-size: 0.6875rem;
    color: var(--fg-dim);
    text-align: center;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.grafico-rotulo.is-oculto {
    visibility: hidden;
}

.legenda {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.8125rem;
    color: var(--fg-muted);
}

/* Valor de indicador que e palavra, nao numero ("Sabado") */
.indicador-valor-texto {
    font-size: 1.375rem;
}

/* Linha de captura de placa, fora dos indicadores de topo */
.captura-resumo {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    flex-wrap: wrap;
}

.captura-taxa {
    color: var(--fg-muted);
    font-size: 0.875rem;
}

.captura-taxa strong {
    color: var(--fg);
    font-variant-numeric: tabular-nums;
}

/* Total no topo do tooltip, separado das duas series */
.barra-tip-total {
    padding-bottom: 0.3125rem;
    margin-bottom: 0.3125rem;
    border-bottom: 1px solid var(--border-strong);
    color: var(--fg);
}

/* ===== Relatorio: filtros ================================================ */

.filtros {
    display: flex;
    gap: 0.875rem;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filtros .field {
    flex: 0 1 11rem;
}

.segmentos {
    display: inline-flex;
    padding: 0.1875rem;
    background: var(--bg);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius);
    gap: 0.125rem;
}

.segmento {
    padding: 0.4375rem 0.8125rem;
    border-radius: var(--radius-sm);
    color: var(--fg-muted);
    font-size: 0.8125rem;
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
}

.segmento:hover {
    background: var(--surface-2);
    color: var(--fg);
}

.segmento[aria-current="true"] {
    background: var(--primary);
    color: #fff;
}

/* ===== Grupos de acesso ================================================== */

/* A etiqueta leva a cor do grupo no atributo style, vinda do cadastro: e o
   unico jeito de uma cor escolhida em tempo de uso chegar na tela. */
.grupo-etiqueta {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* "Padrao" nao tem cor escolhida por ninguem: usa o cinza do tema, para
   nao competir com os grupos de verdade. */
.grupo-etiqueta.is-padrao {
    background: var(--surface-3);
    color: var(--fg-muted);
    border: 1px solid var(--border);
}

/* Na tela de cadastro o nome vai em texto comum: quem mostra a cor ali e o
   seletor da propria linha. */
.grupo-nome {
    font-weight: 600;
}

/* O grupo que o sistema mantem sozinho fica recuado dos editaveis. */
.grupo-fixo td {
    color: var(--fg-muted);
}

/* Caixas de selecao dos grupos no filtro do relatorio. */
/* Linha propria, abaixo das datas, alinhada a elas. */
.atalhos-data.atalhos-relatorio {
    flex-basis: 100%;
    justify-content: flex-start;
    margin-top: -0.25rem;
}

.filtro-grupos {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border: none;
    flex-basis: 100%;
}

.filtro-grupos legend {
    float: left;
    width: 100%;
    margin-bottom: 0.375rem;
    padding: 0;
}

.filtro-grupos .marcador {
    gap: 0.375rem;
    color: var(--fg);
    cursor: pointer;
}

/* Grupo desmarcado fica apagado: assim da para ver de longe o que esta
   fora da conta, sem precisar conferir caixa por caixa. */
.filtro-grupos .marcador:has(input:not(:checked)) {
    color: var(--fg-muted);
    opacity: 0.6;
}

.grupos-abas {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.grupo-aba {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--fg-muted);
    text-decoration: none;
    font-size: 0.875rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.grupo-aba:hover {
    border-color: var(--border-strong);
    color: var(--fg);
}

.grupo-aba[aria-current="true"] {
    border-color: var(--primary);
    background: var(--primary-dim);
    color: var(--fg);
    font-weight: 600;
}

.grupo-aba-conta {
    padding: 0.0625rem 0.375rem;
    border-radius: 999px;
    background: var(--surface-2);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
}

/* Grupo desativado: a aba continua clicavel (o cadastro e mantido), mas
   apagada, para nao parecer tao valida quanto as outras. */
.grupo-aba.is-inativo > span:first-child {
    text-decoration: line-through;
    text-decoration-color: var(--fg-dim);
}

.grupo-aba-inativo {
    font-size: 0.6875rem;
    color: var(--fg-dim);
}

.dica.dica-inativo {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--warn);
}

.grupos-barras {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.grupo-linha {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) 1fr minmax(5rem, auto);
    align-items: center;
    gap: 0.75rem;
}

.grupo-barra {
    height: 0.75rem;
    border-radius: 999px;
    background: var(--surface-2);
    overflow: hidden;
}

.grupo-barra-preenchida {
    display: block;
    height: 100%;
    border-radius: 999px;
    /* A cor vem do cadastro, pelo atributo style; esta e so a do "Padrao". */
    background: var(--fg-dim);
}

.grupo-numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.grupo-percentual {
    margin-left: 0.375rem;
    font-size: 0.75rem;
    color: var(--fg-muted);
}

@media (max-width: 560px) {
    .grupo-linha {
        grid-template-columns: 1fr auto;
    }

    .grupo-barra {
        grid-column: 1 / -1;
    }
}

.input-cor {
    width: 3rem;
    padding: 0.25rem;
    cursor: pointer;
}

.form-row > .field-cor {
    flex: 0 0 auto;
}

/* Campos de edicao dentro da linha da tabela: menores que os do formulario
   de cima, para a linha nao virar um segundo formulario. */
.input-linha {
    height: 2rem;
    padding: 0.25rem 0.5rem;
    font-size: 0.8125rem;
}

.input-linha[type="text"] {
    width: 9rem;
}

/* A descricao e frase, nao nome: precisa de mais espaco que os 9rem do
   nome, e ocupa a coluna dela inteira. */
.input-linha.input-descricao {
    width: 100%;
    min-width: 12rem;
}

.marcador {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--fg-muted);
    white-space: nowrap;
}

/* ===== Correcao de placa ================================================= */

/* Roxo, cor que nenhum outro estado usa: verde e placa lida, ambar e falha
   de leitura, vermelho e erro. Corrigida e outra coisa — e decisao humana
   por cima da camera — e precisa ser reconhecida como tal de longe. */
.chip-corrigida {
    background: var(--corrigida-dim);
    color: var(--corrigida);
    border-color: var(--corrigida-linha);
}

.chip-mini {
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    font-size: 0.6875rem;
    vertical-align: middle;
    cursor: help;
}

.placa-pequena {
    font-size: 0.8125rem;
    padding: 0.125rem 0.375rem;
}

.correcao-info {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid var(--border);
    background: var(--corrigida-dim);
    font-size: 0.8125rem;
    color: var(--fg-muted);
}

.correcao-info form {
    margin-left: auto;
}

.correcao-form {
    padding: 0 1.25rem 1.25rem;
    border-top: 1px solid var(--border);
}

.correcao-form summary {
    padding: 0.875rem 0 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--fg-muted);
}

.correcao-form[open] summary {
    color: var(--fg);
}

.filtro-corrigidas {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: var(--fg);
    cursor: pointer;
}

/* ===== Foto da entrada (detalhes do registro) ============================ */

/* contain, e nao cover como no cartao de eventos: aqui a foto e conferencia,
   e cortar a borda pode cortar justo a placa. */
.foto-entrada {
    display: block;
    margin: 1rem 1.25rem 1.25rem;
    border-radius: var(--radius);
    background: var(--bg);
    overflow: hidden;
    cursor: zoom-in;
}

.foto-entrada img {
    display: block;
    width: 100%;
    max-height: 480px;
    object-fit: contain;
}

.foto-entrada-vazia {
    margin: 0;
    padding: 1.25rem;
    font-size: 0.875rem;
    color: var(--fg-muted);
}

/* ===== Pagina de erro ==================================================== */

.dica.erro-horario {
    margin-top: 0.75rem;
}

.erro-acoes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin: 1.25rem 0 0;
}

/* ===== Login ============================================================= */

.tela-login {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1.5rem 1rem;
}

.login {
    width: min(24rem, 100%);
}

.login-marca {
    text-align: center;
    margin-bottom: 2rem;
}

.login-logo {
    width: min(18rem, 70vw);
    height: auto;
    display: block;
    margin: 0 auto;
}

.login-cartao {
    padding: 1.5rem;
}

.login-cartao .aviso {
    margin-bottom: 1rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.login-entrar {
    width: 100%;
    margin-top: 0.25rem;
}

/* ===== Usuario logado, na barra lateral ================================== */

.lateral-usuario {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.25rem 0.5rem 0.375rem;
    min-width: 0;
}

.lateral-avatar,
.usuario-avatar {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 999px;
    background: var(--primary-dim);
    color: var(--primary);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lateral-quem {
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.lateral-quem strong {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--fg);
    overflow: hidden;
    text-overflow: ellipsis;
}

.lateral-quem small {
    font-size: 0.6875rem;
    color: var(--fg-dim);
}

html.lateral-fechada .lateral-usuario {
    justify-content: center;
    padding: 0.25rem 0;
}

/* ===== Usuarios ========================================================== */

.usuarios-lista {
    display: flex;
    flex-direction: column;
}

.usuario-linha {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 0.875rem 1.25rem;
    color: var(--fg);
    text-decoration: none;
    border-top: 1px solid var(--border);
}

.usuario-linha:first-child {
    border-top: none;
}

.usuario-linha:hover {
    background: var(--surface-2);
}

.usuario-linha.is-inativo .usuario-dados,
.usuario-linha.is-inativo .usuario-avatar,
.usuario-avatar.is-inativo {
    opacity: 0.5;
}

.usuario-dados {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.usuario-dados strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.usuario-login {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 0.8125rem;
    color: var(--fg-muted);
}

.usuario-ver {
    font-size: 0.8125rem;
    color: var(--fg-muted);
    white-space: nowrap;
}

.chip.chip-perfil-admin {
    background: var(--primary-dim);
    color: var(--primary);
    border-color: var(--primary-line, transparent);
}

.usuario-campos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.usuario-campo-largo {
    grid-column: 1 / -1;
}

.perfil-escolha {
    margin: 1.25rem 0 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.perfil-escolha legend {
    margin-bottom: 0.625rem;
}

.perfil-opcao {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}

.perfil-opcao:has(input:checked) {
    border-color: var(--primary);
    background: var(--primary-dim);
}

.perfil-opcao input {
    margin-top: 0.25rem;
    accent-color: var(--primary);
}

.perfil-texto {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.perfil-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.usuario-form-rodape {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    border-top: 1px solid var(--border);
}

.usuario-ficha {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem;
    border-bottom: 1px solid var(--border);
}

.usuario-avatar-grande {
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.0625rem;
}

.usuario-identidade {
    flex: 1;
    min-width: 0;
}

.usuario-identidade h2 {
    margin: 0;
    font-size: 1.125rem;
}

.usuario-campos-ficha {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    padding: 1.25rem;
}

.usuario-campos-ficha > div,
.usuario-acessa {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
}

.usuario-acessa {
    padding: 0 1.25rem 1.25rem;
}

.usuario-acao {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
}

.usuario-acao.is-perigo {
    border-color: var(--danger-linha);
}

.usuario-senha {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    max-width: 28rem;
}

.btn-perigo {
    background: var(--danger);
    color: #fff;
}

.btn-perigo:hover {
    background: var(--danger);
    filter: brightness(1.1);
}

@media (max-width: 640px) {
    .usuario-campos,
    .usuario-campos-ficha {
        grid-template-columns: 1fr;
    }

    .usuario-ver {
        display: none;
    }

    .usuario-senha {
        max-width: none;
        flex-basis: 100%;
    }
}

/* ===== Paginacao da consulta ============================================= */

.paginacao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 0.875rem 1rem;
    border-top: 1px solid var(--border);
}

.paginacao-conta {
    font-size: 0.8125rem;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

.paginacao-conta strong {
    color: var(--fg);
}

.paginacao-pagina {
    color: var(--fg-dim);
}

/* Primeira e ultima pagina: o botao fica la, apagado, em vez de sumir — a
   linha nao muda de largura a cada clique. */
.paginacao .is-inerte {
    opacity: 0.4;
    pointer-events: none;
}

/* ===== Eventos: controles do cabecalho =================================== */

.eventos-controles {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

#somBotao {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

/* O botao mostra o estado atual, nao para onde vai: e um interruptor, e a
   duvida "ligado quer dizer que esta ou que fica?" custa um clique errado
   com som no meio de um atendimento. */
#somBotao .som-desligado,
#somBotao.is-mudo .som-ligado {
    display: none;
}

#somBotao.is-mudo .som-desligado {
    display: inline-flex;
}

#somBotao.is-mudo {
    color: var(--fg-muted);
}

/* ===== Avisos ============================================================ */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: var(--radius);
    border: 1px solid transparent;
    margin-bottom: 1.25rem;
}

/* O display acima vence o [hidden] do navegador: sem esta regra o aviso
   da camera fica sempre na tela, com o texto vazio. */
.aviso[hidden] {
    display: none;
}

.aviso svg {
    flex-shrink: 0;
    margin-top: 0.0625rem;
}

.aviso-titulo {
    font-weight: 600;
    margin: 0 0 0.125rem;
}

.aviso-texto {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.85;
}

.aviso-alerta {
    background: var(--warn-dim);
    border-color: var(--warn-linha);
    color: var(--warn);
}

.aviso-erro {
    background: var(--danger-dim);
    border-color: var(--danger-linha);
    color: var(--danger);
}

.aviso-ok {
    background: var(--ok-dim);
    border-color: var(--ok-linha);
    color: var(--ok);
}

.aviso a {
    color: inherit;
    font-weight: 600;
}

/* ===== Eventos ao vivo =================================================== */

.ao-vivo {
    display: inline-flex;
    align-items: center;
    gap: 0.4375rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ok);
}

.ao-vivo .ponto {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: currentColor;
    animation: pulsar 1.8s ease-in-out infinite;
}

.ao-vivo.is-parado {
    color: var(--fg-dim);
}

.ao-vivo.is-parado .ponto {
    animation: none;
}

@keyframes pulsar {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.8); }
}

.eventos-grade {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
    padding: 1.25rem;
}

.evento {
    display: flex;
    flex-direction: column;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

/* Entrada nova pisca uma vez em carmim, para o olho achar o que mudou. */
.evento.is-novo {
    animation: chegou 1.6s ease-out;
}

@keyframes chegou {
    0% { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-dim); }
    100% { border-color: var(--border); box-shadow: none; }
}

.evento-foto {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--bg);
    display: grid;
    place-items: center;
    overflow: hidden;
}

.evento-foto img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.evento-sem-foto {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    color: var(--fg-dim);
    font-size: 0.75rem;
    text-align: center;
    padding: 0.5rem;
}

.evento-corpo {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.875rem;
}

.evento-linha {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.evento-hora {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

.evento-camera {
    font-size: 0.75rem;
    color: var(--fg-dim);
}

/* ===== Abas (Relatorios) ================================================= */

.abas {
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.25rem;
    overflow-x: auto;
}

.aba {
    padding: 0.6875rem 1rem;
    border-bottom: 2px solid transparent;
    color: var(--fg-muted);
    font-weight: 550;
    text-decoration: none;
    white-space: nowrap;
    margin-bottom: -1px;
}

.aba:hover {
    color: var(--fg);
}

.aba[aria-current="page"] {
    color: var(--fg);
    border-bottom-color: var(--primary);
}

/* ===== Tela inicial ======================================================
   A marca e tres numeros, centrados. Sem cartoes, sem molduras: o que da o
   ar de limpeza aqui e o espaco em volta, nao mais caixas. */

.abertura {
    display: flex;
    flex-direction: column;
    text-align: center;
    /* O shell tem 4rem embaixo e menos em cima; aqui os dois se igualam,
       senao o centro visual fica acima do centro da tela. */
    padding-bottom: clamp(1.5rem, 4vw, 2.5rem);
}

/* Centrado na vertical por margem automatica, e nao por justify-content:
   com justify-content, conteudo mais alto que a tela fica preso acima da
   area rolavel e nao ha como alcancar o comeco dele. Com margem auto,
   quando nao sobra espaco as duas viram zero e o fluxo volta ao normal. */
.abertura > :first-child {
    margin-top: auto;
}

.abertura > :last-child {
    margin-bottom: auto;
}

.marca {
    margin-bottom: clamp(3rem, 9vh, 5rem);
}

/* O wordmark tem 855px de largura: cresce com a tela ate onde a imagem
   aguenta, e para antes de comecar a borrar. */
.marca-logo {
    width: min(26rem, 72vw);
    height: auto;
    display: block;
    margin: 0 auto;
}

.marca-assinatura {
    margin: 1.25rem 0 0;
    font-size: 0.8125rem;
    letter-spacing: 0.12em;
    text-transform: lowercase;
    color: var(--fg-muted);
}

.marca-assinatura strong {
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--fg-dim);
    text-transform: uppercase;
}

.numeros {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 4vw, 3rem);
    max-width: 44rem;
    margin: 0 auto;
}

.numero {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    min-width: 0;
}

.numero-valor {
    font-size: clamp(2.5rem, 8vw, 4rem);
    font-weight: 650;
    line-height: 1;
    letter-spacing: -0.03em;
    /* Os tres numeros ficam lado a lado: sem isto, larguras de digito
       diferentes desalinham a base da linha entre eles. */
    font-variant-numeric: tabular-nums;
}

.numero-rotulo {
    font-size: 0.8125rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

/* Chegou carro. A tela fica aberta na recepcao sem ninguem encarando ela:
   o numero troca sozinho e, sem um sinal, a chegada passa batida. */
.numero-valor.mudou {
    animation: numero-chegou 1.4s ease-out;
}

@keyframes numero-chegou {
    0%   { color: var(--primary); transform: scale(1.12); }
    30%  { color: var(--primary); transform: scale(1); }
    100% { color: inherit; transform: scale(1); }
}

/* Quem pediu menos movimento no sistema ainda precisa perceber a troca:
   fica a cor, sai o salto. */
@media (prefers-reduced-motion: reduce) {
    @keyframes numero-chegou {
        0%   { color: var(--primary); }
        60%  { color: var(--primary); }
        100% { color: inherit; }
    }
}

/* ===== Configuracoes ===================================================== */

.form-config {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    gap: 1rem;
}

.form-config .campo-largo {
    grid-column: 1 / -1;
}

.form-acoes {
    display: flex;
    gap: 0.625rem;
    flex-wrap: wrap;
    padding: 1.25rem;
    border-top: 1px solid var(--border);
}

.dica {
    font-size: 0.75rem;
    color: var(--fg-dim);
    margin: 0;
}

/* ===== Rodape ============================================================ */

.rodape {
    position: relative;
    z-index: 1;
    padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 2.5rem;
    padding-bottom: calc(2.5rem + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid var(--border);
    color: var(--fg-dim);
    font-size: 0.75rem;
    text-align: center;
}

/* Lado a lado quando cabe, uma linha por item quando nao cabe — em vez de
   quebrar o aviso de direitos no meio da frase. */
.rodape-sistema,
.rodape-direitos {
    display: inline-block;
}

.rodape-sistema::after {
    content: " · ";
}

@media (max-width: 560px) {
    .rodape-sistema::after {
        content: none;
    }

    .rodape-sistema,
    .rodape-direitos {
        display: block;
    }

    .rodape-direitos {
        margin-top: 0.375rem;
    }
}

/* ===== Responsivo ======================================================== */

/* No celular a barra sai do fluxo e vira gaveta sobre o conteudo. */
@media (max-width: 900px) {
    .lateral {
        transform: translateX(-100%);
        width: 15rem;
        box-shadow: var(--shadow);
    }

    html.lateral-aberta .lateral {
        transform: translateX(0);
    }

    html.lateral-aberta .lateral-sombra {
        display: block;
    }

    /* Na gaveta a barra abre inteira, mesmo recolhida no desktop. */
    html.lateral-fechada .lateral-texto {
        display: block;
    }

    html.lateral-fechada .lateral-logo {
        display: flex;
    }

    html.lateral-fechada .lateral-item::after {
        display: none;
    }

    html.lateral-fechada .lateral-item,
    html.lateral-fechada .lateral-topo {
        justify-content: flex-start;
        padding: 0.625rem 0.6875rem;
    }

    /* Na gaveta nada esta recolhido: o botao volta a fechar, nao a expandir. */
    html.lateral-fechada .lateral-alternar {
        display: grid;
    }

    html.lateral-fechada .lateral-alternar .icone-recolher {
        display: block;
    }

    html.lateral-fechada .lateral-alternar .icone-expandir {
        display: none;
    }

    /* O cabecalho esta fora do fluxo: quem reserva o lugar dele e este
       padding. Como todo o CSS usa border-box, ele entra dentro da altura
       minima — a pagina mede uma tela exata, e nao uma tela mais o
       cabecalho, que era o que fazia nascer a barra de rolagem.
       O dvh vem depois do vh de proposito: no celular 100vh e a tela com a
       barra de endereco escondida, e onde dvh nao existe a linha e
       descartada, ficando valendo a de cima. */
    .conteudo {
        margin-left: 0;
        padding-top: calc(var(--alt-cabecalho-movel) + env(safe-area-inset-top, 0px));
        min-height: 100vh;
        min-height: 100dvh;
    }

    .lateral-movel {
        display: flex;
    }
}

@media (max-width: 700px) {
    .barra-tip {
        min-width: 7.5rem;
        padding: 0.4375rem 0.5rem;
    }

    .barra:nth-child(-n + 8) .barra-tip {
        left: 0;
        transform: none;
    }

    .barra:nth-last-child(-n + 8) .barra-tip {
        left: auto;
        right: 0;
        transform: none;
    }

    .angulos {
        grid-template-columns: 1fr;
        grid-template-areas:
            "carro"
            "fle"
            "fld"
            "tras"
            "tle"
            "tld"
            "teto";
    }

    .ficha-acoes {
        margin-left: 0;
        width: 100%;
    }

    .nav {
        width: 100%;
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .angulo:hover {
        transform: none;
    }
}