/* =====================================================================
   Marcela IA — Design System (tema claro; tokens em marcela-tokens.css)
   Tokens + componentes + utilitarios. Zero framework.
   ===================================================================== */

:root {
  /* Marcela IA — tema claro (tokens em marcela-tokens.css). Os nomes abaixo são os antigos do painel, agora apontando
     para os tokens novos: o que ainda usa --surface, --text, --brand... já sai na marca nova. */

  /* Superficie */
  --bg:            var(--mi-nevoa);
  --bg-2:          var(--mi-branco);
  --surface:       var(--mi-branco);
  --surface-2:     var(--mi-nevoa-clara);
  --surface-3:     var(--mi-coluna);
  --border:        var(--mi-borda);
  --border-strong: var(--mi-borda-forte);

  /* Texto */
  --text:          var(--mi-texto);
  --text-2:        var(--mi-texto-2);
  --text-3:        var(--mi-texto-3);

  /* Marca: indigo sólido (sem degradê) */
  --brand:         var(--mi-indigo);
  --brand-2:       var(--mi-indigo-hover);
  --brand-soft:    var(--mi-indigo-soft);
  --brand-ring:    var(--mi-indigo-soft);

  /* Estado: o texto usa o tom escuro (contraste), o fundo o tom claro */
  --ok:        var(--mi-verde-tx);
  --ok-soft:   var(--mi-verde-bg);
  --warn:      var(--mi-ambar-tx);
  --warn-soft: var(--mi-ambar-bg);
  --err:       var(--mi-vermelho-tx);
  --err-soft:  var(--mi-vermelho-bg);
  --info:      var(--mi-indigo-hover);
  --info-soft: var(--mi-indigo-soft);

  /* Pontos de estado (bolinhas): o tom vivo, nunca para texto */
  --ok-ponto:   var(--mi-verde-ponto);
  --warn-ponto: var(--mi-ambar-ponto);
  --err-ponto:  var(--mi-vermelho-ponto);

  /* Geometria */
  --r-sm: 8px;
  --r:    var(--mi-raio-campo);
  --r-lg: var(--mi-raio-card);
  --r-xl: 20px;

  --shadow-1: 0 1px 2px rgba(11, 11, 18, .06);
  --shadow-2: 0 8px 24px rgba(11, 11, 18, .08);
  --shadow-3: 0 24px 60px rgba(11, 11, 18, .14);

  --ease: var(--mi-ease);
  --t-fast: 150ms var(--ease);
  --t: 250ms var(--ease);

  --sidebar: var(--mi-menu-largura);
  --topbar: 62px;

  --font: var(--mi-font);
  --mono: var(--mi-font-mono);
}

/* Telas que ainda não entraram no redesign (chat público do site, painel de TV) seguem no tema escuro antigo. */
html[data-tema="escuro"] {
  /* Superficie */
  --bg:            #08080c;
  --bg-2:          #0e0e15;
  --surface:       #14141d;
  --surface-2:     #1b1b26;
  --surface-3:     #23232f;
  --border:        #262633;
  --border-strong: #343444;

  /* Texto */
  --text:          #f2f2f7;
  --text-2:        #a8a8b8;
  --text-3:        #8e8e9e;

  /* Marca — indigo/violeta */
  --brand:         #6d5efc;
  --brand-2:       #a855f7;
  --brand-soft:    rgba(109, 94, 252, 0.14);
  --brand-ring:    rgba(109, 94, 252, 0.38);

  /* Estado */
  --ok:      #22c55e;
  --ok-soft: rgba(34, 197, 94, 0.14);
  --warn:    #f59e0b;
  --warn-soft: rgba(245, 158, 11, 0.14);
  --err:     #f43f5e;
  --err-soft: rgba(244, 63, 94, 0.14);
  --info:    #38bdf8;
  --info-soft: rgba(56, 189, 248, 0.14);

  /* Geometria */
  --r-sm: 8px;
  --r:    12px;
  --r-lg: 18px;
  --r-xl: 24px;

  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 8px 24px rgba(0,0,0,.45);
  --shadow-3: 0 24px 60px rgba(0,0,0,.55);

  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 120ms var(--ease);
  --t: 220ms var(--ease);

  --sidebar: 252px;
  --topbar: 62px;

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* O atributo hidden sempre vence o display do componente (botões, cartões): sem isso, .btn { display: inline-flex } o desfazia */
[hidden] { display: none !important; }

/* ------------------------------------------------------------------ */
/* Reset                                                               */
/* ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.02em; }
h1 { font-size: 24px; font-weight: 800; letter-spacing: -0.04em; }
h2 { font-size: 18px; }
h3 { font-size: 15px; }
p  { margin: 0 0 10px; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--brand-2); }

/* Foco visivel e consistente — acessibilidade */
:focus-visible {
  outline: 3px solid var(--mi-indigo-soft);
  outline-offset: 1px;
  box-shadow: 0 0 0 1.5px var(--mi-indigo);
  border-radius: var(--r-sm);
}
:focus:not(:focus-visible) { outline: none; }

::selection { background: var(--mi-indigo-claro); color: var(--mi-grafite); }

/* Scrollbar discreta */
* { scrollbar-width: thin; scrollbar-color: var(--surface-3) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--surface-3);
  border-radius: 99px;
  border: 2px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; }

/* ------------------------------------------------------------------ */
/* Layout                                                              */
/* ------------------------------------------------------------------ */
.app {
  display: grid;
  grid-template-columns: var(--sidebar) 1fr;
  height: 100vh;
  overflow: hidden;
}

.sidebar {
  --sb-w: var(--sidebar);
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--mi-branco);
  border-right: 1px solid var(--border);
  transition: width var(--t);
}

/* Marca */
.sb-brand { height: var(--topbar); display: flex; align-items: center; gap: 11px; padding: 0 12px 0 16px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.sb-brand__logo { display: flex; align-items: center; flex-shrink: 0; }
.sb-brand__logo img { display: block; }
.sb-brand__txt { flex: 1; min-width: 0; }
.sb-brand__t { font-weight: 800; font-size: 16px; letter-spacing: -0.04em; line-height: 1.2; }
.sb-brand__s { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-recolher {
  width: var(--mi-alvo-min); height: var(--mi-alvo-min); border-radius: 8px; flex-shrink: 0;
  display: grid; place-items: center; border: 0; background: none; color: var(--text-3); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), transform var(--t);
}
.sb-recolher:hover { background: var(--surface-2); color: var(--text); }

/* Navegacao */
.sb-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 12px 10px; scrollbar-width: none; }
.sb-nav::-webkit-scrollbar { display: none; }
.nav-group + .nav-group { margin-top: 16px; }
.nav-group__label {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--text-3); padding: 0 12px 6px; white-space: nowrap; font-family: var(--mono);
}
.nav-item {
  position: relative; display: flex; align-items: center; gap: 12px; width: 100%;
  height: 44px; padding: 0 12px; margin: 2px 0;
  border: 0; border-radius: 10px; background: none;
  color: var(--text-2); font-family: inherit; font-size: 14px; font-weight: 500; text-align: left;
  cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
/* Telas de pagina inteira entram como <a> (ex.: Monitor), nao <button>.
     Sem isso o navegador sublinha o link e a borda padrao do <a> aparece. */
  text-decoration: none;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item:hover .nav-item__ico { color: var(--text); }
.nav-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.nav-item[aria-current="page"] {
  color: var(--mi-indigo-hover); font-weight: 600;
  background: var(--mi-indigo-soft);
}
/* a barra de destaque do item ativo saiu: o fundo suave basta */
.nav-item[aria-current="page"]::before { content: none; }
.nav-item__ico { width: 20px; height: 20px; display: grid; place-items: center; flex-shrink: 0; color: var(--text-3); transition: color var(--t-fast); }
.nav-item[aria-current="page"] .nav-item__ico { color: var(--mi-indigo); }
.nav-item__txt { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nav-item__badge {
  min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px;
  background: var(--mi-ambar-bg); color: var(--mi-ambar-tx); border: 1px solid var(--mi-ambar-borda);
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center; line-height: 1; flex-shrink: 0;
}

/* Rodape: chat publico + usuario */
.sb-foot { flex-shrink: 0; padding: 10px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }

@keyframes sbPulso { 70% { box-shadow: 0 0 0 6px rgba(31,169,113,0); } 100% { box-shadow: 0 0 0 0 rgba(31,169,113,0); } }

.sb-user { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--bg); border: 1px solid var(--border); }
.sb-user__av {
  position: relative; width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0;
  display: grid; place-items: center; font-size: 13px; font-weight: 600; color: var(--mi-sobre-cor);
  background: var(--mi-grafite);
}
.sb-user__on { position: absolute; right: -2px; bottom: -2px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok-ponto); border: 2px solid var(--mi-branco); }
.sb-user__txt { flex: 1; min-width: 0; }
.sb-user__nome { font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-user__papel { font-size: 11px; color: var(--text-3); }
.sb-sair-form { margin: 0; }
.sb-sair {
  width: var(--mi-alvo-min); height: var(--mi-alvo-min); border-radius: 9px; display: grid; place-items: center;
  border: 1px solid transparent; background: none; color: var(--text-3); cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.sb-sair:hover { color: var(--err); background: var(--err-soft); border-color: var(--mi-vermelho-borda); }

/* Modo recolhido: so icones (desktop) */
@media (min-width: 768px) {
  .app { transition: grid-template-columns var(--t); }
  .app.is-recolhido { grid-template-columns: 76px 1fr; }
  .app.is-recolhido .sb-brand { flex-direction: column; justify-content: center; gap: 6px; height: auto; padding: 12px 0; }
  .app.is-recolhido .sb-brand__txt,
  .app.is-recolhido .nav-group__label,
  .app.is-recolhido .nav-item__txt,
  .app.is-recolhido .sb-label,
  .app.is-recolhido .sb-user__txt { display: none; }
  .app.is-recolhido .sb-recolher { transform: rotate(180deg); }
  .app.is-recolhido .nav-group + .nav-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
  .app.is-recolhido .nav-item { justify-content: center; padding: 0; width: 48px; margin: 2px auto; }
  .app.is-recolhido .nav-item__badge { position: absolute; top: 3px; right: 3px; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 4px; }
  .app.is-recolhido .sb-user { flex-direction: column; padding: 8px 0; }
}


/* Main */
.main { position: relative; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  height: var(--topbar);
  flex-shrink: 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 22px;
  background: var(--bg);
}
.topbar__title { font-size: 18px; font-weight: 800; letter-spacing: -0.04em; }
.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: 8px; }

/* Faixa de abas das seções do menu (aparece só quando a seção tem mais de uma tela) */
.app { --abas-h: 0px; }
.app.has-abas { --abas-h: 0px; } /* as abas moram na barra superior; no celular ganham uma segunda linha (ver abaixo) */
.abas {
  display: flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.abas::-webkit-scrollbar { display: none; }
.abas[hidden] { display: none; }
.aba {
  flex: 0 0 auto; display: inline-flex; align-items: center; height: var(--mi-alvo-min); padding: 0 16px;
  border: 0; border-radius: var(--mi-raio-pilula); background: none; font: inherit; font-size: 14px; font-weight: 600;
  color: var(--text-2); cursor: pointer; white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.aba:hover { background: var(--surface-2); color: var(--text); }
.aba:focus-visible { border-radius: var(--mi-raio-pilula); }
.aba[aria-current="page"] { background: var(--mi-indigo-soft); color: var(--mi-indigo-hover); }

.view {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
}

.view__inner { max-width: 1180px; margin: 0 auto; }

/* ------------------------------------------------------------------ */
/* Componentes                                                         */
/* ------------------------------------------------------------------ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.card__head {
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
}
.card__title { font-size: 14.5px; font-weight: 650; }
.card__sub { font-size: 12.5px; color: var(--text-3); margin-top: 1px; }
.card__body { padding: 18px; }
.card__foot {
  padding: 14px 18px;
  border-top: 1px solid var(--border);
  display: flex; gap: 10px; align-items: center;
  background: var(--bg-2);
}

.grid { display: grid; gap: 16px; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }

/* Stat */
.stat {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t), transform var(--t);
}
.stat::after { content: none; }
.stat:hover { border-color: var(--border-strong); }
.stat__label {
  font-size: 11px; color: var(--text-2); font-family: var(--mono);
  font-weight: 500; text-transform: uppercase; letter-spacing: .2em;
}
.stat__value {
  font-size: 28px; font-weight: 800; letter-spacing: -0.04em;
  margin-top: 5px; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat__hint { font-size: 12px; color: var(--text-3); margin-top: 3px; }

/* Botao */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: var(--mi-alvo-min);
  padding: 0 18px;
  border-radius: var(--r);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
  -webkit-user-select: none; user-select: none;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--text-3); }
.btn:disabled { opacity: .5; cursor: not-allowed; }

.btn--primary {
  background: var(--mi-indigo);
  border-color: transparent;
  color: var(--mi-sobre-cor);
}
.btn--primary:hover:not(:disabled) {
  background: var(--mi-indigo-hover);
  border-color: transparent;
}
.btn--ghost { background: transparent; border-color: transparent; color: var(--mi-indigo); }
.btn--ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }
.btn--danger { background: var(--surface); border-color: var(--mi-vermelho-borda); color: var(--err); }
.btn--danger:hover:not(:disabled) { background: var(--err-soft); border-color: var(--mi-vermelho-borda); }
.btn--sm { height: var(--mi-alvo-min); padding: 0 14px; font-size: 13px; }
.btn--icon { width: var(--mi-alvo-min); padding: 0; }
.btn--icon.btn--sm { width: var(--mi-alvo-min); }
.btn--block { width: 100%; }

.btn.is-loading { pointer-events: none; opacity: .7; }
.btn.is-loading::before {
  content: '';
  width: 13px; height: 13px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin .6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* Form */
.field { margin-bottom: 14px; }
.field__label {
  display: block;
  font-size: 13px; font-weight: 600;
  color: var(--text-2);
  margin-bottom: 6px;
}
.field__hint { font-size: 12px; color: var(--text-3); margin-top: 5px; }

.input, .select, .textarea {
  width: 100%;
  min-height: var(--mi-alvo-min);
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--r);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
.input::placeholder, .textarea::placeholder { color: var(--text-3); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--text-3); }
.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--mi-indigo-soft);
  background: var(--surface);
}
.textarea { min-height: 92px; resize: vertical; line-height: 1.55; }
.select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2370707f' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
  padding-right: 32px;
}
.input--error, .textarea--error, .select--error { border-color: var(--err); }
.field__error { font-size: 12px; color: var(--err); margin-top: 5px; }

.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch__track {
  width: 38px; height: 21px;
  background: var(--surface-3);
  border-radius: 99px;
  position: relative;
  transition: background var(--t);
  flex-shrink: 0;
}
.switch__track::after {
  content: '';
  position: absolute; top: 3px; left: 3px;
  width: 15px; height: 15px;
  background: var(--text-2);
  border-radius: 50%;
  transition: transform var(--t), background var(--t);
}
.switch input:checked + .switch__track { background: var(--brand); }
.switch input:checked + .switch__track::after { transform: translateX(17px); background: var(--mi-branco); }
.switch input:focus-visible + .switch__track { box-shadow: 0 0 0 3px var(--brand-soft); }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: var(--mi-raio-pilula);
  font-size: 12px; font-weight: 600;
  background: var(--surface-2);
  color: var(--text-2);
  white-space: nowrap;
}
.badge--ok   { background: var(--ok-soft);   color: var(--ok); }
.badge--warn { background: var(--warn-soft); color: var(--warn); }
.badge--err  { background: var(--err-soft);  color: var(--err); }
.badge--info { background: var(--info-soft); color: var(--info); }
.badge--brand{ background: var(--mi-indigo-soft); color: var(--mi-indigo-hover); }

/* Tabela */
.table { width: 100%; border-collapse: collapse; }
.table th {
  text-align: left;
  font-size: 11px; font-weight: 500; font-family: var(--mono);
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  background: var(--bg-2);
}
.table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 13.5px;
  vertical-align: middle;
}
.table tbody tr { transition: background var(--t-fast); }
.table tbody tr:hover { background: var(--surface-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table__actions { display: flex; gap: 6px; justify-content: flex-end; }

/* Tabs */
.tabs {
  display: flex; gap: 2px;
  background: var(--bg-2);
  padding: 3px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  width: fit-content;
  max-width: 100%;
  overflow-x: auto;
}
.tab {
  min-height: var(--mi-alvo-min);
  padding: 6px 13px;
  border-radius: 7px;
  border: 0;
  background: none;
  color: var(--text-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--t-fast), color var(--t-fast);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { background: var(--mi-indigo-soft); color: var(--mi-indigo-hover); font-weight: 600; }

/* Avatar */
.avatar {
  position: relative;
  width: 36px; height: 36px;
  border-radius: 10px;
  display: grid; place-items: center;
  font-weight: 600; font-size: 13px;
  color: var(--mi-grafite);
  flex-shrink: 0;
  overflow: hidden;
  background: var(--mi-borda);
}
.avatar.has-foto { color: transparent; }
/* Foto do contato por cima das iniciais (CL.comFoto): o avatar vira a moldura, a imagem preenche */
.tem-foto { position: relative; } /* sem overflow:hidden: os selos de canal ficam meio para fora do avatar */
.av-foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; z-index: 0; }
.avatar img, .avatar .avatar__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; border-radius: inherit; display: block;
}
.avatar--sm { width: 28px; height: 28px; font-size: 11px; border-radius: 8px; }
.avatar--lg { width: 46px; height: 46px; font-size: 16px; border-radius: 13px; }

/* Vazio / loading */
.empty {
  padding: 52px 24px;
  text-align: center;
  color: var(--text-3);
}
.empty__ico { font-size: 30px; opacity: .35; margin-bottom: 10px; }
.empty__title { font-size: 14.5px; font-weight: 600; color: var(--text-2); margin-bottom: 4px; }
.empty__sub { font-size: 13px; }

.skeleton {
  background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 50%, var(--surface-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
  border-radius: var(--r-sm);
}
@keyframes shimmer { to { background-position: -200% 0; } }

.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border-strong);
  border-top-color: var(--brand);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 34px auto;
}

/* Toast */
.toasts {
  position: fixed;
  /* Topo, e nao rodape: no rodape a pilha cobria os botoes de acao do
     Monitor e o botao "Sair" do cabecalho, e era ali que o usuario
     clicava para cambiar de conversa. */
  right: 18px; top: 18px;
  z-index: 9000;
  display: flex; flex-direction: column; gap: 9px;
  pointer-events: none;
  max-width: min(380px, calc(100vw - 36px));
}
.toast {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border-strong);
  border-left: 3px solid var(--brand);
  border-radius: var(--r);
  box-shadow: var(--shadow-3);
  font-size: 13.5px;
  pointer-events: auto;
  animation: toastIn .28s var(--ease);
}
.toast--ok   { border-left-color: var(--ok); }
.toast--err  { border-left-color: var(--err); }
.toast--warn { border-left-color: var(--warn); }
.toast__body { flex: 1; min-width: 0; }
.toast__title { font-weight: 650; margin-bottom: 1px; }
.toast__msg { color: var(--text-2); font-size: 12.5px; word-wrap: break-word; }
.toast--out { animation: toastOut .22s var(--ease) forwards; }

@keyframes toastIn  { from { opacity: 0; transform: translateX(24px) scale(.97); } }
@keyframes toastOut { to   { opacity: 0; transform: translateX(24px) scale(.97); } }

/* ------------------------------------------------------------------ */
/* Chat                                                                */
/* ------------------------------------------------------------------ */
.chat {
  display: grid;
  grid-template-columns: 340px 1fr;
  height: 100%;
  overflow: hidden;
}

.chat__list {
  border-right: 1px solid var(--border);
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--bg-2);
}
.chat__list-head { padding: 14px; border-bottom: 1px solid var(--border); flex-shrink: 0; }
.chat__search { position: relative; margin-bottom: 10px; }
.chat__search .input { padding-left: 34px; }
.chat__search::before {
  content: '';
  position: absolute; left: 12px; top: 50%;
  transform: translateY(-50%);
  width: 14px; height: 14px;
  background: var(--text-3);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat;
  pointer-events: none;
}
.chat__filters { display: flex; gap: 5px; }
.chat__filters .tab { flex: 1; text-align: center; }

.chat__items { flex: 1; overflow-y: auto; }

.chat-item {
  display: flex; gap: 11px;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: background var(--t-fast);
  width: 100%; border-top: 0; border-right: 0;
  text-align: left; font-family: inherit; color: inherit;
}
.chat-item:hover { background: var(--surface); }
.chat-item[aria-selected="true"] {
  background: var(--brand-soft);
  border-left-color: var(--brand);
}
.chat-item__body { flex: 1; min-width: 0; }
.chat-item__top { display: flex; align-items: baseline; gap: 8px; }
.chat-item__name {
  font-size: 13.5px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  flex: 1;
}
.chat-item__time { font-size: 11px; color: var(--text-3); flex-shrink: 0; }
.chat-item__prev {
  font-size: 12.5px; color: var(--text-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin-top: 1px;
}
.chat-item__badge {
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 99px;
  background: var(--err);
  color: var(--mi-sobre-cor);
  font-size: 10.5px; font-weight: 700;
  display: grid; place-items: center;
  flex-shrink: 0;
}

/* Thread */
.chat__thread { display: flex; flex-direction: column; overflow: hidden; }
.chat__head {
  height: var(--topbar);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  flex-shrink: 0;
  background: var(--bg);
}
.chat__msgs {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
  display: flex; flex-direction: column; gap: 12px;
  background:
    radial-gradient(1000px 460px at 78% -8%, rgba(109,94,252,.07), transparent 62%),
    var(--bg);
}
.chat__composer {
  border-top: 1px solid var(--border);
  padding: 13px 20px;
  display: flex; gap: 10px; align-items: flex-end;
  background: var(--bg-2);
  flex-shrink: 0;
}
.chat__composer .textarea {
  min-height: 42px; max-height: 132px;
  resize: none;
}

.msg { display: flex; gap: 9px; max-width: 74%; }
.msg--me { align-self: flex-end; flex-direction: row-reverse; }
.msg__av {
  width: 27px; height: 27px; border-radius: 8px;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; color: var(--mi-sobre-cor);
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.msg--me .msg__av { background: var(--surface-3); color: var(--text-2); }
.msg__bubble {
  padding: 9px 13px;
  border-radius: 15px;
  background: var(--surface);
  border: 1px solid var(--border);
  font-size: 13.5px;
  line-height: 1.55;
  word-wrap: break-word;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.msg--me .msg__bubble {
  background: linear-gradient(135deg, var(--brand), var(--mi-indigo-claro));
  border-color: transparent;
  color: var(--mi-sobre-cor);
}
.msg--sys .msg__bubble {
  background: var(--warn-soft);
  border-color: transparent;
  color: var(--warn);
  font-size: 12.5px;
}
.msg__time {
  font-size: 10.5px; color: var(--text-3);
  margin-top: 4px;
  display: block;
}
.msg--me .msg__time { text-align: right; }

.typing { display: flex; gap: 4px; padding: 4px 2px; }
.typing span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--text-3);
  animation: mi-dot 1.2s ease-in-out infinite;
}
.typing span:nth-child(2) { animation-delay: .16s; }
.typing span:nth-child(3) { animation-delay: .32s; }

/* ------------------------------------------------------------------ */
/* Login                                                               */
/* ------------------------------------------------------------------ */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(900px 500px at 22% 0%, rgba(109,94,252,.16), transparent 60%),
    radial-gradient(800px 480px at 82% 100%, rgba(168,85,247,.13), transparent 60%),
    var(--bg);
}
.auth__card {
  width: 100%; max-width: 396px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-xl);
  padding: 32px;
  box-shadow: var(--shadow-3);
}
.auth__logo {
  width: 50px; height: 50px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  display: grid; place-items: center;
  font-size: 21px; font-weight: 800; color: var(--mi-sobre-cor);
  margin: 0 auto 18px;
  box-shadow: 0 8px 26px var(--brand-soft);
}
.auth__title { text-align: center; font-size: 20px; margin-bottom: 4px; }
.auth__sub { text-align: center; color: var(--text-3); font-size: 13.5px; margin-bottom: 24px; }

.alert {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 11px 13px;
  border-radius: var(--r);
  font-size: 13px;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
.alert--err  { background: var(--err-soft);  color: var(--err);  border-color: rgba(244,63,94,.28); }
.alert--warn { background: var(--warn-soft); color: var(--warn); border-color: rgba(245,158,11,.28); }
.alert--ok   { background: var(--ok-soft);   color: var(--ok);   border-color: rgba(34,197,94,.28); }
.alert--info { background: var(--info-soft); color: var(--info); border-color: rgba(56,189,248,.28); }

/* ------------------------------------------------------------------ */
/* Utilitarios                                                         */
/* ------------------------------------------------------------------ */
.row     { display: flex; align-items: center; gap: 9px; }
.row--wrap { flex-wrap: wrap; }
.row--end  { justify-content: flex-end; }
.row--between { justify-content: space-between; }
.col     { display: flex; flex-direction: column; gap: 9px; }
.grow    { flex: 1; min-width: 0; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mono    { font-family: var(--mono); font-size: 12.5px; }
.muted   { color: var(--text-3); }
.small   { font-size: 12.5px; }
.center  { text-align: center; }
.hidden  { display: none !important; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; }
.mb-1 { margin-bottom: 8px; } .mb-2 { margin-bottom: 16px; } .mb-3 { margin-bottom: 24px; }
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ------------------------------------------------------------------ */
/* Empresa & Unidades                                                  */
/* ------------------------------------------------------------------ */
.emp { display: flex; flex-direction: column; gap: 18px; }

.ico { flex-shrink: 0; }

/* Hero */
.emp-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 28px;
  align-items: center;
  padding: 24px;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--mi-branco);
  overflow: hidden;
}
.emp-hero__id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.emp-hero__logo {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center;
  font-size: 20px; font-weight: 600; color: var(--mi-sobre-cor);
  background: var(--mi-grafite);
  flex-shrink: 0;
}
.emp-hero__eyebrow {
  font-family: var(--mi-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--text-2);
}
.emp-hero__nome { font-size: 22px; font-weight: 600; letter-spacing: -.02em; margin: 2px 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.emp-hero__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--text-2); font-size: 13px; }
.emp-hero__meta span { display: inline-flex; align-items: center; gap: 6px; }

.emp-hero__stats { display: flex; gap: 10px; }
.emp-kpi {
  min-width: 108px;
  padding: 11px 14px;
  border-radius: var(--r);
  background: var(--mi-nevoa);
  border: 1px solid var(--border);
}
.emp-kpi--wide { min-width: 170px; }
.emp-kpi__v { font-size: 24px; font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; font-variant-numeric: tabular-nums; }
.emp-kpi__l { font-size: 12px; color: var(--text-2); }
.emp-kpi--wide .emp-kpi__l { align-self: center; }

.meter { height: 6px; border-radius: 99px; background: var(--mi-borda); overflow: hidden; margin-top: 8px; }
.meter__fill {
  height: 100%; border-radius: inherit;
  background: var(--mi-indigo);
  transition: width .6s var(--ease);
}

.emp-hero__modo {
  grid-column: 1 / -1;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 12px;
  border-radius: var(--r);
  background: var(--mi-nevoa);
  border: 1px solid var(--border);
  font-size: 13px; color: var(--text-2);
}
.emp-hero__modo .ico { color: var(--text-2); }
.emp-hero__modo.is-multi { background: var(--mi-indigo-soft); border-color: transparent; color: var(--mi-indigo-escuro); }
.emp-hero__modo.is-multi .ico { color: var(--mi-indigo); }
.emp-hero__falta { margin-left: auto; font-size: 12px; color: var(--mi-ambar-tx); font-weight: 600; }

/* Abas */
.emp-tabs { position: sticky; top: -22px; z-index: 5; box-shadow: none; }
.tab__count {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; padding: 0 5px; margin-left: 7px;
  border-radius: 99px; font-size: 11px; font-weight: 600;
  background: var(--mi-nevoa); color: var(--text-2);
}
.tab[aria-selected="true"] .tab__count,
.tab[aria-pressed="true"] .tab__count { background: var(--mi-indigo); color: var(--mi-sobre-cor); }
.tab[aria-pressed="true"] { background: var(--mi-indigo-soft); color: var(--mi-indigo-escuro); font-weight: 600; }
.emp-painel[hidden] { display: none; }

/* Layout de unidades */
.uni-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 18px; align-items: start; }
.uni-main { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.uni-aside { position: sticky; top: 40px; }

.uni-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.uni-busca { position: relative; flex: 1; min-width: 200px; }
.uni-busca .ico { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.uni-busca .input { padding-left: 36px; }

.uni-dica {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: var(--r);
  border: 1px dashed var(--mi-borda-forte);
  background: var(--mi-indigo-soft);
  font-size: 13px; color: var(--text-2);
}
.uni-dica strong { color: var(--text); display: block; margin-bottom: 1px; }
.uni-dica__ico {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--mi-branco); color: var(--mi-indigo);
}

.uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 14px; }

/* Cartao de unidade */
.uni-card {
  position: relative;
  display: flex; flex-direction: column; gap: 12px;
  padding: 16px;
  border-radius: 16px;
  border: 1px solid var(--border);
  background: var(--mi-branco);
  cursor: pointer;
  transition: border-color var(--t), transform var(--t), box-shadow var(--t);
  outline: none;
}
.uni-card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(11, 11, 18, .07); }
.uni-card:focus-visible { border-color: var(--mi-indigo); box-shadow: 0 0 0 3px var(--mi-indigo-soft); }
.uni-card.is-off { opacity: .62; }
.uni-card.is-off:hover { opacity: .9; }

.uni-card__head { display: flex; align-items: flex-start; gap: 12px; }
.uni-card__mono {
  width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center;
  font-size: 13.5px; font-weight: 600; color: var(--mi-grafite);
  background: var(--mi-borda);
}
.uni-card__titulos { flex: 1; min-width: 0; padding-top: 1px; }
.uni-card__nome { display: flex; align-items: center; gap: 7px; font-size: 15px; font-weight: 600; min-width: 0; }
.uni-card__nome .badge { flex-shrink: 0; }
.uni-card__sub { font-size: 12px; color: var(--text-2); margin-top: 1px; }
.uni-card__menu { margin: -4px -6px 0 0; }

.uni-status {
  display: inline-flex; align-items: center; gap: 7px; align-self: flex-start;
  padding: 3px 10px 3px 8px;
  border-radius: 99px;
  font-size: 12px; font-weight: 550;
  background: var(--mi-nevoa); color: var(--text-2);
}
.uni-status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); }
.uni-status.is-on { background: var(--mi-verde-bg); color: var(--mi-verde-tx); }
.uni-status.is-on .uni-status__dot { background: var(--mi-verde-ponto); box-shadow: 0 0 0 3px rgba(31,169,113,.2); animation: pulso 2s infinite; }
.uni-status.is-closed { background: var(--mi-vermelho-bg); color: var(--mi-vermelho-tx); }
.uni-status.is-closed .uni-status__dot { background: var(--mi-vermelho-tx); }
.uni-status__tag { font-size: 11px; color: inherit; opacity: .8; font-weight: 500; margin-left: 2px; }
@keyframes pulso { 50% { box-shadow: 0 0 0 5px rgba(31,169,113,0); } }

.uni-info { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.uni-info li { display: flex; align-items: flex-start; gap: 9px; font-size: 13px; color: var(--text-2); line-height: 1.45; }
.uni-info li .ico { color: var(--text-2); margin-top: 1px; }
.uni-info li.is-vazio { color: var(--text-2); font-style: italic; }
.uni-info li.is-vazio .ico { color: var(--text-3); }

.uni-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chip {
  display: inline-flex; align-items: center;
  height: 24px; padding: 0 10px;
  border-radius: 99px; font-size: 12px; font-weight: 500;
  background: var(--mi-nevoa); border: 1px solid var(--border); color: var(--text-2);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip--mais { color: var(--text-3); }

.uni-card__foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--border); }
.uni-know { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-2); margin-bottom: 7px; }
.uni-know .ico { color: var(--mi-indigo); }
.uni-know strong { margin-left: auto; color: var(--text-2); font-variant-numeric: tabular-nums; }
.segbar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.segbar span { height: 4px; border-radius: 99px; background: var(--mi-borda); }
.segbar span.is-on { background: var(--mi-indigo); }

/* Vazio */
.uni-vazio {
  text-align: center;
  padding: 56px 24px;
  border: 1px dashed var(--border-strong);
  border-radius: 18px;
  background: var(--mi-branco);
}
.uni-vazio__ico {
  width: 64px; height: 64px; border-radius: 50%; margin: 0 auto 16px;
  display: grid; place-items: center;
  background: var(--mi-indigo-soft); color: var(--mi-indigo);
}
.uni-vazio h3 { font-size: 17px; margin-bottom: 6px; }
.uni-vazio p { max-width: 460px; margin: 0 auto 18px; color: var(--text-2); }

/* Previa do chat */
.pv-card .card__head { padding: 14px 16px; }
.pv { padding: 14px; background: var(--mi-nevoa); }
.pv__top {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 12px; margin-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.pv__av {
  width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 600; color: var(--mi-sobre-cor); font-size: 13px;
  background: var(--mi-indigo);
}
.pv__nome { font-size: 13px; font-weight: 650; }
.pv__on { font-size: 11px; color: var(--mi-verde-tx); }
.pv__msgs { display: flex; flex-direction: column; gap: 8px; }
.pv__msg {
  align-self: flex-start; max-width: 92%;
  padding: 8px 11px;
  border-radius: 13px 13px 13px 4px;
  background: var(--surface); border: 1px solid var(--border);
  font-size: 12.5px; line-height: 1.5; white-space: pre-wrap;
}
.pv__msg--me {
  align-self: flex-end;
  border-radius: 13px 13px 4px 13px;
  background: var(--mi-indigo); border-color: transparent; color: var(--mi-sobre-cor);
}
.pv__opts { display: flex; flex-direction: column; gap: 6px; margin-top: 2px; }
.pv__opt {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}
.pv__opt-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--mi-borda-forte); flex-shrink: 0; }
.pv__opt-nome { font-size: 12.5px; font-weight: 600; }
.pv__opt-sub { font-size: 12px; color: var(--text-2); }
.pv__opt-st { font-size: 11px; font-weight: 600; color: var(--text-2); }
.pv__opt-st.is-on { color: var(--mi-verde-tx); }
.pv__nota { margin-top: 12px; font-size: 12px; color: var(--text-2); text-align: center; }

/* Menu suspenso */
.pop {
  position: fixed; z-index: 600;
  min-width: 200px;
  padding: 5px;
  border-radius: var(--r);
  border: 1px solid var(--border-strong);
  background: var(--surface-2);
  box-shadow: var(--shadow-3);
  animation: popIn .14s var(--ease);
}
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
.pop__item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 8px 10px;
  border: 0; border-radius: 7px; background: none;
  color: var(--text); font: inherit; font-size: 13px; text-align: left;
  cursor: pointer;
}
.pop__item .ico { color: var(--text-3); }
.pop__item:hover:not(:disabled), .pop__item:focus-visible { background: var(--surface-3); outline: none; }
.pop__item:disabled { opacity: .45; cursor: not-allowed; }
.pop__item--danger, .pop__item--danger .ico { color: var(--err); }
.pop__item--danger:hover:not(:disabled) { background: var(--err-soft); }
.pop__sep { height: 1px; background: var(--border); margin: 4px 2px; }

/* Drawer */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 500;
  background: rgba(4,4,8,.6);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .24s var(--ease);
}
.drawer-overlay.is-open { opacity: 1; }
.drawer {
  --c: var(--brand);
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(620px, 100vw);
  display: flex; flex-direction: column;
  background: var(--mi-branco);
  border-left: 1px solid var(--border);
  box-shadow: -24px 0 60px rgba(11, 11, 18, .18);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.2,.8,.2,1);
}
.drawer-overlay.is-open .drawer { transform: none; }
.drawer__head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px 14px;
  background: var(--mi-branco);
}
.drawer__dot {
  width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0;
  background: var(--mi-indigo);
}
.drawer__title { font-size: 18px; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drawer__sub { font-size: 13px; color: var(--text-2); }
.drawer__nav {
  display: flex; gap: 6px; overflow-x: auto;
  padding: 0 20px 12px;
  border-bottom: 1px solid var(--border);
  scrollbar-width: none;
}
.drawer__nav::-webkit-scrollbar { display: none; }
.drawer__pill {
  flex-shrink: 0;
  height: var(--mi-alvo-min); padding: 0 14px;
  border-radius: 99px; border: 1px solid var(--border);
  background: var(--mi-branco); color: var(--text-2);
  font: inherit; font-size: 13px; font-weight: 500; cursor: pointer;
  transition: all var(--t-fast);
}
.drawer__pill:hover { color: var(--text); border-color: var(--mi-indigo); }
.drawer__body { flex: 1; overflow-y: auto; padding: 6px 20px 24px; scroll-padding-top: 12px; }
.drawer__foot {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  padding: 14px 20px calc(14px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--mi-branco);
}
.drawer__foot .btn { flex-shrink: 1; min-width: 0; }
@media (max-width: 420px) {
  .drawer__foot { padding-left: 14px; padding-right: 14px; }
  .drawer__foot .btn--primary { flex: 1 1 auto; justify-content: center; }
  .drawer__estado { flex-basis: 100%; }
}
.drawer__estado { flex: 1; font-size: 13px; color: var(--mi-ambar-tx); font-weight: 600; display: flex; align-items: center; gap: 7px; }
.drawer.is-dirty .drawer__estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--mi-ambar-ponto); }

.dsec { padding: 20px 0 6px; border-bottom: 1px solid var(--border); }
.dsec:last-child { border-bottom: 0; }
.dsec__head { margin-bottom: 14px; }
.dsec__title { font-size: 15px; font-weight: 600; }
.dsec__desc { font-size: 13px; color: var(--text-2); margin: 2px 0 0; }
.dsec__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.dsec__grid > .field--full, .dsec__grid > .callout { grid-column: 1 / -1; }
.dsec__info {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; margin-bottom: 14px;
  border-radius: var(--r-sm);
  background: var(--mi-nevoa); border: 1px solid var(--border);
  font-size: 13px; color: var(--text-2);
}
.dsec__info[hidden] { display: none; }
.field--full[hidden] { display: none; }

.field__req { color: var(--mi-vermelho-tx); margin-left: 3px; }
.field__count { font-size: 11px; color: var(--text-3); text-align: right; margin-top: 4px; font-variant-numeric: tabular-nums; }
.field__count.is-near { color: var(--mi-ambar-tx); }
.input-group { display: flex; gap: 6px; align-items: stretch; }
.input-group .input { flex: 1; min-width: 0; }
.input-group .btn { height: auto; min-height: 38px; }

.emp-switches { display: flex; flex-direction: column; gap: 12px; padding: 4px 0; }
.emp-switch { align-items: flex-start; }
.emp-switch .switch__track { margin-top: 1px; }
.emp-switch input:disabled + .switch__track { opacity: .55; cursor: not-allowed; }
.emp-switch__txt { display: flex; flex-direction: column; }
.emp-switch__label { font-size: 13.5px; font-weight: 600; }
.emp-switch__hint { font-size: 12px; color: var(--text-3); }

.swatches { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-height: 38px; }
/* O botão tem o alvo mínimo; a bolinha de 24 px é desenhada dentro dele */
.swatch {
  position: relative; width: var(--mi-alvo-min); height: var(--mi-alvo-min);
  border: 0; border-radius: 50%; background: none;
  cursor: pointer; padding: 0;
}
.swatch::before {
  content: ""; position: absolute; inset: 10px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid transparent;
  background: var(--sw);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.25);
  transition: transform var(--t-fast);
}
.swatch:hover::before { transform: scale(1.1); }
.swatch[aria-checked="true"]::before { border-color: var(--text); box-shadow: inset 0 0 0 3px var(--bg-2); }

.callout {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; margin-bottom: 14px;
  border-radius: var(--r);
  background: linear-gradient(90deg, color-mix(in srgb, var(--c, var(--brand)) 14%, transparent), transparent);
  border: 1px solid color-mix(in srgb, var(--c, var(--brand)) 30%, transparent);
  font-size: 12.5px; color: var(--text-2);
}
.callout .ico { color: var(--c, var(--brand)); margin-top: 1px; }

/* Etiquetas */
.tags {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 42px; padding: 6px 8px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-2);
  cursor: text;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.tags:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.tags__input {
  flex: 1; min-width: 140px;
  border: 0; outline: none; background: none;
  color: var(--text); font: inherit; font-size: 13.5px; padding: 3px 2px; min-height: var(--mi-alvo-min);
}
.tags__input::placeholder { color: var(--text-3); }
.tag {
  display: inline-flex; align-items: center; gap: 4px;
  height: 26px; padding: 0 4px 0 10px;
  border-radius: 99px;
  background: color-mix(in srgb, var(--c, var(--brand)) 18%, var(--surface-2));
  border: 1px solid color-mix(in srgb, var(--c, var(--brand)) 35%, transparent);
  font-size: 12.5px; font-weight: 550;
}
.tag__x {
  position: relative; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--text-2); cursor: pointer; padding: 0;
}
.tag__x::after { content: ""; position: absolute; inset: -13px; } /* alvo de 44 px sem aumentar a etiqueta */
.tag__x:hover { background: rgba(255,255,255,.12); color: var(--text); }
.tags__sugestoes { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: 7px; }
.tags__sugestoes:empty { display: none; }
.tags__sug-label { font-size: 11.5px; color: var(--text-3); margin-right: 2px; }
.tags__sug {
  display: inline-flex; align-items: center; gap: 4px;
  min-height: var(--mi-alvo-min); padding: 0 9px;
  border-radius: 99px; border: 1px dashed var(--border-strong);
  background: none; color: var(--text-2);
  font: inherit; font-size: 12px; cursor: pointer;
}
.tags__sug:hover { border-style: solid; border-color: var(--brand); color: var(--text); }

/* Editor semanal */
.wk { display: flex; flex-direction: column; }
.wk__escala, .wk__row {
  display: grid;
  grid-template-columns: 140px 230px minmax(80px, 1fr);
  gap: 14px; align-items: center;
}
.wk__escala { padding-bottom: 4px; }
.wk__ticks { display: flex; justify-content: space-between; font-size: 10px; color: var(--text-3); font-variant-numeric: tabular-nums; }
.wk__row { padding: 8px 0; border-top: 1px solid var(--border); }
.wk__dia { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 550; }
.wk__horas { display: flex; align-items: center; gap: 8px; grid-column: 2; grid-row: 1; }
.wk__hora { width: 100px; min-height: var(--mi-alvo-min); padding: 5px 8px; font-variant-numeric: tabular-nums; }
.wk__sep { font-size: 12px; color: var(--text-3); }
.wk__fechado { grid-column: 2; grid-row: 1; display: none; font-size: 12.5px; color: var(--text-3); }
.wk__row.is-off .wk__horas { display: none; }
.wk__row.is-off .wk__fechado { display: block; }
.wk__row.is-off .wk__dia span { color: var(--text-3); }
.wk__row.is-invalid .wk__hora { border-color: var(--err); }
.wk__faixa {
  position: relative; height: 10px; border-radius: 99px;
  background:
    repeating-linear-gradient(to right, var(--border-strong) 0 1px, transparent 1px 25%),
    var(--surface-2);
}
.wk__barra {
  position: absolute; top: 0; bottom: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--c, var(--brand)), color-mix(in srgb, var(--c, var(--brand)) 60%, var(--brand-2)));
  box-shadow: 0 0 12px color-mix(in srgb, var(--c, var(--brand)) 40%, transparent);
  transition: left var(--t), width var(--t);
}
.drawer .wk__escala, .drawer .wk__row { grid-template-columns: 120px 220px minmax(60px, 1fr); }

.card__ico {
  width: 38px; height: 38px; border-radius: 11px; flex-shrink: 0;
  display: grid; place-items: center;
  background: var(--brand-soft); color: var(--brand);
}

/* Configuracoes em secoes */
.set { display: flex; flex-direction: column; gap: 22px; }
.set__sec { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
.set__info { padding-top: 4px; }
.set__info h3 { font-size: 14.5px; margin-bottom: 4px; }
.set__info p { font-size: 12.5px; color: var(--text-3); }
.set__card { padding: 18px 18px 4px; }
.set__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.set__grid > .field--full { grid-column: 1 / -1; }

.savebar {
  position: sticky; bottom: 12px; z-index: 6;
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 10px 16px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border-strong);
  background: rgba(27,27,38,.92);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-3);
  transform: translateY(20px); opacity: 0; pointer-events: none;
  transition: transform var(--t), opacity var(--t);
}
.savebar.is-on { transform: none; opacity: 1; pointer-events: auto; }
.savebar__txt { flex: 1; display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--text-2); }
.savebar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 4px var(--warn-soft); }

@media (max-width: 1180px) {
  .uni-layout { grid-template-columns: 1fr; }
  .uni-aside { position: static; max-width: 520px; }
}
@media (max-width: 860px) {
  .emp-hero { grid-template-columns: 1fr; }
  .emp-hero__stats { flex-wrap: wrap; }
  .emp-kpi { flex: 1; }
  .set__sec { grid-template-columns: 1fr; gap: 10px; }
  .emp-hero__falta { margin-left: 0; }
}
@media (max-width: 640px) {
  .dsec__grid, .set__grid { grid-template-columns: 1fr; }
  .wk__escala { display: none; }
  .wk__row, .drawer .wk__row { grid-template-columns: 1fr auto; gap: 8px 10px; }
  .wk__horas, .wk__fechado { grid-column: 2; }
  .wk__faixa { grid-column: 1 / -1; height: 6px; }
  .wk__hora { width: 92px; }
  .emp-tabs { top: -14px; width: 100%; }
  .emp-tabs .tab { flex: 1; padding: 6px 8px; font-size: 12.5px; }
  .emp-tabs .tab__count { margin-left: 5px; }
  .uni-toolbar .btn--primary { width: 100%; }
}

/* ------------------------------------------------------------------ */
/* CNPJ (Receita Federal)                                              */
/* ------------------------------------------------------------------ */
.cnpj-input { font-size: 17px; font-weight: 600; letter-spacing: .04em; font-variant-numeric: tabular-nums; min-height: 46px; }
.cnpj-status { display: flex; align-items: center; gap: 7px; min-height: 22px; margin-top: 8px; font-size: 12.5px; color: var(--text-3); }
.cnpj-status.is-ok { color: var(--ok); }
.cnpj-status.is-err { color: var(--err); }
.cnpj-status.is-warn { color: var(--warn); }
.cnpj-status.is-load { color: var(--info); }
.cnpj-status.is-load .ico { animation: spin 1s linear infinite; }
.set.is-consultando .set__sec:not(:first-child) .input,
.set.is-consultando .set__sec:not(:first-child) .select,
.set.is-consultando .set__sec:not(:first-child) .textarea {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--surface-2) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite;
}
.input.is-auto, .select.is-auto, .textarea.is-auto { border-color: rgba(34,197,94,.45); background: rgba(34,197,94,.05); }
.input.is-falta, .select.is-falta, .textarea.is-falta { border-color: rgba(245,158,11,.55); box-shadow: 0 0 0 3px var(--warn-soft); }
.tag-rf {
  display: inline-flex; align-items: center; margin-left: 7px; padding: 0 6px; height: 16px;
  border-radius: 99px; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  background: var(--ok-soft); color: var(--ok); vertical-align: 1px;
}
.rf-card {
  display: flex; gap: 14px; align-items: flex-start;
  margin-top: 12px; padding: 14px 16px;
  border-radius: var(--r);
  border: 1px solid rgba(34,197,94,.3);
  background: linear-gradient(135deg, rgba(34,197,94,.08), transparent 60%), var(--bg-2);
  animation: unitIn .3s var(--ease);
}
.rf-card[hidden] { display: none; }
.rf-card__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--ok-soft); color: var(--ok); flex-shrink: 0; }
.rf-card__eyebrow { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ok); }
.rf-card__nome { font-size: 15.5px; font-weight: 700; margin-top: 1px; }
.rf-card__razao { font-size: 12px; color: var(--text-3); }
.rf-card__chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 8px 0 6px; }
.rf-card__ativ { font-size: 12.5px; color: var(--text-2); }
@keyframes unitIn { from { opacity: 0; transform: translateY(6px); } }

/* ------------------------------------------------------------------ */
/* Integracoes                                                         */
/* ------------------------------------------------------------------ */
.int {
  display: flex; flex-direction: column; gap: 28px;
  max-width: 1180px; margin: 0 auto; width: 100%;
}
.int__intro h2 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.int__intro p { color: var(--text-2); margin: 4px 0 0; max-width: 52ch; line-height: 1.45; }

.int__secao { display: flex; flex-direction: column; gap: 12px; }
.int__secao-cab { display: flex; flex-direction: column; gap: 2px; padding: 0 2px; }
.int__secao-titulo {
  margin: 0; font-family: var(--mi-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em;
  text-transform: uppercase; color: var(--text-2);
}
.int__secao-sub { margin: 0; font-size: 13px; color: var(--text-2); line-height: 1.4; max-width: 60ch; }

.int__grade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  align-items: stretch;
}
.int-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--border); border-radius: 18px;
  background: var(--mi-branco); overflow: hidden; min-width: 0;
}
.int-card > .spinner { margin: 60px auto; }
.int-card__head {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 16px 14px; border-bottom: 1px solid var(--border);
}
.int-card__head .grow { min-width: 0; }
.int-logo { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: var(--mi-indigo); background: var(--mi-indigo-soft); flex-shrink: 0; } /* integrações não têm cor de marca: ícone índigo */
.int-card__eyebrow { font-family: var(--mi-font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); }
.int-card__title { font-size: 17px; font-weight: 600; margin: 1px 0 3px; letter-spacing: -.01em; }
.int-card__sub { font-size: 13px; color: var(--text-2); margin: 0; line-height: 1.4; }
.int-card__body { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.int-card__acoes { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: auto; padding-top: 10px; }
.int-pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 99px;
  font-size: 12px; font-weight: 600; white-space: nowrap; flex-shrink: 0;
  background: var(--mi-nevoa); color: var(--text-2); align-self: flex-start;
}
.int-pill__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; }
.int-pill.is-ok { background: var(--mi-verde-bg); color: var(--mi-verde-tx); }
.int-pill.is-ok .int-pill__dot { background: var(--mi-verde-ponto); }
.int-pill.is-warn { background: var(--mi-ambar-bg); color: var(--mi-ambar-tx); }
.int-pill.is-warn .int-pill__dot { background: var(--mi-ambar-ponto); }
.int-pill.is-err { background: var(--mi-vermelho-bg); color: var(--mi-vermelho-tx); }
.int-pill.is-err .int-pill__dot { background: var(--mi-vermelho-tx); }
.int-pill.is-off { background: var(--mi-nevoa); color: var(--text-2); }
.int-pill.is-off .int-pill__dot { background: var(--text-3); }
.int-avancado { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; }
.int-avancado > summary::-webkit-details-marker { display: none; }
.int-avancado > summary::before { content: ""; width: 8px; height: 8px; margin-right: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s ease; flex: none; }
.int-avancado[open] > summary::before { transform: rotate(45deg); }
.int-avancado > summary { list-style: none; min-height: var(--mi-alvo-min); display: flex; align-items: center; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text-2); }
/* Flutua logo abaixo da barra superior, POR CIMA do conteúdo: não ocupa lugar na coluna, então nada se move nem ganha rolagem */
.aviso-global { position: relative; flex-shrink: 0; z-index: 30; box-shadow: 0 8px 20px rgba(11,11,18,.12); display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 22px; background: var(--mi-ambar-bg); border-bottom: 1px solid var(--mi-ambar-borda); color: var(--mi-ambar-tx-forte); font-size: 14px; }
.aviso-global[hidden] { display: none; }
.aviso-global__txt { flex: 1 1 280px; min-width: 0; }
.aviso-global__txt b { font-weight: 700; }
.aviso-global__acao { flex: 0 0 auto; }
.aud-filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; margin-bottom: 10px; }
.aud-filtros__campo { min-width: 160px; margin: 0; }
.aud-filtros__limpar { align-self: flex-end; }
.aud-contagem { margin: 0 0 10px; }
.aud-ip { font-family: var(--mi-font-mono); color: var(--mi-texto-3); }
.aud-grupo td { background: var(--mi-nevoa); }
.aud-grupo__acao { white-space: nowrap; }
.aud-ver { min-height: var(--mi-alvo-min); margin: -10px 0 -10px 6px; padding: 0 10px; border: 0; background: none; color: var(--mi-indigo-escuro); font: inherit; font-size: 12px; font-weight: 600; text-decoration: underline; cursor: pointer; }
.aud-filho[hidden] { display: none; }
.aud-filho td:first-child { padding-left: 28px; }
.aviso-global__fechar { flex: 0 0 auto; width: var(--mi-alvo-min); height: var(--mi-alvo-min); margin: -6px -12px -6px 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: inherit; cursor: pointer; }
.aviso-global__fechar:hover { background: var(--mi-ambar-hover); }
.int-link { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; margin-top: 6px; min-height: var(--mi-alvo-min); }
.int__outros .card { margin: 0; border-radius: 18px; }
.int__outros .row--between { margin-bottom: 10px !important; padding: 0 2px; }
.int__outros .card__title { font-family: var(--mi-font-mono); font-size: 11px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); }

.modelos { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modelo {
  text-align: left; padding: 12px; border-radius: var(--r);
  border: 1px solid var(--border-strong); background: var(--mi-branco); color: var(--text);
  font: inherit; cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast);
}
.modelo:hover { border-color: var(--text-3); }
.modelo[aria-checked="true"] { border-color: var(--mi-indigo); background: var(--mi-indigo-soft); box-shadow: inset 0 0 0 1px var(--mi-indigo); }
.modelo.is-indisp { opacity: .45; cursor: not-allowed; }
.modelo__top { display: flex; align-items: center; gap: 6px; justify-content: space-between; }
.modelo__nome { font-weight: 600; font-size: 14px; }
.modelo__desc { font-size: 12px; color: var(--text-2); margin: 4px 0 6px; line-height: 1.45; }
.modelo__preco { font-size: 11px; color: var(--text-2); font-variant-numeric: tabular-nums; }

.segmented { display: inline-flex; padding: 4px; gap: 0; border-radius: 12px; background: var(--mi-branco); border: 1px solid var(--border); }
.segmented__opt { height: var(--mi-alvo-min); border: 0; background: none; color: var(--text-2); font: inherit; font-size: 14px; font-weight: 500; padding: 0 16px; border-radius: 9px; cursor: pointer; transition: background-color .15s, color .15s; }
.segmented__opt:hover { color: var(--text); }
.segmented__opt[aria-checked="true"] { background: var(--mi-grafite); color: var(--mi-sobre-cor); font-weight: 600; }
.segmented.is-disabled { opacity: .5; }
.segmented__opt:disabled { cursor: not-allowed; }

.teste { margin-top: 14px; padding: 12px 14px; border-radius: var(--r); border: 1px solid var(--border); background: var(--mi-nevoa); font-size: 13px; }
.teste[hidden] { display: none; }
.teste__linha { display: flex; align-items: center; gap: 8px; }
.teste.is-ok { border-color: var(--mi-verde-ponto); background: var(--mi-verde-bg); }
.teste.is-ok .teste__linha .ico { color: var(--mi-verde-tx); }
.teste.is-err { border-color: var(--mi-vermelho-borda); background: var(--mi-vermelho-bg); }
.teste.is-err .teste__linha .ico { color: var(--mi-vermelho-tx); }
.teste__resp { margin-top: 6px; color: var(--text-2); }
.teste__det { margin-top: 6px; color: var(--text-2); font-size: 12px; }
.spinner--inline { width: 14px; height: 14px; margin: 0; border-width: 2px; display: inline-block; }

.estuda { border-top: 1px solid var(--border); padding: 16px 20px 18px; background: var(--mi-nevoa); }
.estuda__head { display: flex; align-items: center; gap: 7px; font-weight: 650; font-size: 13px; margin-bottom: 10px; }
.estuda__head .ico { color: var(--mi-indigo); }
.estuda__lista { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 14px; }
.estuda__lista li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-2); padding: 6px 8px; border-radius: 8px; background: var(--mi-branco); }
.estuda__lista li.is-ok > .ico { color: var(--mi-verde-ponto); }
.estuda__lista li.is-falta > .ico { color: var(--mi-ambar-ponto); }
.estuda__lista strong { font-variant-numeric: tabular-nums; }
.estuda__det { color: var(--text-2); font-size: 12px; }
.estuda__link { color: var(--text-3); display: grid; place-items: center; min-width: var(--mi-alvo-min); min-height: var(--mi-alvo-min); margin: -16px; }
.estuda__link:hover { color: var(--text); }
.estuda__nota { font-size: 12px; color: var(--text-3); margin: 10px 0 0; }

.passo { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border); }
.passo:last-of-type { border-bottom: 0; }
.passo__n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-family: var(--mi-font-mono); font-size: 12px; font-weight: 500; background: var(--mi-indigo-soft); color: var(--mi-indigo-escuro); flex-shrink: 0; }
.passo__t { font-weight: 600; font-size: 14px; margin: 2px 0 2px; }
.passo__d { font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.aviso { display: flex; gap: 9px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm); font-size: 12.5px; margin: -4px 0 12px; }
.aviso--warn { background: var(--mi-ambar-bg); color: var(--mi-ambar-tx-forte); }
.aviso--warn a { color: var(--mi-ambar-tx-forte); font-weight: 600; text-decoration: underline; }
.aviso .ico { margin-top: 2px; }
.webhook { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: var(--r-sm); background: var(--mi-nevoa); border: 1px dashed var(--border-strong); color: var(--text-2); }
.webhook__url { flex: 1; min-width: 0; font-family: var(--mono); font-size: 11.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.btn.is-copied { color: var(--mi-verde-tx); }

.saud { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 16px; align-items: start; }
.saud__form .emp-switch { margin-bottom: 12px; }
.vars { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; margin-top: -6px; }
.var { font-family: var(--mono); font-size: 11.5px; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--mi-branco); color: var(--mi-indigo-hover); cursor: pointer; min-height: var(--mi-alvo-min); }
.var:hover { border-color: var(--mi-indigo); color: var(--mi-indigo-escuro); }
.wa-cel { border-radius: 18px; overflow: hidden; border: 1px solid var(--border); background: var(--mi-nevoa); }
.wa-cel__top { display: flex; align-items: center; gap: 8px; padding: 10px 12px; background: var(--mi-branco); border-bottom: 1px solid var(--border); font-size: 12px; font-weight: 600; color: var(--text); }
.wa-cel__av { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--mi-indigo); color: var(--mi-sobre-cor); }
.wa-cel__chat {
  padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; min-height: 220px;
  background: var(--mi-nevoa);
}
.wa-bolha {
  align-self: flex-end; max-width: 92%;
  padding: 6px 8px 16px; border-radius: 8px 0 8px 8px;
  background: var(--mi-indigo); color: var(--mi-sobre-cor); font-size: 12px; line-height: 1.4;
  white-space: pre-wrap; overflow-wrap: anywhere; position: relative;
}
.wa-bolha--in { align-self: flex-start; background: var(--mi-branco); color: var(--mi-texto-1); border: 1px solid var(--border); border-radius: 0 8px 8px 8px; padding-bottom: 6px; }
.wa-bolha__hora { position: absolute; right: 7px; bottom: 3px; font-size: 10px; color: rgba(255,255,255,.75); }
.wa-bolha--in .wa-bolha__hora { color: var(--text-3); }
.wa-on { display: flex; align-items: center; gap: 14px; margin: 0 20px 4px; padding: 14px 16px; border-radius: var(--r); background: var(--mi-verde-bg); border: 0; }
.wa-on__av { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--mi-verde-ponto); color: var(--mi-sobre-cor); }
.wa-on__num { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wa-on__perfil { font-size: 12px; color: var(--mi-verde-tx); }

/* Modal */
.modal-ov { position: fixed; inset: 0; z-index: 700; display: grid; place-items: center; padding: 16px; background: rgba(11,11,18,.45); opacity: 0; transition: opacity .2s var(--ease); }
.modal-ov.is-open { opacity: 1; }
.modal-box { width: min(440px, 100%); max-height: calc(100vh - 32px); overflow: auto; border-radius: 20px; border: 1px solid var(--border); background: var(--mi-branco); box-shadow: 0 24px 60px rgba(11,11,18,.18); transform: translateY(10px) scale(.98); transition: transform .22s var(--ease); }
.modal-ov.is-open .modal-box { transform: none; }
.modal-box__head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px 6px; }
.modal-box__head h2 { font-size: 16px; }
.qr { padding: 6px 18px 20px; }
.qr__tabs { margin: 0 auto 14px; }
.qr__painel[hidden] { display: none; }
.qr__moldura { position: relative; width: 256px; height: 256px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: var(--mi-branco); border: 1px solid var(--border); }
.qr__img { width: 100%; height: 100%; display: block; }
.qr__moldura.is-load .qr__img { opacity: 0; }
.qr__moldura.is-load { background: linear-gradient(90deg, var(--mi-borda-suave) 25%, var(--mi-nevoa) 50%, var(--mi-borda-suave) 75%); background-size: 200% 100%; animation: shimmer 1.2s infinite; }
.qr__scan { position: absolute; left: 8px; right: 8px; height: 2px; top: 10%; background: linear-gradient(90deg, transparent, var(--mi-indigo), transparent); animation: scan 2.4s ease-in-out infinite; }
@keyframes scan { 50% { top: 88%; } }
.qr__passos { margin: 16px 0 6px; padding-left: 20px; font-size: 13px; color: var(--text-2); }
.qr__passos li { margin: 3px 0; }
.qr__estado { text-align: center; font-size: 13px; color: var(--text-2); }
.qr__codigo { margin: 14px 0 8px; text-align: center; font-family: var(--mono); font-size: 28px; font-weight: 700; letter-spacing: .12em; padding: 14px; border-radius: var(--r); background: var(--mi-nevoa); border: 1px dashed var(--mi-borda-forte); }
.qr__codigo[hidden] { display: none; }
.qr__ok { text-align: center; padding: 24px 0 10px; animation: unitIn .3s var(--ease); }
.qr__ok-ico { width: 68px; height: 68px; border-radius: 50%; margin: 0 auto 12px; display: grid; place-items: center; background: var(--mi-verde-ponto); color: var(--mi-sobre-cor); }
.qr__ok h3 { font-size: 18px; }
.qr__ok p { color: var(--text-2); }

/* A tela de Conversas tem o próprio arquivo: conversas.css */
.lead__foto {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  background: var(--surface);
}
.lead__foto-acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.lead__foto-hint { font-size: 11.5px; color: var(--text-3); margin-top: 2px; }

/* Regras de outras telas que moravam no bloco do CRM */
@media (max-width: 960px) {
  .int__grade { grid-template-columns: 1fr; }
  .int { gap: 22px; }
  .int-card__head { flex-wrap: wrap; }
  .int-card__head .int-pill { margin-left: auto; }
}
@media (max-width: 640px) {
  .modelos, .estuda__lista { grid-template-columns: 1fr; }
  .saud { grid-template-columns: 1fr; }
  .int-card__acoes { flex-direction: column; align-items: stretch; }
  .int-card__acoes .grow { display: none; }
}

/* O Painel tem o próprio arquivo: painel.css */

/* ------------------------------------------------------------------ */
/* Responsivo                                                          */
/* ------------------------------------------------------------------ */
@media (max-width: 960px) {
  .chat { grid-template-columns: 1fr; }
  .chat__list { border-right: 0; }
  .chat.is-thread-open .chat__list { display: none; }
  .chat:not(.is-thread-open) .chat__thread { display: none; }
  .msg { max-width: 88%; }
}

@media (max-width: 560px) {
  .view { padding: 14px; }
  .auth__card { padding: 24px; }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }
  .stat__value { font-size: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ------------------------------------------------------------------ */
/* CRM: ficha do lead                                                  */
/* ------------------------------------------------------------------ */
.crm__lead { display: none; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: var(--bg-2); }
.crm.has-lead .crm__lead { display: flex; }
.lead__cab { display: flex; align-items: center; gap: 8px; padding: 14px 14px 10px 16px; border-bottom: 1px solid var(--border); }
/* Ficha do lead: leitura compacta (padrão) e formulário de edição */
.lead__sub { font-size: 11.5px; color: var(--text-3); }
.lead__etapa { width: 100%; }
.lead__ler { display: grid; grid-template-columns: 82px minmax(0, 1fr); gap: 10px 10px; margin: 6px 0 0; font-size: 13px; align-items: start; }
.lead__ler dt { color: var(--text-3); padding-top: 1px; }
.lead__ler dd { margin: 0; min-width: 0; color: var(--text); overflow-wrap: anywhere; }
.lead__valor { display: flex; align-items: center; gap: 8px; }
.lead__vazio { color: var(--text-3); }
.lead__notas { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; white-space: pre-wrap; }
.lead__atalho { position: relative; display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--border-strong); color: var(--text-2); }
.lead__atalho::after { content: ""; position: absolute; inset: -10px; } /* alvo de toque de 44 px sem aumentar o ícone */
.lead__atalho:hover { color: var(--text); border-color: var(--text-3); }
.lead__atalho--wa { color: var(--mi-verde-tx); border-color: rgba(37,211,102,.35); }
.lead__foto-acoes { margin-bottom: 12px; }
/* Leitura: o contexto (origem, unidade...) vem logo abaixo dos dados, não preso ao pé da coluna */
.crm__lead .lead__form--leitura { flex: 0 0 auto; }
.lead__nome { font-size: 14.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-etapa { flex-shrink: 0; height: 22px; padding: 0 9px; border-radius: 99px; display: inline-flex; align-items: center; font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--text-2); }
.lead__form { flex: 1; overflow-y: auto; padding: 14px 16px 6px; }
.lead__form .field { margin-bottom: 12px; }
.lead__atalhos { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 10px; }
.lead__atalhos:empty { display: none; }
.lead__info { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; padding: 12px 16px; border-top: 1px solid var(--border); font-size: 12px; }
.lead__info dt { color: var(--text-3); }
.lead__info dd { margin: 0; color: var(--text-2); text-align: right; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead__pe { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--border); background: var(--surface); }
.lead__estado { font-size: 11.5px; color: var(--warn); }

.funil { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.funil__p {
  display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 10px;
  border-radius: 9px; border: 1px solid var(--border-strong); background: var(--surface);
  color: var(--text-2); font: inherit; font-size: 12.5px; font-weight: 550; cursor: pointer; text-align: left;
  transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
}
.funil__p:hover { border-color: var(--text-3); color: var(--text); }
.funil__dot { width: 9px; height: 9px; border-radius: 50%; border: 2px solid var(--text-3); flex-shrink: 0; }
.funil__p.is-feito .funil__dot { background: var(--brand); border-color: var(--brand); }
.funil__p.is-feito { color: var(--text); }
.funil__p[aria-checked="true"] { border-color: var(--brand); background: var(--brand-soft); color: var(--mi-sobre-cor); box-shadow: 0 0 0 3px rgba(109,94,252,.15); }
.funil__p[aria-checked="true"] .funil__dot { background: var(--mi-branco); border-color: var(--mi-branco); box-shadow: 0 0 0 3px rgba(255,255,255,.18); }
.funil__p--perdido[aria-checked="true"] { border-color: var(--err); background: var(--err-soft); box-shadow: 0 0 0 3px rgba(244,63,94,.12); }
.funil__p--cliente[aria-checked="true"] { border-color: var(--ok); background: var(--ok-soft); box-shadow: 0 0 0 3px rgba(34,197,94,.12); }

/* ------------------------------------------------------------------ */
/* Logo da empresa (aba Dados)                                         */
/* ------------------------------------------------------------------ */
.logo-f--claro { background: var(--mi-branco); }
.logo-f--escuro { background: var(--mi-grafite); }
.logo-f--nenhum { background: repeating-conic-gradient(rgba(11,11,18,.06) 0 25%, transparent 0 50%) 0 0 / 14px 14px; }
.emp-hero__logo--img { padding: 7px; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.emp-hero__logo--img img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.emp-hero__logo--img.logo-f--nenhum { background: transparent; box-shadow: none; padding: 0; }

.logo-ed { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; align-items: start; position: relative; }
.logo-ed__alvo {
  position: relative; height: 150px; border-radius: 16px; border: 1px dashed var(--border-strong); cursor: pointer;
  display: grid; place-items: center; padding: 18px; overflow: hidden; color: var(--text-2); font: inherit;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.logo-ed__alvo:hover, .logo-ed__alvo.is-sobre { border-color: var(--brand); box-shadow: 0 0 0 4px var(--brand-soft); }
.logo-ed__alvo.is-sobre { transform: scale(1.01); }
.logo-ed__alvo.logo-f--vazio { background: radial-gradient(260px 120px at 50% 0%, rgba(109,94,252,.12), transparent 70%), var(--bg-2); }
.logo-ed__alvo:not(.logo-f--vazio) { border-style: solid; border-color: var(--border); }
.logo-ed__alvo img { max-width: 100%; max-height: 110px; object-fit: contain; }
.logo-ed__vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 12px; color: var(--text-3); }
.logo-ed__vazio .ico { color: var(--brand); margin-bottom: 4px; transform: rotate(180deg); }
.logo-ed__vazio strong { color: var(--text); font-size: 13.5px; }
.logo-ed__spin { position: absolute; inset: 0; display: none; place-items: center; background: rgba(8,8,12,.6); }
.logo-ed__spin::after { content: ''; width: 26px; height: 26px; border-radius: 50%; border: 3px solid rgba(255,255,255,.25); border-top-color: var(--mi-sobre-cor); animation: spin .8s linear infinite; }
.logo-ed.is-enviando .logo-ed__spin { display: grid; }
.logo-ed__lado { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.logo-ed__rot { font-size: 12px; font-weight: 600; color: var(--text-2); }
.logo-ed__fundos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.logo-ed__fundo {
  display: flex; align-items: center; gap: 9px; padding: 9px; border-radius: 12px; cursor: pointer; text-align: left;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.logo-ed__fundo:hover { border-color: var(--border-strong); }
.logo-ed__fundo.is-on { border-color: var(--brand); background: var(--brand-soft); }
.logo-ed__fundo strong { display: block; font-size: 12.5px; font-weight: 600; }
.logo-ed__fundo small { display: block; font-size: 11px; color: var(--text-3); line-height: 1.3; }
.logo-ed__amostra { width: 26px; height: 26px; border-radius: 8px; flex-shrink: 0; border: 1px solid var(--border-strong); }
.logo-ed__acoes { display: flex; flex-wrap: wrap; gap: 6px; }
.logo-ed__dicas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 13px; color: var(--text-2); }
.logo-ed__dicas li { display: flex; align-items: center; gap: 8px; }
.logo-ed__dicas .ico { color: var(--ok); }
@media (max-width: 720px) {
  .logo-ed { grid-template-columns: 1fr; }
  .logo-ed__fundos { grid-template-columns: 1fr; }
}

}

/* ------------------------------------------------------------------ */
/* Casca do app (redesign): marca, empresa, status da agente, topo, celular */
/* ------------------------------------------------------------------ */
.sb-brand { justify-content: space-between; }
.sb-brand__logo .sb-logo-h { height: 44px; width: auto; margin-left: -6px; }
.sb-brand__logo .sb-logo-s { display: none; width: 36px; height: 36px; }
.app.is-recolhido .sb-brand__logo .sb-logo-h { display: none; }
.app.is-recolhido .sb-brand__logo .sb-logo-s { display: block; }
.app.is-recolhido .sb-brand__logo { margin: 0 auto; }

/* Empresa e unidade (link para Empresa e unidades, só para quem pode abrir) */
.sb-empresa {
  display: flex; align-items: center; gap: 10px; margin: 12px 10px 0; padding: 8px 10px; min-height: 52px;
  border: 1px solid var(--border); border-radius: var(--r); background: var(--mi-branco);
  color: var(--text); text-decoration: none; flex-shrink: 0;
}
a.sb-empresa:hover { background: var(--surface-2); border-color: var(--border-strong); color: var(--text); }
.sb-empresa__ini {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0; display: grid; place-items: center;
  background: var(--mi-borda); color: var(--mi-grafite); font-size: 12px; font-weight: 600;
}
.sb-empresa__txt { min-width: 0; display: flex; flex-direction: column; }
.sb-empresa__nome { font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-empresa__uni { font-size: 12px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app.is-recolhido .sb-empresa { justify-content: center; margin: 10px auto 0; padding: 6px; width: 48px; min-height: 48px; }
.app.is-recolhido .sb-empresa__txt { display: none; }

/* Card de status da agente (no lugar do "Chat do site no ar") */
.sb-agente {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 12px;
  border-radius: var(--r); background: var(--mi-indigo-soft);
}
.sb-agente.is-off { background: var(--surface-2); border: 1px solid var(--border); }
.sb-agente--btn { width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; border: 1px solid transparent; transition: border-color .15s, box-shadow .15s; }
.sb-agente--btn:hover { border-color: var(--mi-indigo); }
.sb-agente--btn:focus-visible { outline: 2px solid var(--mi-indigo); outline-offset: 2px; }
.sb-agente__mais { margin-left: auto; flex-shrink: 0; font-size: 12px; font-weight: 600; color: var(--mi-indigo-hover); }
.sb-agente__ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--mi-coral); flex-shrink: 0; }
.sb-agente.is-off .sb-agente__ponto { background: var(--text-3); }
.sb-agente__txt { display: flex; flex-direction: column; min-width: 0; }
.sb-agente__t { font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--mi-indigo-hover); }
.sb-agente.is-off .sb-agente__t { color: var(--text-2); }
.sb-agente__s { font-size: 12px; color: var(--text-2); }
.app.is-recolhido .sb-agente { justify-content: center; padding: 0; min-height: 44px; }
.app.is-recolhido .sb-agente__txt { display: none; }

/* Barra superior: título, abas (pílula) e ações na mesma linha */
.topbar { gap: 20px; }
.topbar__actions { display: flex; align-items: center; gap: 10px; }
.topbar__chat { color: var(--mi-indigo); }

/* Seções com muitas abas (Configurações tem 7): sem folga, o atalho "Ver chat do site" cede o lugar e as abas ficam mais justas */
@media (min-width: 768px) and (max-width: 1599px) {
  .topbar:has(.abas .aba:nth-child(6)) .topbar__chat { display: none; }
  .topbar:has(.abas .aba:nth-child(6)) .aba { padding: 0 12px; }
}

/* Copiloto: botão na barra superior (saiu o botão flutuante) */
.cp-top { gap: 8px; padding: 0 14px; color: var(--mi-grafite); }
.cp-top__ico { display: grid; place-items: center; color: var(--mi-indigo); }
.cp-top__kbd {
  font-family: var(--mono); font-size: 11px; padding: 2px 6px; border: 1px solid var(--border-strong);
  border-radius: 6px; color: var(--text-2); background: var(--surface-2);
}
.cp-top.is-aberto { background: var(--mi-indigo-soft); border-color: transparent; color: var(--mi-indigo-hover); }
.cp-top.has-novo::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--mi-coral); }

/* Folha "Mais" e barra inferior (só existem no celular) */
.tabbar { display: none; }

@media (max-width: 767px) {
  .app { grid-template-columns: 1fr; --tabbar-h: calc(var(--mi-barra-inferior) + env(safe-area-inset-bottom, 0px)); }
  .app.has-abas { --abas-h: 52px; }
  .sidebar { display: none; }

  /* topo em duas linhas: título e ações; abas rolam embaixo */
  .topbar {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: var(--topbar) var(--abas-h);
    height: calc(var(--topbar) + var(--abas-h)); padding: 0 14px; gap: 0 8px; align-items: center;
  }
  .topbar__title { font-size: 20px; }
  .topbar__spacer { display: none; }
  .topbar .abas { grid-column: 1 / -1; grid-row: 2; }
  .topbar__chat, .cp-top__txt, .cp-top__kbd { display: none; }
  .cp-top { width: var(--mi-alvo-min); padding: 0; }

  .view { padding-bottom: calc(var(--tabbar-h) + 14px); }
  .ai-salvar { left: 12px; right: 12px; bottom: calc(var(--tabbar-h) + 12px); }
  .app.is-recolhido .ai-salvar { left: 12px; }

  .tabbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
    height: var(--tabbar-h); padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--mi-branco); border-top: 1px solid var(--border);
  }
  .tb-item {
    position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: var(--mi-alvo-min); border: 0; background: none; font: inherit; font-size: 12px; font-weight: 600;
    color: var(--text-2); cursor: pointer;
  }
  .tb-item__ico { width: 56px; height: 32px; border-radius: 16px; display: grid; place-items: center; transition: background var(--t-fast); }
  .tb-item[aria-current="page"] { color: var(--mi-indigo-hover); }
  .tb-item[aria-current="page"] .tb-item__ico { background: var(--mi-indigo-soft); }
  .tb-item__badge {
    position: absolute; top: 6px; left: calc(50% + 8px); min-width: 20px; height: 20px; padding: 0 6px; border-radius: 99px;
    background: var(--mi-ambar-bg); color: var(--mi-ambar-tx); border: 1px solid var(--mi-ambar-borda); font-size: 11px; font-weight: 700;
    display: grid; place-items: center; line-height: 1;
  }
  .tb-item__badge.hidden { display: none; }
}

.mais { position: fixed; inset: 0; z-index: 300; }
.mais__fundo { position: absolute; inset: 0; background: rgba(11, 11, 18, .45); }
.mais__folha {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--mi-branco); border-radius: 20px 20px 0 0;
}
.mais__alca { width: 40px; height: 4px; border-radius: 2px; background: var(--mi-borda-forte); margin: 0 auto 10px; }
.mais__item {
  display: flex; align-items: center; gap: 14px; min-height: 52px; padding: 0 12px; border: 0; border-radius: var(--r);
  background: none; font: inherit; font-size: 16px; font-weight: 500; color: var(--text); text-align: left; cursor: pointer;
}
.mais__item:hover { background: var(--surface-2); }
.mais__ico { display: grid; place-items: center; color: var(--mi-indigo); }
.mais__item--sair, .mais__item--sair .mais__ico { color: var(--err); }

/* Janelas de confirmação e aviso (SweetAlert): claras, com cantos e botões no padrão do painel */
.swal2-popup.sw-popup { border-radius: 20px; border: 1px solid var(--mi-borda); box-shadow: 0 24px 60px rgba(11, 11, 18, .18); font-family: var(--mi-font); }
.swal2-popup.sw-popup .swal2-title { font-weight: 800; letter-spacing: -.03em; }
.swal2-popup.sw-popup .swal2-html-container { color: var(--mi-texto-2); font-size: 15px; line-height: 1.5; }
.swal2-popup.sw-popup .swal2-styled { min-height: var(--mi-alvo-min); padding: 0 22px; border-radius: 10px; font-family: var(--mi-font); font-size: 14px; font-weight: 600; box-shadow: none; }
.swal2-popup.sw-popup .swal2-styled:focus-visible { box-shadow: 0 0 0 3px var(--mi-indigo-soft); }