/* ============================================================================
   THEME · GLASS FUTURISTA
   ----------------------------------------------------------------------------
   Cristales translúcidos, gradientes rosa→violeta→cyan, fondo claro.
   ============================================================================ */

:root {

    /* ─── Tipografía ──────────────────────────────────────────────────── */
    --font-sans:    'Inter', system-ui, -apple-system, sans-serif;
    --font-display: 'Instrument Serif', Georgia, serif;
    --font-mono:    'JetBrains Mono', ui-monospace, monospace;

    /* ─── Fondo ambiental ─────────────────────────────────────────────── */
    --bg-base:
        radial-gradient(circle at 15% 20%, #ffe4ec 0%, transparent 45%),
        radial-gradient(circle at 85% 30%, #ede0ff 0%, transparent 45%),
        radial-gradient(circle at 50% 90%, #d4f1f9 0%, transparent 45%),
        linear-gradient(135deg, #fdf7fb 0%, #f5f0ff 50%, #ecf7fc 100%);

    /* ─── Acentos (gradiente firma) ───────────────────────────────────── */
    --accent-1: #ec4899;   /* rosa */
    --accent-2: #a855f7;   /* violeta */
    --accent-3: #06b6d4;   /* cyan */
    --accent-1-soft: rgba(236, 72, 153, 0.18);
    --accent-2-soft: rgba(168, 85, 247, 0.18);
    --accent-3-soft: rgba(6, 182, 212, 0.18);

    --accent-gradient:       linear-gradient(135deg, #ec4899 0%, #a855f7 50%, #06b6d4 100%);
    --accent-gradient-soft:  linear-gradient(135deg, rgba(236,72,153,0.10) 0%, rgba(168,85,247,0.10) 50%, rgba(6,182,212,0.10) 100%);
    --accent-text: #ffffff;

    /* ─── Texto ───────────────────────────────────────────────────────── */
    --text-primary: #1a1a2e;
    --text-muted:   #6b6b8a;
    --text-faint:   #b4b4c8;
    --text-on-accent: #ffffff;

    /* ─── Superficies (cristales) ─────────────────────────────────────── */
    --surface:        rgba(255, 255, 255, 0.65);
    --surface-blur:   blur(20px) saturate(180%);
    --surface-flat:   rgba(255, 255, 255, 0.55);
    --surface-hover:  rgba(255, 255, 255, 0.80);
    --surface-strong: rgba(255, 255, 255, 0.85);

    --surface-border: 1px solid rgba(255, 255, 255, 0.9);

    /* ─── Bordes ──────────────────────────────────────────────────────── */
    --border-faint:  rgba(168, 85, 247, 0.08);
    --border-subtle: rgba(168, 85, 247, 0.15);
    --border-strong: rgba(168, 85, 247, 0.30);

    /* ─── Sombras flotantes ───────────────────────────────────────────── */
    --shadow-card:
        0 1px 2px rgba(168, 85, 247, 0.04),
        0 8px 24px rgba(168, 85, 247, 0.08),
        0 16px 48px rgba(236, 72, 153, 0.04);
    --shadow-card-hover:
        0 2px 4px rgba(168, 85, 247, 0.06),
        0 16px 40px rgba(168, 85, 247, 0.12),
        0 24px 64px rgba(236, 72, 153, 0.08);

    --shadow-accent:
        0 4px 16px rgba(168, 85, 247, 0.35),
        0 1px 2px rgba(236, 72, 153, 0.2);
    --shadow-accent-hover:
        0 8px 24px rgba(168, 85, 247, 0.45),
        0 4px 8px rgba(236, 72, 153, 0.3);

    /* ─── Inputs ──────────────────────────────────────────────────────── */
    --input-bg:        rgba(255, 255, 255, 0.6);
    --input-bg-focus:  rgba(255, 255, 255, 0.85);
    --input-border:    rgba(168, 85, 247, 0.20);
    --focus-ring:      rgba(168, 85, 247, 0.20);

    /* ─── Nav activo ──────────────────────────────────────────────────── */
    --nav-active-bg:     linear-gradient(135deg, rgba(236,72,153,0.10), rgba(168,85,247,0.10), rgba(6,182,212,0.10));
    --nav-active-text:   #1a1a2e;
    --nav-active-border: rgba(168, 85, 247, 0.25);

    /* ─── Estados semánticos ──────────────────────────────────────────── */
    --success-bg:     rgba(16, 185, 129, 0.10);
    --success-text:   #047857;
    --success-border: rgba(16, 185, 129, 0.25);

    --warn-bg:     rgba(245, 158, 11, 0.10);
    --warn-text:   #b45309;
    --warn-border: rgba(245, 158, 11, 0.25);

    --danger-bg:        rgba(244, 63, 94, 0.10);
    --danger-bg-hover:  rgba(244, 63, 94, 0.18);
    --danger-text:      #be123c;
    --danger-border:    rgba(244, 63, 94, 0.25);

    --info-bg:     rgba(99, 102, 241, 0.10);
    --info-text:   #4338ca;
    --info-border: rgba(99, 102, 241, 0.25);

    /* ─── Scrollbar ───────────────────────────────────────────────────── */
    --scrollbar-thumb:       rgba(168, 85, 247, 0.25);
    --scrollbar-thumb-hover: rgba(168, 85, 247, 0.40);

    /* ─── Radii ───────────────────────────────────────────────────────── */
    --radius-sm: 0.5rem;
    --radius-md: 0.875rem;
    --radius-lg: 1.25rem;
    --radius-xl: 2rem;
}

/* ─── Decoración ambiental para glass ──────────────────────────────────
   Manchas de color flotantes que dan la sensación "futurista".
   Se inyectan como ::before/::after del body via clase.
   ──────────────────────────────────────────────────────────────────── */

body.theme-bg::before,
body.theme-bg::after {
    content: '';
    position: fixed;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
}
body.theme-bg::before {
    top: -10%;
    left: -10%;
    width: 50vw;
    height: 50vw;
    background: radial-gradient(circle, #ec4899 0%, transparent 70%);
    animation: float 12s ease-in-out infinite;
}
body.theme-bg::after {
    bottom: -15%;
    right: -10%;
    width: 55vw;
    height: 55vw;
    background: radial-gradient(circle, #06b6d4 0%, transparent 70%);
    animation: float 14s ease-in-out infinite reverse;
}

/* ─── Brand logo en glass ──────────────────────────────────────────────
   Un cuadro con el gradiente firma; usado en sidebar y login.
   ──────────────────────────────────────────────────────────────────── */
.brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--accent-gradient);
    color: white;
    font-family: var(--font-display);
    font-style: italic;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-accent);
}