/* Central de Vendas — Plataforma Acquateria
   Layout: faixa de marca no topo, abas (Mês Atual / Histórico 2026), filtros, cards em grade sobre cinza grafite. */

@font-face { font-family: 'CarlitoCV'; src: url('../assets/fonts/carlito-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'CarlitoCV'; src: url('../assets/fonts/carlito-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --bg: #1d2025;
  --panel: #262a30;
  --panel-2: #2d3239;
  --line: #3a4048;
  --grid: #353a42;
  --fg: #f4f6f8;
  --muted: #a4adb9;
  --blue: #1e90ff;
  --blue-l: #38c8ff;
  --blue-t: rgba(30, 144, 255, .16);
  --amber: #ffb300;
  --amber-t: rgba(255, 179, 0, .15);
  --slate: #8d98a7;
  --ok: #00e396;
  --bad: #ff4560;
  --font: Calibri, 'CarlitoCV', Carlito, 'Segoe UI', Arial, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body {
  font-family: var(--font); color: var(--fg); font-size: 16px; line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.cv {
  max-width: 1480px; margin-inline: auto; display: flex; flex-direction: column; gap: 18px;
  padding-block: 24px 40px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 900px) { .cv { padding-left: 32px; padding-right: 32px; } }

/* Cabeçalho */
.cv-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.cv-brand { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; min-width: 0; }
.cv-brand img { height: 52px; width: auto; display: block; }
.cv-brand .sep { width: 1px; align-self: stretch; background: var(--line); }
.cv-brand h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 700; letter-spacing: -.01em; line-height: 1.05; text-wrap: balance; }
.cv-brand h1 .acc { color: var(--amber); }
.cv-brand p { margin: 4px 0 0; color: var(--muted); font-size: 1.05rem; }

/* Abas (links entre as telas) */
.cv-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; min-width: min(100%, 25rem); }
.cv-tab { display: flex; align-items: center; gap: 12px; padding: 12px 18px; color: var(--fg); text-decoration: none; border: 1.5px solid var(--line); border-radius: 10px; transition: border-color .15s, background .15s; }
.cv-tab svg { width: 26px; height: 26px; flex: none; color: var(--muted); }
.cv-tab b { display: block; font-size: 1.2rem; font-weight: 700; }
.cv-tab small { display: block; font-size: .85rem; color: var(--muted); }
.cv-tab:hover { border-color: var(--slate); }
.cv-tab[aria-current="page"] { border-color: var(--blue); background: var(--blue-t); }
.cv-tab[aria-current="page"] svg { color: var(--amber); }

/* Filtros */
.cv-filters { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: flex-end; }
.cv-ctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cv-ctl > span { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.cv-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.cv-chip { font: inherit; font-size: 1rem; font-weight: 700; color: var(--muted); background: transparent; border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 16px; cursor: pointer; white-space: nowrap; }
.cv-chip:hover { color: var(--fg); border-color: var(--slate); }
.cv-chip[aria-pressed="true"] { color: var(--fg); border-color: var(--amber); background: var(--amber-t); }
.cv-chip.blue[aria-pressed="true"] { border-color: var(--blue); background: var(--blue-t); }
.cv-chip-sel { appearance: none; -webkit-appearance: none; padding-right: 34px; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 16px center, right 11px center; background-size: 5px 5px; background-repeat: no-repeat; }
.cv-chip-sel[aria-pressed="true"] { color: var(--fg); border-color: var(--amber); background-color: var(--amber-t); }
.cv-chip-sel option { color: var(--fg); background: var(--panel); }
.cv-fr { flex: 1 1 24rem; }
.cv-fr .row { display: flex; gap: 8px; flex-wrap: wrap; }
.cv-fr input, .cv-fr select { font: inherit; font-size: 1rem; color: var(--fg); background: var(--panel); border: 1.5px solid var(--line); border-radius: 8px; padding: 7px 12px; min-width: 0; }
.cv-fr input { flex: 1 1 11rem; }
.cv-fr select { flex: 2 1 16rem; }
.cv-ghost { font: inherit; font-size: .95rem; font-weight: 700; background: transparent; border: 1.5px solid var(--line); border-radius: 8px; color: var(--fg); padding: 7px 14px; cursor: pointer; }
.cv-ghost:hover { border-color: var(--amber); }
.cv-tab:focus-visible, .cv-chip:focus-visible, .cv-fr input:focus-visible, .cv-fr select:focus-visible, .cv-ghost:focus-visible, .cv-bar.click:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* Faixa da franquia selecionada */
.cv-banner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 14px 20px; border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: 10px; background: var(--panel); }
.cv-banner .k { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--amber); font-weight: 700; }
.cv-banner h2 { margin: 2px 0 0; font-size: 1.45rem; font-weight: 700; }
.cv-banner p { margin: 2px 0 0; color: var(--muted); font-size: .95rem; }

.cv-lead { margin: 0; font-size: 1.15rem; color: var(--muted); max-width: 80ch; }
.cv-lead b { color: var(--fg); font-weight: 700; }

/* Indicadores */
.cv-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14.5rem), 1fr)); gap: 14px; }
.cv-kpi { position: relative; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cv-kpi::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--c, var(--blue)); }
.cv-kpi .lbl { display: flex; align-items: center; gap: 10px; font-size: .85rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cv-ico { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; flex: none; background: var(--ct, var(--blue-t)); color: var(--c, var(--blue)); }
.cv-ico svg { width: 18px; height: 18px; }
.cv-kpi .val { font-size: clamp(1.75rem, 2.6vw, 2.35rem); font-weight: 700; line-height: 1.1; letter-spacing: -.01em; overflow-wrap: anywhere; }
.cv-kpi .note { font-size: .92rem; color: var(--muted); display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.cv-badge { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; font-size: .85rem; padding: 2px 8px; border-radius: 6px; background: var(--blue-t); color: var(--blue-l); }
.cv-badge.up { background: rgba(0, 227, 150, .15); color: var(--ok); }
.cv-badge.down { background: rgba(255, 69, 96, .15); color: var(--bad); }

/* Grades e cards */
.cv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 28rem), 1fr)); gap: 14px; }
.cv-grid.wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 980px) { .cv-grid.wide { grid-template-columns: minmax(0, 1fr); } }
.cv-card { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 20px 22px; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.cv-card > header { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.cv-card h3 { margin: 0; font-size: 1.3rem; font-weight: 700; }
.cv-card .hint { margin: 2px 0 0; font-size: .95rem; color: var(--muted); }
.cv-legend { display: flex; gap: 14px; font-size: .92rem; color: var(--muted); flex-wrap: wrap; }
.cv-legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.cv-legend i.dash { height: 0; border-top: 2px dashed var(--amber); border-radius: 0; width: 16px; vertical-align: 3px; }

/* Gráficos */
.cv-chart { position: relative; min-height: 290px; }
.cv-chart svg { display: block; }
.cv-chart svg text, .cv-termo svg text, .cv-gauge svg text, .cv-donut svg text { font-family: var(--font); }
.cv-tip { position: absolute; pointer-events: none; background: #14171b; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, .35); padding: 8px 12px; font-size: .95rem; white-space: nowrap; z-index: 2; color: var(--fg); }
.cv-tip .t { color: var(--muted); margin-bottom: 3px; font-weight: 700; }
.cv-tip i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 6px; }

/* Termômetro */
.cv-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 1rem; padding: 4px 12px; border-radius: 999px; border: 1.5px solid currentColor; }
.cv-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: currentColor; }
.cv-status:empty { display: none; }
.cv-status.bom { color: var(--ok); }
.cv-status.atencao { color: var(--amber); }
.cv-status.critico { color: var(--bad); }
.cv-termo { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; align-items: stretch; min-height: 290px; }
.cv-termo svg { width: 104px; height: 100%; min-height: 280px; }
.cv-tlist { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cv-tlist > div { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 7px; border-bottom: 1px solid var(--grid); }
.cv-tlist span { color: var(--muted); font-size: .95rem; }
.cv-tlist b { font-weight: 700; font-size: 1.1rem; white-space: nowrap; }
.cv-tlist .big { flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px; border: 1.5px solid currentColor; border-radius: 10px; }
.cv-tlist .big b { font-size: 1.7rem; }
.cv-tlist .big span { color: inherit; opacity: .85; }
.cv-tlist .nt { font-size: .85rem; color: var(--muted); border: 0; padding: 0; display: block; }

/* Média 3 meses por categoria */
.cv-m3 { display: flex; flex-direction: column; gap: 10px; min-height: 280px; }
.cv-m3 > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.cv-m3 i { width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.cv-m3 .nm { font-weight: 700; }
.cv-m3 .v { font-weight: 700; font-size: 1.3rem; white-space: nowrap; }
.cv-m3 .sub { grid-column: 2 / 4; font-size: .88rem; color: var(--muted); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* Mês a mês */
.cv-mm { display: flex; flex-direction: column; gap: 8px; min-height: 280px; }
.cv-mm > div { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto 4.8rem; gap: 10px; align-items: center; }
.cv-mm .m { font-weight: 700; color: var(--muted); }
.cv-mm .track { height: 10px; border-radius: 5px; background: var(--grid); overflow: hidden; }
.cv-mm .fill { height: 100%; border-radius: 5px; }
.cv-mm .v { font-weight: 700; white-space: nowrap; text-align: right; }
.cv-mm .cv-badge { justify-content: center; }
.cv-mm .nt { display: block; font-size: .85rem; color: var(--muted); }

/* Categoria (rosca) */
.cv-donut { display: grid; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); gap: 18px; align-items: center; min-height: 13rem; }
@media (max-width: 560px) { .cv-donut { grid-template-columns: minmax(0, 1fr); justify-items: center; } }
.cv-donut svg { width: 100%; max-width: 210px; }
.cv-dleg { display: flex; flex-direction: column; gap: 10px; width: 100%; min-width: 0; }
.cv-dleg > div { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 2px 10px; align-items: baseline; }
.cv-dleg i { width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.cv-dleg .nm { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-dleg .pc { font-weight: 700; }
.cv-dleg .sub { grid-column: 2 / 4; font-size: .88rem; color: var(--muted); }

/* Top compradores */
.cv-bars { display: flex; flex-direction: column; gap: 9px; min-height: 9rem; }
.cv-bar { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr) auto; gap: 3px 10px; align-items: center; padding: 4px 6px; border-radius: 6px; }
.cv-bar .rk { color: var(--muted); font-weight: 700; }
.cv-bar .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.cv-bar .v { font-weight: 700; white-space: nowrap; text-align: right; }
.cv-bar .track { grid-column: 2 / 4; height: 6px; border-radius: 3px; background: var(--grid); overflow: hidden; }
.cv-bar .fill { height: 100%; border-radius: 3px; }
.cv-bar .sub { grid-column: 2 / 4; font-size: .85rem; color: var(--muted); }
.cv-bar.click { cursor: pointer; }
.cv-bar.click:hover { background: var(--panel-2); }

/* Tabelas */
.cv-tablebox { max-height: 28rem; overflow: auto; }
.cv-tablebox.free { max-height: none; }
.cv-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.cv-table th { position: sticky; top: 0; background: var(--panel); text-align: left; font-weight: 700; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.cv-table td { padding: 10px; border-bottom: 1px solid var(--grid); vertical-align: top; }
.cv-table tr:hover td { background: var(--panel-2); }
.cv-table .n { text-align: right; white-space: nowrap; }
.cv-table td.rk { color: var(--amber); font-weight: 700; width: 2.2rem; }
.cv-table td.pr { font-weight: 700; }
.cv-table td.freq b { color: var(--amber); }
.cv-pill { display: inline-block; padding: 1px 10px; border-radius: 999px; font-size: .85rem; font-weight: 700; border: 1px solid currentColor; white-space: nowrap; }
.cv-pill.ok { color: var(--ok); }
.cv-pill.warn { color: var(--amber); }
.cv-pill.bad { color: var(--bad); }

/* Metas */
.cv-gauges { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 14px; }
.cv-gauge { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 13rem; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--panel-2); }
.cv-gauge h4 { margin: 0 0 4px; font-size: 1.1rem; font-weight: 700; }
.cv-gauge svg { width: 100%; max-width: 16rem; }
.cv-gauge .gv { font-size: 1.45rem; font-weight: 700; }
.cv-gauge .gm { font-size: .95rem; color: var(--muted); }

.cv-empty { color: var(--muted); font-size: 1rem; padding: 14px 0; }
.cv-foot { color: var(--muted); font-size: .85rem; border-top: 1px solid var(--line); padding-top: 14px; }

@media (max-width: 640px) {
  .cv-hide-n { display: none; }
  .cv-tabs { grid-template-columns: 1fr; }
  .cv-brand img { height: 40px; }
  .cv-brand .sep { display: none; }
}


/* ---------- Usuário, botões, campos e diálogo (comuns a todas as telas) ---------- */
.cv-user { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.cv-user-quem { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }
.cv-user-nome { font-weight: 700; }
.cv-user-perfil { font-size: .8rem; color: var(--amber); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.cv-user-acoes { display: flex; gap: 8px; flex-wrap: wrap; }
a.cv-ghost { text-decoration: none; display: inline-flex; align-items: center; }
.cv-btn { font: inherit; font-size: 1rem; font-weight: 700; color: #14171b; background: var(--amber); border: 1.5px solid var(--amber); border-radius: 8px; padding: 9px 18px; cursor: pointer; }
.cv-btn:hover { filter: brightness(1.06); }
.cv-btn:disabled { opacity: .5; cursor: default; }
.cv-btn.blue { background: var(--blue); border-color: var(--blue); color: #fff; }
.cv-btn:focus-visible, .cv-field input:focus-visible, .cv-field select:focus-visible, .cv-field textarea:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.cv-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cv-field > span { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.cv-field input, .cv-field select, .cv-field textarea { font: inherit; font-size: 1rem; color: var(--fg); background: var(--bg); border: 1.5px solid var(--line); border-radius: 8px; padding: 9px 12px; min-width: 0; width: 100%; }
.cv-field textarea { min-height: 12rem; resize: vertical; font-variant-numeric: tabular-nums; }
.cv-field small { color: var(--muted); font-size: .85rem; }
.cv-msg { margin: 0; min-height: 1.4em; font-size: .95rem; }
.cv-msg.erro { color: var(--bad); }
.cv-msg.ok { color: var(--ok); }
.cv-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.cv-dialog { background: var(--panel); color: var(--fg); border: 1px solid var(--line); border-radius: 12px; padding: 22px; width: min(92vw, 26rem); box-shadow: 0 20px 60px rgba(0, 0, 0, .5); }
.cv-dialog::backdrop { background: rgba(10, 12, 15, .7); }
.cv-dialog h3 { margin: 0 0 14px; font-size: 1.3rem; }
.cv-dialog .cv-field { margin-bottom: 12px; }

/* ---------- Tela inicial: escolha do painel ---------- */
.cv-modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); gap: 16px; }
.cv-modulo { position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 22px; min-height: 17rem; color: var(--fg); text-decoration: none; background: var(--panel); border: 1.5px solid var(--line); border-radius: 14px; transition: border-color .15s, transform .15s, background .15s; }
.cv-modulo::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--blue)); }
.cv-modulo .cv-ico { width: 46px; height: 46px; border-radius: 12px; }
.cv-modulo .cv-ico svg { width: 26px; height: 26px; }
.cv-modulo .k { font-size: .8rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; margin-top: 6px; }
.cv-modulo b { font-size: 1.85rem; line-height: 1.1; }
.cv-modulo .d { color: var(--muted); font-size: 1rem; max-width: 34ch; }
.cv-mod-telas { display: flex; gap: 8px; flex-wrap: wrap; margin-top: auto; padding-top: 8px; }
.cv-mod-telas span { font-size: .85rem; font-weight: 700; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.cv-mod-telas .cv-tag-breve { border-color: var(--slate); color: var(--fg); }
.cv-mod-sem { display: none; font-size: .9rem; color: var(--bad); font-weight: 700; }
a.cv-modulo[href]:hover { border-color: var(--c); background: var(--panel-2); transform: translateY(-2px); }
a.cv-modulo[href]:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.cv-modulo.breve, .cv-modulo.bloqueado { cursor: default; opacity: .62; }
.cv-modulo.bloqueado .cv-mod-sem { display: block; }
.cv-modulo.bloqueado .cv-mod-telas { display: none; }

/* ---------- Fidelidade ---------- */
.fid-lead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.fid-comp, .fid-cart { display: flex; flex-direction: column; gap: 10px; }
.fid-stack { display: flex; height: 14px; border-radius: 7px; overflow: hidden; background: var(--grid); gap: 2px; margin-bottom: 6px; }
.fid-stack span { display: block; height: 100%; min-width: 2px; }
.fid-comp-l { display: grid; grid-template-columns: 12px minmax(0, 1fr) auto 4.2rem; gap: 2px 10px; align-items: baseline; padding-bottom: 9px; border-bottom: 1px solid var(--grid); }
.fid-comp-l i { width: 12px; height: 12px; border-radius: 3px; align-self: center; }
.fid-comp-l .nm { font-weight: 700; }
.fid-comp-l .v { font-weight: 700; font-size: 1.15rem; white-space: nowrap; text-align: right; }
.fid-comp-l .pc { color: var(--muted); font-weight: 700; text-align: right; }
.fid-comp-l .sub { grid-column: 2 / 5; font-size: .88rem; color: var(--muted); }
.fid-comp-l.total { border-bottom: 0; padding-top: 2px; }
.fid-comp-l.total .v { color: var(--amber); }
.fid-dias tr.futuro td { color: var(--muted); }
.fid-futuro { font-size: .85rem; color: var(--muted); }
@media (max-width: 640px) {
  .fid-comp-l { grid-template-columns: 12px minmax(0, 1fr) auto; }
  .fid-comp-l .pc { display: none; }
  .fid-comp-l .sub { grid-column: 2 / 4; }
}

/* Campo de senha com botão de mostrar/ocultar */
.cv-senha-campo { position: relative; display: block; min-width: 0; }
.cv-senha-campo input { width: 100%; padding-right: 46px; }
.cv-senha-campo input::-ms-reveal, .cv-senha-campo input::-ms-clear { display: none; }
.cv-olho { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 38px; height: 34px; display: grid; place-items: center; padding: 0; background: transparent; border: 0; border-radius: 6px; color: var(--muted); cursor: pointer; }
.cv-olho svg { width: 20px; height: 20px; }
.cv-olho:hover, .cv-olho[aria-pressed="true"] { color: var(--amber); }
.cv-olho:focus-visible { outline: 2px solid var(--amber); outline-offset: 0; }
.cv-home { display: block; line-height: 0; border-radius: 8px; }
.cv-home:focus-visible { outline: 2px solid var(--amber); outline-offset: 4px; }

/* Fidelidade · Histórico: títulos das seções */
.fid-bloco { display: flex; flex-direction: column; gap: 14px; }
.fid-secao { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding-top: 10px; border-top: 1px solid var(--line); }
.fid-secao h2 { margin: 0; font-size: 1.55rem; font-weight: 700; }
.fid-secao h2::before { content: ""; display: inline-block; width: 6px; height: 1.05em; margin-right: 10px; vertical-align: -2px; border-radius: 3px; background: var(--amber); }
.fid-secao p { margin: 0; color: var(--muted); font-size: .98rem; }
.fid-nota { font-size: 1rem; }
.fid-vazio { border-left: 4px solid var(--amber); }
.fid-vazio p { margin: 0; color: var(--muted); max-width: 80ch; }
.fid-vazio p b { color: var(--fg); }
.fid-vazio .cv-btn { align-self: flex-start; text-decoration: none; }
.fid-sel { display: flex; align-items: center; gap: 8px; font-size: .85rem; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.fid-sel select { font: inherit; font-size: 1rem; text-transform: none; letter-spacing: 0; font-weight: 700; color: var(--fg); background: var(--panel-2); border: 1.5px solid var(--line); border-radius: 8px; padding: 6px 10px; }
#tb-fat tfoot td { font-weight: 700; border-top: 2px solid var(--line); background: var(--panel-2); }
#tb-fat td.up { color: var(--ok); } #tb-fat td.down { color: var(--bad); }
#tb-fat tfoot tr.futuro td { color: var(--amber); font-weight: 700; }
.fid-kpis5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
.fid-kpis5 .cv-kpi .val { font-size: clamp(1.45rem, 1.9vw, 2rem); white-space: nowrap; }
#tb-fat th, #tb-fat td { padding: 9px 7px; font-size: .94rem; }
#tb-fat th { font-size: .74rem; letter-spacing: .05em; }

/* ---------- Operações Próprias ---------- */
.cv-chip.op::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; background: var(--cop); vertical-align: 0; }
.cv-chip.op[aria-pressed="true"] { border-color: var(--cop); background: color-mix(in srgb, var(--cop) 16%, transparent); color: var(--fg); }
.cv-bar.sel { background: var(--panel-2); outline: 1.5px solid var(--line); }
.cv-table tr.futuro td { color: var(--muted); }


/* =====================================================================
   Brilho (cores vivas) e animações sutis
   ===================================================================== */
@keyframes cv-pulsa  { 0% { transform: scale(1); opacity: .85; } 75% { transform: scale(2.8); opacity: 0; } 100% { transform: scale(2.8); opacity: 0; } }
@keyframes cv-pisca  { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes cv-sobe   { 0%, 100% { transform: translateY(1.5px); } 50% { transform: translateY(-2px); } }
@keyframes cv-desce  { 0%, 100% { transform: translateY(-1.5px); } 50% { transform: translateY(2px); } }
@keyframes cv-cresce { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes cv-estica { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cv-surge  { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes cv-brilho { 0%, 100% { filter: drop-shadow(0 0 2px currentColor); } 50% { filter: drop-shadow(0 0 9px currentColor); } }

/* setas ▲ ▼ que sobem e descem devagar */
.cv-seta { display: inline-block; will-change: transform; }
.cv-seta.up { animation: cv-sobe 1.8s ease-in-out infinite; }
.cv-seta.down { animation: cv-desce 1.8s ease-in-out infinite; }

/* ponto "ao vivo" no Mês Atual */
.cv-live { position: relative; display: inline-block; width: 9px; height: 9px; margin-right: 9px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 8px var(--ok), 0 0 2px var(--ok); vertical-align: 1px; animation: cv-pisca 1.8s ease-in-out infinite; }
.cv-live::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--ok); animation: cv-pulsa 1.8s ease-out infinite; }

/* fim das linhas dos gráficos e bulbo do termômetro */
.cv-halo { transform-box: fill-box; transform-origin: center; animation: cv-pulsa 2s ease-out infinite; }
.cv-ponto { filter: drop-shadow(0 0 5px currentColor); }
.cv-bulbo { animation: cv-brilho 2.6s ease-in-out infinite; }

/* barras crescem ao aparecer */
.cv-chart svg rect:not([fill="transparent"]):not([fill="none"]), .cv-termo svg rect {
  transform-box: fill-box; transform-origin: bottom; animation: cv-cresce .75s cubic-bezier(.2, .8, .2, 1) both; }
.cv-bar .fill, .cv-mm .fill, .fid-stack span { transform-origin: left; animation: cv-estica .8s cubic-bezier(.2, .8, .2, 1) both; }

/* cards entram com suavidade */
.cv-kpi, .cv-card, .cv-modulo { animation: cv-surge .5s ease-out both; }
.cv-kpis > :nth-child(2), .cv-modulos > :nth-child(2) { animation-delay: .06s; }
.cv-kpis > :nth-child(3), .cv-modulos > :nth-child(3) { animation-delay: .12s; }
.cv-kpis > :nth-child(4) { animation-delay: .18s; }
.cv-kpis > :nth-child(5) { animation-delay: .24s; }

/* brilho neon nos destaques */
.cv-kpi::after, .cv-modulo::after { box-shadow: 0 0 14px 1px var(--c, var(--blue)), 0 0 4px var(--c, var(--blue)); }
.cv-kpi .cv-ico, .cv-modulo .cv-ico { box-shadow: 0 0 14px -4px var(--c, var(--blue)); }
.cv-status { box-shadow: 0 0 14px -3px currentColor, inset 0 0 10px -6px currentColor; text-shadow: 0 0 8px currentColor; }
.cv-status::before { box-shadow: 0 0 8px currentColor; animation: cv-pisca 1.6s ease-in-out infinite; }
.cv-badge.up { box-shadow: 0 0 12px -4px var(--ok); text-shadow: 0 0 6px rgba(0, 227, 150, .55); }
.cv-badge.down { box-shadow: 0 0 12px -4px var(--bad); text-shadow: 0 0 6px rgba(255, 69, 96, .55); }
.cv-tab[aria-current="page"] { box-shadow: 0 0 22px -8px var(--blue), inset 0 0 18px -12px var(--blue); }
.cv-chip[aria-pressed="true"] { box-shadow: 0 0 16px -6px var(--amber); }
.cv-chip.blue[aria-pressed="true"] { box-shadow: 0 0 16px -6px var(--blue); }
.cv-chip.op[aria-pressed="true"] { box-shadow: 0 0 16px -6px var(--cop); }
.cv-pill.ok, .cv-pill.bad, .cv-pill.warn { box-shadow: 0 0 10px -4px currentColor; }
.cv-tlist .big { box-shadow: 0 0 22px -10px currentColor, inset 0 0 22px -16px currentColor; }
.cv-brand h1 .acc { text-shadow: 0 0 18px rgba(255, 179, 0, .35); }
.cv-btn { box-shadow: 0 0 18px -6px var(--amber); }
.fid-secao h2::before { box-shadow: 0 0 10px var(--amber); }
a.cv-modulo[href]:hover { box-shadow: 0 0 28px -10px var(--c); }

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

/* =====================================================================
   Gráficos vivos, desenho animado, texto digitado e transição de tela
   ===================================================================== */
@keyframes cv-aparece { from { opacity: 0; } to { opacity: 1; } }
@keyframes cv-fatia   { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } }
@keyframes cv-cursor  { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes cv-entra   { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.cv-fx-barra { filter: drop-shadow(0 0 5px color-mix(in srgb, currentColor 55%, transparent)); }
.cv-fx-linha { filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 1px currentColor); }
.cv-fx-tracejada { animation: cv-aparece .9s ease-out .5s both; }
.cv-fx-area { animation: cv-aparece 1.1s ease-out .35s both; }
.cv-fx-fatia { transform-box: fill-box; transform-origin: center; animation: cv-fatia .7s cubic-bezier(.2, .8, .2, 1) both;
  filter: drop-shadow(0 0 6px color-mix(in srgb, currentColor 60%, transparent)); }
.cv-chart svg text.cv-fx-texto { animation: cv-aparece .6s ease-out .45s both; }

/* texto sendo digitado: cursor piscando no fim */
.cv-digitando::after { content: "▍"; margin-left: 2px; color: var(--amber); font-weight: 400; animation: cv-cursor .6s steps(1) infinite; }

/* troca de tela: sai com fade e a nova entra subindo de leve */
main.cv { animation: cv-entra .38s ease-out both; }
body.cv-saindo main.cv { opacity: 0; transform: translateY(-4px); transition: opacity .17s ease-in, transform .17s ease-in; }

/* linhas das tabelas e barras horizontais reaparecem ao trocar filtro */
.cv-table tbody tr { animation: cv-aparece .35s ease-out both; }
.cv-table tbody tr:nth-child(n+2) { animation-delay: .02s; } .cv-table tbody tr:nth-child(n+4) { animation-delay: .05s; }
.cv-table tbody tr:nth-child(n+8) { animation-delay: .08s; } .cv-table tbody tr:nth-child(n+12) { animation-delay: .11s; }

@media (prefers-reduced-motion: reduce) {
  .cv-digitando::after { content: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.cv-fx-quieto, .cv-fx-quieto * { animation: none !important; }

/* nome clicável dentro de tabela (ex.: franquias sem compra no mês) */
.cv-link { background: none; border: 0; padding: 0; font: inherit; font-weight: 600; color: var(--fg); cursor: pointer; text-align: left; }
.cv-link:hover, .cv-link:focus-visible { color: var(--blue-l); text-decoration: underline; text-underline-offset: 3px; }
#tb-zeradas td:last-child { width: 1%; }
#tb-zeradas thead th { position: sticky; top: 0; background: var(--panel); z-index: 1; }