@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&display=swap');

/* ══════════════════════════════════════════
   GIVAS-CAR — Design System "Oficina Premium"
   Carbono escuro · Vermelho racing · Outfit + DM Sans
══════════════════════════════════════════ */

/* ──────────────────────────────────────────
   TOKENS
────────────────────────────────────────── */
:root {
  /* vermelho racing */
  --r:      #e8342a;
  --r2:     #c42820;
  --r-vivo: #ff4a3f;
  --r-glow: rgba(232,52,42,.18);
  --r-soft: rgba(232,52,42,.08);

  /* superfícies (carbono) */
  --bg:    #06080c;
  --bg1:   #0b0e15;
  --bg2:   #10141d;
  --bg3:   #171c28;
  --card:  #0e121b;
  --card2: #141927;

  /* bordas */
  --line:  rgba(148,163,199,.08);
  --line2: rgba(148,163,199,.15);

  /* texto */
  --t1: #eef1f8;
  --t2: #97a0b5;
  --t3: #5b6478;

  /* semânticas */
  --g:       #2dd68c;
  --g-soft:  rgba(45,214,140,.1);
  --y:       #f5b92e;
  --azul:    #5aa2ff;
  --vm:      #ff6b62;

  /* sombras / elevação */
  --sombra-1: 0 1px 2px rgba(0,0,0,.4);
  --sombra-2: 0 8px 24px -6px rgba(0,0,0,.5);
  --sombra-3: 0 24px 60px -12px rgba(0,0,0,.65);

  /* layout */
  --sw: 256px;
  --th: 56px;
  --rad: 16px;
  --rad-sm: 10px;
  --ease: cubic-bezier(.4,0,.2,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
}

/* ──────────────────────────────────────────
   RESET / BASE
────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;color-scheme:dark}
body{
  font-family:'DM Sans',system-ui,sans-serif;
  background:var(--bg);color:var(--t1);
  font-size:14px;line-height:1.55;
}
a{color:inherit;text-decoration:none}
::selection{background:rgba(232,52,42,.35);color:#fff}

/* atmosfera global: brilho vermelho difuso no topo + vinheta */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 420px at 78% -10%, rgba(232,52,42,.07), transparent 60%),
    radial-gradient(700px 500px at -10% 110%, rgba(90,162,255,.045), transparent 60%),
    var(--bg);
}

/* scrollbar refinada */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--bg3);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#222a3a}

/* acessibilidade: anel de foco consistente */
:focus-visible{outline:2px solid var(--r);outline-offset:2px;border-radius:4px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* ──────────────────────────────────────────
   LOGIN
────────────────────────────────────────── */
.login-page{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:20px;position:relative;overflow:hidden;
  background:var(--bg);
}
/* grade técnica de fundo */
.login-page::before{
  content:'';position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px);
  background-size:44px 44px;
  mask-image:radial-gradient(ellipse 75% 75% at 50% 45%, black 25%, transparent 100%);
  animation:gridDrift 24s linear infinite;
}
@keyframes gridDrift{
  from{background-position:0 0}
  to  {background-position:44px 44px}
}
/* halo vermelho pulsante */
.login-page::after{
  content:'';position:absolute;
  width:680px;height:680px;border-radius:50%;
  background:radial-gradient(circle, rgba(232,52,42,.14) 0%, transparent 65%);
  top:50%;left:50%;transform:translate(-50%,-50%);
  pointer-events:none;
  animation:halo 7s ease-in-out infinite;
}
@keyframes halo{
  0%,100%{opacity:.7;transform:translate(-50%,-50%) scale(1)}
  50%    {opacity:1;transform:translate(-50%,-50%) scale(1.08)}
}

.login-card{
  position:relative;z-index:1;
  background:linear-gradient(180deg,var(--card2) 0%,var(--card) 100%);
  border:1px solid var(--line2);
  border-radius:24px;
  padding:44px 38px 36px;
  width:100%;max-width:404px;
  text-align:center;
  box-shadow:0 0 0 1px rgba(232,52,42,.05), var(--sombra-3);
  animation:cardIn .5s var(--ease-out) both;
  overflow:hidden;
}
@keyframes cardIn{
  from{opacity:0;transform:translateY(18px) scale(.98)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
/* filete racing no topo do card */
.login-card::before{
  content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg, transparent 0%, var(--r) 30%, var(--r-vivo) 50%, var(--r) 70%, transparent 100%);
}
.login-card img{
  width:124px;height:124px;border-radius:50%;
  border:2px solid var(--line2);margin-bottom:18px;object-fit:cover;
  box-shadow:0 0 0 7px rgba(232,52,42,.07), 0 8px 24px rgba(0,0,0,.45);
}
.login-card h1{
  font-family:'Outfit',sans-serif;font-size:21px;font-weight:800;
  color:var(--t1);letter-spacing:-.4px;margin-bottom:4px;
}
.login-card p.subtitulo{color:var(--t3);font-size:12.5px;margin-bottom:26px}

.login-card label{
  display:block;text-align:left;
  font-size:10.5px;font-weight:700;letter-spacing:.8px;
  color:var(--t3);text-transform:uppercase;margin:16px 0 6px;
}
.login-card input{
  width:100%;padding:12px 14px;
  background:var(--bg1);border:1.5px solid var(--line);
  border-radius:var(--rad-sm);color:var(--t1);font-size:14px;
  font-family:'DM Sans',sans-serif;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s;
}
.login-card input::placeholder{color:var(--t3)}
.login-card input:focus{
  outline:none;border-color:var(--r);
  box-shadow:0 0 0 4px var(--r-glow);background:var(--bg2);
}
.btn-entrar{
  width:100%;margin-top:26px;padding:13px;border:none;border-radius:var(--rad-sm);
  background:linear-gradient(135deg,var(--r-vivo),var(--r2));
  color:#fff;font-size:14.5px;font-weight:700;cursor:pointer;
  font-family:'Outfit',sans-serif;letter-spacing:.2px;
  box-shadow:0 4px 20px rgba(232,52,42,.35), inset 0 1px 0 rgba(255,255,255,.18);
  transition:all .2s var(--ease);
  position:relative;overflow:hidden;
}
.btn-entrar::after{
  content:'';position:absolute;top:0;left:-80%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-20deg);transition:left .45s var(--ease);
}
.btn-entrar:hover{transform:translateY(-1px);box-shadow:0 8px 28px rgba(232,52,42,.5), inset 0 1px 0 rgba(255,255,255,.18)}
.btn-entrar:hover::after{left:120%}
.btn-entrar:active{transform:scale(.98)}
.btn-entrar:disabled{opacity:.6;cursor:wait}
.login-erro{color:var(--vm);font-size:12.5px;margin-top:12px;min-height:16px;font-weight:600}
.login-dica{margin-top:20px;font-size:10.5px;color:var(--t3);letter-spacing:.4px;text-transform:uppercase}

/* 2FA */
.login-2fa{display:none}
.login-2fa-ativo .login-senha{display:none}
.login-2fa-ativo .login-2fa{display:block;animation:fadeUp .28s var(--ease-out)}
.otp-input{
  letter-spacing:10px;font-size:26px;text-align:center;
  padding:14px;border:1.5px solid var(--line);border-radius:var(--rad-sm);
  width:100%;font-family:'Outfit',monospace;font-weight:600;
  background:var(--bg1);color:var(--t1);
  transition:border-color .18s,box-shadow .18s;
}
.otp-input:focus{outline:none;border-color:var(--r);box-shadow:0 0 0 4px var(--r-glow)}
.btn-voltar{background:none;border:none;color:var(--t3);font-size:12.5px;cursor:pointer;margin-top:14px;transition:color .15s}
.btn-voltar:hover{color:var(--r)}
.login-2fa-info{
  background:var(--bg2);border-radius:var(--rad-sm);padding:12px 14px;
  font-size:12px;color:var(--t2);margin-bottom:16px;text-align:left;
  border-left:3px solid var(--r);line-height:1.6;
}

/* senha show/hide */
[id="btnVerSenha"]{
  position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;color:var(--t3);padding:4px;
  display:flex;align-items:center;transition:color .15s;
}
[id="btnVerSenha"]:hover{color:var(--t2)}
[id="senha"]{padding-right:42px}

/* ──────────────────────────────────────────
   SIDEBAR
────────────────────────────────────────── */
.sidebar{
  position:fixed;top:0;left:0;bottom:0;width:var(--sw);
  background:linear-gradient(180deg,var(--bg1) 0%,#0a0d13 100%);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:300;
  transition:transform .32s var(--ease-out);
}
/* filete racing vertical */
.sidebar::before{
  content:'';position:absolute;top:0;bottom:0;left:0;width:2px;
  background:linear-gradient(180deg, var(--r) 0%, transparent 32%);
  opacity:.75;pointer-events:none;
}

.sidebar-logo{
  display:flex;align-items:center;gap:14px;
  padding:24px 18px 20px;
  border-bottom:1px solid var(--line);flex-shrink:0;
}
.sidebar-logo img{
  width:64px;height:64px;border-radius:16px;
  border:1px solid var(--line2);object-fit:cover;flex-shrink:0;
  box-shadow:0 0 0 5px rgba(232,52,42,.07), 0 6px 18px rgba(0,0,0,.4);
}
.sidebar-logo-nome{
  font-family:'Outfit',sans-serif;font-size:18px;
  font-weight:800;color:var(--t1);display:block;letter-spacing:-.3px;
}
.sidebar-logo-sub{
  font-size:9.5px;color:var(--r-vivo);font-weight:700;
  letter-spacing:1.4px;text-transform:uppercase;display:block;margin-top:3px;
}

.sidebar-nav{flex:1;overflow-y:auto;padding:12px 10px;scrollbar-width:none}
.sidebar-nav::-webkit-scrollbar{display:none}

.nav-grupo{
  font-size:9px;font-weight:700;letter-spacing:1.3px;text-transform:uppercase;
  color:var(--t3);padding:14px 12px 6px;user-select:none;
}
.sidebar-nav .nav-grupo:first-child{padding-top:2px}

.sidebar-nav a{
  display:flex;align-items:center;gap:11px;
  padding:10px 12px;border-radius:var(--rad-sm);
  color:var(--t3);font-size:13px;font-weight:500;
  cursor:pointer;transition:all .16s var(--ease);
  margin-bottom:2px;position:relative;
  border:1px solid transparent;
}
.sidebar-nav a svg{width:16px;height:16px;flex-shrink:0;transition:color .16s,transform .2s var(--ease)}

.sidebar-nav a:hover{
  color:var(--t1);
  background:rgba(255,255,255,.045);
}
.sidebar-nav a:hover svg{transform:translateX(1px)}

.sidebar-nav a.ativo{
  color:var(--t1);font-weight:600;
  background:linear-gradient(90deg, rgba(232,52,42,.14) 0%, rgba(232,52,42,.05) 100%);
  border-color:rgba(232,52,42,.22);
}
.sidebar-nav a.ativo::after{
  content:'';position:absolute;left:-10px;top:50%;
  transform:translateY(-50%);
  width:3px;height:20px;background:var(--r);
  border-radius:0 3px 3px 0;
  box-shadow:0 0 10px rgba(232,52,42,.7);
}
.sidebar-nav a.ativo svg{color:var(--r-vivo)}

.sidebar-footer{
  padding:12px 10px;border-top:1px solid var(--line);flex-shrink:0;
}
.btn-sair{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:10px 12px;border-radius:var(--rad-sm);
  background:transparent;border:1px solid transparent;
  color:var(--t3);font-size:13px;font-weight:500;cursor:pointer;
  font-family:'DM Sans',sans-serif;
  transition:all .16s var(--ease);
}
.btn-sair svg{width:15px;height:15px}
.btn-sair:hover{color:var(--vm);background:rgba(232,52,42,.08);border-color:rgba(232,52,42,.18)}

.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(3,4,7,.72);z-index:299;backdrop-filter:blur(6px)}
.sidebar-overlay.ativo{display:block;animation:fadeIn .2s var(--ease)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ──────────────────────────────────────────
   TOPBAR (mobile)
────────────────────────────────────────── */
.topbar{
  display:none;position:fixed;top:0;left:0;right:0;
  height:var(--th);
  background:rgba(11,14,21,.88);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  align-items:center;justify-content:space-between;
  padding:0 16px;z-index:200;
}
.topbar-titulo{font-family:'Outfit',sans-serif;font-size:15px;font-weight:700;color:var(--t1)}
.topbar-logo{
  width:42px;height:42px;border-radius:12px;
  border:1px solid var(--line2);object-fit:cover;
  box-shadow:0 0 0 3px rgba(232,52,42,.07);
}
.hamburger{
  display:flex;flex-direction:column;justify-content:center;gap:5px;
  width:38px;height:38px;background:none;border:none;cursor:pointer;padding:10px;
}
.hamburger span{display:block;height:1.5px;border-radius:2px;background:var(--t2);transition:all .2s}
.hamburger:hover span{background:var(--t1)}

/* ──────────────────────────────────────────
   MAIN
────────────────────────────────────────── */
.main-wrap{margin-left:var(--sw);min-height:100vh}
.container{max-width:1180px;padding:32px 28px 48px}

.secao{display:none}
.secao.ativo{display:block;animation:fadeUp .3s var(--ease-out)}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(12px)}
  to  {opacity:1;transform:translateY(0)}
}

/* ──────────────────────────────────────────
   CABEÇALHO DE SEÇÃO
────────────────────────────────────────── */
.secao-head{display:flex;align-items:center;gap:14px;margin-bottom:4px}
.secao-head .icone{
  width:46px;height:46px;flex:0 0 auto;border-radius:13px;
  background:linear-gradient(135deg,var(--r-vivo) 0%,var(--r2) 100%);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(232,52,42,.32), inset 0 1px 0 rgba(255,255,255,.22);
}
.secao-head .icone svg{width:20px;height:20px;stroke:#fff;fill:none}
.secao-head h2{
  font-family:'Outfit',sans-serif;font-size:24px;
  font-weight:800;letter-spacing:-.6px;color:var(--t1);
}
.secao-sub{color:var(--t3);font-size:13px;margin:6px 0 24px;letter-spacing:.1px}

/* ──────────────────────────────────────────
   PAINÉIS / CARDS
────────────────────────────────────────── */
.painel{
  background:linear-gradient(180deg,var(--card2) 0%,var(--card) 100%);
  border:1px solid var(--line);
  border-radius:var(--rad);
  padding:24px;
  margin-bottom:18px;
  box-shadow:var(--sombra-1);
  transition:border-color .2s,box-shadow .25s;
  position:relative;
}
.painel:last-child{margin-bottom:0}
.painel:hover{border-color:var(--line2);box-shadow:var(--sombra-2)}

.painel h3{
  font-size:11px;font-weight:700;color:var(--t2);
  letter-spacing:.9px;text-transform:uppercase;
  padding-bottom:13px;border-bottom:1px solid var(--line);
  margin-bottom:18px;display:flex;align-items:center;gap:9px;
}
.painel h3::before{
  content:'';display:inline-block;
  width:3px;height:13px;background:linear-gradient(180deg,var(--r-vivo),var(--r2));
  border-radius:2px;flex-shrink:0;
}

.painel-dupla{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-bottom:18px}

/* ──────────────────────────────────────────
   CAMPOS
────────────────────────────────────────── */
.campo{margin-bottom:14px}
.campo:last-of-type{margin-bottom:0}

.campo label{
  display:block;font-size:10.5px;font-weight:700;margin-bottom:6px;
  color:var(--t3);letter-spacing:.7px;text-transform:uppercase;
}
.campo label span{color:var(--r-vivo)}

.campo input,.campo select,.campo textarea{
  width:100%;padding:10px 13px;
  background:var(--bg2);border:1.5px solid var(--line);
  border-radius:var(--rad-sm);font-size:13.5px;
  font-family:'DM Sans',sans-serif;color:var(--t1);
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease),background .18s;
  appearance:none;-webkit-appearance:none;
}
.campo select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6478' stroke-width='2.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  padding-right:32px;cursor:pointer;
}
.campo select option{background:var(--bg2);color:var(--t1)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--t3)}
.campo input:focus,.campo select:focus,.campo textarea:focus{
  outline:none;border-color:var(--r);
  box-shadow:0 0 0 3px var(--r-glow);background:var(--bg3);
}
.campo textarea{resize:vertical;min-height:72px}

.campo input.campo-invalido,.campo select.campo-invalido{
  border-color:#dc2626;box-shadow:0 0 0 3px rgba(220,38,38,.12);
}
.campo .msg-erro-campo{font-size:11px;color:var(--vm);margin-top:4px;display:none;font-weight:600}
.campo.tem-erro .msg-erro-campo{display:block}

.campo-arquivo{
  position:relative;display:flex;align-items:center;gap:9px;
  border:1.5px dashed var(--line2);border-radius:var(--rad-sm);
  padding:10px 13px;font-size:13px;color:var(--t3);
  background:var(--bg2);cursor:pointer;transition:all .18s;
}
.campo-arquivo:hover{border-color:var(--r);color:var(--r-vivo);background:var(--r-soft)}
.campo-arquivo svg{width:15px;height:15px;flex:0 0 auto}
.campo-arquivo input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer}

.linha-campos{display:grid;gap:14px}
.linha-2{grid-template-columns:1fr 1fr}
.linha-3{grid-template-columns:1fr 1fr 1fr}
.acoes-form{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}

/* ──────────────────────────────────────────
   BOTÕES
────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 18px;border-radius:var(--rad-sm);font-size:13px;font-weight:600;
  font-family:'DM Sans',sans-serif;cursor:pointer;
  border:1px solid var(--line);background:var(--bg2);color:var(--t2);
  transition:all .16s var(--ease);line-height:1;white-space:nowrap;
}
.btn svg{width:14px;height:14px;flex:0 0 auto}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important}

.btn-primario{
  background:linear-gradient(135deg,var(--r-vivo),var(--r2));
  color:#fff;border-color:transparent;
  box-shadow:0 2px 14px rgba(232,52,42,.32), inset 0 1px 0 rgba(255,255,255,.18);
  font-weight:700;
}
.btn-primario:hover{box-shadow:0 6px 22px rgba(232,52,42,.46), inset 0 1px 0 rgba(255,255,255,.18);transform:translateY(-1px)}

.btn-secundario{background:var(--bg2);color:var(--t2);border-color:var(--line)}
.btn-secundario:hover{background:var(--bg3);color:var(--t1);border-color:var(--line2)}

.btn-exportar{
  display:inline-flex;align-items:center;gap:7px;
  background:var(--bg2);color:var(--t2);border:1px solid var(--line);
  font-size:12px;padding:8px 14px;font-weight:600;border-radius:var(--rad-sm);
  font-family:'DM Sans',sans-serif;
  cursor:pointer;transition:all .16s;
}
.btn-exportar:hover{background:var(--bg3);color:var(--t1);border-color:var(--line2)}
.btn-exportar svg{width:12px;height:12px}

.btn-icone{
  display:inline-flex;align-items:center;justify-content:center;
  width:31px;height:31px;border-radius:var(--rad-sm);
  background:transparent;border:1px solid transparent;
  cursor:pointer;color:var(--t3);transition:all .16s;
}
.btn-icone svg{width:13px;height:13px}
.btn-icone:hover{background:var(--bg3);border-color:var(--line);color:var(--t2)}
.btn-icone.editar:hover{color:var(--azul);border-color:rgba(90,162,255,.22);background:rgba(90,162,255,.08)}
.btn-icone.excluir:hover{color:var(--vm);border-color:rgba(255,107,98,.22);background:rgba(232,52,42,.08)}

/* ──────────────────────────────────────────
   FORM INLINE
────────────────────────────────────────── */
.form-inline{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;align-items:end;
  background:var(--bg1);border-radius:var(--rad-sm);
  padding:18px;margin-bottom:20px;
  border:1px solid var(--line);
}
.form-inline .campo{margin-bottom:0}
.form-inline .btn{height:41px;align-self:end}

/* ──────────────────────────────────────────
   TABELAS
────────────────────────────────────────── */
.tabela-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;border-radius:var(--rad-sm);border:1px solid var(--line)}

table{width:100%;border-collapse:collapse;font-size:13px;min-width:480px}

table th{
  text-align:left;padding:10px 14px;
  font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
  color:var(--t3);border-bottom:1px solid var(--line);
  background:var(--bg1);white-space:nowrap;
  position:sticky;top:0;z-index:1;
}

table td{
  padding:12px 14px;border-bottom:1px solid var(--line);
  vertical-align:middle;color:var(--t2);
  transition:background .12s,color .12s;
  font-variant-numeric:tabular-nums;
}
table tbody tr:nth-child(even) td{background:rgba(255,255,255,.012)}
table tr:hover td{background:rgba(232,52,42,.035);color:var(--t1)}
table tr:last-child td{border-bottom:none}
.tabela-vazia td{text-align:center;color:var(--t3);padding:44px 14px;font-size:13px}

.nf-link{color:var(--r-vivo);font-size:12px;font-weight:600}
.nf-link:hover{text-decoration:underline}
.sem-nf{color:var(--t3);font-size:12px}

/* ──────────────────────────────────────────
   TOTAL
────────────────────────────────────────── */
.total-linha{
  display:flex;justify-content:space-between;align-items:center;
  font-weight:600;padding:14px 4px 0;margin-top:6px;
  border-top:1px solid var(--line);font-size:12px;
  flex-wrap:wrap;gap:10px;color:var(--t3);
  text-transform:uppercase;letter-spacing:.6px;
}
.total-linha .total-acoes{display:flex;align-items:center;gap:14px}
.total-linha .total-valor{
  font-family:'Outfit',sans-serif;color:var(--g);
  font-size:19px;font-weight:800;letter-spacing:-.4px;
  font-variant-numeric:tabular-nums;
}
.total-linha.negativo .total-valor{color:var(--vm)}

/* ──────────────────────────────────────────
   FINANCEIRO — tabs segmentadas
────────────────────────────────────────── */
.fin-tabs{
  display:inline-flex;gap:3px;margin-bottom:22px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg1);border:1px solid var(--line);
  border-radius:12px;padding:4px;max-width:100%;
}
.fin-tabs::-webkit-scrollbar{display:none}

.fin-tabs button{
  background:transparent;border:none;
  padding:8px 16px;font-size:12.5px;font-weight:600;
  font-family:'DM Sans',sans-serif;cursor:pointer;color:var(--t3);
  border-radius:9px;transition:all .18s var(--ease);white-space:nowrap;
}
.fin-tabs button:hover{color:var(--t1)}
.fin-tabs button.ativo{
  background:linear-gradient(135deg,var(--r-vivo),var(--r2));color:#fff;
  box-shadow:0 2px 10px rgba(232,52,42,.35);
}

/* filtro resumo */
.resumo-filtro{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.resumo-filtro label{font-size:10.5px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:.7px;white-space:nowrap}
.resumo-filtro input[type="month"]{
  padding:8px 12px;border:1.5px solid var(--line);border-radius:var(--rad-sm);
  font-size:13px;background:var(--bg2);color:var(--t1);cursor:pointer;
  transition:border-color .18s;font-family:'DM Sans',sans-serif;
}
.resumo-filtro input[type="month"]:focus{outline:none;border-color:var(--r);box-shadow:0 0 0 3px var(--r-glow)}

/* cards resumo */
.resumo-valores{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:6px}

.resumo-val-card{
  border-radius:var(--rad);padding:22px 20px;
  border:1px solid var(--line);position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--card2),var(--card));
  box-shadow:var(--sombra-1);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .25s;
}
.resumo-val-card:hover{transform:translateY(-2px);border-color:var(--line2);box-shadow:var(--sombra-2)}
.resumo-val-card::before{
  content:'';position:absolute;top:-36px;right:-24px;
  width:120px;height:120px;border-radius:50%;opacity:.09;
  transition:opacity .25s;
}
.resumo-val-card:hover::before{opacity:.16}
.resumo-val-card:nth-child(1)::before{background:var(--g)}
.resumo-val-card:nth-child(2)::before{background:var(--r)}
.resumo-val-card:nth-child(3)::before{background:var(--azul)}
/* filete inferior colorido */
.resumo-val-card::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;opacity:.55;
}
.resumo-val-card:nth-child(1)::after{background:linear-gradient(90deg,var(--g),transparent)}
.resumo-val-card:nth-child(2)::after{background:linear-gradient(90deg,var(--r),transparent)}
.resumo-val-card:nth-child(3)::after{background:linear-gradient(90deg,var(--azul),transparent)}

.resumo-val-card .rotulo{
  font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.9px;margin-bottom:9px;color:var(--t3);
}
.resumo-val-card .valor{
  font-family:'Outfit',sans-serif;font-size:24px;
  font-weight:800;letter-spacing:-.6px;color:var(--t1);
  font-variant-numeric:tabular-nums;
}
.resumo-val-card .valor.verde{color:var(--g)}
.resumo-val-card .valor.vermelho{color:var(--vm)}

/* ──────────────────────────────────────────
   BADGES
────────────────────────────────────────── */
.badge{
  padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:700;
  display:inline-flex;align-items:center;gap:5px;
}
.badge::before{content:'';width:5px;height:5px;border-radius:50%;background:currentColor}
.badge.pago{background:var(--g-soft);color:var(--g);border:1px solid rgba(45,214,140,.22)}
.badge.pendente{background:rgba(245,185,46,.09);color:var(--y);border:1px solid rgba(245,185,46,.18)}

/* ──────────────────────────────────────────
   TOAST
────────────────────────────────────────── */
.toast{
  position:fixed;bottom:24px;right:24px;
  background:var(--card2);color:var(--t1);
  padding:14px 20px;border-radius:14px;font-size:13px;font-weight:600;
  box-shadow:var(--sombra-3);z-index:9999;max-width:340px;
  animation:slideUp .28s cubic-bezier(.34,1.56,.64,1);
  border:1px solid var(--line2);word-break:break-word;
}
@keyframes slideUp{
  from{opacity:0;transform:translateY(16px) scale(.96)}
  to  {opacity:1;transform:translateY(0) scale(1)}
}
.toast.erro{border-color:rgba(232,52,42,.35);color:#ffa39c;background:#251012}
.toast.ok  {border-color:rgba(45,214,140,.3);color:#7cf5c7;background:#0a2118}

.oculto{display:none!important}
.acoes-celula{white-space:nowrap}
.acoes-celula .btn-icone + .btn-icone{margin-left:4px}

/* ──────────────────────────────────────────
   MODAIS
────────────────────────────────────────── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(3,4,7,.78);
  display:flex;align-items:center;justify-content:center;
  z-index:1000;padding:16px;backdrop-filter:blur(10px);
}
.modal-caixa{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line2);
  border-radius:var(--rad);padding:28px 26px;
  width:100%;max-width:500px;max-height:90vh;overflow-y:auto;
  box-shadow:var(--sombra-3);
  animation:modalIn .24s cubic-bezier(.34,1.56,.64,1);
}
@keyframes modalIn{
  from{opacity:0;transform:scale(.94) translateY(10px)}
  to  {opacity:1;transform:scale(1) translateY(0)}
}
.modal-caixa h3{
  font-family:'Outfit',sans-serif;font-size:17px;
  font-weight:800;margin-bottom:20px;color:var(--t1);letter-spacing:-.3px;
}

/* ──────────────────────────────────────────
   CONFIGURAÇÕES
────────────────────────────────────────── */
.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.config-card{
  background:linear-gradient(180deg,var(--card2),var(--card));
  border:1px solid var(--line);
  border-radius:var(--rad);padding:24px;
  box-shadow:var(--sombra-1);
  transition:border-color .18s,box-shadow .25s;
}
.config-card:hover{border-color:var(--line2);box-shadow:var(--sombra-2)}
.config-card h3{font-family:'Outfit',sans-serif;font-size:14.5px;font-weight:800;margin-bottom:7px;color:var(--t1)}
.config-card p{font-size:12.5px;color:var(--t3);margin-bottom:15px;line-height:1.7}
.config-destaque{
  background:var(--bg1);border-radius:var(--rad-sm);padding:14px 16px;
  font-size:12px;color:var(--t2);line-height:1.9;margin-bottom:15px;
  border-left:3px solid var(--r);
}
.config-destaque code{
  background:var(--bg3);border-radius:4px;padding:1px 7px;
  font-size:11px;color:var(--r-vivo);
}
.qr-wrap{text-align:center;padding:8px 0 16px}
.qr-wrap img{width:180px;height:180px;border:1px solid var(--line);border-radius:12px;padding:4px;background:#fff}
.secret-manual{font-size:11.5px;color:var(--t3);margin-top:10px}
.secret-manual code{background:var(--bg2);border-radius:4px;padding:2px 7px;color:var(--r-vivo);font-size:11px;word-break:break-all}

/* ──────────────────────────────────────────
   RESPONSIVO
────────────────────────────────────────── */
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);box-shadow:var(--sombra-3)}
  .sidebar.aberta{transform:translateX(0)}
  .topbar{display:flex}
  .main-wrap{margin-left:0;padding-top:var(--th)}
  .container{padding:16px 14px 32px}
  .painel-dupla{grid-template-columns:1fr;gap:14px}
  .config-grid{grid-template-columns:1fr;gap:14px}
  .painel{padding:18px;margin-bottom:14px}
  .resumo-valores{gap:10px}
  .resumo-val-card{padding:16px 14px}
  .resumo-val-card .valor{font-size:19px}
  .secao-head h2{font-size:20px}
  .form-inline{gap:11px;padding:15px}
  .toast{bottom:14px;right:12px;left:12px;max-width:none}
}
/* ── Tabelas viram cartões empilhados no celular ── */
@media(max-width:700px){
  .tabela-scroll{overflow:visible;border:none;border-radius:0}
  .tabela-scroll table{min-width:0;width:100%}
  .tabela-scroll thead{display:none}
  .tabela-scroll tbody{display:block}
  .tabela-scroll tbody tr{
    display:block;
    background:var(--bg1);
    border:1px solid var(--line);border-radius:12px;
    margin-bottom:10px;overflow:hidden;
    box-shadow:var(--sombra-1);
  }
  .tabela-scroll tbody tr:last-child{margin-bottom:0}
  .tabela-scroll tbody tr:nth-child(even) td{background:transparent}
  .tabela-scroll tbody tr:hover td{background:transparent;color:var(--t2)}
  .tabela-scroll tbody td{
    display:flex;justify-content:space-between;align-items:center;gap:14px;
    padding:10px 14px;text-align:right;
    border-bottom:1px solid var(--line);
  }
  .tabela-scroll tbody td:last-child{border-bottom:none}
  .tabela-scroll tbody td::before{
    content:attr(data-label);
    font-size:10px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;
    color:var(--t3);flex-shrink:0;text-align:left;
  }
  .tabela-scroll tbody td.celula-vazia{display:block;text-align:center;padding:20px 14px}
  .tabela-scroll tbody td.celula-vazia::before{display:none}
  td.acoes-celula{justify-content:flex-end;background:rgba(255,255,255,.015)}
  td.acoes-celula::before{margin-right:auto}
  /* área de toque confortável para o dedo */
  .btn-icone{width:42px;height:42px;background:var(--bg2);border-color:var(--line)}
  .btn-icone svg{width:16px;height:16px}
  .acoes-celula .btn-icone + .btn-icone{margin-left:8px}
  /* evita zoom automático do iOS ao focar campos */
  .campo input,.campo select,.campo textarea,.login-card input,.resumo-filtro input[type="month"]{font-size:16px}
}
@media(max-width:600px){
  .container{padding:12px 10px 28px}
  .painel{padding:14px;margin-bottom:12px}
  .linha-2,.linha-3{grid-template-columns:1fr}
  .form-inline{grid-template-columns:1fr}
  .acoes-form{flex-direction:column}
  .acoes-form .btn{width:100%;justify-content:center}
  .modal-caixa{padding:20px 16px}
  .total-linha{flex-direction:column;align-items:flex-start;gap:8px}
  .total-linha .total-acoes{width:100%;justify-content:space-between}
  .total-linha .total-valor{font-size:22px}
  .resumo-valores{grid-template-columns:1fr}
  .resumo-val-card .valor{font-size:20px}
  .config-card{padding:16px}
  .secao-head .icone{width:40px;height:40px;border-radius:11px}
  .secao-head .icone svg{width:17px;height:17px}
  .fin-tabs{width:100%;justify-content:flex-start}
  .sidebar-logo img{width:56px;height:56px}
  .login-card img{width:104px;height:104px}
  .login-card{padding:34px 24px 28px}
}
@media(max-width:380px){
  .resumo-val-card .valor{font-size:17px}
}