/* ============================================================================
   UNIVIX — Camada de componentes
   ----------------------------------------------------------------------------
   Um lugar só para cada componente. Antes, botão, card, badge e tabela eram
   redesenhados dentro de cada view, e por isso nenhuma tela parecia da mesma
   aplicação.

   Prefixo `ux-` de propósito: convive com as classes antigas sem colidir,
   então a migração de tela pode ser feita uma de cada vez sem quebrar as que
   ainda não foram tocadas.
   ========================================================================= */

/* ============================== TIPOGRAFIA ============================== */

.ux-title { text-wrap: balance; font-size: var(--text-3xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 0; }
.ux-title-sm { text-wrap: balance; font-size: var(--text-2xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); color: var(--ink-900); margin: 0; }
.ux-heading { text-wrap: balance; font-size: var(--text-xl); font-weight: var(--weight-semibold); line-height: var(--leading-snug); color: var(--ink-900); margin: 0; }
.ux-subtitle { font-size: var(--text-md); line-height: var(--leading-normal); color: var(--ink-600); margin: 0; }
.ux-overline { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-400); margin: 0; }
.ux-muted { color: var(--ink-400); }
.ux-numeric { font-variant-numeric: tabular-nums; }

/* ================================ BOTÃO ================================ */

.ux-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
    padding: var(--control-pad-y) var(--space-4);
    min-height: 38px;
    border: 1px solid transparent; border-radius: var(--r-sm);
    font: inherit; font-size: var(--text-md); font-weight: var(--weight-semibold);
    line-height: 1; white-space: nowrap; text-decoration: none;
    cursor: pointer; touch-action: manipulation;
    transition: background-color var(--ease), border-color var(--ease), color var(--ease), box-shadow var(--ease);
}
.ux-btn:focus-visible { outline: none; box-shadow: var(--ring); }
.ux-btn:disabled, .ux-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.ux-btn > i, .ux-btn > svg { width: 16px; height: 16px; flex: none; }

.ux-btn-primary { background: var(--brand); color: var(--brand-ink); }
.ux-btn-primary:hover:not(:disabled) { background: var(--brand-hover); }
.ux-btn-primary:active:not(:disabled) { background: var(--brand-press); }

.ux-btn-secondary { background: var(--surface); color: var(--ink-800); border-color: var(--line-2); box-shadow: var(--sh-xs); }
.ux-btn-secondary:hover:not(:disabled) { border-color: var(--line-strong); background: var(--surface-2); }

.ux-btn-ghost { background: transparent; color: var(--ink-600); }
.ux-btn-ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--ink-800); }

.ux-btn-danger { background: var(--danger); color: #fff; }
.ux-btn-danger:hover:not(:disabled) { filter: brightness(.93); }
.ux-btn-danger:focus-visible { box-shadow: var(--ring-danger); }

.ux-btn-sm { min-height: 30px; padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
.ux-btn-lg { min-height: 46px; padding: var(--space-3) var(--space-6); font-size: var(--text-lg); }
.ux-btn-icon { padding: 0; width: 38px; min-height: 38px; }
.ux-btn-icon.ux-btn-sm { width: 30px; min-height: 30px; }
.ux-btn-block { width: 100%; }

/* =============================== CAMPOS ================================ */

.ux-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ux-label { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-700); }
.ux-label[data-required]::after { content: " *"; color: var(--danger); }
.ux-hint { font-size: var(--text-xs); color: var(--ink-400); }
.ux-error { font-size: var(--text-xs); color: var(--danger); font-weight: var(--weight-medium); }

.ux-input, .ux-select, .ux-textarea {
    width: 100%; min-width: 0;
    padding: var(--control-pad-y) var(--control-pad-x);
    min-height: 38px;
    background: var(--surface); color: var(--ink-900);
    border: 1px solid var(--line-2); border-radius: var(--r-sm);
    font: inherit; font-size: var(--text-md); line-height: var(--leading-normal);
    transition: border-color var(--ease), box-shadow var(--ease);
}
.ux-input::placeholder, .ux-textarea::placeholder { color: var(--ink-300); }
.ux-input:hover, .ux-select:hover, .ux-textarea:hover { border-color: var(--line-strong); }
.ux-input:focus, .ux-select:focus, .ux-textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.ux-input:disabled, .ux-select:disabled, .ux-textarea:disabled { background: var(--surface-3); color: var(--ink-300); cursor: not-allowed; }
.ux-input[aria-invalid="true"], .ux-select[aria-invalid="true"], .ux-textarea[aria-invalid="true"] { border-color: var(--danger); }
.ux-input[aria-invalid="true"]:focus { box-shadow: var(--ring-danger); }
.ux-textarea { min-height: 96px; resize: vertical; line-height: var(--leading-relaxed); }

.ux-select {
    appearance: none; padding-right: var(--space-8); cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7d88' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right var(--space-3) center;
}

/* Busca — o ícone é decorativo, o rótulo real fica no aria-label do input. */
.ux-search { position: relative; display: flex; align-items: center; }
.ux-search > i, .ux-search > svg { position: absolute; left: var(--space-3); width: 16px; height: 16px; color: var(--ink-400); pointer-events: none; }
.ux-search .ux-input { padding-left: var(--space-10); }

/* ================================ CARD ================================= */

.ux-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    box-shadow: var(--sh-xs);
}
.ux-card-pad { padding: var(--card-pad); }
.ux-card-head {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--card-pad-tight) var(--card-pad);
    border-bottom: 1px solid var(--line);
}
.ux-card-head > :first-child { margin-right: auto; min-width: 0; }
.ux-card-body { padding: var(--card-pad); }
.ux-card-foot { padding: var(--card-pad-tight) var(--card-pad); border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 var(--r) var(--r); }
/* Só quem é de fato clicável ganha affordance de clique. */
.ux-card-link { cursor: pointer; transition: border-color var(--ease), box-shadow var(--ease); }
.ux-card-link:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); }

/* ================================= KPI ================================= */

.ux-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.ux-kpi { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--card-pad); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh-xs); }
.ux-kpi-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-400); }
.ux-kpi-value { font-size: var(--text-4xl); font-weight: var(--weight-bold); line-height: var(--leading-tight); letter-spacing: var(--tracking-tight); color: var(--ink-900); font-variant-numeric: tabular-nums; }
.ux-kpi-value[data-empty="true"] { color: var(--ink-300); font-weight: var(--weight-medium); }
.ux-kpi-foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--ink-400); }

/* ================================ BADGE ================================ */

.ux-badge {
    display: inline-flex; align-items: center; gap: var(--space-1);
    padding: 2px var(--space-2); min-height: 20px;
    border: 1px solid var(--neutral-border); border-radius: var(--r-full);
    background: var(--neutral-soft); color: var(--neutral);
    font-size: var(--text-2xs); font-weight: var(--weight-semibold);
    letter-spacing: .01em; white-space: nowrap;
}
.ux-badge-ok { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-border); }
.ux-badge-info { background: var(--info-soft); color: var(--info); border-color: var(--info-border); }
.ux-badge-warn { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-border); }
.ux-badge-danger { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); }
.ux-badge-brand { background: var(--brand-soft); color: var(--brand-press); border-color: var(--brand-border); }
.ux-dot { width: 6px; height: 6px; border-radius: var(--r-full); background: currentColor; flex: none; }

/* ================================ TABELA =============================== */

.ux-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.ux-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.ux-table th {
    position: sticky; top: 0; z-index: var(--z-sticky);
    padding: var(--space-3) var(--space-4);
    background: var(--surface-2);
    border-bottom: 1px solid var(--line);
    font-size: var(--text-2xs); font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-400);
    text-align: left; white-space: nowrap;
}
.ux-table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); color: var(--ink-700); vertical-align: middle; }
.ux-table tbody tr:last-child td { border-bottom: none; }
.ux-table tbody tr:hover td { background: var(--surface-2); }
.ux-table-strong { color: var(--ink-900); font-weight: var(--weight-semibold); }
.ux-table-num { text-align: right; font-variant-numeric: tabular-nums; }
.ux-table-actions { width: 1%; white-space: nowrap; text-align: right; }
/* Linha inteira clicavel sem <tr onclick>: o link real cobre a linha por
   ::after. Continua sendo <a>, entao Tab, Enter, "abrir em nova aba" e o
   leitor de tela seguem funcionando - o que um onclick no <tr> quebrava. */
.ux-table tbody tr { position: relative; }
.ux-row-link::after { content: ""; position: absolute; inset: 0; }
.ux-table tbody tr:focus-within td { background: var(--surface-2); }

/* ================================= ABAS ================================ */

.ux-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--line); overflow-x: auto; }
.ux-tab {
    padding: var(--space-3) var(--space-4);
    border: none; border-bottom: 2px solid transparent; background: none;
    font: inherit; font-size: var(--text-md); font-weight: var(--weight-medium);
    color: var(--ink-400); cursor: pointer; white-space: nowrap;
    transition: color var(--ease), border-color var(--ease);
}
.ux-tab:hover { color: var(--ink-700); }
.ux-tab[aria-selected="true"] { color: var(--brand); border-bottom-color: var(--brand); font-weight: var(--weight-semibold); }
.ux-tab:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }

/* =============================== FILTROS =============================== */

.ux-filters { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.ux-filters > .ux-search { flex: 1 1 240px; min-width: 200px; }
.ux-chip {
    touch-action: manipulation;
    display: inline-flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-3); min-height: 30px;
    background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-full);
    font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-600);
    cursor: pointer; transition: background-color var(--ease), border-color var(--ease), color var(--ease);
}
.ux-chip:hover { border-color: var(--line-strong); color: var(--ink-800); }
.ux-chip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand-border); color: var(--brand-press); }
.ux-chip:focus-visible { outline: none; box-shadow: var(--ring); }

/* ============================== DROPDOWN =============================== */

.ux-menu { position: relative; display: inline-flex; }
.ux-menu-panel {
    position: absolute; top: calc(100% + var(--space-2)); right: 0; z-index: var(--z-drawer);
    min-width: 200px; padding: var(--space-1);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
    box-shadow: var(--sh-md);
}
.ux-menu-panel[hidden] { display: none; }
.ux-menu-item {
    display: flex; align-items: center; gap: var(--space-2); width: 100%;
    padding: var(--space-2) var(--space-3);
    border: none; border-radius: var(--r-xs); background: none;
    font: inherit; font-size: var(--text-md); color: var(--ink-700);
    text-align: left; text-decoration: none; cursor: pointer;
}
.ux-menu-item:hover { background: var(--surface-3); color: var(--ink-900); }
.ux-menu-item-danger { color: var(--danger); }
.ux-menu-item-danger:hover { background: var(--danger-soft); }
.ux-menu-sep { height: 1px; margin: var(--space-1) 0; background: var(--line); border: none; }

/* =============================== TOOLTIP =============================== */

.ux-tip { position: relative; }
.ux-tip::after {
    content: attr(data-tip);
    position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%);
    z-index: var(--z-toast);
    padding: var(--space-1) var(--space-2);
    background: var(--ink-900); color: #fff;
    border-radius: var(--r-xs);
    font-size: var(--text-xs); font-weight: var(--weight-medium); white-space: nowrap;
    opacity: 0; pointer-events: none;
    transition: opacity var(--dur-fast) var(--curve);
}
.ux-tip:hover::after, .ux-tip:focus-visible::after { opacity: 1; }

/* ========================= MODAL, DRAWER, TOAST ======================== */

.ux-scrim { position: fixed; inset: 0; z-index: var(--z-modal); background: var(--surface-overlay); backdrop-filter: blur(2px); }
.ux-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    z-index: calc(var(--z-modal) + 1);
    width: min(560px, calc(100vw - var(--space-8)));
    max-height: calc(100vh - var(--space-16));
    display: flex; flex-direction: column;
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-lg);
    overflow: hidden;
}
.ux-drawer {
    position: fixed; top: 0; right: 0; bottom: 0; z-index: calc(var(--z-modal) + 1);
    width: min(560px, 100vw);
    display: flex; flex-direction: column;
    background: var(--surface); box-shadow: var(--sh-lg);
    animation: ux-slide-in var(--dur-slow) var(--curve-out);
}
@keyframes ux-slide-in { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
.ux-modal-head, .ux-drawer-head { display: flex; align-items: center; gap: var(--space-3); padding: var(--card-pad); border-bottom: 1px solid var(--line); }
.ux-modal-head > :first-child, .ux-drawer-head > :first-child { margin-right: auto; min-width: 0; }
.ux-modal-body, .ux-drawer-body { padding: var(--card-pad); overflow-y: auto; overscroll-behavior: contain; flex: 1; }
.ux-modal-foot, .ux-drawer-foot { display: flex; justify-content: flex-end; gap: var(--space-2); padding: var(--card-pad-tight) var(--card-pad); border-top: 1px solid var(--line); background: var(--surface-2); }

.ux-toasts { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-2); }
.ux-toast {
    display: flex; align-items: flex-start; gap: var(--space-3);
    min-width: 280px; max-width: 420px; padding: var(--space-3) var(--space-4);
    background: var(--ink-900); color: #fff;
    border-radius: var(--r-sm); box-shadow: var(--sh-md);
    font-size: var(--text-md);
    animation: ux-slide-in var(--dur-slow) var(--curve-out);
}
.ux-toast-ok { background: var(--ok); }
.ux-toast-danger { background: var(--danger); }

/* =============================== AVATAR ================================ */

.ux-avatar {
    display: inline-flex; align-items: center; justify-content: center; flex: none;
    width: 32px; height: 32px; border-radius: var(--r-full);
    background: var(--brand-soft); color: var(--brand-press);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    overflow: hidden; user-select: none;
}
.ux-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ux-avatar-sm { width: 24px; height: 24px; font-size: var(--text-2xs); }
.ux-avatar-lg { width: 44px; height: 44px; font-size: var(--text-lg); }

/* ============================ ESTADO VAZIO ============================= */
/* Sem dado real ainda, esta é a tela que a direção mais vai ver. Ela precisa
   dizer o que é aquele espaço e qual é a próxima ação — nunca "sem dados". */

.ux-empty {
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: var(--space-3); padding: var(--space-12) var(--space-6);
}
.ux-empty-icon {
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; margin-bottom: var(--space-1);
    border-radius: var(--r-lg);
    background: var(--brand-softer); color: var(--brand);
    border: 1px solid var(--brand-border);
}
.ux-empty-icon i, .ux-empty-icon svg { width: 24px; height: 24px; }
.ux-empty-title { text-wrap: balance; font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--ink-900); margin: 0; }
.ux-empty-text { text-wrap: pretty; max-width: 46ch; font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--ink-600); margin: 0; }
.ux-empty-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }

/* =============================== SKELETON ============================== */

.ux-skeleton {
    background: linear-gradient(90deg, var(--surface-3) 25%, var(--canvas-2) 37%, var(--surface-3) 63%);
    background-size: 400% 100%;
    border-radius: var(--r-xs);
    animation: ux-shimmer 1.4s ease infinite;
}
@keyframes ux-shimmer { from { background-position: 100% 50%; } to { background-position: 0 50%; } }
.ux-skeleton-line { height: 12px; margin-bottom: var(--space-2); }
.ux-skeleton-line:last-child { width: 60%; margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .ux-skeleton { animation: none; } }

/* ============================== PAGINAÇÃO ============================== */

.ux-pagination { display: flex; align-items: center; gap: var(--space-3); }
.ux-pagination-info { margin-right: auto; font-size: var(--text-sm); color: var(--ink-400); font-variant-numeric: tabular-nums; }
.ux-pagination-pages { display: flex; gap: var(--space-1); }
.ux-page-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 32px; height: 32px; padding: 0 var(--space-2);
    background: var(--surface); border: 1px solid var(--line-2); border-radius: var(--r-xs);
    font: inherit; font-size: var(--text-sm); color: var(--ink-700);
    text-decoration: none; cursor: pointer; font-variant-numeric: tabular-nums;
}
.ux-page-btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.ux-page-btn[aria-current="page"] { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: var(--weight-semibold); }

/* ================================ AVISO ================================ */
/* Faixa para dizer a verdade na tela: dado de demonstração, integração fora
   do ar, funcionalidade em construção. Sem isso, a tela mente por omissão. */

.ux-notice {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: 1px solid var(--info-border);
    border-radius: var(--r-sm);
    background: var(--info-soft); color: var(--ink-700);
    font-size: var(--text-sm); line-height: var(--leading-normal);
}
.ux-notice i, .ux-notice svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--info); }
.ux-notice strong { color: var(--ink-900); }
.ux-notice-warn { background: var(--warn-soft); border-color: var(--warn-border); }
.ux-notice-warn i, .ux-notice-warn svg { color: var(--warn); }
.ux-notice-demo { background: var(--warn-soft); border-color: var(--warn-border); }

/* ================================ PAINEL =============================== */
/* Funil e pendências: linhas densas, alinhadas em colunas fixas. O que muda
   de linha para linha é só o dado, nunca a posição — é o que deixa a coluna
   de número legível de relance. */

.dash-split { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(300px, 1fr); gap: var(--space-4); align-items: start; }
@media (max-width: 1180px) { .dash-split { grid-template-columns: 1fr; } }

.dash-funnel { display: flex; flex-direction: column; gap: 2px; padding: var(--space-2); }
.dash-funnel-row {
    display: grid; grid-template-columns: minmax(120px, 1.1fr) minmax(80px, 2fr) 48px 96px;
    align-items: center; gap: var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--r-xs); text-decoration: none;
    font-size: var(--text-sm); color: var(--ink-700);
    transition: background-color var(--ease);
}
.dash-funnel-row:hover { background: var(--surface-2); }
.dash-funnel-name { display: flex; align-items: center; gap: var(--space-2); min-width: 0; font-weight: var(--weight-medium); color: var(--ink-800); }
.dash-funnel-track { height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.dash-funnel-track i { display: block; height: 100%; border-radius: var(--r-full); }
.dash-funnel-row > strong { text-align: right; font-weight: var(--weight-semibold); color: var(--ink-900); }
.dash-funnel-row > small { text-align: right; font-size: var(--text-xs); }
@media (max-width: 640px) {
    .dash-funnel-row { grid-template-columns: 1fr 56px; }
    .dash-funnel-track, .dash-funnel-row > small { display: none; }
}

.dash-attention { display: flex; flex-direction: column; gap: var(--space-1); padding: var(--space-2); }
/* A severidade é codificada pelo mesmo ponto colorido que o funil usa, e não
   por uma faixa lateral. Duas razões: fica consistente entre os dois painéis
   da mesma tela, e a cor sozinha nunca decide — o número também muda de peso
   e de cor quando o item é crítico. */
.dash-attention-row {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3);
    border: 1px solid var(--line); border-radius: var(--r-xs);
    background: var(--surface-2); text-decoration: none;
    font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-700);
    transition: background-color var(--ease), border-color var(--ease);
}
.dash-attention-row::before {
    content: ""; flex: none;
    width: 6px; height: 6px; border-radius: var(--r-full);
    background: var(--neutral-border);
}
.dash-attention-row > span { flex: 1; min-width: 0; }
.dash-attention-row > strong { font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--ink-900); }
.dash-attention-row > i, .dash-attention-row > svg { width: 15px; height: 15px; color: var(--ink-300); flex: none; }
.dash-attention-row:hover { background: var(--surface-3); border-color: var(--line-2); }
.dash-attention-row[data-tone="danger"]::before { background: var(--danger); }
.dash-attention-row[data-tone="danger"] > strong { color: var(--danger); }
.dash-attention-row[data-tone="warn"]::before { background: var(--warn); }
.dash-attention-row[data-tone="info"]::before { background: var(--info); }
.dash-attention-row[data-tone="ok"]::before { background: var(--ok); }

/* ============================== UTILITÁRIOS ============================ */

.ux-stack { display: flex; flex-direction: column; gap: var(--stack); }
.ux-stack-sm { display: flex; flex-direction: column; gap: var(--space-2); }
.ux-row { display: flex; align-items: center; gap: var(--space-3); }
.ux-row-wrap { flex-wrap: wrap; }
.ux-spacer { margin-left: auto; }
.ux-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ux-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Nota abaixo de campo sensível na tela de integração. */
.field-note { margin: var(--space-2) 0 0; font-size: var(--text-xs); line-height: var(--leading-relaxed); color: var(--ink-400); }

/* ========================= INTEGRAÇÃO / WHATSAPP ======================= */
/* Tela de credencial: cada campo diz onde achar o valor, e o resultado do
   teste aparece item por item em vez de uma frase única de erro. */

.wa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--space-4); }

.wa-step {
    display: flex; align-items: center; justify-content: center; flex: none;
    width: 28px; height: 28px; border-radius: var(--r-full);
    background: var(--surface-3); color: var(--ink-400);
    border: 1px solid var(--line-2);
    font-size: var(--text-sm); font-weight: var(--weight-bold); font-variant-numeric: tabular-nums;
}
.wa-step[data-done="1"] { background: var(--brand); border-color: var(--brand); color: #fff; }

.wa-copy {
    display: grid; grid-template-columns: 180px minmax(0, 1fr) auto;
    align-items: center; gap: var(--space-3);
    padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface-2);
}
.wa-copy code {
    font-family: var(--font-mono); font-size: var(--text-sm); color: var(--ink-800);
    overflow-x: auto; white-space: nowrap;
}
@media (max-width: 720px) { .wa-copy { grid-template-columns: 1fr; } }

/* Sem position:sticky. Com barra fixa, ela cobria a explicacao da chave
   secreta, que e justamente o campo que ja foi preenchido errado uma vez. */
.wa-actions {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--card-pad);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--sh-sm);
}
.wa-actions > :first-child { margin-right: auto; }

.wa-checks { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-4); }
.wa-check {
    display: flex; align-items: flex-start; gap: var(--space-3);
    padding: var(--space-3); border-radius: var(--r-sm);
    background: var(--surface-2); border: 1px solid var(--line);
}
.wa-check > i, .wa-check > svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--ok); }
.wa-check[data-ok="0"] { background: var(--danger-soft); border-color: var(--danger-border); }
.wa-check[data-ok="0"] > i, .wa-check[data-ok="0"] > svg { color: var(--danger); }
.wa-check strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-900); }
.wa-check p { margin: 2px 0 0; font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--ink-700); }
.wa-check-acao { color: var(--ink-600) !important; font-style: normal; }
.wa-check[data-ok="0"] .wa-check-acao { color: var(--danger) !important; font-weight: var(--weight-medium); }

.ux-notice code { font-family: var(--font-mono); font-size: var(--text-xs); padding: 1px 4px; border-radius: var(--r-xs); background: rgba(13, 27, 33, .06); }

/* Ativação do número: três passos independentes, cada um é um formulário. */
.wa-activate { display: flex; flex-direction: column; gap: var(--space-2); }
.wa-activate-step {
    display: grid; grid-template-columns: 28px minmax(0, 1fr) auto;
    align-items: center; gap: var(--space-3);
    padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--r-sm);
    background: var(--surface-2);
}
.wa-activate-step strong { display: block; font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink-900); }
.wa-activate-step .ux-hint { margin-top: 2px; }
.wa-activate-step .ux-select { width: auto; min-width: 130px; }
@media (max-width: 820px) {
    .wa-activate-step { grid-template-columns: 28px minmax(0, 1fr); }
    .wa-activate-step > .ux-row { grid-column: 2; }
}

/* ============================== PIPELINE =============================== */
/* O card mostra o que decide: quem, quanto, dono, proxima acao, tempo parado
   e prioridade. O resto entra ao abrir a ficha. */

.ux-deal {
    display: flex; flex-direction: column; gap: var(--space-2);
    padding: var(--space-3);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
    box-shadow: var(--sh-xs); cursor: grab;
    transition: border-color var(--ease), box-shadow var(--ease);
}
.ux-deal:hover { border-color: var(--line-strong); box-shadow: var(--sh-sm); }
.ux-deal:focus-visible { outline: none; box-shadow: var(--ring); }

.ux-deal-top { display: flex; align-items: baseline; gap: var(--space-2); }
.ux-deal-temp { width: 7px; height: 7px; border-radius: var(--r-full); flex: none; background: var(--ink-300); align-self: center; }
.ux-deal-temp[data-temp="quente"] { background: var(--danger); }
.ux-deal-temp[data-temp="morno"] { background: var(--warn); }
.ux-deal-temp[data-temp="frio"] { background: var(--info); }
.ux-deal-title { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ux-deal-value { font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-900); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ux-deal-sub { margin: 0; font-size: var(--text-xs); color: var(--ink-400); }

.ux-deal-next {
    display: flex; align-items: center; gap: var(--space-2);
    padding: var(--space-1) var(--space-2); border-radius: var(--r-xs);
    background: var(--surface-3); font-size: var(--text-xs); color: var(--ink-600);
}
.ux-deal-next i, .ux-deal-next svg { width: 13px; height: 13px; flex: none; }
.ux-deal-next small { margin-left: auto; white-space: nowrap; }
.ux-deal-next.is-overdue { background: var(--danger-soft); color: var(--danger); font-weight: var(--weight-medium); }

.ux-deal-foot { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-2xs); color: var(--ink-400); }
.ux-deal-idle { display: inline-flex; align-items: center; gap: 3px; margin-right: auto; }
.ux-deal-idle i, .ux-deal-idle svg { width: 12px; height: 12px; }
.ux-deal-idle.is-stale { color: var(--warn); font-weight: var(--weight-semibold); }

.ux-deal-move, .ux-deal-open {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 3px var(--space-2); min-height: 24px;
    border: 1px solid var(--line-2); border-radius: var(--r-xs);
    background: var(--surface); color: var(--ink-600);
    font: inherit; font-size: var(--text-2xs); font-weight: var(--weight-medium);
    text-decoration: none; cursor: pointer; touch-action: manipulation;
}
.ux-deal-move:hover, .ux-deal-open:hover { border-color: var(--line-strong); color: var(--ink-900); background: var(--surface-2); }
.ux-deal-move:focus-visible, .ux-deal-open:focus-visible { outline: none; box-shadow: var(--ring); }
.ux-deal-move i, .ux-deal-move svg, .ux-deal-open i, .ux-deal-open svg { width: 12px; height: 12px; }

.ux-move { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--surface-overlay); backdrop-filter: blur(2px); }
.ux-move[hidden] { display: none; }
.ux-move-card { display: flex; flex-direction: column; gap: var(--space-4); width: min(400px, 100%); padding: var(--card-pad); background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--sh-lg); }

/* ================================ FICHA ================================ */
/* Pagina propria da oportunidade. Cabecalho responde quem, em que etapa e de
   quem; o corpo entra por contexto, em abas, para nao virar formulario
   gigante. */

.lead-voltar { margin-bottom: var(--space-3); }

.lead-head {
    display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-4);
    padding: var(--card-pad);
    background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
    box-shadow: var(--sh-xs);
    margin-bottom: var(--space-5);
}
.lead-head-copy { flex: 1; min-width: 220px; }
.lead-head-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--ink-600); }
.lead-head-valor { display: flex; flex-direction: column; gap: 2px; text-align: right; }
.lead-head-valor strong { font-size: var(--text-2xl); font-weight: var(--weight-bold); color: var(--ink-900); letter-spacing: var(--tracking-tight); }

.lead-corpo { margin-top: var(--space-5); }
.lead-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-4); align-items: start; }

.lead-dl { margin: 0; padding: var(--card-pad); display: grid; gap: var(--space-4); }
.lead-dl-2 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.lead-dl > div { min-width: 0; }
.lead-dl dt { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-400); }
.lead-dl dd { margin: 3px 0 0; font-size: var(--text-md); color: var(--ink-900); overflow-wrap: anywhere; }
.lead-dl dd a { color: var(--brand); }

.lead-lista { list-style: none; margin: 0; padding: var(--space-2); display: flex; flex-direction: column; gap: var(--space-1); }
.lead-lista li { display: flex; align-items: baseline; gap: var(--space-3); padding: var(--space-3); border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--line); }
.lead-lista li strong { flex: 1; min-width: 0; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-900); }
.lead-lista li small { font-size: var(--text-xs); color: var(--ink-400); white-space: nowrap; }
.lead-lista li[data-tone="danger"] { background: var(--danger-soft); border-color: var(--danger-border); }
.lead-lista li[data-tone="danger"] small { color: var(--danger); font-weight: var(--weight-semibold); }

.lead-timeline { list-style: none; margin: 0; padding: var(--card-pad); display: flex; flex-direction: column; gap: 0; }
.lead-timeline li { position: relative; display: flex; gap: var(--space-4); padding: 0 0 var(--space-5) var(--space-1); }
.lead-timeline li:last-child { padding-bottom: 0; }
/* A linha liga um evento ao seguinte, entao o ultimo nao tem linha. */
.lead-timeline li:not(:last-child)::before {
    content: ""; position: absolute; left: 7px; top: 14px; bottom: 0;
    width: 1px; background: var(--line-2);
}
.lead-timeline-ponto { position: relative; z-index: 1; flex: none; width: 9px; height: 9px; margin-top: 5px; border-radius: var(--r-full); background: var(--brand); box-shadow: 0 0 0 3px var(--surface); }
.lead-timeline strong { display: block; font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--ink-900); }
.lead-timeline small { font-size: var(--text-xs); color: var(--ink-400); }

.lead-notas { list-style: none; margin: 0; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-3); }
.lead-notas li { padding: var(--space-3); border-radius: var(--r-xs); background: var(--surface-2); border: 1px solid var(--line); }
.lead-notas p { margin: 0 0 var(--space-2); font-size: var(--text-md); line-height: var(--leading-relaxed); color: var(--ink-700); }
.lead-notas small { font-size: var(--text-xs); color: var(--ink-400); }

@media (max-width: 720px) {
    .lead-head-valor { text-align: left; }
}

/* =============================== PLANTAO =============================== */
/* Tela operacional. Duas colunas: a fila (o trabalho) com o peso maior, a mesa
   (quem atende) ao lado. Densidade alta de proposito - quem abre isso quer ver
   a fila inteira sem rolar. */

.duty-head-side { display: flex; align-items: center; gap: var(--space-3); }
.duty-kpis { margin-bottom: var(--space-5); }
.ux-kpi-value[data-tone="danger"] { color: var(--danger); }
.ux-kpi-value[data-tone="warn"] { color: var(--warn); }
.ux-kpi-value[data-tone="ok"] { color: var(--ink-900); }
.ux-kpi-value[data-tone="muted"] { color: var(--ink-300); font-weight: var(--weight-medium); }

.duty-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: var(--space-4); align-items: start; }
.duty-coluna { display: flex; flex-direction: column; gap: var(--space-4); }

/* --- fila --- */
.duty-lista { list-style: none; margin: 0; padding: 0; }
.duty-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--card-pad);
    border-top: 1px solid var(--line);
}
.duty-item:first-child { border-top: 0; }
.duty-item:hover { background: var(--surface-2); }
.duty-item-copy { min-width: 0; }
.duty-item-nome {
    display: block;
    font-size: var(--text-md); font-weight: var(--weight-semibold); color: var(--ink-900);
    text-decoration: none;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.duty-item-nome:hover { color: var(--brand); text-decoration: underline; }
.duty-item-nome:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-xs); }
.duty-item-sub { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 2px 0 0; font-size: var(--text-xs); color: var(--ink-600); }
.duty-item-sub span + span::before { content: "·"; margin-right: var(--space-2); color: var(--ink-300); }

/* A espera e a informacao principal da fila, entao carrega cor e peso proprios.
   Cor nunca sozinha: o numero em si ja cresce, e o title diz a data exata. */
.duty-espera {
    flex: none;
    padding: 3px var(--space-2);
    border-radius: var(--r-xs);
    font-size: var(--text-sm); font-weight: var(--weight-semibold);
    font-variant-numeric: tabular-nums;
    background: var(--surface-2); color: var(--ink-600);
    border: 1px solid var(--line);
}
.duty-item[data-espera="warn"] .duty-espera { background: var(--warn-soft); border-color: var(--warn-border); color: var(--warn); }
.duty-item[data-espera="danger"] .duty-espera { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }

.duty-item-acao { display: flex; align-items: center; gap: var(--space-2); }
.duty-corte { padding: var(--space-3) var(--card-pad); border-top: 1px solid var(--line); margin: 0; }

.ux-select-sm { height: 30px; padding-block: 0; font-size: var(--text-xs); max-width: 190px; }

/* --- meu plantao --- */
.duty-eu { border-color: var(--line-strong); }
.duty-eu[data-online="1"] { border-color: var(--brand-border); box-shadow: var(--sh-sm); }
.duty-eu-corpo { display: flex; flex-direction: column; gap: var(--space-4); }
.duty-ocupacao { display: flex; flex-direction: column; gap: var(--space-2); }
.duty-ocupacao strong { font-size: var(--text-3xl); font-weight: var(--weight-bold); color: var(--ink-900); line-height: 1; font-variant-numeric: tabular-nums; }
.duty-ocupacao strong span { font-size: var(--text-md); font-weight: var(--weight-medium); color: var(--ink-400); }
.duty-eu-limite { display: flex; flex-direction: column; gap: var(--space-2); }
.duty-limite-linha { display: flex; gap: var(--space-2); }
.duty-limite-linha .ux-input { max-width: 90px; }

.duty-barra { height: 6px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; }
.duty-barra i { display: block; height: 100%; background: var(--brand); border-radius: inherit; }
.duty-barra-sm { width: 56px; flex: none; }

/* --- mesa --- */
.duty-mesa { list-style: none; margin: 0; padding: 0; }
.duty-agente {
    display: flex; align-items: center; gap: var(--space-3);
    padding: var(--space-3) var(--card-pad);
    border-top: 1px solid var(--line);
}
.duty-agente:first-child { border-top: 0; }
.duty-agente[data-online="0"] { opacity: .62; }
.duty-agente-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.duty-agente-copy strong { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--ink-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.duty-agente-copy .ux-muted { font-size: var(--text-xs); }
.duty-agente[data-online="1"] .ux-avatar { background: var(--brand-soft); color: var(--brand-press); }
.duty-voce { margin-left: var(--space-2); font-size: var(--text-2xs); font-weight: var(--weight-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wide); color: var(--brand); }

@media (max-width: 1080px) {
    .duty-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
    .duty-item { grid-template-columns: minmax(0, 1fr) auto; }
    .duty-item-acao { grid-column: 1 / -1; justify-content: flex-end; }
    .ux-select-sm { max-width: none; flex: 1; }
}