/**
 * Nexora Tecnologia — Tema Oficial e Design System Unificado v4.0
 * Soft UI & Executive Experience: Transições ultra suaves, sem contrastes agressivos
 * Cobertura Dual: Modo Escuro (Midnight Slate Suave) & Modo Claro (Executive Clean Suave)
 * WCAG AAA Compliance com ergonomia visual de alto padrão
 */

/* ==========================================================================
   1. VARIÁVEIS & TOKENS DE DESIGN SUAVES
   ========================================================================== */
:root {
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', SFMono-Regular, Consolas, monospace;
  --font-serif: 'Playfair Display', Georgia, serif;

  /* Modo Escuro Suave (Padrão) */
  --nx-cyan: #38BDF8;
  --nx-cyan-deep: #0284C7;
  --nx-cyan-glow: rgba(56, 189, 248, 0.2);
  --nx-bg: #0C1017;
  --nx-surface: #141B29;
  --nx-surface-hover: #1A2335;
  --nx-border: rgba(255, 255, 255, 0.08);
  --nx-text: #F1F5F9;
  --nx-text-soft: #94A3B8;
  --nx-text-mute: #64748B;
  --nx-card-bg: rgba(20, 27, 41, 0.78);

  /* Status Suaves (Modo Escuro) */
  --nx-pass-bg: rgba(16, 185, 129, 0.14);
  --nx-pass-text: #34D399;
  --nx-pass-border: rgba(16, 185, 129, 0.28);

  --nx-warn-bg: rgba(245, 158, 11, 0.14);
  --nx-warn-text: #FBBF24;
  --nx-warn-border: rgba(245, 158, 11, 0.28);

  --nx-fail-bg: rgba(239, 68, 68, 0.14);
  --nx-fail-text: #F87171;
  --nx-fail-border: rgba(239, 68, 68, 0.28);

  --nx-neutral-bg: rgba(148, 163, 184, 0.12);
  --nx-neutral-text: #94A3B8;
  --nx-neutral-border: rgba(148, 163, 184, 0.2);
}

/* Modo Claro Suave (Executive Clean) */
html[data-theme="light"],
html.light-theme,
[data-theme="light"] {
  --nx-cyan: #0284C7;
  --nx-cyan-deep: #0369A1;
  --nx-cyan-glow: rgba(2, 132, 199, 0.12);
  --nx-bg: #F8FAFC;
  --nx-surface: #FFFFFF;
  --nx-surface-hover: #F1F5F9;
  --nx-border: #E2E8F0;
  --nx-text: #0F172A;
  --nx-text-soft: #334155;
  --nx-text-mute: #64748B;
  --nx-card-bg: #FFFFFF;

  /* Status Suaves (Modo Claro) */
  --nx-pass-bg: rgba(16, 185, 129, 0.1);
  --nx-pass-text: #059669;
  --nx-pass-border: rgba(16, 185, 129, 0.22);

  --nx-warn-bg: rgba(245, 158, 11, 0.1);
  --nx-warn-text: #D97706;
  --nx-warn-border: rgba(245, 158, 11, 0.22);

  --nx-fail-bg: rgba(239, 68, 68, 0.1);
  --nx-fail-text: #DC2626;
  --nx-fail-border: rgba(239, 68, 68, 0.22);

  --nx-neutral-bg: rgba(148, 163, 184, 0.1);
  --nx-neutral-text: #475569;
  --nx-neutral-border: rgba(148, 163, 184, 0.22);

  /* Variáveis utilitárias do Astro/Tailwind */
  --color-paper: #FFFFFF !important;
  --color-ink: #0F172A !important;
  --color-ink-soft: #334155 !important;
  --color-ink-mute: #64748B !important;
  --color-rail: #E2E8F0 !important;
  --color-pass: #0284C7 !important;
  --color-pass-deep: #0284C7 !important;
  --color-pass-wash: #F0FDF4 !important;
}

/* ==========================================================================
   2. REGRAS GERAIS & RESPIRO DE LAYOUT
   ========================================================================== */
body {
  font-family: var(--font-sans) !important;
  min-height: 100vh;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Respiro essencial para evitar qualquer sobreposição da navbar */
#main-content,
.site-main {
  padding-top: 100px !important;
}

/* Ocultar banners intrusivos legados */
astro-island[component-url*="CookieConsentManager"],
.cookie-banner,
#cookie-banner,
[class*="cookie"] {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ==========================================================================
   3. MODO ESCURO — MIDNIGHT SLATE SUAVE (PADRÃO)
   ========================================================================== */
html:not([data-theme="light"]) body,
html.dark-theme body,
[data-theme="dark"] body {
  background-color: #0C1017 !important;
  color: #F1F5F9 !important;
  background-image: 
    radial-gradient(circle at 20% 8%, rgba(56, 189, 248, 0.05) 0%, transparent 40%),
    radial-gradient(circle at 80% 35%, rgba(2, 132, 199, 0.04) 0%, transparent 45%),
    radial-gradient(circle at 50% 85%, rgba(56, 189, 248, 0.03) 0%, transparent 50%) !important;
  background-attachment: fixed !important;
}

/* Modo Escuro: Cards e Painéis Suaves com Glassmorphism */
html:not([data-theme="light"]) .bg-white,
html:not([data-theme="light"]) .bg-paper,
html:not([data-theme="light"]) .nx-card,
html:not([data-theme="light"]) .nx-pillar-item,
html:not([data-theme="light"]) [class*="rounded-[4px]"].bg-white,
html.dark-theme .bg-white,
html.dark-theme .bg-paper,
html.dark-theme .nx-card {
  background: rgba(20, 27, 41, 0.8) !important;
  backdrop-filter: blur(14px) !important;
  -webkit-backdrop-filter: blur(14px) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  border-radius: 14px !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.35), 0 4px 10px -2px rgba(0, 0, 0, 0.2) !important;
  color: #F1F5F9 !important;
}

html:not([data-theme="light"]) .border-rail,
html.dark-theme .border-rail {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html:not([data-theme="light"]) .bg-rail,
html.dark-theme .bg-rail {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

html:not([data-theme="light"]) .text-ink,
html.dark-theme .text-ink {
  color: #F1F5F9 !important;
}

html:not([data-theme="light"]) .text-ink-soft,
html.dark-theme .text-ink-soft {
  color: #94A3B8 !important;
}

html:not([data-theme="light"]) .text-ink-mute,
html.dark-theme .text-ink-mute {
  color: #64748B !important;
}

/* ==========================================================================
   4. MODO CLARO — EXECUTIVE CLEAN SUAVE (WCAG AAA)
   ========================================================================== */
html[data-theme="light"] body,
html.light-theme body,
[data-theme="light"] body {
  background-color: #F8FAFC !important;
  color: #0F172A !important;
  background-image: 
    radial-gradient(circle at 18% 10%, rgba(2, 132, 199, 0.03) 0%, transparent 40%),
    radial-gradient(circle at 82% 40%, rgba(14, 165, 233, 0.02) 0%, transparent 45%) !important;
  background-attachment: fixed !important;
}

/* Modo Claro: Cards e Painéis Suaves */
[data-theme="light"] .bg-white,
html.light-theme .bg-white,
[data-theme="light"] .bg-paper,
html.light-theme .bg-paper,
[data-theme="light"] .nx-card,
html.light-theme .nx-card,
[data-theme="light"] .nx-pillar-item,
html.light-theme .nx-pillar-item,
[data-theme="light"] [class*="rounded-[4px]"].bg-white,
html.light-theme [class*="rounded-[4px]"].bg-white {
  background: #FFFFFF !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 4px 20px -2px rgba(15, 23, 42, 0.04), 0 2px 6px -1px rgba(15, 23, 42, 0.02) !important;
  color: #0F172A !important;
}

[data-theme="light"] .border-rail,
html.light-theme .border-rail,
[data-theme="light"] .divide-rail,
html.light-theme .divide-rail {
  border-color: #E2E8F0 !important;
}

[data-theme="light"] .bg-rail,
html.light-theme .bg-rail {
  background-color: #F1F5F9 !important;
}

/* Modo Claro: Cabeçalho do Relatório */
[data-theme="light"] div[class*="border-b"][class*="border-rail"],
html.light-theme div[class*="border-b"][class*="border-rail"] {
  background: #F8FAFC !important;
  border-bottom: 1px solid #E2E8F0 !important;
}

/* Modo Claro: Tipografia Suave */
[data-theme="light"] h1,
html.light-theme h1,
[data-theme="light"] h2,
html.light-theme h2,
[data-theme="light"] h3,
html.light-theme h3,
[data-theme="light"] h4,
html.light-theme h4,
[data-theme="light"] .text-ink,
html.light-theme .text-ink {
  color: #0F172A !important;
  text-shadow: none !important;
}

[data-theme="light"] .text-ink-soft,
html.light-theme .text-ink-soft,
[data-theme="light"] p,
html.light-theme p {
  color: #334155 !important;
}

[data-theme="light"] .text-ink-mute,
html.light-theme .text-ink-mute {
  color: #64748B !important;
}

/* ==========================================================================
   5. BADGES & CHIPS REFINADOS (SOFT PILLS — FIM DO ALTO CONTRASTE DURO)
   ========================================================================== */
/* Regra base para todos os badges e chips de status */
span[class*="rounded-[2px]"],
span[class*="rounded-[4px]"],
span.nx-badge,
.nx-badge {
  border-radius: 9999px !important;
  font-family: var(--font-sans) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  padding: 3px 9px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
  transition: all 0.2s ease !important;
}

/* --- BADGE CRÍTICO / FALHA (SUAVE) --- */
html:not([data-theme="light"]) .bg-fail-wash,
html:not([data-theme="light"]) span[class*="bg-fail-wash"],
html.dark-theme .bg-fail-wash {
  background-color: var(--nx-fail-bg) !important;
  color: var(--nx-fail-text) !important;
  border: 1px solid var(--nx-fail-border) !important;
}

[data-theme="light"] .bg-fail-wash,
[data-theme="light"] span[class*="bg-fail-wash"],
html.light-theme .bg-fail-wash {
  background-color: var(--nx-fail-bg) !important;
  color: var(--nx-fail-text) !important;
  border: 1px solid var(--nx-fail-border) !important;
}

/* --- BADGE BOM / APROVADO / EXCELENTE (SUAVE) --- */
html:not([data-theme="light"]) .bg-pass-wash,
html:not([data-theme="light"]) span[class*="bg-pass-wash"],
html.dark-theme .bg-pass-wash {
  background-color: var(--nx-pass-bg) !important;
  color: var(--nx-pass-text) !important;
  border: 1px solid var(--nx-pass-border) !important;
}

[data-theme="light"] .bg-pass-wash,
[data-theme="light"] span[class*="bg-pass-wash"],
html.light-theme .bg-pass-wash {
  background-color: var(--nx-pass-bg) !important;
  color: var(--nx-pass-text) !important;
  border: 1px solid var(--nx-pass-border) !important;
}

/* --- BADGE FUNDAÇÃO / ALERTA / ATENÇÃO (SUAVE) --- */
html:not([data-theme="light"]) .bg-warn-wash,
html:not([data-theme="light"]) span[class*="bg-warn-wash"],
html.dark-theme .bg-warn-wash {
  background-color: var(--nx-warn-bg) !important;
  color: var(--nx-warn-text) !important;
  border: 1px solid var(--nx-warn-border) !important;
}

[data-theme="light"] .bg-warn-wash,
[data-theme="light"] span[class*="bg-warn-wash"],
html.light-theme .bg-warn-wash {
  background-color: var(--nx-warn-bg) !important;
  color: var(--nx-warn-text) !important;
  border: 1px solid var(--nx-warn-border) !important;
}

/* --- BADGE MÉDIO / RECOMENDAÇÕES (SUAVE) --- */
span.nx-badge-medium,
.nx-badge-medium,
td span[class*="font-mono"][class*="rounded"] {
  border-radius: 9999px !important;
  padding: 2.5px 8px !important;
}

html:not([data-theme="light"]) span.nx-badge-medium,
html:not([data-theme="light"]) td span[class*="font-mono"][class*="rounded"] {
  background-color: var(--nx-neutral-bg) !important;
  color: var(--nx-neutral-text) !important;
  border: 1px solid var(--nx-neutral-border) !important;
}

[data-theme="light"] span.nx-badge-medium,
[data-theme="light"] td span[class*="font-mono"][class*="rounded"],
html.light-theme span.nx-badge-medium {
  background-color: var(--nx-neutral-bg) !important;
  color: var(--nx-neutral-text) !important;
  border: 1px solid var(--nx-neutral-border) !important;
}

/* ==========================================================================
   6. CARDS DE CATEGORIA (8 PILARES) — FIM DO TRUNCAMENTO & HARMONIA
   ========================================================================== */
/* Remover truncamento em títulos de categorias */
.grid.lg\:grid-cols-4 > div,
.grid.sm\:grid-cols-2 > div {
  padding: 18px !important;
  border-radius: 14px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.grid.lg\:grid-cols-4 > div:hover,
.grid.sm\:grid-cols-2 > div:hover {
  transform: translateY(-2px) !important;
}

/* Impedir que nomes como "Schema JSON-LD" sejam truncados */
.grid.lg\:grid-cols-4 > div h3,
.grid.lg\:grid-cols-4 > div span[class*="truncate"],
.grid.sm\:grid-cols-2 > div span[class*="truncate"],
.grid.lg\:grid-cols-4 > div [class*="truncate"] {
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
  word-break: break-word !important;
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
}

/* Indicadores de lista dentro das categorias */
.grid.lg\:grid-cols-4 > div ul li,
.grid.sm\:grid-cols-2 > div ul li {
  font-size: 12px !important;
  line-height: 1.45 !important;
  padding: 3px 0 !important;
}

/* ==========================================================================
   7. SINAIS TÉCNICOS & RECOMENDAÇÕES — TABELA SUAVE E ERGONÔMICA
   ========================================================================== */
div[class*="divide-y"] > div {
  padding: 14px 18px !important;
  transition: background-color 0.15s ease !important;
}

html:not([data-theme="light"]) div[class*="divide-y"] > div {
  border-color: rgba(255, 255, 255, 0.05) !important;
}

html:not([data-theme="light"]) div[class*="divide-y"] > div:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

[data-theme="light"] div[class*="divide-y"] > div,
html.light-theme div[class*="divide-y"] > div {
  border-color: #F1F5F9 !important;
}

[data-theme="light"] div[class*="divide-y"] > div:hover,
html.light-theme div[class*="divide-y"] > div:hover {
  background-color: #F8FAFC !important;
}

/* ==========================================================================
   8. CARD DE SCORE (34 / 100) & TRILHOS DE PROGRESSO
   ========================================================================== */
.font-head.text-4xl,
.font-head.text-5xl,
[class*="text-4xl"].font-extrabold {
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* Trilho de progresso suave */
div[class*="bg-paper"],
.h-1.overflow-hidden,
.h-2.overflow-hidden,
.h-2\.5.overflow-hidden {
  border-radius: 9999px !important;
  overflow: hidden !important;
}

html:not([data-theme="light"]) div[class*="bg-paper"],
html:not([data-theme="light"]) .h-1.overflow-hidden,
html:not([data-theme="light"]) .h-2\.5.overflow-hidden {
  background-color: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="light"] div[class*="bg-paper"],
[data-theme="light"] .h-1.overflow-hidden,
[data-theme="light"] .h-2\.5.overflow-hidden,
html.light-theme div[class*="bg-paper"] {
  background-color: #E2E8F0 !important;
}

/* ==========================================================================
   9. BANNER PLANO DE AÇÃO & CONVERSÃO NEXORA (SUAVE E ELEGANTE)
   ========================================================================== */
section.overflow-hidden.border-pass\/50,
section[class*="bg-pass-wash"] {
  border-radius: 16px !important;
  transition: all 0.25s ease !important;
}

/* Modo Escuro: Banner de Ação Nobre */
html:not([data-theme="light"]) section.overflow-hidden.border-pass\/50,
html:not([data-theme="light"]) section[class*="bg-pass-wash"] {
  background: linear-gradient(145deg, rgba(14, 28, 40, 0.85) 0%, rgba(10, 20, 30, 0.92) 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.25) !important;
  box-shadow: 0 16px 40px -10px rgba(0, 0, 0, 0.5), 0 0 25px rgba(56, 189, 248, 0.08) !important;
}

html:not([data-theme="light"]) section.overflow-hidden.border-pass\/50 ul li {
  background: rgba(12, 22, 32, 0.7) !important;
  border: 1px solid rgba(56, 189, 248, 0.15) !important;
  border-radius: 10px !important;
  color: #E2E8F0 !important;
}

/* Modo Claro: Banner de Ação Clean */
[data-theme="light"] section.overflow-hidden.border-pass\/50,
[data-theme="light"] section[class*="bg-pass-wash"],
html.light-theme section.overflow-hidden.border-pass\/50 {
  background: #FFFFFF !important;
  border: 1px solid #E2E8F0 !important;
  box-shadow: 0 10px 30px -4px rgba(15, 23, 42, 0.05) !important;
}

[data-theme="light"] section.overflow-hidden.border-pass\/50 ul li,
html.light-theme section.overflow-hidden.border-pass\/50 ul li {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  border-radius: 10px !important;
  color: #1E293B !important;
}

/* ==========================================================================
   10. BOTÕES CTA PRIMÁRIOS E SECUNDÁRIOS NEXORA (ERGONOMIA SUAVE)
   ========================================================================== */
.nx-cta-btn-primary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  height: 46px !important;
  padding: 0 1.6rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9rem !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, #0EA5E9 0%, #0284C7 100%) !important;
  color: #FFFFFF !important;
  box-shadow: 0 4px 16px rgba(14, 165, 233, 0.3) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  border: none !important;
}

.nx-cta-btn-primary:hover {
  transform: translateY(-1.5px) !important;
  box-shadow: 0 8px 24px rgba(14, 165, 233, 0.45) !important;
  filter: brightness(1.05) !important;
}

.nx-cta-btn-secondary {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  height: 46px !important;
  padding: 0 1.6rem !important;
  font-family: var(--font-sans) !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  color: #F1F5F9 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.nx-cta-btn-secondary:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(56, 189, 248, 0.5) !important;
  color: #38BDF8 !important;
}

[data-theme="light"] .nx-cta-btn-secondary,
html.light-theme .nx-cta-btn-secondary {
  background: #FFFFFF !important;
  border: 1px solid #CBD5E1 !important;
  color: #1E293B !important;
}

[data-theme="light"] .nx-cta-btn-secondary:hover,
html.light-theme .nx-cta-btn-secondary:hover {
  background: #F8FAFC !important;
  border-color: #0284C7 !important;
  color: #0284C7 !important;
}

/* Botões de Exportação (PDF, JSON, Copiar Link) */
a[href*="/audit/pdf"],
a[href*="format=json"],
.nx-export-btn,
button[class*="text-ink"] {
  border-radius: 8px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
  padding: 8px 14px !important;
  transition: all 0.2s ease !important;
}

html:not([data-theme="light"]) a[href*="/audit/pdf"],
html:not([data-theme="light"]) a[href*="format=json"],
html:not([data-theme="light"]) .nx-export-btn {
  background: rgba(20, 27, 41, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  color: #E2E8F0 !important;
}

html:not([data-theme="light"]) a[href*="/audit/pdf"]:hover,
html:not([data-theme="light"]) a[href*="format=json"]:hover {
  background: rgba(30, 41, 59, 0.95) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
  color: #38BDF8 !important;
}

[data-theme="light"] a[href*="/audit/pdf"],
[data-theme="light"] a[href*="format=json"],
[data-theme="light"] .nx-export-btn,
html.light-theme a[href*="/audit/pdf"] {
  background: #F8FAFC !important;
  border: 1px solid #E2E8F0 !important;
  color: #334155 !important;
}

[data-theme="light"] a[href*="/audit/pdf"]:hover,
[data-theme="light"] a[href*="format=json"]:hover,
html.light-theme a[href*="/audit/pdf"]:hover {
  background: #F1F5F9 !important;
  border-color: #0284C7 !important;
  color: #0284C7 !important;
}

/* ==========================================================================
   11. TÍTULO SUAVE (AUDITOR GEO & AEO INTELIGENTE)
   ========================================================================== */
.nx-hero-highlight,
h1 span[style*="00D9FF"],
h1 span[style*="#00D9FF"] {
  font-style: normal !important;
  font-weight: 800 !important;
  background: linear-gradient(135deg, #38BDF8 0%, #0284C7 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  display: inline-block !important;
}

[data-theme="light"] .nx-hero-highlight,
[data-theme="light"] h1 span[style*="00D9FF"],
[data-theme="light"] h1 span[style*="#00D9FF"],
html.light-theme h1 span[style*="00D9FF"] {
  background: linear-gradient(135deg, #0284C7 0%, #0369A1 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}