/* =========================================================
   IEEL · AULA VIRTUAL
   HOJA DE ESTILOS GENERAL
   Login, navegación, aula inicial y certificados
========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700&display=swap');

/* =========================================================
   IEEL - Aula Virtual
   Archivo: /cursos/aula/style.css
   Primera etapa: pantalla de inicio de sesión
========================================================= */

:root {
    --ieel-vino: #591919;
    --ieel-vino-oscuro: #3f1010;
    --ieel-vino-profundo: #2b0909;
    --ieel-oro: #b4935a;
    --ieel-oro-oscuro: #9d7c46;
    --ieel-oro-claro: #d8c7a0;
    --ieel-marfil: #fbfaf7;
    --ieel-perla: #f4f0ea;
    --ieel-blanco: #ffffff;
    --ieel-linea: #e2ddd6;
    --ieel-texto: #24201d;
    --ieel-texto-suave: #6f6760;
    --ieel-error: #8f2323;
    --ieel-error-fondo: #fff4f2;
    --ieel-exito: #2f6f4e;
    --ieel-exito-fondo: #f0faf4;
    --ieel-sombra: rgba(89, 25, 25, 0.14);
}

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

html {
    min-height: 100%;
    -webkit-text-size-adjust: 100%;
    scrollbar-gutter: stable;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Montserrat", Arial, sans-serif;
    color: var(--ieel-texto);
}

button,
input,
select,
textarea {
    font: inherit;
}

img {
    max-width: 100%;
}

a {
    color: inherit;
}

body.login-body {
    background:
        radial-gradient(
            circle at top left,
            rgba(180, 147, 90, 0.16),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            var(--ieel-marfil) 0%,
            var(--ieel-perla) 55%,
            var(--ieel-blanco) 100%
        );
}

/* CONTENEDOR PRINCIPAL */

.ieel-login-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px 18px;
}

/* TARJETA */

.ieel-login-card {
    width: 100%;
    max-width: 455px;
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid var(--ieel-linea);
    border-top: 4px solid var(--ieel-oro);
    box-shadow: 0 26px 70px var(--ieel-sombra);
    padding: 38px;
}

.ieel-login-card::before {
    content: "";
    position: absolute;
    inset: 12px;
    border: 1px solid rgba(180, 147, 90, 0.18);
    pointer-events: none;
}

.ieel-login-card-inner {
    position: relative;
    z-index: 1;
}

/* LOGOTIPO */

.ieel-login-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 92px;
    margin-bottom: 26px;
    text-align: center;
}

.ieel-login-logo img {
    display: block;
    width: auto;
    max-width: 350px;
    max-height: 150px;
    object-fit: contain;
}

/* ENCABEZADO */

.ieel-login-card-header {
    margin-bottom: 28px;
}

.ieel-login-card-header span {
    display: block;
    margin-bottom: 10px;
    color: var(--ieel-vino);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ieel-login-card-header h1 {
    margin: 0 0 10px;
    color: var(--ieel-vino-oscuro);
    font-size: 29px;
    line-height: 1.25;
    font-weight: 500;
    letter-spacing: -0.4px;
}

.ieel-login-card-header p {
    margin: 0;
    color: var(--ieel-texto-suave);
    font-size: 14px;
    line-height: 1.65;
}

/* ALERTAS */

.ieel-alert {
    margin-bottom: 22px;
    padding: 13px 15px;
    border: 1px solid rgba(143, 35, 35, 0.22);
    background: var(--ieel-error-fondo);
    color: var(--ieel-error);
    font-size: 13.5px;
    line-height: 1.55;
}

.ieel-alert-success {
    border-color: rgba(47, 111, 78, 0.25);
    background: var(--ieel-exito-fondo);
    color: var(--ieel-exito);
}

/* FORMULARIO */

.ieel-login-form {
    display: grid;
    gap: 16px;
}

.ieel-form-group {
    display: grid;
    gap: 8px;
}

.ieel-login-form label {
    color: var(--ieel-texto);
    font-size: 13px;
    font-weight: 700;
}

.ieel-input-wrap {
    position: relative;
}

.ieel-input-wrap input {
    width: 100%;
    height: 50px;
    border: 1px solid var(--ieel-linea);
    border-radius: 0;
    background: var(--ieel-blanco);
    color: var(--ieel-texto);
    padding: 0 14px;
    font-size: 14px;
    outline: none;
    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.ieel-input-wrap input::placeholder {
    color: #a49a91;
}

.ieel-input-wrap input:hover {
    border-color: #cec5bb;
}

.ieel-input-wrap input:focus {
    border-color: var(--ieel-oro);
    background: #fffdf9;
    box-shadow: 0 0 0 4px rgba(180, 147, 90, 0.14);
}

.ieel-input-wrap input[aria-invalid="true"] {
    border-color: var(--ieel-error);
}

/* FILA AUXILIAR */

.ieel-login-options {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin-top: -2px;
}

.ieel-login-link {
    color: var(--ieel-vino);
    font-size: 12.5px;
    font-weight: 600;
    text-decoration: none;
}

.ieel-login-link:hover,
.ieel-login-link:focus {
    color: var(--ieel-oro-oscuro);
    text-decoration: underline;
}

/* BOTÓN */

.ieel-login-button {
    width: 100%;
    min-height: 52px;
    margin-top: 8px;
    border: 0;
    border-radius: 0;
    background: linear-gradient(
        135deg,
        var(--ieel-vino-oscuro),
        var(--ieel-vino)
    );
    color: var(--ieel-blanco);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background 0.2s ease;
}

.ieel-login-button:hover {
    transform: translateY(-1px);
    background: linear-gradient(
        135deg,
        var(--ieel-vino),
        var(--ieel-vino-oscuro)
    );
    box-shadow: 0 14px 28px rgba(89, 25, 25, 0.22);
}

.ieel-login-button:focus-visible {
    outline: 3px solid rgba(180, 147, 90, 0.45);
    outline-offset: 3px;
}

.ieel-login-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.ieel-login-button:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* NOTA INFERIOR */

.ieel-login-note {
    margin-top: 24px;
    padding-top: 18px;
    border-top: 1px solid var(--ieel-linea);
    color: var(--ieel-texto-suave);
    font-size: 12.5px;
    line-height: 1.65;
}

.ieel-login-note p {
    margin: 0;
}

.ieel-login-note strong {
    color: var(--ieel-vino);
    font-weight: 700;
}

/* PIE */

.ieel-login-footer {
    margin-top: 20px;
    color: #877d74;
    font-size: 11.5px;
    line-height: 1.55;
    text-align: center;
}

.ieel-login-footer p {
    margin: 0;
}

/* UTILIDADES DE ACCESIBILIDAD */

.sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

:focus-visible {
    outline-color: var(--ieel-oro);
}

/* RESPONSIVE */

@media (max-width: 520px) {
    .ieel-login-page {
        align-items: flex-start;
        padding: 20px 12px;
    }

    .ieel-login-card {
        max-width: 100%;
        padding: 30px 22px;
    }

    .ieel-login-card::before {
        inset: 9px;
    }

    .ieel-login-logo {
        min-height: 76px;
        margin-bottom: 22px;
    }

    .ieel-login-logo img {
        max-width: 310px;
        max-height: 120px;
    }

    .ieel-login-card-header {
        margin-bottom: 24px;
    }

    .ieel-login-card-header h1 {
        font-size: 25px;
    }

    .ieel-login-options {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 360px) {
    .ieel-login-card {
        padding: 26px 18px;
    }

    .ieel-login-card-header h1 {
        font-size: 23px;
    }

    .ieel-input-wrap input {
        height: 48px;
    }
}

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

/* =========================================================
   BOTÓN SECUNDARIO DEL AULA
========================================================= */

.ieel-secondary-button {
    width: 100%;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 14px;
    padding: 0 18px;
    border: 1px solid var(--ieel-vino);
    border-radius: 0;
    background: var(--ieel-blanco);
    color: var(--ieel-vino);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.7px;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        background 0.2s ease,
        color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}

.ieel-secondary-button:hover,
.ieel-secondary-button:focus {
    background: var(--ieel-vino);
    color: var(--ieel-blanco);
    border-color: var(--ieel-vino);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(89, 25, 25, 0.14);
}

.ieel-secondary-button:focus-visible {
    outline: 3px solid rgba(180, 147, 90, 0.45);
    outline-offset: 3px;
}

.ieel-secondary-button:active {
    transform: translateY(0);
    box-shadow: none;
}

.ieel-secondary-action {
    margin-top: 14px;
}

.ieel-secondary-action .ieel-secondary-button {
    margin-top: 0;
}/* =========================================================
   IEEL · AULA INICIAL
   Diseño institucional profesional
   Prioridad cromática:
   1. Rojo oscuro
   2. Blanco
   3. Grises con degradados
   Pegar al FINAL de /cursos/aula/style.css
========================================================= */

:root {
    --ieel-aula-rojo-950: #430303;
    --ieel-aula-rojo-900: #590505;
    --ieel-aula-rojo-850: #680707;
    --ieel-aula-rojo-800: #780909;
    --ieel-aula-rojo-700: #920e0e;
    --ieel-aula-rojo-600: #ac1515;

    --ieel-aula-blanco: #ffffff;
    --ieel-aula-blanco-suave: #fcfcfc;

    --ieel-aula-gris-950: #2f3032;
    --ieel-aula-gris-900: #3d3e40;
    --ieel-aula-gris-800: #505154;
    --ieel-aula-gris-700: #66676a;
    --ieel-aula-gris-600: #7e7f82;
    --ieel-aula-gris-500: #999a9d;
    --ieel-aula-gris-300: #cfd0d2;
    --ieel-aula-gris-200: #dedfe1;
    --ieel-aula-gris-150: #e9e9ea;
    --ieel-aula-gris-100: #f1f1f2;
    --ieel-aula-gris-050: #f7f7f8;

    --ieel-aula-verde: #287a50;
    --ieel-aula-sombra-roja: rgba(67, 3, 3, 0.22);
    --ieel-aula-sombra-suave: rgba(41, 42, 45, 0.10);
}

body.ieel-aula-home {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: hidden;
    font-family: "Montserrat", Arial, sans-serif;
    color: var(--ieel-aula-gris-950);
    background:
        radial-gradient(circle at 88% 8%, rgba(120, 9, 9, 0.07), transparent 23%),
        linear-gradient(135deg, #ececed 0%, #f8f8f9 42%, #e5e5e7 100%);
}

body.ieel-aula-home,
body.ieel-aula-home *,
body.ieel-aula-home *::before,
body.ieel-aula-home *::after {
    box-sizing: border-box;
}

body.ieel-aula-home a {
    color: inherit;
}

body.ieel-aula-home button,
body.ieel-aula-home input {
    font-family: inherit;
}

.ieel-aula-layout {
    min-height: 100vh;
    min-height: 100dvh;
    display: grid;
    grid-template-columns: 308px minmax(0, 1fr);
}

/* SIDEBAR */

.ieel-aula-sidebar {
    position: sticky;
    top: 0;
    z-index: 60;
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    padding: 26px 22px 20px;
    color: var(--ieel-aula-blanco);
    background:
        linear-gradient(160deg, rgba(255, 255, 255, 0.055), transparent 34%),
        linear-gradient(180deg, var(--ieel-aula-rojo-800) 0%, var(--ieel-aula-rojo-900) 48%, var(--ieel-aula-rojo-950) 100%);
    border-right: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 18px 0 46px rgba(44, 3, 3, 0.18);
}

.ieel-aula-sidebar::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(130deg, transparent 0 64%, rgba(255, 255, 255, 0.035) 64% 74%, transparent 74%),
        radial-gradient(circle at 20% 5%, rgba(255, 255, 255, 0.10), transparent 19%);
}

.ieel-aula-sidebar > * {
    position: relative;
    z-index: 1;
}

.ieel-aula-sidebar-head {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.ieel-aula-brand {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
    padding: 4px 4px 2px;
    text-decoration: none;
}

.ieel-aula-brand-logo-image {
    display: block;
    width: 100%;
    max-width: 248px;
    height: auto;
    max-height: 105px;
    object-fit: contain;
    object-position: left center;
    filter: drop-shadow(0 10px 18px rgba(45, 2, 2, 0.22));
}

.ieel-aula-brand-copy {
    display: grid;
    gap: 5px;
}

.ieel-aula-brand-title {
    display: block;
    color: var(--ieel-aula-blanco);
    font-size: 21px;
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: 0.1px;
}

.ieel-aula-brand-subtitle {
    display: block;
    color: rgba(255, 255, 255, 0.72);
    font-size: 10px;
    line-height: 1.25;
    font-weight: 700;
    letter-spacing: 1.45px;
    text-transform: uppercase;
}

.ieel-aula-sidebar-close {
    display: none;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    color: var(--ieel-aula-blanco);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
}

.ieel-aula-sidebar-close span {
    font-size: 27px;
    line-height: 1;
    font-weight: 300;
}

.ieel-aula-sidebar-divider {
    height: 1px;
    margin: 23px 0 21px;
    background: linear-gradient(90deg, rgba(255,255,255,.42), rgba(255,255,255,.08), transparent);
}

.ieel-aula-nav-label {
    display: block;
    margin: 0 10px 10px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.6px;
    text-transform: uppercase;
}

.ieel-aula-nav {
    display: grid;
    gap: 7px;
}

.ieel-aula-nav-link {
    position: relative;
    min-height: 49px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 13px;
    overflow: hidden;
    text-decoration: none;
    color: rgba(255, 255, 255, 0.82);
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 600;
    transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.ieel-aula-nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: transparent;
}

.ieel-aula-nav-link:hover,
.ieel-aula-nav-link:focus-visible {
    color: var(--ieel-aula-blanco);
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(255, 255, 255, 0.10);
    transform: translateX(2px);
    outline: none;
}

.ieel-aula-nav-link.is-active {
    color: var(--ieel-aula-rojo-900);
    background: linear-gradient(135deg, var(--ieel-aula-blanco), #f0f0f1);
    border-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 11px 28px rgba(45, 2, 2, 0.22);
}

.ieel-aula-nav-link.is-active::after {
    background: var(--ieel-aula-rojo-700);
}

.ieel-aula-nav-icon {
    width: 23px;
    height: 23px;
    flex: 0 0 23px;
    display: grid;
    place-items: center;
}

.ieel-aula-nav-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-aula-sidebar-spacer {
    min-height: 34px;
    flex: 1;
}

.ieel-aula-help {
    position: relative;
    padding: 20px 10px 0;
    color: var(--ieel-aula-blanco);
    border-top: 1px solid rgba(255, 255, 255, 0.17);
}

.ieel-aula-help-kicker {
    display: block;
    margin-bottom: 8px;
    color: rgba(255, 255, 255, 0.66);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.35px;
    text-transform: uppercase;
}

.ieel-aula-help h2 {
    margin: 0 0 8px;
    color: var(--ieel-aula-blanco);
    font-size: 17px;
    line-height: 1.25;
    font-weight: 700;
}

.ieel-aula-help p {
    margin: 0 0 15px;
    color: rgba(255, 255, 255, 0.74);
    font-size: 11px;
    line-height: 1.65;
}

.ieel-aula-whatsapp {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 8px 12px;
    color: var(--ieel-aula-rojo-900);
    text-decoration: none;
    background: var(--ieel-aula-blanco);
    border: 1px solid rgba(255, 255, 255, 0.82);
    border-radius: 4px;
    box-shadow: 0 11px 24px rgba(42, 2, 2, 0.22);
    font-size: 11px;
    font-weight: 700;
    transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}

.ieel-aula-whatsapp:hover,
.ieel-aula-whatsapp:focus-visible {
    color: var(--ieel-aula-rojo-950);
    background: #f2f2f3;
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(42, 2, 2, 0.28);
    outline: none;
}

.ieel-aula-whatsapp img {
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    object-fit: contain;
}

.ieel-aula-help-email {
    display: block;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.82);
    text-align: center;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
    text-decoration: none;
}

.ieel-aula-help-email:hover,
.ieel-aula-help-email:focus-visible {
    color: var(--ieel-aula-blanco);
    text-decoration: underline;
    outline: none;
}

.ieel-aula-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 18px;
    color: rgba(255, 255, 255, 0.60);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .55px;
    text-transform: uppercase;
}

.ieel-aula-security-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #7fd4a4;
    box-shadow: 0 0 0 4px rgba(127, 212, 164, 0.12);
}

/* CONTENIDO PRINCIPAL */

.ieel-aula-main {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
}

.ieel-aula-topbar {
    position: sticky;
    top: 0;
    z-index: 45;
    min-height: 94px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding: 15px clamp(22px, 3vw, 42px);
    background: rgba(255, 255, 255, 0.94);
    border-bottom: 1px solid var(--ieel-aula-gris-200);
    box-shadow: 0 10px 28px rgba(45, 45, 48, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ieel-aula-topbar-left {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.ieel-aula-menu-button {
    display: none;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 6px;
    color: var(--ieel-aula-rojo-900);
    background: linear-gradient(135deg, var(--ieel-aula-blanco), var(--ieel-aula-gris-100));
    cursor: pointer;
}

.ieel-aula-menu-button span {
    width: 20px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
}

.ieel-aula-page-heading {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.ieel-aula-page-heading span {
    color: var(--ieel-aula-rojo-700);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.45px;
    text-transform: uppercase;
}

.ieel-aula-page-heading strong {
    color: var(--ieel-aula-gris-950);
    font-size: 20px;
    line-height: 1.2;
    font-weight: 700;
}

/* PERFIL ARRIBA A LA DERECHA */

.ieel-aula-user-card {
    min-width: 490px;
    max-width: 640px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ieel-aula-user-avatar {
    width: 49px;
    height: 49px;
    flex: 0 0 49px;
    display: grid;
    place-items: center;
    color: var(--ieel-aula-blanco);
    background: linear-gradient(145deg, var(--ieel-aula-rojo-700), var(--ieel-aula-rojo-950));
    border: 2px solid var(--ieel-aula-blanco);
    border-radius: 6px;
    box-shadow: 0 8px 18px var(--ieel-aula-sombra-roja);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .7px;
}

.ieel-aula-user-data {
    min-width: 0;
    flex: 1;
    display: grid;
    gap: 4px;
}

.ieel-aula-user-data strong {
    overflow: hidden;
    color: var(--ieel-aula-gris-950);
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ieel-aula-user-data span {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--ieel-aula-gris-600);
    font-size: 9px;
    line-height: 1.25;
    font-weight: 600;
}

.ieel-aula-user-data i {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--ieel-aula-verde);
}

.ieel-aula-user-username {
    min-width: 105px;
    display: grid;
    gap: 3px;
    padding: 1px 16px;
    border-left: 1px solid var(--ieel-aula-gris-300);
}

.ieel-aula-user-username span {
    color: var(--ieel-aula-gris-500);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.ieel-aula-user-username strong {
    overflow: hidden;
    max-width: 130px;
    color: var(--ieel-aula-gris-800);
    font-size: 10px;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ieel-aula-logout-form {
    margin: 0;
}

.ieel-aula-logout-form button {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 8px 12px;
    color: var(--ieel-aula-rojo-800);
    background: transparent;
    border: 1px solid rgba(120, 9, 9, 0.30);
    border-radius: 6px;
    cursor: pointer;
    font-size: 9px;
    font-weight: 700;
    white-space: nowrap;
    transition: color .18s ease, background .18s ease, transform .18s ease;
}

.ieel-aula-logout-form button:hover,
.ieel-aula-logout-form button:focus-visible {
    color: var(--ieel-aula-blanco);
    background: var(--ieel-aula-rojo-800);
    transform: translateY(-1px);
    outline: none;
}

.ieel-aula-logout-form svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-aula-content {
    width: 100%;
    max-width: 1540px;
    margin-right: auto;
    margin-left: 0;
    padding: 30px clamp(22px, 3vw, 42px) 24px;
}

/* HERO ROJO PRIORITARIO */

.ieel-aula-hero {
    position: relative;
    min-height: 214px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    overflow: hidden;
    padding: clamp(28px, 4vw, 43px);
    color: var(--ieel-aula-blanco);
    background:
        radial-gradient(circle at 88% 10%, rgba(255,255,255,.14), transparent 20%),
        linear-gradient(125deg, var(--ieel-aula-rojo-950) 0%, var(--ieel-aula-rojo-800) 52%, var(--ieel-aula-rojo-600) 115%);
    border: 1px solid rgba(70, 3, 3, 0.42);
    border-radius: 8px;
    box-shadow: 0 24px 54px var(--ieel-aula-sombra-roja);
}

.ieel-aula-hero::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 7px;
    height: 100%;
    background: linear-gradient(180deg, #d6d6d7, var(--ieel-aula-blanco), #77787a);
}

.ieel-aula-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 750px;
}

.ieel-aula-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    min-height: 27px;
    margin-bottom: 15px;
    padding: 0 11px;
    color: var(--ieel-aula-blanco);
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.20);
    border-radius: 999px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.35px;
    text-transform: uppercase;
}

.ieel-aula-hero h1 {
    margin: 0;
    color: var(--ieel-aula-blanco);
    font-size: clamp(31px, 4vw, 48px);
    line-height: 1.08;
    font-weight: 600;
    letter-spacing: -1.2px;
}

.ieel-aula-hero p {
    max-width: 680px;
    margin: 15px 0 0;
    color: rgba(255, 255, 255, 0.80);
    font-size: 13px;
    line-height: 1.75;
    font-weight: 400;
}

.ieel-aula-hero-summary {
    position: relative;
    z-index: 2;
    min-width: 295px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.ieel-aula-hero-summary article {
    min-height: 105px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 17px;
    background: linear-gradient(145deg, rgba(255,255,255,.15), rgba(255,255,255,.07));
    border: 1px solid rgba(255, 255, 255, 0.19);
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

.ieel-aula-hero-summary span {
    color: rgba(255, 255, 255, 0.69);
    font-size: 9px;
    line-height: 1.35;
    font-weight: 600;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.ieel-aula-hero-summary strong {
    color: var(--ieel-aula-blanco);
    font-size: 31px;
    line-height: 1;
    font-weight: 700;
}

.ieel-aula-hero-summary strong.is-status {
    font-size: 19px;
}

.ieel-aula-hero-lines {
    position: absolute;
    right: -105px;
    bottom: -130px;
    width: 430px;
    height: 310px;
    border: 1px solid rgba(255,255,255,.11);
    border-radius: 50%;
    transform: rotate(-18deg);
}

.ieel-aula-hero-lines::before,
.ieel-aula-hero-lines::after {
    content: "";
    position: absolute;
    inset: 27px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
}

.ieel-aula-hero-lines::after {
    inset: 58px;
}

/* MENSAJES */

.ieel-aula-alert {
    margin-top: 22px;
    padding: 14px 17px;
    background: var(--ieel-aula-blanco);
    border: 1px solid var(--ieel-aula-gris-200);
    border-left: 4px solid var(--ieel-aula-rojo-700);
    border-radius: 8px;
    box-shadow: 0 10px 24px var(--ieel-aula-sombra-suave);
    color: var(--ieel-aula-gris-800);
    font-size: 12px;
    line-height: 1.6;
}

.ieel-aula-alert.is-success {
    border-left-color: var(--ieel-aula-verde);
}

.ieel-aula-alert.is-error {
    color: #6a0c0c;
    background: #fffafa;
    border-left-color: var(--ieel-aula-rojo-700);
}

/* PROGRAMA */

.ieel-aula-program {
    margin-top: 31px;
}

.ieel-aula-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 17px;
    padding: 0 2px 15px;
    border-bottom: 1px solid var(--ieel-aula-gris-300);
}

.ieel-aula-section-head > div {
    min-width: 0;
}

.ieel-aula-section-kicker {
    display: block;
    margin-bottom: 7px;
    color: var(--ieel-aula-rojo-700);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 1.45px;
    text-transform: uppercase;
}

.ieel-aula-section-head h2 {
    margin: 0;
    color: var(--ieel-aula-gris-950);
    font-size: clamp(21px, 2.4vw, 29px);
    line-height: 1.25;
    font-weight: 650;
    letter-spacing: -.45px;
}

.ieel-aula-section-head p {
    max-width: 900px;
    margin: 8px 0 0;
    color: var(--ieel-aula-gris-700);
    font-size: 11px;
    line-height: 1.65;
}

.ieel-aula-program-code {
    flex: 0 0 auto;
    display: inline-flex;
    min-height: 32px;
    align-items: center;
    padding: 0 12px;
    color: var(--ieel-aula-rojo-800);
    background: var(--ieel-aula-blanco);
    border: 1px solid rgba(120, 9, 9, 0.20);
    border-radius: 7px;
    box-shadow: 0 7px 16px rgba(43, 43, 45, 0.07);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .65px;
}

.ieel-aula-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

/* TARJETAS */

.ieel-aula-module-card {
    position: relative;
    min-width: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 23px 22px 20px;
    background:
        linear-gradient(155deg, var(--ieel-aula-blanco) 0%, var(--ieel-aula-blanco) 62%, #eeeeef 145%);
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 13px;
    box-shadow: 0 16px 38px rgba(43, 43, 46, 0.11);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.ieel-aula-module-card:hover {
    transform: translateY(-4px);
    border-color: rgba(120, 9, 9, 0.28);
    box-shadow: 0 24px 48px rgba(61, 4, 4, 0.16);
}

.ieel-aula-module-accent {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--ieel-aula-rojo-950) 0%, var(--ieel-aula-rojo-600) 62%, var(--ieel-aula-gris-500) 100%);
}

.ieel-aula-module-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 17px;
}

.ieel-aula-module-number {
    color: var(--ieel-aula-rojo-800);
    font-size: 10px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ieel-aula-access-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 25px;
    padding: 0 8px;
    color: var(--ieel-aula-gris-700);
    background: linear-gradient(135deg, #f5f5f6, #e5e5e6);
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 999px;
    font-size: 8px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.ieel-aula-access-pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ieel-aula-verde);
    box-shadow: 0 0 0 3px rgba(40, 122, 80, 0.10);
}

.ieel-aula-module-card h3 {
    margin: 0;
    color: var(--ieel-aula-gris-950);
    font-size: 17px;
    line-height: 1.42;
    font-weight: 700;
    letter-spacing: -.2px;
}

.ieel-aula-module-description {
    margin: 12px 0 17px;
    color: var(--ieel-aula-gris-700);
    font-size: 10.5px;
    line-height: 1.72;
}

.ieel-aula-teachers {
    display: grid;
    gap: 10px;
    margin-bottom: 16px;
    padding: 14px;
    background:
        linear-gradient(145deg, #f5f5f6 0%, #e6e6e7 100%);
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 9px;
}

.ieel-aula-teachers-label {
    color: var(--ieel-aula-rojo-800);
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1.05px;
    text-transform: uppercase;
}

.ieel-aula-teacher {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ieel-aula-teacher-avatar {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    color: var(--ieel-aula-blanco);
    background: linear-gradient(145deg, var(--ieel-aula-rojo-700), var(--ieel-aula-rojo-950));
    border: 2px solid var(--ieel-aula-blanco);
    border-radius: 8px;
    box-shadow: 0 6px 12px rgba(76, 4, 4, 0.18);
    font-size: 9px;
    font-weight: 700;
}

.ieel-aula-teacher-copy {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ieel-aula-teacher-copy strong {
    color: var(--ieel-aula-gris-900);
    font-size: 9.5px;
    line-height: 1.35;
    font-weight: 700;
}

.ieel-aula-teacher-copy small {
    color: var(--ieel-aula-gris-600);
    font-size: 8px;
    line-height: 1.45;
    font-weight: 500;
}

.ieel-aula-module-dates {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: auto;
    margin-bottom: 15px;
}

.ieel-aula-module-dates > div {
    min-width: 0;
    padding: 11px 10px;
    background: var(--ieel-aula-blanco);
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 8px;
}

.ieel-aula-module-dates span {
    display: block;
    margin-bottom: 5px;
    color: var(--ieel-aula-gris-500);
    font-size: 7.5px;
    font-weight: 700;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.ieel-aula-module-dates strong {
    display: block;
    color: var(--ieel-aula-gris-800);
    font-size: 9px;
    line-height: 1.45;
    font-weight: 700;
}

.ieel-aula-module-button {
    min-height: 46px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 15px;
    color: var(--ieel-aula-blanco);
    text-decoration: none;
    background:
        linear-gradient(135deg, var(--ieel-aula-rojo-700), var(--ieel-aula-rojo-950));
    border: 1px solid rgba(67, 3, 3, 0.45);
    border-radius: 9px;
    box-shadow: 0 11px 23px rgba(71, 3, 3, 0.21);
    font-size: 10.5px;
    font-weight: 700;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.ieel-aula-module-button:hover,
.ieel-aula-module-button:focus-visible {
    color: var(--ieel-aula-blanco);
    transform: translateY(-1px);
    background: linear-gradient(135deg, var(--ieel-aula-rojo-600), var(--ieel-aula-rojo-900));
    box-shadow: 0 15px 29px rgba(71, 3, 3, 0.28);
    outline: none;
}

.ieel-aula-module-button svg {
    width: 19px;
    height: 19px;
    flex: 0 0 19px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ESTADO VACÍO */

.ieel-aula-empty {
    max-width: 700px;
    margin: 35px auto;
    padding: 42px 32px;
    text-align: center;
    background: linear-gradient(145deg, var(--ieel-aula-blanco), #ededee);
    border: 1px solid var(--ieel-aula-gris-200);
    border-top: 5px solid var(--ieel-aula-rojo-800);
    border-radius: 13px;
    box-shadow: 0 18px 40px var(--ieel-aula-sombra-suave);
}

.ieel-aula-empty-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    color: var(--ieel-aula-blanco);
    background: linear-gradient(145deg, var(--ieel-aula-rojo-700), var(--ieel-aula-rojo-950));
    border-radius: 12px;
}

.ieel-aula-empty-icon svg {
    width: 31px;
    height: 31px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-aula-empty h2 {
    margin: 0 0 10px;
    color: var(--ieel-aula-gris-950);
    font-size: 23px;
    font-weight: 700;
}

.ieel-aula-empty p {
    margin: 0 auto 19px;
    max-width: 510px;
    color: var(--ieel-aula-gris-700);
    font-size: 11px;
    line-height: 1.75;
}

.ieel-aula-empty a {
    min-height: 43px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 17px;
    color: var(--ieel-aula-blanco);
    background: linear-gradient(135deg, var(--ieel-aula-rojo-700), var(--ieel-aula-rojo-950));
    border-radius: 8px;
    text-decoration: none;
    font-size: 10px;
    font-weight: 700;
}

.ieel-aula-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-top: 32px;
    padding: 19px 2px 4px;
    color: var(--ieel-aula-gris-600);
    border-top: 1px solid var(--ieel-aula-gris-300);
    font-size: 9px;
    line-height: 1.5;
    font-weight: 600;
}

.ieel-aula-overlay {
    display: none;
}

/* RESPONSIVE */

@media (max-width: 1320px) {
    .ieel-aula-modules-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ieel-aula-user-card {
        min-width: 430px;
    }

    .ieel-aula-user-username {
        display: none;
    }
}

@media (max-width: 1100px) {
    .ieel-aula-user-card {
        min-width: 350px;
    }

    .ieel-aula-logout-form button span {
        display: none;
    }

    .ieel-aula-logout-form button {
        width: 40px;
        padding: 0;
    }

    .ieel-aula-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .ieel-aula-hero-summary {
        width: 100%;
        max-width: 430px;
    }
}

@media (max-width: 980px) {
    .ieel-aula-layout {
        display: block;
    }

    .ieel-aula-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        width: min(320px, 88vw);
        transform: translateX(-104%);
        transition: transform .24s ease;
    }

    body.ieel-aula-menu-open {
        overflow: hidden;
    }

    body.ieel-aula-menu-open .ieel-aula-sidebar {
        transform: translateX(0);
    }

    .ieel-aula-sidebar-close {
        display: grid;
    }

    .ieel-aula-overlay {
        position: fixed;
        inset: 0;
        z-index: 55;
        display: block;
        visibility: hidden;
        opacity: 0;
        border: 0;
        background: rgba(33, 33, 35, 0.58);
        backdrop-filter: blur(2px);
        -webkit-backdrop-filter: blur(2px);
        transition: opacity .22s ease, visibility .22s ease;
    }

    body.ieel-aula-menu-open .ieel-aula-overlay {
        visibility: visible;
        opacity: 1;
    }

    .ieel-aula-menu-button {
        display: flex;
    }
}

@media (max-width: 760px) {
    .ieel-aula-topbar {
        position: relative;
        min-height: auto;
        align-items: stretch;
        flex-direction: column;
        padding: 14px 16px;
    }

    .ieel-aula-user-card {
        width: 100%;
        min-width: 0;
        max-width: none;
    }

    .ieel-aula-content {
        padding: 18px 16px 20px;
    }

    .ieel-aula-hero {
        min-height: 0;
        padding: 29px 24px;
        border-radius: 13px;
    }

    .ieel-aula-hero h1 {
        font-size: 33px;
    }

    .ieel-aula-hero-summary {
        max-width: none;
    }

    .ieel-aula-modules-grid {
        grid-template-columns: 1fr;
    }

    .ieel-aula-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .ieel-aula-module-card {
        padding: 22px 19px 18px;
    }

    .ieel-aula-footer {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }
}

@media (max-width: 520px) {
    .ieel-aula-page-heading strong {
        font-size: 17px;
    }

    .ieel-aula-user-data span {
        flex-wrap: wrap;
    }

    .ieel-aula-user-avatar {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .ieel-aula-hero-summary {
        grid-template-columns: 1fr;
    }

    .ieel-aula-hero-summary article {
        min-height: 82px;
    }

    .ieel-aula-module-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .ieel-aula-module-dates {
        grid-template-columns: 1fr;
    }

    .ieel-aula-section-head h2 {
        font-size: 21px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ieel-aula-sidebar,
    .ieel-aula-overlay,
    .ieel-aula-nav-link,
    .ieel-aula-whatsapp,
    .ieel-aula-module-card,
    .ieel-aula-module-button,
    .ieel-aula-logout-form button {
        transition: none !important;
    }
}

/* =========================================================
   CORRECCIÓN DE COLOR DEL BOTÓN DE WHATSAPP
   Evita que reglas heredadas de enlaces o spans dejen
   el texto blanco sobre el fondo blanco.
========================================================= */
.ieel-aula-whatsapp,
.ieel-aula-whatsapp:link,
.ieel-aula-whatsapp:visited,
.ieel-aula-whatsapp span {
    color: #760000 !important;
}

.ieel-aula-whatsapp:hover,
.ieel-aula-whatsapp:focus-visible,
.ieel-aula-whatsapp:hover span,
.ieel-aula-whatsapp:focus-visible span {
    color: #4f0000 !important;
}

/* =========================================================
   AJUSTES VIGENTES CONSERVADOS DE VERSIONES ANTERIORES
   Tipografía, espaciado de módulos y ancla de navegación.
========================================================= */

.ieel-aula-section-kicker {
margin-bottom: 9px;
    font-size: 10px;
    letter-spacing: 1.55px;
}

.ieel-aula-section-head h2 {
font-size: clamp(25px, 2.5vw, 33px);
    line-height: 1.22;
}

.ieel-aula-section-head p {
max-width: 980px;
    margin-top: 10px;
    color: #606063;
    font-size: 14px;
    line-height: 1.72;
}

.ieel-aula-program-code {
min-height: 36px;
    padding: 0 14px;
    font-size: 10px;
}

.ieel-aula-module-card {
padding: 26px 24px 22px;
}

.ieel-aula-module-card h3 {
font-size: 19px;
    line-height: 1.4;
    letter-spacing: -0.28px;
}

.ieel-aula-module-description {
margin: 14px 0 20px;
    color: #5f5f62;
    font-size: 13.5px;
    line-height: 1.75;
    font-weight: 400;
}

.ieel-aula-module-number {
font-size: 10.5px;
}

.ieel-aula-access-pill {
min-height: 27px;
    padding: 0 10px;
    font-size: 8.5px;
}

.ieel-aula-teachers {
gap: 12px;
    margin-bottom: 18px;
    padding: 16px;
}

.ieel-aula-teachers-label {
font-size: 9px;
}

.ieel-aula-teacher {
gap: 12px;
}

.ieel-aula-teacher-avatar {
width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 10px;
}

.ieel-aula-teacher-copy {
gap: 4px;
}

.ieel-aula-teacher-copy strong {
font-size: 11.5px;
    line-height: 1.4;
}

.ieel-aula-teacher-copy small {
color: #6d6d70;
    font-size: 10px;
    line-height: 1.5;
}

.ieel-aula-module-dates > div {
padding: 12px 11px;
}

.ieel-aula-module-dates span {
font-size: 8px;
}

.ieel-aula-module-dates strong {
font-size: 10.5px;
    line-height: 1.5;
}

@media (max-width: 600px) {
.ieel-aula-section-head p,
.ieel-aula-module-description {
font-size: 13px;
}

.ieel-aula-module-card h3 {
font-size: 18px;
}
}

.ieel-aula-anchor {
position: relative;
    top: -18px;
    scroll-margin-top: 24px;
}

.ieel-aula-section-head p {
max-width: 1040px;
    color: #565659;
    font-size: 15px;
    line-height: 1.75;
}

.ieel-aula-module-description {
color: #555559;
    font-size: 14.5px;
    line-height: 1.78;
}

.ieel-aula-teacher-copy strong {
font-size: 12.5px;
    line-height: 1.42;
}

.ieel-aula-teacher-copy small {
color: #66666a;
    font-size: 10.5px;
    line-height: 1.5;
}

.ieel-aula-module-dates strong {
font-size: 11px;
    line-height: 1.5;
}

@media (max-width: 620px) {
.ieel-aula-section-head p {
font-size: 14px;
}

.ieel-aula-module-description {
font-size: 14px;
}
}

.ieel-aula-section-head p {
color: #545457;
    font-size: 15px;
    line-height: 1.74;
}

.ieel-aula-module-description {
color: #505054;
    font-size: 14.5px;
    line-height: 1.76;
}

.ieel-aula-teacher-copy strong {
font-size: 12.5px;
    line-height: 1.42;
}

.ieel-aula-teacher-copy small {
font-size: 11px;
    line-height: 1.48;
}

/* =========================================================
   IEEL · AULA VIRTUAL
/* =========================================================
   INTERFAZ COMPARTIDA DEL AULA
========================================================= */

/* TOPBAR */

.ieel-aula-topbar {
    position: sticky;
    top: 0;
    z-index: 45;
    min-height: 94px;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(18px, 2vw, 30px);
    padding: 15px clamp(22px, 3vw, 42px);
    background: rgba(255, 255, 255, 0.95);
    border-bottom: 1px solid var(--ieel-aula-gris-200);
    box-shadow: 0 10px 28px rgba(45, 45, 48, 0.07);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.ieel-aula-topbar-left {
    min-width: 0;
    display: flex;
    align-items: center;
}

.ieel-aula-topbar-academic {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(19px, 2vw, 30px);
    padding-right: clamp(18px, 2vw, 28px);
    border-right: 1px solid var(--ieel-aula-gris-300);
}

.ieel-aula-topbar-status,
.ieel-aula-topbar-modules {
    min-width: 0;
    display: flex;
    align-items: center;
}

.ieel-aula-topbar-status {
    gap: 10px;
}

.ieel-aula-topbar-status > i {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #39ad63;
    box-shadow: 0 0 0 4px rgba(57, 173, 99, 0.12);
}

.ieel-aula-topbar-status > span,
.ieel-aula-topbar-modules > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ieel-aula-topbar-status small,
.ieel-aula-topbar-modules small {
    color: #77787d;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: 0.75px;
    text-transform: uppercase;
}

.ieel-aula-topbar-status strong {
    color: #333438;
    font-size: 14px;
    line-height: 1.15;
    font-weight: 700;
}

.ieel-aula-topbar-modules {
    gap: 10px;
}

.ieel-aula-topbar-modules > strong {
    color: #790000;
    font-size: 27px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: -0.7px;
}

.ieel-aula-topbar-modules b {
    color: #4f5055;
    font-size: 11px;
    line-height: 1.15;
    font-weight: 700;
}

/* PERFIL SUPERIOR */

.ieel-aula-user-card {
    width: auto;
    min-width: 0;
    max-width: none;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 20px;
    justify-self: end;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
}

.ieel-aula-user-avatar,
.ieel-aula-user-username {
    display: none !important;
}

.ieel-aula-user-data {
    min-width: 135px;
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ieel-aula-user-data strong {
    overflow: hidden;
    max-width: 220px;
    color: #343438;
    font-size: 13px;
    line-height: 1.25;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ieel-aula-user-data span {
    display: block;
    color: #77787d;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 600;
}

.ieel-aula-logout-form {
    margin: 0;
}

.ieel-aula-logout-form button {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 16px;
    color: #7b0000;
    background: linear-gradient(135deg, #ffffff 0%, #f4f4f5 100%);
    border: 1px solid rgba(123, 0, 0, 0.32);
    border-radius: 8px;
    box-shadow: 0 7px 18px rgba(44, 44, 48, 0.07);
    cursor: pointer;
    font-size: 11.5px;
    line-height: 1;
    font-weight: 650;
    white-space: nowrap;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.18s ease;
}

.ieel-aula-logout-form button:hover,
.ieel-aula-logout-form button:focus-visible {
    color: #ffffff;
    background: linear-gradient(135deg, #8b0000 0%, #590000 100%);
    border-color: #650000;
    box-shadow: 0 10px 22px rgba(89, 0, 0, 0.18);
    transform: translateY(-1px);
    outline: none;
}

.ieel-aula-logout-form button:active {
    transform: translateY(0);
}

.ieel-aula-logout-form svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   ENCABEZADO EDITORIAL COMPARTIDO
========================================================= */

.ieel-page-intro {
    position: relative;
    min-height: 240px;
    display: flex;
    align-items: center;
    padding: 28px 0 30px;
    background: transparent;
    border-bottom: 1px solid #d7d7da;
}

.ieel-page-intro::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 92px;
    height: 4px;
    background: linear-gradient(90deg, #650000 0%, #9b0000 100%);
}

.ieel-page-intro-main {
    width: 100%;
    min-width: 0;
}

.ieel-page-intro-eyebrow {
    display: block;
    margin-bottom: 10px;
    color: #8f0000;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ieel-page-intro h1 {
    margin: 0;
    color: #343438;
    font-size: clamp(29px, 3vw, 40px);
    line-height: 1.08;
    font-weight: 400;
    letter-spacing: -1px;
}

.ieel-page-intro h1 strong {
    color: #710000;
    font-weight: 700;
}

.ieel-page-intro-feature {
    width: 100%;
    min-height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin-top: 19px;
    padding-left: 17px;
    border-left: 3px solid #8b0000;
}

.ieel-page-intro-feature > span {
    display: block;
    margin-bottom: 6px;
    color: #77777c;
    font-size: 9px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.ieel-page-intro-feature h2 {
    width: 100%;
    max-width: none;
    margin: 0;
    color: #2f3034;
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: -0.55px;
}

.ieel-page-intro-description {
    max-width: 1050px;
    margin: 14px 0 0;
    color: #5c5d62;
    font-size: 15px;
    line-height: 1.72;
}

/* =========================================================
   SECCIONES ACADÉMICAS
========================================================= */

.ieel-aula-program,
.ieel-certificates-section {
    margin-top: 27px;
}

.ieel-aula-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 17px;
    padding: 0 0 16px;
    border-bottom: 1px solid #d7d7da;
}

.ieel-aula-section-kicker {
    display: block;
    margin-bottom: 7px;
    color: #8e0000;
    font-size: 10px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.45px;
    text-transform: uppercase;
}

.ieel-aula-section-head h2 {
    margin: 0;
    color: #303034;
    font-size: clamp(28px, 2.8vw, 38px);
    line-height: 1.1;
    font-weight: 650;
    letter-spacing: -0.9px;
}

.ieel-aula-section-head p {
    max-width: 900px;
    margin: 8px 0 0;
    color: #606066;
    font-size: 14.5px;
    line-height: 1.68;
}

/* BOTÓN DE LOS MÓDULOS */

.ieel-aula-module-button,
.ieel-aula-module-button:link,
.ieel-aula-module-button:visited,
.ieel-aula-module-button span {
    color: #ffffff !important;
}

.ieel-aula-module-button svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

/* =========================================================
   CERTIFICADOS
========================================================= */

.ieel-certificates-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.ieel-certificate-card {
    position: relative;
    min-width: 0;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 24px 22px 21px;
    background:
        linear-gradient(
            155deg,
            #ffffff 0%,
            #ffffff 64%,
            #eeeeef 145%
        );
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 13px;
    box-shadow: 0 16px 38px rgba(43, 43, 46, 0.11);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.ieel-certificate-card:hover {
    transform: translateY(-3px);
    border-color: rgba(120, 9, 9, 0.27);
    box-shadow: 0 23px 47px rgba(61, 4, 4, 0.15);
}

.ieel-certificate-accent {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background:
        linear-gradient(
            90deg,
            var(--ieel-aula-rojo-950) 0%,
            var(--ieel-aula-rojo-600) 62%,
            var(--ieel-aula-gris-500) 100%
        );
}

.ieel-certificate-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 17px;
}

.ieel-certificate-scope {
    color: var(--ieel-aula-rojo-800);
    font-size: 9.5px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.ieel-certificate-status {
    min-height: 27px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 0 9px;
    color: #397154;
    background: linear-gradient(135deg, #f2faf5, #e4f2e9);
    border: 1px solid rgba(40, 122, 80, 0.20);
    border-radius: 999px;
    font-size: 8.5px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.ieel-certificate-status i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--ieel-aula-verde);
    box-shadow: 0 0 0 3px rgba(40, 122, 80, 0.10);
}

.ieel-certificate-card h3 {
    margin: 0;
    color: var(--ieel-aula-gris-950);
    font-size: 19px;
    line-height: 1.38;
    font-weight: 700;
    letter-spacing: -0.25px;
}

.ieel-certificate-program {
    margin: 9px 0 0;
    color: #5f6065;
    font-size: 13px;
    line-height: 1.65;
}

.ieel-certificate-data {
    display: grid;
    gap: 0;
    margin: 18px 0 0;
    padding: 0;
    border-top: 1px solid var(--ieel-aula-gris-200);
}

.ieel-certificate-data > div {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(105px, 0.7fr) minmax(0, 1.3fr);
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--ieel-aula-gris-150);
}

.ieel-certificate-data dt,
.ieel-certificate-data dd {
    min-width: 0;
    margin: 0;
}

.ieel-certificate-data dt {
    color: #85868b;
    font-size: 9px;
    line-height: 1.45;
    font-weight: 700;
    letter-spacing: 0.55px;
    text-transform: uppercase;
}

.ieel-certificate-data dd {
    color: #45464b;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 650;
    overflow-wrap: anywhere;
}

.ieel-certificate-actions {
    display: grid;
    gap: 9px;
    margin-top: auto;
    padding-top: 18px;
}

.ieel-certificate-button {
    min-height: 45px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 700;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease,
        border-color 0.18s ease;
}

.ieel-certificate-button svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-certificate-button.is-primary,
.ieel-certificate-button.is-primary:link,
.ieel-certificate-button.is-primary:visited {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--ieel-aula-rojo-700),
            var(--ieel-aula-rojo-950)
        );
    border: 1px solid rgba(67, 3, 3, 0.45);
    box-shadow: 0 11px 23px rgba(71, 3, 3, 0.20);
}

.ieel-certificate-button.is-primary:hover,
.ieel-certificate-button.is-primary:focus-visible {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--ieel-aula-rojo-600),
            var(--ieel-aula-rojo-900)
        );
    box-shadow: 0 15px 29px rgba(71, 3, 3, 0.27);
    transform: translateY(-1px);
    outline: none;
}

.ieel-certificate-button.is-secondary,
.ieel-certificate-button.is-secondary:link,
.ieel-certificate-button.is-secondary:visited {
    color: #740000;
    background: linear-gradient(135deg, #ffffff, #f2f2f3);
    border: 1px solid rgba(116, 0, 0, 0.25);
}

.ieel-certificate-button.is-secondary:hover,
.ieel-certificate-button.is-secondary:focus-visible {
    color: #ffffff;
    background: linear-gradient(135deg, #850000, #590000);
    border-color: #650000;
    transform: translateY(-1px);
    outline: none;
}

.ieel-certificates-empty {
    max-width: 720px;
    margin: 34px auto;
    padding: 42px 32px;
    text-align: center;
    background: linear-gradient(145deg, #ffffff, #ededee);
    border: 1px solid var(--ieel-aula-gris-200);
    border-top: 5px solid var(--ieel-aula-rojo-800);
    border-radius: 13px;
    box-shadow: 0 18px 40px var(--ieel-aula-sombra-suave);
}

.ieel-certificates-empty-icon {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    margin: 0 auto 17px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--ieel-aula-rojo-700),
            var(--ieel-aula-rojo-950)
        );
    border-radius: 12px;
}

.ieel-certificates-empty-icon svg {
    width: 31px;
    height: 31px;
    stroke: currentColor;
    stroke-width: 1.6;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-certificates-empty h2 {
    margin: 0 0 10px;
    color: var(--ieel-aula-gris-950);
    font-size: 23px;
    line-height: 1.3;
    font-weight: 700;
}

.ieel-certificates-empty p {
    max-width: 560px;
    margin: 0 auto;
    color: var(--ieel-aula-gris-700);
    font-size: 13px;
    line-height: 1.75;
}

/* =========================================================
   RESPONSIVE COMPARTIDO
========================================================= */

@media (max-width: 1320px) {
    .ieel-certificates-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 1180px) {
    .ieel-aula-topbar {
        grid-template-columns: auto minmax(320px, 1fr);
        gap: 15px 22px;
    }

    .ieel-aula-topbar-left {
        grid-column: 1;
        grid-row: 1;
    }

    .ieel-aula-user-card {
        grid-column: 2;
        grid-row: 1;
    }

    .ieel-aula-topbar-academic {
        grid-column: 1 / -1;
        grid-row: 2;
        justify-content: flex-start;
        padding: 12px 0 0;
        border-top: 1px solid var(--ieel-aula-gris-200);
        border-right: 0;
    }
}

@media (max-width: 760px) {
    .ieel-aula-topbar {
        display: flex;
        align-items: stretch;
        flex-direction: column;
        gap: 14px;
    }

    .ieel-aula-topbar-academic {
        width: 100%;
        justify-content: flex-start;
        gap: 20px;
        padding-top: 13px;
    }

    .ieel-aula-user-card {
        width: 100%;
        justify-content: space-between;
    }

    .ieel-aula-user-data {
        flex: 1;
    }

    .ieel-page-intro {
        min-height: 0;
        padding: 23px 0 25px;
    }

    .ieel-page-intro h1 {
        font-size: 30px;
    }

    .ieel-page-intro-feature {
        min-height: 0;
        margin-top: 17px;
        padding-left: 13px;
    }

    .ieel-page-intro-feature h2 {
        font-size: 20px;
    }

    .ieel-page-intro-description {
        font-size: 13.5px;
        line-height: 1.68;
    }

    .ieel-aula-section-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    .ieel-certificates-grid {
        grid-template-columns: 1fr;
    }

    .ieel-certificate-card {
        padding: 22px 19px 19px;
    }
}

@media (max-width: 520px) {
    .ieel-aula-topbar-academic {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
    }

    .ieel-aula-topbar-modules {
        padding-left: 15px;
        border-left: 1px solid var(--ieel-aula-gris-300);
    }
}

@media (max-width: 460px) {
    .ieel-aula-logout-form button {
        width: 42px;
        padding: 0;
    }

    .ieel-aula-logout-form button span {
        display: none;
    }

    .ieel-certificate-top {
        align-items: flex-start;
        flex-direction: column;
    }

    .ieel-certificate-data > div {
        grid-template-columns: 1fr;
        gap: 3px;
    }
}
/* =========================================================
   CAMBIO DE CONTRASEÑA
========================================================= */

.ieel-password-section {
    margin-top: 27px;
}

.ieel-password-layout {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(270px, 0.65fr);
    gap: 20px;
    align-items: start;
}

.ieel-password-card,
.ieel-password-rules {
    min-width: 0;
    background:
        linear-gradient(
            155deg,
            #ffffff 0%,
            #ffffff 68%,
            #eeeeef 150%
        );
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 13px;
    box-shadow: 0 16px 38px rgba(43, 43, 46, 0.10);
}

.ieel-password-card {
    padding: 25px 24px 23px;
    border-top: 5px solid var(--ieel-aula-rojo-800);
}

.ieel-password-card .ieel-aula-alert {
    margin: 0 0 18px;
}

.ieel-password-form {
    display: grid;
    gap: 18px;
}

.ieel-password-field {
    display: grid;
    gap: 8px;
}

.ieel-password-field label {
    color: #3f4044;
    font-size: 11.5px;
    line-height: 1.3;
    font-weight: 700;
}

.ieel-password-input {
    position: relative;
}

.ieel-password-input input {
    width: 100%;
    min-height: 50px;
    padding: 11px 68px 11px 14px;
    color: #303034;
    background: #ffffff;
    border: 1px solid var(--ieel-aula-gris-300);
    border-radius: 8px;
    outline: none;
    font-size: 12.5px;
    line-height: 1.3;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.ieel-password-input input::placeholder {
    color: #96979b;
}

.ieel-password-input input:hover {
    border-color: #bfc0c3;
}

.ieel-password-input input:focus {
    background: #fffdfd;
    border-color: var(--ieel-aula-rojo-700);
    box-shadow: 0 0 0 4px rgba(146, 14, 14, 0.10);
}

.ieel-password-toggle {
    min-width: 58px;
    height: 34px;
    position: absolute;
    top: 50%;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 9px;
    transform: translateY(-50%);
    color: #760000;
    background: #f2f2f3;
    border: 1px solid #dddddf;
    border-radius: 6px;
    cursor: pointer;
    font-size: 9px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    transition:
        color 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.ieel-password-toggle:hover,
.ieel-password-toggle:focus-visible {
    color: #ffffff;
    background: #760000;
    border-color: #760000;
    outline: none;
}

.ieel-password-submit {
    min-height: 47px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 3px;
    padding: 10px 18px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--ieel-aula-rojo-700),
            var(--ieel-aula-rojo-950)
        );
    border: 1px solid rgba(67, 3, 3, 0.45);
    border-radius: 9px;
    box-shadow: 0 11px 23px rgba(71, 3, 3, 0.20);
    cursor: pointer;
    font-size: 10.5px;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: 0.35px;
    text-transform: uppercase;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.ieel-password-submit:hover,
.ieel-password-submit:focus-visible {
    background:
        linear-gradient(
            135deg,
            var(--ieel-aula-rojo-600),
            var(--ieel-aula-rojo-900)
        );
    box-shadow: 0 15px 29px rgba(71, 3, 3, 0.27);
    transform: translateY(-1px);
    outline: none;
}

.ieel-password-submit:active {
    transform: translateY(0);
}

.ieel-password-rules {
    padding: 24px 22px;
    border-top: 5px solid var(--ieel-aula-gris-500);
}

.ieel-password-rules-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    margin-bottom: 16px;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--ieel-aula-rojo-700),
            var(--ieel-aula-rojo-950)
        );
    border-radius: 10px;
    box-shadow: 0 9px 20px rgba(71, 3, 3, 0.18);
}

.ieel-password-rules-icon svg {
    width: 25px;
    height: 25px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-password-rules h2 {
    margin: 0;
    color: var(--ieel-aula-gris-950);
    font-size: 19px;
    line-height: 1.3;
    font-weight: 700;
}

.ieel-password-rules p {
    margin: 8px 0 17px;
    color: var(--ieel-aula-gris-700);
    font-size: 11.5px;
    line-height: 1.65;
}

.ieel-password-rules ul {
    display: grid;
    gap: 11px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ieel-password-rules li {
    position: relative;
    padding-left: 18px;
    color: #5b5c61;
    font-size: 11px;
    line-height: 1.55;
}

.ieel-password-rules li::before {
    content: "";
    width: 7px;
    height: 7px;
    position: absolute;
    top: 5px;
    left: 0;
    border-radius: 50%;
    background: var(--ieel-aula-rojo-700);
    box-shadow: 0 0 0 3px rgba(146, 14, 14, 0.08);
}

@media (max-width: 900px) {
    .ieel-password-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    .ieel-password-card,
    .ieel-password-rules {
        padding: 21px 18px;
    }

    .ieel-password-input input {
        min-height: 48px;
        padding-right: 62px;
    }

    .ieel-password-toggle {
        min-width: 52px;
        right: 6px;
    }
}
/* =========================================================
   AJUSTES DEL FORMULARIO DE CONTRASEÑA
========================================================= */

.ieel-password-submit {
    min-height: 42px;
    padding: 8px 14px;
    font-size: 8.5px;
    font-weight: 600;
    letter-spacing: 0.1px;
    text-transform: none;
}

.ieel-password-toggle {
    min-width: 44px;
    height: 29px;
    padding: 0 7px;
    font-size: 7.5px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
}

body.ieel-aula-home .ieel-password-input input {
    min-height: 46px;
    padding: 10px 60px 10px 13px;
    font-family: "Montserrat", Arial, sans-serif;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.25;
}

body.ieel-aula-home .ieel-password-input input::placeholder {
    color: #96979b;
    font-size: 11.5px;
    font-weight: 400;
    opacity: 1;
}

body.ieel-aula-home .ieel-password-field label {
    font-size: 10px;
    font-weight: 700;
}

/* =========================================================
   MÓDULO ACADÉMICO
========================================================= */

.ieel-module-overview {
    display: grid;
    grid-template-columns:
        minmax(145px, 0.7fr)
        minmax(190px, 1fr)
        minmax(190px, 1fr)
        auto;
    align-items: stretch;
    gap: 1px;
    margin-top: 20px;
    overflow: hidden;
    background: var(--ieel-aula-gris-200);
}

.ieel-module-overview > article,
.ieel-module-back {
    min-width: 0;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 18px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f6f6f7 100%
        );
}

.ieel-module-overview > article > span {
    margin-bottom: 6px;
    color: var(--ieel-aula-gris-500);
    font-size: 8.5px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.75px;
    text-transform: uppercase;
}

.ieel-module-overview > article > strong {
    color: var(--ieel-aula-gris-900);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 700;
}

.ieel-module-state {
    align-self: flex-start;
    min-height: 26px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 8.5px !important;
    line-height: 1;
    letter-spacing: 0.45px;
    text-transform: uppercase;
}

.ieel-module-state.is-actual,
.ieel-module-state.is-habilitado {
    color: #286648;
    background: #edf8f1;
    border-color: rgba(40, 122, 80, 0.22);
}

.ieel-module-state.is-proximo {
    color: #7b5d24;
    background: #fbf6e9;
    border-color: rgba(180, 147, 90, 0.34);
}

.ieel-module-state.is-finalizado {
    color: #555c63;
    background: #eff1f3;
    border-color: #d5d8db;
}

.ieel-module-back {
    align-items: center;
    flex-direction: row;
    gap: 9px;
    color: #730000;
    text-decoration: none;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 700;
    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.ieel-module-back:hover,
.ieel-module-back:focus-visible {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--ieel-aula-rojo-700),
            var(--ieel-aula-rojo-950)
        );
    outline: none;
}

.ieel-module-back svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-module-section {
    margin-top: 29px;
}

.ieel-module-tabs {
    min-width: 0;
    width: 100%;
}

.ieel-module-tablist-shell {
    position: relative;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    border: 1px solid var(--ieel-aula-gris-200);
    border-bottom: 0;
    border-radius: 12px 12px 0 0;
    background:
        linear-gradient(
            180deg,
            #f7f7f8 0%,
            #eeeeef 100%
        );
}

.ieel-module-tablist {
    min-width: 0;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(165px, 1fr);
    gap: 1px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    scrollbar-color:
        rgba(121, 0, 0, 0.28)
        transparent;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
}

.ieel-module-tablist::-webkit-scrollbar {
    height: 5px;
}

.ieel-module-tablist::-webkit-scrollbar-track {
    background: transparent;
}

.ieel-module-tablist::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background: rgba(121, 0, 0, 0.28);
}

.ieel-module-tab {
    position: relative;
    min-width: 0;
    min-height: 92px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
    padding: 16px 16px 15px;
    scroll-snap-align: start;
    color: var(--ieel-aula-gris-800);
    background: rgba(255, 255, 255, 0.68);
    border: 0;
    border-right: 1px solid var(--ieel-aula-gris-200);
    cursor: pointer;
    text-align: left;
    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.ieel-module-tab:last-child {
    border-right: 0;
}

.ieel-module-tab::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 4px;
    background: transparent;
}

.ieel-module-tab:hover,
.ieel-module-tab:focus-visible {
    color: #5f0000;
    background: #ffffff;
    outline: none;
}

.ieel-module-tab.is-active {
    color: #5f0000;
    background: #ffffff;
}

.ieel-module-tab.is-active::after {
    background:
        linear-gradient(
            90deg,
            var(--ieel-aula-rojo-950),
            var(--ieel-aula-rojo-600)
        );
}

.ieel-module-tab-number {
    color: #820000;
    font-size: 8.5px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

.ieel-module-tab > strong {
    display: -webkit-box;
    overflow: hidden;
    color: inherit;
    font-size: 11px;
    line-height: 1.35;
    font-weight: 700;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.ieel-module-tab-status,
.ieel-module-panel-status {
    min-height: 23px;
    display: inline-flex;
    align-items: center;
    padding: 0 8px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 7.5px;
    line-height: 1;
    font-weight: 750;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.ieel-module-tab-status.is-en_vivo,
.ieel-module-panel-status.is-en_vivo {
    color: #21613f;
    background: #eaf7ef;
    border-color: #afd6bd;
}

.ieel-module-tab-status.is-proxima,
.ieel-module-tab-status.is-por_confirmar,
.ieel-module-panel-status.is-proxima,
.ieel-module-panel-status.is-por_confirmar {
    color: #795c21;
    background: #fff8e9;
    border-color: #e1c991;
}

.ieel-module-tab-status.is-grabada,
.ieel-module-tab-status.is-finalizada,
.ieel-module-panel-status.is-grabada,
.ieel-module-panel-status.is-finalizada {
    color: #355f80;
    background: #eef5fa;
    border-color: #b9cedd;
}

.ieel-module-tab-status.is-cancelada,
.ieel-module-panel-status.is-cancelada {
    color: #862d2d;
    background: #fff0f0;
    border-color: #e0abab;
}

.ieel-module-panels {
    min-width: 0;
}

.ieel-module-panel {
    min-width: 0;
    padding: 25px 24px 24px;
    background:
        linear-gradient(
            150deg,
            #ffffff 0%,
            #ffffff 70%,
            #f1f1f2 145%
        );
    border: 1px solid var(--ieel-aula-gris-200);
    border-top: 0;
    border-radius: 0 0 12px 12px;
    box-shadow: 0 17px 38px rgba(43, 43, 46, 0.09);
}

.ieel-module-panel[hidden] {
    display: none !important;
}

.ieel-module-panel-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.ieel-module-panel-header > div {
    min-width: 0;
}

.ieel-module-panel-header > div > span {
    display: block;
    margin-bottom: 7px;
    color: #820000;
    font-size: 8.5px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.85px;
    text-transform: uppercase;
}

.ieel-module-panel-header h3 {
    margin: 0;
    color: var(--ieel-aula-gris-950);
    font-size: clamp(19px, 2vw, 25px);
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -0.35px;
}

.ieel-module-panel-header p {
    max-width: 780px;
    margin: 8px 0 0;
    color: var(--ieel-aula-gris-700);
    font-size: 12.5px;
    line-height: 1.68;
}

.ieel-module-panel-status {
    flex: 0 0 auto;
    min-height: 27px;
    padding: 0 10px;
    font-size: 8px;
}

.ieel-module-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 20px;
}

.ieel-module-facts article {
    min-width: 0;
    padding: 13px 14px;
    background: #f5f5f6;
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 8px;
}

.ieel-module-facts span {
    display: block;
    margin-bottom: 5px;
    color: var(--ieel-aula-gris-500);
    font-size: 7.5px;
    line-height: 1.2;
    font-weight: 750;
    letter-spacing: 0.65px;
    text-transform: uppercase;
}

.ieel-module-facts strong {
    display: block;
    color: var(--ieel-aula-gris-900);
    font-size: 10px;
    line-height: 1.5;
    font-weight: 700;
}

.ieel-module-access {
    margin-top: 18px;
}

.ieel-module-live {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(190px, 250px);
    align-items: center;
    gap: 20px;
    padding: 17px;
    background: #f3f5f4;
    border: 1px solid #d4dcda;
    border-left: 4px solid #7d8583;
    border-radius: 9px;
}

.ieel-module-live.is-live {
    background: #eef9f2;
    border-color: #bddbc8;
    border-left-color: #2f8d58;
}

.ieel-module-live > div > span {
    display: block;
    margin-bottom: 5px;
    color: #286648;
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.7px;
    text-transform: uppercase;
}

.ieel-module-live > div > strong {
    color: #395047;
    font-size: 11px;
    line-height: 1.5;
    font-weight: 700;
}

.ieel-module-action {
    min-height: 43px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 14px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--ieel-aula-rojo-700),
            var(--ieel-aula-rojo-950)
        );
    border: 1px solid rgba(67, 3, 3, 0.42);
    border-radius: 8px;
    box-shadow: 0 9px 20px rgba(71, 3, 3, 0.18);
    text-decoration: none;
    font-size: 9.5px;
    line-height: 1.3;
    font-weight: 700;
}

.ieel-module-action:hover,
.ieel-module-action:focus-visible {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--ieel-aula-rojo-600),
            var(--ieel-aula-rojo-900)
        );
    outline: none;
    transform: translateY(-1px);
}

.ieel-module-action svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-module-message {
    padding: 17px;
    background: #f5f5f6;
    border: 1px solid var(--ieel-aula-gris-200);
    border-left: 4px solid var(--ieel-aula-gris-500);
    border-radius: 8px;
}

.ieel-module-message.is-cancelled {
    background: #fff4f4;
    border-color: #e7c3c3;
    border-left-color: #a84b4b;
}

.ieel-module-message strong {
    display: block;
    color: var(--ieel-aula-gris-900);
    font-size: 11px;
    line-height: 1.4;
    font-weight: 700;
}

.ieel-module-message p {
    margin: 5px 0 0;
    color: var(--ieel-aula-gris-700);
    font-size: 10.5px;
    line-height: 1.6;
}

.ieel-module-video {
    overflow: hidden;
    background: #181819;
    border-radius: 9px;
}

.ieel-module-video video {
    width: 100%;
    max-height: 620px;
    display: block;
    background: #181819;
}

.ieel-module-class-materials {
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid var(--ieel-aula-gris-200);
}

.ieel-module-class-materials > span {
    display: block;
    margin-bottom: 10px;
    color: #820000;
    font-size: 8px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.75px;
    text-transform: uppercase;
}

.ieel-module-class-materials > div {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.ieel-module-class-materials a {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    color: var(--ieel-aula-gris-900);
    background: #ffffff;
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 7px;
    text-decoration: none;
}

.ieel-module-class-materials a:hover,
.ieel-module-class-materials a:focus-visible {
    color: #720000;
    border-color: rgba(120, 9, 9, 0.30);
    outline: none;
}

.ieel-module-class-materials a strong {
    min-width: 0;
    overflow: hidden;
    font-size: 9.5px;
    line-height: 1.4;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ieel-module-class-materials a span {
    flex: 0 0 auto;
    color: var(--ieel-aula-gris-500);
    font-size: 7.5px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
}

.ieel-module-resource-count {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    color: #760000;
    background: #ffffff;
    border: 1px solid rgba(118, 0, 0, 0.21);
    border-radius: 7px;
    font-size: 8.5px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    white-space: nowrap;
}

.ieel-module-resources {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 11px;
}

.ieel-module-resource {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 15px 16px;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f4f4f5
        );
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 9px;
}

.ieel-module-resource > div {
    min-width: 0;
}

.ieel-module-resource > div > span {
    display: block;
    margin-bottom: 5px;
    color: #810000;
    font-size: 7.5px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 0.65px;
    text-transform: uppercase;
}

.ieel-module-resource h3 {
    margin: 0;
    overflow: hidden;
    color: var(--ieel-aula-gris-900);
    font-size: 11px;
    line-height: 1.45;
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ieel-module-resource small {
    display: block;
    margin-top: 5px;
    overflow: hidden;
    color: var(--ieel-aula-gris-600);
    font-size: 8.5px;
    line-height: 1.4;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ieel-module-resource > a {
    min-height: 35px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 11px;
    color: #760000;
    background: #ffffff;
    border: 1px solid rgba(118, 0, 0, 0.26);
    border-radius: 7px;
    text-decoration: none;
    font-size: 8.5px;
    line-height: 1;
    font-weight: 700;
}

.ieel-module-resource > a:hover,
.ieel-module-resource > a:focus-visible {
    color: #ffffff;
    background: #760000;
    border-color: #760000;
    outline: none;
}

.ieel-module-empty {
    padding: 30px 24px;
    text-align: center;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0f0f1
        );
    border: 1px solid var(--ieel-aula-gris-200);
    border-top: 4px solid var(--ieel-aula-rojo-800);
    border-radius: 11px;
}

.ieel-module-empty h3 {
    margin: 0;
    color: var(--ieel-aula-gris-950);
    font-size: 18px;
    line-height: 1.3;
    font-weight: 700;
}

.ieel-module-empty p {
    max-width: 620px;
    margin: 8px auto 0;
    color: var(--ieel-aula-gris-700);
    font-size: 11.5px;
    line-height: 1.7;
}

/* =========================================================
   MÓDULO: TABLET Y MÓVIL
========================================================= */

@media (max-width: 1080px) {
    .ieel-module-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ieel-module-back {
        grid-column: 1 / -1;
        min-height: 52px;
        justify-content: center;
    }
}

@media (max-width: 760px) {
    .ieel-module-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 16px;
    }

    .ieel-module-overview > article,
    .ieel-module-back {
        min-height: 68px;
        padding: 13px 14px;
    }

    .ieel-module-overview > article:first-child {
        grid-column: 1 / -1;
    }

    .ieel-module-section {
        margin-top: 24px;
    }

    .ieel-module-tablist {
        grid-auto-columns: minmax(145px, 72vw);
        gap: 1px;
        scroll-snap-type: x mandatory;
    }

    .ieel-module-tab {
        min-height: 88px;
        padding: 14px 13px 13px;
    }

    .ieel-module-panel {
        padding: 20px 17px 18px;
    }

    .ieel-module-panel-header {
        flex-direction: column;
        gap: 12px;
    }

    .ieel-module-panel-status {
        align-self: flex-start;
    }

    .ieel-module-panel-header h3 {
        font-size: 19px;
    }

    .ieel-module-facts {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ieel-module-facts article:last-child {
        grid-column: 1 / -1;
    }

    .ieel-module-live {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 15px;
    }

    .ieel-module-action {
        width: 100%;
    }

    .ieel-module-class-materials > div,
    .ieel-module-resources {
        grid-template-columns: 1fr;
    }

    .ieel-module-resource {
        padding: 14px;
    }
}

@media (max-width: 520px) {
    body.ieel-aula-home .ieel-password-input input,
    body.ieel-aula-home .ieel-password-input input::placeholder {
        font-size: 11px;
    }

    .ieel-module-overview {
        grid-template-columns: 1fr;
    }

    .ieel-module-overview > article:first-child,
    .ieel-module-back {
        grid-column: auto;
    }

    .ieel-module-tablist {
        grid-auto-columns: minmax(140px, 78vw);
    }

    .ieel-module-panel {
        padding: 18px 14px 16px;
    }

    .ieel-module-facts {
        grid-template-columns: 1fr;
    }

    .ieel-module-facts article:last-child {
        grid-column: auto;
    }

    .ieel-module-panel-header p {
        font-size: 11.5px;
    }

    .ieel-module-class-materials a {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .ieel-module-class-materials a strong {
        width: 100%;
        white-space: normal;
    }

    .ieel-module-resource {
        grid-template-columns: minmax(0, 1fr);
        gap: 11px;
    }

    .ieel-module-resource h3,
    .ieel-module-resource small {
        white-space: normal;
    }

    .ieel-module-resource > a {
        width: 100%;
        min-height: 38px;
    }

    .ieel-module-resource-count {
        align-self: flex-start;
    }
}

/* =========================================================
   IEEL · TAMAÑO MÍNIMO DE TEXTOS PEQUEÑOS
   Pegar al FINAL del style.css
========================================================= */

/* Aula general, navegación y soporte */
.ieel-login-footer,
.ieel-aula-brand-subtitle,
.ieel-aula-nav-label,
.ieel-aula-help-kicker,
.ieel-aula-help p,
.ieel-aula-whatsapp,
.ieel-aula-help-email,
.ieel-aula-security,
.ieel-aula-page-heading span,
.ieel-aula-user-data span,
.ieel-aula-user-username span,
.ieel-aula-user-username strong,
.ieel-aula-logout-form button,
.ieel-aula-hero-eyebrow,
.ieel-aula-hero-summary span,
.ieel-aula-section-kicker,
.ieel-aula-section-head p,
.ieel-aula-program-code,
.ieel-aula-footer,

/* Encabezados editoriales */
.ieel-page-intro-eyebrow,
.ieel-page-intro-feature > span,

/* Tarjetas de módulos del inicio */
.ieel-aula-module-number,
.ieel-aula-access-pill,
.ieel-aula-module-description,
.ieel-aula-teachers-label,
.ieel-aula-teacher-avatar,
.ieel-aula-teacher-copy strong,
.ieel-aula-teacher-copy small,
.ieel-aula-module-dates span,
.ieel-aula-module-dates strong,
.ieel-aula-module-button,
.ieel-aula-module-button span,
.ieel-aula-empty p,
.ieel-aula-empty a,

/* Topbar */
.ieel-aula-topbar-status small,
.ieel-aula-topbar-status strong,
.ieel-aula-topbar-modules small,
.ieel-aula-topbar-modules b,

/* Certificados */
.ieel-certificate-scope,
.ieel-certificate-status,
.ieel-certificate-data dt,
.ieel-certificate-data dd,
.ieel-certificate-button,

/* Cambio de contraseña */
.ieel-password-field label,
.ieel-password-toggle,
.ieel-password-submit,
.ieel-password-rules p,
.ieel-password-rules li,
body.ieel-aula-home .ieel-password-input input,
body.ieel-aula-home .ieel-password-input input::placeholder,

/* Información general del módulo */
.ieel-module-overview > article > span,
.ieel-module-overview > article > strong,
.ieel-module-state,
.ieel-module-back,

/* Pestañas y paneles de clases */
.ieel-module-tab-number,
.ieel-module-tab > strong,
.ieel-module-tab-status,
.ieel-module-panel-status,
.ieel-module-panel-header > div > span,
.ieel-module-panel-header p,

/* Fecha, horario y modalidad */
.ieel-module-facts span,
.ieel-module-facts strong,

/* Zoom, grabación y mensajes */
.ieel-module-live > div > span,
.ieel-module-live > div > strong,
.ieel-module-action,
.ieel-module-action span,
.ieel-module-message strong,
.ieel-module-message p,

/* Materiales de cada clase */
.ieel-module-class-materials > span,
.ieel-module-class-materials a strong,
.ieel-module-class-materials a span,

/* Materiales generales */
.ieel-module-resource-count,
.ieel-module-resource > div > span,
.ieel-module-resource h3,
.ieel-module-resource small,
.ieel-module-resource > a,
.ieel-module-empty p {
    font-size: 12px !important;
}

/* Conservar blancos los textos de botones rojos */
.ieel-aula-module-button,
.ieel-aula-module-button span,
.ieel-module-action,
.ieel-module-action span,
.ieel-password-submit {
    color: #ffffff !important;
}

/* Alturas acordes al nuevo tamaño */
.ieel-aula-access-pill,
.ieel-module-state,
.ieel-module-tab-status,
.ieel-module-panel-status,
.ieel-certificate-status {
    min-height: 30px;
    padding-right: 10px;
    padding-left: 10px;
    line-height: 1.15;
}

.ieel-module-action,
.ieel-aula-module-button,
.ieel-password-submit,
.ieel-certificate-button {
    min-height: 46px;
}

/* Evitar que móvil reduzca nuevamente los textos */
@media (max-width: 760px) {
    .ieel-aula-home small,
    .ieel-aula-home label,
    .ieel-aula-home input,
    .ieel-aula-home input::placeholder,
    .ieel-aula-home button,
    .ieel-aula-home .ieel-aula-footer,
    .ieel-aula-home .ieel-module-tab-number,
    .ieel-aula-home .ieel-module-tab > strong,
    .ieel-aula-home .ieel-module-tab-status,
    .ieel-aula-home .ieel-module-panel-status,
    .ieel-aula-home .ieel-module-facts span,
    .ieel-aula-home .ieel-module-facts strong,
    .ieel-aula-home .ieel-module-resource small {
        font-size: 12px !important;
    }

    .ieel-module-tab {
        min-height: 108px;
    }
}
/* =========================================================
   VISOR DE ZOOM
========================================================= */

.ieel-zoom-overview {
    display: grid;
    grid-template-columns:
        minmax(190px, 1fr)
        minmax(170px, 0.8fr)
        minmax(130px, 0.55fr)
        auto;
    align-items: stretch;
    gap: 1px;
    margin-top: 20px;
    overflow: hidden;
    background: var(--ieel-aula-gris-200);
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 10px;
}

.ieel-zoom-overview > article,
.ieel-zoom-back {
    min-width: 0;
    min-height: 78px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 15px 18px;
    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f6f6f7 100%
        );
}

.ieel-zoom-overview > article > span {
    margin-bottom: 6px;
    color: var(--ieel-aula-gris-500);
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.65px;
    text-transform: uppercase;
}

.ieel-zoom-overview > article > strong {
    color: var(--ieel-aula-gris-900);
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.ieel-zoom-back {
    align-items: center;
    flex-direction: row;
    gap: 9px;
    color: #730000;
    text-decoration: none;
    font-size: 12px;
    line-height: 1.3;
    font-weight: 700;
    transition:
        color 0.18s ease,
        background 0.18s ease;
}

.ieel-zoom-back:hover,
.ieel-zoom-back:focus-visible {
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--ieel-aula-rojo-700),
            var(--ieel-aula-rojo-950)
        );
    outline: none;
}

.ieel-zoom-back svg {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-zoom-section {
    margin-top: 29px;
}

.ieel-zoom-viewer {
    min-width: 0;
    padding: 18px;
    background:
        linear-gradient(
            150deg,
            #ffffff 0%,
            #ffffff 72%,
            #eeeeef 145%
        );
    border: 1px solid var(--ieel-aula-gris-200);
    border-top: 5px solid var(--ieel-aula-rojo-800);
    border-radius: 12px;
    box-shadow: 0 17px 38px rgba(43, 43, 46, 0.10);
}

.ieel-zoom-status {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    padding: 11px 14px;
    color: #626368;
    background: #f4f4f5;
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

.ieel-zoom-status.is-loading {
    color: #76581f;
    background: #fff9ed;
    border-color: #e4cf9c;
}

.ieel-zoom-status.is-success {
    color: #246240;
    background: #edf8f1;
    border-color: #b7d8c3;
}

.ieel-zoom-status.is-error {
    color: #8a2929;
    background: #fff1f1;
    border-color: #e0abab;
}

.ieel-zoom-presentation {
    min-width: 0;
    overflow: hidden;
    background: #000000;
    border: 1px solid #252526;
    border-radius: 9px;
}

.ieel-zoom-toolbar {
    min-height: 50px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px;
    background:
        linear-gradient(
            180deg,
            #29292b 0%,
            #1c1c1d 100%
        );
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.ieel-zoom-control {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 12px;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.23);
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    font-weight: 650;
    transition:
        background 0.18s ease,
        border-color 0.18s ease;
}

.ieel-zoom-control:hover,
.ieel-zoom-control:focus-visible {
    background: #760000;
    border-color: #b35e5e;
    outline: none;
}

.ieel-zoom-control svg {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-zoom-client-wrap {
    width: 100%;
    min-width: 0;
    height: clamp(650px, 73vh, 860px);
    position: relative;
    overflow: hidden;
    background: #000000;
}

.ieel-zoom-client-frame {
    width: 100%;
    height: 100%;
    display: block;
    background: #000000;
    border: 0;
}

.ieel-zoom-presentation:fullscreen,
.ieel-zoom-presentation:-webkit-full-screen {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: #000000;
}

.ieel-zoom-presentation:fullscreen .ieel-zoom-toolbar,
.ieel-zoom-presentation:-webkit-full-screen .ieel-zoom-toolbar {
    flex: 0 0 auto;
    justify-content: center;
}

.ieel-zoom-presentation:fullscreen .ieel-zoom-client-wrap,
.ieel-zoom-presentation:-webkit-full-screen .ieel-zoom-client-wrap {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
}

.ieel-zoom-fallback {
    margin: 12px 0 0;
    color: var(--ieel-aula-gris-600);
    font-size: 12px;
    line-height: 1.65;
    text-align: center;
}

.ieel-zoom-message {
    padding: 34px 28px;
    text-align: center;
    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f0f0f1
        );
    border: 1px solid var(--ieel-aula-gris-200);
    border-top: 5px solid var(--ieel-aula-rojo-800);
    border-radius: 11px;
    box-shadow: 0 16px 36px rgba(43, 43, 46, 0.08);
}

.ieel-zoom-message.is-cancelled {
    border-top-color: #a64b4b;
}

.ieel-zoom-message h3 {
    margin: 0;
    color: var(--ieel-aula-gris-950);
    font-size: 21px;
    line-height: 1.3;
    font-weight: 700;
}

.ieel-zoom-message p {
    max-width: 680px;
    margin: 9px auto 0;
    color: var(--ieel-aula-gris-700);
    font-size: 12px;
    line-height: 1.7;
}

/* =========================================================
   VISOR DE ZOOM: TABLET Y MÓVIL
========================================================= */

@media (max-width: 1080px) {
    .ieel-zoom-overview {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .ieel-zoom-back {
        grid-column: 1 / -1;
        min-height: 52px;
        justify-content: center;
    }

    .ieel-zoom-client-wrap {
        height: clamp(600px, 72vh, 780px);
    }
}

@media (max-width: 760px) {
    .ieel-zoom-overview {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 16px;
    }

    .ieel-zoom-overview > article,
    .ieel-zoom-back {
        min-height: 68px;
        padding: 13px 14px;
    }

    .ieel-zoom-overview > article:first-child {
        grid-column: 1 / -1;
    }

    .ieel-zoom-section {
        margin-top: 24px;
    }

    .ieel-zoom-viewer {
        padding: 12px;
    }

    .ieel-zoom-toolbar {
        justify-content: stretch;
    }

    .ieel-zoom-control {
        flex: 1 1 170px;
        min-height: 40px;
        padding: 8px 10px;
        line-height: 1.25;
        text-align: center;
    }

    .ieel-zoom-client-wrap {
        height: clamp(560px, 72dvh, 740px);
    }

    .ieel-zoom-fallback {
        text-align: left;
    }
}

@media (max-width: 520px) {
    .ieel-zoom-overview {
        grid-template-columns: 1fr;
    }

    .ieel-zoom-overview > article:first-child,
    .ieel-zoom-back {
        grid-column: auto;
    }

    .ieel-zoom-toolbar {
        display: grid;
        grid-template-columns: 1fr;
    }

    .ieel-zoom-control {
        width: 100%;
    }

    .ieel-zoom-client-wrap {
        height: 68dvh;
        min-height: 520px;
        max-height: 700px;
    }

    .ieel-zoom-message {
        padding: 28px 20px;
    }
}


/* =========================================================
   MÓDULO · ENCABEZADO COMPACTO
========================================================= */

.ieel-module-hero-compact {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 28px;
    align-items: start;
    padding: 8px 0 26px;
    border-bottom: 1px solid #d7d7da;
}

.ieel-module-hero-main {
    min-width: 0;
}

.ieel-module-hero-kicker {
    display: block;
    margin-bottom: 8px;
    color: #8f0000;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.25px;
    text-transform: uppercase;
}

.ieel-module-hero-main h1 {
    margin: 0;
    color: #2f3034;
    font-size: clamp(26px, 2.8vw, 38px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.8px;
}

.ieel-module-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.ieel-module-hero-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 32px;
    padding: 0 12px;
    color: #730000;
    background: #fff;
    border: 1px solid rgba(118, 0, 0, 0.16);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.ieel-module-hero-main h2 {
    margin: 14px 0 0;
    color: #303034;
    font-size: clamp(18px, 1.8vw, 28px);
    line-height: 1.3;
    font-weight: 650;
    letter-spacing: -0.4px;
}

.ieel-module-hero-side {
    min-width: 0;
    padding: 18px;
    background: linear-gradient(155deg, #ffffff 0%, #f3f3f4 100%);
    border: 1px solid var(--ieel-aula-gris-200);
    border-radius: 12px;
    box-shadow: 0 14px 32px rgba(43, 43, 46, 0.08);
}

.ieel-module-hero-side-grid {
    display: grid;
    gap: 14px;
}

.ieel-module-hero-side-item {
    display: grid;
    gap: 6px;
}

.ieel-module-hero-side-item small {
    color: #8a8b90;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.ieel-module-hero-side-item strong {
    color: #2f3034;
    font-size: 12px;
    line-height: 1.45;
    font-weight: 700;
}

.ieel-module-hero-back {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
    color: #730000;
    background: #fff;
    border: 1px solid rgba(118, 0, 0, 0.18);
    border-radius: 8px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    transition: all 0.18s ease;
}

.ieel-module-hero-back:hover,
.ieel-module-hero-back:focus-visible {
    color: #fff;
    background: linear-gradient(135deg, #8b0000 0%, #590000 100%);
    border-color: #650000;
    outline: none;
}

.ieel-module-hero-back svg {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Oculta el bloque resumen anterior si quedó en el HTML */
.ieel-module-overview {
    display: none;
}

/* Ajuste del título de sección para que no se vea tan pesado */
.ieel-module-section .ieel-aula-section-head {
    margin-top: 4px;
}

.ieel-module-section .ieel-aula-section-head h2 {
    font-size: clamp(24px, 2.4vw, 32px);
}

.ieel-module-section .ieel-aula-section-head p {
    max-width: 760px;
}

/* Responsive */
@media (max-width: 980px) {
    .ieel-module-hero-compact {
        grid-template-columns: 1fr;
        gap: 18px;
    }
}

@media (max-width: 640px) {
    .ieel-module-hero-compact {
        padding-bottom: 22px;
    }

    .ieel-module-hero-main h1 {
        font-size: 29px;
    }

    .ieel-module-hero-main h2 {
        font-size: 21px;
    }

    .ieel-module-hero-meta {
        gap: 8px;
    }

    .ieel-module-hero-meta span,
    .ieel-module-hero-side-item small,
    .ieel-module-hero-side-item strong,
    .ieel-module-hero-back {
        font-size: 12px;
    }
}
/* =========================================================
   MENÚ DESPLEGABLE DE PROGRAMAS
   ========================================================= */

.ieel-aula-nav-group {
    display: grid;
    width: 100%;
    gap: 6px;
}

.ieel-aula-nav-toggle {
    width: 100%;
    margin: 0;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.ieel-aula-nav-toggle .ieel-aula-nav-text {
    flex: 1;
    min-width: 0;
}

.ieel-aula-nav-chevron {
    display: inline-flex;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease;
}

.ieel-aula-nav-chevron svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-aula-nav-toggle[aria-expanded="true"]
.ieel-aula-nav-chevron {
    transform: rotate(180deg);
}

.ieel-aula-programas-submenu {
    display: grid;
    gap: 10px;
    padding: 3px 5px 10px 19px;
}

.ieel-aula-programas-submenu[hidden] {
    display: none;
}

.ieel-aula-programa-item {
    position: relative;
    display: grid;
    gap: 5px;
    padding: 12px 10px 10px 15px;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0 10px 10px 0;
    background: rgba(255, 255, 255, 0.035);
}

.ieel-aula-programa-item::before {
    content: "";
    position: absolute;
    top: 18px;
    left: -3px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
}

.ieel-aula-programa-item.is-active {
    background: rgba(255, 255, 255, 0.07);
}

.ieel-aula-programa-item.is-active::before {
    background: #ffffff;
}

.ieel-aula-programa-label {
    display: block;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.ieel-aula-programa-nombre {
    display: block;
    padding-right: 4px;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.45;
}

.ieel-aula-programa-item.is-active
.ieel-aula-programa-nombre {
    color: #ffffff;
}

.ieel-aula-submenu-link {
    display: flex;
    width: 100%;
    min-height: 39px;
    margin-top: 3px;
    padding: 8px 10px;
    align-items: center;
    gap: 9px;
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.84rem;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        color 0.2s ease,
        transform 0.2s ease;
}

.ieel-aula-submenu-link:hover {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.08);
    transform: translateX(2px);
}

.ieel-aula-submenu-link.is-active {
    color: #ffffff;
    background: rgba(255, 255, 255, 0.12);
}

.ieel-aula-submenu-icon {
    display: inline-flex;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
}

.ieel-aula-submenu-icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}
/* =========================================================
   BOTÓN MIS PROGRAMAS
   ========================================================= */

.ieel-aula-sidebar
.ieel-aula-nav
.ieel-aula-nav-group
> .ieel-aula-programas-button {
    display: flex !important;
    width: 100% !important;
    min-height: 49px;
    margin: 0;
    padding: 12px 14px;
    align-items: center;
    gap: 12px;
    border: 0;
    border-radius: 5px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background: transparent !important;
    color: #ffffff !important;
    font: inherit;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    cursor: pointer;
    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.ieel-aula-sidebar
.ieel-aula-nav
.ieel-aula-nav-group
> .ieel-aula-programas-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/*
 * El usuario está dentro de este programa.
 * El texto siempre será rojo sobre fondo blanco,
 * tanto abierto como cerrado.
 */
.ieel-aula-sidebar
.ieel-aula-nav
.ieel-aula-nav-group
> .ieel-aula-programas-button.is-current-program {
    background: #f4f4f4 !important;
    color: #741015 !important;
    -webkit-text-fill-color: #741015 !important;
}

.ieel-aula-sidebar
.ieel-aula-nav
.ieel-aula-nav-group
> .ieel-aula-programas-button.is-current-program:hover {
    background: #ffffff !important;
    color: #741015 !important;
    -webkit-text-fill-color: #741015 !important;
}

/* Texto de Mis programas */

.ieel-aula-sidebar
.ieel-aula-programas-button
.ieel-aula-programas-button-text {
    flex: 1;
    min-width: 0;
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Ícono de carpeta */

.ieel-aula-programas-button-icon {
    display: inline-flex;
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    align-items: center;
    justify-content: center;
    color: inherit !important;
}

.ieel-aula-programas-button-icon svg {
    width: 19px;
    height: 19px;
    stroke: currentColor !important;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Flecha del desplegable */

.ieel-aula-programas-button-chevron {
    display: inline-flex;
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    margin-left: auto;
    align-items: center;
    justify-content: center;
    color: inherit !important;
    transition: transform 0.2s ease;
}

.ieel-aula-programas-button-chevron svg {
    width: 16px;
    height: 16px;
    stroke: currentColor !important;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-aula-programas-button[aria-expanded="true"]
.ieel-aula-programas-button-chevron {
    transform: rotate(180deg);
}

/*
 * Refuerzo para impedir que otros estilos del menú
 * vuelvan a colocar el texto en blanco.
 */
.ieel-aula-sidebar
.ieel-aula-programas-button.is-current-program
.ieel-aula-programas-button-text,
.ieel-aula-sidebar
.ieel-aula-programas-button.is-current-program
.ieel-aula-programas-button-icon,
.ieel-aula-sidebar
.ieel-aula-programas-button.is-current-program
.ieel-aula-programas-button-chevron {
    color: #741015 !important;
    -webkit-text-fill-color: #741015 !important;
}

/* =========================================================
   BOTÓN MIS MÓDULOS CUANDO EL PROGRAMA ESTÁ DESPLEGADO
   ========================================================= */

/*
 * Cuando "Mis programas" está abierto,
 * "Mis módulos" se muestra como botón blanco.
 */
.ieel-aula-programas-button[aria-expanded="true"]
+ .ieel-aula-programas-submenu
.ieel-aula-submenu-link {
    min-height: 44px;
    margin-top: 9px;
    padding: 10px 13px;
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 7px;
    background: #ffffff !important;
    color: #741015 !important;
    -webkit-text-fill-color: #741015 !important;
    box-shadow: 0 4px 12px rgba(45, 0, 0, 0.14);
}

/* Texto del botón */

.ieel-aula-programas-button[aria-expanded="true"]
+ .ieel-aula-programas-submenu
.ieel-aula-submenu-link span {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

/* Ícono del botón */

.ieel-aula-programas-button[aria-expanded="true"]
+ .ieel-aula-programas-submenu
.ieel-aula-submenu-link
.ieel-aula-submenu-icon {
    color: #741015 !important;
}

/* SVG del ícono */

.ieel-aula-programas-button[aria-expanded="true"]
+ .ieel-aula-programas-submenu
.ieel-aula-submenu-link
.ieel-aula-submenu-icon svg {
    stroke: #741015 !important;
}

/* Efecto al pasar el cursor */

.ieel-aula-programas-button[aria-expanded="true"]
+ .ieel-aula-programas-submenu
.ieel-aula-submenu-link:hover {
    background: #f7eeee !important;
    color: #741015 !important;
    border-color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 6px 15px rgba(45, 0, 0, 0.18);
}

/* Efecto cuando se presiona */

.ieel-aula-programas-button[aria-expanded="true"]
+ .ieel-aula-programas-submenu
.ieel-aula-submenu-link:active {
    transform: translateY(0);
    box-shadow: 0 2px 7px rgba(45, 0, 0, 0.14);
}

/* =========================================================
   ACCESO A LA EVALUACIÓN DEL MÓDULO
   ========================================================= */

.ieel-module-evaluation-link {
    display: flex;
    width: 100%;
    margin-top: 16px;
    padding: 14px 16px;
    align-items: center;
    gap: 12px;
    border: 1px solid rgba(101, 7, 7, 0.18);
    border-radius: 11px;
    background: #ffffff;
    color: #650707;
    text-decoration: none;
    box-shadow: 0 5px 14px rgba(40, 0, 0, 0.08);
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease;
}

.ieel-module-evaluation-link:hover {
    color: #650707;
    background: #fffafa;
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(40, 0, 0, 0.13);
}

.ieel-module-evaluation-link:focus-visible {
    outline: 3px solid rgba(101, 7, 7, 0.22);
    outline-offset: 3px;
}

.ieel-module-evaluation-icon {
    display: inline-flex;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: rgba(101, 7, 7, 0.09);
    color: #650707;
}

.ieel-module-evaluation-icon svg {
    width: 21px;
    height: 21px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-module-evaluation-copy {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 3px;
}

.ieel-module-evaluation-copy strong {
    color: #650707;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.25;
}

.ieel-module-evaluation-copy small {
    color: #746568;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.3;
}

.ieel-module-evaluation-arrow {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    stroke: #650707;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.ieel-module-evaluation-link:hover
.ieel-module-evaluation-arrow {
    transform: translateX(3px);
}

@media (max-width: 520px) {
    .ieel-module-evaluation-link {
        padding: 12px 13px;
    }

    .ieel-module-evaluation-icon {
        flex-basis: 35px;
        width: 35px;
        height: 35px;
    }
}

/* =========================================================
   RESUMEN COMPACTO DEL MÓDULO
   ========================================================= */

.ieel-module-summary-card {
    display: grid;
    grid-template-columns:
        minmax(0, 1.35fr)
        minmax(430px, 0.85fr);
    gap: 24px;
    margin-bottom: 30px;
    padding: 22px 24px;
    border: 1px solid rgba(101, 7, 7, 0.1);
    border-left: 4px solid #76090f;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 8px 24px rgba(36, 13, 15, 0.07);
}

/* =========================================================
   INFORMACIÓN PRINCIPAL
   ========================================================= */

.ieel-module-summary-main {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
}

.ieel-module-summary-kicker {
    display: block;
    margin-bottom: 7px;
    color: #8c0b12;
    font-size: 0.69rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ieel-module-summary-main h1 {
    max-width: 900px;
    margin: 0;
    color: #202738;
    font-size: clamp(1.25rem, 2vw, 1.75rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

.ieel-module-summary-module {
    display: flex;
    margin-top: 16px;
    padding-top: 15px;
    align-items: flex-start;
    gap: 12px;
    border-top: 1px solid #e9e3e4;
}

.ieel-module-summary-module > span {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 27px;
    padding: 5px 9px;
    align-items: center;
    border-radius: 6px;
    background: rgba(118, 9, 15, 0.08);
    color: #76090f;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ieel-module-summary-module > strong {
    min-width: 0;
    padding-top: 2px;
    color: #272b35;
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.4;
}

/* =========================================================
   INFORMACIÓN LATERAL
   ========================================================= */

.ieel-module-summary-side {
    display: grid;
    align-content: center;
    gap: 14px;
}

.ieel-module-summary-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid #e9e1e2;
    border-radius: 10px;
    background: #faf9f9;
    overflow: hidden;
}

.ieel-module-summary-facts > div {
    min-width: 0;
    padding: 11px 12px;
}

.ieel-module-summary-facts > div + div {
    border-left: 1px solid #e9e1e2;
}

.ieel-module-summary-facts small {
    display: block;
    margin-bottom: 5px;
    color: #77737a;
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ieel-module-summary-facts strong {
    display: block;
    color: #292c35;
    font-size: 0.74rem;
    font-weight: 650;
    line-height: 1.35;
}

.ieel-module-summary-facts .ieel-module-state {
    width: fit-content;
    max-width: 100%;
    padding: 4px 7px;
    border-radius: 999px;
    font-size: 0.64rem;
    line-height: 1.2;
}

/* =========================================================
   ACCIONES DEL MÓDULO
   ========================================================= */

.ieel-module-summary-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 10px;
}

/* =========================================================
   BOTÓN DE EVALUACIÓN
   ========================================================= */

.ieel-module-summary-evaluation {
    display: flex;
    min-width: 0;
    min-height: 64px;
    padding: 10px 13px;
    align-items: center;
    gap: 11px;
    border-radius: 10px;
    color: #ffffff;
    text-decoration: none;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        filter 0.2s ease;
}

/*
 * Evaluación pendiente:
 * color rojo institucional.
 */
.ieel-module-summary-evaluation.is-pending {
    background: linear-gradient(
        135deg,
        #76090f,
        #9b1119
    );
    box-shadow: 0 7px 16px rgba(118, 9, 15, 0.2);
}

/*
 * Evaluación completada:
 * color verde institucional.
 */
.ieel-module-summary-evaluation.is-completed {
    background: linear-gradient(
        135deg,
        #1f7046,
        #2d8a59
    );
    box-shadow: 0 7px 16px rgba(31, 112, 70, 0.2);
}

.ieel-module-summary-evaluation:hover {
    color: #ffffff;
    transform: translateY(-1px);
    filter: brightness(1.04);
}

.ieel-module-summary-evaluation:focus-visible {
    outline: 3px solid rgba(118, 9, 15, 0.22);
    outline-offset: 3px;
}

.ieel-module-summary-evaluation-icon {
    display: inline-flex;
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
}

.ieel-module-summary-evaluation-icon svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-module-summary-evaluation-copy {
    display: grid;
    flex: 1;
    min-width: 0;
    gap: 2px;
}

.ieel-module-summary-evaluation-copy small {
    color: rgba(255, 255, 255, 0.76);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.ieel-module-summary-evaluation-copy strong {
    color: #ffffff;
    font-size: 0.83rem;
    font-weight: 700;
    line-height: 1.25;
}

.ieel-module-summary-evaluation-copy > span {
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.65rem;
    font-weight: 500;
    line-height: 1.25;
}

.ieel-module-summary-evaluation-arrow {
    flex: 0 0 19px;
    width: 19px;
    height: 19px;
    stroke: #ffffff;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform 0.2s ease;
}

.ieel-module-summary-evaluation:hover
.ieel-module-summary-evaluation-arrow {
    transform: translateX(3px);
}

/* =========================================================
   BOTÓN VOLVER
   ========================================================= */

.ieel-module-summary-back {
    display: inline-flex;
    min-height: 64px;
    padding: 10px 15px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid rgba(118, 9, 15, 0.2);
    border-radius: 10px;
    background: #ffffff;
    color: #76090f;
    font-size: 0.72rem;
    font-weight: 650;
    line-height: 1.25;
    text-align: center;
    text-decoration: none;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}

.ieel-module-summary-back:hover {
    border-color: rgba(118, 9, 15, 0.34);
    background: #fff8f8;
    color: #76090f;
    transform: translateY(-1px);
}

.ieel-module-summary-back svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   ADAPTACIÓN RESPONSIVA
   ========================================================= */

@media (max-width: 1180px) {
    .ieel-module-summary-card {
        grid-template-columns: 1fr;
    }

    .ieel-module-summary-actions {
        grid-template-columns: minmax(0, 1fr) auto;
    }
}

@media (max-width: 680px) {
    .ieel-module-summary-card {
        gap: 18px;
        padding: 18px;
    }

    .ieel-module-summary-module {
        flex-direction: column;
        gap: 8px;
    }

    .ieel-module-summary-facts {
        grid-template-columns: 1fr;
    }

    .ieel-module-summary-facts > div + div {
        border-top: 1px solid #e9e1e2;
        border-left: 0;
    }

    .ieel-module-summary-actions {
        grid-template-columns: 1fr;
    }

    .ieel-module-summary-back {
        min-height: 46px;
    }
}

/* =========================================================
   RESUMEN COMPACTO DEL MÓDULO SIN CARD
   ========================================================= */

.ieel-module-overview {
    display: grid;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(400px, 520px);
    gap: 34px;
    margin-bottom: 26px;
    padding: 8px 0 22px;
    align-items: end;
    border-bottom: 1px solid rgba(33, 39, 53, 0.13);
    background: transparent;
}

.ieel-module-overview-main {
    min-width: 0;
}

.ieel-module-overview-kicker {
    display: block;
    margin-bottom: 8px;
    color: #830b12;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ieel-module-overview-main h1 {
    max-width: 850px;
    margin: 0;
    color: #1e293b;
    font-size: clamp(1.35rem, 2.1vw, 1.85rem);
    font-weight: 700;
    line-height: 1.22;
    letter-spacing: -0.025em;
}

.ieel-module-overview-module {
    display: flex;
    margin-top: 15px;
    padding-top: 13px;
    align-items: center;
    gap: 11px;
    border-top: 1px solid rgba(33, 39, 53, 0.1);
}

.ieel-module-overview-module > span {
    display: inline-flex;
    flex: 0 0 auto;
    min-height: 26px;
    padding: 5px 9px;
    align-items: center;
    border-radius: 5px;
    background: rgba(131, 11, 18, 0.08);
    color: #830b12;
    font-size: 0.66rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.ieel-module-overview-module > strong {
    min-width: 0;
    color: #272d38;
    font-size: 0.92rem;
    font-weight: 650;
    line-height: 1.35;
}

/* =========================================================
   DATOS DEL MÓDULO
   ========================================================= */

.ieel-module-overview-side {
    display: grid;
    min-width: 0;
    gap: 10px;
}

.ieel-module-overview-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: center;
}

.ieel-module-overview-facts > div {
    min-width: 0;
    padding: 2px 14px;
}

.ieel-module-overview-facts > div:first-child {
    padding-left: 0;
}

.ieel-module-overview-facts > div + div {
    border-left: 1px solid rgba(33, 39, 53, 0.13);
}

.ieel-module-overview-facts small {
    display: block;
    margin-bottom: 5px;
    color: #747780;
    font-size: 0.61rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ieel-module-overview-facts strong {
    display: block;
    color: #252b35;
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.35;
}

.ieel-module-overview-facts
.ieel-module-state {
    display: inline-flex;
    width: auto;
    padding: 4px 8px;
    align-items: center;
    border-radius: 999px;
    font-size: 0.61rem;
    line-height: 1.2;
}

/* =========================================================
   ACCIONES COMPACTAS
   ========================================================= */

.ieel-module-overview-actions {
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 8px;
}

/* =========================================================
   BOTÓN DE EVALUACIÓN
   ========================================================= */

.ieel-module-evaluation-status {
    display: flex;
    min-width: 190px;
    min-height: 48px;
    padding: 7px 11px;
    align-items: center;
    gap: 9px;
    border-radius: 7px;
    color: #ffffff;
    text-decoration: none;
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

.ieel-module-evaluation-status.is-pending {
    background: #9d1018;
    box-shadow: 0 5px 12px rgba(125, 8, 15, 0.17);
}

.ieel-module-evaluation-status.is-completed {
    background: #27764d;
    box-shadow: 0 5px 12px rgba(29, 104, 65, 0.17);
}

.ieel-module-evaluation-status:hover {
    color: #ffffff;
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.ieel-module-evaluation-status:focus-visible {
    outline: 3px solid rgba(131, 11, 18, 0.22);
    outline-offset: 3px;
}

.ieel-module-evaluation-status-icon {
    display: inline-flex;
    flex: 0 0 31px;
    width: 31px;
    height: 31px;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
}

.ieel-module-evaluation-status-icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-module-evaluation-status-copy {
    display: grid;
    min-width: 0;
    gap: 2px;
}

.ieel-module-evaluation-status-copy strong {
    color: #ffffff;
    font-size: 0.67rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.ieel-module-evaluation-status-copy small {
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.07em;
}

/* =========================================================
   BOTÓN MIS MÓDULOS
   ========================================================= */

.ieel-module-overview-back {
    display: inline-flex;
    min-height: 48px;
    padding: 8px 13px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border: 1px solid rgba(131, 11, 18, 0.22);
    border-radius: 7px;
    background: transparent;
    color: #76090f;
    font-size: 0.7rem;
    font-weight: 650;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}

.ieel-module-overview-back:hover {
    border-color: rgba(131, 11, 18, 0.38);
    background: rgba(131, 11, 18, 0.045);
    color: #76090f;
    transform: translateY(-1px);
}

.ieel-module-overview-back svg {
    flex: 0 0 17px;
    width: 17px;
    height: 17px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1120px) {
    .ieel-module-overview {
        grid-template-columns: 1fr;
        gap: 18px;
        align-items: start;
    }

    .ieel-module-overview-side {
        max-width: 620px;
    }

    .ieel-module-overview-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 620px) {
    .ieel-module-overview {
        padding-bottom: 18px;
    }

    .ieel-module-overview-module {
        align-items: flex-start;
        flex-direction: column;
        gap: 7px;
    }

    .ieel-module-overview-facts {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    .ieel-module-overview-facts > div {
        padding: 0;
    }

    .ieel-module-overview-facts > div + div {
        padding-top: 9px;
        border-top: 1px solid rgba(33, 39, 53, 0.11);
        border-left: 0;
    }

    .ieel-module-overview-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .ieel-module-evaluation-status,
    .ieel-module-overview-back {
        width: 100%;
    }

    .ieel-module-overview-back {
        min-height: 42px;
    }
}

/* =========================================================
   ÍCONO DEL BOTÓN IR AL ZOOM
   ========================================================= */

.ieel-module-action .ieel-module-zoom-icon {
    display: block;
    flex: 0 0 23px;
    width: 23px;
    height: 23px;
    object-fit: contain;
}

.ieel-module-action span {
    display: inline-flex;
    align-items: center;
}

/* =========================================================
   EVALUACIÓN DEL MÓDULO
   Agregar al final de /cursos/aula/style.css
   ========================================================= */

.ieel-evaluation-page {
    display: grid;
    gap: 24px;
}

.ieel-evaluation-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 22px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(47, 48, 50, 0.12);
}

.ieel-evaluation-header > div {
    min-width: 0;
}

.ieel-evaluation-header > div > span {
    display: block;
    margin-bottom: 7px;
    color: #780909;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ieel-evaluation-header h1 {
    margin: 0;
    color: #25262a;
    font-size: clamp(1.45rem, 2.6vw, 2.05rem);
    line-height: 1.25;
    font-weight: 700;
}

.ieel-evaluation-header p {
    margin: 8px 0 0;
    color: #6f7074;
    font-size: 0.82rem;
    line-height: 1.55;
}

.ieel-evaluation-back {
    display: inline-flex;
    min-height: 42px;
    padding: 0 15px;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(120, 9, 9, 0.24);
    border-radius: 6px;
    background: #ffffff;
    color: #780909;
    font-size: 0.72rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
}

.ieel-evaluation-back:hover {
    background: #780909;
    color: #ffffff;
}

.ieel-evaluation-empty,
.ieel-evaluation-intro,
.ieel-evaluation-result,
.ieel-evaluation-test {
    background: #ffffff;
    border: 1px solid rgba(47, 48, 50, 0.1);
    box-shadow: 0 14px 34px rgba(41, 42, 45, 0.07);
}

.ieel-evaluation-empty,
.ieel-evaluation-intro,
.ieel-evaluation-result {
    padding: clamp(24px, 4vw, 42px);
}

.ieel-evaluation-empty h2,
.ieel-evaluation-intro h2,
.ieel-evaluation-result h2 {
    margin: 0;
    color: #25262a;
    font-size: clamp(1.35rem, 2.4vw, 1.9rem);
    line-height: 1.3;
}

.ieel-evaluation-empty p,
.ieel-evaluation-intro p,
.ieel-evaluation-result p {
    max-width: 820px;
    margin: 13px 0 0;
    color: #6f7074;
    font-size: 0.84rem;
    line-height: 1.75;
}

.ieel-evaluation-empty small {
    display: block;
    margin-top: 12px;
    color: #780909;
    font-size: 0.72rem;
    font-weight: 700;
}

.ieel-evaluation-intro > span,
.ieel-evaluation-result-label {
    display: block;
    margin-bottom: 9px;
    color: #780909;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.ieel-evaluation-intro dl {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    margin: 26px 0 0;
    overflow: hidden;
    border: 1px solid #e2e3e5;
    background: #e2e3e5;
}

.ieel-evaluation-intro dl > div {
    padding: 15px;
    background: #f8f8f9;
}

.ieel-evaluation-intro dt,
.ieel-evaluation-result-grid span {
    color: #77787c;
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ieel-evaluation-intro dd {
    margin: 6px 0 0;
    color: #25262a;
    font-size: 0.82rem;
    font-weight: 700;
}

.ieel-evaluation-start,
.ieel-evaluation-submit {
    display: inline-flex;
    min-height: 48px;
    margin-top: 24px;
    padding: 0 21px;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: #780909;
    color: #ffffff;
    font: inherit;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(120, 9, 9, 0.2);
}

.ieel-evaluation-start:hover,
.ieel-evaluation-submit:hover {
    background: #590505;
    transform: translateY(-1px);
}

.ieel-evaluation-result {
    border-top: 5px solid #780909;
}

.ieel-evaluation-result.is-approved {
    border-top-color: #287a50;
}

.ieel-evaluation-result.is-approved .ieel-evaluation-result-label,
.ieel-evaluation-result.is-approved h2 {
    color: #287a50;
}

.ieel-evaluation-result.is-not-approved .ieel-evaluation-result-label,
.ieel-evaluation-result.is-not-approved h2 {
    color: #8f2323;
}

.ieel-evaluation-score {
    display: block;
    margin-top: 18px;
    color: #25262a;
    font-size: clamp(2.4rem, 6vw, 4.4rem);
    line-height: 1;
}

.ieel-evaluation-score small {
    font-size: 0.95rem;
    color: #7a7b7e;
}

.ieel-evaluation-result-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.ieel-evaluation-result-grid > div {
    padding: 15px;
    border: 1px solid #e1e2e4;
    background: #f8f8f9;
}

.ieel-evaluation-result-grid strong {
    display: block;
    margin-top: 6px;
    color: #25262a;
    font-size: 1.1rem;
}

.ieel-evaluation-test {
    overflow: hidden;
}

.ieel-evaluation-test-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 24px;
    border-bottom: 1px solid #e2e3e5;
    background: #f8f8f9;
}

.ieel-evaluation-test-head span {
    display: block;
    margin-bottom: 5px;
    color: #780909;
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
}

.ieel-evaluation-test-head h2 {
    margin: 0;
    color: #25262a;
    font-size: 1.2rem;
    line-height: 1.4;
}

.ieel-evaluation-test-head > strong {
    color: #780909;
    font-size: 0.75rem;
    white-space: nowrap;
}

.ieel-evaluation-instructions {
    margin: 20px 24px 0;
    padding: 15px 17px;
    border-left: 4px solid #b4935a;
    background: #fbf8f3;
    color: #665f58;
    font-size: 0.78rem;
    line-height: 1.7;
}

.ieel-evaluation-form {
    display: grid;
    gap: 18px;
    padding: 24px;
}

.ieel-evaluation-question {
    margin: 0;
    padding: 20px;
    border: 1px solid #e1e2e4;
    background: #ffffff;
}

.ieel-evaluation-question legend {
    width: 100%;
    padding: 0;
    color: #25262a;
    font-size: 0.88rem;
    font-weight: 650;
    line-height: 1.65;
}

.ieel-evaluation-question legend > span {
    display: block;
    margin-bottom: 6px;
    color: #780909;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.ieel-evaluation-options {
    display: grid;
    gap: 9px;
    margin-top: 16px;
}

.ieel-evaluation-option {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 11px;
    align-items: flex-start;
    padding: 13px 14px;
    border: 1px solid #e2e3e5;
    background: #f9f9fa;
    color: #3d3e41;
    font-size: 0.78rem;
    line-height: 1.55;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
}

.ieel-evaluation-option:hover {
    border-color: rgba(120, 9, 9, 0.35);
    background: #fffafa;
}

.ieel-evaluation-option:has(input:checked) {
    border-color: #780909;
    background: #fff5f5;
}

.ieel-evaluation-option input {
    width: 17px;
    height: 17px;
    margin-top: 2px;
    accent-color: #780909;
}

.ieel-evaluation-submit-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    padding-top: 20px;
    border-top: 1px solid #e2e3e5;
}

.ieel-evaluation-submit-area p {
    max-width: 680px;
    margin: 0;
    color: #6f7074;
    font-size: 0.75rem;
    line-height: 1.65;
}

.ieel-evaluation-submit {
    flex: 0 0 auto;
    margin-top: 0;
}

@media (max-width: 900px) {
    .ieel-evaluation-intro dl,
    .ieel-evaluation-result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 620px) {
    .ieel-evaluation-header,
    .ieel-evaluation-submit-area,
    .ieel-evaluation-test-head {
        align-items: stretch;
        flex-direction: column;
    }

    .ieel-evaluation-back,
    .ieel-evaluation-submit {
        width: 100%;
    }

    .ieel-evaluation-intro dl,
    .ieel-evaluation-result-grid {
        grid-template-columns: 1fr;
    }

    .ieel-evaluation-form,
    .ieel-evaluation-test-head {
        padding: 18px;
    }

    .ieel-evaluation-instructions {
        margin: 18px 18px 0;
    }

    .ieel-evaluation-question {
        padding: 16px;
    }
}

/* =========================================================
   EVALUACIÓN · ESTADOS APROBADO / NO APROBADO
   ========================================================= */

.ieel-module-evaluation-status.is-approved {
    background: #287a50;
    box-shadow: 0 5px 12px rgba(40, 122, 80, 0.2);
}

.ieel-module-evaluation-status.is-failed,
.ieel-module-evaluation-status.is-pending {
    background: #9d1018;
    box-shadow: 0 5px 12px rgba(125, 8, 15, 0.18);
}

.ieel-evaluation-result.is-approved {
    border: 1px solid rgba(40, 122, 80, 0.28);
    border-top: 5px solid #287a50;
    background: linear-gradient(
        180deg,
        #f0faf4 0%,
        #ffffff 58%
    );
}

.ieel-evaluation-result.is-not-approved {
    border: 1px solid rgba(143, 35, 35, 0.25);
    border-top: 5px solid #8f2323;
    background: linear-gradient(
        180deg,
        #fff4f4 0%,
        #ffffff 58%
    );
}

/* =========================================================
   ESTADO BLOQUEADO DE LA EVALUACIÓN
   ========================================================= */

.ieel-module-evaluation-status.is-locked {
    display: flex;
    min-width: 190px;
    min-height: 48px;
    padding: 7px 11px;
    align-items: center;
    gap: 9px;
    border-radius: 7px;
    background: #e9e6e3;
    color: #7a746d;
    cursor: not-allowed;
    text-decoration: none;
    box-shadow: none;
    opacity: 0.95;
}

.ieel-module-evaluation-status.is-locked .ieel-module-evaluation-status-icon {
    background: rgba(122, 116, 109, 0.12);
    color: #7a746d;
}

.ieel-module-evaluation-status.is-locked
.ieel-module-evaluation-status-copy strong,
.ieel-module-evaluation-status.is-locked
.ieel-module-evaluation-status-copy small {
    color: #7a746d;
}

/* =========================================================
   EVALUACIÓN DEL MÓDULO · ESTADO NO DISPONIBLE
   ========================================================= */

.ieel-module-evaluation-status.is-locked {
    background: #e7e5e4;
    color: #77716c;
    cursor: not-allowed;
    box-shadow: none;
    pointer-events: none;
}

.ieel-module-evaluation-status.is-locked:hover {
    color: #77716c;
    filter: none;
    transform: none;
}

.ieel-module-evaluation-status.is-locked
.ieel-module-evaluation-status-icon {
    background: rgba(90, 84, 79, 0.1);
    color: #77716c;
}

.ieel-module-evaluation-status.is-locked
.ieel-module-evaluation-status-copy strong,
.ieel-module-evaluation-status.is-locked
.ieel-module-evaluation-status-copy small {
    color: #77716c;
}
/* =========================================================
   HOTFIX IEEL - revisión de preguntas incorrectas
   ========================================================= */

.ieel-evaluation-review-card {
    border: 1px solid #ead9d9;
    border-radius: 16px;
    background: #fff;
    padding: 18px;
    margin-bottom: 18px;
}

.ieel-evaluation-review-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #d9b3b3;
    background: #fff7f7;
    color: #8b1e1e;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.ieel-evaluation-review-question {
    margin: 0 0 12px;
    font-size: 20px;
    font-weight: 700;
    color: #3d0f14;
}

.ieel-evaluation-review-block {
    margin-bottom: 14px;
}

.ieel-evaluation-review-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 700;
    color: #6b3131;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.ieel-evaluation-review-text {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #3f3f46;
}

.ieel-evaluation-review-answer.is-wrong {
    border-left: 4px solid #c62828;
    background: #fff8f8;
    padding: 10px 12px;
    border-radius: 10px;
}

.ieel-evaluation-review-answer.is-correct {
    border-left: 4px solid #2e7d32;
    background: #f8fff8;
    padding: 10px 12px;
    border-radius: 10px;
}

.ieel-evaluation-contact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 18px;
}

.ieel-evaluation-contact-actions .btn-whatsapp,
.ieel-evaluation-contact-actions .btn-email {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.2s ease;
}

.ieel-evaluation-contact-actions .btn-whatsapp {
    background: #7a1111;
    color: #ffffff;
    border: 1px solid #7a1111;
}

.ieel-evaluation-contact-actions .btn-whatsapp:hover {
    background: #5f0d0d;
    border-color: #5f0d0d;
    color: #ffffff;
}

.ieel-evaluation-contact-actions .btn-email {
    background: #ffffff;
    color: #7a1111;
    border: 1px solid #7a1111;
}

.ieel-evaluation-contact-actions .btn-email:hover {
    background: #fff5f5;
    color: #5f0d0d;
    border-color: #5f0d0d;
}

/* =========================================================
   IEEL · APERTURA TEMPORAL DE MÓDULOS Y CLASE EN VIVO
   - El módulo se habilita cinco días antes de su inicio.
   - Los módulos futuros conservan la tarjeta, pero no el acceso.
   - Las clases en vivo se muestran en un bloque verde destacado.
========================================================= */

.ieel-aula-live-board {
    display: grid;
    gap: 16px;
    margin: 20px 0 28px;
}

.ieel-aula-live-banner,
.ieel-module-live-hero {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 22px;
    overflow: hidden;
    padding: 26px 28px;
    color: #ffffff;
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(255, 255, 255, 0.17),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            #103f2b 0%,
            #1f6d48 52%,
            #2f8f5e 100%
        );
    border: 1px solid rgba(18, 92, 59, 0.42);
    border-radius: 15px;
    box-shadow:
        0 22px 50px rgba(19, 82, 54, 0.24),
        inset 0 1px 0 rgba(255, 255, 255, 0.13);
}

.ieel-aula-live-banner::after,
.ieel-module-live-hero::after {
    content: "";
    position: absolute;
    right: -70px;
    bottom: -105px;
    width: 260px;
    height: 260px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 50%;
    pointer-events: none;
}

.ieel-aula-live-signal,
.ieel-module-live-hero-signal {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.11);
    box-shadow: inset 0 0 0 8px rgba(255, 255, 255, 0.035);
}

.ieel-aula-live-signal span,
.ieel-module-live-hero-signal span {
    width: 17px;
    height: 17px;
    border-radius: 50%;
    background: #d8ffdf;
    box-shadow:
        0 0 0 8px rgba(216, 255, 223, 0.13),
        0 0 24px rgba(216, 255, 223, 0.72);
    animation: ieelLivePulse 1.55s ease-in-out infinite;
}

@keyframes ieelLivePulse {
    0%,
    100% {
        transform: scale(0.86);
        opacity: 0.72;
    }

    50% {
        transform: scale(1);
        opacity: 1;
    }
}

.ieel-aula-live-copy,
.ieel-module-live-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.ieel-aula-live-label,
.ieel-module-live-hero-copy > span {
    display: block;
    margin-bottom: 7px;
    color: #d9ffe5;
    font-size: 11px;
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ieel-aula-live-copy h2,
.ieel-module-live-hero-copy h2 {
    margin: 0;
    color: #ffffff;
    font-size: clamp(22px, 2.3vw, 34px);
    line-height: 1.18;
    font-weight: 700;
    letter-spacing: -0.6px;
}

.ieel-aula-live-copy p,
.ieel-module-live-hero-copy p {
    margin: 9px 0 0;
    color: rgba(255, 255, 255, 0.82);
    font-size: 12px;
    line-height: 1.65;
}

.ieel-aula-live-action,
.ieel-module-live-hero-action {
    position: relative;
    z-index: 1;
    min-height: 50px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    padding: 0 20px;
    color: #174b34;
    background: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.88);
    border-radius: 9px;
    box-shadow: 0 12px 26px rgba(7, 46, 29, 0.22);
    font-size: 11px;
    font-weight: 700;
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.ieel-aula-live-action:hover,
.ieel-aula-live-action:focus-visible,
.ieel-module-live-hero-action:hover,
.ieel-module-live-hero-action:focus-visible {
    color: #103f2b;
    background: #f2fff6;
    transform: translateY(-2px);
    box-shadow: 0 16px 31px rgba(7, 46, 29, 0.28);
    outline: none;
}

.ieel-aula-live-action svg,
.ieel-module-live-hero-action svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-aula-module-card.is-live {
    border-color: rgba(40, 122, 80, 0.48);
    box-shadow: 0 20px 44px rgba(31, 109, 72, 0.17);
}

.ieel-aula-module-card.is-live .ieel-aula-module-accent {
    background: linear-gradient(90deg, #103f2b, #2f8f5e, #94d9b4);
}

.ieel-aula-access-pill.is-live {
    color: #1d6443;
    background: linear-gradient(135deg, #effaf3, #dff3e7);
    border-color: rgba(40, 122, 80, 0.30);
}

.ieel-aula-access-pill.is-live i {
    background: #2f9a64;
    box-shadow: 0 0 0 4px rgba(47, 154, 100, 0.12);
    animation: ieelLivePulse 1.55s ease-in-out infinite;
}

.ieel-aula-module-card.is-upcoming {
    background:
        linear-gradient(155deg, #fafafa 0%, #f5f5f6 64%, #ececee 145%);
    border-color: #d9dadd;
    box-shadow: 0 13px 30px rgba(52, 53, 56, 0.08);
}

.ieel-aula-module-card.is-upcoming:hover {
    transform: none;
    border-color: #d0d1d4;
    box-shadow: 0 13px 30px rgba(52, 53, 56, 0.08);
}

.ieel-aula-module-card.is-upcoming .ieel-aula-module-accent {
    background: linear-gradient(90deg, #7b7c80, #a6a7aa, #d0d1d3);
}

.ieel-aula-access-pill.is-upcoming {
    color: #737479;
    background: linear-gradient(135deg, #f4f4f5, #e7e7e9);
    border-color: #d6d7d9;
}

.ieel-aula-access-pill.is-upcoming i {
    background: #9b9ca0;
    box-shadow: 0 0 0 3px rgba(110, 111, 115, 0.10);
}

.ieel-aula-module-availability {
    margin: -3px 0 12px;
    color: #737479;
    font-size: 9px;
    line-height: 1.55;
    text-align: center;
}

.ieel-aula-module-availability strong {
    color: #55565a;
}

.ieel-aula-module-button.is-disabled {
    color: #898a8e !important;
    background: linear-gradient(135deg, #ececee, #dcdde0) !important;
    border-color: #d0d1d4 !important;
    box-shadow: none !important;
    cursor: not-allowed;
    pointer-events: none;
    transform: none !important;
}

.ieel-aula-module-button.is-disabled svg {
    width: 18px;
    height: 18px;
}

.ieel-module-live-hero {
    margin-bottom: 22px;
}

@media (max-width: 900px) {
    .ieel-aula-live-banner,
    .ieel-module-live-hero {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .ieel-aula-live-action,
    .ieel-module-live-hero-action {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 620px) {
    .ieel-aula-live-banner,
    .ieel-module-live-hero {
        grid-template-columns: 1fr;
        gap: 15px;
        padding: 22px 19px;
        text-align: center;
    }

    .ieel-aula-live-signal,
    .ieel-module-live-hero-signal {
        width: 54px;
        height: 54px;
        margin: 0 auto;
    }

    .ieel-aula-live-copy h2,
    .ieel-module-live-hero-copy h2 {
        font-size: 23px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ieel-aula-live-signal span,
    .ieel-module-live-hero-signal span,
    .ieel-aula-access-pill.is-live i {
        animation: none;
    }
}



/* =========================================================
   IEEL · AJUSTE VISUAL CLASE EN VIVO V2
========================================================= */

.ieel-aula-live-copy h2,
.ieel-module-live-hero-copy h2 {
    font-size: clamp(27px, 3vw, 42px);
    line-height: 1;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ieel-aula-live-copy p,
.ieel-module-live-hero-copy p {
    display: grid;
    gap: 5px;
}

.ieel-aula-live-module-title {
    display: block;
    color: #ffffff;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 700;
}

.ieel-aula-live-session-detail {
    display: block;
    color: rgba(255, 255, 255, 0.78);
    font-size: 11px;
    line-height: 1.55;
    font-weight: 500;
}

.ieel-aula-live-action,
.ieel-module-live-hero-action {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0d472d, #17643f) !important;
    border-color: rgba(255, 255, 255, 0.42) !important;
    box-shadow: 0 12px 28px rgba(5, 43, 26, 0.30) !important;
}

.ieel-aula-live-action span,
.ieel-module-live-hero-action span {
    color: #ffffff !important;
}

.ieel-aula-live-action:hover,
.ieel-aula-live-action:focus-visible,
.ieel-module-live-hero-action:hover,
.ieel-module-live-hero-action:focus-visible {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0a3824, #105536) !important;
}

.ieel-aula-module-button.is-live {
    color: #ffffff !important;
    background: linear-gradient(135deg, #125438, #24845a) !important;
    border-color: #1c7650 !important;
    box-shadow: 0 13px 28px rgba(24, 108, 72, 0.25) !important;
}

.ieel-aula-module-button.is-live span {
    color: #ffffff !important;
}

.ieel-aula-module-button.is-live svg {
    stroke: #ffffff !important;
}

.ieel-aula-module-button.is-live:hover,
.ieel-aula-module-button.is-live:focus-visible {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0d432c, #1c704b) !important;
    border-color: #155d3e !important;
}

.ieel-aula-module-button.is-disabled {
    color: #4f5054 !important;
    background: linear-gradient(135deg, #ececee, #d7d8db) !important;
    border-color: #c2c4c8 !important;
    opacity: 1 !important;
}

.ieel-aula-module-button.is-disabled span {
    color: #4f5054 !important;
    font-weight: 700;
}

.ieel-aula-module-button.is-disabled svg {
    stroke: #626368 !important;
}

/* =========================================================
   IEEL · AJUSTE VISUAL V3 · CLASE EN VIVO LUXURY
========================================================= */

.ieel-aula-live-board {
    display: grid;
    gap: 14px;
    margin: 18px 0 24px;
}

.ieel-aula-live-spotlight {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #f1f8f4 0%, #ecf6f0 100%);
    border: 1px solid #c9dece;
    border-left: 4px solid #2f8d58;
    border-radius: 12px;
    box-shadow: 0 14px 30px rgba(28, 86, 58, 0.08);
}

.ieel-aula-live-spotlight-copy {
    min-width: 0;
}

.ieel-aula-live-spotlight-kicker {
    display: block;
    margin-bottom: 6px;
    color: #276647;
    font-size: 11px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
}

.ieel-aula-live-spotlight-copy strong {
    display: block;
    color: #1e3f2f;
    font-size: 18px;
    line-height: 1.3;
    font-weight: 800;
}

.ieel-aula-live-spotlight-copy p {
    margin: 5px 0 0;
    color: #567165;
    font-size: 13px;
    line-height: 1.55;
    font-weight: 500;
}

.ieel-aula-live-spotlight-action {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #14603f, #0d432c);
    border: 1px solid #15573a;
    border-radius: 10px;
    box-shadow: 0 12px 24px rgba(18, 74, 49, 0.16);
    text-decoration: none;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.ieel-aula-live-spotlight-action:hover,
.ieel-aula-live-spotlight-action:focus-visible {
    color: #ffffff;
    background: linear-gradient(135deg, #1c754d, #135337);
    transform: translateY(-1px);
    outline: none;
}

.ieel-aula-live-spotlight-action svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-module-live.is-live {
    background: linear-gradient(135deg, #f1f8f4 0%, #edf7f1 100%);
    border-color: #c5dccb;
    border-left-color: #2f8d58;
    box-shadow: 0 14px 28px rgba(23, 83, 55, 0.08);
}

.ieel-module-live.is-live > div > span {
    color: #276647;
    font-size: 10px;
    letter-spacing: 1.1px;
}

.ieel-module-live.is-live > div > strong {
    color: #1e3f2f;
    font-size: 18px;
    line-height: 1.35;
}

.ieel-module-live.is-live > div > small {
    display: block;
    margin-top: 6px;
    color: #5b7369;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 600;
}

.ieel-module-live.is-live .ieel-module-action {
    color: #ffffff;
    background: linear-gradient(135deg, #14603f, #0d432c);
    border-color: #15573a;
    box-shadow: 0 12px 24px rgba(18, 74, 49, 0.16);
}

.ieel-module-live.is-live .ieel-module-action:hover,
.ieel-module-live.is-live .ieel-module-action:focus-visible {
    color: #ffffff;
    background: linear-gradient(135deg, #1c754d, #135337);
}

.ieel-module-live-spotlight {
    margin-bottom: 20px;
}

.ieel-aula-module-button.is-disabled {
    color: #303338 !important;
    background: linear-gradient(135deg, #ececee, #d4d6da) !important;
    border-color: #babdc3 !important;
}

.ieel-aula-module-button.is-disabled span {
    color: #303338 !important;
    font-weight: 800;
}

.ieel-aula-module-button.is-disabled svg {
    stroke: #3f4349 !important;
}

@media (max-width: 780px) {
    .ieel-aula-live-spotlight,
    .ieel-module-live-spotlight {
        grid-template-columns: 1fr;
    }

    .ieel-aula-live-spotlight-action,
    .ieel-module-live-spotlight .ieel-module-action {
        width: 100%;
    }
}

/* HOTFIX: botón de clase en vivo con texto blanco */
.ieel-aula-live-spotlight-action,
.ieel-aula-live-spotlight-action:visited,
.ieel-aula-live-spotlight-action:hover,
.ieel-aula-live-spotlight-action:focus {
    color: #ffffff !important;
}

.ieel-aula-live-spotlight-action span,
.ieel-aula-live-spotlight-action svg,
.ieel-aula-live-spotlight-action svg path {
    color: #ffffff !important;
    stroke: #ffffff !important;
    fill: none !important;
}

/* =========================================================
   IEEL · CHAT PRIVADO DE SOPORTE · VISOR DEL ALUMNO
========================================================= */
.ieel-zoom-presentation { position: relative; }
.ieel-chat-widget { position: absolute; right: 18px; bottom: 18px; z-index: 85; font-family: "Montserrat", Arial, sans-serif; }
.ieel-chat-launcher { min-height: 48px; display: inline-flex; align-items: center; gap: 10px; padding: 0 16px; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; color: #fff; background: linear-gradient(135deg,#591919,#3f1010); box-shadow: 0 16px 34px rgba(20,4,4,.28); cursor: pointer; font-size: 12px; font-weight: 700; }
.ieel-chat-launcher svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ieel-chat-launcher:hover { transform: translateY(-1px); background: linear-gradient(135deg,#6f1c1c,#470e0e); }
.ieel-chat-badge { min-width: 21px; height: 21px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 999px; color: #591919; background: #fff; font-size: 10px; }
.ieel-chat-panel { position: absolute; right: 0; bottom: 60px; width: min(370px, calc(100vw - 40px)); height: min(540px, calc(100vh - 120px)); display: grid; grid-template-rows: auto auto minmax(0,1fr) auto; overflow: hidden; border: 1px solid rgba(89,25,25,.18); border-radius: 16px; color: #24201d; background: #fff; box-shadow: 0 28px 70px rgba(20,5,5,.32); }
.ieel-chat-panel[hidden] { display: none !important; }
.ieel-chat-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 17px 18px; color: #fff; background: linear-gradient(135deg,#591919,#3f1010); }
.ieel-chat-head > div { display: grid; gap: 3px; }
.ieel-chat-head span { color: #d8c7a0; font-size: 9px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.ieel-chat-head strong { font-size: 16px; }
.ieel-chat-head small { display: flex; align-items: center; gap: 6px; color: rgba(255,255,255,.76); font-size: 10px; }
.ieel-chat-head small i { width: 7px; height: 7px; border-radius: 50%; background: #5ed391; box-shadow: 0 0 0 4px rgba(94,211,145,.12); }
.ieel-chat-head button { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; color: #fff; background: rgba(255,255,255,.08); cursor: pointer; font-size: 22px; }
.ieel-chat-notice { padding: 10px 15px; border-bottom: 1px solid #eee7df; color: #766d65; background: #fbfaf7; font-size: 10px; line-height: 1.5; }
.ieel-chat-notice.is-error { color: #8f2323; background: #fff4f2; }
.ieel-chat-messages { min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; padding: 16px; background: linear-gradient(180deg,#faf9f7,#f4f1ed); }
.ieel-chat-message { max-width: 84%; padding: 10px 12px; border-radius: 13px; box-shadow: 0 6px 16px rgba(54,38,26,.06); }
.ieel-chat-message span { display: block; margin-bottom: 4px; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.ieel-chat-message p { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 12px; line-height: 1.55; }
.ieel-chat-message small { display: block; margin-top: 5px; opacity: .65; font-size: 9px; text-align: right; }
.ieel-chat-message.is-own { align-self: flex-end; color: #fff; background: linear-gradient(135deg,#6b1a1a,#4a0d0d); border-bottom-right-radius: 4px; }
.ieel-chat-message.is-support { align-self: flex-start; color: #302b27; background: #fff; border: 1px solid #e8e0d7; border-bottom-left-radius: 4px; }
.ieel-chat-message.is-support span { color: #591919; }
.ieel-chat-loading,.ieel-chat-empty,.ieel-chat-error { margin: auto; padding: 18px; color: #766d65; text-align: center; font-size: 11px; line-height: 1.6; }
.ieel-chat-empty strong { display: block; color: #591919; font-size: 15px; }
.ieel-chat-empty p { margin: 7px 0 0; }
.ieel-chat-error { color: #8f2323; }
.ieel-chat-form { display: grid; grid-template-columns: minmax(0,1fr) 44px; gap: 9px; padding: 12px; border-top: 1px solid #e8e0d7; background: #fff; }
.ieel-chat-form textarea { width: 100%; min-height: 44px; max-height: 100px; resize: none; border: 1px solid #ddd4ca; border-radius: 11px; padding: 10px 12px; color: #24201d; background: #fff; outline: none; font-size: 12px; line-height: 1.4; }
.ieel-chat-form textarea:focus { border-color: #b4935a; box-shadow: 0 0 0 3px rgba(180,147,90,.12); }
.ieel-chat-form button { width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; color: #fff; background: linear-gradient(135deg,#591919,#3f1010); cursor: pointer; }
.ieel-chat-form button:disabled { opacity: .55; cursor: wait; }
.ieel-chat-form button svg { width: 19px; height: 19px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:fullscreen .ieel-chat-widget, .ieel-zoom-presentation:fullscreen .ieel-chat-widget { position: fixed; right: 22px; bottom: 22px; }
@media (max-width: 620px) {
    .ieel-chat-widget { right: 10px; bottom: 10px; }
    .ieel-chat-launcher span { display: none; }
    .ieel-chat-launcher { width: 50px; height: 50px; padding: 0; justify-content: center; }
    .ieel-chat-panel { position: fixed; inset: 10px; width: auto; height: auto; max-height: none; bottom: 10px; }
}

/* =========================================================
   IEEL · CHAT ARRASTRABLE EN EL VISOR
========================================================= */

@media (min-width: 701px) {
    .ieel-chat-widget {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 12px;
        max-width: calc(100% - 20px);
        max-height: calc(100% - 20px);
    }

    .ieel-chat-widget.is-drag-positioned {
        right: auto !important;
        bottom: auto !important;
    }

    .ieel-chat-widget.is-dragging,
    .ieel-chat-widget.is-dragging * {
        cursor: grabbing !important;
        user-select: none !important;
    }

    .ieel-chat-launcher {
        cursor: grab;
        touch-action: none;
        user-select: none;
    }

    .ieel-chat-panel {
        position: static;
        flex: 0 0 auto;
    }

    .ieel-chat-head {
        cursor: grab;
        touch-action: none;
        user-select: none;
    }

    .ieel-chat-head button,
    .ieel-chat-form,
    .ieel-chat-form * {
        cursor: auto;
        user-select: auto;
    }

    .ieel-chat-head button {
        cursor: pointer;
    }

    :fullscreen .ieel-chat-widget.is-drag-positioned,
    .ieel-zoom-presentation:fullscreen .ieel-chat-widget.is-drag-positioned,
    .ieel-zoom-presentation:-webkit-full-screen .ieel-chat-widget.is-drag-positioned {
        right: auto !important;
        bottom: auto !important;
    }
}

/* =========================================================
   IEEL · CHAT V2 · LIBRE EN TODA LA VENTANA DEL VISOR
========================================================= */

.ieel-chat-widget {
    position: fixed !important;
    right: 22px;
    bottom: 22px;
    left: auto;
    top: auto;
    z-index: 10050;
    max-width: calc(100vw - 20px) !important;
    max-height: calc(100vh - 20px) !important;
}

@media (min-width: 701px) {
    .ieel-chat-widget {
        display: flex;
        flex-direction: column-reverse;
        align-items: flex-end;
        gap: 12px;
    }

    .ieel-chat-widget.is-drag-positioned {
        position: fixed !important;
        right: auto !important;
        bottom: auto !important;
    }

    .ieel-chat-widget.is-dragging,
    .ieel-chat-widget.is-dragging * {
        cursor: grabbing !important;
        user-select: none !important;
    }

    .ieel-chat-launcher,
    .ieel-chat-head {
        cursor: grab;
        touch-action: none;
        user-select: none;
    }

    .ieel-chat-panel {
        position: static !important;
        width: min(370px, calc(100vw - 40px));
        height: min(540px, calc(100vh - 80px));
        flex: 0 0 auto;
    }

    .ieel-chat-head button,
    .ieel-chat-form,
    .ieel-chat-form * {
        cursor: auto;
        user-select: auto;
        touch-action: auto;
    }

    .ieel-chat-head button {
        cursor: pointer;
    }
}

@media (max-width: 700px) {
    .ieel-chat-widget {
        position: fixed !important;
        right: 10px;
        bottom: 10px;
        left: auto !important;
        top: auto !important;
    }

    .ieel-chat-widget.is-open {
        inset: 10px !important;
        max-width: none !important;
        max-height: none !important;
    }

    .ieel-chat-widget.is-open .ieel-chat-launcher {
        display: none;
    }

    .ieel-chat-panel {
        position: fixed !important;
        inset: 10px !important;
        width: auto !important;
        height: auto !important;
        max-height: none !important;
    }
}


/* =========================================================
   IEEL · MODAL DE INSTRUCCIONES DEL AULA
   Una sola pantalla en escritorio
========================================================= */

body.ieel-politicas-open {
    overflow: hidden;
}

.ieel-politicas-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: grid;
    place-items: center;
    padding: 16px;
    background:
        radial-gradient(
            circle at 18% 10%,
            rgba(180, 147, 90, 0.18),
            transparent 30%
        ),
        rgba(29, 7, 7, 0.78);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ieel-politicas-modal {
    width: min(1080px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(180, 147, 90, 0.48);
    border-top: 5px solid var(--ieel-aula-rojo-800);
    border-radius: 8px;
    box-shadow: 0 32px 90px rgba(31, 5, 5, 0.42);
}

.ieel-politicas-header {
    padding: 22px 28px 17px;
    border-bottom: 1px solid #e5e1dc;
    background:
        linear-gradient(
            135deg,
            rgba(89, 5, 5, 0.035),
            rgba(180, 147, 90, 0.06)
        ),
        #ffffff;
}

.ieel-politicas-kicker {
    display: block;
    margin-bottom: 7px;
    color: var(--ieel-aula-rojo-700);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.ieel-politicas-header h1 {
    margin: 0;
    color: var(--ieel-aula-gris-950);
    font-size: clamp(23px, 2.3vw, 32px);
    line-height: 1.15;
    font-weight: 700;
    letter-spacing: -0.5px;
}

.ieel-politicas-header p {
    max-width: 960px;
    margin: 9px 0 0;
    color: var(--ieel-aula-gris-700);
    font-size: 12.5px;
    line-height: 1.5;
}

.ieel-politicas-header p strong {
    color: var(--ieel-aula-rojo-900);
}

.ieel-politicas-grid {
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 15px 18px;
    overflow: auto;
    background: #f5f5f6;
}

.ieel-politicas-card {
    min-width: 0;
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 15px 16px;
    background: #ffffff;
    border: 1px solid #dedfe1;
    border-left: 3px solid var(--ieel-oro);
    border-radius: 6px;
    box-shadow: 0 8px 22px rgba(45, 45, 48, 0.05);
}

.ieel-politicas-number {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background:
        linear-gradient(
            145deg,
            var(--ieel-aula-rojo-700),
            var(--ieel-aula-rojo-950)
        );
    border-radius: 5px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.7px;
    box-shadow: 0 8px 16px rgba(89, 5, 5, 0.18);
}

.ieel-politicas-card h2 {
    margin: 1px 0 7px;
    color: var(--ieel-aula-rojo-900);
    font-size: 14px;
    line-height: 1.25;
    font-weight: 700;
}

.ieel-politicas-card ul {
    display: grid;
    gap: 5px;
    margin: 0;
    padding-left: 17px;
    color: var(--ieel-aula-gris-800);
    font-size: 11.5px;
    line-height: 1.42;
}

.ieel-politicas-card li::marker {
    color: var(--ieel-oro-oscuro);
}

.ieel-politicas-card strong {
    color: var(--ieel-aula-gris-950);
    font-weight: 700;
}

.ieel-politicas-footer {
    min-height: 72px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 18px;
    padding: 13px 20px;
    border-top: 1px solid #e2ddd6;
    background: #ffffff;
}

.ieel-politicas-footer > div {
    display: grid;
    gap: 3px;
}

.ieel-politicas-footer > div strong {
    color: var(--ieel-aula-rojo-900);
    font-size: 12.5px;
}

.ieel-politicas-footer > div span {
    color: var(--ieel-aula-gris-600);
    font-size: 10.5px;
}

.ieel-politicas-error {
    max-width: 330px;
    margin: 0;
    color: #8f2323;
    font-size: 11px;
    line-height: 1.35;
    text-align: right;
}

.ieel-politicas-footer form {
    margin: 0;
}

.ieel-politicas-accept {
    min-width: 170px;
    min-height: 47px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 25px;
    border: 0;
    border-radius: 4px;
    color: #ffffff;
    background:
        linear-gradient(
            135deg,
            var(--ieel-aula-rojo-700),
            var(--ieel-aula-rojo-950)
        );
    box-shadow: 0 13px 26px rgba(89, 5, 5, 0.24);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.9px;
    text-transform: uppercase;
    cursor: pointer;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.ieel-politicas-accept:hover,
.ieel-politicas-accept:focus-visible {
    transform: translateY(-1px);
    background:
        linear-gradient(
            135deg,
            var(--ieel-aula-rojo-800),
            var(--ieel-aula-rojo-950)
        );
    box-shadow: 0 16px 30px rgba(89, 5, 5, 0.3);
    outline: 3px solid rgba(180, 147, 90, 0.34);
    outline-offset: 2px;
}

.ieel-politicas-accept:disabled {
    opacity: 0.48;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

@media (max-width: 760px) {
    .ieel-politicas-overlay {
        align-items: start;
        padding: 10px;
    }

    .ieel-politicas-modal {
        width: 100%;
        max-height: calc(100dvh - 20px);
    }

    .ieel-politicas-header {
        padding: 19px 18px 14px;
    }

    .ieel-politicas-header h1 {
        font-size: 23px;
    }

    .ieel-politicas-grid {
        grid-template-columns: 1fr;
        padding: 12px;
    }

    .ieel-politicas-card {
        grid-template-columns: 36px minmax(0, 1fr);
        gap: 10px;
        padding: 13px;
    }

    .ieel-politicas-number {
        width: 34px;
        height: 34px;
    }

    .ieel-politicas-footer {
        grid-template-columns: 1fr;
        gap: 10px;
        padding: 12px;
    }

    .ieel-politicas-footer > div {
        display: none;
    }

    .ieel-politicas-error {
        max-width: none;
        text-align: left;
    }

    .ieel-politicas-accept {
        width: 100%;
    }
}

@media (max-height: 690px) and (min-width: 761px) {
    .ieel-politicas-header {
        padding-top: 15px;
        padding-bottom: 12px;
    }

    .ieel-politicas-header h1 {
        font-size: 23px;
    }

    .ieel-politicas-header p {
        margin-top: 6px;
        font-size: 11.5px;
    }

    .ieel-politicas-grid {
        gap: 9px;
        padding: 10px 13px;
    }

    .ieel-politicas-card {
        padding: 11px 12px;
    }

    .ieel-politicas-card ul {
        font-size: 10.5px;
        line-height: 1.34;
    }

    .ieel-politicas-footer {
        min-height: 60px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
}

/* =========================================================
   IEEL · AJUSTE DE LEGIBILIDAD DEL MODAL
   Texto más grande manteniendo una sola pantalla en escritorio
========================================================= */

.ieel-politicas-header p {
    font-size: 14px;
    line-height: 1.55;
}

.ieel-politicas-card h2 {
    font-size: 16px;
    line-height: 1.3;
}

.ieel-politicas-card ul {
    gap: 6px;
    font-size: 13px;
    line-height: 1.48;
}

.ieel-politicas-footer > div strong {
    font-size: 14px;
}

.ieel-politicas-footer > div span {
    font-size: 12px;
}

.ieel-politicas-accept {
    font-size: 13px;
}

@media (max-height: 760px) and (min-width: 761px) {
    .ieel-politicas-header {
        padding-top: 16px;
        padding-bottom: 13px;
    }

    .ieel-politicas-grid {
        gap: 10px;
        padding: 11px 14px;
    }

    .ieel-politicas-card {
        padding: 12px 13px;
    }

    .ieel-politicas-card ul {
        font-size: 12px;
        line-height: 1.4;
    }
}

@media (max-width: 760px) {
    .ieel-politicas-header p {
        font-size: 13.5px;
    }

    .ieel-politicas-card h2 {
        font-size: 15px;
    }

    .ieel-politicas-card ul {
        font-size: 13px;
        line-height: 1.5;
    }
}


/* =========================================================
   IEEL · ENCUESTA DE SATISFACCIÓN DEL MÓDULO
   Pegar al FINAL de /cursos/aula/style.css
========================================================= */

/* Enlace de encuesta junto a la evaluación del módulo */

.ieel-module-overview {
    grid-template-columns:
        minmax(0, 1fr)
        minmax(520px, 700px);
}

.ieel-module-overview-actions {
    flex-wrap: wrap;
}

.ieel-module-survey-status {
    min-width: 205px;
    min-height: 48px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 11px;
    color: #ffffff;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: 7px;
    transition:
        transform 0.18s ease,
        filter 0.18s ease,
        box-shadow 0.18s ease;
}

.ieel-module-survey-status.is-pending {
    background: linear-gradient(135deg, #8c681f, #64450f);
    border-color: rgba(80, 54, 8, 0.36);
    box-shadow: 0 5px 12px rgba(100, 69, 15, 0.2);
}

.ieel-module-survey-status.is-saved {
    background: linear-gradient(135deg, #2f8056, #205f3e);
    border-color: rgba(31, 91, 59, 0.4);
    box-shadow: 0 5px 12px rgba(31, 95, 62, 0.2);
}

.ieel-module-survey-status:hover,
.ieel-module-survey-status:focus-visible {
    color: #ffffff;
    filter: brightness(1.05);
    transform: translateY(-1px);
}

.ieel-module-survey-status:focus-visible {
    outline: 3px solid rgba(140, 104, 31, 0.24);
    outline-offset: 3px;
}

.ieel-module-survey-status-icon {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 6px;
}

.ieel-module-survey-status-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-module-survey-status-copy {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.ieel-module-survey-status-copy strong {
    color: #ffffff;
    font-size: 0.67rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.025em;
    text-transform: uppercase;
}

.ieel-module-survey-status-copy small {
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.62rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.07em;
}

/* Encabezado de la página */

.ieel-survey-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    padding: 8px 0 22px;
    border-bottom: 1px solid rgba(33, 39, 53, 0.14);
}

.ieel-survey-heading > div {
    min-width: 0;
}

.ieel-survey-heading-kicker {
    display: block;
    margin-bottom: 9px;
    color: #830b12;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

.ieel-survey-heading h1 {
    margin: 0;
    color: #1e293b;
    font-size: clamp(1.6rem, 3vw, 2.35rem);
    font-weight: 700;
    line-height: 1.16;
    letter-spacing: -0.035em;
}

.ieel-survey-heading p {
    max-width: 800px;
    margin: 11px 0 0;
    color: #686b73;
    font-size: 0.84rem;
    line-height: 1.7;
}

.ieel-survey-back {
    min-height: 45px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 15px;
    color: #76090f;
    background: #ffffff;
    border: 1px solid rgba(131, 11, 18, 0.24);
    border-radius: 8px;
    box-shadow: 0 8px 19px rgba(43, 43, 46, 0.07);
    font-size: 0.73rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
    transition:
        transform 0.18s ease,
        background 0.18s ease,
        border-color 0.18s ease;
}

.ieel-survey-back:hover,
.ieel-survey-back:focus-visible {
    color: #76090f;
    background: #fffafa;
    border-color: rgba(131, 11, 18, 0.42);
    transform: translateY(-1px);
    outline: none;
}

.ieel-survey-back svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Datos del módulo */

.ieel-survey-module-card {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin-bottom: 20px;
    padding: 18px 20px;
    background: linear-gradient(145deg, #ffffff, #f2f2f3);
    border: 1px solid #dedfe1;
    border-left: 4px solid #780909;
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(43, 43, 46, 0.08);
}

.ieel-survey-module-card > div:not(.ieel-survey-save-state) {
    min-width: 0;
    display: grid;
    gap: 5px;
}

.ieel-survey-module-card > div + div:not(.ieel-survey-save-state) {
    padding-left: 18px;
    border-left: 1px solid #dedfe1;
}

.ieel-survey-module-card span {
    color: #77787d;
    font-size: 0.64rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.ieel-survey-module-card strong {
    overflow: hidden;
    color: #303138;
    font-size: 0.82rem;
    font-weight: 700;
    line-height: 1.4;
    text-overflow: ellipsis;
}

.ieel-survey-save-state {
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 11px;
    border-radius: 999px;
    white-space: nowrap;
}

.ieel-survey-save-state i {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
    border-radius: 50%;
}

.ieel-survey-save-state span {
    font-size: 0.62rem;
    letter-spacing: 0.04em;
}

.ieel-survey-save-state.is-pending {
    color: #75520e;
    background: #fff9e9;
    border: 1px solid rgba(140, 104, 31, 0.25);
}

.ieel-survey-save-state.is-pending i {
    background: #a87a20;
    box-shadow: 0 0 0 4px rgba(168, 122, 32, 0.11);
}

.ieel-survey-save-state.is-saved {
    color: #225f41;
    background: #eff9f3;
    border: 1px solid rgba(40, 122, 80, 0.23);
}

.ieel-survey-save-state.is-saved i {
    background: #2f8056;
    box-shadow: 0 0 0 4px rgba(47, 128, 86, 0.11);
}

/* Formulario */

.ieel-survey-form {
    display: grid;
    gap: 20px;
}

.ieel-survey-section {
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #dedfe1;
    border-radius: 12px;
    box-shadow: 0 15px 34px rgba(43, 43, 46, 0.09);
}

.ieel-survey-section-head {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 21px 22px 18px;
    background: linear-gradient(145deg, #ffffff, #f3f3f4);
    border-bottom: 1px solid #e0e0e2;
}

.ieel-survey-section-head > span {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    color: #ffffff;
    background: linear-gradient(145deg, #920e0e, #430303);
    border-radius: 8px;
    box-shadow: 0 7px 15px rgba(67, 3, 3, 0.2);
    font-size: 0.72rem;
    font-weight: 700;
}

.ieel-survey-section-head > div {
    min-width: 0;
}

.ieel-survey-section-head h2 {
    margin: 0;
    color: #292d36;
    font-size: 1.08rem;
    font-weight: 700;
    line-height: 1.3;
}

.ieel-survey-section-head p {
    margin: 6px 0 0;
    color: #6b6d74;
    font-size: 0.78rem;
    line-height: 1.6;
}

/* Tabla de calificación */

.ieel-survey-rating-wrap {
    padding: 20px 22px 24px;
    overflow-x: auto;
}

.ieel-survey-rating-table {
    min-width: 720px;
    overflow: hidden;
    border: 1px solid #e0e1e3;
    border-radius: 9px;
}

.ieel-survey-rating-row {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(320px, 2fr) repeat(3, minmax(120px, 0.72fr));
    align-items: stretch;
    margin: 0;
    padding: 0;
    border: 0;
    border-bottom: 1px solid #e7e7e9;
}

.ieel-survey-rating-row:last-child {
    border-bottom: 0;
}

.ieel-survey-rating-row.is-head {
    color: #ffffff;
    background: linear-gradient(135deg, #590505, #780909);
}

.ieel-survey-rating-row.is-head > div {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: 10px 12px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
}

.ieel-survey-rating-row.is-head > div:first-child {
    justify-content: flex-start;
    text-align: left;
}

.ieel-survey-rating-aspect,
.ieel-survey-rating-row > label {
    min-width: 0;
    min-height: 64px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 12px 14px;
}

.ieel-survey-rating-aspect {
    color: #34363d;
    background: #ffffff;
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.45;
}

.ieel-survey-rating-row > label {
    justify-content: center;
    gap: 7px;
    background: #fafafa;
    border-left: 1px solid #e7e7e9;
    cursor: pointer;
}

.ieel-survey-rating-row > label:last-child {
    border-right: 0;
}

.ieel-survey-rating-row > * {
    width: 100%;
}

.ieel-survey-rating-row > label:hover {
    background: #fff8f8;
}

.ieel-survey-rating-row > label span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.ieel-survey-rating-row input[type="radio"],
.ieel-survey-choice input[type="radio"] {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    margin: 0;
    accent-color: #830b12;
    cursor: pointer;
}

/* Preguntas adicionales */

.ieel-survey-question {
    margin: 0;
    padding: 22px;
    border: 0;
    border-bottom: 1px solid #e7e7e9;
}

.ieel-survey-question legend {
    display: block;
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
    color: #2f3138;
    font-size: 0.84rem;
    font-weight: 700;
    line-height: 1.5;
}

.ieel-survey-options-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.ieel-survey-options-grid.is-two {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 620px;
}

.ieel-survey-choice {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 13px;
    color: #34363d;
    background: #f8f8f9;
    border: 1px solid #dedfe1;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.35;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        transform 0.18s ease;
}

.ieel-survey-choice:hover,
.ieel-survey-choice:focus-within {
    background: #fffafa;
    border-color: rgba(131, 11, 18, 0.34);
    transform: translateY(-1px);
}

.ieel-survey-choice > span {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.ieel-survey-choice strong {
    color: #34363d;
    font-size: 0.75rem;
}

.ieel-survey-choice small {
    color: #777980;
    font-size: 0.63rem;
    font-weight: 500;
    line-height: 1.4;
}

.ieel-survey-other {
    max-width: 620px;
    display: grid;
    gap: 7px;
    margin-top: 13px;
}

.ieel-survey-other[hidden] {
    display: none;
}

.ieel-survey-other label {
    color: #4f5158;
    font-size: 0.7rem;
    font-weight: 700;
}

.ieel-survey-other input,
.ieel-survey-text-question textarea {
    width: 100%;
    border: 1px solid #d8d9dc;
    border-radius: 8px;
    background: #ffffff;
    color: #2f3138;
    outline: none;
    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.ieel-survey-other input {
    min-height: 46px;
    padding: 10px 12px;
    font-size: 0.77rem;
}

.ieel-survey-other input:focus,
.ieel-survey-text-question textarea:focus {
    background: #fffdfd;
    border-color: #9b171e;
    box-shadow: 0 0 0 4px rgba(131, 11, 18, 0.09);
}

.ieel-survey-text-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 17px;
    padding: 22px;
}

.ieel-survey-text-question {
    min-width: 0;
    display: grid;
    gap: 9px;
}

.ieel-survey-text-question.is-wide {
    grid-column: 1 / -1;
}

.ieel-survey-text-question > span {
    color: #33353c;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.5;
}

.ieel-survey-text-question textarea {
    min-height: 128px;
    padding: 12px 13px;
    resize: vertical;
    font-family: inherit;
    font-size: 0.78rem;
    line-height: 1.65;
}

.ieel-survey-recommend {
    border-top: 1px solid #e7e7e9;
    border-bottom: 0;
}

/* Botón guardar */

.ieel-survey-submit-area {
    min-height: 76px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 15px 18px;
    background: linear-gradient(145deg, #ffffff, #f1f1f2);
    border: 1px solid #dedfe1;
    border-radius: 11px;
    box-shadow: 0 12px 28px rgba(43, 43, 46, 0.08);
}

.ieel-survey-submit-area > div {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.ieel-survey-submit-area strong {
    color: #34363d;
    font-size: 0.76rem;
    line-height: 1.35;
}

.ieel-survey-submit-area span {
    color: #777980;
    font-size: 0.68rem;
    line-height: 1.4;
}

.ieel-survey-submit {
    min-width: 190px;
    min-height: 48px;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 9px 18px;
    color: #ffffff;
    background: linear-gradient(135deg, #920e0e, #430303);
    border: 1px solid rgba(67, 3, 3, 0.48);
    border-radius: 8px;
    box-shadow: 0 11px 23px rgba(71, 3, 3, 0.22);
    cursor: pointer;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.2;
    transition:
        transform 0.18s ease,
        box-shadow 0.18s ease,
        background 0.18s ease;
}

.ieel-survey-submit:hover,
.ieel-survey-submit:focus-visible {
    background: linear-gradient(135deg, #ac1515, #590505);
    box-shadow: 0 15px 29px rgba(71, 3, 3, 0.29);
    transform: translateY(-1px);
    outline: 3px solid rgba(180, 147, 90, 0.34);
    outline-offset: 2px;
}

.ieel-survey-submit svg {
    width: 19px;
    height: 19px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-survey-submit span {
    color: #ffffff;
    font-size: 0.75rem;
}

.ieel-survey-error-list {
    margin: 8px 0 0;
    padding-left: 18px;
}

.ieel-survey-error-list li + li {
    margin-top: 4px;
}

/* Responsive */

@media (max-width: 1280px) {
    .ieel-module-overview {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .ieel-module-overview-side {
        max-width: 760px;
    }

    .ieel-module-overview-actions {
        justify-content: flex-start;
    }
}

@media (max-width: 900px) {
    .ieel-survey-module-card {
        grid-template-columns: 1fr 1fr;
    }

    .ieel-survey-save-state {
        width: max-content;
        grid-column: 1 / -1;
    }

    .ieel-survey-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .ieel-survey-heading {
        align-items: stretch;
        flex-direction: column;
        gap: 16px;
    }

    .ieel-survey-back {
        width: 100%;
    }

    .ieel-survey-module-card {
        grid-template-columns: 1fr;
    }

    .ieel-survey-module-card > div + div:not(.ieel-survey-save-state) {
        padding-top: 13px;
        padding-left: 0;
        border-top: 1px solid #dedfe1;
        border-left: 0;
    }

    .ieel-survey-save-state {
        grid-column: auto;
    }

    .ieel-survey-section-head,
    .ieel-survey-rating-wrap,
    .ieel-survey-question,
    .ieel-survey-text-grid {
        padding-right: 16px;
        padding-left: 16px;
    }

    .ieel-survey-text-grid {
        grid-template-columns: 1fr;
    }

    .ieel-survey-text-question.is-wide {
        grid-column: auto;
    }

    .ieel-survey-submit-area {
        align-items: stretch;
        flex-direction: column;
    }

    .ieel-survey-submit {
        width: 100%;
    }
}

@media (max-width: 620px) {
    .ieel-module-survey-status,
    .ieel-module-evaluation-status,
    .ieel-module-overview-back {
        width: 100%;
    }
}

@media (max-width: 520px) {
    .ieel-survey-options-grid,
    .ieel-survey-options-grid.is-two {
        grid-template-columns: 1fr;
    }

    .ieel-survey-section-head {
        gap: 11px;
    }

    .ieel-survey-section-head > span {
        width: 34px;
        height: 34px;
        flex-basis: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ieel-module-survey-status,
    .ieel-survey-back,
    .ieel-survey-choice,
    .ieel-survey-submit {
        transition: none !important;
    }
}
/* =========================================================
   IEEL · CORRECCIÓN DEL BOTÓN DE ENCUESTA DESACTIVADA
   Hace que tenga el mismo estado visual que la evaluación
   del módulo cuando se encuentra "NO DISPONIBLE".
   Pegar al FINAL de /cursos/aula/style.css
========================================================= */

.ieel-module-survey-status.is-locked {
    min-height: 48px;
    padding: 7px 11px;
    align-items: center;
    gap: 9px;
    border: 0;
    border-radius: 7px;
    background: #e7e5e4;
    color: #77716c;
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.95;
    pointer-events: none;
    text-decoration: none;
    filter: none;
    transform: none;
}

.ieel-module-survey-status.is-locked:hover,
.ieel-module-survey-status.is-locked:focus,
.ieel-module-survey-status.is-locked:focus-visible {
    background: #e7e5e4;
    color: #77716c;
    box-shadow: none;
    filter: none;
    transform: none;
    outline: none;
}

.ieel-module-survey-status.is-locked
.ieel-module-survey-status-icon {
    background: rgba(90, 84, 79, 0.10);
    color: #77716c;
}

.ieel-module-survey-status.is-locked
.ieel-module-survey-status-copy strong,
.ieel-module-survey-status.is-locked
.ieel-module-survey-status-copy small {
    color: #77716c;
}
/* Botón Revisar certificado */
.btn-revisar-certificado,
.btn-revisar-certificado:link,
.btn-revisar-certificado:visited,
.btn-revisar-certificado:hover,
.btn-revisar-certificado:active,
.btn-revisar-certificado:focus {
    color: #ffffff !important;
}
/* =========================================================
   P1-07A · IEEL · ENDURECIMIENTO RESPONSIVE DEL AULA
   Objetivo: funcionamiento estable desde 360 px sin cortes,
   superposiciones ni controles inaccesibles.
   ========================================================= */

/* Permitir que todos los contenedores principales reduzcan su ancho real. */
.ieel-aula-main,
.ieel-aula-content,
.ieel-page-intro-main,
.ieel-aula-section-head,
.ieel-aula-section-head > div,
.ieel-certificates-section,
.ieel-certificates-grid,
.ieel-certificate-card,
.ieel-module-section,
.ieel-module-tabs,
.ieel-module-panels,
.ieel-module-panel,
.ieel-module-overview,
.ieel-module-overview-main,
.ieel-module-overview-side,
.ieel-module-overview-actions,
.ieel-module-recordings,
.ieel-module-recording {
    min-width: 0;
    max-width: 100%;
}

/* Textos largos: nunca deben forzar ancho horizontal. */
.ieel-aula-user-data,
.ieel-aula-user-data strong,
.ieel-aula-programa-nombre,
.ieel-page-intro-feature h2,
.ieel-page-intro-description,
.ieel-aula-section-head h2,
.ieel-aula-section-head p,
.ieel-aula-module-card h3,
.ieel-aula-module-description,
.ieel-certificate-card h3,
.ieel-certificate-program,
.ieel-certificate-data dd,
.ieel-module-panel-header h3,
.ieel-module-panel-header p,
.ieel-module-overview-module strong,
.ieel-module-overview-facts strong,
.ieel-module-recording-head strong,
.ieel-aula-live-spotlight-copy strong,
.ieel-aula-live-spotlight-copy p {
    overflow-wrap: anywhere;
    word-break: normal;
}

/* Evita que imágenes, vídeos o elementos embebidos excedan su contenedor. */
body.ieel-aula-home img,
body.ieel-aula-home video,
body.ieel-aula-home iframe {
    max-width: 100%;
}

/* El carrusel de clases conserva desplazamiento horizontal accesible. */
.ieel-module-tablist-shell,
.ieel-module-tablist {
    max-width: 100%;
}

.ieel-module-tablist {
    scrollbar-gutter: stable;
}

@media (max-width: 980px) {
    .ieel-aula-sidebar {
        width: min(320px, 92vw);
        max-width: 100vw;
    }
}

@media (max-width: 760px) {
    .ieel-aula-topbar {
        width: 100%;
        padding: 12px 14px;
        gap: 12px;
    }

    .ieel-aula-topbar-left,
    .ieel-aula-topbar-academic,
    .ieel-aula-user-card {
        min-width: 0;
        max-width: 100%;
    }

    .ieel-aula-content {
        width: 100%;
        padding: 16px 14px 20px;
    }

    .ieel-page-intro-feature {
        padding-left: 12px;
    }

    .ieel-page-intro-feature h2 {
        font-size: clamp(19px, 6vw, 24px);
        line-height: 1.32;
    }

    .ieel-page-intro-description {
        font-size: 13px;
        line-height: 1.65;
    }

    .ieel-aula-live-spotlight {
        min-width: 0;
        padding: 16px;
    }

    .ieel-aula-live-spotlight-action {
        white-space: normal;
        text-align: center;
    }

    .ieel-module-panel,
    .ieel-certificate-card {
        max-width: 100%;
    }

    .ieel-recording-tabs {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (max-width: 520px) {
    .ieel-aula-topbar-academic {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }

    .ieel-aula-topbar-status,
    .ieel-aula-topbar-modules {
        min-width: 0;
    }

    .ieel-aula-topbar-status small,
    .ieel-aula-topbar-modules small {
        font-size: 9px;
        letter-spacing: 0.45px;
    }

    .ieel-aula-user-card {
        gap: 10px;
    }

    .ieel-aula-user-data {
        min-width: 0;
        flex: 1 1 auto;
    }

    .ieel-aula-user-data strong {
        max-width: 100%;
        font-size: 12px;
    }

    .ieel-aula-logout-form {
        flex: 0 0 auto;
    }

    .ieel-aula-content {
        padding-right: 12px;
        padding-left: 12px;
    }

    .ieel-aula-module-card,
    .ieel-certificate-card,
    .ieel-module-panel,
    .ieel-module-recording,
    .ieel-certificates-empty,
    .ieel-module-empty {
        padding-right: 14px;
        padding-left: 14px;
    }

    .ieel-certificate-data > div {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .ieel-certificate-button,
    .ieel-module-action,
    .ieel-module-evaluation-status,
    .ieel-module-survey-status,
    .ieel-module-overview-back {
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }

    .ieel-certificate-button,
    .ieel-module-action {
        white-space: normal;
        text-align: left;
    }

    .ieel-module-evaluation-status-copy,
    .ieel-module-survey-status-copy {
        min-width: 0;
    }

    .ieel-module-evaluation-status-copy strong,
    .ieel-module-evaluation-status-copy small,
    .ieel-module-survey-status-copy strong,
    .ieel-module-survey-status-copy small {
        overflow-wrap: anywhere;
    }

    .ieel-module-tablist {
        grid-auto-columns: minmax(138px, 82vw);
    }

    .ieel-module-resource-count,
    .ieel-certificate-status {
        max-width: 100%;
        white-space: normal;
    }

    .ieel-recording-tab {
        min-width: 92px;
        flex: 1 0 auto;
    }
}

@media (max-width: 380px) {
    .ieel-aula-sidebar {
        width: 94vw;
        padding-right: 17px;
        padding-left: 17px;
    }

    .ieel-aula-topbar {
        padding-right: 11px;
        padding-left: 11px;
    }

    .ieel-aula-topbar-academic {
        gap: 8px;
    }

    .ieel-aula-topbar-modules {
        padding-left: 10px;
    }

    .ieel-aula-content {
        padding-right: 10px;
        padding-left: 10px;
    }

    .ieel-page-intro-feature h2 {
        font-size: 19px;
    }

    .ieel-aula-section-head h2 {
        font-size: 20px;
    }

    .ieel-module-tablist {
        grid-auto-columns: minmax(136px, 84vw);
    }
}


/* =========================================================
   P1-08A · CONTROL DE CACHÉ Y ACTUALIZACIÓN DE ESTADOS
========================================================= */

.ieel-aula-refresh-state {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.ieel-aula-refresh-state > span {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-align: right;
}

.ieel-aula-refresh-state small {
    color: #77787d;
    font-size: 9px;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: .6px;
    text-transform: uppercase;
}

.ieel-aula-refresh-state strong {
    color: #44454a;
    font-size: 11px;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
}

.ieel-aula-refresh-button {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 11px;
    color: #691010;
    background: #ffffff;
    border: 1px solid rgba(89, 25, 25, .20);
    border-radius: 8px;
    cursor: pointer;
    font: inherit;
    font-size: 10.5px;
    line-height: 1;
    font-weight: 700;
    transition:
        background-color .18s ease,
        border-color .18s ease,
        color .18s ease,
        opacity .18s ease;
}

.ieel-aula-refresh-button:hover,
.ieel-aula-refresh-button:focus-visible {
    color: #ffffff;
    background: #591919;
    border-color: #591919;
    outline: none;
}

.ieel-aula-refresh-button svg {
    width: 15px;
    height: 15px;
    flex: 0 0 15px;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.ieel-aula-refresh-button.is-loading svg {
    animation: ieel-refresh-spin .7s linear infinite;
}

.ieel-aula-refresh-button:disabled {
    opacity: .62;
    cursor: wait;
}

@keyframes ieel-refresh-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1180px) {
    .ieel-aula-user-card {
        flex-wrap: wrap;
        row-gap: 9px;
    }
}

@media (max-width: 760px) {
    .ieel-aula-refresh-state {
        margin-left: auto;
    }
}

@media (max-width: 520px) {
    .ieel-aula-refresh-state > span {
        display: none;
    }

    .ieel-aula-refresh-button {
        width: 40px;
        height: 40px;
        min-height: 40px;
        padding: 0;
    }

    .ieel-aula-refresh-button > span {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ieel-aula-refresh-button.is-loading svg {
        animation: none;
    }
}


/* =========================================================
   P1-09 · NAVEGACIÓN GUIADA POR SIGUIENTE PASO
   ========================================================= */

.ieel-next-step {
    width: 100%;
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    margin: 18px 0;
    padding: 18px 20px;
    border: 1px solid #ded8d1;
    border-left: 4px solid #9a8f84;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 12px 30px rgba(43, 43, 46, 0.06);
}

.ieel-next-step.is-waiting {
    border-left-color: #9a8f84;
    background: linear-gradient(135deg, #ffffff 0%, #faf8f5 100%);
}

.ieel-next-step.is-action {
    border-left-color: #b4935a;
    background: linear-gradient(135deg, #ffffff 0%, #fdf9f1 100%);
}

.ieel-next-step.is-ready {
    border-left-color: #2f6f4e;
    background: linear-gradient(135deg, #ffffff 0%, #f2faf5 100%);
}

.ieel-next-step-copy {
    min-width: 0;
}

.ieel-next-step-copy > span {
    display: block;
    margin-bottom: 5px;
    color: #8b6a36;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .9px;
    text-transform: uppercase;
}

.ieel-next-step-copy > strong {
    display: block;
    color: #3f1010;
    font-size: 16px;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.ieel-next-step-copy > p {
    margin: 6px 0 0;
    color: #6f6760;
    font-size: 12.5px;
    line-height: 1.65;
    overflow-wrap: anywhere;
}

.ieel-next-step.is-ready .ieel-next-step-copy > span,
.ieel-next-step.is-ready .ieel-next-step-copy > strong {
    color: #2f6f4e;
}

.ieel-next-step-action {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 17px;
    border: 1px solid #591919;
    border-radius: 8px;
    /* Evita que estilos globales de enlaces oscurezcan el texto del botón. */
    color: #ffffff !important;
    background: linear-gradient(135deg, #6f1c1c, #470e0e);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.3;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}

.ieel-next-step.is-ready .ieel-next-step-action {
    border-color: #2f6f4e;
    background: linear-gradient(135deg, #3b7c5a, #285f45);
}

.ieel-next-step-action:hover,
.ieel-next-step-action:focus-visible {
    color: #ffffff !important;
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(89, 25, 25, 0.16);
    outline: none;
}

.ieel-next-step.is-ready .ieel-next-step-action:hover,
.ieel-next-step.is-ready .ieel-next-step-action:focus-visible {
    box-shadow: 0 10px 22px rgba(47, 111, 78, 0.18);
}

@media (max-width: 640px) {
    .ieel-next-step {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 16px;
    }

    .ieel-next-step-action {
        width: 100%;
        white-space: normal;
    }
}