/*
 * Radar Nexus — design tokens
 * Base: Sistema Visual / Base 1.0 (Figma)
 * Dark-first. El tema claro se activa con [data-theme="light"].
 */

:root {
  /* Primitivos */
  --rn-petroleo: #04282c;
  --rn-crema: #f5f4e9;
  --rn-oro-medio: #e4ab4a;
  --rn-oro-sombra: #bc7d14;
  --rn-oro-luz: #f4c068;
  --rn-petroleo-suave: #22434a;
  --rn-panel-claro: #eceadb;
  --rn-panel-oscuro: #0a343a;
  --rn-texto-oscuro-secundario: #bfc9c3;
  --rn-oro-texto-claro: #7a4f06;

  /* Semánticos — oscuro (default) */
  --rn-bg: var(--rn-petroleo);
  --rn-surface: var(--rn-panel-oscuro);
  --rn-text: var(--rn-crema);
  --rn-text-soft: var(--rn-texto-oscuro-secundario);
  --rn-accent: var(--rn-oro-luz);
  --rn-accent-strong: var(--rn-oro-medio);
  --rn-action: var(--rn-oro-medio);
  --rn-action-ink: var(--rn-petroleo);
  --rn-border: rgba(245, 244, 233, 0.22);
  --rn-shadow: rgba(0, 0, 0, 0.32);
  --rn-focus: var(--rn-oro-luz);

  /* Compatibilidad con el CSS existente */
  --dk: var(--rn-petroleo);
  --dk2: var(--rn-petroleo-suave);
  --dk3: #2e5a61;
  --lime: var(--rn-accent);
  --lime-dk: var(--rn-oro-luz);
  --bg: var(--rn-bg);
  --bg2: var(--rn-surface);
  --white: var(--rn-surface);
  --text: var(--rn-text);
  --text2: var(--rn-text-soft);
  --border: var(--rn-border);
  --du-violet: var(--rn-action);
  --du-teal: var(--rn-oro-luz);
  --violet: var(--rn-action);
  --teal: var(--rn-oro-luz);
  --sh: var(--rn-shadow);
  --danger: #b3261e;
  --warn: #8a6a00;
}

[data-theme="light"] {
  --rn-bg: var(--rn-crema);
  --rn-surface: var(--rn-panel-claro);
  --rn-text: var(--rn-petroleo);
  --rn-text-soft: var(--rn-petroleo-suave);
  --rn-accent: var(--rn-oro-medio);
  --rn-accent-strong: var(--rn-oro-sombra);
  --rn-action: var(--rn-oro-medio);
  --rn-action-ink: var(--rn-petroleo);
  --rn-border: rgba(4, 40, 44, 0.18);
  --rn-shadow: rgba(4, 40, 44, 0.12);

  --dk: var(--rn-petroleo);
  --dk2: var(--rn-petroleo-suave);
  --dk3: #2e5a61;
  --lime: var(--rn-oro-medio);
  --lime-dk: var(--rn-oro-texto-claro);
  --bg: var(--rn-bg);
  --bg2: var(--rn-surface);
  --white: var(--rn-surface);
  --text: var(--rn-text);
  --text2: var(--rn-text-soft);
  --border: var(--rn-border);
  --du-violet: var(--rn-action);
  --du-teal: var(--rn-oro-texto-claro);
  --violet: var(--rn-action);
  --teal: var(--rn-oro-texto-claro);
  --sh: var(--rn-shadow);
}

html {
  color-scheme: dark;
  scroll-behavior: smooth;
}

html[data-theme="light"] {
  color-scheme: light;
}

body {
  font-family: 'Jost', Arial, sans-serif;
  background: var(--rn-bg);
  color: var(--rn-text);
}

/* Botones primarios: el oro lleva texto petróleo. */
.btn-primary,
.price-cta,
.nav-cta,
.btn-go,
.pay-submit,
.price,
.pay-price,
.pay-wa,
.sfc-sub-btn,
.nav-drawer-pay,
.empty-state button,
.btn {
  color: var(--rn-action-ink);
}

.hero .btn-ghost,
.footer .btn-ghost {
  color: var(--rn-crema);
}

/* Toggle de tema */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  min-width: 44px;
  padding: 0;
  border-radius: 999px;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
  width: 18px;
  height: 18px;
}

.theme-toggle .icon-moon {
  display: none;
}

[data-theme="dark"] .theme-toggle .icon-sun {
  display: block;
}

[data-theme="dark"] .theme-toggle .icon-moon {
  display: none;
}

[data-theme="light"] .theme-toggle .icon-sun {
  display: none;
}

[data-theme="light"] .theme-toggle .icon-moon {
  display: block;
}

/* Ajustes de superficies para el tema oscuro */
[data-theme="dark"] :is(h1, h2, h3, h4, h5, h6) {
  color: var(--rn-crema);
}

[data-theme="dark"] :where(.section, .sec, .sec-alt, .wrap) {
  background-color: var(--rn-bg);
  color: var(--rn-text);
}

[data-theme="dark"] :where(.fund-card, .card, .price-card, .faq-item, .benefit, .step, .who-card, .source-strip) {
  background: var(--rn-surface);
  border-color: var(--rn-border);
  color: var(--rn-text);
}

[data-theme="dark"] :where(.fund-card li, .section p, .sec p, .step p, .benefit p) {
  color: var(--rn-text-soft);
}

[data-theme="dark"] .tools {
  background: color-mix(in srgb, var(--rn-bg) 96%, transparent);
  border-color: var(--rn-border);
}

[data-theme="dark"] .search {
  background: var(--rn-surface);
  color: var(--rn-text);
  border-color: var(--rn-border);
}

[data-theme="dark"] .section-nav a {
  background: var(--rn-surface);
  color: var(--rn-text-soft);
  border-color: var(--rn-border);
}

[data-theme="dark"] .section-nav a.is-active {
  background: var(--rn-accent);
  color: var(--rn-petroleo);
  border-color: var(--rn-accent);
}

[data-theme="dark"] .stats {
  background: var(--rn-petroleo-suave);
}

[data-theme="dark"] .stat {
  background: none;
  border-color: rgba(245, 244, 233, 0.14);
}

[data-theme="dark"] .stat strong,
[data-theme="dark"] .stat-n {
  color: var(--rn-crema);
}

[data-theme="dark"] .stat span {
  color: var(--rn-texto-oscuro-secundario);
}

/* Header, hero y footer en modo claro */
[data-theme="light"] body > nav,
[data-theme="light"] .topbar {
  background: var(--rn-crema);
  border-bottom-color: var(--rn-oro-medio);
  color: var(--rn-petroleo);
}

[data-theme="light"] body > nav .nav-brand-lockup,
[data-theme="light"] .topbar .brand-lockup {
  content: url('/brand/lockup-dark-360.png');
}

[data-theme="light"] body > nav .nav-btn,
[data-theme="light"] body > nav .nav-toggle {
  background: rgba(4, 40, 44, 0.05);
  border-color: var(--rn-border);
  color: var(--rn-petroleo);
}

[data-theme="light"] body > nav .nav-btn-lang {
  background: rgba(228, 171, 74, 0.14);
  border-color: rgba(188, 125, 20, 0.45);
  color: var(--rn-oro-texto-claro);
}

[data-theme="light"] body > nav .nav-menu {
  background: rgba(4, 40, 44, 0.04);
  border-color: var(--rn-border);
}

[data-theme="light"] body > nav .nav-menu a {
  color: var(--rn-petroleo-suave);
}

[data-theme="light"] body > nav .nav-menu a:hover {
  background: rgba(228, 171, 74, 0.18);
  color: var(--rn-oro-texto-claro);
}

[data-theme="light"] body > nav .nav-drawer {
  background: var(--rn-crema);
  border-color: var(--rn-border);
}

[data-theme="light"] body > nav .nav-drawer a {
  color: var(--rn-petroleo);
}

[data-theme="light"] .hero {
  background: var(--rn-crema);
  color: var(--rn-petroleo);
}

[data-theme="light"] .hero h1,
[data-theme="light"] .hero .hero-h1 {
  color: var(--rn-petroleo);
}

[data-theme="light"] .hero h1 em,
[data-theme="light"] .hero .hero-h1 em {
  color: var(--rn-oro-texto-claro);
}

[data-theme="light"] .hero p,
[data-theme="light"] .hero .hero-p,
[data-theme="light"] .hero .hero-sub {
  color: var(--rn-petroleo-suave);
}

[data-theme="light"] .hero .hero-kicker,
[data-theme="light"] .hero .kicker {
  background: rgba(228, 171, 74, 0.14);
  border-color: rgba(188, 125, 20, 0.35);
  color: var(--rn-oro-texto-claro);
}

[data-theme="light"] .hero .btn-ghost {
  color: var(--rn-petroleo);
  border-color: var(--rn-border);
}

[data-theme="light"] .hero .btn-ghost:hover {
  background: rgba(4, 40, 44, 0.05);
}

[data-theme="light"] .footer {
  background: var(--rn-crema);
  color: var(--rn-petroleo-suave);
  border-top-color: var(--rn-oro-medio);
}

[data-theme="light"] .footer strong,
[data-theme="light"] .footer a {
  color: var(--rn-petroleo);
}

[data-theme="light"] .footer-note,
[data-theme="light"] .f-txt {
  color: var(--rn-petroleo-suave);
}

[data-theme="light"] .f-brand-lockup,
[data-theme="light"] .footer-lockup {
  content: url('/brand/lockup-dark-360.png');
}

[data-theme="light"] body > nav .nav-access {
  color: var(--rn-petroleo-suave);
  border-color: var(--rn-border);
  background: rgba(4, 40, 44, 0.04);
}

[data-theme="light"] body > nav .nav-access:hover {
  color: var(--rn-oro-texto-claro);
  border-color: rgba(188, 125, 20, 0.4);
  background: rgba(228, 171, 74, 0.12);
}

[data-theme="light"] .topbar .nav-link,
[data-theme="light"] .topbar .logout {
  color: var(--rn-petroleo-suave);
  border-color: var(--rn-border);
  background: rgba(4, 40, 44, 0.04);
}

[data-theme="light"] .topbar .nav-link:hover,
[data-theme="light"] .topbar .logout:hover {
  color: var(--rn-oro-texto-claro);
  border-color: rgba(188, 125, 20, 0.4);
  background: rgba(228, 171, 74, 0.12);
}

[data-theme="dark"] .fund-num {
  background: var(--rn-petroleo-suave);
  color: var(--rn-oro-luz);
}

[data-theme="dark"] .count {
  background: var(--rn-petroleo-suave);
  color: var(--rn-oro-luz);
}

.pay-spinner {
  border-color: rgba(4, 40, 44, 0.3);
  border-top-color: var(--rn-action-ink);
}

[data-theme="dark"] .empty-state strong {
  color: var(--rn-crema);
}

[data-theme="light"] .back {
  color: var(--rn-petroleo-suave);
}

[data-theme="light"] .back:hover {
  color: var(--rn-oro-texto-claro);
}

@media (max-width: 380px) {
  .topbar .theme-toggle {
    display: none;
  }
}

[data-theme="dark"] .sfc-lock {
  background: linear-gradient(180deg, rgba(34, 67, 74, 0.62), rgba(10, 52, 58, 0.95));
  border-color: var(--rn-border);
}

[data-theme="dark"] .sfc-lock-copy {
  color: var(--rn-text-soft);
}

[data-theme="dark"] .sfc-num {
  background: var(--rn-petroleo-suave);
  color: var(--rn-oro-luz);
}

[data-theme="dark"] .price-card {
  background: var(--rn-surface);
  border-color: var(--rn-border);
}

.btn-primary,
.price-cta,
.nav-cta,
.btn-go,
.pay-submit,
.pay-wa,
.price,
.sfc-sub-btn,
.nav-drawer-pay {
  border-color: var(--rn-oro-sombra);
}

.nav-btn-lang {
  background: rgba(228, 171, 74, 0.14);
  border-color: rgba(228, 171, 74, 0.4);
  color: var(--rn-oro-luz);
}

[data-theme="light"] body > nav .nav-link {
  color: var(--rn-petroleo-suave);
  border-color: var(--rn-border);
  background: rgba(4, 40, 44, 0.04);
}

[data-theme="dark"] .step-h,
[data-theme="dark"] .wc-name,
[data-theme="dark"] .ss-txt strong {
  color: var(--rn-crema);
}

[data-theme="dark"] .stat-l,
[data-theme="dark"] .ss-txt,
[data-theme="dark"] .sfc-pill {
  color: var(--rn-text-soft);
}

[data-theme="dark"] .sfc-pill.soon {
  color: var(--rn-petroleo);
}

[data-theme="dark"] .btn-ghost {
  color: var(--rn-crema);
  border-color: var(--rn-border);
}

[data-theme="dark"] .note {
  color: var(--rn-text-soft);
}

[data-theme="dark"] .trust-item {
  color: var(--rn-text-soft);
  background: var(--rn-surface);
  border-color: var(--rn-border);
}

[data-theme="dark"] .pill {
  color: var(--rn-text-soft);
}

[data-theme="dark"] .pill.closing_soon {
  color: var(--rn-petroleo);
}

.pill.future,
.pill.emergency {
  color: var(--rn-oro-texto-claro);
}

[data-theme="light"] .amount,
[data-theme="light"] .sfc-amt {
  color: var(--rn-oro-texto-claro);
  background: rgba(228, 171, 74, 0.16);
}

.sfc-ods,
.ods-badge {
  color: var(--rn-text);
}


.price-badge,
.ct-label,
.ct-ico {
  color: var(--rn-action-ink);
}

.ct-ico {
  background: var(--rn-action);
  border-color: var(--rn-oro-sombra);
}

[data-theme="dark"] .copy strong {
  color: var(--rn-crema);
}

.card-head .card-k {
  color: var(--rn-oro-luz);
}

.sfc-ods-num {
  background: var(--rn-surface);
  color: var(--rn-text);
  box-shadow: inset 0 0 0 1.5px var(--ods);
}

.ods-mark {
  background: var(--rn-surface);
  color: var(--rn-text);
  box-shadow: inset 0 0 0 1.5px var(--ods-color);
}

:is(h1, h2, h3, h4, h5, h6) {
  text-wrap: balance;
}

.stat-n,
.price-amount,
.sfc-amt,
.amount,
.metric-value {
  font-variant-numeric: tabular-nums;
}

.theme-toggle:focus-visible,
.nav-btn:focus-visible,
.nav-toggle:focus-visible {
  outline: 3px solid var(--rn-focus);
  outline-offset: 3px;
}

.pay-field input:focus-visible,
.pay-field textarea:focus-visible,
.search:focus-visible {
  outline: 3px solid var(--rn-focus);
  outline-offset: 2px;
}

.pay-modal,
.nav-drawer {
  overscroll-behavior: contain;
}

@media (prefers-reduced-motion: reduce) {
  .theme-toggle,
  .nav-btn,
  .nav-toggle {
    transition: none !important;
  }
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 10000;
  transform: translateY(-220%);
  background: var(--rn-oro-luz);
  color: var(--rn-petroleo);
  border-radius: 999px;
  padding: 11px 16px;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.skip-link:focus {
  transform: translateY(0);
}

.nav-drawer-cta {
  color: var(--rn-action-ink);
}

.pay-field label {
  font-size: 10.5px;
  letter-spacing: 0.12em;
}

[data-theme="dark"] .pay-field label {
  color: var(--rn-text-soft);
}

[data-theme="dark"] .pay-field input {
  background: var(--rn-surface);
  color: var(--rn-crema);
  border-color: var(--rn-border);
}

[data-theme="dark"] .pay-field input::placeholder {
  color: var(--rn-text-soft);
  opacity: 0.72;
}

[data-theme="dark"] .pay-skip,
[data-theme="dark"] .pay-link,
[data-theme="dark"] .pay-copy strong {
  color: var(--rn-crema);
}

[data-theme="dark"] .pay-code {
  color: var(--rn-crema);
  background: rgba(228, 171, 74, 0.18);
  border-color: rgba(228, 171, 74, 0.5);
}

/* Regla general: cards de newsletter neutras, sin color por ODS. */
.sfc::before {
  display: none;
}

.sfc,
.fund-card,
.fund-card.is-soon,
.fund-card.is-emergency,
.fund-card.is-future {
  border-color: var(--rn-border);
}

.fund-card.is-soon,
.fund-card.is-emergency {
  box-shadow: 0 5px 24px var(--rn-shadow);
}

.ods-badge,
.sfc-ods {
  background: var(--rn-surface);
  border-color: var(--rn-border);
  color: var(--rn-text);
}

.ods-mark,
.sfc-ods-num {
  background: var(--rn-petroleo);
  color: var(--rn-oro-luz);
  box-shadow: none;
}

/* Éxito neutralizado: sin verde. */
.tag.ok,
.msg.ok,
.status-pill.active {
  background: rgba(228, 171, 74, 0.16);
  color: var(--rn-oro-texto-claro);
  border-color: rgba(188, 125, 20, 0.55);
}

[data-theme="dark"] .pay-field-error,
[data-theme="dark"] .pay-field.has-error label {
  color: #fca5a5;
}

[data-theme="dark"] .pay-field.has-error input {
  border-color: #fca5a5;
  box-shadow: 0 0 0 3px rgba(252, 165, 165, 0.14);
}

[data-theme="dark"] .pay-error {
  background: rgba(180, 35, 24, 0.18);
  border-color: rgba(252, 165, 165, 0.45);
  color: #fca5a5;
}

/* Admin en modo oscuro */
[data-theme="dark"] .metric-value {
  color: var(--rn-crema);
}

[data-theme="dark"] .field label,
[data-theme="dark"] .table th {
  color: var(--rn-text-soft);
}

[data-theme="dark"] .field input,
[data-theme="dark"] .field textarea,
[data-theme="dark"] .field select,
[data-theme="dark"] .status-form select,
[data-theme="dark"] .status-form textarea,
[data-theme="dark"] .status-form input[type="date"] {
  background: var(--rn-surface);
  color: var(--rn-crema);
  border-color: var(--rn-border);
}

[data-theme="dark"] .metric-ico {
  background: var(--rn-petroleo-suave);
  color: var(--rn-oro-luz);
  border-color: var(--rn-border);
}

[data-theme="dark"] .card.metric-hot .metric-ico {
  background: rgba(228, 171, 74, 0.15);
  color: var(--rn-oro-luz);
  border-color: rgba(228, 171, 74, 0.4);
}

[data-theme="dark"] .tag,
[data-theme="dark"] .status-pill,
[data-theme="dark"] .mail-chip {
  background: var(--rn-surface);
  color: var(--rn-text-soft);
  border-color: var(--rn-border);
}

[data-theme="dark"] .msg.ok,
[data-theme="dark"] .tag.ok,
[data-theme="dark"] .status-pill.active,
[data-theme="dark"] .status-pill.pending_payment {
  background: rgba(228, 171, 74, 0.13);
  color: var(--rn-oro-luz);
  border-color: rgba(228, 171, 74, 0.4);
}

[data-theme="dark"] .msg.warn,
[data-theme="dark"] .tag.warn {
  background: rgba(228, 171, 74, 0.13);
  color: var(--rn-oro-luz);
  border-color: rgba(228, 171, 74, 0.4);
}

[data-theme="dark"] .msg.bad,
[data-theme="dark"] .tag.bad,
[data-theme="dark"] .status-pill.cancelled {
  background: rgba(180, 35, 24, 0.18);
  color: #fca5a5;
  border-color: rgba(252, 165, 165, 0.45);
}

[data-theme="dark"] .status-pill.payment_sent {
  background: rgba(59, 130, 246, 0.16);
  color: #93c5fd;
  border-color: rgba(147, 197, 253, 0.4);
}

[data-theme="dark"] .contact-lines a {
  color: var(--rn-oro-luz);
}

[data-theme="dark"] .code {
  background: var(--rn-surface);
  border-color: var(--rn-border);
  color: var(--rn-crema);
}

/* Seguimiento de vencimientos en admin */
.status-form input[type="date"] {
  width: 100%;
  font-family: inherit;
  font-size: 12px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 9px 10px;
  background: var(--bg);
  color: var(--text);
}

.status-date {
  display: grid;
  gap: 4px;
}

.status-date > span {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rn-text-soft);
}

.renewal-line {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}

.renewal-line .tag {
  padding: 3px 8px;
}