/* Conecta Formación — lo mínimo sobre Vuexy. NO se modifica nada del template:
   solo logos según tema, el panel del login y los mensajes flash de CakePHP. */

/* Logos: el oscuro en tema claro, el blanco en tema oscuro */
.logo-oscuro { display: none; }
[data-bs-theme="dark"] .logo-claro { display: none; }
[data-bs-theme="dark"] .logo-oscuro { display: inline; }
/* Marca en el menú: mismo tamaño que en Conecta v4 (isotipo 60px, logotipo 110px) */
.menu .app-brand.demo { height: 76px; padding-top: .35rem; }
.app-brand-logo.demo img { height: 34px; width: auto; }
.app-brand-text.demo img { width: 110px; height: auto; }
.layout-menu-collapsed:not(.layout-menu-hover) .app-brand-logo.demo img { height: 34px; }

/* Panel izquierdo del login (patrón "auth cover" de Vuexy): a toda altura y ancho de su columna, sobre el
   fondo auth-cover-bg del template (color del body, claro u oscuro), con la marca "Conecta Formación",
   un titular, dos tarjetas flotantes con los pilares y un bloque inferior en el color primario recortado
   con la silueta de la máscara del template (bg-shape-image) y texto blanco, como las páginas "cover" de Vuexy. */
.acceso-panel { position: relative; overflow: hidden; display: flex; flex-direction: column; background-color: var(--bs-body-bg); }
/* Formas de fondo: solo dos, un círculo relleno y un anillo en el color primario */
.acceso-panel::before {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
        radial-gradient(circle at 12% 14%, color-mix(in srgb, var(--bs-primary) 22%, transparent) 0 150px, transparent 151px),
        radial-gradient(circle at 90% 26%, transparent 0 118px, color-mix(in srgb, var(--bs-primary) 28%, transparent) 119px 134px, transparent 135px);
}
/* Bloque inferior: color primario con la silueta de la máscara del template (platform-bg, 35% de alto) */
.acceso-panel::after {
    content: ""; position: absolute; inset: auto 0 0 0; height: 38%; z-index: 0; pointer-events: none;
    background: linear-gradient(100deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 82%, #fff) 100%);
    /* misma silueta que bg-shape-image del template (esquina redondeada y borde superior inclinado), en SVG para que sirva de máscara opaca */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 339' preserveAspectRatio='none'%3E%3Cpath d='M0 170C30 60 120 0 230 0L960 40V339H0Z' fill='%23000'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 960 339' preserveAspectRatio='none'%3E%3Cpath d='M0 170C30 60 120 0 230 0L960 40V339H0Z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.acceso-panel__contenido { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; width: 100%; max-width: 760px; margin: 0 auto; padding: 5.5rem 2rem 1.5rem; }
.acceso-panel__titulo { color: var(--bs-heading-color); font-weight: 500; font-size: 2rem; line-height: 1.25; margin: 2rem auto .75rem; max-width: 22ch; }
.acceso-panel__texto { color: var(--bs-body-color); font-size: 1.0625rem; max-width: 46ch; margin: 0 auto; }
/* Tarjetas flotantes sobre el bloque primario: dos en fila, con desfase como las mini-cards de Vuexy */
.acceso-pilares { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin: 2.5rem auto 0; padding: 0 2rem; }
.acceso-pilar { flex: 0 0 auto; width: 272px; margin: 0; box-shadow: var(--bs-box-shadow-lg, 0 .375rem 1rem rgba(47,43,61,.2)); border-left: 4px solid var(--bs-primary); }
/* La tarjeta primaria lleva el primario aclarado para que el borde se distinga sobre el bloque del mismo color */
.acceso-pilar--1 { border-left-color: color-mix(in srgb, var(--bs-primary) 45%, #fff); }
.acceso-pilar--2 { border-left-color: var(--bs-info); }
.acceso-pilar .card-body { padding: 1.125rem 1.25rem; }
.acceso-pilar h6 { color: var(--bs-heading-color); font-size: .9375rem; white-space: nowrap; }
.acceso-pilar small { display: block; line-height: 1.35; }
.acceso-pilar--1 { transform: translateY(-.5rem) rotate(-1deg); }
.acceso-pilar--2 { transform: translateY(.75rem) rotate(1deg); }
/* Pie sobre el bloque primario: texto blanco */
.acceso-panel__pie { position: relative; z-index: 1; color: #fff; text-align: center; font-size: .9375rem; margin: 0 auto; padding: 4rem 2rem 2.75rem; max-width: 46ch; opacity: .92; }
@media (max-width: 1399.98px) {
    .acceso-panel__contenido { max-width: 640px; }
    .acceso-panel__titulo { font-size: 1.75rem; }
    .acceso-pilar { width: 232px; }
    .acceso-pilar .card-body { padding: 1rem; gap: .75rem !important; }
}
/* Marca "Conecta Formación": logo + palabra en la misma tipografía (Public Sans), peso liviano */
.acceso-marca { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; color: var(--bs-heading-color); }
.acceso-marca img { height: 2.75rem; width: auto; vertical-align: middle; }
.acceso-marca__formacion { font-weight: 300; letter-spacing: -.01em; line-height: 1; font-size: 2.1rem; color: inherit; transform: translateY(.1rem); }
.acceso-marca--chica img { height: 2.1rem; }
.acceso-marca--chica .acceso-marca__formacion { font-size: 1.6rem; }
.acceso-marca--grande { gap: .75rem; }
.acceso-marca--grande img { height: 3.75rem; }
.acceso-marca--grande .acceso-marca__formacion { font-size: 2.9rem; }

/* Mensajes flash de CakePHP como alertas Bootstrap */
.message { padding: .75rem 1rem; border-radius: var(--bs-border-radius); margin-bottom: 1rem; font-size: .9375rem; cursor: pointer; }
.message.error { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); border: 1px solid var(--bs-danger-border-subtle); }
.message.success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); border: 1px solid var(--bs-success-border-subtle); }
.message.info, .message.warning { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); border: 1px solid var(--bs-info-border-subtle); }
.message.hidden { display: none; }

/* Ficha de curso: indicadores en fila; uno sobre otro cuando el ancho es <= 1280px */
.ficha-curso__stats { display: flex; gap: .75rem; }
.ficha-curso__stats > div { min-width: 190px; }
@media (max-width: 1280px) {
    .ficha-curso__stats { flex-direction: column; }
}
@media (max-width: 991.98px) {
    .ficha-curso__stats { flex-direction: row; flex-wrap: wrap; }
}

/* ============================================================
   MODAL BASE "modal-conecta" (imita la de detalle de usuario de Conecta v4).
   Uso: <div class="modal fade modal-conecta"> ... Cabecera:
     <div class="modal-header">
       <div class="modal-header__texto"><small>Subtítulo</small><h5 class="modal-title">Título</h5></div>
       <button class="btn-close" data-bs-dismiss="modal"></button>
     </div>
   ============================================================ */
.modal-conecta .modal-content { border: 0; overflow: hidden; }
.modal-conecta .modal-header {
    position: relative;
    align-items: center;
    background: linear-gradient(135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 75%, #4f7dd1) 55%, #4f7dd1 100%);
    border-bottom: 0;
    padding: 1.25rem 1.5rem 1.1rem;
}
.modal-conecta .modal-header::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
    background: linear-gradient(90deg, #ff5b5c 0%, #fbb03b 25%, #34c759 50%, #00c2ff 75%, #7b61ff 100%);
}
.modal-conecta .modal-header__texto { display: flex; flex-direction: column; min-width: 0; position: relative; z-index: 1; }
.modal-conecta .modal-header__texto small { color: rgba(255,255,255,.85); }
.modal-conecta .modal-title { color: #fff; }
.modal-conecta .modal-header .btn-close {
    position: relative; inset: auto; top: 0; right: 0; z-index: 1; margin: 0 0 0 auto; padding: 0;
    width: 2rem; height: 2rem; flex-shrink: 0; opacity: 1; align-self: center;
    background-color: #fff; border-radius: .4rem;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M3 3l10 10M13 3L3 13'/%3e%3c/svg%3e");
    background-size: .8rem; background-position: center; background-repeat: no-repeat;
    transform: none !important; transition: none; box-shadow: none;
}
.modal-conecta .modal-header .btn-close:hover,
.modal-conecta .modal-header .btn-close:focus { opacity: 1; background-color: #fff; box-shadow: none; }
.modal-conecta .modal-body { background-color: #f5f5f9; }
[data-bs-theme="dark"] .modal-conecta .modal-body { background-color: var(--bs-body-bg); }
.modal-conecta .modal-body .tarjeta-modal { background: var(--bs-paper-bg, #fff); border-radius: .5rem; padding: 1.25rem; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
[data-bs-theme="dark"] .modal-conecta .modal-body .tarjeta-modal { background: var(--bs-card-bg, #2f3349); }
.modal-conecta .modal-footer { border-top: 1px solid var(--bs-border-color); padding: 1rem 1.5rem; margin: 0; align-items: center; justify-content: flex-end; gap: .5rem; }
.modal-conecta .modal-footer > * { margin: 0; }

/* Anula el posicionamiento y el icono propio de Vuexy para el cierre de modal-conecta */
.modal.modal-conecta .modal-header .btn-close,
.modal.modal-conecta .modal-header .btn-close:hover,
.modal.modal-conecta .modal-header .btn-close:focus,
.modal.modal-conecta .modal-header .btn-close:active {
    position: relative; inset: auto; transform: none; transition: none;
    margin: 0 0 0 auto; padding: 0; width: 2rem; height: 2rem;
    background-color: #fff; box-shadow: none; opacity: 1;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round'%3e%3cpath d='M3 3l10 10M13 3L3 13'/%3e%3c/svg%3e");
    background-size: .8rem; background-position: center; background-repeat: no-repeat;
}
.modal.modal-conecta .modal-header .btn-close::before { content: none; }

/* Bloques de consulta (foro) */
.consulta-bloque { transition: box-shadow .15s, border-color .15s; }
.consulta-bloque:hover { border-color: var(--bs-primary) !important; box-shadow: 0 2px 10px rgba(0,0,0,.06); }

/* Banner de bienvenida del inicio: grid de dos columnas (texto | foto). El texto tiene su propia
   columna con ancho mínimo garantizado, así nunca se monta sobre la foto; la foto se recorta con
   object-fit y un degradado del color primario funde la unión. */
.bienvenida {
    --bienvenida-bg: color-mix(in srgb, var(--bs-primary) 12%, #fff);
    --bienvenida-bg-2: color-mix(in srgb, var(--bs-primary) 16%, #fff);
    position: relative; display: grid; grid-template-columns: minmax(320px, 44%) minmax(0, 1fr); overflow: hidden;
    height: 270px; background: linear-gradient(135deg, var(--bienvenida-bg-2) 0%, var(--bienvenida-bg) 100%);
    border-bottom: 1px solid var(--bs-border-color);
}
.bienvenida__texto {
    position: relative; z-index: 2; align-self: center; padding: 1.75rem 1.5rem 1.75rem 2rem; min-width: 0;
}
/* Detalles de forma: tres círculos grandes y suaves (relleno, anillo y acento), sin tramas */
.bienvenida::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        /* círculo grande relleno, abajo a la izquierda */
        radial-gradient(circle at 6% 112%, color-mix(in srgb, var(--bs-primary) 14%, transparent) 0 190px, transparent 191px),
        /* anillo fino, arriba a la derecha de la columna de texto */
        radial-gradient(circle at 40% -18%, transparent 0 118px, color-mix(in srgb, var(--bs-primary) 22%, transparent) 119px 134px, transparent 135px),
        /* acento pequeño relleno, bajo el botón */
        radial-gradient(circle at 46% 86%, color-mix(in srgb, var(--bs-primary) 18%, transparent) 0 26px, transparent 27px),
        /* medio círculo grande que asoma por arriba, muy tenue */
        radial-gradient(circle at 24% -70%, color-mix(in srgb, var(--bs-primary) 7%, transparent) 0 240px, transparent 241px);
    -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 50%);
    mask-image: linear-gradient(90deg, #000 0%, #000 36%, transparent 50%);
}
/* Contraste del texto: títulos y párrafo en color de encabezado, no gris */
.bienvenida__kicker { color: var(--bs-primary); }
.bienvenida__texto p { color: var(--bs-heading-color) !important; opacity: .9; font-weight: 500; }
.bienvenida__kicker {
    display: inline-flex; align-items: center; gap: .5rem; margin-bottom: .75rem;
    font-size: .6875rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
}
.bienvenida__kicker::before { content: ""; width: 1.5rem; height: 2px; border-radius: 1px; background: var(--bs-primary); }
.bienvenida__texto h3 { font-size: 1.875rem; line-height: 1.2; }
.bienvenida__texto p { font-size: 1rem; max-width: 30ch; }
.bienvenida__foto { position: relative; min-width: 0; overflow: hidden; }
.bienvenida__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 30%; }
.bienvenida__foto::before {
    content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background: linear-gradient(90deg, var(--bienvenida-bg) 0%, color-mix(in srgb, var(--bienvenida-bg) 70%, transparent) 14%, color-mix(in srgb, var(--bienvenida-bg) 25%, transparent) 30%, transparent 48%);
}
[data-bs-theme="dark"] .bienvenida {
    --bienvenida-bg: color-mix(in srgb, var(--bs-primary) 20%, var(--bs-paper-bg));
    --bienvenida-bg-2: color-mix(in srgb, var(--bs-primary) 28%, var(--bs-paper-bg));
}
@media (max-width: 991.98px) {
    .bienvenida { grid-template-columns: minmax(300px, 50%) minmax(0, 1fr); height: 240px; }
    .bienvenida__texto h3 { font-size: 1.625rem; }
}
@media (max-width: 575.98px) {
    /* Móvil: la foto pasa detrás del texto y el degradado la cubre casi completa */
    .bienvenida { display: block; height: auto; min-height: 200px; }
    .bienvenida__foto { position: absolute; inset: 0; z-index: 0; }
    .bienvenida__foto img { object-position: 70% 30%; }
    .bienvenida__foto::before { background: linear-gradient(90deg, var(--bienvenida-bg) 0%, var(--bienvenida-bg) 45%, color-mix(in srgb, var(--bienvenida-bg) 75%, transparent) 70%, color-mix(in srgb, var(--bienvenida-bg) 30%, transparent) 100%); }
    .bienvenida__texto { min-height: 200px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 1.5rem; }
    .bienvenida__texto h3 { font-size: 1.5rem; }
    .bienvenida__texto p { font-size: .9375rem; }
}

/* KPIs bajo el banner: cuatro celdas de igual ancho, avatar y texto alineados */
.bienvenida-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.bienvenida-kpi { display: flex; align-items: center; gap: .875rem; min-width: 0; }
.bienvenida-kpi .avatar { flex-shrink: 0; }
.bienvenida-kpi__dato { min-width: 0; line-height: 1.25; }
.bienvenida-kpi__dato h5 { font-size: 1.25rem; line-height: 1.2; }
.bienvenida-kpi__dato small { display: block; margin-top: .125rem; line-height: 1.25; }
@media (max-width: 767.98px) {
    .bienvenida-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 1rem; }
}

/* Gestores: botón maletín del header y panel desplegable (misma idea que Conecta v4) */
.gestores-btn { box-shadow: 0 3px 10px color-mix(in srgb, var(--bs-primary) 35%, transparent); }
.gestores-panel { min-width: 470px; max-height: 80vh; overflow-y: auto; }
.gestores-label { font-weight: 600; font-size: .8rem; color: var(--bs-secondary-color); text-transform: uppercase; letter-spacing: .4px; padding: 0 .5rem; }
.gestores-carousel { position: relative; }
.gestores-carousel--scroll { padding: 0 26px; }
.gestores-grid { display: flex; gap: .25rem; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; }
.gestores-grid::-webkit-scrollbar { display: none; }
.gestores-item { flex: 0 0 104px; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 6px 10px; border-radius: 12px; text-decoration: none; color: var(--bs-body-color); font-size: .76rem; font-weight: 500; line-height: 1.2; text-align: center; transition: background-color .15s; }
.gestores-item:hover { background: var(--bs-gray-100, #f4f3fa); color: var(--bs-primary); }
[data-bs-theme="dark"] .gestores-item:hover { background: rgba(255,255,255,.06); }
.gestores-item .avatar { width: 38px; height: 38px; }
.gestores-item__nombre { display: block; max-width: 100%; }
.gestores-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: 0; border-radius: 50%; background: var(--bs-paper-bg); color: var(--bs-primary); box-shadow: 0 1px 4px rgba(0,0,0,.15); display: none; align-items: center; justify-content: center; z-index: 2; font-size: 20px; line-height: 1; cursor: pointer; animation: gestoresParpadeo 1.4s ease-in-out infinite; }
.gestores-arrow--prev { left: -2px; } .gestores-arrow--next { right: -2px; }
.gestores-arrow--fin { animation: none; opacity: .3; cursor: default; }
@keyframes gestoresParpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.gestor-card { transition: transform .15s, box-shadow .15s; }
.gestor-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
@media (max-width: 575.98px) { .gestores-panel { min-width: 92vw; } }

/* Perfil: lista de datos (como rp-about-list de v4) */
.perfil-datos li { display: flex; align-items: flex-start; gap: .85rem; padding: .6rem 0; border-bottom: 1px solid var(--bs-border-color); }
.perfil-datos li:last-child { border-bottom: 0; }
.perfil-datos li > i { color: var(--bs-primary); font-size: 1.15rem; margin-top: .15rem; flex-shrink: 0; }
.perfil-datos li > div { display: flex; flex-direction: column; min-width: 0; }
.perfil-datos li span { font-size: .78rem; color: var(--bs-secondary-color); }
.perfil-datos li strong { font-weight: 500; overflow-wrap: anywhere; }

/* Tarjetas del listado de cursos */
.curso-card { transition: transform .15s, box-shadow .15s; }
.curso-card:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }

/* Cursos recomendados: tarjeta horizontal compacta */
.recomendado { transition: box-shadow .15s, border-color .15s; background: var(--bs-paper-bg); }
.recomendado:hover { border-color: var(--bs-primary) !important; box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.recomendado__portada { width: 132px; }
.recomendado__portada img { width: 132px; height: 100%; min-height: 150px; object-fit: cover; border-radius: .5rem; }
.recomendado__texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 575.98px) { .recomendado { flex-direction: column; } .recomendado__portada, .recomendado__portada img { width: 100%; min-height: 0; height: 140px; } }

/* Certificado en línea */
.certificado { background: var(--bs-paper-bg); padding: 1rem; border-radius: .5rem; }
.certificado__borde { border: 2px solid color-mix(in srgb, var(--bs-primary) 35%, transparent); outline: 1px solid var(--bs-border-color); outline-offset: 6px; border-radius: .25rem; padding: 2rem 2.25rem; position: relative; overflow: hidden; }
.certificado__borde::before { content: ""; position: absolute; right: -80px; top: -80px; width: 260px; height: 260px; border-radius: 50%; background: color-mix(in srgb, var(--bs-primary) 7%, transparent); }
.certificado__firma { width: 160px; border-bottom: 1px solid var(--bs-heading-color); margin: 0 auto .35rem; height: 34px; }
.certificado__qr { width: 64px; height: 64px; border: 1px solid var(--bs-border-color); border-radius: .35rem; display: flex; align-items: center; justify-content: center; font-size: 2.2rem; margin: 0 auto .35rem; color: var(--bs-heading-color); }

/* Certificados: galería de diplomas */
.diploma-card { background: var(--bs-paper-bg); border: 1px solid var(--bs-border-color); border-radius: .75rem; padding: .75rem .75rem .75rem; height: 100%; }
.diploma { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; aspect-ratio: 1.414; padding: 1.4rem 1.2rem 1.1rem; border-radius: .5rem; cursor: pointer;
    background: linear-gradient(160deg, #fff 0%, color-mix(in srgb, var(--bs-primary) 6%, #fff) 100%); border: 2px solid color-mix(in srgb, var(--bs-primary) 35%, transparent); outline: 1px solid var(--bs-border-color); outline-offset: 4px; color: var(--bs-heading-color); transition: transform .15s, box-shadow .15s; overflow: hidden; }
[data-bs-theme="dark"] .diploma { background: linear-gradient(160deg, var(--bs-paper-bg) 0%, color-mix(in srgb, var(--bs-primary) 14%, var(--bs-paper-bg)) 100%); }
.diploma:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.diploma__sello { position: absolute; top: .6rem; right: .6rem; width: 34px; height: 34px; border-radius: 50%; background: var(--bs-primary); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: 0 2px 8px color-mix(in srgb, var(--bs-primary) 40%, transparent); }
.diploma__logo { height: 20px; width: auto; margin-bottom: .6rem; }
.diploma__kicker { font-size: .58rem; letter-spacing: .18em; text-transform: uppercase; color: var(--bs-secondary-color); margin-bottom: .5rem; }
.diploma__nombre { font-size: 1.05rem; font-weight: 600; line-height: 1.2; margin-bottom: .4rem; }
.diploma__curso { font-size: .78rem; line-height: 1.3; color: var(--bs-body-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.diploma__meta { font-size: .68rem; color: var(--bs-secondary-color); margin-top: auto; }
.diploma__ver { position: absolute; inset: auto 0 0 0; padding: .45rem; font-size: .75rem; font-weight: 500; background: var(--bs-primary); color: #fff; transform: translateY(100%); transition: transform .15s; }
.diploma:hover .diploma__ver { transform: translateY(0); }

/* ============================================================
   CONSULTAS (mesa de consultas por curso y grupo). Familia de tres pantallas:
   bandeja general → consultas del grupo → detalle. Misma tabla, mismos badges.
   ============================================================ */
/* Tabla DataTable de consultas: filas clicables con borde izquierdo según estado */
.consultas-tabla tbody tr { cursor: pointer; }
.consultas-tabla tbody tr > td:first-child { box-shadow: inset 3px 0 0 transparent; }
.consultas-tabla tbody tr.estado-abierta > td:first-child { box-shadow: inset 3px 0 0 var(--bs-warning); }
.consultas-tabla tbody tr.estado-respondida > td:first-child { box-shadow: inset 3px 0 0 var(--bs-info); }
.consultas-tabla tbody tr.estado-resuelta > td:first-child { box-shadow: inset 3px 0 0 var(--bs-success); }
.consultas-tabla tbody tr:hover > td { background-color: color-mix(in srgb, var(--bs-primary) 4%, transparent); }
.consultas-tabla td, .consultas-tabla th { vertical-align: middle; }
.consultas-tabla .consulta-titulo { color: var(--bs-heading-color); font-weight: 500; text-decoration: none; display: block; max-width: 440px; }
.consultas-tabla .consulta-titulo:hover { color: var(--bs-primary); }
.consultas-tabla .consulta-extracto { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 440px; }
.consultas-tabla { table-layout: fixed; width: 100% !important; }
.consultas-tabla .col-consulta { width: 38%; }
.consultas-tabla .col-curso { width: 20%; }
.consultas-tabla .col-sobre { width: 15%; }
.consultas-tabla .col-autor { width: 13%; }
.consultas-tabla .col-estado { width: 12%; }
.consultas-tabla .col-resp { width: 8%; }
.consultas-tabla .col-act { width: 12%; }
.consultas-tabla .curso-nombre { display: block; }
.consultas-tabla td.col-autor { overflow-wrap: anywhere; }
.consultas-tabla .fila-sin-leer .consulta-titulo { font-weight: 600; }
/* DataTables: ocultamos buscador y selector propios (van en la card de filtros, como en v4) */
.card-datatable .dt-container .dt-layout-row:first-child:has(.dt-search) { display: none; }
.card-datatable .dt-container .dt-layout-row { margin: 0; padding: .75rem 1.5rem; }
.card-datatable .dt-container .dt-layout-row:last-child { border-top: 1px solid var(--bs-border-color); }
.card-datatable .dt-container .dt-info { padding-top: 0; }
.card-datatable .dt-container .dt-paging { margin: 0; }
/* Tarjetas de grupo en la bandeja general (nivel superior de la jerarquía) */
.grupo-chip { display: flex; gap: .875rem; align-items: flex-start; border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .875rem 1rem; height: 100%; transition: border-color .15s, box-shadow .15s; background: var(--bs-paper-bg); }
.grupo-chip:hover, .grupo-chip.activo { border-color: var(--bs-primary); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.grupo-chip.activo { background: color-mix(in srgb, var(--bs-primary) 5%, var(--bs-paper-bg)); }
.grupo-chip__nombre { font-weight: 500; color: var(--bs-heading-color); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Detalle de la consulta */
.consulta-pregunta .card-body p { font-size: 1rem; line-height: 1.6; }
.adjunto-chip { display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .75rem; border: 1px solid var(--bs-border-color); border-radius: .375rem; color: var(--bs-body-color); text-decoration: none; font-size: .8125rem; background: var(--bs-paper-bg); }
.adjunto-chip:hover { border-color: var(--bs-primary); color: var(--bs-primary); }
.respuesta { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: 1.25rem; background: var(--bs-paper-bg); }
.respuesta--oficial { border-left: 4px solid var(--bs-success); background: color-mix(in srgb, var(--bs-success) 4%, var(--bs-paper-bg)); }
.respuesta p { line-height: 1.6; }
.relacionada { display: block; padding: .75rem 0; border-bottom: 1px solid var(--bs-border-color); text-decoration: none; color: var(--bs-body-color); }
.relacionada:last-child { border-bottom: 0; padding-bottom: 0; }
.relacionada:first-child { padding-top: 0; }
.relacionada:hover .relacionada__titulo { color: var(--bs-primary); }
.relacionada__titulo { font-weight: 500; color: var(--bs-heading-color); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ficha-grupo li { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; border-bottom: 1px solid var(--bs-border-color); }
.ficha-grupo li:last-child { border-bottom: 0; }
.ficha-grupo li > i { color: var(--bs-primary); font-size: 1.15rem; flex-shrink: 0; }
.ficha-grupo li span { font-size: .78rem; color: var(--bs-secondary-color); display: block; }

/* select2 dentro de modales: altura y foco como los inputs de Vuexy */
.modal .select2-container--default .select2-selection--single { height: calc(1.53em + 1rem + 2px); border: 1px solid var(--bs-border-color); border-radius: var(--bs-border-radius); padding: .4rem .25rem; }
.modal .select2-container--default .select2-selection--single .select2-selection__arrow { height: 100%; }
.select2-container { z-index: 1090; }

/* Botón mínimo para acciones en línea (badges) */
.btn-xs { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .3rem; --bs-btn-font-size: .75rem; }
.btn-xs.btn-icon { width: 1.5rem; height: 1.5rem; }

/* Selector de plantilla de certificado */
.plantilla-cert { cursor: pointer; padding-left: 2.6rem !important; }
.plantilla-cert .form-check-input { margin-left: -1.8rem; }
.plantilla-cert:has(.form-check-input:checked) { border-color: var(--bs-primary) !important; background: color-mix(in srgb, var(--bs-primary) 6%, transparent); }

/* select2: botón limpiar discreto (la flecha la dibuja el tema de Vuexy) */
.select2-container--default .select2-selection--single .select2-selection__clear { color: var(--bs-secondary-color); font-weight: 400; margin-right: 1.25rem; }
.select2-container--default .select2-selection--single .select2-selection__clear:hover { color: var(--bs-danger); }
/* Ficha de formación: franja vertical de color por estado; la actual destacada */
.sesion-item { position: relative; overflow: hidden; }
.sesion-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: #b9b7c3; z-index: 2; pointer-events: none; }
.sesion-item--presencial.sesion-item--programada::before { background: var(--bs-info); }
.sesion-item--realizada::before { background: var(--bs-success); }
.sesion-item--ausente::before { background: var(--bs-warning); }
.sesion-item--proxima, .sesion-item--hoy { border-color: color-mix(in srgb, var(--bs-primary) 45%, transparent) !important; box-shadow: 0 .25rem 1rem color-mix(in srgb, var(--bs-primary) 14%, transparent); }
.sesion-item--proxima::before, .sesion-item--hoy::before { background: var(--bs-primary); opacity: 1; width: 8px; }
.sesion-item--proxima .accordion-button, .sesion-item--hoy .accordion-button { background: color-mix(in srgb, var(--bs-primary) 5%, transparent); }
.sesion-item--proxima .avatar-initial, .sesion-item--hoy .avatar-initial { background: var(--bs-primary) !important; color: #fff !important; }
.sesion-item .accordion-button { padding-left: 1.75rem; }
.sesion-item .accordion-body { padding-left: 1.75rem; }

/* Hover en sesiones: tinte suave */
.sesion-item .accordion-button:hover { background: color-mix(in srgb, var(--bs-primary) 4%, transparent); }
.sesion-item--realizada .accordion-button:hover { background: color-mix(in srgb, var(--bs-success) 6%, transparent); }
.sesion-item--ausente .accordion-button:hover { background: color-mix(in srgb, var(--bs-warning) 8%, transparent); }
.sesion-item--presencial.sesion-item--programada .accordion-button:hover { background: color-mix(in srgb, var(--bs-info) 6%, transparent); }
.sesion-item--proxima .accordion-button:hover, .sesion-item--hoy .accordion-button:hover { background: color-mix(in srgb, var(--bs-primary) 9%, transparent); }
/* E-learning: la misma franja por cápsula según estado, con hover */
.capsula-item { position: relative; padding-left: 1rem !important; margin: 0 -1.5rem; padding-right: 1.5rem; padding-left: 1.75rem !important; transition: background .15s; }
.capsula-item::before { content: ""; position: absolute; left: .5rem; top: .5rem; bottom: .5rem; width: 5px; border-radius: 3px; background: #b9b7c3; }
.capsula-item--completada::before { background: var(--bs-success); }
.capsula-item--en_curso::before { background: var(--bs-primary); width: 7px; }
.capsula-item--en_curso { background: color-mix(in srgb, var(--bs-primary) 5%, transparent); }
.capsula-item--bloqueada::before { background: var(--bs-border-color); }
.capsula-item:hover { background: color-mix(in srgb, var(--bs-primary) 4%, transparent); }
.capsula-item--completada:hover { background: color-mix(in srgb, var(--bs-success) 6%, transparent); }
.capsula-item--en_curso:hover { background: color-mix(in srgb, var(--bs-primary) 9%, transparent); }

/* Ventana encima de otra (Nuevo relator sobre Sesión o Colegio/relator) */
.modal-apilada { filter: brightness(.85); }

/* Menú del avatar: color del sitio */
.color-sitio__opcion { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--bs-paper-bg, #fff); box-shadow: 0 0 0 1px var(--bs-border-color); padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; position: relative; transition: transform .12s; }
.color-sitio__opcion:hover { transform: scale(1.12); }
.color-sitio__opcion.activo { box-shadow: 0 0 0 2px var(--bs-heading-color); }
.color-sitio__libre { background: conic-gradient(#ff4961, #ffab1d, #0d9394, #2092ec, #7367f0, #eb3d63, #ff4961); color: #fff; overflow: hidden; }
.color-sitio__libre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
/* Podcasts de educación */
.podcast { overflow: hidden; transition: box-shadow .15s, transform .15s; background: var(--bs-paper-bg, #fff); }
.podcast:hover { box-shadow: var(--bs-box-shadow); transform: translateY(-2px); }
.podcast__portada { position: relative; height: 120px; display: flex; align-items: center; justify-content: center; color: #fff; }
.podcast__portada--primary { background: linear-gradient(135deg, var(--bs-primary), color-mix(in srgb, var(--bs-primary) 55%, #2b2d42)); }
.podcast__portada--success { background: linear-gradient(135deg, #28c76f, #0d9394); }
.podcast__portada--warning { background: linear-gradient(135deg, #ffab1d, #ff6b3d); }
.podcast__portada--info { background: linear-gradient(135deg, #2092ec, #4f46c8); }
.podcast__icono { width: 3.25rem !important; height: 3.25rem !important; font-size: 3.25rem; opacity: .95; }
.podcast__ep { position: absolute; top: .6rem; left: .75rem; font-size: .7rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; opacity: .9; }
.podcast__dur { position: absolute; bottom: .6rem; right: .75rem; font-size: .75rem; background: rgba(0,0,0,.25); padding: .1rem .5rem; border-radius: 1rem; }
/* Botones de marca: píldora con tinte suave del color de cada marca */
.podcast-btn { border: 0; font-weight: 500; border-radius: 50rem !important; }
.podcast-btn--spotify { background: #4bb34b; color: #fff !important; }
.podcast-btn--spotify:hover { background: #43a143; }
.podcast-btn--youtube { background: #c33e36; color: #fff !important; }
.podcast-btn--youtube:hover { background: #b03830; }

/* LinkedIn en certificados */
.btn-linkedin { background: #0a66c2; color: #fff !important; border: 0; }
.btn-linkedin:hover, .btn-linkedin:focus { background: #004182; }
.btn-label-linkedin { background: rgba(10, 102, 194, .12); color: #0a66c2 !important; border: 0; }
.btn-label-linkedin:hover { background: #0a66c2; color: #fff !important; }
.btn-linkedin .tabler-brand-linkedin { font-size: 1.35rem; width: 1.35rem; height: 1.35rem; }
.btn-linkedin.btn-icon .tabler-brand-linkedin { font-size: 1.6rem; width: 1.6rem; height: 1.6rem; }

/* Foro del grupo: preguntas de reflexión y comentarios */
.reflexion-item { display: block; border: 1px solid var(--bs-border-color); border-left: 4px solid var(--bs-info); border-radius: .5rem; padding: 1rem 1.25rem; background: var(--bs-paper-bg); transition: border-color .15s, box-shadow .15s; }
.reflexion-item:hover { border-color: var(--bs-info); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.reflexion-item--cerrada { border-left-color: var(--bs-secondary); }
.reflexion-item__texto { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.reflexion-pregunta { border-top: 4px solid var(--bs-info); }
.respuesta--comentario { padding: .75rem 1rem; background: color-mix(in srgb, var(--bs-secondary) 4%, var(--bs-paper-bg)); }
.respuesta--comentario p { font-size: .9375rem; }
.sesion-reflexion { border: 1px dashed color-mix(in srgb, var(--bs-info) 55%, transparent); border-radius: .5rem; padding: .75rem 1rem; background: color-mix(in srgb, var(--bs-info) 5%, var(--bs-paper-bg)); }

/* Evaluaciones: editor del gestor */
.editor-eval .ql-editor { min-height: 110px; font-size: .9375rem; }
.editor-eval--chico .ql-editor { min-height: 60px; }
.eval-lateral { position: sticky; top: 90px; }
.pregunta-arrastre { cursor: grab; font-size: 1.25rem; }
.pregunta-card .btn-group .btn.active { background: var(--bs-primary); color: #fff; }
.alternativa-fila { border: 1px solid var(--bs-border-color); border-radius: .5rem; padding: .5rem .625rem; background: var(--bs-paper-bg); transition: border-color .15s, background .15s; }
.alternativa-fila--correcta { border-color: var(--bs-success); background: color-mix(in srgb, var(--bs-success) 6%, var(--bs-paper-bg)); }
.alt-correcta { flex-shrink: 0; width: 2.125rem; height: 2.125rem; border-radius: 50%; border: 2px solid var(--bs-border-color); background: transparent; color: transparent; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.pregunta--multiple .alt-correcta { border-radius: .375rem; }
.alt-correcta:hover { border-color: var(--bs-success); color: color-mix(in srgb, var(--bs-success) 50%, transparent); }
.alternativa-fila--correcta .alt-correcta { background: var(--bs-success); border-color: var(--bs-success); color: #fff; }
.alt-letra { flex-shrink: 0; width: 1.5rem; padding-top: .45rem; font-weight: 600; color: var(--bs-secondary-color); text-align: center; }

/* Evaluaciones: responder y resultado */
.evaluacion { max-width: 880px; }
.eval-html img { max-width: 100%; height: auto; border-radius: .375rem; }
.eval-enunciado { font-size: 1.0625rem; line-height: 1.6; color: var(--bs-heading-color); }
.eval-imagen { max-width: 100%; max-height: 360px; display: block; }
.eval-alt { display: flex; align-items: flex-start; gap: .75rem; width: 100%; text-align: left; border: 1.5px solid var(--bs-border-color); border-radius: .625rem; padding: .875rem 1rem; background: var(--bs-paper-bg); color: var(--bs-body-color); transition: border-color .15s, background .15s, box-shadow .15s; }
button.eval-alt:not(:disabled):hover { border-color: var(--bs-primary); box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.eval-alt__marca { flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin-top: .05rem; border-radius: 50%; border: 2px solid var(--bs-border-color); display: inline-flex; align-items: center; justify-content: center; color: transparent; font-size: .875rem; }
.eval-alt--multiple .eval-alt__marca { border-radius: .3rem; }
.eval-alt__letra { flex-shrink: 0; font-weight: 600; color: var(--bs-secondary-color); min-width: 1rem; }
.eval-alt__cuerpo { flex-grow: 1; min-width: 0; }
.eval-alt--marcada { border-color: var(--bs-primary); background: color-mix(in srgb, var(--bs-primary) 6%, var(--bs-paper-bg)); }
.eval-alt--marcada .eval-alt__marca { background: var(--bs-primary); border-color: var(--bs-primary); color: #fff; }
.eval-alt--correcta { border-color: var(--bs-success) !important; background: color-mix(in srgb, var(--bs-success) 7%, var(--bs-paper-bg)) !important; }
.eval-alt--correcta .eval-alt__marca { background: var(--bs-success) !important; border-color: var(--bs-success) !important; color: #fff; }
.eval-alt--incorrecta { border-color: var(--bs-danger) !important; background: color-mix(in srgb, var(--bs-danger) 6%, var(--bs-paper-bg)) !important; }
.eval-alt--incorrecta .eval-alt__marca { background: var(--bs-danger) !important; border-color: var(--bs-danger) !important; color: #fff; }
.eval-alt:disabled { opacity: 1; cursor: default; }
.eval-alt__etiqueta { font-weight: 600; color: var(--bs-secondary-color); }
.eval-alt__retro-texto, .eval-alt__retro small { color: var(--bs-body-color); border-left: 3px solid currentColor; padding-left: .5rem; opacity: .9; }
.eval-mapa__n { width: 2rem; height: 2rem; border-radius: .375rem; border: 1px solid var(--bs-border-color); background: var(--bs-paper-bg); color: var(--bs-secondary-color); font-size: .8125rem; font-weight: 500; }
.eval-mapa__n--respondida { background: color-mix(in srgb, var(--bs-primary) 12%, var(--bs-paper-bg)); color: var(--bs-primary); border-color: transparent; }
.eval-mapa__n--actual { outline: 2px solid var(--bs-primary); outline-offset: 1px; color: var(--bs-primary); }
.eval-nota { width: 5.5rem; height: 5.5rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; font-weight: 700; border: 6px solid; }
.eval-nota--success { color: var(--bs-success); border-color: color-mix(in srgb, var(--bs-success) 35%, transparent); }
.eval-nota--warning { color: var(--bs-warning); border-color: color-mix(in srgb, var(--bs-warning) 35%, transparent); }
.eval-nota--danger { color: var(--bs-danger); border-color: color-mix(in srgb, var(--bs-danger) 35%, transparent); }
.sesion-evaluacion { border: 1px dashed color-mix(in srgb, var(--bs-primary) 45%, transparent); border-radius: .5rem; padding: .75rem 1rem; background: color-mix(in srgb, var(--bs-primary) 4%, var(--bs-paper-bg)); }
.editor-eval .ql-container { height: auto; }
.eval-alt__retro small { margin-top: .5rem; }

/* Evaluaciones en formato vertical: una pregunta por página */
.evaluacion--vertical { max-width: 640px; }
.eval-contador { font-size: 1.25rem; font-weight: 600; color: var(--bs-heading-color); }
.eval-hoja .card-body { padding: 1.5rem; }
.eval-entra { animation: evalEntra .25s ease-out; }
@keyframes evalEntra { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.eval-mapa__n--bien { background: color-mix(in srgb, var(--bs-success) 14%, var(--bs-paper-bg)); color: var(--bs-success); border-color: transparent; }
.eval-mapa__n--parcial { background: color-mix(in srgb, var(--bs-warning) 16%, var(--bs-paper-bg)); color: var(--bs-warning); border-color: transparent; }
.eval-mapa__n--mal { background: color-mix(in srgb, var(--bs-danger) 12%, var(--bs-paper-bg)); color: var(--bs-danger); border-color: transparent; }
.evaluacion--vertical .eval-imagen { max-height: 220px; width: auto; max-width: 100%; margin-left: auto; margin-right: auto; }
.evaluacion--vertical .eval-html img { max-height: 260px; width: auto; }

/* Evaluaciones apaisadas: lateral con avance/puntaje y pregunta al lado; imagen junto al enunciado */
.evaluacion--apaisada { max-width: 1200px; }
.eval-lado { position: sticky; top: 90px; }
.eval-imagen-lado { width: 100%; max-height: 420px; object-fit: contain; background: var(--bs-body-bg); }

/* ===== Evaluaciones: rediseño (portada, barra por segmentos, pregunta a todo el ancho) ===== */
.evaluacion--apaisada { max-width: 1180px; }
.eval-portada { position: relative; overflow: hidden; border-radius: 1rem; padding: 2.75rem 3rem; color: #fff;
    background: linear-gradient(135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 75%, #4f7dd1) 55%, #4f7dd1 100%);
    box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--bs-primary) 55%, transparent); }
.eval-portada::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #ff5b5c 0%, #fbb03b 25%, #34c759 50%, #00c2ff 75%, #7b61ff 100%); }
.eval-portada--bien { background: linear-gradient(135deg, #1fae63 0%, #23b39b 55%, #2f8fd8 100%); box-shadow: 0 10px 30px -12px rgba(35,179,155,.55); }
.eval-portada--parcial { background: linear-gradient(135deg, #f39c33 0%, #f0b23d 45%, #e8743b 100%); box-shadow: 0 10px 30px -12px rgba(243,156,51,.55); }
.eval-portada--mal { background: linear-gradient(135deg, var(--bs-primary) 0%, #e2456b 50%, #b84fd1 100%); }
.eval-portada__deco { position: absolute; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.eval-portada__deco--1 { width: 340px; height: 340px; right: -90px; top: -120px; }
.eval-portada__deco--2 { width: 220px; height: 220px; right: 22%; bottom: -130px; background: rgba(255,255,255,.06); }
.eval-portada__etiqueta { display: inline-flex; align-items: center; padding: .3rem .75rem; border-radius: 50rem; background: rgba(255,255,255,.18); font-size: .8125rem; font-weight: 500; backdrop-filter: blur(2px); }
.eval-portada__etiqueta--aviso { background: #fff3cd; color: #8a6100; }
.eval-portada__titulo { color: #fff; font-size: 2.125rem; font-weight: 700; line-height: 1.2; margin-bottom: 1rem; }
.eval-portada__sub { color: rgba(255,255,255,.92); font-size: 1rem; }
.eval-portada__instr { color: rgba(255,255,255,.95); font-size: 1.0625rem; line-height: 1.65; max-width: 640px; }
.eval-portada__instr strong, .eval-portada__instr em { color: #fff; }
.eval-portada__datos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; margin-top: 1.75rem; max-width: 680px; }
.eval-portada__datos > div { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.18); border-radius: .75rem; padding: .875rem 1rem; display: flex; flex-direction: column; }
.eval-portada__datos i { font-size: 1.375rem; opacity: .9; margin-bottom: .35rem; }
.eval-portada__datos strong { font-size: 1.375rem; line-height: 1.1; color: #fff; }
.eval-portada__datos span { font-size: .8125rem; opacity: .9; }
.eval-portada__datos--chico { grid-template-columns: repeat(3, minmax(0, 150px)); margin-top: 0; }
.eval-portada__boton { font-weight: 600; color: var(--bs-primary) !important; padding-left: 2rem; padding-right: 2rem; box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.eval-portada__boton-sec { background: rgba(255,255,255,.16); color: #fff !important; border: 1px solid rgba(255,255,255,.35); }
.eval-portada__boton-sec:hover { background: rgba(255,255,255,.26); }
.eval-portada__nota { color: rgba(255,255,255,.85); }
/* Ilustración de la portada (solo CSS) */
.eval-ilustracion { position: relative; height: 270px; }
.eval-ilustracion__tarjeta { position: absolute; inset: 10px 30px 10px 40px; background: #fff; border-radius: 1rem; padding: 1.5rem; box-shadow: 0 20px 40px -14px rgba(0,0,0,.35); transform: rotate(-3deg); }
.eval-ilustracion__linea { height: 12px; border-radius: 6px; background: #e9e7f2; margin-bottom: .6rem; }
.eval-ilustracion__op { display: flex; align-items: center; gap: .75rem; border: 2px solid #ece9f5; border-radius: .6rem; padding: .55rem .75rem; margin-top: .65rem; }
.eval-ilustracion__op span { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #d4d1e0; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: .75rem; flex-shrink: 0; }
.eval-ilustracion__op div { height: 9px; border-radius: 5px; background: #ece9f5; }
.eval-ilustracion__op--ok { border-color: #34c759; background: #effbf3; }
.eval-ilustracion__op--ok span { background: #34c759; border-color: #34c759; }
.eval-ilustracion__burbuja { position: absolute; right: 6px; top: -4px; width: 74px; height: 74px; border-radius: 50%; background: #fbb03b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 2.1rem; box-shadow: 0 10px 24px -8px rgba(0,0,0,.35); transform: rotate(8deg); }
/* Anillo de porcentaje del resultado */
.eval-anillo { --pct: 0; width: 132px; height: 132px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
    background: conic-gradient(#fff calc(var(--pct) * 1%), rgba(255,255,255,.22) 0); }
.eval-anillo span { width: 104px; height: 104px; border-radius: 50%; background: rgba(0,0,0,.12); display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: #fff; }
/* Barra superior con avance por segmentos */
.eval-barra .card-body { padding: 1rem 1.5rem; }
.eval-barra__titulo { min-width: 0; max-width: 300px; }
.eval-segmentos { display: flex; gap: .375rem; min-width: 200px; }
.eval-seg { flex: 1 1 0; min-width: 22px; height: 30px; border: 0; border-radius: .5rem; background: color-mix(in srgb, var(--bs-secondary) 14%, var(--bs-paper-bg)); color: var(--bs-secondary-color); font-size: .75rem; font-weight: 600; transition: transform .12s, background .15s; }
.eval-seg:hover { transform: translateY(-1px); }
.eval-seg--respondida { background: color-mix(in srgb, var(--bs-primary) 22%, var(--bs-paper-bg)); color: var(--bs-primary); }
.eval-seg--actual { background: var(--bs-primary); color: #fff; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--bs-primary) 70%, transparent); }
.eval-seg--bien { background: color-mix(in srgb, var(--bs-success) 20%, var(--bs-paper-bg)); color: var(--bs-success); }
.eval-seg--parcial { background: color-mix(in srgb, var(--bs-warning) 22%, var(--bs-paper-bg)); color: #c77c00; }
.eval-seg--mal { background: color-mix(in srgb, var(--bs-danger) 16%, var(--bs-paper-bg)); color: var(--bs-danger); }
.eval-seg--bien.eval-seg--actual { background: var(--bs-success); color: #fff; }
.eval-seg--parcial.eval-seg--actual { background: var(--bs-warning); color: #fff; }
.eval-seg--mal.eval-seg--actual { background: var(--bs-danger); color: #fff; }
/* Hoja de la pregunta */
.eval-hoja .card-body { padding: 2rem 2.25rem; }
.eval-hoja__pie { background: color-mix(in srgb, var(--bs-secondary) 4%, var(--bs-paper-bg)); border-top: 1px solid var(--bs-border-color); padding: 1rem 2.25rem; }
.eval-pregunta__cabeza { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; margin-bottom: .875rem; }
.eval-pregunta__num { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--bs-primary); }
.eval-pregunta__tipo { font-size: .8125rem; color: var(--bs-secondary-color); }
.evaluacion--apaisada .eval-enunciado { font-size: 1.375rem; line-height: 1.5; font-weight: 500; margin-bottom: 1.5rem; }
.eval-figura { height: 100%; min-height: 280px; border-radius: .875rem; overflow: hidden; background: color-mix(in srgb, var(--bs-secondary) 8%, var(--bs-paper-bg)); display: flex; align-items: center; justify-content: center; }
.eval-figura img { width: 100%; height: 100%; object-fit: cover; }
.eval-alts { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 768px) { .eval-alts--grilla { display: grid; grid-template-columns: 1fr 1fr; } }
.evaluacion--apaisada .eval-alt { padding: 1rem 1.125rem; border-width: 2px; font-size: 1rem; }
.evaluacion--apaisada .eval-alt__letra { width: 1.75rem; height: 1.75rem; border-radius: .4rem; background: color-mix(in srgb, var(--bs-secondary) 12%, var(--bs-paper-bg)); display: inline-flex; align-items: center; justify-content: center; font-size: .8125rem; }
.evaluacion--apaisada .eval-alt--marcada .eval-alt__letra { background: var(--bs-primary); color: #fff; }
@media (max-width: 991.98px) {
    .eval-portada { padding: 2rem 1.5rem; }
    .eval-portada__titulo { font-size: 1.625rem; }
    .eval-portada__datos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .eval-hoja .card-body, .eval-hoja__pie { padding-left: 1.25rem; padding-right: 1.25rem; }
    .eval-figura { min-height: 200px; }
}
.eval-figura { height: auto; min-height: 220px; max-height: 420px; padding: .75rem; }
.eval-figura img { width: 100%; height: auto; max-height: 396px; object-fit: contain; border-radius: .5rem; }
.eval-hoja .row.align-items-stretch { align-items: flex-start !important; }
.eval-portada__boton, .eval-portada__boton:hover, .eval-portada__boton:focus { background: #fff !important; border-color: #fff !important; }
.foro-texto img { max-width: 100%; max-height: 480px; height: auto; border-radius: .5rem; margin: .5rem 0; }
.foro-texto p { margin-bottom: .5rem; }
.td-formacion { max-width: 320px; }
@media (max-width: 575.98px) { .td-formacion { max-width: 230px; } }

/* Otras formaciones que te pueden interesar (Inicio) */
.interes { background: var(--bs-paper-bg); overflow: hidden; transition: box-shadow .15s, border-color .15s; }
.interes:hover { border-color: var(--bs-primary) !important; box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.interes__portada { position: relative; height: 150px; }
.interes__portada img { width: 100%; height: 100%; object-fit: cover; }
.interes__area { position: absolute; left: .75rem; top: .75rem; }
.interes__acciones > div { flex-direction: column; }
.carrusel { display: flex; gap: 1.5rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 2px; }
.carrusel::-webkit-scrollbar { display: none; }
.carrusel__item { flex: 0 0 calc((100% - 3rem) / 3); scroll-snap-align: start; min-width: 0; }
@media (max-width: 1199.98px) { .carrusel__item { flex-basis: calc((100% - 1.5rem) / 2); } }
@media (max-width: 575.98px) { .carrusel__item { flex-basis: 85%; } }
.carrusel-flechas { display: flex; gap: .5rem; }
.carrusel-flechas .btn:disabled { opacity: .35; }
.interes__acciones .btn { white-space: nowrap; font-size: .8125rem; padding-inline: .5rem; }

/* Mi perfil: portada con el degradado de la marca, foto superpuesta y acciones */
.perfil-portada { position: relative; display: flex; align-items: center; gap: 1.75rem; padding: 2.25rem 2.5rem; color: #fff;
    background: linear-gradient(135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 75%, #4f7dd1) 55%, #4f7dd1 100%); }
.perfil-portada::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #ff5b5c 0%, #fbb03b 25%, #34c759 50%, #00c2ff 75%, #7b61ff 100%); }
.perfil-portada::after { content: ""; position: absolute; right: -60px; bottom: -90px; width: 280px; height: 280px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.perfil-portada__foto { position: relative; flex-shrink: 0; }
.perfil-portada__camara { position: absolute; right: 2px; bottom: 6px; border: 3px solid #fff; }
.perfil-avatar { width: 120px; height: 120px; }
.perfil-avatar .avatar-initial { font-size: 2.5rem; }
.perfil-portada .perfil-avatar { box-shadow: 0 0 0 5px rgba(255,255,255,.35); border-radius: 50%; }
.perfil-portada .perfil-avatar .avatar-initial { background: #fff !important; color: var(--bs-primary) !important; }
.perfil-portada__texto { flex-grow: 1; min-width: 0; position: relative; z-index: 1; }
.perfil-portada__rol { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.2); padding: .2rem .65rem; border-radius: 1rem; margin-bottom: .5rem; }
.perfil-portada__acciones { display: flex; flex-direction: column; gap: .6rem; position: relative; z-index: 1; }
.perfil-portada .btn-white { background: #fff; color: var(--bs-primary); border: 0; font-weight: 500; }
.perfil-portada .btn-white:hover { background: rgba(255,255,255,.9); color: var(--bs-primary); }
.perfil-portada .btn-outline-white { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.7); font-weight: 500; }
.perfil-portada .btn-outline-white:hover { background: rgba(255,255,255,.15); color: #fff; }
@media (max-width: 767.98px) {
    .perfil-portada { flex-direction: column; text-align: center; padding: 2rem 1.25rem; }
    .perfil-portada__acciones { width: 100%; }
}
.perfil-aviso { cursor: pointer; transition: border-color .15s; }
.perfil-aviso:hover { border-color: var(--bs-primary) !important; }
.clave-reglas li { display: flex; align-items: center; gap: .5rem; padding: .3rem 0; }

/* Estadísticas */
.estad-portada { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1.25rem; padding: 2rem 2.25rem; border-radius: .75rem; color: #fff;
    background: linear-gradient(135deg, var(--bs-primary) 0%, color-mix(in srgb, var(--bs-primary) 75%, #4f7dd1) 55%, #4f7dd1 100%); box-shadow: 0 10px 30px -12px color-mix(in srgb, var(--bs-primary) 55%, transparent); }
.estad-portada::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, #ff5b5c 0%, #fbb03b 25%, #34c759 50%, #00c2ff 75%, #7b61ff 100%); }
.estad-portada__eti { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; background: rgba(255,255,255,.2); padding: .2rem .65rem; border-radius: 1rem; margin-bottom: .5rem; }
.estad-portada .btn-white { background: #fff; color: var(--bs-primary); border: 0; font-weight: 500; }
.informe-tarjeta { transition: transform .15s, box-shadow .15s; }
.informe-tarjeta:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(0,0,0,.08); }
.informe-tabla { font-size: .8125rem; }
.informe-tabla th { white-space: nowrap; }
.informe-resumen { overflow: hidden; }
.informe-resumen::before { content: ""; display: block; height: 4px; background: var(--franja, var(--bs-primary)); }
.informe-destacado { border: 1px solid color-mix(in srgb, var(--bs-primary) 35%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--bs-primary) 7%, var(--bs-paper-bg)) 0%, var(--bs-paper-bg) 70%); }
.informe-tabla td:first-child { min-width: 170px; }

/* Recorrido de bienvenida (onboarding): imagen arriba, texto abajo, cursor animado sobre lo que hay que presionar */
.onb .modal-content { border: 0; border-radius: 1.25rem; }
.onb .modal-dialog { max-width: min(1180px, 94vw, calc((100vh - 330px) * 1.7778)); min-width: min(94vw, 560px); }
.onb__cerrar { position: absolute; top: 1rem; right: 1rem; z-index: 5; width: 40px; height: 40px; border: 0; border-radius: .6rem; background: rgba(15,15,20,.75); color: #fff; display: flex; align-items: center; justify-content: center; }
.onb__cerrar:hover { background: rgba(15,15,20,.95); }
.onb__escena { position: relative; aspect-ratio: 16 / 9; width: 100%; background: #111117; overflow: hidden; }
.onb__lamina { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.onb__lamina.activa { opacity: 1; pointer-events: auto; }
.onb__portada { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #fff; padding: 2rem;
    background: radial-gradient(42% 60% at 22% 30%, color-mix(in srgb, var(--bs-primary) 55%, transparent), transparent 70%), radial-gradient(35% 50% at 70% 32%, rgba(79,125,209,.45), transparent 70%),
                radial-gradient(35% 45% at 92% 92%, rgba(251,176,59,.4), transparent 70%), #111117; }
.onb__portada--sin { color: rgba(255,255,255,.6); }
.onb__marca { font-size: clamp(1.8rem, 4.2vw, 3.6rem); font-weight: 600; letter-spacing: -.01em; line-height: 1.1; }
.onb__marca span { color: var(--bs-primary); }
.onb__rol { display: inline-block; margin: .9rem 0 1rem; padding: .3rem .95rem; border-radius: 2rem; background: color-mix(in srgb, var(--bs-primary) 30%, transparent); border: 1px solid color-mix(in srgb, var(--bs-primary) 70%, transparent); color: #fff; font-weight: 500; font-size: clamp(.78rem, 1.2vw, .92rem); }
.onb__lema { font-size: clamp(1.1rem, 2.2vw, 1.65rem); font-weight: 500; color: #fff; }
.onb__ayuda { margin-top: .9rem; font-size: clamp(.72rem, 1vw, .86rem); color: rgba(255,255,255,.7); }
.onb__captura { position: absolute; inset: 0; }
.onb__captura img { width: 100%; height: 100%; object-fit: fill; display: block; }
.onb__zona { position: absolute; border-radius: .6rem; box-shadow: 0 0 0 3px #ff4c51, 0 0 0 9999px rgba(10,10,15,.42); opacity: 0; }
.onb__cursor { position: absolute; left: 55%; top: 92%; z-index: 2; color: #fff; font-size: 2rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.6)); opacity: 0; transform: translate(-20%, -10%); }
.onb__cursor i { width: 2rem; height: 2rem; font-size: 2rem; }
.onb__cursor::after { content: ""; position: absolute; left: 6px; top: 4px; width: 14px; height: 14px; border-radius: 50%; border: 3px solid #ff4c51; opacity: 0; }
.onb__captura.anima .onb__zona { animation: onbZona 4.2s ease forwards; }
.onb__captura.anima .onb__cursor { animation: onbCursor 4.2s ease forwards; }
.onb__captura.anima .onb__cursor::after { animation: onbClic 4.2s ease forwards; }
@keyframes onbZona { 0%, 35% { opacity: 0; } 50%, 100% { opacity: 1; } }
@keyframes onbCursor { 0% { opacity: 0; left: 55%; top: 92%; } 10% { opacity: 1; left: 55%; top: 92%; } 45% { left: var(--cx); top: var(--cy); } 52% { transform: translate(-20%, -10%) scale(.85); } 58%, 100% { opacity: 1; left: var(--cx); top: var(--cy); transform: translate(-20%, -10%) scale(1); } }
@keyframes onbClic { 0%, 50% { opacity: 0; transform: scale(.4); } 55% { opacity: 1; transform: scale(1); } 75% { opacity: 0; transform: scale(3); } 100% { opacity: 0; } }
.onb__pie { position: relative; padding: 1.75rem 2.25rem 1.25rem; background: var(--bs-paper-bg); }
.onb__texto { display: none; min-height: 6.2rem; }
.onb__texto.activa { display: block; }
.onb__ceja { display: block; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; color: var(--bs-secondary-color); margin-bottom: .4rem; }
.onb__texto p { font-size: 1.02rem; max-width: 62rem; }
.onb__nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.25rem; }
.onb__puntos { display: flex; gap: .45rem; flex-wrap: wrap; justify-content: center; }
.onb__punto { width: 10px; height: 10px; border: 0; border-radius: 1rem; background: color-mix(in srgb, var(--bs-secondary-color) 45%, transparent); padding: 0; transition: width .2s, background .2s; }
.onb__punto.activa { width: 36px; background: var(--bs-primary); }
.onb__opciones { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem 1rem; margin-top: 1rem; padding-top: .9rem; border-top: 1px solid var(--bs-border-color); }
@media (max-width: 575.98px) {
    .onb__pie { padding: 1.25rem 1.1rem 1rem; }
    .onb__nav .btn { padding-inline: .7rem; }
    .onb__nav .onb__ant { font-size: 0; } .onb__nav .onb__ant i { font-size: 1.1rem; margin: 0 !important; }
    .onb__puntos { gap: .3rem; flex-wrap: nowrap; } .onb__punto { width: 7px; height: 7px; } .onb__punto.activa { width: 18px; }
}

.onb__color { margin-top: 1.2rem; background: var(--bs-paper-bg); border: 1px solid var(--bs-border-color); border-radius: 1rem; padding: .9rem 1.1rem 1rem; box-shadow: 0 6px 20px -10px rgba(0,0,0,.18); max-width: 100%; }
.onb__color-titulo { font-weight: 600; font-size: .95rem; margin-bottom: .75rem; color: var(--bs-heading-color); }
.onb__color-titulo span { font-weight: 400; color: var(--bs-secondary-color); }
.onb__colores { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.onb__swatch { display: flex; flex-direction: column; align-items: center; gap: .35rem; width: 92px; padding: .55rem .3rem .45rem; border: 1px solid var(--bs-border-color); border-radius: .75rem; background: var(--bs-paper-bg); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.onb__swatch:hover { border-color: var(--sw); transform: translateY(-2px); box-shadow: 0 4px 12px -6px var(--sw); }
.onb__swatch-punto { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); color: #fff; display: flex; align-items: center; justify-content: center; }
.onb__swatch-punto i { opacity: 0; font-size: 1rem; }
.onb__swatch-nombre { font-size: .72rem; line-height: 1.15; color: var(--bs-body-color); }
.onb__swatch.activo { border: 2px solid var(--sw); padding: calc(.55rem - 1px) calc(.3rem - 1px) calc(.45rem - 1px); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sw) 18%, transparent); }
.onb__swatch.activo .onb__swatch-punto i { opacity: 1; }
.onb__swatch.activo .onb__swatch-nombre { font-weight: 600; color: var(--bs-heading-color); }
@media (max-width: 575.98px) { .onb__swatch { width: 46px; } .onb__swatch-nombre { display: none; } .onb__color-titulo span { display: none; } .onb__marca { font-size: 1.6rem; } }

/* Portada con selector de color: arriba el saludo; el panel de color, centrado en el espacio que queda hasta la parte blanca */
.onb__portada:has(.onb__portada-abajo) { justify-content: flex-start; padding-top: 0; padding-bottom: 0; }
/* espacio superior: deja el título a la misma altura que antes (~19% del alto) */
.onb__portada:has(.onb__portada-abajo)::before { content: ""; flex: .36 1 0; }
.onb__portada-abajo { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; }
.onb__portada-abajo .onb__color { margin-top: 0; }

/* Sin la píldora del rol: el saludo queda a la misma distancia que tenía de ella */
.onb__marca + .onb__lema { margin-top: 1rem; }