/* =========================================================================
   Talkline - Fluxo de Entrada e Saida
   Tema ESCURO - paleta EXATA herdada do referencia (Tratador de Boletos TIM).
   Sem nenhum CDN (offline-friendly). Comentarios em pt-BR sem acento.

   PALETA:
     fundo        #121212
     painel       #202020
     log          #0A1A1E
     texto        #F3F2EF
     dim/azul     #98C2CC
     teal prim.   #1B606E
     teal hover   #247780
     ok/confirmar #1E8C99
     parar/neutro #3E3E3E
   ========================================================================= */

:root {
  --fundo:        #0b2e34;   /* petroleo/teal escuro FORTE (estilo Dashboard de Meta) */
  --painel:       #114550;   /* superficie teal (cards/paineis) */
  --log:          #08252b;
  --texto:        #F3F2EF;
  --dim:          #9fcdd7;
  --teal:         #1B606E;
  --teal-hover:   #247780;
  --ok:           #1E8C99;
  --neutro:       #25555d;   /* neutro tingido de teal */

  /* derivados */
  --painel-borda: #23606b;
  --painel-claro: #175863;
  --campo:        #0c3840;   /* fundo dos campos (inputs/selects/multiselect) */
  --erro:         #d97a7a;
  --verde-log:    #4fd2c0;
  --amarelo-log:  #e8c95a;
  --vermelho-log: #e08585;

  /* cores semanticas do fluxo (entrada x saida) */
  --entrada:      #4fd2c0;   /* verde-agua para receitas */
  --saida:        #e08585;   /* vermelho suave para despesas */
  --saldo:        #98C2CC;   /* azul-dim para o saldo */

  --radius: 10px;
  --radius-sm: 7px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  background: var(--fundo);   /* teal solido e UNIFORME */
  color: var(--texto);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  /* inputs date nativos no tema escuro */
  color-scheme: dark;
}

[hidden] { display: none !important; }

/* ====================== WORDMARK "talkline" ====================== */
.wordmark {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-weight: 700;
  letter-spacing: -0.5px;
}
.wordmark-text {
  font-size: 26px;
  color: var(--texto);
  font-weight: 700;
}
/* O pequeno acento/mark em #98C2CC */
.wordmark-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--dim);
  display: inline-block;
  box-shadow: 0 0 10px rgba(152, 194, 204, 0.55);
}
.wordmark-login .wordmark-text { font-size: 34px; }
.wordmark-login .wordmark-dot { width: 11px; height: 11px; }

/* =====================================================================
   OVERLAY DE LOGIN — split-screen "Fiel-ao-CRM" (versao final)
   Base: Design 0 (mais robusto). Enxertos: halos/glow e sheen (D1),
   eyebrow com acento teal (D2), icones traco fino (D2), wave animado
   com guarda de movimento (D1), apoio sob o OTP e OTP limpo/centrado (D2).
   Esquerda teal-escura (marca) + direita creme (form). Visual IDENTICO
   nos dois temas: tudo escopado em .login-overlay para nao ser afetado
   por body.tema-claro. Comentarios em pt-BR sem acento.
   ===================================================================== */

/* tokens locais so do login (nao dependem do tema do painel) */
.login-overlay {
  --lg-teal-1: #08252b;   /* petroleo topo-esquerda */
  --lg-teal-2: #0b2e34;
  --lg-teal-3: #114550;   /* teal baixo-direita */
  --lg-mint:   #9fcdd7;
  --lg-creme:  #f6f1e9;   /* superficie clara e quente */
  --lg-creme-2:#efe7db;
  --lg-tinta:  #10343b;   /* texto escuro sobre creme */
  --lg-mudo:   #5b6e72;   /* subtitulo mudo */
  --lg-borda-in: #ddd3c4; /* borda quente dos inputs */
  --lg-anel:   #1B606E;   /* anel de foco teal */
}

/* raiz: duas colunas 50/50, ocupa a tela toda, sem scroll horizontal.
   !important vence o display:flex do overlay base, se houver. */
.login-overlay:not([hidden]) {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  background: var(--lg-creme);   /* fallback do lado direito */
  overflow-x: hidden;            /* nunca scroll horizontal */
  overflow-y: auto;
}

/* ---------------------- COLUNA ESQUERDA: MARCA ---------------------- */
.login-overlay .login-marca {
  position: relative;
  background: linear-gradient(135deg, var(--lg-teal-1) 0%, var(--lg-teal-2) 42%, var(--lg-teal-3) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  padding: 56px 60px;
  overflow: hidden;
}
/* halos radiais suaves (glow premium) — profundidade sem virar template */
.login-overlay .login-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(8px);
}
.login-overlay .login-glow-1 {
  width: 460px; height: 460px;
  top: -120px; left: -100px;
  background: radial-gradient(circle, rgba(79,210,192,0.16) 0%, rgba(79,210,192,0) 68%);
}
.login-overlay .login-glow-2 {
  width: 520px; height: 520px;
  bottom: -160px; right: -150px;
  background: radial-gradient(circle, rgba(143,191,200,0.14) 0%, rgba(143,191,200,0) 70%);
}
.login-overlay .login-marca-inner {
  position: relative;   /* acima dos halos */
  z-index: 1;
  width: 100%;
  max-width: 440px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* lockup marca */
.login-overlay .login-lockup { display: flex; align-items: center; gap: 11px; }
.login-overlay .login-lockup-ico { flex: none; filter: drop-shadow(0 3px 10px rgba(0,0,0,0.30)); }
.login-overlay .login-lockup-word {
  position: relative;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #fff;
  padding-right: 10px;
}
.login-overlay .login-lockup-dot {
  position: absolute;
  right: 0; bottom: 5px;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--lg-mint);
  box-shadow: 0 0 10px rgba(159,205,215,0.6);
}

/* eyebrow editorial + fino acento teal em degrade */
.login-overlay .login-eyebrow {
  position: relative;
  display: inline-block;
  margin: 6px 0 -2px;
  padding-bottom: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--lg-mint);
  align-self: flex-start;
}
.login-overlay .login-eyebrow::after {
  content: "";
  position: absolute;
  left: 0; bottom: 4px;
  width: 34px; height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #8fbfc8, rgba(143,191,200,0));
}

.login-overlay .login-marca-titulo {
  margin: 2px 0 0;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.6px;
  color: #fff;
  text-wrap: balance;
  max-width: 18ch;
}
.login-overlay .login-marca-sub {
  margin: 0;
  font-size: 16px;
  line-height: 1.5;
  color: var(--lg-mint);
  max-width: 40ch;
}

/* cards de recurso */
.login-overlay .login-cards {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.login-overlay .login-card-feat {
  position: relative;
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.09);
  overflow: hidden;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
/* sheen sutil no topo do card (acabamento premium) */
.login-overlay .login-card-feat::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 100%);
  pointer-events: none;
}
.login-overlay .login-card-feat:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.08);
  border-color: rgba(159,205,215,0.28);
  box-shadow: 0 12px 28px rgba(0,0,0,0.26);
}
.login-overlay .login-card-tile {
  position: relative;
  flex: none;
  width: 46px; height: 46px;
  border-radius: 12px;
  background: rgba(143,191,200,0.14);
  border: 1px solid rgba(159,205,215,0.18);
  display: grid;
  place-items: center;
}
.login-overlay .login-card-txt { display: flex; flex-direction: column; gap: 2px; }
.login-overlay .login-card-txt strong { font-size: 15px; font-weight: 700; color: #fff; }
.login-overlay .login-card-txt span   { font-size: 13px; color: var(--lg-mint); line-height: 1.35; }

/* ---------------------- COLUNA DIREITA: FORMULARIO ---------------------- */
.login-overlay .login-form-wrap {
  background: radial-gradient(120% 90% at 100% 0%, var(--lg-creme) 0%, var(--lg-creme-2) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  overflow-y: auto;
}
.login-overlay .login-form-inner {
  width: 100%;
  max-width: 380px;
}

/* anti-overflow horizontal: itens de grid/flex tem min-width:auto e NAO encolhem
   abaixo do min-content do conteudo. O input do codigo (letter-spacing grande +
   size=20 default) tem min-content ~418px e estouraria a tela no mobile. Zerar o
   min-width deixa o width:100% mandar e a largura respeitar o viewport. */
.login-overlay .login-marca,
.login-overlay .login-form-wrap,
.login-overlay .login-marca-inner,
.login-overlay .login-form-inner { min-width: 0; }
.login-overlay .login-campo .input,
.login-overlay .input.login-input-otp { max-width: 100%; }

/* faixa de marca reduzida (so aparece no mobile) */
.login-overlay .login-marca-mini {
  display: none;
  margin-bottom: 18px;
}

/* wordmark escura (texto #123, dot teal) — sobrescreve a .wordmark base */
.login-overlay .login-word-dark {
  position: relative;
  display: inline-block;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: #123;
  padding-right: 11px;
  margin-bottom: 24px;
}
.login-overlay .login-word-dark-dot {
  position: absolute;
  right: 0; bottom: 6px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--lg-anel);
}

.login-overlay .login-bemvindo {
  margin: 0 0 8px;
  font-size: 30px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--lg-tinta);
  display: flex;
  align-items: center;
  gap: 8px;
}
/* aceno do emoji (curto, so 2 ciclos) — guardado por reduced-motion */
.login-overlay .login-wave {
  display: inline-block;
  transform-origin: 70% 70%;
  animation: lgAceno 2.4s ease-in-out 0.5s 2;
}
@keyframes lgAceno {
  0%,60%,100% { transform: rotate(0); }
  10%,30%,50% { transform: rotate(14deg); }
  20%,40%     { transform: rotate(-8deg); }
}
.login-overlay .login-form-sub {
  margin: 0 0 24px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--lg-mudo);
}

/* labels do form (sobrescreve o estilo mint/escuro do painel) */
.login-overlay .campo-label {
  display: block;
  margin: 16px 0 7px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #46595d;
}
.login-overlay form > .campo-label:first-of-type { margin-top: 0; }

/* wrapper do input com icone interno */
.login-overlay .login-campo { position: relative; }
.login-overlay .login-campo-ico {
  position: absolute;
  left: 14px; top: 50%;
  transform: translateY(-50%);
  color: #7c9298;      /* icone mudo sobre branco */
  pointer-events: none;
  transition: color 0.15s ease;
}
.login-overlay .login-campo:focus-within .login-campo-ico { color: var(--lg-anel); }

/* INPUTS claros (sobrescreve o .input escuro do painel; especificidade
   0,3,0 vence body.tema-claro .input que e 0,2,0) */
.login-overlay .login-campo .input {
  width: 100%;
  height: 48px;
  padding: 0 14px 0 42px;
  background: #ffffff;
  color: var(--lg-tinta);
  border: 1px solid var(--lg-borda-in);
  border-radius: 10px;
  font-size: 15px;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(16,52,59,0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color-scheme: light;   /* evita autofill/tema escuro herdado */
}
.login-overlay .login-campo .input::placeholder { color: #a9b3b4; }
.login-overlay .login-campo .input:hover { border-color: #c7bdad; }
.login-overlay .login-campo .input:focus {
  outline: none;
  border-color: var(--lg-anel);
  box-shadow: 0 0 0 3px rgba(27,96,110,0.18);
}

/* CODIGO do autenticador: limpo, sem icone, centrado de verdade e simetrico.
   Especificidade 0,2,1 vence body.tema-claro .input (0,2,0). */
.login-overlay .input.login-input-otp {
  width: 100%;
  height: 52px;
  padding: 0 14px;
  background: #ffffff;
  color: var(--lg-tinta);
  border: 1px solid var(--lg-borda-in);
  border-radius: 10px;
  font-family: inherit;
  box-shadow: 0 1px 2px rgba(16,52,59,0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  color-scheme: light;
  /* digitos espacados e centrados: text-indent compensa o letter-spacing
     do ultimo digito, mantendo o bloco otico no centro */
  text-align: center;
  letter-spacing: 10px;
  text-indent: 10px;
  font-weight: 700;
  font-size: 19px;
  font-variant-numeric: tabular-nums;
}
.login-overlay .input.login-input-otp::placeholder { color: #c2cac9; font-weight: 700; }
.login-overlay .input.login-input-otp:hover { border-color: #c7bdad; }
.login-overlay .input.login-input-otp:focus {
  outline: none;
  border-color: var(--lg-anel);
  box-shadow: 0 0 0 3px rgba(27,96,110,0.18);
}

/* texto de apoio sob o OTP */
.login-overlay .login-apoio {
  margin: 8px 2px 0;
  font-size: 12px;
  line-height: 1.4;
  color: #7d8c8f;
}

/* BOTAO entrar: gradiente teal-escuro, alto, com seta via ::after.
   A seta NUNCA e um filho DOM porque o JS troca btn.textContent — ::after
   sobrevive ao swap e some sozinha no estado :disabled ("Entrando..."). */
.login-overlay .login-btn {
  width: 100%;
  height: 52px;
  margin-top: 22px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(180deg, #1c6a78 0%, #124450 100%);
  box-shadow: 0 10px 22px rgba(17,69,80,0.28), inset 0 1px 0 rgba(255,255,255,0.14);
  transition: transform 0.06s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.login-overlay .login-btn::after {
  content: " →";
  display: inline-block;
  white-space: pre;
  font-weight: 700;
  transition: transform 0.18s ease;
}
.login-overlay .login-btn:hover:not(:disabled) {
  filter: brightness(1.08);
  box-shadow: 0 14px 30px rgba(17,69,80,0.34), inset 0 1px 0 rgba(255,255,255,0.18);
}
.login-overlay .login-btn:hover:not(:disabled)::after { transform: translateX(3px); }
.login-overlay .login-btn:active:not(:disabled) { transform: translateY(1px); }
.login-overlay .login-btn:disabled {
  opacity: 0.7;
  cursor: default;
  box-shadow: none;
}
.login-overlay .login-btn:disabled::after { content: ""; }
.login-overlay .login-btn:focus-visible {
  outline: 3px solid rgba(27,96,110,0.35);
  outline-offset: 2px;
}

/* linha de erro (sobre creme) */
.login-overlay .login-erro {
  margin-top: 14px;
  padding: 10px 12px;
  border-radius: 9px;
  background: rgba(224,133,133,0.12);
  border: 1px solid rgba(224,133,133,0.4);
  color: #b4453f;
  font-size: 13px;
  text-align: center;
}

/* link cadastrar autenticador */
.login-overlay .login-alt { text-align: center; margin-top: 16px; }
.login-overlay .login-link {
  background: none; border: none;
  color: var(--lg-mudo);
  font-size: 13px; font-family: inherit;
  cursor: pointer; text-decoration: none;
  padding: 4px 2px;
}
.login-overlay .login-link:hover { color: var(--lg-anel); text-decoration: underline; }
.login-overlay .login-link:focus-visible { outline: 2px solid var(--lg-anel); outline-offset: 3px; border-radius: 3px; }

/* entrada suave dos dois lados */
@keyframes lgFadeUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes lgFadeIn { from { opacity: 0; } to { opacity: 1; } }
.login-overlay .login-marca-inner { animation: lgFadeIn 0.5s ease both; }
.login-overlay .login-form-inner  { animation: lgFadeUp 0.45s ease both; }
.login-overlay .login-card-feat   { animation: lgFadeUp 0.5s ease both; }
.login-overlay .login-card-feat:nth-child(1) { animation-delay: 0.06s; }
.login-overlay .login-card-feat:nth-child(2) { animation-delay: 0.12s; }
.login-overlay .login-card-feat:nth-child(3) { animation-delay: 0.18s; }

/* ---------------------- RESPONSIVO ---------------------- */
/* abaixo de 860px: esconde a coluna de marca, form ocupa a tela toda */
@media (max-width: 860px) {
  .login-overlay:not([hidden]) { grid-template-columns: 1fr; }
  .login-overlay .login-marca { display: none; }
  .login-overlay .login-form-wrap { padding: 28px 22px; }
  .login-overlay .login-marca-mini { display: block; }   /* mostra o lockup mini no topo */
  .login-overlay .login-bemvindo { font-size: 27px; }
}
@media (max-width: 400px) {
  .login-overlay .login-bemvindo { font-size: 25px; }
}

/* respeita quem prefere menos movimento */
@media (prefers-reduced-motion: reduce) {
  .login-overlay .login-marca-inner,
  .login-overlay .login-form-inner,
  .login-overlay .login-card-feat,
  .login-overlay .login-wave { animation: none !important; }
  .login-overlay .login-card-feat,
  .login-overlay .login-btn,
  .login-overlay .login-btn::after,
  .login-overlay .login-campo-ico { transition: none !important; }
}

/* ---------------------- BLINDAGEM DE TEMA ----------------------
   Garante o mesmo visual mesmo com body.tema-claro: o overlay define
   suas proprias cores. body.tema-claro .login-overlay (0,2,0) vence o
   fundo do painel definido no style.css base. */
body.tema-claro .login-overlay,
.login-overlay { background: var(--lg-creme); }
body.tema-claro .login-overlay .login-campo .input,
body.tema-claro .login-overlay .input.login-input-otp { color-scheme: light; }

/* ====================== APP / LAYOUT ====================== */
.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Cabecalho */
.cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 26px;
  background: linear-gradient(180deg, #062b35 0%, var(--fundo) 100%);
  border-bottom: 1px solid var(--painel-borda);
}
.cabecalho-marca {
  display: flex;
  align-items: center;
  gap: 18px;
}
.cabecalho-titulos {
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--painel-borda);
  padding-left: 18px;
}
.cabecalho-titulo {
  font-size: 15px;
  font-weight: 600;
  color: var(--texto);
}
.cabecalho-sub {
  font-size: 12px;
  color: var(--dim);
}
.cabecalho-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dep-aviso {
  font-size: 12px;
  color: var(--amarelo-log);
  background: rgba(232, 201, 90, 0.1);
  border: 1px solid rgba(232, 201, 90, 0.3);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  max-width: 420px;
}

/* Abas em formato de "pilula" (estilo do toggle do Dashboard de Meta) */
.abas {
  display: flex;
  gap: 5px;
  padding: 6px;
  margin: 0;
  width: fit-content;
  max-width: 100%;
  background: rgba(7, 49, 58, 0.08);
  border: 1px solid var(--painel-borda);
  border-radius: 999px;
  overflow-x: auto;
}
.aba {
  background: transparent;
  border: none;
  border-radius: 999px;
  color: var(--dim);
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.aba:hover { color: var(--texto); }
.aba.ativa {
  color: #ffffff;
  background: linear-gradient(180deg, #247780 0%, var(--teal) 100%);
  box-shadow: 0 2px 12px rgba(30, 140, 153, 0.45);
}

/* Conteudo */
.conteudo {
  flex: 1;
  padding: 24px 26px 40px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}
.painel-aba { display: none; }
.painel-aba.ativa { display: block; animation: fade 0.18s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.painel-cabecalho {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 16px;
  flex-wrap: wrap;
}
.painel-titulo {
  font-size: 22px;
  font-weight: 600;
  margin: 0;
}
.explicacao, .dica {
  color: var(--dim);
  font-size: 13px;
  margin: 0 0 18px;
}
.dica { margin-top: -8px; }
.painel-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* ====================== CARDS / KPIs ====================== */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
/* Dashboard: 5 KPIs (Entradas, Saidas, Saldo, Pendentes, Pago). As media
   queries de .cards (abaixo) reduzem para 2/1 coluna no mobile por ordem. */
.cards-dash { grid-template-columns: repeat(5, 1fr); }
.card {
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: relative;
  overflow: hidden;
}
/* faixa de cor a esquerda para identificar o KPI */
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--painel-borda);
}
.card-entrada::before { background: var(--entrada); }
.card-saida::before   { background: var(--saida); }
.card-saldo::before   { background: var(--saldo); }
.card-rotulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--dim);
}
.card-valor {
  font-size: 28px;
  font-weight: 700;
  color: var(--texto);
  font-variant-numeric: tabular-nums;
}
.card-valor-pequeno { font-size: 18px; }
.card-valor.valor-entrada { color: var(--entrada); }
.card-valor.valor-saida   { color: var(--saida); }
.card-valor.valor-pos     { color: var(--entrada); }
.card-valor.valor-neg     { color: var(--saida); }
.card-extra {
  font-size: 12px;
  color: #8c8c8c;
  word-break: break-word;
}

/* ====================== BLOCOS / TABELAS ====================== */
.bloco {
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.bloco-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--dim);
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.graficos-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 20px;
}

/* Cabecalho do grafico: titulo + alternador (melhores/piores) na mesma linha */
.grafico-box-cab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.grafico-box-cab .bloco-titulo { margin: 0; }
.grafico-box-cab .segmented { padding: 2px; }
.grafico-box-cab .seg-btn { padding: 5px 12px; font-size: 13px; }

.tabela-wrap {
  overflow-x: auto;
  max-height: 560px;
  overflow-y: auto;
  border-radius: var(--radius-sm);
}
.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}
.tabela thead th {
  position: sticky;
  top: 0;
  background: var(--painel-claro);
  color: var(--dim);
  text-align: left;
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--painel-borda);
  white-space: nowrap;
  z-index: 1;
}
.tabela tbody td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--painel-borda);
  color: var(--texto);
  vertical-align: middle;
}
.tabela tbody tr:hover td { background: rgba(152, 194, 204, 0.05); }
.col-num { text-align: right; }
td.col-num { text-align: right; font-variant-numeric: tabular-nums; }
.col-centro { text-align: center; }
td.valor-entrada { color: var(--entrada); }
td.valor-saida   { color: var(--saida); }
.tabela-vazia {
  text-align: center;
  color: #777;
  padding: 22px 12px;
  font-style: italic;
}
.tabela tfoot td, .linha-total td {
  font-weight: 700;
  color: var(--dim);
  border-top: 2px solid var(--painel-borda);
  background: var(--painel-claro);
}

/* Pilula de tipo de movimento (entrada / saida) */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.pill-entrada { background: rgba(79, 210, 192, 0.16); color: var(--entrada); }
.pill-saida   { background: rgba(224, 133, 133, 0.16); color: var(--saida); }
/* movimento fixo (form Adicionar = so Entrada): alinha o chip na altura do campo */
.mov-fixo { display: flex; align-items: center; min-height: 40px; }
.mov-fixo .pill { padding: 6px 14px; font-size: 13px; }

/* ====================== TOGGLE PAGO / RECEBIDO ====================== */
/* Chip clicavel: cinza = pendente, verde = quitado.
   data-pago controla o estado visual; o JS faz o POST e troca a classe. */
.toggle-pago {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--painel-borda);
  background: var(--campo);
  color: var(--dim);
  border-radius: 999px;
  padding: 5px 12px 5px 9px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.toggle-pago:hover { border-color: var(--dim); }
.toggle-pago:disabled { opacity: 0.5; cursor: progress; }
/* saidas: chip de pago em SOMENTE-LEITURA (estado vem da planilha, aba SAIDA) */
.toggle-pago.toggle-leitura { opacity: 0.9; cursor: default; }
.toggle-pago .ponto {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--neutro);
  flex: none;
  transition: background 0.15s, box-shadow 0.15s;
}
.toggle-pago.is-pago {
  background: rgba(30, 140, 153, 0.16);
  border-color: rgba(30, 140, 153, 0.5);
  color: var(--verde-log);
}
.toggle-pago.is-pago .ponto {
  background: var(--verde-log);
  box-shadow: 0 0 8px rgba(79, 210, 192, 0.55);
}

/* ====================== FORMULARIOS / FILTROS ====================== */
.filtros {
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius);
  padding: 16px 18px;
  margin-bottom: 20px;
}
.form-linha {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 180px;
  flex: 1;
}
.campo-label {
  font-size: 12px;
  color: var(--dim);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.input, .select {
  background: var(--campo);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius-sm);
  color: var(--texto);
  font-size: 15px;
  padding: 10px 12px;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
}
.input::placeholder { color: #6a6a6a; }
.input:focus, .select:focus {
  outline: none;
  border-color: var(--dim);
  box-shadow: 0 0 0 3px rgba(152, 194, 204, 0.12);
}
/* input date nativo no escuro */
.input[type="date"] {
  font-variant-numeric: tabular-nums;
  color-scheme: dark;
}
.input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8);
  cursor: pointer;
}
.select { cursor: pointer; appearance: none; padding-right: 30px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%2398C2CC' stroke-width='1.6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* Segmented control (toggle entrada/saida/todos nos filtros) */
.segmented {
  display: inline-flex;
  background: var(--campo);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius-sm);
  padding: 3px;
  gap: 3px;
  width: fit-content;
}
.seg-btn {
  background: transparent;
  border: none;
  color: var(--dim);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.seg-btn:hover { color: var(--texto); }
.seg-btn.ativa { background: var(--teal); color: var(--texto); }

/* ====================== BOTOES ====================== */
.botoes-linha {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 0;
}
.btn {
  border: none;
  border-radius: var(--radius-sm);
  color: var(--texto);
  font-size: 14px;
  font-weight: 600;
  padding: 11px 20px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s, transform 0.05s, box-shadow 0.15s;
  font-family: inherit;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-bloco { width: 100%; margin-top: 8px; }
.btn-pequeno { padding: 8px 14px; font-size: 13px; }

.btn-teal   { background: var(--teal); }
.btn-teal:hover:not(:disabled)   { background: var(--teal-hover); }
.btn-ok     { background: var(--ok); }
.btn-ok:hover:not(:disabled)     { background: #25a3b0; }
.btn-neutro { background: var(--neutro); }
.btn-neutro:hover:not(:disabled) { background: #2e565d; }

/* Destaque pulsante (ex.: sincronizar em andamento) */
.btn-piscando {
  animation: pisca 1.1s ease-in-out infinite;
  box-shadow: 0 0 0 0 rgba(30, 140, 153, 0.6);
}
@keyframes pisca {
  0%   { box-shadow: 0 0 0 0 rgba(30, 140, 153, 0.6); }
  70%  { box-shadow: 0 0 0 12px rgba(30, 140, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(30, 140, 153, 0); }
}

/* ====================== GRAFICOS SVG ====================== */
.grafico-box {
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius);
  padding: 16px 18px 12px;
}
.grafico-svg { width: 100%; height: auto; display: block; }
/* eixos e grade do grafico de barras */
.g-grid { stroke: rgba(152, 194, 204, 0.13); stroke-width: 1; }
.g-eixo { stroke: var(--painel-borda); stroke-width: 1; }
.g-rotulo { fill: var(--dim); font-size: 11px; font-family: inherit; }
.g-valor { fill: var(--texto); font-size: 11px; font-weight: 600; font-family: inherit; }
.g-barra-entrada { fill: var(--entrada); }
.g-barra-saida   { fill: var(--saida); }
.g-barra-entrada:hover, .g-barra-saida:hover { opacity: 0.82; }
/* fatias do grafico de rosca */
.g-fatia { transition: opacity 0.15s; cursor: default; }
.g-fatia:hover { opacity: 0.85; }
.g-rosca-centro-valor { fill: var(--texto); font-size: 18px; font-weight: 700; font-family: inherit; }
.g-rosca-centro-rotulo { fill: var(--dim); font-size: 10px; font-family: inherit; text-transform: uppercase; }

/* legenda dos graficos */
.legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
  font-size: 12.5px;
  color: var(--dim);
}
.legenda-item { display: inline-flex; align-items: center; gap: 6px; }
.legenda-cor { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.legenda-valor { color: var(--texto); font-variant-numeric: tabular-nums; }
.grafico-vazio {
  color: #777;
  font-style: italic;
  font-size: 13px;
  text-align: center;
  padding: 40px 0;
}

/* ====================== CONSOLE DE LOG (Sincronizar) ====================== */
.console {
  background: var(--log);
  border: 1px solid #15302f;
  border-radius: var(--radius);
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
  line-height: 1.55;
  padding: 14px 16px;
  height: 320px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
  color: #cfe6e6;
}
.console-linha { display: block; }
.log-ok    { color: var(--verde-log); }
.log-erro  { color: var(--vermelho-log); }
.log-aviso { color: var(--amarelo-log); }
.log-info  { color: var(--dim); }
.console::-webkit-scrollbar,
.tabela-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.console::-webkit-scrollbar-thumb,
.tabela-wrap::-webkit-scrollbar-thumb {
  background: #2a4a4a;
  border-radius: 6px;
}
.console::-webkit-scrollbar-track,
.tabela-wrap::-webkit-scrollbar-track { background: transparent; }

/* Aviso fixo (ex.: aba Sincronizar) */
.aviso-info {
  background: rgba(152, 194, 204, 0.08);
  border: 1px solid rgba(152, 194, 204, 0.3);
  color: var(--dim);
  border-radius: var(--radius);
  padding: 14px 16px;
  font-size: 13.5px;
  margin-bottom: 22px;
}
.aviso-info strong { color: var(--texto); }

/* ====================== RODAPE ====================== */
.rodape {
  padding: 14px 26px;
  border-top: 1px solid var(--painel-borda);
  color: #777;
  font-size: 12px;
  background: var(--fundo);
}

/* ====================== TOAST ====================== */
.toast {
  position: fixed;
  bottom: 26px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  color: var(--texto);
  padding: 12px 22px;
  border-radius: var(--radius);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  font-size: 14px;
  z-index: 2000;
  max-width: 80vw;
}
.toast.toast-erro { border-color: var(--erro); color: var(--erro); }
.toast.toast-ok   { border-color: var(--ok); color: var(--verde-log); }

/* contador de resultados na aba Lancamentos */
.contador {
  font-size: 12.5px;
  color: var(--dim);
  font-variant-numeric: tabular-nums;
}

/* ====================== RESPONSIVO ====================== */
@media (max-width: 1024px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .graficos-grid { grid-template-columns: 1fr; }
}
@media (max-width: 880px) {
  .cards { grid-template-columns: 1fr; }
  .cabecalho-titulos { display: none; }
  .form-linha { flex-direction: column; align-items: stretch; }
  .campo { min-width: 0; }
  .conteudo { padding: 18px 14px 30px; }
  .abas { overflow-x: auto; }
}

/* ====================== CORRECAO DE ALINHAMENTO DA TABELA ====================== */
/* '.tabela thead th' forca text-align:left e vencia '.col-num' por especificidade.
   Esta regra (mais especifica) realinha os cabecalhos numericos a direita,
   casando com os valores das celulas (Entradas/Saidas/Saldo/Valor). */
.tabela thead th.col-num { text-align: right; }
.tabela thead th.col-centro { text-align: center; }
/* classificador (ordenacao por coluna) na tabela do drill-down (modal) */
.tabela thead th.th-sort { cursor: pointer; user-select: none; transition: color .15s ease; }
.tabela thead th.th-sort:hover { color: var(--texto); }
.tabela thead th.th-ativo { color: var(--texto); }
.tabela thead th .th-seta { margin-left: 5px; font-size: 9px; }
.tabela thead th .th-seta-dim { opacity: .45; font-weight: 400; }   /* "↕" discreto = ordenavel */

/* ====================== BOTAO DE TEMA + EXTRAS ====================== */
.btn-tema {
  font-size: 15px;
  line-height: 1;
  padding: 8px 11px;
}

/* atalhos de periodo (Hoje / 7 dias / 30 dias / Tudo) */
.atalhos-periodo { display: flex; gap: 6px; flex-wrap: wrap; }
.atalho {
  background: var(--campo);
  border: 1px solid var(--painel-borda);
  color: var(--dim);
  font-size: 12.5px;
  font-weight: 600;
  padding: 7px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  font-family: inherit;
}
.atalho:hover { color: var(--texto); border-color: var(--dim); }
.atalho.ativo { background: var(--teal); color: var(--texto); border-color: var(--teal); }

/* nome de categoria no grafico horizontal (aba Resumo) */
.g-cat-nome { fill: var(--texto); font-weight: 600; font-size: 13px; font-family: inherit; }
.g-barra-entrada, .g-barra-saida { transition: opacity 0.12s; }
.g-barra-entrada:hover, .g-barra-saida:hover { opacity: 0.82; }
.resumo-kpis { margin-bottom: 20px; }
/* O campo que contem um segmented (Movimento) deve ter a largura do conteudo,
   senao o segmented "estoura" e sobrepoe o campo vizinho (Loja). */
.campo:has(> .segmented) { flex: 0 0 auto; min-width: auto; }
.segmented { max-width: 100%; }
/* rotulo de valor (topo das barras verticais ou fim das horizontais) */
.g-valor-bar {
  fill: var(--texto);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  font-family: inherit;
}

/* ====================== MULTI-SELECT (filtros com busca + checkboxes) ====================== */
.ms { position: relative; width: 100%; }
.ms-botao {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--campo);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius-sm);
  color: var(--texto);
  font-size: 15px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ms-botao:hover { border-color: var(--dim); }
.ms.aberto .ms-botao { border-color: var(--dim); box-shadow: 0 0 0 3px rgba(152,194,204,0.12); }
.ms.ms-ativo .ms-botao { border-color: var(--dim); }
.ms-rotulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: left; }
.ms-seta { color: var(--dim); font-size: 11px; flex: none; transition: transform 0.15s; }
.ms.aberto .ms-seta { transform: rotate(180deg); }

.ms-painel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius-sm);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
  padding: 8px;
  max-height: 320px;
  display: flex;
  flex-direction: column;
}
.ms-busca {
  background: var(--campo);
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius-sm);
  color: var(--texto);
  font-size: 14px;
  padding: 8px 10px;
  width: 100%;
  margin-bottom: 6px;
  font-family: inherit;
}
.ms-busca::placeholder { color: #6a6a6a; }
.ms-busca:focus { outline: none; border-color: var(--dim); }
.ms-acoes {
  display: flex; gap: 16px;
  padding: 2px 4px 8px;
  border-bottom: 1px solid var(--painel-borda);
  margin-bottom: 6px;
}
.ms-todos, .ms-limpar {
  background: none; border: none;
  color: var(--dim);
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.5px;
  text-transform: uppercase; cursor: pointer; padding: 0;
  font-family: inherit;
}
.ms-todos:hover, .ms-limpar:hover { color: var(--texto); }
.ms-lista { overflow-y: auto; }
.ms-item {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 6px; border-radius: 5px; cursor: pointer; font-size: 14px;
}
.ms-item:hover { background: rgba(152, 194, 204, 0.08); }
.ms-item input { accent-color: var(--teal); width: 15px; height: 15px; cursor: pointer; flex: none; }
.ms-vazio { color: #777; font-style: italic; font-size: 13px; padding: 10px 6px; }
.ms-lista::-webkit-scrollbar { width: 8px; }
.ms-lista::-webkit-scrollbar-thumb { background: #2a4a4a; border-radius: 6px; }
.ms-lista::-webkit-scrollbar-track { background: transparent; }
.filtros-dash { padding: 14px 18px; }
.campo-acao { flex: 0 0 auto; min-width: auto; }
.botoes-inline { margin: 0; }
.campo-arquivo { flex: 2; }
.input-file { padding: 8px 10px; cursor: pointer; }
.input-file::file-selector-button {
  background: var(--neutro);
  color: var(--texto);
  border: none;
  border-radius: var(--radius-sm);
  padding: 7px 12px;
  margin-right: 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
}
.input-file::file-selector-button:hover { background: #2e565d; }

/* grafico de LINHA (fluxo por dia) */
.grafico-box-largo { margin-top: 20px; }
.grafico-cab { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
/* linhas do grafico de area (stroke-width vem inline p/ permitir o "glow") */
.g-linha-entrada { fill: none; stroke: var(--entrada); stroke-linecap: round; stroke-linejoin: round; }
.g-linha-saida   { fill: none; stroke: var(--saida);   stroke-linecap: round; stroke-linejoin: round; }
.g-area-entrada  { fill: var(--entrada); opacity: 0.07; stroke: none; }
.g-area-saida    { fill: var(--saida);   opacity: 0.06; stroke: none; }
/* stops dos gradientes de area (theme-aware via CSS var) */
.area-ent-top { stop-color: var(--entrada); stop-opacity: 0.42; }
.area-ent-bot { stop-color: var(--entrada); stop-opacity: 0; }
.area-sai-top { stop-color: var(--saida);   stop-opacity: 0.36; }
.area-sai-bot { stop-color: var(--saida);   stop-opacity: 0; }

/* grafico de barras por dia com ROLAGEM horizontal (datas nunca amontoam) */
.grafico-svg-fixo { display: block; height: auto; }
.grafico-scroll { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; }
.grafico-scroll::-webkit-scrollbar { height: 10px; }
.grafico-scroll::-webkit-scrollbar-thumb { background: #2a4a4a; border-radius: 6px; }
.grafico-scroll::-webkit-scrollbar-thumb:hover { background: #356; }
.grafico-scroll::-webkit-scrollbar-track { background: rgba(255,255,255,0.04); border-radius: 6px; }
/* gradiente das barras: vibrante no topo, leve fade na base */
.bar-ent-top { stop-color: var(--entrada); stop-opacity: 1; }
.bar-ent-bot { stop-color: var(--entrada); stop-opacity: 0.65; }
.bar-sai-top { stop-color: var(--saida);   stop-opacity: 1; }
.bar-sai-bot { stop-color: var(--saida);   stop-opacity: 0.65; }

/* ====================== CELULA CLICAVEL + JANELA (MODAL) ====================== */
.celula-link {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: rgba(152, 194, 204, 0.4);
  text-underline-offset: 2px;
  transition: background 0.12s;
}
.celula-link:hover { background: rgba(152, 194, 204, 0.12); }

/* legenda clicavel (isolar categoria no grafico de gastos) */
.legenda-clicavel { cursor: pointer; user-select: none; transition: opacity 0.12s, color 0.12s; }
.legenda-clicavel:hover { color: var(--texto); }
.legenda-off { opacity: 0.36; }
.grafico-acao-baixo { margin-top: 12px; text-align: center; }

/* ====================== FILTROS: TOOLBAR STICKY + DRAWER LATERAL ====================== */
/* Cabecalho do Dashboard "gruda" no topo ao rolar, entao o botao Filtros fica
   sempre acessivel (nao precisa subir). */
/* barra das abas: fixa no topo (as abas "descem junto" ao rolar), abas centralizadas */
.abas-bar {
  position: sticky;
  top: 0;
  z-index: 600;
  background: var(--fundo);
  display: flex;
  justify-content: center;
  align-items: center;
  height: 54px;
  padding: 0 26px;
}
/* barra dos botoes (Filtros/Exportar/Atualizar): fixa logo ABAIXO das abas.
   Fundo CLARO (cor do conteudo) -- os botoes coloridos por cima dao o destaque,
   sem virar um bloco teal pesado (vide OPCAO B no fim do arquivo). */
.painel-cabecalho-sticky {
  position: sticky;
  top: 54px;
  z-index: 500;
  background: var(--fundo);
  justify-content: flex-end;
  padding: 10px 16px;
  margin: 0 0 16px;
  border: 1px solid var(--painel-borda);
  border-radius: var(--radius-sm);
}
/* sem o titulo "Dashboard"/etc. na barra sticky (so os botoes) */
.painel-cabecalho-sticky .painel-titulo { display: none; }
.btn-filtros { display: inline-flex; align-items: center; gap: 7px; }
.btn-filtros-ico { font-size: 14px; line-height: 1; }
.filtros-contador {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 999px; background: var(--teal); color: #06222a;
  font-size: 11px; font-weight: 800; line-height: 1;
}

/* Backdrop que escurece o resto quando o painel abre. */
.filtros-backdrop {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 2500;
  opacity: 0; transition: opacity 0.22s ease;
}
.filtros-backdrop.aberto { opacity: 1; }

/* Painel lateral (off-canvas) que desliza da esquerda. */
.filtros-drawer {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 340px; max-width: 86vw;
  background: var(--painel);
  border-right: 1px solid var(--painel-borda);
  box-shadow: 6px 0 30px rgba(0, 0, 0, 0.45);
  z-index: 2600;
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform 0.26s cubic-bezier(0.4, 0, 0.2, 1);
}
.filtros-drawer.aberto { transform: translateX(0); }
.filtros-drawer-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid var(--painel-borda);
}
.filtros-drawer-titulo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 16px; font-weight: 700; color: var(--texto);
  text-transform: uppercase; letter-spacing: 0.6px;
}
.filtros-drawer-x {
  background: none; border: none; color: var(--dim);
  font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.filtros-drawer-x:hover { color: var(--texto); background: rgba(255,255,255,0.06); }
.filtros-drawer-corpo {
  flex: 1; overflow-y: auto;
  padding: 18px 20px;
  display: flex; flex-direction: column; gap: 16px;
}
.filtros-drawer-corpo .campo { min-width: 0; width: 100%; flex: none; }
.filtros-drawer-corpo .segmented { width: 100%; }
.filtros-drawer-corpo .segmented .seg-btn { flex: 1; }
.filtros-drawer-corpo .atalhos-periodo { display: flex; flex-wrap: wrap; gap: 8px; }
/* dentro do painel o dropdown do multi-select abre menor pra nao estourar */
.filtros-drawer .ms-painel { max-height: 240px; }
.filtros-drawer-rodape {
  display: flex; gap: 10px; justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--painel-borda);
}
.filtros-drawer-rodape .btn { flex: 1; }

.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.62);
  display: flex; align-items: center; justify-content: center;
  z-index: 3000; padding: 24px;
  animation: fade 0.15s ease;
}
.modal-card {
  background: var(--painel);
  border: 1px solid var(--painel-borda);
  border-radius: 14px;
  width: 860px; max-width: 96vw; max-height: 86vh;
  display: flex; flex-direction: column;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
}
.modal-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px; border-bottom: 1px solid var(--painel-borda);
}
.modal-titulo { font-size: 16px; font-weight: 600; margin: 0; color: var(--texto); }
.modal-fechar {
  background: none; border: none; color: var(--dim);
  font-size: 16px; cursor: pointer; line-height: 1;
  padding: 6px 9px; border-radius: 7px; font-family: inherit;
}
.modal-fechar:hover { color: var(--texto); background: rgba(255, 255, 255, 0.07); }
.modal-corpo { padding: 6px 20px 14px; overflow-y: auto; }
.modal-rodape {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; border-top: 1px solid var(--painel-borda);
  color: var(--dim); font-size: 13.5px;
}
#modal-total { font-weight: 700; color: var(--texto); font-variant-numeric: tabular-nums; }
body.tema-claro .modal-fechar:hover { background: rgba(0, 0, 0, 0.06); }
.g-ponto-entrada { fill: var(--entrada); }
.g-ponto-saida   { fill: var(--saida); }
.g-ponto-entrada:hover, .g-ponto-saida:hover { r: 4; }

/* ====================== TEMA CLARO (paleta oficial Talkline) ======================
   Paleta da marca (manual Talkline / Burnier):
     teais:   #0A3C47 #134E5B #1B606E #247780  (analogas #0F4F5A #16707C #1E8C99 #12636C)
     claros:  #98C2CC #B8D6DC #CFE3E7 #E6F0F2
     neutros: #F3F2EF #EFE7DB #E2D9EA #D6CFC0   escuros: #121212 #202020 #303030 #3E3E3E
   entrada(verde) e saida(vermelho) seguem como cores SEMANTICAS de receita/despesa. */
body.tema-claro {
  --fundo:        #E6F0F2;   /* azul-claro da marca (fundo da pagina) */
  --painel:       #ffffff;   /* cards/paineis brancos */
  --log:          #E6F0F2;
  --texto:        #202020;   /* escuro da marca */
  --dim:          #4d717a;   /* teal-acinzentado (rotulos/secundario) */
  --teal:         #1B606E;   /* teal primario da marca */
  --teal-hover:   #247780;   /* teal da marca (hover) */
  --ok:           #1E8C99;   /* analoga ciano (acao confirmar) */
  --neutro:       #B8D6DC;   /* azul-claro da marca (botoes neutros) */

  --painel-borda: #B8D6DC;
  --painel-claro: #CFE3E7;
  --campo:        #ffffff;
  --erro:         #c0392b;
  --verde-log:    #0f9b86;
  --amarelo-log:  #9a7d10;
  --vermelho-log: #c0504d;

  --entrada:      #0f9b86;   /* receita (verde semantico) */
  --saida:        #c0504d;   /* despesa (vermelho semantico) */
  --saldo:        #16707C;   /* teal da marca */

  color-scheme: light;
}
/* superficies que tinham cor fixa no tema escuro */
body.tema-claro .cabecalho { background: linear-gradient(180deg, #e6f2f4 0%, var(--painel) 65%); }
/* (fundo do login agora e definido no proprio bloco .login-overlay) */
body.tema-claro .input,
body.tema-claro .select,
body.tema-claro .segmented,
body.tema-claro .toggle-pago,
body.tema-claro .atalho,
body.tema-claro .ms-botao,
body.tema-claro .ms-busca { background: #ffffff; }
body.tema-claro .atalho.ativo { background: var(--teal); color: #fff; }
body.tema-claro .ms-item:hover { background: rgba(27, 96, 110, 0.08); }
body.tema-claro .input::placeholder { color: #9aa7ab; }
body.tema-claro .toggle-pago .ponto { background: #b9c4c7; }
body.tema-claro .console { color: #234; border-color: #cfe0e0; }
body.tema-claro .tabela tbody td { border-bottom-color: var(--painel-borda); }
body.tema-claro .tabela tbody tr:hover td { background: rgba(27, 96, 110, 0.06); }
body.tema-claro .g-grid { stroke: #dde4e6; }
body.tema-claro .card-extra { color: #6b7a7e; }
body.tema-claro .rodape, body.tema-claro .tabela-vazia { color: #8a9498; }
/* botoes/segmented com fundo colorido precisam de texto claro */
body.tema-claro .btn-teal,
body.tema-claro .btn-ok,
body.tema-claro .seg-btn.ativa { color: #ffffff; }
/* indicador do date picker e seta do select no claro */
body.tema-claro .input[type="date"] { color-scheme: light; }
body.tema-claro .input[type="date"]::-webkit-calendar-picker-indicator { filter: none; }
body.tema-claro .input-file::file-selector-button { color: var(--texto); }

/* ====================== REALCE DE COR (deixar mais bonito) ======================
   Acentos na cor da marca (teal), seguros para os dois temas (rgba/variaveis). */

/* Botao "Filtros": destaque teal em vez do cinza neutro. */
.btn-filtros {
  background: rgba(30, 140, 153, 0.16);
  border: 1px solid rgba(30, 140, 153, 0.55);
  color: var(--dim);
}
.btn-filtros:hover:not(:disabled) {
  background: rgba(30, 140, 153, 0.30);
  border-color: var(--ok);
  color: var(--texto);
}
.btn-filtros-ico { color: var(--verde-log); }
.filtros-contador { box-shadow: 0 0 8px rgba(30, 140, 153, 0.5); }

/* Botoes primarios com leve gradiente + profundidade (tons da marca). */
.btn-teal { background: linear-gradient(180deg, #052124 0%, var(--teal) 100%);
            box-shadow: 0 2px 10px rgba(30, 140, 153, 0.22); }
.btn-teal:hover:not(:disabled) { background: linear-gradient(180deg, #2a8b98 0%, var(--teal-hover) 100%); }
.btn-ok { background: linear-gradient(180deg, #1E8C99 0%, #16707C 100%);
          box-shadow: 0 2px 10px rgba(30, 140, 153, 0.20); }
.btn-ok:hover:not(:disabled) { background: linear-gradient(180deg, #2a9eab 0%, #1b818f 100%); }

/* Cabecalho com leve linha de acento teal. */
.cabecalho { border-bottom-color: rgba(30, 140, 153, 0.4);
             box-shadow: 0 1px 0 0 rgba(30, 140, 153, 0.12); }

/* Cards: brilho sutil, faixa de cor de Pendentes/Pago e leve "lift" no hover. */
.card {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, rgba(255, 255, 255, 0) 58%), var(--painel);
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.card:hover {
  border-color: rgba(30, 140, 153, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28);
}
.card-pendentes::before { background: var(--amarelo-log); }
.card-pago::before { background: var(--ok); }

/* Painel de filtros: acento teal no topo + cabecalho tingido + titulo na cor da marca. */
.filtros-drawer { border-top: 3px solid var(--ok); }
.filtros-drawer-cab { background: linear-gradient(180deg, rgba(30, 140, 153, 0.14) 0%, rgba(30, 140, 153, 0) 100%); }
.filtros-drawer-titulo { color: var(--dim); }

/* ====================== COR DO FILTRO ======================
   Botao Filtros + painel de filtros (drawer) no gradiente pedido. */

/* Botao "Filtros" preenchido no gradiente. */
.btn-filtros {
  background: linear-gradient(180deg, #247780 0%, var(--teal) 100%);
  border: 1px solid #247780;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(30, 140, 153, 0.30);
}
.btn-filtros:hover:not(:disabled) {
  background: linear-gradient(180deg, #2a8b98 0%, var(--teal-hover) 100%);
  border-color: #2a8b98;
  color: #ffffff;
}
.btn-filtros-ico { color: #ffffff; }
.filtros-contador { background: #ffffff; color: #15545e; box-shadow: none; }

/* Painel de filtros nessa cor: borda no topo, cabecalho e titulo + acoes/ativos. */
.filtros-drawer { border-top: 3px solid #247780; }
.filtros-drawer-cab { background: linear-gradient(180deg, rgba(36, 119, 128, 0.18) 0%, rgba(36, 119, 128, 0) 100%); }
.filtros-drawer-titulo { color: #247780; }
#dash-filtrar, #btn-filtrar, #res-aplicar {
  background: linear-gradient(180deg, #247780 0%, var(--teal) 100%);
  box-shadow: 0 2px 10px rgba(30, 140, 153, 0.28);
}
.filtros-drawer .seg-btn.ativa,
.filtros-drawer .atalho.ativo {
  background: linear-gradient(180deg, #247780 0%, var(--teal) 100%);
  border-color: #247780;
  color: #ffffff;
}

/* ============== PALETA DO PAINEL DE FILTROS (teal-escuro, estilo Meta) ==============
   So o drawer fica escuro; o resto do app continua branco. Escopo forte
   (body.tema-claro .filtros-drawer ...) para vencer o tema claro. */
body.tema-claro .filtros-drawer {
  background: #0e3036;
  border-right: 1px solid #20525c;
}
body.tema-claro .filtros-drawer-cab {
  background: linear-gradient(180deg, rgba(36, 119, 128, 0.32) 0%, rgba(36, 119, 128, 0) 100%);
  border-bottom: 1px solid #1f4f58;
}
body.tema-claro .filtros-drawer-titulo { color: #bfe3ea; }
body.tema-claro .filtros-drawer-x { color: #93c4cf; }
body.tema-claro .filtros-drawer-x:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }

/* rotulos com barrinha de acento teal (estilo Meta) */
body.tema-claro .filtros-drawer .campo-label {
  color: #93c4cf; display: flex; align-items: center; gap: 7px;
}
body.tema-claro .filtros-drawer .campo-label::before {
  content: ""; width: 3px; height: 12px; border-radius: 2px;
  background: #247780; flex: none;
}

/* campos: inputs/datas/busca, multiselect e segmented */
body.tema-claro .filtros-drawer .input,
body.tema-claro .filtros-drawer .ms-botao,
body.tema-claro .filtros-drawer .ms-busca,
body.tema-claro .filtros-drawer .segmented {
  background: #0f3a41; border-color: #235c67; color: #eaf4f5;
}
body.tema-claro .filtros-drawer .input::placeholder,
body.tema-claro .filtros-drawer .ms-busca::placeholder { color: #6f9aa4; }
body.tema-claro .filtros-drawer .ms-rotulo { color: #eaf4f5; }
body.tema-claro .filtros-drawer .ms-seta { color: #93c4cf; }
body.tema-claro .filtros-drawer .input[type="date"] { color-scheme: dark; }

/* dropdown do multiselect */
body.tema-claro .filtros-drawer .ms-painel { background: #103840; border-color: #235c67; }
body.tema-claro .filtros-drawer .ms-acoes { border-bottom-color: #1f4f58; }
body.tema-claro .filtros-drawer .ms-todos,
body.tema-claro .filtros-drawer .ms-limpar { color: #93c4cf; }
body.tema-claro .filtros-drawer .ms-todos:hover,
body.tema-claro .filtros-drawer .ms-limpar:hover { color: #fff; }
body.tema-claro .filtros-drawer .ms-item { color: #dbeef0; }
body.tema-claro .filtros-drawer .ms-item:hover { background: rgba(255, 255, 255, 0.06); }

/* segmento (movimento) e atalhos INATIVOS no escuro (ativos seguem o gradiente teal) */
body.tema-claro .filtros-drawer .seg-btn:not(.ativa) { color: #a7cdd6; }
body.tema-claro .filtros-drawer .seg-btn:not(.ativa):hover { color: #fff; }
body.tema-claro .filtros-drawer .atalho:not(.ativo) {
  background: #0f3a41; border-color: #235c67; color: #a7cdd6;
}

/* rodape: divisor + "Limpar" como botao outline teal */
body.tema-claro .filtros-drawer-rodape { border-top-color: #1f4f58; }
body.tema-claro .filtros-drawer-rodape .btn-neutro {
  background: transparent; border: 1px solid #247780; color: #bfe3ea;
}
body.tema-claro .filtros-drawer-rodape .btn-neutro:hover { background: rgba(36, 119, 128, 0.18); }

/* fixes da revisao: visibilidade no painel escuro */
/* checkbox do multiselect: teal mais claro p/ aparecer no fundo escuro (must-fix) */
body.tema-claro .filtros-drawer .ms-item input { accent-color: #34a7b6; }
/* texto de lista vazia ("Nenhum item") legivel e na paleta */
body.tema-claro .filtros-drawer .ms-vazio { color: #7fa6b0; }
/* bordas dos campos um pouco mais visiveis */
body.tema-claro .filtros-drawer .input,
body.tema-claro .filtros-drawer .ms-botao,
body.tema-claro .filtros-drawer .ms-busca,
body.tema-claro .filtros-drawer .segmented,
body.tema-claro .filtros-drawer .atalho:not(.ativo),
body.tema-claro .filtros-drawer .ms-painel { border-color: #2c6b78; }
/* foco/hover dos campos com realce teal claro */
body.tema-claro .filtros-drawer .input:focus,
body.tema-claro .filtros-drawer .ms-busca:focus,
body.tema-claro .filtros-drawer .ms-botao:hover {
  border-color: #34a7b6;
  box-shadow: 0 0 0 3px rgba(52, 167, 182, 0.16);
}

/* ============== CABECALHO na cor do filtro (gradiente teal) ==============
   Header fica teal igual ao filtro; textos e botao "Sair" em claro p/ contraste. */
body.tema-claro .cabecalho {
  background: linear-gradient(180deg, #042124 0%, #084450 100%);
  border-bottom: 1px solid #041416;
}
body.tema-claro .cabecalho .wordmark-text { color: #ffffff; }
body.tema-claro .cabecalho .wordmark-dot {
  background: #ffffff; box-shadow: 0 0 10px rgba(255, 255, 255, 0.55);
}
body.tema-claro .cabecalho-titulos { border-left-color: rgba(255, 255, 255, 0.28); }
body.tema-claro .cabecalho-titulo { color: #ffffff; }
body.tema-claro .cabecalho-sub { color: rgba(235, 248, 250, 0.82); }
body.tema-claro .cabecalho .btn-neutro {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.38);
  color: #ffffff;
}
body.tema-claro .cabecalho .btn-neutro:hover { background: rgba(255, 255, 255, 0.28); }

/* ===================== OPCAO B: ABAS NO CABECALHO + BARRA CLARA =====================
   As abas ganham fundo teal e "grudam" no cabecalho (viram parte dele), formando um
   unico bloco teal no topo. A barra de botoes (Filtros/Exportar/Atualizar) fica CLARA
   (cor do conteudo) com os botoes coloridos por cima -- deixa de ser um bloco pesado.
   Obs.: o fundo claro da barra ja vem da regra base (.painel-cabecalho-sticky =
   var(--fundo)); aqui so cuidamos do bloco teal cabecalho+abas. */

/* cabecalho + abas = um unico bloco teal continuo (sem linha entre eles) */
body.tema-claro .cabecalho { border-bottom: none; box-shadow: none; }
body.tema-claro .abas-bar {
  background: #084450;                           /* mesma cor do rodape do cabecalho (gradiente termina em #084450) */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);   /* sombra inferior = "borda" do bloco teal */
}
/* trilho das pilulas translucido + rotulos claros sobre o teal */
body.tema-claro .abas {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}
body.tema-claro .aba { color: rgba(255, 255, 255, 0.82); }
body.tema-claro .aba:hover { color: #ffffff; }
/* aba ativa = pilula BRANCA com texto teal (alto contraste sobre o teal) */
body.tema-claro .aba.ativa {
  background: #ffffff;
  color: var(--teal);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
}

/* ====== BARRA DE BOTOES: "Filtros" + "Exportar Excel" no CIANO da marca ======
   Filtros e Exportar Excel usam a analoga ciano da marca (#1E8C99 -> #16707C),
   distinta do teal do "Atualizar" (btn-teal) -- mantem a diferenciacao pedida,
   agora 100% dentro da paleta. Escopo restrito a barra sticky para nao afetar o
   .btn-ok de outras telas (botao "Adicionar lancamento", link "Abrir planilha"). */
.painel-cabecalho-sticky .btn-filtros,
.painel-cabecalho-sticky .btn-ok {
  background: linear-gradient(180deg, #020d0e 0%, #16707C 100%);
  border: 1px solid #16707C;
  color: #ffffff;
  box-shadow: 0 2px 10px rgba(30, 140, 153, 0.28);
}
.painel-cabecalho-sticky .btn-filtros:hover:not(:disabled),
.painel-cabecalho-sticky .btn-ok:hover:not(:disabled) {
  background: linear-gradient(180deg, #2a9eab 0%, #1b818f 100%);
  border-color: #1b818f;
  color: #ffffff;
}
.painel-cabecalho-sticky .btn-filtros-ico { color: #ffffff; }
/* "Atualizar" (btn-teal) tambem como controle elevado na barra escura: borda teal */
.painel-cabecalho-sticky .btn-teal { border: 1px solid #1B606E; }
/* badge contador do Filtros: fundo branco com numero ciano da marca */
.painel-cabecalho-sticky .filtros-contador {
  background: #ffffff;
  color: #16707C;
  box-shadow: none;
}

/* ============ FUNDO DA BARRA DE BOTOES: AZUL-CLARO da marca ============
   A barra (Filtros/Exportar/Atualizar) ganha um fundo azul-claro da paleta
   (#CFE3E7 -> #B8D6DC) com borda e sombra: "emoldura" os botoes e se destaca do
   fundo da pagina (#E6F0F2), agora 100% dentro da paleta da marca. */
body.tema-claro .painel-cabecalho-sticky {
  background: linear-gradient(180deg, #0a3c47 0%, #08303a 100%);  /* teal escuro da marca: fecha o masthead com cabecalho+abas */
  border: 1px solid rgba(152, 194, 204, 0.16);                    /* hairline claro discreto p/ definir a borda no escuro */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);                     /* sombra mais funda: "levanta" a barra escura do fundo claro */
}
/* contador (texto) da aba Lancamentos legivel sobre o teal escuro */
body.tema-claro .painel-cabecalho-sticky .contador { color: rgba(230, 244, 247, 0.82); }

/* ============ CONTADOR DE RESULTADOS: vai pra ESQUERDA da barra ============
   "X resultado(s)" deixa de ficar espremido ENTRE os botoes (Filtros/Exportar) e
   vai pra esquerda da barra, separado, num chip discreto. */
.painel-cabecalho-sticky .painel-acoes { flex: 1 1 auto; justify-content: flex-end; }
.painel-cabecalho-sticky .contador {
  order: -1;                 /* primeiro elemento da linha */
  margin-right: auto;        /* empurra os botoes para a direita */
  align-self: center;
  font-weight: 600;
}

/* ============ CARDS REPAGINADOS: icone em quadrado teal (estilo painel GERAL) ============
   Cada KPI do dashboard ganha um icone num quadrado arredondado na linha do rotulo
   (icone + rotulo), o valor cheio embaixo (sem quebrar), sombra suave. Cores do
   icone seguem a semantica do card. */
.card { box-shadow: 0 2px 10px rgba(20, 60, 71, 0.06); }
.card-cab { display: flex; align-items: center; gap: 10px; }
.card-ico {
  width: 38px; height: 38px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(180deg, #247780 0%, #1B606E 100%);
  color: #ffffff;
  box-shadow: 0 3px 8px rgba(27, 96, 110, 0.30);
  flex: none;
}
.card-ico svg { width: 20px; height: 20px; display: block; }
/* valor do KPI nunca quebra em 2 linhas (ex.: saldo negativo, valores longos):
   fica sempre numa linha so, alinhado igual aos outros cards. */
.cards-dash .card-valor,
.resumo-kpis .card-valor {
  white-space: nowrap;
  font-size: 25px;
}
/* icone na cor de cada KPI (combina com a faixa lateral) */
.card-entrada   .card-ico { background: linear-gradient(180deg, #2bb39e 0%, #0f9b86 100%); box-shadow: 0 3px 8px rgba(15, 155, 134, 0.30); }
.card-saida     .card-ico { background: linear-gradient(180deg, #d77272 0%, #c0504d 100%); box-shadow: 0 3px 8px rgba(192, 80, 77, 0.30); }
.card-pendentes .card-ico { background: linear-gradient(180deg, #d8b94a 0%, #b89a2a 100%); box-shadow: 0 3px 8px rgba(154, 125, 16, 0.28); }
.card-pago      .card-ico { background: linear-gradient(180deg, #2aa0ad 0%, #1E8C99 100%); box-shadow: 0 3px 8px rgba(30, 140, 153, 0.30); }

/* ============ BARRAS HORIZONTAIS: "Lojas com melhor saldo" ============ */
.g-barra-saldo-pos { fill: #1E8C99; transition: opacity 0.12s; }
.g-barra-saldo-neg { fill: #c0504d; transition: opacity 0.12s; }
.g-barra-saldo-pos:hover, .g-barra-saldo-neg:hover { opacity: 0.82; }

/* =========================================================================
   DASHBOARD PREMIUM (tema escuro neon) — desenho do Natsu, escopado em .prem-*
   Colado de _premium_ref.css. Nao colide com o tema teal/claro do resto do app.
   ========================================================================= */

.prem {
  /* TEMA CLARO (white mode) — combina com as demais abas (Lancamentos etc.) */
  --p-bg1:      #eef2f7;
  --p-bg2:      #f7f9fc;
  --p-surf:     #ffffff;
  --p-surf2:    #f7f9fc;
  --p-line:     rgba(15,23,42,.10);
  --p-line-str: rgba(15,23,42,.16);
  --p-ink:      #0f1b2d;
  --p-ink-2:    #334155;
  --p-dim:      #64748b;
  --p-rot:      #647488;        /* rotulos uppercase cinza */

  /* acentos em tom medio: vivos como preenchimento E legiveis como texto no branco */
  --p-green:    #16a34a;
  --p-red:      #dc2626;
  --p-blue:     #2563eb;
  --p-purple:   #9333ea;
  --p-amber:    #d97706;
  --p-violet:   #7c3aed;

  --p-radius:   14px;
  --p-radius-sm:10px;
  --p-gap:      16px;
  --p-shadow:   0 1px 3px rgba(15,23,42,.08), 0 10px 26px rgba(15,23,42,.06);

  color: var(--p-ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(37,99,235,.05), transparent 60%),
    radial-gradient(900px 500px at 0% 0%, rgba(147,51,234,.045), transparent 55%),
    linear-gradient(165deg, var(--p-bg1), var(--p-bg2));
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  padding: clamp(16px, 2.4vw, 28px);
  display: flex;
  flex-direction: column;
  gap: var(--p-gap);
  border-radius: var(--p-radius);
}

.prem *,
.prem *::before,
.prem *::after { box-sizing: border-box; }

/* utilitarios de cor semantica (escopados) */
.prem .pos { color: var(--p-green); }
.prem .neg { color: var(--p-red); }

/* pontos de legenda */
.prem .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 5px; vertical-align: -1px; flex: 0 0 auto;
}
.prem .dot-g { background: var(--p-green);  box-shadow: 0 0 8px rgba(34,197,94,.6); }
.prem .dot-r { background: var(--p-red);    box-shadow: 0 0 8px rgba(239,68,68,.6); }
.prem .dot-b { background: var(--p-blue);   box-shadow: 0 0 8px rgba(59,130,246,.6); }
.prem .dot-p { background: var(--p-purple); box-shadow: 0 0 8px rgba(168,85,247,.6); }
.prem .dot-a { background: var(--p-amber);  box-shadow: 0 0 8px rgba(245,158,11,.6); }
.prem .dot-v { background: var(--p-violet); box-shadow: 0 0 8px rgba(139,92,246,.6); }

/* ====================== CARDS KPI ====================== */
.prem-kpis {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--p-gap);
}
.prem-kpi {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column;   /* sparkline ancorada no rodape via margin-top:auto */
  background: linear-gradient(180deg, var(--p-surf), var(--p-surf2));
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: 16px 16px 8px;
  box-shadow: var(--p-shadow);
  transition: transform .18s ease, border-color .18s ease;
  --acc: var(--p-blue);
  --acc-rgb: 59,130,246;
}
.prem-kpi::before {
  content: ""; position: absolute; inset: -40% -20% auto -20%; height: 120px;
  background: radial-gradient(50% 80% at 22% 0%, rgba(var(--acc-rgb), .22), transparent 70%);
  pointer-events: none;
}
.prem-kpi:hover { transform: translateY(-3px); border-color: rgba(var(--acc-rgb), .45); }

.prem-kpi-head { display: flex; align-items: center; justify-content: space-between; position: relative; }
.prem-kpi-ico {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  color: var(--acc);
  background: rgba(var(--acc-rgb), .14);
  box-shadow: 0 0 18px rgba(var(--acc-rgb), .35), inset 0 0 0 1px rgba(var(--acc-rgb), .25);
}
.prem-kpi-trend {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11.5px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.prem-kpi-trend.up   { color: var(--p-green); background: rgba(34,197,94,.13); }
.prem-kpi-trend.down { color: var(--p-red);   background: rgba(239,68,68,.13); }

.prem-kpi-rot {
  margin: 14px 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--p-rot);
}
.prem-kpi-val {
  margin: 0; font-size: clamp(14px, 1.35vw, 19px); font-weight: 800; line-height: 1.15;
  font-variant-numeric: tabular-nums; color: var(--p-ink);
  white-space: nowrap; letter-spacing: -0.015em;   /* nao quebra em 2 linhas */
  overflow: hidden; text-overflow: clip;
}
.prem-kpi-sub { margin: 3px 0 0; font-size: 11px; color: var(--p-dim); }
.prem-kpi-sub b { color: var(--p-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
/* card Receita: legenda da projecao + linha do realizado + periodo */
.prem-kpi-cap  { margin: 3px 0 0; font-size: 10px; color: var(--p-dim); opacity: .8;
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prem-kpi-real { margin: 8px 0 0; font-size: 12px; color: var(--p-dim);
                 white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prem-kpi-real b { color: var(--p-ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.prem-kpi-per  { margin: 1px 0 0; font-size: 10.5px; color: var(--p-dim); font-variant-numeric: tabular-nums; }
/* chip neutro (ex.: "% realizado da projecao") na cor do proprio card */
.prem-kpi-trend.neutro { color: var(--acc); background: rgba(var(--acc-rgb), .13); }
.prem-spark { display: block; width: 100%; height: 30px; margin-top: auto; padding-top: 10px; color: var(--acc); }
.prem-spark { filter: drop-shadow(0 0 5px rgba(var(--acc-rgb), .55)); }

/* variantes de cor dos KPIs */
.prem-kpi.kpi-green  { --acc: var(--p-green);  --acc-rgb: 34,197,94; }
.prem-kpi.kpi-red    { --acc: var(--p-red);    --acc-rgb: 239,68,68; }
.prem-kpi.kpi-blue   { --acc: var(--p-blue);   --acc-rgb: 59,130,246; }
.prem-kpi.kpi-purple { --acc: var(--p-purple); --acc-rgb: 168,85,247; }
.prem-kpi.kpi-amber  { --acc: var(--p-amber);  --acc-rgb: 245,158,11; }
.prem-kpi.kpi-violet { --acc: var(--p-violet); --acc-rgb: 139,92,246; }

/* ====================== CARD GENERICO ====================== */
.prem-card {
  background: linear-gradient(180deg, var(--p-surf), var(--p-surf2));
  border: 1px solid var(--p-line);
  border-radius: var(--p-radius);
  padding: 16px;
  box-shadow: var(--p-shadow);
}
.prem-card-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 14px;
}
.prem-card-head h2 {
  margin: 0; font-size: 13.5px; font-weight: 700; letter-spacing: .01em; color: var(--p-ink);
}
.prem-legend { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--p-dim); flex-wrap: wrap; }
.prem-mini-select {
  appearance: none; background: var(--p-surf2); border: 1px solid var(--p-line);
  color: var(--p-ink-2); font: inherit; font-size: 11.5px; border-radius: 8px;
  padding: 4px 10px; cursor: pointer; outline: none;
}
.prem-mini-select option { background: var(--p-surf); }

/* ====================== GRID DE GRAFICOS ====================== */
.prem-grid3 {
  display: grid; gap: var(--p-gap);
  grid-template-columns: 1.15fr 1.15fr .9fr;
}
.prem-chart { width: 100%; }
.prem-chart svg { display: block; width: 100%; height: auto; }

/* donut */
.prem-donut-wrap { display: flex; align-items: center; gap: 18px; }
.prem-donut-wrap svg { flex: 0 0 auto; filter: drop-shadow(0 2px 6px rgba(15,23,42,.12)); }
.prem-donut-leg { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; flex: 1; min-width: 0; }
.prem-donut-leg li { display: flex; align-items: center; font-size: 12.5px; color: var(--p-ink-2); }
.prem-donut-leg li b { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--p-ink); }

/* ====================== CORPO (main + side) ====================== */
.prem-body {
  display: grid; gap: var(--p-gap);
  grid-template-columns: minmax(0, 1fr) 320px;
  align-items: start;
}
.prem-grid4 { display: grid; gap: var(--p-gap); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.prem-side { display: flex; flex-direction: column; gap: var(--p-gap); }

/* barras horizontais */
.prem-hbars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
/* layout em 2 linhas: NOME (largura toda) + valor em cima, barra full embaixo.
   Assim o nome inteiro da loja aparece (nao trunca em 64px). */
.prem-hbars li {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: 10px; row-gap: 4px; font-size: 12px;
}
.prem-hbars .hb-rot {
  grid-column: 1; grid-row: 1; color: var(--p-ink-2); font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prem-hbars .hb-val {
  grid-column: 2; grid-row: 1; text-align: right; white-space: nowrap;
  font-variant-numeric: tabular-nums; color: var(--p-ink); font-weight: 700;
}
.prem-hbars .hb-track {
  grid-column: 1 / -1; grid-row: 2; height: 8px; border-radius: 999px;
  background: rgba(15,23,42,.07); overflow: hidden;
}
.prem-hbars .hb-fill { display: block; height: 100%; border-radius: 999px; min-width: 4px; transition: width .5s ease; }
.prem-hbars .hb-val.neg { color: var(--p-red); }
.prem .bar-blue   { background: linear-gradient(90deg, #60a5fa, #2563eb); }
.prem .bar-green  { background: linear-gradient(90deg, #4ade80, #16a34a); }
.prem .bar-red    { background: linear-gradient(90deg, #f87171, #dc2626); }
.prem .bar-purple { background: linear-gradient(90deg, #c084fc, #9333ea); }

/* lista top despesas */
.prem-toplist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.prem-toplist li {
  display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px;
  padding: 10px 0; border-bottom: 1px solid var(--p-line); font-size: 12.5px;
}
.prem-toplist li:last-child { border-bottom: 0; }
.prem-toplist .tl-nome { color: var(--p-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prem-toplist .tl-val { font-variant-numeric: tabular-nums; font-weight: 700; }
.prem-toplist .tl-pct { font-size: 11px; color: var(--p-dim); min-width: 34px; text-align: right; }

/* ====================== RANKING ====================== */
.prem-ranking { list-style: none; margin: 0; padding: 0; counter-reset: rk; }
.prem-ranking li {
  display: grid; grid-template-columns: 26px 1fr auto auto; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid var(--p-line); font-size: 12.5px;
}
.prem-ranking li:last-child { border-bottom: 0; }
.prem-ranking .rk-pos {
  width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center;
  font-size: 12px; font-weight: 800; color: var(--p-dim);
  background: rgba(15,23,42,.06);
}
.prem-ranking .rk-pos.rk-1 { color: #1a1206; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 0 12px rgba(245,158,11,.5); }
.prem-ranking .rk-pos.rk-2 { color: #0b1220; background: linear-gradient(135deg, #e5edf7, #aab8cc); }
.prem-ranking .rk-pos.rk-3 { color: #190d05; background: linear-gradient(135deg, #e6b07a, #b9772f); }
.prem-ranking .rk-nome { color: var(--p-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.prem-ranking .rk-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--p-ink); }
.prem-ranking .rk-val.neg { color: var(--p-red); }
.prem-ranking .rk-badge { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; }
.prem-ranking .rk-badge.up   { color: var(--p-green); background: rgba(34,197,94,.13); }
.prem-ranking .rk-badge.down { color: var(--p-red);   background: rgba(239,68,68,.13); }

/* ====================== ALERTAS ====================== */
.prem-alerts { display: flex; flex-direction: column; gap: 10px; }
.prem-alert {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 12px; border-radius: var(--p-radius-sm);
  background: var(--p-surf2); border: 1px solid var(--p-line);
  border-left-width: 3px;
}
.prem-alert .al-ico { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto; }
.prem-alert .al-txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.prem-alert .al-txt strong { font-size: 12.5px; font-weight: 700; color: var(--p-ink); }
.prem-alert .al-txt span { font-size: 11.5px; color: var(--p-dim); }
.prem-alert.al-red    { border-left-color: var(--p-red); }
.prem-alert.al-red    .al-ico { color: var(--p-red);   background: rgba(239,68,68,.14); }
.prem-alert.al-amber  { border-left-color: var(--p-amber); }
.prem-alert.al-amber  .al-ico { color: var(--p-amber); background: rgba(245,158,11,.14); }
.prem-alert.al-green  { border-left-color: var(--p-green); }
.prem-alert.al-green  .al-ico { color: var(--p-green); background: rgba(34,197,94,.14); }
.prem-alert.al-blue   { border-left-color: var(--p-blue); }
.prem-alert.al-blue   .al-ico { color: var(--p-blue);  background: rgba(59,130,246,.14); }

/* ====================== RESUMO FINANCEIRO ====================== */
.prem-resumo { margin: 0; display: flex; flex-direction: column; }
.prem-resumo > div {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 0; border-bottom: 1px solid var(--p-line);
}
.prem-resumo > div:last-child { border-bottom: 0; }
.prem-resumo dt { display: flex; align-items: center; font-size: 12.5px; color: var(--p-dim); margin: 0; }
.prem-resumo dd { margin: 0; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--p-ink); }
.prem-resumo dd.pos { color: var(--p-green); }
.prem-resumo dd.neg { color: var(--p-red); }
.prem-resumo .rs-total { margin-top: 2px; padding-top: 11px; border-top: 1px solid var(--p-line-str); }
.prem-resumo .rs-total dd { font-size: 15px; color: var(--p-violet); }

/* ====================== TABELA ====================== */
.prem-table-card { padding-bottom: 8px; }
.prem-table-wrap { overflow-x: auto; }
.prem-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 560px; }
.prem-table thead th {
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--p-rot);
  padding: 0 14px 10px; border-bottom: 1px solid var(--p-line-str);
}
.prem-table th.num, .prem-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.prem-table td.prem-proj { color: var(--p-dim); font-weight: 600; }   /* coluna Projecao (referencia) */
.prem-table tbody td { padding: 12px 14px; border-bottom: 1px solid var(--p-line); color: var(--p-ink-2); }
.prem-table tbody tr:last-child td { border-bottom: 0; }
.prem-table tbody tr { transition: background .15s ease; }
.prem-table tbody tr:hover { background: rgba(15,23,42,.03); }
.prem-table td:first-child { color: var(--p-ink); font-weight: 600; }
.prem-table td.pos { color: var(--p-green); }
.prem-table td.neg { color: var(--p-red); }
/* classificador (cabecalho clicavel) — igual ao dash status pedidos */
.prem-table thead th.th-sort { cursor: pointer; user-select: none; transition: color .15s ease; }
.prem-table thead th.th-sort:hover { color: var(--p-ink); }
.prem-table thead th.th-ativo { color: var(--p-ink); }
.prem-table thead th .th-seta { margin-left: 5px; font-size: 9px; }
.prem-table thead th .th-seta-dim { opacity: .4; font-weight: 400; }   /* "↕" discreto = ordenavel */
/* celulas Receita/Despesas clicaveis (drill-down: entradas/saidas da loja) */
.prem-table td.prem-link { cursor: pointer; }
.prem-table td.prem-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.prem-pill {
  display: inline-block; min-width: 56px; text-align: center; padding: 3px 9px;
  border-radius: 999px; font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}
.prem-pill.pill-ok  { color: var(--p-green); background: rgba(34,197,94,.15); }
.prem-pill.pill-mid { color: var(--p-amber); background: rgba(245,158,11,.16); }
.prem-pill.pill-bad { color: var(--p-red);   background: rgba(239,68,68,.16); }

/* ====================== INSIGHTS (rodape) ====================== */
.prem-insights { display: grid; gap: var(--p-gap); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.prem-insight {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 13px;
  padding: 16px; border-radius: var(--p-radius);
  border: 1px solid var(--p-line);
  --acc: var(--p-blue); --acc-rgb: 59,130,246;
  background: linear-gradient(135deg, rgba(var(--acc-rgb), .12), var(--p-surf2));
  box-shadow: var(--p-shadow);
}
.prem-insight::after {
  content: ""; position: absolute; right: -30px; top: -30px; width: 110px; height: 110px;
  border-radius: 50%; background: radial-gradient(circle, rgba(var(--acc-rgb), .18), transparent 70%);
  pointer-events: none;
}
.prem-insight .in-ico {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex: 0 0 auto;
  color: var(--acc); background: rgba(var(--acc-rgb), .16);
  box-shadow: 0 0 16px rgba(var(--acc-rgb), .35), inset 0 0 0 1px rgba(var(--acc-rgb), .25);
}
.prem-insight .in-txt { min-width: 0; }
.prem-insight .in-rot { margin: 0; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--p-rot); }
.prem-insight .in-val { margin: 2px 0; font-size: 18px; font-weight: 800; color: var(--p-ink); font-variant-numeric: tabular-nums; }
.prem-insight .in-sub { margin: 0; font-size: 11px; color: var(--p-dim); }
.prem-insight.in-green  { --acc: var(--p-green);  --acc-rgb: 34,197,94; }
.prem-insight.in-blue   { --acc: var(--p-blue);   --acc-rgb: 59,130,246; }
.prem-insight.in-amber  { --acc: var(--p-amber);  --acc-rgb: 245,158,11; }
.prem-insight.in-red    { --acc: var(--p-red);    --acc-rgb: 239,68,68; }

/* celula clicavel (drill-down) dentro do premium */
.prem .prem-link { cursor: pointer; }
.prem-table .prem-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.prem-hbars li.prem-link:hover .hb-rot,
.prem-toplist li.prem-link:hover .tl-nome { color: var(--p-ink); }

/* ====================== RESPONSIVO ====================== */
@media (max-width: 1180px) {
  .prem-kpis    { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .prem-grid3   { grid-template-columns: 1fr 1fr; }
  .prem-grid3 > .prem-card:nth-child(3) { grid-column: 1 / -1; }
  .prem-body    { grid-template-columns: 1fr; }
  .prem-side    { display: grid; grid-template-columns: repeat(3, 1fr); }
  .prem-insights{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 820px) {
  .prem-grid3   { grid-template-columns: 1fr; }
  .prem-grid4   { grid-template-columns: 1fr; }
  .prem-side    { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .prem-kpis    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prem-insights{ grid-template-columns: 1fr; }
}

/* ===== AJUSTES PARA CELULAR ===== */
@media (max-width: 600px) {
  /* shell mais compacto */
  .cabecalho { padding: 12px 14px; }
  .conteudo  { padding: 14px 11px 28px; }
  .painel-cabecalho-sticky { padding-left: 12px; padding-right: 12px; }
  /* dashboard premium mais justo (evita estouro lateral em telas estreitas) */
  .prem { padding: 12px; gap: 13px; }
  .prem-kpi-val { font-size: clamp(13px, 4.3vw, 16px); }   /* cabe nas 2 colunas estreitas, 1 linha */
  .prem-kpi-rot { font-size: 9.5px; }
  .prem-kpi-cap, .prem-kpi-per { font-size: 9px; }
  .prem-kpi-real { font-size: 10.5px; margin-top: 6px; }
  .prem-kpi-real b { letter-spacing: -0.02em; }
  .prem-kpi-trend { font-size: 10px; padding: 2px 6px; }
  /* tabela: fonte/padding menores + rolagem horizontal suave (toca e arrasta) */
  .prem-table { min-width: 520px; font-size: 12px; }
  .prem-table thead th { padding: 0 9px 8px; letter-spacing: .03em; }
  .prem-table tbody td { padding: 9px; }
  .prem-table-wrap { -webkit-overflow-scrolling: touch; }
  /* modal (drill-down) quase tela cheia, com a tabela rolando na horizontal */
  .modal-overlay { padding: 10px; }
  .modal-card { width: 100%; max-width: 100%; max-height: 92vh; }
  .modal-corpo { overflow-x: auto; padding: 6px 12px 12px; -webkit-overflow-scrolling: touch; }
  .modal-cab, .modal-rodape { padding-left: 14px; padding-right: 14px; }
}
@media (max-width: 380px) {
  .prem-kpis    { gap: 9px; }
}

/* foco visivel por teclado */
.prem :focus-visible {
  outline: 2px solid var(--p-blue);
  outline-offset: 2px;
  border-radius: 6px;
}

/* respeita preferencia de menos movimento */
@media (prefers-reduced-motion: reduce) {
  .prem *, .prem *::before, .prem *::after {
    transition: none !important; animation: none !important;
  }
}

/* coluna principal: grade 2x2 + Evolucao do Lucro empilhados (equilibra com a lateral) */
.prem-main { display: flex; flex-direction: column; gap: var(--p-gap); min-width: 0; }
.prem-main > .prem-grid4 { margin: 0; }
.prem-evol-card { flex: 1 1 auto; display: flex; flex-direction: column; }
.prem-evol-card .prem-chart { flex: 1; display: flex; align-items: stretch; }
.prem-evol-card .prem-chart svg { height: 100%; min-height: 150px; }

/* (O dashboard premium agora e WHITE MODE: o shell segue o tema claro padrao,
   igual as outras abas — sem override dark.) */

/* ===== Fechamento: bloco de importar ===== */
.me-info { color: #5a6b74; font-size: 13px; margin-right: 10px; }
.bloco-titulo { margin: 0 0 8px; font-size: 15px; font-weight: 700; }
.ok-box { background:#e6f6ec; border:1px solid #9fd9b4; color:#146c37;
          padding:12px 14px; border-radius:10px; margin-top:12px; }
.erro-box { background:#fdeaea; border:1px solid #f0b4b4; color:#9a2323;
            padding:12px 14px; border-radius:10px; margin-top:12px; }
.aviso-info { background:#eef6f8; border:1px solid #cfe3e8; color:#2b4d55;
              padding:12px 14px; border-radius:10px; margin-bottom:14px; }
.campo-arquivo .input-file { padding:8px; }