/* ==========================================================================
   Tema "Moderno" — se carga solo para instituciones con Institucion.tema =
   'MODERNO' (ver base.html). Son ajustes SOBRE style.css, todos bajo el
   selector [data-tema="moderno"], para no tocar la interfaz clásica
   (uniminuto).
   ========================================================================== */

[data-tema="moderno"] {
    --cv-bg: #f6f8fc;
    --cv-radius-card: 18px;
    --cv-shadow-soft: 0 1px 2px rgba(15, 35, 80, .04), 0 12px 30px rgba(15, 35, 80, .07);
}

[data-tema="moderno"] body.campus-virtual,
body.campus-virtual[data-tema="moderno"] {
    background:
        radial-gradient(1200px 560px at 12% -4%, color-mix(in srgb, var(--cv-primary) 9%, transparent), transparent 60%),
        radial-gradient(900px 480px at 100% 0%, color-mix(in srgb, var(--cv-accent) 12%, transparent), transparent 55%),
        var(--cv-bg);
}

/* ---- Cabecera ---- */
[data-tema="moderno"] .cv-header {
    padding: 0.85rem 1.6rem;
    background: color-mix(in srgb, var(--cv-surface) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(8px);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--cv-border);
    box-shadow: 0 1px 0 rgba(15, 35, 80, .03);
}
[data-tema="moderno"] .cv-header a.cv-brand,
[data-tema="moderno"] .cv-header span.cv-brand {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}
/* Fuera el birrete; en su lugar un punto con el color de la institución. */
[data-tema="moderno"] .cv-header a.cv-brand::before,
[data-tema="moderno"] .cv-header span.cv-brand::before {
    width: 0.62rem;
    height: 0.62rem;
    margin-right: 0.6rem;
    border-radius: 50%;
    background: var(--cv-primary);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cv-primary) 18%, transparent);
}
[data-tema="moderno"] .cv-header .cv-user a { font-weight: 600; }

/* ---- Contenedor / títulos ---- */
[data-tema="moderno"] .cv-container { padding-top: 2rem; }
[data-tema="moderno"] .cv-titulo,
[data-tema="moderno"] .cv-container > h2 {
    letter-spacing: -0.02em;
    font-weight: 800;
}

/* ---- Tarjetas ---- */
[data-tema="moderno"] .cv-card {
    border-radius: var(--cv-radius-card);
    border-color: color-mix(in srgb, var(--cv-border) 70%, transparent);
    box-shadow: var(--cv-shadow-soft);
}
[data-tema="moderno"] .cv-card:has(> a.cv-link-block):hover {
    transform: translateY(-2px);
    border-color: color-mix(in srgb, var(--cv-primary) 35%, var(--cv-border));
}
/* La barrita de color del borde superior de las tarjetas-enlace: más fina
   y con el color de la institución. */
[data-tema="moderno"] .cv-card:has(> a.cv-link-block)::before,
[data-tema="moderno"] .cv-card:has(> a.cv-link-block):nth-of-type(2n)::before {
    height: 3px;
    background: linear-gradient(90deg, var(--cv-primary), var(--cv-accent));
}

/* ---- Rejilla de cursos (escritorio / oferta) ---- */
[data-tema="moderno"] .cv-cursos-rejilla { gap: 1.25rem; }
[data-tema="moderno"] .cv-curso-tarjeta {
    border-radius: var(--cv-radius-card);
    border-color: color-mix(in srgb, var(--cv-border) 70%, transparent);
    box-shadow: var(--cv-shadow-soft);
    padding: 0.6rem 0.6rem 1.1rem;
}
[data-tema="moderno"] .cv-curso-tarjeta:hover {
    transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--cv-primary) 30%, var(--cv-border));
}
[data-tema="moderno"] .cv-curso-portada {
    border-radius: 14px;
    background: linear-gradient(150deg, var(--cv-navy), var(--cv-primary));
}
[data-tema="moderno"] .cv-curso-titulo { letter-spacing: -0.01em; }

/* ---- Botones ---- */
[data-tema="moderno"] .cv-btn {
    border-radius: 12px;
    padding: 0.62rem 1.3rem;
    box-shadow: 0 1px 2px rgba(15, 35, 80, .12), 0 8px 20px color-mix(in srgb, var(--cv-primary) 22%, transparent);
}
[data-tema="moderno"] .cv-btn:hover {
    filter: brightness(1.03);
    box-shadow: 0 2px 4px rgba(15, 35, 80, .14), 0 12px 26px color-mix(in srgb, var(--cv-primary) 30%, transparent);
}
[data-tema="moderno"] .cv-btn-suave {
    border-radius: 12px;
    background: color-mix(in srgb, var(--cv-primary) 8%, var(--cv-surface));
    color: var(--cv-primary-dark);
    box-shadow: none;
}
[data-tema="moderno"] .cv-btn-suave:hover {
    background: color-mix(in srgb, var(--cv-primary) 14%, var(--cv-surface));
    color: var(--cv-primary-dark);
}

/* ---- Formularios ---- */
[data-tema="moderno"] .cv-form input[type=text],
[data-tema="moderno"] .cv-form input[type=password],
[data-tema="moderno"] .cv-form input[type=email],
[data-tema="moderno"] .cv-form input[type=tel],
[data-tema="moderno"] .cv-form input[type=number],
[data-tema="moderno"] .cv-form textarea,
[data-tema="moderno"] .cv-form select,
[data-tema="moderno"] body.campus-virtual input,
[data-tema="moderno"] body.campus-virtual select,
[data-tema="moderno"] body.campus-virtual textarea {
    border-radius: 11px;
    border-width: 1.5px;
}
[data-tema="moderno"] .cv-form label {
    text-transform: none;
    letter-spacing: 0;
    color: var(--cv-navy);
    font-size: 0.82rem;
}

/* ---- Migas de pan / badges ---- */
[data-tema="moderno"] .cv-breadcrumb {
    background: transparent;
    border: 0;
    padding-left: 0;
    font-weight: 600;
}
[data-tema="moderno"] .cv-badge { border-radius: 999px; }

/* ---- Barras de progreso ---- */
[data-tema="moderno"] .cv-progress-track,
[data-tema="moderno"] .cv-curso-progreso { border-radius: 999px; }


/* ==========================================================================
   Movimiento y pulido extra del tema Moderno -para que la plataforma se
   sienta viva y cuidada-. Todo se apaga solo con prefers-reduced-motion
   (red de seguridad global en style.css).
   ========================================================================== */

/* Entrada escalonada de las tarjetas de curso en la oferta / escritorio. */
@keyframes cv-mod-entra {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}
[data-tema="moderno"] .cv-curso-tarjeta {
    animation: cv-mod-entra 0.5s var(--cv-ease-out) both;
    transition:
        transform 0.28s var(--cv-ease-out),
        box-shadow 0.28s var(--cv-ease-out),
        border-color 0.28s var(--cv-ease-out);
}
[data-tema="moderno"] .cv-cursos-rejilla .cv-curso-tarjeta:nth-child(1) { animation-delay: 0.02s; }
[data-tema="moderno"] .cv-cursos-rejilla .cv-curso-tarjeta:nth-child(2) { animation-delay: 0.09s; }
[data-tema="moderno"] .cv-cursos-rejilla .cv-curso-tarjeta:nth-child(3) { animation-delay: 0.16s; }
[data-tema="moderno"] .cv-cursos-rejilla .cv-curso-tarjeta:nth-child(4) { animation-delay: 0.23s; }
[data-tema="moderno"] .cv-cursos-rejilla .cv-curso-tarjeta:nth-child(5) { animation-delay: 0.30s; }
[data-tema="moderno"] .cv-cursos-rejilla .cv-curso-tarjeta:nth-child(n+6) { animation-delay: 0.36s; }

[data-tema="moderno"] .cv-curso-tarjeta:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 44px color-mix(in srgb, var(--cv-navy) 22%, transparent);
    border-color: color-mix(in srgb, var(--cv-primary) 40%, var(--cv-border));
}

/* La portada hace zoom suave al pasar el cursor por la tarjeta. */
[data-tema="moderno"] .cv-curso-portada { overflow: hidden; }
[data-tema="moderno"] .cv-curso-portada img {
    transition: transform 0.5s var(--cv-ease-out);
}
[data-tema="moderno"] .cv-curso-tarjeta:hover .cv-curso-portada img { transform: scale(1.06); }

/* Etiqueta Gratis / De pago: entra con un leve pop. */
[data-tema="moderno"] .cv-curso-etiqueta {
    animation: cv-mod-pop 0.4s var(--cv-ease-spring) both 0.2s;
}
@keyframes cv-mod-pop {
    from { opacity: 0; transform: scale(0.7); }
    to { opacity: 1; transform: scale(1); }
}

/* Botones: brillo que cruza al pasar el cursor. */
[data-tema="moderno"] .cv-btn:not(.cv-btn-suave) {
    position: relative;
    overflow: hidden;
}
[data-tema="moderno"] .cv-btn:not(.cv-btn-suave)::after {
    content: "";
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
    transform: skewX(-18deg);
    transition: left 0.55s var(--cv-ease-out);
}
[data-tema="moderno"] .cv-btn:not(.cv-btn-suave):hover::after { left: 130%; }
[data-tema="moderno"] .cv-btn:active { transform: translateY(1px); }

/* Aviso de la oferta y tarjeta de contacto: aparecen suave. */
[data-tema="moderno"] .cv-oferta-aviso,
[data-tema="moderno"] .cv-contacto-card {
    animation: cv-mod-entra 0.5s var(--cv-ease-out) both 0.12s;
}
[data-tema="moderno"] .cv-contacto-card {
    border-radius: var(--cv-radius-card);
    box-shadow: var(--cv-shadow-soft);
    background:
        linear-gradient(120deg, color-mix(in srgb, var(--cv-primary) 5%, var(--cv-surface)), var(--cv-surface));
}