/* =====================================================
   Akcadmia — componentes/portada-ciclos.css
   Tarjeta de ciclo de la portada pública.

   GLOBAL y no en Index.cshtml.css: estas tarjetas las pinta
   js/home/index.js con innerHTML, así que no llevan el atributo de scope que
   Razor añade a su propio marcado y las reglas de un .cshtml.css NO les
   aplicarían. Es el mismo motivo por el que .course-card llevaba tiempo sin
   hacer nada.
   ===================================================== */

/* Borde, radio y sombra de la paleta: la tarjeta se lee como el resto de las
   superficies de la portada y cambia sola con el tema. */
.edu-ciclo {
    border: 1px solid var(--edu-borde);
    border-radius: var(--edu-radio-grande);
    overflow: hidden;
    box-shadow: var(--edu-sombra);
    transition: transform .3s ease, box-shadow .3s ease;
}

    .edu-ciclo:hover {
        transform: translateY(-6px);
        box-shadow: var(--edu-sombra-hover);
    }

/* === Imagen ===
   Proporción fija con aspect-ratio: si cada ciclo trajera una imagen de
   distinto alto, la rejilla quedaría desalineada. object-fit: cover recorta
   sin deformar, que es preferible a estirar la foto. El fondo, que es lo que se
   ve cuando no hay foto, es el mismo degradado índigo del hero. */
.edu-ciclo__medio {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, #312E81 0%, #4F46E5 55%, #6366F1 100%);
    overflow: hidden;
}

.edu-ciclo__imagen {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Sin imagen no se deja un hueco blanco: queda el degradado con un icono, que
   es coherente con el resto de la portada. */
.edu-ciclo__medio-vacio {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, .55);
    font-size: 2.5rem;
}

/* Degradado inferior para que el nombre se lea sobre cualquier foto, clara u
   oscura, sin depender de la suerte. */
.edu-ciclo__titulo {
    position: absolute;
    inset: auto 0 0 0;
    padding: 2rem .9rem .7rem;
    background: linear-gradient(to top, rgba(0, 0, 0, .78), transparent);
    color: #fff;
}

/* Blanco explícito: la regla general de títulos de sitio.css les da el índigo
   oscuro, que sobre el velo negro de la foto no se leería. */
.edu-ciclo__nombre {
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.25;
    color: #fff;
}

.edu-ciclo__fechas {
    font-size: .78rem;
    opacity: .9;
}

/* === Cuerpo ===
   La descripción se recorta a tres líneas: los ciclos con textos muy largos
   descuadraban la altura de la fila entera. El color sale de la paleta y no de
   --bs-secondary-color, que el tema oscuro no remapea y dejaría texto casi negro
   sobre la tarjeta oscura. */
.edu-ciclo__descripcion {
    font-size: .875rem;
    color: var(--edu-texto-suave);
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: .75rem;
}

/* === Datos del ciclo ===
   Duración y número de cursos en dos chips con su icono. Llevan colores propios y
   no los badges de Bootstrap: bg-primary pasa en tema oscuro al índigo luminoso, y
   el texto blanco encima no llega al contraste mínimo. */
.edu-ciclo__datos {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.edu-ciclo__dato {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background-color: var(--edu-claro);
    color: #312E81;
    font-size: .8rem;
    font-weight: 600;
}

    .edu-ciclo__dato .bi {
        color: var(--edu-primario);
    }

[data-tema="oscuro"] .edu-ciclo__dato {
    color: #E2E8F0;
}

/* === Tarjetas de relleno ===
   Las pinta la vista mientras llega la respuesta de la API y las sustituye
   index.js. Tienen la forma de una tarjeta real, así que la rejilla no salta al
   cambiar. Un brillo recorre cada barra; con la preferencia de menos movimiento
   se queda quieto. */
.edu-ciclo--esqueleto {
    pointer-events: none;
}

    .edu-ciclo--esqueleto .edu-ciclo__medio,
    .edu-ciclo__barra-esqueleto {
        background: linear-gradient(90deg, #E7E6F8 0%, #F4F3FD 50%, #E7E6F8 100%);
        background-size: 200% 100%;
        animation: edu-ciclo-brillo 1.4s ease-in-out infinite;
    }

.edu-ciclo__barra-esqueleto {
    display: block;
    height: .75rem;
    margin-bottom: .65rem;
    border-radius: 999px;
}

.edu-ciclo__barra-esqueleto--media {
    width: 70%;
}

.edu-ciclo__barra-esqueleto--corta {
    width: 45%;
}

[data-tema="oscuro"] .edu-ciclo--esqueleto .edu-ciclo__medio,
[data-tema="oscuro"] .edu-ciclo__barra-esqueleto {
    background-image: linear-gradient(90deg, #26344C 0%, #33445F 50%, #26344C 100%);
}

@keyframes edu-ciclo-brillo {
    from {
        background-position: 100% 0;
    }

    to {
        background-position: -100% 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .edu-ciclo--esqueleto .edu-ciclo__medio,
    .edu-ciclo__barra-esqueleto {
        animation: none;
    }
}

/* === Sin ciclos activos ===
   Un panel compacto y no un hueco: ilustración, mensaje y dos salidas, a las
   landings de los ciclos y al directorio de profesores, para que la sección no sea
   un callejón sin salida. En escritorio va en una sola fila, que es lo que evita
   el vacío; por debajo se apila centrado. El degradado es el de la sección de
   profesores, el índigo y el lima rebajados hasta ser una superficie.

   Lo clona js/home/index.js desde una plantilla de la vista, así que entra en la
   página ya con el aviso montado: la entrada es una animación de CSS que corre
   sola al insertarse. */
.edu-ciclo-vacio {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.25rem 1.75rem;
    padding: 1.5rem 1.75rem;
    border: 1px solid var(--edu-borde);
    border-radius: 1.5rem;
    background: linear-gradient(135deg, #EEF0FF 0%, #F7F7FF 55%, #F4FBE6 100%);
    animation: edu-ciclo-vacio-entrada .6s cubic-bezier(.2, .7, .2, 1) backwards;
}

[data-tema="oscuro"] .edu-ciclo-vacio {
    background: linear-gradient(135deg, #1E1B4B 0%, #172036 55%, #1A2A1C 100%);
}

/* El calendario en un disco índigo que flota despacio, rodeado por una órbita
   discontinua que gira con un punto lima: algo se está preparando. */
.edu-ciclo-vacio__ilustracion {
    position: relative;
    display: grid;
    place-items: center;
    width: 5.5rem;
    height: 5.5rem;
}

.edu-ciclo-vacio__orbita {
    position: absolute;
    inset: 0;
    border: 2px dashed rgba(79, 70, 229, .35);
    border-radius: 50%;
    animation: edu-ciclo-vacio-giro 14s linear infinite;
}

[data-tema="oscuro"] .edu-ciclo-vacio__orbita {
    border-color: rgba(129, 140, 248, .4);
}

.edu-ciclo-vacio__orbita::after {
    content: "";
    position: absolute;
    top: -.3rem;
    left: 50%;
    width: .6rem;
    height: .6rem;
    margin-left: -.3rem;
    border-radius: 50%;
    background-color: var(--edu-acento);
    box-shadow: 0 0 0 .2rem rgba(132, 204, 22, .25);
}

.edu-ciclo-vacio__icono {
    display: grid;
    place-items: center;
    width: 3.75rem;
    height: 3.75rem;
    border-radius: 50%;
    background-image: linear-gradient(135deg, #4F46E5, #818CF8);
    box-shadow: 0 .75rem 1.5rem rgba(79, 70, 229, .3);
    color: #FFFFFF;
    font-size: 1.6rem;
    animation: edu-ciclo-vacio-flota 4s ease-in-out infinite;
}

.edu-ciclo-vacio__titulo {
    margin: 0 0 .3rem;
    font-size: 1.15rem;
    font-weight: 700;
}

.edu-ciclo-vacio__texto {
    margin: 0;
    color: var(--edu-texto-suave);
}

.edu-ciclo-vacio__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
}

/* Tableta y móvil: la fila no cabe, así que el panel se apila centrado. */
@media (max-width: 991.98px) {
    .edu-ciclo-vacio {
        grid-template-columns: minmax(0, 1fr);
        justify-items: center;
        padding: 1.75rem 1.25rem;
        text-align: center;
    }

    .edu-ciclo-vacio__acciones {
        justify-content: center;
    }
}

/* En el teléfono los botones van a todo el ancho, como en el resto de la portada. */
@media (max-width: 575.98px) {
    .edu-ciclo-vacio__acciones {
        width: 100%;
    }

        .edu-ciclo-vacio__acciones .btn {
            width: 100%;
        }
}

@keyframes edu-ciclo-vacio-entrada {
    from {
        opacity: 0;
        transform: translateY(1rem);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes edu-ciclo-vacio-giro {
    to {
        transform: rotate(360deg);
    }
}

@keyframes edu-ciclo-vacio-flota {
    50% {
        transform: translateY(-.35rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .edu-ciclo-vacio,
    .edu-ciclo-vacio__orbita,
    .edu-ciclo-vacio__icono {
        animation: none;
    }
}