/* ==========================================================================
   Portaria - folha de estilo unica
   Sem framework, sem CDN, sem JavaScript.
   ========================================================================== */

:root {
    --cor-fundo:        #f1f4f8;
    --cor-superficie:   #ffffff;
    --cor-borda:        #dde3ec;
    --cor-texto:        #1c2531;
    --cor-texto-suave:  #64748b;

    --cor-primaria:      #1d4ed8;
    --cor-primaria-forte:#1e40af;
    --cor-primaria-clara:#eff4ff;

    --cor-sucesso: #15803d;
    --cor-sucesso-fundo: #ecfdf3;
    --cor-erro:    #b91c1c;
    --cor-erro-fundo: #fef2f2;
    --cor-alerta:  #b45309;
    --cor-alerta-fundo: #fffbeb;

    --raio:      10px;
    --raio-min:  6px;
    --sombra:    0 1px 2px rgba(15, 23, 42, .06), 0 4px 14px rgba(15, 23, 42, .05);
    --lateral:   248px;

    --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --fonte-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

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

/* Nenhuma imagem estoura o container, venha de onde vier. A foto do
   movimento chega com a largura original da camera (1600px e mais). */
img, svg, video { max-width: 100%; height: auto; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    font-family: var(--fonte);
    font-size: 15px;
    line-height: 1.5;
    color: var(--cor-texto);
    background: var(--cor-fundo);
}

h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: var(--cor-primaria); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
    outline: 3px solid var(--cor-primaria);
    outline-offset: 2px;
    border-radius: var(--raio-min);
}

.pular {
    position: absolute;
    left: -9999px;
    background: var(--cor-primaria);
    color: #fff;
    padding: .6rem 1rem;
    z-index: 100;
}
.pular:focus { left: 1rem; top: 1rem; }

/* ==========================================================================
   Layout do painel
   ========================================================================== */

.layout { display: flex; min-height: 100vh; }

.barra-lateral {
    width: var(--lateral);
    flex: 0 0 var(--lateral);
    background: #0f172a;
    color: #cbd5f5;
    padding: 1.25rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.marca {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.1rem;
    margin: -1.25rem 0 0;
    background: #fff;
    border-bottom: 1px solid rgba(15, 23, 42, .08);
}

/* A logo e azul escuro: sobre a barra escura o contraste cai, por isso o
   topo da barra e branco. */
.marca-link { display: block; line-height: 0; }
.marca-link:hover { text-decoration: none; opacity: .85; }

.logo-menu {
    display: block;
    width: 100%;
    max-width: 190px;
    height: auto;
}


.menu { display: flex; flex-direction: column; gap: 2px; padding: 0 .75rem; }

.menu-titulo {
    margin: 1.1rem 0 .35rem;
    padding: 0 .5rem;
    font-size: .68rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
}

.menu-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border-radius: var(--raio-min);
    color: #cbd5f5;
    font-size: .92rem;
}

.menu-item:hover { background: rgba(148, 163, 184, .14); color: #fff; text-decoration: none; }

.menu-item[aria-current="page"] {
    background: var(--cor-primaria);
    color: #fff;
    font-weight: 600;
}

.menu-icone { font-size: .6rem; opacity: .75; }

.area { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; }

.topo {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1.5rem;
    background: var(--cor-superficie);
    border-bottom: 1px solid var(--cor-borda);
    position: sticky;
    top: 0;
    z-index: 10;
}

.topo-titulo { font-size: 1.1rem; font-weight: 600; flex: 1 1 auto; }

.topo-usuario { display: flex; align-items: center; gap: .75rem; }

.usuario-nome { font-size: .9rem; font-weight: 500; }

.form-inline { display: inline; margin: 0; }

.botao-menu { display: none; font-size: 1.3rem; cursor: pointer; padding: .2rem .5rem; }

.conteudo {
    flex: 1 1 auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 1400px;
    width: 100%;
}

.rodape {
    padding: 1rem 1.5rem;
    color: var(--cor-texto-suave);
    font-size: .8rem;
}

/* ==========================================================================
   Cartoes e indicadores
   ========================================================================== */

.cartao {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1.25rem;
}

.cartao-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.cartao-titulo { font-size: 1rem; font-weight: 600; }

.indicadores {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1rem;
}

.indicador {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    padding: 1rem 1.1rem;
}

.indicador-destaque { border-color: var(--cor-primaria); background: var(--cor-primaria-clara); }
.indicador-alerta   { border-color: #fcd34d; background: var(--cor-alerta-fundo); }

/* Aviso de permanencia estourada: herda a cor de quem o contem. */
.alerta-icone { font-size: 1.35em; line-height: 1; }

.indicador-rotulo {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cor-texto-suave);
    font-weight: 600;
}

.indicador-valor {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    margin-top: .2rem;
    font-variant-numeric: tabular-nums;
}

.indicador-nota { font-size: .78rem; color: var(--cor-texto-suave); }
.indicador-nota-alerta { color: var(--cor-alerta); font-weight: 600; }

/* ==========================================================================
   Tabelas
   ========================================================================== */

.tabela-rolagem { overflow-x: auto; }

.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }

.tabela th, .tabela td {
    padding: .7rem .75rem;
    text-align: left;
    border-bottom: 1px solid var(--cor-borda);
    vertical-align: top;
}

.tabela thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--cor-texto-suave);
    background: var(--cor-elevada);
    white-space: nowrap;
}

.tabela tbody tr:hover { background: var(--cor-elevada); }

.tabela tr.linha-alerta { background: var(--cor-alerta-fundo); }

.celula-placa {
    font-family: var(--fonte-mono);
    font-weight: 700;
    letter-spacing: .05em;
    white-space: nowrap;
}

.celula-nota { display: block; font-size: .76rem; color: var(--cor-texto-suave); }

.vazio {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--cor-texto-suave);
}

/* ==========================================================================
   Etiquetas
   ========================================================================== */

.etiqueta {
    display: inline-block;
    padding: .15rem .5rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    background: #e2e8f0;
    color: var(--cor-texto);
    white-space: nowrap;
}

.etiqueta-dentro      { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.etiqueta-finalizado  { background: #e2e8f0; color: #475569; }
.etiqueta-cancelado   { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.etiqueta-admin       { background: #ede9fe; color: #6d28d9; }
.etiqueta-gestor      { background: var(--cor-primaria-clara); color: var(--cor-primaria-forte); }
.etiqueta-porteiro    { background: #ecfeff; color: #0e7490; }

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

.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .95rem;
    border-radius: var(--raio-min);
    border: 1px solid transparent;
    font: inherit;
    font-size: .88rem;
    font-weight: 600;
    cursor: pointer;
    background: var(--cor-superficie);
    color: var(--cor-texto);
    border-color: var(--cor-borda);
}

.botao:hover { text-decoration: none; background: var(--cor-elevada); }

.botao-primario { background: var(--cor-primaria); border-color: var(--cor-primaria); color: #fff; }
.botao-primario:hover { background: var(--cor-primaria-forte); }

.botao-perigo { background: var(--cor-erro); border-color: var(--cor-erro); color: #fff; }
.botao-perigo:hover { background: #991b1b; }

.botao-vazio { background: transparent; border-color: var(--cor-borda); }

.botao-largo { width: 100%; padding: .7rem 1rem; font-size: .95rem; }

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

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

.campo { display: flex; flex-direction: column; gap: .3rem; }

.campo label { font-size: .82rem; font-weight: 600; color: var(--cor-texto); }

.campo input,
.campo select,
.campo textarea {
    font: inherit;
    padding: .6rem .7rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-min);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    width: 100%;
}

.campo input:focus,
.campo select:focus,
.campo textarea:focus { border-color: var(--cor-primaria); }

.campo input[aria-invalid="true"] { border-color: var(--cor-erro); background: var(--cor-erro-fundo); }

.campo-erro { font-size: .78rem; color: var(--cor-erro); font-weight: 500; }

.campo-dica { font-size: .78rem; color: var(--cor-texto-suave); }

/* Dica que abre o cartao, antes do formulario: separa do que vem abaixo. */
.campo-dica.cartao-intro { margin-bottom: 1.1rem; }

/* ==========================================================================
   Avisos (flash)
   ========================================================================== */

.aviso {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    padding: .75rem 1rem;
    border-radius: var(--raio-min);
    border: 1px solid;
    font-size: .9rem;
}

.aviso-icone { font-weight: 700; line-height: 1.4; }

.aviso-sucesso { background: var(--cor-sucesso-fundo); border-color: #bbf7d0; color: var(--cor-sucesso); }
.aviso-erro    { background: var(--cor-erro-fundo);    border-color: #fecaca; color: var(--cor-erro); }
.aviso-alerta  { background: var(--cor-alerta-fundo);  border-color: #fde68a; color: var(--cor-alerta); }

.aviso-lista { margin-top: .35rem; padding-left: 1.1rem; list-style: disc; }

/* ==========================================================================
   Telas sem menu: login e erros
   ========================================================================== */

.tela-limpa {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem;
    gap: 1rem;
    background: linear-gradient(180deg, #f8fafc 0%, #e6ecf6 100%);
}

.caixa-central { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 1rem; }

.caixa-ampla { max-width: 880px; }

/* --------------------------------------------------------------------------
   Tela de login: arte a esquerda, formulario a direita.
   Em telas estreitas as colunas viram uma so, com a arte reduzida.
   -------------------------------------------------------------------------- */

.login {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    overflow: hidden;
}

.login-arte {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 1.5rem;
    background: linear-gradient(160deg, var(--cor-primaria-clara) 0%, #dde7fb 100%);
    border-right: 1px solid var(--cor-borda);
}

.login-ilustracao {
    display: block;
    width: 100%;
    max-width: 280px;
    height: auto;
}

.login-frase {
    font-size: .88rem;
    font-weight: 600;
    color: var(--cor-primaria-forte);
    text-align: center;
    max-width: 250px;
}

.login-form {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 2.25rem 2rem;
}

.login-titulo { font-size: 1.4rem; font-weight: 700; }

.login-subtitulo {
    font-size: .88rem;
    color: var(--cor-texto-suave);
    margin-bottom: 1.4rem;
}

.login-rodape {
    margin-top: 1.25rem;
    font-size: .76rem;
    color: var(--cor-texto-suave);
}

.rodape-limpo { font-size: .78rem; color: var(--cor-texto-suave); }

.cartao-erro { text-align: center; display: flex; flex-direction: column; gap: .6rem; align-items: center; }
.erro-numero { font-size: 3rem; font-weight: 800; color: var(--cor-primaria); line-height: 1; }
.erro-titulo { font-size: 1.15rem; font-weight: 600; }
.erro-texto  { color: var(--cor-texto-suave); font-size: .9rem; }

.caixa-debug {
    width: 100%;
    max-width: 900px;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-left: 5px solid var(--cor-erro);
    border-radius: var(--raio);
    padding: 1.5rem;
}

.debug-tipo { font-family: var(--fonte-mono); font-size: .8rem; color: var(--cor-erro); font-weight: 700; }
.debug-mensagem { font-size: 1.15rem; margin: .35rem 0; }
.debug-local { font-family: var(--fonte-mono); font-size: .8rem; color: var(--cor-texto-suave); }

.debug-trace {
    margin-top: 1rem;
    padding: 1rem;
    background: #0f172a;
    color: #e2e8f0;
    border-radius: var(--raio-min);
    font-family: var(--fonte-mono);
    font-size: .76rem;
    overflow-x: auto;
    white-space: pre;
}

/* ==========================================================================
   Responsivo - menu lateral controlado por checkbox (sem JavaScript)
   ========================================================================== */

.menu-toggle { position: absolute; opacity: 0; pointer-events: none; }

@media (max-width: 992px) {
    .botao-menu { display: inline-block; }

    .barra-lateral {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 30;
        transform: translateX(-100%);
        transition: transform .2s ease;
        overflow-y: auto;
    }

    .menu-toggle:checked ~ .layout .barra-lateral { transform: translateX(0); }

    .conteudo { padding: 1rem; }
    .topo { padding: .75rem 1rem; }
    .usuario-nome { display: none; }
}

@media (max-width: 560px) {
    .indicadores { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .indicador-valor { font-size: 1.6rem; }
}

@media print {
    .barra-lateral, .topo, .rodape, .botao { display: none !important; }
    body { background: #fff; }
    .cartao { box-shadow: none; border: none; }
}

/* ==========================================================================
   Utilitarios de acessibilidade
   ========================================================================== */

.visualmente-oculto {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Barra de filtros
   ========================================================================== */

.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--cor-borda);
}

.filtros-busca { flex: 1 1 260px; min-width: 200px; }
.filtros-situacao { flex: 0 0 auto; }

.filtros input[type="search"],
.filtros select {
    font: inherit;
    padding: .5rem .7rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-min);
    background: var(--cor-superficie);
    color: var(--cor-texto);
    width: 100%;
}

.filtros select { min-width: 170px; }

/* ==========================================================================
   Tabela: cabecalho ordenavel e coluna de acoes
   ========================================================================== */

.tabela thead th a {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.tabela thead th a:hover { color: var(--cor-primaria); }

.celula-acoes { white-space: nowrap; width: 1%; }

.celula-acoes .botao + .botao { margin-left: .3rem; }

.botao-mini { padding: .3rem .6rem; font-size: .78rem; }

/* ==========================================================================
   Paginacao
   ========================================================================== */

.paginacao {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cor-borda);
}

.paginacao-resumo { font-size: .82rem; color: var(--cor-texto-suave); }

.paginacao-links { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }

.paginacao-link {
    display: inline-block;
    padding: .35rem .65rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-min);
    font-size: .84rem;
    color: var(--cor-texto);
    background: var(--cor-superficie);
}

.paginacao-link:hover { background: var(--cor-elevada); text-decoration: none; }

.paginacao-atual {
    background: var(--cor-primaria);
    border-color: var(--cor-primaria);
    color: #fff;
    font-weight: 600;
}

.paginacao-reticencias { padding: 0 .2rem; color: var(--cor-texto-suave); }

/* ==========================================================================
   Formularios: grade, blocos e acoes
   ========================================================================== */

.grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
}

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

.campo-destaque input {
    font-family: var(--fonte-mono);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.bloco {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1rem 1.1rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .85rem;
    background: var(--cor-elevada);
}

.bloco legend {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cor-texto-suave);
    padding: 0 .4rem;
}

.checkbox {
    display: flex;
    align-items: center;
    gap: .55rem;
    font-size: .9rem;
    cursor: pointer;
}

.checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--cor-primaria);
    cursor: pointer;
}

.formulario-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .6rem;
    padding-top: 1rem;
    border-top: 1px solid var(--cor-borda);
}

.formulario-espaco { flex: 1 1 auto; }

/* ==========================================================================
   Pagina de confirmacao (substitui o confirm() do JavaScript)
   ========================================================================== */

.cartao-confirmacao {
    max-width: 560px;
    margin: 1rem auto;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .8rem;
    border-top: 4px solid var(--cor-alerta);
}

.confirmacao-icone { font-size: 2.4rem; color: var(--cor-alerta); line-height: 1; }
.confirmacao-pergunta { font-size: 1.1rem; font-weight: 600; }
.confirmacao-detalhe { color: var(--cor-texto-suave); font-size: .9rem; }

.confirmacao-acoes {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: .5rem;
}

/* ==========================================================================
   Lista de descricao (perfil)
   ========================================================================== */

.descricao {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin: 0 0 1rem;
}

.descricao-item { display: flex; flex-direction: column; gap: .2rem; }

.descricao-item dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cor-texto-suave);
    font-weight: 600;
}

.descricao-item dd { margin: 0; font-size: .95rem; }

/* Link do nome do usuario no topo */
a.usuario-nome { color: var(--cor-texto); }
a.usuario-nome:hover { color: var(--cor-primaria); text-decoration: none; }

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

    .login-arte {
        border-right: none;
        border-bottom: 1px solid var(--cor-borda);
        padding: 1.4rem 1.5rem 1.1rem;
    }

    .login-ilustracao { max-width: 170px; }
    .login-frase { display: none; }
    .login-form { padding: 1.5rem 1.4rem 1.75rem; }
}

@media (max-width: 700px) {
    .filtros-busca, .filtros-situacao { flex: 1 1 100%; }
    .filtros select { min-width: 0; }
    .celula-acoes .botao { margin-bottom: .25rem; }
}

/* Botao de consulta da placa: acao secundaria dentro do campo */
.botao-consulta {
    align-self: flex-start;
    margin-top: .35rem;
}

/* Vinculo do veiculo: particular de colaborador ou da frota da empresa */
.etiqueta-colaborador { background: #eef2ff; color: #4338ca; }
.etiqueta-empresa     { background: #ecfeff; color: #0e7490; }
.etiqueta-visitante   { background: var(--cor-alerta-fundo); color: var(--cor-alerta); }

/* ==========================================================================
   Etapa 7 - patio, movimentos, relatorios, auditoria e configuracoes
   ========================================================================== */

.indicadores-compactos .indicador { padding: .85rem 1rem; }
.indicador-valor-menor { font-size: 1.35rem; }

/* Data e hora no mesmo valor: afasta uma da outra e alivia o tamanho. */
.indicador-valor.indicador-momento { font-size: 1.1rem; word-spacing: .5rem; }

.cartao-nota { font-size: .82rem; color: var(--cor-texto-suave); }

.cartao-acoes {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* Barra de filtros em grade: periodo, placa, situacao, vinculo, origem */
.filtros-grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    align-items: end;
    gap: .75rem 1rem;
}

.filtros-grade .campo label { font-size: .78rem; }

.filtros-grade input,
.filtros-grade select {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-min);
    font: inherit;
    font-size: .9rem;
    background: var(--cor-superficie);
    color: var(--cor-texto);
}

.filtros-acoes {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
    padding-top: .25rem;
}

.filtros-espaco { flex: 1 1 auto; }

.celula-alerta { font-weight: 700; color: var(--cor-alerta); }
.celula-mono { font-family: var(--fonte-mono); font-size: .82rem; }
.texto-quebra { overflow-wrap: anywhere; }

.tabela tfoot .tabela-totais {
    background: var(--cor-primaria-clara);
    font-weight: 700;
}

.tabela tfoot .tabela-totais th,
.tabela tfoot .tabela-totais td { border-bottom: none; }

/* Detalhe do movimento: entrada de um lado, saida do outro */
.colunas-duas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1rem;
}

.bloco-leitura {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1rem 1.1rem;
    background: var(--cor-elevada);
}

.bloco-titulo {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--cor-texto-suave);
    margin-bottom: .75rem;
}

.descricao-linha { grid-template-columns: 1fr; gap: .6rem; }
.descricao-item-largo { grid-column: 1 / -1; }

/* Veiculos da pessoa na lista: carro, placa e cor, um por linha */
.lista-frota {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .3rem;
}

.lista-frota li {
    line-height: 1.35;
    white-space: nowrap;
}

/* Notas de versao do aplicativo: um grupo por tipo, uma nota por linha */
.lista-notas {
    margin: 0 0 1.1rem;
    padding-left: 1.2rem;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}

.lista-notas li { line-height: 1.45; }
.lista-notas:last-child { margin-bottom: 0; }

/* Distribuicao por faixa de permanencia: barras em CSS, sem grafico externo */
.faixas {
    display: flex;
    flex-direction: column;
    gap: .6rem;
}

.faixa {
    display: grid;
    grid-template-columns: 130px 1fr 60px;
    align-items: center;
    gap: .75rem;
    font-size: .88rem;
}

.faixa-rotulo { color: var(--cor-texto-suave); }

.faixa-barra {
    display: block;
    height: 14px;
    border-radius: 999px;
    background: var(--cor-elevada);
    overflow: hidden;
}

.faixa-preenchida {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: 999px;
    background: var(--cor-primaria);
}

.faixa-valor { text-align: right; font-weight: 700; }

@media (max-width: 700px) {
    .faixa { grid-template-columns: 1fr 50px; }
    .faixa-barra { grid-column: 1 / -1; order: 3; }
}

/* ==========================================================================
   Fotos do veiculo anexadas ao movimento
   ========================================================================== */

.galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.galeria-item {
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    overflow: hidden;
    background: var(--cor-elevada);
    display: flex;
    flex-direction: column;
}

.galeria-link { display: block; line-height: 0; background: #0f172a; }

.galeria-imagem {
    /* A foto do celular vem larga (1600x720 e afins). Com 'contain' ela
       aparece inteira dentro da moldura, em vez de ter as laterais
       cortadas por 'cover'. O fundo escuro fecha as sobras. */
    width: 100%;
    height: 165px;
    object-fit: contain;
    background: #0f172a;
    display: block;
}

.galeria-dados {
    display: flex;
    flex-direction: column;
    gap: .3rem;
    padding: .6rem .7rem .7rem;
    font-size: .82rem;
}

.galeria-dados .etiqueta { align-self: flex-start; }

.galeria-acoes {
    display: flex;
    gap: .35rem;
    margin-top: .25rem;
}

/* Momento em que a foto foi tirada */
.etiqueta-entrada { background: var(--cor-primaria-clara); color: var(--cor-primaria-forte); }
.etiqueta-ronda   { background: #f5f3ff; color: #6d28d9; }
.etiqueta-saida   { background: #e2e8f0; color: #475569; }

/* Formulario de uma acao so dentro de uma celula da tabela (desvincular
   veiculo da pessoa): o botao fica na linha, sem quebrar a celula */
.formulario-inline {
    display: inline;
    margin: 0;
}

.celula-acoes .formulario-inline { margin-left: .3rem; }

/* ==========================================================================
   Versoes do App Portaria
   Tudo preso a .vp. O azul da marca vale so aqui: o resto do painel segue
   com a primaria dele. Detalhes e confirmacoes sao <details>, porque a CSP
   nao permite JavaScript.
   ========================================================================== */

.vp {
    --cor-primaria: #004097;
    --cor-primaria-forte: #00306f;
    --cor-primaria-clara: #e8eff8;
    --cor-texto-suave: #4f5d70;
    --vp-colunas: minmax(9rem, 1.3fr) 6.5rem 10.5rem 8.5rem 5.5rem 5.5rem;

    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.vp :focus-visible { outline-color: var(--cor-primaria); }
.vp summary { cursor: pointer; list-style: none; }
.vp summary::-webkit-details-marker { display: none; }

.vp-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Barra: contexto e a acao principal */
.vp-barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    color: var(--cor-texto-suave);
    font-size: .9rem;
}

.vp-publicar[open] { flex-basis: 100%; }
.vp-publicar > summary { width: max-content; margin-left: auto; }

.vp-publicar-corpo {
    margin-top: .75rem;
    padding: 1.25rem;
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Referencia: identidade e fatos de um lado, notas do outro */
.vp-ref {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
}

.vp-ref-dados, .vp-ref-notas, .vp-ref-vazia { padding: 1.5rem; min-width: 0; }
.vp-ref-dados { display: flex; flex-direction: column; gap: 1rem; }
.vp-ref-notas { border-left: 1px solid var(--cor-borda); }
.vp-ref-notas h3 { font-size: 1rem; font-weight: 600; margin-bottom: .5rem; }
.vp-ref-vazia h2 { font-size: 1.25rem; font-weight: 600; margin-bottom: .25rem; }
.vp-ref-vazia p { color: var(--cor-texto-suave); }

.vp-ref-cabeca { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; }

.vp-ref-cabeca h2 {
    font-size: 2.25rem;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--cor-primaria-forte);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.vp-prova { max-width: 60ch; color: var(--cor-texto-suave); font-size: .92rem; }
.vp-prova-erro { color: var(--cor-erro); font-weight: 600; }

.vp-fatos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
    gap: .75rem 1.25rem;
    margin: 0;
}

.vp-fatos dt { font-size: .8rem; color: var(--cor-texto-suave); }
.vp-fatos dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; }
.vp-quebra { overflow-wrap: anywhere; font-weight: 400; }

/* Estado: sempre com texto, a cor so reforca */
.vp-estado {
    display: inline-block;
    padding: .15rem .55rem;
    border-radius: var(--raio-min);
    border: 1px solid transparent;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}

.vp-estado-distribuicao  { background: var(--cor-sucesso-fundo); color: #116631; border-color: #a7dcbc; }
.vp-estado-apk-ausente   { background: var(--cor-erro-fundo); color: var(--cor-erro); border-color: #f3b7b7; }
.vp-estado-substituida   { background: #eef1f5; color: #3f4c5e; }
.vp-estado-nao-publicada { background: var(--cor-alerta-fundo); color: #8f4207; border-color: #efd28f; }
.vp-estado-sem-apk       { background: transparent; color: #3f4c5e; border-color: #aab4c2; }

/* Notas: texto do autor, com as quebras dele */
.vp-aviso-app { color: var(--cor-texto-suave); margin-bottom: .5rem; white-space: pre-line; overflow-wrap: anywhere; }
.vp-notas-tipo { font-size: .85rem; font-weight: 600; margin: .5rem 0 .2rem; }
.vp-notas-lista { padding-left: 1.1rem; list-style: disc; display: flex; flex-direction: column; gap: .25rem; }
.vp-notas-lista li { max-width: 70ch; white-space: pre-line; overflow-wrap: anywhere; }
.vp-sem-notas { color: var(--cor-texto-suave); font-size: .9rem; }

.vp-mais > summary {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    color: var(--cor-primaria);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
}
.vp-mais[open] > summary { display: none; }

/* Acoes: consulta em branco, mudanca de estado separada e em vermelho vazado */
.vp-acoes { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.vp-acoes .botao { min-height: 2.75rem; }
.vp-confirma { margin-left: auto; }
.vp-confirma[open] { flex-basis: 100%; margin-left: 0; }
.vp-botao-estado { width: max-content; color: var(--cor-erro); border-color: #e4a5a5; }

.vp-confirma-corpo {
    margin-top: .5rem;
    padding: .875rem 1rem;
    background: var(--cor-fundo);
    border-radius: var(--raio-min);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .625rem;
}

/* Historico: uma grade so para cabecalho e linhas */
.vp-historico {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1.25rem 1.5rem 1rem;
}

.vp-historico > h2 { font-size: 1.1rem; font-weight: 600; margin-bottom: .5rem; }

.vp-colunas, .vp-linha > summary {
    display: grid;
    grid-template-columns: var(--vp-colunas);
    gap: .75rem;
    align-items: center;
}

.vp-colunas { padding: .25rem .5rem; font-size: .8rem; color: var(--cor-texto-suave); }
.vp-linha { border-top: 1px solid var(--cor-borda); scroll-margin-top: 5rem; }
.vp-linha > summary { min-height: 3rem; padding: .375rem .5rem; font-variant-numeric: tabular-nums; }
.vp-linha > summary:hover { background: #f6f8fb; }
.vp-linha[open] > summary { background: var(--cor-primaria-clara); }

.vp-c-versao { min-width: 0; overflow-wrap: anywhere; }
.vp-c-versao strong { font-size: 1.02rem; color: var(--cor-primaria-forte); }
.vp-build, .vp-c-tipo, .vp-c-notas { color: var(--cor-texto-suave); font-size: .88rem; }
.vp-build { margin-left: .35rem; white-space: nowrap; }

.vp-c-abrir { color: var(--cor-primaria); font-size: .88rem; font-weight: 600; justify-self: end; display: inline-flex; align-items: center; gap: .4rem; }
.vp-c-abrir::after {
    content: "";
    width: .45rem;
    height: .45rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
}
.vp-linha[open] .vp-c-abrir::after { transform: translateY(2px) rotate(-135deg); }

.vp-linha-corpo { padding: 1rem .5rem 1.25rem; display: flex; flex-direction: column; gap: .75rem; }
.vp-rodape { margin-top: .75rem; }

.vp-falha {
    background: var(--cor-superficie);
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .5rem;
}
.vp-falha h2 { font-size: 1.25rem; font-weight: 600; color: var(--cor-erro); }

/* Responde ao espaco da tela, entao vale tambem para zoom de 200% */
@container (max-width: 860px) {
    .vp-ref { grid-template-columns: minmax(0, 1fr); }
    .vp-ref-notas { border-left: 0; border-top: 1px solid var(--cor-borda); }
    .vp-colunas { display: none; }

    .vp-linha > summary {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "versao estado" "data abrir" "tipo notas";
        gap: .25rem .75rem;
        padding: .625rem .25rem;
    }
    .vp-c-versao { grid-area: versao; }
    .vp-c-estado { grid-area: estado; justify-self: end; }
    .vp-c-data { grid-area: data; color: var(--cor-texto-suave); font-size: .88rem; }
    .vp-c-abrir { grid-area: abrir; }
    .vp-c-tipo { grid-area: tipo; }
    .vp-c-notas { grid-area: notas; justify-self: end; }
}

@container (max-width: 480px) {
    .vp-ref-dados, .vp-ref-notas, .vp-historico, .vp-publicar-corpo { padding: 1rem; }
    .vp-ref-cabeca h2 { font-size: 1.9rem; }
    .vp-publicar > summary { width: 100%; }
    .vp-publicar { flex-basis: 100%; }
    .vp-confirma { margin-left: 0; flex-basis: 100%; }
    .vp-botao-estado, .vp-acoes .botao { width: 100%; }
    .vp-acoes > a.botao { flex: 1 1 100%; }
}

/* Movimento da tela de versoes: responde a uma acao ou acontece uma vez, ao
   carregar. Sem script, porque a CSP nao permite. */
.vp { interpolate-size: allow-keywords; --vp-curva: cubic-bezier(.16, 1, .3, 1); }

.vp-numero { display: inline-flex; }

.vp-rolo {
    display: inline-block;
    height: 1lh;
    overflow: hidden;
    vertical-align: bottom;
}

.vp-rolo::before {
    content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
    display: block;
    white-space: pre;
    transform: translateY(calc(var(--vp-d) * -1lh));
    animation: vp-rola .9s var(--vp-curva) backwards;
}

.vp-d0 { --vp-d: 0; } .vp-d1 { --vp-d: 1; } .vp-d2 { --vp-d: 2; } .vp-d3 { --vp-d: 3; } .vp-d4 { --vp-d: 4; }
.vp-d5 { --vp-d: 5; } .vp-d6 { --vp-d: 6; } .vp-d7 { --vp-d: 7; } .vp-d8 { --vp-d: 8; } .vp-d9 { --vp-d: 9; }

.vp-rolo:nth-child(2n)::before { animation-delay: 60ms; }
.vp-rolo:nth-child(3n)::before { animation-delay: 120ms; }

@keyframes vp-rola { from { transform: translateY(0); } }

.vp-ref, .vp-historico { animation: vp-entra .45s var(--vp-curva) backwards; }
.vp-historico { animation-delay: 80ms; }

@keyframes vp-entra { from { opacity: 0; transform: translateY(6px); } }

.vp details::details-content {
    block-size: 0;
    overflow: clip;
    opacity: 0;
    transition: block-size .28s var(--vp-curva), opacity .2s ease-out, content-visibility .28s allow-discrete;
}

.vp details[open]::details-content { block-size: auto; opacity: 1; }

.vp-linha > summary, .vp .botao { transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out, transform .1s ease-out; }
.vp .botao:active { transform: scale(.98); }
.vp-c-abrir::after { transition: transform .25s var(--vp-curva); }

@media (prefers-reduced-motion: reduce) {
    .vp *, .vp *::before, .vp *::after, .vp details::details-content { animation: none; transition: none; }
    .vp-ref, .vp-historico { animation: none; }
}

/* ==========================================================================
   Sala de controle: visual do painel inteiro
   Casca azul-marinho da Serraf, conteudo claro para leitura longa e numeros
   como elemento principal. Fica por ultimo para vencer a base sem !important.
   ========================================================================== */

:root {
    --cor-primaria: #004097;
    --cor-primaria-forte: #00306f;
    --cor-primaria-clara: #e8eff8;
    --cor-fundo: #eef2f7;
    --cor-texto-suave: #4f5d70;
    --marinho: #071a33;
    --marinho-2: #0c2a52;
    --marinho-linha: rgba(255, 255, 255, .14);
    --marinho-texto: #c9d6e8;
    --curva: cubic-bezier(.16, 1, .3, 1);
}

::selection { background: #bcd2ee; color: var(--marinho); }

.barra-lateral { background: var(--marinho); color: var(--marinho-texto); }
.menu-titulo { color: #93a7c2; text-transform: none; letter-spacing: 0; font-size: .78rem; }
.menu-item { color: var(--marinho-texto); transition: background-color .15s ease-out, color .15s ease-out; }
.menu-item:hover { background: var(--marinho-linha); }
.menu-item[aria-current="page"] { background: var(--cor-superficie); color: var(--marinho); }
.barra-lateral :focus-visible { outline-color: #fff; }

.topo { background: var(--marinho-2); border-bottom-color: var(--marinho-2); color: #fff; }
.topo a, .topo .usuario-nome { color: #fff; }
.topo-titulo { font-size: 1.25rem; letter-spacing: -.01em; }
.topo .botao-vazio { color: #fff; border-color: var(--marinho-linha); }
.topo .botao-vazio:hover { background: var(--marinho-linha); }
.topo :focus-visible { outline-color: #fff; }

.cartao { box-shadow: 0 1px 2px rgba(7, 26, 51, .05); border-radius: 12px; }
.cartao-titulo { font-size: 1.05rem; }

.tabela thead th { text-transform: none; letter-spacing: 0; font-size: .8rem; background: transparent; }
.tabela tbody tr { transition: background-color .15s ease-out; }
.tabela tbody tr:hover { background: var(--cor-primaria-clara); }

.botao { transition: background-color .15s ease-out, border-color .15s ease-out, transform .1s ease-out; }
.botao:active { transform: scale(.98); }

/* Indicadores: um destaque escuro, os outros quietos, numero sempre maior */
.indicador { border-radius: 12px; box-shadow: none; }
.indicador-rotulo { text-transform: none; letter-spacing: 0; font-size: .85rem; }
.indicador-valor { font-size: 2.25rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--marinho-2); }
.indicador-destaque { background: var(--marinho-2); border-color: var(--marinho-2); }
.indicador-destaque .indicador-rotulo { color: var(--marinho-texto); }
.indicador-destaque .indicador-valor { color: #fff; }
.indicador-alerta .indicador-valor { color: #8f4207; }

/* Numero que roda ao carregar, em qualquer tela */
.numero-rolo { display: inline-flex; }
.rolo { display: inline-block; height: 1lh; overflow: hidden; vertical-align: bottom; }
.rolo::before {
    content: "0\A 1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9";
    display: block;
    white-space: pre;
    transform: translateY(calc(var(--d) * -1lh));
    animation: rola .9s var(--curva) backwards;
}
.rolo-0 { --d: 0; } .rolo-1 { --d: 1; } .rolo-2 { --d: 2; } .rolo-3 { --d: 3; } .rolo-4 { --d: 4; }
.rolo-5 { --d: 5; } .rolo-6 { --d: 6; } .rolo-7 { --d: 7; } .rolo-8 { --d: 8; } .rolo-9 { --d: 9; }
.rolo:nth-child(2n)::before { animation-delay: 60ms; }
.rolo:nth-child(3n)::before { animation-delay: 120ms; }
@keyframes rola { from { transform: translateY(0); } }

.conteudo > * { animation: entra .45s var(--curva) backwards; }
.conteudo > *:nth-child(2) { animation-delay: 60ms; }
.conteudo > *:nth-child(3) { animation-delay: 120ms; }
@keyframes entra { from { opacity: 0; transform: translateY(8px); } }

/* Login */
.tela-limpa { background: var(--marinho); }

/* Versoes: a referencia vira o painel principal da sala */
.vp-ref { overflow: hidden; border-radius: 12px; border-color: var(--marinho-2); }
.vp-ref-dados { background: var(--marinho-2); color: #fff; }
.vp-ref-cabeca h2 { color: #fff; font-size: 2.75rem; }
.vp-ref-dados .vp-prova { color: var(--marinho-texto); }
.vp-ref-dados .vp-prova-erro { color: #ffd2d2; }
.vp-ref-dados .vp-fatos dt { color: var(--marinho-texto); }
.vp-ref-dados .vp-confirma-corpo { background: var(--marinho); color: #fff; }
.vp-ref-dados :focus-visible { outline-color: #fff; }
.vp-historico { border-radius: 12px; }

/* Linha do tempo: atalho para as ultimas versoes */
.vp-tempo { display: flex; overflow-x: auto; margin: .25rem 0 1rem; padding: .25rem .25rem .5rem; }
.vp-tempo a {
    flex: 1 0 6.5rem;
    min-height: 2.75rem;
    position: relative;
    padding-top: 1.1rem;
    color: var(--cor-texto-suave);
    font-size: .85rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}
.vp-tempo a::before { content: ""; position: absolute; top: .3rem; left: 0; right: 0; height: 2px; background: var(--cor-borda); }
.vp-tempo a::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: .65rem;
    height: .65rem;
    border-radius: 50%;
    background: var(--cor-superficie);
    border: 2px solid #8795a8;
}
.vp-tempo a[aria-current="true"] { color: var(--marinho-2); }
.vp-tempo a[aria-current="true"]::after { background: var(--cor-sucesso); border-color: var(--cor-sucesso); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none; transition: none; }
}

/* ==========================================================================
   Tema noite: azul-noite com amarelo-sinal. Amarelo so em acao, selecao e
   numero que manda; o resto fica nas superficies.
   ========================================================================== */

:root {
    color-scheme: dark;
    --cor-fundo: #070f1c;
    --cor-superficie: #0f1c30;
    --cor-elevada: #16273f;
    --cor-borda: #263a56;
    --cor-texto: #eef3fb;
    --cor-texto-suave: #a9b8cc;
    --cor-primaria: #ffc72c;
    --cor-primaria-forte: #ffd964;
    --cor-primaria-clara: #2a2a1c;
    --cor-sucesso: #5fe0a0;
    --cor-sucesso-fundo: #10352a;
    --cor-erro: #ff9c94;
    --cor-erro-fundo: #3d1a1f;
    --cor-alerta: #ffc873;
    --cor-alerta-fundo: #3a2a12;
    --marinho: #050b16;
    --marinho-2: #0b1626;
    --marinho-texto: #b9c7da;
}

::selection { background: #ffc72c; color: #070f1c; }

.vp {
    --cor-primaria: #ffc72c;
    --cor-primaria-forte: #ffd964;
    --cor-primaria-clara: #2a2a1c;
    --cor-texto-suave: #a9b8cc;
}

.botao { color: var(--cor-texto); }
.botao-primario, .botao-primario:hover { color: #070f1c; }
.botao-primario:hover { background: var(--cor-primaria-forte); }
.botao-perigo { background: #d92d3a; border-color: #d92d3a; color: #fff; }
.botao-perigo:hover { background: #b81f2b; }
.botao-vazio:hover { background: var(--cor-elevada); }

.menu-item[aria-current="page"] { background: var(--cor-primaria); color: #070f1c; }
.topo { border-bottom-color: var(--cor-borda); }
.topo-titulo { font-size: 1.35rem; font-weight: 700; }
.barra-lateral :focus-visible, .topo :focus-visible, .vp-ref-dados :focus-visible { outline-color: var(--cor-primaria); }

.cartao, .indicador { border-color: var(--cor-borda); box-shadow: none; }
.tabela tbody tr:hover { background: var(--cor-elevada); }
.campo label { color: var(--cor-texto); }
.campo input, .campo select, .campo textarea, .filtros input, .filtros select { color: var(--cor-texto); border-color: #3a506f; }
input::placeholder, textarea::placeholder { color: #8fa1b8; }

.etiqueta, .etiqueta-finalizado, .etiqueta-saida { background: #24364f; color: #dbe5f2; }
.etiqueta-dentro { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); }
.etiqueta-cancelado { background: var(--cor-erro-fundo); color: var(--cor-erro); }
.etiqueta-admin, .etiqueta-ronda { background: #33275a; color: #d6c8ff; }
.etiqueta-gestor, .etiqueta-colaborador { background: #1b3560; color: #bcd5ff; }
.etiqueta-porteiro, .etiqueta-empresa { background: #123f49; color: #a5eaf5; }
.etiqueta-visitante { background: var(--cor-alerta-fundo); color: var(--cor-alerta); }
.aviso-sucesso, .aviso-erro, .aviso-alerta { border-color: var(--cor-borda); }

.indicador-valor { color: var(--cor-texto); font-size: 2.75rem; }
.indicador-destaque { background: var(--cor-primaria); border-color: var(--cor-primaria); }
.indicador-destaque .indicador-rotulo, .indicador-destaque .indicador-valor { color: #070f1c; }
.indicador-alerta { background: var(--cor-alerta-fundo); border-color: #7a5a22; }
.indicador-alerta .indicador-valor { color: var(--cor-alerta); }

.tela-limpa, .login-arte { background: var(--cor-fundo); }
.login-form { background: var(--cor-superficie); }

.vp-ref { border-color: var(--cor-primaria); }
.vp-ref-dados { background: var(--cor-primaria); color: #070f1c; }
.vp-ref-cabeca h2 { color: #070f1c; font-size: 3.25rem; }
.vp-ref-dados .vp-prova, .vp-ref-dados .vp-fatos dt { color: #33301c; }
.vp-ref-dados .vp-prova-erro { color: #7a0c14; }
.vp-ref-dados .botao { background: #070f1c; border-color: #070f1c; color: #fff; }
.vp-ref-dados .vp-botao-estado { background: transparent; border-color: #070f1c; color: #070f1c; }
.vp-ref-dados .vp-confirma-corpo { background: #070f1c; color: #fff; }
.vp-ref-dados .vp-confirma-corpo .botao-perigo { background: #d92d3a; border-color: #d92d3a; }
.vp-ref-dados :focus-visible { outline-color: #070f1c; }
.vp-c-versao strong { color: var(--cor-texto); }
.vp-linha > summary:hover { background: var(--cor-elevada); }
.vp-botao-estado { color: var(--cor-erro); border-color: #8a3f46; }
.vp-estado-distribuicao { background: var(--cor-sucesso-fundo); color: var(--cor-sucesso); border-color: #2d6b52; }
.vp-ref-dados .vp-estado-distribuicao { background: #070f1c; color: var(--cor-sucesso); border-color: #070f1c; }
.vp-estado-apk-ausente { border-color: #7f3a42; }
.vp-estado-substituida { background: #24364f; color: #dbe5f2; }
.vp-estado-nao-publicada { background: var(--cor-alerta-fundo); color: var(--cor-alerta); border-color: #7a5a22; }
.vp-estado-sem-apk { color: #dbe5f2; border-color: #55697f; }
.vp-tempo a::after { background: var(--cor-superficie); border-color: #7f92aa; }
.vp-tempo a[aria-current="true"] { color: var(--cor-primaria); }
.vp-tempo a[aria-current="true"]::after { background: var(--cor-primaria); border-color: var(--cor-primaria); }

@media print {
    :root { color-scheme: light; --cor-superficie: #fff; --cor-texto: #000; --cor-borda: #999; --cor-texto-suave: #333; }
}

/* A logo e azul escuro: no login ela fica sobre branco, como no menu. */
.login-arte { background: #fff; }
.login-frase { color: #0b1626; }
.indicador { min-width: 0; }
.indicador-valor { font-size: clamp(1.6rem, 2.6vw, 2.25rem); }
.numero-rolo { flex-wrap: wrap; }

/* ==========================================================================
   Tema Guarita: preto com o azul da Serraf e trilho de icones no menu.
   Vem por ultimo de proposito, sobrepoe o tema noite.
   ========================================================================== */

.ico{width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:root{color-scheme:light}
.botao-primario,.botao-primario:hover{color:var(--sobre-acao)}
.menu-item[aria-current="page"]{background:var(--menu-ativo);color:var(--menu-ativo-txt)}
.vp-ref{border-color:var(--cor-borda)}
.vp-ref-dados{background:var(--ref);color:var(--ref-txt)}
.vp-ref-cabeca h2{color:var(--ref-txt)}
.vp-ref-dados .vp-prova,.vp-ref-dados .vp-fatos dt{color:var(--ref-sub)}
.vp-ref-dados .botao{background:var(--ref-botao);border-color:var(--ref-botao);color:var(--ref-botao-txt)}
.vp-ref-dados .vp-botao-estado{background:transparent;border-color:var(--ref-txt);color:var(--ref-txt)}
.vp-ref-dados .vp-estado-distribuicao{background:var(--ref-botao);color:var(--ref-botao-txt);border-color:var(--ref-botao)}
.indicador-destaque{background:var(--ref);border-color:var(--ref)}
.indicador-destaque .indicador-rotulo{color:var(--ref-sub)}
.indicador-destaque .indicador-valor{color:var(--ref-txt)}
.vp-tempo a[aria-current="true"]{color:var(--cor-texto)}
.vp-tempo a[aria-current="true"]::after{background:var(--acao);border-color:var(--acao)}
.etiqueta,.etiqueta-admin{background:var(--cor-elevada);color:var(--cor-texto)}
.vp-estado-distribuicao{background:var(--cor-sucesso-fundo);color:var(--cor-sucesso);border-color:transparent}
.vp-estado-substituida{background:var(--cor-elevada);color:var(--cor-texto)}
.vp-estado-nao-publicada{background:var(--cor-alerta-fundo);color:var(--cor-alerta);border-color:transparent}
.indicador-alerta{background:var(--cor-alerta-fundo);border-color:transparent}
.indicador-alerta .indicador-valor{color:var(--cor-alerta)}
:root{--cor-fundo:#0b0d11;--cor-superficie:#161a21;--cor-elevada:#212731;--cor-borda:#2e3644;--cor-texto:#f3f4f5;--cor-texto-suave:#b4b9c0;--cor-primaria:#6ea8ff;--cor-primaria-forte:#9cc3ff;--cor-primaria-clara:#14264a;--cor-sucesso:#7fdca5;--cor-sucesso-fundo:#1f3a2b;--cor-erro:#ff9c94;--cor-erro-fundo:#40211f;--cor-alerta:#ffd27a;--cor-alerta-fundo:#3f3118;--acao:#1560d4;--sobre-acao:#fff;--menu-ativo:#1560d4;--menu-ativo-txt:#fff;--ref:#004097;--ref-txt:#fff;--ref-sub:#c7dbff;--ref-botao:#fff;--ref-botao-txt:#004097}.vp{--cor-primaria:#6ea8ff;--cor-primaria-forte:#9cc3ff;--cor-primaria-clara:#14264a;--cor-texto-suave:#b4b9c0}
:root{color-scheme:dark}
body{font-family:Bahnschrift,"Segoe UI",sans-serif}
.botao-primario{background:#1560d4;border-color:#1560d4}
.botao-primario:hover{background:#004097;border-color:#004097}
@media(min-width:993px){
.barra-lateral{width:120px;flex-basis:120px;background:#000;padding:0;gap:0;position:sticky;top:0;height:100vh;overflow-y:auto}
.marca{padding:.5rem;margin:0}
.menu{padding:.5rem;gap:.15rem}
.menu-titulo{display:none}
.menu-item{flex-direction:column;gap:.15rem;font-size:.66rem;text-align:center;padding:.4rem .15rem;color:#c8cdd3;line-height:1.1}
}
.barra-lateral{background:#000}
.topo{background:#0b0d11;border-bottom:1px solid var(--cor-borda);color:#fff}
.topo-titulo{text-transform:none;font-size:1.5rem;font-weight:600}
.cartao,.indicador,.vp-ref,.vp-historico{border-radius:2px}
.indicador{border-width:0 0 0 0;background:var(--cor-superficie)}
.indicador-valor,.vp-ref-cabeca h2{font-weight:600;letter-spacing:0}
.vp-estado-sem-apk{color:var(--cor-texto)}
.indicador.indicador-destaque{background:var(--ref)}
.indicador.indicador-alerta{background:var(--cor-alerta-fundo)}
.marca{background:#000;border-bottom:1px solid var(--cor-borda)}
.barra-lateral .marca{padding:.75rem .6rem}
.logo-menu{max-width:100%}
@media(max-width:992px){.logo-menu{max-width:96px}}
@media(min-width:1200px){.indicadores{grid-template-columns:repeat(6,minmax(0,1fr))}.indicador{padding-left:1rem;padding-right:.75rem}}

::selection{background:#1560d4;color:#fff}
.vp-ref{border-color:var(--cor-borda)}
.vp-ref-dados .vp-prova-erro{color:#ffc9c4}
.vp-ref-dados :focus-visible{outline-color:#fff}
.botao-perigo,.botao-perigo:hover{color:#fff}
.vp-ref-dados .vp-confirma-corpo .botao-perigo{background:#d92d3a;border-color:#d92d3a;color:#fff}
.tela-limpa .botao-primario{color:#fff}

@media print {
    :root { color-scheme: light; --cor-fundo: #fff; --cor-superficie: #fff; --cor-elevada: #fff; --cor-texto: #000; --cor-borda: #999; --cor-texto-suave: #333; }
}

/* Trilho do menu cabe inteiro na altura da janela, sem rolagem: logo e itens
   encolhem junto com a tela. So em janela muito baixa a rolagem volta. */
@media (min-width: 993px) {
    .barra-lateral { overflow: hidden; }
    .barra-lateral .marca { flex: 0 0 auto; padding: min(.75rem, 1.2vh) .6rem; }
    .barra-lateral .logo-menu { width: auto; max-width: 100%; max-height: 13vh; margin: 0 auto; }
    .barra-lateral .marca-link { display: flex; justify-content: center; }
    .barra-lateral .menu { flex: 1 1 0; min-height: 0; justify-content: space-evenly; gap: 0; padding: .25rem .5rem; }
    .barra-lateral .menu-item { flex: 0 1 auto; min-height: 0; padding: min(.4rem, .55vh) .15rem; gap: .1rem; }
    .barra-lateral .menu-item .ico { width: 18px; height: 18px; flex-basis: 18px; }
}
@media (min-width: 993px) and (max-height: 620px) {
    .barra-lateral .menu-item { font-size: .6rem; line-height: 1; }
    .barra-lateral .menu-item .ico { width: 15px; height: 15px; flex-basis: 15px; }
}
@media (min-width: 993px) and (max-height: 479px) {
    .barra-lateral { overflow-y: auto; }
    .barra-lateral .menu { flex: 0 0 auto; }
}