:root {
  --primary: #22C55E;
  /* Variantes generadas en runtime (oklab da resultados suaves) */
  --primary-50:  color-mix(in oklab, var(--primary) 8%,  white);
  --primary-100: color-mix(in oklab, var(--primary) 16%, white);
  --primary-200: color-mix(in oklab, var(--primary) 28%, white);
  --primary-300: color-mix(in oklab, var(--primary) 40%, white);
  --primary-400: color-mix(in oklab, var(--primary) 60%, white);
  --primary-500: var(--primary);
  --primary-600: color-mix(in oklab, var(--primary) 86%, black);
  --primary-700: color-mix(in oklab, var(--primary) 72%, black);
  --primary-800: color-mix(in oklab, var(--primary) 58%, black);
  --primary-900: color-mix(in oklab, var(--primary) 44%, black);

  /* Utilidad para sombras/annealers que usan opacidades */
  --primary-opa-5:  color-mix(in oklab, var(--primary) 5%,  transparent);
  --primary-opa-10: color-mix(in oklab, var(--primary) 10%, transparent);
  --primary-opa-20: color-mix(in oklab, var(--primary) 20%, transparent);
  --primary-opa-30: color-mix(in oklab, var(--primary) 30%, transparent);
}

/* ========= Utilidades Tailwind========= */

.glass { background: rgba(255,255,255,.65); backdrop-filter: blur(10px); }
.dark header .glass {
  background: linear-gradient(to bottom, rgba(12,12,16,.88), rgba(12,12,16,.80));
}
.container { max-width: 1200px; }
header.is-scrolled .glass { background: rgba(255,255,255,.78); backdrop-filter: blur(12px); }
.dark header.is-scrolled .glass { background: rgba(24,24,27,.60); }
.bottom-safe { bottom: max(0.75rem, env(safe-area-inset-bottom)); }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Background */
.bg-primary-50  { background-color: var(--primary-50)  !important; }
.bg-primary-200 { background-color: var(--primary-200) !important; }
.bg-primary-300 { background-color: var(--primary-300) !important; }
.bg-primary-400 { background-color: var(--primary-400) !important; }
.bg-primary-500 { background-color: var(--primary-500) !important; }

/* Texto / Hover */
.text-primary-600 { color: var(--primary-600) !important; }
.hover\:text-primary-600:hover { color: var(--primary-600) !important; }

/* Borde / Ring */
.border-primary     { border-color: var(--primary) !important; }
.border-primary-500 { border-color: var(--primary-500) !important; }
/* Añadido para soportar hover:border-primary-500 */
.hover\:border-primary-500:hover { border-color: var(--primary-500) !important; }
/* Añadido para soportar focus-within:border-primary-500 */
.focus-within\:border-primary-500:focus-within { border-color: var(--primary-500) !important; }

.ring-primary-200   { --tw-ring-color: var(--primary-200) !important; }
.ring-primary-500   { --tw-ring-color: var(--primary-500) !important; }

/* Añadido para focus-within:ring-primary-500/20 */
.focus-within\:ring-primary-500\/20:focus-within { --tw-ring-color: color-mix(in oklab, var(--primary-500) 20%, transparent) !important; }


/* Accents (checkbox/radio) */
.accent-primary-500 { accent-color: var(--primary-500) !important; }

/* Focus rings “a mano” si no hay Tailwind JS */
.focus\:ring-2:focus { outline: none; box-shadow: 0 0 0 2px var(--primary-300) !important; }

/* Selección global (sustituye tu clase selection:bg-primary-200/60) */
::selection {
  background: color-mix(in oklab, var(--primary) 30%, transparent);
  color: inherit;
}

/* Helpers de gradientes/overlays que usas en hero */
.bg-primary-300\/35 { background-color: color-mix(in oklab, var(--primary-300) 35%, transparent) !important; }
.bg-primary-300\/30 { background-color: color-mix(in oklab, var(--primary-300) 30%, transparent) !important; }

/* Pills/etiquetas de precio que usan primary-50/200/700 */
.text-primary-700 { color: var(--primary-700) !important; }
.ring-primary-200 { --tw-ring-color: var(--primary-200) !important; }
.bg-primary-50    { background-color: var(--primary-50) !important; }

/* Dark variants simples (si las usas) */
.dark .dark\:bg-primary-900\/20 { background-color: color-mix(in oklab, var(--primary-900) 20%, transparent) !important; }
.dark .dark\:text-primary-300   { color: color-mix(in oklab, var(--primary) 75%, white) !important; }
.dark .dark\:ring-primary-800\/40 { --tw-ring-color: color-mix(in oklab, var(--primary-800) 40%, transparent) !important; }

/* =========================================================
   ========== BLOQUE AÑADIDO PARA EL HERO (integración) ====
   Estas utilidades “emulan” las clases Tailwind usadas en
   tu sección hero: text-primary-*, bg-primary-*/opacidad,
   ring-primary-300(/60), bordes y gradientes from/via.
   ========================================================= */

/* Texto extra */
.text-primary-200 { color: var(--primary-200) !important; }
.text-primary-500 { color: var(--primary-500) !important; }
.text-primary-900 { color: var(--primary-900) !important; }

/* Fondos con opacidad (escapar la "/" con "\/") */
.bg-primary-300\/90 { background-color: color-mix(in oklab, var(--primary-300) 90%, transparent) !important; }
.bg-primary-400\/20 { background-color: color-mix(in oklab, var(--primary-400) 20%, transparent) !important; }
.bg-primary-500\/25 { background-color: color-mix(in oklab, var(--primary-500) 25%, transparent) !important; }
.bg-primary-500\/10 { background-color: color-mix(in oklab, var(--primary-500) 10%, transparent) !important; }

/* Bordes adicionales */
.border-primary-100     { border-color: var(--primary-100) !important; }
.border-primary-500\/90 { border-color: color-mix(in oklab, var(--primary-500) 90%, transparent) !important; }
.border-primary-500\/20 { border-color: color-mix(in oklab, var(--primary-500) 20%, transparent) !important; }

/* Ring adicionales */
.ring-primary-300     { --tw-ring-color: var(--primary-300) !important; }
.ring-primary-300\/60 { --tw-ring-color: color-mix(in oklab, var(--primary-300) 60%, transparent) !important; }

/* Variantes :focus y :focus-within para ring-primary-300/60 */
.focus\:ring-primary-300\/60:focus { --tw-ring-color: color-mix(in oklab, var(--primary-300) 60%, transparent) !important; }
.focus-within\:ring-primary-300\/60:focus-within { --tw-ring-color: color-mix(in oklab, var(--primary-300) 60%, transparent) !important; }

/* Gradientes (from-/via-) compatibles con bg-gradient-to-* */
.from-primary-900\/60{
  --tw-gradient-from: color-mix(in oklab, var(--primary-900) 60%, transparent) var(--tw-gradient-from-position);
  --tw-gradient-to:   color-mix(in oklab, var(--primary-900) 0%, transparent) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.via-primary-300\/5{
  --tw-gradient-stops:
    var(--tw-gradient-from),
    color-mix(in oklab, var(--primary-300) 5%, transparent) var(--tw-gradient-via-position),
    var(--tw-gradient-to);
}






/* Claros por defecto; oscuro con .dark */
.text-on-hero   { color: #0b0b0f; }
.dark .text-on-hero { color: #fff; }

/* Backdrops semitransparentes coherentes con ambos themes */
.backdrop-card { background: color-mix(in oklab, #fff 80%, transparent); backdrop-filter: blur(8px); }
.dark .backdrop-card { background: color-mix(in oklab, #0b0b10 60%, transparent); }

/* Divisores neutros para claro/oscuro */
.divider-neutral { background-color: #e4e4e7; }
.dark .divider-neutral { background-color: rgba(255,255,255,.1); }

/* ====== STARBASE: glass neutro con soporte claro/oscuro ====== */
/* Claro: “frosted light” sobre gris */
.panel-card{
  background:
    radial-gradient(1100px 300px at 85% 110%,
      color-mix(in oklab, #000 3%, transparent) 0%, transparent 60%),
    linear-gradient(135deg,
      color-mix(in oklab, #ffffff 86%, #f4f4f5) 0%,
      color-mix(in oklab, #f9fafb 92%, #e5e7eb) 100%);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  border: 1.5px solid color-mix(in oklab, #000 10%, transparent); /* borde sutil gris */
  box-shadow:
    0 10px 24px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.65);
  color: #0b0b0f;

  --tw-ring-color: rgba(24,24,27,.18); /* zinc-900/18 */
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease, transform .2s ease;
}

.panel-card:hover{
  background:
    radial-gradient(1100px 300px at 85% 110%,
      color-mix(in oklab, #000 6%, transparent) 0%, transparent 60%),
    linear-gradient(135deg,
      color-mix(in oklab, #ffffff 82%, #eeeeee) 0%,
      color-mix(in oklab, #f5f5f5 92%, #e5e7eb) 100%);
  border-color: color-mix(in oklab, #000 14%, transparent);
  box-shadow:
    0 14px 30px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.75);
}

.panel-card:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px rgba(24,24,27,.25),
    0 0 0 6px rgba(24,24,27,.12),
    0 12px 28px rgba(0,0,0,.14);
}

/* Oscuro: “deep glass” */
.dark .panel-card{
  background:
    radial-gradient(1100px 300px at 85% 110%,
      color-mix(in oklab, #ffffff 7%, transparent) 0%, transparent 60%),
    linear-gradient(135deg,
      color-mix(in oklab, #0b0b10 94%, black) 0%,
      color-mix(in oklab, #0f0f14 90%, black) 60%,
      color-mix(in oklab, #0a0a0e 96%, black) 100%);
  border-color: color-mix(in oklab, #ffffff 12%, transparent);
  box-shadow:
    0 10px 24px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.06);
  color: #fff;
}

.dark .panel-card:hover{
  border-color: color-mix(in oklab, #ffffff 16%, transparent);
  box-shadow:
    0 14px 30px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(255,255,255,.08);
}

/* tipografía secundaria ya la controlamos desde el HTML:
   text-zinc-600 en claro → text-zinc-900 on hover
   dark:text-zinc-300 en oscuro → white on hover */

/* ===================== */
/* ApexCharts tooltip UX */
/* ===================== */

:root {
  --chart-tooltip-bg-light: #ffffff;
  --chart-tooltip-text-light: #020617; /* slate-950-ish */
  --chart-tooltip-bg-dark:  #020617;   /* very dark slate */
  --chart-tooltip-text-dark:#f9fafb;   /* almost white */
}

/* Base tooltip box */
.apexcharts-tooltip {
  border-radius: 0.75rem !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important; /* zinc-400/35 */
  box-shadow: 0 18px 40px rgba(15, 23, 42, .45) !important;
  padding: 0.4rem 0.6rem !important;
}

/* We don’t use the default title row */
.apexcharts-tooltip-title {
  display: none !important;
}

/* Light mode colors */
.apexcharts-tooltip.apexcharts-theme-light {
  background-color: var(--chart-tooltip-bg-light) !important;
  color: var(--chart-tooltip-text-light) !important;
}

/* Dark mode colors */
.dark .apexcharts-tooltip {
  background-color: var(--chart-tooltip-bg-dark) !important;
  color: var(--chart-tooltip-text-dark) !important;
}

/* Make all text inside inherit correctly */
.apexcharts-tooltip-series-group,
.apexcharts-tooltip-series-group span,
.apexcharts-tooltip-text,
.apexcharts-tooltip-y-label,
.apexcharts-tooltip-y-value,
.apexcharts-tooltip-series-name {
  color: inherit !important;
}

/* X-axis tooltip (little "Sat" bubble) */
.apexcharts-xaxistooltip,
.apexcharts-xaxistooltip-bottom {
  border-radius: 0.5rem !important;
  border-color: rgba(148, 163, 184, 0.4) !important;
  background-color: var(--chart-tooltip-bg-light) !important;
  color: var(--chart-tooltip-text-light) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .35) !important;
}

.dark .apexcharts-xaxistooltip,
.dark .apexcharts-xaxistooltip-bottom {
  background-color: var(--chart-tooltip-bg-dark) !important;
  color: var(--chart-tooltip-text-dark) !important;
}

/* Shadow */
.shadow-primary-500\/20 {
  --tw-shadow-color: color-mix(in oklab, var(--primary-500) 20%, transparent) !important;
  --tw-shadow: var(--tw-shadow-colored) !important;
}