/* =============================================================================
   Talkline · Fidelizados CBCF — painel (vanilla, sem build)

   PLANO DE TOKENS (frontend-design + impeccable, registro "produto")
   - Cena: o planejamento confere de manha, no escritorio iluminado, com o CRM
     aberto ao lado; o gerente abre o mesmo painel no celular, no balcao da loja.
     -> tema CLARO, masthead petroleo (continuidade com os paineis Talkline).
   - Cor: Restrained. Neutros tingidos no teal da marca (hue ~212), teal #1B606E
     so para acao/selecao/foco. Os 4 vereditos sao a unica cor "de dado":
     confere #1f8a70 · fidelizado nao marcado #d9a21b · marcado sem fidelizacao
     #c9473f · nao localizado cinza neutro (validado no validate_palette.js da
     skill dataviz: CVD adjacente >= 13,6; ambar < 3:1 = sempre com icone+rotulo).
   - Tipo: UMA familia, Archivo variavel, usando o eixo de LARGURA como voz:
     expandida no masthead e nos numeros da matriz, normal no texto, semi-
     condensada nas tabelas (densidade). Tabular so em coluna.
   - Assinatura: a MATRIZ DE CONCILIACAO "Na venda x No CBCF" — a logica do
     problema desenhada; a diagonal (confere) fica quieta, as divergencias gritam.
   - Bans checados: sem faixa lateral colorida, sem eyebrow caixa-alta por secao,
     sem hero-metric, sem grade de cards iguais, sem gradiente em texto, sem glass.
   Comentarios em pt-BR sem acento (padrao do kit).
   ============================================================================= */

:root {
  /* marca / cromo */
  --petroleo: #0b2e34;
  --petroleo-2: #12424a;
  --petroleo-3: #1a525b;
  --menta: #98c2cc;
  --menta-clara: #b9d7de;
  --teal: #1b606e;
  --teal-forte: #154e5a;
  --teal-tint: #e7f1f3;

  /* superficies */
  --plano: #edf3f4;          /* fundo da pagina: off-white tingido no teal */
  --sup: #ffffff;
  --sup-2: #f6f9fa;
  --linha: #d9e4e7;          /* hairline */
  --linha-forte: #c3d3d8;
  --borda-campo: #7a9298;    /* 3,3:1 no branco (limite de componente) */

  /* tinta */
  --tinta: #102a30;          /* 15:1 */
  --tinta-2: #3e555b;        /* 7,9:1 */
  --tinta-3: #576c71;        /* 5,5:1 no branco, 4,9:1 no plano */

  /* vereditos (dado) */
  --v-ok: #1f8a70;
  --v-ok-tinta: #146150;
  --v-ok-tint: #e6f3ef;
  --v-falta: #d9a21b;        /* fidelizado nao marcado */
  --v-falta-tinta: #7a5a06;
  --v-falta-tint: #fbf1d9;
  --v-sem: #c9473f;          /* marcado sem fidelizacao */
  --v-sem-tinta: #9a2c26;
  --v-sem-tint: #f9e4e2;
  --v-nl: #8a9aa2;           /* nao localizado */
  --v-nl-tinta: #4e5f66;
  --v-nl-tint: #eef1f3;

  /* tipo */
  --fonte: "Archivo", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", Consolas, "SF Mono", Menlo, monospace;
  --t-11: 0.75rem;     /* 12 */
  --t-12: 0.8125rem;   /* 13 */
  --t-14: 0.90625rem;  /* 14.5 */
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-21: 1.3125rem;
  --t-26: 1.625rem;
  --t-34: 2.125rem;

  /* espaco (base 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px;
  --e-6: 24px; --e-8: 32px; --e-10: 40px; --e-14: 56px;

  --raio: 10px;
  --raio-sm: 6px;
  --sombra: 0 1px 2px rgba(16, 42, 48, 0.05), 0 1px 1px rgba(16, 42, 48, 0.03);
  --sombra-alta: 0 18px 50px rgba(11, 46, 52, 0.20), 0 2px 6px rgba(11, 46, 52, 0.10);
  --foco: 0 0 0 2px var(--sup), 0 0 0 4px var(--teal);

  --ease: cubic-bezier(0.25, 1, 0.5, 1);          /* ease-out-quart */
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);

  /* z-index semantico */
  --z-sticky: 20;
  --z-mast: 30;
  --z-pop: 35;
  --z-fundo: 40;
  --z-gaveta: 50;
  --z-ficha: 60;
  --z-toast: 70;
  --z-dica: 80;
  --z-login: 90;

  --largura: 1440px;
  --mast-h: 56px;
  --abas-h: 44px;
}

/* ================================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--plano);
  color: var(--tinta);
  font-family: var(--fonte);
  font-size: var(--t-14);
  line-height: 1.5;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  color-scheme: light;
  overflow-x: hidden;
}
[hidden] { display: none !important; }
h1, h2, h3, h4 { margin: 0; font-weight: 650; line-height: 1.2; text-wrap: balance; }
p { margin: 0; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--teal); text-underline-offset: 2px; }
a:hover { color: var(--teal-forte); }
:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.campo:focus-visible { outline: 2px solid transparent; }          /* o campo tem borda + anel proprios */
.sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.num { font-variant-numeric: tabular-nums; }
.ico { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
       stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.2em; }
.ico-sm { width: 15px; height: 15px; }
.ico-xs { width: 13px; height: 13px; stroke-width: 2.1; }

/* ============================================================ botoes */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--e-2);
  min-height: 38px; padding: 0 var(--e-4);
  border: 1px solid transparent; border-radius: var(--raio-sm);
  font-size: var(--t-14); font-weight: 600; line-height: 1;
  white-space: nowrap; text-decoration: none;
  transition: background-color .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease),
              transform .12s var(--ease);
}
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { cursor: not-allowed; opacity: .55; }
.btn-prim { background: var(--teal); color: #fff; }
.btn-prim:hover:not(:disabled) { background: var(--teal-forte); }
.btn-sec { background: var(--sup); color: var(--tinta); border-color: var(--linha-forte); }
.btn-sec:hover:not(:disabled) { border-color: var(--teal); color: var(--teal-forte); }
.btn-fantasma { background: transparent; color: var(--tinta-2); border-color: transparent; }
.btn-fantasma:hover:not(:disabled) { background: var(--teal-tint); color: var(--teal-forte); }
.btn-perigo { background: var(--sup); color: var(--v-sem-tinta); border-color: #e3b7b3; }
.btn-perigo:hover:not(:disabled) { background: var(--v-sem-tint); border-color: var(--v-sem); }
.btn-perigo.armado { background: var(--v-sem); color: #fff; border-color: var(--v-sem); }
.btn-p { min-height: 32px; padding: 0 var(--e-3); font-size: var(--t-12); }
.btn-g { min-height: 46px; padding: 0 var(--e-5); font-size: var(--t-16); }
.btn .cont {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px;
  padding: 0 6px; border-radius: 999px; font-size: var(--t-11); font-weight: 700;
  background: rgba(255,255,255,.18);
}
.btn-sec .cont, .btn-fantasma .cont { background: var(--teal-tint); color: var(--teal-forte); }
.icone-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 1px solid transparent; border-radius: var(--raio-sm); background: transparent; color: var(--tinta-2);
}
.icone-btn:hover { background: var(--teal-tint); color: var(--teal-forte); }
.icone-btn:disabled { opacity: .4; cursor: not-allowed; }

/* ============================================================= campos */
.rotulo { display: block; margin-bottom: 6px; font-size: var(--t-12); font-weight: 600; color: var(--tinta-2); }
.campo {
  width: 100%; min-height: 40px; padding: 0 var(--e-3);
  background: var(--sup); border: 1px solid var(--borda-campo); border-radius: var(--raio-sm);
  font-size: var(--t-14); color: var(--tinta);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.campo::placeholder { color: var(--tinta-3); opacity: 1; }
.campo:hover { border-color: var(--tinta-3); }
.campo:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px rgba(27, 96, 110, .22); }
.campo[aria-invalid="true"] { border-color: var(--v-sem); }
.dica { margin-top: 6px; font-size: var(--t-12); color: var(--tinta-3); }

/* segmentado (periodo, ordenacao) */
.seg { display: inline-flex; padding: 3px; gap: 2px; background: var(--sup-2); border: 1px solid var(--linha);
       border-radius: 8px; }
.seg button {
  min-height: 30px; padding: 0 var(--e-3); border: 0; border-radius: 6px; background: transparent;
  font-size: var(--t-12); font-weight: 600; color: var(--tinta-2); white-space: nowrap;
}
.seg button:hover { color: var(--tinta); background: rgba(27, 96, 110, .07); }
.seg button[aria-pressed="true"] { background: var(--sup); color: var(--teal-forte);
  box-shadow: 0 1px 2px rgba(16, 42, 48, .12), 0 0 0 1px var(--linha); }

/* ===================================================== vereditos (vocabulario) */
.vd {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  padding: 3px 9px 3px 6px; border-radius: 999px;
  font-size: var(--t-12); font-weight: 600; line-height: 1.25; white-space: nowrap;
}
.vd .ico { width: 15px; height: 15px; stroke-width: 2.2; }
.vd-ok    { background: var(--v-ok-tint);    color: var(--v-ok-tinta); }
.vd-falta { background: var(--v-falta-tint); color: var(--v-falta-tinta); }
.vd-sem   { background: var(--v-sem-tint);   color: var(--v-sem-tinta); }
.vd-nl    { background: var(--v-nl-tint);    color: var(--v-nl-tinta); }
.vd-ok .ico { color: var(--v-ok); }
.vd-falta .ico { color: #b7860f; }
.vd-sem .ico { color: var(--v-sem); }
.vd-nl .ico { color: var(--v-nl-tinta); }

.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.sw-ok { background: var(--v-ok); }
.sw-falta { background: var(--v-falta); }
.sw-sem { background: var(--v-sem); }
.sw-nl { background: var(--v-nl); }

/* etiquetas pequenas: tipo, NOVA/ANTERIOR, GSM/PORTADO */
.tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 5px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .01em; white-space: nowrap;
  background: var(--sup-2); color: var(--tinta-2); border: 1px solid var(--linha);
}
.tag-ap { background: #eef0fb; color: #3c4a8c; border-color: #d9ddf3; }
.tag-pl { background: var(--teal-tint); color: var(--teal-forte); border-color: #cfe2e6; }
.tag-nova { background: var(--v-ok-tint); color: var(--v-ok-tinta); border-color: #c4e4da; }
.tag-ant { background: var(--sup-2); color: var(--tinta-3); border-color: var(--linha); }
.tag-corr { background: var(--teal-tint); color: var(--teal-forte); border-color: #cfe2e6; white-space: normal; height: auto; min-height: 20px; }
.tag-mudou { background: var(--v-sem-tint); color: var(--v-sem-tinta); border-color: #eccbc8; white-space: normal; height: auto; min-height: 20px; }
.simnao { font-weight: 700; letter-spacing: .02em; }
.simnao-sim { color: var(--tinta); }
.simnao-nao { color: var(--tinta-3); }

/* barra segmentada fina (meter list): sem texto, figuras ao lado */
.seg-barra { display: flex; gap: 2px; height: 8px; border-radius: 999px; overflow: hidden; background: var(--sup-2); }
.seg-barra > span { display: block; height: 100%; min-width: 0; transition: flex-grow .3s var(--ease); }
.seg-barra .p-ok { background: var(--v-ok); }
.seg-barra .p-falta { background: var(--v-falta); }
.seg-barra .p-sem { background: var(--v-sem); }
.seg-barra .p-nl { background: var(--v-nl); }

/* ====================================================== ABERTURA (sessao) */
.inicio:not([hidden]) { position: fixed; inset: 0; z-index: var(--z-login); display: grid; place-items: center;
  padding: var(--e-6); background: var(--petroleo); color: #fff; }
.inicio-in { display: grid; justify-items: center; gap: var(--e-4); text-align: center; max-width: 420px; }
.inicio-txt { font-size: var(--t-16); color: var(--menta-clara); line-height: 1.5; }
.inicio-acoes { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--e-2); }
.inicio .btn-fantasma { color: var(--menta-clara); }
.inicio .btn-fantasma:hover { background: rgba(152, 194, 204, .1); color: #fff; }
.inicio :focus-visible { outline-color: var(--menta); }

/* ============================================================= LOGIN */
.lg:not([hidden]) {
  position: fixed; inset: 0; z-index: var(--z-login);
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(380px, 1fr);
  background: var(--sup-2); overflow-y: auto; overflow-x: hidden;
}
.lg-marca {
  position: relative; display: flex; align-items: center; padding: var(--e-14) clamp(32px, 5vw, 72px);
  overflow: hidden; color: #fff;
  background: linear-gradient(140deg, #08252b 0%, var(--petroleo) 45%, #114550 100%);
}
.lg-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.lg-veu { position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(140deg, rgba(8,37,43,.93) 0%, rgba(11,46,52,.80) 50%, rgba(17,69,80,.62) 100%); }
.lg-marca-in { position: relative; z-index: 1; width: 100%; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--e-6); }
.lockup { display: inline-flex; align-items: center; gap: 10px; }
.lockup-txt { position: relative; font-size: 24px; font-weight: 700; letter-spacing: -0.02em; padding-right: 10px; }
.lockup-txt::after { content: ""; position: absolute; right: 0; bottom: 6px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--menta); }
.lg-titulo { font-size: clamp(2rem, 1.2rem + 1.9vw, 2.75rem); line-height: 1.06; font-weight: 700;
  font-stretch: 112%; letter-spacing: -0.02em; max-width: 15ch; }
.lg-sub { font-size: var(--t-16); line-height: 1.55; color: var(--menta-clara); max-width: 44ch; }

/* mini matriz que explica a regra (eco da assinatura) */
.lg-mx { display: grid; grid-template-columns: auto 1fr 1fr; gap: 2px; max-width: 460px;
  font-size: var(--t-12); border-radius: 12px; overflow: hidden; background: rgba(152, 194, 204, .16); }
.lg-mx > * { padding: 10px 12px; background: rgba(8, 37, 43, .55); }
.lg-mx .h { color: var(--menta); font-weight: 600; }
.lg-mx .h b { display: block; color: #fff; font-weight: 700; font-stretch: 110%; font-size: var(--t-14); }
.lg-mx .c { display: flex; align-items: center; gap: 8px; color: #fff; font-weight: 600; }
.lg-mx .c .ico { width: 16px; height: 16px; stroke-width: 2.3; }
.lg-mx .c-ok .ico { color: #63d1b3; }
.lg-mx .c-sem .ico { color: #f08a83; }
.lg-mx .c-falta .ico { color: #f1c453; }
.lg-mx .canto { background: rgba(8, 37, 43, .35); }
.lg-mx-pe { font-size: var(--t-12); color: var(--menta); }

.lg-form { display: flex; align-items: center; justify-content: center; padding: var(--e-10) var(--e-8); background: var(--sup); }
.lg-form-in { width: 100%; max-width: 360px; }
.lg-form-lockup { display: none; }
.lg-form h1 { font-size: var(--t-26); font-weight: 700; font-stretch: 108%; letter-spacing: -0.01em; }
.lg-form-sub { margin: 8px 0 var(--e-6); color: var(--tinta-2); }
.lg-form .grupo { margin-bottom: var(--e-4); }
.lg-campo { position: relative; }
.lg-campo .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.lg-campo .campo { padding-left: 40px; min-height: 44px; }
.otp { min-height: 48px !important; text-align: center; letter-spacing: .5em; font-size: var(--t-21) !important;
  font-weight: 600; font-variant-numeric: tabular-nums; padding-left: calc(var(--e-3) + .5em) !important; }
.lg-btn { width: 100%; margin-top: var(--e-2); min-height: 46px; font-size: var(--t-16); }
.lg-robo { display: flex; align-items: flex-start; gap: 8px; margin: calc(-1 * var(--e-2)) 0 var(--e-5); padding: 10px 12px;
  border-radius: var(--raio-sm); background: var(--v-falta-tint); color: var(--v-falta-tinta); font-size: var(--t-12); font-weight: 600; }
.lg-robo .ico { color: #8a6508; margin-top: 1px; }
.lg-erro { margin-top: var(--e-4); padding: 10px 12px; border-radius: var(--raio-sm);
  background: var(--v-sem-tint); color: var(--v-sem-tinta); font-size: var(--t-12); font-weight: 600; }
.lg-alt { margin-top: var(--e-3); font-size: var(--t-12); }

/* ============================================================ MASTHEAD */
.mast { position: sticky; top: 0; z-index: var(--z-mast); background: var(--petroleo); color: #fff; }
.mast-in { max-width: var(--largura); margin: 0 auto; padding: 0 var(--e-6);
  display: flex; align-items: center; justify-content: space-between; gap: var(--e-4); height: var(--mast-h); }
.mast-marca { display: flex; align-items: center; gap: var(--e-4); min-width: 0; }
.mast-marca .lockup-txt { font-size: 21px; }
.mast-div { width: 1px; height: 26px; background: rgba(152, 194, 204, .28); flex: none; }
.mast-titulo { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.mast-titulo strong { font-size: var(--t-16); font-weight: 700; font-stretch: 116%; letter-spacing: -0.005em; white-space: nowrap; }
.mast-titulo span { font-size: var(--t-11); color: var(--menta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mast-eu { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.mast-eu-txt { text-align: right; line-height: 1.2; min-width: 0; }
.mast-eu-txt b { display: block; font-size: var(--t-12); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mast-eu-txt span { font-size: var(--t-11); color: var(--menta); }
.mast .btn-sair { min-height: 32px; padding: 0 var(--e-3); font-size: var(--t-12); font-weight: 600;
  color: var(--menta-clara); background: transparent; border: 1px solid rgba(152, 194, 204, .35); border-radius: var(--raio-sm); }
.mast .btn-sair:hover { color: #fff; border-color: var(--menta); background: rgba(152, 194, 204, .08); }
.mast :focus-visible, .abas :focus-visible { outline-color: var(--menta); }
.faixa-token :focus-visible { outline-color: var(--v-falta-tinta); }

.abas { background: var(--petroleo); border-top: 1px solid rgba(152, 194, 204, .12); }
@media (min-width: 721px) { .abas { position: sticky; top: var(--mast-h); z-index: var(--z-mast); } }
.abas-in { max-width: var(--largura); margin: 0 auto; padding: 0 var(--e-6); display: flex; gap: var(--e-1); height: var(--abas-h); }
.aba {
  position: relative; display: inline-flex; align-items: center; gap: 7px; padding: 0 var(--e-4);
  border: 0; background: transparent; color: #a9c7cf; font-size: var(--t-14); font-weight: 600;
  border-radius: 0;
}
.aba:hover { color: #fff; }
.aba[aria-selected="true"] { color: #fff; }
.aba[aria-selected="true"]::after { content: ""; position: absolute; left: var(--e-3); right: var(--e-3); bottom: 0;
  height: 3px; border-radius: 3px 3px 0 0; background: var(--menta); }
.aba .alerta-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--v-falta);
  box-shadow: 0 0 0 3px rgba(217, 162, 27, .25); }
.aba .vivo-dot { width: 7px; height: 7px; border-radius: 50%; background: #63d1b3; }

/* faixa global: o robo esta esperando o token (fora da aba Rodar) */
.faixa-token { background: var(--v-falta-tint); border-bottom: 1px solid #efd9a2; color: var(--v-falta-tinta); }
.faixa-token-in { max-width: var(--largura); margin: 0 auto; padding: 10px var(--e-6);
  display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-12); font-weight: 600; }
.faixa-token-in .ico { color: #b7860f; }
.faixa-token-in .btn { margin-left: auto; }

/* ====================================================== barra de recorte */
.ctx { position: sticky; top: calc(var(--mast-h) + var(--abas-h)); z-index: var(--z-sticky);
  background: rgba(237, 243, 244, .94); backdrop-filter: saturate(1.2) blur(8px);
  border-bottom: 1px solid var(--linha); }
.ctx-in { max-width: var(--largura); margin: 0 auto; padding: 10px var(--e-6);
  display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap; }
.ctx-datas { display: inline-flex; align-items: center; gap: 6px; }
.ctx-datas .campo { width: 148px; min-height: 36px; font-size: var(--t-12); }
.ctx-busca { position: relative; flex: 1 1 220px; max-width: 340px; }
.ctx-busca .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--tinta-3); pointer-events: none; }
.ctx-busca .campo { min-height: 36px; padding-left: 36px; font-size: var(--t-12); }
.ctx-acoes { display: inline-flex; align-items: center; gap: var(--e-2); margin-left: auto; }
.ctx-atual { font-size: var(--t-11); color: var(--tinta-3); white-space: nowrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.chips:empty { display: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 28px; max-width: 100%; padding: 2px 6px 2px 10px;
  border: 1px solid #c6dbe0; border-radius: 999px; background: var(--sup); color: var(--tinta);
  font-size: var(--t-12); font-weight: 500;
}
.chip b { flex: none; }
.chip-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip button { flex: none; }
.chip b { font-weight: 600; color: var(--tinta-2); }
.chip button { display: inline-grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0;
  border-radius: 50%; background: transparent; color: var(--tinta-3); }
.chip button:hover { background: var(--teal-tint); color: var(--teal-forte); }
.chip-limpar { height: 28px; padding: 0 8px; border: 0; background: transparent; color: var(--teal);
  font-size: var(--t-12); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.btn-filtros .cont { background: var(--teal); color: #fff; }

/* =============================================================== layout */
.app-main { max-width: var(--largura); margin: 0 auto; padding: var(--e-6) var(--e-6) var(--e-14); }
.painel { background: var(--sup); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); }
.painel-cab { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap;
  padding: var(--e-5) var(--e-5) 0; }
.painel-cab h2 { font-size: var(--t-16); font-weight: 650; font-stretch: 104%; }
.painel-cab .leg { font-size: var(--t-12); color: var(--tinta-3); }
.painel-corpo { padding: var(--e-4) var(--e-5) var(--e-5); }
.recarregando { opacity: .55; transition: opacity .2s var(--ease); pointer-events: none; }

/* ============================================================ DASHBOARD */
.abertura { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--e-6); flex-wrap: wrap;
  margin-bottom: var(--e-5); }
.abertura h1 { font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2rem); font-weight: 700; font-stretch: 112%; letter-spacing: -0.015em; }
.abertura-sub { margin-top: 6px; display: flex; align-items: center; gap: var(--e-3); flex-wrap: wrap;
  color: var(--tinta-2); font-size: var(--t-14); }
.abertura-sub strong { color: var(--tinta); font-weight: 650; }
.abertura-sub .sep { color: var(--linha-forte); }
.fila-robo { display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px;
  background: var(--sup); border: 1px solid var(--linha); font-size: var(--t-12); font-weight: 600; color: var(--tinta-2);
  text-decoration: none; }
a.fila-robo:hover { border-color: var(--teal); color: var(--teal-forte); }
.fila-robo .ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
.cobertura { flex: 0 1 360px; min-width: 240px; }
.cobertura-rot { display: flex; justify-content: space-between; gap: var(--e-3); font-size: var(--t-12); color: var(--tinta-2); margin-bottom: 6px; }
.cobertura-rot b { color: var(--tinta); }
.medidor { position: relative; height: 8px; border-radius: 999px; background: #d6e5e8; overflow: hidden; }
.medidor > span { position: absolute; inset: 0 auto 0 0; width: 100%; border-radius: inherit; background: var(--teal);
  transform-origin: left; transition: transform .5s var(--ease-expo); }

.aviso-faixa { margin: 0 0 var(--e-5); padding: 10px 14px; border-radius: 10px; border: 1px solid #efdcae;
  background: var(--v-falta-tint); color: var(--v-falta-tinta); font-size: var(--t-12); font-weight: 600; line-height: 1.5; }
.dash-topo { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--e-5); margin-bottom: var(--e-5); align-items: start; }

/* --------------------------- MATRIZ DE CONCILIACAO (assinatura) */
.conc { padding: var(--e-5); }
.conc-cab { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-4); flex-wrap: wrap; margin-bottom: var(--e-4); }
.conc-cab h2 { font-size: var(--t-16); font-weight: 650; font-stretch: 104%; }
.conc-cab p { margin-top: 3px; font-size: var(--t-12); color: var(--tinta-3); max-width: 60ch; }
.conc-taxa { text-align: right; }
.conc-taxa strong { display: block; font-size: var(--t-34); font-weight: 700; font-stretch: 112%; line-height: 1;
  letter-spacing: -0.02em; color: var(--tinta); }
.conc-taxa span { font-size: var(--t-12); color: var(--tinta-2); }

.conc-grade { display: grid; grid-template-columns: minmax(84px, auto) minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.conc-eixo { display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 10px; }
.conc-eixo .fonte { align-self: flex-start; padding: 1px 7px; border-radius: 4px; font-size: 11px; font-weight: 700; letter-spacing: .01em; }
/* as duas vozes da conciliacao: a marcacao da loja (teal da marca) e o CBCF (o cinza do proprio CBCF) */
.fonte-venda { background: var(--teal-tint); color: var(--teal-forte); }
.fonte-cbcf { background: #677379; color: #fff; }
.conc-eixo .valor { font-size: var(--t-14); font-weight: 700; font-stretch: 110%; color: var(--tinta); }
.conc-eixo-col { padding-bottom: 2px; }
.conc-eixo-lin { align-items: flex-start; }
.conc-canto { display: flex; align-items: flex-end; padding: 6px 10px; font-size: var(--t-11); color: var(--tinta-3); line-height: 1.3; }

.cel {
  position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 132px; padding: 14px 16px 18px;
  text-align: left; border: 1px solid var(--linha); border-radius: 10px; background: var(--sup);
  transition: border-color .16s var(--ease), box-shadow .16s var(--ease), background-color .16s var(--ease), opacity .2s var(--ease);
}
.cel:hover { border-color: var(--linha-forte); box-shadow: 0 4px 14px rgba(16, 42, 48, .07); }
.cel-cab { display: flex; align-items: center; gap: 7px; font-size: var(--t-12); font-weight: 650; }
.cel-cab .ico { width: 17px; height: 17px; stroke-width: 2.3; }
.cel-n { font-size: var(--t-34); font-weight: 650; font-stretch: 108%; line-height: 1; letter-spacing: -0.02em; color: var(--tinta); }
.cel-pct { font-size: var(--t-12); color: var(--tinta-2); }
.cel-trilha { position: absolute; left: 16px; right: 16px; bottom: 10px; height: 4px; border-radius: 4px; background: rgba(16, 42, 48, .06); overflow: hidden; }
.cel-trilha > span { position: absolute; inset: 0; width: 100%; border-radius: 4px; transform-origin: left;
  transition: transform .5s var(--ease-expo); }
.cel-ok .cel-cab { color: var(--v-ok-tinta); }
.cel-ok .cel-cab .ico { color: var(--v-ok); }
.cel-ok .cel-trilha > span { background: var(--v-ok); }
.cel-sem .cel-cab { color: var(--v-sem-tinta); }
.cel-sem .cel-cab .ico { color: var(--v-sem); }
.cel-sem .cel-trilha > span { background: var(--v-sem); }
.cel-falta .cel-cab { color: var(--v-falta-tinta); }
.cel-falta .cel-cab .ico { color: #b7860f; }
.cel-falta .cel-trilha > span { background: var(--v-falta); }
/* divergencia com casos: a celula ganha o tom do veredito (sem faixa lateral) */
.cel-sem.tem { background: var(--v-sem-tint); border-color: #eccbc8; }
.cel-falta.tem { background: var(--v-falta-tint); border-color: #efdcae; }
.cel-sem.tem:hover { border-color: var(--v-sem); }
.cel-falta.tem:hover { border-color: var(--v-falta); }
.cel[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--teal); border-color: var(--teal); }
.conc-grade.tem-sel .cel[aria-pressed="false"] { background: var(--sup-2); border-color: var(--linha); box-shadow: none; }
.conc-grade.tem-sel .cel[aria-pressed="false"] .cel-trilha > span { opacity: .35; }
.cel-zero .cel-n { color: var(--tinta-3); }

.conc-nl {
  display: flex; align-items: center; gap: var(--e-3); width: 100%; margin-top: 6px; padding: 12px 16px;
  text-align: left; border: 1px dashed var(--linha-forte); border-radius: 10px; background: var(--sup-2);
  color: var(--tinta-2); font-size: var(--t-12);
}
.conc-nl:hover { border-color: var(--v-nl); background: var(--v-nl-tint); }
.conc-nl .ico { color: var(--v-nl-tinta); }
.conc-nl b { font-size: var(--t-16); font-weight: 650; color: var(--tinta); font-stretch: 106%; }
.conc-nl[aria-pressed="true"] { border-style: solid; border-color: var(--teal); box-shadow: 0 0 0 1px var(--teal); }
.conc-corr { margin-top: 8px; font-size: var(--t-12); color: var(--teal-forte); }

/* --------------------------- leitura rapida (ao lado da matriz) */
.leitura { display: flex; flex-direction: column; }
.leitura .bloco { padding: var(--e-5); }
.leitura .bloco + .bloco { border-top: 1px solid var(--linha); }
.leitura h3 { font-size: var(--t-14); font-weight: 650; margin-bottom: var(--e-3); font-stretch: 104%; }
.tipo-lin { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: var(--e-3); padding: 8px 0; }
.tipo-lin + .tipo-lin { border-top: 1px solid var(--sup-2); }
.tipo-nome { font-weight: 600; font-size: var(--t-14); }
.tipo-nome small { display: block; font-size: var(--t-11); color: var(--tinta-3); font-weight: 500; }
.tipo-fig { text-align: right; font-size: var(--t-12); color: var(--tinta-2); white-space: nowrap; }
.tipo-fig b { font-size: var(--t-14); color: var(--tinta); }
.valor-total { font-size: var(--t-26); font-weight: 700; font-stretch: 110%; letter-spacing: -0.015em; line-height: 1.1; }
.valor-quebra { margin-top: var(--e-2); display: grid; gap: 6px; font-size: var(--t-12); color: var(--tinta-2); }
.valor-quebra div { display: flex; align-items: center; gap: 8px; }
.valor-quebra b { color: var(--tinta); font-weight: 600; margin-left: auto; font-variant-numeric: tabular-nums; }
.legenda { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: var(--e-3); font-size: var(--t-11); color: var(--tinta-2); }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }

/* --------------------------- listas medidoras (loja / vendedor / modalidade) */
.dash-grade { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-5); margin-bottom: var(--e-5); align-items: start; }
#grade-b { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); }
.dash-grade.uma, #grade-b.uma { grid-template-columns: minmax(0, 1fr); }
.ml { list-style: none; margin: 0; padding: 0; }
.ml-lin {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(90px, 1fr) auto; align-items: center; gap: var(--e-3);
  width: 100%; padding: 9px 10px; margin: 0 -10px; border: 0; border-radius: 8px; background: transparent; text-align: left;
  width: calc(100% + 20px);
  transition: background-color .14s var(--ease);
}
.ml-lin:hover { background: var(--sup-2); }
.ml-lin[aria-pressed="true"] { background: var(--teal-tint); box-shadow: inset 0 0 0 1px #bcd8de; }
.ml-nome { min-width: 0; }
.ml-nome b { display: block; font-size: var(--t-12); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-nome small { display: block; font-size: var(--t-11); color: var(--tinta-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-fig { min-width: 92px; text-align: right; font-size: var(--t-12); color: var(--tinta-2); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ml-fig b { color: var(--tinta); font-weight: 650; }
.ml-fig .div-n { color: var(--v-sem-tinta); font-weight: 600; }
.ml-mais { margin-top: var(--e-2); }
.ml-vazio { padding: var(--e-4) 0; color: var(--tinta-3); font-size: var(--t-12); }

/* barras de divergencia por vendedor: 2 series empilhadas (sem + falta) */
.dv-barra { display: flex; align-items: center; gap: 8px; min-width: 0; }
.dv-trilho { flex: 1; display: flex; gap: 2px; height: 10px; min-width: 0; }
.dv-trilho span { display: block; height: 100%; min-width: 3px; }
.dv-trilho span:first-child { border-radius: 0; }
.dv-trilho span:last-child { border-radius: 0 4px 4px 0; }
.dv-trilho .s-sem { background: var(--v-sem); }
.dv-trilho .s-falta { background: var(--v-falta); }

/* --------------------------- fila de acao */
.fila { list-style: none; margin: 0; padding: 0; }
.fila-it {
  display: grid; grid-template-columns: 196px minmax(0, 1fr) auto; gap: 6px var(--e-4); align-items: start;
  width: 100%; padding: 14px var(--e-5); border: 0; border-top: 1px solid var(--linha); background: transparent; text-align: left;
  transition: background-color .14s var(--ease);
}
.fila-it:hover { background: var(--sup-2); }
.fila-quem { min-width: 0; }
.fila-quem b { font-size: var(--t-14); font-weight: 650; }
.fila-quem .num-fone { margin-left: 8px; color: var(--tinta-2); font-size: var(--t-12); font-variant-numeric: tabular-nums; white-space: nowrap; }
.fila-onde { margin-top: 2px; font-size: var(--t-12); color: var(--tinta-3); }
.fila-diz { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: var(--t-12); color: var(--tinta-2); }
.fila-diz .seta { color: var(--tinta-3); }
.fila-obs { margin-top: 6px; font-size: var(--t-12); color: var(--tinta-3); line-height: 1.45; }
.fila-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fila-it.corr { background: var(--sup-2); }
.fila-data { font-size: var(--t-12); color: var(--tinta-3); white-space: nowrap; text-align: right; }
.fila-pe { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: 12px var(--e-5);
  border-top: 1px solid var(--linha); font-size: var(--t-12); color: var(--tinta-3); }
.fila-limpa { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-5); color: var(--tinta-2); border-top: 1px solid var(--linha); }
.fila-limpa .ico { color: var(--v-ok); width: 22px; height: 22px; }

/* ======================================================== estados vazios */
.vazio { display: grid; justify-items: start; gap: var(--e-3); padding: var(--e-10) var(--e-8); }
.vazio h2 { font-size: var(--t-21); font-weight: 700; font-stretch: 108%; }
.vazio p { max-width: 60ch; color: var(--tinta-2); }
.esq { border-radius: 8px; background: linear-gradient(90deg, #e3ecee 0%, #eef4f5 50%, #e3ecee 100%);
  background-size: 200% 100%; animation: brilho 1.4s linear infinite; }
@keyframes brilho { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ================================================================ VENDAS */
.vendas-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap;
  padding: var(--e-4) var(--e-5); border-bottom: 1px solid var(--linha); }
.vendas-cab h2 { font-size: var(--t-16); font-weight: 650; font-stretch: 104%; }
.vendas-cab h2 span { margin-left: 6px; font-weight: 500; font-size: var(--t-12); color: var(--tinta-3); }
.vendas-cab .acoes { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; }
.tab-wrap { overflow: auto; max-height: calc(100vh - 230px); min-height: 260px; }
.tab { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-12); font-stretch: 94%; }
.tab th { position: sticky; top: 0; z-index: 1; padding: 10px 12px; background: var(--sup-2); border-bottom: 1px solid var(--linha-forte);
  text-align: left; font-weight: 650; font-size: var(--t-11); color: var(--tinta-2); white-space: nowrap; }
.tab th button { display: inline-flex; align-items: center; gap: 4px; padding: 0; border: 0; background: none;
  font-weight: inherit; font-size: inherit; color: inherit; }
.tab th button:hover { color: var(--teal-forte); }
.tab th .seta { color: var(--tinta-3); opacity: .5; }
.tab th[aria-sort="ascending"] .seta, .tab th[aria-sort="descending"] .seta { opacity: 1; color: var(--teal); }
.tab td { padding: 10px 12px; border-bottom: 1px solid var(--linha); vertical-align: top; }
.tab tbody tr { cursor: pointer; transition: background-color .12s var(--ease); }
.tab tbody tr:hover td { background: var(--sup-2); }
.tab tbody tr:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
.tab tbody tr:focus-visible td { background: var(--teal-tint); }
.tab tbody tr.aberta td { background: var(--teal-tint); }
.tab small { display: block; margin-top: 1px; color: var(--tinta-3); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.tab .c-data { white-space: nowrap; font-variant-numeric: tabular-nums; color: var(--tinta); width: 1%; }
.tab .c-loja { min-width: 150px; max-width: 190px; }
.tab .c-loja b, .tab .c-cli b { display: block; font-weight: 600; font-size: var(--t-12); }
.tab .c-cli { min-width: 170px; max-width: 230px; }
.tab .c-cli small { white-space: nowrap; }
.tab .c-fone { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tab .c-mod { min-width: 150px; max-width: 190px; }
.tab .c-mod .corte { max-width: 190px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tab .c-sn { white-space: nowrap; }
.tab .c-vd { white-space: nowrap; }
.tab .c-obs { min-width: 290px; }
.obs-lista { display: grid; gap: 4px; }
.obs-it { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 6px; line-height: 1.35; }
.obs-it .m { font-weight: 600; color: var(--tinta); }
.obs-it .d { color: var(--tinta-3); font-variant-numeric: tabular-nums; }
.obs-it.ant .m { color: var(--tinta-2); font-weight: 500; }
.obs-vazio { color: var(--tinta-3); }
.tab-mais { display: flex; justify-content: center; padding: var(--e-4); border-top: 1px solid var(--linha); }
.tab-aviso { padding: 10px var(--e-5); background: var(--v-falta-tint); color: var(--v-falta-tinta); font-size: var(--t-12); font-weight: 600; }

/* ================================================================ FICHA (detalhe) */
.ficha-fundo { position: fixed; inset: 0; z-index: var(--z-fundo); background: rgba(11, 46, 52, .32);
  animation: aparecer .18s var(--ease); }
.ficha {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-ficha); width: min(620px, 100vw);
  display: flex; flex-direction: column; background: var(--sup); box-shadow: var(--sombra-alta);
  animation: entrar-dir .26s var(--ease-expo);
}
@keyframes entrar-dir { from { transform: translateX(28px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes aparecer { from { opacity: 0; } to { opacity: 1; } }
.ficha-cab { padding: var(--e-5) var(--e-6) var(--e-4); border-bottom: 1px solid var(--linha); }
.ficha-topo { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; row-gap: 8px; }
.ficha-topo > #ficha-vd { min-width: 0; }
.ficha-topo .vd { white-space: normal; }
.ficha-nav { display: inline-flex; align-items: center; gap: 2px; margin-left: auto; flex: none; }
.ficha-pos { font-size: var(--t-11); color: var(--tinta-3); margin: 0 6px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ficha-cab h2 { margin-top: var(--e-3); font-size: var(--t-21); font-weight: 700; font-stretch: 106%; letter-spacing: -0.01em; }
.ficha-cab .meta { margin-top: 4px; font-size: var(--t-12); color: var(--tinta-2); }
.ficha-corpo { flex: 1; overflow-y: auto; padding: var(--e-5) var(--e-6) var(--e-8); }
.ficha-corpo:focus-visible { outline-offset: -3px; }
.ficha-sec + .ficha-sec { margin-top: var(--e-6); }
.ficha-sec h3 { font-size: var(--t-14); font-weight: 650; font-stretch: 104%; margin-bottom: var(--e-3); }
.ficha-frase { padding: 14px 16px; border-radius: 10px; background: var(--sup-2); border: 1px solid var(--linha);
  font-size: var(--t-14); line-height: 1.55; color: var(--tinta); }
.ficha-frase.f-ok { background: var(--v-ok-tint); border-color: #c9e6dc; }
.ficha-frase.f-sem { background: var(--v-sem-tint); border-color: #eccbc8; }
.ficha-frase.f-falta { background: var(--v-falta-tint); border-color: #efdcae; }
.ficha-frase.f-nl { background: var(--v-nl-tint); border-color: #dce3e7; }
.ficha-frase.f-corr { background: var(--teal-tint); border-color: #cfe2e6; }
.ficha-frase .fazer { display: block; margin-top: 8px; font-size: var(--t-12); color: var(--tinta-2); }
.cmp { width: 100%; border-collapse: collapse; font-size: var(--t-12); }
.cmp th, .cmp td { padding: 9px 10px; border-bottom: 1px solid var(--linha); text-align: left; }
.cmp thead th { font-size: var(--t-11); color: var(--tinta-3); font-weight: 600; }
.cmp tbody th { font-weight: 600; width: 92px; }
.cmp tr.conferido th, .cmp tr.conferido td { background: var(--teal-tint); }
.cmp .marca { display: inline-block; margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--teal-forte); }

/* homenagem ao CBCF: aba "Fidelizacoes Correntes" e cabecalho cinza */
.cbcf-aba { display: inline-block; padding: 5px 12px 4px; border-radius: 6px 6px 0 0; background: #677379; color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em; }
.cbcf-rolo { overflow-x: auto; }
.cbcf { width: 100%; border-collapse: collapse; font-size: var(--t-12); border: 1px solid #b9c3c8; }
.cbcf .c-vig { display: none; }
.cbcf th.vl { text-align: right; }
.cbcf th { background: #677379; color: #fff; padding: 6px 8px; text-align: left; font-weight: 700; font-size: 11.5px; white-space: nowrap; }
.cbcf td { padding: 7px 8px; border-top: 1px solid #dfe5e8; vertical-align: top; font-variant-numeric: tabular-nums; }
.cbcf tr.nova td { background: #f2faf7; }
.cbcf td.vl { text-align: right; white-space: nowrap; }
.cbcf .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.cbcf-vazio { padding: 12px; border: 1px solid #b9c3c8; color: var(--tinta-3); font-size: var(--t-12); }
.kv { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 0; font-size: var(--t-12); }
.kv dt, .kv dd { margin: 0; padding: 7px 0; border-bottom: 1px solid var(--sup-2); }
.kv dt { color: var(--tinta-3); font-weight: 500; }
.kv dd { color: var(--tinta); font-weight: 500; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.ficha-pe { padding: 10px var(--e-6); border-top: 1px solid var(--linha); font-size: var(--t-11); color: var(--tinta-3);
  display: flex; gap: var(--e-4); flex-wrap: wrap; }
.ficha-pe kbd { display: inline-block; min-width: 20px; padding: 1px 5px; border: 1px solid var(--linha-forte); border-bottom-width: 2px;
  border-radius: 4px; background: var(--sup-2); font-family: var(--mono); font-size: 10.5px; text-align: center; color: var(--tinta-2); }

/* ================================================================ GAVETA (filtros) */
.gaveta-fundo { position: fixed; inset: 0; z-index: var(--z-fundo); background: rgba(11, 46, 52, .28); animation: aparecer .18s var(--ease); }
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-gaveta); width: min(400px, 100vw);
  display: flex; flex-direction: column; background: var(--sup); box-shadow: var(--sombra-alta);
  animation: entrar-dir .24s var(--ease-expo);
}
.gaveta-cab { display: flex; align-items: center; justify-content: space-between; padding: var(--e-4) var(--e-5);
  border-bottom: 1px solid var(--linha); }
.gaveta-cab h2 { font-size: var(--t-16); font-weight: 650; }
.gaveta-corpo { flex: 1; overflow-y: auto; padding: var(--e-5); display: grid; gap: var(--e-5); align-content: start; }
.gaveta-pe { display: flex; justify-content: space-between; gap: var(--e-3); padding: var(--e-4) var(--e-5); border-top: 1px solid var(--linha); }
.grupo-filtro legend, .grupo-filtro .rotulo { padding: 0; margin-bottom: 8px; font-size: var(--t-12); font-weight: 650; color: var(--tinta); }
.grupo-filtro { border: 0; margin: 0; padding: 0; min-width: 0; }
.opc { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 8px; margin: 0 -8px; border-radius: 6px;
  font-size: var(--t-12); cursor: pointer; }
.opc:hover { background: var(--sup-2); }
.opc input { width: 16px; height: 16px; margin: 0; accent-color: var(--teal); flex: none; }
.opc .qt { margin-left: auto; color: var(--tinta-3); font-variant-numeric: tabular-nums; font-size: var(--t-11); }

/* multi-select inline (abre DENTRO da gaveta: nada de dropdown cortado por overflow) */
.ms-btn { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 40px;
  padding: 0 12px; border: 1px solid var(--borda-campo); border-radius: var(--raio-sm); background: var(--sup);
  font-size: var(--t-12); font-weight: 500; text-align: left; }
.ms-btn:hover { border-color: var(--tinta-3); }
.ms-btn[aria-expanded="true"] { border-color: var(--teal); border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ms-btn[aria-expanded="true"] .ico { transform: rotate(180deg); }
.ms-btn .ico { transition: transform .18s var(--ease); color: var(--tinta-3); }
.ms-painel { border: 1px solid var(--teal); border-top: 0; border-radius: 0 0 var(--raio-sm) var(--raio-sm); padding: 8px; background: var(--sup); }
.ms-painel .campo { min-height: 34px; font-size: var(--t-12); }
.ms-acoes { display: flex; gap: var(--e-3); margin: 8px 2px; }
.ms-acoes button { padding: 0; border: 0; background: none; color: var(--teal); font-size: var(--t-11); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px; }
.ms-lista { max-height: 230px; overflow-y: auto; margin: 0 -2px; padding: 0 10px; }

/* ================================================================ RODAR */
.rodar { display: grid; grid-template-columns: minmax(300px, 400px) minmax(0, 1fr); gap: var(--e-5); align-items: start; }
.rodar-col { display: grid; gap: var(--e-5); align-content: start; min-width: 0; }
.rodar-ctl { padding: var(--e-5); }
.rodar-ctl h2 { font-size: var(--t-18); font-weight: 700; font-stretch: 108%; }
.rodar-ctl > p { margin-top: 6px; color: var(--tinta-2); font-size: var(--t-12); line-height: 1.55; }
.rodar-ctl .grupo { margin-top: var(--e-5); }
.rodar-periodo { display: flex; flex-direction: column; gap: 8px; }
.rodar-periodo .txt { font-size: var(--t-12); color: var(--tinta-2); }
.rodar-periodo .txt b { color: var(--tinta); }
.rodar-botoes { display: grid; gap: var(--e-2); margin-top: var(--e-5); }
.rodar-botoes .btn { justify-content: space-between; width: 100%; }
.rodar-botoes .btn-ex { font-weight: 500; font-size: var(--t-11); opacity: .85; }
.rodar-bloq { margin-top: var(--e-3); font-size: var(--t-12); color: var(--tinta-3); }

.mon { overflow: hidden; }
.mon-cab { display: flex; align-items: center; gap: var(--e-4); padding: var(--e-5); flex-wrap: wrap; }
.farol { position: relative; width: 14px; height: 14px; border-radius: 50%; flex: none; background: var(--v-nl); }
.farol::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid currentColor; opacity: 0; color: var(--v-nl); }
.mon[data-estado="preparando"] .farol, .mon[data-estado="rodando"] .farol { background: var(--teal); }
.mon[data-estado="preparando"] .farol::after, .mon[data-estado="rodando"] .farol::after { color: var(--teal); animation: pulso 1.8s var(--ease) infinite; }
.mon[data-estado="aguardando_token"] .farol { background: var(--v-falta); }
.mon[data-estado="aguardando_token"] .farol::after { color: var(--v-falta); animation: pulso 1.4s var(--ease) infinite; }
.mon[data-estado="concluida"] .farol { background: var(--v-ok); }
.mon[data-estado="erro"] .farol { background: var(--v-sem); }
@keyframes pulso { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.mon-tit { flex: 1; min-width: 200px; }
.mon-tit h2 { font-size: var(--t-18); font-weight: 700; font-stretch: 108%; }
.mon-tit p { margin-top: 3px; font-size: var(--t-12); color: var(--tinta-2); }
.mon-sec { padding: 0 var(--e-5) var(--e-5); }

.token {
  position: relative; margin: 0 var(--e-5) var(--e-5); padding: var(--e-5); border-radius: 12px;
  background: var(--sup); border: 1px solid var(--v-falta);
  box-shadow: 0 0 0 4px rgba(217, 162, 27, .16);
  animation: chamar 2.2s var(--ease) infinite;
}
@keyframes chamar { 0%, 100% { box-shadow: 0 0 0 4px rgba(217, 162, 27, .16); } 50% { box-shadow: 0 0 0 8px rgba(217, 162, 27, .08); } }
.token-cab { display: flex; align-items: flex-start; gap: var(--e-3); }
.token-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; flex: none;
  background: var(--v-falta-tint); color: #8a6508; }
.token-ico .ico { width: 22px; height: 22px; }
.token h3 { font-size: var(--t-16); font-weight: 700; font-stretch: 106%; }
.token-cab p { margin-top: 3px; font-size: var(--t-12); color: var(--tinta-2); }
.token-motivo { display: inline-block; margin-top: 6px; padding: 2px 8px; border-radius: 999px; background: var(--v-falta-tint);
  color: var(--v-falta-tinta); font-size: var(--t-11); font-weight: 600; }
.token-form { display: flex; gap: var(--e-2); margin-top: var(--e-4); }
.token-form .campo { flex: 1; min-height: 46px; font-size: var(--t-18); letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.token-form .btn { min-height: 46px; }

.prog-lin { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); margin-bottom: 8px; font-size: var(--t-12); color: var(--tinta-2); flex-wrap: wrap; }
.prog-lin b { font-size: var(--t-21); color: var(--tinta); font-weight: 700; font-stretch: 108%; }
.prog-lin .eta { white-space: nowrap; }
.prog { position: relative; height: 10px; border-radius: 999px; background: #dbe8eb; overflow: hidden; }
.prog > span { position: absolute; inset: 0; border-radius: inherit; background: var(--teal); transform-origin: left;
  transform: scaleX(0); transition: transform .6s var(--ease-expo); }
.mon[data-estado="concluida"] .prog > span { background: var(--v-ok); }
.mon[data-estado="erro"] .prog > span { background: var(--v-sem); }
.mon[data-estado="cancelada"] .prog > span { background: var(--v-nl); }

.placar { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; margin-top: var(--e-4);
  background: var(--linha); border: 1px solid var(--linha); border-radius: 10px; overflow: hidden; }
.placar > div { padding: 10px 12px; background: var(--sup); min-width: 0; }
.placar .n { display: flex; align-items: center; gap: 6px; font-size: var(--t-18); font-weight: 700; font-stretch: 106%; font-variant-numeric: tabular-nums; }
.placar .n .ico { width: 15px; height: 15px; stroke-width: 2.3; }
.placar .r { display: block; margin-top: 2px; font-size: 11px; color: var(--tinta-3); line-height: 1.3; }
.placar .p-ok .ico { color: var(--v-ok); }
.placar .p-sem .ico { color: var(--v-sem); }
.placar .p-falta .ico { color: #b7860f; }
.placar .p-nl .ico { color: var(--v-nl-tinta); }
.placar .p-err .ico { color: var(--v-sem-tinta); }

.diario { border-top: 1px solid var(--linha); }
.diario-cab { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding: 12px var(--e-5); }
.diario-cab h3 { font-size: var(--t-14); font-weight: 650; }
.diario-cab label { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-11); color: var(--tinta-2); cursor: pointer; }
.diario-cab input { accent-color: var(--teal); }
.diario-lista { position: relative; max-height: 380px; overflow-y: auto; padding: 4px 0 12px; background: #0e2a30;
  font-family: var(--mono); font-size: 12px; line-height: 1.6; color: #d7e7ea; }
.diario-lista p { display: grid; grid-template-columns: 64px 14px minmax(0, 1fr); gap: 8px; padding: 1px var(--e-5); overflow-wrap: anywhere; }
.diario-lista .h { color: #7fa9b3; }
.diario-lista .n::before { content: "·"; color: #7fa9b3; }
.diario-lista .aviso .n::before { content: "!"; color: #f1c453; font-weight: 700; }
.diario-lista .erro .n::before { content: "×"; color: #f08a83; font-weight: 700; }
.diario-lista .aviso .t { color: #f6dc97; }
.diario-lista .erro .t { color: #f7b2ad; }
.diario-vazio { padding: var(--e-4) var(--e-5) !important; display: block !important; color: #7fa9b3; }
.diario-novas { position: sticky; bottom: 8px; display: block; margin: 0 auto; padding: 4px 12px; border: 0; border-radius: 999px;
  background: var(--menta); color: var(--petroleo); font-family: var(--fonte); font-size: var(--t-11); font-weight: 700; }

.resumo-final { margin: 0 var(--e-5) var(--e-5); padding: 12px 14px; border-radius: 10px; font-size: var(--t-12); line-height: 1.5; }
.resumo-final.r-ok { background: var(--v-ok-tint); color: var(--v-ok-tinta); }
.resumo-final.r-erro { background: var(--v-sem-tint); color: var(--v-sem-tinta); }
.resumo-final.r-canc { background: var(--v-nl-tint); color: var(--v-nl-tinta); }

.diag { list-style: none; margin: 0; padding: 0; }
.diag li { display: grid; gap: 3px; padding: 10px 0; border-top: 1px solid var(--linha); font-size: var(--t-12); }
.diag li:first-child { border-top: 0; }
.diag a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.diag small { color: var(--tinta-3); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; font-size: 11px; }

/* ================================================================ toast / dica */
.toast { position: fixed; left: 50%; bottom: 24px; z-index: var(--z-toast); transform: translateX(-50%);
  max-width: min(560px, calc(100vw - 32px)); padding: 12px 16px; border-radius: 10px; background: var(--petroleo); color: #fff;
  font-size: var(--t-12); font-weight: 500; box-shadow: var(--sombra-alta); animation: subir .22s var(--ease-expo); }
.toast.erro { background: #7d2420; }
@keyframes subir { from { transform: translate(-50%, 10px); opacity: 0; } to { transform: translate(-50%, 0); opacity: 1; } }
.dica-flut { position: fixed; z-index: var(--z-dica); max-width: 280px; padding: 8px 10px; border-radius: 8px;
  background: var(--tinta); color: #fff; font-size: var(--t-11); line-height: 1.45; pointer-events: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18); }
.dica-flut b { font-weight: 700; }
.dica-flut .l { display: flex; align-items: center; gap: 8px; }
.dica-flut .l i { display: inline-block; width: 10px; height: 2px; border-radius: 2px; }

.rodape { max-width: var(--largura); margin: 0 auto; padding: 0 var(--e-6) var(--e-6); font-size: var(--t-11); color: var(--tinta-3); }

/* ================================================================ responsivo */
@media (max-width: 1180px) {
  .dash-topo { grid-template-columns: minmax(0, 1fr); }
  .leitura { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leitura .bloco + .bloco { border-top: 0; border-left: 1px solid var(--linha); }
  .rodar { grid-template-columns: minmax(0, 1fr); }
  /* uma coluna so: com rodada viva o monitor (e o campo do token) vem primeiro */
  .mon[data-estado="preparando"], .mon[data-estado="aguardando_token"], .mon[data-estado="rodando"] { order: -1; }
}
@media (max-width: 900px) {
  .dash-grade, #grade-b { grid-template-columns: minmax(0, 1fr); }
  .fila-it { grid-template-columns: minmax(0, 1fr) auto; }
  .fila-it .vd-col { grid-column: 1 / -1; }
  .lg:not([hidden]) { grid-template-columns: minmax(0, 1fr); }
  .lg-marca { display: none; }
  .lg-form { min-height: 100vh; align-items: flex-start; padding-top: 12vh; }
  .lg-form-lockup { display: inline-flex; margin-bottom: var(--e-6); }
  .lg-form-lockup .lockup-txt { color: var(--petroleo); }
  .lg-form-lockup .lockup-txt::after { background: var(--teal); }
}
@media (max-width: 720px) {
  :root { --mast-h: 52px; --abas-h: 42px; }
  .mast-in, .abas-in, .ctx-in, .app-main, .rodape, .faixa-token-in { padding-left: var(--e-4); padding-right: var(--e-4); }
  .mast-div, .mast-titulo span, .mast-eu-txt span { display: none; }
  .mast-titulo strong { font-size: var(--t-14); }
  .mast-eu-txt b { max-width: 110px; }
  .aba { padding: 0 var(--e-3); }
  .ctx { position: static; }
  .ctx-busca { order: 5; flex-basis: 100%; max-width: none; }
  .ctx-datas { order: 4; width: 100%; }
  .ctx-datas .campo { flex: 1; width: auto; }
  .ctx-acoes { margin-left: 0; }
  .ctx-atual { display: none; }
  .leitura { grid-template-columns: minmax(0, 1fr); }
  .leitura .bloco + .bloco { border-left: 0; border-top: 1px solid var(--linha); }
  .conc { padding: var(--e-4); }
  .conc-cab { flex-direction: column; }
  .conc-taxa { text-align: left; }
  .conc-grade { grid-template-columns: 58px minmax(0, 1fr) minmax(0, 1fr); gap: 4px; }
  .conc-eixo { padding: 4px 4px; }
  .conc-eixo .valor { font-size: var(--t-12); }
  .conc-canto { padding: 4px; font-size: 10.5px; }
  .cel { min-height: 118px; padding: 10px 10px 16px; }
  .cel-cab { font-size: 11.5px; align-items: flex-start; }
  .cel-n { font-size: var(--t-26); }
  .cel-trilha { left: 10px; right: 10px; bottom: 8px; }
  .ml-lin { grid-template-columns: minmax(0, 1fr) auto; }
  .ml-lin .seg-barra, .ml-lin .dv-barra { grid-column: 1 / -1; grid-row: 2; }
  .fila-it { padding: 12px var(--e-4); }
  .placar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .token-form { flex-direction: column; }
  .kv { grid-template-columns: 120px minmax(0, 1fr); }
  .cbcf .c-cat, .cbcf .c-cri, .cbcf .c-exp { display: none; }
  .cbcf .c-vig { display: table-cell; }
  .cbcf th { white-space: normal; }
  .ficha-cab, .ficha-corpo { padding-left: var(--e-4); padding-right: var(--e-4); }
  .ficha-pe { display: none; }
  .tab-wrap { max-height: none; }
  .vazio { padding: var(--e-6) var(--e-5); }

  /* abertura em coluna, sem os separadores soltos no fim da linha */
  .abertura-sub { flex-direction: column; align-items: flex-start; gap: 2px; }
  .abertura-sub .sep { display: none; }
  .abertura-sub .fila-robo { margin-top: 6px; }
  .cobertura { flex-basis: 100%; }

  /* seletor de ordem ocupa a linha inteira dentro do cartao */
  .painel-cab .seg { display: flex; width: 100%; }
  .painel-cab .seg button { flex: 1 1 0; padding: 0 4px; font-size: 11.5px; font-stretch: 90%; }

  /* matriz: o rotulo "Na venda" cabe numa linha */
  .conc-grade { grid-template-columns: 66px minmax(0, 1fr) minmax(0, 1fr); }
  .conc-eixo .fonte { white-space: nowrap; font-size: 10px; padding: 1px 5px; }

  .fila-pe { flex-direction: column; align-items: stretch; }
  .fila-pe > span:last-child { justify-content: stretch; }
  .fila-pe .btn { flex: 1; }
  .placar > div:last-child { grid-column: span 2; }

  /* tabela vira lista de blocos com rotulo: nada escondido do lado direito */
  .tab, .tab tbody, .tab tr, .tab td { display: block; width: 100%; }
  .tab thead { display: none; }
  .tab tbody tr { padding: 12px var(--e-4); border-bottom: 1px solid var(--linha); }
  .tab tbody tr:hover td, .tab tbody tr:focus-visible td, .tab tbody tr.aberta td { background: transparent; }
  .tab tbody tr:hover, .tab tbody tr.aberta { background: var(--sup-2); }
  .tab tbody tr:focus-visible { background: var(--teal-tint); box-shadow: inset 3px 0 0 var(--teal); }
  .tab tbody tr:focus-visible td:first-child { box-shadow: none; }
  .tab td { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 2px 10px; padding: 3px 0; border: 0;
    min-width: 0 !important; max-width: none !important; }
  .tab td::before { content: attr(data-rot); color: var(--tinta-3); font-size: 11px; font-weight: 600; padding-top: 1px; }
  .tab td > * { grid-column: 2; }
  .tab .c-data { width: 100%; }
  .tab .c-mod .corte { max-width: 100%; }
}
@media (max-width: 720px), (pointer: coarse) {
  .btn-p, .seg button, .mast .btn-sair, .chip-limpar, .ctx-busca .campo, .ctx-datas .campo { min-height: 40px; }
  .icone-btn { width: 40px; height: 40px; }
  .opc { min-height: 40px; }
  .ms-acoes button { min-height: 40px; padding: 0 6px; }
  .chip { min-height: 36px; }
  .chip button { position: relative; }
  .chip button::after { content: ""; position: absolute; inset: -8px -10px; }
}
@media (max-width: 520px) {
  .mast-eu-txt { display: none; }
  .mast-marca .lockup-txt { font-size: 18px; }
  .mast-marca { gap: var(--e-3); }
}
@media (max-width: 420px) {
  .placar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cel-pct { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .lg-video { display: none; }
  .token { box-shadow: 0 0 0 4px rgba(217, 162, 27, .2); }
}
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid CanvasText; }
  .seg-barra > span, .dv-trilho span, .cel-trilha > span, .prog > span, .medidor > span { forced-color-adjust: none; }
  .cel[aria-pressed="true"], .ml-lin[aria-pressed="true"] { outline: 2px solid Highlight; }
}