/* ==========================================================
   VetLumeNFSe — Design System
   Paleta e tipografia herdadas da marca VetLume (vet.andiamo.inf.br);
   densidade, tabelas e navegação inspiradas em ERPs fiscal-contábeis
   (SAP Business One) — funcional, denso, sem decoração de marketing.
   ========================================================== */

:root {
    /* Paleta da marca VetLume */
    --tinta: #0d1117;
    --papel: #f5f7fb;
    --creme: #eaeff8;
    --azul: #1848a0;
    --azul-claro: #2563eb;
    --azul-pale: #eef2ff;
    --dourado: #c8a86b;
    --branco: #ffffff;
    --texto-mudo: #6b7280;

    /* Semânticas de status (distintas do azul de marca, pra não confundir com navegação/ações) */
    --sucesso: #15803d;
    --sucesso-bg: #dcfce7;
    --alerta: #b45309;
    --alerta-bg: #fef3c7;
    --erro: #b91c1c;
    --erro-bg: #fee2e2;
    --neutro: #6b7280;
    --neutro-bg: #f3f4f6;
    --info: #6d28d9;
    --info-bg: #ede9fe;

    --borda: #dde2ea;
    --borda-forte: #c7cedb;
    --sombra: 0 1px 3px rgba(13, 17, 23, .06);

    --raio: 5px;
    --raio-pequeno: 3px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; max-width: 100vw; overflow-x: hidden; }
body {
    font-family: 'DM Sans', -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: var(--papel);
    color: var(--tinta);
    font-size: 13.5px;
    line-height: 1.5;
}
h1, h2, h3 { font-family: 'DM Sans', sans-serif; font-weight: 700; color: var(--tinta); margin: 0 0 12px; }
h1 { font-size: 20px; letter-spacing: -.01em; }
h2 { font-size: 15px; }
h3 { font-size: 13px; }
a { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: 'SFMono-Regular', Consolas, monospace; font-size: 12px; background: var(--neutro-bg); padding: 1px 5px; border-radius: var(--raio-pequeno); }

/* ---------- Layout: barra lateral + área de conteúdo ---------- */
.app-shell { display: flex; min-height: 100vh; }

.sidebar {
    width: 220px;
    flex-shrink: 0;
    background: var(--tinta);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
}
.sidebar-marca {
    padding: 18px 20px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    display: flex; align-items: center; gap: 10px;
}
.sidebar-marca-icone {
    width: 34px; height: 34px; flex-shrink: 0;
    background: var(--branco); border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.3);
}
.sidebar-marca-icone img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.08); }
.sidebar-marca-texto { font-family: 'Fraunces', serif; font-weight: 700; font-size: 16px; color: var(--branco); line-height: 1.2; }
.sidebar-marca span { color: var(--dourado); }
.sidebar-marca small { display: block; font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 10px; color: rgba(255,255,255,.45); letter-spacing: .04em; text-transform: uppercase; margin-top: 1px; }

.sidebar-nav { flex: 1; padding: 10px 0; overflow-y: auto; }
.sidebar-nav a {
    display: flex; align-items: center; gap: 9px;
    padding: 9px 20px; font-size: 12.5px; font-weight: 500;
    color: rgba(255,255,255,.68); text-decoration: none;
    border-left: 3px solid transparent;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.05); color: var(--branco); text-decoration: none; }
.sidebar-nav a.ativo { background: rgba(24,72,160,.35); color: var(--branco); border-left-color: var(--azul-claro); font-weight: 600; }
.sidebar-nav .icone { width: 15px; text-align: center; opacity: .8; font-size: 12px; }
.sidebar-rodape { padding: 12px 20px; border-top: 1px solid rgba(255,255,255,.08); font-size: 11.5px; color: rgba(255,255,255,.4); }

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

.topbar-app {
    display: flex; align-items: center; justify-content: space-between;
    background: var(--branco); border-bottom: 1px solid var(--borda);
    padding: 10px 24px; box-shadow: var(--sombra);
}
.topbar-app .usuario { font-size: 12.5px; color: var(--texto-mudo); display: flex; align-items: center; gap: 12px; }
.topbar-app .usuario strong { color: var(--tinta); font-weight: 600; }
.topbar-app button {
    background: transparent; border: 1px solid var(--borda-forte); color: var(--texto-mudo);
    border-radius: var(--raio-pequeno); padding: 5px 12px; font-size: 12px; cursor: pointer;
    font-family: inherit;
}
.topbar-app button:hover { background: var(--neutro-bg); color: var(--tinta); }

.conteudo { flex: 1; padding: 22px 28px; max-width: 1180px; width: 100%; margin: 0 auto; position: relative; }

/* Marca d'água discreta do ícone — fica atrás de todo o conteúdo (cartões,
   tabelas e formulários têm fundo próprio, então isso só aparece no
   respiro entre eles; não atrapalha leitura nem contraste). */
.area-principal::before {
    content: '';
    position: fixed;
    right: -60px; bottom: -60px;
    width: 420px; height: 420px;
    background: url('/assets/img/icone-vetlumenfse.png') no-repeat center / contain;
    opacity: .035;
    pointer-events: none;
    z-index: 0;
}
.topbar-app, .conteudo { position: relative; z-index: 1; }

/* ---------- Cartões de resumo (dashboard) ---------- */
.cartoes { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 22px; }
.cartao {
    background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio);
    padding: 14px 18px; min-width: 150px; box-shadow: var(--sombra);
}
.cartao-numero { display: block; font-size: 24px; font-weight: 700; color: var(--azul); line-height: 1.1; }
.cartao-legenda { color: var(--texto-mudo); font-size: 11.5px; text-transform: uppercase; letter-spacing: .03em; }

/* ---------- Tabelas — densas, estilo grade de ERP ---------- */
.tabela-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--raio); }
.tabela { width: 100%; min-width: 560px; border-collapse: collapse; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; }
.tabela th, .tabela td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--borda); font-size: 12.5px; }
.tabela th { background: var(--creme); font-weight: 600; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; color: #334155; white-space: nowrap; }
.tabela tbody tr:hover { background: var(--azul-pale); }
.tabela tbody tr:last-child td { border-bottom: none; }

/* ---------- Badges de status (semânticos, distintos do azul de marca) ---------- */
.pill { padding: 2px 9px; border-radius: 100px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; display: inline-block; }
.pill-ativo, .pill-autorizada, .pill-producao { background: var(--sucesso-bg); color: var(--sucesso); }
.pill-erro, .pill-critical { background: var(--erro-bg); color: var(--erro); }
.pill-pendente, .pill-processando, .pill-warning { background: var(--alerta-bg); color: var(--alerta); }
.pill-homologacao, .pill-info { background: var(--info-bg); color: var(--info); }
.pill-cancelada, .pill-inativo, .pill-suspenso, .pill-substituido { background: var(--neutro-bg); color: var(--neutro); }
.pill-nivel-debug { background: var(--neutro-bg); color: var(--neutro); }

/* ---------- Formulários — compactos ---------- */
.formulario { display: flex; flex-direction: column; gap: 11px; max-width: 480px; background: var(--branco); padding: 18px; border-radius: var(--raio); border: 1px solid var(--borda); box-shadow: var(--sombra); }
.formulario label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: #334155; }
.formulario input, .formulario select, .formulario textarea {
    padding: 7px 10px; border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno);
    font-size: 12.5px; font-family: inherit; color: var(--tinta); background: var(--branco);
}
.formulario input:focus, .formulario select:focus, .formulario textarea:focus {
    outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.formulario textarea { min-height: 64px; resize: vertical; }

/* ---------- Botões ---------- */
.formulario button, .botao {
    background: var(--azul); color: var(--branco); border: none;
    padding: 8px 16px; border-radius: var(--raio-pequeno); cursor: pointer;
    font-size: 12.5px; font-weight: 600; font-family: inherit;
    text-decoration: none; display: inline-block; width: fit-content;
    transition: background .15s;
}
.formulario button:hover, .botao:hover { background: var(--azul-claro); text-decoration: none; }
.botao-secundario { background: var(--branco); color: var(--tinta); border: 1px solid var(--borda-forte); }
.botao-secundario:hover { background: var(--neutro-bg); }
.botao-perigo { background: var(--erro); }
.botao-perigo:hover { background: #991b1b; }

/* ---------- Filtros de listagem ---------- */
.filtros { display: flex; gap: 8px; margin-bottom: 14px; align-items: center; }
.filtros select, .filtros button { padding: 6px 10px; border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno); font-size: 12px; font-family: inherit; background: var(--branco); }
.filtros button { background: var(--azul); color: var(--branco); border-color: var(--azul); cursor: pointer; font-weight: 600; }

/* ---------- Alertas ---------- */
.alerta { padding: 9px 14px; border-radius: var(--raio); margin-bottom: 16px; font-size: 12.5px; border: 1px solid transparent; }
.alerta-sucesso { background: var(--sucesso-bg); color: #14532d; border-color: #bbf7d0; }
.alerta-erro { background: var(--erro-bg); color: #7f1d1d; border-color: #fecaca; }

.bloco-codigo { background: var(--tinta); color: #cbd5e1; padding: 14px; border-radius: var(--raio); overflow-x: auto; font-size: 11px; line-height: 1.6; }

/* ---------- Login (admin e portal) ---------- */
.pagina-login {
    display: flex; align-items: center; justify-content: center; gap: 36px;
    min-height: 100vh; padding: 24px;
    background: linear-gradient(160deg, var(--tinta) 0%, #16233d 100%);
    flex-wrap: wrap;
}
.login-marca {
    background: var(--branco); border-radius: 14px; padding: 18px;
    box-shadow: 0 20px 60px rgba(0,0,0,.35);
    max-width: 340px;
}
.login-marca img { display: block; width: 100%; height: auto; border-radius: 6px; }
.caixa-login {
    background: var(--branco); padding: 34px; border-radius: 10px; width: 340px;
    display: flex; flex-direction: column; gap: 13px; box-shadow: 0 20px 60px rgba(0,0,0,.35);
}
.caixa-login h1 { font-family: 'Fraunces', serif; margin: 0 0 2px; font-size: 22px; }
.caixa-login h1 strong { color: var(--azul); }
.caixa-login label { font-size: 12px; font-weight: 600; color: #334155; display: flex; flex-direction: column; gap: 4px; }
.caixa-login input { padding: 9px 11px; border: 1px solid var(--borda-forte); border-radius: var(--raio-pequeno); font-family: inherit; font-size: 13px; }
.caixa-login input:focus { outline: none; border-color: var(--azul-claro); box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.caixa-login button { background: var(--azul); color: var(--branco); border: none; padding: 10px; border-radius: var(--raio-pequeno); cursor: pointer; font-weight: 700; font-size: 13px; margin-top: 4px; }
.caixa-login button:hover { background: var(--azul-claro); }
@media (max-width: 760px) {
    .login-marca { max-width: 220px; padding: 12px; order: -1; }
}

/* ---------- Utilitário: caixas de aviso coloridas (substituem estilos inline espalhados) ---------- */
.caixa { border-radius: var(--raio); padding: 14px 16px; max-width: 560px; font-size: 12.5px; border: 1px solid; margin-bottom: 16px; }
.caixa-atencao { background: var(--alerta-bg); border-color: #fde68a; color: #78350f; }
.caixa-info { background: var(--azul-pale); border-color: #bfdbfe; color: #1e3a8a; }
.caixa-perigo { background: var(--erro-bg); border-color: #fecaca; color: #7f1d1d; }
.caixa h2 { margin-top: 0; font-size: 13px; }

@media (max-width: 860px) {
    .app-shell { flex-direction: column; }
    .sidebar {
        width: 100%; flex-direction: row; align-items: center;
        overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
    }
    .sidebar::-webkit-scrollbar { display: none; }
    .sidebar-marca { border-bottom: none; border-right: 1px solid rgba(255,255,255,.08); white-space: nowrap; flex-shrink: 0; }
    .sidebar-nav { display: flex; padding: 0; }
    .sidebar-nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
    .sidebar-nav a.ativo { border-left: none; border-bottom-color: var(--azul-claro); }
    .sidebar-rodape { display: none; }
    .conteudo { padding: 16px; }
    .topbar-app { padding: 10px 16px; flex-wrap: wrap; gap: 8px; }
    h1 { font-size: 17px; }
}