/* =====================================================================
   FONTAN DIGITAL — DESIGN SYSTEM v2.0
   Primario : #50007D (púrpura)   Acento: #00C8FF (cian)
   Fuente   : Outfit  →  fallback: Plus Jakarta Sans
   Alcance  : Lado estudiante únicamente
             (admin panel y visor TAU se excluyen explícitamente)
   ===================================================================== */

/* ── FUENTE NEULIS SANS ──────────────────────────────────────────────
   Coloca los archivos .woff2 en wwwroot/fonts/ con estos nombres:
   NeulisSans-Light.woff2 | NeulisSans-Regular.woff2
   NeulisSans-Medium.woff2 | NeulisSans-SemiBold.woff2
   NeulisSans-Bold.woff2  | NeulisSans-ExtraBold.woff2
   -------------------------------------------------------------------- */
@font-face {
    font-family: 'Neulis Sans';
    src: url('../fonts/NeulisSans-Light.woff2') format('woff2');
    font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Neulis Sans';
    src: url('../fonts/NeulisSans-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Neulis Sans';
    src: url('../fonts/NeulisSans-Medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Neulis Sans';
    src: url('../fonts/NeulisSans-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Neulis Sans';
    src: url('../fonts/NeulisSans-Bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Neulis Sans';
    src: url('../fonts/NeulisSans-ExtraBold.woff2') format('woff2');
    font-weight: 800; font-style: normal; font-display: swap;
}

/* ── VARIABLES GLOBALES ─────────────────────────────────────────────── */
:root {
    --fd-purple:        #50007D;
    --fd-purple-dark:   #38005A;
    --fd-purple-mid:    #6A00A8;
    --fd-cyan:          #00C8FF;
    --fd-cyan-dark:     #0099CC;
    --fd-cyan-light:    #80E5FF;
    --fd-white:         #FFFFFF;
    --fd-bg:            #F5F1FC;
    --fd-text:          #1A0033;
    --fd-text-muted:    #6B5680;
    --fd-border:        rgba(80, 0, 125, 0.15);
    --fd-glass-bg:      rgba(255, 255, 255, 0.18);
    --fd-glass-blur:    18px;

    --fd-gradient:      linear-gradient(135deg, #50007D 0%, #00C8FF 100%);
    --fd-gradient-rev:  linear-gradient(135deg, #00C8FF 0%, #50007D 100%);
    --fd-gradient-dark: linear-gradient(135deg, #38005A 0%, #0099CC 100%);
    --fd-gradient-anim: linear-gradient(270deg, #50007D, #00C8FF, #38005A, #00C8FF);

    --fd-shadow-sm:     none;
    --fd-shadow-md:     none;
    --fd-shadow-lg:     none;
    --fd-shadow-cyan:   none;

    --fd-radius-xs:     6px;
    --fd-radius-sm:     10px;
    --fd-radius-md:     16px;
    --fd-radius-lg:     24px;
    --fd-radius-xl:     32px;

    --fd-font:          'Outfit', 'Plus Jakarta Sans', 'Segoe UI', sans-serif;
    --fd-ease:          cubic-bezier(0.4, 0, 0.2, 1);
    --fd-transition:    all 0.3s var(--fd-ease);
    --fd-transition-fast: all 0.18s var(--fd-ease);
}

/* ── KEYFRAMES ──────────────────────────────────────────────────────── */
@keyframes fd-gradient-flow {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

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

@keyframes fd-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes fd-slide-right {
    from { opacity: 0; transform: translateX(-16px); }
    to   { opacity: 1; transform: translateX(0);     }
}

@keyframes fd-pulse-glow {
    0%, 100% { box-shadow: 0 0 0 0   rgba(0, 200, 255, 0.5); }
    50%       { box-shadow: 0 0 0 10px rgba(0, 200, 255, 0);  }
}

@keyframes fd-pulse-purple {
    0%, 100% { box-shadow: 0 0 0 0   rgba(80, 0, 125, 0.4); }
    50%       { box-shadow: 0 0 0 10px rgba(80, 0, 125, 0);  }
}

@keyframes fd-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%);  }
}

@keyframes fd-float {
    0%, 100% { transform: translateY(0px);  }
    50%       { transform: translateY(-6px); }
}

/* ── CLASES DE UTILIDAD (estudiante) ───────────────────────────────── */
.fd-animate-up    { animation: fd-fade-up   0.5s var(--fd-ease) both; }
.fd-animate-in    { animation: fd-fade-in   0.4s var(--fd-ease) both; }
.fd-animate-right { animation: fd-slide-right 0.45s var(--fd-ease) both; }

.fd-delay-1 { animation-delay: 0.08s; }
.fd-delay-2 { animation-delay: 0.16s; }
.fd-delay-3 { animation-delay: 0.24s; }
.fd-delay-4 { animation-delay: 0.32s; }

.fd-card {
    background: var(--fd-white);
    border-radius: var(--fd-radius-md);
    box-shadow: var(--fd-shadow-sm);
    border: 1px solid var(--fd-border);
    transition: var(--fd-transition);
    overflow: hidden;
}
.fd-card:hover {
    box-shadow: var(--fd-shadow-md);
    transform: translateY(-3px);
    border-color: rgba(0, 200, 255, 0.3);
}

.fd-glass {
    background: var(--fd-glass-bg);
    backdrop-filter: blur(var(--fd-glass-blur));
    -webkit-backdrop-filter: blur(var(--fd-glass-blur));
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.fd-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
}
.fd-tag-cyan   { background: rgba(0,200,255,0.12); color: var(--fd-cyan-dark); }
.fd-tag-purple { background: rgba(80,0,125,0.10);  color: var(--fd-purple);    }
.fd-tag-green  { background: rgba(16,185,129,0.12); color: #059669;            }