/* ==========================================================================
   VERSA · Design System  —  v1.0 (06/10/2026)
   --------------------------------------------------------------------------
   Extraído do Sistema Versa (Licitações + Gerência de Contratos), para ser
   reaproveitado em outros sistemas da Versa Engenharia Ambiental.

   Como usar:
     1. No <head>, a fonte:
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Spline+Sans+Mono:wght@400;500;600&display=swap" rel="stylesheet">
     2. Este arquivo, antes do CSS próprio do sistema.
     3. Tema escuro: <html data-tema="escuro">. Sem o atributo, claro.

   Regra de ouro: cor SEMPRE por variável. Cor fixa no componente é o que
   vira texto ilegível quando o tema escuro entra — aconteceu várias vezes no
   sistema de origem, e cada correção está documentada no README.
   ========================================================================== */

/* ---------------------------------------------------------------- TOKENS */
:root{
  /* superfícies */
  --bg:#F7F8FA;            /* fundo da página */
  --card:#FFFFFF;          /* painel, cartão, modal */
  --card-2:#F9FAFB;        /* faixa de cabeçalho, hover, campo de leitura */
  --line:#E5E7EB;          /* borda padrão */
  --line-2:#D1D5DB;        /* borda no hover */

  /* texto */
  --ink:#0F172A;           /* título, valor, texto forte */
  --ink-2:#475569;         /* corpo de texto */
  --ink-3:#94A3B8;         /* rótulo, legenda, meta — nunca texto que importa */

  /* verde Versa (marca e ação primária) */
  --g-50:#ECFDF3; --g-100:#D1FAE5; --g-200:#A7F3D0;
  --g-500:#22C55E; --g-600:#16A34A; --g-700:#15803D; --g-800:#166534;
  --g-texto:var(--g-700);  /* verde para TEXTO sobre superfície (link, aba ativa) */

  /* semânticas */
  --blue:#3B82F6;   --blue-soft:#EFF6FF;   --blue-texto:#1D4ED8;
  --purple:#8B5CF6; --purple-soft:#F5F3FF; --purple-texto:#6D28D9;
  --amber:#D97706;  --amber-vivo:#F59E0B;  --amber-soft:#FFFBEB;
  --orange:#EA580C; --orange-vivo:#F97316; --orange-soft:#FFF7ED;
  --red:#DC2626;    --red-vivo:#EF4444;    --red-soft:#FEF2F2;  --red-borda:#FECACA;

  /* forma */
  --r-sm:8px;  --r-md:12px;  --r-lg:14px;  --r-xl:16px;  --r-pill:999px;
  --shadow-1:0 1px 2px rgba(15,23,42,.05), 0 1px 3px rgba(15,23,42,.04);
  --shadow-2:0 4px 6px -2px rgba(15,23,42,.05), 0 16px 32px -12px rgba(15,23,42,.14);
  --foco:0 0 0 3px var(--g-100);

  /* tipografia */
  --font-b:'Inter',system-ui,sans-serif;
  --font-m:'Spline Sans Mono',ui-monospace,monospace;

  /* camadas */
  --z-topbar:40; --z-sidebar:50; --z-overlay:100; --z-modal:101; --z-toast:200;
}

/* Tema escuro — carvão com viés verde, não preto puro.
   Os verdes de FUNDO (50/100/200) invertem; os de BOTÃO (500/600/700) ficam:
   texto branco sobre eles funciona nos dois temas. */
:root[data-tema="escuro"]{
  color-scheme:dark;
  --bg:#0E1512; --card:#151E1A; --card-2:#1B2622;
  --line:#26332D; --line-2:#33423B;
  --ink:#E8EFEA; --ink-2:#A8B8AF; --ink-3:#6F8177;
  --g-50:#12241B; --g-100:#16341F; --g-200:#1E4A2B;
  --g-texto:#4ADE80;       /* o --g-700 dá 3,4:1 sobre o card escuro — reprova */
  --blue-soft:#12233A; --purple-soft:#221A3A;
  --amber-soft:#3A2410; --orange-soft:#3A2410;
  --red-soft:#3B1D1D; --red-borda:#5B2C2C; --red:#F49A9A;
  --blue-texto:#93C5FD; --purple-texto:#C4B5FD;
  --shadow-1:0 1px 2px rgba(0,0,0,.45);
  --shadow-2:0 4px 6px -2px rgba(0,0,0,.45), 0 16px 32px -12px rgba(0,0,0,.7);
}

/* ------------------------------------------------------------------ BASE */
*{box-sizing:border-box;}
body{
  margin:0; font-family:var(--font-b); font-size:14px; line-height:1.5;
  color:var(--ink-2); background:var(--bg); -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-b); color:var(--ink); margin:0; letter-spacing:-0.015em;}
button{font-family:inherit; cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:var(--g-texto);}
::selection{background:var(--g-100);}
:focus-visible{outline:2px solid var(--g-600); outline-offset:2px;}
/* números, datas, códigos, valores: sempre mono e com dígitos alinhados */
.mono{font-family:var(--font-m); font-variant-numeric:tabular-nums;}
/* rótulo de seção em caixa alta espaçada (o "eyebrow" do sistema) */
.eyebrow{font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ink-3);}

@keyframes fade-up{0%{opacity:0;transform:translateY(8px);}100%{opacity:1;transform:translateY(0);}}
/* entrada do modal preservando o translate(-50%,-50%) da centralização */
@keyframes modal-in{0%{opacity:0;transform:translate(-50%,-44%);}100%{opacity:1;transform:translate(-50%,-50%);}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none !important; animation:none !important;}
}
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none; appearance:none;}

/* ----------------------------------------------------------------- SHELL
   Barra lateral fixa (238px, recolhe para 68px) + topo grudado + área .view */
.app{display:flex; min-height:100vh;}
.sidebar{
  width:238px; flex-shrink:0; position:sticky; top:0; height:100vh;
  background:var(--card); border-right:1px solid var(--line);
  display:flex; flex-direction:column; padding:18px 12px 12px; overflow-y:auto;
  transition:width .2s ease;
}
.sidebar.collapsed{width:68px; z-index:var(--z-sidebar);}
.sidebar.collapsed .nav-label,.sidebar.collapsed .nav-txt,.sidebar.collapsed .nav-count{display:none;}
.sidebar.collapsed .nav-item{justify-content:center; padding:10px 0;}
/* recolhida, o nome volta no hover como etiqueta; `fixed` porque a barra rola
   por dentro e cortaria um `absolute` na borda dos 68px */
.sidebar.collapsed .nav-item:hover .nav-txt,
.sidebar.collapsed .nav-item:focus-visible .nav-txt{
  display:block; position:fixed; left:76px; padding:6px 10px; white-space:nowrap; pointer-events:none;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
  box-shadow:var(--shadow-2); font-size:12.5px; font-weight:500;
}

/* Marca: o logotipo completo ("Versa engenharia ambiental") no lugar do nome
   escrito em fonte comum. Duas imagens, uma por tema: no escuro o cinza de
   "engenharia ambiental" sumiria sobre o fundo, então a versão escura traz o
   texto claro e os verdes clareados. Com o menu recolhido (68px) o logotipo
   não cabe, e fica só o "V" (versa-icone.png). */
.brand{display:flex; align-items:center; justify-content:flex-start; padding:4px 8px 16px;}
.brand-marca{display:block; width:100%; max-width:190px; height:auto;}
.brand-marca.escuro{display:none;}
:root[data-tema="escuro"] .brand-marca.claro{display:none;}
:root[data-tema="escuro"] .brand-marca.escuro{display:block;}
.brand-logo{display:none; width:38px; height:38px; flex-shrink:0; object-fit:contain;}
.sidebar.collapsed .brand{justify-content:center; padding:2px 0 14px;}
.sidebar.collapsed .brand-marca{display:none !important;}
.sidebar.collapsed .brand-logo{display:block;}

.nav-label{font-size:10px; letter-spacing:.12em; color:var(--ink-3); padding:16px 12px 6px; font-weight:600; text-transform:uppercase;}
.nav-item{
  position:relative; display:flex; align-items:center; gap:10px; width:100%;
  padding:8.5px 12px; margin:1px 0; border:none; background:transparent; text-align:left;
  border-radius:var(--r-sm); color:var(--ink-2); font-size:13.5px; font-weight:500;
  transition:background .13s, color .13s;
}
.nav-item svg{width:17px; height:17px; flex-shrink:0; opacity:.75;}
.nav-item:hover{background:var(--card-2); color:var(--ink);}
.nav-item.active{background:var(--g-50); color:var(--g-texto); font-weight:600;}
.nav-item.active svg{opacity:1; color:var(--g-texto);}
.nav-count{margin-left:auto; font-size:10.5px; font-weight:600; color:var(--ink-3); background:var(--card-2); border:1px solid var(--line); padding:0 6px; border-radius:20px;}
.nav-count.hot{color:#fff; background:var(--red-vivo); border-color:var(--red-vivo);}

.main{flex:1; min-width:0;}
.topbar{
  position:sticky; top:0; z-index:var(--z-topbar);
  display:flex; align-items:center; gap:16px; padding:14px 28px;
  background:color-mix(in srgb, var(--bg) 90%, transparent); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
}
.greet{margin-right:auto;}
.greet h1{font-size:20px; font-weight:800;}
.greet p{margin:2px 0 0; font-size:12.5px; color:var(--ink-3);}
.view{padding:22px 28px 70px; animation:fade-up .3s ease-out both;}

.icon-pill{
  position:relative; width:38px; height:38px; border-radius:11px; border:1px solid var(--line);
  background:var(--card); color:var(--ink-2); display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, color .15s;
}
.icon-pill:hover{color:var(--ink); border-color:var(--line-2);}
.icon-pill svg{width:16px; height:16px;}
.badge-n{
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; border-radius:20px;
  background:var(--red-vivo); color:#fff; font-size:9.5px; font-weight:700;
  display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--bg);
}
.avatar{
  width:34px; height:34px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:700; color:#fff; background:linear-gradient(135deg,var(--g-500),var(--g-700));
}

/* ---------------------------------------------------------------- BOTÕES */
.btn{
  display:inline-flex; align-items:center; gap:7px; padding:9px 16px;
  border-radius:11px; font-size:13px; font-weight:600; border:1px solid transparent;
  transition:filter .15s, background .15s, border-color .15s, transform .1s;
}
.btn svg{width:14px; height:14px;}
.btn:active{transform:scale(.97);}
.btn:disabled{opacity:.6; cursor:default; transform:none;}
.btn-sm{padding:6px 12px; font-size:12.5px; border-radius:var(--r-sm);}
.btn-primary{background:var(--g-600); color:#fff; box-shadow:0 6px 16px -6px rgba(22,163,74,.5);}
.btn-primary:hover:not(:disabled){background:var(--g-700);}
.btn-ghost{background:var(--card); color:var(--ink-2); border-color:var(--line);}
.btn-ghost:hover:not(:disabled){color:var(--ink); border-color:var(--line-2);}
.btn-soft{background:var(--g-50); color:var(--g-texto); border-color:var(--g-200);}
.btn-soft:hover:not(:disabled){background:var(--g-100);}
.btn-danger{background:var(--card); color:var(--red); border-color:var(--red-borda);}
.btn-danger:hover:not(:disabled){background:var(--red-soft);}
.link{font-size:12px; font-weight:600; color:var(--g-texto); background:none; border:none; padding:0;}
.link:hover{text-decoration:underline;}
.x-btn{background:transparent; border:none; color:var(--ink-3); padding:5px; border-radius:8px; display:flex;}
.x-btn:hover{color:var(--ink); background:var(--card-2);}
.x-btn svg{width:17px; height:17px;}

/* --------------------------------------------------------------- PAINÉIS */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1);}
.panel-head{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 0; gap:10px;}
.panel-head .eyebrow{display:block; margin-bottom:2px; font-size:9.5px;}
.panel-head h3{font-size:14.5px; font-weight:700;}
.panel-body{padding:14px 18px 18px;}
.grid-2{display:grid; grid-template-columns:1.9fr 1fr; gap:16px;}
.grid-2.even{grid-template-columns:1fr 1fr;}

/* KPIs: faixa única dividida, não cinco cartões soltos */
.kpi-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-1); overflow:hidden;}
.kpi{padding:18px 16px 14px; border-right:1px solid var(--line); display:flex; gap:12px; align-items:flex-start; transition:background .15s;}
.kpi:last-child{border-right:none;}
.kpi:hover{background:var(--card-2);}
.kpi-ico{width:44px; height:44px; border-radius:50%; flex-shrink:0; display:flex; align-items:center; justify-content:center;}
.kpi-ico svg{width:20px; height:20px;}
.kpi-label{font-size:11.5px; font-weight:600; color:var(--ink-3); margin-bottom:3px; white-space:nowrap;}
.kpi-num{font-weight:800; font-size:26px; color:var(--ink); line-height:1.05; letter-spacing:-.02em;}
.kpi-delta{font-size:10px; color:var(--ink-3); margin-top:4px; white-space:nowrap;}
.kpi-delta b.up{color:var(--g-600);} .kpi-delta b.down{color:var(--red);}

/* linha chave → valor */
.stat-line{display:flex; justify-content:space-between; align-items:center; padding:7.5px 0; border-bottom:1px solid var(--card-2); font-size:12px;}
.stat-line:last-child{border-bottom:none;}
.stat-line .k{color:var(--ink-2);}
.stat-line .v{font-family:var(--font-m); color:var(--ink); font-weight:600; font-size:12.5px;}
/* grade de leitura de ficha (campo em cima, valor embaixo) */
.kv-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:11px 16px;}
.kv .k{font-size:11px; color:var(--ink-3);}
.kv .v{font-size:13px; color:var(--ink); font-weight:500; margin-top:2px;}
.kv.full{grid-column:1 / -1;}

/* --------------------------------------------------------------- TABELAS */
.tbl{width:100%; border-collapse:collapse;}
.tbl thead th{
  text-align:left; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--ink-3); font-weight:700; padding:11px 16px; border-bottom:1px solid var(--line); background:var(--card-2);
}
.tbl tbody td{padding:13px 16px; font-size:13px; color:var(--ink-2); border-bottom:1px solid var(--card-2); vertical-align:middle;}
.tbl tbody td.mono{white-space:nowrap;}
.tbl td.num,.tbl th.num{text-align:right;}
.tbl tbody tr:last-child td{border-bottom:none;}
.tbl tbody tr.click{cursor:pointer; transition:background .1s;}
.tbl tbody tr.click:hover td{background:var(--g-50);}
.tbl td.strong{color:var(--ink); font-weight:600;}
.sub{display:block; font-size:11px; color:var(--ink-3); margin-top:1px;}  /* 2ª linha discreta na célula */
.vig-bar{width:110px; height:5px; background:var(--card-2); border-radius:3px; overflow:hidden; margin-top:5px;}
.vig-bar i{display:block; height:100%; border-radius:3px; transition:width .5s ease;}

/* ------------------------------------------------------- CARIMBOS (status)
   Pílula de fundo suave + texto da mesma cor. Os nomes vêm do primeiro
   desenho ("laudo técnico ambiental"): mata, rio, ocre, barro, uva. */
.stamp{display:inline-block; font-size:11px; font-weight:600; padding:3.5px 10px; border-radius:20px; white-space:nowrap; font-family:var(--font-b);}
.st-mata {color:var(--g-texto);      background:var(--g-100);}       /* positivo, concluído, vigente */
.st-rio  {color:var(--blue-texto);   background:var(--blue-soft);}   /* em andamento, informativo */
.st-ocre {color:var(--orange);       background:var(--orange-soft);} /* atenção, pendente, prazo perto */
.st-barro{color:var(--red);          background:var(--red-soft);}    /* problema, vencido, perdido */
.st-uva  {color:var(--purple-texto); background:var(--purple-soft);} /* categoria à parte */
.st-cinza{color:var(--ink-2); background:var(--card-2); box-shadow:0 0 0 1px var(--line) inset;} /* neutro, inativo */
.tag{font-size:10px; color:var(--ink-3); border:1px solid var(--line); padding:1.5px 7px; border-radius:20px; background:var(--card-2); font-weight:600;}

/* ------------------------------------------------- ABAS, FILTROS, CHIPS */
.ftabs{display:flex; gap:6px; flex-wrap:wrap;}
.ftab{padding:7px 14px; border-radius:20px; font-size:12.5px; font-weight:600; background:var(--card); border:1px solid var(--line); color:var(--ink-2); transition:all .13s;}
.ftab:hover{color:var(--ink); border-color:var(--line-2);}
.ftab.active{background:var(--g-600); border-color:var(--g-600); color:#fff;}
/* abas sublinhadas (dentro de página ou painel) */
.dabas{display:flex; gap:2px; border-bottom:1px solid var(--line); overflow-x:auto; overflow-y:hidden; scrollbar-width:thin;}
.daba{border:none; background:none; padding:10px 16px; font-size:14px; font-weight:600; color:var(--ink-3); border-bottom:2px solid transparent; margin-bottom:-1px; white-space:nowrap; flex:0 0 auto;}
.daba:hover:not(.ativa){color:var(--ink-2);}
.daba.ativa{color:var(--g-texto); border-bottom-color:var(--g-texto);}
.daba .n{margin-left:6px; font-size:11px; font-family:var(--font-m); opacity:.7;}
/* segmentado (pílula com fundo) */
.seg{display:inline-flex; flex-wrap:wrap; gap:2px; background:var(--card-2); border:1px solid var(--line); border-radius:999px; padding:3px;}
.seg button{display:inline-flex; align-items:center; gap:6px; border:none; background:transparent; padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:600; color:var(--ink-2); white-space:nowrap;}
.seg button:hover:not(.active){color:var(--ink);}
.seg button.active{background:var(--card); color:var(--g-texto); box-shadow:var(--shadow-1);}
/* chip selecionável */
.chip{display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:11px; font-size:12.5px; font-weight:600; background:var(--card); border:1px solid var(--line); color:var(--ink-2); transition:all .13s;}
.chip:hover{border-color:var(--line-2); color:var(--ink);}
.chip.active{border-color:var(--g-600); color:var(--g-texto); background:var(--g-50); box-shadow:0 0 0 1px var(--g-600) inset;}

/* ---------------------------------------------------------- FORMULÁRIOS */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.toolbar .spacer{flex:1;}
.search{display:flex; align-items:center; gap:8px; background:var(--card); border:1px solid var(--line); border-radius:11px; padding:8.5px 12px; width:300px; max-width:100%; transition:border-color .15s, box-shadow .15s;}
.search:focus-within{border-color:var(--g-600); box-shadow:var(--foco);}
.search svg{width:14px; height:14px; color:var(--ink-3);}
.search input{flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--ink); font-size:13px;}
.sel{background:var(--card); border:1px solid var(--line); color:var(--ink-2); font-size:12.5px; border-radius:11px; padding:8.5px 11px; outline:none;}

.field{margin-bottom:14px;}
.field label{display:block; font-size:12.5px; font-weight:600; color:var(--ink); margin-bottom:6px;}
.field .req{color:var(--red);}
.field input,.field select,.field textarea{
  width:100%; padding:9.5px 12px; border:1px solid var(--line); border-radius:10px;
  font-size:13.5px; color:var(--ink); background:var(--card); outline:none;
  transition:border-color .12s, box-shadow .12s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--g-600); box-shadow:var(--foco);}
.field input[readonly]{background:var(--card-2); color:var(--ink-2); cursor:default;}
.field textarea{resize:vertical; min-height:62px;}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.fhint{font-size:11px; color:var(--ink-3); margin-top:5px;}
.ferro{font-size:12px; color:var(--red); margin-top:6px;}
input[type=checkbox],input[type=radio]{accent-color:var(--g-600);}
/* caixa com frase (não é campo de formulário: é uma escolha com explicação) */
label.opcao{display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card-2); cursor:pointer; font-size:12.5px; color:var(--ink-2);}
label.opcao input{width:16px; height:16px; margin:1px 0 0; flex:0 0 auto;}
label.opcao b{display:block; font-size:13px; color:var(--ink); font-weight:600;}

.switch{position:relative; display:inline-block; width:38px; height:21px; flex-shrink:0;}
.switch input{opacity:0; width:0; height:0;}
.slider{position:absolute; inset:0; background:var(--line-2); border-radius:20px; transition:.18s; cursor:pointer;}
.slider::before{content:''; position:absolute; width:15px; height:15px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.18s; box-shadow:0 1px 2px rgba(0,0,0,.25);}
.switch input:checked + .slider{background:var(--g-600);}
.switch input:checked + .slider::before{transform:translateX(17px);}

/* ------------------------------------------------ MODAL, GAVETA, AVISO */
.overlay{position:fixed; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(2px); z-index:var(--z-overlay);}
.modal{
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  width:580px; max-width:94vw; max-height:88vh; overflow:auto;
  background:var(--card); border-radius:var(--r-xl); box-shadow:var(--shadow-2);
  z-index:var(--z-modal); animation:modal-in .2s ease-out both;
}
.modal.largo{width:820px;}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--line);}
.modal-head h3{font-size:16px; font-weight:700;}
.modal-body{padding:20px 24px;}
.modal-foot{padding:16px 24px; border-top:1px solid var(--line); display:flex; justify-content:flex-end; gap:10px;}
.modal-foot .falta{margin-right:auto; align-self:center; font-size:12px; color:var(--amber);}

.drawer{
  position:fixed; top:0; right:0; height:100vh; width:max(460px,50vw); max-width:94vw;
  background:var(--card); border-left:1px solid var(--line); box-shadow:var(--shadow-2);
  z-index:var(--z-modal); display:flex; flex-direction:column; animation:fade-up .2s ease-out both;
}
.drawer-head{padding:20px 24px 15px; border-bottom:1px solid var(--line); display:flex; align-items:flex-start; justify-content:space-between; gap:10px;}
.drawer-body{padding:18px 24px 34px; overflow-y:auto; flex:1;}

.toast{
  position:fixed; bottom:26px; left:50%; transform:translateX(-50%);
  background:#0F172A; color:#F8FAFC; padding:12px 20px; border-radius:12px; font-size:13px; font-weight:500;
  box-shadow:var(--shadow-2); z-index:var(--z-toast); display:flex; align-items:center; gap:9px; animation:fade-up .2s ease-out both;
}
.toast .ok{color:var(--g-500);} .toast .err{color:#FCA5A5;}

/* caixa de aviso dentro da página */
.aviso{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--r-md); border:1px solid var(--line); background:var(--card-2); font-size:12.5px; color:var(--ink-2);}
.aviso b{color:var(--ink);}
.aviso.atencao{border-left:3px solid var(--amber-vivo);}
.aviso.erro{border-left:3px solid var(--red-vivo); background:var(--red-soft);}
.aviso.ok{border-left:3px solid var(--g-600); background:var(--g-50);}

/* ------------------------------------------------------- ESTADOS VAZIOS */
.empty{font-size:12px; color:var(--ink-3); text-align:center; padding:24px 0;}
.soon-box{border:1.5px dashed var(--line-2); border-radius:var(--r-xl); padding:60px 30px; text-align:center; background:var(--card); max-width:520px; margin:40px auto;}
.soon-box .ico{width:52px; height:52px; border-radius:14px; background:var(--g-50); color:var(--g-600); display:flex; align-items:center; justify-content:center; margin:0 auto 14px;}
.soon-box h3{font-size:16px; margin-bottom:6px;}
.soon-box p{font-size:13px; color:var(--ink-3); margin:0;}
.drop{border:1.5px dashed var(--line-2); border-radius:var(--r-md); padding:18px 14px; text-align:center; color:var(--ink-3); background:var(--card-2); cursor:pointer; transition:border-color .15s, background .15s;}
.drop:hover,.drop.over{border-color:var(--g-600); background:var(--g-50);}

/* ----------------------------------------------------------------- LOGIN */
.login-wrap{min-height:100vh; display:flex; align-items:center; justify-content:center; background:var(--bg); position:relative; overflow:hidden;}
.login-wrap::before{content:''; position:absolute; width:560px; height:560px; border-radius:50%; background:radial-gradient(circle, rgba(34,197,94,.16), transparent 65%); top:-180px; right:-120px;}
.login-wrap::after{content:''; position:absolute; width:480px; height:480px; border-radius:50%; background:radial-gradient(circle, rgba(59,130,246,.10), transparent 65%); bottom:-160px; left:-120px;}
.login-card{width:404px; max-width:92vw; background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow-2); padding:34px 34px 30px; position:relative; z-index:1; animation:fade-up .35s ease-out both;}

/* ------------------------------------------------------------- RESPONSIVO */
@media (max-width:1280px){
  .grid-2{grid-template-columns:1fr !important;}
  .kpi{border-bottom:1px solid var(--line);}
}
@media (max-width:760px){
  .sidebar{display:none;}
  .topbar,.view{padding-left:16px; padding-right:16px;}
  .frow{grid-template-columns:1fr;}
}