/* ===========================================================================
   Skin "Nova" — pele repaginada, aplicada ao sistema TODO.

   Dois eixos independentes, espelhando o mecanismo data-theme:
     body[data-skin="nova"]                    → liga a pele
     body[data-skin="nova"][data-accent="..."] → cor primária (vermelho | ambar)
     body[data-skin="nova"][data-theme="dark"] → variação escura dos tokens

   ADITIVO e REVERSÍVEL: nada aqui se aplica sem body[data-skin="nova"] — o tema
   clássico continua 100% intacto (style.css não é tocado). Só altera cores,
   tokens, fontes, bordas, sombras e a estética dos componentes — NUNCA o layout
   (sem width/height, margin/padding, display/flex/grid de layout), exceto a
   rolagem horizontal explícita das abas/filtros (PASSO 6) e, no mobile, apenas
   font-size. Carregada DEPOIS de style.css, então vence na cascata.
   =========================================================================== */

/* ---------- PASSO 1 — Fontes (só sob a skin nova) ---------- */
body[data-skin="nova"] {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
}
body[data-skin="nova"] .module-title,
body[data-skin="nova"] .card-title,
body[data-skin="nova"] .modal-title,
body[data-skin="nova"] .page-title,
body[data-skin="nova"] .content h1,
body[data-skin="nova"] .content h2,
body[data-skin="nova"] .content h3 {
  font-family: "Space Grotesk", system-ui, sans-serif;
}
/* Rótulos/contadores/datas que já usam monospace (ex.: número aamm-XXX) */
body[data-skin="nova"] [style*="monospace"] {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

/* ---------- PASSO 2 — Tokens da pele (claro padrão; escuro sobrescreve) ---------- */
body[data-skin="nova"] {
  --radius: 13px;
  --bg: #E7ECF1;
  --bg-elevated: #FFFFFF;
  --bg-elevated-2: #EDF0F3;
  --border: #D3DBE4;
  --text: #16202E;
  --text-muted: #6B7787;
  --shadow: 0 18px 40px -30px rgba(22, 32, 46, .4);
  --sol-grid-line: #DEE5EC;
  --accent-tint: rgba(206, 139, 58, .14); /* fallback (âmbar) — sobrescrito por data-accent */
}
body[data-skin="nova"][data-theme="dark"] {
  --bg: #141A22;
  --bg-elevated: #1C232D;
  --bg-elevated-2: #232C37;
  --border: #2B3440;
  --text: #EEF2F6;
  --text-muted: #8A94A2;
  --sol-grid-line: rgba(255, 255, 255, .05);
}

/* ---------- PASSO 3 — Acento (eixo data-accent) ---------- */
/* Quase tudo usa var(--accent), então botões, nav ativo, foco, etc. seguem só. */
body[data-skin="nova"][data-accent="vermelho"] { --accent: #E1332A; --accent-tint: rgba(225, 51, 42, .14); }
body[data-skin="nova"][data-accent="vermelho"][data-theme="dark"] { --accent: #F0554C; --accent-tint: rgba(240, 85, 76, .16); }
body[data-skin="nova"][data-accent="ambar"]    { --accent: #CE8B3A; --accent-tint: rgba(206, 139, 58, .14); }
body[data-skin="nova"][data-accent="ambar"][data-theme="dark"]    { --accent: #E0A253; --accent-tint: rgba(224, 162, 83, .16); }

/* ---------- PASSO 4 — Fundo quadriculado global ---------- */
body[data-skin="nova"] .content {
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--sol-grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--sol-grid-line) 1px, transparent 1px);
  background-size: 32px 32px;
}
/* O módulo Solicitações já desenha o próprio grid em .sol-inbox; sob a nova pele
   deixamos transparente para não duplicar (o grid global do .content aparece). */
body[data-skin="nova"] .sol-inbox { background: transparent; }

/* ---------- PASSO 5 — Componentes (só estética) ---------- */
/* Cards com raio maior e leve elevação no hover (box-shadow/transform não afetam
   o fluxo do layout). */
body[data-skin="nova"] .prop-card,
body[data-skin="nova"] .oport-card,
body[data-skin="nova"] .list-item,
body[data-skin="nova"] .form-card {
  border-radius: 16px;
}
/* Elevação sutil no hover dos cards NÃO deslizáveis (sem transform, para não
   deslocar o card nem conflitar com o translateX do swipe). */
body[data-skin="nova"] .oport-card:hover,
body[data-skin="nova"] .prop-card:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 24px -16px rgba(0, 0, 0, .45);
}

/* --- Correção do swipe: nada de borda de acento "vazando" atrás do card ------
   A camada de trás (.swipe-row) recebe o MESMO raio dos cards (16px) e não tem
   borda visível; o card da frente (.swipe-content.list-item) cobre a camada de
   trás totalmente (mesmo raio, sem deslocamento). No hover/aberto, o realce é
   INTERNO (anel inset + leve mudança de fundo herdada), nunca uma borda de
   acento externa maior que o card. */
body[data-skin="nova"] .swipe-row { border-radius: 16px; }
body[data-skin="nova"] .swipe-content.list-item:hover {
  border-color: var(--border);
  box-shadow: inset 0 0 0 2px var(--accent-tint);
}

/* Modal com raio maior. */
body[data-skin="nova"] .modal-box { border-radius: 16px; }

/* Badges/chips: chips neutros em cinza. O badge-info ("Em contato") NÃO segue o
   acento — é um status semântico e deve ficar SEMPRE azul (fixo), inclusive no
   tema vermelho, onde vermelho é reservado a "perdida"/erro. */
body[data-skin="nova"] .badge-info { background: rgba(79,140,255,0.15); color: var(--sem-info); }
body[data-skin="nova"] .chip { background: rgba(120, 130, 145, .16); border-color: transparent; }
body[data-skin="nova"] .chip.active { background: var(--accent-tint); border-color: var(--accent); color: var(--accent); }

/* Inputs: raio via --radius (já herdado) + anel de foco no acento. */
body[data-skin="nova"] .search-box input:focus,
body[data-skin="nova"] .form-group input:focus,
body[data-skin="nova"] .form-group textarea:focus,
body[data-skin="nova"] .form-group select:focus,
body[data-skin="nova"] .tipo-add-row input:focus,
body[data-skin="nova"] .ambiente-custom-row input:focus,
body[data-skin="nova"] .select-filter:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}

/* ---------- PASSO 6 — Abas/filtros em pílula com ROLAGEM horizontal ---------- */
/* Nunca quebram linha: rolam para a direita numa única linha (como no clássico). */
body[data-skin="nova"] .tabs,
body[data-skin="nova"] .oport-status-chips {
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
body[data-skin="nova"] .tabs::-webkit-scrollbar,
body[data-skin="nova"] .oport-status-chips::-webkit-scrollbar { display: none; }

body[data-skin="nova"] .tabs { border-bottom: none; }
body[data-skin="nova"] .tab {
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
}
body[data-skin="nova"] .tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-text);
}
/* Chips de status: mantêm a cor semântica por status (--cor); só não quebram. */
body[data-skin="nova"] .oport-status-chip { flex: 0 0 auto; }

/* ---------- Contraste de blocos sobre o fundo quadriculado ---------------------
   Vários blocos usavam var(--surface) / var(--bg-input) (indefinidos → viravam
   transparentes) ou cinza fixo e "sumiam"/ficavam confusos sobre o grid. Definir
   esses tokens SÓ na skin nova dá a eles fundo SÓLIDO do tema (respeitando
   claro/escuro, pois --bg-elevated* já são tema-aware), sem mexer no layout.
   Cobre: bloco "Dados para emissão de NF", "Plano original" (faixa + <pre>),
   chips/badges internos de parcela, cabeçalhos de grupo e selects. */
body[data-skin="nova"] {
  --surface: var(--bg-elevated);      /* cards/blocos internos (nível de card) */
  --surface-2: var(--bg-elevated-2);
  --bg-input: var(--bg-elevated-2);   /* faixas internas / selects (nível destacado) */
}

/* Barra de progresso "Recebido" (financeiro): trilho sólido do tema + preenchimento
   SEMPRE no verde de sucesso (fixo, independente do acento) — assim "100% recebido"
   nunca parece erro/alerta, mesmo sob o tema vermelho. */
body[data-skin="nova"] .progress-recebido { background: var(--bg-elevated-2) !important; }
body[data-skin="nova"] .progress-recebido-fill { background: var(--sem-success) !important; }