/* =====================================================
   ProSelección Premium Redesign v2.0
   WCAG 2.1 AA · Glassmorphism · Inter Typography
   Feature: feature/wcag-redesign-auto

   CHANGELOG v2:
   - Normalized card heights with Flexbox (buttons pinned to bottom)
   - 8px spacing system throughout
   - Micro-interactions: smooth hover elevation, XP bar animation
   - Elite accessibility: zoom-safe, keyboard-navigable, high contrast
   - Eliminated hover:scale-105 (replaced with translateY)
   - Consistent button styling (no more mixed text links)
   ===================================================== */

/* ─── DESIGN TOKENS ─── */
:root {
    /* Primary palette — indigo-based, WCAG AA compliant */
    --pm-primary:         #4f46e5;   /* 5.1:1 on white */
    --pm-primary-hover:   #4338ca;   /* 6.5:1 on white */
    --pm-primary-light:   #eef2ff;
    --pm-primary-soft:    #e0e7ff;
    --pm-primary-text:    #3730a3;   /* 8.1:1 on white — AA+ */

    /* Surface & background */
    --pm-bg:              #f8fafc;
    --pm-surface:         #ffffff;
    --pm-surface-raised:  #ffffff;
    --pm-surface-glass:   rgba(255, 255, 255, 0.72);
    --pm-surface-glass-border: rgba(255, 255, 255, 0.35);

    /* Text — all pass 4.5:1 minimum on white bg */
    --pm-text-primary:    #0f172a;   /* 16.1:1 */
    --pm-text-secondary:  #334155;   /* 10.3:1 */
    --pm-text-tertiary:   #475569;   /* 7.1:1 */
    --pm-text-muted:      #64748b;   /* 4.6:1 — AA body */

    /* Semantic */
    --pm-success:         #047857;   /* 5.2:1 on white — AA compliant */
    --pm-success-bg:      #ecfdf5;
    --pm-warning:         #b45309;   /* 5.5:1 on white — AA */
    --pm-warning-bg:      #fffbeb;
    --pm-danger:          #dc2626;   /* 4.6:1 on white */
    --pm-danger-bg:       #fef2f2;
    --pm-info:            #0369a1;   /* 5.6:1 on white */
    --pm-info-bg:         #f0f9ff;

    /* Category accent colors — all pass 4.5:1 on white for large text */
    --pm-cat-espacial:    #4f46e5;
    --pm-cat-verbal:      #059669;
    --pm-cat-logica:      #7c3aed;
    --pm-cat-numerico:    #ea580c;
    --pm-cat-mecanico:    #0284c7;
    --pm-cat-brujulas:    #be185d;

    /* Shadows — soft, diffused, progressive */
    --pm-shadow-xs:       0 1px 2px rgba(15, 23, 42, 0.04);
    --pm-shadow-sm:       0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
    --pm-shadow-md:       0 4px 12px rgba(15, 23, 42, 0.08);
    --pm-shadow-lg:       0 8px 24px rgba(15, 23, 42, 0.10);
    --pm-shadow-xl:       0 12px 40px rgba(15, 23, 42, 0.12);
    --pm-shadow-glass:    0 8px 32px rgba(15, 23, 42, 0.06);

    /* Border radii */
    --pm-radius-sm:       8px;
    --pm-radius-md:       12px;
    --pm-radius-lg:       16px;
    --pm-radius-xl:       20px;
    --pm-radius-2xl:      24px;
    --pm-radius-full:     9999px;

    /* 8px SPACING SYSTEM (mathematical harmony) */
    --pm-space-1:  0.25rem;   /*  4px */
    --pm-space-2:  0.5rem;    /*  8px — base unit */
    --pm-space-3:  0.75rem;   /* 12px */
    --pm-space-4:  1rem;      /* 16px — 2× base */
    --pm-space-5:  1.25rem;   /* 20px */
    --pm-space-6:  1.5rem;    /* 24px — 3× base */
    --pm-space-8:  2rem;      /* 32px — 4× base */
    --pm-space-10: 2.5rem;    /* 40px — 5× base */
    --pm-space-12: 3rem;      /* 48px — 6× base */
    --pm-space-16: 4rem;      /* 64px — 8× base */

    /* Transitions — smooth, natural */
    --pm-ease:     cubic-bezier(0.4, 0, 0.2, 1);
    --pm-ease-out: cubic-bezier(0, 0, 0.2, 1);
    --pm-duration: 200ms;
    --pm-transition: var(--pm-duration) var(--pm-ease);

    /* Focus ring — WCAG visible */
    --pm-focus-ring: 0 0 0 3px rgba(79, 70, 229, 0.4);
    --pm-focus-outline: 2px solid var(--pm-primary);

    /* Typography scale (Perfect Fourth 1.333) */
    --pm-text-xs:    0.75rem;    /* 12px */
    --pm-text-sm:    0.875rem;   /* 14px */
    --pm-text-base:  1rem;       /* 16px */
    --pm-text-lg:    1.125rem;   /* 18px */
    --pm-text-xl:    1.333rem;   /* ~21px */
    --pm-text-2xl:   1.5rem;     /* 24px */
    --pm-text-3xl:   1.875rem;   /* 30px */

    --pm-leading-tight:   1.25;
    --pm-leading-normal:  1.6;   /* Body text — avoids fatigue */
    --pm-leading-relaxed: 1.75;
}


/* ═══════════════════════════════════════════════════
   1. GLOBAL FOUNDATION
   ═══════════════════════════════════════════════════ */

body {
    background: var(--pm-bg) !important;
    color: var(--pm-text-primary) !important;
    line-height: var(--pm-leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ─── FOCUS STATES (WCAG 2.4.7) ─── */
*:focus-visible {
    outline: var(--pm-focus-outline) !important;
    outline-offset: 2px !important;
    box-shadow: var(--pm-focus-ring) !important;
    border-radius: var(--pm-radius-sm);
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: var(--pm-focus-outline) !important;
    outline-offset: 2px !important;
    box-shadow: var(--pm-focus-ring) !important;
}

/* Remove default outline on mouse click, keep for keyboard */
:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* ─── SKIP LINK (Accessibility) ─── */
a[href="#main-content"].sr-only {
    position: absolute !important;
    left: var(--pm-space-4);
    top: var(--pm-space-4);
    z-index: 9999;
    padding: var(--pm-space-3) var(--pm-space-6);
    background: var(--pm-primary);
    color: #fff;
    font-weight: 600;
    border-radius: var(--pm-radius-sm);
    box-shadow: var(--pm-shadow-lg);
    text-decoration: none;
}

a[href="#main-content"]:focus {
    position: fixed !important;
    clip: auto !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    left: var(--pm-space-4);
    top: var(--pm-space-4);
    z-index: 99999;
    padding: var(--pm-space-3) var(--pm-space-6);
    background: var(--pm-primary);
    color: #fff;
    font-weight: 600;
    border-radius: var(--pm-radius-sm);
    box-shadow: var(--pm-shadow-lg);
}


/* ═══════════════════════════════════════════════════
   2. TOP NAVIGATION BAR (Premium Glass)
   ═══════════════════════════════════════════════════ */

nav[role="navigation"] {
    background: var(--pm-surface-glass) !important;
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
    box-shadow: var(--pm-shadow-sm) !important;
    padding: var(--pm-space-4) var(--pm-space-6) !important;
    transition: box-shadow var(--pm-transition), background var(--pm-transition);
}

/* Logo — gradient text */
nav h1 {
    font-weight: 800 !important;
    letter-spacing: -0.025em !important;
    background: linear-gradient(135deg, var(--pm-primary), var(--pm-primary-hover)) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
}


/* ═══════════════════════════════════════════════════
   3. GAMIFICATION HEADER (Premium)
   ═══════════════════════════════════════════════════ */

#gamification-header {
    background: linear-gradient(135deg, var(--pm-primary-light), var(--pm-primary-soft)) !important;
    border: 1px solid rgba(199, 210, 254, 0.5) !important;
    border-radius: var(--pm-radius-lg) !important;
    padding: var(--pm-space-2) var(--pm-space-4) !important;
    box-shadow: var(--pm-shadow-xs) !important;
    transition: all var(--pm-transition);
}

#gamification-header:hover {
    box-shadow: var(--pm-shadow-sm) !important;
    border-color: rgba(165, 180, 252, 0.6) !important;
}

/* Level badge */
#gamification-header .bg-gradient-to-r.from-blue-500.to-indigo-600 {
    background: linear-gradient(135deg, var(--pm-primary), var(--pm-primary-hover)) !important;
    border-radius: var(--pm-radius-full) !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.25);
}

/* XP progress bar — with load animation */
#xp-progress-bar {
    background: linear-gradient(90deg, var(--pm-primary), #818cf8) !important;
    border-radius: var(--pm-radius-full) !important;
    box-shadow: 0 1px 4px rgba(79, 70, 229, 0.2);
    animation: pm-fill-bar 0.8s var(--pm-ease-out) both;
}

@keyframes pm-fill-bar {
    from { transform: scaleX(0); transform-origin: left; }
    to   { transform: scaleX(1); transform-origin: left; }
}


/* ═══════════════════════════════════════════════════
   4. MAIN CONTENT AREA
   ═══════════════════════════════════════════════════ */

#main-content {
    background: var(--pm-bg) !important;
    padding-top: var(--pm-space-8) !important;
}

/* Welcome heading */
#main-content > h1:first-of-type {
    color: var(--pm-text-primary) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
}


/* ═══════════════════════════════════════════════════
   5. INTERVIEW BANNER (Premium)
   ═══════════════════════════════════════════════════ */

#main-content > .bg-gradient-to-r.from-green-600 {
    background: linear-gradient(135deg, #059669, #047857) !important;
    border-radius: var(--pm-radius-xl) !important;
    box-shadow: var(--pm-shadow-lg), 0 0 0 1px rgba(5, 150, 105, 0.1) !important;
    border: none !important;
    padding: var(--pm-space-8) !important;
    transition: all 0.3s var(--pm-ease) !important;
}

#main-content > .bg-gradient-to-r.from-green-600:hover {
    box-shadow: var(--pm-shadow-xl), 0 0 0 1px rgba(5, 150, 105, 0.15) !important;
    transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════
   6. CATEGORY PROGRESS CARDS (Gamification Grid)
   ═══════════════════════════════════════════════════ */

#generic-categories-grid {
    gap: var(--pm-space-4) !important;
}

#generic-categories-grid > div {
    background: var(--pm-surface) !important;
    border-radius: var(--pm-radius-lg) !important;
    border-left: 4px solid !important;
    box-shadow: var(--pm-shadow-sm) !important;
    padding: var(--pm-space-4) !important;
    transition: all var(--pm-transition) !important;
    position: relative;
    overflow: hidden;
}

#generic-categories-grid > div::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 60%, rgba(79, 70, 229, 0.02));
    pointer-events: none;
    border-radius: inherit;
}

#generic-categories-grid > div:hover {
    box-shadow: var(--pm-shadow-md) !important;
    transform: translateY(-2px) !important;
}

#generic-categories-grid > div:focus-within {
    box-shadow: var(--pm-focus-ring), var(--pm-shadow-md) !important;
}

/* Individual category border colors */
#generic-categories-grid > div:nth-child(1) { border-left-color: var(--pm-cat-espacial) !important; }
#generic-categories-grid > div:nth-child(2) { border-left-color: var(--pm-cat-verbal) !important; }
#generic-categories-grid > div:nth-child(3) { border-left-color: var(--pm-cat-logica) !important; }
#generic-categories-grid > div:nth-child(4) { border-left-color: var(--pm-cat-numerico) !important; }
#generic-categories-grid > div:nth-child(5) { border-left-color: var(--pm-cat-mecanico) !important; }
#generic-categories-grid > div:nth-child(6) { border-left-color: var(--pm-cat-brujulas) !important; }

/* Card titles */
#generic-categories-grid h4 {
    font-weight: 700 !important;
    color: var(--pm-text-primary) !important;
    letter-spacing: -0.01em;
}

/* Card metadata */
#generic-categories-grid .text-xs.text-gray-600 {
    color: var(--pm-text-muted) !important;
    font-weight: 500;
}

/* Progress bars — animated fill on load */
#generic-categories-grid .bg-gray-200 {
    background: var(--pm-primary-light) !important;
    border-radius: var(--pm-radius-full) !important;
    height: 6px !important;
    overflow: hidden;
}

#generic-categories-grid .bg-gray-200 > div {
    border-radius: var(--pm-radius-full) !important;
    height: 6px !important;
    animation: pm-fill-bar 1s var(--pm-ease-out) both;
}

/* Level badges — high contrast on light bg */
#generic-categories-grid [id$="-level"] {
    font-weight: 700 !important;
    border-radius: var(--pm-radius-full) !important;
    letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════════
   7. TEST CARDS — NORMALIZED HEIGHT + BUTTON AT BOTTOM
   This is the big one. Solves the "staircase effect".
   ═══════════════════════════════════════════════════ */

/* --- Grid containers for test cards --- */
#section-psicotecnicos-grid,
#section-herramientas-grid,
#section-examenes-reales-grid,
#section-temario-especifico-grid,
#section-casos-practicos-content {
    gap: var(--pm-space-6) !important;
}

/* --- The card itself: Flexbox column with stretch --- */
#section-psicotecnicos-grid > div,
#section-herramientas-grid > div,
#section-examenes-reales-grid > div,
#section-temario-especifico-grid > div,
#section-casos-practicos-content > div {
    display: flex !important;
    flex-direction: column !important;
    background: var(--pm-surface) !important;
    border-radius: var(--pm-radius-lg) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    box-shadow: var(--pm-shadow-sm) !important;
    padding: var(--pm-space-6) !important;
    transition: box-shadow var(--pm-transition),
                transform var(--pm-transition),
                border-color var(--pm-transition) !important;

    /* KILL the aggressive scale transform from Tailwind classes */
    transform: translateY(0) !important;
}

/* --- Hover: subtle elevation, NOT scale --- */
#section-psicotecnicos-grid > div:hover,
#section-herramientas-grid > div:hover,
#section-examenes-reales-grid > div:hover,
#section-temario-especifico-grid > div:hover,
#section-casos-practicos-content > div:hover {
    box-shadow: var(--pm-shadow-lg) !important;
    transform: translateY(-3px) !important;
    border-color: rgba(199, 210, 254, 0.6) !important;
}

/* --- Card title: Extra Bold, consistent size --- */
#section-psicotecnicos-grid > div h3,
#section-herramientas-grid > div h3,
#section-examenes-reales-grid > div h3,
#section-temario-especifico-grid > div h3,
#section-casos-practicos-content > div h3 {
    font-weight: 800 !important;
    color: var(--pm-text-primary) !important;
    font-size: var(--pm-text-lg) !important;
    line-height: var(--pm-leading-tight) !important;
    letter-spacing: -0.01em;
    margin-bottom: var(--pm-space-2) !important;
}

/* --- All card children: don't shrink, stay compact --- */
#section-psicotecnicos-grid > div > *,
#section-herramientas-grid > div > *,
#section-examenes-reales-grid > div > *,
#section-temario-especifico-grid > div > *,
#section-casos-practicos-content > div > * {
    flex-shrink: 0;
}

/* --- Card description: Regular weight, relaxed line-height --- */
#section-psicotecnicos-grid > div > p,
#section-herramientas-grid > div > p,
#section-examenes-reales-grid > div > p,
#section-temario-especifico-grid > div > p,
#section-casos-practicos-content > div > p {
    color: var(--pm-text-tertiary) !important;
    font-size: var(--pm-text-sm) !important;
    line-height: var(--pm-leading-normal) !important;
    flex-grow: 1 !important;  /* ← KEY: pushes button to bottom */
    flex-shrink: 1;           /* Can shrink if needed */
}

/* --- Badges container inside cards --- */
#section-psicotecnicos-grid > div .mb-2.flex,
#section-herramientas-grid > div .mb-2.flex,
#section-psicotecnicos-grid > div .mb-4.flex {
    margin-bottom: var(--pm-space-3) !important;
}

/* --- BUTTON: Always at bottom, consistent style --- */
#section-psicotecnicos-grid > div button,
#section-herramientas-grid > div button,
#section-examenes-reales-grid > div button,
#section-temario-especifico-grid > div button,
#section-casos-practicos-content > div button {
    margin-top: auto !important;          /* ← KEY: pins to bottom */
    background-color: var(--pm-primary) !important;
    background-image: none !important;    /* ← KILLS Tailwind gradients */
    color: #fff !important;
    font-weight: 600 !important;
    font-size: var(--pm-text-sm) !important;
    padding: var(--pm-space-3) var(--pm-space-6) !important;
    border-radius: var(--pm-radius-sm) !important;  /* Squared, not pill */
    width: 100% !important;
    text-align: center !important;
    border: none !important;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(79, 70, 229, 0.2) !important;
    transition: all var(--pm-transition) !important;
    transform: none !important;   /* Kill inner scale */
    min-height: 44px;            /* WCAG touch target */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--pm-space-2);
    line-height: 1.4;
}

#section-psicotecnicos-grid > div button:hover,
#section-herramientas-grid > div button:hover,
#section-examenes-reales-grid > div button:hover,
#section-temario-especifico-grid > div button:hover,
#section-casos-practicos-content > div button:hover {
    background-color: var(--pm-primary-hover) !important;
    background-image: none !important;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3) !important;
    transform: translateY(-1px) !important;
}

#section-psicotecnicos-grid > div button:active,
#section-herramientas-grid > div button:active {
    transform: translateY(0) !important;
    box-shadow: 0 1px 2px rgba(79, 70, 229, 0.2) !important;
}

/* --- FORCE all buttons to uniform indigo — kill ALL gradients --- */
#section-psicotecnicos-grid > div button,
#section-herramientas-grid > div button,
#section-examenes-reales-grid > div button,
#section-temario-especifico-grid > div button,
#section-casos-practicos-content > div button {
    background-color: var(--pm-primary) !important;
    background-image: none !important;   /* ← KILLS Tailwind gradients */
}

#section-psicotecnicos-grid > div button:hover,
#section-herramientas-grid > div button:hover,
#section-examenes-reales-grid > div button:hover,
#section-temario-especifico-grid > div button:hover,
#section-casos-practicos-content > div button:hover {
    background-color: var(--pm-primary-hover) !important;
    background-image: none !important;
}

/* --- Gradient cards: preserve card background but normalize borders --- */
#section-psicotecnicos-grid > [class*="bg-gradient"],
#section-herramientas-grid > [class*="bg-gradient"] {
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
}

/* --- Standalone CTA buttons (Simulacro, Material, etc) --- */
#simulacro-section button,
#simulacros-dashboard button,
#material-estudio-section button {
    background-color: var(--pm-primary) !important;
    background-image: none !important;
    border-radius: var(--pm-radius-sm) !important;
    min-height: 44px;
    font-weight: 600 !important;
    color: #fff !important;
    transition: all var(--pm-transition) !important;
}

#simulacro-section button:hover,
#simulacros-dashboard button:hover,
#material-estudio-section button:hover {
    background-color: var(--pm-primary-hover) !important;
    background-image: none !important;
}

/* --- Small text/hints below buttons --- */
#section-herramientas-grid small {
    display: block;
    margin-top: var(--pm-space-2);
    color: var(--pm-text-muted) !important;
    font-size: var(--pm-text-xs) !important;
    text-align: center;
}


/* ═══════════════════════════════════════════════════
   8. SECTIONS & HEADINGS — CONSISTENT HIERARCHY
   ═══════════════════════════════════════════════════ */

#main-content > section {
    margin-bottom: var(--pm-space-12) !important;
}

section h2 {
    color: var(--pm-text-primary) !important;
    font-weight: 800 !important;
    letter-spacing: -0.02em;
    line-height: var(--pm-leading-tight);
    margin-bottom: var(--pm-space-2) !important;
}

section h2 + p {
    color: var(--pm-text-muted) !important;
    font-size: var(--pm-text-sm) !important;
    line-height: var(--pm-leading-normal);
    margin-bottom: var(--pm-space-8) !important;
}

section h3 {
    color: var(--pm-text-secondary) !important;
    font-weight: 700 !important;
}

/* Section wrappers with gradient backgrounds */
section > .bg-gradient-to-r {
    border-radius: var(--pm-radius-xl) !important;
    padding: var(--pm-space-8) !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
}

/* Section dividers — refined */
section h2.border-b-2 {
    border-color: rgba(226, 232, 240, 0.8) !important;
    padding-bottom: var(--pm-space-3) !important;
}


/* ═══════════════════════════════════════════════════
   9. BADGES / TAGS — HIGH CONTRAST
   ═══════════════════════════════════════════════════ */

/* Never use white text on pastel bg */
[class*="bg-purple-100"] { color: #581c87 !important; }  /* purple-900 — 11:1 */
[class*="bg-red-100"]    { color: #991b1b !important; }  /* red-800   — 7.8:1 */
[class*="bg-green-100"]  { color: #14532d !important; }  /* green-900 — 9.3:1 */
[class*="bg-blue-100"]   { color: #1e3a5f !important; }  /* blue-900  — 8.5:1 */
[class*="bg-amber-100"]  { color: #78350f !important; }  /* amber-800 — 7.0:1 */
[class*="bg-emerald-100"]{ color: #064e3b !important; }  /* emerald-900—9.3:1 */
[class*="bg-teal-100"]   { color: #134e4a !important; }  /* teal-900  — 8.5:1 */
[class*="bg-violet-100"] { color: #4c1d95 !important; }  /* violet-900— 10:1 */
[class*="bg-primary-100"]{ color: #312e81 !important; }  /* indigo-900— 10:1 */

/* Badge consistent styling */
.inline-block[class*="rounded-full"] {
    font-weight: 600 !important;
    letter-spacing: 0.02em;
}


/* ═══════════════════════════════════════════════════
   10. GAMIFICATION DASHBOARD
   ═══════════════════════════════════════════════════ */

#gamification-dashboard {
    margin-bottom: var(--pm-space-8) !important;
}

#welcome-tutorial {
    border-radius: var(--pm-radius-lg) !important;
    border: 1px solid rgba(5, 150, 105, 0.15) !important;
    box-shadow: var(--pm-shadow-sm) !important;
}

/* Temario progress card */
#temario-progress-card {
    border-radius: var(--pm-radius-lg) !important;
    box-shadow: var(--pm-shadow-sm) !important;
}


/* ═══════════════════════════════════════════════════
   11. MODALS (Premium Glass)
   ═══════════════════════════════════════════════════ */

[id$="-modal"] > div:first-child {
    background: var(--pm-surface) !important;
    border-radius: var(--pm-radius-xl) !important;
    box-shadow: var(--pm-shadow-xl) !important;
    border: 1px solid rgba(226, 232, 240, 0.5) !important;
}

[id$="-modal"].fixed {
    background: rgba(15, 23, 42, 0.5) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}


/* ═══════════════════════════════════════════════════
   12. DROPDOWN MENUS
   ═══════════════════════════════════════════════════ */

#oposicion-dropdown-menu {
    background: var(--pm-surface) !important;
    border-radius: var(--pm-radius-lg) !important;
    box-shadow: var(--pm-shadow-xl) !important;
    border: 1px solid rgba(226, 232, 240, 0.5) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
}

#oposicion-dropdown-btn {
    border-radius: var(--pm-radius-md) !important;
    transition: all var(--pm-transition) !important;
}

#oposicion-dropdown-btn:hover {
    box-shadow: var(--pm-shadow-sm) !important;
}


/* ═══════════════════════════════════════════════════
   13. STAT CARDS / KPI CARDS
   ═══════════════════════════════════════════════════ */

.grid[class*="md:grid-cols-4"] > div {
    background: var(--pm-surface) !important;
    border-radius: var(--pm-radius-md) !important;
    box-shadow: var(--pm-shadow-sm) !important;
    border: 1px solid rgba(226, 232, 240, 0.5) !important;
    padding: var(--pm-space-5) !important;
    transition: all var(--pm-transition) !important;
}

.grid[class*="md:grid-cols-4"] > div:hover {
    box-shadow: var(--pm-shadow-md) !important;
}


/* ═══════════════════════════════════════════════════
   14. CHARTS CONTAINER
   ═══════════════════════════════════════════════════ */

.grid[class*="md:grid-cols-2"] > .bg-white {
    border-radius: var(--pm-radius-lg) !important;
    box-shadow: var(--pm-shadow-sm) !important;
    border: 1px solid rgba(226, 232, 240, 0.5) !important;
}


/* ═══════════════════════════════════════════════════
   15. AI ASSISTANT BUTTON
   ═══════════════════════════════════════════════════ */

#ai-assistant-container .fixed {
    filter: drop-shadow(0 8px 24px rgba(79, 70, 229, 0.25));
}

.ai-glassmorphism {
    backdrop-filter: blur(16px) !important;
    background: rgba(255, 255, 255, 0.15) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: var(--pm-radius-lg) !important;
}


/* ═══════════════════════════════════════════════════
   16. PROSELECCION DESIGN SYSTEM CARDS (Temario)
   ═══════════════════════════════════════════════════ */

.proseleccion-tema-card,
[id^="section-"] .bg-white:not(#section-psicotecnicos-grid .bg-white):not(#section-herramientas-grid .bg-white) {
    background: var(--pm-surface) !important;
    border-radius: var(--pm-radius-md) !important;
    box-shadow: var(--pm-shadow-sm) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    transition: all var(--pm-transition) !important;
}

.proseleccion-tema-card:hover {
    box-shadow: var(--pm-shadow-md) !important;
    border-color: rgba(199, 210, 254, 0.5) !important;
    transform: translateY(-2px);
}


/* ═══════════════════════════════════════════════════
   16b. TEMARIO THEME CARDS (sin botón)
   Normalizar para que visualmente armonicen con las
   tarjetas de test que SÍ tienen botón.
   ═══════════════════════════════════════════════════ */

/* Temario category overview cards (Marco Normativo, Productos, etc.) */
#temario-categories-grid > div {
    background: var(--pm-surface) !important;
    border-radius: var(--pm-radius-lg) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    box-shadow: var(--pm-shadow-sm) !important;
    padding: var(--pm-space-4) !important;
    transition: all var(--pm-transition) !important;
}

#temario-categories-grid > div:hover {
    box-shadow: var(--pm-shadow-md) !important;
    transform: translateY(-2px);
}

/* Individual tema cards (Tema 1, Tema 2, etc.) — dentro de section-temario-teorico-content */
#section-temario-teorico-content .grid > div {
    background: var(--pm-surface) !important;
    border-radius: var(--pm-radius-md) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    box-shadow: var(--pm-shadow-xs) !important;
    padding: var(--pm-space-4) !important;
    transition: all var(--pm-transition) !important;
    cursor: pointer;
}

#section-temario-teorico-content .grid > div:hover {
    box-shadow: var(--pm-shadow-md) !important;
    border-color: rgba(199, 210, 254, 0.5) !important;
    transform: translateY(-2px);
}

/* Botones "Empezar Test" / "Iniciar Examen" en tarjetas de tema y examen */
.pm-btn-tema {
    background-color: var(--pm-primary) !important;
    background-image: none !important;
    border: none !important;
    border-radius: var(--pm-radius-sm) !important;
    color: #fff !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    min-height: 36px;
    transition: all var(--pm-transition) !important;
}
.pm-btn-tema:hover {
    background-color: var(--pm-primary-hover) !important;
    background-image: none !important;
    transform: translateY(-1px);
    box-shadow: var(--pm-shadow-sm) !important;
}

/* Exámenes reales cards */
#section-examenes-reales .bg-white,
#section-examenes-reales > div > div {
    background: var(--pm-surface) !important;
    border-radius: var(--pm-radius-lg) !important;
    border: 1px solid rgba(226, 232, 240, 0.6) !important;
    box-shadow: var(--pm-shadow-sm) !important;
    transition: all var(--pm-transition) !important;
}

/* Temario section wrapper */
#section-temario-teorico-content {
    background: var(--pm-surface) !important;
    border-radius: var(--pm-radius-xl) !important;
    border: 1px solid rgba(226, 232, 240, 0.5) !important;
    box-shadow: var(--pm-shadow-sm) !important;
    padding: var(--pm-space-6) !important;
}

/* Section headings inside temario */
#section-temario-teorico-content h3 {
    font-weight: 700 !important;
    color: var(--pm-text-primary) !important;
}

/* Temario Específico section wrapper */
#section-temario-especifico {
    border-radius: var(--pm-radius-xl) !important;
}

#section-temario-especifico > div {
    background: var(--pm-surface) !important;
    border-radius: var(--pm-radius-lg) !important;
    box-shadow: var(--pm-shadow-sm) !important;
}


/* ═══════════════════════════════════════════════════
   17. SCROLLBAR (Premium)
   ═══════════════════════════════════════════════════ */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--pm-bg);
    border-radius: var(--pm-radius-full);
}

::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.4);
    border-radius: var(--pm-radius-full);
    border: 2px solid var(--pm-bg);
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 116, 139, 0.5);
}

/* ─── Selection ─── */
::selection {
    background: rgba(79, 70, 229, 0.15);
    color: var(--pm-text-primary);
}


/* ═══════════════════════════════════════════════════
   18. MICRO-INTERACTIONS
   ═══════════════════════════════════════════════════ */

/* Category progress bars — fill animation */
[id$="-progress"] {
    animation: pm-fill-bar 1s var(--pm-ease-out) both;
    animation-delay: 0.3s;
}

/* Stagger animation for category cards */
#generic-categories-grid > div:nth-child(1) { animation: pm-fade-up 0.4s var(--pm-ease-out) both; animation-delay: 0.05s; }
#generic-categories-grid > div:nth-child(2) { animation: pm-fade-up 0.4s var(--pm-ease-out) both; animation-delay: 0.10s; }
#generic-categories-grid > div:nth-child(3) { animation: pm-fade-up 0.4s var(--pm-ease-out) both; animation-delay: 0.15s; }
#generic-categories-grid > div:nth-child(4) { animation: pm-fade-up 0.4s var(--pm-ease-out) both; animation-delay: 0.20s; }
#generic-categories-grid > div:nth-child(5) { animation: pm-fade-up 0.4s var(--pm-ease-out) both; animation-delay: 0.25s; }
#generic-categories-grid > div:nth-child(6) { animation: pm-fade-up 0.4s var(--pm-ease-out) both; animation-delay: 0.30s; }

@keyframes pm-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Test cards — subtle stagger on first load */
#section-psicotecnicos-grid > div { animation: pm-fade-up 0.5s var(--pm-ease-out) both; }
#section-psicotecnicos-grid > div:nth-child(1) { animation-delay: 0.05s; }
#section-psicotecnicos-grid > div:nth-child(2) { animation-delay: 0.10s; }
#section-psicotecnicos-grid > div:nth-child(3) { animation-delay: 0.15s; }
#section-psicotecnicos-grid > div:nth-child(4) { animation-delay: 0.20s; }
#section-psicotecnicos-grid > div:nth-child(5) { animation-delay: 0.25s; }
#section-psicotecnicos-grid > div:nth-child(6) { animation-delay: 0.30s; }
#section-psicotecnicos-grid > div:nth-child(7) { animation-delay: 0.35s; }

/* Herramientas cards — stagger */
#section-herramientas-grid > div { animation: pm-fade-up 0.5s var(--pm-ease-out) both; }
#section-herramientas-grid > div:nth-child(1) { animation-delay: 0.05s; }
#section-herramientas-grid > div:nth-child(2) { animation-delay: 0.10s; }
#section-herramientas-grid > div:nth-child(3) { animation-delay: 0.15s; }
#section-herramientas-grid > div:nth-child(4) { animation-delay: 0.20s; }
#section-herramientas-grid > div:nth-child(5) { animation-delay: 0.25s; }
#section-herramientas-grid > div:nth-child(6) { animation-delay: 0.30s; }

/* Button ripple-like press effect */
#section-psicotecnicos-grid > div button:active,
#section-herramientas-grid > div button:active,
#section-examenes-reales-grid > div button:active {
    transform: scale(0.98) !important;
    transition-duration: 50ms !important;
}


/* ═══════════════════════════════════════════════════
   19. RESPONSIVE
   ═══════════════════════════════════════════════════ */

@media (max-width: 640px) {
    nav[role="navigation"] {
        padding: var(--pm-space-3) var(--pm-space-4) !important;
    }

    #generic-categories-grid {
        gap: var(--pm-space-2) !important;
    }

    #generic-categories-grid > div {
        padding: var(--pm-space-3) !important;
        border-radius: var(--pm-radius-md) !important;
    }

    #main-content > section {
        margin-bottom: var(--pm-space-8) !important;
    }

    /* Cards: slightly less padding on mobile */
    #section-psicotecnicos-grid > div,
    #section-herramientas-grid > div {
        padding: var(--pm-space-4) !important;
    }

    /* Disable float animations on mobile for perf */
    #generic-categories-grid > div,
    #section-psicotecnicos-grid > div,
    #section-herramientas-grid > div {
        animation: none !important;
    }
}

@media (min-width: 1024px) {
    nav[role="navigation"] {
        padding: var(--pm-space-4) var(--pm-space-8) !important;
    }
}

/* Zoom-safe: rem-based, no breakage at 200% */
@media (min-resolution: 192dpi) {
    :root {
        --pm-text-xs:   0.8125rem;   /* Slightly larger for hi-dpi */
        --pm-text-sm:   0.9375rem;
    }
}


/* ═══════════════════════════════════════════════════
   20. REDUCED MOTION (Accessibility)
   ═══════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    #generic-categories-grid > div:hover,
    #section-psicotecnicos-grid > div:hover,
    #section-herramientas-grid > div:hover,
    .proseleccion-tema-card:hover {
        transform: none !important;
    }
}


/* ═══════════════════════════════════════════════════
   21. HIGH CONTRAST MODE (Accessibility)
   ═══════════════════════════════════════════════════ */

@media (forced-colors: active) {
    #generic-categories-grid > div,
    #section-psicotecnicos-grid > div,
    #section-herramientas-grid > div {
        border: 2px solid CanvasText !important;
    }

    *:focus-visible {
        outline: 3px solid Highlight !important;
    }

    button {
        border: 1px solid ButtonText !important;
    }
}


/* ═══════════════════════════════════════════════════
   22. PRINT STYLES
   ═══════════════════════════════════════════════════ */

@media print {
    nav[role="navigation"],
    #ai-assistant-container,
    .ai-attention-pulse {
        display: none !important;
    }

    #main-content {
        padding: 0 !important;
    }

    #section-psicotecnicos-grid > div,
    #section-herramientas-grid > div,
    #generic-categories-grid > div {
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
    }
}