/* ============================================
   Paleta
   ============================================ */
:root {
    --azul:           #003a6f;
    --azul-700:       #002a52;
    --azul-300:       #2a619e;
    --naranja-osc:    #c05940;
    --naranja-cla:    #eaad48;
    --amarillo:       #facf69;
    --rojo-cla:       #9c0038;
    --rojo-osc:       #5d0223;
    --blanco:         #d7e3ec;
    --blanco-puro:    #ffffff;
    --texto:          #1a2436;
    --texto-suave:    #4b5b73;
    --borde:          rgba(0, 58, 111, 0.12);
    --sombra-sm:      0 1px 2px rgba(0, 58, 111, 0.08);
    --sombra-md:      0 6px 18px rgba(0, 58, 111, 0.12);
    --sombra-lg:      0 14px 32px rgba(0, 58, 111, 0.18);
    --radio:          14px;
    --radio-sm:       8px;
    --transicion:     200ms cubic-bezier(.4,.0,.2,1);
}

/* ============================================
   Base
   ============================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--texto);
    background:
        radial-gradient(1200px 600px at -10% -20%, rgba(234, 173, 72, 0.15), transparent 60%),
        radial-gradient(900px 500px at 110% 0%, rgba(0, 58, 111, 0.10), transparent 60%),
        var(--blanco);
    background-attachment: fixed;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--azul);
    letter-spacing: -0.01em;
    line-height: 1.2;
}
h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); margin: 0 0 .5rem; }
h2 { font-size: clamp(1.15rem, 1rem + .6vw, 1.4rem); margin: 0 0 .5rem; }
h3 { font-size: clamp(1rem, .95rem + .35vw, 1.15rem); margin: 0 0 .35rem; }
h4 { font-size: clamp(.92rem, .9rem + .15vw, 1rem); margin: 1rem 0 .35rem; color: var(--azul-700); }

p { margin: 0 0 .75rem; color: var(--texto-suave); }

a { color: var(--naranja-osc); text-decoration: none; transition: color var(--transicion); }
a:hover { color: var(--rojo-cla); }

ul { margin: 0 0 .75rem; padding-left: 1.25rem; }
ul li { margin: .25rem 0; color: var(--texto); }

/* ============================================
   Navbar
   ============================================ */
.navbar {
    position: sticky;
    top: 0;
    z-index: 50;
    background: linear-gradient(135deg, var(--azul) 0%, var(--azul-700) 100%);
    color: var(--blanco-puro);
    box-shadow: var(--sombra-md);
    border-bottom: 3px solid var(--naranja-cla);
}
.navbar-inner {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0.9rem 1.25rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}
.brand {
    display: flex;
    align-items: center;
    gap: .65rem;
    color: var(--blanco-puro);
    font-weight: 700;
    font-size: 1.05rem;
    letter-spacing: .02em;
}
.brand:hover { color: var(--amarillo); }
.brand-mark {
    display: inline-grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--naranja-cla), var(--naranja-osc));
    color: var(--azul-700);
    font-family: 'Playfair Display', serif;
    font-size: 1.25rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(0,0,0,.25), inset 0 -2px 0 rgba(0,0,0,.1);
}
.navlinks { display: flex; gap: .35rem; align-items: center; }
.navlinks a {
    color: rgba(255, 255, 255, 0.85);
    padding: .5rem .9rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: .92rem;
    transition: background var(--transicion), color var(--transicion);
}
.navlinks a:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--amarillo);
}

/* ============================================
   Layout
   ============================================ */
.container {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    padding: 2rem 1.25rem 4rem;
    flex: 1 0 auto;
}

.footer {
    text-align: center;
    color: var(--texto-suave);
    padding: 1.25rem;
    background: var(--blanco-puro);
    border-top: 1px solid var(--borde);
    font-size: .9rem;
}

/* ============================================
   Breadcrumb
   ============================================ */
.breadcrumb {
    font-size: .88rem;
    color: var(--texto-suave);
    margin-bottom: 1.25rem;
    padding: .5rem .9rem;
    background: rgba(255,255,255,.6);
    border: 1px solid var(--borde);
    border-radius: 999px;
    display: inline-block;
    backdrop-filter: blur(6px);
}
.breadcrumb a {
    color: var(--azul);
    font-weight: 500;
}
.breadcrumb a:hover { color: var(--naranja-osc); }
.breadcrumb span { color: var(--texto); font-weight: 600; }

/* ============================================
   Hero (home)
   ============================================ */
.hero {
    padding: 2rem 0 1.5rem;
    margin-bottom: 1rem;
    position: relative;
}
.hero h1 {
    font-size: clamp(2.2rem, 4vw, 3.2rem);
    background: linear-gradient(135deg, var(--azul) 0%, var(--rojo-cla) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    margin-bottom: .75rem;
}
.hero p {
    font-size: 1.1rem;
    /*max-width: 720px;*/
}

/* ============================================
   Cards genéricas
   ============================================ */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1.25rem 0;
}
.card {
    position: relative;
    display: block;
    padding: 1.5rem;
    background: var(--blanco-puro);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: inherit;
    box-shadow: var(--sombra-sm);
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
    overflow: hidden;
}
.card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: linear-gradient(90deg, var(--azul), var(--naranja-cla), var(--rojo-cla));
    opacity: 0;
    transition: opacity var(--transicion);
}
.card:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-lg);
    border-color: rgba(0, 58, 111, 0.25);
}
.card:hover::before { opacity: 1; }
.card h2, .card h3 { margin: 0 0 .5rem; }
.card p { margin: 0 0 .75rem; }
.card .meta {
    color: var(--texto-suave);
    font-size: .88rem;
    margin-top: .75rem;
    font-variant-numeric: tabular-nums;
}
.card .cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--naranja-osc);
    font-weight: 600;
    font-size: .92rem;
    margin-top: .5rem;
    transition: gap var(--transicion);
}
.card:hover .cta { gap: .65rem; color: var(--rojo-cla); }

/* ============================================
   Niveles (grid + tarjetas con paleta)
   ============================================ */
.grid-niveles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}
.card-nivel {
    display: block;
    position: relative;
    padding: 1.5rem;
    border-radius: var(--radio);
    color: var(--blanco-puro);
    text-decoration: none;
    box-shadow: var(--sombra-md);
    overflow: hidden;
    transition: transform var(--transicion), box-shadow var(--transicion);
}
.card-nivel:hover { color: var(--blanco-puro); }
.nivel-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: 1rem;
    padding: .5rem .9rem;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--blanco-puro);
    backdrop-filter: blur(4px);
    transition: background var(--transicion), gap var(--transicion);
    position: relative;
    z-index: 1;
}
.card-nivel:hover .nivel-cta {
    background: var(--blanco-puro);
    color: var(--azul-700);
    gap: .65rem;
}
.card-nivel::after {
    content: "";
    position: absolute;
    right: -40px; top: -40px;
    width: 160px; height: 160px;
    background: rgba(255,255,255,.08);
    border-radius: 50%;
    pointer-events: none;
}
.card-nivel:hover {
    transform: translateY(-3px);
    box-shadow: var(--sombra-lg);
}
.card-nivel h3 {
    color: inherit;
    margin: .5rem 0 .75rem;
    font-size: 1.3rem;
}
.card-nivel p {
    color: rgba(255,255,255,.92);
    font-size: .92rem;
}
.nivel-numero {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .25rem .65rem;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
    backdrop-filter: blur(4px);
}
.nivel-acciones {
    display: flex;
    gap: .5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
}
.nivel-acciones a {
    background: var(--blanco-puro);
    color: var(--azul);
    padding: .5rem .9rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    box-shadow: 0 2px 6px rgba(0,0,0,.12);
    transition: transform var(--transicion), background var(--transicion), color var(--transicion);
}
.nivel-acciones a:hover {
    background: var(--amarillo);
    color: var(--azul-700);
    transform: translateY(-1px);
}

/* ============================================
   Áreas (Actualmente) — estilo card-nivel con paleta distinta
   ============================================ */
.grid-areas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
    margin: 1.5rem 0;
}
.card-area {
    display: block;
    position: relative;
    padding: 1.75rem 1.5rem;
    border-radius: var(--radio);
    color: var(--blanco-puro);
    text-decoration: none;
    box-shadow: var(--sombra-md);
    overflow: hidden;
    min-height: 200px;
    transition: transform var(--transicion), box-shadow var(--transicion);
}
.card-area:hover {
    color: var(--blanco-puro);
    transform: translateY(-3px);
    box-shadow: var(--sombra-lg);
}
.card-area::after {
    content: "";
    position: absolute;
    right: -50px; bottom: -50px;
    width: 180px; height: 180px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    pointer-events: none;
}
.card-area::before {
    content: "";
    position: absolute;
    left: -30px; top: -30px;
    width: 120px; height: 120px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 50%;
    pointer-events: none;
}
.card-area h3 {
    color: inherit;
    font-size: 1.7rem;
    margin: .35rem 0 .5rem;
    position: relative;
    z-index: 1;
}
.card-area p {
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    position: relative;
    z-index: 1;
    font-size: .95rem;
}
.area-tag {
    display: inline-block;
    background: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(4px);
    color: var(--blanco-puro);
    padding: .25rem .7rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    position: relative;
    z-index: 1;
}
.area-cta {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    margin-top: 1rem;
    padding: .5rem .9rem;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    font-weight: 600;
    font-size: .9rem;
    color: var(--blanco-puro);
    backdrop-filter: blur(4px);
    transition: background var(--transicion), gap var(--transicion), color var(--transicion);
    position: relative;
    z-index: 1;
}
.card-area:hover .area-cta {
    background: var(--blanco-puro);
    color: var(--azul-700);
    gap: .65rem;
}

/* Paletas únicas (distintas a las de niveles) */
.area-matematicas {
    background:
        radial-gradient(circle at 80% 20%, rgba(250, 207, 105, 0.28), transparent 55%),
        linear-gradient(135deg, #0b4e8a 0%, #1a6aab 55%, #2a8fb8 100%);
}
.area-estadistica {
    background:
        radial-gradient(circle at 20% 80%, rgba(234, 173, 72, 0.28), transparent 55%),
        linear-gradient(135deg, #3a1145 0%, #6e1a4d 55%, #c05940 100%);
}
.area-indicadores {
    background:
        radial-gradient(circle at 80% 20%, rgba(250, 207, 105, 0.22), transparent 55%),
        linear-gradient(135deg, #0a3d3a 0%, #115d52 55%, #1f8a72 100%);
}

.lista-indicadores {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: grid;
    gap: .6rem;
}
.lista-indicadores li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .9rem;
    align-items: start;
    padding: .85rem 1rem;
    background: var(--blanco);
    border: 1px solid rgba(0, 58, 111, 0.10);
    border-left: 3px solid var(--naranja-cla);
    border-radius: 8px;
    box-shadow: var(--sombra-sm);
    color: var(--texto);
}
.lista-indicadores .ic-codigo {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--azul);
    font-size: .85rem;
    background: rgba(0, 58, 111, 0.06);
    padding: .15rem .55rem;
    border-radius: 999px;
    white-space: nowrap;
}
.lista-indicadores .ic-texto { line-height: 1.5; }

/* Mapeo de niveles a paleta (claro → intenso) */
.dominio-nivel-1 { background: linear-gradient(135deg, #2a619e 0%, var(--azul) 100%); }
.dominio-nivel-2 { background: linear-gradient(135deg, var(--naranja-cla) 0%, var(--naranja-osc) 100%); }
.dominio-nivel-3 { background: linear-gradient(135deg, var(--naranja-osc) 0%, var(--rojo-cla) 100%); }
.dominio-nivel-4 { background: linear-gradient(135deg, var(--rojo-cla) 0%, var(--rojo-osc) 100%); }
.dominio-nivel-5 { background: linear-gradient(135deg, var(--rojo-osc) 0%, #2a0010 100%); }

/* ============================================
   Acordeones
   ============================================ */
.acordeones { margin-top: 1rem; }
.acordeon {
    background: var(--blanco-puro);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    margin-bottom: .65rem;
    overflow: hidden;
    transition: box-shadow var(--transicion), border-color var(--transicion);
}
.acordeon:hover { border-color: rgba(0, 58, 111, 0.25); box-shadow: var(--sombra-sm); }
.acordeon[open] {
    border-color: var(--naranja-cla);
    box-shadow: var(--sombra-md);
}
.acordeon summary {
    cursor: pointer;
    padding: .9rem 1.1rem;
    list-style: none;
    font-weight: 500;
    color: var(--texto);
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    position: relative;
    padding-right: 2.5rem;
}
.acordeon summary::-webkit-details-marker { display: none; }
.acordeon summary::after {
    content: "+";
    position: absolute;
    right: 1rem; top: 50%;
    transform: translateY(-50%);
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--azul);
    color: var(--blanco-puro);
    display: grid;
    place-items: center;
    font-weight: 700;
    transition: transform var(--transicion), background var(--transicion);
}
.acordeon[open] summary::after {
    content: "−";
    background: var(--naranja-osc);
    transform: translateY(-50%) rotate(180deg);
}
.acordeon summary strong { color: var(--azul); margin-right: .25rem; }

.acordeon-body {
    padding: .25rem 1.1rem 1rem;
    border-top: 1px solid rgba(0, 58, 111, 0.08);
}
.acordeon-body h4 {
    margin: 1rem 0 .35rem;
    font-family: 'Inter', sans-serif;
    font-size: .85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--naranja-osc);
}
.acordeon-body ul { margin: .25rem 0 .5rem 1.25rem; padding: 0; }
.lista-programas li { color: var(--texto); }
.lista-programas .alias { color: var(--texto-suave); font-size: .92em; }

/* Badges dentro de acordeones */
.acordeon summary .badge {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    height: 24px;
    padding: 0 .5rem;
    margin-left: .35rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--naranja-cla), var(--naranja-osc));
    color: var(--blanco-puro);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .03em;
}

/* Acordeones anidados (unidades temáticas) */
.acordeones-anidados .acordeon {
    background: rgba(0, 58, 111, 0.03);
    border-color: rgba(0, 58, 111, 0.10);
}
.acordeones-anidados .acordeon[open] {
    background: var(--blanco-puro);
    border-color: var(--naranja-cla);
}

/* ============================================
   Tags y misceláneos
   ============================================ */
.tag {
    display: inline-block;
    background: linear-gradient(135deg, var(--amarillo), var(--naranja-cla));
    color: var(--azul-700);
    padding: .2rem .65rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 600;
    margin: 0 .25rem;
    letter-spacing: .02em;
}

/* ============================================
   Bloque por facultad
   ============================================ */
.facultad-bloque {
    margin-top: 2rem;
    padding: 1.25rem;
    background: var(--blanco-puro);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
}
.facultad-bloque h2 {
    border-bottom: 3px solid var(--naranja-cla);
    padding-bottom: .35rem;
    margin-bottom: 1rem;
    display: inline-block;
}

/* ============================================
   Detalle de curso (Actualmente)
   ============================================ */
.seccion-curso {
    margin: 1.75rem 0;
    padding: 1.5rem;
    background: var(--blanco-puro);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra-sm);
    position: relative;
}
.seccion-curso::before {
    content: "";
    position: absolute;
    left: 0; top: 1.5rem; bottom: 1.5rem;
    width: 4px;
    border-radius: 0 4px 4px 0;
    background: linear-gradient(180deg, var(--naranja-cla), var(--rojo-cla));
}
.seccion-curso h2 {
    margin-left: .5rem;
    padding-bottom: .35rem;
    border-bottom: 2px solid var(--borde);
    margin-bottom: 1rem;
}
.seccion-curso ul { padding-left: 1.5rem; }
.seccion-curso ul li {
    margin: .5rem 0;
    padding-left: .25rem;
}
.seccion-curso ul li::marker { color: var(--naranja-osc); }
.seccion-curso p { color: var(--texto); }

/* ============================================
   Responsive
   ============================================ */

/* Mejoras universales para evitar overflow de texto largo
   (sin partir códigos cortos como RACA1, ICEP12, etc.) */
.breadcrumb,
.acordeon summary,
.lista-programas li,
.seccion-curso,
.card,
.card-area,
.card-nivel { word-wrap: break-word; overflow-wrap: break-word; }

/* Códigos en summaries y listas no se parten */
.acordeon summary strong,
.acordeon-body li strong { white-space: nowrap; }

/* Pantallas grandes (≥1024px): más respiración */
@media (min-width: 1024px) {
    .cards,
    .grid-niveles,
    .grid-areas { gap: 1.5rem; }
}

/* Tablet (≤900px) */
@media (max-width: 900px) {
    .container { padding: 1.5rem 1rem 3rem; }
    .cards,
    .grid-niveles,
    .grid-areas {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 1rem;
    }
    .card,
    .card-area,
    .card-nivel { padding: 1.25rem; }
    .seccion-curso { padding: 1.25rem; }
    .hero { padding: 1.25rem 0 1rem; }
    .hero p { font-size: 1rem; }
}

/* Móvil (≤640px) */
@media (max-width: 640px) {
    body { font-size: .95rem; }
    .container { padding: 1rem .85rem 2.5rem; }

    /* Navbar más compacto */
    .navbar-inner {
        padding: .65rem .85rem;
        gap: .5rem;
        flex-wrap: wrap;
    }
    .brand { font-size: .95rem; gap: .5rem; }
    .brand-mark { width: 30px; height: 30px; font-size: 1.05rem; }
    .navlinks {
        width: 100%;
        justify-content: flex-start;
        gap: .25rem;
        flex-wrap: wrap;
    }
    .navlinks a { padding: .4rem .7rem; font-size: .85rem; }

    /* Grids: 1 columna */
    .cards,
    .grid-niveles,
    .grid-areas { grid-template-columns: 1fr; gap: .85rem; }

    /* Tarjetas de nivel/área un poco más compactas */
    .card-nivel,
    .card-area { padding: 1.25rem 1.1rem; min-height: auto; }
    .card-area h3 { font-size: 1.4rem; }
    .nivel-cta,
    .area-cta { padding: .45rem .8rem; font-size: .85rem; }

    /* Breadcrumb: full width, scroll horizontal si hace falta */
    .breadcrumb {
        display: flex;
        flex-wrap: wrap;
        gap: .25rem .35rem;
        font-size: .82rem;
        padding: .45rem .75rem;
        max-width: 100%;
    }

    /* Hero */
    .hero { padding: .75rem 0 .25rem; }
    .hero p { font-size: .95rem; }

    /* Acordeones */
    .acordeon summary { padding: .75rem .9rem; padding-right: 2.25rem; font-size: .92rem; }
    .acordeon summary::after { width: 22px; height: 22px; right: .75rem; }
    .acordeon-body { padding: .25rem .9rem .85rem; }

    /* Detalle del curso */
    .seccion-curso { padding: 1rem; margin: 1.25rem 0; }
    .seccion-curso::before { top: 1rem; bottom: 1rem; }

    /* Bloque por facultad */
    .facultad-bloque { padding: 1rem; }

    /* Footer */
    .footer { padding: 1rem .85rem; font-size: .82rem; }

    /* Tags y badges no rompen línea por sí solos */
    .tag, .acordeon summary .badge { white-space: nowrap; }

    /* Listas con padding más razonable en mobile */
    .seccion-curso ul,
    .acordeon-body ul { padding-left: 1.1rem; }
}

/* Móvil pequeño (≤380px): apretar un poco más */
@media (max-width: 380px) {
    h1 { font-size: 1.4rem; }
    .card-area h3 { font-size: 1.25rem; }
    .navlinks a { padding: .35rem .6rem; font-size: .8rem; }
    .acordeon summary { font-size: .88rem; }
}

/* Reducir animaciones para usuarios que lo prefieren */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0ms !important;
        transition-duration: 0ms !important;
    }
}

/* Animación sutil al cargar */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.container > * { animation: fadeUp 350ms ease-out both; }
.container > *:nth-child(2) { animation-delay: 50ms; }
.container > *:nth-child(3) { animation-delay: 100ms; }
.container > *:nth-child(4) { animation-delay: 150ms; }

/* ============================================
   Auth (login / register / perfil)
   ============================================ */
.auth-card {
    max-width: 460px;
    margin: 2.5rem auto;
    background: var(--blanco-puro);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 2rem 2rem 1.75rem;
    box-shadow: var(--sombra-md);
}
.auth-card h1 { margin-top: 0; color: var(--azul); }
.auth-card .muted { color: var(--texto-suave); font-size: .92rem; }

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 1.25rem 0;
}
.auth-form label {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    font-weight: 500;
    font-size: .9rem;
    color: var(--texto);
}
.auth-form input,
.auth-form select {
    padding: .65rem .8rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    font: inherit;
    background: var(--blanco-puro);
    color: var(--texto);
    transition: border-color var(--transicion), box-shadow var(--transicion);
}
.auth-form input:focus,
.auth-form select:focus {
    outline: none;
    border-color: var(--azul-300);
    box-shadow: 0 0 0 3px rgba(42, 97, 158, 0.18);
}

.btn-primary {
    background: var(--azul);
    color: var(--blanco-puro);
    border: none;
    padding: .7rem 1rem;
    border-radius: var(--radio-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transicion), transform var(--transicion);
}
.btn-primary:hover { background: var(--azul-700); }
.btn-primary:active { transform: translateY(1px); }

.alert {
    padding: .7rem .9rem;
    border-radius: var(--radio-sm);
    background: rgba(0, 58, 111, 0.06);
    border: 1px solid var(--borde);
    margin: .5rem 0 1rem;
    font-size: .92rem;
}
.alert-error {
    background: rgba(156, 0, 56, 0.08);
    border-color: rgba(156, 0, 56, 0.25);
    color: var(--rojo-osc);
}

.profile-meta {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .4rem 1rem;
    margin: 1rem 0 1.5rem;
}
.profile-meta dt { color: var(--texto-suave); font-size: .85rem; }
.profile-meta dd { margin: 0; font-weight: 500; }

.navlink-form { margin: 0; display: inline-flex; align-items: center; }
.navlink-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
    padding: .5rem .9rem;
    border-radius: 999px;
    font-weight: 500;
    font-size: .92rem;
    font-family: inherit;
    line-height: inherit;
    transition: background var(--transicion), color var(--transicion);
}
.navlink-btn:hover {
    background: rgba(255, 255, 255, 0.12);
    color: var(--amarillo);
}

/* ============================================
   Selección de indicadores y perfil extendido
   ============================================ */
.alert-success {
    background: rgba(20, 120, 50, 0.08);
    border-color: rgba(20, 120, 50, 0.25);
    color: #1a6b34;
}

.seleccion-form { margin-top: 1rem; }
.lista-seleccionable { list-style: none; padding: 0; margin: 1rem 0; }
.lista-seleccionable li {
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    margin-bottom: .5rem;
    background: var(--blanco-puro);
    transition: border-color var(--transicion), background var(--transicion);
}
.lista-seleccionable li:hover { border-color: var(--azul-300); }
.ic-check {
    display: grid;
    grid-template-columns: auto auto 1fr;
    gap: .75rem;
    align-items: start;
    padding: .75rem 1rem;
    cursor: pointer;
}
.ic-check input[type="checkbox"] {
    margin-top: .25rem;
    width: 1.05rem;
    height: 1.05rem;
    accent-color: var(--azul);
}
.ic-check:has(input:checked) {
    background: rgba(0, 58, 111, 0.04);
}

.seleccion-actions {
    display: flex;
    gap: .75rem;
    align-items: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.btn-secondary {
    display: inline-block;
    background: transparent;
    color: var(--azul);
    border: 1px solid var(--azul);
    padding: .65rem 1rem;
    border-radius: var(--radio-sm);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--transicion), color var(--transicion);
}
.btn-secondary:hover { background: var(--azul); color: var(--blanco-puro); }

.profile-card { margin-bottom: 1.5rem; }
.profile-section { margin-bottom: 2.5rem; }
.profile-section h2 {
    color: var(--azul);
    margin: 0;
}

/* --- Profile header --- */
.profile-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
    background: var(--blanco-puro);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1.5rem 1.75rem;
    margin: 0 0 2rem;
    box-shadow: var(--sombra-sm);
}
.profile-header-main { flex: 1 1 320px; min-width: 0; }
.profile-eyebrow {
    margin: 0 0 .35rem;
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--texto-suave);
    font-weight: 600;
}
.profile-header h1 {
    margin: 0 0 .35rem;
    color: var(--azul);
    font-size: 1.85rem;
    line-height: 1.15;
}
.profile-faculty {
    margin: 0;
    color: var(--texto-suave);
    font-size: .95rem;
}
.profile-header-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: flex-end;
}
.profile-kpis {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
}
.profile-kpis li {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 72px;
    padding: .5rem .75rem;
    background: rgba(0, 58, 111, 0.05);
    border-radius: var(--radio-sm);
}
.kpi-num {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--azul);
    line-height: 1;
}
.kpi-label {
    font-size: .75rem;
    color: var(--texto-suave);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: .25rem;
}
.profile-logout { margin: 0; }
.btn-sm { padding: .4rem .75rem; font-size: .85rem; }
.profile-created { margin: 0; font-size: .8rem; color: var(--texto-suave); }

/* --- Section head --- */
.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
    border-bottom: 1px solid var(--borde);
    padding-bottom: .5rem;
}
.section-sub {
    color: var(--texto-suave);
    font-size: .88rem;
}

/* --- Cursos habilitados --- */
.grid-cursos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.course-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.1rem 1.25rem;
    background: var(--blanco-puro);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    text-decoration: none;
    color: var(--texto);
    box-shadow: var(--sombra-sm);
    transition: transform var(--transicion), box-shadow var(--transicion), border-color var(--transicion);
    min-height: 130px;
}
.course-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
    border-color: var(--azul-300);
    color: var(--texto);
}
.course-card h3 {
    margin: 0;
    color: var(--azul);
    font-size: 1.05rem;
    line-height: 1.25;
}
.course-meta {
    margin: 0;
    color: var(--texto-suave);
    font-size: .85rem;
}
.course-cta {
    margin-top: auto;
    color: var(--azul-300);
    font-weight: 600;
    font-size: .88rem;
}
.course-card-pending {
    background: #f6f7f9;
    cursor: not-allowed;
    opacity: .85;
}
.course-card-pending h3 { color: var(--texto-suave); }
.course-card-pending:hover { transform: none; box-shadow: var(--sombra-sm); border-color: var(--borde); }
.course-tag-pending {
    margin-top: auto;
    align-self: flex-start;
    background: rgba(180, 130, 0, 0.12);
    color: #8a5a00;
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .25rem .55rem;
    border-radius: 999px;
}

/* --- Dominios (versión densa) --- */
.grid-dominios {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}
.domain-card {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1rem 1.15rem;
    background: linear-gradient(135deg, #1f6f4a 0%, #145236 100%);
    color: var(--blanco-puro);
    border-radius: var(--radio);
    text-decoration: none;
    box-shadow: var(--sombra-sm);
    transition: transform var(--transicion), box-shadow var(--transicion);
    min-height: 130px;
}
.domain-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--sombra-md);
    color: var(--blanco-puro);
}
.domain-tag {
    align-self: flex-start;
    background: rgba(255, 255, 255, 0.18);
    color: var(--blanco-puro);
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .2rem .55rem;
    border-radius: 999px;
}
.domain-card h3 {
    margin: 0;
    color: var(--blanco-puro);
    font-size: 1.05rem;
    line-height: 1.2;
}
.domain-progress {
    height: 6px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    overflow: hidden;
    margin-top: auto;
}
.domain-progress-bar {
    height: 100%;
    background: var(--amarillo, #ffce47);
    border-radius: 999px;
    transition: width .3s ease;
}
.domain-meta {
    margin: 0;
    font-size: .82rem;
    color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 640px) {
    .profile-header { padding: 1.1rem 1.25rem; gap: 1.25rem; }
    .profile-header-side { align-items: flex-start; width: 100%; }
    .profile-kpis { gap: .75rem; }
    .profile-kpis li { min-width: 64px; padding: .4rem .55rem; }
    .kpi-num { font-size: 1.25rem; }
}

.dominio-bloque {
    background: var(--blanco-puro);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    box-shadow: var(--sombra-sm);
}
.dominio-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: .5rem;
}
.dominio-header h3 { margin: 0; color: var(--azul); }
.link-editar {
    font-size: .88rem;
    color: var(--azul-300);
    text-decoration: none;
}
.link-editar:hover { text-decoration: underline; }

/* ============================================
   Admin
   ============================================ */
.card-static { cursor: default; }
.card-static:hover { transform: none; box-shadow: var(--sombra-sm); }
.lista-compacta { margin-top: .75rem; }
.lista-compacta li {
    background: rgba(0, 58, 111, 0.04);
    border-left: 3px solid var(--azul-300);
    padding: .5rem .75rem;
    border-radius: var(--radio-sm);
    margin-bottom: .35rem;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: .65rem;
    align-items: start;
    font-size: .92rem;
}