/* =========================================================================
   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: 1.7fr 1fr;  /* painel do video maior p/ o logo caber inteiro */
  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;
}
/* video de fundo (logo Talkline): preenche a coluna, bordas desvanecem no teal
   (mask radial). Tint teal por cima garante a legibilidade do texto branco. */
.login-overlay .login-video {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  pointer-events: none;
}
.login-overlay .login-video-tint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(135deg,
    rgba(8, 37, 43, 0.90) 0%, rgba(11, 46, 52, 0.76) 44%, rgba(17, 69, 80, 0.58) 100%);
}
@media (prefers-reduced-motion: reduce) {
  .login-overlay .login-video { display: none; }
}
/* 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 */
/* Card do autenticador no login — so aparece no celular (ver a media abaixo). No
   desktop a coluna da marca ja explica o painel e a linha .login-apoio basta. */
.login-overlay .login-2fa { display: none; }

@media (max-width: 860px) {
  /* ------------------------------------------------------------------
     A marca deixava de existir no celular (display:none) e sobrava um
     formulario solto num fundo bege: nada dizia que painel era aquele.
     Agora ela vira uma FAIXA no topo — mesma leitura do login do CRM:
     marca e proposito em cima, formulario embaixo.
     ------------------------------------------------------------------ */
  .login-overlay:not([hidden]) {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    overflow-y: auto;
  }
  .login-overlay .login-marca {
    display: block;
    position: relative;
    min-height: 0;
    padding: 26px 22px 24px;
  }
  .login-overlay .login-marca-inner { padding: 0; max-width: none; }
  /* o que nao cabe numa faixa sai: os tres cards de recurso e o eyebrow */
  .login-overlay .login-cards,
  .login-overlay .login-eyebrow { display: none; }
  .login-overlay .login-lockup { gap: 9px; }
  .login-overlay .login-lockup-word { font-size: 25px; }
  .login-overlay .login-marca-titulo {
    font-size: 20px; line-height: 1.22; margin-top: 14px; text-wrap: balance;
  }
  .login-overlay .login-marca-sub { font-size: 13.5px; margin-top: 7px; max-width: 34ch; }

  .login-overlay .login-form-wrap {
    padding: 26px 22px 30px;
    /* centralizado, um formulario mais alto que a linha transborda para os DOIS
       lados e o topo dele some atras da faixa. No celular ele comeca do topo. */
    align-items: flex-start;
  }
  /* o video em faixa recorta justamente o wordmark gigante, que briga com o titulo:
     no celular a tinta sobe e ele volta a ser textura, nao texto. */
  .login-overlay .login-video-tint {
    background: linear-gradient(150deg,
      rgba(8, 37, 43, 0.97) 0%, rgba(11, 46, 52, 0.94) 55%, rgba(17, 69, 80, 0.88) 100%);
  }
  /* desloca o recorte para o wordmark do video sair de tras do titulo */
  .login-overlay .login-video { object-position: 22% center; }
  /* o icone mini do formulario era o unico sinal de marca; agora a faixa faz isso */
  .login-overlay .login-marca-mini { display: none; }
  .login-overlay .login-bemvindo { font-size: 27px; }

  /* alvos de toque e 16px nos campos (abaixo disso o iOS da zoom ao focar) */
  .login-overlay .login-campo .input,
  .login-overlay .login-input-otp { min-height: 48px; font-size: 16px; }
  .login-overlay .login-btn { min-height: 50px; font-size: 16px; }

  /* o card do autenticador entra no lugar da linha de apoio */
  .login-overlay .login-apoio { display: none; }
  .login-overlay .login-2fa {
    display: block;
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 14px;
    background: #0d3a44;
    color: #cfe9ee;
    font-size: 13px;
    line-height: 1.5;
  }
  .login-overlay .login-2fa b { display: block; color: #fff; font-size: 14px; margin-bottom: 5px; }
  .login-overlay .login-2fa a {
    display: inline-block; margin-top: 9px; color: #5eead4;
    font-weight: 700; text-decoration: none;
  }
  .login-overlay .login-2fa a:hover { text-decoration: underline; }
}

@media (max-width: 860px) and (orientation: landscape) {
  /* deitado a faixa rouba a tela toda: encolhe para o formulario aparecer */
  .login-overlay .login-marca { padding: 16px 22px 14px; }
  .login-overlay .login-marca-titulo,
  .login-overlay .login-marca-sub { display: none; }
}
@media (max-width: 860px) {
  .login-overlay .login-form-wrap { padding: 26px 22px 30px; }
  .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; }

/* ===== Dashboard ===== */
.campo-inline { display: flex; flex-direction: column; gap: 2px; }
.campo-inline .campo-label { margin: 0; font-size: 11px; }
.campo-inline .input, .campo-inline .select { padding: 6px 10px; min-height: 34px; }
.dash-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 0 0 14px; }
.lista-resumo { list-style: none; margin: 0; padding: 0; }
.lista-resumo li { display: flex; justify-content: space-between; align-items: baseline;
                   gap: 12px; padding: 9px 0; border-bottom: 1px solid rgba(150,160,165,.22); }
.lista-resumo li:last-child { border-bottom: none; }
.lista-resumo .lr-nome { font-weight: 600; }
.lista-resumo .lr-qtd { color: #6a7a80; font-size: 12px; margin-left: 6px; font-weight: 400; }
.lista-resumo .lr-val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.dash-cta-import { margin-top: 6px; }
@media (max-width: 720px) { .dash-grid { grid-template-columns: 1fr; } }

/* dashboard premium: KPIs auto-ajustam (4-5 cards em vez dos 6 fixos) */
#prem-dash { margin-top: 4px; }
#prem-dash .prem-kpis { grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); }
#prem-dash .prem-hbars { max-height: 340px; overflow-y: auto; padding-right: 4px; }
.hb-vazio { list-style: none; color: #64748b; font-size: 12px; padding: 8px 0; }

/* ============================================================= */
/* LANÇAMENTO MANUAL (aba tipo planilha)                          */
/* ============================================================= */
.man-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 14px; }
.man-opc { font-size: 10px; font-weight: 600; color: var(--p-dim); text-transform: uppercase; letter-spacing: .04em; }

.man-table { min-width: 860px; }
.man-table thead th { white-space: nowrap; }
.man-table tbody td { padding: 6px 8px; vertical-align: top; }
.man-table tbody tr:hover { background: transparent; }

/* inputs dentro das células — cara de planilha */
.man-in {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 13px; font-weight: 400;
  color: var(--p-ink); background: var(--p-surf);
  border: 1px solid var(--p-line); border-radius: 8px; padding: 7px 8px;
}
.man-in::placeholder { color: #9aa7b5; }
.man-in:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(27,96,110,.14); }
.man-in.num { text-align: right; font-variant-numeric: tabular-nums; }
.man-in[readonly] { background: #eef2f6; color: #52606f; cursor: default; }
.man-in[readonly]:focus { border-color: rgba(15,23,42,.12); box-shadow: none; }
.man-in.err { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.12); }
.man-col-data  .man-in { min-width: 138px; }
.man-col-qtd   .man-in { max-width: 74px; }
.man-col-valor .man-in, .man-col-total .man-in { max-width: 104px; }
.man-total-auto { background: var(--p-surf2); color: var(--p-ink-2); }

/* forma de pagamento — dropdown multi-seleção (filtro) */
.man-col-forma { min-width: 200px; }
.man-ms { position: relative; }
.man-ms-btn {
  width: 100%; min-width: 200px; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font: inherit; font-size: 13px; text-align: left; cursor: pointer;
  color: var(--p-dim); background: var(--p-surf); border: 1px solid var(--p-line);
  border-radius: 8px; padding: 7px 10px;
}
.man-ms-btn:hover { border-color: var(--teal); }
.man-ms-btn.tem-valor { color: var(--p-ink); font-weight: 600; }
.man-ms.aberto .man-ms-btn { border-color: var(--teal); box-shadow: 0 0 0 3px rgba(27,96,110,.14); }
.man-ms-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.man-ms-caret { color: var(--p-dim); font-size: 10px; flex: none; }
.man-ms-menu {                                  /* painel in-flow: abre embaixo do botão, na própria linha */
  margin-top: 6px; min-width: 200px; background: var(--p-surf2);
  border: 1px solid var(--p-line); border-radius: 10px;
  padding: 6px; max-height: 320px; overflow-y: auto;
}
.man-ms-opt {
  display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 7px;
  font-size: 13px; color: var(--p-ink); cursor: pointer; white-space: nowrap; user-select: none;
}
.man-ms-opt:hover { background: rgba(27,96,110,.08); }
.man-ms-opt input { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; flex: none; }
.man-ms-excl { margin-top: 4px; border-top: 1px dashed var(--p-line); padding-top: 10px; }
.man-ms-excl input { accent-color: var(--p-purple); }
.man-ms-tag {
  margin-left: auto; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: var(--p-purple); background: rgba(147,51,234,.12); padding: 2px 8px; border-radius: 999px;
}

/* Vendas do dia: campo de valor por forma dentro do dropdown (aparece com 2+ formas) */
.dia-ms-opt { justify-content: flex-start; }
.dia-ms-opt .dia-fval { margin-left: auto; max-width: 96px; }
/* .man-ms-opt input (regra do checkbox: 16x16, cursor pointer) também bate no .dia-fval
   (mesmo label); sem isto o campo de valor renderiza como quadrado de 16px, ilegível */
.dia-ms-opt .dia-fval { width: 96px; height: auto; flex: none; cursor: text; }

/* data + botão de repetir a data nas linhas abaixo */
.man-data-wrap { display: flex; align-items: center; gap: 5px; }
.man-fill {
  flex: none; width: 28px; height: 32px; line-height: 1; cursor: pointer; font-size: 14px;
  color: var(--p-dim); background: transparent; border: 1px solid var(--p-line); border-radius: 7px;
}
.man-fill:hover { color: var(--teal); border-color: var(--teal); background: rgba(27,96,110,.06); }

.man-del {
  width: 30px; height: 30px; line-height: 1; cursor: pointer; font-size: 15px;
  color: var(--p-dim); background: transparent; border: 1px solid transparent; border-radius: 8px;
}
.man-del:hover { color: var(--p-red); background: rgba(220,38,38,.08); }

.man-colar-area {
  background: var(--p-surf2); border: 1px solid var(--p-line);
  border-radius: var(--p-radius-sm); padding: 14px; margin-bottom: 14px;
}
.man-colar-txt { width: 100%; box-sizing: border-box; font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px; resize: vertical; margin-top: 6px; }
.man-colar-acoes { display: flex; gap: 8px; margin-top: 10px; }

.man-rodape { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; }
.man-resumo { font-size: 13px; color: var(--p-dim); font-weight: 600; margin-right: auto; }
.man-resumo b { color: var(--p-ink); font-variant-numeric: tabular-nums; }
#man-resultado { margin-top: 14px; }

/* ============================================================= */
/* FECHAMENTO DO DIA (vendas marcadas pré-preenchidas)            */
/* ============================================================= */
.dia-table { min-width: 820px; }
.dia-table tbody td { vertical-align: middle; }

.dia-col-venda { min-width: 240px; }
.dia-prod { display: block; font-weight: 600; font-size: 13px; color: var(--p-ink); }
.dia-vend { display: block; font-size: 11.5px; color: var(--p-dim); margin-top: 2px; }

/* badge de tipo (chip / aparelho) */
.dia-badge {
  display: inline-flex; align-items: center; font-size: 10.5px; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; white-space: nowrap;
  padding: 4px 10px; border-radius: 999px;
}
.dia-badge-chip     { color: #0e6470; background: rgba(14,116,144,.10);  border: 1px solid rgba(14,116,144,.28); }
.dia-badge-aparelho { color: #6d28d9; background: rgba(124,58,237,.10);  border: 1px solid rgba(124,58,237,.28); }
.dia-badge-outro    { color: #475569; background: rgba(100,116,139,.10); border: 1px solid rgba(100,116,139,.28); }

/* chip de status: pendente (âmbar) -> pronta (verde) */
.dia-status {
  display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700;
  white-space: nowrap; padding: 4px 11px; border-radius: 999px;
}
.dia-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.dia-status-pend { color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; }
.dia-status-ok   { color: #146c37; background: #e6f6ec; border: 1px solid #9fd9b4; }

/* coluna Status: "+" de observação antes do chip */
.dia-col-status { white-space: nowrap; }
.dia-obs-add {
  width: 24px; height: 24px; margin-right: 7px; vertical-align: middle; line-height: 1;
  font-size: 15px; font-weight: 700; cursor: pointer; color: var(--p-dim);
  background: transparent; border: 1px solid var(--p-line); border-radius: 7px;
}
.dia-obs-add:hover:not(:disabled) { color: var(--teal); border-color: var(--teal); background: rgba(27,96,110,.06); }
.dia-obs-add:disabled { opacity: .35; cursor: default; }
.dia-obs-add.tem-obs { color: var(--teal); border-color: var(--teal); background: rgba(27,96,110,.10); }

/* aviso âmbar (dia já fechado — envio bloqueado) */
.aviso-alerta {
  background: #fff7ed; border: 1px solid #fdba74; color: #9a3412;
  padding: 12px 14px; border-radius: 10px; margin-bottom: 14px;
}
.aviso-alerta strong { color: #7c2d12; }

/* rascunho: carimbo "salvo por Fulano às HH:MM" + linha tirada da lista */
.dia-salvo { font-size: 12px; color: var(--p-dim); font-style: italic; white-space: nowrap; }
.dia-row-off td { opacity: .45; }
.dia-row-off .dia-prod { text-decoration: line-through; }
.dia-status-off { color: #475569; background: rgba(100,116,139,.12); border: 1px solid rgba(100,116,139,.28); }
.dia-status-env { color: #1b606e; background: rgba(27,96,110,.10); border: 1px solid rgba(27,96,110,.30); }
.dia-row-env td { opacity: .6; }
/* ...menos a célula da AÇÃO: numa linha enviada o ✎ é a única coisa acionável, e o
   opacity da linha (aplicado a cada td) apagava o botão junto com o texto. Opacidade não
   se desfaz no filho — um elemento nunca fica mais opaco que o pai —, então a exceção tem
   de ser no próprio td, não no botão. */
.dia-row-env td:last-child { opacity: 1; }

/* chamado de edição: chip "Em análise", botão ✎ e modal do pedido */
/* azul (--p-blue), não âmbar: "Em análise" está nas mãos do master, não pede ação do
   gerente — usar o âmbar de .dia-status-pend aqui confundiria as duas leituras */
.dia-status-analise { color: #1d4ed8; background: rgba(37,99,235,.10); border: 1px solid rgba(37,99,235,.30); }
/* ACHADO no fix de review: os tokens --p-* (--p-dim, --p-line, --p-line-str, --p-ink-2,
   --p-bg1, --p-radius-sm...) só existem dentro de `.prem { ... }` (escopo do Dashboard).
   #dia-edit-overlay é filho direto do <body>, FORA dessa subarvore — confirmado no
   Chromium via getComputedStyle: var(--p-dim) volta "" ali, e a regra cai pro valor
   herdado/invalido em vez do tom pretendido. É por isso que .dia-cfm-titulo, .dia-cfm-sub,
   .dia-obs-txt, .erro-box, .ok-box (todos vizinhos deste modal, escritos antes da Task 9)
   já usam hex/rgba literais em vez de var(--p-*) — nunca foi estilo, era a única forma de
   funcionar aqui fora. --teal segue via var() porque esse token É global (:root/body).
   Troquei --p-* por literais batendo com os valores que --p-* tem dentro do Dashboard,
   pra manter a MESMA paleta sem depender de um escopo que essas classes não têm. */
/* ✎ = a unica acao de uma linha enviada, entao ela se apresenta como acao: teal da marca
   preenchido, nao um icone cinza de enfeite. --teal e --teal-hover sao globais (:root) e
   valem nos dois temas. O estado desabilitado (venda com chamado "Em analise") continua
   claramente apagado pelo opacity do :disabled — agora que o td nao dimui mais, essa e a
   unica coisa que apaga o botao, e a diferenca entre "pode pedir" e "ja pedi" fica obvia. */
.dia-edit {
  width: 28px; height: 28px; line-height: 1; font-size: 15px; cursor: pointer;
  color: #fff; background: var(--teal); border: 1px solid var(--teal);
  border-radius: 7px;
}
.dia-edit:hover:not(:disabled) { background: var(--teal-hover); border-color: var(--teal-hover); }
.dia-edit:disabled { opacity: .35; cursor: default; }
.dia-edit-modal { max-width: 520px; text-align: left; }
/* .dia-cfm-modal (centralizado) e .dia-edit-modal (esquerda) convivem no MESMO
   elemento com a mesma especificidade -- quem vem depois no arquivo vence a cascata
   e o texto herdado (title/atual/erro/pjso) voltaria a centralizar. Lista explícita
   de override, em vez de mover blocos de lugar num arquivo de 2600 linhas. */
.dia-edit-modal .dia-cfm-titulo, .dia-edit-modal .dia-cfm-sub,
.dia-edit-modal .dia-edit-atual, .dia-edit-modal .dia-edit-erro,
.dia-edit-modal .dia-edit-pjso { text-align: left; }
.dia-edit-atual {
  /* âncora de contexto do modal (o "antes" que o gerente compara com o que vai
     digitar): #f7f9fc (o tom que --p-surf2 tem dentro do Dashboard) é quase idêntico
     ao branco do card do modal e ficava invisível mesmo com borda mais forte — sem o
     escopo do .prem essa var nem chegava a resolver. #eef2f7 (o tom de --p-bg1, "um
     degrau abaixo" da superfície) dá presença real e neutra sem virar destaque colorido. */
  margin: 6px 0 14px; padding: 8px 11px; font-size: 13px; color: #334155;
  background: #eef2f7; border: 1px solid rgba(15,23,42,.16); border-radius: 10px;
}
.dia-edit-row { display: flex; gap: 10px; align-items: flex-start; }
.dia-edit-row .man-ms { flex: 1 1 auto; min-width: 0; }
.dia-edit-row .dia-valor { flex: 0 0 116px; text-align: right; }
.dia-edit-pjso { display: block; margin-top: 12px; font-size: 13px; color: #334155; }
.dia-edit-erro {
  margin-top: 12px; padding: 9px 12px; font-size: 13px; color: #9a2323;
  background: #fdeaea; border: 1px solid #f0b4b4; border-radius: 10px;
}

#dia-resultado { margin-top: 14px; }

/* ============================================================= */
/* TABELAS v2 — dash / Vendas do dia / manual com cara premium    */
/* ============================================================= */
/* moldura: borda arredondada + scroll interno com cabeçalho fixo */
.prem-table-wrap {
  border: 1px solid var(--p-line);
  border-radius: 12px;
  background: var(--p-surf);
}
.prem-table-card .prem-table-wrap { max-height: 62vh; overflow: auto; }
.man-table-wrap { max-height: 68vh; overflow: auto; }

/* barra de rolagem discreta (webkit) */
.prem-table-wrap::-webkit-scrollbar { width: 10px; height: 10px; }
.prem-table-wrap::-webkit-scrollbar-thumb {
  background: rgba(100,116,139,.35); border-radius: 8px;
  border: 2px solid transparent; background-clip: content-box;
}
.prem-table-wrap::-webkit-scrollbar-thumb:hover { background-color: rgba(100,116,139,.55); }
.prem-table-wrap::-webkit-scrollbar-track { background: transparent; }

/* separate (não collapse): sticky thead não "perde" a borda ao rolar */
.prem-table { border-collapse: separate; border-spacing: 0; }
.prem-table thead th {
  position: sticky; top: 0; z-index: 2;
  background: linear-gradient(180deg, #fbfdfe, #f0f5f7);
  padding: 11px 14px 10px;
  border-bottom: 1px solid var(--p-line-str);
}
/* coluna ordenada: fio teal por baixo do cabeçalho */
.prem-table thead th.th-ativo { color: var(--teal); box-shadow: inset 0 -2px 0 var(--teal); }
.prem-table thead th.th-ativo .th-seta { opacity: 1; }
.prem-table thead th.th-sort:hover { color: var(--teal); }

/* zebra bem sutil + hover com o teal da marca (no td: convive com o sticky) */
.prem-table tbody tr:nth-child(even) td { background: rgba(15,23,42,.018); }
.prem-table tbody tr:hover td { background: rgba(27,96,110,.055); }
.prem-table tbody td { padding: 11px 14px; }

/* estado vazio com respiro */
.prem-table .tabela-vazia { padding: 36px 16px; font-size: 13px; color: var(--p-dim); }

/* forma de pagamento como pill colorida (dashboard) */
.pill-forma {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px;
  color: #33475a; background: rgba(100,116,139,.10); border: 1px solid rgba(100,116,139,.24);
}
.pill-forma::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .7; }
.pf-dinheiro   { color: #146c37; background: rgba(22,163,74,.10);  border-color: rgba(22,163,74,.30); }
.pf-pix        { color: #0e6470; background: rgba(14,116,144,.10); border-color: rgba(14,116,144,.30); }
.pf-debito     { color: #1d4ed8; background: rgba(37,99,235,.09);  border-color: rgba(37,99,235,.28); }
.pf-credito    { color: #5b21b6; background: rgba(124,58,237,.09); border-color: rgba(124,58,237,.28); }
.pf-bonificado { color: #92400e; background: #fef3c7;              border-color: #fcd34d; }
.pf-payjoy     { color: #9d174d; background: rgba(219,39,119,.08); border-color: rgba(219,39,119,.28); }
.pf-bemol      { color: #9a3412; background: rgba(234,88,12,.09); border-color: rgba(234,88,12,.30); }
/* oliva: e a faixa de cor que sobrou. Vermelho leria como erro numa coluna de pagamento,
   e azul/roxo ja sao DEBITO e CREDITO. Fica longe do verde do DINHEIRO, que puxa pro azul. */
.pf-renova     { color: #3f6212; background: rgba(132,204,22,.12); border-color: rgba(132,204,22,.35); }
.dash-dim { color: var(--p-dim); }

/* loja como badge discreto */
.pill-loja {
  display: inline-block; font-size: 11px; font-weight: 600; white-space: nowrap;
  color: var(--p-ink-2); background: var(--p-surf2);
  border: 1px solid var(--p-line); padding: 3px 9px; border-radius: 7px;
}

/* total do dia com peso (última coluna numérica do dash) */
.prem-table td.cel-total { color: var(--p-ink); font-weight: 700; }

/* produto do dash com o badge de tipo (linhas vindas das Vendas do dia) */
.dash-prod { display: inline-flex; align-items: center; gap: 8px; }

/* ajustes do crítico de design (natsu) */
@media (max-width: 600px) {                     /* v2 não pode inflar o mobile */
  .prem-table thead th { padding: 9px 9px 8px; }
  .prem-table tbody td { padding: 9px; }
}
.dia-table tbody tr:has(.man-ms.aberto) td { vertical-align: top; }  /* linha expandida: célula no topo */
.prem-table tbody tr.dia-row-off:hover td,
.prem-table tbody tr:hover td.tabela-vazia { background: none; }     /* "Fora"/vazio não convidam hover */
.prem-table tbody tr:nth-child(even) td { background: rgba(15,23,42,.03); }  /* zebra visível-mas-quieta */
.prem-table thead th.th-sort:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }

/* ============================================================= */
/* MODAL de confirmação Sim/Não (Enviar com venda só no PayJoy)   */
/* ============================================================= */
/* O confirm ("foi so no PayJoy?") pede uma resposta e pode ser aberto DE DENTRO de
   outro fluxo que ja tem overlay (o pedido de aprovacao). Com o mesmo z-index das
   demais .dia-cfm-overlay, quem estivesse depois no DOM pintava por cima e o confirm
   ficava soterrado e sem clique. Ele sobe um degrau, sempre. */
#dia-confirm-overlay { z-index: 1300; }

.dia-cfm-overlay {
  /* modais SEMPRE acima da barra de abas (sticky, z-index 600) e do login (1000);
     abaixo do toast (2000). Antes ficavam em 130 e a barra atravessava o pop-up. */
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(8,37,43,.55);
  backdrop-filter: blur(3px); animation: dia-cfm-in .16s ease-out;
}
@keyframes dia-cfm-in { from { opacity: 0; } to { opacity: 1; } }
.dia-cfm-modal {
  width: 100%; max-width: 440px; background: #fff; color: #0f1b2d;
  border-radius: 16px; padding: 24px 24px 20px; text-align: center;
  box-shadow: 0 24px 64px rgba(8,37,43,.35); animation: dia-cfm-up .2s ease-out;
}
@keyframes dia-cfm-up { from { transform: translateY(12px); opacity: .5; } to { transform: none; opacity: 1; } }
.dia-cfm-ico {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px; font-size: 26px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(157,23,77,.10); border: 1px solid rgba(157,23,77,.20);
}
.dia-cfm-titulo { margin: 0 0 8px; font-size: 19px; letter-spacing: -.01em; color: #0f1b2d; }
.dia-cfm-texto { margin: 0; font-size: 14px; line-height: 1.5; color: #33414f; }
.dia-cfm-texto b { color: #0f1b2d; }
.dia-cfm-sub { margin: 10px 0 0; font-size: 12.5px; line-height: 1.45; color: #64748b; }
.dia-cfm-acoes { display: flex; gap: 10px; justify-content: center; margin-top: 20px; }
.dia-cfm-acoes .btn { min-width: 130px; }
@media (max-width: 440px) { .dia-cfm-acoes { flex-direction: column-reverse; } .dia-cfm-acoes .btn { width: 100%; } }
/* modal de observação (obs2): textarea */
.dia-obs-modal { max-width: 480px; text-align: left; }
.dia-obs-modal .dia-cfm-titulo, .dia-obs-modal .dia-cfm-sub { text-align: left; }
.dia-obs-txt {
  width: 100%; box-sizing: border-box; margin-top: 12px; padding: 10px 12px; resize: vertical;
  font: inherit; font-size: 13.5px; color: #0f1b2d; background: #fff;
  border: 1px solid rgba(15,23,42,.16); border-radius: 10px; min-height: 90px;
}
.dia-obs-txt:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(27,96,110,.14); }
.dia-obs-modal .dia-cfm-acoes { justify-content: flex-end; }

/* ============================================================= */
/* NOVIDADES (pop-up 1x por versão) + ABA GUIA                    */
/* ============================================================= */
.nvd-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(8,37,43,.55);
  backdrop-filter: blur(3px); animation: nvd-in .18s ease-out;
}
@keyframes nvd-in { from { opacity: 0; } to { opacity: 1; } }
.nvd-modal {
  width: 100%; max-width: 520px; max-height: calc(100vh - 40px); overflow-y: auto;
  background: #fff; color: #0f1b2d; border-radius: 16px;
  box-shadow: 0 24px 64px rgba(8,37,43,.35); animation: nvd-up .22s ease-out;
}
@keyframes nvd-up { from { transform: translateY(14px); opacity: .4; } to { transform: none; opacity: 1; } }
.nvd-topo {
  padding: 22px 24px 16px; border-bottom: 1px solid rgba(15,23,42,.08);
  background: linear-gradient(180deg, #f2f8f9 0%, #fff 100%);
  border-radius: 16px 16px 0 0;
}
.nvd-eyebrow {
  font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: #1B606E;
}
.nvd-titulo { margin: 6px 0 2px; font-size: 20px; letter-spacing: -.01em; color: #0f1b2d; }
.nvd-sub { margin: 0; font-size: 13px; color: #64748b; }
.nvd-lista { list-style: none; margin: 0; padding: 8px 12px; }
.nvd-lista li {
  display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border-radius: 12px;
}
.nvd-lista li:hover { background: rgba(27,96,110,.05); }
.nvd-ico {
  flex: none; width: 38px; height: 38px; border-radius: 11px; font-size: 18px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(27,96,110,.09); border: 1px solid rgba(27,96,110,.16);
}
.nvd-lista b { display: block; font-size: 13.5px; color: #0f1b2d; margin-top: 1px; }
.nvd-lista span { display: block; font-size: 12.5px; color: #526071; line-height: 1.45; margin-top: 1px; }
.nvd-acoes {
  display: flex; gap: 10px; justify-content: flex-end; padding: 14px 20px 18px;
  border-top: 1px solid rgba(15,23,42,.08);
}
@media (max-width: 520px) { .nvd-acoes { flex-direction: column-reverse; } .nvd-acoes .btn { width: 100%; } }

/* ---- pop-up de PENDENCIAS (dias sem fechar travam o envio) ---- */
.pend-overlay {
  position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center;
  justify-content: center; padding: 20px; background: rgba(8,37,43,.58);
  backdrop-filter: blur(3px); animation: nvd-in .18s ease-out;
}
.pend-modal {
  position: relative; width: 100%; max-width: 500px; max-height: calc(100vh - 40px);
  overflow-y: auto; background: #fff; color: #0f1b2d; border-radius: 18px;
  box-shadow: 0 24px 64px rgba(8,37,43,.4); animation: nvd-up .22s ease-out;
}
.pend-x {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  width: 34px; height: 34px; border-radius: 10px; cursor: pointer;
  border: 1px solid rgba(15,23,42,.12); background: #fff; color: #64748b;
  font-size: 22px; line-height: 1; display: flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pend-x:hover { background: #fef2f2; color: #b42318; border-color: #f4b4ac; }
.pend-topo {
  padding: 26px 26px 18px; border-radius: 18px 18px 0 0;
  /* faixa quente de aviso (ambar) na marca, com barra vermelha no topo */
  background: linear-gradient(180deg, #fff7ed 0%, #fff 100%);
  border-bottom: 1px solid rgba(15,23,42,.08);
}
.pend-topo::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  border-radius: 18px 18px 0 0;
  background: linear-gradient(90deg, #E11D48, #F59E0B);
}
.pend-selo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: #B45309; background: #FEF3C7; border: 1px solid #FDE68A;
  border-radius: 999px; padding: 4px 11px;
}
.pend-selo::before { content: "⚠"; font-size: 12px; }
.pend-titulo { margin: 12px 0 4px; font-size: 21px; letter-spacing: -.01em; color: #0f1b2d; }
.pend-sub { margin: 0; font-size: 13px; color: #64748b; line-height: 1.5; }
.pend-lista { list-style: none; margin: 0; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.pend-item {
  display: flex; gap: 13px; align-items: center; padding: 12px 14px; border-radius: 13px;
  background: #fafbfc; border: 1px solid rgba(15,23,42,.08);
}
.pend-dia-ico {
  flex: none; width: 42px; height: 42px; border-radius: 12px; font-size: 15px; font-weight: 800;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: #FEF2F2; border: 1px solid #FCD9D3; color: #B42318; line-height: 1;
}
.pend-dia-ico small { font-size: 8.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; opacity: .8; }
.pend-dia-txt { flex: 1; min-width: 0; }
.pend-dia-txt b { display: block; font-size: 14.5px; color: #0f1b2d; text-transform: capitalize; }
.pend-dia-txt span { display: block; font-size: 12.5px; color: #64748b; margin-top: 1px; }
.pend-ir {
  flex: none; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 13px;
  color: var(--teal); background: rgba(27,96,110,.08);
  border: 1px solid rgba(27,96,110,.22); border-radius: 999px; padding: 8px 16px;
  transition: background .15s ease, color .15s ease;
}
.pend-ir:hover { background: var(--teal); color: #fff; }
.pend-acoes {
  display: flex; justify-content: flex-end; padding: 14px 22px 20px;
  border-top: 1px solid rgba(15,23,42,.08);
}
.pend-acoes .btn { min-width: 120px; }
@media (max-width: 520px) {
  .pend-item { flex-wrap: wrap; }
  .pend-ir { width: 100%; margin-top: 4px; }
  .pend-acoes .btn { width: 100%; }
}

/* ---- aba Guia ---- */
.guia-wrap { display: flex; flex-direction: column; gap: 16px; max-width: 980px; }
.guia-video-bloco { padding-bottom: 14px; }
.guia-video-frame {
  border-radius: 12px; overflow: hidden; background: #08252b;
  border: 1px solid rgba(15,23,42,.14); box-shadow: 0 10px 30px rgba(8,37,43,.16);
}
.guia-video-frame video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.guia-video-sub { margin: 10px 2px 0; font-size: 12.5px; color: #64748b; }

.guia-passos { list-style: none; counter-reset: gp; margin: 4px 0 0; padding: 0; }
.guia-passos > li {
  counter-increment: gp; position: relative; padding: 11px 12px 11px 48px;
  border: 1px solid rgba(15,23,42,.10); border-radius: 12px; margin: 8px 0;
  font-size: 13px; line-height: 1.5; background: #fff; color: #33414f;
}
.guia-passos > li b, .guia-passos > li i { color: #0f1b2d; }
.guia-passos > li::before {
  content: counter(gp); position: absolute; left: 11px; top: 11px;
  width: 26px; height: 26px; border-radius: 50%; background: #1B606E; color: #fff;
  font-weight: 800; font-size: 13px; display: flex; align-items: center; justify-content: center;
}
.guia-chip {
  display: inline-block; font-size: 10.5px; font-weight: 700; padding: 1px 9px;
  border-radius: 999px; border: 1px solid; vertical-align: 1px;
}
.guia-chip-ok { color: #146c37; background: #e6f6ec; border-color: #9fd9b4; }

.guia-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; margin-top: 4px; }
.guia-card {
  border: 1px solid rgba(15,23,42,.10); border-radius: 12px; padding: 13px 14px;
  background: #fbfdfe; font-size: 12.5px; line-height: 1.5;
}
.guia-card-ico {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 34px;
  border-radius: 10px; font-size: 16px; margin-bottom: 8px;
  background: rgba(27,96,110,.09); border: 1px solid rgba(27,96,110,.16);
}
.guia-card b { display: block; font-size: 13px; color: #0f1b2d; margin-bottom: 3px; }
.guia-card span { color: #526071; }
.guia-verm { color: #dc2626; }

.guia-faq { margin-top: 2px; }
.guia-faq details {
  border: 1px solid rgba(15,23,42,.10); border-radius: 11px; margin: 7px 0;
  background: #fff; overflow: hidden;
}
.guia-faq summary {
  padding: 11px 14px; font-size: 13px; font-weight: 600; color: #12343b;
  cursor: pointer; user-select: none; list-style: none; position: relative; padding-right: 34px;
}
.guia-faq summary::-webkit-details-marker { display: none; }
.guia-faq summary::after {
  content: "▾"; position: absolute; right: 13px; top: 50%; transform: translateY(-50%);
  color: #1B606E; transition: transform .15s ease;
}
.guia-faq details[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.guia-faq details[open] summary { border-bottom: 1px dashed rgba(15,23,42,.10); background: #f6fafb; }
.guia-faq details p { margin: 0; padding: 11px 14px 13px; font-size: 12.8px; color: #44525f; line-height: 1.55; }
.guia-faq details p b { color: #0f1b2d; }

/* ============================================================= */
/* CHAMADOS DE EDIÇÃO (fila do master) — Task 10                  */
/* ============================================================= */
/* ACHADO (mesmo da Task 9, ver comentário perto de .dia-edit acima): os tokens --p-*
   (--p-surf, --p-line, --p-radius, --p-shadow, --p-dim, --p-ink, --p-amber...) só
   existem dentro de `.prem { ... }` (escopo do Dashboard, ~linha 1817). #cha-lista é
   filho de <section data-painel="chamados">, direto na árvore do <body>, FORA dessa
   subárvore — confirmado no Chromium via getComputedStyle (var(--p-*) resolve "" ali).
   Por isso os valores abaixo são LITERAIS, copiados byte a byte dos valores que --p-*
   tem dentro do Dashboard (mesma paleta, sem depender de um escopo que esta aba não
   tem). NÃO hoiste --p-* para :root aqui — mexe na cascata do painel inteiro e é uma
   decisão maior, fora do escopo desta branch. */
.cha-card {
  margin-bottom: 14px; padding: 14px 16px; background: #ffffff;
  border: 1px solid rgba(15,23,42,.10); border-radius: 14px;
  box-shadow: 0 1px 3px rgba(15,23,42,.08), 0 10px 26px rgba(15,23,42,.06);
}
.cha-card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.cha-qtd { color: #64748b; }
.cha-meta { font-size: 12px; color: #64748b; }
.cha-itens { list-style: none; margin: 12px 0 0; padding: 0; }
.cha-item { padding: 11px 0; border-top: 1px solid rgba(15,23,42,.10); }
.cha-item-topo { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cha-num { font-variant-numeric: tabular-nums; font-weight: 700; color: #64748b; }
.cha-prod { font-weight: 600; color: #0f1b2d; }
.cha-status {
  margin-left: auto; padding: 2px 9px; font-size: 11.5px; font-weight: 700;
  border-radius: 999px; letter-spacing: .02em; white-space: nowrap;
}
.cha-status-aberto   { color: #92400e; background: rgba(217,119,6,.12);  border: 1px solid rgba(217,119,6,.34); }
.cha-status-aplicado { color: #166534; background: rgba(22,163,74,.12);  border: 1px solid rgba(22,163,74,.32); }
.cha-status-recusado { color: #991b1b; background: rgba(220,38,38,.10);  border: 1px solid rgba(220,38,38,.30); }
.cha-diff { margin-top: 6px; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.cha-antes  { color: #64748b; text-decoration: line-through; }
.cha-seta   { color: #64748b; margin: 0 4px; }
.cha-depois { color: #0f1b2d; font-weight: 600; }
.cha-motivo, .cha-log { margin-top: 5px; font-size: 12.5px; color: #64748b; }
.cha-log {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11.5px;
  overflow-wrap: anywhere; white-space: pre-wrap;   /* resultado_log gigante não estoura o card */
}
.cha-acoes, .cha-card-acoes { display: flex; gap: 8px; margin-top: 9px; }
.cha-card-acoes { justify-content: flex-end; border-top: 1px solid rgba(15,23,42,.10); padding-top: 11px; }

/* alvo do deep link (?chamado=N): o brief original marcava com
   `box-shadow: inset 3px 0 0 var(--p-amber)` — um side-stripe, banido pelo impeccable
   (accent de borda lateral em card/item, nunca intencional). Troquei por um fundo
   âmbar que sangra pro padding do card (sem inventar geometria de borda nova) + um
   pulso curto de entrada que assenta no tom final — reforça "foi aqui que você
   chegou" sem o padrão banido. Respeita prefers-reduced-motion. */
.cha-item-alvo {
  background: rgba(217,119,6,.08); border-radius: 8px;
  margin-left: -10px; margin-right: -10px; padding-left: 10px; padding-right: 10px;
  animation: cha-destaque-in .6s ease-out;
}
@keyframes cha-destaque-in {
  from { background: rgba(217,119,6,.24); }
  to   { background: rgba(217,119,6,.08); }
}
@media (prefers-reduced-motion: reduce) {
  .cha-item-alvo { animation: none; }
}

/* lista "ocupada" enquanto aplicar/recusar está em voo — trava duplo clique
   visualmente (o guard de verdade é CHA.busy no app.js; isto é o feedback) */
.cha-lista-busy { opacity: .55; pointer-events: none; transition: opacity .15s ease; }

/* ============ DRAWER DE FILTROS: o que a referência não precisava ============
   O bloco do drawer acima veio inteiro do painel Fluxo de Entrada e Saída e está
   igual ao dele de propósito (mesma cara nos dois painéis). Duas coisas ficaram
   descobertas porque lá elas não existem:

   1. Lá a Loja é um MULTISELECT (.ms-botao); aqui é um <select> simples. Como
      `.select` não estava na lista que escurece os campos do drawer, ele herdava o
      `body.tema-claro .select { background:#fff }` e ficava um campo BRANCO no meio
      de campos escuros.
   2. `.dica` herda `--dim`, que no tema claro é #4d717a — sobre o fundo do drawer
      isso dá ~2,7:1 e não se lê. #93c4cf é o mesmo tom dos rótulos do drawer (~7,9:1). */
body.tema-claro .filtros-drawer .select {
  background: #0f3a41;
  border-color: #2c6b78;
  color: #eaf4f5;
}
body.tema-claro .filtros-drawer .select:focus {
  border-color: #34a7b6;
  box-shadow: 0 0 0 3px rgba(52, 167, 182, 0.16);
}
.filtros-drawer .dica {
  color: #93c4cf;
  margin: 6px 0 0;          /* o -8px do .dica solto encostava no campo aqui */
  line-height: 1.45;
}



/* Blocos de ajuda: <details> aberto no desktop (o cabeçalho de toggle nem aparece),
   recolhível no celular — ver o bloco de celular mais abaixo. */
details.ajuda { margin: 0; }
details.ajuda > summary.ajuda-cab { display: none; }
details.ajuda > .ajuda-corpo { margin-top: 0; }

/* O separador antes da contagem vive no CSS, nao no texto: quando o cabecalho do card
   quebra no celular, um "·" solto ficava pendurado no fim da linha. */
#chm-lista .cha-qtd::before { content: "·"; margin: 0 .38em 0 .45em; }

/* ==========================================================================
   CELULAR — o painel de trabalho (≤ 700px)
   ==========================================================================
   O problema nao era "esta apertado": em Vendas do dia as colunas FORMA, VALOR e
   STATUS ficavam FORA da tela, e para alcancar a forma de pagamento o gerente
   rolava a tabela pro lado — perdendo de vista a venda que estava preenchendo.
   Encolher fonte nao resolve isso. Aqui a tabela deixa de ser tabela: cada venda
   vira um cartao, com a identidade em cima e os campos em largura total embaixo.
   Nada de rolagem horizontal na tela onde se digita.
   ========================================================================== */
@media (max-width: 700px) {

  /* ---- faixa de abas: rola de verdade, com folga nas pontas ---- */
  .abas-bar { padding-left: 0; padding-right: 0; }
  .abas {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    border-left: none;
    border-right: none;
    padding: 6px 12px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;                 /* a barra some; o corte da pilula ja indica */
  }
  .abas::-webkit-scrollbar { display: none; }
  .aba {
    scroll-snap-align: center;
    padding: 11px 16px;                    /* alvo de toque confortavel */
    font-size: 14px;
  }

  /* ---- cabecalho e titulos: menos altura antes do conteudo ---- */
  .cabecalho-marca .logo, .cabecalho .logo { font-size: 21px; }
  #me-info { font-size: 11.5px; }
  .painel-titulo { font-size: 20px; }
  .painel-cabecalho { gap: 10px; }

  /* o texto de ajuda e util, mas nao pode comer a tela inteira antes do trabalho */
  .painel-aba[data-painel="dia"] > .aviso-info { font-size: 12.5px; line-height: 1.45; padding: 10px 12px; }

  /* ---- VENDAS DO DIA: a tabela vira uma lista de cartoes ---- */
  #dia-tabela thead { display: none; }
  /* .dia-table impoe min-width 820px para a tabela caber as 6 colunas no desktop.
     Em cartao isso empurrava o campo Valor para x=732 num viewport de 390 -- existia,
     mas fora da tela. Zerar aqui e o que faz o cartao caber de verdade. */
  #dia-tabela, #dia-tabela tbody { display: block; width: 100%; min-width: 0; }
  #dia-tabela .tabela-vazia { display: block; padding: 18px 4px; text-align: center; }

  #dia-tbody tr.dia-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas:
      "tipo   venda  acao"
      "forma  forma  forma"
      "valor  valor  valor"
      "status status status";
    align-items: center;
    gap: 10px 10px;
    padding: 13px 13px 14px;
    margin: 0 0 11px;
    border: 1px solid var(--linha, rgba(17, 69, 80, .16));
    border-radius: var(--radius);
    background: #fff;
  }
  #dia-tbody tr.dia-row > td {
    display: block;
    padding: 0;
    border: none;
    min-width: 0;
  }
  #dia-tbody tr.dia-row > td:nth-child(1) { grid-area: tipo; }
  #dia-tbody tr.dia-row > td:nth-child(2) { grid-area: venda; }
  #dia-tbody tr.dia-row > td:nth-child(3) { grid-area: forma; }
  #dia-tbody tr.dia-row > td:nth-child(4) { grid-area: valor; }
  #dia-tbody tr.dia-row > td:nth-child(5) { grid-area: status; }
  #dia-tbody tr.dia-row > td:nth-child(6) { grid-area: acao; }

  /* rotulo por campo — no desktop quem diz isso e o cabecalho da tabela */
  #dia-tbody tr.dia-row > td[data-rot]::before {
    content: attr(data-rot);
    display: block;
    margin-bottom: 5px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--tab-rot, #5b7f88);
  }
  /* o status ganha o rotulo na mesma linha do conteudo, que e curto */
  #dia-tbody tr.dia-row > td.dia-col-status {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-wrap: wrap;
    padding-top: 3px;
    border-top: 1px solid var(--linha, rgba(17, 69, 80, .12));
  }
  #dia-tbody tr.dia-row > td.dia-col-status::before { margin: 0 2px 0 0; }

  #dia-tbody .dia-prod { font-size: 14.5px; }
  #dia-tbody .dia-vend { font-size: 11.5px; word-break: break-word; }

  /* campos em largura total e alvo de toque de 44px */
  #dia-tbody .man-ms, #dia-tbody .man-ms-btn { width: 100%; }
  #dia-tbody .man-ms-btn { min-height: 44px; font-size: 14.5px; justify-content: space-between; }
  #dia-tbody .man-ms-menu { width: 100%; }
  #dia-tbody .man-ms-opt { padding: 11px 10px; font-size: 14px; }
  /* .man-col-valor .man-in trava em max-width:104px (coluna estreita do desktop), e
     max-width vence width -- por isso o campo aparecia como um bloco vazio. */
  #dia-tbody .man-col-valor .man-in { max-width: none; }
  #dia-tbody .dia-valor { width: 100%; min-height: 44px; font-size: 15.5px; text-align: right; }
  #dia-tbody .dia-fval { min-height: 40px; font-size: 14px; }
  #dia-tbody .dia-obs-add,
  #dia-tbody .dia-del,
  #dia-tbody .dia-edit { min-width: 40px; min-height: 40px; font-size: 16px; }

  /* ---- rodape de acao: botao de largura total, resumo em cima ---- */
  .man-rodape {
    flex-direction: column;
    align-items: stretch;
    gap: 9px;
    position: sticky;                 /* o envio acompanha a rolagem da lista */
    bottom: 0;
    z-index: 40;
    padding: 11px 0 0;
    background: linear-gradient(to top, var(--conteudo-bg, #eef4f5) 72%, rgba(238, 244, 245, 0));
  }
  .man-rodape .btn { width: 100%; min-height: 46px; }
  .man-rodape .man-resumo, .man-rodape .dia-salvo { text-align: center; font-size: 12px; }

  /* ---- filtros e acoes de painel empilham ---- */
  .painel-acoes { flex-wrap: wrap; gap: 8px; width: 100%; }
  .painel-acoes .campo-inline { flex: 1 1 150px; }
  .painel-acoes .campo-inline .select { width: 100%; min-height: 42px; }
  .painel-acoes .btn { min-height: 42px; }

  /* ---- FILA DE CHAMADOS (edicao e mes anterior) ---- */
  .cha-card, #chm-lista article.cha-card { padding: 13px; }
  .cha-card-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cha-meta { font-size: 11.5px; }
  .cha-itens { padding-left: 0; }
  .cha-item { font-size: 13px; }
  .cha-card-acoes, .cha-acoes { display: flex; flex-direction: column; gap: 8px; width: 100%; }
  .cha-card-acoes .btn, .cha-acoes .btn { width: 100%; min-height: 44px; }
  /* o cabecalho do card quebra em linhas legiveis em vez de espremer numero e badge */
  #chm-lista .cha-card-head > div:first-child { display: flex; flex-wrap: wrap; gap: 5px 8px; align-items: center; }


  /* ---- ajuda recolhida: o trabalho comeca na primeira tela ---- */
  details.ajuda > summary.ajuda-cab {
    display: flex; align-items: center; gap: 8px;
    min-height: 42px; padding: 0 12px; margin-bottom: 10px;
    border: 1px solid var(--linha, rgba(17, 69, 80, .16));
    border-radius: var(--radius);
    background: rgba(17, 69, 80, .05);
    color: var(--tab-rot, #4e727b);
    font-size: 12.5px; font-weight: 700;
    list-style: none; cursor: pointer;
  }
  details.ajuda > summary.ajuda-cab::-webkit-details-marker { display: none; }
  details.ajuda > summary.ajuda-cab::before { content: "?"; font-weight: 800; opacity: .75; }
  details.ajuda > summary.ajuda-cab::after { content: "▾"; margin-left: auto; transition: transform .18s ease; }
  details.ajuda[open] > summary.ajuda-cab::after { transform: rotate(180deg); }

  /* ---- valor: rotulo e campo na MESMA linha (o cartao ja e alto) ---- */
  #dia-tbody tr.dia-row > td.man-col-valor { display: flex; align-items: center; gap: 10px; }
  #dia-tbody tr.dia-row > td.man-col-valor::before { margin: 0; white-space: nowrap; }
  #dia-tbody tr.dia-row > td.man-col-valor .man-in { margin-left: auto; max-width: 160px; }

  /* ---- o campo tem de PARECER campo: no cartao, sem a grade da tabela em volta,
         a borda clara do desktop some e o valor vira texto solto ---- */
  #dia-tbody .man-in {
    border: 1px solid rgba(15, 23, 42, .22);
    background: #fbfdfe;
  }
  #dia-tbody .man-in[readonly] { background: #eef2f6; border-style: dashed; }

  /* ---- espaco para o ultimo cartao passar por baixo do rodape grudado ---- */
  #dia-tbody { padding-bottom: 92px; }
  .man-rodape { background: #eef4f5; border-top: 1px solid rgba(17, 69, 80, .12); }

  /* no celular a contagem vira linha propria — sem o separador pendurado */
  #chm-lista .cha-qtd { display: block; }
  #chm-lista .cha-qtd::before { content: none; }

  /* ---- titulos de secao e cabecalho mais discretos ---- */
  .painel-titulo { font-size: 19px; }
  .cabecalho { padding: 10px 13px; }

  /* ---- modais ocupam a tela, com o conteudo rolando ---- */
  .dia-cfm-modal { width: 100%; max-width: 100%; max-height: 88vh; overflow-y: auto; }
  .dia-obs-txt, #dia-pedir-motivo { font-size: 16px; }   /* 16px evita o zoom do iOS ao focar */
}

/* telas bem estreitas: o badge de tipo sai da linha da venda e vira etiqueta em cima */
@media (max-width: 380px) {
  #dia-tbody tr.dia-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "tipo   acao"
      "venda  venda"
      "forma  forma"
      "valor  valor"
      "status status";
  }
}