:root{
  color-scheme: dark;
  --ink:#10141A;
  --surface:#171D25;
  --surface-raised:#1E2630;
  --border:#2A323D;
  --text-primary:#EDEFF2;
  --text-secondary:#8B96A5;
  --text-tertiary:#5B6572;
  --accent:#3E8FB0;
  --accent-soft:rgba(62,143,176,.14);
  --accent-strong:#5AA9C7;
  --alert:#C1652F;
  --alert-soft:rgba(193,101,47,.15);
  --positive:#6FA96C;
  --positive-soft:rgba(111,169,108,.15);
  --radius-sm:6px;
  --radius-md:10px;
  --rail-w:76px;
  --rail-w-expanded:248px;
}

*{box-sizing:border-box;}
html,body{height:100%;}
html{
  scrollbar-width:thin;
  scrollbar-color:var(--border) var(--ink);
}
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--ink); }
::-webkit-scrollbar-thumb{ background:var(--border); border-radius:100px; border:2px solid var(--ink); }
::-webkit-scrollbar-thumb:hover{ background:var(--text-tertiary); }
body{
  margin:0;
  font-family:'IBM Plex Sans', system-ui, sans-serif;
  background:var(--ink);
  color:var(--text-primary);
  -webkit-font-smoothing:antialiased;
}
.mono{ font-family:'IBM Plex Mono', ui-monospace, monospace; }
button{ font-family:inherit; }
input, select, textarea{ font-family:inherit; }

svg.icon{ width:20px; height:20px; flex-shrink:0; }

/* ---------- LOGIN ---------- */
#login-screen{
  min-height:100vh;
  display:grid;
  grid-template-columns: 44% 56%;
}
@media (max-width:820px){
  #login-screen{ grid-template-columns: 1fr; }
  .login-brand{ display:none; }
}
.login-brand{
  background:
    repeating-linear-gradient(115deg, rgba(62,143,176,0.05) 0px, rgba(62,143,176,0.05) 1px, transparent 1px, transparent 64px),
    var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:48px;
}
.brand-mark{ display:flex; align-items:center; gap:12px; }
.brand-mark span{ font-size:17px; font-weight:600; letter-spacing:.01em; }
.brand-copy{ max-width:340px; }
.brand-copy p{
  font-size:22px;
  line-height:1.5;
  color:var(--text-primary);
  font-weight:400;
  margin:0;
}
.brand-copy p em{ color:var(--accent-strong); font-style:normal; }
.brand-foot{ color:var(--text-tertiary); font-size:13px; }

.login-form-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px;
}
.login-form{ width:100%; max-width:340px; }
.login-form h1{ font-size:24px; font-weight:600; margin:0 0 6px; }
.login-form .sub{ color:var(--text-secondary); font-size:14px; margin:0 0 32px; }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; color:var(--text-secondary); margin-bottom:7px; }
.field input, .field select{
  width:100%;
  background:var(--surface-raised);
  border:1px solid var(--border);
  color:var(--text-primary);
  border-radius:var(--radius-sm);
  padding:11px 12px;
  font-size:14px;
  outline:none;
  transition:border-color .15s;
}
.field input:focus, .field select:focus{ border-color:var(--accent); }
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  border:none;
  border-radius:var(--radius-sm);
  padding:11px 18px;
  font-size:14px;
  font-weight:500;
  cursor:pointer;
  transition:background .15s, opacity .15s;
}
.btn:focus-visible{ outline:2px solid var(--accent-strong); outline-offset:2px; }
.btn-primary{ background:var(--accent); color:#0A1116; }
.btn-primary:hover{ background:var(--accent-strong); }
.btn-primary.full{ width:100%; margin-top:8px; }
.btn-ghost{ background:transparent; color:var(--text-secondary); border:1px solid var(--border); }
.btn-ghost:hover{ color:var(--text-primary); border-color:var(--text-tertiary); }
.login-note{ margin-top:20px; font-size:12.5px; color:var(--text-tertiary); }
.brand-credito{ margin-top:6px; font-size:12px; opacity:.7; }
.campo-senha{ position:relative; }
.campo-senha input{ padding-right:42px; }
.icon-btn-senha{
  position:absolute; right:4px; top:50%; transform:translateY(-50%);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; color:var(--text-tertiary); cursor:pointer; border-radius:var(--radius-sm);
}
.icon-btn-senha:hover{ color:var(--text-primary); background:var(--surface); }
.form-error{
  background:var(--alert-soft); color:var(--alert);
  font-size:13px; padding:10px 12px; border-radius:var(--radius-sm);
  margin:-6px 0 18px;
}
.flash-sucesso{
  background:var(--positive-soft); color:var(--positive);
  font-size:13.5px; padding:12px 16px; border-radius:var(--radius-sm);
  margin-bottom:16px;
}
.flash-sucesso strong{ color:var(--positive); }

/* ---------- APP SHELL ---------- */
#app-shell{ display:none; min-height:100vh; }
#app-shell.active{ display:block; }

.sidebar{
  width:var(--rail-w);
  background:var(--surface);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  transition:width .18s ease;
  overflow:hidden;
  position:fixed;
  top:0; left:0; bottom:0;
  z-index:50;
}
.sidebar:hover{ width:var(--rail-w-expanded); box-shadow:8px 0 24px rgba(0,0,0,.35); }

.sidebar-top{
  height:72px;
  display:flex;
  align-items:center;
  padding:0 26px;
  border-bottom:1px solid var(--border);
  gap:12px;
  cursor:pointer;
}
.sidebar-top .brand-label{
  font-size:15px; font-weight:600;
  opacity:0; white-space:nowrap;
  transition:opacity .15s;
}
.sidebar:hover .brand-label{ opacity:1; }

.sidebar-nav{ flex:1; padding:16px 14px; display:flex; flex-direction:column; gap:4px; }
.nav-item{
  display:flex; align-items:center; gap:14px;
  padding:11px 12px;
  border-radius:var(--radius-sm);
  color:var(--text-secondary);
  cursor:pointer;
  white-space:nowrap;
  border:none; background:transparent; width:100%;
  text-align:left;
}
.nav-item svg{ color:var(--text-tertiary); }
.nav-item .label{ opacity:0; transition:opacity .12s; font-size:14px; }
.sidebar:hover .nav-item .label{ opacity:1; }
.nav-item:hover{ background:var(--surface-raised); color:var(--text-primary); }
.nav-item:hover svg{ color:var(--text-primary); }
.nav-item.is-active{ background:var(--accent-soft); color:var(--accent-strong); }
.nav-item.is-active svg{ color:var(--accent-strong); }

.nav-group{ display:flex; flex-direction:column; }
.nav-chevron{ margin-left:auto; width:14px; height:14px; flex-shrink:0; transition:transform .15s, opacity .12s; opacity:0; }
.sidebar:hover .nav-chevron{ opacity:1; }
.nav-parent.is-open .nav-chevron{ transform:rotate(180deg); }
.nav-submenu{
  max-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:max-height .2s ease;
}
.nav-submenu.is-open{ max-height:0; }
.sidebar:hover .nav-submenu.is-open{ max-height:320px; }
.nav-subitem{
  background:transparent;
  border:none;
  color:var(--text-secondary);
  font-size:13px;
  text-align:left;
  padding:9px 12px 9px 48px;
  cursor:pointer;
  white-space:nowrap;
  border-radius:var(--radius-sm);
  opacity:0;
  transition:opacity .12s, background .15s, color .15s;
}
.sidebar:hover .nav-subitem{ opacity:1; }
.nav-subitem:hover{ background:var(--surface-raised); color:var(--text-primary); }
.nav-subitem.is-active{ background:var(--accent-soft); color:var(--accent-strong); }

.sidebar-foot{
  border-top:1px solid var(--border);
  padding:14px 15px 14px 21px;
  display:flex;
  align-items:center;
  gap:12px;
}
.avatar{
  width:34px; height:34px; border-radius:50%;
  background:var(--accent-soft);
  color:var(--accent-strong);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;
  flex-shrink:0;
}
.sidebar-foot .who{
  max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  transition:opacity .12s, max-width .18s;
}
.sidebar:hover .sidebar-foot .who{ max-width:160px; opacity:1; }
.sidebar-foot .who .name{ font-size:13.5px; font-weight:500; white-space:nowrap; }
.sidebar-foot .who .role{ font-size:11.5px; color:var(--text-tertiary); white-space:nowrap; }
.logout-link{
  max-width:0; opacity:0; overflow:hidden; flex-shrink:0;
  border-width:0; padding:0;
  pointer-events:none;
  transition:opacity .12s, max-width .18s;
}
.sidebar:hover .logout-link{
  max-width:32px; opacity:1; border-width:1px; padding:0;
  margin-left:auto;
  pointer-events:auto;
}

/* ---------- MAIN ---------- */
.main{ margin-left:var(--rail-w); min-height:100vh; display:flex; flex-direction:column; }
.topbar{
  height:72px;
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 32px;
}
.topbar h2{ font-size:18px; font-weight:600; margin:0; }
.topbar .sub{ font-size:13px; color:var(--text-tertiary); margin-top:2px; }
.topbar-actions{ display:flex; align-items:center; gap:12px; }

.view{ display:none; }
.view.is-active{ display:block; }
.view-body{ padding:28px 32px 48px; }

input[type="date"]{
  background:var(--surface-raised);
  border:1px solid var(--border);
  color:var(--text-primary);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  font-size:13.5px;
}

/* ---------- LISTA COLABORADORES ---------- */
.list{ border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; }
.collab-row{ border-bottom:1px solid var(--border); background:var(--surface); }
.collab-row:last-child{ border-bottom:none; }
.collab-row-head{
  display:flex; align-items:center; gap:14px;
  padding:14px 18px;
  cursor:pointer;
}
.collab-row-head:hover{ background:var(--surface-raised); }
.collab-row-head .chev{ color:var(--text-tertiary); transition:transform .15s; margin-left:auto; }
.collab-row.is-open .chev{ transform:rotate(180deg); }
.collab-name{ font-size:14.5px; font-weight:500; }
.collab-tag{ font-size:11.5px; color:var(--text-tertiary); }
.icon-btn{
  background:transparent; border:1px solid var(--border); border-radius:var(--radius-sm);
  width:32px; height:32px; display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); cursor:pointer; flex-shrink:0;
}
.icon-btn:hover{ border-color:var(--text-tertiary); color:var(--text-primary); }
.icon-btn.alert{ color:var(--alert); border-color:transparent; background:var(--alert-soft); }
.icon-btn.alert:hover{ background:var(--alert); color:#160C06; }

.collab-detail{ display:none; padding:0 18px 22px 52px; }
.collab-row.is-open .collab-detail{ display:block; }
.detail-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
  gap:16px 24px; margin-top:6px;
}
.detail-item .k{ font-size:11.5px; color:var(--text-tertiary); margin-bottom:4px; }
.detail-item .v{ font-size:14px; }
.detail-item .v.mono{ font-size:14px; }
.lines-row{ display:flex; gap:6px; flex-wrap:wrap; margin-top:3px; }
.pill{
  font-size:11.5px; padding:3px 9px; border-radius:100px;
  background:var(--surface-raised); border:1px solid var(--border); color:var(--text-secondary);
}

/* ---------- CHAMADAS PERDIDAS ---------- */
table.calls{ width:100%; border-collapse:collapse; }
table.calls th{
  text-align:left; font-size:11.5px; font-weight:500; color:var(--text-tertiary);
  padding:12px 18px; border-bottom:1px solid var(--border);
}
table.calls td{
  padding:13px 18px; border-bottom:1px solid var(--border); font-size:14px;
}
table.calls tr:last-child td{ border-bottom:none; }
.status-tag{
  font-size:11.5px; padding:3px 10px; border-radius:100px; display:inline-block;
}
.status-tag.pendente{ background:var(--alert-soft); color:var(--alert); }
.status-tag.retornada{ background:var(--positive-soft); color:var(--positive); }

/* ---------- RELATÓRIOS (placeholder) ---------- */
.placeholder-card{
  border:1px dashed var(--border); border-radius:var(--radius-md);
  padding:48px 32px; text-align:center; color:var(--text-secondary);
}
.placeholder-card h3{ color:var(--text-primary); font-size:16px; margin:0 0 8px; }
.placeholder-card p{ font-size:13.5px; max-width:420px; margin:0 auto; line-height:1.6; }

/* ---------- INÍCIO ---------- */
.welcome-panel{
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface);
  padding:40px 36px;
  max-width:520px;
  display:flex; flex-direction:column; gap:16px;
}
.welcome-panel p{ font-size:15px; line-height:1.65; color:var(--text-secondary); margin:0; }
.promocao-card{
  border:1px solid var(--border); border-radius:var(--radius-md);
  background:var(--surface);
  padding:24px 28px;
  max-width:520px;
  margin-top:16px;
}
.promocao-head{
  display:flex; align-items:center; gap:10px;
  font-size:14.5px; font-weight:600; color:var(--text-primary);
  margin-bottom:14px;
}
.promocao-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.promocao-lista li{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:13.5px; color:var(--text-secondary);
  padding-bottom:10px; border-bottom:1px solid var(--border);
}
.promocao-lista li:last-child{ border-bottom:none; padding-bottom:0; }
.promocao-lista strong{ color:var(--text-primary); font-weight:500; }
.promocao-nivel{ font-size:12px; color:var(--positive); white-space:nowrap; }

/* ---------- PROGRESSO DE NÍVEL (detalhe do colaborador) ---------- */
.progresso-nivel{
  border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); padding:14px 16px; margin-top:16px;
}
.progresso-nivel-head{
  display:flex; align-items:center; gap:8px;
  font-size:13px; font-weight:600; color:var(--text-primary);
  margin-bottom:10px;
}
.progresso-lista{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.progresso-lista li{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  font-size:12.5px; color:var(--text-secondary);
}
.progresso-lista li .k{ color:var(--text-tertiary); }
.progresso-lista li.ok .v{ color:var(--positive); font-weight:500; }
.progresso-lista li.pendente .v{ color:var(--text-secondary); }
.progresso-nivel-apto{ border-color:var(--positive); }
.progresso-nivel-apto .progresso-nivel-head svg{ color:var(--positive); }
.progresso-nivel-max{
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--text-tertiary);
  margin-top:16px; padding:10px 14px;
  border:1px dashed var(--border); border-radius:var(--radius-sm);
}

/* ---------- DIALOGS ---------- */
dialog{
  border:1px solid var(--border);
  background:var(--surface-raised);
  color:var(--text-primary);
  border-radius:var(--radius-md);
  padding:0;
  width:520px;
  max-width:90vw;
}
dialog.dialog-wide{ width:760px; }
dialog::backdrop{ background:rgba(6,8,11,.6); }
.dialog-head{
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px; border-bottom:1px solid var(--border);
}
.dialog-head h3{ margin:0; font-size:16px; font-weight:600; }
.dialog-body{ padding:20px 24px; }
.dialog-grid{ display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
.dialog-grid .col{ min-width:0; }
.dialog-foot{
  padding:16px 24px; border-top:1px solid var(--border);
  display:flex; justify-content:flex-end; gap:10px;
}
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.checks{ display:flex; gap:10px 16px; flex-wrap:wrap; }
.checks-submenu{
  display:flex; flex-wrap:wrap; gap:10px 12px;
  margin:10px 0 0 24px; padding-left:12px;
  border-left:2px solid var(--border);
}
.checks-submenu .check-item{ font-size:12.5px; color:var(--text-secondary); }
.check-item{ display:flex; align-items:center; gap:6px; font-size:13px; line-height:14px; color:var(--text-secondary); cursor:pointer; position:relative; }
/* Esconde o controle nativo por completo — o navegador não desenha mais
   nada sozinho, só usamos ele pra guardar o estado (marcado/desmarcado)
   e continuar acessível/clicável. Tudo visual é desenhado por nós abaixo. */
.check-item input[type="checkbox"],
.check-item input[type="radio"]{
  position:absolute;
  opacity:0;
  width:14px; height:14px;
  margin:0;
  cursor:pointer;
  z-index:1;
}
.check-item::before{
  content:'';
  display:inline-block;
  flex-shrink:0;
  width:14px; height:14px;
  border:1.5px solid var(--border);
  border-radius:4px;
  background:var(--surface-raised);
  transition:background .12s, border-color .12s;
  box-sizing:border-box;
}
/* O ajuste fino de alinhamento vertical é só pro checkbox — o radio
   (usado no Mapeamento/Plantão) já estava centralizado do jeito certo. */
.check-item:has(input[type="checkbox"])::before{
  position:relative;
  top:-1px;
}
.check-item:has(input[type="radio"])::before{ border-radius:50%; }
.check-item:hover::before{ border-color:var(--accent); }
.check-item:has(input:checked)::before{
  background:var(--accent);
  border-color:var(--accent);
}
.check-item::after{
  content:'';
  position:absolute;
  left:7px; top:50%;
  width:4px; height:8px;
  border:solid var(--text-primary);
  border-width:0 1.6px 1.6px 0;
  transform:translate(-50%,-58%) rotate(45deg);
  opacity:0;
}
.check-item:has(input[type="checkbox"])::after{ top:6px; }
.check-item:has(input[type="radio"])::after{
  left:3px; width:6px; height:6px;
  border:none; border-radius:50%;
  background:var(--text-primary);
  transform:translateY(-50%) rotate(0deg);
}
.check-item:has(input:checked)::after{ opacity:1; }

/* Estado "indeterminado" (tracinho) — usado quando só parte dos itens de um
   grupo (ex: submenu de Relatórios) está marcada */
.check-item:has(input:indeterminate)::before{
  background:var(--accent);
  border-color:var(--accent);
}
.check-item:has(input:indeterminate)::after{
  opacity:1;
  left:3px; top:6px;
  width:8px; height:0;
  border:none;
  border-top:1.6px solid var(--text-primary);
  transform:translateY(-50%);
}

.hint{ font-size:12px; color:var(--text-tertiary); margin-top:5px; }
.seletor-periodo{ display:flex; gap:8px; align-items:center; }
.seletor-periodo select,
.seletor-periodo input{
  background:var(--surface-raised);
  border:1px solid var(--border);
  color:var(--text-primary);
  border-radius:var(--radius-sm);
  padding:9px 12px;
  font-size:13.5px;
  font-family:'IBM Plex Sans', sans-serif;
  outline:none;
  transition:border-color .15s;
}
.seletor-periodo select{ cursor:pointer; appearance:none; -webkit-appearance:none; -moz-appearance:none; }

/* ---------- MENU SUSPENSO CUSTOMIZADO ---------- */
.select-custom{ position:relative; display:inline-block; }
.select-custom-trigger{
  background:var(--surface-raised);
  border:1px solid var(--border);
  color:var(--text-primary);
  border-radius:var(--radius-sm);
  padding:6px 12px;
  font-size:13.5px;
  font-family:'IBM Plex Sans', sans-serif;
  cursor:pointer;
  min-width:56px;
  text-align:left;
}
.select-custom-trigger:hover{ border-color:var(--text-tertiary); }
.select-custom.is-open .select-custom-trigger{ border-color:var(--accent); }
.select-custom-panel{
  position:absolute;
  top:calc(100% + 4px);
  left:0;
  min-width:100%;
  max-height:220px;
  overflow-y:auto;
  background:var(--surface-raised);
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  box-shadow:0 8px 24px rgba(0,0,0,.4);
  z-index:80;
  display:none;
  scrollbar-width:thin;
  scrollbar-color:var(--border) var(--surface-raised);
}
.select-custom-panel::-webkit-scrollbar{ width:8px; }
.select-custom-panel::-webkit-scrollbar-track{ background:var(--surface-raised); }
.select-custom-panel::-webkit-scrollbar-thumb{ background:var(--border); border-radius:100px; }
.select-custom.is-open .select-custom-panel{ display:block; }
.select-custom-option{
  padding:8px 12px;
  font-size:13.5px;
  color:var(--text-secondary);
  cursor:pointer;
  white-space:nowrap;
}
.select-custom-option:hover{ background:var(--surface); color:var(--text-primary); }
.select-custom-option.is-selected{ background:var(--accent-soft); color:var(--accent-strong); }
.seletor-periodo input[type="number"]{ width:76px; font-family:'IBM Plex Mono', ui-monospace, monospace; }
.seletor-periodo select:focus,
.seletor-periodo input:focus{ border-color:var(--accent); }

/* ---------- CARROSSEL DE PERÍODO (Plantão) ---------- */
.carrossel-periodo{ display:flex; align-items:center; gap:10px; }
.carrossel-btn{
  width:32px; height:32px; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface-raised);
  display:flex; align-items:center; justify-content:center;
  color:var(--text-secondary); cursor:pointer; text-decoration:none;
  transition:border-color .15s, color .15s;
}
.carrossel-btn:hover{ border-color:var(--accent); color:var(--text-primary); }
.carrossel-btn:first-child svg{ transform:rotate(90deg); }
.carrossel-btn:last-child svg{ transform:rotate(-90deg); }
.carrossel-label{
  min-width:110px; text-align:center; font-size:13.5px; font-weight:500;
  font-family:'IBM Plex Mono', ui-monospace, monospace; color:var(--text-primary);
}
.readonly-field{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  padding:11px 12px; font-size:14px; color:var(--text-secondary);
}

/* ---------- PLANILHA DE SATISFAÇÃO ---------- */
.planilha-outer{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  overflow:hidden; /* recorta a barra de rolagem nos cantos arredondados */
}
.planilha-wrap{
  overflow-x:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--border) var(--surface);
}
.planilha-wrap::-webkit-scrollbar{ height:10px; }
.planilha-wrap::-webkit-scrollbar-track{ background:var(--surface); }
.planilha-wrap::-webkit-scrollbar-thumb{ background:var(--border); border-radius:100px; border:2px solid var(--surface); }
.planilha-wrap::-webkit-scrollbar-thumb:hover{ background:var(--text-tertiary); }
table.planilha{
  border-collapse:separate;
  border-spacing:0;
  width:100%;
  font-size:13px;
}
table.planilha th, table.planilha td{
  border-right:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:7px 9px;
  text-align:center;
  white-space:nowrap;
}
table.planilha th:first-child, table.planilha td:first-child{ border-left:1px solid var(--border); }
table.planilha thead th{ border-top:1px solid var(--border); }
table.planilha thead th{
  background:var(--surface-raised);
  font-weight:600;
  font-size:11.5px;
  color:var(--text-secondary);
}
table.planilha .nome-col{
  text-align:left;
  position:sticky;
  left:0;
  background:var(--surface);
  min-width:170px;
  z-index:1;
}
table.planilha .nome-extra{ font-size:10.5px; color:var(--text-tertiary); margin-top:2px; font-family:'IBM Plex Mono', ui-monospace, monospace; }
table.planilha thead .nome-col{ background:var(--surface-raised); z-index:2; }
table.planilha input{
  width:48px;
  background:transparent;
  border:none;
  color:var(--text-primary);
  text-align:center;
  font-size:13px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
}
table.planilha input::placeholder{ color:var(--text-tertiary); }
table.planilha input:focus{
  outline:1px solid var(--accent);
  border-radius:4px;
  background:var(--surface-raised);
}
table.planilha .media-col{ font-weight:600; font-family:'IBM Plex Mono', ui-monospace, monospace; }
table.planilha tr.total-row td{
  font-weight:600;
  background:var(--surface-raised);
  font-family:'IBM Plex Mono', ui-monospace, monospace;
}
table.planilha tr.total-row .nome-col{ font-family:'IBM Plex Sans', sans-serif; }

/* ---------- PLANTÃO ---------- */
table.planilha tr.plantao-fds td{ background:rgba(147,51,234,.10); }
table.planilha tr.plantao-fds .nome-col{ background:rgba(147,51,234,.10); }
table.planilha tr.plantao-fds td:nth-child(2){ color:#C7A6F0; font-weight:600; }
table.planilha.planilha-compacta th,
table.planilha.planilha-compacta td{ padding:2px 8px; font-size:12px; line-height:1.3; }
table.planilha.planilha-compacta .nome-col{ min-width:120px; }
table.planilha.planilha-compacta .icon-btn{
  width:20px; height:20px; padding:0; border:none; background:transparent;
}
table.planilha.planilha-compacta .icon-btn:hover{ color:var(--accent-strong); }
table.planilha.planilha-compacta th.col-plantao-acao,
table.planilha.planilha-compacta td.col-plantao-acao{ width:1%; white-space:nowrap; text-align:right; padding-right:10px; }
.planilha-whatsapp thead th{ background:var(--positive-soft); color:var(--positive); }
.planilha-ligacao thead th{ background:var(--accent-soft); color:var(--accent-strong); }

.export-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:24px;
  margin-bottom:16px;
}
.export-titulo{ font-size:15px; font-weight:600; margin:0 0 16px; color:var(--text-primary); }
.export-card.exportando .col-plantao-acao{ display:none; }

/* ---------- RELATÓRIO GERAL ---------- */
.rg-capa{ text-align:center; padding:32px 0 28px; border-bottom:1px solid var(--border); margin-bottom:24px; }
.rg-capa h1{ font-size:22px; font-weight:600; margin:0 0 10px; }
.rg-capa-periodo{ font-size:13px; letter-spacing:.06em; color:var(--accent-strong); font-weight:600; margin-bottom:14px; }
.rg-capa-supervisor{ font-size:13px; color:var(--text-tertiary); }
.rg-texto{ margin-bottom:28px; }
.rg-texto p{ font-size:14px; line-height:1.7; color:var(--text-secondary); margin:0 0 12px; }
.textarea-relatorio{
  width:100%; background:var(--surface-raised); border:1px solid var(--border); color:var(--text-primary);
  border-radius:var(--radius-sm); padding:11px 12px; font-size:14px; line-height:1.6;
  font-family:'IBM Plex Sans', sans-serif; resize:vertical;
}
.texto-adicional-print{ display:none; white-space:pre-wrap; font-size:14px; line-height:1.7; color:var(--text-secondary); }

/* ---------- CAMPO DE COLAR CHAMADAS PERDIDAS ---------- */
.textarea-colar-chamadas{
  width:100%;
  background:var(--surface-raised);
  border:1px solid var(--border);
  color:var(--text-primary);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-family:'IBM Plex Mono', ui-monospace, monospace;
  font-size:12.5px;
  line-height:1.6;
  resize:vertical;
}
.textarea-colar-chamadas::placeholder{ color:var(--text-tertiary); }
.textarea-colar-chamadas:focus{ outline:none; border-color:var(--accent); }
.rg-titulo{ font-size:15px; font-weight:600; margin:28px 0 12px; }
.rg-coletivos{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(160px,1fr)); gap:1px;
  background:var(--border); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; margin-top:16px;
}
.rg-coletivo-item{ background:var(--surface); padding:12px 14px; }
.rg-coletivo-item span{ display:block; font-size:11px; color:var(--text-tertiary); margin-bottom:4px; }
.rg-coletivo-item strong{ font-size:15px; font-family:'IBM Plex Mono', ui-monospace, monospace; }
.rg-coletivo-total{ background:var(--accent-soft); }
.rg-coletivo-total strong{ color:var(--accent-strong); }
.rg-grafico-wrap{ max-width:700px; margin:0 auto 8px; }

/* ---------- MAPEAMENTO ---------- */
.mapa-zona{ margin-bottom:32px; }
.mapa-zona-titulo{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mapa-zona-titulo h3{ font-size:15px; font-weight:600; margin:0; }
.mapa-grid{ display:grid; gap:10px; }
.mapa-mesa{
  border:1px solid var(--border); border-radius:var(--radius-md);
  padding:14px 16px; cursor:pointer; transition:border-color .15s, background .15s;
  display:flex; flex-direction:column; gap:4px;
  width:140px; box-sizing:border-box;
}
.mapa-mesa:hover{ border-color:var(--accent); }
.mapa-mesa-rotulo{ font-size:11px; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em; }
.mapa-mesa-nome{ font-size:14px; font-weight:500; color:var(--text-primary); }
.mapa-mesa.vaga{ background:var(--surface); border-style:dashed; }
.mapa-mesa.vaga .mapa-mesa-nome{ color:var(--text-tertiary); font-style:italic; font-weight:400; }
.mapa-mesa.ocupada{ background:var(--accent-soft); }
.mapa-mesa.ocupada .mapa-mesa-nome{ color:var(--accent-strong); }
.mesa-opcao{ padding:7px 4px; border-radius:var(--radius-sm); }
.mesa-opcao:hover{ background:var(--surface-raised); }
.mesa-opcao-aviso{ font-size:11.5px; color:var(--alert); margin-left:4px; }
.export-card.exportando .btn-nova-mesa{ display:none; }

.only-print, .only-print-block{ display:none; }

@media print{
  body *{ visibility:hidden; }
  #relatorio-geral-imprimir, #relatorio-geral-imprimir *{ visibility:visible; }
  #relatorio-geral-imprimir{ position:absolute; left:0; top:0; width:100%; }
  .only-screen{ display:none !important; }
  .only-print, .only-print-block{ display:block !important; }
  .textarea-relatorio{ display:none; }
  .texto-adicional-print{ display:block !important; }
  .rg-titulo{ break-before:page; }
  body{ background:#fff; }
}