/* ==========================================================================
   DESIGN SYSTEM — Controle Ilustra
   FONTE ÚNICA DA VERDADE do visual. Nenhuma view define estilo próprio:
   tudo aqui. Alterou um token, mudou em todo o sistema.
   Consulte a página /design-system para ver tudo renderizado.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) TOKENS  (cores, tipografia, espaçamento, raio, sombra)
   -------------------------------------------------------------------------- */
:root {
    /* ---- ESCALA DA MARCA (paleta oficial Ilustra) ------------------------
       Proporção de uso: ~96% azul-petróleo · ~3% branco · ~0,1% vermelho.
       O vermelho é ACENTO: só perigo/destaque pontual, nunca área grande. */
    --marca-900: #005468;  /* petróleo profundo  (fundos/degradês)          */
    --marca-800: #00728A;  /* PRIMÁRIA — cor da logo                        */
    --marca-600: #4095A7;  /* azul médio                                    */
    --marca-400: #7FB8C4;  /* azul claro                                    */
    --marca-200: #BFDCE2;  /* azul muito claro (bordas)                     */
    --marca-50:  #EFF6F8;  /* quase branco azulado (superfície)             */
    --marca-vermelho: #9E192A; /* acento — 0,1% da identidade              */

    /* Aliases semânticos da marca (usados pelos componentes) */
    --cor-primaria:        var(--marca-800);
    --cor-primaria-escura: var(--marca-900);
    --cor-primaria-media:  var(--marca-600);
    --cor-primaria-clara:  var(--marca-400);
    --cor-primaria-suave:  var(--marca-50);
    --cor-primaria-borda:  var(--marca-200);
    --cor-marca-vermelho:  var(--marca-vermelho);

    /* Semânticas */
    --cor-sucesso:      #0e8a6a;
    --cor-sucesso-suave:#e8f7f2;
    --cor-perigo:       var(--marca-vermelho);
    --cor-perigo-suave: #FBEAEC;
    --cor-alerta:       #b45309;
    --cor-alerta-suave: #fffaeb;
    --cor-info:         var(--marca-600);
    --cor-info-suave:   var(--marca-50);

    /* Neutros — levemente puxados pro azul da marca (nada de cinza morto) */
    --tinta:      #0a2530;   /* texto principal */
    --tinta-2:    #40616c;   /* texto secundário */
    --muted:      #7d99a3;   /* texto apagado */
    --linha:      #e3eef1;
    --linha-2:    #d3e4e9;
    --fundo:      #F4F9FB;
    --superficie: #ffffff;

    /* Degradês e vidro (efeito "Apple") */
    --grad-marca:  linear-gradient(135deg, #00728A 0%, #4095A7 100%);
    --grad-fundo:  radial-gradient(1200px 600px at 15% -10%, #E7F3F6 0%, transparent 60%),
                   radial-gradient(900px 500px at 100% 0%, #EFF6F8 0%, transparent 55%);
    --vidro:       rgba(255,255,255,.72);
    --vidro-borda: rgba(255,255,255,.6);
    --blur:        saturate(180%) blur(20px);

    /* Tipografia */
    --fonte:      "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
    --fonte-mono: "Cascadia Code", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --texto-xs: 12px;
    --texto-sm: 13.5px;
    --texto-md: 15px;
    --texto-lg: 17px;
    --texto-xl: 22px;
    --texto-2xl: 27px;

    /* Espaçamento (escala de 4px) */
    --esp-1: 4px;
    --esp-2: 8px;
    --esp-3: 12px;
    --esp-4: 16px;
    --esp-5: 20px;
    --esp-6: 24px;
    --esp-8: 32px;

    /* Raio de borda — mais generoso, estilo iOS/macOS */
    --raio-sm: 10px;
    --raio:    14px;
    --raio-lg: 20px;
    --raio-xl: 28px;
    --raio-full: 999px;

    /* Sombras em camadas (luz suave, tingida de petróleo — nunca preto puro) */
    --sombra-sm: 0 1px 2px rgba(0,84,104,.06), 0 1px 3px rgba(0,84,104,.04);
    --sombra:    0 2px 4px rgba(0,84,104,.04), 0 8px 24px rgba(0,84,104,.07);
    --sombra-md: 0 4px 8px rgba(0,84,104,.05), 0 16px 40px rgba(0,84,104,.10);
    --sombra-lg: 0 12px 24px rgba(0,84,104,.10), 0 32px 72px rgba(0,84,104,.16);
    --brilho-marca: 0 6px 20px rgba(0,114,138,.28);

    /* Curvas de animação — as mesmas famílias que a Apple usa nas interfaces */
    --ease-suave:  cubic-bezier(.4, 0, .2, 1);     /* padrão                 */
    --ease-saida:  cubic-bezier(.16, 1, .3, 1);    /* desacelera no fim      */
    --ease-mola:   cubic-bezier(.34, 1.56, .64, 1);/* passa e volta (spring) */
    --transicao:      .22s var(--ease-suave);
    --transicao-lenta:.45s var(--ease-saida);

    /* Layout */
    --largura-sidebar: 248px;
}

/* --------------------------------------------------------------------------
   2) RESET / BASE
   -------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--fonte);
    font-size: var(--texto-md);
    line-height: 1.55;
    color: var(--tinta);
    background: var(--fundo);
    background-image: var(--grad-fundo);
    background-attachment: fixed;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
/* Títulos com tracking negativo progressivo (quanto maior, mais apertado) */
h1, h2, h3, h4 { margin: 0; letter-spacing: -.021em; line-height: 1.2; font-weight: 650; }
h1 { letter-spacing: -.035em; }
a { color: var(--cor-primaria-escura); }
.num, .moeda { font-variant-numeric: tabular-nums; }
.moeda { font-weight: 700; color: var(--tinta); white-space: nowrap; }
.oculto { display: none !important; }
.texto-muted { color: var(--muted); }
.texto-centro { text-align: center; }

/* Utilitários — existem para que nenhuma view precise escrever style="" na mão.
   Se faltar algum, acrescente aqui em vez de criar estilo solto na página. */
.txt-info     { color: var(--cor-info); }
.txt-sucesso  { color: var(--cor-sucesso); }
.txt-perigo   { color: var(--cor-perigo); }
.txt-forte    { font-weight: 700; }
.txt-sm       { font-size: var(--texto-sm); }
.txt-xs       { font-size: var(--texto-xs); }
.txt-linhas   { white-space: pre-line; }

.sem-margem       { margin: 0; }
.sem-margem-topo  { margin-top: 0; }
.sem-margem-baixo { margin-bottom: 0; }
.mt-1 { margin-top: var(--esp-1); }
.mt-2 { margin-top: var(--esp-2); }
.mt-3 { margin-top: var(--esp-3); }
.mt-4 { margin-top: var(--esp-4); }
.mb-3 { margin-bottom: var(--esp-3); }

/* Formulário que existe só para envolver um botão dentro de uma linha da tabela */
.form-inline { margin: 0; display: inline; }
.form-fim { margin-left: auto; }
/* Título de bloco dentro de uma página (ex.: "Promotoria", "OPs" no painel) */
.titulo-secao { margin: 0 0 var(--esp-3); }
/* Barra de ações no topo de uma listagem */
.barra-acoes { margin-top: 0; margin-bottom: var(--esp-4); }
/* Item de lista que é um link inteiro clicável */
.item-link { text-decoration: none; color: inherit; }
/* Cartão de número em destaque (total geral do painel) */
.card-destaque { text-align: center; padding: 22px; }
.card-destaque .num { font-size: 32px; display: block; margin-top: 4px; }

.mb-2 { margin-bottom: var(--esp-2); }
.txt-caixa-alta { text-transform: uppercase; }
/* Legenda logo abaixo de um título, encostada nele */
.sub-titulo { margin-top: -8px; }
.sub-titulo-esp { margin-top: -8px; margin-bottom: 14px; }
/* Faixa de totais no rodapé de um cartão */
.alerta-totais { margin-top: var(--esp-4); margin-bottom: 0; }
/* Linha de itens que quebram (botões, anexos) */
.linha-flex { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.coluna { display: flex; flex-direction: column; }
/* Bloco de info em linha (miniatura da logo + textos) */
.info-horizontal { flex-direction: row; align-items: center; gap: 14px; }
/* Formulário de upload que vive dentro de uma linha */
.form-upload { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.input-curto { max-width: 230px; }
.empurra-fim { margin-left: auto; }
/* Grade de estatísticas com três colunas (tela de gastos) */
.stats-3 { grid-template-columns: repeat(3, 1fr); }
/* Linha de somatório no rodapé de uma tabela */
.linha-total { font-weight: 700; }
.linha-total-forte { font-weight: 700; border-top: 2px solid var(--linha-2); }
.vazio-grande { padding: 24px; }
.nota-campo { font-size: 12.5px; margin: 6px 0 0; }
/* Larguras fixas de coluna na tabela de itens da OP/PI */
.col-qtd  { width: 90px; }
.col-custo { width: 130px; }
.col-acao { width: 44px; }

/* --------------------------------------------------------------------------
   3) LAYOUT (app shell: sidebar + conteúdo)
   -------------------------------------------------------------------------- */
.app { display: flex; min-height: 100vh; }

/* Sidebar em "vidro fosco" — deixa o degradê do fundo transparecer */
.sidebar {
    width: var(--largura-sidebar); flex-shrink: 0;
    background: var(--vidro);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border-right: 1px solid rgba(191,220,226,.55);
    display: flex; flex-direction: column; padding: var(--esp-5) var(--esp-4);
    position: sticky; top: 0; height: 100vh; z-index: 20;
}
.marca { display: flex; align-items: center; gap: var(--esp-3); padding: 6px 8px var(--esp-6); }
.marca-logo {
    width: 40px; height: 40px; flex-shrink: 0; color: #fff; display: grid; place-items: center;
    border-radius: var(--raio); background: var(--grad-marca); overflow: hidden;
    box-shadow: var(--brilho-marca);
    transition: transform var(--transicao-lenta), box-shadow var(--transicao-lenta);
}
.marca:hover .marca-logo { transform: scale(1.06) rotate(-2deg); box-shadow: 0 10px 28px rgba(0,114,138,.4); }
.marca-logo svg { width: 22px; height: 22px; }
.marca-txt strong { display: block; font-size: 15.5px; }
.marca-txt small { color: var(--muted); font-size: var(--texto-xs); }

.nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item {
    position: relative; display: flex; align-items: center; gap: var(--esp-3);
    padding: 10px var(--esp-3); border-radius: 11px; text-decoration: none;
    color: var(--tinta-2); font-size: 14.5px; font-weight: 550;
    background: none; border: none; cursor: pointer; text-align: left; width: 100%;
    transition: background var(--transicao), color var(--transicao), transform .18s var(--ease-mola);
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; color: var(--muted); transition: color var(--transicao), transform .3s var(--ease-mola); }
.nav-item:hover { background: rgba(0,114,138,.06); color: var(--tinta); transform: translateX(2px); }
.nav-item:hover svg { color: var(--cor-primaria-media); transform: scale(1.08); }
.nav-item.ativo { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); font-weight: 650; }
.nav-item.ativo svg { color: var(--cor-primaria); }
/* Marcador vertical que "cresce" no item ativo */
.nav-item.ativo::before {
    content: ""; position: absolute; left: -8px; top: 50%;
    width: 3px; height: 60%; transform: translateY(-50%); border-radius: 0 3px 3px 0;
    background: var(--grad-marca); animation: marcador .35s var(--ease-saida);
}
@keyframes marcador { from { height: 0; opacity: 0; } to { height: 60%; opacity: 1; } }
.nav-sep { margin: var(--esp-3) var(--esp-3) var(--esp-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

.sidebar-rodape { margin-top: auto; display: flex; flex-direction: column; gap: var(--esp-3); padding-top: var(--esp-3); }
.usuario-box {
    display: flex; align-items: center; justify-content: space-between; gap: var(--esp-2);
    padding: var(--esp-2) 10px; border: 1px solid var(--linha); border-radius: 10px; background: var(--marca-50);
}
.usuario-box .info { display: flex; align-items: center; gap: var(--esp-2); font-size: var(--texto-sm); font-weight: 600; color: var(--tinta-2); min-width: 0; }
.usuario-box .info svg { width: 16px; height: 16px; color: var(--muted); }
.usuario-box .info span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.content { flex: 1; min-width: 0; }
.content-head { padding: var(--esp-8) 44px 6px; }
.content-head h1 { font-size: var(--texto-2xl); }
.content-head .sub { margin: 6px 0 0; color: var(--muted); font-size: var(--texto-md); }
main { padding: var(--esp-5) 44px 64px; max-width: 1040px; }

.dot { width: 9px; height: 9px; border-radius: 50%; background: #a9c4cc; display: inline-block; box-shadow: 0 0 0 3px rgba(183,189,202,.22); }
.dot.on  { background: var(--cor-sucesso); box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.dot.off { background: var(--cor-perigo);  box-shadow: 0 0 0 3px rgba(244,63,94,.2); }

/* --------------------------------------------------------------------------
   4) CARTÃO
   -------------------------------------------------------------------------- */
.card {
    position: relative;
    background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg);
    padding: var(--esp-6); margin-bottom: var(--esp-5); box-shadow: var(--sombra-sm);
    transition: box-shadow var(--transicao-lenta), transform var(--transicao-lenta), border-color var(--transicao);
}
.card:hover { box-shadow: var(--sombra-md); border-color: var(--cor-primaria-borda); transform: translateY(-2px); }
/* Fio de luz no topo do cartão (só aparece no hover) */
.card::after {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; border-radius: var(--raio-lg) var(--raio-lg) 0 0;
    background: linear-gradient(90deg, transparent, rgba(64,149,167,.55), transparent);
    opacity: 0; transition: opacity var(--transicao-lenta); pointer-events: none;
}
.card:hover::after { opacity: 1; }
.card > h2 { font-size: var(--texto-lg); font-weight: 650; margin-bottom: var(--esp-4); }
.card > h2 small { color: var(--muted); font-weight: 500; font-size: var(--texto-sm); }

/* --------------------------------------------------------------------------
   5) BOTÕES
   -------------------------------------------------------------------------- */
.btn {
    position: relative; overflow: hidden;
    display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
    padding: 12px var(--esp-5); border-radius: var(--raio); border: none; cursor: pointer;
    font-family: inherit; font-size: 14.5px; font-weight: 600; text-decoration: none;
    letter-spacing: -.01em;
    color: #fff; background: #2d4e58;
    transition: transform .2s var(--ease-mola), box-shadow var(--transicao), filter var(--transicao);
}
/* Varredura de luz atravessando o botão no hover */
.btn::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.28) 50%, transparent 70%);
    transform: translateX(-120%); transition: transform .6s var(--ease-saida);
}
.btn:hover::before { transform: translateX(120%); }
.btn:hover  { transform: translateY(-1px); filter: brightness(1.04); }
.btn:active { transform: translateY(0) scale(.985); transition-duration: .08s; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }
.btn:disabled::before { display: none; }
.btn svg { width: 18px; height: 18px; }
.btn-primario { background: var(--grad-marca); box-shadow: var(--brilho-marca); }
.btn-primario:hover { box-shadow: 0 10px 28px rgba(0,114,138,.36); filter: none; }
.btn-sucesso  { background: linear-gradient(135deg, #0e8a6a, #12a37e); box-shadow: 0 6px 20px rgba(14,138,106,.28); }
.btn-perigo   { background: linear-gradient(135deg, #9E192A, #b52237); box-shadow: 0 6px 20px rgba(158,25,42,.26); }
.btn-fantasma { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); box-shadow: none; }
.btn-fantasma:hover { background: var(--cor-primaria-borda); filter: none; }
.btn-sm { padding: 8px var(--esp-4); font-size: var(--texto-sm); border-radius: var(--raio-sm); }
.btn-bloco { width: 100%; }

.link-mini { background: none; border: none; cursor: pointer; color: var(--muted); font: inherit; font-size: var(--texto-xs); font-weight: 600; padding: 4px 8px; border-radius: 7px; text-decoration: none; }
.link-mini:hover { color: var(--cor-primaria-escura); background: var(--cor-primaria-suave); }

.icone-btn {
    background: var(--superficie); border: 1px solid var(--linha-2); color: var(--muted); cursor: pointer;
    width: 36px; height: 36px; border-radius: 11px; display: inline-grid; place-items: center;
    transition: background var(--transicao), color var(--transicao), border-color var(--transicao),
                transform .2s var(--ease-mola), box-shadow var(--transicao);
}
.icone-btn svg { width: 17px; height: 17px; }
.icone-btn:hover { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); border-color: var(--cor-primaria-borda); transform: translateY(-1px); box-shadow: var(--sombra-sm); }
.icone-btn:active { transform: scale(.94); transition-duration: .08s; }
.icone-btn.perigo:hover { background: var(--cor-perigo-suave); color: var(--cor-perigo); border-color: #E8C4CA; }

/* --------------------------------------------------------------------------
   6) FORMULÁRIOS
   -------------------------------------------------------------------------- */
.rotulo { display: block; font-size: var(--texto-sm); font-weight: 600; color: var(--tinta-2); margin-bottom: var(--esp-4); }
.campo, input[type=text], input[type=password], input[type=email], input[type=number], input[type=file], textarea, select {
    width: 100%; padding: 12px 14px; border: 1.5px solid var(--linha-2); border-radius: var(--raio-sm);
    font-family: inherit; font-size: 14.5px; color: var(--tinta); background: var(--superficie);
    transition: border-color var(--transicao), box-shadow var(--transicao); margin-top: 6px;
}
.rotulo > input, .rotulo > select, .rotulo > textarea { font-weight: 400; }
textarea { resize: vertical; line-height: 1.6; }
input:hover, textarea:hover, select:hover { border-color: var(--cor-primaria-borda); }
input:focus, textarea:focus, select:focus {
    outline: none; border-color: var(--cor-primaria);
    box-shadow: 0 0 0 4px rgba(0,114,138,.13); background: var(--superficie);
}
::placeholder { color: #9fb8c0; }
/* Foco por teclado visível e consistente (acessibilidade) */
:focus-visible { outline: 2px solid var(--cor-primaria-media); outline-offset: 2px; }
.btn:focus-visible, .icone-btn:focus-visible { outline-offset: 3px; }
.grade-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); }
.grade-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--esp-4); }
.linha-botoes { display: flex; align-items: center; gap: var(--esp-3); margin-top: var(--esp-4); flex-wrap: wrap; }
.input-file::file-selector-button { border: none; background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); font-weight: 600; padding: 6px 12px; border-radius: 8px; margin-right: 10px; cursor: pointer; font-family: inherit; }
.opc { font-size: 11px; font-weight: 500; color: var(--muted); background: var(--marca-50); padding: 1px 6px; border-radius: 5px; margin-left: 4px; }

/* Formulário de lançamento (Nova OP/PI) — colapsado por padrão via <details> nativo. */
.acordeao-lancamento > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: var(--texto-lg); font-weight: 650; list-style: none; user-select: none; }
.acordeao-lancamento > summary::-webkit-details-marker { display: none; }
.acordeao-lancamento > summary .acordeao-seta {
    width: 28px; height: 28px; border-radius: 8px; background: var(--cor-primaria-suave); color: var(--cor-primaria-escura);
    display: grid; place-items: center; font-weight: 800; font-size: 19px; line-height: 1; flex-shrink: 0; transition: transform var(--transicao);
}
.acordeao-lancamento[open] > summary { margin-bottom: var(--esp-4); }
.acordeao-lancamento[open] > summary .acordeao-seta { transform: rotate(45deg); }

/* Campo opcional/oculto (ex.: Observação) — colapsado por padrão via <details> nativo. */
.detalhe-opcional { margin: 2px 0 var(--esp-4); }
.detalhe-opcional > summary { cursor: pointer; font-size: var(--texto-sm); font-weight: 600; color: var(--cor-primaria-escura); list-style: none; user-select: none; }
.detalhe-opcional > summary::-webkit-details-marker { display: none; }
.detalhe-opcional > summary:hover { text-decoration: underline; }
.detalhe-opcional[open] > summary { margin-bottom: var(--esp-3); }
.detalhe-opcional .rotulo { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   7) TABELA
   -------------------------------------------------------------------------- */
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: 11px 10px; text-align: left; border-bottom: 1px solid var(--linha); }
.tabela thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 700; }
.tabela tbody tr:last-child td { border-bottom: none; }
.tabela .dir { text-align: right; }
.tabela .nowrap { white-space: nowrap; }
.tabela .trunc { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabela .trunc-lg { max-width: 220px; }
.tabela tbody tr { transition: background var(--transicao); }
.tabela tbody tr:hover { background: var(--cor-primaria-suave); }

/* --------------------------------------------------------------------------
   7b) ABAS (navegação em abas dentro de uma página — ex.: detalhe do evento)
   -------------------------------------------------------------------------- */
.abas { display: flex; gap: 4px; border-bottom: 1px solid var(--linha); margin-bottom: var(--esp-4); flex-wrap: wrap; }
.aba {
    display: inline-flex; align-items: center; padding: 10px 16px;
    font-size: var(--texto-sm); font-weight: 600; color: var(--muted);
    text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px;
    transition: color var(--transicao), border-color var(--transicao);
}
.aba:hover { color: var(--cor-primaria-escura); }
.aba.ativa { color: var(--cor-primaria-escura); border-color: var(--cor-primaria); }

/* --------------------------------------------------------------------------
   8) BADGES, TAGS, CHIPS
   -------------------------------------------------------------------------- */
.badge { min-width: 20px; padding: 1px 7px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; color: #fff; background: var(--cor-perigo); border-radius: var(--raio-full); display: inline-block; }
.tag { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 3px 11px; border-radius: var(--raio-full); }
.tag-pago      { background: var(--cor-sucesso-suave); color: #047857; }
.tag-pendente  { background: var(--cor-perigo-suave);  color: var(--cor-perigo); }
.tag-neutro    { background: var(--marca-50); color: var(--tinta-2); }
.tag-info      { background: var(--cor-info-suave); color: #075985; }
.tag-aberto    { background: var(--cor-info-suave); color: #075985; }

/* Select de edição inline (parece uma tag clicável) */
.inline-tag {
    margin-top: 0; width: auto; min-width: 96px; padding: 5px 8px; font-size: 12px; font-weight: 700;
    border-radius: var(--raio-full); border: 1px solid var(--linha-2); cursor: pointer;
    background: #fff; color: var(--tinta-2); appearance: auto;
}
.inline-tag.ok    { background: var(--cor-sucesso-suave); color: #047857; border-color: #a7f3d0; }
.inline-tag.pend  { background: var(--cor-perigo-suave);  color: var(--cor-perigo); border-color: #E8C4CA; }
.inline-tag.info  { background: var(--cor-info-suave);    color: #075985; border-color: #B7DCEA; }

/* Barra de filtros (controle de gastos) */
.filtros { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: flex-end; }
.filtros .campo-filtro { display: flex; flex-direction: column; gap: 4px; font-size: var(--texto-xs); font-weight: 600; color: var(--tinta-2); }
.filtros select { margin-top: 0; min-width: 150px; }

/* Itens do serviço (OP/PI) */
.itens-secao { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; margin-bottom: var(--esp-4); background: var(--marca-50); }
.itens-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.itens-secao .tabela th, .itens-secao .tabela td { padding: 8px 8px; }
.itens-secao input { margin-top: 0; padding: 8px 10px; font-size: 13.5px; }
.itens-secao input.dir { text-align: right; }
.itens-secao tfoot th { font-size: 13px; color: var(--tinta); }

/* Miniatura de logo de cliente */
.cliente-logo { width: 52px; height: 52px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid var(--linha); flex-shrink: 0; }
.cliente-logo-vazio { display: grid; place-items: center; font-size: 10px; color: var(--muted); text-align: center; }

/* Tabela de ordens: legível, sem quebras feias */
.tabela-ordens td, .tabela-ordens th { padding: 12px 12px; vertical-align: middle; }
.tabela-ordens tbody tr:hover { background: var(--cor-primaria-suave); }
.tabela-ordens .prev { max-width: 150px; font-size: 12px; color: var(--muted); white-space: pre-line; line-height: 1.35; }
.tabela-ordens .col-acoes { text-align: right; }
.acoes-linha { display: flex; gap: 6px; justify-content: flex-end; }

/* Botão de anexos (quadrado, com contador) */
.anexo-btn { position: relative; }
.anexo-btn.tem { background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); border-color: var(--cor-primaria-borda); }
.anexo-qtd { position: absolute; top: -6px; right: -6px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: var(--cor-primaria); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }

/* Modal */
.modal {
    position: fixed; inset: 0; z-index: 80; display: none; place-items: center; padding: 20px;
    background: rgba(0,48,60,.45);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.modal.aberto { display: grid; animation: fade .2s var(--ease-suave); }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal-card {
    background: var(--superficie); border: 1px solid var(--vidro-borda);
    border-radius: var(--raio-xl); padding: 26px; width: 100%; max-width: 640px;
    max-height: 86vh; overflow: auto; box-shadow: var(--sombra-lg);
    animation: sobe-modal .32s var(--ease-saida);
}
@keyframes sobe-modal {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to   { opacity: 1; transform: none; }
}
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.modal-head h3 { font-size: var(--texto-lg); }

/* Slots de anexo (documentos) */
.slots { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-4); }
.slot { border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; background: var(--marca-50); }
.slot-topo { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.slot-rot { font-weight: 600; font-size: 14px; }
.slot-arquivo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.slot-form { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.slot-form input[type=file] { flex: 1; min-width: 140px; margin-top: 0; font-size: 12.5px; padding: 7px 9px; }
@media (max-width: 700px) { .slots { grid-template-columns: 1fr; } }
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: var(--texto-sm); font-weight: 600; text-decoration: none; padding: 7px 13px; border-radius: var(--raio-sm); border: 1px solid var(--linha-2); cursor: pointer; font-family: inherit; }
.chip-tem { background: var(--cor-sucesso-suave); color: #047857; border-color: #a7f3d0; }
.chip-add { background: #fff; color: var(--muted); border-style: dashed; }
.chip-add:hover { color: var(--cor-primaria-escura); border-color: var(--cor-primaria); background: var(--cor-primaria-suave); }

/* --------------------------------------------------------------------------
   9) ALERTAS / FLASH
   -------------------------------------------------------------------------- */
.alerta { padding: 12px 15px; border-radius: var(--raio-sm); font-size: var(--texto-sm); font-weight: 600; margin-bottom: var(--esp-4); }
.alerta-sucesso { background: var(--cor-sucesso-suave); color: #065f46; border: 1px solid #a7f3d0; }
.alerta-erro    { background: var(--cor-perigo-suave);  color: var(--cor-perigo); border: 1px solid #E8C4CA; }
.alerta-aviso   { background: var(--cor-alerta-suave);  color: #92400e; border: 1px solid #fde68a; }
.alerta-info    { background: var(--cor-info-suave);    color: #075985; border: 1px solid #B7DCEA; }

/* --------------------------------------------------------------------------
   10) LISTAS / ITENS / TOTAIS
   -------------------------------------------------------------------------- */
.lista { display: flex; flex-direction: column; gap: var(--esp-2); }
.item {
    display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
    padding: 14px 16px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie);
    transition: border-color var(--transicao), box-shadow var(--transicao), transform var(--transicao);
}
.item:hover { border-color: var(--cor-primaria-borda); box-shadow: var(--sombra); transform: translateY(-1px); }
.item .info { display: flex; flex-direction: column; min-width: 0; }
.item .nome { font-weight: 600; }
.item .meta { font-size: var(--texto-sm); color: var(--muted); }
.item .dir { display: flex; align-items: center; gap: var(--esp-4); }
.valor { font-weight: 700; font-size: 15.5px; white-space: nowrap; }
.valor-pagar   { color: var(--cor-perigo); }
.valor-receber { color: var(--cor-info); }
.vazio { color: var(--muted); font-size: 14.5px; padding: 14px 2px; text-align: center; }

.cards-totais { display: grid; grid-template-columns: 1fr 1fr; gap: var(--esp-4); margin-bottom: var(--esp-5); }
.card-total {
    display: flex; align-items: center; gap: var(--esp-4); background: var(--superficie);
    border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: var(--esp-6); box-shadow: var(--sombra);
    transition: transform var(--transicao-lenta), box-shadow var(--transicao-lenta);
}
.card-total:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }
.card-total .ico {
    width: 50px; height: 50px; flex-shrink: 0; display: grid; place-items: center; border-radius: 15px;
    transition: transform .35s var(--ease-mola);
}
.card-total:hover .ico { transform: scale(1.08) rotate(-3deg); }
.card-total .ico svg { width: 24px; height: 24px; }
.card-total .rot { font-size: var(--texto-sm); color: var(--muted); display: block; }
.card-total strong { font-size: 28px; font-weight: 750; display: block; margin-top: 3px; letter-spacing: -.03em; }
.card-total.pagar .ico   { background: var(--cor-perigo-suave); color: var(--cor-perigo); }
.card-total.pagar strong { color: var(--cor-perigo); }
.card-total.receber .ico   { background: var(--cor-info-suave); color: var(--cor-info); }
.card-total.receber strong { color: #075985; }
.card-total.neutro .ico   { background: var(--cor-primaria-suave); color: var(--cor-primaria); }

/* Grupo de pendência por ação */
.grupo { border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: 16px 18px; margin-bottom: var(--esp-3); background: var(--superficie); }
.grupo-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--esp-3); }
.grupo-nome { font-weight: 650; font-size: 15.5px; display: block; }
.grupo-cli { font-size: var(--texto-xs); color: var(--muted); }
.grupo-tot { font-weight: 750; font-size: var(--texto-lg); white-space: nowrap; }
.sub-lista { margin-top: var(--esp-3); display: flex; flex-direction: column; gap: var(--esp-2); }
.sub-item { display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3); padding: 10px 12px; background: var(--marca-50); border: 1px solid var(--linha); border-radius: 10px; }
.aviso-prazo { margin-top: 10px; padding: 8px 12px; border-radius: var(--raio-sm); font-size: var(--texto-xs); font-weight: 600; }
.aviso-prazo.aviso { background: var(--cor-alerta-suave); color: #92400e; border: 1px solid #fde68a; }
.aviso-prazo.grave { background: var(--cor-perigo-suave); color: var(--cor-perigo); border: 1px solid #E8C4CA; }

/* Lançar ação — bloco de promotora com horários vindos da tabela de valores */
.promotora-bloco { border: 1px solid var(--linha); border-radius: var(--raio-lg); padding: 16px 18px; margin-bottom: var(--esp-3); background: var(--superficie); transition: border-color var(--transicao); }
.promotora-bloco:hover { border-color: var(--cor-primaria-borda); }
.pb-head { display: grid; grid-template-columns: 1.5fr 1fr auto; gap: var(--esp-3); align-items: end; }
.pb-head .rotulo { margin-bottom: 0; }
.pb-num { font-size: var(--texto-xs); font-weight: 700; color: var(--cor-primaria-escura); letter-spacing: .04em; text-transform: uppercase; margin-bottom: 6px; display: block; }
.horarios { margin-top: var(--esp-3); display: flex; flex-direction: column; gap: var(--esp-2); }
.horario-cab { display: grid; grid-template-columns: 1.7fr repeat(3, 108px) 34px; gap: var(--esp-2); padding: 0 10px; font-size: var(--texto-xs); font-weight: 600; color: var(--muted); }
.horario-cab .dir { text-align: right; }
.horario-linha { display: grid; grid-template-columns: 1.7fr repeat(3, 108px) 34px; gap: var(--esp-2); align-items: center; background: var(--marca-50); border: 1px solid var(--linha); border-radius: 10px; padding: 8px 10px; }
.horario-linha select, .horario-linha input { margin-top: 0; }
.horario-linha .num { text-align: right; }
@media (max-width: 760px) {
    .pb-head, .horario-linha { grid-template-columns: 1fr; }
    .horario-cab { display: none; }
}

/* Histórico */
.hist { display: flex; flex-direction: column; }
.hist-item { display: grid; grid-template-columns: 160px 130px 1fr; gap: var(--esp-4); padding: 11px 6px; border-bottom: 1px solid var(--linha); font-size: var(--texto-sm); align-items: baseline; }
.hist-item:last-child { border-bottom: none; }
.hist-quando { color: var(--muted); font-variant-numeric: tabular-nums; font-size: var(--texto-xs); }
.hist-user { font-weight: 700; color: var(--cor-primaria-escura); }
.hist-desc { color: var(--tinta-2); }

/* Estatísticas do painel */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--esp-4); margin-bottom: var(--esp-5); }
.stat {
    background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-lg);
    padding: var(--esp-5); box-shadow: var(--sombra-sm);
    transition: transform var(--transicao-lenta), box-shadow var(--transicao-lenta), border-color var(--transicao);
}
.stat:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); border-color: var(--cor-primaria-borda); }
.stat .rot { font-size: var(--texto-sm); color: var(--muted); }
.stat .num { font-size: var(--texto-2xl); font-weight: 750; display: block; margin-top: 4px; letter-spacing: -.03em; color: var(--cor-primaria-escura); }

/* --------------------------------------------------------------------------
   11) LOGIN (tela cheia)
   -------------------------------------------------------------------------- */
.login-tela {
    position: relative; min-height: 100vh; display: grid; place-items: center; padding: 20px;
    background: linear-gradient(150deg, #00303C 0%, #005468 45%, #00728A 100%);
    overflow: hidden;
}
/* Duas auroras que respiram devagar atrás do cartão */
.login-tela::before, .login-tela::after {
    content: ""; position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none;
}
.login-tela::before {
    width: 560px; height: 560px; top: -160px; left: -120px;
    background: radial-gradient(circle, rgba(64,149,167,.55), transparent 70%);
    animation: aurora 14s var(--ease-suave) infinite alternate;
}
.login-tela::after {
    width: 480px; height: 480px; bottom: -140px; right: -100px;
    background: radial-gradient(circle, rgba(127,184,196,.42), transparent 70%);
    animation: aurora 18s var(--ease-suave) infinite alternate-reverse;
}
@keyframes aurora {
    from { transform: translate3d(0,0,0) scale(1); }
    to   { transform: translate3d(60px,40px,0) scale(1.18); }
}
.login-card {
    position: relative; z-index: 1; width: 100%; max-width: 390px;
    background: rgba(255,255,255,.94);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border: 1px solid var(--vidro-borda);
    border-radius: var(--raio-xl); padding: 38px 32px; box-shadow: var(--sombra-lg); text-align: center;
    animation: entrada-card .7s var(--ease-saida) both;
}
@keyframes entrada-card {
    from { opacity: 0; transform: translateY(24px) scale(.96); }
    to   { opacity: 1; transform: none; }
}
.login-logo {
    width: 76px; height: 76px; margin: 0 auto 16px; display: grid; place-items: center;
    border-radius: 22px; background: var(--grad-marca); overflow: hidden;
    box-shadow: 0 10px 26px rgba(0,114,138,.42);
    animation: entrada-logo .8s var(--ease-mola) .12s both;
}
@keyframes entrada-logo {
    from { opacity: 0; transform: scale(.6); }
    to   { opacity: 1; transform: scale(1); }
}
.login-logo img, .marca-logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.login-logo svg { width: 28px; height: 28px; }
.login-card h2 { font-size: 20px; }
.login-card .sub { color: var(--muted); margin: 4px 0 22px; font-size: 14px; }
.login-card .rotulo { text-align: left; }

/* --------------------------------------------------------------------------
   12) DOCUMENTAÇÃO / DESIGN SYSTEM (páginas internas)
   -------------------------------------------------------------------------- */
.ds-secao { margin-bottom: var(--esp-8); }
.ds-secao > h3 { font-size: var(--texto-lg); margin-bottom: var(--esp-4); padding-bottom: var(--esp-2); border-bottom: 2px solid var(--linha); }
.ds-amostras { display: flex; flex-wrap: wrap; gap: var(--esp-4); align-items: center; }
.ds-swatch { width: 84px; }
.ds-cor { height: 56px; border-radius: 10px; border: 1px solid var(--linha); }
.ds-swatch small { display: block; margin-top: 6px; font-size: 11.5px; color: var(--muted); }
.ds-token { font-family: var(--fonte-mono); font-size: 12px; background: var(--marca-50); padding: 2px 6px; border-radius: 5px; }

/* Barra de proporção da identidade (96,6% / 2,9% / 0,1%) */
.ds-barra-prop { display: flex; height: 34px; border-radius: var(--raio-sm); overflow: hidden; border: 1px solid var(--linha-2); }
.ds-barra-prop span { display: block; min-width: 2px; }
.ds-legenda-prop { display: flex; flex-wrap: wrap; gap: var(--esp-5); margin-top: var(--esp-3); font-size: var(--texto-sm); color: var(--tinta-2); }
.ds-legenda-prop span { display: inline-flex; align-items: center; gap: 7px; }
.ds-legenda-prop i { width: 12px; height: 12px; border-radius: 4px; border: 1px solid var(--linha-2); }
.prosa { max-width: 760px; line-height: 1.7; }
.prosa h3 { margin: var(--esp-6) 0 var(--esp-2); font-size: var(--texto-lg); }
.prosa p, .prosa li { color: var(--tinta-2); }
.prosa ul, .prosa ol { padding-left: 22px; }
.prosa code { font-family: var(--fonte-mono); font-size: 12.5px; background: var(--marca-50); padding: 2px 6px; border-radius: 5px; }
.prosa .passo { display: flex; gap: var(--esp-3); margin-bottom: var(--esp-3); }
.prosa .passo-num { width: 26px; height: 26px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: var(--cor-primaria-suave); color: var(--cor-primaria-escura); font-weight: 800; font-size: 13px; }

/* Bloco de exemplo (código/nota) */
.exemplo { background: var(--marca-50); color: #5a6079; padding: 15px 17px; border-radius: var(--raio); font-family: var(--fonte-mono); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; border: 1px solid var(--linha-2); margin: 0 0 var(--esp-4); overflow-x: auto; }

/* --------------------------------------------------------------------------
   13) TOAST
   -------------------------------------------------------------------------- */
.toast {
    position: fixed; bottom: 26px; left: 50%; z-index: 60;
    transform: translateX(-50%);   /* centro real; a animação parte daqui */
    background: rgba(10,37,48,.92);
    -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
    border: 1px solid rgba(255,255,255,.12);
    color: #fff; padding: 13px 22px; border-radius: var(--raio-full);
    font-size: 14px; font-weight: 550; box-shadow: var(--sombra-lg);
    animation: sobe-toast .4s var(--ease-mola);
}
@keyframes sobe-toast {
    from { opacity: 0; transform: translate(-50%, 20px) scale(.9); }
    to   { opacity: 1; transform: translate(-50%, 0) scale(1); }
}

/* --------------------------------------------------------------------------
   13.5) EFEITOS DE MOVIMENTO
   Entrada em cascata dos blocos ao carregar/rolar a página. O JS marca os
   elementos com .revelar e tira a marca quando entram na tela (.visivel).
   Sem JS, tudo continua visível — o efeito é enfeite, nunca requisito.
   -------------------------------------------------------------------------- */
.revelar {
    opacity: 0; transform: translateY(18px);
    transition: opacity .55s var(--ease-saida), transform .55s var(--ease-saida);
    transition-delay: var(--atraso, 0ms);
}
.revelar.visivel { opacity: 1; transform: none; }

/* Cabeçalho da página desce suave no carregamento */
.content-head { animation: desce .5s var(--ease-saida) both; }
@keyframes desce { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

/* Respeita quem pediu menos animação no sistema operacional */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important; animation-iteration-count: 1 !important;
        transition-duration: .01ms !important; scroll-behavior: auto !important;
    }
    .revelar { opacity: 1; transform: none; }
}

/* --------------------------------------------------------------------------
   14) RESPONSIVO
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
    .app { flex-direction: column; }
    .sidebar { width: 100%; height: auto; position: static; flex-direction: row; align-items: center; flex-wrap: wrap; padding: 12px 16px; gap: 10px; border-right: none; border-bottom: 1px solid var(--linha); }
    .marca { padding: 0; margin-right: auto; }
    .nav { flex-direction: row; overflow-x: auto; width: 100%; order: 3; gap: 4px; }
    .nav-sep { display: none; }
    .nav-item { width: auto; white-space: nowrap; padding: 9px 12px; }
    .sidebar-rodape { flex-direction: row; margin-top: 0; padding-top: 0; }
    .content-head { padding: 22px 20px 4px; }
    main { padding: 16px 20px 50px; }
    .grade-2, .grade-3, .cards-totais, .stats { grid-template-columns: 1fr; }
    .hist-item { grid-template-columns: 1fr; gap: 2px; }
}

/* --------------------------------------------------------------------------
   15) DOCUMENTO DE IMPRESSÃO (OP/PI — réplica do modelo usado hoje pela
   agência para cobrar cliente/fornecedor). Cores fixas da identidade visual
   do documento (não são tokens do app — são a marca "Ilustra" impressa).
   -------------------------------------------------------------------------- */
.corpo-impressao { background: var(--fundo); font-family: var(--fonte); color: var(--tinta); margin: 0; }
.barra-impressao { position: sticky; top: 0; display: flex; justify-content: flex-end; gap: 10px; padding: 12px 20px; background: var(--superficie); border-bottom: 1px solid var(--linha); z-index: 10; }

.doc-folha {
    --doc-teal: #12717c;
    --doc-vermelho: #7a1f2b;
    --doc-amarelo: #fff200;
    --doc-verde: #6fa93b;
    max-width: 820px; margin: 24px auto 60px; background: var(--superficie);
    border: 1px solid var(--linha-2); border-radius: var(--raio); padding: 22px;
    font-size: 12.5px; line-height: 1.45; color: #111;
}
.doc-folha table { border-collapse: collapse; width: 100%; }
.doc-folha th, .doc-folha td { border: 1px solid #444; padding: 5px 8px; font-size: 12px; text-align: left; }

/* Cabeçalho: agência (esquerda) + tag do cliente/logo + data/número (direita) */
.doc-cabecalho { display: flex; gap: 16px; align-items: stretch; margin-bottom: 10px; border: 1px solid #444; }
.doc-agencia-box { display: flex; gap: 12px; align-items: center; background: var(--doc-teal); color: #fff; padding: 10px 16px; flex: 1 1 auto; }
.doc-agencia-box img { height: 46px; width: auto; filter: brightness(0) invert(1); }
.doc-agencia-box .txt { font-size: 11px; line-height: 1.5; }
.doc-agencia-box .txt strong { display: block; font-size: 12.5px; margin-bottom: 2px; }
.doc-lado-direito { flex: 0 0 260px; display: flex; flex-direction: column; }
.doc-tag-cliente { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; border-bottom: 1px solid #444; }
.doc-tag-cliente span { background: var(--doc-vermelho); color: #fff; font-weight: 800; font-size: 11px; letter-spacing: .04em; padding: 3px 10px; border-radius: 3px; }
.doc-tag-cliente img { max-height: 40px; max-width: 140px; object-fit: contain; }
.doc-info-tabela { flex: 1; }
.doc-info-tabela th { background: #1a1a1a; color: #fff; font-size: 10.5px; width: 45%; }
.doc-info-tabela tr.linha-numero th { background: var(--doc-vermelho); }
.doc-info-tabela td.doc-numero-inline { font-weight: 800; font-size: 15px; text-align: center; }
.doc-fornecedor-th { background: #f3f3f3 !important; color: #111 !important; font-weight: 400 !important; }
.doc-fornecedor-cel { display: flex; align-items: center; gap: 8px; }
.doc-fornecedor-cel img { max-height: 26px; max-width: 60px; object-fit: contain; flex-shrink: 0; }
.doc-fornecedor-cel span { font-size: 9.5px; line-height: 1.4; }

/* Dados do cliente (label teal + valor branco) */
.doc-cliente-dados th { background: var(--doc-teal); color: #fff; font-size: 10.5px; white-space: nowrap; width: 1%; }

/* Tabela de serviço */
.doc-tabela-servico thead th { background: var(--doc-teal); color: #fff; text-align: center; }
.doc-tabela-servico td.dir, .doc-tabela-servico th.dir { text-align: right; }
.doc-tabela-servico tfoot th, .doc-tabela-servico tfoot td { background: var(--doc-teal); color: #fff; font-weight: 800; text-align: right; }

.doc-observacao { background: var(--doc-amarelo); border: 1px solid #444; border-top: none; padding: 14px; min-height: 46px; font-size: 11.5px; margin-bottom: 14px; }

/* Rodapé: nota fiscal / assinatura / valores */
.doc-rodape { display: grid; grid-template-columns: 1.3fr 1fr 0.9fr; gap: 0; border: 1px solid #444; }
.doc-rodape > div { padding: 12px 14px; border-right: 1px solid #444; }
.doc-rodape > div:last-child { border-right: none; }
.doc-nota-fiscal { color: var(--doc-vermelho); font-size: 11px; line-height: 1.5; }
.doc-numero-destaque { border: 3px solid var(--doc-vermelho); color: #111; font-weight: 800; font-size: 26px; text-align: center; padding: 4px; margin: 8px auto; width: 90px; }
.doc-assinatura { text-align: center; }
.doc-assinatura b { display: block; font-size: 11px; margin-bottom: 6px; }
.doc-assinatura img { max-height: 70px; max-width: 100%; }
.doc-assinatura .linha { border-top: 1px solid #111; margin-top: 4px; padding-top: 4px; font-size: 10.5px; }
.doc-valores { display: flex; flex-direction: column; gap: 6px; }
.doc-valores .linha { display: flex; justify-content: space-between; align-items: center; border: 1px solid #444; padding: 4px 8px; font-size: 11px; font-weight: 700; }
.doc-valores .linha b { font-size: 13px; }
.doc-valores .linha.bv { background: var(--doc-vermelho); color: #fff; }
.doc-valores .linha.liquido { background: var(--doc-verde); color: #fff; }
.doc-legenda { color: var(--doc-teal); font-weight: 800; font-size: 11px; margin-top: 8px; }

@media print {
    .no-imprimir { display: none !important; }
    .corpo-impressao { background: #fff; }
    .doc-folha { border: none; border-radius: 0; margin: 0; max-width: none; padding: 0; }
}