/* ============================================================
   ALMAS EN RUTA — Modo oscuro (gris grafito, no negro)
   Se activa con <html data-tema="oscuro">. Un script en el <head>
   lo decide antes de pintar: preferencia guardada ("almas-tema") o,
   si no hay, la del sistema. El botón sol/luna lo cambia.
   Cubre la portada y destinos (.ar) y el portal/admin (vistas #view-*).
   ============================================================ */

/* ── Paleta grafito ── */
html[data-tema="oscuro"] {
  color-scheme: dark;
  --g-bg: #1D2024;
  --g-card: #272A2F;
  --g-elev: #30343A;
  --g-line: #3B4048;
  --g-text: #ECEEF1;
  --g-text2: #C5CAD1;
  --g-muted: #9EA5AE;
  --g-gold: #D4A75C;
  --g-gold-text: #E4C07A;
  --g-gold-deep: #E2B865;
  --g-tint: #FFFFFF12;
  --g-shadow: 0 10px 30px #00000040;
  --g-footer: #17191C;
  background: var(--g-bg);
}
html[data-tema="oscuro"] body { background: var(--g-bg) }

/* Transición suave al cambiar de tema (solo durante el cambio) */
html.tema-anim, html.tema-anim *, html.tema-anim *::before { transition: background-color .35s ease, color .35s ease, border-color .35s ease, box-shadow .35s ease !important }
@media (prefers-reduced-motion: reduce) { html.tema-anim, html.tema-anim *, html.tema-anim *::before { transition: none !important } }

/* ── Botón sol / luna ── */
.tema-sol { display: none }
html[data-tema="oscuro"] .tema-sol { display: inline-flex }
html[data-tema="oscuro"] .tema-luna { display: none }
.tema-sol, .tema-luna { align-items: center; justify-content: center }
.tema-luna { display: inline-flex }
.ar-tema-btn, .pa-tema-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: inherit; cursor: pointer; flex-shrink: 0; transition: background-color .25s ease, transform .3s cubic-bezier(.2, .8, .2, 1) }
.ar-tema-btn svg, .pa-tema-btn svg { width: 18px; height: 18px; transition: transform .45s cubic-bezier(.2, .8, .2, 1) }
.ar-tema-btn:hover svg, .pa-tema-btn:hover svg { transform: rotate(-18deg) }
.ar-tema-btn { color: var(--ar-ink) }
.ar-tema-btn:hover { background: #0F1E3C14 }
.pa-tema-btn--on { color: #FFFFFF }
.pa-tema-btn--on:hover { background: #FFFFFF1F }
@media (hover: none) { .ar-tema-btn:hover, .pa-tema-btn:hover { background: transparent } }

/* ============================================================
   1) PORTADA Y DESTINOS (.ar)
   ============================================================ */
html[data-tema="oscuro"] .ar {
  --ar-bg: var(--g-bg);
  --ar-card: var(--g-card);
  --ar-ink: var(--g-text);
  --ar-navy: #C9D6E6;
  --ar-gold-text: var(--g-gold-text);
  --ar-gold-deep: var(--g-gold-deep);
  --ar-muted: var(--g-muted);
  --ar-line: var(--g-line);
  --ar-soft: #E4C07A1F;
}
html[data-tema="oscuro"] body.ar-page { background: var(--g-bg) }
html[data-tema="oscuro"] .ar-nav { background: #1D2024D9 }
html[data-tema="oscuro"] .ar-nav.ar-scrolled { background: #1D2024F2; box-shadow: 0 1px 0 #FFFFFF0D, 0 8px 24px -16px #000000B3 }
html[data-tema="oscuro"] .ar-links a { color: #ECEEF1B3; --ar-link: #ECEEF1B3 }
html[data-tema="oscuro"] .ar-links a::before { background: var(--g-tint) }
html[data-tema="oscuro"] .ar-links a:hover { color: var(--g-text); --ar-link-hover: var(--g-text) }
html[data-tema="oscuro"] .ar-links a[aria-current="page"] { color: var(--g-gold-text); --ar-link: var(--g-gold-text); --ar-link-hover: var(--g-gold-text) }
html[data-tema="oscuro"] .ar-links a[aria-current="page"]::before { background: #E4C07A24 }
html[data-tema="oscuro"] .ar-menu-btn:hover, html[data-tema="oscuro"] .ar-btn-quiet:hover, html[data-tema="oscuro"] .ar-tema-btn:hover { background: var(--g-tint) }
/* Botones que eran azul marino: en oscuro, píldora clara */
html[data-tema="oscuro"] .ar-btn-cta, html[data-tema="oscuro"] .ar-btn-ink { background: #ECEEF1; color: #1D2024; --ar-link: #1D2024 }
html[data-tema="oscuro"] .ar-btn-cta svg { color: #A0732B }
html[data-tema="oscuro"] .ar-btn-cta:hover, html[data-tema="oscuro"] .ar-btn-ink:hover { background: #FFFFFF; box-shadow: 0 10px 22px -12px #000000CC }
html[data-tema="oscuro"] .ar-btn-white { color: #1D2024; --ar-link: #1D2024 }
html[data-tema="oscuro"] .ar-chips button { box-shadow: inset 0 0 0 1px var(--g-line) }
html[data-tema="oscuro"] .ar-chips button[aria-pressed="true"], html[data-tema="oscuro"] .ar-tabs button[aria-selected="true"] { background: #ECEEF1; color: #1D2024 }
/* Tarjetas: sombra adaptada al fondo oscuro */
html[data-tema="oscuro"] .ar-dcard, html[data-tema="oscuro"] .ar-helpcard { box-shadow: var(--g-shadow) }
html[data-tema="oscuro"] .ar-dcard:hover { box-shadow: 0 18px 40px #00000059 }
html[data-tema="oscuro"] .ar-jmj { background: #F1F2F4 }  /* el logotipo JMJ necesita fondo claro */
html[data-tema="oscuro"] .ar-navy { background: #14263F }
html[data-tema="oscuro"] .ar-opt { background: var(--g-elev) }
html[data-tema="oscuro"] .ar-n-navy { background: #2F4D73 }
html[data-tema="oscuro"] .ar-bar-wa { background: #22344F }
html[data-tema="oscuro"] .ar-footer { background: var(--g-footer) }
html[data-tema="oscuro"] .ar-ok.ar-err { background: #3D2523; color: #F5B7B1 }
html[data-tema="oscuro"] .ar-form input::placeholder { color: #8A919B }
html[data-tema="oscuro"] .ar-skip { background: #ECEEF1; color: #1D2024 }
html[data-tema="oscuro"] .ar-wa-float span { box-shadow: 0 6px 20px #00000059 }
html[data-tema="oscuro"] .ar-nav.ar-open .ar-links { background: var(--g-bg); box-shadow: 0 18px 30px -18px #000000CC }

/* ============================================================
   2) PORTAL DEL VIAJERO Y PANEL ADMIN
   Reasigna también las variables viejas (components.css y estilos
   en línea de main.js): fondos, textos, bordes y avisos.
   ============================================================ */
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) {
  --pa-ink: var(--g-text);
  --pa-muted: var(--g-muted);
  --pa-line: var(--g-line);
  --pa-cream: var(--g-bg);
  --pa-tint: var(--g-tint);
  --pa-gold-text: var(--g-gold-text);
  --pa-gold-deep: var(--g-gold-deep);
  --bg-body: var(--g-bg);
  --bg-card: var(--g-card);
  --bg-surface: var(--g-elev);
  --bg-surface-alt: #2E2B25;
  --text-primary: var(--g-text);
  --text-secondary: var(--g-text2);
  --text-muted: var(--g-muted);
  --color-border: var(--g-line);
  --color-secondary: #2C4C77;
  --color-primary-dark: var(--g-gold-text);
  --color-success: #5CC08A;
  --color-success-light: #1F3A2B;
  --color-error: #F08A80;
  --color-error-light: #3D2523;
  --color-warning-light: #3A321C;
  --color-warning: #F2C66D;
  --color-accent: #8FB0D6;
  --color-accent-light: #A9C3E2;
  --shadow-md: var(--g-shadow);
  --shadow-lg: 0 18px 40px #00000059;
  background: var(--g-bg);
  color: var(--g-text);
}
/* Barra superior */
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-bar { background: #1D2024E6; box-shadow: 0 1px 0 #FFFFFF0D }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button { color: #ECEEF1B3 }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button:hover { color: var(--g-text) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button.active { color: var(--g-gold-text) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button.active::before { background: #E4C07A24 }
@media (hover: none) { html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-tabs > button:not(.active):hover { color: #ECEEF1B3 } }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-avatar i { box-shadow: 0 0 0 3px var(--g-bg) }
/* Tarjetas y superficies */
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .login-card, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-traveler-card, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-comprobante-card, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .meeting-card, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .comprobante-upload-card, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-log-card, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-card, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-card, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-table-wrap, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-chat-layout, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-errbox { background: var(--g-card); box-shadow: var(--g-shadow); color: var(--g-text) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-card--gold { background: linear-gradient(160deg, var(--g-card) 0%, #312C22 100%) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-card.selected { box-shadow: 0 0 0 2px var(--g-gold), var(--g-shadow) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-card:hover { box-shadow: 0 16px 36px #00000059 }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .stat-item, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-stat, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-postura, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-hue-card { background: var(--g-elev) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .progress-bar { background: #3A3F47 }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-stat-emoji, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .points-icon, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .boleto-icon, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .extras-card-icon, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .comprobante-item-icon, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-extras-icon, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-itin-emoji { background: #E4C07A1F; color: var(--g-gold-text) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .doc-row, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .boleto-item, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .comprobante-item, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-meeting-row, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-extras-row, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .bank-info-row { border-color: #FFFFFF14 }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .portal-itin-day-badge { background: #ECEEF1; color: #1D2024 }
/* Botones */
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .btn-outline { color: var(--g-text); box-shadow: inset 0 0 0 1.5px var(--g-line) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .config-nav-btn { background: var(--g-card); color: var(--g-text); box-shadow: inset 0 0 0 1px var(--g-line) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .config-nav-btn.active { background: #ECEEF1; color: #1D2024; box-shadow: none }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-quiet { color: var(--g-text) }
/* Campos */
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .form-input, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-extras-price-input { background: #1D2024; border-color: var(--g-line); color: var(--g-text) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .form-input:focus, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-extras-price-input:focus { background: #23262B; border-color: var(--g-gold) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .form-input::placeholder { color: #8A919B }
/* Avisos */
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .alert-warning { color: #F2D08A }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .alert-info { background: #232A3D; color: #AEBBF5 }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .comprobante-preview, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .comprobante-upload-zone { background: var(--g-elev); border-color: var(--g-line) }
/* Pantallas de entrada */
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-main { background: var(--g-bg) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-auth-card { box-shadow: 0 18px 50px -20px #000000B3 }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .pa-help a { color: var(--g-gold-text); text-decoration-color: #E4C07A66 }
/* Etiquetas y cifras con colores fijos de fondo claro */
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .stat-value--navy { color: var(--g-text) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .status-badge--pending, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .status-badge--waiting, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .admin-doc-badge--pending { color: #F2D08A }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .status-badge--locked { background: #E4C07A24; color: var(--g-gold-text) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-tag.PAGO_REPORTADO, html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-tag.PAGO { background: #8FB0D626 }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-code { background: #16181B; color: #E6D8B8 }
/* Etiqueta de grupo: su color lo elige el admin (puede ser negro); en oscuro se aclara */
html[data-tema="oscuro"] .trip-badge { color: color-mix(in srgb, var(--tc) 45%, #FFFFFF); border-color: color-mix(in srgb, var(--tc) 45%, #FFFFFF66); background: color-mix(in srgb, var(--tc) 22%, transparent) }
html[data-tema="oscuro"] .admin-trip-chip:not(.active) { background: var(--g-card); color: var(--g-text); border-color: var(--g-line) }
/* Textos que usan el azul marino como color de letra: en oscuro, gris claro */
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) :is(.admin-stat-value, .bank-info-value, .cc-chat-head, .cc-postura-nm, .meeting-title--upcoming) { color: var(--g-text) }
html[data-tema="oscuro"] :is(#view-login, #view-traveler, #view-admin-login, #view-admin, #view-trip-detail) .cc-log-who { color: var(--g-text2) }