/* Dashboard Financeiro Domaná — estilos
   Paleta oficial: manual da marca Domaná 2026 (ver docs/IDENTIDADE_VISUAL.md).
   Tipografia: a família oficial "Fibra One" é comercial e não está
   licenciada neste projeto — o próprio manual de marca prevê Arial como
   alternativa para telas/plataformas onde a tipografia não pode ser
   embarcada (ver manual, seção "Família Tipográfica"). Se a licença da
   Fibra One (arquivos .woff2) estiver disponível, coloque-os em
   public/fonts/ e troque a variável --fonte abaixo — ver README.md. */

:root{
  --roxo: #672145;          /* cor prioritária da marca */
  --roxo-hdr: #4A1836;      /* tom mais escuro do roxo, só para fundo do menu de abas */
  --roxo-secundario: #6C3956;
  --roxo-claro: #F1E4EC;
  --laranja: #FC4C02;       /* cor de destaque da marca */
  --laranja-escuro: #B5401A;
  --amarelo: #F2E1A2;
  --verde-marca: #4EBFA1;
  --verde: #007a00;
  --verde-bg: #f0fff0;
  --vermelho: #C43D3D;
  --vermelho-bg: #fff0f0;
  --azul: #0055cc;
  --azul-bg: #f0f4ff;
  --ambar: #E0A526;
  --cinza-bg: #f0f0f0;
  --cinza-borda: #ddd;
  --texto: #222;
  --fonte: Arial, 'Segoe UI', sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:var(--fonte);background:var(--cinza-bg);color:var(--texto);font-size:13px;display:flex;flex-direction:column;min-height:100vh;}
button, input, select{font-family:inherit;}

/* ---------- cabeçalho e navegação ---------- */
.hdr{display:flex;align-items:center;background:var(--roxo);padding:0 16px;height:56px;gap:14px;flex-wrap:wrap;}
.logo{background:#fff;border-radius:8px;padding:5px 10px;display:flex;align-items:center;gap:6px;}
.logo img{display:block;height:26px;width:auto;}
.ptitle{flex:1;text-align:center;color:#fff;font-size:16px;font-weight:700;min-width:120px;}
.dbadge{color:#fff;font-size:11px;opacity:.9;white-space:nowrap;}
.hdr-user{display:flex;align-items:center;gap:8px;color:#fff;font-size:11px;}
.hdr-user .papel{background:rgba(255,255,255,.18);border-radius:20px;padding:2px 9px;font-weight:700;text-transform:uppercase;font-size:9px;letter-spacing:.03em;}
.btn-sair{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:7px 12px;font-size:11px;font-weight:600;cursor:pointer;min-height:32px;}
.btn-sair:hover{background:rgba(255,255,255,.26);}
/* Botoes de navegacao no cabecalho (Importar Dados / Usuarios) - mesmo
   visual do botao Sair, ficam perto dele por pedido (03/09/2026). */
.btn-hdr{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:6px;padding:7px 12px;font-size:11px;font-weight:600;cursor:pointer;min-height:32px;white-space:nowrap;}
.btn-hdr:hover{background:rgba(255,255,255,.26);}
.btn-hdr[hidden]{display:none;}

.tabs{display:flex;background:var(--roxo-hdr);padding:0 8px;flex-wrap:wrap;}
.tab{padding:10px 13px;color:#e6c9dc;font-size:10px;font-weight:600;cursor:pointer;border-bottom:3px solid transparent;text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;min-height:20px;display:flex;align-items:center;}
.tab:hover{color:#fff;background:rgba(255,255,255,.08);}
.tab.active{color:#fff;border-bottom:3px solid var(--laranja);background:rgba(255,255,255,.12);}
.tab[hidden]{display:none;}

.body{display:flex;flex:1;min-width:0;}
.sb{width:155px;min-width:155px;background:#fff;border-right:1px solid var(--cinza-borda);padding:8px 0;}
.flg{margin-bottom:3px;}
.flbl{background:var(--roxo);color:#fff;font-size:10px;font-weight:700;text-align:center;padding:4px 6px;text-transform:uppercase;}
.fsel{width:100%;padding:7px;border:1px solid var(--cinza-borda);border-top:none;font-size:11px;color:#333;background:#fafafa url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5'%3E%3Cpath d='M0 0l4 5 4-5z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 7px center;appearance:none;cursor:pointer;min-height:32px;}
.fsel:focus{outline:none;border-color:var(--roxo);}
.fsel:disabled{background-color:#eee;color:#999;cursor:not-allowed;opacity:.75;}
.brandbox{padding:12px 10px;border-bottom:1px solid #eee;margin-bottom:8px;text-align:center;}
.brandbox .bt{font-size:13px;font-weight:800;color:var(--roxo);letter-spacing:.5px;}
.brandbox .bs{font-size:8.5px;color:#999;margin-top:2px;line-height:1.3;}
.ct{flex:1;padding:10px;overflow-y:auto;min-width:0;}
.pg{display:none;}.pg.active{display:block;}

/* ---------- cartões / KPIs / gráficos (inalterados na essência) ---------- */
.kr{display:flex;gap:7px;margin-bottom:9px;flex-wrap:wrap;}
.kc{background:#fff;border:1.5px solid var(--cinza-borda);border-radius:9px;padding:9px 12px;min-width:120px;flex:1;text-align:center;box-shadow:0 1px 3px rgba(0,0,0,.06);}
.kc.r{border-color:var(--roxo);background:var(--roxo-claro);}
.kc.g{border-color:var(--verde);background:var(--verde-bg);}
.kc.o{border-color:var(--laranja);background:#FBEEE7;}
.kc.b{border-color:var(--azul);background:var(--azul-bg);}
.kl{font-size:10px;color:#555;font-weight:600;margin-bottom:3px;}
.kv{font-size:16px;font-weight:700;color:var(--roxo);}
.kv.g{color:var(--verde);}.kv.o{color:var(--laranja);}.kv.b{color:var(--azul);}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px;}
.card{background:#fff;border-radius:9px;border:1px solid var(--cinza-borda);padding:10px;box-shadow:0 1px 3px rgba(0,0,0,.05);min-width:0;}
.full{background:#fff;border-radius:9px;border:1px solid var(--cinza-borda);padding:10px;box-shadow:0 1px 3px rgba(0,0,0,.05);margin-bottom:9px;}
.ct2{font-size:11px;font-weight:700;color:#333;margin-bottom:7px;text-align:center;}
.sec{font-size:11px;font-weight:700;color:var(--roxo);border-left:3px solid var(--laranja);padding-left:6px;margin-bottom:7px;}
.cw{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;}
.lg{font-size:10px;}.lgi{display:flex;align-items:flex-start;gap:4px;margin-bottom:4px;}
.lgd{width:9px;height:9px;border-radius:50%;flex-shrink:0;margin-top:2px;}
.br{display:flex;align-items:center;gap:5px;margin-bottom:4px;}
.bn{width:165px;font-size:10px;color:#444;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex-shrink:0;}
.bt{flex:1;background:#f0f0f0;border-radius:3px;height:13px;}
.bf{height:100%;border-radius:3px;background:var(--laranja);}
.bv{font-size:10px;color:#333;white-space:nowrap;min-width:88px;}
.mt{width:100%;border-collapse:collapse;font-size:10px;}
.mt th{background:var(--roxo);color:#fff;padding:5px 7px;text-align:center;font-weight:600;}
.mt td{padding:5px 7px;text-align:center;border-bottom:1px solid #eee;}
.mt tr:last-child td{font-weight:700;background:var(--roxo-claro);color:var(--roxo);border:none;}
.mt tr:hover:not(:last-child) td{background:#FBF3F8;}
.ft{width:100%;border-collapse:collapse;font-size:10px;}
.ft th{background:var(--roxo);color:#fff;padding:5px 8px;font-weight:600;}
.ft td{padding:5px 8px;border-bottom:1px solid #eee;}
.pos{color:var(--verde);font-weight:600;}.neg{color:var(--roxo);font-weight:600;}
.lt{width:100%;border-collapse:collapse;font-size:11px;}
.lt th{background:var(--roxo);color:#fff;padding:5px 8px;font-weight:600;text-align:left;}
.lt td{padding:5px 8px;border-bottom:1px solid #eee;}
.lt tr:hover td{background:#FBF3F8;}
.agr{display:flex;flex-direction:column;gap:5px;}
.agi{display:flex;justify-content:space-between;align-items:center;padding:6px 9px;border-radius:6px;border:1px solid #eee;}
.sep{background:var(--roxo);color:#fff;font-size:11px;font-weight:700;padding:6px 10px;border-radius:6px;margin-bottom:8px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:4px;}
.status-pill{padding:2px 9px;border-radius:20px;font-size:10px;font-weight:700;}
.status-pill.v{background:#FBE4E4;color:var(--vermelho);}
.status-pill.a{background:#E4F3EA;color:var(--verde);}
.hier-row{display:flex;justify-content:space-between;align-items:center;padding:8px 9px;border-radius:6px;cursor:pointer;font-size:11px;gap:6px;}
.hier-row:hover{background:#FBF3F8;}
.hier-row.l1{font-weight:800;color:var(--roxo);background:var(--roxo-claro);margin-top:5px;}
.hier-row.l2{font-weight:700;color:var(--laranja);padding-left:24px;}
.hier-row.l3{font-weight:500;color:#444;padding-left:44px;}
.hier-row .arrow{display:inline-block;width:12px;transition:.15s;}
.hier-row.open .arrow{transform:rotate(90deg);}
.hier-children{display:none;}
.hier-children.open{display:block;}
.empty{text-align:center;color:#bbb;font-size:11px;padding:20px;}
svg text{font-family:var(--fonte);}

/* ---------- tela de login ---------- */
.login-wrap{position:fixed;inset:0;background:linear-gradient(160deg,var(--roxo) 0%,var(--roxo-hdr) 100%);display:flex;align-items:center;justify-content:center;padding:20px;z-index:100;}
.login-card{background:#fff;border-radius:14px;padding:32px 28px;width:100%;max-width:360px;box-shadow:0 20px 60px rgba(0,0,0,.35);}
.login-card img{display:block;height:38px;margin:0 auto 22px;}
.login-card h1{font-size:15px;color:var(--roxo);text-align:center;margin-bottom:22px;font-weight:700;}
.campo{margin-bottom:14px;}
.campo label{display:block;font-size:11px;font-weight:700;color:#555;margin-bottom:5px;text-transform:uppercase;letter-spacing:.02em;}
.campo input, .campo select{width:100%;padding:11px 12px;border:1.5px solid var(--cinza-borda);border-radius:8px;font-size:14px;min-height:44px;}
.campo input:focus, .campo select:focus{outline:none;border-color:var(--roxo);}
.btn-primario{width:100%;background:var(--laranja);color:#fff;border:none;border-radius:8px;padding:12px;font-size:13px;font-weight:700;cursor:pointer;min-height:44px;text-transform:uppercase;letter-spacing:.03em;}
.btn-primario:hover{filter:brightness(0.92);}
.btn-primario:disabled{opacity:.6;cursor:default;}
.msg-erro{background:#FBE4E4;color:var(--vermelho);border-radius:8px;padding:9px 11px;font-size:12px;margin-bottom:14px;display:none;}
.msg-erro.show{display:block;}
[hidden]{display:none !important;}

/* ---------- telas Usuários / Importar ---------- */
.painel-topo{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;}
.btn{border:none;border-radius:7px;padding:9px 14px;font-size:11px;font-weight:700;cursor:pointer;min-height:38px;}
.btn-laranja{background:var(--laranja);color:#fff;}
.btn-laranja:hover{filter:brightness(.92);}
.btn-secundario{background:#fff;border:1.5px solid var(--roxo);color:var(--roxo);}
.btn-secundario:hover{background:var(--roxo-claro);}
.btn-perigo{background:#fff;border:1.5px solid var(--vermelho);color:var(--vermelho);}
.btn-perigo:hover{background:var(--vermelho-bg);}
.badge-role{padding:3px 9px;border-radius:20px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;}
.badge-role.admin{background:var(--roxo-claro);color:var(--roxo);}
.badge-role.viewer_import{background:#FBEEE7;color:var(--laranja-escuro);}
.badge-role.viewer{background:var(--azul-bg);color:var(--azul);}
.badge-inativo{background:#eee;color:#888;padding:3px 9px;border-radius:20px;font-size:9px;font-weight:700;}

.modal-fundo{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:16px;z-index:50;}
.modal{background:#fff;border-radius:12px;padding:22px;width:100%;max-width:400px;max-height:90vh;overflow-y:auto;}
.modal h2{font-size:14px;color:var(--roxo);margin-bottom:16px;}
.modal-acoes{display:flex;gap:8px;justify-content:flex-end;margin-top:18px;}

.dropzone{border:2px dashed var(--roxo);border-radius:10px;padding:30px 16px;text-align:center;color:#666;font-size:12px;cursor:pointer;background:#fff;}
.dropzone.arrastando{background:var(--roxo-claro);}
.dropzone input{display:none;}
.progresso-item{margin-bottom:8px;}
.progresso-item .rot{display:flex;justify-content:space-between;font-size:10.5px;color:#555;margin-bottom:3px;}
.progresso-barra{background:#eee;border-radius:6px;height:9px;overflow:hidden;}
.progresso-barra .f{height:100%;background:var(--verde-marca);transition:width .2s;}
.progresso-barra .f.erro{background:var(--vermelho);}

/* ---------- responsividade ---------- */
@media (max-width: 860px){
  .g2{grid-template-columns:1fr;}
  .body{flex-direction:column;}
  .sb{width:100%;min-width:0;display:flex;align-items:stretch;padding:6px;gap:6px;}
  .flg{flex:1;margin-bottom:0;}
  .brandbox{display:none;}
  .ptitle{order:3;flex-basis:100%;text-align:center;font-size:13px;}
  .hdr{height:auto;padding:8px 12px;}
  .hdr-user{order:2;}
}
@media (max-width: 480px){
  .bn{width:96px;}
  .kc{min-width:100%;}
  .login-card{padding:24px 18px;}
}