/* ═══════════════════════════════════════════════════════════════════════════
   LUMIED DESIGN SYSTEM — v1 (canônico)
   ───────────────────────────────────────────────────────────────────────────
   Fonte única de verdade para tokens + componentes base.
   Incluir DEPOIS do CSS local do portal e ANTES de themes.css:
     <link rel="stylesheet" href="/lumied-ds.css">
     <link rel="stylesheet" href="/themes.css">

   PRINCÍPIOS
   1. Bridge, não substituição: os tokens semânticos apontam para as variáveis
      canônicas já usadas pelos portais (--red, --green, --blue, --text, --bg…),
      então os 4 temas (corporativo/lúdico/sério/interativo) continuam funcionando
      automaticamente.
   2. Namespace aditivo `ds-`: nenhuma classe nova colide com o legado, então dá
      pra migrar tela a tela sem quebrar nada.
   3. Acessível por padrão: foco visível, alvos ≥ 44px no mobile, contraste AA.

   Documentação: /docs/DESIGN_SYSTEM.md
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─────────────────────────────────────────────────────────────
     1. CORES SEMÂNTICAS  (bridge → tokens canônicos do portal)
     Os fallbacks garantem render correto mesmo sem tema aplicado.
     ───────────────────────────────────────────────────────────── */
  --ds-primary:        var(--red, #C8102E);
  --ds-primary-hover:  var(--red-dark, #a00d24);
  --ds-primary-soft:   var(--red-light, rgba(200,16,46,.08));
  --ds-on-primary:     #ffffff;

  --ds-success:        var(--green, #2d7a3a);
  --ds-success-soft:   rgba(45,122,58,.10);
  --ds-info:           var(--blue, #1a6bb5);
  --ds-info-soft:      rgba(26,107,181,.10);
  --ds-warning:        #d4830a;
  --ds-warning-text:   #c27800;
  --ds-warning-soft:   rgba(212,131,10,.12);
  --ds-danger:         var(--red, #C8102E);
  --ds-danger-hover:   var(--red-dark, #a00d24);
  --ds-danger-soft:    rgba(200,16,46,.10);

  /* Superfícies / neutros */
  --ds-bg:             var(--bg, #f0ece6);
  --ds-surface:        var(--white, #ffffff);
  --ds-surface-2:      #faf8f5;          /* hover de linha / thead */
  --ds-surface-input:  #fdfbf8;          /* fundo de input */
  --ds-border:         var(--border, #e2dbd1);
  --ds-border-soft:    #f0ece6;
  --ds-text:           var(--text, #1a1a1a);
  --ds-muted:          var(--muted, #5a5249);
  --ds-subtle:         #a89f95;
  --ds-overlay:        rgba(0,0,0,.5);

  /* ─────────────────────────────────────────────────────────────
     2. ESPAÇAMENTO  (base 4px) — escala numérica + apelidos t-shirt
     ───────────────────────────────────────────────────────────── */
  --ds-space-0: 0;
  --ds-space-1: 4px;
  --ds-space-2: 8px;
  --ds-space-3: 12px;
  --ds-space-4: 16px;
  --ds-space-5: 20px;
  --ds-space-6: 24px;
  --ds-space-8: 32px;
  --ds-space-10: 40px;
  --ds-space-12: 48px;
  --ds-space-16: 64px;
  /* apelidos (também usados pelo lumied-design.css legado) */
  --sp-xs: 4px; --sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 32px; --sp-2xl: 48px;

  /* ─────────────────────────────────────────────────────────────
     3. TIPOGRAFIA
     ───────────────────────────────────────────────────────────── */
  --ds-font-sans: 'DM Sans', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  --ds-font-serif: 'Lora', Georgia, 'Times New Roman', serif;

  --ds-text-2xs: 10px;
  --ds-text-xs:  11px;
  --ds-text-sm:  12px;
  --ds-text-base:13px;   /* corpo padrão do app */
  --ds-text-md:  14px;
  --ds-text-lg:  15px;
  --ds-text-xl:  17px;
  --ds-text-2xl: 22px;
  --ds-text-3xl: 28px;
  --ds-text-4xl: 34px;

  --ds-fw-regular: 400;
  --ds-fw-medium: 500;
  --ds-fw-semibold: 600;
  --ds-fw-bold: 700;
  --ds-fw-black: 900;

  --ds-leading-tight: 1.1;
  --ds-leading-snug: 1.25;
  --ds-leading-normal: 1.5;
  --ds-leading-relaxed: 1.6;
  --ds-tracking-wide: .5px;

  /* ─────────────────────────────────────────────────────────────
     4. RAIO / SOMBRA / Z-INDEX / MOVIMENTO
     ───────────────────────────────────────────────────────────── */
  --ds-radius-xs: 6px;
  --ds-radius-sm: 8px;
  --ds-radius-md: 12px;
  --ds-radius-lg: 16px;
  --ds-radius-xl: 20px;
  --ds-radius-pill: 9999px;
  /* apelidos legados */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; --r-full: 9999px;

  --ds-shadow-sm: 0 2px 8px rgba(0,0,0,.04);
  --ds-shadow-md: 0 4px 16px rgba(0,0,0,.06);
  --ds-shadow-lg: 0 8px 32px rgba(0,0,0,.08);
  --ds-shadow-xl: 0 24px 60px rgba(0,0,0,.25);
  --ds-ring: 0 0 0 3px var(--ds-primary-soft);
  /* apelidos legados */
  --shadow-sm: 0 2px 8px rgba(0,0,0,.04);
  --shadow-md: 0 4px 16px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.08);

  --ds-z-base: 1;
  --ds-z-dropdown: 60;
  --ds-z-sticky: 100;
  --ds-z-drawer: 150;
  --ds-z-modal: 200;
  --ds-z-toast: 99997;
  --ds-z-tooltip: 99998;

  --ds-transition-fast: .15s ease;
  --ds-transition: .2s ease;
  --ds-transition-slow: .3s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMAÇÕES COMPARTILHADAS
   ═══════════════════════════════════════════════════════════════════════════ */
@keyframes ds-pop-in   { from { opacity:0; transform: translateY(8px) scale(.98); } to { opacity:1; transform: none; } }
@keyframes ds-fade-in  { from { opacity:0; } to { opacity:1; } }
@keyframes ds-slide-in-right { from { transform: translateX(16px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes ds-drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes ds-drawer-in-left { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes ds-spin     { to { transform: rotate(360deg); } }
@keyframes ds-shimmer  { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }

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

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTE: BUTTON  →  .ds-btn
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--ds-space-2);
  padding: 10px 18px;
  font-family: var(--ds-font-sans);
  font-size: var(--ds-text-base);
  font-weight: var(--ds-fw-semibold);
  line-height: 1;
  border: 1.5px solid transparent;
  border-radius: var(--ds-radius-sm);
  background: var(--ds-surface);
  color: var(--ds-text);
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--ds-transition), border-color var(--ds-transition), box-shadow var(--ds-transition), transform var(--ds-transition-fast), opacity var(--ds-transition);
  -webkit-tap-highlight-color: transparent;
}
.ds-btn:focus-visible { outline: none; box-shadow: var(--ds-ring); }
.ds-btn:disabled, .ds-btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; }
.ds-btn:active { transform: translateY(1px); }

/* variantes */
.ds-btn--primary { background: var(--ds-primary); border-color: var(--ds-primary); color: var(--ds-on-primary); }
.ds-btn--primary:hover { background: var(--ds-primary-hover); border-color: var(--ds-primary-hover); }

.ds-btn--secondary { background: var(--ds-surface); border-color: var(--ds-border); color: var(--ds-text); }
.ds-btn--secondary:hover { border-color: var(--ds-primary); color: var(--ds-primary); background: var(--ds-primary-soft); }

.ds-btn--ghost { background: transparent; border-color: transparent; color: var(--ds-muted); }
.ds-btn--ghost:hover { background: var(--ds-surface-2); color: var(--ds-text); }

.ds-btn--danger { background: var(--ds-danger); border-color: var(--ds-danger); color: #fff; }
.ds-btn--danger:hover { background: var(--ds-danger-hover); border-color: var(--ds-danger-hover); }

.ds-btn--danger-outline { background: transparent; border-color: color-mix(in srgb, var(--ds-danger) 35%, transparent); color: var(--ds-danger); }
.ds-btn--danger-outline:hover { background: var(--ds-danger-soft); }

.ds-btn--success { background: var(--ds-success); border-color: var(--ds-success); color: #fff; }
.ds-btn--success:hover { filter: brightness(.93); }

.ds-btn--whatsapp { background: #25D366; border-color: #25D366; color: #0a3d12; font-weight: var(--ds-fw-bold); }
.ds-btn--whatsapp:hover { background: #1da851; border-color: #1da851; }

/* tamanhos */
.ds-btn--sm { padding: 6px 12px; font-size: var(--ds-text-sm); border-radius: var(--ds-radius-xs); }
.ds-btn--lg { padding: 13px 24px; font-size: var(--ds-text-md); }
.ds-btn--block { width: 100%; }
.ds-btn--icon { padding: 8px; width: 36px; height: 36px; }

/* loading: <button class="ds-btn ds-btn--primary is-loading"> */
.ds-btn.is-loading { color: transparent !important; position: relative; pointer-events: none; }
.ds-btn.is-loading::after {
  content: ''; position: absolute; width: 16px; height: 16px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  color: var(--ds-on-primary); animation: ds-spin .6s linear infinite;
}
.ds-btn--secondary.is-loading::after, .ds-btn--ghost.is-loading::after { color: var(--ds-primary); }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTE: INPUT / SELECT / FIELD  →  .ds-field  .ds-input  .ds-select
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-field { margin-bottom: var(--ds-space-4); }
.ds-field__label {
  display: block;
  font-size: var(--ds-text-xs); font-weight: var(--ds-fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ds-tracking-wide);
  color: var(--ds-muted); margin-bottom: var(--ds-space-2);
}
.ds-field__label .ds-req { color: var(--ds-danger); margin-left: 2px; }

.ds-input, .ds-select, .ds-textarea {
  width: 100%; box-sizing: border-box;
  padding: 10px 13px;
  font-family: var(--ds-font-sans); font-size: var(--ds-text-base);
  color: var(--ds-text);
  background: var(--ds-surface-input);
  border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  outline: none;
  transition: border-color var(--ds-transition), box-shadow var(--ds-transition);
}
.ds-textarea { min-height: 88px; resize: vertical; line-height: var(--ds-leading-normal); }
.ds-input::placeholder, .ds-textarea::placeholder { color: var(--ds-subtle); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus { border-color: var(--ds-primary); box-shadow: var(--ds-ring); }
.ds-input:disabled, .ds-select:disabled, .ds-textarea:disabled { opacity: .6; cursor: not-allowed; background: var(--ds-surface-2); }

/* select com chevron */
.ds-select {
  -webkit-appearance: none; appearance: none;
  padding-right: 36px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235a5249' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center;
  cursor: pointer;
}

/* estados de validação */
.ds-field--error .ds-input, .ds-field--error .ds-select, .ds-field--error .ds-textarea,
.ds-input.is-invalid, .ds-select.is-invalid { border-color: var(--ds-danger); }
.ds-field--error .ds-input:focus, .ds-input.is-invalid:focus { box-shadow: 0 0 0 3px var(--ds-danger-soft); }
.ds-field__hint  { font-size: var(--ds-text-xs); color: var(--ds-muted); margin-top: var(--ds-space-1); }
.ds-field__error { font-size: var(--ds-text-xs); color: var(--ds-danger); margin-top: var(--ds-space-1); display: none; }
.ds-field--error .ds-field__error { display: block; }

/* input com ícone à esquerda: <div class="ds-input-group"><span class="ds-input-group__icon">🔍</span><input class="ds-input"></div> */
.ds-input-group { position: relative; }
.ds-input-group__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ds-muted); pointer-events: none; }
.ds-input-group .ds-input { padding-left: 38px; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTE: CARD  →  .ds-card
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
  overflow: hidden;
}
.ds-card--pad { padding: var(--ds-space-6); }
.ds-card--hover { transition: transform var(--ds-transition), box-shadow var(--ds-transition), border-color var(--ds-transition); }
.ds-card--hover:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-md); border-color: var(--ds-primary); }

.ds-card__header { padding: var(--ds-space-5) var(--ds-space-6); border-bottom: 1px solid var(--ds-border-soft); display:flex; align-items:center; justify-content:space-between; gap: var(--ds-space-3); }
.ds-card__title { font-family: var(--ds-font-serif); font-size: var(--ds-text-lg); font-weight: var(--ds-fw-semibold); color: var(--ds-text); margin: 0; }
.ds-card__body { padding: var(--ds-space-6); }
.ds-card__footer { padding: var(--ds-space-4) var(--ds-space-6); border-top: 1px solid var(--ds-border-soft); display:flex; gap: var(--ds-space-3); justify-content:flex-end; }

/* card de estatística com faixa de destaque no topo (cor via --ds-accent) */
.ds-card--stat { position: relative; padding: 18px 16px; text-align: left; }
.ds-card--stat::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--ds-accent, var(--ds-primary)); }
.ds-stat__label { font-size: var(--ds-text-xs); font-weight: var(--ds-fw-medium); text-transform: uppercase; letter-spacing: var(--ds-tracking-wide); color: var(--ds-muted); }
.ds-stat__value { font-family: var(--ds-font-serif); font-size: var(--ds-text-4xl); font-weight: var(--ds-fw-bold); color: var(--ds-text); line-height: var(--ds-leading-tight); margin: 4px 0 2px; }
.ds-stat__sub { font-size: var(--ds-text-2xs); color: var(--ds-muted); }
.ds-stat__trend { font-size: var(--ds-text-xs); font-weight: var(--ds-fw-bold); }
.ds-stat__trend.up { color: var(--ds-success); }
.ds-stat__trend.down { color: var(--ds-danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTE: BADGE / PILL  →  .ds-badge  .ds-pill
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 9px; border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-2xs); font-weight: var(--ds-fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ds-tracking-wide);
  background: var(--ds-primary-soft); color: var(--ds-primary);
}
.ds-pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: var(--ds-radius-pill);
  font-size: var(--ds-text-xs); font-weight: var(--ds-fw-semibold);
  background: var(--ds-surface-2); color: var(--ds-muted);
}
.ds-pill--success { background: var(--ds-success-soft); color: var(--ds-success); }
.ds-pill--info    { background: var(--ds-info-soft); color: var(--ds-info); }
.ds-pill--warning { background: var(--ds-warning-soft); color: var(--ds-warning-text); }
.ds-pill--danger  { background: var(--ds-danger-soft); color: var(--ds-danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTE: TABLE  →  .ds-table-wrap  >  table.ds-table
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-table-wrap {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-md);
  box-shadow: var(--ds-shadow-sm);
  overflow: auto;            /* scroll horizontal no mobile */
}
.ds-table { width: 100%; border-collapse: collapse; }
.ds-table thead th {
  padding: 11px 16px; text-align: left;
  font-size: var(--ds-text-xs); font-weight: var(--ds-fw-semibold);
  text-transform: uppercase; letter-spacing: var(--ds-tracking-wide);
  color: var(--ds-muted); background: var(--ds-surface-2);
  border-bottom: 1px solid var(--ds-border);
  white-space: nowrap; position: sticky; top: 0; z-index: 1;
}
.ds-table tbody tr { border-bottom: 1px solid var(--ds-border-soft); transition: background var(--ds-transition-fast); }
.ds-table tbody tr:last-child { border-bottom: none; }
.ds-table tbody tr:hover { background: var(--ds-surface-2); }
.ds-table tbody td { padding: 12px 16px; font-size: var(--ds-text-base); vertical-align: middle; color: var(--ds-text); }
.ds-table--zebra tbody tr:nth-child(even) { background: color-mix(in srgb, var(--ds-surface-2) 55%, transparent); }
.ds-table__num { text-align: right; font-variant-numeric: tabular-nums; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTE: MODAL  →  .ds-modal-overlay  >  .ds-modal
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-modal-overlay {
  position: fixed; inset: 0; z-index: var(--ds-z-modal);
  display: none; align-items: center; justify-content: center;
  padding: var(--ds-space-4);
  background: var(--ds-overlay); backdrop-filter: blur(3px);
}
.ds-modal-overlay.is-open { display: flex; animation: ds-fade-in var(--ds-transition); }
.ds-modal {
  background: var(--ds-surface);
  border-radius: var(--ds-radius-lg);
  width: 100%; max-width: 560px; max-height: 90vh; overflow-y: auto;
  box-shadow: var(--ds-shadow-xl);
  animation: ds-pop-in .25s ease;
}
.ds-modal--sm { max-width: 420px; }
.ds-modal--lg { max-width: 760px; }
.ds-modal__header { display:flex; align-items:flex-start; justify-content:space-between; gap: var(--ds-space-4); padding: var(--ds-space-6) var(--ds-space-6) var(--ds-space-3); }
.ds-modal__title { font-family: var(--ds-font-serif); font-size: var(--ds-text-xl); font-weight: var(--ds-fw-bold); color: var(--ds-text); margin: 0; }
.ds-modal__sub { font-size: var(--ds-text-base); color: var(--ds-muted); margin: 4px 0 0; }
.ds-modal__close {
  flex-shrink: 0; width: 32px; height: 32px; border: none; background: var(--ds-surface-2);
  border-radius: var(--ds-radius-sm); color: var(--ds-muted); font-size: 18px; line-height: 1; cursor: pointer;
  transition: background var(--ds-transition), color var(--ds-transition);
}
.ds-modal__close:hover { background: var(--ds-danger-soft); color: var(--ds-danger); }
.ds-modal__body { padding: var(--ds-space-3) var(--ds-space-6); }
.ds-modal__footer { display:flex; gap: var(--ds-space-3); justify-content:flex-end; padding: var(--ds-space-5) var(--ds-space-6) var(--ds-space-6); flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTE: DRAWER  →  .ds-drawer-overlay  >  .ds-drawer
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-drawer-overlay {
  position: fixed; inset: 0; z-index: var(--ds-z-drawer);
  display: none; background: var(--ds-overlay); backdrop-filter: blur(2px);
}
.ds-drawer-overlay.is-open { display: block; animation: ds-fade-in var(--ds-transition); }
.ds-drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 100%; max-width: 440px;
  background: var(--ds-surface);
  box-shadow: var(--ds-shadow-xl);
  display: flex; flex-direction: column;
  animation: ds-drawer-in .28s ease;
}
.ds-drawer--left { right: auto; left: 0; animation: ds-drawer-in-left .28s ease; }
.ds-drawer--wide { max-width: 600px; }
.ds-drawer__header { display:flex; align-items:center; justify-content:space-between; gap: var(--ds-space-3); padding: var(--ds-space-5) var(--ds-space-6); border-bottom: 1px solid var(--ds-border); }
.ds-drawer__title { font-family: var(--ds-font-serif); font-size: var(--ds-text-lg); font-weight: var(--ds-fw-bold); margin: 0; color: var(--ds-text); }
.ds-drawer__body { flex: 1; overflow-y: auto; padding: var(--ds-space-6); }
.ds-drawer__footer { padding: var(--ds-space-4) var(--ds-space-6); border-top: 1px solid var(--ds-border); display:flex; gap: var(--ds-space-3); justify-content:flex-end; }
.ds-drawer__close { flex-shrink:0; width:32px; height:32px; border:none; background: var(--ds-surface-2); border-radius: var(--ds-radius-sm); color: var(--ds-muted); font-size:18px; cursor:pointer; transition: background var(--ds-transition); }
.ds-drawer__close:hover { background: var(--ds-danger-soft); color: var(--ds-danger); }

/* ═══════════════════════════════════════════════════════════════════════════
   COMPONENTE: TOAST  →  .ds-toast-container  >  .ds-toast
   (markup gerado por LumiedDS.toast / window.showToast)
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-toast-container {
  position: fixed; top: 20px; right: 20px; z-index: var(--ds-z-toast);
  display: flex; flex-direction: column; gap: var(--ds-space-2);
  max-width: 360px; pointer-events: none;
}
.ds-toast {
  pointer-events: auto;
  display: flex; align-items: center; gap: var(--ds-space-2);
  padding: 12px 18px; border-radius: var(--ds-radius-md);
  font-family: var(--ds-font-sans); font-size: var(--ds-text-base); font-weight: var(--ds-fw-medium);
  color: #fff; background: var(--ds-info);
  box-shadow: 0 4px 20px rgba(0,0,0,.2);
  animation: ds-slide-in-right var(--ds-transition-slow);
  transition: opacity var(--ds-transition-slow);
}
.ds-toast--success { background: var(--ds-success); }
.ds-toast--error   { background: var(--ds-danger); }
.ds-toast--warning { background: var(--ds-warning); }
.ds-toast--info    { background: var(--ds-info); }
.ds-toast.is-leaving { opacity: 0; }
.ds-toast__action { background: rgba(255,255,255,.2); color:#fff; border:0; padding:6px 12px; border-radius: var(--ds-radius-xs); font: inherit; font-weight: var(--ds-fw-semibold); cursor:pointer; margin-left: auto; }
.ds-toast__action:hover { background: rgba(255,255,255,.32); }

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADOS: EMPTY  →  .ds-empty
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px; gap: var(--ds-space-3);
  min-height: 200px; color: var(--ds-muted);
}
.ds-empty__icon { font-size: 48px; line-height: 1; opacity: .85; }
.ds-empty__title { font-size: var(--ds-text-lg); font-weight: var(--ds-fw-bold); color: var(--ds-text); margin: 0; line-height: var(--ds-leading-snug); }
.ds-empty__text { font-size: var(--ds-text-base); color: var(--ds-muted); max-width: 420px; line-height: var(--ds-leading-normal); margin: 0; }
.ds-empty__action { margin-top: var(--ds-space-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADOS: LOADING  →  .ds-loading  +  .ds-spinner
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-spinner {
  display: inline-block; width: 22px; height: 22px;
  border: 2.5px solid var(--ds-border);
  border-top-color: var(--ds-primary);
  border-radius: 50%;
  animation: ds-spin .7s linear infinite;
}
.ds-spinner--sm { width: 16px; height: 16px; border-width: 2px; }
.ds-spinner--lg { width: 36px; height: 36px; border-width: 3px; }
.ds-loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--ds-space-3); padding: 40px 24px; min-height: 160px;
  color: var(--ds-muted); font-size: var(--ds-text-base);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADOS: ERROR  →  .ds-error
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-error {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 40px 24px; gap: var(--ds-space-3);
  min-height: 200px;
}
.ds-error__icon { font-size: 44px; line-height: 1; }
.ds-error__title { font-size: var(--ds-text-lg); font-weight: var(--ds-fw-bold); color: var(--ds-text); margin: 0; }
.ds-error__text { font-size: var(--ds-text-base); color: var(--ds-muted); max-width: 420px; line-height: var(--ds-leading-normal); margin: 0; }
.ds-error__action { margin-top: var(--ds-space-2); }

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADOS: SKELETON  →  .ds-skeleton
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-skeleton {
  background: linear-gradient(90deg, var(--ds-border-soft) 25%, var(--ds-border) 50%, var(--ds-border-soft) 75%);
  background-size: 200% 100%;
  animation: ds-shimmer 1.5s infinite;
  border-radius: var(--ds-radius-sm);
}
.ds-skeleton--text   { height: 14px; margin-bottom: 8px; width: 80%; }
.ds-skeleton--text.short  { width: 40%; }
.ds-skeleton--text.medium { width: 60%; }
.ds-skeleton--title  { height: 22px; width: 50%; margin-bottom: 12px; }
.ds-skeleton--avatar { width: 40px; height: 40px; border-radius: 50%; }
.ds-skeleton--card   { height: 120px; margin-bottom: 12px; }
.ds-skeleton--stat   { height: 80px; }

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITÁRIOS DE LAYOUT (mínimos, opcionais)
   ═══════════════════════════════════════════════════════════════════════════ */
.ds-stack { display: flex; flex-direction: column; gap: var(--ds-space-4); }
.ds-row   { display: flex; align-items: center; gap: var(--ds-space-3); }
.ds-row--wrap { flex-wrap: wrap; }
.ds-row--between { justify-content: space-between; }
.ds-grid  { display: grid; gap: var(--ds-space-4); }
.ds-grid--stats { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.ds-grid--cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.ds-section-title { font-family: var(--ds-font-serif); font-size: var(--ds-text-xl); font-weight: var(--ds-fw-semibold); color: var(--ds-text); margin: 0 0 var(--ds-space-4); display:flex; align-items:center; gap: var(--ds-space-3); }
.ds-spacer { flex: 1; }
.ds-hidden { display: none !important; }
.ds-text-muted { color: var(--ds-muted); }
.ds-text-danger { color: var(--ds-danger); }
.ds-text-success { color: var(--ds-success); }

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVO
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .ds-grid--cards { grid-template-columns: 1fr; }
  .ds-grid--stats { grid-template-columns: repeat(2, 1fr); }
  .ds-modal { max-width: 100%; }
  .ds-toast-container { left: 12px; right: 12px; max-width: none; }
  /* alvos de toque ≥ 44px no mobile */
  .ds-btn { min-height: 44px; }
  .ds-modal__close, .ds-drawer__close { min-width: 44px; min-height: 44px; }
}