/* =====================================================================
   RORATO ODONTOLOGIA · Painel de Gestão
   Tema visual v2 (06/10/2026) — "editorial Rorato"

   Base: a linguagem do feed da clínica (@rorato_odontologia): fundo
   marfim, serifada de alto contraste com itálico em rosa, oliva profundo
   nos títulos, linhas finas e caixa-alta espaçada nos rótulos.
   Estrutura (wireframe) igual à do painel da Adele: barra lateral escura,
   topo branco, cartões brancos com sombra leve.

   Tipografia
     Playfair Display   títulos, números grandes (KPIs)
     Jost               interface, rótulos, tabelas

   Paleta
     Oliva profundo     #343B24   barra lateral, títulos
     Oliva              #4F5733   série principal dos gráficos
     Sálvia             #8E9A72   apoio (círculos dos destaques do feed)
     Rosa Rorato        #B86B62   destaque, itálico dos títulos
     Rosa texto         #97524A   rosa para texto pequeno (contraste 4.5:1)
     Rosa claro         #E7C3BA   destaque sobre fundo escuro
     Dourado            #B8954A   detalhe (aro dos destaques do feed)
     Marfim             #F7F3EE   fundo
   ===================================================================== */

:root{
  /* marca */
  --olive-900:#2A301C;
  --olive-800:#343B24;
  --olive-700:#3F4730;
  --olive:#4F5733;
  --olive-500:#6B7448;
  --sage:#8E9A72;
  --sage-l:#C3CBAE;
  --sage-100:#EEF0E6;
  --rosa:#B86B62;
  --rosa-d:#97524A;
  --rosa-l:#E7C3BA;
  --rosa-100:#F6E9E5;
  --rosa-50:#FBF4F2;
  --gold:#B8954A;
  --gold-l:#DCC48F;

  /* aliases usados pelo HTML/JS (não renomear) */
  --rosa-soft:var(--rosa-100);
  --sage-d:var(--olive-800);
  --olive-d:#56692F;
  --cream:#FFFFFF;
  --on-sage:#F4EEE6;

  /* superfícies */
  --bg:#F7F3EE;
  --surface:#FFFFFF;
  --surface-2:#FBF9F6;
  --surface-3:#F3EEE7;
  --line:#ECE5DC;
  --line-2:#F3EEE8;

  /* texto */
  --ink:#2A2620;
  --text:#4A443D;
  --muted:#736A61;
  --faint:#B5ACA2;

  /* semânticos */
  --good:#56692F;  --good-bg:#EEF2E2;
  --warn:#8E6020;  --warn-bg:#F8EEDC;
  --crit:#A44B45;  --crit-bg:#F8E7E4;
  --info:#5D7480;  --info-bg:#EAF0F2;

  --serif:'Playfair Display',Georgia,'Times New Roman',serif;
  --sans:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;

  --radius:14px;
  --shadow:0 1px 2px rgba(52,59,36,.04),0 6px 22px -12px rgba(52,59,36,.14);
  --shadow-h:0 2px 4px rgba(52,59,36,.05),0 16px 34px -16px rgba(52,59,36,.22);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--sans);font-size:15px;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;overflow:hidden;
}
h1,h2,h3,.display{
  font-family:var(--serif);font-weight:500;letter-spacing:-.01em;line-height:1.08;color:var(--olive-800);
}
/* a Playfair usa algarismos de texto por padrão; no painel os números ficam alinhados */
h1,h2,h3,.display,.kfig,.secttl,.fbar .fvl,.topbar .ttl b,.empty b{font-variant-numeric:lining-nums proportional-nums;font-feature-settings:"lnum" 1}
h1 .accent,h2 .accent,h3 .accent{font-style:italic;font-weight:400;color:var(--rosa)}
em{font-style:italic;color:var(--rosa-d)}
.accent{color:var(--rosa-d)}
::selection{background:var(--rosa-l);color:var(--ink)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#DCD3C7;border-radius:10px}
::-webkit-scrollbar-track{background:transparent}

/* ---------- layout ---------- */
.app{display:grid;grid-template-columns:256px 1fr;height:100vh;height:100dvh;position:relative;z-index:2}
.side{
  background:
    radial-gradient(120% 60% at 50% 0%,rgba(231,195,186,.10),transparent 60%),
    linear-gradient(180deg,var(--olive-800),var(--olive-900));
  display:flex;flex-direction:column;padding:26px 16px 18px;gap:4px;overflow-y:auto;position:relative;
}
.brand{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  padding:4px 6px 22px;margin-bottom:6px;border-bottom:1px solid rgba(244,238,230,.12)}
.brand .logo{display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--rosa-l)}
.brand .logo svg{width:46px;height:auto;display:block}
.brand .wordmark{font-family:var(--serif);font-weight:500;font-size:1.55rem;letter-spacing:.16em;
  color:var(--on-sage);line-height:1;padding-left:.16em}
.brand .wordmark small{display:block;font-family:var(--sans);font-size:.56rem;font-weight:500;
  letter-spacing:.42em;color:rgba(244,238,230,.62);margin-top:9px;padding-left:.42em}
.brand .client{display:inline-block;margin-top:6px;font-size:.58rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--rosa-l);border:1px solid rgba(231,195,186,.4);
  padding:5px 13px;border-radius:100px}
.brand .client b{font-weight:600}

.navlabel{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,238,230,.42);font-weight:600;padding:16px 12px 6px}
.nav{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;
  color:rgba(244,238,230,.74);font-size:.9rem;font-weight:400;cursor:pointer;
  transition:background .16s,color .16s;position:relative}
.nav svg{width:17px;height:17px;flex:0 0 17px;stroke:currentColor;fill:none;stroke-width:1.5}
.nav:hover{background:rgba(244,238,230,.06);color:var(--on-sage)}
.nav.active{background:rgba(244,238,230,.10);color:#FFF;font-weight:500}
.nav.active svg{stroke:var(--rosa-l)}
.nav.active::before{content:"";position:absolute;left:-16px;top:8px;bottom:8px;width:3px;
  border-radius:0 3px 3px 0;background:var(--rosa-l)}
.nav .cnt{margin-left:auto;font-size:.66rem;font-weight:600;background:rgba(244,238,230,.14);
  color:var(--on-sage);padding:2px 7px;border-radius:100px}
.side .foot{margin-top:auto;padding:14px;border:1px solid rgba(244,238,230,.1);border-radius:12px;
  background:rgba(244,238,230,.04);font-size:.7rem;color:rgba(244,238,230,.55);line-height:1.5}
.side .foot b{display:block;color:var(--on-sage);font-weight:500;font-size:.8rem;margin-top:2px}
.side .copy{font-size:.6rem;color:rgba(244,238,230,.35);text-align:center;margin-top:12px;letter-spacing:.04em}

/* botão de fechar a gaveta (só aparece quando ela é gaveta) */
.side-fechar{display:none;position:absolute;top:14px;right:12px;width:36px;height:36px;z-index:3;
  align-items:center;justify-content:center;background:rgba(244,238,230,.08);
  border:1px solid rgba(244,238,230,.18);border-radius:10px;cursor:pointer;color:var(--on-sage)}
.side-fechar svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.side-backdrop{position:fixed;inset:0;z-index:55;background:rgba(42,48,28,.42);
  backdrop-filter:blur(2px);opacity:0;transition:opacity .22s}
.side-backdrop.open{opacity:1}

/* três risquinhos */
.btn-menu{display:none;flex-direction:column;justify-content:center;gap:4px;
  width:40px;height:40px;padding:0 10px;border-radius:10px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);flex:0 0 40px}
.btn-menu span{display:block;height:1.5px;border-radius:2px;background:var(--olive-800);
  transition:transform .22s,opacity .18s}
.btn-menu[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.btn-menu[aria-expanded="true"] span:nth-child(2){opacity:0}
.btn-menu[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

.main{overflow-y:auto;position:relative;background:var(--bg)}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:14px;
  padding:16px 34px;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.topbar .ttl{font-size:.6rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--muted);font-weight:600}
.topbar .ttl b{display:block;font-family:var(--serif);font-size:1.32rem;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--olive-800);margin-top:3px}
.spacer{flex:1}

.pill-badge{font-size:.62rem;font-weight:600;letter-spacing:.06em;
  padding:5px 11px;border-radius:100px;border:1px solid}
.pill-badge.live{color:var(--good);background:var(--good-bg);border-color:rgba(86,105,47,.22)}
.pill-badge.demo{color:var(--rosa-d);background:var(--rosa-100);border-color:rgba(184,107,98,.3)}
.pill-badge.off{color:var(--crit);background:var(--crit-bg);border-color:rgba(164,75,69,.3)}

.filtros{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ctrl{display:flex;align-items:center;gap:8px;background:var(--surface);font-family:var(--sans);
  border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.78rem;
  color:var(--text);font-weight:500;transition:border-color .15s}
.ctrl:hover,.ctrl:focus-within{border-color:var(--sage-l)}
.ctrl svg{width:14px;height:14px;stroke:var(--sage);fill:none;stroke-width:1.6}
.ctrl select,.ctrl input{background:transparent;border:none;color:var(--olive-800);
  font-family:inherit;font-size:.8rem;font-weight:500;cursor:pointer;outline:none}
.ctrl input[type=date]{width:124px}
.ctrl .sep{color:var(--faint)}
.sync{font-size:.7rem;color:var(--muted);display:flex;align-items:center;gap:7px;font-weight:400}
.userbox{display:flex;align-items:center;gap:8px;padding-left:14px;border-left:1px solid var(--line)}
.userbox .ini{width:28px;height:28px;border-radius:50%;background:var(--rosa-100);color:var(--rosa-d);
  border:1px solid rgba(184,107,98,.25);display:flex;align-items:center;justify-content:center;
  font-size:.66rem;font-weight:600;text-transform:uppercase;flex:0 0 28px;letter-spacing:.04em}
.userbox .mail{font-size:.72rem;color:var(--muted);max-width:150px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:1440px){.userbox .mail{display:none}}
.dot{width:7px;height:7px;border-radius:50%;background:#7C9A4E;
  box-shadow:0 0 0 0 rgba(124,154,78,.5);animation:pulse 2.4s infinite}
.dot.off{background:var(--crit);animation:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(124,154,78,.45)}
  70%{box-shadow:0 0 0 7px rgba(124,154,78,0)}100%{box-shadow:0 0 0 0 rgba(124,154,78,0)}}

.view{display:none;padding:34px 34px 70px;max-width:1360px}
.view.show{display:block;animation:fade .45s cubic-bezier(.2,.7,.2,1)}
@keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- tipografia de seção ---------- */
.eyebrow{display:flex;align-items:center;gap:10px;font-size:.64rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--rosa-d);font-weight:600;margin-bottom:12px}
.eyebrow::before{content:"";width:22px;height:1px;background:currentColor;opacity:.7}
.view > h1, .view h1{font-size:clamp(2rem,3.6vw,2.9rem)!important}
.sub{color:var(--muted);font-size:.92rem;max-width:74ch;line-height:1.6;font-weight:400}
.sub b{color:var(--text);font-weight:500}
.secttl{font-family:var(--serif);font-size:1.28rem;font-weight:500;color:var(--olive-800);
  margin:40px 0 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;line-height:1.2}
.secttl .ln{flex:1;height:1px;background:var(--line);min-width:20px}
.secttl small{font-family:var(--sans);font-weight:400;font-size:.74rem;color:var(--muted);letter-spacing:0}
.card .secttl{font-size:1.08rem}

/* etiquetas de procedência do dado */
.datatag{display:inline-flex;align-items:center;gap:6px;font-size:.6rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.1em;padding:4px 10px;border-radius:100px;
  border:1px solid;vertical-align:middle;font-family:var(--sans)}
.datatag .d{width:6px;height:6px;border-radius:50%}
.dt-live{color:var(--good);background:var(--good-bg);border-color:rgba(86,105,47,.18)}
.dt-live .d{background:var(--good)}
.dt-soon{color:var(--rosa-d);background:var(--rosa-50);border-color:rgba(184,107,98,.22)}
.dt-soon .d{background:var(--rosa)}
.dt-inf{color:var(--info);background:var(--info-bg);border-color:rgba(93,116,128,.2)}
.dt-inf .d{background:var(--info)}
.taghead{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:16px}

/* ---------- grid e cartas ---------- */
.grid{display:grid;gap:16px}
.g5{grid-template-columns:repeat(5,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}
.split{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 22px 20px;position:relative;overflow:hidden;box-shadow:var(--shadow);
  transition:box-shadow .2s,transform .2s}
.card::before{content:"";position:absolute;top:0;left:22px;width:28px;height:2px;
  background:var(--rosa);opacity:.0;transition:opacity .2s}
.card:hover{box-shadow:var(--shadow-h);transform:translateY(-1px)}
.card:hover::before{opacity:.9}
.card.flat:hover{transform:none;box-shadow:var(--shadow)}
.card.flat:hover::before{opacity:0}

.klabel{font-size:.64rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
  font-weight:600;display:flex;align-items:center;gap:8px}
.klabel svg{width:14px;height:14px;stroke:var(--rosa);fill:none;stroke-width:1.5}
.kfig{font-family:var(--serif);font-weight:500;font-size:clamp(2rem,3vw,2.6rem);color:var(--olive-800);
  line-height:1;margin:14px 0 10px;letter-spacing:-.01em;font-variant-numeric:lining-nums}
.kfig.accent{color:var(--rosa)}
.kfig.good{color:var(--good)}
.kfig.crit{color:var(--crit)}
.kfig .u{font-family:var(--sans);font-size:.95rem;font-weight:400;color:var(--muted);margin-left:2px}
.kdelta{font-size:.7rem;font-weight:600;display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:100px}
.kdelta svg{width:11px;height:11px;stroke-width:2.2;fill:none;stroke:currentColor}
.up{color:var(--good);background:var(--good-bg)}
.down{color:var(--crit);background:var(--crit-bg)}
.neutral{color:var(--muted);background:var(--surface-3)}
.kfoot{font-size:.76rem;color:var(--muted);margin-top:12px;line-height:1.5;padding-top:12px;border-top:1px solid var(--line-2)}
.kfoot b{color:var(--text);font-weight:600}

/* hero escuro (cobertura 24/7) — o mesmo papel do bloco azul do painel da Adele */
.hero{background:
    radial-gradient(80% 120% at 100% 0%,rgba(231,195,186,.16),transparent 55%),
    linear-gradient(140deg,var(--olive-800),var(--olive-900));
  border-radius:18px;padding:34px 34px;position:relative;overflow:hidden;color:var(--on-sage);
  box-shadow:0 20px 50px -30px rgba(42,48,28,.6)}
.hero::after{content:"";position:absolute;inset:10px;border:1px solid rgba(244,238,230,.08);
  border-radius:12px;pointer-events:none}
.hero .in{position:relative;z-index:2}
.hero .eyebrow{color:var(--rosa-l)}
.hero h2{color:#FFF;font-weight:400}
.hero h2 .accent{color:var(--rosa-l)}
.hero .sub{color:rgba(244,238,230,.72)}
.hero .sub b{color:#FFF}
.hero .kfig{color:#FFF}
.hero .kfig.accent{color:var(--rosa-l)}
.hero .kfig .u{color:rgba(244,238,230,.6)}
.hero .mini,.hero .note,.hero .legend{color:rgba(244,238,230,.6)}
.hero .linewrap{background:rgba(255,255,255,.04);border:1px solid rgba(244,238,230,.1);
  border-radius:12px;padding:14px 12px 6px}
/* o gráfico de linha recebe as cores pelo JS; aqui elas são trocadas para o fundo escuro */
.hero svg path[stroke]{stroke:var(--rosa-l)}
.hero svg circle{fill:var(--rosa-l);stroke:var(--olive-800)}
.hero svg rect{fill:rgba(244,238,230,.07)}
.hero svg .grid line{stroke:rgba(244,238,230,.08)}
.hero svg .axis{fill:rgba(244,238,230,.55)}

/* ---------- barras ---------- */
.legend{display:flex;gap:16px;flex-wrap:wrap;align-items:center;font-size:.72rem;
  color:var(--muted);font-weight:400}
.legend span{display:inline-flex;align-items:center;gap:6px}
.swatch{width:10px;height:10px;border-radius:50%;display:inline-block}
.barrow{display:grid;grid-template-columns:190px 1fr auto;align-items:center;gap:14px;padding:8px 0}
.barrow.larga{grid-template-columns:210px 1fr auto}
.barrow .nm{font-size:.82rem;color:var(--text);font-weight:400;display:flex;align-items:center;gap:8px}
.barrow .nm .mk{width:8px;height:8px;border-radius:50%;flex:0 0 8px}
.track{height:10px;background:var(--surface-3);border-radius:100px;position:relative;overflow:hidden}
.fill{height:100%;border-radius:100px;position:relative;transition:width 1s cubic-bezier(.2,.7,.2,1)}
.fill.conv{position:absolute;top:0;left:0;border-radius:100px;z-index:2}
.barrow .vl{font-size:.84rem;font-weight:600;color:var(--olive-800);
  font-variant-numeric:tabular-nums;min-width:66px;text-align:right}
.barrow .vl small{color:var(--muted);font-weight:400;font-size:.72rem}
/* as barras de percentual (taxa de passagem) chegam com height inline de 20px */
.barrow.larga .track{height:12px!important}

.funnel{display:flex;flex-direction:column;gap:4px}
.fstage{position:relative}
.fbar{height:48px;border-radius:10px;display:flex;align-items:center;padding:0 18px;
  position:relative;overflow:hidden;transition:.25s;cursor:default}
.fbar:hover{filter:brightness(1.06)}
.fbar .fnm{font-size:.84rem;font-weight:500;color:#FFF;z-index:2;letter-spacing:.01em}
.fbar .ftag{font-size:.56rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-left:10px;
  padding:2px 7px;border-radius:100px;background:rgba(255,255,255,.18);color:#FFF;z-index:2}
.fbar .fvl{margin-left:auto;z-index:2;font-family:var(--sans);font-size:1.15rem;font-weight:500;color:#FFF;font-variant-numeric:tabular-nums}
.fconv{display:flex;align-items:center;gap:8px;padding:3px 0 3px 8px;font-size:.72rem;color:var(--muted)}
.fconv .ar{color:var(--faint)}
.fconv b{color:var(--rosa-d);font-weight:600}
.fsaidas{margin:16px 0 6px;padding-top:12px;border-top:1px dashed var(--line);
  font-size:.6rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}

.toggle{display:inline-flex;background:var(--surface);border:1px solid var(--line);
  border-radius:100px;padding:3px;gap:2px}
.toggle button{background:transparent;border:none;color:var(--muted);font-family:inherit;
  font-size:.78rem;font-weight:500;padding:7px 18px;border-radius:100px;cursor:pointer;transition:.15s}
.toggle button.on{background:var(--olive-800);color:#FFF}

/* ---------- gráficos svg ---------- */
.linewrap{position:relative}
svg .grid line{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4}
svg .axis{fill:var(--muted);font-size:10px;font-weight:400;font-family:var(--sans)}
.donut{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.ring{width:136px;height:136px;flex:0 0 136px}

.tt{position:fixed;pointer-events:none;z-index:120;background:var(--olive-900);
  border-radius:9px;padding:8px 12px;font-size:.74rem;
  color:var(--on-sage);opacity:0;transition:opacity .12s;box-shadow:0 12px 30px rgba(42,48,28,.3);
  white-space:nowrap}
.tt b{color:var(--rosa-l);font-weight:600}

/* ---------- tabelas ---------- */
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(90deg,var(--surface) 30%,rgba(255,255,255,0)) left center/22px 100% no-repeat local,
    linear-gradient(270deg,var(--surface) 30%,rgba(255,255,255,0)) right center/22px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgba(52,59,36,.12),transparent) left center/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgba(52,59,36,.12),transparent) right center/12px 100% no-repeat scroll}
.tbl{width:100%;border-collapse:collapse;font-size:.84rem}
.tbl th{text-align:left;font-size:.6rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--muted);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--line)}
.tbl td{padding:12px;border-bottom:1px solid var(--line-2);color:var(--text);vertical-align:middle}
.tbl tbody tr:last-child td{border-bottom:none}
.tbl tr:hover td{background:var(--rosa-50)}
.tbl .who{font-weight:500;color:var(--ink)}
.tbl tr.clik{cursor:pointer}
.tbl tr.selrow td{background:var(--rosa-100)}
.tbl tr.selrow td:first-child{box-shadow:inset 3px 0 0 var(--rosa)}
.plc{text-align:center;white-space:nowrap;padding:8px 6px!important}
.plc .e{font-size:.92rem;display:block;line-height:1.15}
.plc .v{font-size:.66rem;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.num{text-align:right;font-variant-numeric:tabular-nums}
.so-telefone{display:none}

.tag{font-size:.6rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  padding:3px 9px;border-radius:100px;display:inline-block;border:1px solid transparent}
.t-rosa{color:var(--rosa-d);background:var(--rosa-100)}
.t-sage{color:var(--olive);background:var(--sage-100)}
.t-good{color:var(--good);background:var(--good-bg)}
.t-warn{color:var(--warn);background:var(--warn-bg)}
.t-crit{color:var(--crit);background:var(--crit-bg)}
.t-mut{color:var(--muted);background:var(--surface-3)}

/* ---------- botões ---------- */
.btnmini{display:inline-flex;align-items:center;gap:5px;font-size:.72rem;font-weight:500;
  padding:6px 12px;border-radius:100px;border:1px solid transparent;cursor:pointer;
  transition:.15s;font-family:inherit;letter-spacing:.01em}
.btnmini.rosa{background:var(--rosa);color:#FFF}
.btnmini.rosa:hover{background:var(--rosa-d)}
.btnmini.ghost{background:transparent;border-color:var(--line);color:var(--olive-800)}
.btnmini.ghost:hover{border-color:var(--sage-l);background:var(--sage-100)}
.btnmini:disabled{opacity:.4;cursor:not-allowed}
.btnmini.rosa:disabled{background:var(--surface-3);color:var(--muted)}
.btnmini svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2}
.btn-action{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:500;
  padding:10px 18px;border-radius:100px;border:none;background:var(--olive-800);color:#FFF;
  cursor:pointer;font-family:inherit;transition:.15s;letter-spacing:.01em}
.btn-action:hover{background:var(--olive)}
.btn-action:disabled{opacity:.5;cursor:not-allowed}
.btn-action svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2}

/* ---------- avisos e apoio ---------- */
.mini{font-size:.74rem;color:var(--muted);margin-top:2px;line-height:1.45}
.chip{display:inline-flex;align-items:center;gap:7px;font-size:.72rem;font-weight:500;
  color:var(--text);background:var(--surface-2);border:1px solid var(--line);
  padding:5px 11px;border-radius:100px}
.callout{background:var(--rosa-50);border:1px solid rgba(184,107,98,.16);
  border-left:2px solid var(--rosa);border-radius:10px;padding:14px 16px;font-size:.8rem;
  color:var(--text);line-height:1.6}
.callout b{color:var(--rosa-d);font-weight:600}
.callout.inf{background:var(--surface);border-color:var(--line);border-left-color:var(--sage)}
.callout.inf b{color:var(--olive)}
.callout code{background:var(--surface-3);padding:1px 5px;border-radius:4px;font-size:.74rem}
.note{font-size:.72rem;color:var(--muted);margin-top:10px;line-height:1.55}
.note b{color:var(--text);font-weight:600}

.pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:14px;
  font-size:.72rem;color:var(--muted)}
.pager button{background:var(--surface);border:1px solid var(--line);color:var(--olive-800);
  width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:.95rem;font-family:inherit;transition:.15s}
.pager button:hover:not(:disabled){border-color:var(--sage-l);background:var(--sage-100)}
.pager button:disabled{opacity:.35;cursor:default}

.empty{padding:28px 10px;text-align:center;color:var(--muted);font-size:.82rem;line-height:1.6}
.empty b{display:block;font-family:var(--serif);font-weight:500;color:var(--olive-800);font-size:1.02rem;margin-bottom:4px}
.skeleton{background:linear-gradient(90deg,var(--surface-3) 25%,#FAF7F3 50%,var(--surface-3) 75%);
  background-size:200% 100%;animation:sk 1.3s infinite;border-radius:8px;height:14px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

/* ---------- modal e toast ---------- */
.overlay{position:fixed;inset:0;z-index:150;background:rgba(42,48,28,.4);
  backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;padding:20px}
.overlay.open{display:flex}
.modal{background:var(--surface);border-radius:18px;
  padding:28px;width:460px;max-width:100%;box-shadow:0 30px 80px rgba(42,48,28,.3);
  max-height:92vh;overflow-y:auto}
.modal h3{font-size:1.5rem;color:var(--olive-800)}
.modal .fld{margin-top:16px}
.modal label{font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);
  font-weight:600;display:block;margin-bottom:6px}
.modal input,.modal select,.modal textarea{width:100%;background:var(--surface-2);
  border:1px solid var(--line);border-radius:10px;padding:11px 13px;color:var(--ink);
  font-family:inherit;font-size:.9rem;outline:none;transition:.15s}
.modal input:focus,.modal select:focus{border-color:var(--rosa);background:#FFF;box-shadow:0 0 0 3px rgba(184,107,98,.12)}
.modal .actions{display:flex;justify-content:flex-end;gap:10px;margin-top:22px}
.modal .req{color:var(--rosa-d)}

.toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--olive-900);border-radius:12px;
  padding:13px 20px;font-size:.84rem;color:var(--on-sage);opacity:0;transition:.25s;z-index:200;
  box-shadow:0 16px 40px rgba(42,48,28,.3);max-width:min(560px,92vw);text-align:center}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.erro{background:var(--crit)}

/* ---------- login ---------- */
.gate{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:24px;
  background:
    radial-gradient(60% 50% at 85% 10%,rgba(231,195,186,.35),transparent 60%),
    radial-gradient(50% 50% at 10% 90%,rgba(195,203,174,.35),transparent 60%),
    var(--bg)}
.gate.open{display:flex}
.gate .box{background:var(--surface);border:1px solid var(--line);border-radius:22px;
  padding:40px 36px 34px;width:410px;max-width:100%;box-shadow:var(--shadow-h);text-align:left}
.gate .gate-logo{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--rosa);margin-bottom:26px}
.gate .gate-logo svg{width:52px;height:auto}
.gate .gate-logo .wm{font-family:var(--serif);font-size:1.5rem;letter-spacing:.16em;color:var(--olive-800);padding-left:.16em;line-height:1}
.gate .gate-logo .wm small{display:block;font-family:var(--sans);font-size:.55rem;letter-spacing:.42em;color:var(--muted);margin-top:8px;text-align:center;padding-left:.42em}
.gate .eyebrow{justify-content:center}
.gate .eyebrow::before{display:none}
.gate h2{font-size:1.7rem;margin-bottom:6px;text-align:center}
.gate .sub{text-align:center;margin-left:auto;margin-right:auto}
.gate .fld label{font-size:.62rem;text-transform:uppercase;letter-spacing:.16em;color:var(--muted);font-weight:600;display:block;margin-bottom:6px}
.gate input{border-radius:10px!important;padding:11px 13px!important;background:var(--surface-2)!important;
  border:1px solid var(--line)!important;font-size:.9rem;color:var(--ink);outline:none}
.gate input:focus{border-color:var(--rosa)!important;background:#FFF!important;box-shadow:0 0 0 3px rgba(184,107,98,.12)}
.gate .btn-action{border-radius:100px;padding:12px 18px;margin-top:14px!important}
.gate .msg{font-size:.76rem;color:var(--crit);margin-top:10px;min-height:16px;font-weight:500}

@media(max-width:1180px){
  .g5,.g4{grid-template-columns:repeat(2,1fr)}
  .split,.g3{grid-template-columns:1fr}
}

/* =====================================================================
   Gaveta (☰) — vale para tablet e celular. Acima de 1024px a barra
   lateral continua fixa, que é como a Amanda usa no computador.
   ===================================================================== */
@media(max-width:1024px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:0;top:0;bottom:0;width:min(286px,84vw);z-index:60;
    transform:translateX(-100%);transition:transform .25s cubic-bezier(.2,.7,.2,1);
    box-shadow:none;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .side.open{transform:none;box-shadow:18px 0 50px -20px rgba(42,48,28,.5)}
  .side-fechar{display:flex}
  .side-backdrop{display:block}
  .side-backdrop[hidden]{display:none}
  .btn-menu{display:flex}
  body.menu-aberto .main{overflow:hidden}

  /* alvos de toque: nada abaixo de ~40px */
  .btnmini{padding:9px 14px;font-size:.74rem;min-height:36px}
  .btn-action{padding:11px 18px;min-height:42px}
  .toggle button{padding:10px 18px;min-height:40px}
  .pager button{width:38px;height:38px;font-size:1rem}
  .ctrl{padding:9px 12px;min-height:42px}
  /* 16px evita o zoom automático do iOS ao focar o campo */
  .ctrl select,.ctrl input,.modal input,.modal select,.modal textarea,.gate input{font-size:16px}
  .ctrl input[type=date]{width:auto;min-width:104px}
  .ctrl input,.ctrl select{min-height:34px}
  .topbar{padding:12px 22px}
  .view{padding:26px 22px 60px}
}

@media(max-width:820px){
  .g5,.g4,.g2{grid-template-columns:1fr}
  .view{padding:20px 16px 48px}
  .barrow{grid-template-columns:130px 1fr auto}
  .barrow.larga{grid-template-columns:150px 1fr auto}
  .topbar{padding:10px 16px;gap:10px}
  .filtros{order:5;flex:1 1 100%;display:flex;gap:8px;overflow-x:auto;padding-bottom:2px;
    background:
      radial-gradient(farthest-side at 100% 50%,rgba(52,59,36,.14),transparent) right center/12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 0 50%,rgba(52,59,36,.14),transparent) left center/12px 100% no-repeat scroll}
  .filtros .ctrl{flex:0 0 auto}
  .hero{padding:24px 18px}
  .hero::after{inset:6px}
  .donut{justify-content:center;gap:16px}
  /* KPIs em duas colunas no celular: menos rolagem para a Amanda */
  #ckKpis,#npsKpis,#pdKpis,#funKpis{grid-template-columns:repeat(2,1fr)}
  #ckKpis .card,#npsKpis .card,#pdKpis .card,#funKpis .card{padding:16px 14px 14px}
}

@media(max-width:640px){
  .view{padding:16px 13px 44px}
  .topbar{padding:8px 13px;gap:8px;row-gap:8px}
  .topbar .ttl{font-size:0;line-height:1}
  .topbar .ttl b{font-size:1.12rem;margin:0}
  .sync{display:none}
  .pill-badge{order:4;font-size:.56rem;padding:4px 8px}
  .userbox{order:4;padding-left:8px;gap:6px}
  .userbox .btnmini{font-size:0;padding:9px;gap:0}
  .userbox .btnmini svg{width:15px;height:15px}
  .barrow,.barrow.larga{grid-template-columns:1fr auto;gap:6px 10px;padding:9px 0}
  .barrow .nm{grid-column:1/-1;font-size:.8rem}
  .barrow .vl{min-width:0}
  .fbar{height:44px;padding:0 13px}
  .fbar .fnm{font-size:.78rem}
  .fbar .fvl{font-size:1.12rem}
  .secttl{font-size:1.12rem;margin:30px 0 12px}
  .view h1{font-size:1.85rem!important}
  svg .axis{font-size:13px}
  .ring{width:104px;height:104px;flex:0 0 104px}
  .kfig{font-size:clamp(1.7rem,8vw,2.2rem)}
  .kfoot{font-size:.7rem;padding-top:10px;margin-top:10px}
  .tbl th,.tbl td{white-space:nowrap}
  .tbl td .who{white-space:normal}
  .col-extra{display:none}
  .so-telefone{display:block;font-size:.68rem;font-weight:400;color:var(--muted);margin-top:2px}
  .tt{white-space:normal;max-width:min(78vw,320px);line-height:1.35}
  .toast{bottom:calc(16px + env(safe-area-inset-bottom));font-size:.8rem}
  .modal{padding:20px}
  .gate .box{padding:30px 22px 26px}
  .card{padding:18px 16px 16px}
}

/* ---------- ajustes finos ---------- */
/* topo em uma linha só no computador (o título mais longo empurrava o usuário para baixo) */
@media(min-width:821px){
  .topbar{flex-wrap:nowrap}
  .topbar .ttl{white-space:nowrap}
  .filtros{flex-wrap:nowrap}
  .ctrl select{max-width:170px}
}
@media(max-width:1500px){.sync{display:none}}
/* taxa de contenção: o anel fica no meio do cartão, que estica até a altura dos KPIs */
#agente .split > .card.flat:first-child{display:flex;flex-direction:column}
#agente .split > .card.flat:first-child .donut{flex:1;justify-content:center}
.tbl .tag{white-space:nowrap}