/* ============================================================
   Nova — Brand System
   Fuente única de verdad para colores, tipografía, componentes.
   ============================================================ */

/* ----- 1. Fuente Neue Haas Grotesk Display Pro (5 pesos) ----- */
@font-face { font-family:'Neue Haas Grotesk'; src:url('/brand/fonts/NeueHaasDisplayLight.woff2')  format('woff2'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Neue Haas Grotesk'; src:url('/brand/fonts/NeueHaasDisplayRoman.woff2')  format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Neue Haas Grotesk'; src:url('/brand/fonts/NeueHaasDisplayMedium.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Neue Haas Grotesk'; src:url('/brand/fonts/NeueHaasDisplayBold.woff2')   format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Neue Haas Grotesk'; src:url('/brand/fonts/NeueHaasDisplayBlack.woff2')  format('woff2'); font-weight:900; font-style:normal; font-display:swap; }

:root {
  /* ----- 2. PALETA NOVA ----- */
  --nova-violeta:      #6F78B0;
  --nova-azul:         #4B9EE8;
  --nova-teal:         #69B4CF;
  --nova-black:        #0A0C1E;
  --nova-white:        #F9F9FC;
  --nova-violeta-dark: #5A6498;
  --nova-bg-deep:      #050714;
  --nova-surface:      rgba(15,18,40,0.85);

  /* ----- Aliases backward-compat con sistema viejo ----- */
  --indigo:  var(--nova-violeta);
  --indigo2: var(--nova-violeta-dark);
  --blue:    var(--nova-azul);
  --cyan:    var(--nova-teal);
  --bg:      var(--nova-black);
  --bg2:     var(--nova-bg-deep);
  --text:    var(--nova-white);
  --muted:   #8892a4;
  --dim:     #4a5568;
  --border:  rgba(249,249,252,0.08);
  --surface: var(--nova-surface);

  /* ----- Gradientes marca ----- */
  --nova-gradient:      linear-gradient(135deg, var(--nova-violeta) 0%, var(--nova-teal) 100%);
  --nova-gradient-soft: linear-gradient(135deg, rgba(111,120,176,0.15) 0%, rgba(105,180,207,0.15) 100%);

  /* ----- 3. Estados semánticos ----- */
  --success: #22c55e;
  --warning: #f59e0b;
  --error:   #f43f5e;
  --info:    var(--nova-azul);

  /* ----- Brand colors externos (preservar oficiales) ----- */
  --wa-green:    #25D366;
  --wa-green-dark: #128c7e;
  --ig-gradient: linear-gradient(135deg, #f58529 0%, #dd2a7b 50%, #8134af 100%);

  /* ----- 4. Type scale ----- */
  --font-family: 'Neue Haas Grotesk', system-ui, -apple-system, sans-serif;
  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-lg:   18px;
  --fs-xl:   22px;
  --fs-2xl:  28px;
  --fs-3xl:  36px;
  --fs-4xl:  48px;
  --fs-hero: 64px;
  --lh-tight:  1.2;
  --lh-normal: 1.5;
  --lh-loose:  1.75;
  --ls-tight:  -0.02em;
  --ls-normal: 0;
  --ls-wide:   0.08em;

  /* ----- 5. Spacing scale (4/8 grid) ----- */
  --space-xs:   4px;
  --space-sm:   8px;
  --space-md:   12px;
  --space-lg:   16px;
  --space-xl:   24px;
  --space-2xl:  32px;
  --space-3xl:  48px;
  --space-4xl:  64px;
  --space-5xl:  96px;

  /* Aliases shared.css legacy */
  --space-1: var(--space-xs);
  --space-2: var(--space-sm);
  --space-3: var(--space-md);
  --space-4: var(--space-lg);
  --space-5: var(--space-xl);
  --space-6: var(--space-2xl);

  /* ----- 6. Radius ----- */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 999px;

  /* ----- 7. Shadows / elevations ----- */
  --shadow-sm:   0 2px 6px rgba(0,0,0,0.15);
  --shadow-md:   0 6px 20px rgba(0,0,0,0.30);
  --shadow-lg:   0 16px 40px rgba(0,0,0,0.45);
  --shadow-xl:   0 24px 60px rgba(0,0,0,0.55);
  --shadow-nova: 0 12px 32px rgba(111,120,176,0.35);
  --shadow-teal: 0 12px 32px rgba(105,180,207,0.30);

  /* ----- 8. Transitions ----- */
  --t-fast:   120ms;
  --t-normal: 200ms;
  --t-slow:   360ms;
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --spring:   var(--ease-spring); /* alias legacy app.html */

  /* ----- 9. Z-index scale ----- */
  --z-base:     0;
  --z-sticky:   100;
  --z-dropdown: 1000;
  --z-modal:    2000;
  --z-toast:    3000;
  --z-tooltip:  4000;

  /* ----- 10. Focus ring ----- */
  --ring-color:  rgba(75,158,232,0.55);
  --ring-width:  3px;
  --ring-offset: 2px;

  /* ----- 11. Breakpoints (para reference, CSS no soporta vars en media) ----- */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
}

/* ============================================================
   Base
   ============================================================ */
html, body {
  font-family: var(--font-family);
  color: var(--text);
  background: var(--bg);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left:  env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

h1 { font-size: var(--fs-4xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--ls-tight); }
h2 { font-size: var(--fs-3xl); font-weight: 700; line-height: var(--lh-tight); }
h3 { font-size: var(--fs-2xl); font-weight: 600; }
h4 { font-size: var(--fs-xl);  font-weight: 600; }
p  { line-height: var(--lh-normal); }

a { color: var(--nova-azul); transition: color var(--t-fast) var(--ease); }
a:hover { color: var(--nova-teal); }

button, a, [role="button"], .clickable { cursor: pointer; }

:focus-visible {
  outline: var(--ring-width) solid var(--ring-color);
  outline-offset: var(--ring-offset);
  border-radius: var(--radius-sm);
}

/* Text selection */
::selection {
  background: var(--nova-violeta);
  color: var(--nova-white);
}

/* Scrollbar (Webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg2); }
::-webkit-scrollbar-thumb { background: var(--nova-violeta-dark); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--nova-violeta); }

/* ============================================================
   Componentes base
   ============================================================ */

/* Botones */
.btn-primary {
  background: var(--nova-gradient);
  color: var(--nova-white);
  border: none;
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  min-height: 44px;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-nova); }
.btn-primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.btn-secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  min-height: 44px;
  transition: all var(--t-fast) var(--ease);
}
.btn-secondary:hover { border-color: var(--nova-violeta); background: rgba(111,120,176,0.08); }
.btn-secondary:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  color: var(--muted);
  border: none;
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-family: inherit;
  cursor: pointer;
  transition: color var(--t-fast);
}
.btn-ghost:hover { color: var(--text); }

/* Cards */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-shadow: var(--shadow-md);
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.card-hover:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }

/* Chips */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-full);
  font-size: var(--fs-sm);
  font-weight: 500;
  background: var(--nova-gradient-soft);
  border: 1px solid var(--border);
  color: var(--text);
}

/* Inputs */
.input, .textarea, .select,
input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="tel"], textarea, select {
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-family: inherit;
  font-size: var(--fs-base);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.input:focus, .textarea:focus, .select:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--nova-azul);
  outline: none;
  box-shadow: 0 0 0 3px var(--ring-color);
}
.input:disabled, .textarea:disabled, .select:disabled,
input:disabled, textarea:disabled, select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: rgba(15,18,40,0.4);
}
.input.is-valid   { border-color: var(--success); }
.input.is-invalid { border-color: var(--error); }

/* Alerts */
.alert-success { background: rgba(34,197,94,0.10);  border-left: 3px solid var(--success); color: var(--success); padding: var(--space-md); border-radius: var(--radius-sm); }
.alert-warning { background: rgba(245,158,11,0.10); border-left: 3px solid var(--warning); color: var(--warning); padding: var(--space-md); border-radius: var(--radius-sm); }
.alert-error   { background: rgba(244,63,94,0.10);  border-left: 3px solid var(--error);   color: var(--error);   padding: var(--space-md); border-radius: var(--radius-sm); }
.alert-info    { background: rgba(75,158,232,0.10); border-left: 3px solid var(--info);    color: var(--info);    padding: var(--space-md); border-radius: var(--radius-sm); }

/* Spinner */
.spinner {
  width: 24px; height: 24px;
  border: 3px solid var(--border);
  border-top-color: var(--nova-azul);
  border-radius: 50%;
  animation: nova-spin 0.8s linear infinite;
}
@keyframes nova-spin { to { transform: rotate(360deg); } }

/* Skeleton loader */
.skeleton {
  background: linear-gradient(90deg, var(--surface), rgba(75,158,232,0.08), var(--surface));
  background-size: 200% 100%;
  animation: nova-shimmer 1.5s infinite;
  border-radius: var(--radius-md);
}
@keyframes nova-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Loader IA (logo Nova pulsando) */
.ai-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-3xl) 0;
}
.ai-loader-icon {
  width: 80px; height: 80px;
  animation: nova-pulse 1.8s var(--ease) infinite;
}
@keyframes nova-pulse {
  0%, 100% { opacity: 0.6; transform: scale(0.95); }
  50%      { opacity: 1;   transform: scale(1.05); }
}

/* Success burst (checkmark animado) */
.success-burst { display: inline-flex; align-items: center; gap: var(--space-md); }
.check-circle { width: 52px; height: 52px; }
.check-circle circle { stroke-dasharray: 157; stroke-dashoffset: 157; animation: nova-draw-circle 0.5s var(--ease) forwards; }
.check-circle path   { stroke-dasharray: 50;  stroke-dashoffset: 50;  animation: nova-draw-check  0.4s var(--ease) 0.4s forwards; }
@keyframes nova-draw-circle { to { stroke-dashoffset: 0; } }
@keyframes nova-draw-check  { to { stroke-dashoffset: 0; } }

/* Empty state */
.empty-state {
  text-align: center;
  padding: var(--space-4xl) var(--space-xl);
  color: var(--muted);
}
.empty-state img { width: 64px; opacity: 0.4; margin-bottom: var(--space-lg); }
.empty-state h3  { color: var(--text); margin-bottom: var(--space-sm); }
.empty-state p   { margin: 0 0 var(--space-xl); }

/* Toast notification */
.toast {
  position: fixed;
  bottom: var(--space-xl);
  left: var(--space-xl);
  background: var(--nova-gradient);
  color: var(--nova-white);
  padding: var(--space-md) var(--space-xl);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  z-index: var(--z-toast);
  animation: nova-toast-in var(--t-normal) var(--ease-spring);
}
@keyframes nova-toast-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Modal backdrop */
.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(10,12,30,0.7);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl);
  box-shadow: var(--shadow-xl);
  max-width: 520px; width: 90%;
}

/* Tooltip */
.tooltip {
  position: absolute;
  background: var(--bg2);
  color: var(--text);
  border: 1px solid var(--border);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  box-shadow: var(--shadow-sm);
  z-index: var(--z-tooltip);
  white-space: nowrap;
}

/* Upload zone */
.upload-zone {
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-3xl);
  text-align: center;
  transition: all var(--t-fast) var(--ease);
  background: rgba(15,18,40,0.4);
}
.upload-zone:hover { border-color: var(--nova-violeta); }
.upload-zone.is-dragover {
  border-color: var(--nova-violeta);
  border-style: solid;
  background: var(--nova-gradient-soft);
  box-shadow: var(--shadow-nova);
}

/* SPA view transitions */
.view { animation: nova-view-in var(--t-normal) var(--ease); }
@keyframes nova-view-in {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Text gradient utility */
.text-gradient {
  background: var(--nova-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Emoji icon size standard */
.emoji-icon { font-size: 1.1em; vertical-align: -0.05em; line-height: 1; }

/* Touch targets ≥44px (Apple HIG) */
button, [role="button"], a.clickable {
  min-height: 44px;
}

/* ============================================================
   Accesibilidad
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: high) {
  :root {
    --text: #FFFFFF;
    --bg: #000000;
    --border: rgba(255,255,255,0.4);
  }
}