/* ============================================================================
   cil.css · Folha de estilo Customer in Love · versão 1.0 (11/11/2026)
   Uma só folha para todas as telas da empresa: Impulso, QC, Dashboard, Placar,
   páginas internas e artefatos. Base copiada do Impulso (disparos.customerinlove
   .com.br), que segue o brand book ed. novembro/2026 conferido no PDF.

   Uso:   <link rel="stylesheet" href="cil.css">  (com a pasta fontes/ ao lado)
          <html> escuro por padrão; claro só pelo botão #btTema
          (document.documentElement.setAttribute('data-theme','light')).
   Partes: 1 Fontes · 2 Tokens · 3 Cabeçalho · 4 Base · 5 Formulários e botões
           6 Cartões, avisos, números · 7 Abas e navegação · 8 Tabelas
           9 Gráficos · 10 Diálogo · 11 Tema · 12 Modo TV
   ========================================================================== */

/* ── 1. Fontes ──────────────────────────────────────────────────────────────
   Servidas pelo próprio site: não dependem do Google e não vazam o acesso de
   quem abre a tela. Anton é a letra dos títulos do site. */
@font-face{font-family:Anton;src:url(fontes/anton.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url(fontes/bebas.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Josefin Sans";src:url(fontes/josefin-700.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:Lexend;src:url(fontes/lexend-300.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:Lexend;src:url(fontes/lexend-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Lexend;src:url(fontes/lexend-600.woff2) format("woff2");font-weight:600;font-display:swap}

/* ── 2. Tokens ──────────────────────────────────────────────────────────────
   Brand book ed. novembro/2026 — valores conferidos no PDF.
   Paleta (pág. 16): rosa #F0245A, amarelo #FFC72C, preto #0B0B0C, papel #F4F1EC,
   branco #FFFFFF. Proporção 60 preto/papel, 20 branco, 15 rosa, 5 amarelo.
   Apoio (pág. 17): no claro o rosa de texto pequeno é #C8173F; neutros grafite
   #22221E, cartão escuro #17161A, apoio #6B6862/#A9A6AE, linhas #D9D4C8.
   As cores dos pilares do PEX não entram aqui: são marcador, não interface.

   Contrastes medidos (pág. 17):
     rosa no preto ............ 4,8:1    texto ok
     preto no rosa ............ 4,8:1    por isso o botão tem texto PRETO
     preto no amarelo ......... 12,1:1   ok
     #C8173F no papel ......... 5,1:1    rótulo e texto pequeno no claro
     rosa no papel ............ 3,7:1    só título grande
     amarelo no papel ......... 1,4:1    nunca como texto

   Tipografia (pág. 18): Anton/Bebas = título e número grande; Josefin Sans 700
   SEMPRE EM CAIXA ALTA = subtítulos, faixas, botões e chamadas; Lexend 300 =
   corpo; Lexend 400 caixa alta com espaço = rótulo. */
:root{
  --papel:#0B0B0C; --tinta:#FFFFFF; --suave:#A9A6AE;
  --linha:#22221E; --fraco:#17161A;
  --acento:#F0245A; --acento-texto:#F0245A; --acento-leve:#2B0E18;
  --sobre-acento:#0B0B0C;
  --alerta:#FF9A6B; --ok:#58C463; --aviso:#FFC72C;
  --cartao:#17161A; --borda-cartao:rgba(255,255,255,.10);
  --produto:"Josefin Sans",system-ui,sans-serif;
  --titulo:Anton,"Bebas Neue",Impact,sans-serif;
  --texto:Lexend,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* apoio para gráficos (Dashboard e Placar) */
  --grade:#26252A; --grafico-fraco:#5E5C64; --grafico-ref:#FFC72C;
  color-scheme:dark;
}
:root[data-theme="light"]{
  --papel:#F4F1EC; --tinta:#0B0B0C; --suave:#6B6862;
  --linha:#D9D4C8; --fraco:#FFFFFF;
  --acento:#F0245A; --acento-texto:#C8173F; --acento-leve:#FBE7EC;
  --sobre-acento:#0B0B0C;
  --alerta:#B4451A; --ok:#1F7A35; --aviso:#8A6D00;
  --cartao:#FFFFFF; --borda-cartao:#D9D4C8;
  --grade:#E8E4DA; --grafico-fraco:#BDB7AB; --grafico-ref:#C8173F;
  color-scheme:light;
}

/* ── 3. Cabeçalho: assinaturas visuais do brand book (pág. 20) ─────────────
   "Dois recursos fazem uma peça ser reconhecida como Customer in Love antes
   mesmo da logo: as ondas do alvo e a câmera oculta."
   Ondas: anéis concêntricos saindo do selo, rosa e branco translúcidos, centro
          na lateral, nunca atrás do título.
   Câmera: cantos de visor nos quatro cantos, traço branco a 55%, rótulo ● REC.
   O cabeçalho é sempre preto, nos dois temas. Uma palavra em rosa por título. */
.cabeca{position:relative;overflow:hidden;border-radius:16px;
   background:#0B0B0C;border:1px solid var(--borda-cartao);
   padding:24px 30px 22px;margin-bottom:14px}
.cabeca .ondas{position:absolute;right:-130px;top:50%;transform:translateY(-50%);
   width:520px;height:520px;pointer-events:none;
   background:
     radial-gradient(circle,rgba(240,36,90,.28) 0%,rgba(240,36,90,0) 62%),
     repeating-radial-gradient(circle,
       rgba(255,255,255,.13) 0 1px, rgba(255,255,255,0) 1px 34px),
     repeating-radial-gradient(circle,
       rgba(240,36,90,.34) 17px 18px, rgba(240,36,90,0) 18px 52px);
   -webkit-mask-image:radial-gradient(circle,#000 48%,rgba(0,0,0,.35) 68%,transparent 80%);
   mask-image:radial-gradient(circle,#000 48%,rgba(0,0,0,.35) 68%,transparent 80%)}
@media (max-width:700px){
  .cabeca{padding:34px 22px 28px}
  .cabeca .ondas{right:-250px;opacity:.5}
  .cabeca .marca{right:18px;top:22px;transform:none;width:48px;height:48px}
  h1{font-size:2.6rem}
}
.cabeca .marca{position:absolute;right:92px;top:50%;transform:translateY(-50%);
   width:76px;height:76px;border-radius:50%;pointer-events:none;
   box-shadow:0 0 0 1px rgba(255,255,255,.12),0 10px 34px rgba(240,36,90,.35)}
.cabeca .canto{position:absolute;width:26px;height:26px;pointer-events:none;
   border-color:rgba(255,255,255,.55);border-style:solid;border-width:0}
.cabeca .canto.te{top:13px;left:13px;border-top-width:1px;border-left-width:1px}
.cabeca .canto.td{top:13px;right:13px;border-top-width:1px;border-right-width:1px}
.cabeca .canto.be{bottom:13px;left:13px;border-bottom-width:1px;border-left-width:1px}
.cabeca .canto.bd{bottom:13px;right:13px;border-bottom-width:1px;border-right-width:1px}
.cabeca .rec{position:relative;display:flex;align-items:center;gap:8px;
   font-size:.7rem;font-weight:400;color:rgba(255,255,255,.72);
   text-transform:uppercase;letter-spacing:.22em;margin-bottom:14px}
.cabeca .rec s{width:7px;height:7px;border-radius:50%;background:var(--acento);
   display:inline-block;text-decoration:none}
@media (prefers-reduced-motion:no-preference){.cabeca .rec s{animation:cil-pisca 1.6s ease-in-out infinite}}
@keyframes cil-pisca{50%{opacity:.25}}
.cabeca h1,.cabeca .sub{position:relative;color:#FFFFFF}
.cabeca .sub{max-width:30em}

/* ── 4. Base ────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--papel);color:var(--tinta);
     font:16px/1.65 var(--texto);font-weight:300;-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility}
::selection{background:var(--acento);color:#0B0B0C}
:focus-visible{outline:2px solid var(--acento);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
/* 1540px: tabela precisa de largura. Mas largura é boa para tabela e ruim para
   texto: o texto corrido fica preso em ~68em; só tabelas e grades usam tudo. */
.envolto{max-width:1540px;margin:0 auto;
   padding:18px max(16px,env(safe-area-inset-right,0px)) 70px max(16px,env(safe-area-inset-left,0px))}
.cartao .sub, .cartao > p.info, .cartao > p, .aviso{max-width:68em}
h1{font-family:var(--titulo);font-size:2.9rem;font-weight:400;margin:0 0 4px;
   text-transform:uppercase;letter-spacing:.01em;line-height:.92}
h1 em{font-style:normal;color:var(--acento)}
.sub{color:var(--suave);margin:0 0 14px;font-size:.9rem}
a{color:var(--acento-texto);text-underline-offset:2px}
code{background:var(--acento-leve);padding:1px 5px;border-radius:4px;font-size:.85em}
.info{font-size:.8rem;color:var(--suave)}
.rodape{color:var(--suave);font-size:.78rem;margin-top:6px}
details summary{cursor:pointer;font-size:.88rem;color:var(--acento-texto);font-weight:500}
.oculto{display:none}

/* ── 5. Formulários e botões ───────────────────────────────────────────── */
label{display:block;font-size:.75rem;color:var(--suave);margin:8px 0 3px;
   font-weight:400;text-transform:uppercase;letter-spacing:.14em}
input,select,textarea{width:100%;padding:7px 10px;border:1px solid var(--linha);
     border-radius:9px;background:var(--papel);color:var(--tinta);font:inherit;font-size:.93rem;
     transition:border-color .15s,box-shadow .15s}
input:hover,select:hover,textarea:hover{border-color:var(--suave)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--acento);
     box-shadow:0 0 0 3px var(--acento-leve)}
::placeholder{color:var(--suave);opacity:.75}
textarea{min-height:120px;resize:vertical;font-family:ui-monospace,Menlo,monospace;font-size:.85rem}
.grade{display:grid;gap:10px}
.g2{grid-template-columns:1fr 1fr}
.g3{grid-template-columns:1fr 1fr 1fr}
.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:760px){.g4{grid-template-columns:1fr 1fr}}
@media (max-width:620px){.g2,.g3,.g4{grid-template-columns:1fr}}
button{font:inherit;padding:7px 15px;border-radius:9px;
       border:1px solid var(--acento);background:var(--acento);
       font-family:var(--produto);font-weight:700;text-transform:uppercase;
       letter-spacing:.08em;font-size:.82rem;line-height:1.2;
       color:var(--sobre-acento);cursor:pointer;
       transition:transform .12s,box-shadow .15s,background .15s,color .15s,border-color .15s}
button:hover:not(:disabled){box-shadow:0 6px 18px rgba(240,36,90,.28);transform:translateY(-1px)}
button:active:not(:disabled){transform:translateY(0);box-shadow:none}
button.sec{background:transparent;color:var(--acento-texto);border-color:var(--linha)}
button.sec:hover:not(:disabled){border-color:var(--acento);background:var(--acento-leve);
       box-shadow:none;transform:none}
button.mini{padding:5px 11px;font-size:.72rem;letter-spacing:.06em}
button:disabled{opacity:.45;cursor:not-allowed}
.acoes{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:16px}
.salvo{font-size:.82rem;color:var(--suave)}
.salvo.ruim{color:var(--alerta)}
/* Cartão de entrada (login) no padrão do QC: estreito e centrado na página */
.cartao.entrada{max-width:460px;margin:24px auto}

/* ── 6. Cartões, avisos e faixa de números ─────────────────────────────── */
.cartao{border:1px solid var(--borda-cartao);background:var(--cartao);
   border-radius:14px;padding:16px 18px;margin-bottom:11px;min-width:0}
.cartao h2{font-family:var(--produto);font-size:.95rem;font-weight:700;
   text-transform:uppercase;letter-spacing:.08em;margin:0 0 11px;
   padding-bottom:8px;border-bottom:1px solid var(--borda-cartao);
   display:flex;align-items:center;gap:10px}
.cartao h2::before{content:"";width:22px;height:2px;background:var(--acento);
   border-radius:2px;flex:none}
.duas{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,460px),1fr));gap:11px}
.aviso{border-left:2px solid var(--acento);background:var(--acento-leve);
       padding:12px 14px;border-radius:0 9px 9px 0;font-size:.87rem;margin:13px 0}
.aviso.ruim{border-left-color:var(--alerta);background:transparent;color:var(--alerta)}
/* Faixa de números: rótulo pequeno em cima, número grande embaixo, centrado na
   altura — senão o painel com rótulo de duas linhas desalinha. O primeiro é rosa. */
.topo{display:flex;flex-wrap:wrap;gap:0;
      border:1px solid var(--borda-cartao);background:var(--cartao);
      border-radius:14px;padding:0;margin-bottom:16px;overflow:hidden}
.topo>div{flex:1 1 150px;min-height:96px;padding:18px 20px;display:flex;
      flex-direction:column-reverse;gap:4px;justify-content:center;
      border-right:1px solid var(--borda-cartao)}
.topo>div:last-child{border-right:0}
.topo:empty{display:none}
.topo b{display:block;font-family:var(--titulo);font-size:2.4rem;font-weight:400;
   letter-spacing:.02em;line-height:.95;font-variant-numeric:tabular-nums}
.topo b i{font-style:normal;font-size:.46em;color:var(--suave);letter-spacing:.03em;margin-left:6px}
.topo>div:first-child b{color:var(--acento)}
.topo span{font-size:.68rem;color:var(--suave);letter-spacing:.2em;
   text-transform:uppercase;font-weight:400}
.topo .recado{flex:2 1 220px}
.topo .recado span{text-transform:none;letter-spacing:0;font-size:.82rem;
   color:var(--suave);line-height:1.45}
/* Variante com rótulo em cima e linha de apoio embaixo (Dashboard/Placar) */
.topo.kpis>div{flex-direction:column;flex-basis:190px;min-height:110px}
.topo small{font-size:.78rem;color:var(--suave);line-height:1.4}
.topo small strong{color:var(--tinta);font-weight:600}
.selo{font-size:.7rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
      padding:3px 8px;border-radius:99px;border:1px solid var(--linha);color:var(--suave);white-space:nowrap}
.selo.ativa{color:var(--acento-texto);border-color:var(--acento);background:var(--acento-leve)}
.barra{height:4px;background:var(--linha);border-radius:99px;overflow:hidden;margin:12px 0 8px}
.barra i{display:block;height:100%;background:var(--acento);width:0;transition:width .4s}
.barra i.cheio{background:var(--ok)}
.chip{display:inline-flex;align-items:center;gap:9px;padding:6px 12px;border-radius:99px;
      border:1px solid var(--linha);background:var(--fraco);font-size:.87rem}
.chip.ativo{border-color:var(--acento);background:var(--acento-leve)}
/* Estados: bom, médio, ruim (posição no Google, metas). Amarelo só em número. */
.bom{color:var(--ok)!important}.medio{color:var(--aviso)!important}.mau{color:var(--alerta)!important}
.vazio{padding:30px 6px;text-align:center;color:var(--suave);font-size:.9rem}
.vazio strong{display:block;font-family:var(--produto);text-transform:uppercase;
      letter-spacing:.06em;font-size:.88rem;color:var(--tinta);margin-bottom:6px}

/* ── 7. Abas e navegação ───────────────────────────────────────────────── */
.abas{display:inline-flex;gap:4px;flex-wrap:wrap;margin:0 0 12px;padding:4px;
     border:1px solid var(--borda-cartao);background:var(--cartao);border-radius:12px}
.aba{background:transparent;color:var(--suave);border:1px solid transparent;
     padding:8px 15px;font-size:.78rem;border-radius:9px;
     font-family:var(--produto);font-weight:600;text-transform:uppercase;letter-spacing:.09em}
.aba:hover:not(.ativa){color:var(--tinta);background:var(--fraco);box-shadow:none;transform:none}
.aba.ativa,.aba[aria-selected="true"],.aba[aria-pressed="true"]{color:var(--sobre-acento);background:var(--acento);border-color:var(--acento);
     font-weight:700;box-shadow:none;transform:none}
.aba .conta{font-weight:700;opacity:.75;margin-left:5px}
.barraTopo{display:flex;gap:10px;flex-wrap:wrap;align-items:center;justify-content:space-between;margin:0 0 12px}
.linhaFiltro{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.linhaFiltro input{flex:1;min-width:200px}
.duasColunas{display:grid;grid-template-columns:276px 1fr;gap:18px;align-items:start}
@media (max-width:760px){.duasColunas{grid-template-columns:1fr}}

/* ── 8. Tabelas (padrão do QC) ─────────────────────────────────────────── */
.rolagem{overflow-x:auto;border:1px solid var(--linha);border-radius:11px}
table{border-collapse:collapse;width:100%;font-size:.87rem;font-variant-numeric:tabular-nums}
th{font-size:.67rem;letter-spacing:.14em;text-transform:uppercase;color:var(--suave);
   font-weight:700;text-align:left;padding:8px 12px;background:var(--fraco);
   border-bottom:1px solid var(--linha);white-space:nowrap}
td{padding:10px 12px;border-bottom:1px solid var(--linha);vertical-align:top}
tr:last-child td{border-bottom:none}
td.n,th.n{text-align:right}
tr.clicavel{cursor:pointer}
tr.clicavel:hover td{background:var(--fraco)}
tr.sel td{background:var(--acento-leve);box-shadow:inset 0 -2px 0 var(--acento)}
tr.sel td:first-child{color:var(--acento-texto);font-weight:600}
.pilula{display:inline-block;min-width:3.4em;text-align:center;border-radius:99px;padding:2px 9px;
   font-family:var(--produto);font-size:.72rem;font-weight:700;letter-spacing:.04em;border:1px solid currentColor}

/* ── 9. Gráficos (SVG desenhado pelo script; as cores vêm daqui) ──────────
   Série principal rosa; comparação em --grafico-fraco; referência (estreia,
   meta) tracejada em --grafico-ref. Sempre com dica ao passar o mouse. */
.grafico{position:relative;min-height:230px}
.grafico svg{display:block;width:100%;height:auto;overflow:visible}
.grafico text{fill:var(--suave);font:300 11px var(--texto)}
.legenda{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.75rem;color:var(--suave);margin:0 0 6px}
.legenda i{display:inline-block;width:14px;height:8px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.dica{position:absolute;pointer-events:none;background:var(--cartao);border:1px solid var(--borda-cartao);
      box-shadow:0 10px 30px rgba(0,0,0,.35);border-radius:9px;padding:7px 10px;font-size:.78rem;
      white-space:nowrap;z-index:3;font-variant-numeric:tabular-nums}
.dica div{color:var(--suave)} .dica b{color:var(--tinta);font-weight:600}
.barras{display:grid;grid-template-columns:minmax(8rem,12rem) 1fr auto;gap:7px 12px;align-items:center;font-size:.87rem}
.barras .t{height:10px;background:var(--linha);border-radius:99px;overflow:hidden}
.barras .t i{display:block;height:100%;border-radius:99px;background:var(--acento)}
.barras .t i.fraco{background:var(--grafico-fraco)}
.barras .v{font-size:.78rem;color:var(--suave);font-variant-numeric:tabular-nums;text-align:right;min-width:5.5rem}

/* ── 10. Diálogo (prompt() do navegador não aceita várias linhas) ───────── */
.fundo{position:fixed;inset:0;background:rgba(11,11,12,.72);backdrop-filter:blur(3px);display:flex;
  align-items:flex-start;justify-content:center;padding:4vh 16px;z-index:9998;overflow:auto}
.caixa{background:var(--cartao);color:var(--tinta);border:1px solid var(--borda-cartao);
  border-radius:16px;padding:24px;width:min(760px,100%);box-shadow:0 24px 70px rgba(0,0,0,.45)}
.caixa h3{margin:0 0 4px}
.caixa textarea{min-height:170px}

/* ── 11. Botão de tema: fixo no canto, o rótulo diz o destino ──────────── */
#btTema{position:fixed;right:14px;bottom:14px;z-index:9997;background:var(--fraco);
  color:var(--suave);border:1px solid var(--linha);border-radius:99px;
  padding:6px 13px;font-size:.74rem;font-weight:500;letter-spacing:.04em;
  text-transform:uppercase;opacity:.75}
#btTema:hover{opacity:1;color:var(--acento-texto);border-color:var(--acento);filter:none;box-shadow:none;transform:none}

/* ── 12. Modo TV: uma tela por vez, sem rolagem, lida de longe ─────────────
   <body class="tv"> + <section class="tv-tela"> visíveis uma de cada vez
   (atributo hidden), trocadas por script a cada 20 s, com a barra .tv-progresso. */
body.tv{overflow:hidden}
body.tv .envolto{max-width:none;height:100vh;padding:2.4vh 2.4vw;display:flex;flex-direction:column;gap:2vh}
body.tv .so-mesa,body.tv #btTema{display:none!important}
.tv-topo{display:flex;align-items:center;justify-content:space-between;gap:2vw}
.tv-marca{font-family:var(--titulo);font-size:clamp(1.6rem,2.6vw,3.4rem);text-transform:uppercase;line-height:1;white-space:nowrap}
.tv-marca em{font-style:normal;color:var(--acento)}
.tv-titulo{font-family:var(--produto);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:clamp(1rem,1.7vw,2.2rem)}
.tv-titulo::before{content:"";display:inline-block;width:2.2vw;height:3px;background:var(--acento);border-radius:2px;vertical-align:middle;margin-right:.9vw}
.tv-relogio{font-family:var(--titulo);font-size:clamp(1.6rem,2.4vw,3.2rem);font-variant-numeric:tabular-nums}
.tv-progresso{height:4px;background:var(--linha);border-radius:99px;overflow:hidden}
.tv-progresso i{display:block;height:100%;width:0;background:var(--acento);border-radius:99px}
.tv-progresso i.anda{animation:cil-anda 20s linear forwards}
@keyframes cil-anda{from{width:0}to{width:100%}}
.tv-tela{flex:1;min-height:0;display:flex;flex-direction:column;gap:1.6vh}
.tv-n{font-family:var(--titulo);font-size:clamp(3.4rem,7.2vw,9.5rem);line-height:.9;font-variant-numeric:tabular-nums}
.tv-grafico{flex:1;min-height:0;position:relative}