/* ==========================================================================
   Tema "Institucional" — se carga ENCIMA de tema-moderno.css para las
   instituciones con Institucion.tema = 'INSTITUCIONAL' (ver base.html).
   La idea: menos blanco. El color de la institución deja de ser solo un
   detalle y pasa a dar estructura -cabecera, titular de cada página,
   franjas de las tarjetas, mosaicos-, con un dorado de acento. Todo bajo
   body.tema-institucional y con las variables de la institución, así que
   cada una conserva su paleta.
   ========================================================================== */

body.tema-institucional {
    --cv-bg: #e9eef6;
    --cv-oro: #f3c13a;
    --cv-tinte: color-mix(in srgb, var(--cv-primary) 7%, #fff);
    --cv-borde-color: color-mix(in srgb, var(--cv-primary) 16%, #dfe5ee);
    background:
        radial-gradient(1100px 520px at -5% -10%, color-mix(in srgb, var(--cv-primary) 24%, transparent), transparent 62%),
        radial-gradient(900px 520px at 105% 0%, color-mix(in srgb, var(--cv-accent) 26%, transparent), transparent 60%),
        radial-gradient(900px 640px at 50% 115%, color-mix(in srgb, var(--cv-navy) 16%, transparent), transparent 62%),
        linear-gradient(180deg, #dbe4f1 0%, #e6ecf5 45%, #dfe6f1 100%);
    background-attachment: fixed;
}

/* ---- Cabecera: azul profundo con filete dorado ---- */
body.tema-institucional .cv-header {
    background:
        radial-gradient(600px 120px at 85% -40%, color-mix(in srgb, var(--cv-accent) 45%, transparent), transparent 70%),
        linear-gradient(100deg, var(--cv-navy) 0%, color-mix(in srgb, var(--cv-navy) 60%, var(--cv-primary)) 55%, var(--cv-primary) 100%);
    border-bottom: 3px solid var(--cv-oro);
    box-shadow: 0 8px 26px color-mix(in srgb, var(--cv-navy) 35%, transparent);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}
body.tema-institucional .cv-header a.cv-brand,
body.tema-institucional .cv-header span.cv-brand { color: #fff; letter-spacing: .02em; }
body.tema-institucional .cv-header a.cv-brand::before,
body.tema-institucional .cv-header span.cv-brand::before {
    background: var(--cv-oro);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--cv-oro) 30%, transparent);
}
body.tema-institucional .cv-header .cv-user { color: rgba(255, 255, 255, .72); }
body.tema-institucional .cv-header .cv-user > a { color: #fff; opacity: .92; }
body.tema-institucional .cv-header .cv-user > a:hover { color: var(--cv-oro); opacity: 1; text-decoration: none; }
body.tema-institucional .cv-lanzador-boton,
body.tema-institucional .cv-notif-boton {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}
body.tema-institucional .cv-lanzador-boton:hover,
body.tema-institucional .cv-notif-boton:hover,
body.tema-institucional .cv-lanzador-boton[aria-expanded="true"],
body.tema-institucional .cv-notif-boton[aria-expanded="true"] {
    background: rgba(255, 255, 255, .22);
    border-color: var(--cv-oro);
    color: var(--cv-oro);
}

/* ---- Miga de pan en píldora ---- */
body.tema-institucional .cv-breadcrumb {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
    background: rgba(255, 255, 255, .75);
    border: 1px solid var(--cv-borde-color);
    border-radius: 999px;
    padding: .35rem .95rem;
    color: var(--cv-navy);
    box-shadow: 0 1px 2px rgba(15, 35, 80, .05);
}
body.tema-institucional .cv-breadcrumb a { color: var(--cv-primary); font-weight: 600; }

/* ---- Titular de la página: una banda de color ---- */
body.tema-institucional .cv-container > h1:first-of-type,
body.tema-institucional .cv-container > h2:first-of-type,
body.tema-institucional .cv-titulo {
    position: relative;
    overflow: hidden;
    color: #fff;
    border: 0;
    border-radius: 20px;
    padding: 1.35rem 1.7rem 1.35rem 2rem;
    background:
        radial-gradient(520px 220px at 100% 0%, color-mix(in srgb, var(--cv-accent) 40%, transparent), transparent 62%),
        radial-gradient(380px 200px at 0% 120%, color-mix(in srgb, var(--cv-oro) 22%, transparent), transparent 60%),
        linear-gradient(120deg, var(--cv-navy) 0%, color-mix(in srgb, var(--cv-navy) 45%, var(--cv-primary)) 60%, var(--cv-primary) 100%);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--cv-navy) 26%, transparent);
}
body.tema-institucional .cv-container > h1:first-of-type::before,
body.tema-institucional .cv-container > h2:first-of-type::before,
body.tema-institucional .cv-titulo::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 7px;
    background: linear-gradient(180deg, var(--cv-oro), color-mix(in srgb, var(--cv-oro) 50%, var(--cv-accent)));
}
body.tema-institucional .cv-container > h1:first-of-type::after,
body.tema-institucional .cv-container > h2:first-of-type::after,
body.tema-institucional .cv-titulo::after {
    /* Trama de puntos tenue a la derecha: textura sin distraer del texto. */
    content: '';
    position: absolute;
    right: 0; top: 0; bottom: 0;
    width: 45%;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1.2px, transparent 1.3px);
    background-size: 14px 14px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
    mask-image: linear-gradient(90deg, transparent, #000 70%);
    pointer-events: none;
}

/* Subtítulos dentro del contenido: con su filete de color. */
body.tema-institucional .cv-container > h2:not(:first-of-type),
body.tema-institucional .cv-container > h3 {
    color: var(--cv-navy);
    border-bottom: 0;
    padding-left: .8rem;
    border-left: 5px solid var(--cv-primary);
}

/* ---- Tarjetas ---- */
body.tema-institucional .cv-card,
body.tema-institucional .cv-panel {
    border-color: var(--cv-borde-color);
    box-shadow: 0 1px 2px rgba(15, 35, 80, .05), 0 14px 32px rgba(15, 35, 80, .08);
}
body.tema-institucional .cv-card:has(> a.cv-link-block)::before,
body.tema-institucional .cv-card:has(> a.cv-link-block):nth-of-type(2n)::before {
    height: 5px;
    background: linear-gradient(90deg, var(--cv-navy), var(--cv-primary) 55%, var(--cv-accent));
}
body.tema-institucional .cv-card:has(> a.cv-link-block):nth-of-type(3n)::before {
    background: linear-gradient(90deg, var(--cv-primary), var(--cv-accent) 60%, var(--cv-oro));
}
body.tema-institucional .cv-card:has(> a.cv-link-block) {
    background: linear-gradient(180deg, #fff 55%, var(--cv-tinte));
}
body.tema-institucional .cv-card:has(> a.cv-link-block):hover {
    border-color: color-mix(in srgb, var(--cv-primary) 45%, var(--cv-border));
    box-shadow: 0 18px 40px color-mix(in srgb, var(--cv-primary) 18%, transparent);
}
body.tema-institucional .cv-card h3,
body.tema-institucional .cv-card h2 { color: var(--cv-navy); }

/* Paneles laterales del escritorio: cabecera con franja de color. */
body.tema-institucional .cv-panel {
    position: relative;
    overflow: hidden;
    padding-top: 1.55rem;
}
body.tema-institucional .cv-panel::before {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 0;
    height: 5px;
    background: linear-gradient(90deg, var(--cv-primary), var(--cv-accent));
}
body.tema-institucional .cv-panel-titulo { color: var(--cv-navy); }

/* ---- Pestañas del escritorio en píldora ---- */
body.tema-institucional .cv-dash-secciones {
    border-bottom: 0;
    background: rgba(255, 255, 255, .7);
    border: 1px solid var(--cv-borde-color);
    border-radius: 999px;
    padding: .3rem;
    display: inline-flex;
    gap: .25rem;
}
body.tema-institucional .cv-dash-seccion {
    border-bottom: 0;
    margin-bottom: 0;
    border-radius: 999px;
    padding: .55rem 1.1rem;
}
body.tema-institucional .cv-dash-seccion--activa {
    color: #fff;
    background: linear-gradient(120deg, var(--cv-navy), var(--cv-primary));
    box-shadow: 0 6px 16px color-mix(in srgb, var(--cv-primary) 30%, transparent);
}

/* ---- Mosaicos de acceso del curso ---- */
body.tema-institucional .cv-launcher-tile {
    background: linear-gradient(165deg, #fff 35%, var(--cv-tinte));
    border-color: var(--cv-borde-color);
    box-shadow: 0 1px 2px rgba(15, 35, 80, .05), 0 10px 24px rgba(15, 35, 80, .07);
}
body.tema-institucional .cv-launcher-tile:hover {
    border-color: color-mix(in srgb, var(--cv-primary) 50%, var(--cv-border));
    box-shadow: 0 16px 34px color-mix(in srgb, var(--cv-primary) 20%, transparent);
}
body.tema-institucional .cv-launcher-label { color: var(--cv-navy); font-weight: 700; }
body.tema-institucional .cv-launcher-icon { box-shadow: 0 8px 18px color-mix(in srgb, var(--cv-navy) 25%, transparent); }

/* ---- Progreso ---- */
body.tema-institucional .cv-progress-track {
    height: 12px;
    background: color-mix(in srgb, var(--cv-primary) 14%, #fff);
    box-shadow: inset 0 1px 2px rgba(15, 35, 80, .08);
}
body.tema-institucional .cv-progress-fill {
    background: linear-gradient(90deg, var(--cv-primary), var(--cv-accent) 70%, var(--cv-oro));
}

/* ---- Tarjetas de curso del escritorio ---- */
body.tema-institucional .cv-curso-tarjeta {
    border-color: var(--cv-borde-color);
    background: linear-gradient(180deg, #fff 60%, var(--cv-tinte));
    box-shadow: 0 1px 2px rgba(15, 35, 80, .05), 0 14px 30px rgba(15, 35, 80, .09);
}
body.tema-institucional .cv-curso-tarjeta:hover {
    border-color: color-mix(in srgb, var(--cv-primary) 45%, var(--cv-border));
    box-shadow: 0 20px 42px color-mix(in srgb, var(--cv-primary) 20%, transparent);
}
body.tema-institucional .cv-curso-portada {
    background:
        radial-gradient(240px 140px at 100% 0%, color-mix(in srgb, var(--cv-accent) 45%, transparent), transparent 65%),
        linear-gradient(150deg, var(--cv-navy), var(--cv-primary));
}
body.tema-institucional .cv-curso-titulo { color: var(--cv-navy); }

/* ---- Botones ---- */
body.tema-institucional .cv-btn {
    background: linear-gradient(120deg, var(--cv-primary), color-mix(in srgb, var(--cv-primary) 45%, var(--cv-navy)));
    color: #fff;
    border: 0;
}
body.tema-institucional .cv-btn:hover {
    background: linear-gradient(120deg, color-mix(in srgb, var(--cv-primary) 85%, #fff), var(--cv-navy));
}
body.tema-institucional .cv-btn-suave {
    background: color-mix(in srgb, var(--cv-primary) 11%, #fff);
    color: var(--cv-navy);
    border: 1px solid color-mix(in srgb, var(--cv-primary) 22%, transparent);
    box-shadow: none;
}
body.tema-institucional .cv-btn-suave:hover {
    background: color-mix(in srgb, var(--cv-primary) 18%, #fff);
    color: var(--cv-navy);
}

/* ---- Insignias de estado, más vivas ---- */
body.tema-institucional .cv-badge-pendiente { background: #fde7c4; color: #8a5300; }
body.tema-institucional .cv-badge-progreso { background: color-mix(in srgb, var(--cv-primary) 20%, #fff); color: var(--cv-primary-dark); }
body.tema-institucional .cv-badge-completa { background: #cdeedb; color: #12693a; }

/* ---- Celular: la banda del titular, más compacta ---- */
@media (max-width: 720px) {
    body.tema-institucional .cv-container > h1:first-of-type,
    body.tema-institucional .cv-container > h2:first-of-type,
    body.tema-institucional .cv-titulo { padding: 1rem 1.1rem 1rem 1.4rem; border-radius: 16px; font-size: 1.45rem; }
    body.tema-institucional .cv-dash-secciones { display: flex; border-radius: 16px; }
}

/* ---- Paneles que se abren desde la cabecera (aplicaciones y notificaciones) ----
   Son blancos: el texto vuelve a sus colores oscuros -no hereda el blanco de la cabecera-. */
body.tema-institucional .cv-lanzador-panel,
body.tema-institucional .cv-notif-panel { color: var(--cv-text); }
body.tema-institucional .cv-lanzador-app { color: var(--cv-navy); }
body.tema-institucional .cv-lanzador-etiqueta { color: var(--cv-navy); }
body.tema-institucional .cv-lanzador-titulo { color: var(--cv-text-dim); }
body.tema-institucional .cv-lanzador-curso-nombre { color: var(--cv-navy); }
body.tema-institucional .cv-lanzador-curso-nombre:hover { color: var(--cv-primary); }
body.tema-institucional .cv-lanzador-curso-accesos a {
    color: var(--cv-primary-dark);
    background: color-mix(in srgb, var(--cv-primary) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--cv-primary) 18%, transparent);
}
body.tema-institucional .cv-lanzador-curso-accesos a:hover {
    color: #fff;
    background: var(--cv-primary);
}
body.tema-institucional .cv-notif-item strong { color: var(--cv-navy); }
body.tema-institucional .cv-notif-item span,
body.tema-institucional .cv-notif-item small,
body.tema-institucional .cv-notif-vacio { color: var(--cv-text-dim); }