/* ====================================================================
   Aethereuum — Design System · Primitivos (DS-2)
   --------------------------------------------------------------------
   Kit de componentes compartilhados, construído SOBRE os tokens (DS-1).
   Carregado depois de tokens.css e ADITIVO: usa nomes próprios (prefixo
   ds-* e alguns primitivos que ainda não existiam como badge/pill/chip/
   modal/stat/toolbar), então NÃO colide com .btn/.card/.tabela/.form já
   existentes. Telas novas e refeitas adotam este vocabulário; as antigas
   seguem intactas. Como tudo aponta para os tokens, o visual fica coeso.

   Cobertura:
   - Botões       .ds-btn (+ -primaria/-sucesso/-perigo/-fantasma/-sm/-lg/-bloco)
   - Cartões      .ds-card (+ -interativo)
   - Inputs       .ds-campo / .ds-rotulo / .ds-ajuda / .ds-erro
   - Badges/pills .ds-badge (+ -sucesso/-perigo/-alerta/-neutra)  .ds-pill
   - Chips        .ds-chip (+ -ativo)
   - Avatar       .ds-avatar (-sm/-lg)
   - Stat         .ds-stat / .ds-stat-num / .ds-stat-rotulo / .ds-stat-delta
   - Toolbar      .ds-toolbar
   - Divisor      .ds-divisor
   - Estado vazio .ds-vazio
   - Modal        .ds-modal-fundo / .ds-modal / .ds-modal-cabecalho/corpo/rodape
   =========================================================================== */

/* ---------- Ícone (DS-3) ---------- */
.ds-ico { display: inline-block; vertical-align: -0.15em; flex: 0 0 auto; color: inherit; }

/* ---------- Botão ---------- */
.ds-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--esp-2);
    padding: var(--esp-3) var(--esp-4); border: 1px solid transparent;
    border-radius: var(--raio-sm); font-weight: var(--peso-semi); font-size: var(--fs-sm);
    line-height: 1; cursor: pointer; background: var(--cor-superficie); color: var(--cor-texto);
    text-decoration: none; white-space: nowrap;
}
.ds-btn:hover { transform: translateY(-1px); box-shadow: var(--sombra-sm); }
.ds-btn:active { transform: translateY(0); box-shadow: none; }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
.ds-btn-primaria { background: var(--cor-acao); color: #fff; }
.ds-btn-primaria:hover { background: var(--cor-acao-forte); }
.ds-btn-sucesso { background: var(--cor-sucesso); color: #fff; }
.ds-btn-perigo { background: var(--cor-perigo); color: #fff; }
.ds-btn-fantasma { background: transparent; border-color: var(--cor-borda); color: var(--cor-texto); }
.ds-btn-fantasma:hover { background: var(--tinta-acao); border-color: var(--cor-acao); color: var(--cor-acao); }
.ds-btn-sm { padding: var(--esp-2) var(--esp-3); font-size: var(--fs-xs); }
.ds-btn-lg { padding: var(--esp-4) var(--esp-6); font-size: var(--fs-md); border-radius: var(--raio-md); }
.ds-btn-bloco { width: 100%; }

/* ---------- Cartão ---------- */
.ds-card {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: var(--raio-lg); padding: var(--esp-5); box-shadow: var(--sombra-sm);
    display: flex; flex-direction: column; gap: var(--esp-3);
}
.ds-card-interativo { cursor: pointer; }
.ds-card-interativo:hover { box-shadow: var(--sombra-lg); transform: translateY(-2px); border-color: var(--cor-acao); }

/* ---------- Formulário ---------- */
.ds-rotulo { display: block; font-weight: var(--peso-semi); font-size: var(--fs-sm); color: var(--cor-texto); margin-bottom: var(--esp-2); }
.ds-campo {
    font: inherit; width: 100%; padding: var(--esp-3); border: 1px solid var(--cor-borda);
    border-radius: var(--raio-sm); background: var(--cor-superficie); color: var(--cor-texto);
}
.ds-campo::placeholder { color: var(--cor-texto-suave); }
.ds-campo:focus { outline: none; border-color: var(--cor-acao); box-shadow: var(--sombra-foco); }
.ds-campo[aria-invalid="true"] { border-color: var(--cor-perigo); }
.ds-ajuda { font-size: var(--fs-xs); color: var(--cor-texto-suave); margin-top: var(--esp-1); }
.ds-erro { font-size: var(--fs-xs); color: var(--cor-perigo); margin-top: var(--esp-1); }

/* ---------- Badge / Pill ---------- */
.ds-badge {
    display: inline-flex; align-items: center; gap: var(--esp-1);
    padding: 2px var(--esp-2); border-radius: var(--raio-xs);
    font-size: var(--fs-xs); font-weight: var(--peso-semi); line-height: 1.5;
    background: var(--tinta-acao); color: var(--cor-acao);
}
.ds-badge-sucesso { background: color-mix(in srgb, var(--cor-sucesso) 16%, transparent); color: var(--cor-sucesso); }
.ds-badge-perigo { background: color-mix(in srgb, var(--cor-perigo) 16%, transparent); color: var(--cor-perigo); }
.ds-badge-alerta { background: color-mix(in srgb, var(--cor-alerta) 20%, transparent); color: color-mix(in srgb, var(--cor-alerta) 70%, var(--cor-texto)); }
.ds-badge-neutra { background: color-mix(in srgb, var(--cor-texto) 10%, transparent); color: var(--cor-texto-suave); }
.ds-pill { border-radius: var(--raio-full); padding: 2px var(--esp-3); }

/* ---------- Chip (filtro/segmento clicável) ---------- */
.ds-chip {
    display: inline-flex; align-items: center; gap: var(--esp-2);
    padding: var(--esp-2) var(--esp-3); border-radius: var(--raio-full);
    border: 1px solid var(--cor-borda); background: var(--cor-superficie);
    color: var(--cor-texto); font-size: var(--fs-sm); font-weight: var(--peso-medio);
    cursor: pointer;
}
.ds-chip:hover { border-color: var(--cor-acao); }
.ds-chip-ativo { background: var(--tinta-acao); border-color: var(--cor-acao); color: var(--cor-acao); font-weight: var(--peso-semi); }

/* ---------- Avatar ---------- */
.ds-avatar {
    width: 40px; height: 40px; border-radius: var(--raio-full); object-fit: cover;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--tinta-acao); color: var(--cor-acao); font-weight: var(--peso-forte);
    font-size: var(--fs-sm); flex: 0 0 auto;
}
.ds-avatar-sm { width: 28px; height: 28px; font-size: var(--fs-xs); }
.ds-avatar-lg { width: 64px; height: 64px; font-size: var(--fs-lg); }

/* ---------- Stat (número em destaque) ---------- */
.ds-stat { display: flex; flex-direction: column; gap: var(--esp-1); }
.ds-stat-num { font-size: var(--fs-2xl); font-weight: var(--peso-forte); line-height: var(--lh-tight); font-variant-numeric: tabular-nums; }
.ds-stat-rotulo { font-size: var(--fs-sm); color: var(--cor-texto-suave); }
.ds-stat-delta { font-size: var(--fs-xs); font-weight: var(--peso-semi); }
.ds-stat-delta.sobe { color: var(--cor-sucesso); }
.ds-stat-delta.desce { color: var(--cor-perigo); }

/* ---------- Toolbar (cabeçalho de seção com ações) ---------- */
.ds-toolbar {
    display: flex; align-items: center; gap: var(--esp-3); flex-wrap: wrap;
    justify-content: space-between; margin-bottom: var(--esp-4);
}
.ds-toolbar-acoes { display: flex; align-items: center; gap: var(--esp-2); flex-wrap: wrap; }

/* ---------- Divisor ---------- */
.ds-divisor { height: 1px; background: var(--cor-borda); border: 0; margin: var(--esp-5) 0; }

/* ---------- Estado vazio ---------- */
.ds-vazio {
    text-align: center; padding: var(--esp-12) var(--esp-6);
    display: flex; flex-direction: column; align-items: center; gap: var(--esp-3);
    color: var(--cor-texto-suave);
}
.ds-vazio-titulo { font-size: var(--fs-lg); font-weight: var(--peso-semi); color: var(--cor-texto); }
.ds-vazio-texto { max-width: 42ch; line-height: var(--lh-base); }

/* ---------- Modal / Drawer ---------- */
.ds-modal-fundo {
    position: fixed; inset: 0; background: rgba(10, 11, 20, .55);
    display: flex; align-items: center; justify-content: center; padding: var(--esp-4);
    z-index: 1000;
}
.ds-modal {
    background: var(--cor-superficie); border: 1px solid var(--cor-borda);
    border-radius: var(--raio-xl); box-shadow: var(--sombra-lg);
    width: 100%; max-width: 520px; max-height: 90vh; overflow: auto;
    display: flex; flex-direction: column;
}
.ds-modal-cabecalho {
    display: flex; align-items: center; justify-content: space-between; gap: var(--esp-3);
    padding: var(--esp-5); border-bottom: 1px solid var(--cor-borda);
}
.ds-modal-titulo { font-size: var(--fs-lg); font-weight: var(--peso-semi); }
.ds-modal-corpo { padding: var(--esp-5); display: flex; flex-direction: column; gap: var(--esp-4); }
.ds-modal-rodape {
    display: flex; align-items: center; justify-content: flex-end; gap: var(--esp-2);
    padding: var(--esp-4) var(--esp-5); border-top: 1px solid var(--cor-borda);
}

/* Modais respeitam entrada suave só quando o usuário permite movimento */
@media (prefers-reduced-motion: no-preference) {
    .ds-modal { animation: ds-modal-entra var(--mov-medio) var(--ease-entrada); }
    @keyframes ds-modal-entra { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
}