/* ==========================================================================
   PADRÃO VISUAL — SISTEMA D'BIAGY
   --------------------------------------------------------------------------
   Um lugar só para as peças que se repetem no sistema inteiro: botões,
   etiquetas de situação, campos, cartões, tabelas e a barra de filtros.

   Por que existe: o sistema tinha 150 combinações diferentes de classe em
   botões, 8 cores de fundo sem regra de significado, 5 raios de canto e 7
   sombras misturados na mesma tela. Cada aba havia sido desenhada por conta
   própria, e quem usava reaprendia a interface a cada tela.

   Como usar: prefira estas classes a montar o estilo direto no HTML. Elas
   convivem com o Tailwind que já está nas páginas — este arquivo é carregado
   DEPOIS dele, então onde as duas se encontram, esta vence.
   ========================================================================== */

:root {
    /* ---- Marca ---- */
    --db-verde: #005443;
    --db-verde-900: #00301F;
    --db-verde-800: #00402F;
    --db-verde-300: #8FBFB2;
    --db-verde-100: #E4EDEA;

    /* ---- Neutros com leve viés verde (escolhidos, não herdados) ---- */
    --db-tinta: #12201C;
    --db-tinta-2: #5A6864;
    --db-tinta-3: #8A9490;
    --db-linha: #DDE4E1;
    --db-linha-2: #EBF0EE;
    --db-fundo: #F2F5F3;
    --db-papel: #FFFFFF;

    /* ---- Semânticas: separadas do acento da marca ----
       Cada uma difere também em claridade, não só em matiz, para continuar
       legível para quem não distingue bem as cores. */
    --db-ok: #005443;
    --db-info: #1E40AF;
    --db-atencao: #B45309;
    --db-atencao-txt: #8A3D06;
    --db-critico: #991B1B;

    /* ---- Medidas: duas de canto, e só ---- */
    --db-r-ctrl: 10px;
    --db-r-card: 12px;
    --db-sombra: 0 1px 2px rgba(10, 30, 24, .06);
    --db-alvo: 44px;      /* alvo mínimo de toque */
}

/* ==========================================================================
   BOTÕES — quatro, e só. A cor diz o que o botão faz.
   ========================================================================== */
.db-b {
    height: 40px;
    padding: 0 17px;
    border-radius: var(--db-r-ctrl);
    border: 1px solid transparent;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    transition: background-color .15s, border-color .15s, color .15s;
}
.db-b:disabled { opacity: .5; cursor: not-allowed; }

/* A ação que a tela existe para fazer. UMA por tela. */
.db-b-1 { background: var(--db-verde); color: #fff; }
.db-b-1:hover:not(:disabled) { background: var(--db-verde-800); }

/* Apoio: cancelar, voltar, exportar. Quantos precisar. */
.db-b-2 { background: var(--db-papel); color: #374151; border-color: #CBD5D1; }
.db-b-2:hover:not(:disabled) { background: var(--db-linha-2); }

/* Só para o que apaga algo. Sempre pede confirmação. */
.db-b-x { background: var(--db-critico); color: #fff; }
.db-b-x:hover:not(:disabled) { background: #7F1616; }

/* Dentro de linhas e cartões, para não competir com o principal. */
.db-b-d {
    background: none; border: 0; padding: 0; height: auto;
    color: var(--db-verde); font-family: inherit; font-size: 13px;
    font-weight: 600; cursor: pointer;
}
.db-b-d:hover { text-decoration: underline; }

/* Botão só de ícone. Alvo cresce no celular. */
.db-b-i {
    width: 36px; height: 36px; flex: 0 0 36px; padding: 0;
    border-radius: 9px; border: 1px solid var(--db-linha);
    background: var(--db-papel); color: var(--db-tinta-3);
    display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
}
.db-b-i:hover { color: var(--db-verde); border-color: var(--db-verde); }

/* ==========================================================================
   SITUAÇÃO — marcador, não pílula pastel.
   Barra vertical + rótulo em caixa alta. Só o crítico ganha fundo sólido,
   para ser o único que grita numa tela cheia.
   ========================================================================== */
.db-sit {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; white-space: nowrap;
}
.db-sit::before {
    content: ""; width: 3px; height: 12px; border-radius: 2px;
    background: currentColor; flex: 0 0 3px;
}
.db-sit-ok      { color: var(--db-ok); }
.db-sit-info    { color: var(--db-info); }
.db-sit-atencao { color: var(--db-atencao-txt); }
.db-sit-neutro  { color: var(--db-tinta-2); }
.db-sit-critico {
    color: #fff; background: var(--db-critico);
    padding: 3px 9px 3px 7px; border-radius: 6px;
}
.db-sit-critico::before { height: 10px; background: #fff; }

/* ==========================================================================
   CAMPOS
   ========================================================================== */
.db-campo { display: block; }
.db-campo > label {
    display: block; margin-bottom: 6px;
    font-size: 13px; font-weight: 600; color: #3B4A45;
}
.db-input, .db-select {
    width: 100%; height: 42px; padding: 0 12px;
    border: 1px solid #CBD5D1; border-radius: var(--db-r-ctrl);
    background: var(--db-papel); color: var(--db-tinta);
    font-family: inherit; font-size: 14px;
}
.db-input:focus, .db-select:focus {
    border-color: var(--db-verde); outline: none;
    box-shadow: 0 0 0 3px var(--db-verde-100);
}

/* ==========================================================================
   SUPERFÍCIES
   ========================================================================== */
.db-card {
    background: var(--db-papel);
    border: 1px solid var(--db-linha);
    border-radius: var(--db-r-card);
    padding: 18px;
}
.db-card-h {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: wrap; margin-bottom: 13px;
}
.db-card-h h2, .db-card-h h3 { font-size: 15px; font-weight: 700; margin: 0; }

/* ==========================================================================
   CABEÇALHO DE PÁGINA — posição fixa em todas as telas:
   título à esquerda, ação principal à direita, abas logo abaixo.
   ========================================================================== */
.db-topo {
    background: var(--db-papel);
    border-bottom: 1px solid var(--db-linha);
    padding: 16px 20px 0;
}
.db-topo-linha {
    display: flex; align-items: flex-end; gap: 10px;
    flex-wrap: wrap; padding-bottom: 14px;
}
.db-topo-tit { flex: 1 1 220px; min-width: 0; }
.db-topo h1 {
    margin: 0; font-family: 'Playfair Display', Georgia, serif;
    font-size: 26px; line-height: 1.1; color: var(--db-verde);
}
.db-topo p { margin: 3px 0 0; font-size: 13px; color: var(--db-tinta-2); }

.db-abas { display: flex; gap: 24px; overflow-x: auto; scrollbar-width: none; }
.db-abas::-webkit-scrollbar { display: none; }
.db-abas button {
    border: 0; background: none; padding: 0 0 12px;
    font-family: inherit; font-size: 14px; font-weight: 500;
    color: var(--db-tinta-2); cursor: pointer; white-space: nowrap;
    box-shadow: inset 0 -2px 0 transparent;
}
.db-abas button[aria-selected="true"],
.db-abas button.ativo {
    color: var(--db-verde); font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--db-verde);
}

/* ==========================================================================
   FILTROS — mesma ordem em toda tela:
   situação → seleções → período → busca → limpar.
   No celular a barra começa recolhida; a busca fica sempre visível.
   ========================================================================== */
.db-fbar {
    background: var(--db-papel); border: 1px solid var(--db-linha);
    border-radius: var(--db-r-card); padding: 11px 13px; margin-bottom: 14px;
}
.db-fbar-linha { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.db-fgrupo { display: flex; align-items: center; gap: 7px; }
.db-fgrupo > label {
    font-size: 11px; font-weight: 700; letter-spacing: .06em;
    text-transform: uppercase; color: var(--db-tinta-3); white-space: nowrap;
}
.db-fbar select, .db-fbar input[type="date"], .db-fbar input[type="month"] {
    height: 38px; padding: 0 10px; border: 1px solid #CBD5D1;
    border-radius: 9px; background: var(--db-papel); font-size: 13px; max-width: 100%;
}
.db-fbar select:focus, .db-fbar input:focus {
    border-color: var(--db-verde); outline: none;
    box-shadow: 0 0 0 3px var(--db-verde-100);
}
.db-busca { position: relative; display: flex; align-items: center; flex: 1 1 180px; max-width: 280px; margin-left: auto; }
.db-busca svg { position: absolute; left: 12px; pointer-events: none; }
.db-busca input {
    width: 100%; height: 38px; padding: 0 13px 0 35px;
    border: 1px solid #CBD5D1; border-radius: 9px; background: var(--db-papel);
    font-family: inherit; font-size: 13.5px;
}
.db-flimpar {
    border: 0; background: none; color: var(--db-tinta-2);
    font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer;
    padding: 0 4px; text-decoration: underline; white-space: nowrap;
}
.db-flimpar:hover { color: var(--db-critico); }

/* Etiquetas do que está filtrado agora — sem isto, a pessoa filtra,
   esquece, e depois acha que os registros sumiram. */
.db-fchips {
    display: flex; gap: 7px; flex-wrap: wrap;
    margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--db-linha-2);
}
.db-fchip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 4px 7px 4px 11px; background: var(--db-verde-100);
    color: var(--db-verde); border-radius: 999px;
    font-size: 12px; font-weight: 600;
}
.db-fchip button { border: 0; background: none; color: inherit; cursor: pointer; display: flex; padding: 0; opacity: .65; }
.db-fchip button:hover { opacity: 1; }
.db-fcount {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 19px; height: 19px; padding: 0 5px; border-radius: 999px;
    background: var(--db-verde); color: #fff; font-size: 11px; font-weight: 700;
}
.db-fbtn-m { display: none; }

/* Seletor segmentado (estoque, situação, pousada...) */
.db-seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--db-linha-2); border-radius: 11px; }
.db-seg button {
    border: 0; background: none; padding: 8px 15px; border-radius: 8px;
    font-family: inherit; font-size: 13px; font-weight: 500;
    color: #4C5A55; cursor: pointer; white-space: nowrap;
}
.db-seg button[aria-pressed="true"], .db-seg button.ativo {
    background: var(--db-papel); color: var(--db-verde);
    font-weight: 600; box-shadow: var(--db-sombra);
}

/* ==========================================================================
   TABELAS — sempre dentro de um container que rola sozinho, para a
   página nunca rolar de lado no celular.
   ========================================================================== */
.db-tabela {
    background: var(--db-papel); border: 1px solid var(--db-linha);
    border-radius: var(--db-r-card); overflow: hidden; max-width: 100%;
}
.db-rola { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
.db-tabela table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.db-tabela th {
    text-align: left; padding: 10px 15px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: var(--db-tinta-2);
    background: #F8FAF9; border-bottom: 1px solid var(--db-linha); white-space: nowrap;
}
.db-tabela td { padding: 12px 15px; border-bottom: 1px solid var(--db-linha-2); }
.db-tabela tr:last-child td { border-bottom: 0; }
.db-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ==========================================================================
   QUADRO DE COLUNAS (KANBAN) — chamados, pedidos de compra, pedidos especiais
   --------------------------------------------------------------------------
   Antes cada tela desenhava o próprio quadro, e cada coluna tinha um esquema
   de cor pastel diferente — fundo, texto e contador em tons próprios. O olho
   gastava tempo decorando qual cor era qual, em vez de ler os cartões.

   Aqui a coluna é branca; quem carrega a cor é o marcador de situação, o
   mesmo das outras telas, e a barra na lateral do cartão.
   ========================================================================== */
.kb { display: flex; gap: 14px; align-items: stretch; flex: 1 1 auto; min-height: 0; padding-bottom: 14px; overflow-x: auto; }
.kb-col {
    flex: 1 0 282px; min-width: 282px; display: flex; flex-direction: column;
    background: var(--db-papel); border: 1px solid var(--db-linha);
    border-radius: var(--db-r-card); overflow: hidden; max-height: 100%;
}
@media (min-width: 900px) { .kb-col { flex: 1 1 0; min-width: 0; } }

/* No celular as colunas EMPILHAM, uma embaixo da outra, e cada uma cresce até
   onde precisar. Lado a lado, com a tela rolando de lado, só cabia uma coluna
   e meia: para ver "Em andamento" era preciso descobrir que dava para arrastar
   o quadro, e os cartões da segunda coluna ficavam cortados na borda. */
@media (max-width: 899px) {
    .kb { display: block; overflow-x: visible; padding-bottom: 0; }
    .kb-col { display: flex; width: 100%; min-width: 0; max-height: none; margin-bottom: 12px; }
    .kb-col:last-child { margin-bottom: 0; }
    .kb-corpo { max-height: none; overflow-y: visible; }
    /* Coluna vazia vira uma linha só: sem isto, empilhadas, as três colunas
       sem nada empurravam a primeira com conteúdo para fora da tela. */
    .kb-corpo:empty::after { padding: 10px 0; }
}
.kb-tit {
    display: flex; align-items: center; gap: 9px; flex-shrink: 0;
    padding: 11px 14px; background: #F8FAF9; border-bottom: 1px solid var(--db-linha);
}
/* O marcador abraça o texto em vez de esticar: o crítico tem fundo sólido, e
   esticado virava uma tarja vermelha de ponta a ponta puxando o olho para
   longe dos cartões. */
.kb-tit .db-sit { flex: 0 1 auto; min-width: 0; }
.kb-n {
    margin-left: auto; flex: 0 0 auto;
    min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px;
    background: var(--db-linha-2); color: var(--db-tinta-2);
    font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.kb-corpo { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 11px; display: flex; flex-direction: column; gap: 10px; }
.kb-corpo:empty::after {
    content: "Nada aqui"; display: block; padding: 18px 0; text-align: center;
    color: var(--db-tinta-3); font-size: 12.5px; font-style: italic;
}

/* Cartão do quadro. A barra colorida na lateral diz a situação sem precisar
   ler; dentro, tudo tem o mesmo tamanho e a mesma ordem. */
.tk {
    background: var(--db-papel); border: 1px solid var(--db-linha);
    border-left: 4px solid var(--db-linha); border-radius: 10px;
    padding: 12px 13px; display: flex; flex-direction: column; cursor: grab;
}
.tk:active { cursor: grabbing; }
.tk-critico { border-left-color: var(--db-critico); }
.tk-atencao { border-left-color: var(--db-atencao); }
.tk-info    { border-left-color: var(--db-info); }
.tk-ok      { border-left-color: var(--db-ok); }
.tk-neutro  { border-left-color: var(--db-tinta-3); }
.tk-topo { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.tk-id { font-size: 11px; font-weight: 700; color: var(--db-tinta-3); font-variant-numeric: tabular-nums; }
.tk-x { margin-left: auto; border: 0; background: none; color: #C7D0CD; cursor: pointer; display: flex; padding: 2px; }
.tk-x:hover { color: var(--db-critico); }
.tk-rot { font-size: 9.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--db-tinta-3); }
.tk-forte { font-size: 14.5px; font-weight: 700; line-height: 1.25; color: var(--db-tinta); margin-top: 1px; }
.tk-txt { font-size: 12.5px; line-height: 1.4; color: var(--db-tinta-2); margin-top: 1px; }
.tk-pe {
    display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
    margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--db-linha-2);
    font-size: 11px; color: var(--db-tinta-3);
}
.tk-acoes { display: flex; flex-direction: column; gap: 6px; margin-top: 11px; }
.tk-acoes .db-b { width: 100%; height: 38px; font-size: 12.5px; }
.tk-obs {
    margin-top: 10px; padding: 9px 11px; border-radius: 9px;
    background: var(--db-linha-2); color: var(--db-tinta-2);
    font-size: 12px; line-height: 1.4; display: flex; gap: 7px;
}
.tk-itens { margin-top: 10px; border-top: 1px solid var(--db-linha-2); }
.tk-item {
    display: flex; justify-content: space-between; gap: 10px;
    padding: 6px 0; border-bottom: 1px solid var(--db-linha-2); font-size: 12.5px;
}
.tk-item:last-child { border-bottom: 0; }
.tk-item span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-item b { flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.drag-over { outline: 2px dashed var(--db-verde); outline-offset: -3px; }

/* ==========================================================================
   AVISOS
   ========================================================================== */
.db-aviso {
    display: flex; align-items: center; gap: 12px;
    padding: 13px 16px; border-radius: var(--db-r-card);
    margin-bottom: 16px; font-size: 13.5px; font-weight: 600;
}
.db-aviso svg { flex: 0 0 20px; }
.db-aviso-atencao { background: #FFF7E9; border: 1px solid #F0D8A4; color: var(--db-atencao-txt); }
.db-aviso-critico { background: #FEF2F2; border: 1px solid #FBC9C9; color: var(--db-critico); }
.db-aviso-ok { background: var(--db-verde-100); border: 1px solid #BFD8D0; color: var(--db-verde); }

/* ==========================================================================
   UTILITÁRIOS
   ========================================================================== */
.db-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.db-grade { display: grid; gap: 14px; align-items: start; }
.db-barra { height: 7px; background: var(--db-linha-2); border-radius: 4px; overflow: hidden; }
.db-barra > span { display: block; height: 100%; border-radius: 4px; }

/* ==========================================================================
   CELULAR
   ========================================================================== */
@media (max-width: 899px) {
    .db-topo { padding: 16px 16px 0; }
    .db-topo h1 { font-size: 21px; }
    .db-topo-linha .db-b { flex: 1 1 auto; }
    .db-b { height: 46px; }
    .db-b-i { width: var(--db-alvo); height: var(--db-alvo); flex: 0 0 var(--db-alvo); }
    .db-abas { gap: 18px; }

    .db-fbtn-m { display: inline-flex; flex: 0 0 auto; }
    /* Recolhido, some tudo que É filtro — inclusive o "Limpar", que sozinho
       na tela não diz o que vai limpar. O que não é filtro (uma ação da tela
       ao lado, por exemplo) continua à vista. */
    .db-fbar-linha.recolhido .db-fgrupo,
    .db-fbar-linha.recolhido .db-flimpar { display: none; }
    .db-fbar-linha { align-items: stretch; }
    .db-busca { margin-left: 0; max-width: none; flex: 1 1 100%; order: -1; }
    .db-fgrupo { flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 5px; }
    .db-fbar select, .db-fbar input[type="date"], .db-fbar input[type="month"] { height: 46px; width: 100%; }
    .db-seg { overflow-x: auto; }
    .db-flimpar { flex: 1 1 100%; text-align: left; padding: 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
    .db-b { transition: none; }
}

/* ==========================================================================
   CASCA DO APP — menu lateral no computador, barra inferior no celular
   --------------------------------------------------------------------------
   Antes a navegação era uma faixa de botões que quebrava em três linhas no
   desktop e virava uma gaveta com 16 itens soltos no celular: nenhuma das
   duas dizia onde a pessoa estava nem separava o que é Governança do que é
   Operação.

   Agora são duas formas da MESMA lista:
     · computador — coluna fixa à esquerda, itens agrupados, item atual marcado;
     · celular    — barra inferior com os 4 destinos mais usados do cargo, e
                    "Mais" abre a lista inteira em gaveta.

   A casca é posicionada de forma fixa e o espaço é aberto com padding no
   <body> (classe db-app, posta pelo menu.php). Assim nenhuma página precisa
   ser reestruturada para ganhar a navegação nova — inclusive as que usam
   h-screen/overflow-hidden, porque o box-sizing do Tailwind é border-box.
   ========================================================================== */
:root {
    --db-lat-l: 224px;   /* largura da coluna no computador */
    --db-lat-min: 68px;  /* mesma coluna recolhida, só com os ícones */
    --db-bnav-h: 78px;   /* altura da barra inferior no celular */
}

body.db-app { background: var(--db-fundo); color: var(--db-tinta); }

@media (min-width: 900px) {
    body.db-app { padding-left: var(--db-lat-l); }
    body.db-app.db-lat-fechada { padding-left: var(--db-lat-min); }
}
@media (max-width: 899px) { body.db-app { padding-bottom: var(--db-bnav-h); } }

/* ---- Coluna lateral ---- */
.db-lat {
    position: fixed; top: 0; left: 0; bottom: 0;
    width: var(--db-lat-l); box-sizing: border-box;
    background: var(--db-verde);
    display: flex; flex-direction: column;
    padding: 16px 0 12px; overflow-y: auto; z-index: 60;
}
.db-lat-marca { display: flex; align-items: center; gap: 10px; padding: 0 16px 16px; }
.db-lat-marca img { height: 36px; width: auto; flex: 0 0 auto; }
.db-lat-marca b {
    display: block; font-family: 'Playfair Display', Georgia, serif;
    font-size: 16px; color: #fff; line-height: 1.1;
}
.db-lat-marca small {
    display: block; font-size: 9.5px; letter-spacing: .12em;
    text-transform: uppercase; color: var(--db-verde-300); margin-top: 2px;
}
.db-lat nav { display: flex; flex-direction: column; }
.db-lat-g {
    margin: 15px 0 4px; padding: 0 16px;
    font-size: 9.5px; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--db-verde-300);
}
.db-lat-g:first-child { margin-top: 0; }
.db-lat-i {
    display: flex; align-items: center; gap: 11px;
    width: 100%; box-sizing: border-box; padding: 10px 16px;
    color: #CDE0DA; text-decoration: none; text-align: left;
    font-family: inherit; font-size: 13.5px; font-weight: 400; line-height: 1.3;
    background: none; border: 0; border-left: 3px solid transparent; cursor: pointer;
}
.db-lat-i:hover { background: var(--db-verde-800); color: #fff; }
.db-lat-i.db-lat-atual {
    background: var(--db-verde-800); color: #fff;
    font-weight: 600; border-left-color: #fff;
}
.db-lat-i svg { flex: 0 0 17px; }
.db-lat-i span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-lat-eu {
    margin-top: auto; padding: 12px 10px 0; border-top: 1px solid #1A6353;
    display: flex; align-items: center; gap: 4px;
}
.db-lat-eu-quem {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 9px;
    padding: 6px; border-radius: 9px; text-decoration: none;
}
.db-lat-eu-quem:hover, .db-lat-eu-quem.db-lat-atual { background: var(--db-verde-800); }
.db-lat-eu-txt { min-width: 0; overflow: hidden; }
.db-lat-sair {
    flex: 0 0 34px; width: 34px; height: 34px; border-radius: 9px;
    border: 0; background: none; color: var(--db-verde-300);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.db-lat-sair:hover { background: var(--db-verde-800); color: #fff; }
.db-lat-eu .db-av {
    width: 30px; height: 30px; flex: 0 0 30px; border-radius: 50%;
    background: #1A6353; color: #fff; font-size: 12px; font-weight: 600;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.db-lat-eu .db-av img { width: 100%; height: 100%; object-fit: cover; }
.db-lat-eu b { display: block; font-size: 12.5px; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-lat-eu small { display: block; font-size: 11px; color: var(--db-verde-300); text-transform: capitalize; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.db-lat-fechar { display: none; }

/* ---- Coluna recolhida (só computador) ----
   Uma tela como o cronograma da semana tem sete colunas para caber; poder
   recolher o menu devolve 156px para o conteúdo sem perder a navegação. A
   escolha fica guardada no navegador de quem usa (ver menu.php), e é aplicada
   antes da página aparecer, para não dar solavanco ao carregar. */
@media (min-width: 900px) {
    body.db-lat-fechada .db-lat { width: var(--db-lat-min); }

    /* Some o que é texto; ficam os ícones. */
    body.db-lat-fechada .db-lat-i > span,
    body.db-lat-fechada .db-lat-marca > div,
    body.db-lat-fechada .db-lat-eu-txt { display: none; }

    body.db-lat-fechada .db-lat-i { justify-content: center; padding-left: 0; padding-right: 0; gap: 0; }
    body.db-lat-fechada .db-lat-marca { justify-content: center; padding: 0 0 16px; }
    body.db-lat-fechada .db-lat-eu { justify-content: center; padding: 12px 0 0; }
    body.db-lat-fechada .db-lat-eu-quem { flex: 0 0 auto; justify-content: center; }
    body.db-lat-fechada .db-lat-sair { display: none; }

    /* O título do grupo vira um risco: a divisão entre Governança, Operação e
       Sistema continua legível sem ocupar linha de texto. */
    body.db-lat-fechada .db-lat-g {
        height: 1px; margin: 12px 16px; padding: 0;
        overflow: hidden; font-size: 0; color: transparent;
        background: rgba(255, 255, 255, .16);
    }
}

/* ---- Véu da gaveta (só celular) ---- */
.db-lat-veu { display: none; }

/* ---- Barra de topo do computador ---- */
.db-topoapp {
    display: flex; align-items: center; gap: 12px;
    height: 54px; flex: 0 0 auto; box-sizing: border-box;
    padding: 0 20px; background: var(--db-papel);
    border-bottom: 1px solid var(--db-linha);
    position: sticky; top: 0; z-index: 45;
}
/* Recolher/expandir a coluna: primeiro elemento da barra de topo, alinhado
   com a coluna que ele controla. */
.db-topoapp-recolher {
    width: 34px; height: 34px; flex: 0 0 34px; margin-left: -4px;
    border: 1px solid var(--db-linha); border-radius: 9px;
    background: var(--db-papel); color: var(--db-tinta-2);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
    transition: color .15s, border-color .15s, background-color .15s;
}
.db-topoapp-recolher:hover { color: var(--db-verde); border-color: var(--db-verde); background: var(--db-verde-100); }
/* Recolhida, o próprio ícone mostra o estado: a parte estreita fica cheia. */
body.db-lat-fechada .db-topoapp-recolher { color: var(--db-verde); border-color: var(--db-verde-300); background: var(--db-verde-100); }

.db-topoapp h1 {
    margin: 0; font-family: 'Playfair Display', Georgia, serif;
    font-size: 19px; line-height: 1.1; color: var(--db-verde);
}
.db-topoapp-dir { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.db-topoapp-data { font-size: 12px; color: var(--db-tinta-2); text-transform: capitalize; }

/* ---- Barra de topo do celular ---- */
.db-topom { display: none; }

/* ---- Barra inferior do celular ---- */
.db-bnav { display: none; }

@media (max-width: 899px) {
    .db-topoapp { display: none !important; }

    .db-lat {
        width: 272px; transform: translateX(-100%);
        transition: transform .25s ease;
        padding-top: calc(16px + env(safe-area-inset-top, 0px));
        box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    }
    .db-lat.db-aberto { transform: none; }
    .db-lat-fechar {
        display: flex; align-items: center; justify-content: center;
        position: absolute; top: calc(14px + env(safe-area-inset-top, 0px)); right: 12px;
        width: 38px; height: 38px; border-radius: 10px;
        border: 0; background: var(--db-verde-800); color: #fff; cursor: pointer;
    }
    .db-lat-veu {
        display: none; position: fixed; inset: 0;
        background: rgba(10, 30, 24, .55); z-index: 55;
    }
    .db-lat-veu.db-aberto { display: block; }
    .db-lat-i { padding: 12px 16px; font-size: 14.5px; }

    .db-topom {
        display: flex; align-items: center; gap: 11px;
        background: var(--db-verde); flex: 0 0 auto;
        padding: calc(11px + env(safe-area-inset-top, 0px)) 14px 11px;
        position: sticky; top: 0; z-index: 45;
    }
    .db-topom img { height: 34px; width: auto; flex: 0 0 auto; }
    .db-topom b { display: block; font-size: 15px; color: #fff; line-height: 1.2; }
    .db-topom small { display: block; font-size: 11.5px; color: var(--db-verde-300); }
    .db-topom .db-topom-tit { min-width: 0; overflow: hidden; flex: 1 1 auto; }
    .db-topom .db-topom-tit b,
    .db-topom .db-topom-tit small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .db-topom-btn {
        width: 38px; height: 38px; flex: 0 0 38px; border-radius: 10px;
        border: 0; background: var(--db-verde-800); color: #fff;
        display: flex; align-items: center; justify-content: center; cursor: pointer;
    }
    .db-topom .db-av {
        width: 36px; height: 36px; flex: 0 0 36px; border-radius: 50%;
        background: var(--db-verde-800); color: #fff; font-size: 12.5px; font-weight: 600;
        display: flex; align-items: center; justify-content: center; overflow: hidden;
        text-decoration: none;
    }
    .db-topom .db-av img { width: 100%; height: 100%; object-fit: cover; }

    .db-bnav {
        position: fixed; left: 0; right: 0; bottom: 0;
        width: 100%; max-width: 100vw; box-sizing: border-box;
        display: flex; background: var(--db-papel);
        border-top: 1px solid var(--db-linha);
        padding: 7px 2px calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 50;
    }
    /* min-width:0 é o que impede a barra de ficar mais larga que a tela:
       item de flex não encolhe abaixo do próprio conteúdo sem isto. */
    .db-bnav a, .db-bnav button {
        flex: 1 1 0; min-width: 0; display: flex; flex-direction: column;
        align-items: center; gap: 3px; padding: 4px 2px;
        text-decoration: none; color: var(--db-tinta-3);
        font-family: inherit; font-size: 10px; font-weight: 600; letter-spacing: -.01em;
        text-align: center; background: none; border: 0; cursor: pointer;
    }
    /* Duas linhas em vez de abreviar: "Ocorrências" não cabe em 1/5 de 390px
       numa linha só, e "Ocorrên." não é palavra nenhuma. */
    .db-bnav span {
        display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
        max-width: 100%; overflow: hidden; line-height: 1.15;
    }
    .db-bnav svg { flex: 0 0 auto; }
    .db-bnav .db-bnav-atual { color: var(--db-verde); font-weight: 700; }

    /* O assistente flutuante ficava embaixo da barra inferior. */
    body.db-app #chatIaWidgetBtn { bottom: calc(var(--db-bnav-h) + 6px) !important; }
}

@media (min-width: 900px) {
    .db-lat { transform: none !important; }
    .db-so-cel { display: none !important; }
}
@media (max-width: 899px) {
    .db-so-desk { display: none !important; }
}

/* ==========================================================================
   CONVIVÊNCIA COM O `hidden` DO TAILWIND
   --------------------------------------------------------------------------
   Esta folha é carregada por último de propósito. O efeito colateral é que,
   numa peça daqui que também leve a classe `hidden` do Tailwind, o display
   da peça vence e o elemento aparece quando deveria estar escondido — foi o
   que aconteceu com a etiqueta "Foto" de cada item da vistoria, que nascia
   visível nos vinte itens.

   A correção é explícita e limitada às peças daqui. Mexer no `.hidden` solto
   (com !important, por exemplo) quebraria os vários `hidden md:block` que o
   sistema usa para esconder coluna de tabela no celular.
   ========================================================================== */
.db-sit.hidden, .db-b.hidden, .db-b-i.hidden, .db-b-d.hidden,
.db-flimpar.hidden, .db-seg.hidden, .db-card.hidden, .db-fbar.hidden,
.db-fbar-linha.hidden, .db-fgrupo.hidden, .db-tabela.hidden, .db-aviso.hidden,
.db-campo.hidden, .db-grade.hidden, .db-busca.hidden, .db-fchips.hidden,
.db-barra.hidden, .db-rola.hidden, .db-abas.hidden, .db-topo.hidden,
.db-lat-i.hidden, .db-card-h.hidden, .db-fcount.hidden, .db-fchip.hidden,
.db-fbtn-m.hidden, .db-seg button.hidden {
    display: none;
}

/* ==========================================================================
   "MAIS" — a lista inteira do menu, em folha, no celular
   --------------------------------------------------------------------------
   No computador o menu é a coluna. No celular, a barra de baixo tem quatro
   lugares e o resto vive aqui: cada destino numa linha grande, com ícone e
   uma frase do que ele faz. Antes o "Mais" abria a mesma gaveta estreita do
   computador, com os itens em linhas de 14px — cabia tudo, mas não se lia
   nada de pé, com uma mão.
   ========================================================================== */
/* Acima do assistente flutuante (z-index 998/999 em js/chat-ia-widget.js):
   com a folha aberta, o balão verde ficava boiando por cima da lista. */
.db-mais { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: flex-end; }
.db-mais[hidden] { display: none; }
.db-mais-veu { position: absolute; inset: 0; background: rgba(10, 30, 24, .55); }
.db-mais-cx {
    position: relative; width: 100%; max-height: 88vh;
    display: flex; flex-direction: column;
    background: var(--db-fundo);
    border-radius: 18px 18px 0 0; overflow: hidden;
    animation: dbMaisSobe .2s ease-out;
}
@keyframes dbMaisSobe { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .db-mais-cx { animation: none; } }

.db-mais-topo {
    display: flex; align-items: center; gap: 12px; flex-shrink: 0;
    padding: 16px 16px 13px; background: var(--db-papel);
    border-bottom: 1px solid var(--db-linha);
}
.db-mais-topo b { display: block; font-family: 'Playfair Display', Georgia, serif; font-size: 19px; color: var(--db-verde); }
.db-mais-topo small { display: block; font-size: 12.5px; color: var(--db-tinta-2); margin-top: 2px; }
.db-mais-topo > div { flex: 1 1 auto; min-width: 0; }
.db-mais-x {
    width: var(--db-alvo); height: var(--db-alvo); flex: 0 0 var(--db-alvo);
    border: 1px solid var(--db-linha); border-radius: 10px;
    background: var(--db-papel); color: var(--db-tinta-2);
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}

.db-mais-lista {
    flex: 1 1 auto; min-height: 0; overflow-y: auto;
    padding: 12px 14px calc(18px + env(safe-area-inset-bottom, 0px));
    display: flex; flex-direction: column; gap: 9px;
}
.db-mais-g {
    margin: 10px 0 1px; font-size: 9.5px; font-weight: 700;
    letter-spacing: .13em; text-transform: uppercase; color: var(--db-tinta-3);
}
.db-mais-g:first-child { margin-top: 0; }
.db-mais-item {
    display: flex; align-items: center; gap: 14px; width: 100%; box-sizing: border-box;
    padding: 13px 15px; background: var(--db-papel);
    border: 1px solid var(--db-linha); border-radius: var(--db-r-card);
    font-family: inherit; text-align: left; text-decoration: none; cursor: pointer;
}
.db-mais-item:active { background: var(--db-linha-2); }
.db-mais-atual { border-color: var(--db-verde); box-shadow: inset 3px 0 0 var(--db-verde); }
.db-mais-ic {
    width: 42px; height: 42px; flex: 0 0 42px; border-radius: 11px;
    background: var(--db-verde-100); color: var(--db-verde);
    display: flex; align-items: center; justify-content: center;
}
.db-mais-txt { flex: 1 1 auto; min-width: 0; }
.db-mais-txt b { display: block; font-size: 15px; font-weight: 700; color: var(--db-tinta); line-height: 1.25; }
.db-mais-txt small { display: block; font-size: 12.5px; color: var(--db-tinta-2); margin-top: 2px; line-height: 1.3; }
.db-mais-sair .db-mais-ic { background: #FEF2F2; color: var(--db-critico); }
.db-mais-sair .db-mais-txt b { color: var(--db-critico); }

/* No computador a folha nunca aparece: lá o menu é a coluna. */
@media (min-width: 900px) { .db-mais { display: none !important; } }