/* =========================================
   1. SISTEMA DE VARIABLES (SPACE EDITION)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;500;600;700;800&family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

:root {
    /* ✨ TEMA CLARO - LUXURY EDITION */
    --primary: #C5A02B;
    /* Dorado Elegante */
    --primary-light: color-mix(in srgb, var(--primary), white 25%);
    --primary-dark: color-mix(in srgb, var(--primary), black 15%);
    --nav-active: var(--primary);

    --bg-body: #F8FAFC;
    --bg-sidebar: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-input: #F1F5F9;

    --text-main: #0F172A;
    --text-muted: #475569;
    /* Oscurecido para mejor legibilidad en modo claro */
    --border-color: #E2E8F0;

    --shadow-card: 0 10px 30px -5px rgba(0, 0, 0, 0.04), 0 4px 12px -2px rgba(0, 0, 0, 0.02);
    --shadow-glow: 0 0 0 0 transparent;

    /* Fuentes */
    --font-display: 'Outfit', 'Sora', sans-serif;
    --font-serif: 'Playfair Display', serif;

    /* Glow Effects */
    --glow-primary: color-mix(in srgb, var(--primary), transparent 85%);
    --glow-secondary: color-mix(in srgb, var(--primary-light), transparent 90%);

    --sidebar-width: 18rem;
    --radius-xl: 1.5rem;
    --radius-2xl: 2rem;
}


/* 🌙 TEMA OSCURO ALPHA (LUXURY DARK) */

[data-theme="dark"],
html.dark {
    /* Auto-dark mode for native controls */
    color-scheme: dark;

    --bg-body: #050507;
    /* Casi negro absoluto para contraste infinito */
    --bg-sidebar: rgba(10, 10, 12, 0.6);
    --bg-card: rgba(18, 18, 23, 0.65);
    --bg-input: rgba(255, 255, 255, 0.04);
    --text-main: #F8FAFC;
    --text-muted: #94A3B8;
    --border-color: rgba(255, 255, 255, 0.06);
    --shadow-card: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
    --shadow-glow: 0 0 20px -5px color-mix(in srgb, var(--primary), transparent 90%);

    /* En modo oscuro, el "claro" del degradado es un poco más vibrante */
    --primary-dark: color-mix(in srgb, var(--primary), black 20%);
    --primary-light: color-mix(in srgb, var(--primary), white 10%);

    /* Deep Space Glows */
    --glow-primary: color-mix(in srgb, var(--primary), transparent 80%);
    --glow-secondary: color-mix(in srgb, var(--primary-light), transparent 85%);
}



/* Reset y Base */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background-color: var(--bg-body);
    background-image:
        radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--primary), transparent 97%) 0%, transparent 50%),
        radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--primary-light), transparent 97%) 0%, transparent 50%);
    color: var(--text-main);
    font-family: var(--font-display);
    transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1), color 0.4s ease;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Clases de Utilidad Especiales */
.glass {
    backdrop-filter: blur(25px) saturate(180%);
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-main);
}

/* Fondo espacial aplicado automáticamente en modo oscuro */
html.dark body {
    background-color: var(--bg-body);
    background-image:
        radial-gradient(circle at 10% 20%, color-mix(in srgb, var(--primary), transparent 92%) 0%, transparent 40%),
        radial-gradient(circle at 90% 80%, color-mix(in srgb, var(--primary-light), transparent 94%) 0%, transparent 40%);
    background-attachment: fixed;
}



.neomorphism-card {
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

.text-gradient {
    background: linear-gradient(to right, var(--primary), var(--primary-light));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.color-main {
    color: var(--text-main);
}

.hidden {
    display: none;
}