/* =============================================================================
   CPP — ESTILO DA INTERFACE (cpp-ui.css)
   Acabamento profissional. Tema claro e escuro. Totalmente adaptativo.
   Glassmorphism contido, profundidade em camadas, hierarquia clara.

   Todo o visual vive AQUI. O cpp-ui.js não tem CSS.
   Tipografia oficial dos cards preservada (CPP_DOCUMENTO_MESTRE 5.3).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   TEMA ESCURO — padrão
   --------------------------------------------------------------------------- */
:root {
  --bg:           #090d14;
  --bg-2:         #142139;
  --superficie:   rgba(255,255,255,0.035);
  --superficie-2: rgba(255,255,255,0.06);
  --superficie-3: rgba(255,255,255,0.09);
  --vidro:        rgba(17,23,34,0.78);
  --borda:        rgba(255,255,255,0.07);
  --borda-2:      rgba(255,255,255,0.12);
  --borda-forte:  rgba(255,255,255,0.18);

  --texto:        #ffffff;
  --texto-suave:  #ffffff;
  --texto-fraco:  #dbdbdb;
  --muted:        var(--texto-suave);
  --menu-card-bg: linear-gradient(180deg, rgba(30,41,59,.88), rgba(15,23,42,.88));
  --rgb-tinta:    15, 23, 42;

  --acento:       #3b82f6;
  --acento-2:     #60a5fa;
  --acento-fundo: rgba(59,130,246,0.14);
  --verde:        #34d399;
  --verde-fundo:  rgba(52,211,153,0.14);
  --ambar:        #fbbf24;
  --ambar-fundo:  rgba(251,191,36,0.14);
  --vermelho:     #f87171;
  --vermelho-fundo: rgba(248,113,113,0.14);

  --sombra-1: 0 1px 3px rgba(0,0,0,0.5);
  --sombra-2: 0 4px 16px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
  --sombra-3: 0 16px 48px rgba(0,0,0,0.6);
  --brilho-acento: 0 4px 18px rgba(59,130,246,0.36);
  --brilho-verde:  0 4px 18px rgba(52,211,153,0.32);

  --halo-1: rgba(59,130,246,0.16);
  --halo-2: rgba(52,211,153,0.08);

  /* tipografia oficial dos cards */
  --fs-label:  12px;
  --fs-valor:  12px;
  --fs-secao:  14px;
  --fs-kicker: 18px;
  --fs-data:   14px;
  --fs-hora:   13px;
  --fs-badge:  18px;

  --raio:      13px;
  --raio-card: 17px;
  --raio-sm:   10px;
  --header-h:  60px;
  --nav-h:     66px;
  --energia-metrica-bg: #404040;

  /* =========================================================================
     VARIAVEIS POR PAPEL (v5.36) - cada cor funcional vira um "papel" nomeado.
     Os temas redefinem esses papeis. No Original ficam as cores historicas;
     no Minimalista/Alto Contraste/Custom viram azul + neutro.
     Esta e a fundacao da customizacao granular (Parte 2).
     ========================================================================= */

  /* card da meta (heroi) */
  --heroi-meta-bg: linear-gradient(150deg, #0a1422 0%, #0e1c30 55%, #16335a 100%);
  --barra-meta-grad: linear-gradient(90deg, #00A3FF 0%, #1677FF 100%);
  --barra-meta-glow: 0 0 10px rgba(22, 119, 255, 0.5);
  --heroi-alvo-glow: rgba(22, 119, 255, 0.5);

  /* estados da meta (numero, barra, detalhe) */
  --estado-verde-cor: var(--verde);
  --estado-verde-grad2: #6ee7b7;
  --estado-superada-grad2: #22d3ee;
  --estado-ambar-cor: var(--ambar);
  --estado-ambar-grad2: #fcd34d;
  --estado-vermelho-cor: var(--vermelho);
  --estado-vermelho-grad2: #fca5a5;

  /* botao operacional: ABRIR (verde) */
  --op-verde-bg: linear-gradient(135deg, rgba(0,232,137,.28), rgba(0,200,116,.10));
  --op-verde-borda: rgba(0,232,137,.65);
  --op-verde-glow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 22px rgba(0,232,137,.22);
  --op-verde-ico: linear-gradient(140deg, #00E889, #00C774);
  --op-verde-seta: #00E889;
  --op-verde-r: 0,232,137;

  /* botao operacional: ABASTECER (vermelho) */
  --op-vermelho-bg: linear-gradient(135deg, rgba(255,59,59,.28), rgba(216,38,38,.10));
  --op-vermelho-borda: rgba(255,59,59,.65);
  --op-vermelho-glow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 22px rgba(255,59,59,.22);
  --op-vermelho-ico: linear-gradient(140deg, #FF3B3B, #D82626);
  --op-vermelho-seta: #FF5A5A;
  --op-vermelho-r: 255,59,59;

  /* botao operacional: FINALIZAR (azul) */
  --op-azul-bg: linear-gradient(135deg, rgba(22,119,255,.28), rgba(22,119,255,.10));
  --op-azul-borda: rgba(22,119,255,.65);
  --op-azul-glow: inset 0 1px 0 rgba(255,255,255,.07), 0 6px 22px rgba(22,119,255,.22);
  --op-azul-ico: linear-gradient(140deg, #168BFF, #1677FF);
  --op-azul-seta: #3BA0FF;
  --op-azul-r: 22,119,255;

  /* botao operacional: FECHAR (ambar) */
  --op-ambar-bg: linear-gradient(135deg, rgba(255,176,32,.28), rgba(255,140,0,.10));
  --op-ambar-borda: rgba(255,176,32,.65);
  --op-ambar-ico: linear-gradient(140deg, #FFB020, #FF8C00);
  --op-ambar-seta: #FFB84D;
  --op-ambar-r: 255,176,32;

  /* botao desativado / concluido */
  --btn-op-desativado-ico-bg: #16202f;
  --btn-op-desativado-ico-color: #3a4a5e;
  --btn-op-desativado-seta: #3a4a5e;
  --op-concluido-bg: rgba(0,232,137,.16);
  --op-concluido-cor: #00E889;
  --op-concluido-borda: rgba(0,232,137,.32);

  /* botao ABASTECER grande (card vermelho) */
  --abast-bg: linear-gradient(180deg, rgba(127,29,29,.72), rgba(69,10,10,.70)), rgba(127,29,29,.28);
  --abast-bg-active: linear-gradient(180deg, rgba(153,27,27,.78), rgba(69,10,10,.76)), rgba(127,29,29,.34);
  --abast-borda: rgba(248,113,113,.62);
  --abast-borda-hover: rgba(248,113,113,.82);
  --abast-cor: #fff7f7;
  --abast-cor-sub: rgba(254,226,226,.86);
  --abast-glow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(248,113,113,.08), 0 10px 24px rgba(127,29,29,.18);
  --abast-glow-hover: inset 0 1px 0 rgba(255,255,255,.10), 0 0 18px rgba(248,113,113,.16), 0 10px 24px rgba(127,29,29,.22);

  /* selos de alerta (no card da meta) */
  --selo-vencida-bg: rgba(248,113,113,.16);
  --selo-vencida-borda: rgba(248,113,113,.5);
  --selo-vencida-cor: #FF8080;
  --selo-fluxo-bg: rgba(255,176,32,.16);
  --selo-fluxo-borda: rgba(255,176,32,.5);
  --selo-fluxo-cor: #FFB84D;

  /* toast */
  --toast-bg: #16202f;
  --toast-borda: var(--borda-2);

  /* resumo (icones + fundo do item) */
  --resumo-item-bg: #0e1b2c;
  --resumo-ico-apps: #168BFF;
  --resumo-ico-horas: #FFC928;
  --resumo-ico-km: #00E889;
  --resumo-ico-patrimonio: #4DA8FF;

  /* painel do dia */
  --painel-dia-bg: linear-gradient(150deg, #0c1727, #091321);

  /* trilho dos aneis de progresso */
  --anel-trilho-verde: rgba(0,232,137,0.20);
  --anel-trilho-vermelho: rgba(255,59,59,0.20);
  --anel-traco-verde: var(--verde);
  --anel-traco-vermelho: var(--vermelho);

  /* avisos (texto/icone) — fundacao da Parte 2 */
  --aviso-ambar-cor: var(--ambar);
  --aviso-vermelho-cor: var(--vermelho);
}

/* ---------------------------------------------------------------------------
   TEMA CLARO
   --------------------------------------------------------------------------- */
[data-tema="claro"] {
  --bg:           #c6ccd7;
  --bg-2:         #b7bfcb;
  --superficie:   #eef1f6;
  --superficie-2: #f4f6f9;
  --superficie-3: #fafbfd;
  --vidro:        #ffffff;
  --borda:        rgba(15,23,42,0.07);
  --borda-2:      rgba(15,23,42,0.11);
  --borda-forte:  rgba(15,23,42,0.16);

  --texto:        #0f1622;
  --texto-suave:  #525d6e;
  --texto-fraco:  #575757;
  --menu-card-bg: #e9edf3;
  --rgb-tinta:    244, 247, 251;

  --acento:       #2563eb;
  --acento-2:     #3b82f6;
  --acento-fundo: rgba(37,99,235,0.10);
  --verde:        #059669;
  --verde-fundo:  rgba(5,150,105,0.10);
  --ambar:        #d97706;
  --ambar-fundo:  rgba(217,119,6,0.12);
  --vermelho:     #dc2626;
  --vermelho-fundo: rgba(220,38,38,0.10);

  --sombra-1: 0 1px 2px rgba(15,23,42,0.06);
  --sombra-2: 0 4px 16px rgba(15,23,42,0.09), 0 1px 3px rgba(15,23,42,0.06);
  --sombra-3: 0 16px 48px rgba(15,23,42,0.16);
  --brilho-acento: 0 4px 16px rgba(37,99,235,0.26);
  --brilho-verde:  0 4px 16px rgba(5,150,105,0.24);

  --halo-1: rgba(37,99,235,0.12);
  --halo-2: rgba(5,150,105,0.07);
  --energia-metrica-bg: #f0f0f0;
}

/* ---------------------------------------------------------------------------
   RESET
   --------------------------------------------------------------------------- */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html, body {
  min-height: 100%;
  background: var(--bg);
  color: var(--texto);
  font-family: 'Trebuchet MS', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(55% 38% at 82% 0%, var(--halo-1), transparent 70%),
    radial-gradient(46% 32% at 0% 100%, var(--halo-2), transparent 70%);
  pointer-events: none;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ---------------------------------------------------------------------------
   APP SHELL
   --------------------------------------------------------------------------- */
#app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}
#app[hidden] { display: none; }

/* ---------- WRAPPER FIXO (v6.43) ----------
   Banner de renovação + aviso de config + cabeçalho ficam sempre visíveis,
   grudados no topo, em qualquer tela e em qualquer rolagem. Fundo opaco (cor
   sólida da página) pra o conteúdo que rola não aparecer por baixo. */
#appTopoFixo {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--bg);
  padding-top: 8px;
}
/* ---------- CABEÇALHO ---------- */
#appHeader {
  z-index: 50;
  margin: 0 clamp(10px, 3vw, 14px) 4px;
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--borda-2);
  border-radius: 18px;
}
.header-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.header-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  border-radius: 14px;
  background: linear-gradient(140deg, var(--acento), var(--acento-2));
  box-shadow: var(--brilho-acento);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .03em;
  color: var(--acento-texto, #fff);
  flex-shrink: 0;
}
.header-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.header-text strong {
  font-size: clamp(13px, 3.7vw, 15px); font-weight: 700;
  line-height: 1.16;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.header-sub { font-size: 12.5px; color: var(--texto-suave); margin-top: 1px; }
.header-versao { display: block; font-size: 10.5px; color: var(--texto-suave); opacity: .6; margin-top: 1px; letter-spacing: .2px; }
.header-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 10px;
  color: var(--texto-suave);
  transition: background .2s ease, color .2s ease;
}
.header-btn svg { width: 54%; height: 54%; }
.header-btn:active { background: var(--superficie-2); color: var(--texto); }
header .header-btn + .header-btn { margin-left: 0; }
.header-btn-tema .ico-tema { display: none; }
.header-btn-tema .ico-sol { display: block; }
[data-tema="claro"] .header-btn-tema .ico-sol { display: none; }
[data-tema="claro"] .header-btn-tema .ico-lua { display: block; }

.header-actions {
  flex: 0 0 28%;
  max-width: 28%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 5px;
  overflow: visible;
}
.header-actions-inner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transform-origin: right center;
}
.header-support {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 54px;
  height: 36px;
  padding: 0 8px;
  border: 1px solid rgba(34, 197, 94, 0.36);
  border-radius: 10px;
  background: rgba(34, 197, 94, 0.10);
  color: var(--texto);
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.header-support-ico { font-size: 14px; line-height: 1; }
.header-support-txt { line-height: 1; }
.header-support:active { background: rgba(34, 197, 94, 0.18); }
[data-tema="claro"] .header-support {
  background: rgba(22, 163, 74, 0.08);
  border-color: rgba(22, 163, 74, 0.28);
}

/* ---------- CONTEÚDO ---------- */
#appMain {
  flex: 1;
  padding: clamp(14px,4vw,20px) clamp(13px,4vw,18px) calc(var(--nav-h) + 22px);
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.tela { display: flex; flex-direction: column; gap: clamp(14px,3.5vw,18px); }
.tela[hidden] { display: none; }
.tela:not([hidden]) { animation: surge .4s ease both; }
@keyframes surge {
  from { opacity: 0; transform: translateY(9px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------------------------------------------------------------------------
   BLOCO-HERÓI — meta diária com barra de progresso
   --------------------------------------------------------------------------- */
.heroi-meta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  gap: 9px;
  padding: clamp(22px,5.5vw,32px) clamp(16px,5vw,26px);
  background: var(--heroi-meta-bg);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
[data-tema="claro"] .heroi-meta {
  --heroi-meta-bg: linear-gradient(150deg, #e8f0f9 0%, #d8e4f0 55%, #c2d8f0 100%);
}
.heroi-label {
  font-family: 'Gabarito', 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--texto);
  font-weight: 800;
  /* contorno escuro pra o texto se destacar do alvo atrás (não confundir com o fundo) */
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.85), 1px -1px 0 rgba(0,0,0,0.85),
    -1px  1px 0 rgba(0,0,0,0.85), 1px  1px 0 rgba(0,0,0,0.85),
     0    0   6px rgba(0,0,0,0.55);
}
[data-tema="claro"] .heroi-label {
  /* no tema claro, contorno branco pra destacar do alvo claro */
  text-shadow:
    -1px -1px 0 rgba(255,255,255,0.9), 1px -1px 0 rgba(255,255,255,0.9),
    -1px  1px 0 rgba(255,255,255,0.9), 1px  1px 0 rgba(255,255,255,0.9),
     0    0   6px rgba(255,255,255,0.6);
}
.heroi-meta { isolation: isolate; }
.heroi-label, .heroi-valor, .heroi-barra, .heroi-detalhe, .painel-op { position: relative; z-index: 1; }
.heroi-label { padding-right: 92px; }
.heroi-alvo {
  position: absolute;
  top: clamp(-12px, -2vw, 2px);
  left: clamp(-10px, -1.5vw, 4px);
  width: clamp(120px, 36vw, 168px);
  height: clamp(120px, 36vw, 168px);
  pointer-events: none;
  z-index: 0;
  filter: drop-shadow(0 0 16px var(--heroi-alvo-glow));
  -webkit-mask-image: linear-gradient(to top left, transparent 6%, rgba(0,0,0,0.45) 42%, #000 70%);
          mask-image: linear-gradient(to top left, transparent 6%, rgba(0,0,0,0.45) 42%, #000 70%);
}
.heroi-alvo svg { width: 100%; height: 100%; display: block; transform: scaleX(-1); }
.heroi-valor {
  font-family: 'Gabarito', 'Trebuchet MS', 'Segoe UI', sans-serif;
  font-size: clamp(38px, 12vw, 54px);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  color: var(--texto);
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.85), 1px -1px 0 rgba(0,0,0,0.85),
    -1px  1px 0 rgba(0,0,0,0.85), 1px  1px 0 rgba(0,0,0,0.85),
     0    0   7px rgba(0,0,0,0.5);
}
[data-tema="claro"] .heroi-valor {
  text-shadow:
    -1px -1px 0 rgba(255,255,255,0.9), 1px -1px 0 rgba(255,255,255,0.9),
    -1px  1px 0 rgba(255,255,255,0.9), 1px  1px 0 rgba(255,255,255,0.9),
     0    0   7px rgba(255,255,255,0.6);
}

/* v4.87 — contorno escuro em TODOS os textos do card da meta, igual ao
   "META DE HOJE": rótulos, anéis (%, sublabels), "faltam R$", selos de conta
   vencida / recebimento vencido, dia extra etc. O alvo (dardo) atrás do card
   atrapalha a leitura sem isso. */
.heroi-meta,
.heroi-meta * {
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.85), 1px -1px 0 rgba(0,0,0,0.85),
    -1px  1px 0 rgba(0,0,0,0.85), 1px  1px 0 rgba(0,0,0,0.85),
     0    0   6px rgba(0,0,0,0.55);
}
[data-tema="claro"] .heroi-meta,
[data-tema="claro"] .heroi-meta * {
  text-shadow:
    -1px -1px 0 rgba(255,255,255,0.9), 1px -1px 0 rgba(255,255,255,0.9),
    -1px  1px 0 rgba(255,255,255,0.9), 1px  1px 0 rgba(255,255,255,0.9),
     0    0   6px rgba(255,255,255,0.6);
}
/* não aplicar contorno em elementos que não são texto (SVG do alvo, barras) */
.heroi-meta .heroi-alvo,
.heroi-meta .heroi-alvo *,
.heroi-meta .heroi-barra,
.heroi-meta .heroi-barra * {
  text-shadow: none;
}
/* nos estados coloridos (verde/superada) o número muda de cor — mantém contorno escuro */
.heroi-meta.estado-verde .heroi-valor,
.heroi-meta.estado-superada .heroi-valor {
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.7), 1px -1px 0 rgba(0,0,0,0.7),
    -1px  1px 0 rgba(0,0,0,0.7), 1px  1px 0 rgba(0,0,0,0.7);
}
.heroi-detalhe { font-family: 'Gabarito', 'Trebuchet MS', sans-serif; font-size: 12.5px; color: var(--texto-suave); text-align: left; font-weight: 600; }
.heroi-barra {
  width: 100%;
  height: 9px;
  border-radius: 999px;
  background: var(--superficie-3);
  border: 1px solid var(--borda);
  overflow: hidden;
}
.heroi-barra-preench {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: var(--barra-meta-grad);
  box-shadow: var(--barra-meta-glow);
  transition: width .7s cubic-bezier(.22,.61,.36,1), background .3s ease;
}
.heroi-meta.estado-verde    .heroi-barra-preench { background: linear-gradient(90deg, var(--estado-verde-cor), var(--estado-verde-grad2)); }
.heroi-meta.estado-verde    .heroi-valor { color: var(--estado-verde-cor); }
.heroi-meta.estado-superada .heroi-barra-preench { background: linear-gradient(90deg, var(--estado-verde-cor), var(--estado-superada-grad2)); }
.heroi-meta.estado-superada .heroi-valor { color: var(--estado-verde-cor); }
.heroi-meta.estado-superada .heroi-detalhe { color: var(--estado-verde-cor); font-weight: 700; }
.heroi-meta.estado-ambar    .heroi-barra-preench { background: linear-gradient(90deg, var(--estado-ambar-cor), var(--estado-ambar-grad2)); }
.heroi-meta.estado-vermelho .heroi-barra-preench { background: linear-gradient(90deg, var(--estado-vermelho-cor), var(--estado-vermelho-grad2)); }

/* ---------------------------------------------------------------------------
   MIOLO DO CARD — número (esquerda) + anéis de progresso (direita)
   v4.75: dois anéis "Meta de hoje" e "Ritmo do objetivo" embutidos no card.
   --------------------------------------------------------------------------- */
.heroi-miolo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  gap: 14px;
}
.heroi-col-esq { flex: 1 1 auto; min-width: 0; }
.heroi-col-esq .heroi-valor { padding-right: 0; }
.heroi-col-esq .heroi-barra { margin-top: 13px; }

.heroi-aneis {
  display: flex;
  gap: 8px;
  flex: 0 0 auto;
  align-items: flex-end;
}
.heroi-aneis .anel-bloco {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.heroi-aneis .anel-bloco svg { width: 66px; height: 66px; display: block; }
.heroi-aneis .anel-titulo {
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  color: var(--texto-suave);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  line-height: 1.3;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.75), 1px -1px 0 rgba(0,0,0,0.75),
    -1px  1px 0 rgba(0,0,0,0.75), 1px  1px 0 rgba(0,0,0,0.75);
}
[data-tema="claro"] .heroi-aneis .anel-titulo { text-shadow: none; }
.heroi-aneis .anel-sub {
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
  font-size: 9px;
  color: var(--texto-suave);
  opacity: .8;
  text-align: center;
  line-height: 1.3;
  text-shadow:
    -1px -1px 0 rgba(0,0,0,0.7), 1px -1px 0 rgba(0,0,0,0.7),
    -1px  1px 0 rgba(0,0,0,0.7), 1px  1px 0 rgba(0,0,0,0.7);
}
[data-tema="claro"] .heroi-aneis .anel-sub { text-shadow: none; }
/* telas bem estreitas: anéis um pouco menores pra não espremer o número */
@media (max-width: 360px) {
  .heroi-aneis .anel-bloco svg { width: 58px; height: 58px; }
  .heroi-aneis { gap: 6px; }
}

/* ---------------------------------------------------------------------------
   RESUMO RÁPIDO — mini-cards de dados em grade
   --------------------------------------------------------------------------- */
.resumo-rapido {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(8px,2.5vw,11px);
}
.resumo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: clamp(13px,3.5vw,17px) 8px;
  background: var(--resumo-item-bg);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio);
  box-shadow: var(--sombra-1);
}
[data-tema="claro"] .resumo-item {
  --resumo-item-bg: #e2e8f0;
}
.resumo-label {
  font-size: 10.5px; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .08em; font-weight: 700;
}
.resumo-topo { display: inline-flex; align-items: center; gap: 5px; }
.resumo-ico { display: inline-flex; align-items: center; }
.resumo-ico svg { width: 14px; height: 14px; display: block; }
.resumo-item-apps       .resumo-ico { color: var(--resumo-ico-apps); }
.resumo-item-horas      .resumo-ico { color: var(--resumo-ico-horas); }
.resumo-item-km         .resumo-ico { color: var(--resumo-ico-km); }
.resumo-item-patrimonio .resumo-ico { color: var(--resumo-ico-patrimonio); }
.resumo-valor { font-size: clamp(16px,4.6vw,19px); font-weight: 800; letter-spacing: -.01em; color: var(--texto); }

/* ---------------------------------------------------------------------------
   PAINEL OPERACIONAL — abrir/fechar turno, finalizar dia
   --------------------------------------------------------------------------- */
.painel-op {
  display: flex;
  flex-direction: column;
  gap: 13px;
  padding: clamp(14px,3.8vw,18px);
  background: var(--vidro);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-2);
}
/* quando as ações vivem DENTRO do card da meta: sem card próprio
   (herda o fundo da meta) e ocupando a largura toda. */
.heroi-meta .painel-op {
  width: 100%;
  margin-top: 5px;
  padding: 0;
  gap: 10px;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
}
/* frase de turno aberto, no card da meta (verde translúcido, tema-safe) */
.turno-aberto-frase {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--verde);
  background: var(--verde-fundo);
  border: 1px solid var(--verde);
  border-radius: 10px;
  padding: 7px 10px;
  text-align: center;
}
.turno-aberto-frase[hidden] { display: none; }
.painel-op-msg {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--texto-suave);
  text-align: center;
}
.painel-op-msg.critico {
  color: var(--vermelho);
  font-weight: 800;
}
.painel-op-msg.alerta {
  color: var(--amarelo);
  font-weight: 800;
}
/* ============================================================
   CARDS DE AÇÃO DO DIA — 3 colunas (Abrir/Fechar · Abastecer · Finalizar)
   Visual: ícone colorido no topo, título, subtítulo e seta no canto.
   As classes de ESTADO (ativo, ativo-principal, desativado, respirando,
   critico, concluido) são aplicadas pela máquina de estado (cpp-ui+Rules)
   e NÃO foram alteradas — aqui é só a pele. Cores por função:
   Abrir/Fechar = verde, Abastecer = vermelho, Finalizar = azul. */
.painel-op-zoom { width: 100%; overflow: visible; }
.painel-op-botoes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  transform-origin: top left;
  /* a largura e o transform:scale são ajustados por JS (ajustarEscalaBotoesOp):
     mede a largura disponível e reduz a fileira INTEIRA como um conjunto único
     — igual a uma imagem encolhendo. Formato idêntico em qualquer tela, texto
     nunca corta nem empilha. */
}
.painel-op-botoes .btn-op[hidden] { display: none; }

.btn-op {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 13px;
  padding: 40px 17px;
  border-radius: 17px;
  background: var(--superficie-2);
  border: 1px solid var(--borda-2);
  color: var(--texto);
  position: relative;
  transition: transform .12s ease, box-shadow .2s ease,
              border-color .2s ease, opacity .2s ease;
}
.btn-op:active { transform: scale(.98); }

.btn-op-ico {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  color: #fff;
}
.btn-op-ico svg { width: 26px; height: 26px; display: block; }
.btn-op-corpo { display: flex; flex-direction: column; gap: 3px; flex: 1 1 auto; min-width: 0; }
.btn-op-txt { font-size: 30px; font-weight: 700; line-height: 1.12; color: var(--texto); white-space: nowrap; }
.btn-op-sub { font-size: 25px; line-height: 1.15; color: var(--texto-suave); white-space: nowrap; }

/* Tamanhos individuais por botão */
#btnAbrirTurno  .btn-op-txt { font-size: 40px; }
#btnFecharTurno .btn-op-txt { font-size: 40px; }
#btnFinalizarDia .btn-op-txt { font-size: 35px; }
.btn-op-seta { display: inline-flex; align-items: center; flex: 0 0 auto; margin-left: auto; opacity: .8; }
.btn-op-seta svg { width: 20px; height: 20px; }

/* ----- TEMAS POR FUNÇÃO: fundo TRANSLÚCIDO da cor + glow (igual ao design) ----- */
.op-verde {
  background: var(--op-verde-bg);
  border-color: var(--op-verde-borda);
  box-shadow: var(--op-verde-glow);
}
.op-verde   .btn-op-ico { background: var(--op-verde-ico); }
.op-verde   .btn-op-seta { color: var(--op-verde-seta); }
.op-vermelho {
  background: var(--op-vermelho-bg);
  border-color: var(--op-vermelho-borda);
  box-shadow: var(--op-vermelho-glow);
}
.op-vermelho .btn-op-ico { background: var(--op-vermelho-ico); }
.op-vermelho .btn-op-seta { color: var(--op-vermelho-seta); }
.op-azul {
  background: var(--op-azul-bg);
  border-color: var(--op-azul-borda);
  box-shadow: var(--op-azul-glow);
}
.op-azul    .btn-op-ico { background: var(--op-azul-ico); }
.op-azul    .btn-op-seta { color: var(--op-azul-seta); }

/* ÂMBAR — Fechar turno: cor de atenção + pulso enquanto o turno está aberto.
   O #id vence as classes de estado verdes (respirando/ativo); o :not(.critico)
   deixa o alerta vermelho (turno de outro dia) ainda ter prioridade. */
.op-ambar {
  background: var(--op-ambar-bg);
  border-color: var(--op-ambar-borda);
}
.op-ambar .btn-op-ico { background: var(--op-ambar-ico); }
.op-ambar .btn-op-seta { color: var(--op-ambar-seta); }
#btnFecharTurno:not(.desativado):not(.critico) {
  background: var(--op-ambar-bg);
  border-color: var(--op-ambar-borda);
  color: var(--texto);
  animation: pulsoAmbar 1.8s ease-in-out infinite;
}
#btnFecharTurno:not(.desativado):not(.critico) .btn-op-ico { background: var(--op-ambar-ico); }
#btnFecharTurno:not(.desativado):not(.critico) .btn-op-seta { color: var(--op-ambar-seta); }
@keyframes pulsoAmbar {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--op-ambar-r),.5); }
  50%      { box-shadow: 0 0 0 1px rgba(var(--op-ambar-r),.95), 0 0 20px 3px rgba(var(--op-ambar-r),.42); }
}

/* ----- ESTADOS (modulam o tema) ----- */
.btn-op.ativo-principal.op-verde    { box-shadow: 0 0 0 1px rgba(var(--op-verde-r),.55), 0 8px 24px rgba(var(--op-verde-r),.22); border-color: rgba(var(--op-verde-r),.7); }
.btn-op.ativo-principal.op-vermelho { box-shadow: 0 0 0 1px rgba(var(--op-vermelho-r),.55), 0 8px 24px rgba(var(--op-vermelho-r),.22); border-color: rgba(var(--op-vermelho-r),.7); }
.btn-op.ativo-principal.op-azul     { box-shadow: 0 0 0 1px rgba(var(--op-azul-r),.55), 0 8px 24px rgba(var(--op-azul-r),.22); border-color: rgba(var(--op-azul-r),.7); }

.btn-op.desativado { opacity: .5; cursor: not-allowed; border-color: var(--borda); }
.btn-op.desativado .btn-op-ico { background: var(--btn-op-desativado-ico-bg) !important; color: var(--btn-op-desativado-ico-color); }
.btn-op.desativado .btn-op-txt { color: var(--texto-fraco); }
.btn-op.desativado .btn-op-seta { color: var(--btn-op-desativado-seta); }
.btn-op.desativado:active { transform: none; }
[data-tema="claro"] .btn-op.desativado .btn-op-ico {
  --btn-op-desativado-ico-bg: #c8d4e0;
  --btn-op-desativado-ico-color: #7a90a6;
}
[data-tema="claro"] .btn-op.desativado .btn-op-seta {
  --btn-op-desativado-seta: #7a90a6;
}

.btn-op.respirando { animation: respirar 2.4s ease-in-out infinite; border-color: rgba(var(--op-verde-r),.6); }
@keyframes respirar {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--op-verde-r),.30); }
  50%      { box-shadow: 0 0 0 1px rgba(var(--op-verde-r),.65), 0 6px 20px rgba(var(--op-verde-r),.28); }
}

.btn-op.critico { animation: piscar 1.15s ease-in-out infinite; border-color: rgba(var(--op-vermelho-r),.6); }
.btn-op.critico .btn-op-seta { color: var(--op-vermelho-seta); }
@keyframes piscar {
  0%, 100% { box-shadow: 0 0 0 1px rgba(var(--op-vermelho-r),.35); border-color: rgba(var(--op-vermelho-r),.45); }
  50%      { box-shadow: 0 0 18px 3px rgba(var(--op-vermelho-r),.42); border-color: rgba(var(--op-vermelho-r),1); }
}

/* CONCLUÍDO: dia finalizado — ícone vira check verde (UI-only, via diaFinalizado) */
.btn-op.concluido .btn-op-ico { background: var(--op-concluido-bg) !important; color: var(--op-concluido-cor); }
.btn-op.concluido { border-color: var(--op-concluido-borda); opacity: 1; }
.btn-op.concluido .btn-op-txt { color: var(--texto); }

.btn-abast {
  width: 100%;
  min-height: 58px;
  padding: 12px 14px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 13px;
  text-align: left;
  border: 1px solid var(--abast-borda);
  background: var(--abast-bg);
  color: var(--abast-cor);
  box-shadow: var(--abast-glow);
  transition: transform .12s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.btn-abast:hover {
  border-color: var(--abast-borda-hover);
  box-shadow: var(--abast-glow-hover);
}
.btn-abast:active {
  transform: scale(.992);
  background: var(--abast-bg-active);
}
.btn-abast-ico {
  width: 30px;
  min-width: 30px;
  text-align: center;
  font-size: 22px;
  line-height: 1;
  filter: saturate(1.1);
}
.btn-abast-text {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.btn-abast-text strong {
  font-size: 16px;
  line-height: 1.05;
  font-weight: 850;
  letter-spacing: -.01em;
}
.btn-abast-text small {
  font-size: 11px;
  line-height: 1.2;
  color: var(--abast-cor-sub);
  font-weight: 650;
}


/* ---------------------------------------------------------------------------
   BOTÕES GERAIS
   --------------------------------------------------------------------------- */
.btn-primario, .btn-secundario {
  padding: 12px 16px;
  border-radius: var(--raio-sm);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .01em;
  transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
}
.btn-primario {
  background: linear-gradient(140deg, var(--acento), var(--acento-2));
  color: var(--acento-texto, #fff);
  box-shadow: var(--brilho-acento);
}
.btn-primario:active { transform: scale(.98); }
.btn-secundario {
  background: var(--superficie-2);
  color: var(--texto);
  border: 1px solid var(--borda-forte);
}
.btn-secundario:active { transform: scale(.98); background: var(--superficie-3); }

/* ---------------------------------------------------------------------------
   SEÇÕES E LISTAS
   --------------------------------------------------------------------------- */
.secao-lista { display: flex; flex-direction: column; gap: 11px; }
.secao-titulo {
  font-size: var(--fs-secao);
  font-weight: 800;
  letter-spacing: -.01em;
  display: flex; align-items: center; gap: 9px;
}
.secao-titulo::before {
  content: '';
  width: 4px; height: 15px;
  border-radius: 2px;
  background: linear-gradient(var(--acento), var(--acento-2));
}
.lista { display: flex; flex-direction: column; gap: clamp(10px,3vw,13px); }
.lista-vazia {
  font-size: 12.5px;
  color: var(--texto-fraco);
  padding: 18px;
  text-align: center;
  background: var(--superficie);
  border: 1px dashed var(--borda-forte);
  border-radius: var(--raio);
}
.lista-vazia[hidden] { display: none; }

.lista-controle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 11px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
}
.lista-controle-info {
  font-size: 11.5px;
  color: var(--texto-fraco);
  line-height: 1.35;
}
.btn-lista-expandir {
  flex: 0 0 auto;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--borda-2);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: 11.5px;
  font-weight: 800;
}
.btn-lista-expandir:active { background: var(--superficie-3); transform: scale(.98); }

/* ---------------------------------------------------------------------------
   CARDS — vidro fosco, profundidade. Tipografia oficial.
   --------------------------------------------------------------------------- */
.card {
  position: relative;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  backdrop-filter: blur(15px) saturate(150%);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card);
  padding: clamp(14px,3.6vw,17px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--sombra-2);
  animation: surge .35s ease both;
}
.card.ignorado { opacity: .46; }

.card-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.card-id { display: flex; flex-direction: column; gap: 2px; }
.card-kicker {
  font-size: var(--fs-kicker);
  font-weight: 800;
  color: var(--acento-2);
  text-transform: uppercase;
  letter-spacing: .07em;
}
.card-data { font-size: var(--fs-data); color: var(--texto-suave); font-weight: 600; }
.card-hora {
  font-size: 14px;
  font-weight: 800;
  color: var(--texto);
  white-space: nowrap;
}

/* seções internas do card — agrupam métricas por assunto */
.card-secao {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 11px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.card-secao-titulo {
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: -.005em;
  display: flex;
  align-items: center;
  gap: 7px;
}
.card-secao-ico {
  font-size: 13px;
  color: var(--acento-2);
}

/* badge de status das métricas (Usado / Ignorado na média) */
.card-status {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--superficie-3);
  border: 1px solid var(--borda-2);
  color: var(--texto-suave);
}
.card-status.usado    { background: var(--verde-fundo); color: var(--verde);
                        border-color: rgba(52,211,153,.28); }
.card-status.ignorado-badge { background: var(--vermelho-fundo); color: var(--vermelho);
                        border-color: rgba(248,113,113,.28); }

/* badge "custo antes → depois" do card de recarga (v4.59) */
.card-impacto-media {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--superficie-3);
  border: 1px solid var(--borda-2);
  color: var(--texto-suave);
  margin-top: 6px;
}

.card-classe, .card-badge {
  font-size: var(--fs-badge);
  font-weight: 800;
  padding: 4px 11px;
  border-radius: 999px;
  background: var(--superficie-3);
  border: 1px solid var(--borda);
  letter-spacing: .02em;
}
.card-classe.cls-excelente { background: var(--verde-fundo);   color: var(--verde);    border-color: rgba(52,211,153,.3); }
.card-classe.cls-bom       { background: var(--verde-fundo);   color: var(--verde);    border-color: rgba(52,211,153,.22); }
.card-classe.cls-regular   { background: var(--ambar-fundo);   color: var(--ambar);    border-color: rgba(251,191,36,.3); }
.card-classe.cls-fraco     { background: var(--vermelho-fundo);color: var(--vermelho); border-color: rgba(248,113,113,.28); }
.card-classe.cls-pessimo   { background: rgba(248,113,113,.24);color: var(--vermelho); border-color: rgba(248,113,113,.4); }
.card-badge.tipo-combustao { background: var(--ambar-fundo);   color: var(--ambar); }
.card-badge.tipo-eletrico  { background: var(--acento-fundo);  color: var(--acento-2); }

.card-tempo { display: flex; align-items: baseline; gap: 9px; }
.card-tempo > span:first-child { font-size: var(--fs-hora); font-weight: 700; }
.card-data { font-size: var(--fs-data); color: var(--texto-suave); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px 9px;
}
.card-metrica {
  display: flex; flex-direction: column; gap: 3px;
  padding: 9px 10px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  min-width: 0;
  overflow: hidden;
}
.card-metrica[hidden] { display: none; }
.card-label {
  font-size: var(--fs-label); color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .05em; font-weight: 700;
}
.card-valor { font-size: clamp(13px, var(--fs-valor), var(--fs-valor)); font-weight: 800; line-height: 1.2; }

/* parecer do CPP/IA dentro do card — borda colorida por gravidade */
.card-parecer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 13px;
  background: var(--acento-fundo);
  border: 1px solid rgba(59,130,246,.26);
  border-radius: var(--raio-sm);
}
.card-parecer.grav-atencao {
  background: var(--ambar-fundo);
  border-color: rgba(251,191,36,.32);
}
.card-parecer.grav-critico {
  background: var(--vermelho-fundo);
  border-color: rgba(248,113,113,.34);
}
.card-parecer-topo { display: flex; align-items: center; gap: 7px; }
.card-parecer-ico { font-size: 13px; color: var(--acento-2); }
.card-parecer.grav-atencao .card-parecer-ico { color: var(--ambar); }
.card-parecer.grav-critico .card-parecer-ico { color: var(--vermelho); }
.card-parecer-titulo {
  font-size: 12.5px;
  font-weight: 800;
  color: var(--acento-2);
}
.card-parecer.grav-atencao .card-parecer-titulo { color: var(--ambar); }
.card-parecer.grav-critico .card-parecer-titulo { color: var(--vermelho); }
.card-parecer-msg { font-size: 12px; line-height: 1.6; color: var(--texto-suave); }
.card-parecer-det {
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--texto-fraco);
}
.card-parecer-det:empty { display: none; }

.card-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border-top: 1px solid var(--borda);
  padding-top: 12px;
}
.card-btn {
  flex: 1;
  padding: 9px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  background: var(--superficie-2);
  border: 1px solid var(--borda-2);
  transition: background .18s ease;
}
.card-btn:active { background: var(--superficie-3); }
.card-btn-perigo { color: var(--vermelho); }
.card-btn-ok {
  color: var(--verde);
  border-color: rgba(16,185,129,.45);
  background: rgba(16,185,129,.10);
  font-weight: 700;
}
.card-btn-ok[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   PARECER DO COPILOTO
   --------------------------------------------------------------------------- */
.bloco-copiloto:empty { display: none; }
.parecer {
  position: relative;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  backdrop-filter: blur(15px) saturate(150%);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card);
  padding: clamp(14px,3.6vw,17px);
  padding-left: clamp(17px,4.5vw,21px);
  display: flex;
  flex-direction: column;
  gap: 9px;
  box-shadow: var(--sombra-2);
  overflow: hidden;
}
.parecer::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: linear-gradient(var(--acento), var(--acento-2));
}
.parecer.grav-atencao::before { background: linear-gradient(var(--ambar), #fcd34d); }
.parecer.grav-critico::before { background: linear-gradient(var(--vermelho), #fca5a5); }
.parecer-topo { display: flex; align-items: center; gap: 9px; }
.parecer-ico { font-size: 15px; color: var(--acento-2); }
.parecer.grav-atencao .parecer-ico { color: var(--ambar); }
.parecer.grav-critico .parecer-ico { color: var(--vermelho); }
.parecer-titulo { font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; }
.parecer-msg { font-size: 12.5px; line-height: 1.62; color: var(--texto-suave); }
.parecer-detalhes { list-style: none; display: flex; flex-direction: column; gap: 4px; margin-top: 3px; }
.parecer-detalhes li {
  font-size: 11.5px; color: var(--texto-fraco);
  padding-left: 14px; position: relative;
}
.parecer-detalhes li::before {
  content: '›'; position: absolute; left: 3px; color: var(--acento-2); font-weight: 700;
}
.parecer-detalhes:empty { display: none; }

/* ---------------------------------------------------------------------------
   TELA DE CONFIGURAÇÕES
   --------------------------------------------------------------------------- */
#blocoConfig { display: flex; flex-direction: column; gap: clamp(12px,3.5vw,15px); }
.config-card {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  backdrop-filter: blur(15px) saturate(150%);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card);
  padding: clamp(15px,4vw,19px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--sombra-2);
}
.config-card-titulo {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
  display: flex; align-items: center; gap: 8px;
}
.config-card-titulo::before {
  content: '';
  width: 4px; height: 14px;
  border-radius: 2px;
  background: linear-gradient(var(--acento), var(--acento-2));
}
.config-card-nota { font-size: 12px; line-height: 1.80; color: var(--texto-suave); }
.config-card .btn-primario { margin-top: 3px; padding: 11px; }

/* --- accordion de configurações --- */
.accordion-cfg {
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card);
  overflow: hidden;
  box-shadow: var(--sombra-2);
}
.accordion-cfg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: clamp(13px,3.5vw,16px) clamp(15px,4vw,19px);
  background: var(--vidro);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  backdrop-filter: blur(15px) saturate(150%);
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--texto);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -.01em;
  transition: background .18s;
}
.accordion-cfg-header:active { background: var(--superficie-2); }
.accordion-cfg-rotulo {
  display: flex;
  align-items: center;
  gap: 8px;
}
.accordion-cfg-rotulo::before {
  content: '';
  width: 4px; height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
  background: linear-gradient(var(--acento), var(--acento-2));
}
.accordion-cfg-chevron {
  width: 18px; height: 18px;
  flex-shrink: 0;
  position: relative;
  opacity: .6;
  transition: transform .28s ease, opacity .18s;
}
.accordion-cfg-chevron::before,
.accordion-cfg-chevron::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 7px; height: 2px;
  border-radius: 1px;
  background: currentColor;
  transition: transform .28s ease;
}
.accordion-cfg-chevron::before { transform: translate(-100%, -50%) rotate(40deg); }
.accordion-cfg-chevron::after  { transform: translate(0%, -50%) rotate(-40deg); }
.accordion-cfg-aberto .accordion-cfg-chevron { transform: rotate(180deg); opacity: 1; }
.accordion-cfg-aberto .accordion-cfg-header  { background: var(--superficie-2); }

.accordion-cfg-corpo {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease;
}
.accordion-cfg-aberto .accordion-cfg-corpo {
  max-height: 2400px;
}

/* card interno: remove borda e sombra pra não duplicar com o accordion */
.accordion-cfg-card-interno {
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: var(--superficie) !important;
}

.conta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 13px;
  background: var(--superficie);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-sm);
}
.conta-item.inativa { opacity: .5; }
.conta-info { display: flex; flex-direction: column; gap: 2px; }
.conta-nome { font-size: 13.5px; font-weight: 700; }
.conta-saldo { font-size: 12px; color: var(--texto-suave); }
.conta-acoes { display: flex; gap: 6px; }
.config-add-conta {
  width: 100%;
  padding: 12px;
  border-radius: var(--raio-sm);
  font-size: 13px;
  font-weight: 700;
  background: var(--superficie);
  border: 1px dashed var(--borda-forte);
  color: var(--texto-suave);
  transition: background .18s ease, color .18s ease;
}
.config-add-conta:active { background: var(--superficie-2); color: var(--texto); }

.config-ok {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--verde);
  background: var(--verde-fundo);
  border: 1px solid rgba(52,211,153,.3);
  border-radius: var(--raio-sm);
  padding: 9px 12px;
  animation: surge .25s ease both;
}
.config-ok[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   FORMULÁRIOS — modais de cadastro
   --------------------------------------------------------------------------- */
.form-cpp { display: flex; flex-direction: column; gap: 12px; }
.form-titulo { font-size: 16px; font-weight: 800; letter-spacing: -.015em; }
.form-secao {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--texto-suave);
  font-weight: 800;
  margin-top: 3px;
}
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo-label { font-size: 12px; color: var(--texto-suave); font-weight: 600; }
.campo-auto { font-size: 11px; font-weight: 400; color: var(--azul-claro, #168BFF); opacity: 0.85; }
/* v5.29 — campo preenchido pelo CPP como estimativa (bateria antes, etc.)
   Âmbar enquanto não confirmado pelo motorista; normal após edição. */
.campo-input--estimativa {
  color: #FFB020 !important;
  border-color: rgba(255, 176, 32, 0.35) !important;
}
.campo-estimativa-aviso {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: #FFB020;
  opacity: 0.9;
  line-height: 1.4;
}
.campo-input {
  width: 100%;
  padding: 11px 12px;
  border-radius: var(--raio-sm);
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte);
  color: var(--texto);
  font-family: inherit;
  font-size: 14px;
  transition: border-color .18s ease, background .18s ease;
}
.campo-input:focus {
  outline: none;
  border-color: var(--acento);
  background: var(--superficie-3);
}
.campo-input::placeholder { color: var(--texto-fraco); }
.campo-input[type="date"], .campo-input[type="time"] { color-scheme: dark; }
[data-tema="claro"] .campo-input[type="date"],
[data-tema="claro"] .campo-input[type="time"] { color-scheme: light; }
/* opções do select — fundo escuro, texto claro (corrige branco-no-branco) */
.campo-input option { background: var(--bg-2); color: var(--texto); }
select.campo-input {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texto-suave) 50%),
    linear-gradient(135deg, var(--texto-suave) 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 2px), calc(100% - 13px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.campo-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.campo-inline { flex-direction: row; align-items: center; gap: 9px; }
.campo-inline input { width: 18px; height: 18px; flex-shrink: 0; }
.campo-inline .campo-label { margin: 0; }

[data-grupo] { display: flex; flex-direction: column; gap: 12px; }
[data-grupo][hidden] { display: none; }

.form-erro {
  font-size: 12.5px;
  color: var(--vermelho);
  background: var(--vermelho-fundo);
  border: 1px solid rgba(248,113,113,.3);
  border-radius: var(--raio-sm);
  padding: 9px 11px;
}
.form-erro[hidden] { display: none; }
.cppia-aviso {
  font-size: 13px;
  color: var(--texto);
  background: rgba(245,158,11,.10);
  border: 1px solid rgba(245,158,11,.45);
  border-left: 3px solid #f59e0b;
  border-radius: var(--raio-sm);
  padding: 11px 12px;
  margin-top: 4px;
}
.cppia-aviso[hidden] { display: none; }
.cppia-aviso-titulo { font-weight: 800; margin: 0 0 5px; }
.cppia-aviso-msg { margin: 0 0 10px; line-height: 1.4; color: var(--texto-suave, #cbd5e1); white-space: pre-line; }
.cppia-aviso-acoes { display: flex; flex-wrap: wrap; gap: 8px; }
.cppia-aviso-acoes .btn-primario,
.cppia-aviso-acoes .btn-secundario { flex: 1; min-width: 92px; padding: 10px; }

/* campo obrigatório — asterisco âmbar */
.campo-obrig { color: #ffb020; font-size: 11px; margin-left: 2px; }

/* aviso de abastecimento detectado no turno */
.cpp-aviso-abast {
  background: rgba(0, 200, 119, 0.08);
  border: 1px solid rgba(0, 200, 119, 0.30);
  border-left: 3px solid #00c774;
  border-radius: var(--raio-sm);
  padding: 10px 12px;
  margin-top: 4px;
}
.cpp-aviso-abast-msg {
  font-size: 13px;
  color: var(--verde);
  margin: 0 0 8px;
  line-height: 1.4;
}
[data-campo="aviso-abast-abertura"][hidden],
[data-campo="pergunta-abast-abertura"][hidden],
[data-campo="aviso-abast-fechamento"][hidden],
[data-campo="pergunta-abast-fechamento"][hidden] { display: none; }

[data-campo="aviso-abast-abertura"]:not([hidden]),
[data-campo="pergunta-abast-abertura"]:not([hidden]),
[data-campo="aviso-abast-fechamento"]:not([hidden]),
[data-campo="pergunta-abast-fechamento"]:not([hidden]) { margin-top: 20px; }

.form-secao + .campo-par { margin-top: -3px; }

/* espaço entre título e botões nos blocos de abastecimento */
[data-campo="pergunta-abast-abertura"] .form-secao,
[data-campo="aviso-abast-abertura"] .form-secao,
[data-campo="pergunta-abast-fechamento"] .form-secao,
[data-campo="aviso-abast-fechamento"] .form-secao { margin-bottom: 10px; }

[data-campo="pergunta-abast-abertura"] .campo-par,
[data-campo="aviso-abast-abertura"] .campo-par,
[data-campo="pergunta-abast-fechamento"] .campo-par,
[data-campo="aviso-abast-fechamento"] .campo-par { margin-top: 8px; }
.form-acoes { display: flex; gap: 10px; margin-top: 5px; }
.form-acoes.form-acoes-coluna { flex-direction: column; }
.form-acoes .btn-primario, .form-acoes .btn-secundario { flex: 1; padding: 12px; }

/* v6.27 — rádios de "Acumulado do dia" / "Só deste turno" no modal de
   editar turno. Dois botões lado a lado, o marcado ganha borda azul e
   fundo levemente destacado. Discreto, cabe na largura do modal, sem
   competir com os campos de valor logo abaixo. */
.turno-modo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: -1px;
  margin-bottom: 8px;
}
.turno-modo-op {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 6px;
  border: 1px solid var(--borda-2, #1B3045);
  border-radius: 10px;
  background: rgba(10, 21, 36, 0.6);
  color: var(--texto-suave, #9CA8B8);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s, background .15s, color .15s;
}
.turno-modo-op input[type="radio"] {
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: #168BFF;
  cursor: pointer;
  flex-shrink: 0;
}
.turno-modo-op:hover {
  border-color: rgba(22, 139, 255, 0.4);
  color: #FFFFFF;
}
.turno-modo-op:has(input:checked) {
  border-color: #168BFF;
  background: rgba(22, 139, 255, 0.12);
  color: #FFFFFF;
}

/* v6.28 — pequena linha embaixo de cada campo de ganho no modal de fechar
   turno, dizendo "Turno anterior: R$ X,XX". Discreto, cor suave, cabe em
   qualquer largura. */
.campo-turno-ant {
  display: block;
  margin-top: 5px;
  font-size: 11px;
  color: var(--texto-suave, #9CA8B8);
  opacity: 0.9;
  line-height: 1.4;
  letter-spacing: .02em;
}
/* v6.28 — bloco destacado com o "Total deste turno" calculado ao vivo
   enquanto o motorista digita. Objetivo: eliminar a confusão do modo
   acumulado (o valor digitado é o total do dia, o CPP mostra ao vivo
   quanto é o ganho SÓ deste turno). */
.turno-total-vivo {
  margin-top: 6px;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--borda-2, #1B3045);
  background: rgba(10, 21, 36, 0.55);
  color: #FFFFFF;
  font-family: 'Segoe UI', Trebuchet MS, system-ui, sans-serif;
  transition: border-color .2s, background .2s;
}
.turno-total-vivo-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.turno-total-vivo-rot {
  font-size: 12px;
  font-weight: 700;
  color: var(--texto-suave, #9CA8B8);
  text-transform: uppercase;
  letter-spacing: .06em;
}
.turno-total-vivo-val {
  font-size: 20px;
  font-weight: 800;
  color: #FFFFFF;
}
.turno-total-vivo-detalhe {
  display: block;
  margin-top: 4px;
  font-size: 11px;
  color: var(--texto-suave, #9CA8B8);
  opacity: 0.9;
  line-height: 1.4;
}
.turno-total-vivo.total-vivo-ok {
  border-color: rgba(0, 232, 137, 0.35);
  background: rgba(0, 232, 137, 0.06);
}
.turno-total-vivo.total-vivo-ok .turno-total-vivo-val {
  color: #00E889;
}
.turno-total-vivo.total-vivo-zero .turno-total-vivo-val {
  color: var(--texto-suave, #9CA8B8);
}

/* ---------------------------------------------------------------------------
   BLOCO-ENERGIA — usado nas telas de Energia/Rota
   --------------------------------------------------------------------------- */
.bloco-energia {
  background: var(--vidro);
  -webkit-backdrop-filter: blur(15px) saturate(150%);
  backdrop-filter: blur(15px) saturate(150%);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card);
  padding: clamp(14px,3.6vw,17px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: var(--sombra-2);
}

/* ---------------------------------------------------------------------------
   NAVEGAÇÃO INFERIOR
   --------------------------------------------------------------------------- */
#appNav {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 50;
  height: var(--nav-h);
  display: flex;
  max-width: 560px;
  margin: 0 auto;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border-top: 1px solid var(--borda);
  padding-bottom: env(safe-area-inset-bottom);
}
.nav-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: var(--texto-fraco);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .02em;
  transition: color .2s ease;
  position: relative;
}
.nav-ico { font-size: 24px; transition: transform .2s ease; }
.nav-txt { line-height: 1; }
.nav-btn.ativo { color: var(--acento-2); }
.nav-btn.ativo::before {
  content: '';
  position: absolute;
  top: 0;
  width: 26px; height: 3px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, var(--acento), var(--acento-2));
}
.nav-btn:active { color: var(--texto); }

/* ---------------------------------------------------------------------------
   MODAL
   --------------------------------------------------------------------------- */
.modal-fundo {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(0,0,0,.6);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: fade .2s ease both;
}
.modal-fundo[hidden] { display: none; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal-caixa {
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--bg-2);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card) var(--raio-card) 0 0;
  padding: clamp(18px,5vw,26px) clamp(16px,5vw,22px)
           calc(clamp(18px,5vw,26px) + env(safe-area-inset-bottom));
  box-shadow: var(--sombra-3);
  animation: subir .3s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes subir { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (min-width: 600px) {
  .modal-fundo { align-items: center; }
  .modal-caixa { border-radius: var(--raio-card); }
}

/* ---------------------------------------------------------------------------
   ASSISTENTE DE CONFIGURAÇÃO INICIAL
   --------------------------------------------------------------------------- */
#assistente {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(16px,5vw,32px);
}
#assistente[hidden] { display: none; }
.assist-shell {
  width: 100%;
  max-width: 440px;
  background: var(--vidro);
  -webkit-backdrop-filter: blur(20px) saturate(170%);
  backdrop-filter: blur(20px) saturate(170%);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-3);
  padding: clamp(20px,5.5vw,30px);
  display: flex;
  flex-direction: column;
  gap: 17px;
}
.assist-progresso { display: flex; flex-direction: column; gap: 8px; }
.assist-passo-num {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--texto-suave);
  font-weight: 800;
}
.assist-barra {
  height: 6px;
  border-radius: 999px;
  background: var(--superficie-3);
  border: 1px solid var(--borda);
  overflow: hidden;
}
.assist-barra-preench {
  height: 100%;
  width: 16%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--acento), var(--acento-2));
  transition: width .45s cubic-bezier(.22,.61,.36,1);
}
.assist-conteudo { min-height: 250px; }
.assist-passo { display: flex; flex-direction: column; gap: 12px; animation: surge .35s ease both; }
.assist-ico { font-size: 32px; color: var(--acento-2); line-height: 1; }
.assist-titulo {
  font-size: clamp(20px,5.5vw,24px);
  font-weight: 800;
  letter-spacing: -.025em;
}
.assist-texto { font-size: 13.5px; line-height: 1.80; color: var(--texto-suave); }
.assist-texto strong { color: var(--texto); font-weight: 700; }
.assist-nota {
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--texto-suave);
  padding: 11px 13px;
  background: var(--superficie);
  border-left: 3px solid var(--acento);
  border-radius: 0 var(--raio-sm) var(--raio-sm) 0;
}
.assist-nota strong { color: var(--texto); }
.assist-exemplo {
  font-size: 12.5px;
  line-height: 1.62;
  color: var(--texto-suave);
  padding: 12px 14px;
  background: var(--acento-fundo);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: var(--raio-sm);
}
.assist-exemplo strong { color: var(--acento-2); }
.assist-passo .campo { margin-top: 3px; }

.assist-dias { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.dia-check { position: relative; cursor: pointer; }
.dia-check input { position: absolute; opacity: 0; pointer-events: none; }
.dia-check span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  padding: 9px 6px;
  border-radius: 9px;
  font-size: 12px;
  font-weight: 700;
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte);
  color: var(--texto-suave);
  transition: all .15s ease;
}
.dia-check input:checked + span {
  background: linear-gradient(140deg, var(--acento), var(--acento-2));
  border-color: transparent;
  color: #fff;
  box-shadow: var(--brilho-acento);
}

.assist-nav { display: flex; gap: 10px; }
.assist-nav .btn-primario, .assist-nav .btn-secundario { flex: 1; padding: 12px; }
.assist-nav .btn-secundario.oculto { visibility: hidden; }
.assist-pular {
  width: 100%;
  padding: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-fraco);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .18s ease;
}
.assist-pular:active { color: var(--texto-suave); }

/* v6.07/v6.09 — Tela 3: botões "Continuar explicação" (disparam os áudios 2,3,4) */
.assist-continuar-wrap {
  margin: 14px 0 4px;
  display: flex;
  justify-content: flex-start;
}
.assist-continuar-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  background: rgba(22,135,255,.1);
  border: 1px solid rgba(22,135,255,.45);
  border-radius: 22px;
  color: #4EA8FF;
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .12s;
}
.assist-continuar-btn:hover  { background: rgba(22,135,255,.18); }
.assist-continuar-btn:active { transform: scale(.97); }

/* v6.14 — linha do ícone do topo com o botão "Parar áudio" à direita */
.assist-ico-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.assist-parar-audio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borda-forte);
  border-radius: 20px;
  color: var(--texto-suave);
  font-family: 'Trebuchet MS', sans-serif;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
}
.assist-parar-audio:hover  { background: var(--superficie); color: var(--texto); }
.assist-parar-audio:active { transform: scale(.96); }

/* v6.12 — Tela 4: leitura ao vivo do custo por dia (gasto do mês ÷ 30) */
.assist-custo-readout {
  margin-top: 4px;
  padding: 12px 14px;
  background: var(--acento-fundo);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: var(--raio-sm);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.assist-custo-periodo { font-size: 12px; color: var(--texto-suave); }
.assist-custo-valor { font-size: 13.5px; color: var(--texto); font-weight: 600; }
.assist-custo-valor strong {
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
  font-size: 17px;
  font-weight: 800;
  color: var(--acento-2);
}

/* v6.12 — Tela 4: bloco da projeção do fim do período (educativo). Neutro/azul por
   padrão; vira âmbar (.alerta) quando a meta está abaixo da projeção. */
.assist-projecao {
  margin-top: 4px;
  padding: 12px 14px;
  background: var(--acento-fundo);
  border: 1px solid rgba(59,130,246,.22);
  border-radius: var(--raio-sm);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.assist-projecao-txt {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--texto-suave);
  margin: 0;
}
.assist-projecao-txt strong { color: var(--texto); font-weight: 700; }
.assist-projecao-nudge {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--acento-2);
  font-weight: 700;
  margin: 0;
}
.assist-projecao-media {
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--texto-suave);
  margin: 0;
}
.assist-projecao-media strong { color: var(--acento-2); font-weight: 700; }
.assist-projecao .campo { margin-top: 0; }
/* estado de alerta: meta abaixo da projeção */
.assist-projecao.alerta {
  background: var(--ambar-fundo);
  border-color: var(--ambar);
}
.assist-projecao.alerta .assist-projecao-txt strong { color: var(--ambar); }
.assist-projecao.alerta .assist-projecao-nudge { color: var(--ambar); }
/* o atributo hidden precisa vencer o display:flex acima */
.assist-custo-readout[hidden], .assist-projecao[hidden] { display: none; }

/* ---------------------------------------------------------------------------
   v6.16 — TELA 5 (passo 7): parecer + dados editáveis (Manter/Editar/Apagar/Salvar)
   --------------------------------------------------------------------------- */
.assist-tela5 { gap: 14px; }

/* parecer: reaproveita o visual do "i" (.meta-cppia-modal). Aqui é inline, sem modal. */
.tela5-parecer { margin-top: 2px; }
.tela5-parecer.meta-cppia-modal {
  background: var(--bg-2);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card);
  padding: 14px;
}

/* aviso âmbar de imprecisão (patrimônio/custo apagados, mas meta calcula) */
.tela5-aviso-imprec {
  margin-top: 12px;
  padding: 11px 13px;
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar);
  border-radius: var(--raio-sm);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--texto-suave);
}
.tela5-aviso-imprec strong { color: var(--ambar); font-weight: 700; }

/* parecer NEGATIVO (falta meta/período): a conta não fecha */
.tela5-parecer-falta {
  margin-top: 2px;
  padding: 16px 14px;
  background: var(--vermelho-fundo);
  border: 1px solid var(--vermelho);
  border-radius: var(--raio-card);
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}
.tela5-falta-ico {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--vermelho);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 18px;
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
}
.tela5-falta-titulo {
  font-size: 15px; font-weight: 800; color: var(--texto);
  margin: 0;
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
}
.tela5-falta-txt {
  font-size: 12.5px; line-height: 1.65; color: var(--texto-suave); margin: 0;
}
.tela5-falta-txt strong { color: var(--texto); font-weight: 700; }

/* lista "Dados usados para esse cálculo" */
.tela5-dados {
  display: flex; flex-direction: column; gap: 8px;
  margin-top: 2px;
}
.tela5-dados-titulo {
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--texto-fraco);
  margin: 2px 0 2px;
}
.tela5-bloco {
  background: var(--bg-2);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio);
  padding: 11px 13px;
}
.tela5-bloco-topo {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.tela5-bloco-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tela5-bloco-rotulo {
  font-size: 11.5px; font-weight: 700; color: var(--texto-fraco);
  text-transform: uppercase; letter-spacing: .03em;
}
.tela5-bloco-valor {
  font-size: 14.5px; font-weight: 700; color: var(--texto);
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
  word-break: break-word;
}
.tela5-bloco-sub { font-size: 12px; font-weight: 600; color: var(--texto-suave); }
.tela5-vazio { font-style: italic; font-weight: 600; color: var(--vermelho); font-family: inherit; }

.tela5-bloco-acoes { display: flex; gap: 6px; flex-shrink: 0; }
.tela5-btn {
  border: 1px solid var(--borda-2);
  background: transparent;
  color: var(--texto-suave);
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.tela5-btn:active { transform: scale(.97); }
.tela5-btn.editar:hover { border-color: var(--acento-2); color: var(--acento-2); }
.tela5-btn.apagar { color: var(--vermelho); border-color: rgba(248,113,113,.4); }
.tela5-btn.apagar:hover { background: var(--vermelho-fundo); }
.tela5-btn.salvar { color: #fff; background: var(--acento-2, #1677FF); border-color: transparent; }
.tela5-btn.salvar:hover { filter: brightness(1.08); }
.tela5-btn.cancelar:hover { border-color: var(--texto-suave); color: var(--texto); }

.tela5-bloco-form { margin-top: 11px; display: flex; flex-direction: column; gap: 9px; }
.tela5-bloco-form[hidden] { display: none; }
.tela5-bloco-form .campo { margin: 0; }
.tela5-form-nota { font-size: 11.5px; line-height: 1.5; color: var(--texto-fraco); margin: 0; }

/* rodapé: frase de status + botões finais */
.tela5-rodape {
  margin-top: 6px;
  display: flex; flex-direction: column; gap: 12px;
}
.tela5-frase {
  font-size: 13.5px; font-weight: 700; line-height: 1.5;
  margin: 0; padding: 11px 13px; border-radius: var(--raio-sm);
  text-align: center;
}
.tela5-frase.ok {
  color: var(--verde); background: var(--verde-fundo);
  border: 1px solid rgba(52,211,153,.35);
}
.tela5-frase.falta {
  color: var(--vermelho); background: var(--vermelho-fundo);
  border: 1px solid rgba(248,113,113,.35);
}
.tela5-rodape-acoes { display: flex; flex-direction: column; gap: 9px; }
.tela5-rodape-acoes .btn-primario,
.tela5-rodape-acoes .btn-secundario { width: 100%; }

/* ---------------------------------------------------------------------------
   AVISO DE CONFIGURAÇÃO INCOMPLETA
   --------------------------------------------------------------------------- */
/* v6.37 — aviso de configuração incompleta (vermelho, campos críticos) */
.aviso-config {
  margin: clamp(12px,3.5vw,16px) clamp(13px,4vw,18px) 0;
  padding: 13px 15px;
  border-radius: var(--raio);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.aviso-config[hidden] { display: none; }
.aviso-config-erro {
  background: rgba(255,59,59,.1);
  border: 1px solid rgba(255,59,59,.35);
}
.aviso-config-titulo {
  font-size: 13px;
  font-weight: 800;
  color: #FF3B3B;
  line-height: 1.3;
}
.aviso-config-sub {
  font-size: 11.5px;
  color: var(--texto-suave);
  line-height: 1.5;
  min-height: 0;
}
.aviso-config button {
  align-self: flex-start;
  margin-top: 2px;
  padding: 7px 14px;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  background: linear-gradient(135deg, #FF3B3B, #D82626);
  border-radius: 8px;
  border: none;
}

/* ---------------------------------------------------------------------------
   RODAPÉ DE VERSÃO
   --------------------------------------------------------------------------- */
.app-versao {
  text-align: center;
  font-size: 10.5px;
  color: var(--texto-fraco);
  letter-spacing: .04em;
  padding: 6px 0 2px;
}

/* ---------------------------------------------------------------------------
   ACESSIBILIDADE — respeita quem prefere menos movimento
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---------------------------------------------------------------------------
   v1.13 — TELAS ENERGIA E ROTA
   --------------------------------------------------------------------------- */
.energia-topo h3,
.rota-regras h3 {
  margin: 0 0 5px;
  font-size: 16px;
  letter-spacing: -.01em;
}
.energia-topo p,
.energia-aviso {
  margin: 0;
  color: var(--texto-fraco);
  font-size: 13px;
  line-height: 1.45;
}
.energia-grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.energia-metrica {
  background: var(--energia-metrica-bg);
  border: 1px solid var(--borda);
  border-radius: var(--raio-sm);
  padding: 11px;
  min-width: 0;
}
.energia-label {
  display: block;
  color: var(--texto-fraco);
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.energia-valor {
  display: block;
  margin-top: 4px;
  font-size: 18px;
  line-height: 1.1;
}
.energia-nota {
  display: block;
  margin-top: 6px;
  color: var(--texto-fraco);
  font-size: 11.5px;
  line-height: 1.3;
}
/* v2.27 — mostra autonomia CPP e autonomia do painel no mesmo card. */
.energia-valor-duplo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 16px;
  line-height: 1.15;
}
.energia-valor-duplo span {
  display: block;
  white-space: nowrap;
}
.energia-valor-duplo b {
  color: var(--texto-fraco);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-right: 4px;
}

/* v6.29 — grid ano/mês de despesas e receitas (Mudança 2) */
.desp-filtro-periodo {
  margin: 12px 0 16px;
  padding: 12px;
  background: var(--superficie-2);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-sm);
}
.desp-ano-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 10px;
}
.btn-ano-nav {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid var(--borda-2);
  background: var(--superficie);
  color: var(--texto);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
.btn-ano-nav:active { background: var(--borda-2); }
.desp-ano-label {
  font-size: 15px;
  min-width: 48px;
  text-align: center;
}
.desp-mes-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 7px;
}
.desp-mes-item {
  padding: 8px 4px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-2);
  background: var(--superficie);
  color: var(--texto);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-align: center;
}
.desp-mes-item.desp-mes-cinza {
  color: var(--texto-fraco);
  opacity: .55;
}
.desp-mes-item.desp-mes-normal {
  border-color: var(--borda-2);
}
.desp-mes-item.desp-mes-vermelho {
  background: linear-gradient(140deg, #FF3B3B, #D82626);
  border-color: #D82626;
  color: #fff;
  font-weight: 800;
}
.desp-mes-item.desp-mes-verde {
  background: linear-gradient(140deg, #00E889, #00C774);
  border-color: #00C774;
  color: #003322;
  font-weight: 800;
}
.desp-mes-item.desp-mes-dividido {
  background: linear-gradient(135deg, #FF3B3B 0%, #D82626 49%, #00C774 51%, #00E889 100%);
  border-color: var(--texto-fraco);
  color: #fff;
  font-weight: 800;
}
.desp-mes-item.ativo {
  outline: 2px solid var(--acento);
  outline-offset: -1px;
  font-weight: 800;
}
.btn-limpar-filtro-mes {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  font-size: 12.5px;
}

.bloco-copiloto {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
/* RESUMO DO DIA — acordeão recolhido (fatia 2 da tela Hoje).
   Fechado mostra só "Resumo do dia — <classe>"; abre o resumo completo. */
.resumo-acordeao {
  background: var(--vidro);
  border: 1px solid var(--borda-2);
  border-left: 3px solid var(--texto-fraco);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.resumo-acordeao.grav-atencao { border-left-color: var(--ambar); }
.resumo-acordeao.grav-critico { border-left-color: var(--vermelho); }
.resumo-acordeao-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--texto);
  font-family: inherit;
  text-align: left;
}
.resumo-acordeao-head:active { transform: scale(.995); }
.resumo-acordeao-ico { font-size: 15px; flex: 0 0 auto; }
.resumo-acordeao-titulo { flex: 1; font-size: 14px; font-weight: 700; }
.resumo-acordeao-seta {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--texto-suave);
  transition: transform .25s ease;
}
.resumo-acordeao.aberto .resumo-acordeao-seta { transform: rotate(180deg); }
.resumo-acordeao-corpo {
  padding: 0 15px 15px;
}
.resumo-acordeao-corpo[hidden] { display: none; }
.resumo-acordeao-msg {
  font-size: 13px;
  line-height: 1.6;
  color: var(--texto-suave);
}
/* HISTÓRICO DO DIA — acordeão recolhido (fatia 3). Mesma linguagem do resumo. */
.hist-acordeao {
  background: var(--vidro);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-1);
  overflow: hidden;
}
.hist-acordeao-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 15px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--texto);
  font-family: inherit;
  text-align: left;
}
.hist-acordeao-head:active { transform: scale(.995); }
.hist-acordeao-titulo { flex: 1; font-size: 14px; font-weight: 700; }
.hist-acordeao-seta {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--texto-suave);
  transition: transform .25s ease;
}
.hist-acordeao.aberto .hist-acordeao-seta { transform: rotate(180deg); }
.hist-acordeao-corpo { padding: 0 13px 14px; }
.hist-acordeao-corpo[hidden] { display: none; }
.hist-acordeao-corpo .secao-lista:first-child { margin-top: 2px; }
.rota-regras {
  background: var(--vidro);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card);
  padding: clamp(14px,3.6vw,17px);
  box-shadow: var(--sombra-2);
}
.rota-regra {
  margin: 8px 0 0;
  padding: 9px 10px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda);
  color: var(--texto);
  font-size: 12.5px;
  line-height: 1.35;
}
.rota-regra-categoria {
  display: block;
  margin-bottom: 4px;
  font-size: 11px;
  line-height: 1.1;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.rota-regra-mensagem {
  display: block;
}
@media (max-width: 380px) {
  .energia-grade { grid-template-columns: 1fr; }
}

/* v1.14 — explicação auditável do estoque energético */
.energia-detalhe {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid rgba(96, 165, 250, 0.35);
  border-radius: 14px;
  background: rgba(37, 99, 235, 0.12);
  color: var(--texto);
}
.energia-detalhe strong {
  display: block;
  color: var(--acento);
  margin-bottom: 6px;
  font-size: 0.92rem;
}
.energia-detalhe p {
  margin: 0;
  line-height: 1.45;
  color: var(--texto-suave);
}

/* ---------------------------------------------------------------------------
   v1.15 — PAINEL DO DIA OPERACIONAL
   --------------------------------------------------------------------------- */
.painel-dia {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: clamp(14px,3.8vw,18px);
  background: var(--painel-dia-bg);
  border: 1px solid var(--borda-2);
  border-radius: var(--raio-card);
  box-shadow: var(--sombra-2);
}
[data-tema="claro"] .painel-dia {
  --painel-dia-bg: linear-gradient(150deg, #dae4ef, #e4eef8);
}
.painel-dia-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.painel-dia-kicker {
  display: block;
  font-size: 11px;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  margin-bottom: 2px;
}
.painel-dia-topo strong {
  font-size: 17px;
  line-height: 1.1;
  color: var(--texto);
}
.painel-dia-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 82px;
  padding: 6px 9px;
  border-radius: 999px;
  background: var(--superficie-2);
  border: 1px solid var(--borda-2);
  color: var(--texto-suave);
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}
.painel-dia-badge.ok {
  color: var(--verde);
  background: var(--verde-fundo);
  border-color: var(--verde);
}
.painel-dia-badge.alerta {
  color: var(--ambar);
  background: var(--ambar-fundo);
  border-color: var(--ambar);
}
.painel-dia-controle {
  display: grid;
  grid-template-columns: 46px 1fr 46px auto;
  gap: 8px;
  align-items: center;
}
.painel-dia-nav,
.painel-dia-hoje,
.painel-dia-input {
  height: 46px;
  border-radius: var(--raio-sm);
  border: 1px solid var(--borda-2);
  background: var(--superficie-2);
  color: var(--texto);
  font-weight: 800;
}
.painel-dia-nav { font-size: 18px; }
.painel-dia-hoje { padding: 0 13px; font-size: 13px; }
.painel-dia-input {
  width: 100%;
  padding: 0 12px;
  font-size: 15px;
  color-scheme: dark;
}
[data-tema="claro"] .painel-dia-input { color-scheme: light; }
.painel-dia-nota {
  font-size: 12px;
  color: var(--texto-suave);
  line-height: 1.45;
}
.resumo-rapido-4 {
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 520px) {
  .resumo-rapido-4 { grid-template-columns: repeat(4, 1fr); }
}


/* ---------------------------------------------------------------------------
   v1.16 — HOME COMPACTA E REABERTURA DO DIA
   Recupera densidade operacional: mais informação por pixel, sem cálculo na UI.
   --------------------------------------------------------------------------- */
.painel-dia-compacto {
  gap: 9px;
  padding: 12px 13px;
}
.painel-dia-compacto .painel-dia-topo {
  align-items: center;
}
.painel-dia-compacto .painel-dia-kicker {
  font-size: 10px;
  letter-spacing: .10em;
  margin-bottom: 1px;
}
.painel-dia-compacto .painel-dia-topo strong {
  font-size: 15px;
}
.painel-dia-compacto .painel-dia-badge {
  min-width: 72px;
  padding: 5px 8px;
  font-size: 10.5px;
}
.painel-dia-compacto .painel-dia-controle {
  grid-template-columns: 38px 1fr 38px 58px;
  gap: 6px;
}
.painel-dia-compacto .painel-dia-nav,
.painel-dia-compacto .painel-dia-hoje,
.painel-dia-compacto .painel-dia-input {
  height: 38px;
  border-radius: 11px;
}
.painel-dia-compacto .painel-dia-nav { font-size: 15px; }
.painel-dia-compacto .painel-dia-hoje { padding: 0 8px; font-size: 12px; }
.painel-dia-compacto .painel-dia-input { font-size: 14px; padding: 0 10px; }
.painel-dia-compacto .painel-dia-nota {
  font-size: 11px;
  margin-top: -1px;
}
.resumo-compacto {
  gap: 7px;
  margin: 1px 0 0;
}
.resumo-compacto .resumo-item {
  padding: 9px 7px;
  min-height: 54px;
  gap: 3px;
  border-radius: 12px;
}
.resumo-compacto .resumo-label {
  font-size: 9.5px;
  letter-spacing: .07em;
}
.resumo-compacto .resumo-valor {
  font-size: clamp(15px,4.2vw,18px);
  line-height: 1.05;
}
/* v2.14 — Patrimônio responsivo
   Mantém o valor completo com centavos, sem abreviar e sem quebrar o card. */
#resumoPatrimonioTotal {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: visible;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
#resumoPatrimonioTotal.valor-monetario-longo {
  font-size: clamp(13px,3.45vw,16px);
  letter-spacing: -.035em;
}
#resumoPatrimonioTotal.valor-monetario-extra-longo {
  font-size: clamp(11.5px,3.05vw,14px);
  letter-spacing: -.055em;
}
@media (min-width: 520px) {
  #resumoPatrimonioTotal.valor-monetario-longo { font-size: clamp(12px,1.7vw,15px); }
  #resumoPatrimonioTotal.valor-monetario-extra-longo { font-size: clamp(10.5px,1.45vw,13px); }
}
.parecer-colapsavel {
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 7px;
}
.parecer-colapsavel.fechado .parecer-msg {
  font-weight: 700;
  color: var(--texto);
  line-height: 1.35;
}
.btn-mini-analise {
  align-self: flex-start;
  border: 1px solid var(--borda-2);
  background: var(--superficie-2);
  color: var(--texto);
  border-radius: 999px;
  padding: 7px 11px;
  font-size: 11.5px;
  font-weight: 800;
}
.btn-reabrir {
  margin-bottom: 8px;
  border-color: rgba(251,191,36,.35);
  color: var(--ambar);
  background: var(--ambar-fundo);
}

/* ---------------------------------------------------------------------------
   v1.20 — Meta superada com efeito FORTE e visível
   Observação: este efeito é intencionalmente forte porque o feedback visual
   anterior ficou sutil demais em alguns celulares/navegadores.
   --------------------------------------------------------------------------- */
.heroi-meta.estado-superada .heroi-valor {
  animation: cppMetaSuperadaPiscaForte 0.9s ease-in-out infinite !important;
  text-shadow:
    0 0 10px var(--estado-verde-cor),
    0 0 24px var(--estado-superada-grad2) !important;
}

.heroi-meta.estado-superada .heroi-detalhe {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--verde-fundo);
  border: 1px solid var(--estado-verde-cor);
  animation: cppMetaExcedentePiscaForte 0.75s ease-in-out infinite !important;
}

.heroi-meta.estado-superada .heroi-barra-preench {
  position: relative;
  overflow: hidden;
  animation: cppMetaBarraPiscaForte 0.8s ease-in-out infinite !important;
  box-shadow: 0 0 18px var(--estado-verde-cor);
}

.heroi-meta.estado-superada .heroi-barra-preench::after {
  content: '';
  position: absolute;
  top: -3px;
  left: -45%;
  width: 42%;
  height: calc(100% + 6px);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent);
  animation: cppMetaBarraBrilhoForte 0.95s linear infinite !important;
}

@keyframes cppMetaSuperadaPiscaForte {
  0%, 100% { transform: scale(1); filter: brightness(1); opacity: 1; }
  50% { transform: scale(1.075); filter: brightness(1.55); opacity: .72; }
}

@keyframes cppMetaExcedentePiscaForte {
  0%, 100% { opacity: 1; filter: brightness(1); box-shadow: 0 0 0 rgba(52,211,153,0); }
  50% { opacity: .62; filter: brightness(1.9); box-shadow: 0 0 22px rgba(52,211,153,.70); }
}

@keyframes cppMetaBarraPiscaForte {
  0%, 100% { filter: brightness(1); transform: scaleY(1); }
  50% { filter: brightness(1.80); transform: scaleY(1.42); }
}

@keyframes cppMetaBarraBrilhoForte {
  0% { left: -45%; opacity: 0; }
  20% { opacity: 1; }
  100% { left: 112%; opacity: 0; }
}


/* v1.21 — fechamento patrimonial completo */
.form-fechamento-dia {
  max-width: 560px;
}
.form-fechamento-dia .fechamento-hero,
.form-fechamento-dia .fechamento-bloco,
.form-fechamento-dia .fechamento-resumo {
  border: 1px solid var(--borda, rgba(148,163,184,.22));
  border-radius: 18px;
  padding: 14px;
  margin-bottom: 14px;
  background: rgba(var(--rgb-tinta), .35);
}
.form-fechamento-dia .fechamento-hero {
  border-color: rgba(245, 158, 11, .75);
}
.form-fechamento-dia .fechamento-titulo {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 800;
  color: var(--texto, #f8fafc);
}
.form-fechamento-dia .fechamento-conta {
  margin-bottom: 10px;
}
.form-fechamento-dia .fechamento-resumo {
  background: rgba(14, 116, 144, .14);
}
.form-fechamento-dia .fechamento-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(148,163,184,.18);
  font-size: 14px;
}
.form-fechamento-dia .fechamento-linha:last-child {
  border-bottom: 0;
}
.form-fechamento-dia .fechamento-linha strong {
  white-space: nowrap;
  color: var(--texto, #f8fafc);
}

/* v1.24 — informação auditável da meta */
.btn-info-meta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 999px;
  border: 1px solid var(--acento-2);
  background: var(--acento-fundo);
  color: var(--acento);
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.btn-info-meta:active { transform: scale(.96); }

/* v4.73 — badge de alerta no "i" quando a meta está elevada por fluxo de caixa */
.btn-info-meta.tem-risco {
  border-color: var(--ambar);
  background: var(--ambar-fundo);
  color: var(--ambar);
  position: relative;
}
.btn-info-meta.tem-risco::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ambar);
  border: 1.5px solid var(--bg);
  box-shadow: 0 0 6px var(--ambar);
}

/* recebimento vencido: "i" âmbar com bolinha (igual tem-risco mas cor sólida) */
.btn-info-meta.tem-receber-vencida {
  border-color: var(--ambar);
  background: var(--ambar-fundo);
  color: var(--ambar);
  position: relative;
}
.btn-info-meta.tem-receber-vencida::after {
  content: '';
  position: absolute;
  top: -3px;
  right: -3px;
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--ambar);
  border: 1.5px solid var(--bg);
  box-shadow: 0 0 6px var(--ambar);
}
.fluxo-caixa-bloco {
  margin: 14px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fluxo-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar);
  border-radius: 14px;
  padding: 13px 14px;
}
.fluxo-aviso-ico { font-size: 17px; flex-shrink: 0; line-height: 1.3; }
.fluxo-aviso-txt { font-size: 13px; color: var(--texto-fraco); line-height: 1.5; }
.fluxo-aviso-txt strong { color: var(--ambar); font-weight: 700; }

.fluxo-conta-card {
  background: var(--superficie-2);
  border: 1px solid var(--borda-2);
  border-radius: 14px;
  padding: 14px 16px;
}
.fluxo-conta-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--ambar);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 10px;
}
.fluxo-linha {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 5px 0;
  border-bottom: 1px solid var(--borda);
}
.fluxo-linha:last-child { border-bottom: none; }
.fluxo-linha span { color: var(--muted); }
.fluxo-linha strong { color: var(--texto); font-weight: 700; }
.fluxo-linha strong.fluxo-vermelho { color: var(--vermelho); }
.fluxo-linha strong.fluxo-ambar { color: var(--ambar); }

.fluxo-comparativo {
  display: flex;
  align-items: stretch;
  gap: 10px;
  background: var(--superficie);
  border: 1px solid var(--borda-2);
  border-radius: 14px;
  padding: 14px;
}
.fluxo-comp-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.fluxo-comp-label {
  font-size: 10px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  line-height: 1.3;
}
.fluxo-comp-valor {
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
  font-weight: 800;
  font-size: 18px;
  line-height: 1.1;
}
.fluxo-comp-valor.base {
  color: var(--muted);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  opacity: 0.85;
}
.fluxo-comp-valor.ajustada { color: var(--ambar); }
.fluxo-comp-sub { font-size: 10px; color: var(--muted); opacity: 0.8; line-height: 1.3; }
.fluxo-comp-seta {
  align-self: center;
  font-size: 18px;
  color: var(--borda-forte);
  flex-shrink: 0;
}

.fluxo-depois {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 14px;
  padding: 13px 15px;
}
.fluxo-depois-txt { font-size: 13px; color: var(--texto-fraco); line-height: 1.55; margin: 0; }
.fluxo-depois-txt strong { color: var(--texto); font-weight: 700; }
.fluxo-depois-alerta {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borda);
  font-size: 12px;
  color: var(--muted);
  line-height: 1.5;
}
.fluxo-depois-alerta span:first-child { flex-shrink: 0; }

/* ── v4.73 — BOTÃO DE ALERTA (vencida / alerta) no lugar do "i" ── */
.btn-meta-alerta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--vermelho);
  background: var(--vermelho-fundo);
  color: var(--vermelho);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.4;
  cursor: pointer;
  vertical-align: middle;
  animation: cpp-pulsa-alerta 2.2s ease-in-out infinite;
}
.btn-meta-alerta:active { transform: scale(.96); }
@keyframes cpp-pulsa-alerta {
  0%, 100% { box-shadow: 0 0 0 0 rgba(248,113,113,0); }
  50%      { box-shadow: 0 0 0 4px rgba(248,113,113,0.18); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-meta-alerta { animation: none; }
}

/* selo vermelho clicável embaixo do número da meta */
.selo-meta-vencida {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--vermelho);
  background: var(--vermelho-fundo);
  cursor: pointer;
}
.selo-meta-vencida:active { transform: scale(.99); }
.selo-meta-vencida strong { font-size: 13px; color: var(--vermelho); font-weight: 800; }
.selo-meta-vencida span { font-size: 11px; color: var(--texto-fraco); }

/* pílula âmbar no topo — recebimento vencido (lembrete de cobrar) */
.btn-meta-receber-vencida {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 8px;
  padding: 3px 11px;
  border-radius: 999px;
  border: 1px solid var(--ambar);
  background: var(--ambar-fundo);
  color: var(--ambar);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.3px;
  line-height: 1.4;
  cursor: pointer;
  vertical-align: middle;
}
.btn-meta-receber-vencida:active { transform: scale(.96); }

/* selo âmbar clicável embaixo do número — recebimento vencido */
.selo-meta-receber-vencida {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 12px;
  border: 1px solid var(--ambar);
  background: var(--ambar-fundo);
  cursor: pointer;
}
.selo-meta-receber-vencida:active { transform: scale(.99); }
.selo-meta-receber-vencida strong { font-size: 13px; color: var(--ambar); font-weight: 800; }
.selo-meta-receber-vencida span { font-size: 11px; color: var(--texto-fraco); }

/* ── bloco das contas vencidas dentro do "i" ── */
.vencidas-bloco {
  margin: 14px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vencidas-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--vermelho-fundo);
  border: 1px solid var(--vermelho);
  border-radius: 14px;
  padding: 13px 14px;
}
.vencidas-aviso-ico { font-size: 14px; flex-shrink: 0; line-height: 1.4; }
.vencidas-aviso-txt { font-size: 13px; color: var(--texto-fraco); line-height: 1.5; }
.vencidas-aviso-txt strong { color: var(--vermelho); font-weight: 700; }
.vencidas-card {
  background: var(--superficie-2);
  border: 1px solid var(--vermelho);
  border-radius: 14px;
  padding: 14px 16px;
}
.vencidas-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--vermelho);
  background: var(--vermelho-fundo);
  border: 1px solid var(--vermelho);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 12px;
}
.vencidas-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borda);
}
.vencidas-item-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.vencidas-item-topo strong { font-size: 13px; color: var(--texto); font-weight: 700; }
.vencidas-item-valor { font-size: 13px; color: var(--vermelho); font-weight: 800; white-space: nowrap; }
.vencidas-item-venc { font-size: 11px; color: var(--muted); }
.vencidas-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borda-2);
  font-size: 13px;
}
.vencidas-total span { color: var(--muted); }
.vencidas-total strong { font-weight: 800; }

/* ===== RECEITAS A RECEBER (v4.80) — espelho verde de vencidas ===== */
.receitas-bloco {
  margin: 14px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.receitas-aviso {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar);
  border-radius: 14px;
  padding: 13px 14px;
}
.receitas-aviso-ico { font-size: 14px; flex-shrink: 0; line-height: 1.4; }
.receitas-aviso-txt { font-size: 13px; color: var(--texto-fraco); line-height: 1.5; }
.receitas-aviso-txt strong { color: var(--ambar); font-weight: 700; }
.receitas-card {
  background: var(--superficie-2);
  border: 1px solid var(--verde);
  border-radius: 14px;
  padding: 14px 16px;
}
.receitas-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.6px;
  color: var(--verde);
  background: var(--verde-fundo);
  border: 1px solid var(--verde);
  border-radius: 999px;
  padding: 3px 10px;
  margin-bottom: 12px;
}
.receitas-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px solid var(--borda);
}
.receitas-item-topo {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}
.receitas-item-topo strong { font-size: 13px; color: var(--texto); font-weight: 700; }
.receitas-item-valor { font-size: 13px; color: var(--verde); font-weight: 800; white-space: nowrap; }
.receitas-item-venc { font-size: 11px; color: var(--muted); }
.receitas-item-venc.atrasada { color: var(--ambar); font-weight: 600; }
.receitas-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--borda-2);
  font-size: 13px;
}
.receitas-total span { color: var(--muted); }
.receitas-total strong { font-weight: 800; }
.receitas-nota { font-size: 11px; color: var(--muted); margin: 10px 0 0; line-height: 1.5; }
.receitas-nota strong { color: var(--verde); font-weight: 700; }
.fluxo-verde { color: var(--verde) !important; }

/* dica "prorrogue o vencimento" dentro do bloco de fluxo de caixa */
.fluxo-prorrogar {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--verde-fundo);
  border: 1px solid var(--verde);
  border-radius: 12px;
  padding: 11px 13px;
  margin: 10px 0 2px;
}
.fluxo-prorrogar-ico { font-size: 15px; flex-shrink: 0; line-height: 1.3; }
.fluxo-prorrogar-txt { font-size: 12.5px; color: var(--texto-fraco); line-height: 1.5; }
.fluxo-prorrogar-txt strong { color: var(--verde); font-weight: 700; }

/* card e linha de receita na tela Minhas receitas/despesas */
.card-receitas { margin-top: 16px; }
.linha-receita.recebida { opacity: 0.62; }
.linha-receita.ignorada { opacity: 0.6; }
.linha-receita.ignorada > div small { color: var(--muted); font-style: italic; }
/* v6.30 — receita vencida (não recebida) destaca em verde forte, igual ao grid */
.linha-receita.atrasada {
  background: rgba(0,232,137,0.14);
  border: 1px solid #00C774;
  border-radius: var(--raio-sm);
}
.linha-receita.atrasada > div small { color: #00E889; font-weight: 600; }
.badge-acao.verde {
  background: var(--verde-fundo);
  color: var(--verde);
  border: 1px solid var(--verde);
}
.btn-pagamento-conta.destino-sugerido { border-color: var(--verde); }
.btn-remover-receita {
  margin-top: 12px;
  width: 100%;
  background: var(--vermelho-fundo);
  color: var(--vermelho);
  border: 1px solid var(--vermelho);
  border-radius: 12px;
  padding: 11px 14px;
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
}
.btn-remover-receita:active { transform: scale(.98); }


.detalhe-meta-modal {
  max-width: 520px;
}

.meta-detalhe-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 14px 0;
}

.meta-detalhe-grade > div {
  border: 1px solid rgba(148, 163, 184, .18);
  background: rgba(var(--rgb-tinta), .38);
  border-radius: 14px;
  padding: 10px;
}

.meta-detalhe-grade span {
  display: block;
  color: var(--texto-fraco);
  font-size: 11px;
  margin-bottom: 4px;
}

.meta-detalhe-grade strong {
  display: block;
  color: var(--texto);
  font-size: 14px;
}

@media (max-width: 520px) {
  .meta-detalhe-grade { grid-template-columns: 1fr; }
}

.meta-detalhe-subtitulo {
  margin: 18px 0 10px;
  font-weight: 800;
  color: var(--texto-principal, #f3f7ff);
}
.meta-detalhe-destaque {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px solid rgba(96, 165, 250, .45);
  border-radius: 14px;
  background: rgba(59, 130, 246, .12);
}


/* v1.25 — relatório da meta mais compacto */
.detalhe-meta-modal {
  max-width: 560px;
  padding: 18px !important;
}
.meta-detalhe-titulo { margin-bottom: 8px; }
.meta-detalhe-intro,
.meta-detalhe-aviso {
  margin: 6px 0 8px;
  line-height: 1.35;
  font-size: 12px;
}
.meta-detalhe-linhas {
  display: grid;
  gap: 7px;
  margin: 10px 0;
}
.meta-linha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.meta-linha > div {
  border: 1px solid rgba(148, 163, 184, .16);
  background: rgba(var(--rgb-tinta), .34);
  border-radius: 11px;
  padding: 7px 9px;
  min-height: 44px;
}
.meta-linha span {
  display: block;
  color: var(--texto-fraco);
  font-size: 10px;
  line-height: 1.1;
  margin-bottom: 3px;
}
.meta-linha strong {
  display: block;
  color: var(--texto);
  font-size: 13px;
  line-height: 1.15;
  overflow-wrap: anywhere;
}
.meta-detalhe-subtitulo.compacto {
  margin: 12px 0 6px;
  font-size: 13px;
}
.meta-detalhe-destaque.compacto {
  margin: 10px 0 8px;
  padding: 9px 12px;
  border-radius: 12px;
  line-height: 1.3;
}
.meta-detalhe-destaque.compacto span {
  color: var(--texto-fraco);
  font-size: 12px;
}
@media (max-width: 420px) {
  .meta-linha { grid-template-columns: 1fr; }
}

/* v1.26 — modal da meta ultra-compacto, sem rolagem em telas normais */
.detalhe-meta-modal {
  max-width: 540px !important;
  padding: 14px !important;
}
.meta-detalhe-titulo {
  margin: 0 0 6px !important;
  font-size: 16px !important;
}
.meta-detalhe-intro.ultra,
.meta-detalhe-aviso.ultra {
  margin: 4px 0 8px !important;
  font-size: 11px !important;
  line-height: 1.25 !important;
}
.meta-ultra-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin: 8px 0;
}
.meta-ultra-grid > div {
  border: 1px solid rgba(148, 163, 184, .14);
  background: rgba(var(--rgb-tinta), .34);
  border-radius: 9px;
  padding: 5px 7px;
  min-height: 34px;
}
.meta-ultra-grid span {
  display: block;
  color: var(--texto-fraco);
  font-size: 9px;
  line-height: 1.05;
  margin-bottom: 2px;
}
.meta-ultra-grid strong {
  display: block;
  color: var(--texto);
  font-size: 11px;
  line-height: 1.1;
  overflow-wrap: anywhere;
}
.meta-detalhe-destaque.ultra {
  margin: 8px 0 6px !important;
  padding: 8px 10px !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  line-height: 1.25 !important;
}
.meta-detalhe-destaque.ultra span {
  color: var(--texto-fraco);
  font-size: 11px;
}
.detalhe-meta-modal .form-acoes { margin-top: 8px !important; }
.detalhe-meta-modal .btn-primario { padding: 10px 14px !important; }
@media (max-width: 420px) {
  .meta-ultra-grid { gap: 4px; }
  .meta-ultra-grid > div { padding: 5px 6px; }
  .meta-ultra-grid strong { font-size: 10.5px; }
}

/* v1.27 — explicação da meta pelo CPP/IA, compacta e profissional */
.meta-cppia-modal {
  max-width: 560px !important;
  padding: 18px 20px !important;
}
.meta-cppia-topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.meta-cppia-sub {
  margin: 4px 0 0 !important;
  font-size: 12px !important;
  line-height: 1.35 !important;
}
.meta-cppia-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(80, 160, 255, .45);
  background: rgba(35, 105, 210, .18);
  color: var(--acento);
  border-radius: 999px;
  padding: 7px 10px;
  font-weight: 900;
  font-size: 14px;
  box-shadow: 0 0 18px rgba(65, 140, 255, .18);
}
.meta-cppia-msg {
  margin: 8px 0 10px;
  color: var(--texto-secundario);
  font-size: 12.5px;
  line-height: 1.4;
}
.meta-cppia-resumo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin: 8px 0 10px;
}
.meta-cppia-resumo > div {
  border: 1px solid rgba(120, 145, 180, .22);
  background: rgba(12, 18, 32, .45);
  border-radius: 11px;
  padding: 7px 8px;
  min-height: 46px;
}
.meta-cppia-resumo span {
  display: block;
  color: var(--texto-fraco);
  text-transform: uppercase;
  letter-spacing: .055em;
  font-size: 9px;
  margin-bottom: 4px;
}
.meta-cppia-resumo strong {
  display: block;
  color: var(--texto);
  font-size: 13px;
  line-height: 1.1;
}
.meta-cppia-lista {
  margin: 8px 0 0;
  padding-left: 17px;
  color: var(--texto-secundario);
  font-size: 12px;
  line-height: 1.38;
}
.meta-cppia-lista li { margin: 3px 0; }
.meta-cppia-modal .form-acoes { margin-top: 12px !important; }
@media (max-width: 520px) {
  .meta-cppia-modal { padding: 15px 16px !important; }
  .meta-cppia-resumo { grid-template-columns: repeat(2, 1fr); }
  .meta-cppia-lista { font-size: 11.5px; }
}

/* v1.29 — menu oficial, PWA e navegação expandida */
#appNav { grid-template-columns: repeat(5, 1fr); }
.nav-sair { color: var(--vermelho); }
.nav-sair .nav-ico { filter: saturate(1.25); }
.menu-grupo { margin-bottom: 16px; }
.menu-grupo h3 {
  margin: 0 0 8px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--muted);
}
.menu-card {
  width: 100%;
  border: 1px solid var(--borda);
  background: var(--menu-card-bg);
  color: var(--texto);
  border-radius: 16px;
  padding: 13px 14px;
  display: flex;
  align-items: center;
  gap: 13px;
  text-align: left;
  margin: 8px 0;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.03);
}
.menu-card:active { transform: scale(.992); }
.menu-card-ico { width: 28px; text-align: center; font-size: 19px; }
.menu-card-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.menu-card-text strong { font-size: 16px; line-height: 1.05; }
.menu-card-text small { font-size: 11px; color: var(--muted); line-height: 1.2; }
.menu-card-sair { border-color: rgba(248,113,113,.45); }
.mini-dashboard {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.mini-dashboard.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mini-dashboard > div {
  border: 1px solid var(--borda);
  background: rgba(var(--rgb-tinta),.65);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.mini-dashboard span { font-size: 11px; color: var(--muted); }
.mini-dashboard strong { font-size: 18px; }
/* v4.67 — destaque do recorte da meta no card de despesas */
.mini-dashboard-meta {
  border: 1px solid var(--acento, #168BFF);
  background: rgba(22,139,255,.10);
  border-radius: 14px;
  padding: 12px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mini-dashboard-meta-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mini-dashboard-meta-info span { font-size: 11px; color: var(--muted); }
.mini-dashboard-meta-info strong { font-size: 20px; color: var(--acento, #168BFF); }
.mini-dashboard-meta-qtd {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
/* v4.82 — linha de receitas no card azul "Até a meta" */
.mini-dashboard-meta-receitas {
  border-color: var(--verde);
  background: var(--verde-fundo);
  margin-top: -8px; /* encosta no card de despesas acima */
}
.mini-dashboard-meta-receitas .mini-dashboard-meta-info strong { color: var(--verde); }
.meta-receitas-label { color: var(--verde) !important; font-weight: 600; }
.mini-dashboard-meta-liquido {
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
  text-align: right;
}
/* subgrupo de receitas dentro do grupo mensal */
.subgrupo-receitas { border-top: 1px solid var(--borda); margin-top: 6px; padding-top: 4px; }
.linha-conta,
.linha-metrica {
  border: 1px solid rgba(148,163,184,.22);
  background: rgba(var(--rgb-tinta),.4);
  border-radius: 13px;
  padding: 10px 12px;
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.linha-conta div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.linha-conta small { color: var(--muted); font-size: 11px; }
.badge-mini {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 4px 8px;
  font-size: 11px;
  background: rgba(59,130,246,.15);
  border: 1px solid rgba(96,165,250,.4);
}
.badge-mini.ok { background: rgba(16,185,129,.15); border-color: rgba(16,185,129,.45); color: var(--verde); }
.badge-mini.alerta { background: rgba(245,158,11,.15); border-color: rgba(245,158,11,.45); color: var(--ambar); }
.btn-menu-atalho { width: 100%; margin-top: 10px; }
.lista-vazia.inline { display: block; padding: 12px 0; }

/* despesa: linha clicavel (abre edicao) + selo de pago clicavel */
.linha-despesa { cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.linha-despesa:active { background: rgba(var(--rgb-tinta),.6); }
.linha-despesa.paga strong { text-decoration: line-through; opacity: .65; }
/* v6.30 — despesa vencida (não paga) destaca em vermelho forte, igual ao grid */
.linha-despesa.vencida {
  background: rgba(255,59,59,0.14);
  border: 1px solid #D82626;
  border-radius: var(--raio-sm);
}
.linha-despesa.vencida > div small { color: #FF3B3B; font-weight: 600; }
.badge-acao {
  cursor: pointer;
  font-family: inherit;
  font-weight: 700;
  transition: transform .12s ease, filter .15s ease;
}
.badge-acao:active { transform: scale(.94); }
.badge-acao:hover { filter: brightness(1.15); }

/* botao de remover despesa dentro do modal */
.btn-remover-despesa {
  width: 100%;
  margin-top: 10px;
  padding: 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 700;
  background: rgba(248,113,113,.12);
  border: 1px solid rgba(248,113,113,.4);
  color: var(--vermelho);
  transition: background .15s ease;
}
.btn-remover-despesa:active { background: rgba(248,113,113,.24); }
.btn-remover-despesa[hidden] { display: none; }
.ajuda-linha {
  padding: 10px 0;
  border-bottom: 1px solid rgba(148,163,184,.18);
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ajuda-linha:last-child { border-bottom: 0; }
.ajuda-linha span { color: var(--muted); font-size: 13px; }
@media (max-width: 380px) {
  .nav-txt { font-size: 10px; }
  .nav-ico { font-size: 16px; }
  .menu-card-text strong { font-size: 15px; }
}

/* v1.53 — Auditoria Geral / Linha do Tempo Operacional */
.auditoria-tabela-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(148,163,184,.18);
  border-radius: 14px;
  background: rgba(var(--rgb-tinta),.28);
  margin-top: 10px;
}
.auditoria-tabela {
  width: 100%;
  min-width: 980px;
  border-collapse: collapse;
  font-size: 12px;
}
.auditoria-tabela th,
.auditoria-tabela td {
  padding: 9px 8px;
  border-bottom: 1px solid rgba(148,163,184,.14);
  text-align: left;
  vertical-align: top;
  white-space: nowrap;
}
.auditoria-tabela th {
  position: sticky;
  top: 0;
  background: rgba(var(--rgb-tinta),.96);
  color: var(--muted);
  font-weight: 800;
  z-index: 1;
}
.auditoria-tabela tr:last-child td { border-bottom: 0; }
.auditoria-tabela .linha-turno td:first-child { border-left: 3px solid rgba(56,189,248,.85); }
.auditoria-tabela .linha-abastecimento td:first-child { border-left: 5px solid #16c46a; }
.auditoria-tabela .status-celula { font-weight: 800; }
.auditoria-tabela tr.status-ok .status-celula { color: var(--verde); }
.auditoria-tabela tr.status-atencao .status-celula { color: var(--ambar); }
.auditoria-tabela tr.status-critico .status-celula { color: var(--vermelho); }
.auditoria-tabela tr.status-ignorado { opacity: .68; }
.auditoria-tabela tr.status-ignorado .status-celula { color: var(--texto-suave); }



/* v1.80 — ajuste final: botão abastecimento vermelho translúcido real.
   Mantém tamanho/layout da v1.80, muda apenas preenchimento, borda e centralização. */
.btn-abast.btn-abast-destaque,
#btnNovoAbastecimento.btn-abast {
  width: 100% !important;
  min-height: 58px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 13px !important;
  text-align: left !important;
  border: 1px solid var(--abast-borda-hover) !important;
  background: var(--abast-bg) !important;
  color: var(--abast-cor) !important;
  box-shadow: var(--abast-glow) !important;
}
.btn-abast.btn-abast-destaque:hover,
#btnNovoAbastecimento.btn-abast:hover {
  background: var(--abast-bg-active) !important;
  border-color: var(--abast-borda-hover) !important;
}
.btn-abast.btn-abast-destaque:active,
#btnNovoAbastecimento.btn-abast:active {
  transform: scale(.992) !important;
  background: var(--abast-bg-active) !important;
}
#btnNovoAbastecimento .btn-abast-ico {
  width: 30px !important;
  min-width: 30px !important;
  text-align: center !important;
  font-size: 22px !important;
  line-height: 1 !important;
}
#btnNovoAbastecimento .btn-abast-text {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
  min-width: 0 !important;
}
#btnNovoAbastecimento .btn-abast-text strong {
  font-size: 16px !important;
  line-height: 1.05 !important;
  font-weight: 850 !important;
}
#btnNovoAbastecimento .btn-abast-text small {
  font-size: 11px !important;
  line-height: 1.2 !important;
  color: var(--abast-cor-sub) !important;
  font-weight: 650 !important;
}




/* v1.80 — centralização interna do botão Registrar abastecimento.
   Mantém tamanho, cor, borda e comportamento da v1.80. */
.btn-abast.btn-abast-destaque,
#btnNovoAbastecimento.btn-abast {
  justify-content: center !important;
  text-align: center !important;
}
#btnNovoAbastecimento .btn-abast-ico {
  width: 30px !important;
  min-width: 30px !important;
  text-align: center !important;
  flex: 0 0 auto !important;
}
#btnNovoAbastecimento .btn-abast-text {
  align-items: center !important;
  text-align: center !important;
}
#btnNovoAbastecimento .btn-abast-text strong,
#btnNovoAbastecimento .btn-abast-text small {
  text-align: center !important;
}



/* v1.80 — despesas parceladas */
.form-ajuda {
  margin: -4px 0 4px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}


/* v1.80 — proteção contra assistente sobreposto */
#assistente[hidden] {
  display: none !important;
}
body:not(.cpp-assistente-ativo) #assistente {
  display: none !important;
}


/* v1.80 — proteção contra templates vazando na tela */
template {
  display: none !important;
}


/* v1.80 — alerta de autonomia/energia negativa */
.energia-detalhe-alerta {
  border-color: rgba(248, 113, 113, 0.50) !important;
  background: rgba(127, 29, 29, 0.14) !important;
}
.energia-detalhe-alerta strong {
  color: var(--vermelho) !important;
}


/* v1.80 — reordenar contas */
.conta-acoes-ordem {
  display: flex;
  align-items: center;
  gap: 6px;
}
.conta-mover {
  min-width: 38px;
  padding-left: 10px;
  padding-right: 10px;
  font-weight: 900;
}
.conta-mover:disabled {
  opacity: .32;
  cursor: not-allowed;
}

/* v1.80 — faturas consolidadas de cartão */
.subtitulo-mini {
  margin: 16px 0 8px;
  color: var(--texto);
  font-size: 13px;
  letter-spacing: .02em;
}
.fatura-card {
  margin: 10px 0;
  border: 1px solid var(--borda);
  border-radius: 16px;
  background: rgba(var(--rgb-tinta),.35);
  overflow: hidden;
}
.fatura-card summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 13px 14px;
}
.fatura-card summary::-webkit-details-marker { display: none; }
.fatura-card summary small {
  display: block;
  color: var(--texto-suave);
  margin-top: 3px;
}
.linha-fatura-item {
  margin: 0;
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  background: rgba(2,6,23,.18);
}

/* v1.80 — despesas agrupadas por mês */
.grupo-mes-despesas {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--borda);
}
.grupo-mes-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  color: var(--texto);
}
.grupo-mes-cabecalho small {
  display: block;
  margin-top: 3px;
  color: var(--texto-suave);
  font-size: 12px;
}

/* v1.80 — registros ignorados precisam parecer realmente fora do cálculo */
.card.registro-ignorado,
.card.ignorado {
  opacity: .55;
  filter: grayscale(.45);
  border-color: rgba(148,163,184,.28) !important;
  background: rgba(var(--rgb-tinta),.45) !important;
}
.card.registro-ignorado::before,
.card.ignorado::before {
  content: "IGNORADO NOS CÁLCULOS";
  position: absolute;
  top: 10px;
  right: 12px;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(var(--rgb-tinta),.85);
  color: rgba(203,213,225,.9);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
}
.card.registro-ignorado .card-status.ignorado-badge,
.card.ignorado .card-status.ignorado-badge {
  background: rgba(100,116,139,.20);
  color: var(--texto-suave);
  border-color: rgba(148,163,184,.36);
}
.linha-tempo-ignorado,
tr.status-ignorado,
.status-ignorado {
  opacity: .58;
  filter: grayscale(.35);
}


/* v1.80 — ignorado mais escuro/apagadão */
.card.registro-ignorado,
.card.ignorado {
  opacity: .38 !important;
  filter: grayscale(.85) brightness(.58) contrast(.82) !important;
  background: rgba(2, 6, 23, .76) !important;
  border-color: rgba(71, 85, 105, .55) !important;
  box-shadow: none !important;
}
.card.registro-ignorado .card-secao,
.card.ignorado .card-secao,
.card.registro-ignorado .card-metrica,
.card.ignorado .card-metrica,
.card.registro-ignorado .card-parecer,
.card.ignorado .card-parecer {
  background: rgba(2, 6, 23, .56) !important;
  border-color: rgba(71, 85, 105, .38) !important;
}
.card.registro-ignorado .card-kicker,
.card.ignorado .card-kicker,
.card.registro-ignorado .card-valor,
.card.ignorado .card-valor,
.card.registro-ignorado .card-label,
.card.ignorado .card-label {
  color: rgba(148, 163, 184, .78) !important;
}
.card.registro-ignorado::before,
.card.ignorado::before {
  background: rgba(2, 6, 23, .96) !important;
  color: rgba(203, 213, 225, .92) !important;
  border-color: rgba(148, 163, 184, .45) !important;
}


/* v1.80 — controles de ignorado mais legíveis + auditoria de duplicidade */
.card.registro-ignorado::before,
.card.ignorado::before {
  background: rgba(var(--rgb-tinta), .98) !important;
  color: var(--texto) !important;
  border-color: rgba(226, 232, 240, .72) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 8px 24px rgba(0,0,0,.28);
}
.card.registro-ignorado .card-status.ignorado-badge,
.card.ignorado .card-status.ignorado-badge {
  background: rgba(248, 250, 252, .12) !important;
  color: var(--texto) !important;
  border-color: rgba(226, 232, 240, .52) !important;
  opacity: 1 !important;
}
.card.registro-ignorado [data-acao="ignorar"],
.card.ignorado [data-acao="ignorar"] {
  background: rgba(22, 101, 52, .34) !important;
  color: var(--verde) !important;
  border-color: rgba(74, 222, 128, .62) !important;
  opacity: 1 !important;
  filter: none !important;
  font-weight: 900 !important;
  box-shadow: 0 0 0 1px rgba(74,222,128,.08), 0 8px 20px rgba(0,0,0,.25);
}
.card.registro-ignorado [data-acao="ignorar"]:active,
.card.ignorado [data-acao="ignorar"]:active {
  background: rgba(21, 128, 61, .48) !important;
}
.linha-possivel-duplicado td,
.linha-registro-orfao td {
  border-left: 3px solid rgba(251, 191, 36, .75);
}


/* v1.80 — card ignorado escuro, mas controles legíveis
   Correção: não usar opacity no card inteiro, porque isso apaga também
   o botão Reativar cálculo e o badge. */
.card.registro-ignorado,
.card.ignorado {
  opacity: 1 !important;
  filter: grayscale(.55) brightness(.72) contrast(.86) !important;
  background: rgba(2, 6, 23, .84) !important;
  border-color: rgba(51, 65, 85, .72) !important;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, .95) !important;
}

/* Apaga o conteúdo interno, não o container inteiro. */
.card.registro-ignorado .card-topo,
.card.ignorado .card-topo,
.card.registro-ignorado .card-secao,
.card.ignorado .card-secao,
.card.registro-ignorado .card-parecer,
.card.ignorado .card-parecer {
  opacity: .36 !important;
}

/* Mantém status e ações vivos. */
.card.registro-ignorado .card-status,
.card.ignorado .card-status,
.card.registro-ignorado .card-acoes,
.card.ignorado .card-acoes,
.card.registro-ignorado::before,
.card.ignorado::before {
  opacity: 1 !important;
  filter: none !important;
  z-index: 3;
}

.card.registro-ignorado::before,
.card.ignorado::before {
  background: rgba(var(--rgb-tinta), .98) !important;
  color: #ffffff !important;
  border-color: rgba(226, 232, 240, .82) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.10), 0 8px 22px rgba(0,0,0,.45) !important;
}

.card.registro-ignorado .card-status.ignorado-badge,
.card.ignorado .card-status.ignorado-badge {
  background: rgba(var(--rgb-tinta), .96) !important;
  color: #ffffff !important;
  border-color: rgba(226, 232, 240, .70) !important;
  opacity: 1 !important;
  filter: none !important;
}

.card.registro-ignorado [data-acao="ignorar"],
.card.ignorado [data-acao="ignorar"] {
  background: rgba(20, 83, 45, .78) !important;
  color: var(--verde) !important;
  border-color: rgba(74, 222, 128, .95) !important;
  opacity: 1 !important;
  filter: none !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  box-shadow: 0 0 0 1px rgba(74,222,128,.18), 0 8px 20px rgba(0,0,0,.35) !important;
}

/* Editar e remover continuam discretos, mas não invisíveis. */
.card.registro-ignorado [data-acao="editar"],
.card.ignorado [data-acao="editar"],
.card.registro-ignorado [data-acao="remover"],
.card.ignorado [data-acao="remover"] {
  opacity: .62 !important;
}


/* v1.80 — despesas: faturas e diretas separadas dentro do mês */
.grupo-mes-despesas-v177 {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.subgrupo-despesas {
  border-radius: 18px;
  border: 1px solid var(--borda);
  padding: 12px;
}
.subgrupo-cartao {
  background: linear-gradient(180deg, rgba(59,130,246,.08), rgba(var(--rgb-tinta),.18));
  border-color: rgba(96,165,250,.24);
}
.subgrupo-direto {
  background: linear-gradient(180deg, rgba(148,163,184,.07), rgba(var(--rgb-tinta),.14));
  border-color: rgba(148,163,184,.22);
}
.subgrupo-despesas-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding: 2px 2px 10px;
  border-bottom: 1px solid rgba(148,163,184,.16);
}
.subgrupo-despesas-topo span {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .02em;
  color: var(--texto);
}
.subgrupo-despesas-topo strong {
  font-size: 13px;
  font-weight: 900;
  color: var(--texto);
}
.fatura-card-v177 {
  border-left: 3px solid rgba(96,165,250,.78);
  background: rgba(var(--rgb-tinta),.30);
}
.fatura-card-v177 + .fatura-card-v177 {
  margin-top: 10px;
}
.itens-fatura-v177 {
  margin-top: 8px;
  border-top: 1px dashed rgba(148,163,184,.18);
  padding-top: 8px;
}
.linha-fatura-item-v177 {
  margin-left: 8px;
  border-left: 2px solid rgba(96,165,250,.35);
  background: rgba(var(--rgb-tinta),.22);
}
.linha-despesa-direta-v177 {
  border-left: 3px solid rgba(251,191,36,.58);
}
.linha-despesa-direta-v177 + .linha-despesa-direta-v177 {
  margin-top: 10px;
}


/* v1.80 — formulário de despesa por fluxo lógico */
.form-despesa-v178 .form-bloco-v178 {
  border: 1px solid rgba(148,163,184,.16);
  background: rgba(var(--rgb-tinta),.22);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
}
.form-despesa-v178 .form-bloco-titulo-v178 {
  color: var(--muted);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.form-despesa-v178 [hidden] {
  display: none !important;
}


/* v1.80 — formulário de despesa mais compacto */
.form-despesa-v178 {
  gap: 8px !important;
}

.form-despesa-v178 .form-titulo {
  margin-bottom: 8px !important;
}

.form-despesa-v178 .form-bloco-v178 {
  padding: 8px 10px !important;
  margin-bottom: 8px !important;
  border-radius: 12px !important;
}

.form-despesa-v178 .form-bloco-titulo-v178 {
  font-size: 9px !important;
  line-height: 1.1 !important;
  margin-bottom: 6px !important;
}

.form-despesa-v178 .campo {
  gap: 4px !important;
}

.form-despesa-v178 .campo-label {
  font-size: 10px !important;
  line-height: 1.15 !important;
}

.form-despesa-v178 .campo-input {
  min-height: 34px !important;
  height: 34px !important;
  padding: 6px 10px !important;
  font-size: 13px !important;
  border-radius: 8px !important;
}

.form-despesa-v178 .campo-par {
  gap: 8px !important;
}

.form-despesa-v178 .form-ajuda {
  margin: 5px 0 0 !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
  color: rgba(148,163,184,.82) !important;
  max-height: none !important;
  overflow: visible !important;
}

.form-despesa-v178 [data-campo="camposCartao"] .form-ajuda {
  display: block !important;
  position: static !important;
  clear: both !important;
}

.form-despesa-v178 [data-campo="camposParcelas"] .form-ajuda {
  display: block !important;
  position: static !important;
  clear: both !important;
}

.form-despesa-v178 .form-acoes {
  margin-top: 8px !important;
  gap: 8px !important;
}

.form-despesa-v178 .form-acoes button {
  min-height: 38px !important;
  height: 38px !important;
  border-radius: 10px !important;
}

.form-despesa-v178 .campo-inline {
  padding: 4px 0 !important;
  min-height: auto !important;
}

/* v1.84 — Conferência do painel compacta na Home */
.home-estoque {
  margin: 0;
}
.home-estoque-card {
  width: 100%;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.045);
  border-radius: 11px;
  padding: 7px 9px;
  color: inherit;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.home-estoque-card-compacto { min-height: 0; }
.home-estoque-linha {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.home-estoque-linha.divergencia {
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
}
.home-estoque-card strong { font-size: .82rem; line-height: 1.15; }
.home-estoque-card span { font-size: .84rem; opacity: .95; }
.home-estoque-card small { font-size: .70rem; opacity: .72; white-space: nowrap; }
.home-estoque-linha.divergencia small { white-space: normal; }
.home-estoque-card.alerta {
  border-color: var(--ambar);
  background: var(--ambar-fundo);
}
@media (max-width: 380px) {
  .home-estoque-linha { align-items: flex-start; flex-direction: column; gap: 2px; }
  .home-estoque-card small { white-space: normal; }
}
.energia-conferencia {
  margin-top: 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.055);
  border-radius: 16px;
  padding: 14px;
}
.energia-conferencia strong { display: block; margin-bottom: 6px; }
.energia-conferencia p { margin: 0 0 12px; opacity: .82; font-size: .88rem; }
.energia-aviso-combustivel {
  margin-top: 14px;
  border: 1px solid var(--ambar);
  background: var(--ambar-fundo);
  border-radius: 16px;
  padding: 14px;
}
.energia-aviso-combustivel strong { display: block; margin-bottom: 6px; color: var(--ambar); }
.energia-aviso-combustivel p { margin: 0; opacity: .9; font-size: .88rem; }
.energia-sugestao-kml {
  margin-top: 14px;
  border: 1px solid var(--acento);
  background: var(--acento-fundo);
  border-radius: 16px;
  padding: 14px;
}
.energia-sugestao-kml strong { display: block; margin-bottom: 6px; color: var(--acento); }
.energia-sugestao-kml p { margin: 0 0 12px; opacity: .9; font-size: .88rem; }
.energia-sugestao-kml b { color: var(--texto); }
.ajuste-resumo-atual {
  border: 1px dashed rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 8px 0 12px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
}
.ajuste-resumo-atual span { opacity: .72; }


/* v1.86 — Combustão: nível do tanque em barras de painel */
.campo-tanque-opcoes { margin-top: 10px; }
.tanque-opcoes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 8px;
}
.tanque-opcao {
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.055);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.tanque-opcao input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tanque-opcao-barra {
  min-height: 48px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
}
.tanque-barras {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 5px;
  min-width: 0;
}
.tanque-barras i {
  display: block;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
}
.tanque-barras i.cheia {
  background: rgba(245,248,255,.92);
}
.tanque-barras i.reserva {
  background: linear-gradient(90deg, #ff3b30, #ff6a3d);
  box-shadow: 0 0 10px rgba(255,59,48,.25);
}
.tanque-opcao-texto {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 6px;
  white-space: nowrap;
  line-height: 1.1;
}
.tanque-opcao strong { font-size: .94rem; }
.tanque-opcao small { font-size: .72rem; opacity: .72; }
.tanque-opcao:has(input:checked) {
  border-color: rgba(57,151,255,.78);
  background: rgba(57,151,255,.18);
  box-shadow: 0 0 0 1px rgba(57,151,255,.22) inset;
}
.tanque-opcao:has(input:checked) .tanque-barras i.cheia {
  background: linear-gradient(90deg, rgba(255,255,255,.95), rgba(120,190,255,.95));
}
.tanque-opcao:has(input:checked) .tanque-barras i.vazia {
  background: rgba(255,255,255,.18);
}
.campo-ajuda {
  display: block;
  margin-top: 8px;
  font-size: .74rem;
  line-height: 1.3;
  opacity: .68;
}
@media (max-width: 420px) {
  .tanque-opcao-barra {
    min-height: 48px;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
    padding: 9px 10px;
  }
  .tanque-barras { gap: 4px; }
  .tanque-barras i { height: 8px; }
  .tanque-opcao-texto { flex-direction: column; align-items: flex-end; gap: 2px; }
}


/* v5.47 — reloginho de combustível (leitura no card + seletor arrastável no modal) */
.relogio-tanque-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 8px;
}
.relogio-tanque-svg {
  width: 100%;
  max-width: 140px;
  height: auto;
  overflow: visible;
  display: block;
}
.relogio-tanque-label-nivel {
  font-size: 11px;
  color: var(--texto-fraco);
  margin-top: 2px;
  text-align: center;
  line-height: 1.2;
}
/* Seletor arrastável no modal */
.relogio-seletor-wrap {
  display: block;
  margin-top: 8px;
  width: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  text-align: center;
}
.relogio-seletor-svg {
  width: 100%;
  max-width: 200px;
  height: auto;
  overflow: hidden;
  display: block;
  cursor: grab;
  touch-action: none;
}
.relogio-seletor-svg:active { cursor: grabbing; }
.relogio-seletor-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto);
  text-align: center;
}
.relogio-seletor-sublabel {
  font-size: 11px;
  color: var(--texto-fraco);
  text-align: center;
  margin-top: -2px;
}

/* v1.90 — card clicável da base prática da autonomia */
.energia-metrica-acao {
  cursor: pointer;
  border-color: rgba(96, 165, 250, 0.35);
  background: rgba(37, 99, 235, 0.10);
}
.energia-metrica-acao:active,
.energia-metrica-acao:focus-visible {
  outline: 2px solid rgba(96, 165, 250, 0.85);
  outline-offset: 2px;
}
.base-autonomia-modal .meta-cppia-lista {
  margin-top: 16px;
}

/* v1.93 — Linha do Tempo de Aprendizado em Blocos */
.auditoria-tabela { min-width: 1240px; }
.auditoria-tabela .aprendido-celula {
  white-space: pre-line;
  min-width: 320px;
  max-width: 360px;
  line-height: 1.35;
  color: var(--acento);
}
.auditoria-tabela tr.status-ignorado .aprendido-celula { color: var(--texto-suave); }


/* v1.99 — Auditoria profissional com colunas reais */
.auditoria-tabela { min-width: 1320px; }
.auditoria-tabela tr.linha-turno td { background: rgba(59,130,246,.07); }
.auditoria-tabela tr.linha-abastecimento td { background: rgba(22,196,106,.15); }
.auditoria-tabela tr.linha-abastecimento td:nth-child(2) { color: var(--verde); font-weight: 700; }
.auditoria-tabela tr.linha-turno td:nth-child(2) { color: var(--acento); }
.auditoria-tabela tr.linha-uso-pessoal td { background: rgba(148,163,184,.07); }
.auditoria-tabela tr.linha-uso-pessoal td:first-child { border-left: 3px dashed rgba(148,163,184,.7); }
.auditoria-tabela tr.linha-uso-pessoal td:nth-child(2) { color: var(--texto-suave); font-style: italic; }
.auditoria-tabela .aprendido-celula,
.auditoria-tabela .motivo-celula { white-space: normal; min-width: 120px; max-width: 220px; line-height: 1.25; }
.auditoria-tabela .motivo-celula { color: var(--texto-suave); min-width: 220px; }
.auditoria-tabela .status-celula { text-align: center; font-size: 16px; }
.auditoria-tabela tr.status-ignorado td { background: rgba(var(--rgb-tinta),.62); }


/* v2.00 — Auditoria: linha da tabela navega para o card correspondente */
.auditoria-tabela tr.linha-clicavel {
  cursor: pointer;
}
.auditoria-tabela tr.linha-clicavel:hover td {
  background: rgba(59,130,246,.10);
}
.audit-card-destacado {
  outline: 2px solid rgba(250,204,21,.95) !important;
  box-shadow: 0 0 0 4px rgba(250,204,21,.18), 0 0 28px rgba(250,204,21,.22) !important;
  transition: outline .18s ease, box-shadow .18s ease;
}


/* v2.03 — filtros rápidos da linha do tempo */
.auditoria-filtros {
  display: flex;
  gap: 8px;
  align-items: center;
  overflow-x: auto;
  padding: 4px 2px 12px;
  margin: 6px 0 8px;
  -webkit-overflow-scrolling: touch;
}
.auditoria-filtro-btn {
  flex: 0 0 auto;
  border: 1px solid var(--borda-2);
  background: rgba(148,163,184,.10);
  color: var(--texto-2);
  border-radius: 999px;
  padding: 8px 11px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
}
.auditoria-filtro-btn.ativo {
  background: rgba(59,130,246,.22);
  color: var(--texto);
  border-color: rgba(96,165,250,.75);
  box-shadow: 0 0 0 2px rgba(59,130,246,.12);
}
.auditoria-filtro-info {
  flex: 0 0 auto;
  color: var(--texto-3);
  font-size: 12px;
  font-weight: 700;
  margin-left: 2px;
}
.auditoria-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 14px;
  margin: 8px 0 12px;
  font-size: 11.5px;
  color: var(--texto-3);
}
.auditoria-legenda span { white-space: nowrap; }
.auditoria-legenda b { font-style: normal; }


/* v2.04 — motivo recolhível na auditoria */
.motivo-celula {
  text-align: center;
  min-width: 52px;
}
.motivo-auditoria {
  position: relative;
  display: inline-block;
}
.motivo-auditoria summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid var(--borda-2);
  background: rgba(148,163,184,.12);
  color: var(--texto);
  font-weight: 900;
}
.motivo-auditoria summary::-webkit-details-marker {
  display: none;
}
.motivo-auditoria[open] summary {
  background: rgba(59,130,246,.20);
  border-color: rgba(96,165,250,.70);
}
.motivo-auditoria-texto {
  position: absolute;
  right: 0;
  top: 34px;
  z-index: 20;
  min-width: 220px;
  max-width: min(320px, 78vw);
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--borda-2);
  background: var(--superficie-2);
  color: var(--texto);
  box-shadow: 0 14px 34px rgba(0,0,0,.35);
  text-align: left;
  white-space: normal;
  line-height: 1.35;
}


/* v2.06 — motivo expandido dentro da linha */
.motivo-auditoria-btn {
  cursor: pointer;
  user-select: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  min-height: 26px;
  border-radius: 999px;
  border: 1px solid var(--borda-2);
  background: rgba(148,163,184,.12);
  color: var(--texto);
  font-weight: 900;
}
tr.motivo-aberto .motivo-auditoria-btn {
  background: rgba(59,130,246,.22);
  border-color: rgba(96,165,250,.75);
}
.linha-motivo-auditoria td.motivo-auditoria-expandido {
  padding: 10px 12px !important;
  background: rgba(var(--rgb-tinta),.72);
  border-top: 0;
  color: var(--texto-2);
  font-size: 13px;
  line-height: 1.38;
  text-align: left;
  white-space: normal;
}
.linha-motivo-auditoria[hidden] {
  display: none !important;
}


/* v2.07 — motivo flutuante ao lado da setinha */
.motivo-auditoria-flutuante {
  position: fixed;
  z-index: 9999;
  padding: 11px 13px;
  border-radius: 14px;
  border: 1px solid rgba(96,165,250,.45);
  background: rgba(var(--rgb-tinta),.96);
  color: var(--texto);
  box-shadow: 0 18px 42px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.03) inset;
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
  white-space: pre-line;
  backdrop-filter: blur(8px);
}


/* v2.11 — tela final do Assistente de Configuração */
.assist-final .assist-ico {
  color: var(--ok);
}
.assist-checklist-final {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.assist-check-item {
  border: 1px solid var(--borda);
  background: var(--painel-2);
  border-radius: 14px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.assist-check-item strong {
  color: var(--texto);
  font-size: 13.5px;
}
.assist-check-item span {
  color: var(--texto-suave);
  font-size: 12.5px;
  line-height: 1.55;
}
.assist-final-acoes {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}
.assist-final-acoes .btn-primario,
.assist-final-acoes .btn-secundario {
  flex: 1;
  padding: 12px;
}
@media (max-width: 380px) {
  .assist-final-acoes { flex-direction: column; }
}


/* v2.19 — investigador de divergência da aba Energia */
.energia-conferencia-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 10px;
}
.energia-conferencia-acoes .btn-primario,
.energia-conferencia-acoes .btn-secundario {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  padding: 10px 12px;
  font-size: 13px;
  text-align: center;
}
.energia-btn-alerta {
  border-color: rgba(245, 158, 11, .45) !important;
  background: rgba(245, 158, 11, .12) !important;
  color: var(--texto, #e5edf8) !important;
}
/* v4.95 — reconciliação de autonomia */
.energia-detalhe-ok {
  background: var(--verde-fundo);
  border: 1px solid var(--verde);
  border-left: 3px solid var(--verde);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
  margin-top: 12px;
}
.energia-detalhe-ok strong { color: var(--verde); }
.energia-reconcilio-comparacao {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0 8px;
}
.energia-reconcilio-item {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border-radius: var(--raio-sm);
  padding: 10px 12px;
  text-align: center;
}
.energia-reconcilio-label {
  display: block;
  font-size: 11px;
  color: var(--texto-suave, #9ca8b8);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.energia-reconcilio-valor {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: var(--texto, #fff);
}
.energia-reconcilio-painel { color: #168bff; }
.energia-reconcilio-sep {
  font-size: 18px;
  color: var(--texto-suave, #9ca8b8);
}

/* v5.34 — Placar de precisão CPP × Painel */
.placar-precisao { margin-top: 12px; }
/* título via span — foge da regra .energia-detalhe strong { display:block } */
.placar-titulo {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--acento, #168bff);
  margin-bottom: 12px;
}
.placar-precisao-score {
  display: flex;
  align-items: stretch;
  gap: 10px;
  margin: 0 0 6px;
}
.placar-precisao-lado {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 1px solid transparent;
  border-radius: var(--raio-sm);
  padding: 12px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.placar-precisao-lado.vence {
  border-color: var(--verde);
  background: rgba(0,200,116,0.10);
}
.placar-precisao-num {
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  color: var(--texto, #fff);
}
.placar-precisao-lado.vence .placar-precisao-num { color: var(--verde); }
.placar-precisao-tag {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-suave, #9ca8b8);
}
.placar-precisao-x {
  align-self: center;
  font-size: 18px;
  font-weight: 700;
  color: var(--texto-suave, #9ca8b8);
}
.placar-precisao-empates {
  font-size: 11px;
  color: var(--texto-suave, #9ca8b8);
  text-align: center;
  margin: 0 0 10px;
}
.placar-precisao-veredito {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto, #fff);
  margin: 0 0 12px;
  line-height: 1.5;
}
/* bloco da última rodada — estruturado em linhas alinhadas */
.placar-rodada-bloco {
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
}
.placar-rodada-contexto {
  font-size: 11px;
  color: var(--texto-suave, #9ca8b8);
  margin: 0 0 8px;
  line-height: 1.5;
}
.placar-rodada-label {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  opacity: .6;
  margin-bottom: 2px;
}
.placar-rodada-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.placar-rodada-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.03);
}
.placar-rodada-realidade {
  background: rgba(255,255,255,0.06);
}
.placar-rodada-vence {
  background: var(--verde-fundo);
}
.placar-rodada-key {
  font-size: 12px;
  color: var(--texto-suave, #9ca8b8);
}
.placar-rodada-vence .placar-rodada-key { color: var(--verde); }
.placar-rodada-realidade .placar-rodada-key { color: var(--texto, #fff); font-weight: 600; }
.placar-rodada-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--texto, #fff);
  text-align: right;
}
.placar-rodada-vence .placar-rodada-val { color: var(--verde); }
.placar-rodada-realidade .placar-rodada-val { color: var(--texto, #fff); }
.placar-rodada-val em {
  font-style: normal;
  font-size: 11px;
  font-weight: 400;
  color: var(--texto-suave, #9ca8b8);
  margin-left: 4px;
}
.energia-reconcilio-nota {
  font-size: 12px;
  color: var(--texto-suave, #9ca8b8);
  margin: 0 0 4px;
}
.energia-investigador-modal .energia-divergencia-resumo {
  margin-top: 12px;
  margin-bottom: 14px;
}
.energia-investigador-lista {
  display: grid;
  gap: 12px;
  margin: 14px 0;
}
.energia-investigador-item {
  border: 1px solid rgba(148, 163, 184, .24);
  background: rgba(var(--rgb-tinta), .35);
  border-radius: 14px;
  padding: 12px;
}
.energia-investigador-topo {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 8px;
}
.energia-investigador-topo span,
.energia-investigador-item p {
  color: var(--texto-suave, #9ca3af);
}
.energia-investigador-item p {
  margin: 6px 0;
  line-height: 1.45;
}
.energia-investigador-item b {
  color: var(--texto, #e5edf8);
}
html[data-tema="claro"] .energia-investigador-item {
  background: rgba(255,255,255,.76);
  border-color: rgba(15, 23, 42, .12);
}


/* v2.20 — destaque do evento suspeito na linha do tempo vindo do Investigador de Divergência */
.linha-tempo-destaque-aviso {
  border: 1px solid rgba(245, 158, 11, .42);
  background: rgba(245, 158, 11, .10);
  color: var(--texto, #e5edf8);
  border-radius: 14px;
  padding: 12px 14px;
  margin: 10px 0 12px;
}
.linha-tempo-destaque-aviso strong {
  display: block;
  margin-bottom: 4px;
}
.linha-tempo-destaque-aviso p {
  margin: 0;
  color: var(--texto-suave, #9ca3af);
  line-height: 1.45;
}
.auditoria-tabela tr.linha-divergencia-destacada td {
  background: rgba(245, 158, 11, .16) !important;
  box-shadow: inset 0 1px 0 rgba(245, 158, 11, .22), inset 0 -1px 0 rgba(245, 158, 11, .22);
}
.auditoria-tabela tr.linha-divergencia-destacada td:first-child {
  border-left: 4px solid rgba(245, 158, 11, .95) !important;
}
html[data-tema="claro"] .linha-tempo-destaque-aviso {
  background: rgba(245, 158, 11, .13);
  border-color: rgba(180, 83, 9, .28);
}
html[data-tema="claro"] .auditoria-tabela tr.linha-divergencia-destacada td {
  background: rgba(245, 158, 11, .18) !important;
}

/* v2.25 — comparação opcional entre autonomia do painel e estimativa CPP */
.energia-comparativo-autonomia {
  border-color: rgba(96, 165, 250, 0.55);
  background: rgba(37, 99, 235, 0.10);
}
.energia-comparativo-autonomia p {
  margin: 8px 0 0;
}


/* v2.31 — suporte fixo no cabeçalho; antigo flutuante desativado */
.suporte-flutuante { display: none !important; }

/* v2.32 — suporte WhatsApp com imagem enviada pelo usuário */
.header-support-whatsapp {
  width: 40px; height: 40px; min-width: 0;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.28), 0 8px 18px rgba(0,0,0,.22);
}
.header-support-whatsapp:active {
  transform: scale(.98);
  background: transparent;
}
.header-support-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
[data-tema="claro"] .header-support-whatsapp {
  background: transparent;
  border: 0;
  box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.22), 0 6px 14px rgba(15, 23, 42, .12);
}


/* v2.34 — ações seguras de fatura de cartão */
.fatura-acoes-v233 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 10px 0 8px;
}
.btn-fatura-v233 {
  min-height: 38px;
  border-radius: 10px;
  font-weight: 800;
  font-size: 0.86rem;
}
.fatura-nota-v233 {
  margin: 0 0 10px;
  color: var(--texto-fraco);
  font-size: 0.82rem;
  line-height: 1.35;
}
@media (max-width: 420px) {
  .fatura-acoes-v233 { grid-template-columns: 1fr; }
}


/* Entenda o CPP — guia de filosofia e uso */
.ajuda-cpp-hero {
  border-color: rgba(34,197,94,.32);
}
.ajuda-cpp-final {
  border-color: rgba(96,165,250,.32);
}
.ajuda-destaque {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 13px;
  border-radius: 14px;
  border: 1px solid rgba(250,204,21,.34);
  background: rgba(250,204,21,.10);
}
.ajuda-destaque strong {
  font-size: 13px;
  color: var(--texto);
}
.ajuda-destaque span {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--texto-suave);
}
.ajuda-cpp-hero .config-card-nota,
.ajuda-cpp-final .config-card-nota {
  font-size: 13px;
}

/* v2.38 — Entenda o CPP recolhível */
.ajuda-topico {
  padding: 0;
  overflow: hidden;
}
.ajuda-topico summary {
  cursor: pointer;
  list-style: none;
  padding: 15px 16px;
  font-weight: 800;
  color: var(--texto);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.ajuda-topico summary::-webkit-details-marker { display: none; }
.ajuda-topico summary::after {
  content: '▾';
  font-size: 13px;
  color: var(--muted);
  transition: transform .18s ease;
}
.ajuda-topico[open] summary::after { transform: rotate(180deg); }
.ajuda-topico[open] summary {
  border-bottom: 1px solid rgba(148,163,184,.16);
}
.ajuda-topico > p,
.ajuda-topico > .ajuda-linha,
.ajuda-topico > .ajuda-destaque {
  margin-left: 16px;
  margin-right: 16px;
}
.ajuda-topico > p:first-of-type { margin-top: 12px; }
.ajuda-topico > .ajuda-linha:last-child,
.ajuda-topico > .ajuda-destaque:last-child { margin-bottom: 14px; }

/* v2.39 — Resumo e Evolução real */
.evolucao-filtros-v239 { margin-bottom: 14px; }
.evolucao-filtros-grid-v239 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.evolucao-acoes-v239 {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.evolucao-meta-v239,
.evolucao-indicadores-v239,
.evolucao-periodo-v239 { margin-top: 14px; }
.evolucao-uso-pessoal-v508 { margin-top: 14px; }
.evolucao-accordions-wrap { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.destaque-total-v239 {
  border-color: rgba(80, 148, 255, .45) !important;
  background: rgba(80, 148, 255, .08) !important;
}
.texto-alerta { color: var(--vermelho) !important; }
/* linha com leitura curta expandida */
.evolucao-linha-expandivel {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.evolucao-linha-topo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.evolucao-linha-leitura {
  font-size: 11px;
  color: var(--texto-suave);
  line-height: 1.5;
  margin: 0;
  padding-top: 2px;
  border-top: 1px solid rgba(148,163,184,.12);
}
.evolucao-uso-pessoal-vazio {
  padding: 10px 0 4px;
  font-size: 13px;
  color: var(--texto-suave);
}
@media (max-width: 520px) {
  .evolucao-filtros-grid-v239 { grid-template-columns: 1fr; }
}


/* v2.50 — Modo Privacidade por Campo Sensível
   Regra: mascarar somente o valor sensível. Nunca borrar bloco inteiro. */
.header-btn-privacidade.ativo {
  background: rgba(245, 158, 11, 0.16);
  color: var(--texto);
  border: 1px solid rgba(245, 158, 11, 0.35);
}
/* cadeado: aberto quando os valores estão visíveis, fechado quando ocultos.
   Alterna pela classe .ativo (privacidade ligada). */
.header-btn-privacidade .cad-aberto { display: block; }
.header-btn-privacidade .cad-fechado { display: none; }
.header-btn-privacidade.ativo .cad-aberto { display: none; }
.header-btn-privacidade.ativo .cad-fechado { display: block; }
/* =========================================================================
   v2.59 — MÁSCARA DE PRIVACIDADE OCUPA O ESPAÇO NATURAL (não flutua mais).
   Antes a máscara era um ::after position:absolute sobre o valor real deixado
   transparente; o valor real continuava reservando a PRÓPRIA largura, gerando
   um vão fantasma ("•••••     .") no texto corrido e desalinhando os cards de
   despesa/fatura. Agora o valor real é colapsado (font-size:0, sem reservar
   largura) e a máscara entra no fluxo inline, do tamanho herdado do contexto
   pela custom property --priv-mask-fs. Só afeta o modo privacidade LIGADO;
   o estado normal do app (desligado) fica idêntico.
   ========================================================================= */
body.cpp-privacidade-valores .cpp-priv-sensitive,
body.cpp-privacidade-valores .cpp-priv-mask {
  position: relative;
  font-size: 0 !important;        /* colapsa o valor real, sem reservar largura */
  color: transparent !important;
  text-shadow: none !important;
  user-select: none;
  -webkit-user-select: none;
}
body.cpp-privacidade-valores .cpp-priv-sensitive::after,
body.cpp-privacidade-valores .cpp-priv-mask::after {
  content: attr(data-priv-mask);
  font-size: var(--priv-mask-fs, .9rem);   /* tamanho herdado do contexto */
  letter-spacing: .04em;
  color: var(--texto, #f8fafc);
  white-space: nowrap;
  pointer-events: none;
}
/* inputs continuam mostrando "•••••" pelo value (via JS), nunca por ::after */
body.cpp-privacidade-valores input.cpp-priv-sensitive,
body.cpp-privacidade-valores input.cpp-priv-mask {
  color: var(--texto, #f8fafc) !important;
  font-size: inherit !important;
  -webkit-text-security: none;
  text-security: none;
}
body.cpp-privacidade-valores input.cpp-priv-sensitive::after,
body.cpp-privacidade-valores input.cpp-priv-mask::after { content: none; }
body.cpp-privacidade-valores .cpp-priv-sensitive::selection,
body.cpp-privacidade-valores .cpp-priv-mask::selection { background: transparent; }

/* tamanho da máscara por contexto — a custom property cascateia até o ::after.
   Patrimônio da Home: acompanha o clamp do número grande e centraliza pelo
   text-align:center do próprio elemento. */
body.cpp-privacidade-valores #resumoPatrimonioTotal { --priv-mask-fs: clamp(13px,3.45vw,16px); }
body.cpp-privacidade-valores .linha-conta small,
body.cpp-privacidade-valores .fatura-card summary small { --priv-mask-fs: 11px; }
body.cpp-privacidade-valores .subgrupo-despesas-topo strong,
body.cpp-privacidade-valores .fatura-card summary > strong { --priv-mask-fs: 13px; }

body.cpp-privacidade-valores .cpp-priv-allow {
  color: inherit !important;
  font-size: inherit !important;
  user-select: auto;
  -webkit-user-select: auto;
}
body.cpp-privacidade-valores .cpp-priv-allow::after { content: none !important; }

/* ===========================================================================
   PORTÃO DE ACESSO (Fase 2) — janelinha de solicitação/ativação
   =========================================================================== */
body.cpp-trancado { overflow: hidden; }
body.cpp-trancado #splashScreen,
body.cpp-trancado #app { display: none !important; }
#cppPortao {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  overflow-y: auto;
  display: flex; align-items: flex-start; justify-content: center;
  padding: clamp(20px, 7vw, 48px) 16px 40px;
}
#cppPortao[hidden] { display: none; }
#cppPortao::before {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(60% 40% at 80% 0%, var(--halo-1), transparent 70%),
              radial-gradient(50% 35% at 0% 100%, var(--halo-2), transparent 70%);
}
.portao-cx { width: 100%; max-width: 420px; }
.portao-logo {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px; color: #fff;
  background: linear-gradient(140deg, var(--acento), var(--acento-2));
  box-shadow: var(--brilho-acento);
}
.portao-tit { font-size: 22px; font-weight: 800; text-align: center; margin: 0 0 6px; color: var(--texto); }
.portao-sub { font-size: 13.5px; color: var(--texto-suave); text-align: center; line-height: 1.5; margin: 0 auto 22px; max-width: 340px; }
.portao-bloco {
  background: var(--superficie); border: 1px solid var(--borda);
  border-radius: 16px; padding: 16px; box-shadow: var(--sombra-2);
}
.portao-bloco label {
  display: block; font-size: 11.5px; color: var(--texto-suave);
  margin: 12px 0 5px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}
.portao-bloco label:first-child { margin-top: 0; }
.portao-bloco input, .portao-bloco textarea {
  width: 100%; background: var(--superficie-2); border: 1px solid var(--borda-2);
  border-radius: 11px; padding: 12px 13px; color: var(--texto);
  font-family: inherit; font-size: 15px; resize: vertical;
}
.portao-bloco input:focus, .portao-bloco textarea:focus { outline: none; border-color: var(--acento); }
.portao-btn-zap {
  width: 100%; margin-top: 16px; border: 0; border-radius: 12px; cursor: pointer;
  padding: 13px; font-family: inherit; font-size: 14.5px; font-weight: 800; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 9px;
  background: linear-gradient(140deg, #25D366, #128C7E);
  box-shadow: 0 8px 20px rgba(18,140,126,.30);
}
.portao-btn-zap:active { transform: scale(.985); }
.portao-dica { font-size: 11.5px; color: var(--texto-fraco); text-align: center; margin: 9px 0 0; }
.portao-ou {
  display: flex; align-items: center; gap: 12px; margin: 20px 4px; color: var(--texto-fraco);
}
.portao-ou::before, .portao-ou::after { content: ''; flex: 1; height: 1px; background: var(--borda-2); }
.portao-ou span { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.portao-btn-ok {
  width: 100%; margin-top: 14px; border: 0; border-radius: 12px; cursor: pointer;
  padding: 13px; font-family: inherit; font-size: 14.5px; font-weight: 800; color: #fff;
  background: linear-gradient(140deg, var(--acento), var(--acento-2));
  box-shadow: var(--brilho-acento);
}
.portao-btn-ok:active { transform: scale(.985); }
.portao-erro {
  margin: 12px 0 0; font-size: 12.5px; color: var(--vermelho);
  background: var(--vermelho-fundo); border: 1px solid var(--vermelho);
  border-radius: 10px; padding: 9px 11px; line-height: 1.45;
}
.portao-erro[hidden] { display: none; }
.portao-device {
  text-align: center; font-size: 10.5px; color: var(--texto-fraco);
  margin: 18px 0 0; letter-spacing: .03em; font-family: 'Courier New', monospace;
}

/* ---- Cards de planos ---- */
.portao-plano {
  background: var(--superficie); border: 1px solid var(--borda-2);
  border-radius: 16px; padding: 18px 16px 16px; margin-bottom: 12px;
  box-shadow: var(--sombra-2);
}
.portao-plano--destaque {
  border-color: var(--verde); box-shadow: 0 0 0 1px var(--verde), var(--sombra-2);
}
.portao-plano-badge {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .06em;
  text-transform: uppercase; color: var(--verde); background: var(--verde-fundo);
  border: 1px solid var(--verde); border-radius: 8px; padding: 3px 9px; margin-bottom: 8px;
}
.portao-plano-badge--cinza { color: var(--texto-suave); background: var(--superficie-2); border-color: var(--borda-2); }
.portao-plano-badge--ouro  { color: #FFB020; background: rgba(255,176,32,.12); border-color: #FFB020; }
.portao-plano-preco {
  font-size: 28px; font-weight: 800; color: var(--texto); margin-bottom: 4px; line-height: 1.1;
}
.portao-plano-mes { font-size: 14px; font-weight: 500; color: var(--texto-suave); }
.portao-plano-desc { font-size: 13px; color: var(--texto-suave); margin-bottom: 10px; line-height: 1.4; }
.portao-plano-itens { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.portao-check { font-size: 12.5px; color: var(--verde); }
.portao-x     { font-size: 12.5px; color: var(--texto-fraco); }
.portao-btn-plano {
  width: 100%; border: 0; border-radius: 11px; cursor: pointer; padding: 12px;
  font-family: inherit; font-size: 14px; font-weight: 800; color: #fff;
  transition: transform .1s;
}
.portao-btn-plano:active { transform: scale(.985); }
.portao-btn-plano--verde { background: linear-gradient(140deg, #00E889, #00C774); color: #003322; }
.portao-btn-plano--azul  { background: linear-gradient(140deg, var(--acento), var(--acento-2)); }
.portao-btn-plano--ouro  { background: linear-gradient(140deg, #FFB020, #FF8C00); color: #1a0a00; }
.portao-btn-voltar {
  width: 100%; background: none; border: 1px solid var(--borda-2); border-radius: 11px;
  cursor: pointer; padding: 11px; font-family: inherit; font-size: 13.5px;
  font-weight: 700; color: var(--texto-suave); margin-top: 4px;
  transition: border-color .15s;
}
.portao-btn-voltar:hover { border-color: var(--borda); }

/* ---- Spinner de carregamento ---- */
.portao-cx--centro { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: 20px; }
.portao-spinner {
  width: 40px; height: 40px; border-radius: 50%; margin: 24px auto;
  border: 3px solid var(--borda-2); border-top-color: var(--acento);
  animation: portao-spin .8s linear infinite;
}
@keyframes portao-spin { to { transform: rotate(360deg); } }

/* ---- Ícone de sucesso ---- */
.portao-sucesso-icone {
  width: 64px; height: 64px; border-radius: 50%; margin: 8px auto 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; color: var(--verde);
  background: var(--verde-fundo); border: 2px solid var(--verde);
}

/* ---- Box da chave gerada ---- */
.portao-chave-box {
  background: var(--superficie-2); border: 1px solid var(--borda-2);
  border-radius: 11px; padding: 12px 13px; color: var(--texto);
  font-family: 'Courier New', monospace; font-size: 12px;
  word-break: break-all; line-height: 1.5; margin-bottom: 4px;
  user-select: all;
}

/* ===== QR Code PIX na tela de pagamento manual (v5.86) ===== */
.portao-qr-wrap {
  display: flex; justify-content: center;
  background: #fff; border-radius: 14px; padding: 14px;
  margin: 4px 0 2px;
}
.portao-qr-img {
  display: block; width: 100%; max-width: 260px; height: auto;
  border-radius: 8px;
}

/* ===== Janelinha "Ativar / trocar chave" (Menu > Sistema) ===== */
.troca-chave .troca-tit { font-size: 18px; font-weight: 800; margin: 0 0 6px; color: var(--texto); }
.troca-chave .troca-sub { font-size: 13px; color: var(--texto-suave); line-height: 1.5; margin: 0 0 14px; }
.troca-chave .troca-input {
  width: 100%; background: var(--superficie-2); border: 1px solid var(--borda-2);
  border-radius: 11px; padding: 12px 13px; color: var(--texto);
  font-family: 'Courier New', monospace; font-size: 13px; resize: vertical; line-height: 1.5;
}
.troca-chave .troca-input:focus { outline: none; border-color: var(--acento); }
.troca-chave .troca-msg {
  margin: 12px 0 0; font-size: 12.5px; border-radius: 10px; padding: 9px 11px; line-height: 1.45;
}
.troca-chave .troca-msg[hidden] { display: none; }
.troca-chave .troca-msg-erro { color: var(--vermelho); background: var(--vermelho-fundo); border: 1px solid var(--vermelho); }
.troca-chave .troca-msg-ok { color: var(--verde); background: var(--verde-fundo); border: 1px solid var(--verde); }

/* ===== Atalho "Nova despesa" na tela Home (azul translúcido, v2.99) ===== */
.home-atalhos { margin: 6px 0 4px; }
.home-atalho-despesa {
  width: 100%; display: inline-flex; align-items: center; justify-content: center;
  gap: 9px; font-family: inherit; font-size: 14.5px; font-weight: 700;
  padding: 12px; border-radius: 12px; cursor: pointer;
  color: var(--acento);
  background: var(--acento-fundo);
  border: 1px solid var(--acento);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .15s, transform .1s;
}
.home-atalho-despesa:active { transform: scale(.99); }
.home-atalho-ico { font-size: 19px; font-weight: 800; line-height: 1; color: var(--acento); }

/* ===== Setinha "voltar" no cabeçalho (v3.00) ===== */
.header-id { flex: 1; }
.header-btn-voltar { flex-shrink: 0; margin-left: -4px; margin-right: 2px; color: var(--texto); width: 24px !important; min-width: 24px !important; padding: 0 !important; }
.header-btn-voltar[hidden] { display: none; }

/* ===== logo clicável (easter egg da festa, v3.01) ===== */
.header-logo-clicavel { cursor: pointer; transition: transform .1s ease; }
.header-logo-clicavel:active { transform: scale(.92); }

/* ===== Atalho de despesa (3 botões) e mini-form (v3.03) ===== */
.atalho-sub { font-size: 13px; color: var(--texto-suave); line-height: 1.5; margin: 0 0 16px; }
.atalho-opcao {
  width: 100%; display: flex; align-items: center; gap: 13px; text-align: left;
  background: var(--superficie); border: 1px solid var(--borda-2); border-radius: 14px;
  padding: 14px; margin-bottom: 10px; cursor: pointer; font-family: inherit;
  transition: background .15s, border-color .15s;
}
.atalho-opcao:active { background: var(--superficie-2); transform: scale(.99); }
.atalho-ico { font-size: 24px; line-height: 1; flex-shrink: 0; width: 30px; text-align: center; }
.atalho-txt { display: flex; flex-direction: column; gap: 2px; }
.atalho-txt strong { font-size: 15px; color: var(--texto); }
.atalho-txt small { font-size: 12px; color: var(--texto-suave); line-height: 1.4; }
.mini-despesa .campo { margin-bottom: 4px; }

/* ===== Card editável Custo operacional diário (tela Despesas) ===== */
.op-card-diario { display: block; width: 100%; text-align: left; cursor: pointer; font-family: inherit; border: 1px solid var(--acento); }
.op-card-diario:active { transform: scale(.995); }
.op-card-diario-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.op-card-diario-topo .config-card-titulo { margin: 0; }
.op-card-diario-valor { font-size: 18px; color: var(--acento); flex-shrink: 0; }

/* ===== Decomposição da meta no "i" (custo operacional) ===== */
.meta-decompos { margin: 14px 0 4px; padding: 12px 14px; background: var(--acento-fundo); border: 1px solid var(--acento); border-radius: 12px; }
.meta-decompos-titulo { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--acento); }
.meta-decompos-lista { list-style: none; margin: 0; padding: 0; }
.meta-decompos-lista li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 0; font-size: 13.5px; color: var(--texto); }
.meta-decompos-lista li span { color: var(--texto-suave); }
.meta-decompos-total { border-top: 1px solid var(--acento); margin-top: 4px; padding-top: 8px !important; }
.meta-decompos-total span, .meta-decompos-total strong { color: var(--texto) !important; font-weight: 700; }

/* ===== Pergunta "já foi paga?" — botões empilhados ===== */
.form-acoes-coluna { flex-direction: column; gap: 10px; }
.form-acoes-coluna .btn-primario, .form-acoes-coluna .btn-secundario { width: 100%; }

/* ===== Grupo "Despesas operacionais" no mês ===== */
.subgrupo-operacional .subgrupo-despesas-topo span { color: var(--acento); }

/* ===== Aviso CPP/IA do custo diário (Home, Aviso 2) ===== */
.aviso-custo-diario[hidden] { display: none; }
.aviso-custo-diario { display: flex; gap: 11px; align-items: flex-start; background: var(--acento-fundo); border: 1px solid var(--acento); border-radius: 14px; padding: 13px 14px; margin: 6px 0 4px; }
.aviso-custo-ico { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.aviso-custo-texto { display: flex; flex-direction: column; gap: 3px; font-size: 13px; line-height: 1.5; color: var(--texto); }
.aviso-custo-texto strong { font-size: 12px; font-weight: 800; color: var(--acento); letter-spacing: .02em; }

/* =============================================================================
   VOZ / INTERPRETAÇÃO FALADA (v3.68)
   Botão único por tela. Tema do CPP via variáveis (claro/escuro automático).
   ============================================================================= */
.voz-cpp-wrap { margin: 4px 0 12px; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.btn-voz-cpp {
  display: inline-flex; align-items: center; gap: 9px;
  align-self: flex-start;
  padding: 10px 16px;
  border-radius: var(--raio-sm, 12px);
  border: 1px solid var(--acento);
  background: var(--acento-fundo);
  color: var(--acento-2, var(--acento));
  font-size: 13px; font-weight: 700; letter-spacing: .01em;
  cursor: pointer;
  transition: transform .12s ease, background .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-voz-cpp:active { transform: scale(.98); }
.btn-voz-cpp:disabled { cursor: default; }
.btn-voz-ico { display: inline-flex; }
.btn-voz-ico svg { width: 19px; height: 19px; display: block; }
.btn-voz-txt { white-space: nowrap; }

/* estado: pensando (carregando) — ícone pulsa suave */
.btn-voz-cpp.voz-carregando { opacity: .85; }
.btn-voz-cpp.voz-carregando .btn-voz-ico { animation: vozPulso 1s ease-in-out infinite; }

/* estado: falando — vira botão de parar, em destaque */
.btn-voz-cpp.voz-falando {
  background: linear-gradient(140deg, var(--acento), var(--acento-2));
  color: #fff;
  box-shadow: var(--brilho-acento);
  border-color: transparent;
}
.btn-voz-cpp.voz-falando .btn-voz-ico { animation: vozOnda 1.1s ease-in-out infinite; }

/* texto interpretado (telas interpretar) */
.voz-cpp-saida[hidden] { display: none; }
.voz-cpp-saida {
  max-height: 220px;
  overflow-y: auto;
  scroll-behavior: smooth;
  background: var(--superficie-2);
  border: 1px solid var(--borda-2);
  border-radius: 14px;
  padding: 13px 15px;
  font-size: 14px; line-height: 1.55; color: var(--texto);
  white-space: pre-wrap;
  width: 100%; box-sizing: border-box;
}

@keyframes vozPulso { 0%,100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes vozOnda  { 0%,100% { transform: scale(1); } 50% { transform: scale(1.12); } }

/* Botão Repetir (voz) */
.btn-repetir-voz {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: var(--raio-sm, 12px);
  border: 1px solid var(--borda-2);
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
  margin-top: 6px;
}
.btn-repetir-voz:active { background: var(--superficie-3); }

/* Configuração de voz — card e botões de velocidade estilo WhatsApp */
.config-card-voz { display: flex; flex-direction: column; gap: 6px; }
.voz-velocidade-grupo {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px;
}
.voz-vel-btn {
  padding: 8px 14px;
  border-radius: 20px;
  border: 1.5px solid var(--borda-2);
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.voz-vel-btn.ativo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.voz-vel-btn:active { transform: scale(.96); }

/* Velocidade inline — abaixo do botão Interpretar */
.voz-linha-principal { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.voz-vel-inline {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin-top: 2px;
}
.voz-vel-btn-inline {
  padding: 5px 10px;
  border-radius: 16px;
  border: 1.5px solid var(--borda-2);
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.voz-vel-btn-inline.ativo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}
.voz-vel-btn-inline:active { transform: scale(.94); }

/* Slider de velocidade da voz */
.voz-slider-wrap {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; width: 100%;
}
.voz-slider-ext {
  font-size: 10px; color: var(--texto-suave); white-space: nowrap; flex-shrink: 0;
}
.voz-slider-vel {
  flex: 1; height: 4px; cursor: pointer;
  accent-color: var(--acento);
}
.voz-slider-label {
  font-size: 12px; font-weight: 700; color: var(--acento);
  min-width: 34px; text-align: right; flex-shrink: 0;
}

/* Lista de substituições fonéticas */
.voz-subst-lista { display: flex; flex-direction: column; gap: 8px; }
.voz-subst-item {
  display: flex; align-items: center; gap: 6px; width: 100%;
}
.voz-subst-de, .voz-subst-para {
  flex: 1; min-width: 0;
  padding: 8px 10px !important;
  font-size: 13px !important;
}
.voz-subst-seta {
  color: var(--texto-suave); font-size: 14px; flex-shrink: 0;
}
.voz-subst-btn-test, .voz-subst-btn-rem {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 10px;
  border: 1px solid var(--borda-2);
  background: var(--superficie-2);
  color: var(--texto-suave);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.voz-subst-btn-test { color: var(--acento); border-color: var(--acento); }
.voz-subst-btn-test:active, .voz-subst-btn-rem:active { transform: scale(.94); }

/* Tela Premium — quando o plano não libera a voz */
.voz-premium {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 8px; padding: 6px 4px;
}
.voz-premium-ico { font-size: 28px; }
.voz-premium strong { font-size: 15px; color: var(--texto); }
.voz-premium p { font-size: 13px; line-height: 1.5; color: var(--texto-suave); margin: 0; }
.voz-premium-btn {
  display: inline-block; margin-top: 6px;
  padding: 10px 18px; border-radius: 12px;
  background: var(--acento); color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none;
}
.voz-premium-btn:active { transform: scale(.97); }

/* Modal de aviso de plano (recurso premium / limite demo) */
.modal-plano-fundo {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.modal-plano-fundo[hidden] { display: none; }
.modal-plano-cx {
  background: var(--bg-2, #142139);
  border: 1px solid var(--borda-2, #1B3045);
  border-radius: 18px;
  padding: 24px 20px;
  max-width: 340px; width: 100%;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.modal-plano-ico { font-size: 34px; }
.modal-plano-tit { font-size: 17px; margin: 0; color: var(--texto, #fff); }
.modal-plano-txt { font-size: 14px; line-height: 1.5; color: var(--texto-suave, #9CA8B8); margin: 0; }
.modal-plano-btn {
  display: inline-block; margin-top: 6px;
  padding: 12px 20px; border-radius: 12px;
  background: var(--acento, #168BFF); color: #fff;
  font-size: 15px; font-weight: 700; text-decoration: none;
  width: 100%; box-sizing: border-box;
}
.modal-plano-btn:active { transform: scale(.97); }
/* v6.53 — botão secundário "Continuar mesmo assim" (modo tolerância).
   Estilo neutro pra não competir com o "Renovar agora" (que é a ação
   principal). Desabilitado quando cota esgotada. */
.modal-plano-btn-tol {
  background: transparent;
  color: var(--texto, #fff);
  border: 1px solid var(--borda-2, #1B3045);
  margin-top: 0;
}
.modal-plano-btn-tol[disabled] {
  opacity: .5; cursor: not-allowed;
  color: var(--texto-suave, #9CA8B8);
}
.modal-plano-tol-sub {
  font-size: 12px; margin: 0; color: var(--texto-suave, #9CA8B8);
  line-height: 1.4;
}
.modal-plano-fechar {
  background: none; border: none;
  color: var(--texto-suave, #9CA8B8);
  font-size: 14px; cursor: pointer; padding: 6px;
}

/* Botão de voz dentro dos cards de config e tópicos do Entenda o CPP */
.voz-cpp-card, .voz-cpp-topico { margin: 8px 0 4px; }
.voz-cpp-card .btn-voz-cpp, .voz-cpp-topico .btn-voz-cpp {
  font-size: 12px; padding: 8px 13px;
}
.voz-cpp-card .btn-voz-ico svg, .voz-cpp-topico .btn-voz-ico svg {
  width: 16px; height: 16px;
}

/* Botão de microfone no header */
.header-btn-pergunta {
  color: var(--acento);
  background: none; border: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 4px; border-radius: 8px;
  transition: opacity .15s;
}
.header-btn-pergunta:active { opacity: .7; }

/* Modal de pergunta livre */
.pergunta-livre-fundo {
  position: fixed; inset: 0; z-index: 9998;
  background: rgba(0,0,0,.55);
  display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.pergunta-livre-fundo[hidden] { display: none; }
.pergunta-livre-cx {
  background: var(--bg-2, #142139);
  border: 1px solid var(--borda-2, #1B3045);
  border-radius: 20px 20px 0 0;
  padding: 20px 18px 24px;
  width: 100%; max-width: 560px;
  display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 -8px 30px rgba(0,0,0,.45);
}
.pergunta-livre-tit { font-size: 16px; font-weight: 700; margin: 0; color: var(--texto); }
.pergunta-livre-sub { font-size: 13px; color: var(--texto-suave); margin: 0; }
.pergunta-livre-campo {
  display: flex; align-items: center; gap: 8px;
}
.pergunta-mic {
  flex-shrink: 0; width: 42px; height: 42px;
  border-radius: 50%; border: 1.5px solid var(--acento);
  background: var(--acento-fundo); color: var(--acento);
  font-size: 18px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.pergunta-mic:active { background: var(--acento); color: #fff; }
.pergunta-mic:disabled { opacity: .4; cursor: default; }
.pergunta-input {
  flex: 1; padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--borda-2, #1B3045);
  background: var(--bg, #090d14);
  color: var(--texto); font-size: 15px;
}
.pergunta-enviar {
  flex-shrink: 0; width: 42px; height: 42px;
  border-radius: 50%; border: none;
  background: var(--acento); color: #fff;
  font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .15s;
}
.pergunta-enviar:active { opacity: .8; }
.pergunta-enviar:disabled { opacity: .4; cursor: default; }
.pergunta-status {
  font-size: 13px; color: var(--texto-suave);
  text-align: center; padding: 4px 0;
}
.pergunta-fechar {
  background: none; border: none;
  color: var(--texto-suave); font-size: 14px;
  cursor: pointer; text-align: center; padding: 6px;
}

/* Botões de voz dentro do card da meta (Como começo?) */
.home-voz-botoes {
  position: absolute; top: 12px; right: 12px;
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-end;
  z-index: 2;
}
.home-voz-botoes .btn-voz-cpp {
  font-size: 11px; padding: 6px 10px;
  white-space: nowrap;
}
.home-voz-botoes .btn-voz-ico svg { width: 14px; height: 14px; }

/* Botão flutuante de pergunta (FAB) — visível em todas as telas */
.pergunta-fab {
  position: fixed;
  right: 14px;
  bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  min-width: 56px; height: 56px;
  padding: 0 8px;
  border-radius: 16px;
  border: none;
  background: var(--acento, #1677FF);
  color: #fff;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px;
  box-shadow: 0 6px 20px rgba(22,119,255,.45);
  cursor: pointer;
  z-index: 50;
  transition: transform .15s, box-shadow .15s;
}
.pergunta-fab-txt {
  font-size: 9.5px; font-weight: 700;
  letter-spacing: .2px; line-height: 1;
}
/* no desktop o app é centralizado em 560px: prende o FAB à borda do app,
   não à borda da janela. left:50% + margin empurra pra dentro do limite. */
@media (min-width: 561px) {
  .pergunta-fab {
    right: auto;
    left: 50%;
    margin-left: calc(280px - 56px - 14px); /* metade do app menos botão e folga */
  }
}
.pergunta-fab:active { transform: scale(.92); }

/* resposta da pergunta + botão de parar no modal */
.pergunta-parar {
  width: 100%;
  background: var(--vermelho, #FF3B3B);
  color: #fff; border: none;
  border-radius: 12px; padding: 12px;
  font-size: 15px; font-weight: 700;
  cursor: pointer; margin-bottom: 10px;
}
.pergunta-parar:active { opacity: .85; }
.pergunta-resposta-texto {
  font-size: 14px; color: var(--texto);
  line-height: 1.5; margin: 0;
  max-height: 40vh; overflow-y: auto;
  text-align: left;
}
.pergunta-fab::after {
  content: "Pergunte";
  position: absolute;
  right: 60px;
  background: var(--bg-2, #142139);
  color: var(--texto);
  font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 8px;
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity .2s;
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}

/* Botão "Vou trabalhar hoje" no dia de folga */
.btn-trabalhar-extra {
  display: block; width: 100%;
  margin-top: 12px; padding: 13px;
  border-radius: 12px; border: 1.5px solid var(--verde, #00C774);
  background: transparent; color: var(--verde, #00C774);
  font-size: 15px; font-weight: 700; cursor: pointer;
  transition: background .15s, color .15s;
}
.btn-trabalhar-extra:active { background: var(--verde, #00C774); color: #fff; }

/* Selo de dia extra ativado */
.selo-dia-extra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(0,199,116,0.12);
  border: 1px solid rgba(0,199,116,0.35);
  font-size: 12.5px; color: var(--texto);
}
/* v6.80 (fatia 2) — marca fixa do dia em que meta/período foi reajustado */
.selo-reajuste {
  display: flex; align-items: center; justify-content: center;
  gap: 6px; margin-top: 10px;
  padding: 8px 12px; border-radius: 10px;
  background: rgba(245,158,11,0.12);
  border: 1px solid rgba(245,158,11,0.38);
  font-size: 12.5px; font-weight: 600; color: var(--texto);
  text-align: center;
}
.btn-desfazer-extra {
  flex-shrink: 0;
  background: none; border: none;
  color: var(--texto-suave); font-size: 12px;
  text-decoration: underline; cursor: pointer;
}

/* Card de modo desenvolvedor (discreto) */
.config-card-dev { opacity: 0.85; }
.config-card-dev summary { cursor: pointer; list-style: none; }
.config-card-dev summary::-webkit-details-marker { display: none; }
.dev-linha {
  display: flex; gap: 8px; align-items: center;
  margin-top: 8px; flex-wrap: wrap;
}
.dev-data-input {
  flex: 1; min-width: 140px; padding: 9px 12px;
  border-radius: 10px; border: 1px solid var(--borda-2, #1B3045);
  background: var(--bg, #090d14); color: var(--texto); font-size: 14px;
}
.btn-sm { padding: 9px 14px; font-size: 13px; }


/* ── MODAL PAGAMENTO — seleção de conta ── */
.pagamento-conta-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 14px 0 6px;
}
.btn-pagamento-conta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--superficie-2);
  border: 1px solid var(--borda-2);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--texto-1);
  font-size: 15px;
  cursor: pointer;
  transition: background .15s;
  width: 100%;
  text-align: left;
}
.btn-pagamento-conta:active { background: var(--superficie-3); }
.pagamento-conta-nome { font-weight: 600; }
.pagamento-conta-saldo { color: var(--texto-2); font-size: 13px; }
.btn-pagamento-externo {
  background: transparent;
  border: 1px dashed var(--borda-2);
  border-radius: 10px;
  padding: 12px 16px;
  color: var(--texto-2);
  font-size: 14px;
  cursor: pointer;
  width: 100%;
  text-align: center;
  transition: border-color .15s, color .15s;
}
.btn-pagamento-externo:active { color: var(--texto-1); border-color: var(--azul-1); }
.badge-mini.badge-pagar {
  background: rgba(0, 232, 137, .12);
  border-color: rgba(0, 199, 116, .5);
  color: var(--verde);
}
.badge-mini.badge-pagar:active { transform: scale(.94); background: rgba(0,199,116,.2); }

/* ---------------------------------------------------------------------------
   APAGAR TODOS OS DADOS — zona de perigo
   --------------------------------------------------------------------------- */
.config-card-perigo {
  border-color: rgba(255,59,59,0.18);
  padding: 4px;
}
.btn-apagar-dados {
  width: 100%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--raio-sm);
  transition: background .18s;
  text-align: left;
}
.btn-apagar-dados:hover  { background: rgba(255,59,59,0.07); }
.btn-apagar-dados:active { background: rgba(255,59,59,0.13); }
.apagar-dados-icone {
  width: 36px;
  height: 36px;
  background: rgba(255,59,59,0.12);
  border: 1px solid rgba(255,59,59,0.22);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #FF3B3B;
}
.apagar-dados-texto { flex: 1; }
.apagar-dados-titulo {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #FF3B3B;
}
.apagar-dados-sub {
  display: block;
  font-size: 12px;
  color: var(--texto-fraco);
  margin-top: 2px;
}

/* Modal apagar dados */
.modal-apagar-icone {
  width: 56px;
  height: 56px;
  background: rgba(255,59,59,0.12);
  border: 1px solid rgba(255,59,59,0.22);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
  color: #FF3B3B;
}
.modal-apagar-aviso {
  background: rgba(255,59,59,0.08);
  border: 1px solid rgba(255,59,59,0.2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
}
.modal-apagar-aviso p {
  font-size: 13px;
  color: #FF8080;
  line-height: 1.55;
  margin-bottom: 6px;
}
.modal-apagar-aviso p:last-child { margin-bottom: 0; }
.modal-apagar-aviso strong { color: #FF3B3B; }
.modal-apagar-dica {
  background: rgba(255,176,32,0.08);
  border: 1px solid rgba(255,176,32,0.2);
  border-radius: 10px;
  padding: 11px 13px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: #FFB020;
}
.modal-apagar-dica p {
  font-size: 12px;
  color: #FFB020;
  line-height: 1.5;
}
.btn-salvar-johnson {
  background: linear-gradient(140deg, #168BFF, #1677FF) !important;
}
.btn-apagar-sem-salvar {
  width: 100%;
  background: transparent;
  border: none;
  color: var(--texto-fraco);
  font-size: 12px;
  cursor: pointer;
  padding: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-top: 4px;
}
.btn-apagar-sem-salvar:hover { color: var(--texto-suave); }

/* Passo 2: confirmação */
.modal-apagar-label {
  display: block;
  font-size: 13px;
  color: var(--texto-suave);
  margin-bottom: 8px;
}
.modal-apagar-label strong { color: var(--texto); font-family: monospace; letter-spacing: 1px; }
.modal-apagar-input {
  width: 100%;
  background: var(--superficie-2);
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--raio-sm);
  padding: 12px 14px;
  font-size: 16px;
  color: var(--texto);
  font-family: monospace;
  letter-spacing: 3px;
  outline: none;
  transition: border-color .2s;
  margin-bottom: 16px;
  text-transform: uppercase;
}
.modal-apagar-input::placeholder { color: var(--borda-forte); letter-spacing: 1px; font-size: 13px; }
.modal-apagar-input:focus  { border-color: #FF3B3B; }
.modal-apagar-input.correto { border-color: var(--verde); }

/* Modal de impacto do abastecimento na meta (v4.57) */
.modal-impacto-abast { text-align: left; }
.modal-impacto-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.modal-impacto-icone {
  width: 44px;
  height: 44px;
  font-size: 24px;
  background: var(--superficie-3, #0e1c30);
  border: 1px solid var(--borda-2, #1B3045);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-impacto-corpo { margin-bottom: 18px; }
.impacto-linha {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--texto, #fff);
  margin-bottom: 12px;
  padding: 12px 14px;
  background: var(--superficie-2, #0A1524);
  border: 1px solid var(--borda-2, #1B3045);
  border-radius: 10px;
}
.impacto-linha:last-child { margin-bottom: 0; }
.impacto-linha strong { color: #fff; }
.impacto-linha.impacto-bom {
  background: rgba(0,232,137,0.08);
  border-color: rgba(0,232,137,0.25);
}
.impacto-linha.impacto-bom strong { color: var(--verde); }
.impacto-linha.impacto-atencao {
  background: rgba(255,176,32,0.08);
  border-color: rgba(255,176,32,0.25);
}
.impacto-linha.impacto-atencao strong { color: #FFB020; }
.impacto-linha.impacto-neutro {
  color: var(--texto-suave, #9CA8B8);
}

/* ===========================================================================
   RECONFIGURAÇÃO PÓS-META (v4.69) — aviso + modal de 3 passos.
   Usa os tokens do app; vermelho/verde/âmbar oficiais.
   =========================================================================== */
.reconfig-aviso { position: relative; text-align: left; }
.reconfig-aviso-x {
  position: absolute;
  top: -4px; right: -4px;
  width: 32px; height: 32px;
  background: transparent;
  border: none;
  color: var(--texto-suave, #9CA8B8);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
}
.reconfig-aviso-x:hover { color: var(--texto, #fff); }
.reconfig-aviso-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  padding-right: 28px;
}
.reconfig-aviso-icone {
  width: 44px; height: 44px;
  font-size: 24px;
  background: var(--superficie-3, #0e1c30);
  border: 1px solid var(--borda-2, #1B3045);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.reconfig-aviso-titulo {
  font-size: 18px;
  font-weight: 800;
  color: var(--texto, #fff);
  margin: 0;
  line-height: 1.25;
}
.reconfig-aviso-corpo { margin-bottom: 18px; }
.reconfig-linha {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.5;
  padding: 11px 14px;
  margin-bottom: 8px;
  background: var(--superficie-2, #0A1524);
  border: 1px solid var(--borda-2, #1B3045);
  border-radius: 10px;
}
.reconfig-linha:last-child { margin-bottom: 0; }
.reconfig-linha-rotulo { color: var(--texto-suave, #9CA8B8); }
.reconfig-linha-valor { color: var(--texto, #fff); font-weight: 700; text-align: right; }
.reconfig-linha-valor.reconfig-bom { color: var(--verde); }
.reconfig-linha-valor.reconfig-desconto { color: #FFB020; }
.reconfig-linha.reconfig-linha-forte {
  background: rgba(22,139,255,0.10);
  border-color: rgba(22,139,255,0.30);
}
.reconfig-linha.reconfig-linha-forte .reconfig-linha-valor { color: #168BFF; }
.reconfig-aviso-nota {
  margin: 10px 0 0;
  padding: 11px 14px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto-suave, #9CA8B8);
  background: rgba(255,176,32,0.08);
  border: 1px solid rgba(255,176,32,0.25);
  border-radius: 10px;
}
.reconfig-acoes {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.reconfig-acoes .btn-primario,
.reconfig-acoes .btn-secundario { flex: 1; }

/* modal de 3 passos */
.reconfig-modal { text-align: left; }
.reconfig-modal-topo {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.reconfig-modal-titulo {
  font-size: 18px;
  font-weight: 800;
  color: var(--texto, #fff);
  margin: 0;
}
.reconfig-passo-conta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--texto-suave, #9CA8B8);
  flex-shrink: 0;
}
.reconfig-modal-ajuda {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--texto-suave, #9CA8B8);
  margin: 0 0 14px;
}
.reconfig-proj { margin-bottom: 16px; }
.reconfig-campo-valor { margin-top: 4px; }
.reconfig-conf {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 22px 16px;
  background: var(--superficie-2, #0A1524);
  border: 1px solid var(--borda-2, #1B3045);
  border-radius: 12px;
}
.reconfig-conf.reconfig-conf-erro {
  background: rgba(255,59,59,0.08);
  border-color: rgba(255,59,59,0.28);
}
.reconfig-conf.reconfig-conf-ok {
  background: rgba(0,232,137,0.08);
  border-color: rgba(0,232,137,0.25);
}
.reconfig-conf-icone { font-size: 36px; line-height: 1; }
.reconfig-conf-texto {
  font-size: 15px;
  line-height: 1.6;
  color: var(--texto, #fff);
  margin: 0;
}
.reconfig-conf-texto strong { color: #fff; }
.reconfig-conf-erro .reconfig-conf-texto strong { color: #FF3B3B; }
.reconfig-conf-ok .reconfig-conf-texto strong { color: #00E889; }

.btn-apagar-executar {
  flex: 1;
  padding: 12px 16px;
  background: rgba(255,59,59,0.15);
  border: 1.5px solid rgba(255,59,59,0.3);
  border-radius: var(--raio-sm);
  color: #FF3B3B;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  opacity: 0.45;
  pointer-events: none;
  transition: opacity .2s, background .18s;
}
.btn-apagar-executar.habilitado {
  opacity: 1;
  pointer-events: all;
}
.btn-apagar-executar.habilitado:hover  { background: rgba(255,59,59,0.25); }
.btn-apagar-executar.habilitado:active { background: rgba(255,59,59,0.35); transform: scale(.98); }

/* ---------------------------------------------------------------------------
   TELA DE ABERTURA (SPLASH) — primeira vez ou após apagar dados
   --------------------------------------------------------------------------- */
#splashScreen {
  position: fixed;
  inset: 0;
  background: #050A12;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  animation: splashEntrada .5s ease both;
}
#splashScreen[hidden] { display: none; }

@keyframes splashEntrada {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.splash-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 32px 24px;
  width: 100%;
  max-width: 440px;
}
.splash-logo-wrap {
  position: relative;
  width: 220px;
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
  animation: logoSurge .7s cubic-bezier(0.34,1.56,0.64,1) .2s both;
}
@keyframes logoSurge {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}
.splash-logo-wrap::before {
  content: '';
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,163,255,.25) 0%, rgba(22,119,255,.12) 50%, transparent 70%);
  animation: splashPulso 2.2s ease-in-out 1s infinite;
}
.splash-logo-wrap::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1.5px solid rgba(0,163,255,.4);
  animation: splashPulsoAnel 2.2s ease-in-out 1s infinite;
}
@keyframes splashPulso {
  0%,100% { transform: scale(1);    opacity: .7; }
  50%      { transform: scale(1.12); opacity: 1; }
}
@keyframes splashPulsoAnel {
  0%,100% { transform: scale(1);    opacity: .5; }
  50%      { transform: scale(1.15); opacity: 1; }
}
.splash-anel-externo {
  position: absolute;
  inset: -28px;
  border-radius: 50%;
  border: 1px solid rgba(0,232,137,.2);
  animation: splashPulsoAnel 2.2s ease-in-out 1.4s infinite;
  pointer-events: none;
}
.splash-logo {
  width: 200px;
  height: 200px;
  object-fit: contain;
  object-position: center center;
  display: block;
  margin: auto;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 0 24px rgba(0,163,255,.7));
}
.splash-nome {
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
  font-size: 52px;
  font-weight: 800;
  color: #fff;
  letter-spacing: -1px;
  line-height: 1;
  text-align: center;
  margin-bottom: 10px;
  animation: splashTexto .6s ease .7s both;
}
.splash-subtitulo {
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #9CA8B8;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 56px;
  line-height: 1.6;
  animation: splashTexto .6s ease .9s both;
}
@keyframes splashTexto {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.splash-btn {
  width: 100%;
  max-width: 320px;
  padding: 16px;
  background: linear-gradient(140deg, #168BFF, #1677FF);
  border: none;
  border-radius: 14px;
  color: #fff;
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  box-shadow: 0 4px 24px rgba(22,135,255,.4);
  transition: transform .15s, box-shadow .15s;
  animation: splashTexto .6s ease 1.1s both;
}
.splash-btn:hover  { transform: scale(1.02); box-shadow: 0 6px 32px rgba(22,135,255,.55); }
.splash-btn:active { transform: scale(.98); }

/* ===== v6.00 — Tela 0: player da apresentação em áudio ===== */
.splash-audio {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  animation: splashTexto .6s ease 1s both;
}
.splash-audio[hidden] { display: none; }

/* ondinha de áudio — 5 barrinhas */
.splash-audio-onda {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 30px;
}
.splash-audio-onda span {
  display: block;
  width: 4px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(180deg, #00A3FF, #1677FF);
  opacity: .55;
  transition: height .2s ease, opacity .2s ease;
}
.splash-audio-onda.tocando span {
  animation: splashOnda 1s ease-in-out infinite;
  opacity: 1;
}
.splash-audio-onda.tocando span:nth-child(1) { animation-delay: 0s; }
.splash-audio-onda.tocando span:nth-child(2) { animation-delay: .15s; }
.splash-audio-onda.tocando span:nth-child(3) { animation-delay: .3s; }
.splash-audio-onda.tocando span:nth-child(4) { animation-delay: .45s; }
.splash-audio-onda.tocando span:nth-child(5) { animation-delay: .6s; }
@keyframes splashOnda {
  0%, 100% { height: 8px; }
  50%      { height: 26px; }
}

.splash-audio-legenda {
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #9CA8B8;
  letter-spacing: .04em;
  margin: 0;
  text-align: center;
}

.splash-audio-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 18px;
  background: rgba(22,135,255,.1);
  border: 1px solid rgba(22,135,255,.4);
  border-radius: 22px;
  color: #4EA8FF;
  font-family: 'Gabarito', 'Trebuchet MS', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .15s;
}
.splash-audio-btn:hover  { background: rgba(22,135,255,.18); }
.splash-audio-btn:active { transform: scale(.96); }
.splash-audio-btn.destaque {
  background: rgba(22,135,255,.22);
  border-color: rgba(22,135,255,.85);
  color: #fff;
  animation: splashBtnPulsa 1.6s ease-in-out infinite;
}
@keyframes splashBtnPulsa {
  0%, 100% { box-shadow: 0 0 0 0 rgba(22,135,255,.45); }
  50%      { box-shadow: 0 0 0 7px rgba(22,135,255,0); }
}

/* ===== TOAST — feedback flutuante (v4.57) ===== */
.cpp-toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: #0e1c30;
  border: 1px solid var(--borda-2, #1B3045);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 22px;
  border-radius: 24px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45);
  z-index: 9999;
  pointer-events: all;
  cursor: pointer;
  opacity: 0;
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
.cpp-toast.cpp-toast-visivel {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.cpp-toast.cpp-toast-erro {
  background: rgba(255,59,59,0.15);
  border-color: rgba(255,59,59,0.35);
  color: #FF8080;
}
.cpp-toast.cpp-toast-aviso {
  background: rgba(255,176,32,0.12);
  border-color: rgba(255,176,32,0.3);
  color: #FFB020;
}

/* ===========================================================================
   TROCA DE CARRO (v4.77)
   Botão no Perfil e veículo + modal com a lista de carros + carro ativo na
   legenda da auditoria. Vitrine pura, tokens e cores oficiais.
   =========================================================================== */
.btn-mudar-carro {
  margin-top: 12px;
  width: 100%;
}
.trocar-carro-modal { display: flex; flex-direction: column; gap: 12px; }
.trocar-carro-lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 2px;
}
.trocar-carro-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--raio);
  border: 1px solid var(--borda-2);
  background: var(--vidro);
  color: var(--texto);
  cursor: pointer;
  transition: border-color .15s ease, transform .05s ease;
}
.trocar-carro-item:active { transform: scale(0.99); }
.trocar-carro-item.ativo {
  border-color: var(--acento);
  box-shadow: inset 0 0 0 1px var(--acento);
}
.trocar-carro-item-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.trocar-carro-nome { font-weight: 700; font-size: 15px; }
.trocar-carro-selo {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--acento);
  color: #fff;
}
.trocar-carro-sub { font-size: 12px; color: var(--texto-3); }
.trocar-carro-acoes {
  display: flex;
  gap: 10px;
  margin-top: 4px;
}
.trocar-carro-acoes .btn-primario,
.trocar-carro-acoes .btn-secundario { flex: 1; padding: 12px; }

.auditoria-carro-ativo {
  flex-basis: 100%;
  font-size: 12.5px;
  color: var(--texto);
  margin-bottom: 2px;
}
.auditoria-carro-ativo b { font-style: normal; font-weight: 700; }

/* ---------------------------------------------------------------------------
   TEMAS ADICIONAIS (v5.36)
   Aplicados via data-tema-id no <html>. Coexistem com data-tema legacy.
   --------------------------------------------------------------------------- */

/* MINIMALISTA DARK */
[data-tema-id="minimalista-dark"] {
  --bg:           #050A12;
  --bg-2:         #0a1524;
  --superficie:   rgba(255,255,255,0.04);
  --superficie-2: rgba(255,255,255,0.06);
  --superficie-3: rgba(255,255,255,0.08);
  --vidro:        rgba(5,10,18,0.55);
  --borda:        rgba(255,255,255,0.05);
  --borda-2:      rgba(255,255,255,0.08);
  --borda-forte:  rgba(255,255,255,0.12);
  --texto:        #ffffff;
  --texto-suave:  #9CA8B8;
  --texto-fraco:  #7A8290;
  --muted:        #9CA8B8;
  --menu-card-bg: linear-gradient(180deg, rgba(10,21,36,.88), rgba(5,10,18,.88));
  --rgb-tinta:    5, 10, 18;
  --acento:       #1677FF;
  --acento-2:     #168BFF;
  --acento-fundo: rgba(22,119,255,0.1);
  --verde:        #168BFF;
  --verde-fundo:  rgba(22,139,255,0.1);
  --ambar:        #9CA8B8;
  --ambar-fundo:  rgba(156,168,184,0.1);
  --vermelho:     #9CA8B8;
  --vermelho-fundo: rgba(156,168,184,0.1);
  --sombra-1: 0 1px 3px rgba(0,0,0,0.5);
  --sombra-2: 0 4px 16px rgba(0,0,0,0.4), 0 1px 3px rgba(0,0,0,0.5);
  --sombra-3: 0 16px 48px rgba(0,0,0,0.6);
  --brilho-acento: 0 4px 18px rgba(22,119,255,0.25);
  --brilho-verde:  0 4px 18px rgba(52,211,153,0.2);
  --halo-1: rgba(22,119,255,0.08);
  --halo-2: rgba(22,119,255,0.04);
  --energia-metrica-bg: var(--superficie-2);

  /* PAPEIS v5.36 — tudo azul + neutro (minimalista) */
  --heroi-meta-bg: linear-gradient(150deg, #07101d 0%, #0a1726 55%, #0e2238 100%);
  --barra-meta-grad: linear-gradient(90deg, #168BFF 0%, #1677FF 100%);
  --barra-meta-glow: 0 0 10px rgba(22,119,255,.45);
  --heroi-alvo-glow: rgba(22,119,255,.4);
  --estado-verde-cor: #168BFF;
  --estado-verde-grad2: #4DA8FF;
  --estado-superada-grad2: #7FC4FF;
  --estado-ambar-cor: #5B8Fd6;
  --estado-ambar-grad2: #4DA8FF;
  --estado-vermelho-cor: #6E9Fd6;
  --estado-vermelho-grad2: #4DA8FF;
  --op-verde-bg: linear-gradient(135deg, rgba(22,119,255,.22), rgba(22,119,255,.08));
  --op-verde-borda: rgba(22,119,255,.5);
  --op-verde-glow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 22px rgba(22,119,255,.18);
  --op-verde-ico: linear-gradient(140deg, #168BFF, #1677FF);
  --op-verde-seta: #3BA0FF;
  --op-verde-r: 22,119,255;
  --op-vermelho-bg: linear-gradient(135deg, rgba(120,140,165,.18), rgba(120,140,165,.06));
  --op-vermelho-borda: rgba(156,168,184,.4);
  --op-vermelho-glow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 22px rgba(0,0,0,.25);
  --op-vermelho-ico: linear-gradient(140deg, #5a6b80, #3a4a5e);
  --op-vermelho-seta: #9CA8B8;
  --op-vermelho-r: 156,168,184;
  --op-azul-bg: linear-gradient(135deg, rgba(22,119,255,.22), rgba(22,119,255,.08));
  --op-azul-borda: rgba(22,119,255,.5);
  --op-azul-glow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 22px rgba(22,119,255,.18);
  --op-azul-ico: linear-gradient(140deg, #168BFF, #1677FF);
  --op-azul-seta: #3BA0FF;
  --op-azul-r: 22,119,255;
  --op-ambar-bg: linear-gradient(135deg, rgba(22,119,255,.2), rgba(22,119,255,.07));
  --op-ambar-borda: rgba(22,119,255,.45);
  --op-ambar-ico: linear-gradient(140deg, #168BFF, #1677FF);
  --op-ambar-seta: #3BA0FF;
  --op-ambar-r: 22,119,255;
  --op-concluido-bg: rgba(22,119,255,.16);
  --op-concluido-cor: #3BA0FF;
  --op-concluido-borda: rgba(22,119,255,.32);
  --abast-bg: linear-gradient(180deg, rgba(120,140,165,.2), rgba(40,55,75,.18)), rgba(40,55,75,.1);
  --abast-bg-active: linear-gradient(180deg, rgba(120,140,165,.26), rgba(40,55,75,.24)), rgba(40,55,75,.14);
  --abast-borda: rgba(156,168,184,.4);
  --abast-borda-hover: rgba(156,168,184,.6);
  --abast-cor: #ffffff;
  --abast-cor-sub: rgba(156,168,184,.86);
  --abast-glow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(156,168,184,.06), 0 10px 24px rgba(0,0,0,.18);
  --abast-glow-hover: inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px rgba(156,168,184,.12), 0 10px 24px rgba(0,0,0,.22);
  --selo-vencida-bg: rgba(22,119,255,.16);
  --selo-vencida-borda: rgba(22,119,255,.5);
  --selo-vencida-cor: #4DA8FF;
  --selo-fluxo-bg: rgba(120,140,165,.16);
  --selo-fluxo-borda: rgba(156,168,184,.5);
  --selo-fluxo-cor: #9CA8B8;
  --btn-op-desativado-ico-bg: #0e1b2c;
  --btn-op-desativado-ico-color: #3a4a5e;
  --btn-op-desativado-seta: #3a4a5e;
  --toast-bg: #0e1b2c;
  --resumo-ico-apps: #168BFF;
  --resumo-ico-horas: #9CA8B8;
  --resumo-ico-km: #168BFF;
  --resumo-ico-patrimonio: #4DA8FF;
  --resumo-item-bg: #0a1726;
  --painel-dia-bg: linear-gradient(150deg, #08111e, #060c16);
  --toast-bg: #0e1b2c;
  --anel-trilho-verde: rgba(22,119,255,0.18);
  --anel-trilho-vermelho: rgba(156,168,184,0.18);
  --aviso-ambar-cor: #ffb020;
  --aviso-vermelho-cor: #ff6b6b;
}

/* MINIMALISTA LIGHT */
[data-tema-id="minimalista-light"] {
  --bg:           #1A1A1A;
  --bg-2:         #2A3A4A;
  --superficie:   rgba(255,255,255,0.1);
  --superficie-2: rgba(255,255,255,0.14);
  --superficie-3: rgba(255,255,255,0.18);
  --vidro:        rgba(255,255,255,0.1);
  --borda:        rgba(255,255,255,0.1);
  --borda-2:      rgba(255,255,255,0.14);
  --borda-forte:  rgba(255,255,255,0.2);
  --texto:        #ffffff;
  --texto-suave:  rgba(255,255,255,0.75);
  --texto-fraco:  rgba(255,255,255,0.55);
  --muted:        rgba(255,255,255,0.75);
  --menu-card-bg: rgba(255,255,255,0.08);
  --rgb-tinta:    26, 26, 26;
  --acento:       #168BFF;
  --acento-2:     #1A9EFF;
  --acento-fundo: rgba(22,139,255,0.15);
  --verde:        #168BFF;
  --verde-fundo:  rgba(22,139,255,0.12);
  --ambar:        #9CA8B8;
  --ambar-fundo:  rgba(156,168,184,0.12);
  --vermelho:     #9CA8B8;
  --vermelho-fundo: rgba(156,168,184,0.12);
  --sombra-1: 0 1px 3px rgba(0,0,0,0.3);
  --sombra-2: 0 4px 16px rgba(0,0,0,0.25), 0 1px 3px rgba(0,0,0,0.3);
  --sombra-3: 0 16px 48px rgba(0,0,0,0.4);
  --brilho-acento: 0 4px 16px rgba(22,139,255,0.35);
  --brilho-verde:  0 4px 16px rgba(52,211,153,0.25);
  --halo-1: rgba(22,139,255,0.12);
  --halo-2: rgba(22,139,255,0.08);
  --energia-metrica-bg: var(--superficie-2);

  /* PAPEIS v5.36 — tudo azul + neutro (minimalista) */
  --heroi-meta-bg: linear-gradient(150deg, #07101d 0%, #0a1726 55%, #0e2238 100%);
  --barra-meta-grad: linear-gradient(90deg, #168BFF 0%, #1677FF 100%);
  --barra-meta-glow: 0 0 10px rgba(22,119,255,.45);
  --heroi-alvo-glow: rgba(22,119,255,.4);
  --estado-verde-cor: #168BFF;
  --estado-verde-grad2: #4DA8FF;
  --estado-superada-grad2: #7FC4FF;
  --estado-ambar-cor: #5B8Fd6;
  --estado-ambar-grad2: #4DA8FF;
  --estado-vermelho-cor: #6E9Fd6;
  --estado-vermelho-grad2: #4DA8FF;
  --op-verde-bg: linear-gradient(135deg, rgba(22,119,255,.22), rgba(22,119,255,.08));
  --op-verde-borda: rgba(22,119,255,.5);
  --op-verde-glow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 22px rgba(22,119,255,.18);
  --op-verde-ico: linear-gradient(140deg, #168BFF, #1677FF);
  --op-verde-seta: #3BA0FF;
  --op-verde-r: 22,119,255;
  --op-vermelho-bg: linear-gradient(135deg, rgba(120,140,165,.18), rgba(120,140,165,.06));
  --op-vermelho-borda: rgba(156,168,184,.4);
  --op-vermelho-glow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 22px rgba(0,0,0,.25);
  --op-vermelho-ico: linear-gradient(140deg, #5a6b80, #3a4a5e);
  --op-vermelho-seta: #9CA8B8;
  --op-vermelho-r: 156,168,184;
  --op-azul-bg: linear-gradient(135deg, rgba(22,119,255,.22), rgba(22,119,255,.08));
  --op-azul-borda: rgba(22,119,255,.5);
  --op-azul-glow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 22px rgba(22,119,255,.18);
  --op-azul-ico: linear-gradient(140deg, #168BFF, #1677FF);
  --op-azul-seta: #3BA0FF;
  --op-azul-r: 22,119,255;
  --op-ambar-bg: linear-gradient(135deg, rgba(22,119,255,.2), rgba(22,119,255,.07));
  --op-ambar-borda: rgba(22,119,255,.45);
  --op-ambar-ico: linear-gradient(140deg, #168BFF, #1677FF);
  --op-ambar-seta: #3BA0FF;
  --op-ambar-r: 22,119,255;
  --op-concluido-bg: rgba(22,119,255,.16);
  --op-concluido-cor: #3BA0FF;
  --op-concluido-borda: rgba(22,119,255,.32);
  --abast-bg: linear-gradient(180deg, rgba(120,140,165,.2), rgba(40,55,75,.18)), rgba(40,55,75,.1);
  --abast-bg-active: linear-gradient(180deg, rgba(120,140,165,.26), rgba(40,55,75,.24)), rgba(40,55,75,.14);
  --abast-borda: rgba(156,168,184,.4);
  --abast-borda-hover: rgba(156,168,184,.6);
  --abast-cor: #ffffff;
  --abast-cor-sub: rgba(156,168,184,.86);
  --abast-glow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(156,168,184,.06), 0 10px 24px rgba(0,0,0,.18);
  --abast-glow-hover: inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px rgba(156,168,184,.12), 0 10px 24px rgba(0,0,0,.22);
  --selo-vencida-bg: rgba(22,119,255,.16);
  --selo-vencida-borda: rgba(22,119,255,.5);
  --selo-vencida-cor: #4DA8FF;
  --selo-fluxo-bg: rgba(120,140,165,.16);
  --selo-fluxo-borda: rgba(156,168,184,.5);
  --selo-fluxo-cor: #9CA8B8;
  --btn-op-desativado-ico-bg: #0e1b2c;
  --btn-op-desativado-ico-color: #3a4a5e;
  --btn-op-desativado-seta: #3a4a5e;
  --toast-bg: #0e1b2c;
  --resumo-ico-apps: #168BFF;
  --resumo-ico-horas: #9CA8B8;
  --resumo-ico-km: #168BFF;
  --resumo-ico-patrimonio: #4DA8FF;
  --resumo-item-bg: #0a1726;
  --painel-dia-bg: linear-gradient(150deg, #08111e, #060c16);
  --toast-bg: #0e1b2c;
  --anel-trilho-verde: rgba(22,119,255,0.18);
  --anel-trilho-vermelho: rgba(156,168,184,0.18);
  --aviso-ambar-cor: #b27200;
  --aviso-vermelho-cor: #c92626;
}

/* ALTO CONTRASTE */
[data-tema-id="alto-contraste"] {
  --bg:           #000000;
  --bg-2:         #0a0a0a;
  --superficie:   rgba(255,255,255,0.06);
  --superficie-2: rgba(255,255,255,0.1);
  --superficie-3: rgba(255,255,255,0.14);
  --vidro:        rgba(0,0,0,0.95);
  --borda:        rgba(255,255,255,0.2);
  --borda-2:      rgba(255,255,255,0.3);
  --borda-forte:  rgba(255,255,255,0.5);
  --texto:        #ffffff;
  --texto-suave:  #cccccc;
  --texto-fraco:  #aaaaaa;
  --muted:        #cccccc;
  --menu-card-bg: linear-gradient(180deg, rgba(20,20,20,.95), rgba(0,0,0,.95));
  --rgb-tinta:    0, 0, 0;
  --acento:       #0077FF;
  --acento-2:     #3399FF;
  --acento-fundo: rgba(0,119,255,0.15);
  --verde:        #3399FF;
  --verde-fundo:  rgba(51,153,255,0.14);
  --ambar:        #cccccc;
  --ambar-fundo:  rgba(204,204,204,0.14);
  --vermelho:     #cccccc;
  --vermelho-fundo: rgba(204,204,204,0.14);
  --sombra-1: 0 1px 3px rgba(0,0,0,0.8);
  --sombra-2: 0 4px 16px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.8);
  --sombra-3: 0 16px 48px rgba(0,0,0,0.9);
  --brilho-acento: 0 4px 18px rgba(0,119,255,0.4);
  --brilho-verde:  0 4px 18px rgba(0,255,136,0.3);
  --halo-1: rgba(0,119,255,0.15);
  --halo-2: rgba(0,255,136,0.08);
  --energia-metrica-bg: #1a1a1a;

  /* PAPEIS v5.36 — alto contraste (azul vivido + neutro forte) */
  --heroi-meta-bg: linear-gradient(150deg, #000000 0%, #001022 55%, #002244 100%);
  --barra-meta-grad: linear-gradient(90deg, #0077FF 0%, #3399FF 100%);
  --barra-meta-glow: 0 0 12px rgba(0,119,255,.6);
  --heroi-alvo-glow: rgba(0,119,255,.6);
  --estado-verde-cor: #0077FF;
  --estado-verde-grad2: #3399FF;
  --estado-superada-grad2: #66BBFF;
  --estado-ambar-cor: #3399FF;
  --estado-ambar-grad2: #66BBFF;
  --estado-vermelho-cor: #3399FF;
  --estado-vermelho-grad2: #66BBFF;
  --op-verde-bg: linear-gradient(135deg, rgba(0,119,255,.32), rgba(0,119,255,.12));
  --op-verde-borda: rgba(0,119,255,.7);
  --op-verde-glow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 22px rgba(0,119,255,.3);
  --op-verde-ico: linear-gradient(140deg, #0077FF, #3399FF);
  --op-verde-seta: #3399FF;
  --op-verde-r: 0,119,255;
  --op-vermelho-bg: linear-gradient(135deg, rgba(200,200,200,.22), rgba(200,200,200,.08));
  --op-vermelho-borda: rgba(220,220,220,.5);
  --op-vermelho-glow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 22px rgba(0,0,0,.4);
  --op-vermelho-ico: linear-gradient(140deg, #888, #555);
  --op-vermelho-seta: #cccccc;
  --op-vermelho-r: 220,220,220;
  --op-azul-bg: linear-gradient(135deg, rgba(0,119,255,.32), rgba(0,119,255,.12));
  --op-azul-borda: rgba(0,119,255,.7);
  --op-azul-glow: inset 0 1px 0 rgba(255,255,255,.08), 0 6px 22px rgba(0,119,255,.3);
  --op-azul-ico: linear-gradient(140deg, #0077FF, #3399FF);
  --op-azul-seta: #3399FF;
  --op-azul-r: 0,119,255;
  --op-ambar-bg: linear-gradient(135deg, rgba(0,119,255,.3), rgba(0,119,255,.1));
  --op-ambar-borda: rgba(0,119,255,.65);
  --op-ambar-ico: linear-gradient(140deg, #0077FF, #3399FF);
  --op-ambar-seta: #3399FF;
  --op-ambar-r: 0,119,255;
  --op-concluido-bg: rgba(0,119,255,.2);
  --op-concluido-cor: #3399FF;
  --op-concluido-borda: rgba(0,119,255,.4);
  --abast-bg: linear-gradient(180deg, rgba(200,200,200,.2), rgba(20,20,20,.18)), rgba(20,20,20,.1);
  --abast-bg-active: linear-gradient(180deg, rgba(200,200,200,.26), rgba(20,20,20,.24)), rgba(20,20,20,.14);
  --abast-borda: rgba(220,220,220,.5);
  --abast-borda-hover: rgba(220,220,220,.7);
  --abast-cor: #ffffff;
  --abast-cor-sub: rgba(220,220,220,.86);
  --abast-glow: inset 0 1px 0 rgba(255,255,255,.08), 0 0 0 1px rgba(220,220,220,.08), 0 10px 24px rgba(0,0,0,.3);
  --abast-glow-hover: inset 0 1px 0 rgba(255,255,255,.1), 0 0 18px rgba(220,220,220,.16), 0 10px 24px rgba(0,0,0,.4);
  --selo-vencida-bg: rgba(0,119,255,.2);
  --selo-vencida-borda: rgba(0,119,255,.6);
  --selo-vencida-cor: #66BBFF;
  --selo-fluxo-bg: rgba(200,200,200,.18);
  --selo-fluxo-borda: rgba(220,220,220,.55);
  --selo-fluxo-cor: #cccccc;
  --btn-op-desativado-ico-bg: #1a1a1a;
  --btn-op-desativado-ico-color: #555;
  --btn-op-desativado-seta: #555;
  --toast-bg: #1a1a1a;
  --resumo-ico-apps: #3399FF;
  --resumo-ico-horas: #cccccc;
  --resumo-ico-km: #3399FF;
  --resumo-ico-patrimonio: #66BBFF;
  --resumo-item-bg: #0a0a0a;
  --painel-dia-bg: linear-gradient(150deg, #000000, #001022);
  --toast-bg: #1a1a1a;
  --anel-trilho-verde: rgba(0,119,255,0.2);
  --anel-trilho-vermelho: rgba(200,200,200,0.18);
  --aviso-ambar-cor: #FFD700;
  --aviso-vermelho-cor: #FF4444;
}

/* GRADIENTE CUSTOM — cores injetadas via JS em --tema-cor1 e --tema-cor2 */
[data-tema-id="custom"] {
  --superficie:   rgba(255,255,255,0.08);
  --superficie-2: rgba(255,255,255,0.12);
  --superficie-3: rgba(255,255,255,0.16);
  --vidro:        rgba(0,0,0,0.32);
  --borda:        rgba(255,255,255,0.1);
  --borda-2:      rgba(255,255,255,0.15);
  --borda-forte:  rgba(255,255,255,0.22);
  --texto:        #ffffff;
  --texto-suave:  rgba(255,255,255,0.8);
  --texto-fraco:  rgba(255,255,255,0.6);
  --muted:        rgba(255,255,255,0.8);
  --menu-card-bg: rgba(255,255,255,0.08);
  --acento:       #1677FF;
  --acento-2:     #168BFF;
  --acento-fundo: rgba(22,119,255,0.15);
  --verde:        #168BFF;
  --verde-fundo:  rgba(22,139,255,0.12);
  --ambar:        #9CA8B8;
  --ambar-fundo:  rgba(156,168,184,0.12);
  --vermelho:     #9CA8B8;
  --vermelho-fundo: rgba(156,168,184,0.12);
  --sombra-1: 0 1px 3px rgba(0,0,0,0.4);
  --sombra-2: 0 4px 16px rgba(0,0,0,0.35), 0 1px 3px rgba(0,0,0,0.4);
  --sombra-3: 0 16px 48px rgba(0,0,0,0.5);
  --brilho-acento: 0 4px 18px rgba(22,119,255,0.3);
  --brilho-verde:  0 4px 18px rgba(52,211,153,0.2);
  --halo-1: rgba(22,119,255,0.1);
  --halo-2: rgba(22,119,255,0.06);
  --energia-metrica-bg: var(--superficie-2);

  /* PAPEIS v5.36 — custom (azul + neutro; fundo usa cores do usuario) */
  --heroi-meta-bg: linear-gradient(150deg, rgba(0,0,0,.35), rgba(0,0,0,.15));
  --barra-meta-grad: linear-gradient(90deg, #168BFF 0%, #1677FF 100%);
  --barra-meta-glow: 0 0 10px rgba(22,119,255,.45);
  --heroi-alvo-glow: rgba(22,119,255,.4);
  --estado-verde-cor: #168BFF;
  --estado-verde-grad2: #4DA8FF;
  --estado-superada-grad2: #7FC4FF;
  --estado-ambar-cor: #5B8Fd6;
  --estado-ambar-grad2: #4DA8FF;
  --estado-vermelho-cor: #6E9Fd6;
  --estado-vermelho-grad2: #4DA8FF;
  --op-verde-bg: linear-gradient(135deg, rgba(22,119,255,.22), rgba(22,119,255,.08));
  --op-verde-borda: rgba(22,119,255,.5);
  --op-verde-glow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 22px rgba(22,119,255,.18);
  --op-verde-ico: linear-gradient(140deg, #168BFF, #1677FF);
  --op-verde-seta: #3BA0FF;
  --op-verde-r: 22,119,255;
  --op-vermelho-bg: linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05));
  --op-vermelho-borda: rgba(255,255,255,.3);
  --op-vermelho-glow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 22px rgba(0,0,0,.25);
  --op-vermelho-ico: linear-gradient(140deg, rgba(255,255,255,.4), rgba(255,255,255,.2));
  --op-vermelho-seta: rgba(255,255,255,.7);
  --op-vermelho-r: 255,255,255;
  --op-azul-bg: linear-gradient(135deg, rgba(22,119,255,.22), rgba(22,119,255,.08));
  --op-azul-borda: rgba(22,119,255,.5);
  --op-azul-glow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 22px rgba(22,119,255,.18);
  --op-azul-ico: linear-gradient(140deg, #168BFF, #1677FF);
  --op-azul-seta: #3BA0FF;
  --op-azul-r: 22,119,255;
  --op-ambar-bg: linear-gradient(135deg, rgba(22,119,255,.2), rgba(22,119,255,.07));
  --op-ambar-borda: rgba(22,119,255,.45);
  --op-ambar-ico: linear-gradient(140deg, #168BFF, #1677FF);
  --op-ambar-seta: #3BA0FF;
  --op-ambar-r: 22,119,255;
  --op-concluido-bg: rgba(22,119,255,.16);
  --op-concluido-cor: #3BA0FF;
  --op-concluido-borda: rgba(22,119,255,.32);
  --abast-bg: linear-gradient(180deg, rgba(255,255,255,.14), rgba(0,0,0,.12)), rgba(0,0,0,.08);
  --abast-bg-active: linear-gradient(180deg, rgba(255,255,255,.2), rgba(0,0,0,.18)), rgba(0,0,0,.12);
  --abast-borda: rgba(255,255,255,.3);
  --abast-borda-hover: rgba(255,255,255,.5);
  --abast-cor: #ffffff;
  --abast-cor-sub: rgba(255,255,255,.75);
  --abast-glow: inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 1px rgba(255,255,255,.06), 0 10px 24px rgba(0,0,0,.18);
  --abast-glow-hover: inset 0 1px 0 rgba(255,255,255,.08), 0 0 18px rgba(255,255,255,.12), 0 10px 24px rgba(0,0,0,.22);
  --selo-vencida-bg: rgba(22,119,255,.16);
  --selo-vencida-borda: rgba(22,119,255,.5);
  --selo-vencida-cor: #4DA8FF;
  --selo-fluxo-bg: rgba(255,255,255,.12);
  --selo-fluxo-borda: rgba(255,255,255,.4);
  --selo-fluxo-cor: rgba(255,255,255,.8);
  --btn-op-desativado-ico-bg: rgba(0,0,0,.3);
  --btn-op-desativado-ico-color: rgba(255,255,255,.35);
  --btn-op-desativado-seta: rgba(255,255,255,.35);
  --toast-bg: rgba(20,20,20,.95);
  --resumo-ico-apps: #168BFF;
  --resumo-ico-horas: rgba(255,255,255,.7);
  --resumo-ico-km: #168BFF;
  --resumo-ico-patrimonio: #4DA8FF;
  --resumo-item-bg: rgba(0,0,0,.25);
  --painel-dia-bg: linear-gradient(150deg, rgba(0,0,0,.3), rgba(0,0,0,.15));
  --anel-trilho-verde: rgba(22,119,255,0.18);
  --anel-trilho-vermelho: rgba(156,168,184,0.18);
  --aviso-ambar-cor: #ffb020;
  --aviso-vermelho-cor: #ff6b6b;
}

/* Fundo especial para minimalista-light e custom (gradiente vertical) */
[data-tema-id="minimalista-light"] body,
[data-tema-id="minimalista-light"] html {
  background: linear-gradient(180deg, #1A1A1A 0%, #3A4A5A 55%, #1677FF 100%);
  background-attachment: fixed;
}

[data-tema-id="custom"] body,
[data-tema-id="custom"] html {
  background: linear-gradient(180deg, var(--tema-cor1, #1A1A1A) 0%, var(--tema-cor2, #8B5CF6) 100%);
  background-attachment: fixed;
}

/* ---------------------------------------------------------------------------
   TELA DE TEMAS (v5.36)
   --------------------------------------------------------------------------- */
.tela-temas-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 0 16px;
  font-size: 18px;
  font-weight: 600;
  color: var(--texto);
}

.temas-secao-titulo {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--texto-suave);
  margin: 20px 0 12px;
}

.temas-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 8px;
}

.tema-card-item {
  background: var(--superficie);
  border: 1.5px solid var(--borda-2);
  border-radius: var(--raio-card);
  padding: 12px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
  position: relative;
  overflow: hidden;
}

.tema-card-item:hover {
  border-color: var(--borda-forte);
  background: var(--superficie-2);
}

.tema-card-item.tema-ativo {
  border-color: var(--acento);
  background: var(--acento-fundo);
}

.tema-card-preview {
  width: 100%;
  height: 64px;
  border-radius: 10px;
  margin-bottom: 10px;
  border: 1px solid rgba(255,255,255,0.08);
  overflow: hidden;
  position: relative;
}

.tema-preview-barra {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 18px;
  background: rgba(255,255,255,0.06);
  border-top: 1px solid rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
}

.tema-preview-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(255,255,255,0.3);
}

.tema-preview-dot.acento {
  background: #1677FF;
}

.tema-card-nome {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 2px;
}

.tema-card-desc {
  font-size: 11px;
  color: var(--texto-suave);
}

.tema-check {
  position: absolute;
  top: 8px; right: 8px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--acento);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
}

.tema-card-item.tema-ativo .tema-check {
  display: flex;
}

/* Bloco de gradiente customizável */
.tema-custom-bloco {
  background: var(--superficie);
  border: 1.5px solid var(--borda-2);
  border-radius: var(--raio-card);
  padding: 16px;
  margin-top: 8px;
}

.tema-custom-bloco.tema-ativo {
  border-color: var(--acento);
  background: var(--acento-fundo);
}

.tema-custom-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
  margin-bottom: 4px;
}

.tema-custom-desc {
  font-size: 12px;
  color: var(--texto-suave);
  margin-bottom: 16px;
}

.tema-custom-pickers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.tema-picker-grupo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tema-picker-label {
  font-size: 11px;
  color: var(--texto-suave);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tema-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tema-color-input {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1.5px solid var(--borda-forte);
  cursor: pointer;
  padding: 2px;
  background: transparent;
}

.tema-color-hex {
  flex: 1;
  font-size: 12px;
  font-family: monospace;
  padding: 8px 10px;
  background: var(--superficie-2);
  border: 1px solid var(--borda-2);
  border-radius: 8px;
  color: var(--texto);
  outline: none;
}

.tema-gradient-preview {
  width: 100%;
  height: 80px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.1);
  margin-bottom: 14px;
  transition: background .3s;
}

.btn-aplicar-tema {
  width: 100%;
  padding: 13px;
  background: var(--acento);
  border: none;
  border-radius: 12px;
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: opacity .2s;
  font-family: inherit;
}

.btn-aplicar-tema:hover { opacity: 0.9; }
.btn-aplicar-tema:active { transform: scale(0.98); }

/* badge "Meu tema" no 6º card */
.tema-badge-custom {
  display: inline-block;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--acento-fundo);
  color: var(--acento);
  border: 1px solid var(--acento);
  margin-top: 4px;
}

/* botao de acao neutra (Atualizar metricas) — usa acento do tema, nao vermelho */
.btn-acao-neutra:hover  { background: var(--acento-fundo); }
.btn-acao-neutra:active { background: var(--acento-fundo); }
.acao-neutra-icone {
  background: var(--acento-fundo) !important;
  border-color: var(--acento) !important;
  color: var(--acento) !important;
}
.acao-neutra-titulo { color: var(--acento) !important; }

/* ===========================================================================
   TEMA-TELA — Customizacao granular (Parte 2, Fatia 2)
   Modal full-screen com 2 colunas: grupos + preview ao vivo
   =========================================================================== */
.tema-tela-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.72);
  display: flex; align-items: stretch; justify-content: center;
  padding: 0;
}
.tema-tela-box {
  width: 100%; max-width: 980px;
  background: var(--bg, #050A12);
  display: flex; flex-direction: column;
  max-height: 100vh; overflow: hidden;
  border-left: 1px solid var(--borda-2);
  border-right: 1px solid var(--borda-2);
}
.tema-tela-header {
  padding: 12px 16px;
  border-bottom: 1px solid var(--borda-2);
  background: var(--superficie, #0e1b2c);
  position: relative;
  flex-shrink: 0;
}
.tema-tela-fechar {
  position: absolute; right: 8px; top: 8px;
  width: 36px; height: 36px;
  background: transparent; border: none;
  color: var(--texto-suave, #9CA8B8);
  font-size: 24px; line-height: 1;
  cursor: pointer; border-radius: 8px;
}
.tema-tela-fechar:hover { background: var(--superficie-2); color: var(--texto); }
.tema-tela-titulo {
  margin: 0; font-size: 17px; color: var(--texto);
  padding-right: 40px;
}
.tema-tela-nome-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
}
.tema-tela-nome-label {
  font-size: 12px; color: var(--texto-suave); font-weight: 600;
}
.tema-tela-nome-input {
  flex: 1;
  padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--borda-2);
  background: var(--superficie-2);
  color: var(--texto); font-size: 14px;
}

.tema-tela-corpo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex: 1; min-height: 0;
}
.tema-tela-grupos {
  overflow-y: auto;
  padding: 10px 12px;
  border-right: 1px solid var(--borda-2);
  background: var(--bg);
}
.tema-tela-preview-wrap {
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg-2, #0a1422);
}
.tema-tela-preview-rotulo {
  padding: 8px 12px;
  font-size: 11px; text-transform: uppercase;
  letter-spacing: .06em; font-weight: 700;
  color: var(--texto-suave);
  border-bottom: 1px solid var(--borda-2);
  background: var(--superficie);
  flex-shrink: 0;
}
.tema-tela-preview {
  flex: 1; overflow-y: auto;
  padding: 14px;
  /* o style inline com as vars CSS e o gradiente vem do JS */
}

/* === grupos accordion === */
.tema-tela-grupo {
  margin-bottom: 8px;
  background: var(--superficie);
  border: 1px solid var(--borda-2);
  border-radius: 10px;
  overflow: hidden;
}
.tema-tela-grupo-titulo {
  padding: 11px 14px;
  font-size: 13px; font-weight: 700;
  color: var(--texto);
  cursor: pointer;
  list-style: none;
  position: relative;
}
.tema-tela-grupo-titulo::-webkit-details-marker { display: none; }
.tema-tela-grupo-titulo::after {
  content: '+'; position: absolute; right: 14px; top: 50%;
  transform: translateY(-50%); font-size: 18px; color: var(--texto-suave);
}
.tema-tela-grupo[open] .tema-tela-grupo-titulo::after { content: '−'; }
.tema-tela-grupo-titulo:hover { background: var(--superficie-2); }
.tema-tela-grupo-lista {
  padding: 4px 12px 12px;
  display: flex; flex-direction: column; gap: 8px;
}

/* === linha de papel (label + input) === */
.tema-tela-papel {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-top: 1px dashed var(--borda-2);
}
.tema-tela-papel:first-child { border-top: 0; }
.tema-tela-papel-label {
  flex: 1; min-width: 0;
  font-size: 12px; color: var(--texto-suave);
  line-height: 1.35;
}
.tema-tela-papel-input {
  display: flex; align-items: center; gap: 6px;
  flex-shrink: 0;
}
.tema-tela-papel-color {
  width: 30px; height: 30px;
  border: 1px solid var(--borda-2);
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  background: transparent;
}
.tema-tela-papel-hex {
  width: 110px;
  padding: 5px 7px;
  border: 1px solid var(--borda-2);
  border-radius: 6px;
  background: var(--superficie-2);
  color: var(--texto);
  font-size: 11px;
  font-family: ui-monospace, Menlo, monospace;
}
.tema-tela-papel-limpar {
  width: 24px; height: 24px;
  border: 1px solid var(--borda-2);
  background: var(--superficie-2);
  color: var(--texto-suave);
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
}
.tema-tela-papel-limpar:hover {
  background: var(--superficie-3); color: var(--texto);
}
.tema-tela-papel-grad-preview {
  width: 60px; height: 30px;
  border: 1px solid var(--borda-2);
  border-radius: 6px;
}
.tema-tela-papel-toggle {
  width: 20px; height: 20px;
  accent-color: var(--acento);
  cursor: pointer;
}

/* === rodape com botoes === */
.tema-tela-rodape {
  display: flex; gap: 6px;
  padding: 10px 12px;
  border-top: 1px solid var(--borda-2);
  background: var(--superficie);
  flex-shrink: 0;
  flex-wrap: wrap;
}
.tema-tela-btn {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 12px; font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
.tema-tela-btn-sec {
  background: var(--superficie-2);
  color: var(--texto);
  border-color: var(--borda-2);
}
.tema-tela-btn-sec:hover { background: var(--superficie-3); }
.tema-tela-btn-pri {
  background: linear-gradient(140deg, var(--acento), var(--acento-2));
  color: var(--acento-texto, #fff);
  margin-left: auto;
  padding: 9px 22px;
}
.tema-tela-btn-pri:active { transform: scale(.98); }

/* === toast === */
.tema-tela-toast {
  position: fixed; bottom: 20px; left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  padding: 10px 18px;
  background: var(--toast-bg, #16202f);
  border: 1px solid var(--borda-2);
  border-radius: 10px;
  color: var(--texto);
  font-size: 13px; font-weight: 700;
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  transition: opacity .25s;
}

/* === botao "Personalizar cores" no card de tema custom === */
.btn-personalizar-tema {
  width: 100%; margin-top: 10px;
  padding: 12px 14px;
  border-radius: 11px;
  border: 1px solid var(--borda-2);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: 14px; font-weight: 700;
  cursor: pointer;
}
.btn-personalizar-tema:hover { background: var(--superficie-3); }
.btn-personalizar-tema:active { transform: scale(.98); }

/* === MINI-APP do PREVIEW (espelha componentes reais) === */
.tema-tela-preview .ttp-header {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; margin-bottom: 10px;
  background: var(--vidro, rgba(0,0,0,.32));
  border: 1px solid var(--borda-2, rgba(255,255,255,.15));
  border-radius: 11px;
}
.ttp-logo {
  width: 36px; height: 36px;
  background: linear-gradient(140deg, var(--acento), var(--acento-2));
  color: var(--acento-texto, #fff);
  font-weight: 800; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
}
.ttp-htext strong {
  display: block; font-size: 12px; color: var(--texto, #fff);
}
.ttp-htext span {
  font-size: 10px; color: var(--texto-suave, rgba(255,255,255,.7));
}

.tema-tela-preview .ttp-heroi {
  background: var(--vidro, rgba(0,0,0,.32));
  border: 1px solid var(--borda-2, rgba(255,255,255,.15));
  border-radius: 14px;
  padding: 12px; margin-bottom: 10px;
}
.ttp-heroi-top { margin-bottom: 6px; }
.ttp-heroi-lbl {
  font-size: 10px; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto, #fff); font-weight: 800;
}
.ttp-heroi-row {
  display: flex; align-items: flex-end;
  justify-content: space-between;
}
.ttp-heroi-num {
  font-size: 28px; font-weight: 800; color: var(--texto, #fff); line-height: 1;
}
.ttp-aneis { display: flex; gap: 8px; }
.ttp-anel {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 4px solid var(--anel-trilho-verde);
  border-top-color: var(--anel-traco-verde, var(--acento));
  border-right-color: var(--anel-traco-verde, var(--acento));
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800;
  color: var(--anel-traco-verde, var(--acento-2));
}
.ttp-anel-verm {
  border-color: var(--anel-trilho-vermelho);
  border-top-color: var(--anel-traco-vermelho, var(--aviso-vermelho-cor));
  border-right-color: var(--anel-traco-vermelho, var(--aviso-vermelho-cor));
  color: var(--anel-traco-vermelho, var(--aviso-vermelho-cor));
}
.ttp-barra {
  width: 100%; height: 6px;
  border-radius: 999px;
  background: rgba(255,255,255,.1);
  margin-top: 8px; overflow: hidden;
}
.ttp-barra-f {
  height: 100%; width: 45%;
  border-radius: 999px;
  background: var(--barra-meta-grad);
}
.ttp-selos {
  display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap;
}
.ttp-selo-venc {
  background: var(--selo-vencida-bg);
  border: 1px solid var(--selo-vencida-borda);
  color: var(--selo-vencida-cor);
  padding: 4px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700;
}
.ttp-selo-fluxo {
  background: var(--selo-fluxo-bg);
  border: 1px solid var(--selo-fluxo-borda);
  color: var(--selo-fluxo-cor);
  padding: 4px 8px; border-radius: 6px;
  font-size: 10px; font-weight: 700;
}

.ttp-botoes {
  display: grid; grid-template-columns: 1fr 1fr 1fr;
  gap: 6px; margin-bottom: 10px;
}
.ttp-bop {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; padding: 10px 4px;
  border-radius: 10px;
  border: 1px solid;
}
.ttp-bop-v {
  background: var(--op-verde-bg);
  border-color: var(--op-verde-borda);
}
.ttp-bop-r {
  background: var(--op-vermelho-bg);
  border-color: var(--op-vermelho-borda);
}
.ttp-bop-a {
  background: var(--op-azul-bg);
  border-color: var(--op-azul-borda);
}
.ttp-bico {
  width: 26px; height: 26px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 12px;
}
.ttp-bop-v .ttp-bico { background: var(--op-verde-ico); }
.ttp-bop-r .ttp-bico { background: var(--op-vermelho-ico); }
.ttp-bop-a .ttp-bico { background: var(--op-azul-ico); }
.ttp-btxt {
  font-size: 11px; font-weight: 700;
  color: var(--texto, #fff);
}

.ttp-btn-prim {
  width: 100%; padding: 11px;
  border: none; border-radius: 10px;
  background: linear-gradient(140deg, var(--acento), var(--acento-2));
  color: var(--acento-texto, #fff);
  font-weight: 700; font-size: 13px;
  margin-bottom: 10px;
  cursor: pointer;
}
.ttp-abast-grande {
  width: 100%; padding: 11px;
  border: 1px solid var(--abast-borda);
  border-radius: 10px;
  background: var(--abast-bg);
  color: var(--abast-cor);
  font-weight: 700; font-size: 13px;
  margin-bottom: 10px;
  cursor: pointer;
}

.ttp-cards {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 8px; margin-bottom: 10px;
}
.ttp-card {
  background: var(--energia-metrica-bg);
  border: 1px solid var(--borda, rgba(255,255,255,.1));
  border-radius: 9px; padding: 9px;
}
.ttp-lab {
  display: block;
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  color: var(--texto-suave, rgba(255,255,255,.6));
  letter-spacing: .04em;
}
.ttp-card strong {
  display: block; margin-top: 3px;
  font-size: 15px; color: var(--texto, #fff);
}

.ttp-avisos {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 10px;
}
.ttp-aviso {
  padding: 7px 9px;
  border-radius: 8px;
  font-size: 11px; font-weight: 700;
  border: 1px solid;
}
.ttp-aviso-ambar {
  background: rgba(255,176,32,.1);
  color: var(--aviso-ambar-cor);
  border-color: var(--aviso-ambar-cor);
}
.ttp-aviso-verm {
  background: rgba(255,59,59,.1);
  color: var(--aviso-vermelho-cor);
  border-color: var(--aviso-vermelho-cor);
}

.ttp-resumo {
  display: grid; grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6px;
  background: var(--resumo-item-bg);
  border-radius: 10px;
  padding: 10px;
  border: 1px solid var(--borda, rgba(255,255,255,.08));
}
.ttp-resumo-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px;
  font-size: 10px; color: var(--texto-suave, rgba(255,255,255,.7));
}
.ttp-ico { font-size: 14px; }
.ttp-ico-apps { color: var(--resumo-ico-apps); }
.ttp-ico-horas { color: var(--resumo-ico-horas); }
.ttp-ico-km { color: var(--resumo-ico-km); }
.ttp-ico-pat { color: var(--resumo-ico-patrimonio); }

/* === RESPONSIVO: empilha grupos/preview em telas pequenas === */
@media (max-width: 720px) {
  .tema-tela-corpo {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  .tema-tela-grupos {
    border-right: none;
    border-bottom: 1px solid var(--borda-2);
  }
  .tema-tela-papel-hex { width: 90px; }
}

/* botao "Personalizar" em cada card de tema (Parte 2, v5.43) */
.tema-card-personalizar {
  width: 100%;
  margin-top: 8px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--borda-2);
  background: var(--superficie-2);
  color: var(--texto);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.tema-card-personalizar:hover { background: var(--superficie-3); }
.tema-card-personalizar:active { transform: scale(.97); }

/* ============================================================
   PREVIEW INTERATIVO — clique abre grupo na esquerda (v5.44)
   ============================================================ */

/* elementos clicáveis do preview: cursor pointer + hover sutil */
.tema-tela-preview [data-pers-grupo] {
  cursor: pointer;
  transition: outline .1s, box-shadow .1s;
  border-radius: 6px;
  outline: 2px solid transparent;
}
.tema-tela-preview [data-pers-grupo]:hover {
  outline-color: rgba(255,255,255,.35);
}

/* flash de destaque no grupo da esquerda quando clicado */
@keyframes grupoFlash {
  0%   { background: var(--acento-fundo, rgba(22,139,255,.18)); border-color: var(--acento, #168BFF); }
  70%  { background: var(--acento-fundo, rgba(22,139,255,.18)); border-color: var(--acento, #168BFF); }
  100% { background: var(--superficie); border-color: var(--borda-2); }
}
.tema-tela-grupo.tema-grupo-destaque {
  animation: grupoFlash 1.4s ease-out forwards;
}

/* dica flutuante no preview */
.ttp-preview-dica {
  position: sticky;
  bottom: 0;
  background: rgba(0,0,0,.75);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 8px;
  margin-top: 10px;
  text-align: center;
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}

/* ============================================================
   v5.91 — CARD DE ATUALIZAÇÃO DE VERSÃO (overlay bloqueante)
   Aparece quando o app detecta versão nova publicada.
   Centralizado, fundo escurecido, não fecha tocando fora.
   ============================================================ */
.cpp-update-overlay {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0,0,0,.65);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  backdrop-filter: blur(2px);
}
.cpp-update-overlay[hidden] { display: none; }
.cpp-update-card {
  background: var(--bg-2, #142139);
  border: 1px solid var(--borda-2, #1B3045);
  border-radius: 18px;
  padding: 26px 22px 22px;
  width: 100%; max-width: 360px;
  text-align: center;
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
  animation: cppUpdateEntra .22s ease-out;
}
@keyframes cppUpdateEntra {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cpp-update-titulo {
  font-size: 18px; font-weight: 800; margin: 0 0 14px;
  color: var(--texto, #fff);
}
.cpp-update-linha {
  font-size: 15px; margin: 2px 0;
  color: var(--texto-suave, #9CA8B8);
}
.cpp-update-linha strong {
  color: var(--texto, #fff); font-weight: 700;
}
.cpp-update-btn {
  margin-top: 20px; width: 100%;
  padding: 14px 18px;
  border: none; border-radius: 12px;
  background: var(--acento, #168BFF); color: #fff;
  font-size: 16px; font-weight: 700; cursor: pointer;
  transition: filter .15s ease, transform .1s ease;
}
.cpp-update-btn:hover { filter: brightness(1.08); }
.cpp-update-btn:active { transform: scale(.98); }
.cpp-update-btn:disabled { opacity: .6; cursor: default; }
.cpp-update-status {
  margin: 12px 0 0; font-size: 13px;
  color: var(--texto-suave, #9CA8B8);
}
.cpp-update-status[hidden] { display: none; }

/* v5.95 — botão "Indique e Ganhe" abaixo dos ícones do header (à direita).
   Curto, verde forte, 1 linha. Fica no espaço vazio sob suporte/cadeado/tema. */
.header-convidar {
  display: inline-block;
  border: 1px solid rgba(0, 232, 137, 0.40);
  background: rgba(0, 232, 137, 0.12);
  border-radius: 9px;
  padding: 4px 9px;
  color: #00E889;
  font-size: clamp(7px, 2.4vw, 9px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s;
}
.header-convidar:active { background: rgba(0, 232, 137, 0.24); }
[data-tema="claro"] .header-convidar {
  color: #059669;
  border-color: rgba(5, 150, 105, 0.4);
  background: rgba(5, 150, 105, 0.10);
}

/* v5.93 — modal "Convidar amigos" */
.modal-convidar { text-align: center; }
.convidar-topo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 6px; }
.convidar-emoji { font-size: 36px; line-height: 1; }
.convidar-sub {
  font-size: 13px; color: var(--texto-suave);
  line-height: 1.5; margin: 4px 0 16px;
}
.convidar-sub strong { color: var(--verde, #00E889); }
.convidar-link-box {
  background: var(--superficie-2);
  border: 1px solid var(--borda-2);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 14px;
  text-align: left;
}
.convidar-link-rotulo {
  font-size: 10px; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 6px;
}
.convidar-link {
  font-size: 12px; color: var(--texto);
  word-break: break-all; line-height: 1.5;
}
.convidar-btn-wa {
  width: 100%; margin-bottom: 8px;
  background: var(--verde, #00C774); color: #00170d;
  font-weight: 800;
}
.convidar-btn-copiar { width: 100%; margin-bottom: 4px; }
.convidar-codigo {
  font-size: 11px; color: var(--texto-suave);
  margin: 12px 0 14px; line-height: 1.4;
}
.convidar-btn-fechar { width: 100%; }

/* v5.98 — tela Minhas indicações */
.modal-indicacoes { text-align: center; }
.indic-topo { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 10px; }
.indic-emoji { font-size: 36px; line-height: 1; }
.indic-carregando, .indic-vazio {
  font-size: 13px; color: var(--texto-suave);
  line-height: 1.5; margin: 18px 0; text-align: center;
}
.indic-resumo {
  display: flex; gap: 10px; margin-bottom: 12px;
}
.indic-resumo-num {
  flex: 1; background: var(--superficie-2);
  border: 1px solid var(--borda-2); border-radius: 10px;
  padding: 12px 8px; display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.indic-resumo-num strong { font-size: 26px; color: var(--verde, #00E889); line-height: 1; }
.indic-resumo-num small { font-size: 10px; color: var(--texto-suave); line-height: 1.3; }
.indic-aviso {
  font-size: 12px; color: var(--texto-suave); line-height: 1.5;
  background: var(--superficie-2); border: 1px dashed var(--borda-2);
  border-radius: 10px; padding: 9px 11px; margin-bottom: 14px; text-align: left;
}
.indic-aviso strong { color: var(--texto); }
.indic-lista { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.indic-item {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--superficie-2); border: 1px solid var(--borda-2);
  border-radius: 10px; padding: 9px 11px; text-align: left;
}
.indic-item-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.indic-item-nome { font-size: 13px; color: var(--texto); font-weight: 600; }
.indic-item-email { font-size: 11px; color: var(--texto-suave); word-break: break-all; }
.indic-tag { font-size: 11px; font-weight: 700; white-space: nowrap; padding: 3px 8px; border-radius: 999px; }
.indic-tag-ok { color: #00170d; background: var(--verde, #00C774); }
.indic-tag-aguard { color: #2a1a00; background: #FFB020; }
.indic-tag-off { color: var(--texto-suave); background: var(--borda-2); }

/* v6.25 — redesenho "Minhas indicações" (dinheiro no centro) */
.indic-hero {
  background: linear-gradient(150deg, rgba(52,211,153,.16), rgba(52,211,153,.04));
  border: 1px solid rgba(52,211,153,.4); border-radius: 16px;
  padding: 18px 16px; text-align: center; margin-bottom: 12px;
  box-shadow: 0 6px 22px rgba(52,211,153,.14);
}
.indic-hero-rot { font-size: 12px; color: var(--texto-fraco); text-transform: uppercase; letter-spacing: .05em; }
.indic-hero-val { font-size: 40px; font-weight: 900; color: var(--verde, #34d399); line-height: 1.05; margin: 4px 0; }
.indic-hero-sub { font-size: 13px; color: var(--texto-fraco); }
.indic-hero-sub strong { color: var(--texto); }
.indic-quadro { display: flex; gap: 10px; margin-bottom: 12px; }
.indic-cx { flex: 1; background: var(--superficie-2); border: 1px solid var(--borda-2); border-radius: 13px; padding: 12px 6px; text-align: center; }
.indic-cx-n { font-size: 26px; font-weight: 900; line-height: 1; color: var(--texto); }
.indic-cx-n.paga { color: var(--verde, #34d399); }
.indic-cx-n.grat { color: var(--ambar, #fbbf24); }
.indic-cx-l { font-size: 11px; color: var(--texto-suave); margin-top: 4px; }
.indic-pot {
  background: var(--acento-fundo); border: 1px solid rgba(59,130,246,.35);
  border-radius: 13px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5;
  color: var(--texto-fraco); margin-bottom: 14px;
}
.indic-pot strong { color: var(--acento-2, #60a5fa); }
.indic-sub-tit { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin: 4px 0 8px; }
.indic-item-grat { border-style: dashed; opacity: .92; }
.indic-tag-paga { color: #00170d; background: var(--verde-fundo, rgba(52,211,153,.14)); color: var(--verde, #34d399); border: 1px solid rgba(52,211,153,.4); }
.indic-tag-grat { color: var(--ambar, #fbbf24); background: var(--ambar-fundo, rgba(251,191,36,.14)); border: 1px solid rgba(251,191,36,.4); }
.indic-troca-desc { font-size: 12.5px; color: var(--texto-fraco); margin: -4px 0 10px; }
.indic-troca-desc strong { color: var(--verde, #34d399); }

/* v6.26 — saque mínimo R$ 50 */
.indic-saque-bloq {
  background: var(--ambar-fundo, rgba(251,191,36,.14)); border: 1px solid rgba(251,191,36,.4);
  border-radius: 11px; padding: 12px 14px; font-size: 13.5px; line-height: 1.5;
  color: var(--texto-fraco); margin-bottom: 10px; text-align: center;
}
.indic-saque-bloq strong { color: var(--ambar, #fbbf24); }
.indic-troca-btn:disabled {
  opacity: .45; filter: grayscale(.6); cursor: not-allowed;
  width: 100%; box-shadow: none;
}
.indic-troca {
  background: var(--superficie-2); border: 1px solid var(--borda-2);
  border-radius: 10px; padding: 12px; margin-bottom: 14px; text-align: left;
}
.indic-troca-tit { font-size: 13px; font-weight: 700; color: var(--texto); margin-bottom: 10px; }
.indic-troca-linha { display: flex; gap: 8px; align-items: center; }
.indic-troca-sel {
  flex: 1; padding: 10px; border-radius: 8px;
  border: 1px solid var(--borda-2); background: var(--superficie);
  color: var(--texto); font-size: 14px;
}
.indic-troca-btn { flex: 0 0 auto; }
.indic-troca-valor { font-size: 13px; color: var(--texto); margin-top: 10px; text-align: center; }
.indic-troca-valor strong { color: var(--verde, #00E889); font-size: 16px; }
.indic-troca-indisp { text-align: center; color: var(--texto-suave); margin-bottom: 14px; }
.indic-troca-nota { font-size: 11px; color: var(--texto-suave); line-height: 1.4; margin-top: 8px; }
.indic-btn-fechar { width: 100%; }

/* ===== Meu CPP (v6.23) — visão unificada ===== */
.modal-meucpp { text-align: left; }
.modal-meucpp .indic-topo { align-items: center; }
.meucpp-secao { margin-bottom: 18px; }
.meucpp-secao-tit {
  font-size: 13px; font-weight: 700; color: var(--texto);
  margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--borda-2);
}
.meucpp-ficha {
  background: var(--superficie-2); border: 1px solid var(--borda-2);
  border-radius: 10px; padding: 4px 12px;
}
.meucpp-linha {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--borda-2);
}
.meucpp-linha:last-child { border-bottom: none; }
.meucpp-rot { font-size: 12px; color: var(--texto-suave); flex: 0 0 auto; }
.meucpp-val { font-size: 13px; color: var(--texto); font-weight: 600; text-align: right; word-break: break-word; }
.meucpp-aparelho {
  background: var(--superficie-2); border: 1px solid var(--borda-2);
  border-radius: 10px; padding: 11px; margin-bottom: 8px;
}
.meucpp-aparelho-atual { border-color: var(--azul, #168BFF); }
.meucpp-ap-topo { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.meucpp-ap-cod { font-size: 13px; font-weight: 700; color: var(--texto); }
.meucpp-ap-cod small { font-weight: 500; color: var(--texto-suave); }
.meucpp-ap-badge {
  display: inline-block;
  font-size: 10px; font-weight: 700; color: #fff;
  background: var(--azul, #168BFF); padding: 2px 10px; border-radius: 999px;
  margin-bottom: 6px;
}
.meucpp-ap-linhas { display: flex; flex-direction: column; gap: 5px; }
.meucpp-ap-linha { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.meucpp-ap-linha span { font-size: 11px; color: var(--texto-suave); }
.meucpp-ap-linha strong { font-size: 12px; color: var(--texto); font-weight: 600; text-align: right; }
.meucpp-ap-ok strong { color: var(--verde, #00E889); }
.meucpp-ap-vencido strong { color: var(--vermelho, #FF3B3B); }
.meucpp-ap-fraca strong { color: var(--texto-suave); font-weight: 500; }
.meucpp-tag-exp { color: var(--vermelho, #FF3B3B) !important; background: rgba(255,59,59,.12) !important; }

/* ===========================================================================
   BANNER DE RENOVAÇÃO (v6.40) — acende quando a chave vence em ≤2 dias
   =========================================================================== */
.banner-renovar {
  margin: clamp(12px,3.5vw,16px) clamp(13px,4vw,18px) 0;
  padding: 11px 14px;
  border-radius: var(--raio);
  background: var(--ambar-fundo);
  border: 1px solid var(--ambar);
  display: flex;
  align-items: center;
  gap: 10px;
}
.banner-renovar[hidden] { display: none; }
.banner-renovar-ico { font-size: 18px; flex-shrink: 0; }
.banner-renovar-txt {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--ambar);
  line-height: 1.25;
}
.banner-renovar-btn {
  flex-shrink: 0;
  background: linear-gradient(140deg, #FFB020, #FF8C00);
  color: #1a1205;
  border: none;
  border-radius: 999px;
  padding: 8px 18px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}
.banner-renovar-btn:active { transform: scale(.97); }

/* v6.51 — variante VERMELHA (chave já venceu, modo somente-leitura).
   Usa cores fortes (paleta do Abastecer/Vencidas). O banner âmbar clássico
   (≤2 dias) fica; esse assume quando dias<0. Sem animação chamativa: o
   próprio vermelho + fixação no topo já dão urgência suficiente. */
.banner-renovar.banner-renovar-vencida {
  background: linear-gradient(140deg, rgba(255,59,59,.16), rgba(216,38,38,.10));
  border: 1px solid #FF3B3B;
}
.banner-renovar.banner-renovar-vencida .banner-renovar-txt {
  color: #FF5A5A;
}
.banner-renovar.banner-renovar-vencida .banner-renovar-btn {
  background: linear-gradient(140deg, #FF3B3B, #D82626);
  color: #fff;
}

/* v6.51 — MODO SOMENTE-LEITURA (cliente existente com chave vencida).
   O app aparece normalmente (home + menu + Meu CPP), mas as ações
   operacionais ficam desativadas visualmente. Os cliques nos botões
   operacionais ainda chegam nos handlers, que caem no checarRecursoOuAvisar
   e mostram o modal "Chave venceu → Renovar" (via podeUsar=false).
   Botões do menu, "Meu CPP", trocar chave e o banner de renovação NÃO são
   afetados — o motorista precisa poder ver a situação e renovar. */
body.cpp-somente-leitura .painel-op-botoes .btn-op {
  opacity: .5;
  filter: grayscale(.3);
}
body.cpp-somente-leitura #btnReabrirDia,
body.cpp-somente-leitura .btn-primario:not(.banner-renovar-btn):not(.meucpp-trocar-chave):not(#modalPlanoRenovar) {
  opacity: .5;
}
/* botão do banner de renovação sempre visível e destacado — é a saída */
body.cpp-somente-leitura .banner-renovar { opacity: 1 !important; filter: none !important; }
body.cpp-somente-leitura .banner-renovar-btn { opacity: 1 !important; }

/* Meu CPP — seção Acesso (v6.44) */
.meucpp-trocar-chave { width: 100%; }
.meucpp-acesso-nota { margin-top: 6px; font-size: 12px; color: var(--texto-suave); }

/* =========================================================================
   MEU HISTÓRICO (v6.99) — linha do tempo das ações do motorista.
   Cores por tipo via borda-esquerda; usa variáveis de tema (2 temas ok).
   ========================================================================= */
.hist-nota {
  font-size: 12px;
  color: var(--texto-suave);
  margin: 4px 2px 14px;
  line-height: 1.4;
}

/* barra de filtros */
.hist-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.hist-filtro-btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--borda-2);
  background: var(--superficie);
  color: var(--texto-fraco);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}
.hist-filtro-btn:hover { background: var(--superficie-2); }
.hist-filtro-btn.ativo {
  background: var(--acento);
  border-color: var(--acento);
  color: #fff;
}

/* cabeçalho do dia */
.hist-dia-cab {
  font-size: 13px;
  font-weight: 800;
  color: var(--texto);
  margin: 18px 2px 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--borda);
  letter-spacing: .3px;
}
.hist-dia-cab:first-of-type { margin-top: 4px; }

.hist-grupo {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* item de ação */
.hist-item {
  background: var(--bg-2);
  border-radius: 10px;
  border: 1px solid var(--borda);
  border-left: 4px solid var(--borda-forte);
  padding: 12px 14px;
}
.hist-item-topo {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.hist-item-ico { font-size: 15px; }
.hist-item-hora {
  font-size: 12px;
  color: var(--texto-suave);
  font-variant-numeric: tabular-nums;
}
.hist-item-tag {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--texto-suave);
  background: var(--superficie-2);
  padding: 2px 8px;
  border-radius: 4px;
}
.hist-item-titulo {
  font-size: 14px;
  font-weight: 600;
  color: var(--texto);
  line-height: 1.35;
}
.hist-item-corpo {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.hist-info {
  font-size: 12px;
  color: var(--texto-fraco);
}

/* linha "de X → para Y" */
.hist-mudanca {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12px;
  background: var(--superficie);
  border-radius: 6px;
  padding: 5px 9px;
}
.hist-mud-rot {
  font-weight: 700;
  color: var(--texto-suave);
  min-width: 76px;
}
.hist-mud-de {
  color: var(--vermelho);
  text-decoration: line-through;
  opacity: .85;
}
.hist-mud-seta { color: var(--acento); font-weight: 700; }
.hist-mud-para { color: var(--verde); font-weight: 700; }

/* cores por tipo (borda esquerda) */
.hist-item.hist-compromisso { border-left-color: var(--vermelho); }
.hist-item.hist-receita     { border-left-color: var(--verde); }
.hist-item.hist-turno       { border-left-color: var(--ambar); }
.hist-item.hist-dia         { border-left-color: var(--verde); }
.hist-item.hist-abast       { border-left-color: #9d84b7; }
.hist-item.hist-patrimonio  { border-left-color: var(--acento); }
.hist-item.hist-config      { border-left-color: var(--texto-suave); }

/* Bandeirinha de mudança de meta no histórico (v7.06) */
.hist-meta-flag {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 8px;
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 700;
  border: 1px solid transparent;
}
.hist-meta-flag-ico { font-size: 11px; }
.hist-meta-flag-seta { opacity: .7; font-weight: 400; margin: 0 2px; }
.hist-meta-caiu {
  background: rgba(52,211,153,.13);
  border-color: rgba(52,211,153,.35);
  color: var(--verde);
}
.hist-meta-subiu {
  background: rgba(245,158,11,.13);
  border-color: rgba(245,158,11,.38);
  color: var(--ambar);
}

/* ═══════════════════════════════════════════════════════
   RESUMO DE FECHAMENTO — overlay GPS (v7.19)
   ═══════════════════════════════════════════════════════ */
.rfm-overlay { position:fixed; inset:0; background:rgba(5,10,18,.93); display:flex; align-items:flex-start; justify-content:center; z-index:9000; padding:12px; overflow-y:auto; }
.rfm-overlay[hidden] { display:none; }
.rfm-card { background:#07111D; border:1px solid #1B3045; border-radius:16px; width:100%; max-width:390px; overflow:hidden; margin:auto; }

.rfm-header { display:flex; justify-content:space-between; align-items:center; padding:13px 16px 9px; }
.rfm-titulo { font-size:11px; font-weight:700; color:#9CA8B8; text-transform:uppercase; letter-spacing:.1em; }
.rfm-data   { font-size:11px; color:#9CA8B8; }

.rfm-gps { background:#03080f; }
.rfm-gps svg { display:block; width:100%; height:auto; }
#rfmRotaProg { transition:stroke-dashoffset .55s ease; }

.rfm-labels { display:grid; grid-template-columns:1fr 1fr 1fr; padding:8px 14px 6px; background:rgba(4,12,22,.7); }
.rfm-lbl   { display:flex; flex-direction:column; gap:2px; }
.rfm-lbl-c { align-items:center; text-align:center; }
.rfm-lbl-r { align-items:flex-end; text-align:right; }
.rfm-lbl-key { font-size:9px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.rfm-az { color:#168BFF; } .rfm-br { color:#fff; } .rfm-vd { color:#00C774; }
.rfm-lbl-sub  { font-size:9px; color:#9CA8B8; margin:1px 0; }
.rfm-lbl-val  { font-size:12px; font-weight:700; }
.rfm-dk  { font-family:'Gabarito','Trebuchet MS',sans-serif; font-size:15px; font-weight:800; color:#168BFF; }
.rfm-undef { font-size:11px; font-style:italic; color:#9CA8B8; font-weight:400; }

.rfm-stats  { display:grid; grid-template-columns:1fr 1fr 1fr; padding:8px 14px 10px; border-bottom:1px solid #1B3045; }
.rfm-stat   { display:flex; flex-direction:column; gap:3px; }
.rfm-stat-c { align-items:center; text-align:center; }
.rfm-stat-r { align-items:flex-end; text-align:right; }
.rfm-stat-key { font-size:9px; color:#9CA8B8; text-transform:uppercase; letter-spacing:.07em; font-weight:700; }
.rfm-stat-val { font-size:13px; font-weight:700; }

.rfm-rota     { padding:10px 14px 4px; }
.rfm-rota-tit { font-size:10px; font-weight:700; color:#9CA8B8; text-transform:uppercase; letter-spacing:.08em; padding-bottom:7px; border-bottom:1px solid #1B3045; }
.rfm-rota-item { display:flex; justify-content:space-between; align-items:center; padding:6px 0; border-bottom:1px solid rgba(27,48,69,.4); }
.rfm-rota-item:last-child { border-bottom:none; }
.rfm-rota-nome { font-size:13px; color:#9CA8B8; }
.rfm-rota-val  { font-size:13px; font-weight:600; }
.rfm-rota-vazio { font-size:12px; color:#9CA8B8; font-style:italic; text-align:center; padding:9px 0; }
.rfm-rota-item.rfm-rota-nid .rfm-rota-nome { color:#FFB020; font-weight:600; }
.rfm-rota-item.rfm-rota-nid .rfm-rota-val  { color:#FFB020; }

.rfm-alerta-wrap { padding:6px 14px 10px; }
.rfm-alerta      { border-radius:10px; padding:10px 13px; display:flex; align-items:flex-start; gap:9px; }
.rfm-alerta.nao  { background:rgba(255,59,59,.12); border:1px solid rgba(255,59,59,.28); }
.rfm-alerta.ok   { background:rgba(0,232,137,.09); border:1px solid rgba(0,232,137,.22); }
.rfm-alerta-icon   { font-size:16px; line-height:1.4; flex-shrink:0; }
.rfm-alerta-status { font-size:13px; font-weight:700; margin-bottom:4px; }
.rfm-alerta.nao .rfm-alerta-status { color:#FF3B3B; }
.rfm-alerta.ok  .rfm-alerta-status { color:#00E889; }
.rfm-alerta-linha { font-size:12px; color:#fff; margin-bottom:2px; }
.rfm-alerta-nova  { font-size:12px; color:#fff; }
.rfm-porem        { margin:6px 0 5px; border-top:1px solid rgba(255,255,255,.12); padding-top:6px; }
.rfm-porem-row    { display:flex; justify-content:space-between; align-items:baseline; font-size:11.5px; line-height:1.65; }
.rfm-porem-row span:first-child { color:#9CA8B8; }
.rfm-porem-row span:last-child  { color:#fff; font-weight:600; }
.rfm-porem-row.porem-liq { border-top:1px solid rgba(255,255,255,.08); margin-top:3px; padding-top:4px; }
.rfm-porem-row.porem-liq span:first-child { color:#fff; font-weight:600; }
.rfm-porem-row.porem-liq span:last-child  { color:#FFB020; font-weight:700; }
.rfm-porem-row.porem-liq.positivo span:last-child { color:#00E889; }
.rfm-porem-row.porem-sumiu span:first-child { color:#FFB020; font-weight:700; }
.rfm-porem-row.porem-sumiu span:last-child  { color:#FFB020; font-weight:700; }
.rfm-porem-nota { font-size:10.5px; line-height:1.5; color:#FFC928; background:rgba(255,176,32,.10);
                  border-left:2px solid #FFB020; border-radius:0 5px 5px 0;
                  padding:5px 7px; margin-top:5px; }

.rfm-btn-wrap { padding:2px 14px 14px; }
.rfm-btn { background:#168BFF; border:none; border-radius:10px; color:#fff; font-size:15px; font-weight:700; padding:13px; width:100%; cursor:pointer; font-family:inherit; }
.rfm-btn:active { opacity:.85; }

/* rfm stats com ícone */
.rfm-stat-ico { display:flex; align-items:center; gap:4px; }

/* badge "Ver último resumo" abaixo dos anéis */
.heroi-badge-resumo {
  display: block;
  margin: 0 0 6px 0;
  background: transparent;
  border: 1px solid rgba(22, 139, 255, 0.4);
  color: #168BFF;
  font-size: 11px;
  padding: 3px 10px;
  border-radius: 20px;
  cursor: pointer;
  letter-spacing: 0.02em;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s;
  text-shadow: none;
  width: max-content;
}
.heroi-badge-resumo:hover,
.heroi-badge-resumo:active { background: rgba(22,139,255,0.12); border-color: #168BFF; }

/* ===== WIZARD NOVO (onboarding conversacional) — v7.61 ===== */
.wiz-conta-row { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.wiz-conta-campos { display: flex; align-items: center; gap: 8px; }
.wiz-conta-nome { flex: 1 1 auto; min-width: 0; }
.wiz-conta-saldo { flex: 0 0 40%; max-width: 150px; text-align: right; }
.wiz-conta-remover {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: var(--raio-sm);
  border: 1px solid var(--borda-2); background: var(--superficie);
  color: var(--texto-suave); font-size: 15px; line-height: 1; cursor: pointer;
}
.wiz-conta-remover:hover { color: var(--vermelho); border-color: var(--vermelho); }
.wiz-conta-hint { margin: 2px 0 0; }
.wiz-add-conta { align-self: flex-start; margin: 2px 0 6px; }
.wiz-soma-box {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 14px; margin-top: 6px;
  background: var(--superficie); border: 1px solid var(--borda-2);
  border-radius: var(--raio-sm);
}
.wiz-soma-rotulo { font-size: 13px; color: var(--texto-suave); font-weight: 600; }
.wiz-soma-valor { font-size: 18px; font-weight: 800; color: var(--acento-2); letter-spacing: -.02em; }
.wiz-dias-grid, .wiz-semanas-modo, .wiz-semanas-grid {
  display: flex; flex-wrap: wrap; gap: 8px;
}
.wiz-semanas-grid { margin-top: 8px; }
.wiz-dia-chk {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--borda-2); background: var(--superficie);
  font-size: 13.5px; color: var(--texto-suave); cursor: pointer;
  user-select: none;
}
.wiz-dia-chk input { accent-color: var(--acento); width: 16px; height: 16px; cursor: pointer; }
.wiz-dia-chk:has(input:checked) {
  border-color: var(--acento); color: var(--texto);
  background: var(--acento-fundo, rgba(22,139,255,0.14));
}
.wiz-semanas-modo { margin-top: 4px; }
.wiz-semanas-grid .assist-nota { flex: 1 1 100%; margin-bottom: 2px; }

/* Bloco 7 — lista de despesas do wizard (v7.62) */
.wiz-despesa-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 11px 13px; margin-bottom: 7px; text-align: left;
  background: var(--superficie); border: 1px solid var(--borda-2);
  border-radius: var(--raio-sm); cursor: pointer; color: var(--texto);
}
.wiz-despesa-row:hover { border-color: var(--acento); }
.wiz-despesa-nome { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wiz-despesa-meta { flex: 0 0 auto; font-size: 11.5px; color: var(--texto-suave); }
.wiz-despesa-valor { flex: 0 0 auto; font-weight: 800; font-size: 14px; color: var(--acento-2); }
.wiz-soma-box-col { flex-direction: column; align-items: flex-start; gap: 4px; }
.wiz-soma-box-col .wiz-soma-valor { font-size: 20px; }

/* Blocos 8–10 do wizard (v7.64) */
.wiz-b8-botoes { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
.wiz-b8-aumentar-box { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--borda-2);
  display: flex; flex-direction: column; gap: 8px; }
.wiz-meta-hero {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 18px 14px; margin: 4px 0 10px;
  background: linear-gradient(150deg, #0a1422, #0e1c30, #16335a);
  border: 1px solid var(--borda-2); border-radius: var(--raio);
}
[data-tema="claro"] .wiz-meta-hero { background: linear-gradient(150deg,#e8f0f9,#d8e4f0,#c2d8f0); }
.wiz-meta-hero-rot { font-size: 13px; color: var(--texto-suave); }
.wiz-meta-hero-val { font-size: 30px; font-weight: 800; letter-spacing: -.03em; color: var(--texto); }
.wiz-resumo-bloco {
  padding: 10px 13px; margin-bottom: 8px;
  background: var(--superficie); border: 1px solid var(--borda-2); border-radius: var(--raio-sm);
}
.wiz-resumo-linha { display: flex; justify-content: space-between; align-items: baseline;
  gap: 12px; padding: 5px 0; font-size: 13.5px; color: var(--texto-suave); }
.wiz-resumo-linha strong { color: var(--texto); font-weight: 700; }
.wiz-resumo-total { border-top: 1px solid var(--borda-2); margin-top: 3px; padding-top: 8px; }
.wiz-resumo-total span, .wiz-resumo-total strong { color: var(--acento-2); font-weight: 800; }

/* Bloco 7 — lista de despesas com altura máxima + scroll interno (v7.65) */
[data-wiz-despesas] {
  max-height: 42vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: 2px 0 4px;
  padding-right: 2px;
}
/* Bloco 9 — cabeçalho de seção + sub do hero (v7.65) */
.wiz-resumo-cab {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .06em; color: var(--texto-suave);
  margin-bottom: 4px; opacity: .85;
}
.wiz-meta-hero-sub { font-size: 11.5px; color: var(--texto-suave); opacity: .9; }