/* ============================================================================
   DESIGN SYSTEM LPD — TOKENS (Blueprint UI/UX Onda 1, §3 · 02/07/2026)
   Camada de tokens sobre a paleta do Manual de Identidade (style.css :root).
   PASSO 1: os valores ESPELHAM o que as telas já usam hoje — carregar este
   arquivo não muda nenhum pixel. As telas migram para os tokens tela a tela.
   ============================================================================ */
:root {
  /* ── Cores semânticas (mesmos hex já usados nas telas hoje) ─────────────── */
  --ok:          #16a34a;   /* verde ações/valores positivos (tabelas)  */
  --ok-forte:    #166534;   /* texto sobre fundo ok-bg                  */
  --ok-bg:       #dcfce7;
  --ok-borda:    #bbf7d0;

  --warn:        #d97706;   /* pendente / a receber                     */
  --warn-forte:  #854d0e;
  --warn-bg:     #fef9c3;
  --warn-borda:  #fde68a;

  --danger:      #dc2626;   /* vencidas / erros / destrutivo            */
  --danger-forte:#991b1b;
  --danger-bg:   #fef2f2;
  --danger-borda:#fecaca;

  --info:        #1d4ed8;   /* links de ação secundária (boleto etc.)   */
  --info-bg:     #eff6ff;
  --info-borda:  #bfdbfe;

  --roxo:        #5b21b6;   /* execução/jurídico                        */
  --roxo-bg:     #f5f3ff;
  --roxo-borda:  #ddd6fe;

  --brand:       var(--cor-primaria);      /* cinza-chumbo (Manual)     */

  /* ── Escala de cinzas (uso em novas telas; espelham os funcionais) ──────── */
  --gray-50:  #f8fafc;
  --gray-100: #f3f4f6;
  --gray-200: var(--cor-borda);    /* #DEE2E6 */
  --gray-400: #9ca3af;
  --gray-500: var(--cor-subtexto); /* #6C757D */
  --gray-700: #374151;
  --gray-900: var(--cor-texto);    /* #212529 */

  /* ── Espaçamento (escala 4px) ───────────────────────────────────────────── */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px;  --sp-4: 16px;  --sp-5: 20px;  --sp-6: 24px;

  /* ── Raios e sombras ────────────────────────────────────────────────────── */
  --r-sm: 6px;                 /* = --raio atual                    */
  --r-md: 8px;
  --r-lg: 12px;
  --r-pill: 999px;
  --shadow-1: var(--sombra);   /* 0 1px 4px rgba(0,0,0,.10)         */
  --shadow-2: 0 4px 16px rgba(0,0,0,.14);

  /* ── Tipografia (escala) ────────────────────────────────────────────────── */
  --fs-12: .75rem;  --fs-14: .875rem;  --fs-16: 1rem;  --fs-20: 1.25rem;  --fs-28: 1.75rem;
}

/* ============================================================================
   COMPONENTES (Onda 1 §3) — usados conforme cada tela migra
   ============================================================================ */

/* Ícones (Lucide sprite local /img/lucide-sprite.svg) */
.icon { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2;
        stroke-linecap: round; stroke-linejoin: round; vertical-align: -.125em; display: inline-block }

/* Toast global (canto inferior direito; sucesso/erro; undo opcional) */
#ds-toast-wrap { position: fixed; bottom: 16px; right: 16px; z-index: 9999;
                 display: flex; flex-direction: column; gap: 8px; max-width: 360px }
.ds-toast { display: flex; align-items: center; gap: 10px; background: #fff;
            border: 1px solid var(--gray-200); border-left: 4px solid var(--ok);
            border-radius: var(--r-md); box-shadow: var(--shadow-2);
            padding: 10px 14px; font-size: var(--fs-14); color: var(--gray-900);
            transition: opacity .3s; animation: ds-toast-in .18s ease-out }
.ds-toast.erro { border-left-color: var(--danger) }
.ds-toast .icon { color: var(--ok); flex-shrink: 0 }
.ds-toast.erro .icon { color: var(--danger) }
.ds-undo { background: none; border: 1px solid var(--gray-200); border-radius: var(--r-sm);
           padding: .25rem .6rem; font-size: var(--fs-12); font-weight: 600; cursor: pointer;
           color: var(--gray-700); font-family: inherit; white-space: nowrap }
.ds-undo:hover { background: var(--gray-100) }
@keyframes ds-toast-in { from { transform: translateY(8px); opacity: 0 } }

/* Skeleton (percepção de velocidade nos loadings) */
.skel { background: linear-gradient(90deg, #eceff3 25%, #f6f7f9 50%, #eceff3 75%);
        background-size: 200% 100%; animation: skel-shimmer 1.1s infinite; border-radius: var(--r-sm) }
@keyframes skel-shimmer { to { background-position: -200% 0 } }
.skel-linha { height: 14px; margin: .5rem 0 }
.skel-card  { height: 72px; border-radius: var(--r-md) }

/* Tabs leves (texto + badge, sublinhado ativo — sem barra cheia) */
.ds-tabs { display: flex; gap: 1.25rem; border-bottom: 2px solid var(--gray-200) }
.ds-tab { background: none; border: none; border-bottom: 2px solid transparent; margin-bottom: -2px;
          padding: .45rem .1rem; font-size: var(--fs-14); font-weight: 600; color: var(--gray-500);
          cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: .4rem }
.ds-tab:hover { color: var(--gray-700) }
.ds-tab.ativo { color: var(--gray-900); border-bottom-color: var(--brand) }
.ds-tab .ds-badge { background: var(--gray-100); color: var(--gray-700); border-radius: var(--r-pill);
                    padding: .05rem .5rem; font-size: .72rem; font-weight: 600 }
.ds-tab.ativo .ds-badge { background: var(--brand); color: #fff }

/* Row-actions: 1 ação primária + kebab ⋯ com o resto */
.ra-wrap { position: relative; display: inline-flex; gap: .35rem; align-items: center }
.ra-primaria { display: inline-flex; align-items: center; gap: .35rem; border-radius: var(--r-sm);
               padding: .28rem .65rem; font-size: var(--fs-12); font-weight: 600; cursor: pointer;
               font-family: inherit; border: 1px solid transparent }
.ra-primaria.ok     { background: var(--ok-bg); color: var(--ok-forte); border-color: var(--ok-borda) }
.ra-primaria.perigo { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-borda) }
.ra-kebab { background: none; border: 1px solid var(--gray-200); border-radius: var(--r-sm);
            padding: .28rem .45rem; cursor: pointer; color: var(--gray-500); line-height: 1 }
.ra-kebab:hover { background: var(--gray-100) }
.ra-menu { position: absolute; right: 0; top: calc(100% + 4px); background: #fff;
           border: 1px solid var(--gray-200); border-radius: var(--r-md); box-shadow: var(--shadow-2);
           min-width: 180px; z-index: 60; display: none; padding: .25rem; text-align: left }
.ra-menu.aberto { display: block }
.ra-item { display: flex; align-items: center; gap: .5rem; width: 100%; background: none; border: none;
           text-align: left; padding: .45rem .6rem; font-size: var(--fs-12); border-radius: var(--r-sm);
           cursor: pointer; color: var(--gray-700); font-family: inherit; text-decoration: none }
.ra-item:hover { background: var(--gray-100) }
.ra-item.perigo { color: var(--danger) }
.ra-item .icon { color: var(--gray-500) }

/* Empty-state (Onda 2 §1): ícone + estado + próximo passo + ação */
.ds-empty { text-align: center; padding: 2.2rem 1rem; color: var(--gray-500) }
.ds-empty .icon { width: 2rem; height: 2rem; color: var(--gray-400); stroke-width: 1.5 }
.ds-empty-titulo { font-weight: 600; color: var(--gray-700); margin: .6rem 0 .15rem; font-size: var(--fs-14) }
.ds-empty-dica { font-size: var(--fs-12); margin-bottom: .9rem }
.ds-empty-acoes { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap }
.ds-empty-acoes a, .ds-empty-acoes button {
  display: inline-flex; align-items: center; gap: .35rem; background: var(--brand); color: #fff;
  border: none; border-radius: var(--r-sm); padding: .4rem .85rem; font-size: var(--fs-12);
  font-weight: 600; cursor: pointer; text-decoration: none; font-family: inherit }
.ds-empty-acoes .sec { background: #fff; color: var(--gray-700); border: 1px solid var(--gray-200) }

/* Kanban — coluna vazia (Onda 2 §1): sombra de card + convite, só visual */
.kb-col-cards:empty { min-height: 90px }
.kb-col-cards:empty::after {
  content: 'Arraste leads pra cá';
  display: flex; align-items: center; justify-content: center;
  min-height: 72px; margin: .35rem;
  border: 2px dashed var(--gray-200); border-radius: var(--r-md);
  color: var(--gray-400); font-size: var(--fs-12); font-weight: 600;
}

/* Summary-bar (ADDENDUM UI §3): barra fina de stats acima das abas, no topo do card.
   Reutilizável (fluxo-mes, execução). Stats separados por divisores; label caps + valor forte. */
.summary-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 0;
  background: var(--gray-50); border: 1px solid var(--gray-200); border-bottom: none;
  border-radius: var(--r-md) var(--r-md) 0 0; padding: .25rem .35rem }
.summary-stat { display: flex; flex-direction: column; gap: .1rem; padding: .35rem 1.1rem;
  border-right: 1px solid var(--gray-200) }
.summary-stat:last-child { border-right: none }
.summary-stat .lbl { font-size: .66rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gray-500); font-weight: 700 }
.summary-stat .val { font-size: .95rem; font-weight: 700; color: var(--gray-900) }
.summary-stat .val.warn { color: var(--warn) }
.summary-stat .val.ok   { color: var(--ok) }
/* abas coladas embaixo da summary-bar (formam 1 bloco/card) */
.summary-bar + .ds-tabs { border: 1px solid var(--gray-200); border-top: none;
  border-radius: 0 0 var(--r-md) var(--r-md); padding: .3rem .75rem 0; margin-bottom: .8rem }

/* Modal de confirmação (Onda 2 §2 destrutivos): consequência explícita + botão perigo */
.ds-modal-overlay { position: fixed; inset: 0; background: rgba(10,15,20,.45); z-index: 10000;
  display: flex; align-items: center; justify-content: center; padding: 1rem; animation: ds-fade .15s ease-out }
@keyframes ds-fade { from { opacity: 0 } }
.ds-modal { background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-2);
  max-width: 420px; width: 100%; overflow: hidden; animation: ds-toast-in .18s ease-out }
.ds-modal-head { display: flex; align-items: center; gap: .55rem; padding: 1rem 1.15rem .5rem; }
.ds-modal-head .icon { width: 1.3rem; height: 1.3rem; color: var(--danger); flex-shrink: 0 }
.ds-modal-head.info .icon { color: var(--info) }
.ds-modal-titulo { font-weight: 700; font-size: var(--fs-16); color: var(--gray-900) }
.ds-modal-corpo { padding: 0 1.15rem 1rem; font-size: var(--fs-14); color: var(--gray-700); line-height: 1.45 }
.ds-modal-foot { display: flex; justify-content: flex-end; gap: .5rem; padding: .75rem 1.15rem;
  background: var(--gray-50); border-top: 1px solid var(--gray-200) }
.ds-modal-foot button { border-radius: var(--r-sm); padding: .5rem 1rem; font-size: var(--fs-14);
  font-weight: 600; cursor: pointer; font-family: inherit; border: 1px solid transparent }
.ds-modal-cancelar { background: #fff; color: var(--gray-700); border-color: var(--gray-200) }
.ds-modal-cancelar:hover { background: var(--gray-100) }
.ds-modal-ok { background: var(--danger); color: #fff }
.ds-modal-ok:hover { background: var(--danger-forte) }
.ds-modal-ok.info { background: var(--brand) }

/* Densidade compacta (Onda 2 §3): reduz padding/fonte ~25% da linha. Toggle por usuário. */
table.tabela.densa th, table.tabela.densa td { padding: .3rem .5rem !important; font-size: .78rem !important; }
table.tabela.densa .ra-primaria, table.tabela.densa .ra-kebab { padding: .18rem .5rem; }
.ds-densidade-btn { display: inline-flex; align-items: center; gap: .35rem; background: #fff;
  border: 1px solid var(--gray-200); border-radius: var(--r-sm); padding: .38rem .7rem;
  font-size: var(--fs-12); font-weight: 600; color: var(--gray-700); cursor: pointer; font-family: inherit }
.ds-densidade-btn.ativo { background: var(--brand); color: #fff; border-color: var(--brand) }
.ds-densidade-btn.ativo .icon { color: #fff }

/* Month-picker em grade (SPEC UI 04/07) — upgrada um <select> de mês em popover 4×3 */
.ds-mp { position: relative; display: inline-block }
.ds-mp-trigger { display: inline-flex; align-items: center; gap: .5rem; background: #fff;
  border: 1px solid var(--gray-200); border-radius: var(--r-sm); padding: .4rem .7rem;
  font-size: var(--fs-14); font-weight: 600; color: var(--gray-900); cursor: pointer; font-family: inherit }
.ds-mp-trigger .icon { color: var(--gray-500); width: 1rem; height: 1rem }
.ds-mp-pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: 200; background: #fff;
  border: 1px solid var(--gray-200); border-radius: var(--r-md); box-shadow: var(--shadow-2);
  padding: .6rem; width: 248px; display: none }
.ds-mp-pop.aberto { display: block }
.ds-mp-year { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem }
.ds-mp-year b { font-size: var(--fs-14); font-weight: 700 }
.ds-mp-nav { background: none; border: 1px solid var(--gray-200); border-radius: var(--r-sm);
  width: 26px; height: 26px; cursor: pointer; color: var(--gray-700); line-height: 1 }
.ds-mp-nav:disabled { opacity: .35; cursor: default }
.ds-mp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem }
.ds-mp-m { border: 1px solid transparent; background: var(--gray-50); border-radius: var(--r-sm);
  padding: .4rem 0; font-size: var(--fs-12); font-weight: 600; color: var(--gray-700); cursor: pointer; font-family: inherit }
.ds-mp-m:hover:not(.off) { background: var(--gray-100) }
.ds-mp-m.ativo { background: var(--brand); color: #fff; border-color: var(--brand) }
.ds-mp-m.foco { outline: 2px solid var(--brand); outline-offset: 1px }
.ds-mp-m.off { opacity: .3; cursor: default }