/*
 * ═══════════════════════════════════════════════════════════════════
 *  NOVAOption — Design Tokens v2.0
 *  Archivo: css/nova-tokens.css
 *  Carga: primer <link> en layout/head.php, antes de style.css
 *
 *  USO:  Nunca escribir colores hex directamente en PHP/HTML/CSS.
 *        Siempre usar var(--nova-*).
 *        Un cambio aquí se propaga a toda la plataforma.
 * ═══════════════════════════════════════════════════════════════════
 */

/* ─── MODO CLARO (por defecto) ─────────────────────────────────── */
:root,
[data-theme="light"] {

  /* Tipografía */
  --nova-font:          'Inter', system-ui, -apple-system, sans-serif;
  --nova-font-mono:     'JetBrains Mono', 'Courier New', monospace;

  /* Backgrounds */
  --nova-bg:            #F5F6FA;   /* página exterior */
  --nova-surface:       #FFFFFF;   /* cards, sidebar, header */
  --nova-elevated:      #F9FAFB;   /* filas hover, inputs */
  --nova-overlay:       rgba(0, 0, 0, 0.06);

  /* Bordes */
  --nova-border:        #E5E7EB;   /* borde principal */
  --nova-border-soft:   #F3F4F6;   /* separadores internos */
  --nova-border-strong: #D1D5DB;   /* bordes énfasis */

  /* Texto */
  --nova-text:          #111111;   /* texto principal */
  --nova-text-2:        #374151;   /* texto secundario */
  --nova-text-3:        #6B7280;   /* labels, metadatos */
  --nova-text-4:        #9CA3AF;   /* placeholders, hints */
  --nova-text-inv:      #FFFFFF;   /* texto sobre fondos oscuros */

  /* Marca — extraída del logo NOVAOption */
  --nova-green:         #3DDC6A;   /* verde lima logo (acento +) */
  --nova-green-dark:    #1A7A3C;   /* verde oscuro logo */
  --nova-green-bg:      #D1FAE5;   /* fondo éxito claro */
  --nova-green-text:    #065F46;   /* texto sobre verde-bg */

  --nova-blue:          #1A5FE8;   /* azul royal logo (interactivo) */
  --nova-blue-dark:     #1A2570;   /* azul navy logo */
  --nova-blue-bg:       #EFF6FF;   /* fondo info claro */
  --nova-blue-bg-2:     #EEF2FF;   /* fondo selección/hover */
  --nova-blue-text:     #1D4ED8;   /* texto sobre blue-bg */

  --nova-cyan:          #00D4E8;   /* cyan logo (datos en tiempo real) */

  /* Semánticos */
  --nova-success:       #059669;
  --nova-success-bg:    #D1FAE5;
  --nova-success-text:  #065F46;

  --nova-warning:       #D97706;
  --nova-warning-bg:    #FEF3C7;
  --nova-warning-text:  #92400E;

  --nova-danger:        #DC2626;
  --nova-danger-bg:     #FEE2E2;
  --nova-danger-text:   #991B1B;

  --nova-info:          #1D4ED8;
  --nova-info-bg:       #EFF6FF;
  --nova-info-text:     #1E40AF;

  /* Planes */
  --nova-basic-bg:      #F3F4F6;
  --nova-basic-border:  #E5E7EB;
  --nova-basic-text:    #6B7280;

  --nova-premium-bg:    #EFF6FF;
  --nova-premium-border:#BFDBFE;
  --nova-premium-text:  #1D4ED8;

  --nova-vip-bg:        #EDE9FE;
  --nova-vip-border:    #DDD6FE;
  --nova-vip-text:      #5B21B6;

  /* Radios */
  --nova-r-sm:          6px;
  --nova-r-md:          8px;
  --nova-r-lg:          10px;
  --nova-r-xl:          12px;
  --nova-r-full:        9999px;

  /* Espaciado */
  --nova-sidebar-w:     200px;
  --nova-header-h:      52px;

  /* Sombras */
  --nova-shadow-sm:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --nova-shadow-md:     0 4px 12px rgba(0,0,0,0.08);
  --nova-shadow-dropdown: 0 8px 24px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);

  /* Transiciones */
  --nova-transition:    0.15s ease;
}

/* ─── MODO OSCURO ───────────────────────────────────────────────── */
[data-theme="dark"] {

  /* Backgrounds */
  --nova-bg:            #0D1B2A;   /* navy base — del logo */
  --nova-surface:       #1E2D3F;   /* cards, sidebar, header */
  --nova-elevated:      #253548;   /* filas hover, inputs */
  --nova-overlay:       rgba(0, 0, 0, 0.40);

  /* Bordes */
  --nova-border:        #1E3A5F;
  --nova-border-soft:   #162840;
  --nova-border-strong: #2A4A6B;

  /* Texto */
  --nova-text:          #F0F4FF;
  --nova-text-2:        #C5D3E8;
  --nova-text-3:        #8BA3BF;
  --nova-text-4:        #4A6580;
  --nova-text-inv:      #111111;

  /* Marca (ajustada para dark) */
  --nova-green:         #3DDC6A;
  --nova-green-dark:    #1A7A3C;
  --nova-green-bg:      #052E0A;
  --nova-green-text:    #3DDC6A;

  --nova-blue:          #1A5FE8;
  --nova-blue-dark:     #1A2570;
  --nova-blue-bg:       #0C2147;
  --nova-blue-bg-2:     #112255;
  --nova-blue-text:     #00D4E8;

  --nova-cyan:          #00D4E8;

  /* Semánticos dark */
  --nova-success:       #3DDC6A;
  --nova-success-bg:    #052E0A;
  --nova-success-text:  #3DDC6A;

  --nova-warning:       #F59E0B;
  --nova-warning-bg:    #2D1F00;
  --nova-warning-text:  #F59E0B;

  --nova-danger:        #EF4444;
  --nova-danger-bg:     #2D0A0A;
  --nova-danger-text:   #EF4444;

  --nova-info:          #00D4E8;
  --nova-info-bg:       #0C2147;
  --nova-info-text:     #00D4E8;

  /* Planes dark */
  --nova-basic-bg:      #1E2D3F;
  --nova-basic-border:  #2A4A6B;
  --nova-basic-text:    #8BA3BF;

  --nova-premium-bg:    #0C2147;
  --nova-premium-border:#1A5FE8;
  --nova-premium-text:  #00D4E8;

  --nova-vip-bg:        #1E1047;
  --nova-vip-border:    #5B21B6;
  --nova-vip-text:      #C4B5FD;

  /* Sombras dark */
  --nova-shadow-sm:     0 1px 3px rgba(0,0,0,0.30);
  --nova-shadow-md:     0 4px 12px rgba(0,0,0,0.40);
  --nova-shadow-dropdown: 0 8px 24px rgba(0,0,0,0.50);
}

/* ─── BASE GLOBAL ───────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  font-family: var(--nova-font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--nova-font);
  background-color: var(--nova-bg);
  color: var(--nova-text);
  transition: background-color 0.25s ease, color 0.25s ease;
}

/* Preservar Cinzel SOLO en el wordmark del logo */
.nova-wordmark {
  font-family: 'Cinzel', serif;
}

/* Quitar Cinzel de todos los elementos UI */
h1, h2, h3, h4, h5, h6,
.font-cinzel:not(.nova-wordmark) {
  font-family: var(--nova-font) !important;
}

/* ─── COMPONENTES BASE ──────────────────────────────────────────── */

/* Scrollbar */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--nova-border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--nova-border-strong); }

/* Focus visible global */
:focus-visible {
  outline: 2px solid var(--nova-blue);
  outline-offset: 2px;
}

/* Inputs base */
input, textarea, select {
  font-family: var(--nova-font);
  background: var(--nova-elevated);
  border: 0.5px solid var(--nova-border);
  border-radius: var(--nova-r-md);
  color: var(--nova-text);
  transition: border-color var(--nova-transition);
}

input:focus, textarea:focus, select:focus {
  border-color: var(--nova-blue);
  outline: none;
}

/* Badges de plan — clases de utilidad */
.nova-badge { display: inline-flex; align-items: center; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: var(--nova-r-full); letter-spacing: .03em; border: 0.5px solid; }
.nova-badge-basic   { background: var(--nova-basic-bg);   border-color: var(--nova-basic-border);   color: var(--nova-basic-text); }
.nova-badge-premium { background: var(--nova-premium-bg); border-color: var(--nova-premium-border); color: var(--nova-premium-text); }
.nova-badge-vip     { background: var(--nova-vip-bg);     border-color: var(--nova-vip-border);     color: var(--nova-vip-text); }

/* Card base */
.nova-card {
  background: var(--nova-surface);
  border: 0.5px solid var(--nova-border);
  border-radius: var(--nova-r-xl);
  overflow: hidden;
}

/* Separador */
.nova-sep {
  height: 0.5px;
  background: var(--nova-border-soft);
  border: none;
  margin: 4px 0;
}

/* Texto semántico */
.nova-up      { color: var(--nova-success) !important; }
.nova-dn      { color: var(--nova-danger)  !important; }
.nova-warn    { color: var(--nova-warning) !important; }
.nova-muted   { color: var(--nova-text-3)  !important; }