/* Design system da Mecanizou, medido na plataforma de Conciliacao.
   Azul #0B4DD6 · fundo #F4F5F7 · Poppins nos titulos · card 14px · botao 9px. */
:root{
  --azul:#0B4DD6; --azul-esc:#0940AE; --azul-fraco:#E8F0FE;
  --ground:#F4F5F7; --sheet:#FFFFFF; --sheet-2:#F8F9FB;
  --ink:#1A2433; --ink-2:#4B5563; --ink-3:#6B7280;
  --rule:#ECEEF2; --rule-forte:#D7DBE3; --campo:#E8F0FE;
  --ok:#0D9B6C; --ok-bg:#E6F7EF;
  --no:#C22E1C; --no-bg:#FDECEA;
  --at:#B45309; --at-bg:#FFF4E6; --at-rule:#F3DCBE;
  --r:9px; --rc:14px;
  --sombra:0 1px 3px rgba(16,24,40,.06),0 1px 2px rgba(16,24,40,.04);
  --tit:"Poppins",ui-sans-serif,-apple-system,"Segoe UI",Roboto,sans-serif;
  --txt:ui-sans-serif,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{
    --azul:#4D8DFF; --azul-esc:#6BA1FF; --azul-fraco:#16233D;
    --ground:#0E1016; --sheet:#171A22; --sheet-2:#1C2029;
    --ink:#E9ECF2; --ink-2:#B4BAC6; --ink-3:#8B93A3;
    --rule:#262B36; --rule-forte:#333945; --campo:#1B2333;
    --ok:#4FC79A; --ok-bg:#0F2A20;
    --no:#F0917C; --no-bg:#2C1815;
    --at:#E0A653; --at-bg:#2A2212; --at-rule:#3D3320;
    --sombra:0 1px 3px rgba(0,0,0,.35),0 1px 2px rgba(0,0,0,.25);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{background:var(--ground);color:var(--ink);font-family:var(--txt);
  font-size:15px;line-height:1.55;margin:0;-webkit-font-smoothing:antialiased}
a{color:var(--azul)}

/* ------------------------------------------------------ barra topo + gaveta */
.barra{background:var(--azul);color:#fff;padding:0 28px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;min-height:57px}
.barra .marca{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:#fff}
.barra .marca b{font-family:var(--tit);font-weight:700;font-size:16px;letter-spacing:.16em;
  text-transform:uppercase}
.barra .marca span{font-family:var(--tit);font-size:12px;font-weight:500;color:rgba(255,255,255,.72)}

.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:9px;
  background:rgba(255,255,255,.14);border-radius:var(--r);padding:6px 12px 6px 7px}
.menu summary::-webkit-details-marker{display:none}
.menu summary:focus-visible{outline:2px solid #fff;outline-offset:2px}
.avatar{width:28px;height:28px;border-radius:99px;background:#fff;color:var(--azul);
  font-family:var(--tit);font-weight:600;font-size:13px;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto}
.euTxt b{font-family:var(--tit);font-weight:600;font-size:13.5px;display:block;line-height:1.25}
.euTxt span{font-size:11px;color:rgba(255,255,255,.75)}
.seta{font-size:11px;opacity:.8}
.gaveta{position:absolute;right:0;top:calc(100% + 8px);min-width:236px;background:var(--sheet);
  border:1px solid var(--rule);border-radius:var(--rc);box-shadow:0 12px 32px rgba(16,24,40,.16);
  padding:8px;z-index:30;display:grid;gap:1px}
.gaveta a,.gaveta button{display:flex;align-items:center;justify-content:space-between;gap:10px;
  font-family:var(--tit);font-size:14px;font-weight:500;color:var(--ink);text-decoration:none;
  padding:9px 11px;border-radius:var(--r);background:none;border:none;cursor:pointer;
  width:100%;text-align:left}
.gaveta a:hover,.gaveta button:hover{background:var(--azul-fraco);color:var(--azul)}
.gaveta a em{font-style:normal;font-size:11px;font-weight:700;background:var(--no-bg);
  color:var(--no);border-radius:999px;padding:1px 8px}
.gaveta form{margin-top:5px;padding-top:6px;border-top:1px solid var(--rule)}
.grupoNav{font-family:var(--tit);font-size:10.5px;font-weight:700;letter-spacing:.9px;
  text-transform:uppercase;color:var(--ink-3);padding:10px 11px 4px}

.abas{background:var(--sheet);border-bottom:1px solid var(--rule)}
.abasInt{max-width:1160px;margin:0 auto;padding:0 34px;display:flex;gap:2px;overflow-x:auto}
.abasInt a{font-family:var(--tit);font-weight:500;font-size:14px;padding:14px 14px 12px;
  color:var(--ink-3);text-decoration:none;white-space:nowrap;border-bottom:2px solid transparent}
.abasInt a:hover{color:var(--ink)}
.abasInt a[aria-current="page"]{color:var(--azul);border-bottom-color:var(--azul);font-weight:600}

.conteudo{max-width:1160px;margin:0 auto;padding:32px 34px 70px}
.faixa{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  flex-wrap:wrap;margin-bottom:24px}
.selo{font-family:var(--tit);font-size:12px;font-weight:600;color:var(--azul);
  background:var(--azul-fraco);border-radius:999px;padding:6px 13px;white-space:nowrap}

/* ------------------------------------------------------------ filtros/chips */
.filtros{display:flex;gap:10px;margin-bottom:14px}
.filtros input{max-width:420px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:26px}
.chip{font-family:var(--tit);font-size:13px;font-weight:500;padding:7px 13px;border-radius:999px;
  background:var(--sheet);border:1px solid var(--rule);color:var(--ink-2);text-decoration:none}
.chip:hover{border-color:var(--azul);color:var(--azul)}
.chip.on{background:var(--azul);border-color:var(--azul);color:#fff;font-weight:600}
.chip em{font-style:normal;font-weight:700;opacity:.7;margin-left:4px}
.chip.vazia{background:var(--sheet-2);border-style:dashed;color:var(--ink-3);cursor:default}
.bLabel small{display:block;font-size:12px;color:var(--ink-3);margin-top:1px}
.aviso.destaque{background:var(--ok-bg);border-color:var(--ok);color:var(--ink);margin:0 0 22px}
.linhaForm{display:flex;gap:8px;align-items:center}
.linhaForm select{min-width:150px}
select{font-family:var(--txt);font-size:14.5px;color:var(--ink);background:var(--campo);
  border:1px solid var(--rule);border-radius:var(--r);padding:10px 12px;width:100%}
select:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:transparent}
details>summary{list-style:none}
details>summary::-webkit-details-marker{display:none}
details>summary::after{content:" ▾";color:var(--azul);font-size:13px}
details[open]>summary::after{content:" ▴"}

/* ------------------------------------------------------------- documento */
.doc{line-height:1.7;font-size:15.5px;color:var(--ink-2)}
.doc h2{font-family:var(--tit);font-weight:600;font-size:22px;letter-spacing:-.5px;
  color:var(--ink);margin:28px 0 10px}
.doc h2:first-child{margin-top:0}
.doc h3{font-family:var(--tit);font-weight:600;font-size:17px;letter-spacing:-.3px;
  color:var(--ink);margin:24px 0 8px}
.doc h4{font-family:var(--tit);font-weight:600;font-size:15px;color:var(--ink);margin:18px 0 6px}
.doc p{margin:0 0 12px;max-width:74ch}
.doc ul{margin:0 0 14px;padding-left:22px}
.doc li{margin-bottom:6px}
.doc blockquote{margin:14px 0;padding:12px 16px;background:var(--azul-fraco);
  border-left:3px solid var(--azul);border-radius:var(--r);color:var(--ink)}
.doc pre{background:var(--sheet-2);border:1px solid var(--rule);border-radius:var(--r);
  padding:14px 16px;overflow-x:auto;font-family:ui-monospace,Menlo,monospace;font-size:13px;
  line-height:1.6;color:var(--ink);margin:0 0 14px;white-space:pre-wrap}
.doc code{background:var(--sheet-2);border-radius:5px;padding:1px 5px;font-size:13.5px;
  font-family:ui-monospace,Menlo,monospace}
.doc strong{color:var(--ink);font-weight:600}
.doc .scroll{margin:0 0 16px}
.doc table td:first-child{font-family:var(--txt);font-weight:400;color:var(--ink-2)}
/* O cabecalho da tabela do processo: existe desde que `em_html` parou de jogar
   a primeira linha no corpo junto com as outras. */
.doc table th{text-align:left;font-family:var(--tit);font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
  padding:9px 12px;border-bottom:1px solid var(--rule)}
.doc table td{padding:10px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.doc table tr:last-child td{border-bottom:0}

/* ------------------------------------------------------------------- tabela */

/* -------------------------------------------------------------------- cartao */
.cartao{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--rc);
  padding:24px;box-shadow:var(--sombra)}
.cartao.azul{background:var(--azul);border-color:var(--azul);color:#fff}
.cartao.azul .ct,.cartao.azul .cnum{color:#fff}
.cartao.azul .cp,.cartao.azul .cev{color:rgba(255,255,255,.78)}
.cartao.fraco{background:var(--sheet-2);border-style:dashed;border-color:var(--rule-forte)}
.chead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:9px}
.ct{font-family:var(--tit);font-weight:600;font-size:18px;letter-spacing:-.4px;margin:0;color:var(--ink)}
.cp{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
.cev{font-size:12.5px;color:var(--ink-3);margin:10px 0 0;line-height:1.5}

.badge{font-family:var(--tit);font-size:12px;font-weight:700;padding:3px 11px;border-radius:999px;
  white-space:nowrap;flex:0 0 auto;display:inline-block;line-height:1.5}
.badge.ok{background:var(--ok-bg);color:var(--ok)}
.badge.no{background:var(--no-bg);color:var(--no)}
.badge.at{background:var(--at-bg);color:var(--at);border:1px solid var(--at-rule)}
.badge.az{background:var(--azul-fraco);color:var(--azul)}
.cartao.azul .badge{background:rgba(255,255,255,.18);color:#fff;border:none}

/* --------------------------------------------------------------- placar topo */
.placar{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px;margin-bottom:30px}
/* Cartao sozinho nao estica pela largura toda: um numero de 34px em cima de
   1100px de fundo azul le como banner, nao como placar. */
.placar.solo{grid-template-columns:minmax(190px,300px)}
.cnum{font-family:var(--tit);font-weight:600;font-size:34px;line-height:1.05;letter-spacing:-1px;
  font-variant-numeric:tabular-nums;display:block;color:var(--ink)}
.clab{font-size:13px;color:var(--ink-3);display:block;margin-top:4px}
.cartao.azul .clab{color:rgba(255,255,255,.8)}
.wow{font-family:var(--tit);font-size:14px;font-weight:600;margin-left:8px;vertical-align:super;font-style:normal}
.wow.up{color:var(--ok)} .wow.down{color:var(--no)} .wow.flat{color:var(--ink-3)}
.cartao.azul .wow.up{color:#9BF0CE} .cartao.azul .wow.down{color:#FFC2B4} .cartao.azul .wow.flat{color:rgba(255,255,255,.7)}

/* --------------------------------------------------------------------- lista */
.lista{display:grid;gap:18px}
.lista.duas{grid-template-columns:repeat(auto-fit,minmax(390px,1fr))}
.lista.tres{grid-template-columns:repeat(auto-fit,minmax(290px,1fr))}
a.cartao.caso{text-decoration:none;display:block;transition:border-color .12s,transform .12s}
a.cartao.caso:hover{border-color:var(--azul);transform:translateY(-1px)}
a.cartao.caso:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.comcheck{display:flex;gap:15px;align-items:flex-start}
.caixa{width:24px;height:24px;border-radius:7px;border:1.5px solid var(--rule-forte);background:var(--sheet);
  color:#fff;font-size:14px;line-height:1;cursor:pointer;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;margin-top:2px;padding:0}
.caixa.on{background:var(--azul);border-color:var(--azul)}
.caixa:hover{border-color:var(--azul)}
.caixa:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.feito .ct{text-decoration:line-through;text-decoration-thickness:1px;color:var(--ink-3)}
.feito .cp{color:var(--ink-3)}

/* --------------------------------------------------------------------- forma */
.campoBox{margin-top:16px}
/* `input` sem atributo `type` NAO casa com `[type=text]` -- metade dos campos
   ficava sem estilo nenhum, com a borda cinza do navegador. Lista por exclusao. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
textarea{
  width:100%;font-family:var(--txt);font-size:14.5px;line-height:1.55;color:var(--ink);
  background:var(--campo);border:1px solid var(--rule);border-radius:var(--r);padding:11px 13px}
textarea{min-height:92px;resize:vertical}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
input:focus,textarea:focus{outline:2px solid var(--azul);outline-offset:1px;border-color:transparent}
label{display:block;font-size:12px;color:var(--ink-3);margin:13px 0 5px}
.acoes{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:13px}
.btn{font-family:var(--tit);font-weight:600;font-size:14px;padding:10px 16px;border:none;
  background:var(--azul);color:#fff;border-radius:var(--r);cursor:pointer;
  display:inline-block;text-decoration:none;text-align:center}
.btn:hover{background:var(--azul-esc)}
.btn:focus-visible{outline:2px solid var(--azul);outline-offset:2px}
.btn.fantasma{background:transparent;color:var(--azul);border:1px solid var(--azul)}
.btn.fantasma:hover{background:var(--azul-fraco)}
.btn.larga{width:100%}
.dica{font-size:12.5px;color:var(--ink-3)}

/* -------------------------------------------------------------------- treino */
.conversa{margin:14px 0 0;padding:14px 16px;background:var(--sheet-2);border-radius:var(--r)}
.fala{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:4px 0;align-items:baseline}
.quem{font-family:var(--tit);font-size:10.5px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink-3)}
.fala.cliente .quem{color:var(--azul)}
.fala .txt{font-size:14.5px;line-height:1.5;color:var(--ink)}
.fala.time .txt{color:var(--ink-2)}
.corte{margin-top:10px;padding-top:10px;border-top:1px dashed var(--rule-forte);
  font-family:var(--tit);font-size:10.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--at)}
.minha{margin:16px 0 0;padding:12px 14px;background:var(--campo);border-radius:var(--r);
  font-size:14.5px;line-height:1.55;color:var(--ink)}
.grupo{font-family:var(--tit);font-size:11.5px;font-weight:700;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink-3);display:block;margin:18px 0 8px}
.verif{margin:5px 0;font-size:14.5px;line-height:1.5;display:grid;grid-template-columns:20px 1fr;gap:8px}
.verif b{font-family:var(--tit)}
.verif small{display:block;color:var(--ink-3);font-size:12.5px;margin-top:1px}
.verif.sim,.verif.sim b{color:var(--ok)}
.verif.nao,.verif.nao b{color:var(--no)}
.verif span{color:var(--ink)}
.bloco{margin-top:16px;padding:15px 17px;border-radius:var(--r)}
.bloco.modelo{background:var(--azul-fraco)}
.bloco.modelo .grupo{color:var(--azul);margin-top:0}
.bloco.vendeu{background:var(--ok-bg)}
.bloco.vendeu .grupo{color:var(--ok);margin-top:0}
.bloco.perdeu{background:var(--no-bg)}
.bloco.perdeu .grupo{color:var(--no);margin-top:0}
.bloco q{display:block;font-size:15.5px;line-height:1.55;margin-bottom:9px;color:var(--ink)}
.vered{display:flex;gap:8px;flex-wrap:wrap;margin:11px 0 0}
.vered b{font-family:var(--tit);font-size:11.5px;font-weight:700;padding:3px 11px;
  border-radius:999px;background:var(--sheet)}
.vered b.ok{color:var(--ok)} .vered b.no{color:var(--no)}

/* ------------------------------------------------- barras e listas do admin */
.barras{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:11px}
.barras li{display:grid;grid-template-columns:1fr 96px 46px;gap:12px;align-items:center}
.bLabel{font-size:14px;color:var(--ink-2);line-height:1.35}
.bTrilho{height:8px;border-radius:999px;background:var(--rule);overflow:hidden}
.bTrilho i{display:block;height:100%;border-radius:999px}
.bTrilho i.ruim{background:var(--no)}
.bTrilho i.atencao{background:var(--at)}
.bTrilho i.azul{background:var(--azul)}
.bNum{font-family:var(--tit);font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;
  color:var(--ink-3);text-align:right}
.pontos{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px}
.pontos li{font-size:14.5px;line-height:1.5;color:var(--ink-2);
  display:grid;grid-template-columns:20px 1fr;gap:8px;align-items:baseline}
.pontos li b{font-family:var(--tit);color:var(--no)}
.pontos li b.num{color:var(--ink);font-size:16px}
.badge.mini{font-size:10.5px;padding:2px 8px;margin-left:6px}
.btn.mini{padding:6px 12px;font-size:12.5px;white-space:nowrap}

/* ------------------------------------------------------------------- tabela */
.scroll{overflow-x:auto;border:1px solid var(--rule);border-radius:var(--rc);
  background:var(--sheet);box-shadow:var(--sombra)}
table{border-collapse:collapse;width:100%;min-width:680px}
th,td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:middle}
th{font-family:var(--tit);font-size:11.5px;font-weight:600;letter-spacing:.5px;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;background:var(--sheet-2)}
td{font-size:14.5px;color:var(--ink-2)}
td:first-child{font-family:var(--tit);font-weight:500;color:var(--ink)}
tr:last-child td{border-bottom:none}
.num{font-family:var(--tit);font-weight:600;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--ink)}
.spark{display:inline-flex;align-items:flex-end;gap:3px;height:24px}
.spark i{width:8px;background:var(--azul);opacity:.3;border-radius:2px}
.spark i:last-child{opacity:1}

.vazio{padding:38px 22px;text-align:center;color:var(--ink-3);font-size:14.5px;
  border:1px dashed var(--rule-forte);border-radius:var(--rc);background:var(--sheet-2)}
.nota-rodape{margin-top:40px;padding-top:24px;border-top:1px solid var(--rule);
  font-size:13.5px;line-height:1.65;color:var(--ink-3)}
.nota-rodape h3{font-family:var(--tit);font-size:13px;font-weight:600;letter-spacing:.5px;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 10px}
.nota-rodape p{max-width:72ch;margin:0 0 10px}
.nota-rodape strong{color:var(--ink-2);font-weight:600}

/* -------------------------------------------------------------------- login */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.login .cartao{width:100%;max-width:392px;padding:30px}
.cabeca{text-align:center;margin-bottom:24px}
.marca-login{font-family:var(--tit);font-weight:700;font-size:20px;letter-spacing:.16em;color:var(--azul)}
.sub-login{font-family:var(--tit);font-size:12px;font-weight:500;color:var(--ink-3);margin-top:2px}
.login h1{font-family:var(--tit);font-weight:600;font-size:19px;letter-spacing:-.4px;margin:0 0 6px}
.ajuda{color:var(--ink-3);font-size:14px;margin:0 0 4px}
.erro{background:var(--no-bg);color:var(--no);border-radius:var(--r);padding:11px 13px;
  font-size:13.5px;margin-top:16px}

@media (max-width:900px){
  .barra{padding:10px 16px}
  .abasInt{padding:0 16px}
  .conteudo{padding:24px 16px 56px}
  .euTxt{display:none}
  .sub2{display:block;font-family:var(--txt);font-weight:400;font-size:12px;color:var(--ink-3);margin-top:2px}
.titulo{font-size:26px;letter-spacing:-.6px}
  .barras li{grid-template-columns:1fr 64px 42px}
  .lista.duas{grid-template-columns:1fr}
  .fala{grid-template-columns:1fr;gap:1px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ==================================================== analytics estilo painel */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1px;
  background:var(--rule);border:1px solid var(--rule);border-radius:var(--rc);
  overflow:hidden;margin-bottom:22px}
.kpi{background:var(--sheet);padding:15px 17px 16px;display:flex;flex-direction:column;gap:3px}
.kpi.forte{background:var(--azul)}
.kpi.forte .kl{color:rgba(255,255,255,.8)} .kpi.forte .kv{color:#fff}
.kpi.forte .kd{color:rgba(255,255,255,.9)}
.kl{font-size:11.5px;color:var(--ink-3);line-height:1.3}
.kv{font-family:var(--tit);font-weight:600;font-size:27px;line-height:1.12;letter-spacing:-.7px;
  font-variant-numeric:tabular-nums;color:var(--ink)}
.kv.alerta{color:var(--no)}
.kd{font-family:var(--tit);font-size:11.5px;font-weight:600;color:var(--ink-3)}
.kd.up{color:var(--ok)} .kd.down{color:var(--no)}

.grade2{display:grid;grid-template-columns:repeat(auto-fit,minmax(430px,1fr));gap:18px}
.q{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--rc);
  box-shadow:var(--sombra);padding:18px 20px 16px}
.q>header{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.q>header h2{font-family:var(--tit);font-weight:600;font-size:15px;letter-spacing:-.2px;
  margin:0;color:var(--ink)}
.qn{font-family:var(--tit);font-weight:600;font-size:20px;letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;color:var(--ink);white-space:nowrap}
.qn.alerta{color:var(--no)} .qn.ok{color:var(--ok)}
.qc{font-size:13px;line-height:1.6;color:var(--ink-3);margin:14px 0 0;
  padding-top:12px;border-top:1px solid var(--rule-soft)}
.qc b{color:var(--ink-2);font-weight:600}

svg.g{width:100%;height:auto;display:block}
svg.g .grade{stroke:var(--rule);stroke-width:1}
svg.g .ry,svg.g .rx{font-family:var(--txt);font-size:10px;fill:var(--ink-3)}
svg.g .ref{stroke:var(--ink-3);stroke-width:1;stroke-dasharray:4 3}
svg.g .rref{font-family:var(--txt);font-size:9.5px;fill:var(--ink-3)}
svg.g .b{fill:var(--azul);opacity:.55}
svg.g .b.ult{opacity:1}
svg.g .b.ruim{fill:var(--no)} svg.g .b.ok{fill:var(--ok)} svg.g .b.at{fill:var(--at)}
svg.g .ln{fill:none;stroke:var(--azul);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
svg.g .ln.ok{stroke:var(--ok)}
svg.g .area{fill:var(--azul);opacity:.10}
svg.g .area.ok{fill:var(--ok)}
svg.g .pt{fill:var(--sheet);stroke:var(--azul);stroke-width:2}
svg.g .pt.ok{stroke:var(--ok)}
svg.g .pt.ult{fill:var(--azul)} svg.g .pt.ok.ult{fill:var(--ok)}

.funil{display:grid;gap:10px}
.fe{display:grid;grid-template-columns:200px 1fr 74px 52px;gap:12px;align-items:center}
.fl{font-size:14px;color:var(--ink-2)}
.fb{height:22px;border-radius:5px;background:var(--rule-soft);overflow:hidden}
.fb i{display:block;height:100%;border-radius:5px}
.fb i.azul{background:var(--azul)} .fb i.ruim{background:var(--no)}
.fn{font-family:var(--tit);font-weight:600;font-variant-numeric:tabular-nums;
  font-size:14.5px;text-align:right;color:var(--ink)}
.fp{font-family:var(--tit);font-size:12.5px;font-weight:600;color:var(--ink-3);text-align:right}
.fo{grid-column:1/-1;font-size:11.5px;color:var(--ink-3);margin:-5px 0 4px}

table.densa th,table.densa td{padding:9px 13px;font-size:13.5px}
table.densa td.num{font-size:13.5px}
td.vermelho{color:var(--no)} td.verde{color:var(--ok)}

@media (max-width:860px){
  .grade2{grid-template-columns:1fr}
  .fe{grid-template-columns:1fr 60px 48px}
  .fl{grid-column:1/-1;margin-bottom:-6px}
}

/* ==================================================== Mecani Treino (diario)
   Tudo aqui sai dos tokens do topo. Cor fixa quebra o modo escuro em silencio:
   a folha ja redefine a paleta inteira em prefers-color-scheme, entao um
   `#fff` cravado vira texto branco sobre branco para quem usa tema escuro. */

/* ------------------------------------------------------------------ painel */
.painel{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--rc);
  padding:20px 22px;margin-top:16px;box-shadow:var(--sombra)}
.painel.vazio{text-align:center;padding:52px 26px}
.painel.vazio h2{font-family:var(--tit);font-size:17px;margin:0 0 8px}
.painel.vazio p{color:var(--ink-2);max-width:52ch;margin:0 auto 6px}

.cabPainel{display:flex;align-items:center;justify-content:space-between;gap:12px;
  text-align:left;margin:0 0 14px}
.cabPainel h2{font-family:var(--tit);font-size:15.5px;font-weight:600;margin:0;
  letter-spacing:-.2px;color:var(--ink)}
.cabPainel .badge{flex:0 0 auto}

.badge{font-family:var(--tit);font-size:11px;font-weight:600;letter-spacing:.02em;
  padding:3px 10px;border-radius:999px;background:var(--sheet-2);color:var(--ink-3);
  border:1px solid var(--rule)}
.badge.ok{background:var(--ok-bg);color:var(--ok);border-color:transparent}
.badge.aten{background:var(--no-bg);color:var(--no);border-color:transparent}
.badge.av{background:var(--at-bg);color:var(--at);border-color:var(--at-rule)}

/* ---------------------------------------------------------------- placar */
.cnum small{font-size:.5em;font-weight:600;color:var(--ink-3);margin-left:1px}
.cartao.azul .cnum small{color:rgba(255,255,255,.62)}
.clab small{display:block;color:var(--ink-3);font-size:11.5px;margin-top:3px}
.cartao.azul .clab small{color:rgba(255,255,255,.72)}
.clab small.ruim{color:var(--no);font-weight:600}
.cartao.azul .clab small.ruim{color:#FFD9D2}

.pil{font-style:normal;background:var(--azul);color:#fff;border-radius:999px;
  padding:1px 7px;font-size:11px;font-weight:600;margin-left:6px;vertical-align:1px}
[aria-current="page"] .pil{background:var(--azul)}

/* ---------------------------------------------------------------- tabela */
.tabela{width:100%;border-collapse:collapse;font-size:14px}
.tabela th{text-align:left;font-family:var(--tit);font-size:10.5px;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-3);font-weight:600;padding:9px 12px;
  border-bottom:1px solid var(--rule)}
.tabela td{padding:11px 12px;border-bottom:1px solid var(--rule);vertical-align:middle;
  font-variant-numeric:tabular-nums}
.tabela tr:last-child td{border-bottom:0}
.tabela tbody tr:hover{background:var(--sheet-2)}
.tabela td.dica{color:var(--ink-3);font-size:13px}
.rolaX{overflow-x:auto;margin:0 -6px;padding:0 6px}

/* ------------------------------------------------------------ treino */
.trilha{display:flex;align-items:center;gap:10px;margin:18px 0 2px}
.trilha .barraProg{flex:1;height:6px;border-radius:999px;background:var(--rule);overflow:hidden}
.trilha .barraProg i{display:block;height:100%;background:var(--azul);border-radius:999px}
.trilha b{font-family:var(--tit);font-size:12.5px;color:var(--ink-2);white-space:nowrap}

.cenario{background:var(--sheet-2);border:1px solid var(--rule);border-radius:var(--rc);
  padding:16px 18px;line-height:1.62;margin:2px 0 12px;color:var(--ink)}
.objetivo{color:var(--ink-2);font-size:13.5px;margin:0 0 14px}
.objetivo b{color:var(--ink);font-weight:600}

.minhaResposta{border-left:3px solid var(--azul);background:var(--azul-fraco);
  border-radius:0 var(--r) var(--r) 0;padding:10px 14px;margin:4px 0 16px}
.minhaResposta p{margin:4px 0 0;line-height:1.6;white-space:pre-wrap;color:var(--ink)}

.notaDesafio{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.notaDesafio b{font-family:var(--tit);font-size:30px;font-weight:700;letter-spacing:-1px;
  color:var(--ink);font-variant-numeric:tabular-nums}
.notaDesafio span{color:var(--ink-2);font-size:13.5px}

.criterios{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:8px 20px;
  margin:0 0 4px;padding:0;list-style:none}
.criterios li{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:1.5;
  color:var(--ink-2)}
.criterios li::before{font-family:var(--tit);font-weight:700;font-size:12px;line-height:1.7;
  flex:0 0 auto}
.criterios li.sim{color:var(--ink)}
.criterios li.sim::before{content:"✓";color:var(--ok)}
.criterios li.nao::before{content:"○";color:var(--ink-3)}

.lista{margin:6px 0 0;padding-left:18px;line-height:1.7;color:var(--ink-2)}

/* --------------------------------------------------------------- cartoes */
.gradeCards{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:14px;margin-top:14px}
.grade2{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:16px;
  align-items:start}
.cartaoCaso{display:flex;flex-direction:column;gap:7px;background:var(--sheet);
  border:1px solid var(--rule);border-radius:var(--rc);padding:16px 18px;
  text-decoration:none;color:inherit;box-shadow:var(--sombra)}
a.cartaoCaso{transition:border-color .12s,transform .12s}
a.cartaoCaso:hover{border-color:var(--azul);transform:translateY(-1px)}
.cartaoCaso .badge{align-self:flex-start}
.cartaoCaso b{font-family:var(--tit);font-size:14.5px;font-weight:600;line-height:1.35}
.cartaoCaso p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.55}
.cartaoCaso .gap{color:var(--no);font-weight:500}
.cartaoCaso .meta{color:var(--ink-3);font-size:12px;margin-top:auto;padding-top:4px}

.gapGrande{font-family:var(--tit);font-size:19px;font-weight:600;line-height:1.35;
  margin:2px 0 8px;color:var(--ink);letter-spacing:-.3px}
.gapGrande.ok{color:var(--ok)}

.cartaoRevisar{border:1px solid var(--rule);border-radius:var(--rc);padding:15px 17px;
  margin-bottom:10px;background:var(--sheet-2)}
.cartaoRevisar b{font-family:var(--tit);font-size:14.5px;display:block;margin-bottom:3px}
.cartaoRevisar p{margin:0;color:var(--ink-2);font-size:13.5px}

/* ------------------------------------------------------------------ coach */
.coachCol{display:flex;flex-direction:column;gap:0;min-height:calc(100vh - 260px)}
.chat{flex:1;display:flex;flex-direction:column;gap:16px;padding:22px;overflow-y:auto}
.coachCol .chat{margin-bottom:0}
.fala{display:flex;flex-direction:column;max-width:min(680px,80%)}
.fala.minha{align-self:flex-end;align-items:flex-end}
.fala.coach{align-self:flex-start}
.balao{padding:12px 16px;border-radius:var(--rc);line-height:1.6;font-size:14.5px}
.fala.minha .balao{background:var(--azul);color:#fff;border-bottom-right-radius:4px}
.fala.coach .balao{background:var(--sheet-2);border:1px solid var(--rule);color:var(--ink);
  border-bottom-left-radius:4px}
.fonte{font-size:11px;color:var(--ink-3);margin:5px 3px 0}

.vazioChat{margin:auto;text-align:center;max-width:46ch;color:var(--ink-2)}
.vazioChat h3{font-family:var(--tit);font-size:16px;margin:0 0 6px;color:var(--ink)}

/* Solido de proposito: com gradiente a ultima mensagem aparecia por baixo da
   barra e ficava ilegivel. O composer e chao, nao vidro. */
.composer{position:sticky;bottom:0;z-index:5;display:flex;gap:10px;
  padding:14px 0 18px;background:var(--ground);
  box-shadow:0 -10px 14px -10px rgba(16,24,40,.10)}
.composer input{flex:1;padding:13px 15px;font-size:14.5px}
.composer input::placeholder{color:var(--ink-3)}
.composer input:focus{outline:2px solid var(--azul);outline-offset:-1px;border-color:transparent}

/* Enquanto o modelo pensa: o botao fica claramente fora de uso e a caixa
   guarda o que foi escrito -- reenviar a mesma pergunta nao ajuda ninguem. */
.composer button[disabled]{opacity:.55;cursor:progress}
.composer.pensando input{color:var(--ink-3);background:var(--sheet)}
.chipsAcao{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.chipBtn{font-family:var(--tit);font-size:13px;font-weight:500;color:var(--azul);
  background:var(--azul-fraco);border:1px solid transparent;border-radius:999px;
  padding:8px 14px;cursor:pointer;text-decoration:none}
.chipBtn:hover{border-color:var(--azul)}

.aviso{background:var(--at-bg);border:1px solid var(--at-rule);color:var(--ink);
  border-radius:var(--rc);padding:12px 15px;font-size:14px;margin:16px 0 0;line-height:1.55}
.aviso code{background:var(--sheet);padding:1px 5px;border-radius:4px;font-size:12.5px}
.aviso.roleplay{background:var(--azul-fraco);border-color:transparent}

/* ------------------------------------------------------------- formularios */
.acoes{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.acoes input,.acoes select{width:auto;padding:9px 11px;font-size:13.5px}
.acoes input{flex:1;min-width:190px}
.btn.secundario{background:var(--sheet);color:var(--azul);border:1px solid var(--azul)}
.btn.secundario:hover{background:var(--azul-fraco)}
.btn.pequeno{padding:8px 14px;font-size:13px}
/* `.campo` e um <label> que embrulha rotulo + controle. Sem `display:block`
   o <span> do rotulo fica ao lado do input, encolhendo o campo. */
.campo{display:block;margin-bottom:14px}
/* Sem text-transform: o rotulo carrega nome proprio ("Mecanizou", "Twilio") e
   forcar minuscula quebra a grafia deles. */
.campo > span{display:block;font-family:var(--tit);font-size:12px;font-weight:600;
  letter-spacing:.02em;color:var(--ink-2);margin:0 0 6px}
.campo > span em{font-style:normal;font-weight:400;color:var(--ink-3)}
.campo.largo{grid-column:1/-1}
.campo textarea{min-height:120px}
.formGrade{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:0 18px;align-items:start}

.filtros{display:flex;gap:10px;margin:16px 0 4px;flex-wrap:wrap}
.filtros input{flex:0 1 320px;width:auto}
.chip.on{background:var(--azul);color:#fff;border-color:transparent}
.chip.on b{color:rgba(255,255,255,.8)}

@media (max-width:640px){
  .conteudo{padding-left:16px;padding-right:16px}
  .painel{padding:16px}
  .fala{max-width:92%}
  .faixa{flex-direction:column;align-items:flex-start;gap:8px}
}
/* A barra sem classe de cor ficava invisivel: `.bTrilho i` nao define fundo. */
.bTrilho i{background:var(--azul)}
/* Cartoes do placar alinhados pela base: rotulo de duas linhas num deles
   empurrava o numero dos vizinhos e a fileira ficava torta. */
.placar .cartao{display:flex;flex-direction:column;justify-content:space-between}
.placar .clab{margin-top:auto}

/* ---------------------------------------------- conversa com locutor */
.dialogo{display:grid;gap:2px;background:var(--sheet-2);border:1px solid var(--rule);
  border-radius:var(--rc);padding:14px 16px;margin:2px 0 12px;max-height:420px;overflow-y:auto}
.dialogo>div{display:grid;grid-template-columns:78px 1fr 46px;gap:12px;align-items:baseline;
  padding:5px 0;border-bottom:1px solid transparent}
.dialogo .quem{font-family:var(--tit);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);padding-top:2px}
.dialogo .dito{font-size:14.5px;line-height:1.55;color:var(--ink)}
.dialogo .tmp{font-size:11px;color:var(--ink-3);text-align:right;font-variant-numeric:tabular-nums}
.fala-operadora .quem{color:var(--azul)}
.fala-oficina .quem{color:var(--at)}
.fala-oficina .dito{color:var(--ink-2)}
.fala-airton .quem{color:#7C4DBE}
.fala-sistema{opacity:.6}
.fala-sistema .quem,.fala-\?{color:var(--ink-3)}
.fala-\?{opacity:.7}
.dialogo>div{grid-template-columns:96px 1fr auto}
.dialogo .corte{grid-template-columns:1fr;font-family:var(--tit);font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--at);border-top:1px dashed var(--rule-forte);
  margin-top:8px;padding-top:9px}

/* ------------------------------------------------------ drill do treino */
.barraCasos{display:flex;gap:6px;margin:18px 0 4px}
.barraCasos i{flex:1;height:5px;background:var(--rule);border-radius:3px}
.barraCasos i.ok{background:var(--ok)}
.barraCasos i.cur{background:var(--azul)}

.drill{background:var(--sheet);border:1px solid var(--rule);border-radius:var(--rc);
  margin-top:16px;overflow:hidden;box-shadow:var(--sombra)}
.drill.done{box-shadow:none}
.dhead{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:baseline;padding:14px 20px;
  border-bottom:1px solid var(--rule);background:var(--sheet-2)}
.dnum{font-family:var(--tit);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3)}
.dtit{font-family:var(--tit);font-weight:600;font-size:16px;flex:1 1 auto;letter-spacing:-.2px}
.dmeta{font-family:var(--tit);font-size:11px;font-weight:500;letter-spacing:.05em;
  text-transform:lowercase;color:var(--azul);background:var(--azul-fraco);
  border-radius:999px;padding:3px 11px}
.drill .dialogo{border:0;border-radius:0;background:transparent;margin:0;padding:14px 20px 4px}
.drill .cenario{margin:16px 20px}
.drill .campo{padding:6px 20px 20px;margin:0}
.drill .minhaResposta{margin:14px 20px 4px}

.checks{padding:14px 20px 4px;border-top:1px solid var(--rule)}
.ctit{font-family:var(--tit);font-size:10.5px;font-weight:700;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.check{display:grid;grid-template-columns:22px 1fr;gap:10px;padding:7px 0;align-items:start;
  border-bottom:1px solid var(--rule)}
.check:last-child{border-bottom:0}
.check .mark{font-family:var(--tit);font-weight:700;font-size:15px;line-height:1.35}
.check.sim .mark{color:var(--ok)} .check.nao .mark{color:var(--no)}
.cnome{font-size:14.5px;line-height:1.45;color:var(--ink)}
.cnome small{display:block;color:var(--ink-3);font-size:13px;line-height:1.45;margin-top:2px}

.real{margin:16px 20px 0;border-left:4px solid var(--ok);background:var(--ok-bg);
  border-radius:0 var(--r) var(--r) 0;padding:14px 16px}
.real.ruim{border-left-color:var(--no);background:var(--no-bg)}
.real .rtit{font-family:var(--tit);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ok);margin:0 0 8px}
.real.ruim .rtit{color:var(--no)}
.real q{font-size:15.5px;line-height:1.5;display:block;margin-bottom:9px;color:var(--ink)}
.real p{margin:0;font-size:14px;line-height:1.5;color:var(--ink-2)}
.fecha{padding:14px 20px 18px}
.fecha p{margin:0;color:var(--ink-2);line-height:1.6}

/* --------------------------------------------- diálogo: leitura e ênfase */
.dialogo .dito{white-space:pre-line}      /* mensagens vêm com quebra de linha */
.dialogo>div{padding:6px 0;border-radius:6px}
/* a descricao da midia fica discreta, mas o locutor continua o de sempre */
.dialogo .dito{white-space:pre-line}
.dialogo .fala-sistema .dito{color:var(--ink-3)}

/* a última fala da oficina é a pergunta que a pessoa vai responder */
.dialogo .alvo{background:var(--at-bg);box-shadow:inset 3px 0 0 var(--at);
  padding-left:11px;margin-left:-11px;padding-right:10px}
.dialogo .alvo .dito{color:var(--ink);font-weight:500}

.suavez{grid-template-columns:1fr !important;margin-top:10px;padding-top:0 !important;
  border-top:1px dashed var(--rule-forte);display:flex;justify-content:center}
.suavez span{font-family:var(--tit);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--at);background:var(--sheet);padding:3px 12px;
  border-radius:999px;margin-top:-10px;border:1px solid var(--at-rule)}
.rodapeDrill{margin:0 20px 4px;font-size:12.5px;color:var(--ink-3);line-height:1.5}
.rodapeDrill b{color:#7C4DBE}

/* nota do caso */
.placarDrill{display:flex;align-items:baseline;gap:12px;padding:16px 20px 4px}
.placarDrill b{font-family:var(--tit);font-weight:700;font-size:34px;line-height:1;
  letter-spacing:-1.4px;font-variant-numeric:tabular-nums;color:var(--ink)}
.placarDrill b small{font-size:17px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.placarDrill span{color:var(--ink-2);font-size:14px}

/* o processo que rege o caso, mostrado na correção */
.processo{margin:16px 20px 0;border-left:4px solid var(--azul);background:var(--azul-fraco);
  border-radius:0 var(--r) var(--r) 0;padding:14px 16px}
.processo .rtit{font-family:var(--tit);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--azul);margin:0 0 8px}
.processo .rtit span{font-weight:500;letter-spacing:.04em;opacity:.7;text-transform:none}
.processo p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.processo a{font-family:var(--tit);font-size:12.5px;font-weight:600;color:var(--azul)}
/* Anexos do processo: o PDF oficial, a foto de uma tela, o áudio de exemplo. */
.listaAnexos{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.listaAnexos li{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid var(--linha)}
.listaAnexos li:last-child{border-bottom:none}
.listaAnexos a{font-family:var(--tit);font-size:14px;font-weight:600;color:var(--azul)}
.metaAnexo{font-size:11.5px;color:var(--ink-3);margin-right:auto}
.formAnexo{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-top:14px;
  padding-top:14px;border-top:1px solid var(--linha)}
.formAnexo input[type=file]{font-size:13px;max-width:100%}
.btn.mini{padding:4px 10px;font-size:11.5px}
/* O processo entra como markdown de verdade (titulo, lista, citacao) e nao como
   uma linha so com <br>. O primeiro titulo do trecho nao repete o cabecalho. */
.corpoDoc{margin:0 0 8px}
.corpoDoc p,.corpoDoc li{margin:0 0 9px;font-size:14.5px;line-height:1.6;color:var(--ink)}
.corpoDoc h2,.corpoDoc h3{font-family:var(--tit);font-size:13.5px;margin:12px 0 6px;color:var(--ink)}
.corpoDoc h2:first-child,.corpoDoc h3:first-child{margin-top:0}
.corpoDoc ul,.corpoDoc ol{margin:0 0 9px;padding-left:20px}
.corpoDoc blockquote{margin:0 0 9px;padding-left:12px;border-left:2px solid var(--at-rule);
  color:var(--ink-2)}

/* reincidência e veredito da resposta real */
.voltou{font-family:var(--tit);font-size:10.5px;font-weight:700;letter-spacing:.04em;
  background:var(--no-bg);color:var(--no);border-radius:999px;padding:1px 8px;margin-left:7px}
.vered{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0 0 !important}
.vered b{font-family:var(--tit);font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;padding:3px 10px;border-radius:999px;border:1px solid currentColor}
.vered b.ok{color:var(--ok)} .vered b.no{color:var(--no)}
.ressalva{margin:10px 0 0 !important;font-size:13.5px;line-height:1.55;color:var(--ink-2)}

/* ---------------------------------------------------------- revisão do dia
   Cartão por atendimento: régua do problema, o que passou e o que ficou
   aberto. Cor só nas bordas -- o corpo é o mesmo dos outros painéis, senão
   dez cartões coloridos brigam entre si. */
.tiraDias{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 16px}
.chipDia{font-family:var(--tit);font-size:12px;font-weight:600;padding:5px 11px;
  border:1px solid var(--rule-forte);border-radius:99px;color:var(--ink-2);
  background:var(--sheet);text-decoration:none;font-variant-numeric:tabular-nums}
.chipDia:hover{border-color:var(--azul);color:var(--azul)}
.chipDia.atual{background:var(--azul);border-color:var(--azul);color:#fff}

.revGrade{display:grid;gap:12px}
.revCaso{border:1px solid var(--rule);border-left:3px solid var(--rule-forte);
  border-radius:var(--r);background:var(--sheet);padding:14px 16px}
.revCaso.bom{border-left-color:var(--ok)}
.revCaso.ruim{border-left-color:var(--no)}

.revTopo{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.revNum{font-family:var(--tit);font-size:11px;font-weight:700;color:var(--ink-3);
  letter-spacing:.08em;text-transform:uppercase}
.revProb{font-family:var(--tit);font-size:15px;font-weight:600;color:var(--ink);flex:1}
.revNota{font-family:var(--tit);font-size:20px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums}
.revNota i{font-size:11px;font-weight:600;color:var(--ink-3);font-style:normal}

.revCtx{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 2px;font-size:12px;color:var(--ink-2)}
.revCtx b{font-weight:600;color:var(--ink)}
.revCtx span{background:var(--sheet-2);border:1px solid var(--rule);
  border-radius:99px;padding:2px 9px}
.revCtx .revFim{background:var(--azul-fraco);border-color:transparent;color:var(--azul-esc);font-weight:600}

.revConversa{margin:10px 0 4px}
.revConversa>summary{font-family:var(--tit);font-size:12px;font-weight:600;color:var(--azul);
  cursor:pointer;padding:4px 0}
.revConversa>summary::marker{color:var(--rule-forte)}

.revLista{margin-top:10px}
.revLista h4{font-family:var(--tit);font-size:11px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;margin:0 0 5px}
.revLista.ok h4{color:var(--ok)}
.revLista.falta h4{color:var(--no)}
.revLista ul{margin:0;padding:0;list-style:none;display:grid;gap:5px}
.revLista li{font-size:13.5px;line-height:1.5;color:var(--ink-2);padding-left:15px;position:relative}
.revLista li::before{position:absolute;left:0;top:0;font-weight:700}
.revLista.ok li::before{content:"✓";color:var(--ok)}
.revLista.falta li::before{content:"·";color:var(--no);font-size:19px;line-height:1.05}
.revLista.falta li b{display:block;font-weight:600;color:var(--ink)}
.revLista.falta li span{display:block;color:var(--ink-3)}

.revEscrita{margin:10px 0 0;font-size:12px;color:var(--at);background:var(--at-bg);
  border:1px solid var(--at-rule);border-radius:var(--r);padding:6px 10px}

.regrasTxt code{font-size:10.5px;background:var(--sheet-2);border:1px solid var(--rule);
  border-radius:4px;padding:0 3px}

@media(max-width:640px){
  .revTopo{gap:6px}
  .revProb{flex:1 1 100%;order:3}
}
.cartaoRevisar .verCaso{font-family:var(--tit);font-size:12px;font-weight:600;
  color:var(--azul);text-decoration:none}
.cartaoRevisar .verCaso:hover{text-decoration:underline}
.tiraGente{margin-bottom:8px}

/* ------------------------------------------------ barra de filtro
   Mesmo desenho das outras plataformas da casa: uma linha, selects, de/até e
   um grupo segmentado de atalhos. Os atalhos são submits, então funciona sem
   JS; o `onchange` nos campos só poupa um clique.

   `de` e `ate` vivem num span próprio: soltos no flex, a barra quebrava entre
   o rótulo e o campo e deixava um "até" órfão no fim da primeira linha. */
.filtros{display:flex;gap:9px;align-items:center;flex-wrap:wrap;margin:0 0 34px;
  padding:10px 12px;background:var(--sheet);border:1px solid var(--rule-forte);
  border-radius:10px;font-size:13px;color:var(--ink-2)}
.filtros select,.filtros input[type=date]{padding:6px 9px;border:1px solid var(--rule-forte);
  border-radius:7px;font:inherit;font-size:13px;background:var(--sheet);color:var(--ink)}
.filtros select{max-width:210px}
.filtros input[type=date]{width:142px;font-variant-numeric:tabular-nums}
.intervalo{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
.filtros .de{color:var(--ink-3)}
.atalhos{display:inline-flex;border:1px solid var(--rule-forte);border-radius:7px;
  overflow:hidden}
.atalhos button{padding:6px 11px;border:0;border-right:1px solid var(--rule);
  background:var(--sheet);font:inherit;font-size:12px;color:var(--ink-2);cursor:pointer}
.atalhos button:last-child{border-right:0}
.atalhos button:hover{background:var(--sheet-2);color:var(--azul)}
.atalhos button.on{background:var(--azul-fraco);color:var(--azul-esc);font-weight:600}

/* A regra de cada bloco fica fechada por padrão: quem já sabe o que o número
   é não precisa reler a definição toda vez, e quem não sabe tem onde clicar.
   `details` resolve sem JavaScript. */
.regras{margin:9px 0 0;max-width:84ch}
.regras>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  font-family:var(--tit);font-size:11.5px;font-weight:600;color:var(--ink-3);
  padding:3px 0;list-style:none;width:fit-content}
.regras>summary::-webkit-details-marker{display:none}
.regras>summary::marker{content:""}
.regras>summary::after{content:"";width:6px;height:6px;margin-left:2px;
  border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .12s}
.regras[open]>summary::after{transform:rotate(-135deg) translate(-1px,-1px)}
.regras>summary:hover{color:var(--azul)}
.iconeI{width:15px;height:15px;border-radius:50%;border:1px solid currentColor;
  display:grid;place-items:center;font-family:var(--tit);font-size:10px;
  font-weight:700;font-style:italic;line-height:1}
.regras[open]>summary{color:var(--ink-2);margin-bottom:5px}
.regras[open]>summary .iconeI{background:var(--azul-fraco);border-color:transparent;
  color:var(--azul-esc)}
.regrasTxt{font-size:11.5px;line-height:1.6;color:var(--ink-3);
  border-left:2px solid var(--rule-forte);padding:2px 0 2px 11px}
.regrasTxt b{color:var(--ink-2)}
/* Um bloco e uma leitura inteira: titulo, placar e regras. O respiro entre
   eles precisa ser maior que o respiro interno, senao o titulo do proximo
   cola nas regras do anterior e os dois parecem o mesmo bloco. */
.blocoDia{margin:0 0 38px}
.tituloBloco{font-family:var(--tit);font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-2);margin:0 0 12px;
  display:flex;align-items:baseline;gap:9px}
.tituloBloco span{font-size:11.5px;font-weight:500;letter-spacing:0;text-transform:none;
  color:var(--ink-3)}
.tituloBloco::after{content:"";flex:1;height:1px;background:var(--rule)}
.ptTrab{color:var(--ink-2);font-size:13px}
.pct{color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums}

@media(max-width:760px){
  .atalhos{margin-left:0}
  .filtros select,.intervalo{flex:1 1 100%}
  .filtros select{max-width:none}
  .filtros input[type=date]{flex:1;width:auto}
}
.pct.ruim{color:var(--no)}

/* ------------------------------------------------------------- gráficos
   SVG gerado no servidor: sem biblioteca, sem JS, funciona offline e sai na
   impressão. `preserveAspectRatio:none` estica na largura porque o eixo x é
   categórico (um dia por barra) -- distorcer ali não distorce leitura. */
.grafico{width:100%;height:190px;display:block;margin:2px 0 0}
.gGrade{stroke:var(--rule);stroke-width:1}
.gEixo{fill:var(--ink-3);font-size:9px;font-family:var(--txt)}
.gBarra{fill:var(--azul-fraco)}
.gBarra.ult{fill:#C9DAFB}
.gLinha{fill:none;stroke:var(--azul);stroke-width:2;stroke-linejoin:round;
  vector-effect:non-scaling-stroke}
.gPonto{fill:var(--sheet);stroke:var(--azul);stroke-width:2;vector-effect:non-scaling-stroke}
.notaGrafico{margin:6px 0 0;font-size:11.5px;line-height:1.55;color:var(--ink-3);max-width:80ch}

.legenda{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--ink-3)}
.legenda i{display:inline-block}
.lgBarra{width:10px;height:10px;border-radius:2px;background:var(--azul-fraco)}
.lgLinha{width:14px;height:2px;background:var(--azul);margin-left:6px}

/* Barra por pessoa: a largura é proporcional à MAIOR taxa da tela, não a 100 --
   com todo mundo entre 50% e 70%, barras medidas em 100 ficam idênticas e o
   gráfico deixa de comparar, que é a única coisa que ele faz. */
.barrasPessoa{display:grid;gap:3px;margin-top:4px}
.linhaPessoa{display:grid;grid-template-columns:104px 1fr 96px;gap:12px;align-items:center;
  padding:7px 8px;border-radius:7px;text-decoration:none;color:inherit}
.linhaPessoa:hover{background:var(--sheet-2)}
.bpNome{font-family:var(--tit);font-size:13px;font-weight:600;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bpTrilho{height:11px;border-radius:99px;background:var(--sheet-2);
  border:1px solid var(--rule);overflow:hidden}
.bpTrilho i{display:block;height:100%;background:var(--azul);border-radius:99px}
.bpVal{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.bpVal b{font-family:var(--tit);font-size:14px;color:var(--ink)}
.bpVal small{font-size:11px;color:var(--ink-3);margin-left:4px}
@media(max-width:640px){
  .linhaPessoa{grid-template-columns:78px 1fr 78px;gap:8px}
}
.detalhePessoa{margin-top:14px;max-width:none;border-top:1px solid var(--rule);padding-top:8px}
.detalhePessoa>summary{font-size:12px}
/* Pouco volume não sai da tela -- sumir esconderia trabalho de alguém -- mas
   também não disputa posição: fica no fim, apagado, com o porquê no title. */
.linhaPessoa.poucos{opacity:.5}
.linhaPessoa.poucos .bpTrilho i{background:var(--ink-3)}

/* Linha: escala fixa 0-100 e média tracejada. Zoom automático no menor/maior
   transforma três pontos de variação numa montanha. */
.gArea{fill:var(--azul);opacity:.07}
.gMedia{stroke:var(--rule-forte);stroke-width:1;stroke-dasharray:4 4}
.tendencia{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.tendencia b{font-family:var(--tit);font-size:13px}
.tendencia.sobe b{color:var(--ok)}
.tendencia.desce b{color:var(--no)}

/* Rosca: cor de categoria, não semântica -- nenhuma fatia é "boa" ou "ruim". */
.rosca{display:grid;grid-template-columns:168px 1fr;gap:26px;align-items:center;margin-top:6px}
.rosca svg{width:168px;height:168px}
.legendaRosca{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.legendaRosca li{display:grid;grid-template-columns:11px 1fr auto auto;gap:10px;
  align-items:center;font-size:13px;color:var(--ink-2)}
.legendaRosca i{width:11px;height:11px;border-radius:3px}
.legendaRosca b{font-family:var(--tit);font-size:13px;color:var(--ink);
  font-variant-numeric:tabular-nums}
.legendaRosca small{color:var(--ink-3);font-size:11.5px;min-width:34px;text-align:right;
  font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .rosca{grid-template-columns:1fr;justify-items:center;gap:16px}
  .legendaRosca{width:100%}
}
.legendaSerie{display:flex;flex-wrap:wrap;gap:16px;margin-top:8px;font-size:11.5px;
  color:var(--ink-3);align-items:center}
.legendaSerie span{display:inline-flex;align-items:center;gap:6px}
.legendaSerie b{color:var(--ink-2);font-family:var(--tit)}
.lgMedia{width:14px;height:0;border-top:1px dashed var(--rule-forte)}

/* Composição por frente: percentual, porque os volumes são muito diferentes
   (2.074 conversas de venda contra 15 de ligação) e em absoluto a barra menor
   vira um tracinho ilegível. */
.frentes{display:grid;gap:14px;margin-top:6px}
.frTopo{display:flex;align-items:baseline;justify-content:space-between;
  font-size:13px;margin-bottom:5px}
.frTopo b{font-family:var(--tit);font-weight:600;color:var(--ink)}
.frTopo span{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.frBarra{display:flex;height:22px;border-radius:5px;overflow:hidden;
  border:1px solid var(--rule)}
.frBarra i{display:block;height:100%}
.legendaFrentes{list-style:none;display:flex;flex-wrap:wrap;gap:14px;
  margin:14px 0 0;padding:0;font-size:11.5px;color:var(--ink-3)}
.legendaFrentes li{display:inline-flex;align-items:center;gap:6px}
.legendaFrentes i{width:10px;height:10px;border-radius:3px}
.linhaPessoa.estatica{cursor:default}
.linhaPessoa.estatica:hover{background:transparent}
/* Cor padrão da coluna. O gráfico por estágio passa a sua no atributo `fill`,
   que vence esta -- aqui é só para nenhuma coluna nascer preta. */
.gCol{fill:var(--azul)}
.gCol.poucos{opacity:.42}
.gValor{fill:var(--ink);font-family:var(--tit);font-size:11px;font-weight:700}
.gEixo.fraco{opacity:.6}
.linhaPeca{grid-template-columns:150px 1fr 88px 92px}
/* Assunto tem rotulo longo de verdade -- "crédito, limite ou pagamento" nao
   cabia em 150px e virava "crédito, limite ou pag…". A coluna cresce e o texto
   quebra em vez de truncar: nome de motivo cortado nao se le. */
.linhaAssunto{grid-template-columns:minmax(150px,236px) 1fr 84px 104px;
  align-items:center}
.linhaAssunto .bpNome{white-space:normal;overflow:visible;text-overflow:clip;
  line-height:1.3}
@media(max-width:720px){
  .linhaAssunto{grid-template-columns:1fr 72px;row-gap:4px}
  .linhaAssunto .bpTrilho{grid-column:1 / -1;order:3}
  .linhaAssunto .bpTaxa{text-align:left;order:4}
}
.bpTaxa{text-align:right;font-size:11.5px;color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums}
@media(max-width:640px){ .linhaPeca{grid-template-columns:96px 1fr 64px} .bpTaxa{display:none} }
.tituloSerie{font-family:var(--tit);font-size:11px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);margin:18px 0 2px}
.gPonto.magro{stroke-dasharray:2 2}
.legendaSeries{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 0;
  padding:0;font-size:11.5px;color:var(--ink-3)}
.legendaSeries li{display:inline-flex;align-items:center;gap:6px}
.legendaSeries i{width:10px;height:10px;border-radius:3px}
.legendaSeries b{font-family:var(--tit);color:var(--ink-2)}
.legendaSeries small{font-variant-numeric:tabular-nums}
/* Alvo invisível de hover: o ponto tem 3px e é quase impossível acertar. */
.gAlvo{fill:transparent;stroke:none;cursor:help}
.avisoJanela{margin:0 0 20px}
/* A prova do painel: fundo verde porque e o unico lugar da tela em que o
   numero diz que cobrir a regua muda o desfecho. */
.avisoProva{background:var(--ok-bg);border-color:var(--ok);margin:0 0 20px}
/* O gradiente do pitch: duas colunas, e a da direita e a que vale. */
.pitch{border:1px solid var(--rule);border-radius:var(--rc);padding:16px 18px;margin:0 0 20px}
.pitchTit{font-family:var(--tit);font-size:14px;font-weight:700;margin:0 0 6px;color:var(--ink)}
.pitchGrade{display:grid;grid-template-columns:minmax(180px,1fr) 1fr 1fr;
  gap:8px 16px;align-items:center;margin:12px 0 4px}
.pitchGrade .compNome small{display:block;color:var(--ink-3);font-size:11px;font-weight:400}
.avisoProva i{font-style:normal;color:var(--fraco);font-size:12.5px}

/* ------------------------------------------------ tooltip dos gráficos
   Em HTML sobre o SVG, e não <title> dentro dele: o nativo demora ~1s para
   aparecer e o gráfico usa preserveAspectRatio="none", que esticaria texto
   desenhado lá dentro. Posição em porcentagem, que escala junto. */
.graficoWrap{position:relative}
.alvoPonto{position:absolute;width:26px;height:26px;margin:-13px 0 0 -13px;
  border-radius:50%;cursor:help}
.alvoPonto::after{content:"";position:absolute;inset:9px;border-radius:50%;
  background:transparent;transition:background .12s}
.alvoPonto:hover::after{background:rgba(11,77,214,.18)}
/* O balao do grafico. Chamava-se `.dica` e atropelava a regra de paragrafo
   do mesmo nome: os 30 `<p class="dica">` do app ficavam com opacity 0 e
   position absolute, ou seja, INVISIVEIS em toda tela. Nome proprio agora. */
.dicaPonto{position:absolute;left:50%;bottom:calc(100% + 4px);transform:translateX(-50%) scale(.96);
  transform-origin:bottom center;background:var(--ink);color:#fff;border-radius:7px;
  padding:6px 9px;white-space:nowrap;opacity:0;pointer-events:none;
  transition:opacity .1s,transform .1s;z-index:3;
  box-shadow:0 4px 12px rgba(16,24,40,.18);display:grid;gap:1px;text-align:center}
.dicaPonto b{font-family:var(--tit);font-size:14px;font-weight:700;line-height:1.1}
.dicaPonto i{font-style:normal;font-size:11px;opacity:.82}
.dicaPonto small{font-size:10.5px;opacity:.62}
.dicaPonto::after{content:"";position:absolute;top:100%;left:50%;margin-left:-4px;
  border:4px solid transparent;border-top-color:var(--ink)}
.dicaPonto.dicaBaixo{bottom:auto;top:calc(100% + 4px);transform-origin:top center}
.dica.dicaBaixo::after{top:auto;bottom:100%;border-top-color:transparent;
  border-bottom-color:var(--ink)}
.alvoPonto:hover .dicaPonto{opacity:1;transform:translateX(-50%) scale(1)}
@media(prefers-reduced-motion:reduce){ .dica{transition:none} }
/* Faixa da nota: rótulo da própria auditoria, não corte nosso.
   Nome proprio: `.faixa` sozinho colide com a faixa de layout do cabecalho,
   que e display:flex -- o badge virava bloco e quebrava a linha da legenda. */
.faixaNota{font-weight:700}
.fcrítico{color:var(--no)}
.fabaixodoesperado{color:var(--at)}
.fregular{color:var(--ink-2)}
.fbom,.fexcelente{color:var(--ok)}
.cartao.azul .faixaNota{color:#fff;opacity:.95}

/* Coluna de contexto, não de mérito: a cotação que veio sem ninguém atender
   é da oficina, não da pessoa. */
.tabela td.fraca{color:var(--ink-3)}
.avisoSerie{margin:10px 0 0;font-size:12px;line-height:1.55;color:var(--at);
  background:var(--at-bg);border:1px solid var(--at-rule);border-radius:var(--r);padding:7px 11px}

/* Funil do discador: de 893 chamadas sobram 15 cotações. Em cartões soltos essa
   perda some; em sequência, cada degrau mostra onde ela acontece. */
.funil{display:flex;flex-wrap:wrap;gap:0;margin-top:14px;border:1px solid var(--rule);
  border-radius:var(--rc);background:var(--sheet);overflow:hidden}
.passoFunil{flex:1 1 140px;display:grid;gap:2px;padding:12px 14px;
  border-left:1px solid var(--rule)}
.passoFunil:first-child{border-left:0}
.fnValor{font-family:var(--tit);font-size:22px;font-weight:700;color:var(--ink);
  font-variant-numeric:tabular-nums;line-height:1.1}
.fnNome{font-size:12px;color:var(--ink-2)}
.fnPct{font-size:11px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.fnPerda{font-size:11px;color:var(--at);margin-top:2px}
@media(max-width:760px){ .passoFunil{flex:1 1 50%;border-top:1px solid var(--rule)} }

/* ------------------------------------------- o que as oficinas trouxeram */
/* Padrao do report: tema rankeado por volume, barra, e a fala a um clique.
   Ordem de frequencia e nao de relogio -- o que se procura aqui e o padrao
   do dia, nao a cronologia. */
.ladrilhos{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.ldr{display:grid;gap:1px;padding:10px 14px;background:var(--sheet-2);
  border-radius:var(--rc);font-size:11px;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.04em}
.ldr b{font-family:var(--tit);font-size:21px;font-weight:700;color:var(--ink);
  letter-spacing:-.5px;text-transform:none}
.ldr.ldrAt b{color:var(--at)}
.ldr.ldrFraco{text-transform:none;letter-spacing:0}
.ldr.ldrFraco b{font-size:17px;color:var(--ink-3)}

.duasColunas{display:grid;grid-template-columns:1fr 1fr;gap:34px}
@media(max-width:940px){ .duasColunas{grid-template-columns:1fr} }
.colTit{font-family:var(--tit);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.colTit span{text-transform:none;letter-spacing:0;font-weight:400;
  font-size:11.5px;color:var(--ink-3);margin-left:8px}

.linhaTema{border-bottom:1px solid var(--rule)}
/* O grid vai num filho, nao no proprio `summary`. Com `display:grid` no summary
   o Chrome desenha o triangulo como item do grid e ele cai numa segunda linha,
   e nem `list-style:none` nem `::marker{content:""}` o removem de la. */
.linhaTema>summary{display:block;padding:9px 2px;cursor:pointer;list-style:none}
.linhaTema>summary::-webkit-details-marker{display:none}
.ltGrade{display:grid;grid-template-columns:1fr 110px 34px 34px;
  align-items:center;gap:10px}
/* O chevron global de `details>summary` e um ::after do summary, que aqui e
   block: ele quebrava para a linha de baixo. Some, e a seta vai para dentro da
   grade, colada no nome do tema. */
.linhaTema .ltNome::after{content:" ▾";color:var(--azul);font-size:11px}
.linhaTema[open] .ltNome::after{content:" ▴"}
.linhaTema.estatica .ltNome::after{content:none}
.linhaTema>summary:hover .ltNome{color:var(--azul)}
.linhaTema.estatica{display:grid;grid-template-columns:1fr 110px 34px 34px;
  align-items:center;gap:10px;padding:9px 2px}
.ltNome{font-size:13px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}
.ltBarra{height:7px;border-radius:99px;background:var(--sheet-2);overflow:hidden}
.ltBarra i{display:block;height:100%;background:var(--azul);border-radius:99px}
.ltBarra.at i{background:var(--at)}
.ltNum{font-family:var(--tit);font-size:13px;font-weight:700;text-align:right;
  font-variant-numeric:tabular-nums}
.ltPct{font-size:11px;color:var(--ink-3);text-align:right;
  font-variant-numeric:tabular-nums}

.ltFalas{display:grid;gap:10px;padding:6px 0 14px}
.falaCaso{padding:11px 14px;border-radius:var(--rc);background:var(--sheet-2)}
.falaCaso.bom{box-shadow:inset 3px 0 0 var(--ok)}
.falaCaso.ruim{box-shadow:inset 3px 0 0 var(--at)}
.fcTopo{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 9px;font-size:11.5px;
  color:var(--ink-3)}
.fcTopo b{font-family:var(--tit);font-size:13.5px;font-weight:600;color:var(--ink)}
.fcHora{font-variant-numeric:tabular-nums}
.falaCaso.bom .fcPlacar{color:var(--ok);font-weight:600}
.falaCaso.ruim .fcPlacar{color:var(--at);font-weight:600}
.fcFim{color:var(--ink-2)}
/* A fala e o material: e ela que define o problema que a regua julga. */
.fcFala{margin:6px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}
.fcPorque{margin:5px 0 0;font-size:12px;color:var(--ink-3)}
.falaCaso .revConversa{margin-top:7px}
.falaCaso .revConversa summary{font-size:12px}

/* ------------------------------------ detalhe de ligacoes por operadora */
/* Lista para ESCOLHER qual chamada ouvir. Por isso o desfecho e a primeira
   coluna e tem pino de cor: e o que o olho procura ao varrer. */
.opBloco{border:1px solid var(--rule);border-radius:var(--rc);margin-bottom:12px;
  background:var(--sheet)}
.opBloco>summary{display:flex;flex-wrap:wrap;align-items:baseline;
  justify-content:space-between;gap:8px 16px;padding:12px 16px;cursor:pointer;
  list-style:none}
.opBloco>summary::-webkit-details-marker{display:none}
.opBloco>summary:hover{background:var(--sheet-2)}
.opBloco[open]>summary{border-bottom:1px solid var(--rule)}
.opCab>b{font-family:var(--tit);font-size:15px;font-weight:600}
.opPlacar{display:flex;flex-wrap:wrap;gap:4px 16px;font-size:11.5px;color:var(--ink-3)}
.opPlacar b{font-family:var(--tit);font-size:13.5px;color:var(--ink);margin-right:2px}
.opPlacar .opCot b{color:var(--azul)}
.opPlacar .opVen b{color:var(--ok)}
.opBloco .tabelaRolagem{padding:4px 16px 14px}

/* A linha e um <details>: fechada ela e uma linha de tabela, aberta a conversa
   ocupa a largura inteira. Dentro de <td> a transcricao caia numa coluna de 1%
   e quebrava uma palavra por linha. */
.listaLig{padding:2px 16px 14px}
.llCab,.llGrade{display:grid;gap:12px;align-items:center;
  grid-template-columns:minmax(120px,150px) minmax(130px,1.3fr) 110px
                        minmax(140px,1.3fr) 48px 92px 44px}
.avisoFunil{margin:0 0 18px;max-width:78ch}
/* Time: uma tabela por mesa. Sao numeros comparaveis entre pessoas, e a
   leitura e de cima para baixo -- lista solta nao alinha coluna nenhuma. */
.tabelaMesa th,.tabelaMesa td{white-space:nowrap}
/* `.tabela th` alinha a esquerda para todo mundo; numero tem de bater com a
   coluna dele, senao a tabela nao se le de cima para baixo. */
.tabelaMesa th.tdNum{text-align:right}
.tabelaMesa td{vertical-align:top;padding-top:13px}
.tabelaMesa td.mpFaltas{white-space:normal;min-width:320px}
.tabelaMesa b.ok{font-family:var(--tit);font-size:15px;color:var(--ok)}
.tabelaMesa small{color:var(--ink-3);font-size:11.5px}
/* Coluna do treino: numero, a tira de dias e a frase. A tira responde "qual
   dia" sem hover -- um quadrado por dia trabalhado, cheio quando treinou. */
.tabelaMesa b.no{font-family:var(--tit);font-size:15px;color:var(--no)}
.tdTreino .tira{display:flex;gap:3px;justify-content:flex-end;margin:5px 0 3px}
.tdTreino .tira i{width:9px;height:9px;border-radius:2px;border:1px solid var(--at-rule);
  background:var(--at-bg)}
.tdTreino .tira i.fez{background:var(--ok);border-color:var(--ok)}
.resumoTreino{display:block;font-size:10.5px;color:var(--ink-3)}
.mpFaltas{display:flex;flex-wrap:wrap;gap:5px 6px}
.mpFalta{background:var(--at-bg);border:1px solid var(--at-rule);border-radius:999px;
  padding:3px 10px;font-size:11.5px;color:var(--ink-2);line-height:1.5}
.mpFalta i{font-style:normal;color:var(--ink-3);font-size:10.5px;margin-left:5px}
/* A fila de aprovacao tem quatro colunas, nao as sete da lista de chamadas. */
.listaAprovar .llCab,.listaAprovar .llGrade{
  grid-template-columns:minmax(220px,2fr) minmax(140px,1fr) 84px 44px}
.listaAprovar .pedirCoach input{flex:1;min-width:220px}
/* A lista de atendimento tem outro conteudo: "nao voltou a comprar em 2 dias"
   nao cabe nos 48px que em ligacao seguram a duracao. Mesma maquinaria, colunas
   proprias. */
.listaAt .llCab,.listaAt .llGrade{
  grid-template-columns:minmax(140px,170px) minmax(130px,1.1fr) minmax(170px,1.5fr)
                        64px 96px 44px}
.llCab{padding:8px 0 7px;font-family:var(--tit);font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
  border-bottom:1px solid var(--rule)}
.llItem{border-bottom:1px solid var(--rule);font-size:12.5px;color:var(--ink-2)}
.llItem>summary{padding:9px 0;cursor:pointer;list-style:none}
.llItem>summary::-webkit-details-marker{display:none}
.llItem>summary:hover{background:var(--sheet-2)}
.llSeta{font-size:11px;color:var(--azul);text-align:right;white-space:nowrap}
.llItem[open] .llSeta::after{content:" ▴"}
.llItem:not([open]) .llSeta:not(:empty)::after{content:" ▾"}
.llConversa{padding:2px 0 16px}

/* O pino carrega a cor; o texto fica legivel em qualquer linha. */
.tlDepois{font-weight:600;color:var(--ink-3)}
.pino{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--rule-forte);margin-right:7px;vertical-align:1px}
.llItem.tlok .tlDepois{color:var(--ok)}
.llItem.tlok .pino{background:var(--ok)}
.tlHora{font-variant-numeric:tabular-nums}
.tlFraco{color:var(--ink-3)}

@media(max-width:860px){
  .llCab{display:none}
  .llGrade{grid-template-columns:1fr auto;row-gap:3px}
  .llGrade>*{grid-column:1}
  .llGrade .llSeta{grid-column:2;grid-row:1}
}

/* ------------------------------------------- casos: aplauso e atencao */
/* Cartao fechado por padrao: dez casos abertos davam uma pagina de rolagem em
   que nada se compara. O que fica de fora e o suficiente para escolher qual
   abrir -- oficina, placar da regua, o ponto, e o desfecho. */
.pilhaCasos{display:grid;gap:8px}
.casoCard{border:1px solid var(--rule);border-radius:var(--rc);background:var(--sheet)}
.casoCard.bom{box-shadow:inset 3px 0 0 var(--ok)}
.casoCard.ruim{box-shadow:inset 3px 0 0 var(--at)}
.casoCard>summary{display:grid;gap:4px;padding:11px 14px;cursor:pointer;list-style:none}
.casoCard>summary::-webkit-details-marker{display:none}
.casoCard>summary:hover{background:var(--sheet-2)}
.ccTopo{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ccTopo b{font-family:var(--tit);font-size:13.5px;font-weight:600;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ccPlacar{font-size:11px;font-weight:600;white-space:nowrap}
.casoCard.bom .ccPlacar{color:var(--ok)}
.casoCard.ruim .ccPlacar{color:var(--at)}
.ccPorque{font-size:12px;color:var(--ink-2);line-height:1.35}
.ccPe{display:flex;flex-wrap:wrap;gap:4px 10px;font-size:11px;color:var(--ink-3)}
.ccFim{color:var(--ink-2)}
.ccCorpo{padding:0 14px 13px;display:grid;gap:10px;border-top:1px solid var(--rule)}
.ccFala{margin:10px 0 0;font-size:13px;color:var(--ink-2);line-height:1.5}

/* --------------------------------------- casos: como saimos de cada objecao */
/* Linha densa, e nao cartao. Cartao serve para item que se le sozinho; aqui o
   ponto e COMPARAR assuntos entre si, e para isso a tabela ganha -- cartao
   ocupava seis vezes mais altura e afastava as linhas que precisam ser lidas
   lado a lado. O que o cartao trouxe de bom fica: a ordem por mal atendidas, a
   prova do desfecho na linha, e a base pequena recolhida. */
.objLista{margin-top:6px}
.objGrade{display:grid;gap:14px;align-items:center;
  grid-template-columns:minmax(170px,1.5fr) 92px minmax(120px,1fr) 118px 46px}
.objCab{padding:0 2px 7px;font-family:var(--tit);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
  border-bottom:1px solid var(--rule)}
.objLinha{border-bottom:1px solid var(--rule)}
.objLinha>summary{padding:10px 2px;cursor:pointer;list-style:none}
.objLinha>summary::-webkit-details-marker{display:none}
.objLinha>summary:hover{background:var(--sheet-2)}
.objLinha[open]>summary{background:var(--sheet-2)}

.objNome{font-family:var(--tit);font-size:13px;font-weight:600;color:var(--ink);
  line-height:1.3}
/* o numero que ordena a lista: fato observado, nao projecao */
.objMal{font-family:var(--tit);font-size:17px;font-weight:700;color:var(--at);
  letter-spacing:-.3px;font-variant-numeric:tabular-nums}
.objMal i{font-family:var(--txt);font-style:normal;font-size:11px;font-weight:400;
  color:var(--ink-3);margin-left:4px;letter-spacing:0}
.objRegua{display:flex;align-items:center;gap:8px}
.barrinha{flex:1;height:7px;border-radius:99px;background:var(--sheet-2);
  border:1px solid var(--rule);overflow:hidden;min-width:44px}
.barrinha i{display:block;height:100%;border-radius:99px}
.barrinha.alta i{background:var(--ok)}
.barrinha.baixa i{background:var(--at)}
.barrinha.fraca i{background:var(--rule-forte)}
.objRegua em{font-style:normal;font-size:11.5px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;min-width:30px}
.objProva{font-family:var(--tit);font-size:13px;font-weight:700;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.objProva b{font-weight:700}
.objProva b.ok{color:var(--ok)}
.objProva i{font-style:normal;font-weight:400;color:var(--rule-forte);margin:0 5px}
/* "de 11" ao lado do numero: contexto, nao um segundo numero. */
.objProva i.de{font-size:11.5px;color:var(--ink-3);margin:0 0 0 4px}
.objProva.fraco{color:var(--rule-forte)}
.objVer{font-size:11.5px;color:var(--azul);text-align:right;white-space:nowrap}
.objLinha[open] .objVer::after{content:" ▴"}
.objLinha:not([open]) .objVer::after{content:" ▾"}
.objCorpo{padding:6px 2px 18px;display:grid;gap:14px}

/* base pequena recolhida: existe, mas nao decide nada */
.objMagros{margin-top:12px}
.objMagros>summary{font-family:var(--tit);font-size:12px;font-weight:600;color:var(--azul);
  cursor:pointer;list-style:none;padding:8px 0}
.objMagros>summary::-webkit-details-marker{display:none}
.objMagros>summary span{font-family:var(--txt);font-weight:400;color:var(--ink-3);
  font-size:11.5px}
.objMagros .objMal{color:var(--ink-3)}

@media(max-width:940px){
  .objCab{display:none}
  .objGrade{grid-template-columns:1fr auto;gap:4px}
  .objGrade>*{grid-column:1}
  .objVer{grid-column:2;grid-row:1}
}

/* Resumo da objecao: quatro LEITURAS diferentes do mesmo assunto. Empilhadas no
   mesmo branco, ninguem percebia que mudavam de natureza -- entao cada uma ganha
   rotulo, fundo proprio e respiro. O que muda entre elas nao e o assunto, e a
   pergunta que respondem. */
.loResumo{padding:14px 0 24px;display:grid;gap:14px;max-width:860px}

.camada{display:grid;gap:7px;padding:16px 18px;border-radius:var(--rc);
  border:1px solid var(--rule);background:var(--sheet-2)}
.camadaRot{font-family:var(--tit);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
.camadaSub{margin:0;font-size:11.5px;color:var(--ink-3);line-height:1.45}

/* 1. a frase: tipo maior, fundo claro -- e a camada que se le sem esforco */
.camadaFrase{background:var(--sheet);border-color:var(--rule)}
.loFrase{margin:0;font-size:14.5px;line-height:1.65;color:var(--ink)}
.loFrase b{font-family:var(--tit)}

/* 2. o que treinar: a unica com cor de acao. E a camada que vira tarefa. */
.camadaTreino{background:var(--at-bg);border-color:var(--at-rule)}
.camadaTreino .camadaRot{color:var(--at)}
.loAlvo{font-family:var(--tit);font-size:16px;font-weight:600;color:var(--ink);
  line-height:1.3}
.loFalta{font-size:13px;color:var(--ink-2)}
.loFalta b{font-family:var(--tit)}
.loDica{font-size:12.5px;color:var(--ink-3);line-height:1.5}

/* 3. o comparativo: barra e nao fracao -- o olho compara comprimento, e "13/21"
   contra "36/84" exige conta de cabeca no meio da leitura. */
.compGrade{display:grid;grid-template-columns:minmax(150px,1.3fr) 1fr 1fr;
  gap:9px 16px;align-items:center;margin-top:4px}
.compCab{font-family:var(--tit);font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-3)}
.compNome{font-size:12.5px;color:var(--ink-2);line-height:1.35}
.compNome.destaque{color:var(--ink);font-weight:600}
.compBarra{display:flex;align-items:center;gap:8px}
.compBarra i{display:block;height:9px;border-radius:99px;background:var(--rule-forte);
  min-width:2px}
.compBarra i.ok{background:var(--ok)}
.compBarra em{font-style:normal;font-size:11px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.compFecho{margin:6px 0 0;font-size:12.5px;color:var(--ink-2);line-height:1.5}
.compFecho b{font-family:var(--tit);color:var(--ink)}

/* 4. o detalhe: fechado, e visivelmente o rodape da leitura */
.camadaDetalhe{background:transparent;border-style:dashed;padding:0}
.camadaDetalhe>summary{display:flex;align-items:baseline;gap:9px;padding:13px 18px;
  cursor:pointer;list-style:none;font-size:12.5px;color:var(--ink-2)}
.camadaDetalhe>summary::-webkit-details-marker{display:none}
.camadaDetalhe>summary:hover{color:var(--ink)}
.camadaCorpo{display:grid;gap:16px;padding:0 18px 18px}

.loTit{font-family:var(--tit);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ink-3);margin:0 0 8px}
.loLista{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.loLista li{font-size:12.5px;line-height:1.45;padding-left:11px;border-left:2px solid var(--rule)}
.loLista.falta li{border-left-color:var(--at)}
.loLista.ok li{border-left-color:var(--ok)}
.loLista b{font-family:var(--tit);font-size:12.5px;font-weight:600;color:var(--ink)}
.loLista span{display:block;color:var(--ink-3);font-size:11.5px}
.loQtd{display:inline!important;color:var(--ink-3);font-size:11px;margin-left:4px}
.loTitSolto{margin-top:4px}

@media(max-width:720px){
  .compGrade{grid-template-columns:1fr;gap:4px}
  .compCab{display:none}
}

/* A prova: seguir a regua vende mais? E a pergunta que valida o produto
   inteiro, entao abre o painel em vez de ficar escondida numa linha. */
.prova{margin:2px 0 20px;padding:16px 18px;border-radius:var(--rc);
  border:1px solid var(--rule);background:var(--sheet-2);display:grid;gap:8px}
.provaRot{font-family:var(--tit);font-size:9.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
.provaTxt{margin:0;font-size:12px;color:var(--ink-3);line-height:1.5}
.provaGrade{display:grid;grid-template-columns:minmax(150px,1.2fr) 1fr 1fr 64px;
  gap:9px 16px;align-items:center;margin-top:4px}
.provaCab{font-family:var(--tit);font-size:9.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.07em;color:var(--ink-3)}
.provaNome{font-size:12.5px;color:var(--ink);font-weight:500}
.provaBarra{display:flex;align-items:center;gap:8px}
.provaBarra i{display:block;height:9px;border-radius:99px;background:var(--rule-forte);min-width:2px}
.provaBarra i.ok{background:var(--ok)}
.provaBarra em{font-style:normal;font-size:11px;color:var(--ink-3);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.provaDif{font-family:var(--tit);font-size:12px;font-weight:700;text-align:right;
  color:var(--ink-3);font-variant-numeric:tabular-nums}
.provaDif.sobe{color:var(--ok)}

/* Dentro da objecao: os dois numeros lado a lado, grandes. E a resposta. */
.provaDupla{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:2px 0 4px}
.provaLado{display:grid;gap:2px;padding:12px 14px;border-radius:var(--rc);
  background:var(--sheet);border:1px solid var(--rule)}
.provaLado b{font-family:var(--tit);font-size:26px;font-weight:700;line-height:1;
  letter-spacing:-.5px;color:var(--ink-3)}
.provaLado.ok b{color:var(--ok)}
.provaLado span{font-size:11.5px;color:var(--ink-3);line-height:1.4}
.provaLado span b{font-family:var(--txt);font-size:11.5px;font-weight:600;color:var(--ink-2)}
.compBarra em small{font-size:10px;color:var(--ink-3);font-weight:400}

@media(max-width:720px){ .provaGrade{grid-template-columns:1fr;gap:4px} .provaCab{display:none} }

/* O chevron global mora em `details[open]>summary::after`, que tem TRES
   elementos na especificidade. `.objCard>summary::after` tem dois -- perde por
   especificidade e nao por ordem, entao escrever `content:none` depois nao
   adianta. Estes blocos desenham a propria seta e precisam empatar o `[open]`.
   O sintoma e um "▴" solto caindo embaixo da primeira coluna. */
.objLinha>summary::after, .objLinha[open]>summary::after,
.objMagros>summary::after, .objMagros[open]>summary::after,
.camadaDetalhe>summary::after, .camadaDetalhe[open]>summary::after,
.linhaTema>summary::after, .linhaTema[open]>summary::after,
.opBloco>summary::after, .opBloco[open]>summary::after,
.llItem>summary::after, .llItem[open]>summary::after,
.casoCard>summary::after, .casoCard[open]>summary::after{content:none}

/* ------------------------------------------------------------------------
   Regras perdidas quando eu reescrevi blocos deste arquivo por FATIA de texto:
   trocar "do marcador A ao marcador B" leva junto o que estiver no meio. Foi
   assim que sumiram a barra de "cobriu a regua", o filtro da lista de ligacoes
   e o formulario de criterio -- cada um descoberto so quando a tela quebrou.
   ------------------------------------------------------------------------ */

/* filtro da lista de ligacoes. `select{width:100%}` e `input{width:100%}` sao
   globais do formulario: sem desfazer aqui, cada controle ocupa a linha inteira
   e a barra vira pilha de cinco andares. */
.filtroLista{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 14px}
.filtroLista select,
.filtroLista input:not([type=checkbox]):not([type=radio]){width:auto;font:inherit;
  font-size:12.5px;padding:7px 10px;border:1px solid var(--rule);
  border-radius:var(--rc);background:var(--sheet);color:var(--ink)}
.filtroLista input:not([type=checkbox]){min-width:150px;max-width:190px}
.filtroLista .btn{padding:6px 12px;font-size:12px}
.filtroConta{font-size:12px;color:var(--ink-3);margin-left:auto;
  font-variant-numeric:tabular-nums}

/* botao que leva a conversa para a MecanIA, com a ligacao no contexto */
.pedirCoach{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:10px}
.pedirCoach .btn{padding:7px 13px;font-size:12.5px}
.pedirCoach span{font-size:11.5px;color:var(--ink-3)}

/* criterio que nasce de um processo */
.formProcesso{margin-top:18px;padding-top:16px;border-top:1px solid var(--rule)}
.grelhaForm{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.grelhaForm .largo{grid-column:1 / -1}
@media(max-width:720px){ .grelhaForm{grid-template-columns:1fr} }
.campo.checa{display:flex;flex-direction:row;align-items:center;gap:8px;font-size:13px}
.campo.checa input{width:auto;margin:0}
.tabObjecoes{width:100%;border-collapse:collapse;font-size:12.5px}
.tabObjecoes th{text-align:left;font-family:var(--tit);font-size:10.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
  padding:0 12px 7px 0;white-space:nowrap}
.tabObjecoes td{padding:9px 12px 9px 0;border-top:1px solid var(--rule);
  vertical-align:middle;color:var(--ink-2)}

/* colunas dos casos, e os casos agrupados por pessoa */
.colBloco{min-width:0}
.colTit{font-family:var(--tit);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);
  margin:0 0 10px;padding-bottom:8px;border-bottom:1px solid var(--rule)}
.colTit span{text-transform:none;letter-spacing:0;font-weight:400;
  font-size:11.5px;color:var(--ink-3);margin-left:8px}
.colTitSolta{margin-top:26px}
.pilhasDaPessoa{padding:4px 16px 16px}
.pilhasDaPessoa .colTit{margin-top:6px}
.opConta{font-variant-numeric:tabular-nums}

/* numero a direita, e nome de oficina que pode quebrar em duas linhas */
.tdNum{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.tlOficina{white-space:normal;min-width:140px}
.fcQuem{color:var(--ink-3)}

/* Subtitulo de toda pagina. Vinha sem regra propria desde sempre -- herdava o
   `p` e so por sorte parecia certo. */
.sub{margin:6px 0 0;font-size:14px;line-height:1.6;color:var(--ink-2);max-width:72ch}

/* Uma lista, duas contagens. Separadas em "o que ficou aberto" e "o que o time
   ja faz", o mesmo criterio aparecia nas duas -- 56 aberturas de um lado, 49
   cumprimentos do outro -- e lia como contradicao. */
.critLista{display:grid;gap:0}
.critCab,.critLinha{display:grid;grid-template-columns:1fr 76px 96px;gap:14px;
  align-items:baseline}
.critCab{padding:0 2px 7px;font-family:var(--tit);font-size:10px;font-weight:600;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-3);
  border-bottom:1px solid var(--rule)}
.critLinha{padding:9px 2px;border-bottom:1px solid var(--rule)}
.critNome{font-size:12.5px;color:var(--ink);line-height:1.4}
.critDica{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.critFez{font-family:var(--tit);font-size:13.5px;font-weight:700;color:var(--ok)}
.critAberto{font-family:var(--tit);font-size:13.5px;font-weight:700;color:var(--at)}
/* criterio sem nenhuma abertura nao merece alarme: some o vermelho */
.critFolga .critAberto{color:var(--rule-forte);font-weight:400}

/* A frase que fez o criterio passar, para copiar. Antes esta area mostrava a
   fala mais longa da OFICINA -- que quase nunca tem a ver com o criterio -- e
   um exemplo do que faltou, que por definicao nao tem a frase. */
.exemploLista{display:grid;gap:10px}
.exemplo{padding:12px 15px;border-radius:var(--rc);background:var(--sheet);
  border:1px solid var(--rule);box-shadow:inset 3px 0 0 var(--ok)}
.exFrase{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.exQuem{margin:6px 0 0;font-size:11.5px;color:var(--ink-3)}
.exQuem b{font-family:var(--tit);font-weight:600;color:var(--ink-2)}
.loTitSub{font-family:var(--txt);font-weight:400;text-transform:none;letter-spacing:0;
  color:var(--ink-3);margin-left:6px}

/* O gatilho que funcionou: o PAR pergunta/resposta. A frase da operadora
   sozinha nao prova que puxou nada -- "voce ja sabe que eu uso muito dessa
   marca?" casa o marcador e nao arranca carro nenhum. */
.gatilho{padding:13px 15px;border-radius:var(--rc);background:var(--sheet);
  border:1px solid var(--rule);box-shadow:inset 3px 0 0 var(--ok);display:grid;gap:5px}
.gaQuem{display:inline-block;min-width:54px;font-family:var(--tit);font-size:9.5px;
  font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);
  vertical-align:1px}
.gaEla,.gaOficina{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.gaOficina{color:var(--ink-2)}
.gaPe{margin:4px 0 0;font-size:11.5px;color:var(--ink-3);display:flex;
  flex-wrap:wrap;align-items:center;gap:6px}
.gaPe b{font-family:var(--tit);font-weight:600;color:var(--ink-2)}
.gaEntregou{font-family:var(--tit);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.05em;color:var(--ok);background:var(--ok-bg, var(--sheet-2));
  border-radius:99px;padding:2px 8px}

/* Qual comportamento o exemplo mostra. Sem isto, quatro exemplos seguidos
   pareciam quatro versoes da mesma coisa. */
.gaPonto{font-family:var(--tit);font-size:10px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--ok)}

.selinho{font-size:10px;text-transform:uppercase;letter-spacing:.05em;
  color:var(--ink-3);background:var(--sheet-2);border-radius:99px;padding:2px 7px;
  white-space:nowrap;margin-left:6px;font-family:var(--tit);font-weight:600}

/* O mesmo problema aparece como "encaminhar" e como "resolver": sao obrigacoes
   diferentes, decididas pelo perfil de quem atendeu. Sem o selo a linha
   repetida parece duplicata. */
.selEnc{background:var(--campo);color:var(--azul)}
.selRes{background:var(--sheet-2);color:var(--ink-3)}