/* =========================================================
   OPUSMED · COMPONENTES · v1.0
   ========================================================= */

/* ---------- BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  font-size:var(--text-md);
  line-height:var(--leading-normal);
  color:var(--text-primary);
  background:var(--surface-canvas);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--text-link);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:none;box-shadow:var(--shadow-focus)}
hr{border:0;border-top:1px solid var(--border-subtle);margin:var(--space-6) 0}

/* ---------- TIPOGRAFIA ---------- */
.h1,.h2,.h3,.h4,.h5,.h6{margin:0;color:var(--text-primary);letter-spacing:var(--tracking-tight)}
.h1{font-size:var(--text-6xl);font-weight:var(--weight-bold);line-height:var(--leading-tight)}
.h2{font-size:var(--text-5xl);font-weight:var(--weight-bold);line-height:var(--leading-tight)}
.h3{font-size:var(--text-4xl);font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
.h4{font-size:var(--text-3xl);font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
.h5{font-size:var(--text-2xl);font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
.h6{font-size:var(--text-xl); font-weight:var(--weight-semibold);line-height:var(--leading-snug)}
.text-body{font-size:var(--text-md);line-height:var(--leading-normal)}
.text-caption{font-size:var(--text-xs);color:var(--text-tertiary);line-height:var(--leading-normal)}
.text-label{
  font-size:var(--text-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--text-tertiary);
}
.text-mono{font-family:var(--font-mono);font-size:var(--text-sm)}

/* ---------- BOTÕES ---------- */
.btn{
  --btn-bg:transparent; --btn-fg:var(--text-primary);
  --btn-bd:transparent; --btn-bg-h:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control-h);padding:0 var(--space-4);
  font-size:var(--text-md);font-weight:var(--weight-medium);
  border-radius:var(--radius-lg);border:1px solid var(--btn-bd);
  background:var(--btn-bg);color:var(--btn-fg);
  cursor:pointer;white-space:nowrap;
  transition:background var(--duration-fast) var(--easing-standard),
             border-color var(--duration-fast) var(--easing-standard),
             color var(--duration-fast) var(--easing-standard),
             box-shadow var(--duration-fast) var(--easing-standard);
}
.btn:hover{background:var(--btn-bg-h)}
.btn:active{transform:translateY(.5px)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.btn .btn__icon{display:inline-flex;width:16px;height:16px}
.btn--sm{height:var(--control-h-sm);padding:0 var(--space-3);font-size:var(--text-sm);border-radius:var(--radius-md)}
.btn--lg{height:var(--control-h-lg);padding:0 var(--space-5);font-size:var(--text-base)}
.btn--block{width:100%}

.btn--primary{
  --btn-bg:var(--color-primary-500); --btn-fg:var(--text-on-primary);
  --btn-bd:var(--color-primary-500); --btn-bg-h:var(--color-primary-600);
}
.btn--primary:hover{border-color:var(--color-primary-600)}
.btn--secondary{
  --btn-bg:var(--surface-default); --btn-fg:var(--color-primary-700);
  --btn-bd:var(--color-primary-200); --btn-bg-h:var(--color-primary-50);
}
.btn--tertiary{
  --btn-bg:var(--surface-muted); --btn-fg:var(--text-primary);
  --btn-bd:var(--surface-muted); --btn-bg-h:var(--color-neutral-200);
}
.btn--ghost{
  --btn-bg:transparent; --btn-fg:var(--text-secondary);
  --btn-bd:transparent; --btn-bg-h:var(--surface-muted);
}
.btn--destructive{
  --btn-bg:var(--color-danger-500); --btn-fg:var(--text-inverse);
  --btn-bd:var(--color-danger-500); --btn-bg-h:var(--color-danger-600);
}
.btn--destructive:focus-visible{box-shadow:var(--shadow-focus-danger)}
.btn--icon{width:var(--control-h);padding:0;border-radius:var(--radius-md)}
.btn--icon.btn--sm{width:var(--control-h-sm)}
.btn--loading{position:relative;color:transparent !important}
.btn--loading::after{
  content:"";position:absolute;width:14px;height:14px;border-radius:50%;
  border:2px solid currentColor;border-top-color:transparent;
  color:var(--text-on-primary);
  animation:spin .7s linear infinite;
}
.btn--secondary.btn--loading::after,.btn--ghost.btn--loading::after,.btn--tertiary.btn--loading::after{color:var(--color-primary-600)}
@keyframes spin{to{transform:rotate(360deg)}}

/* legacy aliases — coexistência durante migração */
.btn-primary{ /* ALIAS p/ legado */
  display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);
  height:var(--control-h);padding:0 var(--space-4);font-weight:var(--weight-medium);
  border-radius:var(--radius-lg);border:1px solid var(--color-primary-500);
  background:var(--color-primary-500);color:#fff;cursor:pointer;
}
.btn-primary:hover{background:var(--color-primary-600);border-color:var(--color-primary-600)}

/* ---------- INPUTS ---------- */
.field{display:flex;flex-direction:column;gap:var(--space-1);min-width:0}
.field__label{
  font-size:var(--text-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--text-secondary);
}
.field__hint{font-size:var(--text-xs);color:var(--text-tertiary)}
.field__error{font-size:var(--text-xs);color:var(--color-danger-600);display:flex;gap:var(--space-1);align-items:center}

.input,.select,.textarea{
  display:flex;align-items:center;gap:var(--space-2);
  height:var(--control-h);padding:0 var(--control-px);
  background:var(--surface-default);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  font-size:var(--text-md);color:var(--text-primary);
  transition:border-color var(--duration-fast),box-shadow var(--duration-fast);
  width:100%;
}
.input::placeholder,.textarea::placeholder{color:var(--text-tertiary)}
.input:hover,.select:hover,.textarea:hover{border-color:var(--border-default)}
.input:focus,.select:focus,.textarea:focus{
  outline:none;border-color:var(--border-focus);box-shadow:var(--shadow-focus);
}
.input:disabled,.select:disabled,.textarea:disabled{
  background:var(--surface-muted);color:var(--text-disabled);cursor:not-allowed;
}
.input--error,.select--error,.textarea--error{border-color:var(--color-danger-500) !important}
.input--error:focus{box-shadow:var(--shadow-focus-danger)}
.textarea{height:auto;min-height:88px;padding:var(--space-2) var(--control-px);line-height:var(--leading-normal)}
.select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");background-repeat:no-repeat;background-position:right 10px center;padding-right:32px;cursor:pointer}

.input-group{position:relative;display:flex;align-items:center}
.input-group .input{padding-left:36px}
.input-group .input-group__icon{
  position:absolute;left:10px;width:16px;height:16px;color:var(--text-tertiary);pointer-events:none;
}

/* checkbox / radio / toggle */
.checkbox,.radio{
  display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer;
  font-size:var(--text-md);color:var(--text-primary);user-select:none;
}
.checkbox input,.radio input{position:absolute;opacity:0;pointer-events:none}
.checkbox__box,.radio__dot{
  width:18px;height:18px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-default);background:var(--surface-default);
  transition:background var(--duration-fast),border-color var(--duration-fast);
}
.checkbox__box{border-radius:var(--radius-xs)}
.radio__dot{border-radius:50%}
.checkbox input:checked + .checkbox__box{background:var(--color-primary-50);border-color:var(--color-primary-500)}
.checkbox input:checked + .checkbox__box::after{
  content:"";width:9px;height:5px;border-left:2px solid var(--color-primary-600);border-bottom:2px solid var(--color-primary-600);
  transform:translateY(-1px) rotate(-45deg);
}
.radio input:checked + .radio__dot{border-color:var(--color-primary-500)}
.radio input:checked + .radio__dot::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--color-primary-500)}
.checkbox input:focus-visible + .checkbox__box,.radio input:focus-visible + .radio__dot{box-shadow:var(--shadow-focus)}

.toggle{position:relative;display:inline-flex;align-items:center;gap:var(--space-2);cursor:pointer}
.toggle input{position:absolute;opacity:0;pointer-events:none}
.toggle__track{
  width:36px;height:20px;border-radius:var(--radius-pill);
  background:var(--color-neutral-300);position:relative;
  transition:background var(--duration-fast);
}
.toggle__track::after{
  content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;
  background:#fff;box-shadow:var(--shadow-xs);
  transition:transform var(--duration-fast) var(--easing-standard);
}
.toggle input:checked + .toggle__track{background:var(--color-primary-500)}
.toggle input:checked + .toggle__track::after{transform:translateX(16px)}

/* ---------- BADGES, TAGS, CHIPS ---------- */
.badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:2px var(--space-2);font-size:var(--text-2xs);font-weight:var(--weight-semibold);
  border-radius:var(--radius-pill);background:var(--color-neutral-100);color:var(--text-secondary);
  border:1px solid transparent;line-height:1.5;
}
.badge--success{background:var(--color-success-50);color:var(--color-success-700);border-color:#BBF0CF}
.badge--warning{background:var(--color-warning-50);color:var(--color-warning-700);border-color:#FDE3A3}
.badge--danger{background:var(--color-danger-50);color:var(--color-danger-700);border-color:#FCC8C8}
.badge--info{background:var(--color-info-50);color:var(--color-info-700);border-color:#BFD7FE}
.badge--primary{background:var(--color-primary-50);color:var(--color-primary-700);border-color:var(--color-primary-200)}
.badge--secondary{background:var(--color-secondary-50);color:var(--color-secondary-700);border-color:#9DDDD1}
.badge--neutral{background:var(--color-neutral-100);color:var(--color-neutral-700);border-color:var(--border-subtle)}
.badge--dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}

.tag{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:2px var(--space-2);font-size:var(--text-xs);
  background:var(--surface-muted);color:var(--text-secondary);
  border-radius:var(--radius-sm);border:1px solid var(--border-subtle);
}
.chip{
  display:inline-flex;align-items:center;gap:var(--space-2);
  height:28px;padding:0 var(--space-3);font-size:var(--text-sm);
  border-radius:var(--radius-pill);background:var(--surface-default);
  border:1px solid var(--border-subtle);color:var(--text-primary);cursor:pointer;
  transition:background var(--duration-fast),border-color var(--duration-fast);
}
.chip:hover{background:var(--surface-muted)}
.chip--active{background:var(--color-primary-50);color:var(--color-primary-700);border-color:var(--color-primary-200)}

/* avatar */
.avatar{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:50%;
  background:var(--color-primary-100);color:var(--color-primary-700);
  font-size:var(--text-sm);font-weight:var(--weight-semibold);overflow:hidden;
}
.avatar--sm{width:24px;height:24px;font-size:var(--text-2xs)}
.avatar--lg{width:40px;height:40px;font-size:var(--text-md)}
.avatar--xl{width:56px;height:56px;font-size:var(--text-lg)}

/* ---------- MODULE SHELL (v1.0 — adicionado em 2026-05-08) ----------
   Padrão visual padronizado para qualquer painel de módulo do app.
   Garante mesma identidade entre módulos (cabeçalho, padding, tabs
   com sublinhado).

   IMPORTANTE — lições aprendidas em produção:
   1. NÃO use .main-header (barra superior do viewport) duplicando
      o título do módulo. O header fica DENTRO do panel.
   2. Header é DISCRETO: texto + border-bottom subtle. Sem card,
      sem fundo colorido, sem faixa lateral, sem subtítulo descritivo.
   3. Botão "+ Novo X" SEMPRE no canto superior direito do header.
   4. Tabs do módulo (se houver): SEGUNDA linha do header, com o
      mesmo border-bottom. Sublinhado primary-500 no ativo.
   5. Subtítulo descritivo: NÃO usar. O nome do módulo já contextualiza.
   6. Panels devem estar DENTRO de .main-body — nunca como filhos
      diretos de elementos com display:flex (vira flex sibling e
      espreme tudo).

   Uso:
   <section class="om-panel" data-density="comfortable">
     <header class="om-panel-header">
       <div class="om-panel-header__title">
         <h2>Nome do Módulo</h2>
       </div>
       <div class="om-panel-header__actions">
         <button class="btn btn--primary">+ Novo Item</button>
       </div>
     </header>
     ... conteúdo do módulo ...
   </section>
*/
.om-panel{
  background:var(--surface-canvas);
  padding:var(--space-8) var(--space-10);
  width:100%;
  min-height:100%;
}
/* Header DISCRETO (não card!) — texto + linha sutil. Pode ter
   tabs em segunda linha. Botões "+ Novo X" sempre à direita. */
.om-panel-header{
  display:flex;flex-direction:column;
  gap:var(--space-3);
  background:transparent;
  border:none;border-radius:0;box-shadow:none;
  padding:0 0 var(--space-3) 0;
  margin:0 0 var(--space-4) 0;
  border-bottom:1px solid var(--border-subtle);
}
.om-panel-header__top{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--space-3);flex-wrap:wrap;
}
.om-panel-header__title h2{
  font-size:var(--text-lg);
  font-weight:var(--weight-semibold);
  color:var(--color-primary-900);
  letter-spacing:var(--tracking-tight);
  line-height:1.2;
  margin:0;
}
.om-panel-header__actions{
  display:flex;align-items:center;gap:var(--space-2);
  flex-wrap:wrap;
}
/* Tabs do módulo (segunda linha do header) — padrão SUBLINHADO */
.om-panel-header__tabs{
  display:flex;align-items:center;gap:0;
  flex-wrap:wrap;
}
.om-panel-header__tabs .om-tab{
  padding:10px 18px;
  font-size:13px;font-weight:var(--weight-semibold);
  color:var(--text-tertiary);
  background:transparent;border:none;
  border-bottom:2px solid transparent;
  border-radius:0;cursor:pointer;
  margin-bottom:-1px;
  transition:color var(--duration-fast), border-color var(--duration-fast);
}
.om-panel-header__tabs .om-tab:hover:not(.is-active){
  color:var(--color-primary-700);
}
.om-panel-header__tabs .om-tab.is-active{
  color:var(--color-primary-700);
  border-bottom:2px solid var(--color-primary-500);
}

/* ---------- BANNER CTA (versão leve do banner Playbook) ----------
   Card branco com faixa primary à esquerda. Para CTAs secundários
   tipo "Ver documentação", "Tutorial", etc.

   Uso:
   <a class="om-banner" href="...">
     <span class="om-banner__icon">[svg]</span>
     <div class="om-banner__body">
       <strong>Título do CTA</strong>
       <span>Descrição curta</span>
     </div>
     <span class="om-banner__chip">Abrir →</span>
   </a>
*/
.om-banner{
  display:flex;align-items:center;gap:var(--space-3);
  background:var(--surface-default);
  color:var(--color-primary-900);
  border:1px solid var(--border-subtle);
  border-left:4px solid var(--color-primary-500);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-card);
  padding:var(--space-3) var(--space-5);
  text-decoration:none;
  margin-bottom:var(--space-5);
  transition:transform var(--duration-fast), box-shadow var(--duration-fast), border-color var(--duration-fast);
}
.om-banner:hover{
  transform:translateY(-1px);
  border-color:var(--color-primary-300);
  box-shadow:var(--shadow-md);
  text-decoration:none;
}
.om-banner__icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:40px;height:40px;border-radius:var(--radius-md);
  background:var(--color-primary-50);color:var(--color-primary-600);
  flex-shrink:0;
}
.om-banner__icon svg{width:20px;height:20px}
.om-banner__body{flex:1;min-width:0}
.om-banner__body strong{
  display:block;font-size:var(--text-md);
  font-weight:var(--weight-semibold);
  color:var(--color-primary-900);
}
.om-banner__body span{
  font-size:var(--text-xs);color:var(--text-tertiary);
}
.om-banner__chip{
  background:var(--color-primary-50);color:var(--color-primary-700);
  font-size:var(--text-xs);font-weight:var(--weight-semibold);
  padding:6px 12px;border-radius:var(--radius-md);
  flex-shrink:0;
}

/* ---------- MODAL SECTION DIVIDER ----------
   Use entre seções de campos dentro de modais grandes (ex: "Identificação",
   "Aquisição", "Calibração & Manutenção"). Sem emojis, sem fundo colorido.

   Uso:
   <div class="om-modal-section">Identificação</div>
   <div class="grid grid-cols-12 gap-3"> ...campos... </div>
*/
.om-modal-section{
  display:block;
  margin:var(--space-6) 0 var(--space-3);
  padding:0 0 var(--space-2);
  border-bottom:1px solid var(--color-primary-100);
  font-size:var(--text-xs);font-weight:var(--weight-bold);
  color:var(--color-primary-700);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
}
.om-modal-section:first-of-type{margin-top:var(--space-2)}

/* ---------- BOTÕES DE AÇÃO EM TABELA ----------
   Editar (outline primary) e Excluir (outline danger). Pequenos,
   bordas suaves, hover preenche levemente.

   Uso:
   <button class="om-btn-row om-btn-row--edit">Editar</button>
   <button class="om-btn-row om-btn-row--delete">Excluir</button>
*/
.om-btn-row{
  display:inline-flex;align-items:center;gap:5px;
  padding:5px 12px;font-size:12px;
  font-weight:var(--weight-semibold);
  background:var(--surface-default);
  border-radius:var(--radius-md);
  cursor:pointer;
  transition:background var(--duration-fast), border-color var(--duration-fast);
}
.om-btn-row--edit{
  border:1px solid var(--color-primary-200);
  color:var(--color-primary-700);
}
.om-btn-row--edit:hover{
  background:var(--color-primary-50);
  border-color:var(--color-primary-400);
  color:var(--color-primary-800);
}
.om-btn-row--delete{
  border:1px solid #FCC8C8;
  color:var(--color-danger-600);
}
.om-btn-row--delete:hover{
  background:var(--color-danger-50);
  border-color:var(--color-danger-500);
  color:var(--color-danger-700);
}

/* ---------- CHECKBOX LIST (PERMISSÕES) ----------
   Lista de permissões/opções com checkbox + nome + controles à direita.
   IMPORTANTE: o NOME deve estar em <span class="om-ck-name">, NÃO como
   text node solto (text node não posiciona corretamente em flex/grid).

   Uso:
   <div class="om-ck-list">
     <label class="om-ck-item">
       <input type="checkbox">
       <span class="om-ck-name">Calendário</span>
     </label>
     <label class="om-ck-item">
       <input type="checkbox">
       <span class="om-ck-name">CRM</span>
       <select><option>Próprios</option><option>Todos</option></select>
     </label>
   </div>
*/
.om-ck-list{
  display:flex;flex-direction:column;gap:6px;
  margin-top:var(--space-2);
}
.om-ck-item{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:10px 14px;min-height:46px;
  background:var(--surface-default);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);
  font-size:var(--text-sm);
  font-weight:var(--weight-medium);
  cursor:pointer;
  transition:background var(--duration-fast), border-color var(--duration-fast);
}
.om-ck-item:hover{
  background:var(--color-primary-50);
  border-color:var(--color-primary-300);
}
.om-ck-item.is-checked{
  background:var(--color-primary-50);
  border-color:var(--color-primary-500);
  color:var(--color-primary-900);
}
.om-ck-item input[type="checkbox"]{
  flex:0 0 auto;width:18px;height:18px;
  accent-color:var(--color-primary-500);margin:0;
}
.om-ck-name{flex:1 1 auto;min-width:0}
.om-ck-item > select{
  flex:0 0 auto;min-width:140px;width:auto;
  margin:0 0 0 auto;padding:5px 10px;
  font-size:12px;
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-sm);
  background:var(--surface-default);
}

/* ---------- CARDS ---------- */
.card{
  background:var(--surface-default);
  border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-card);
}
.card__header{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border-subtle);
}
.card__title{font-size:var(--text-md);font-weight:var(--weight-semibold);margin:0}
.card__body{padding:var(--space-5)}
.card__footer{padding:var(--space-3) var(--space-5);border-top:1px solid var(--border-subtle);background:var(--surface-subtle);border-radius:0 0 var(--radius-xl) var(--radius-xl)}

/* KPI card — substitui o padrão de left-border do legado */
.kpi{
  position:relative;padding:var(--space-4) var(--space-5);
  background:var(--surface-default);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);
  display:flex;flex-direction:column;gap:var(--space-2);
  overflow:hidden;
}
.kpi::before{
  content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;
  background:var(--kpi-accent,var(--color-primary-500));border-radius:var(--radius-pill);
}
.kpi__label{font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-tertiary)}
.kpi__value{font-size:var(--text-3xl);font-weight:var(--weight-bold);color:var(--text-primary);font-variant-numeric:tabular-nums;letter-spacing:var(--tracking-tight)}
.kpi__sub{font-size:var(--text-xs);color:var(--text-tertiary)}
.kpi--success{--kpi-accent:var(--color-success-500)}
.kpi--warning{--kpi-accent:var(--color-warning-500)}
.kpi--danger{--kpi-accent:var(--color-danger-500)}
.kpi--secondary{--kpi-accent:var(--color-secondary-500)}

/* ---------- TABELA ---------- */
.table-shell{
  background:var(--surface-default);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);overflow:hidden;
}
.table-toolbar{
  display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);
  border-bottom:1px solid var(--border-subtle);background:var(--surface-subtle);
}
.table{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.table thead th{
  position:sticky;top:0;background:var(--surface-subtle);
  font-size:var(--text-2xs);font-weight:var(--weight-semibold);
  letter-spacing:var(--tracking-caps);text-transform:uppercase;
  color:var(--text-tertiary);text-align:left;
  padding:var(--space-3) var(--row-px);height:40px;
  border-bottom:1px solid var(--border-subtle);
  white-space:nowrap;user-select:none;
}
.table thead th.sortable{cursor:pointer}
.table thead th.sortable:hover{color:var(--text-secondary)}
.table tbody td{
  padding:0 var(--row-px);height:var(--row-h);
  border-bottom:1px solid var(--border-subtle);
  color:var(--text-primary);vertical-align:middle;
}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr:hover{background:var(--color-primary-50)}
.table tbody tr.is-selected{background:var(--color-primary-50)}
.table .num{text-align:right;font-variant-numeric:tabular-nums}
.table .actions{text-align:right;white-space:nowrap}
.table-footer{
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-3) var(--space-4);
  border-top:1px solid var(--border-subtle);background:var(--surface-subtle);
  font-size:var(--text-sm);color:var(--text-secondary);
}
.bulk-bar{
  display:flex;align-items:center;gap:var(--space-3);
  padding:var(--space-2) var(--space-4);
  background:var(--color-primary-50);
  border-bottom:1px solid var(--color-primary-200);
  color:var(--color-primary-800);font-size:var(--text-sm);
}

/* ---------- TABS ---------- */
.tabs{display:flex;gap:var(--space-2);border-bottom:1px solid var(--border-subtle)}
.tabs__item{
  position:relative;padding:var(--space-3) var(--space-4);
  font-size:var(--text-md);font-weight:var(--weight-medium);
  color:var(--text-secondary);cursor:pointer;background:none;border:0;
  transition:color var(--duration-fast);
}
.tabs__item:hover{color:var(--text-primary)}
.tabs__item.is-active{color:var(--color-primary-600)}
.tabs__item.is-active::after{
  content:"";position:absolute;left:var(--space-4);right:var(--space-4);bottom:-1px;
  height:2px;background:var(--color-primary-500);border-radius:2px 2px 0 0;
}

/* ---------- BREADCRUMB ---------- */
.breadcrumb{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-tertiary)}
.breadcrumb a{color:var(--text-secondary)}
.breadcrumb__sep{color:var(--text-disabled)}
.breadcrumb__item--current{color:var(--text-primary);font-weight:var(--weight-medium)}

/* ---------- ACCORDION ---------- */
.accordion__item{border-bottom:1px solid var(--border-subtle)}
.accordion__trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-4) 0;background:none;border:0;cursor:pointer;
  font-size:var(--text-md);font-weight:var(--weight-medium);color:var(--text-primary);text-align:left;
}
.accordion__trigger svg{transition:transform var(--duration-fast)}
.accordion__item.is-open .accordion__trigger svg{transform:rotate(180deg)}
.accordion__panel{display:none;padding-bottom:var(--space-4);color:var(--text-secondary);font-size:var(--text-md)}
.accordion__item.is-open .accordion__panel{display:block}

/* ---------- ALERTS / TOASTS ---------- */
.alert{
  display:flex;gap:var(--space-3);padding:var(--space-3) var(--space-4);
  border-radius:var(--radius-lg);border:1px solid;background:var(--surface-default);
  font-size:var(--text-sm);
}
.alert__icon{width:18px;height:18px;flex:0 0 18px;margin-top:1px}
.alert--info{border-color:var(--color-info-100);background:var(--color-info-50);color:var(--color-info-700)}
.alert--success{border-color:#BBF0CF;background:var(--color-success-50);color:var(--color-success-700)}
.alert--warning{border-color:#FDE3A3;background:var(--color-warning-50);color:var(--color-warning-700)}
.alert--danger{border-color:#FCC8C8;background:var(--color-danger-50);color:var(--color-danger-700)}

.toast-stack{
  position:fixed;top:var(--space-4);right:var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-2);
  z-index:var(--z-toast);pointer-events:none;
}
.toast{
  pointer-events:auto;min-width:320px;max-width:420px;
  display:flex;align-items:flex-start;gap:var(--space-3);
  padding:var(--space-3) var(--space-4);
  background:var(--surface-default);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  font-size:var(--text-sm);
  animation:toast-in var(--duration-base) var(--easing-standard);
}
.toast--success{border-left:3px solid var(--color-success-500)}
.toast--danger{border-left:3px solid var(--color-danger-500)}
.toast--warning{border-left:3px solid var(--color-warning-500)}
.toast--info{border-left:3px solid var(--color-info-500)}
.toast__title{font-weight:var(--weight-semibold);color:var(--text-primary);margin:0 0 2px}
.toast__msg{color:var(--text-secondary);margin:0}
@keyframes toast-in{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}

/* ---------- MODAIS / DRAWERS ---------- */
.scrim{
  position:fixed;inset:0;background:rgba(15,23,42,.45);
  z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--duration-base);
}
.scrim.is-open{opacity:1;pointer-events:auto}
.modal{
  background:var(--surface-default);border-radius:var(--radius-xl);
  width:min(560px,calc(100% - var(--space-8)));
  box-shadow:var(--shadow-xl);transform:translateY(8px);opacity:0;
  transition:transform var(--duration-base) var(--easing-emphasized),opacity var(--duration-base);
  display:flex;flex-direction:column;max-height:80vh;
}
.scrim.is-open .modal{transform:none;opacity:1}
.modal__header{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle);
}
.modal__title{margin:0;font-size:var(--text-lg);font-weight:var(--weight-semibold)}
.modal__body{padding:var(--space-5);overflow:auto;color:var(--text-secondary)}
.modal__footer{
  display:flex;justify-content:flex-end;gap:var(--space-2);
  padding:var(--space-3) var(--space-5);border-top:1px solid var(--border-subtle);
  background:var(--surface-subtle);border-radius:0 0 var(--radius-xl) var(--radius-xl);
}

.drawer-scrim{position:fixed;inset:0;background:rgba(15,23,42,.45);z-index:var(--z-drawer);opacity:0;pointer-events:none;transition:opacity var(--duration-base)}
.drawer-scrim.is-open{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;height:100vh;width:min(480px,100%);
  background:var(--surface-default);box-shadow:var(--shadow-xl);
  z-index:calc(var(--z-drawer) + 1);
  transform:translateX(100%);transition:transform var(--duration-slow) var(--easing-decelerate);
  display:flex;flex-direction:column;
}
.drawer.is-open{transform:none}
.drawer__header{display:flex;align-items:center;justify-content:space-between;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--border-subtle)}
.drawer__body{flex:1;overflow:auto;padding:var(--space-5)}
.drawer__footer{padding:var(--space-3) var(--space-5);border-top:1px solid var(--border-subtle);background:var(--surface-subtle)}

/* ---------- MODAL FORM (compacto) — v1.0 (adicionado 2026-05-21) ----------
   Variante de .modal para formulários de cadastro/edição. Padrão
   consolidado em produção (ASO email, CRM lead, AST, calendário).

   REGRA DO SCROLL ÚNICO (inegociável):
   - O modal inteiro rola por UM scrollbar só: o .modal__body.
   - Header e footer ficam FIXOS (sticky) — botões sempre visíveis.
   - Seções internas (checklist, lista de serviços, comentários)
     NUNCA têm max-height + overflow próprios. Triplo-scroll é bug.

   LAYOUT:
   - Largura: .modal--form aceita --modal-w (default 720px).
     Forms densos podem subir p/ 860px via style="--modal-w:860px".
   - Campos em grid de 12 colunas: <div class="grid grid-cols-12 gap-3">
     com filhos .col-span-N. Em <640px tudo vira col-span-12.
   - Seções separadas por .om-modal-section (texto + linha sutil).
   - Inputs compactos (32px) — herdado de [data-density="compact"].

   USO:
   <div class="scrim is-open">
     <div class="modal modal--form" data-density="compact" style="--modal-w:760px">
       <div class="modal__header">
         <h3 class="modal__title">Novo Lead</h3>
         <button class="btn btn--ghost btn--icon" aria-label="Fechar">✕</button>
       </div>
       <div class="modal__body">
         <div class="om-modal-section">Identificação</div>
         <div class="grid grid-cols-12 gap-3">
           <div class="field col-span-8">
             <label class="field__label">Empresa</label>
             <input class="input" type="text">
           </div>
           <div class="field col-span-4">
             <label class="field__label">CNPJ</label>
             <input class="input" type="text">
           </div>
         </div>
         <div class="om-modal-section">Contato</div>
         <div class="grid grid-cols-12 gap-3"> ...campos... </div>
       </div>
       <div class="modal__footer">
         <button class="btn btn--secondary">Cancelar</button>
         <button class="btn btn--primary">Salvar</button>
       </div>
     </div>
   </div>
*/
.modal--form{
  width:min(var(--modal-w,720px),calc(100% - var(--space-8)));
  max-height:88vh;
}
.modal--form .modal__header,
.modal--form .modal__footer{flex:0 0 auto}
.modal--form .modal__body{
  flex:1 1 auto;
  overflow-y:auto;          /* ÚNICO scrollbar do modal */
  display:flex;flex-direction:column;gap:var(--space-3);
}
/* Nenhuma seção interna do form pode criar segundo scrollbar */
.modal--form .modal__body .om-ck-list,
.modal--form .modal__body .grid{max-height:none;overflow:visible}
/* Campo de form dentro do grid: rótulo compacto + input do DS */
.modal--form .field__label{margin-bottom:2px}

/* ---------- TOOLTIP / POPOVER ---------- */
.tooltip{position:relative;display:inline-flex}
.tooltip__bubble{
  position:absolute;bottom:calc(100% + 6px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--color-neutral-900);color:#fff;font-size:var(--text-xs);
  padding:var(--space-1) var(--space-2);border-radius:var(--radius-sm);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity var(--duration-fast),transform var(--duration-fast);
  z-index:var(--z-tooltip);
}
.tooltip:hover .tooltip__bubble,.tooltip:focus-within .tooltip__bubble{opacity:1;transform:translateX(-50%)}

.menu{
  position:absolute;min-width:200px;
  background:var(--surface-default);border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  padding:var(--space-1);z-index:var(--z-tooltip);
}
.menu__item{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-3);font-size:var(--text-sm);
  color:var(--text-primary);border-radius:var(--radius-md);cursor:pointer;
  border:0;background:none;width:100%;text-align:left;
}
.menu__item:hover{background:var(--surface-muted)}
.menu__item--danger{color:var(--color-danger-600)}
.menu__sep{height:1px;background:var(--border-subtle);margin:var(--space-1) 0}

/* ---------- UPLOAD ---------- */
.dropzone{
  border:1.5px dashed var(--border-default);border-radius:var(--radius-lg);
  padding:var(--space-6);text-align:center;background:var(--surface-subtle);
  display:flex;flex-direction:column;align-items:center;gap:var(--space-2);
  transition:border-color var(--duration-fast),background var(--duration-fast);
  cursor:pointer;
}
.dropzone:hover{border-color:var(--color-primary-400);background:var(--color-primary-50)}
.dropzone.is-drag{border-color:var(--color-primary-500);background:var(--color-primary-50)}
.dropzone__icon{width:32px;height:32px;color:var(--color-primary-500)}
.file-list{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3)}
.file-item{
  display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);background:var(--surface-default);
  font-size:var(--text-sm);
}
.file-item__name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.file-item__size{color:var(--text-tertiary);font-variant-numeric:tabular-nums}

/* ---------- SKELETON / EMPTY / LOADING ---------- */
.skeleton{background:linear-gradient(90deg,var(--color-neutral-100) 0%,var(--color-neutral-200) 50%,var(--color-neutral-100) 100%);background-size:200% 100%;animation:sk 1.4s linear infinite;border-radius:var(--radius-sm)}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:var(--space-12) var(--space-6);text-align:center;gap:var(--space-2);
  color:var(--text-secondary);
}
.empty__icon{width:48px;height:48px;color:var(--color-neutral-300);margin-bottom:var(--space-2)}
.empty__title{font-size:var(--text-md);font-weight:var(--weight-semibold);color:var(--text-primary);margin:0}
.empty__msg{font-size:var(--text-sm);color:var(--text-tertiary);margin:0;max-width:42ch}

.spinner{width:18px;height:18px;border-radius:50%;border:2px solid var(--color-neutral-200);border-top-color:var(--color-primary-500);animation:spin .7s linear infinite}

/* ---------- EYE TOGGLE ---------- */
.value-eye{display:inline-flex;align-items:center;gap:var(--space-2)}
.value-eye__value{font-variant-numeric:tabular-nums}
.value-eye__value.is-hidden{filter:blur(6px);user-select:none}
.value-eye__btn{background:none;border:0;cursor:pointer;color:var(--text-tertiary);padding:2px;border-radius:var(--radius-sm)}
.value-eye__btn:hover{color:var(--text-secondary);background:var(--surface-muted)}

/* ---------- KANBAN ---------- */
.kanban{display:flex;gap:var(--space-3);overflow-x:auto;padding-bottom:var(--space-2)}
.kanban__col{
  flex:0 0 280px;background:var(--surface-subtle);
  border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  display:flex;flex-direction:column;max-height:540px;
}
.kanban__col-head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-2);
  padding:var(--space-3) var(--space-3);border-bottom:1px solid var(--border-subtle);
  font-size:var(--text-sm);font-weight:var(--weight-semibold);
}
.kanban__col-accent{width:8px;height:8px;border-radius:50%;background:var(--col-accent,var(--color-primary-500))}
.kanban__col-count{color:var(--text-tertiary);font-weight:var(--weight-regular)}
.kanban__list{flex:1;overflow:auto;padding:var(--space-2);display:flex;flex-direction:column;gap:var(--space-2)}
.kanban__list.is-drop{background:var(--color-primary-50);outline:2px dashed var(--color-primary-300);outline-offset:-6px}
.kanban__card{
  background:var(--surface-default);border:1px solid var(--border-subtle);
  border-radius:var(--radius-md);padding:var(--space-3);cursor:grab;
  display:flex;flex-direction:column;gap:var(--space-2);
  box-shadow:var(--shadow-xs);
  transition:box-shadow var(--duration-fast),transform var(--duration-fast);
}
.kanban__card:hover{box-shadow:var(--shadow-sm)}
.kanban__card.is-dragging{opacity:.5;transform:scale(.98)}
.kanban__card-title{font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--text-primary)}
.kanban__card-meta{display:flex;align-items:center;justify-content:space-between;font-size:var(--text-xs);color:var(--text-tertiary)}
.kanban__col[data-stage="lead"]      { --col-accent: var(--color-neutral-400) }
.kanban__col[data-stage="qual"]      { --col-accent: var(--color-info-500) }
.kanban__col[data-stage="prop"]      { --col-accent: var(--color-warning-500) }
.kanban__col[data-stage="negoc"]     { --col-accent: var(--color-secondary-500) }
.kanban__col[data-stage="ganho"]     { --col-accent: var(--color-success-500) }
.kanban__col[data-stage="perda"]     { --col-accent: var(--color-danger-500) }

/* ---------- CALENDÁRIO ---------- */
.cal{background:var(--surface-default);border:1px solid var(--border-subtle);border-radius:var(--radius-xl);overflow:hidden}
.cal__head{display:flex;align-items:center;justify-content:space-between;padding:var(--space-3) var(--space-4);border-bottom:1px solid var(--border-subtle)}
.cal__title{font-size:var(--text-md);font-weight:var(--weight-semibold);text-transform:capitalize}
.cal__nav{display:flex;gap:var(--space-1);align-items:center}
.cal__filters{display:flex;gap:var(--space-2);padding:var(--space-2) var(--space-4);border-bottom:1px solid var(--border-subtle);background:var(--surface-subtle)}
.cal__grid{display:grid;grid-template-columns:repeat(7,1fr);background:var(--border-subtle);gap:1px}
.cal__dow{background:var(--surface-subtle);font-size:var(--text-2xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--text-tertiary);padding:var(--space-2);text-align:center}
.cal__cell{background:var(--surface-default);min-height:96px;padding:var(--space-2);display:flex;flex-direction:column;gap:2px;font-size:var(--text-xs)}
.cal__cell--out{background:var(--surface-subtle);color:var(--text-disabled)}
.cal__date{font-weight:var(--weight-semibold);color:var(--text-secondary)}
.cal__cell--today .cal__date{color:#fff;background:var(--color-primary-500);width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center}
.cal__event{font-size:var(--text-2xs);padding:2px var(--space-1);border-radius:var(--radius-xs);color:#fff;background:var(--color-primary-500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-left:3px solid transparent}
.cal__event--slz{background:#DBE8FA;color:#0F2E6B;border-left-color:var(--color-primary-500)}
.cal__event--bhz{background:#D5F1EA;color:#0B5145;border-left-color:var(--color-secondary-500)}
.cal__event--btm{background:#FEE9CF;color:#92400E;border-left-color:var(--color-warning-500)}

/* ---------- STEPPER (multi-step) ---------- */
.stepper{display:flex;align-items:center;gap:var(--space-3);overflow-x:auto;padding:var(--space-2) 0}
.stepper__item{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);color:var(--text-tertiary);white-space:nowrap}
.stepper__num{
  width:26px;height:26px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  background:var(--surface-default);border:1.5px solid var(--border-default);font-weight:var(--weight-semibold);
  font-size:var(--text-xs);color:var(--text-tertiary);flex:0 0 auto;
}
.stepper__line{flex:1;height:1.5px;background:var(--border-default);min-width:24px}
.stepper__item.is-done .stepper__num{background:var(--color-primary-500);border-color:var(--color-primary-500);color:#fff}
.stepper__item.is-current .stepper__num{border-color:var(--color-primary-500);color:var(--color-primary-700);background:var(--color-primary-50)}
.stepper__item.is-current{color:var(--text-primary);font-weight:var(--weight-semibold)}
.stepper__item.is-done{color:var(--text-secondary)}

/* ---------- LAYOUT SHELL ---------- */
.shell{display:flex;min-height:100vh;background:var(--surface-canvas)}
.sidebar{
  width:var(--layout-sidebar-w);flex:0 0 auto;
  background:var(--surface-inverse);color:var(--text-inverse);
  display:flex;flex-direction:column;
}
.sidebar__brand{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-4);border-bottom:1px solid rgba(255,255,255,.08)}
.sidebar__nav{flex:1;overflow:auto;padding:var(--space-2)}
.sidebar__group{font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-caps);color:rgba(255,255,255,.5);padding:var(--space-3) var(--space-3) var(--space-1)}
.nav-item{
  display:flex;align-items:center;gap:var(--space-3);padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-md);color:rgba(255,255,255,.78);font-size:var(--text-md);font-weight:var(--weight-medium);
  cursor:pointer;
}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;text-decoration:none}
.nav-item.is-active{background:linear-gradient(90deg,var(--color-primary-500),var(--color-primary-600));color:#fff;box-shadow:var(--shadow-xs)}
.nav-item__icon{width:18px;height:18px;flex:0 0 18px}
.topbar{
  height:var(--layout-topbar-h);background:var(--surface-default);
  border-bottom:1px solid var(--border-subtle);
  display:flex;align-items:center;justify-content:space-between;padding:0 var(--space-4);
  position:sticky;top:0;z-index:var(--z-sticky);
}
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.main__content{padding:var(--space-6);max-width:var(--layout-content-max);width:100%;margin:0 auto}

/* ---------- GRID ---------- */
.grid{display:grid;gap:var(--space-4)}
.grid-12,.grid-cols-12{grid-template-columns:repeat(12,minmax(0,1fr))}
.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid-cols-5{grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width: 1024px){
  .grid-cols-4,.grid-cols-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-cols-3{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width: 640px){
  .grid-cols-4,.grid-cols-5,.grid-cols-3,.grid-cols-2{grid-template-columns:1fr}
}
/* col-span — usar dentro de .grid.grid-cols-12 (ex: forms de modal) */
.col-span-1{grid-column:span 1}.col-span-2{grid-column:span 2}
.col-span-3{grid-column:span 3}.col-span-4{grid-column:span 4}
.col-span-5{grid-column:span 5}.col-span-6{grid-column:span 6}
.col-span-7{grid-column:span 7}.col-span-8{grid-column:span 8}
.col-span-9{grid-column:span 9}.col-span-10{grid-column:span 10}
.col-span-11{grid-column:span 11}.col-span-12{grid-column:span 12}
@media (max-width: 640px){
  [class*="col-span-"]{grid-column:span 12}
}
/* gap utilitários (usados pelos forms de modal) */
.gap-2{gap:var(--space-2)}.gap-3{gap:var(--space-3)}.gap-4{gap:var(--space-4)}

/* ---------- UTILITÁRIOS comuns ---------- */
.row{display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:var(--space-2)}
.spacer{flex:1}
.divider{height:1px;background:var(--border-subtle);width:100%;margin:var(--space-2) 0}
.muted{color:var(--text-tertiary)}