/* ══════════════════════════════════════════════════════════════════
   👑 QUIROMANCIA SUPREMA — IMPERIAL LAYER v12.0
   Identidad cromática definitiva: PÚRPURA REAL × ORO IMPERIAL
   Se carga la ÚLTIMA: redefine las variables raíz y añade
   materialidad (foil dorado, terciopelo, ornamentos, realeza).
   ══════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════
   1 · PALETA IMPERIAL — TEMA OSCURO
   ═══════════════════════════════════════════ */
:root {
    /* Púrpuras reales */
    --imp-purple-950: #10041f;
    --imp-purple-900: #1a0733;
    --imp-purple-800: #260c4a;
    --imp-purple-700: #351263;
    --imp-purple-600: #4c1d95;
    --imp-purple-500: #6d28d9;
    --imp-purple-400: #8b5cf6;
    --imp-purple-300: #a78bfa;
    --imp-purple-200: #c4b5fd;

    /* Oros imperiales */
    --imp-gold-900: #6b4a06;
    --imp-gold-700: #a37a12;
    --imp-gold-600: #c9a227;
    --imp-gold-500: #d4af37;   /* oro clásico */
    --imp-gold-400: #e8c766;
    --imp-gold-300: #f4dd9a;
    --imp-gold-200: #fbf0cd;

    /* Degradados firma */
    --imp-grad-royal: linear-gradient(135deg, #4c1d95 0%, #6d28d9 45%, #a78bfa 100%);
    --imp-grad-gold: linear-gradient(135deg, #a37a12 0%, #d4af37 28%, #fbf0cd 50%, #d4af37 72%, #a37a12 100%);
    --imp-grad-regal: linear-gradient(120deg, #260c4a 0%, #4c1d95 40%, #a37a12 78%, #d4af37 100%);
    --imp-grad-velvet: linear-gradient(165deg, rgba(38,12,74,0.96), rgba(16,4,31,0.98));

    /* Sombras / halos */
    --imp-glow-gold: 0 0 24px rgba(212, 175, 55, 0.45);
    --imp-glow-purple: 0 0 26px rgba(139, 92, 246, 0.42);
    --imp-shadow-deep: 0 18px 48px -12px rgba(5, 0, 15, 0.85);
    --imp-hairline: 1px solid rgba(212, 175, 55, 0.24);

    /* ── Remapeo del sistema existente ── */
    --primary: #7c3aed;
    --primary-dark: #4c1d95;
    --primary-light: #a78bfa;
    --secondary: #6d28d9;
    --accent: #d4af37;
    --accent-glow: #f4dd9a;
    --accent-dark: #a37a12;
    --cosmic-purple: #6d28d9;
    --cosmic-gold: #d4af37;
    --neon-purple: #a855f7;
    --neon-gold: #f4dd9a;

    --dark: #0b0217;
    --dark-mid: #14062a;
    --dark-light: #1e0a3d;
    --dark-card: #180830;
    --dark-card-hover: #241046;

    --text: #f3ecff;
    --text-muted: #b7a4dd;
    --text-dim: #7c6aa6;

    --border: rgba(212, 175, 55, 0.20);
    --glass: rgba(24, 8, 48, 0.86);
    --glass-light: rgba(167, 139, 250, 0.09);

    --glow-primary: 0 0 22px rgba(124, 58, 237, 0.42);
    --glow-accent: var(--imp-glow-gold);

    --shadow-card: 0 10px 34px -10px rgba(5, 0, 15, 0.75);
    --shadow-hover: 0 20px 52px -14px rgba(124, 58, 237, 0.55);

    --ease-regal: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ═══════════════════════════════════════════
   2 · PALETA IMPERIAL — TEMA CLARO (pergamino real)
   ═══════════════════════════════════════════ */
[data-theme="light"] {
    --dark: #fbf7ff;
    --dark-mid: #f3ecfd;
    --dark-light: #ece0fb;
    --dark-card: #ffffff;
    --dark-card-hover: #faf5ff;

    --text: #2a1055;
    --text-muted: #5f4a8c;
    --text-dim: #8b7ab0;

    --accent: #9a7409;
    --accent-glow: #c9a227;
    --accent-dark: #6b4a06;
    --primary: #6d28d9;
    --primary-light: #7c3aed;

    --border: rgba(154, 116, 9, 0.24);
    --glass: rgba(255, 255, 255, 0.93);
    --glass-light: rgba(109, 40, 217, 0.06);

    --imp-grad-velvet: linear-gradient(165deg, #ffffff, #f6efff);
    --imp-shadow-deep: 0 16px 40px -14px rgba(74, 30, 140, 0.28);
    --shadow-card: 0 8px 26px -8px rgba(74, 30, 140, 0.18);
    --shadow-hover: 0 18px 44px -12px rgba(109, 40, 217, 0.28);
}

/* ═══════════════════════════════════════════
   3 · FONDO REGIO — terciopelo + luz de trono
   ═══════════════════════════════════════════ */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    background:
        radial-gradient(90rem 55rem at 50% -18%, rgba(124, 58, 237, 0.30), transparent 62%),
        radial-gradient(60rem 40rem at 8% 108%, rgba(212, 175, 55, 0.13), transparent 66%),
        radial-gradient(52rem 38rem at 96% 8%, rgba(168, 85, 247, 0.16), transparent 62%),
        var(--dark);
}
[data-theme="light"] body::before {
    background:
        radial-gradient(90rem 55rem at 50% -18%, rgba(124, 58, 237, 0.13), transparent 62%),
        radial-gradient(60rem 40rem at 8% 108%, rgba(212, 175, 55, 0.16), transparent 66%),
        var(--dark);
}

/* Trama sutil de damasco real (SVG inline, sin peticiones) */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -3;
    pointer-events: none;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='0.7'%3E%3Cpath d='M36 4c9 10 9 22 0 32-9-10-9-22 0-32zM36 36c9 10 9 22 0 32-9-10-9-22 0-32z'/%3E%3Ccircle cx='36' cy='36' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 72px 72px;
}

/* ═══════════════════════════════════════════
   4 · TIPOGRAFÍA CON FOIL DORADO
   ═══════════════════════════════════════════ */
.portal-title,
.section-title,
.disclaimer-title {
    background: var(--imp-grad-gold);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: impFoilSweep 7s linear infinite;
    filter: drop-shadow(0 2px 10px rgba(212, 175, 55, 0.28));
}
@keyframes impFoilSweep {
    to { background-position: 250% center; }
}
.section-title i,
.disclaimer-title i {
    -webkit-text-fill-color: var(--imp-gold-500);
    color: var(--imp-gold-500);
}

/* Ornamento heráldico bajo los títulos de sección */
.section-title {
    position: relative;
    padding-bottom: 0.7em;
}
.section-title::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0.15em;
    transform: translateX(-50%);
    width: min(320px, 62%);
    height: 12px;
    background:
        radial-gradient(circle at 50% 50%, var(--imp-gold-500) 0 2.6px, transparent 3px),
        linear-gradient(90deg, transparent, rgba(212,175,55,0.75) 22%, rgba(212,175,55,0.75) 78%, transparent);
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 1px;
    background-position: center, center;
    opacity: 0.85;
}

/* ═══════════════════════════════════════════
   5 · SUPERFICIES: tarjetas con canto de oro
   ═══════════════════════════════════════════ */
.cosmos-card,
.analysis-card,
.about-card,
.stat-card,
.result-card,
.guide-step,
.line-guide-card,
.mount-guide-card,
.tradition-detail-card,
.results-header {
    position: relative;
    background: var(--imp-grad-velvet);
    border: 1px solid rgba(212, 175, 55, 0.18);
    box-shadow: var(--shadow-card), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
[data-theme="light"] .cosmos-card,
[data-theme="light"] .analysis-card,
[data-theme="light"] .about-card,
[data-theme="light"] .stat-card,
[data-theme="light"] .result-card,
[data-theme="light"] .results-header {
    background: linear-gradient(165deg, #ffffff, #faf5ff);
    border-color: rgba(154, 116, 9, 0.22);
}

/* Hilo de oro superior en las tarjetas cósmicas */
.cosmos-card::after {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background: var(--imp-grad-gold);
    background-size: 250% auto;
    opacity: 0.85;
    animation: impFoilSweep 9s linear infinite;
    pointer-events: none;
}

/* ═══════════════════════════════════════════
   6 · BOTONES DE ORO MACIZO
   ═══════════════════════════════════════════ */
.btn-primary,
.oracle-spread-btn.primary,
.btn-accept {
    position: relative;
    background: var(--imp-grad-gold);
    background-size: 220% auto;
    color: #2a1055 !important;
    font-weight: 700;
    letter-spacing: 0.02em;
    border: 1px solid rgba(255, 240, 200, 0.55);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.65),
        inset 0 -3px 8px rgba(107, 74, 6, 0.35),
        0 10px 26px -8px rgba(212, 175, 55, 0.55);
    transition: transform 0.32s var(--ease-regal), box-shadow 0.32s var(--ease-regal), background-position 0.6s ease;
    overflow: hidden;
}
.btn-primary:hover,
.oracle-spread-btn.primary:hover,
.btn-accept:not(:disabled):hover {
    background-position: 100% center;
    transform: translateY(-3px);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.75),
        inset 0 -3px 8px rgba(107, 74, 6, 0.30),
        0 18px 38px -10px rgba(212, 175, 55, 0.7);
}
.btn-primary:active,
.oracle-spread-btn.primary:active { transform: translateY(-1px) scale(0.985); }
.btn-primary i,
.oracle-spread-btn.primary i { color: #3b1a70; }

/* Destello que cruza el botón */
.btn-primary::after,
.oracle-spread-btn.primary::after {
    content: '';
    position: absolute;
    top: -60%;
    left: -30%;
    width: 28%;
    height: 220%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.55), transparent);
    transform: rotate(18deg);
    animation: impShine 5.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes impShine {
    0%, 62% { left: -35%; }
    88%, 100% { left: 125%; }
}

/* Botones secundarios: púrpura con canto dorado */
.oracle-spread-btn:not(.primary),
.btn-secondary,
.btn-social-card {
    background: linear-gradient(160deg, rgba(76, 29, 149, 0.55), rgba(26, 7, 51, 0.7));
    border: 1px solid rgba(212, 175, 55, 0.32);
    color: var(--imp-gold-300);
    transition: var(--transition);
}
.oracle-spread-btn:not(.primary):hover,
.btn-secondary:hover,
.btn-social-card:hover {
    border-color: var(--imp-gold-500);
    color: var(--imp-gold-200);
    box-shadow: var(--imp-glow-gold);
    transform: translateY(-2px);
}

/* ═══════════════════════════════════════════
   7 · NAVEGACIÓN REGIA
   ═══════════════════════════════════════════ */
.main-nav {
    background: var(--glass);
    border-bottom: 1px solid rgba(212, 175, 55, 0.22);
    box-shadow: 0 8px 30px -14px rgba(0, 0, 0, 0.7);
}
.main-nav::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212,175,55,0.75), transparent);
}
.nav-title {
    background: var(--imp-grad-gold);
    background-size: 250% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: impFoilSweep 8s linear infinite;
    font-weight: 700;
}
.nav-link.active {
    color: var(--imp-gold-300);
}
.nav-link.active::after {
    background: var(--imp-grad-gold) !important;
}

/* Pestañas cósmicas — activa en oro */
.cosmos-tab.active,
.guide-tab.active {
    background: var(--imp-grad-gold) !important;
    background-size: 200% auto !important;
    color: #2a1055 !important;
    box-shadow: 0 8px 22px -8px rgba(212, 175, 55, 0.7);
    text-shadow: none;
}
.cosmos-tab.active span,
.guide-tab.active span { color: #2a1055; }
.cosmos-tabs {
    border-color: rgba(212, 175, 55, 0.22);
}

/* ═══════════════════════════════════════════
   8 · SELLO REAL — insignia flotante v12
   ═══════════════════════════════════════════ */
.imperial-seal {
    position: fixed;
    right: 18px;
    bottom: 96px;
    width: 54px;
    height: 54px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #f4dd9a, #d4af37 46%, #8a6410 100%);
    color: #2a1055;
    font-family: var(--font-display, 'Cinzel', serif);
    font-weight: 800;
    font-size: 0.82rem;
    letter-spacing: 0.02em;
    border: 2px solid rgba(255, 240, 200, 0.7);
    box-shadow: 0 10px 26px -8px rgba(212, 175, 55, 0.75), inset 0 -4px 10px rgba(107, 74, 6, 0.5);
    cursor: pointer;
    z-index: 60;
    animation: impSealFloat 5s ease-in-out infinite;
    transition: transform 0.4s var(--ease-regal);
}
.imperial-seal:hover { transform: scale(1.12) rotate(-8deg); }
.imperial-seal:focus-visible { outline: 3px solid var(--imp-purple-300); outline-offset: 3px; }
@keyframes impSealFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}
@media (max-width: 820px) {
    .imperial-seal { bottom: calc(76px + env(safe-area-inset-bottom, 0px)); width: 46px; height: 46px; font-size: 0.72rem; }
}

/* ═══════════════════════════════════════════
   9 · MÓDULO: CIELO AHORA (skynow)
   ═══════════════════════════════════════════ */
.sky-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: 18px;
}
.sky-coords {
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    color: var(--text-muted);
    background: rgba(212, 175, 55, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 999px;
    padding: 6px 14px;
}
.sky-dome-wrap {
    position: relative;
    width: 100%;
    max-width: 560px;
    margin: 0 auto 20px;
}
.sky-dome-wrap svg { width: 100%; height: auto; display: block; }

.sky-body-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    gap: 10px;
}
.sky-body-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 14px;
    background: rgba(124, 58, 237, 0.08);
    border: 1px solid rgba(212, 175, 55, 0.14);
    transition: transform 0.28s var(--ease-regal), border-color 0.28s ease;
}
.sky-body-row:hover { transform: translateX(4px); border-color: rgba(212, 175, 55, 0.42); }
.sky-body-row.is-up { background: rgba(212, 175, 55, 0.10); }
.sky-body-row.is-down { opacity: 0.55; }
.sky-body-sym { font-size: 1.3rem; width: 1.6em; text-align: center; color: var(--imp-gold-400); }
.sky-body-name { flex: 1; font-weight: 600; font-size: 0.92rem; }
.sky-body-alt {
    font-family: 'Courier New', monospace;
    font-size: 0.8rem;
    color: var(--imp-gold-300);
}
.sky-body-dir { font-size: 0.72rem; color: var(--text-muted); }

.sky-events {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 18px;
}
.sky-event {
    text-align: center;
    padding: 14px 10px;
    border-radius: 16px;
    background: linear-gradient(160deg, rgba(76,29,149,0.35), rgba(16,4,31,0.5));
    border: 1px solid rgba(212, 175, 55, 0.18);
}
[data-theme="light"] .sky-event { background: linear-gradient(160deg, #f6efff, #ffffff); }
.sky-event-ico { font-size: 1.5rem; display: block; margin-bottom: 4px; }
.sky-event-val { font-family: var(--font-display, 'Cinzel', serif); font-size: 1.25rem; color: var(--imp-gold-400); font-weight: 700; }
.sky-event-lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }

.sky-note {
    font-size: 0.76rem;
    color: var(--text-dim);
    margin-top: 14px;
    line-height: 1.6;
}

/* ═══════════════════════════════════════════
   10 · MÓDULO: MANDALA SAGRADO
   ═══════════════════════════════════════════ */
.mandala-stage {
    display: grid;
    place-items: center;
    padding: 18px;
    border-radius: 24px;
    background: radial-gradient(circle at 50% 40%, rgba(124,58,237,0.18), rgba(11,2,23,0.6) 70%);
    border: 1px solid rgba(212, 175, 55, 0.2);
    margin-bottom: 16px;
}
[data-theme="light"] .mandala-stage {
    background: radial-gradient(circle at 50% 40%, rgba(124,58,237,0.08), #ffffff 70%);
}
#mandalaCanvas {
    width: min(100%, 440px);
    height: auto;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    box-shadow: 0 0 44px -6px rgba(212, 175, 55, 0.45), inset 0 0 40px rgba(0,0,0,0.4);
    animation: mandalaBirth 1.1s var(--ease-regal) both;
}
@keyframes mandalaBirth {
    from { opacity: 0; transform: scale(0.82) rotate(-14deg); }
    to   { opacity: 1; transform: scale(1) rotate(0); }
}
.mandala-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 14px;
}
.mandala-chip {
    font-size: 0.76rem;
    padding: 5px 12px;
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.10);
    border: 1px solid rgba(212, 175, 55, 0.3);
    color: var(--imp-gold-300);
    font-family: 'Courier New', monospace;
}

/* ═══════════════════════════════════════════
   11 · MÓDULO: CÓDICE PERSONAL (radar)
   ═══════════════════════════════════════════ */
.codex-layout {
    display: grid;
    grid-template-columns: minmax(0, 360px) 1fr;
    gap: 24px;
    align-items: center;
}
@media (max-width: 760px) {
    .codex-layout { grid-template-columns: 1fr; }
}
#codexRadar { width: 100%; height: auto; aspect-ratio: 1 / 1; }

.codex-scores { display: flex; flex-direction: column; gap: 10px; }
.codex-score-row { display: grid; grid-template-columns: 1.4em 1fr auto; gap: 10px; align-items: center; font-size: 0.88rem; }
.codex-score-bar {
    height: 9px;
    border-radius: 999px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.45);
}
[data-theme="light"] .codex-score-bar { background: rgba(42,16,85,0.10); }
.codex-score-fill {
    height: 100%;
    border-radius: 999px;
    background: var(--imp-grad-gold);
    background-size: 200% auto;
    transform-origin: left;
    animation: codexGrow 1s var(--ease-regal) both, impFoilSweep 6s linear infinite;
}
@keyframes codexGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.codex-score-val { font-family: 'Courier New', monospace; color: var(--imp-gold-300); font-size: 0.82rem; min-width: 3.2em; text-align: right; }

.codex-verdict {
    margin-top: 20px;
    padding: 18px 20px;
    border-radius: 18px;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: linear-gradient(150deg, rgba(76,29,149,0.30), rgba(212,175,55,0.07));
    line-height: 1.75;
}
[data-theme="light"] .codex-verdict { background: linear-gradient(150deg, #f7f1ff, #fffaf0); }
.codex-verdict h4 {
    font-family: var(--font-display, 'Cinzel', serif);
    color: var(--imp-gold-400);
    margin: 0 0 8px;
    font-size: 1.05rem;
}
.codex-archetype {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display, 'Cinzel', serif);
    font-size: 1.4rem;
    background: var(--imp-grad-gold);
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: impFoilSweep 6s linear infinite;
    margin-bottom: 6px;
}

/* ═══════════════════════════════════════════
   12 · Estados vacíos y avisos
   ═══════════════════════════════════════════ */
.imp-empty {
    text-align: center;
    padding: 26px 18px;
    color: var(--text-muted);
    font-size: 0.92rem;
    border: 1px dashed rgba(212, 175, 55, 0.28);
    border-radius: 18px;
    background: rgba(212, 175, 55, 0.04);
}
.imp-loading {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--imp-gold-300);
    font-size: 0.9rem;
}
.imp-spinner {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.25);
    border-top-color: var(--imp-gold-500);
    animation: impSpin 0.8s linear infinite;
}
@keyframes impSpin { to { transform: rotate(360deg); } }

/* ═══════════════════════════════════════════
   13 · Scrollbar y selección regias
   ═══════════════════════════════════════════ */
::selection { background: rgba(212, 175, 55, 0.35); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--dark-mid); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--imp-purple-500), var(--imp-gold-700));
    border-radius: 999px;
    border: 2px solid var(--dark-mid);
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--imp-purple-400), var(--imp-gold-500)); }

/* ═══════════════════════════════════════════
   14 · Accesibilidad y motion
   ═══════════════════════════════════════════ */
:focus-visible {
    outline: 2px solid var(--imp-gold-500);
    outline-offset: 3px;
    border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
    .portal-title, .section-title, .nav-title, .codex-score-fill,
    .cosmos-card::after, .codex-archetype { animation: none !important; }
    .btn-primary::after, .oracle-spread-btn.primary::after { display: none; }
    .imperial-seal { animation: none !important; }
    #mandalaCanvas { animation: none !important; }
}

/* Impresión: tinta sobria */
@media print {
    body::before, body::after, .imperial-seal { display: none !important; }
    .portal-title, .section-title { -webkit-text-fill-color: #4c1d95; color: #4c1d95; }
}