/* ============================================================================
   SOFTAPP SUITE — CAMADA VISUAL COMPARTILHADA
   Padrão visual e estrutural do SoftAppVR 2.0 (frontend/shared/*).
   Carregar DEPOIS do <style> inline de cada página: este arquivo redefine os
   tokens locais (--bg, --gold, --s1…) a partir dos tokens canônicos --ds-*,
   re-tematizando as páginas sem reescrevê-las.
   Inclui: componentes .ds-*, correções tablet (T-02/T-03/T-05/T-06/T-07)
   e elementos do núcleo (toasts, progresso, srv-dot).
   ============================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Syne:wght@600;700;800&family=DM+Mono:wght@400;500&display=swap");

/* ---- TOKENS CANÔNICOS (idênticos ao VR 2.0 — shared/variables.css) ------- */
:root {
  --ds-primary:        #7C6FFF;
  --ds-primary-hover:  #A99FFF;
  --ds-primary-bg:     rgba(124,111,255,0.10);
  --ds-primary-bg-2:   rgba(124,111,255,0.18);
  --ds-secondary:      #2DD4BF;
  --ds-secondary-bg:   rgba(45,212,191,0.10);
  --ds-bg:             #09090B;
  --ds-surface-1:      #111114;
  --ds-surface-2:      #17171B;
  --ds-surface-3:      #1E1E23;
  --ds-border-1:       rgba(255,255,255,0.07);
  --ds-border-2:       rgba(255,255,255,0.13);
  --ds-border-3:       rgba(255,255,255,0.20);
  --ds-text-1:         #F0F0F2;
  --ds-text-2:         #9098A8;
  --ds-text-3:         #6B7280;
  --ds-success:        #22C55E;
  --ds-success-bg:     rgba(34,197,94,0.10);
  --ds-warning:        #F5A623;
  --ds-warning-bg:     rgba(245,166,35,0.10);
  --ds-danger:         #EF4444;
  --ds-danger-bg:      rgba(239,68,68,0.10);
  --ds-info:           #4D9FFF;
  --ds-info-bg:        rgba(77,159,255,0.10);
  --ds-font-display:   'Syne', sans-serif;
  --ds-font-body:      'DM Sans', sans-serif;
  --ds-font-mono:      'DM Mono', monospace;
  --ds-fs-xs: 12px; --ds-fs-sm: 14px; --ds-fs-md: 16px; --ds-fs-lg: 18px;
  --ds-fs-xl: 22px; --ds-fs-2xl: 28px; --ds-fs-3xl: 36px;
  --ds-fw-regular: 400; --ds-fw-medium: 500; --ds-fw-bold: 700;
  --ds-radius: 10px; --ds-radius-lg: 12px; --ds-radius-pill: 999px;
  --ds-shadow-sm: 0 1px 3px rgba(0,0,0,0.30);
  --ds-shadow-md: 0 6px 20px rgba(0,0,0,0.40);
  --ds-shadow-lg: 0 16px 48px rgba(0,0,0,0.55);
  --ds-transition: all .15s ease;
}

/* ---- REMAPEAMENTO dos tokens locais das páginas da Suite ------------------
   (mesmos nomes usados em dashboard/studio/radar/validation/market-library)
   Escopo: SOMENTE o tema escuro (padrão). Os temas "light" e "contrast" das
   páginas continuam com suas paletas próprias — alternância preservada. */
html:not([data-theme="light"]):not([data-theme="contrast"]) {
  --bg:          var(--ds-bg);
  --s1:          var(--ds-surface-1);
  --s2:          var(--ds-surface-2);
  --s3:          var(--ds-surface-3);
  --s4:          #25252B;
  --text:        var(--ds-text-1);
  --muted:       var(--ds-text-2);
  --muted2:      var(--ds-text-3);
  --border:      var(--ds-border-1);
  --border2:     var(--ds-border-2);
  --gold:        var(--ds-primary);
  --gold2:       var(--ds-primary-hover);
  --on-gold:     #FFFFFF;
  --green:       var(--ds-success);
  --red:         var(--ds-danger);
  --blue:        var(--ds-info);
  --purple:      var(--ds-primary);
  --yellow:      var(--ds-warning);
  --orange:      var(--ds-warning);
  --lime:        var(--ds-secondary);
  --teal:        var(--ds-secondary);
  --radius:      var(--ds-radius);
  --radius2:     var(--ds-radius-lg);
  --hdr-bg:      rgba(17,17,20,0.92);
  --card-shadow: var(--ds-shadow-md);
  --mono:        var(--ds-font-mono);
}

/* ---- Tipografia display: Cormorant (serif) → Syne (padrão VR) ------------ */
h1, h2, h3, .logo, .card-value, .login-box h2, .hdr-brand {
  font-family: var(--ds-font-display);
  font-weight: 600;
}
.logo { letter-spacing: .06em; font-weight: 700; }

/* ---- Unificação tipográfica do CHROME administrativo (padronização VR) ----
   As páginas da Suite ainda declaravam Cormorant (serif) em vários números/
   títulos de display — gerando a mistura serif×Syne na MESMA tela (sensação de
   "dois dashboards"). Aqui todo o chrome passa a Syne. Os seletores cobrem
   especificidade ≥ à da página e este arquivo carrega depois → vence sem
   !important. ESCOPO: apenas a interface administrativa.
   NÃO inclui o gerador de templates do Studio (a fonte "Elegante"/Cormorant é
   escolha do cliente para as landing pages publicadas — saída do produto). */
.deal-value, .funnel-val, .camp-rank, .camp-rev, .flow-val,        /* dashboard */
.page-title, .temp-val, .card-nome, .state-title, .modal-temp-val, /* radar */
.modal-nome, .breakdown-total-val, .stat-box-val, .camp-modal-title,
.stat-item-val, .td-temp, .comp-rank, .comp-temp, .empty-title,    /* validation */
.load-txt,                                                         /* studio chrome */
.modal h3, .auth-modal h3, .camp-modal-title, .modal-nome {
  font-family: var(--ds-font-display);
  font-weight: 600;
}
/* normaliza pesos 300 (light, herança Cormorant) para o display Syne legível */
.funnel-val, .flow-val, .temp-val, .stat-item-val, .td-temp,
.comp-temp, .breakdown-total-val, .modal-temp-val { font-weight: 700; }

/* ============================================================================
   COMPONENTES .ds-* (portados 1:1 do VR 2.0 — components/forms/tables.css)
   ============================================================================ */
.ds-card       { background:var(--ds-surface-2); border:1px solid var(--ds-border-1);
                 border-radius:var(--ds-radius-lg); padding:18px; box-shadow:var(--ds-shadow-sm); }
.ds-card__title{ font-family:var(--ds-font-display); font-size:var(--ds-fs-md); font-weight:var(--ds-fw-medium);
                 margin:0 0 12px; color:var(--ds-text-1); }
.ds-kpi        { font-family:var(--ds-font-display); font-size:var(--ds-fs-3xl); font-weight:var(--ds-fw-bold);
                 color:var(--ds-text-1); line-height:1; }
.ds-kpi__label { font-family:var(--ds-font-mono); font-size:var(--ds-fs-xs); text-transform:uppercase;
                 letter-spacing:.04em; color:var(--ds-text-2); margin-bottom:8px; }

.ds-badge      { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:var(--ds-radius-pill);
                 font-size:var(--ds-fs-xs); font-weight:var(--ds-fw-medium); }
.ds-badge--success { background:var(--ds-success-bg); color:var(--ds-success); }
.ds-badge--warning { background:var(--ds-warning-bg); color:var(--ds-warning); }
.ds-badge--danger  { background:var(--ds-danger-bg);  color:var(--ds-danger); }
.ds-badge--info    { background:var(--ds-info-bg);    color:var(--ds-info); }
.ds-badge--neutral { background:var(--ds-surface-3);  color:var(--ds-text-2); }

.ds-alert      { padding:12px 16px; border-radius:var(--ds-radius); border:1px solid var(--ds-border-1);
                 font-size:var(--ds-fs-sm); display:flex; gap:10px; align-items:center; }
.ds-alert--success { background:var(--ds-success-bg); border-color:var(--ds-success); color:var(--ds-success); }
.ds-alert--warning { background:var(--ds-warning-bg); border-color:var(--ds-warning); color:var(--ds-warning); }
.ds-alert--danger  { background:var(--ds-danger-bg);  border-color:var(--ds-danger);  color:var(--ds-danger); }

.ds-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.6); display:flex; align-items:center;
                 justify-content:center; z-index:1000; padding:20px; }
.ds-modal      { background:var(--ds-surface-2); border:1px solid var(--ds-border-2);
                 border-radius:var(--ds-radius-lg); box-shadow:var(--ds-shadow-lg);
                 width:100%; max-width:560px; max-height:90vh; overflow:auto; }
.ds-modal__header { padding:18px 20px; border-bottom:1px solid var(--ds-border-1); display:flex;
                 align-items:center; justify-content:space-between; }
.ds-modal__title  { font-family:var(--ds-font-display); font-size:var(--ds-fs-lg); margin:0; }
.ds-modal__body   { padding:20px; }
.ds-modal__footer { padding:16px 20px; border-top:1px solid var(--ds-border-1); display:flex;
                 gap:10px; justify-content:flex-end; }

.ds-chip       { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:var(--ds-radius-pill);
                 background:var(--ds-surface-3); color:var(--ds-text-2); font-size:var(--ds-fs-xs); }

.ds-btn        { display:inline-flex; align-items:center; justify-content:center; gap:8px;
                 padding:9px 16px; border:1px solid transparent; border-radius:var(--ds-radius);
                 font-family:var(--ds-font-body); font-size:var(--ds-fs-sm); font-weight:var(--ds-fw-medium);
                 cursor:pointer; transition:var(--ds-transition); line-height:1; }
.ds-btn--primary    { background:var(--ds-primary); color:#fff; }
.ds-btn--primary:hover { background:var(--ds-primary-hover); }
.ds-btn--ghost      { background:transparent; color:var(--ds-text-2); border-color:var(--ds-border-2); }
.ds-btn--ghost:hover{ color:var(--ds-text-1); border-color:var(--ds-border-3); background:var(--ds-surface-2); }
.ds-btn--danger     { background:var(--ds-danger); color:#fff; }
.ds-btn:disabled    { opacity:.5; cursor:not-allowed; }

.ds-label      { display:block; font-size:var(--ds-fs-xs); color:var(--ds-text-2); margin-bottom:6px;
                 font-family:var(--ds-font-mono); text-transform:uppercase; letter-spacing:.04em; }
.ds-input, .ds-select, .ds-textarea {
                 width:100%; padding:9px 12px; background:var(--ds-surface-3);
                 border:1px solid var(--ds-border-1); border-radius:var(--ds-radius);
                 color:var(--ds-text-1); font-family:var(--ds-font-body); font-size:var(--ds-fs-sm);
                 transition:var(--ds-transition); }
.ds-input:focus, .ds-select:focus, .ds-textarea:focus {
                 outline:none; border-color:var(--ds-primary); box-shadow:0 0 0 3px var(--ds-primary-bg); }
.ds-input::placeholder, .ds-textarea::placeholder { color:var(--ds-text-3); }
.ds-textarea   { min-height:96px; resize:vertical; }
.ds-field      { margin-bottom:16px; }
.ds-filters    { display:flex; gap:10px; flex-wrap:wrap; align-items:end; }

.ds-table      { width:100%; border-collapse:collapse; font-size:var(--ds-fs-sm); color:var(--ds-text-1); }
.ds-table thead th {
                 text-align:left; padding:11px 14px; font-family:var(--ds-font-mono);
                 font-size:var(--ds-fs-xs); text-transform:uppercase; letter-spacing:.04em;
                 color:var(--ds-text-2); border-bottom:1px solid var(--ds-border-2); background:var(--ds-surface-1); }
.ds-table tbody td { padding:11px 14px; border-bottom:1px solid var(--ds-border-1); }
.ds-table tbody tr:hover { background:var(--ds-surface-2); }
.ds-table--zebra tbody tr:nth-child(even) { background:rgba(255,255,255,0.02); }
.ds-pagination { display:flex; gap:6px; align-items:center; justify-content:flex-end; margin-top:14px; }
.ds-pagination button { padding:6px 11px; background:var(--ds-surface-2); color:var(--ds-text-2);
                 border:1px solid var(--ds-border-1); border-radius:var(--ds-radius); cursor:pointer; }
.ds-pagination button.is-active { background:var(--ds-primary-bg); color:var(--ds-primary); border-color:var(--ds-primary); }

/* ============================================================================
   ELEMENTOS DO NÚCLEO (suite-core.js)
   ============================================================================ */
#suite-toasts { position:fixed; right:16px; bottom:16px; z-index:4000; display:flex;
                flex-direction:column; gap:8px; max-width:380px; }
.suite-toast  { box-shadow:var(--ds-shadow-md); cursor:pointer; animation:suite-in .2s ease; }
@keyframes suite-in { from { transform:translateY(8px); opacity:0 } to { transform:none; opacity:1 } }
#suite-progress { position:fixed; top:0; left:0; right:0; height:2px; z-index:4001;
                background:linear-gradient(90deg, var(--ds-primary), var(--ds-secondary));
                opacity:0; transition:opacity .25s ease; animation:suite-bar 1.2s linear infinite; background-size:200% 100%; }
@keyframes suite-bar { from { background-position:0 0 } to { background-position:200% 0 } }
.srv-dot { width:8px; height:8px; border-radius:50%; background:var(--ds-success);
           box-shadow:0 0 0 2px var(--ds-success-bg); display:inline-block; margin-left:10px; flex-shrink:0; }
.srv-dot.off { background:var(--ds-danger); box-shadow:0 0 0 2px var(--ds-danger-bg); }

/* ── Controle de luminosidade (suite-core.js) — barra vertical à direita ───── */
#suite-bright { position:fixed; right:10px; top:96px; z-index:3500; display:flex;
                flex-direction:column; align-items:center; gap:7px; padding:10px 7px;
                background:var(--s2,#17171B); border:1px solid var(--border2,rgba(255,255,255,.13));
                border-radius:var(--ds-radius-pill,999px); box-shadow:var(--ds-shadow-md,0 6px 20px rgba(0,0,0,.4)); }
#suite-bright .sb-ic  { font-size:13px; line-height:1; opacity:.85; }
#suite-bright .sb-val { font-family:var(--ds-font-mono,monospace); font-size:10px; color:var(--muted2,#9098A8);
                        min-width:18px; text-align:center; }
#suite-bright-range {
  -webkit-appearance:slider-vertical; appearance:slider-vertical;
  writing-mode:vertical-lr; direction:rtl;            /* ↑ = mais claro */
  width:10px; height:120px; accent-color:var(--gold,#7C6FFF); cursor:pointer; margin:0;
}
@media (pointer:coarse) { /* tablet: alvo maior e mais afastado da borda */
  #suite-bright { right:6px; padding:12px 9px; gap:9px; }
  #suite-bright-range { width:16px; height:150px; }
}
@media (max-width:620px) { #suite-bright { top:auto; bottom:14px; } }

/* Botões ↑/↓ de seção (Studio — T-01, fallback de drag para toque) */
.sec-move { display:flex; flex-direction:column; gap:2px; }
.sec-move-btn { background:var(--s2); border:1px solid var(--border); color:var(--muted);
                border-radius:6px; font-size:9px; line-height:1; padding:3px 6px; cursor:pointer; }
.sec-move-btn:hover:not(:disabled) { color:var(--text); border-color:var(--border2); }
.sec-move-btn:disabled { opacity:.3; cursor:default; }

/* ============================================================================
   CORREÇÕES TABLET (TABLET_COMPATIBILITY.md)
   ============================================================================ */

/* T-05 — tabelas com rolagem horizontal própria em telas estreitas */
@media (max-width: 900px) {
  .tbl { display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; }
}

/* T-02 — Radar Validation: sidebar colapsa e grid vira coluna única
   (classes .app-layout/.sidebar/.stats-row só existem nessa página) */
@media (max-width: 1100px) {
  .app-layout { grid-template-columns: 1fr !important; }
  .app-layout .sidebar { border-right:none; border-bottom:1px solid var(--border); }
  /* header: quebra de linha e e-mail com reticências (evita overflow em portrait) */
  .hdr { flex-wrap: wrap; row-gap: 6px; }
  .hdr-right { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  .user-pill { max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
@media (max-width: 720px) {
  .stats-row { grid-template-columns: 1fr !important; }
}

/* T-03/T-06/T-07 — alvos de toque ≥44px e legibilidade em ponteiro grosso
   (vale para TODAS as páginas, incl. Studio e Validation que não tinham bloco) */
@media (pointer: coarse) {
  button, .btn, .btn-gold, .btn-ghost, .btn-criar, .btn-yellow, .nav-btn,
  .panel-action, .act-btn, .tab, .logout-btn, .theme-btn,
  select, input:not([type=checkbox]):not([type=radio]), .sec-move-btn {
    min-height: 44px;
  }
  .tbl td, .tbl th { padding: 14px 16px; font-size: 12px; }
  .tag-icon-btn, .tag-remove { opacity:.85; min-width:32px; min-height:32px; font-size:12px; }
  .sec-handle { display:none; } /* arrasto HTML5 não funciona no toque — usar ↑/↓ */
}

/* ============================================================================
   REPAGINAÇÃO DOS TEMAS — 2026-06-10 (ordem expressa do usuário)
   Três paletas coloridas/alegres (sem escala de cinza), otimizadas para o
   tablet Samsung Tab S10 FE+ (alto contraste e legibilidade). Carregadas no
   FIM do arquivo (e depois dos <style> inline das páginas) → vencem por ordem.
   Escopo: chrome administrativo de TODAS as páginas que linkam este arquivo
   (dashboard, radar, market-library, validation) → temas consistentes,
   inclusive nos módulos embutidos via iframe.
     Tema 1 "Índigo"  = data-theme padrão (escuro violeta vibrante)
     Tema 2 "Âmbar"   = data-theme="light"    (claro quente, dourado vivo)
     Tema 3 "Oceano"  = data-theme="contrast" (teal vibrante, NÃO mais cinza)
   ROLLBACK: remover este bloco (restaura paletas anteriores intactas acima).
   ============================================================================ */

/* ── Tema 1 · Índigo (escuro, padrão) — refina o remap VR com tinta violeta ── */
html:not([data-theme="light"]):not([data-theme="contrast"]) {
  --bg:#0A0A12; --s1:#121120; --s2:#181626; --s3:#201D30; --s4:#29263C;
  --border:rgba(160,150,255,0.12); --border2:rgba(160,150,255,0.22);
  --gold:#8B7BFF; --gold2:#B5ABFF; --on-gold:#0B0A14;
  --text:#F3F1FB; --muted:#9A93B6; --muted2:#CAC5DE;
  --green:#34D399; --blue:#60A5FA; --red:#FB7185; --purple:#A78BFA;
  --yellow:#FBBF24; --orange:#FB923C; --teal:#2DD4BF; --lime:#A3E635;
  --hdr-bg:rgba(12,11,22,0.92); --card-shadow:0 6px 22px rgba(0,0,0,0.45);
}

/* ── Tema 2 · Âmbar (claro, quente e vivo) ──────────────────────────────────
   html[data-theme] tem especificidade maior que o [data-theme] inline das
   páginas → sobrescreve sem !important. */
html[data-theme="light"] {
  --bg:#FBF7F0; --s1:#FFFFFF; --s2:#FBF6EC; --s3:#F4EAD9; --s4:#EADDC6;
  --border:rgba(124,84,20,0.16); --border2:rgba(124,84,20,0.30);
  --gold:#C27803; --gold2:#E08A0B; --on-gold:#FFFFFF;
  --text:#2A2114; --muted:#7C6A50; --muted2:#4C3D28;
  --green:#15803D; --blue:#1D4ED8; --red:#DC2626; --purple:#7C3AED;
  --yellow:#B45309; --orange:#C2410C; --teal:#0D9488; --lime:#4D7C0F;
  --hdr-bg:rgba(255,253,247,0.95); --card-shadow:0 4px 16px rgba(124,84,20,0.12);
}

/* ── Tema 3 · Oceano (teal vibrante, substitui o antigo cinza de contraste) ── */
html[data-theme="contrast"] {
  --bg:#061A1E; --s1:#0A2429; --s2:#0E2C32; --s3:#13373E; --s4:#1A464E;
  --border:rgba(45,212,191,0.18); --border2:rgba(45,212,191,0.34);
  --gold:#2DD4BF; --gold2:#5EEAD4; --on-gold:#042F2A;
  --text:#EBFBF8; --muted:#86B8B2; --muted2:#C2E8E2;
  --green:#34D399; --blue:#38BDF8; --red:#FB7185; --purple:#C4B5FD;
  --yellow:#FCD34D; --orange:#FDBA74; --teal:#5EEAD4; --lime:#BEF264;
  --hdr-bg:rgba(6,26,30,0.93); --card-shadow:0 6px 22px rgba(0,0,0,0.5);
}

/* Acento da barra de progresso/realces segue a primária de cada tema */
html[data-theme="light"]    #suite-progress,
html[data-theme="contrast"] #suite-progress {
  background:linear-gradient(90deg, var(--gold), var(--gold2));
}