/* components.css — componentes compartidos (tarjetas, tablas, badges,
 * formularios, modales, drawers). Se divide por vista en Fase 1. */


        .ddhh-cipdh {
            margin-top: 50px;
            padding-top: 50px;
            border-top: 1px solid var(--linea-fina);
        }

        .ddhh-cipdh h3 {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 15px;
            color: var(--azul);
        }

        .ddhh-cipdh p {
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--azul-cobalto);
            margin-bottom: 15px;
        }

        /* ── HOME: sección DDHH en AZUL con texto/elementos en blanco ──
           Acotado a .page-home para no afectar declaracion-ddhh.html (page-ddhh),
           donde .ddhh-section es el <main> de la página. */
        .page-home .ddhh-section { background: var(--color-primary); }
        .page-home .ddhh-section .heading-secundario,
        .page-home .ddhh-section .ddhh-cipdh h3 { color: #fff; }
        .page-home .ddhh-section .texto-destacado,
        .page-home .ddhh-section .ddhh-cipdh p { color: rgba(255, 255, 255, 0.92); }
        .page-home .ddhh-section .delgada-divisor { background: rgba(255, 255, 255, 0.25); }
        .page-home .ddhh-section .ddhh-cipdh { border-top-color: rgba(255, 255, 255, 0.2); }
        .page-home .ddhh-section .link-arrow-section,
        .page-home .ddhh-section .ddhh-texto .link-arrow { color: #fff; }
        .page-home .ddhh-section .ddhh-texto .link-arrow { border-color: rgba(255, 255, 255, 0.5); }
        .page-home .ddhh-section .arrow-icon g { stroke: #fff; }
        /* Hover mantiene el dorado (resaltado permitido en hover) */
        .page-home .ddhh-section .link-arrow-section:hover,
        .page-home .ddhh-section .ddhh-texto .link-arrow:hover { color: var(--color-gold); }
        .page-home .ddhh-section .ddhh-texto .link-arrow:hover { border-color: var(--color-gold); }
        .page-home .ddhh-section .link-arrow-section:hover .arrow-icon g { stroke: var(--color-gold); }

        /* --- 5.5 SECCIÓN CIPDH (Imagen + Texto lado a lado) --- */
        .cipdh-section {
            padding: 120px 0;
            background: var(--color-bg);
        }

        .cipdh-content {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center;
        }

        .cipdh-image {
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 400px;
        }

        .cipdh-image img {
            max-width: 100%;
            max-height: 400px;
            object-fit: contain;
            filter: drop-shadow(0 10px 30px rgba(0,0,0,0.08));
            transition: transform 0.3s ease;
        }

        .cipdh-image:hover img {
            transform: scale(1.05);
        }

        .cipdh-text h2 {
            margin-top: 0;
            margin-bottom: 20px;
        }

        .cipdh-text p {
            font-size: 1rem;
            line-height: 1.6;
            color: var(--azul-cobalto);
            margin-bottom: 15px;
        }

        .cipdh-text .texto-destacado {
            color: var(--azul);
            font-weight: 600;
            margin-bottom: 20px;
        }

        .cipdh-text .link-arrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            margin-top: 20px;
            font-weight: 800;
            font-size: 12px;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--azul);
            border-bottom: 1px solid var(--azul);
            padding-bottom: 5px;
            transition: all 0.3s;
        }

        .cipdh-text .link-arrow:hover {
            color: var(--color-gold);
            border-color: var(--color-gold);
            gap: 15px;
        }

        @media (max-width: 1024px) {
            .cipdh-content {
                grid-template-columns: 1fr;
                gap: 40px;
            }

            .cipdh-image {
                min-height: 300px;
            }

            .cipdh-image img {
                max-height: 300px;
            }
        }

        @media (max-width: 768px) {
            .cipdh-section { padding: 60px 0; }

            .cipdh-content {
                gap: 30px;
            }

            .cipdh-text h2 {
                font-size: 1.8rem;
            }
        }

        /* --- 6. NOVEDADES (CARDS CUADRADAS EN FILA) --- */
        .novedades-section { padding: 100px 0; background: #ffffff; }

        /* --- 6.5 PUBLICACIONES (REDISEÑO CHECKBOX) --- */
        .publicaciones-section { padding: 100px 0; background: var(--blanco); }
        .publicaciones-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }

        /* ⚠ OBSOLETO — las clases .pub-card* fueron migradas a .ds-card--publication
           (sistema canónico, ver §CARD). Se conservan aquí como referencia; ya no
           las usa ningún HTML. NO editar para cambios de estilo: modificá .ds-card. */
        .pub-card {
            background: transparent;
            border: none;
            border-bottom: 1px solid #e0e0e0;
            border-radius: 0;
            overflow: hidden;
            box-shadow: none;
            transition: background 0.3s ease;
            padding: 30px 0;
        }

        .pub-card:last-child {
            border-bottom: none;
        }

        .pub-card:hover {
            background: #fafafa;
        }

        .pub-card-checkbox {
            display: none;
        }

        .pub-card-toggle {
            display: contents;
        }

        .pub-card-main {
            display: grid;
            grid-template-columns: 220px 1fr auto;
            gap: 24px;
            padding: 0;
            cursor: pointer;
            align-items: start;
        }

        .pub-card-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 15px;
            width: 100%;
        }

        .pub-card-title-wrapper {
            flex: 1;
        }

        .pub-card-svg {
            flex-shrink: 0;
            cursor: pointer;
            transition: transform 0.3s ease;
            margin-top: 2px;
        }

        .pub-card-svg:hover {
            transform: scale(1.1);
        }

        .pub-card-image {
            width: 220px;
            height: 160px;
            background: linear-gradient(135deg, var(--azul) 0%, var(--azul-cobalto) 100%);
            border-radius: 6px;
            overflow: hidden;
            position: relative;
            border: none;
            flex-shrink: 0;
        }

        .pub-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
        }

        .pub-card:hover .pub-card-image img {
            transform: scale(1.05);
        }

        .pub-card-image::after {
            display: none;
        }

        .pub-card-badge {
            position: static !important;
            top: auto !important;
            left: auto !important;
            background: var(--blanco) !important;
            color: var(--azul) !important;
            padding: 5px 11px !important;
            border-radius: 3px !important;
            font-size: 0.65rem !important;
            font-weight: 700 !important;
            text-transform: uppercase !important;
            z-index: auto !important;
        }

        .pub-card-content {
            display: flex;
            flex-direction: column;
            gap: 8px;
            flex: 1;
        }

        .pub-card-badge {
            margin-bottom: 0;
        }

        .pub-card-badge {
            display: inline-block;
            background: var(--blanco);
            color: var(--azul);
            padding: 6px 12px;
            border-radius: 4px;
            font-size: 0.7rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            width: fit-content;
        }

        .pub-card-title {
            font-size: 1.5rem;
            font-weight: 800;
            color: var(--azul);
            line-height: 1.3;
            margin: 0;
        }

        .pub-card-text {
            font-size: 1rem;
            color: #4a4a4a;
            line-height: 1.6;
            margin: 0;
        }

        .pub-card-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.75rem;
            color: var(--azul-cobalto);
            font-weight: 600;
        }

        .pub-card-toggle svg {
            width: 24px;
            height: 24px;
            color: var(--azul);
            transition: transform 0.4s ease;
        }

        .pub-card:has(.pub-card-checkbox:checked) .pub-card-toggle svg {
            transform: rotate(180deg);
            color: var(--amarillo);
        }

        .pub-card-toggle:hover svg {
            color: var(--amarillo);
        }

        .pub-card-link {
            margin-top: auto;
            padding-top: 10px;
        }

        .pub-link-button {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--azul);
            font-weight: 700;
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            text-decoration: none;
            transition: all 0.3s ease;
            border-bottom: 2px solid transparent;
        }

        .pub-link-button:hover {
            color: var(--amarillo);
            border-bottom-color: var(--amarillo);
            padding-left: 5px;
        }

        .pub-link-button i {
            font-size: 0.7rem;
        }

        /* Contenido expandible */
        .pub-chapters {
            grid-column: 1 / -1;
            padding: 0;
            background: #f8f9fa;
            border-top: 2px solid var(--linea-fina);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.4s ease;
            opacity: 0;
        }

        .pub-card:has(.pub-card-checkbox:checked) .pub-chapters {
            max-height: 600px;
            padding: 24px;
            opacity: 1;
        }

        .pub-sheet-expanded {
            margin-bottom: 30px;
        }

        .pub-sheet-expanded:last-child {
            margin-bottom: 0;
        }

        .chapters-title {
            font-size: 1rem;
            font-weight: 800;
            color: var(--azul);
            margin-bottom: 16px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .pub-sheet {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .sheet-row {
            display: grid;
            grid-template-columns: 140px 1fr;
            gap: 16px;
        }

        .sheet-label {
            font-weight: 700;
            font-size: 0.8rem;
            color: var(--azul);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .sheet-value {
            font-size: 0.85rem;
            color: var(--azul-cobalto);
        }

        .badge-group {
            display: flex;
            gap: 8px;
            flex-wrap: wrap;
        }

        .theme-badge, .tag-badge {
            display: inline-block;
            background: var(--gris-claro);
            color: var(--azul);
            padding: 4px 8px;
            border-radius: 4px;
            font-size: 0.75rem;
            font-weight: 600;
        }

        .theme-badge {
            border-left: 2px solid var(--amarillo);
        }

        .tag-badge::before {
            content: '#';
        }

        .chapters-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .chapters-list li {
            margin: 0;
        }

        .chapters-list a {
            color: var(--azul);
            text-decoration: none;
            font-size: 0.85rem;
            font-weight: 600;
            transition: all 0.3s;
            padding: 6px 10px;
            display: block;
            border-left: 2px solid transparent;
        }

        .chapters-list a:hover {
            color: var(--amarillo);
            border-left-color: var(--amarillo);
            background: rgba(62, 90, 126, 0.12);
        }

        /* --- LINK-ARROW ANIMADO (sin fondo, solo flecha) --- */
        .link-arrow-section {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            text-decoration: none;
            color: var(--azul);
            font-weight: 600;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            transition: color 0.3s ease;
        }

        .link-arrow-section:hover {
            color: var(--color-gold);
        }

        /* ── Ícono de flecha con círculo animado ──
           COMPARTIDO por .link-arrow-section, .link-arrow y .pf-back.
           Hover: el ícono se desplaza, el círculo se dibuja (stroke-dashoffset)
           y el trazo pasa a dorado. Markup: <svg class="arrow-icon">…
           <circle class="arrow-icon--circle"> + <path class="arrow-icon--arrow">.
           Para "Volver" agregar la clase .arrow-icon--back (invierte la flecha). */
        .arrow-icon {
            position: relative;
            width: 32px;
            height: 32px;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.3s ease;
        }
        .arrow-icon g { transition: stroke 0.3s ease; }
        .arrow-icon--circle {
            stroke-dasharray: 95;
            stroke-dashoffset: 95;
            transition: stroke-dashoffset 0.4s ease;
        }
        /* Flecha hacia la izquierda (botones "Volver") */
        .arrow-icon--back g { transform: scaleX(-1); transform-origin: 16px 16px; }

        /* Desplazamiento del ícono */
        .link-arrow-section:hover .arrow-icon,
        .link-arrow:hover .arrow-icon { transform: translate3d(5px, 0, 0); }
        .pf-back:hover .arrow-icon { transform: translate3d(-5px, 0, 0); }
        /* Dibujado del círculo */
        .link-arrow-section:hover .arrow-icon--circle,
        .link-arrow:hover .arrow-icon--circle,
        .pf-back:hover .arrow-icon--circle { stroke-dashoffset: 0; }
        /* Trazo → dorado */
        .link-arrow-section:hover .arrow-icon g,
        .link-arrow:hover .arrow-icon g,
        .pf-back:hover .arrow-icon g { stroke: var(--color-accent); }
        /* Tamaño compacto del ícono dentro de enlaces inline */
        .link-arrow .arrow-icon,
        .pf-back .arrow-icon { width: 22px; height: 22px; }

        /* ── Utilidad global: enlace inline con flecha ──
           Misma animación de círculo que link-arrow-section (versión compacta).
           Para "Leer más", "Ver proyecto", "Conocer más", "Ir al aula", etc.
           Usar con el <svg class="arrow-icon"> (círculo animado) o, en su defecto,
           con <i class="fas fa-arrow-right"></i> (solo desplazamiento). */
        .link-arrow {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            color: var(--color-primary);
            font-weight: 700;
            text-decoration: none;
            cursor: pointer;
            transition: color .3s ease, gap .3s ease;
        }
        .link-arrow i { transition: transform .3s ease; }
        .link-arrow:hover {
            color: var(--color-gold);
            gap: 12px;
        }
        .link-arrow:hover i { transform: translateX(4px); }
        /* Variante sobre fondo oscuro: parte en blanco, igual va a dorado */
        .link-arrow--light { color: #fff; }
        .link-arrow--light:hover { color: var(--color-gold); }

        .novedades-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

        /* .news-card → migrado a .ds-card (grilla de novedades del home) */
        .meta-data { font-size: 0.7rem; text-transform: uppercase; color: var(--azul-cobalto); letter-spacing: 0.5px; margin-bottom: 8px; display: block; font-weight: 700;}

        /* --- 7. PROYECTOS (Diseño WordPress) --- */
        .proyectos-section { padding: 100px 0; background: #ffffff; }

        /* Grilla de proyectos — misma que .proy-grid de proyectos.html */
        .proyectos-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 30px;
            margin-bottom: 80px;
        }

        /* .proyecto-card → migrado a .ds-card (sistema canónico) */

        /* --- 9. OPTIMIZACIÓN RESPONSIVE --- */
        @media (max-width: 1024px) {
            .novedades-grid { grid-template-columns: repeat(2, 1fr); }
            .publicaciones-grid { grid-template-columns: 1fr; }
            .logo img { height: 70px; }
        }

        @media (max-width: 768px) {
            .novedades-grid { grid-template-columns: repeat(2, 1fr); }
        }

        @media (max-width: 480px) {
            .novedades-grid { grid-template-columns: 1fr; }
        }

        @media (max-width: 768px) {
            .heading-display { font-size: 3rem; }
            .heading-secundario { font-size: 2rem; }

            .logo img { height: 55px; }

            .pub-card-main {
                grid-template-columns: 1fr;
            }

            .pub-card-image {
                width: 100%;
                height: 200px;
            }

            .pub-card-main > svg {
                display: none;
            }

            /* Ocultar menú en móvil para usar luego un botón hamburguesa */
            ul#menu-principal-1 { display: none; }

            /* Todo pasa a 1 columna */
            .ddhh-grid, .novedades-grid, .publicaciones-grid, .proyectos-grid, 
            .footer-sitemap { grid-template-columns: 1fr 1fr; gap: 30px;}

            
            .footer-legal { justify-content: center; }
            .footer-social { justify-content: center; }

            /* Control estricto de logos en móvil */
            .logo-cipdh-footer { height: auto; max-height: 70px; }
            .logo-interes { height: auto; max-height: 40px; }
            .logo-interes-group { flex-direction: column; align-items: flex-start; }
        }
    

/* ════════════════════════════════════════════
   PAGE: DECLARACIÓN DDHH (declaracion-ddhh.html)
════════════════════════════════════════════ */
.page-ddhh { --header-h: 72px; }


    /* ══════════════════════════════════════════════════════════════
       SHARED BASE — mismo en todos los prototipos
    ══════════════════════════════════════════════════════════════ */
    
    
    
    
    
    
    .container {
        width: 80%;
        max-width: 1200px;
        margin: 0 auto;
    }

    /* ── site-header ── */
    
    
    
    
    
    
    
    
    
    
    
    
    
    

    /* ══════════════════════════════════════════════════════════════
       PÁGINA: DECLARACIÓN DDHH
    ══════════════════════════════════════════════════════════════ */


    /* sección principal */
    .ddhh-section {
        padding: 72px 0 80px;
    }

    /* ── Cards flip ──────────────────────────────────────────── */

    .articles-grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }

    /* preámbulo ocupa fila completa */
    .article-card--full {
        grid-column: 1 / -1;
    }

    /* Links de idiomas DDHH */
    .ddhh-links-section {
        margin-top: 80px;
        padding: 60px 40px;
        background: rgba(35, 45, 79, 0.08);
        border-radius: 16px;
        border: 2px solid var(--color-gold);
    }

    .ddhh-links-header {
        text-align: center;
        margin-bottom: 40px;
    }

    .ddhh-links-header h3 {
        font-size: 1.5rem;
        font-weight: 800;
        color: var(--color-primary);
        margin-bottom: 8px;
        letter-spacing: -0.5px;
    }

    .ddhh-links-header p {
        font-size: 0.95rem;
        color: #6b7688;
        font-weight: 500;
    }

    .ddhh-links-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
        gap: 16px;
    }

    .ddhh-lang-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 24px 20px;
        background: #fff;
        border: 2px solid var(--color-border);
        border-radius: 12px;
        text-decoration: none;
        color: var(--color-primary);
        transition: all 0.3s ease;
        text-align: center;
    }

    .ddhh-lang-link:hover {
        border-color: var(--color-gold);
        background: rgba(231, 186, 97, 0.08);
        transform: translateY(-4px);
        box-shadow: 0 8px 20px rgba(35, 45, 79, 0.12);
    }

    .ddhh-lang-link i {
        font-size: 1.8rem;
        color: var(--color-gold);
        transition: transform 0.3s ease;
    }

    .ddhh-lang-link:hover i {
        transform: scale(1.2);
    }

    .lang-name {
        font-weight: 800;
        font-size: 1rem;
        color: var(--color-primary);
        display: block;
    }

    .lang-label {
        font-size: 0.75rem;
        color: #9aa6b6;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    /* contenedor con perspectiva */
    .article-card {
        height: 320px;
        perspective: 1000px;
        cursor: pointer;
        transition: border-color .3s ease;
    }
    .article-card:hover {
        border-color: var(--color-gold) !important;
    }
    .article-card--full {
        height: 200px;
    }

    /* inner — el elemento que gira */
    .card-inner {
        position: relative;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        transition: transform .55s cubic-bezier(.4,0,.2,1);
    }
    .article-card.is-flipped .card-inner {
        transform: rotateY(180deg);
    }

    /* cara base */
    .card-front,
    .card-back {
        position: absolute;
        inset: 0;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        border-radius: 8px;
        overflow: hidden;
    }

    /* FRENTE */
    .card-front {
        background: var(--color-bg);
        border: 1px solid rgba(35,45,79,.1);
        display: flex;
        flex-direction: column;
    }
    /* línea superior dorada con label */
    .card-front__header {
        flex-shrink: 0;
        background: var(--color-primary);
        padding: 14px 20px 12px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .card-front__num {
        font-family: 'Montserrat', sans-serif;
        font-weight: 900;
        font-size: .7rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--color-gold);
    }
    .card-front__icon {
        color: var(--color-gold);
        font-size: .8rem;
        transition: transform .3s ease;
    }
    .article-card:hover .card-front__icon {
        transform: rotate(180deg);
    }
    /* cuerpo del frente */
    .card-front__body {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        padding: 20px 22px;
        overflow: hidden;
    }
    .card-front__title {
        font-size: .95rem;
        font-weight: 800;
        color: var(--color-primary);
        margin-bottom: 10px;
        line-height: 1.3;
    }
    .card-front__text {
        font-size: .78rem;
        color: var(--color-text-muted);
        line-height: 1.65;
        display: -webkit-box;
        -webkit-line-clamp: 7;
        line-clamp: 7;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .article-card--full .card-front__text {
        -webkit-line-clamp: 4;
        line-clamp: 4;
        font-size: .85rem;
    }
    .article-card--full .card-front__title {
        font-size: 1.05rem;
    }

    /* REVERSO */
    .card-back {
        background: var(--color-primary);
        color: var(--color-bg);
        transform: rotateY(180deg);
        display: flex;
        flex-direction: column;
        padding: 24px 22px;
    }
    .card-back__label {
        font-size: .65rem;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--color-gold);
        margin-bottom: 14px;
        display: flex;
        align-items: center;
        gap: 7px;
    }
    .card-back__title {
        display: none;
    }
    .card-back__links {
        list-style: none;
        flex: 1;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .card-back__links a {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        font-size: .76rem;
        color: rgba(255,255,255,.82);
        line-height: 1.4;
        font-weight: 500;
        transition: all .2s;
        padding: 3px 0;
    }
    .card-back__links a:hover {
        color: var(--color-gold);
        padding-left: 4px;
    }
    .card-back__links a i {
        flex-shrink: 0;
        margin-top: 2px;
        font-size: .65rem;
        color: var(--color-gold);
        transition: transform .2s;
    }
    .card-back__links a:hover i {
        transform: translate(2px, -2px);
    }
    .card-back__cta {
        margin-top: 16px;
        padding-top: 14px;
        border-top: 2px solid var(--color-gold);
        font-size: .68rem;
        color: var(--color-gold);
        text-align: center;
        font-weight: 600;
    }

    /* scroll-to-top */
    .scroll-top-btn {
        position: fixed;
        bottom: 28px;
        right: 28px;
        width: 44px;
        height: 44px;
        background: var(--color-primary);
        color: var(--color-bg);
        border: none;
        border-radius: 50%;
        cursor: pointer;
        font-size: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        visibility: hidden;
        transition: all .3s;
        z-index: 900;
        box-shadow: 0 4px 14px rgba(0,0,0,.2);
    }
    .scroll-top-btn.visible { opacity:1; visibility:visible; }
    .scroll-top-btn:hover { background: var(--color-secondary); transform:translateY(-3px); }

    /* responsive */
    @media (max-width:1024px) {
        .container { width:88%; }
        .articles-grid { grid-template-columns: repeat(2,1fr); gap:16px; }
        .footer-grid { grid-template-columns:1fr 1fr; }
        
    }
    @media (max-width:680px) {
        .container { width:92%; }
        
        
        
        .articles-grid { grid-template-columns:1fr; gap:16px; }
        .article-card, .article-card--full { height:auto; min-height:280px; }
        .footer-grid { grid-template-columns:1fr; gap:36px; }
        .footer-sitemap { grid-template-columns:1fr 1fr; }
        .footer-bottom { flex-direction:column; text-align:center; }
    }

    

/* ════════════════════════════════════════════
   PAGE: PUBLICACIONES (publicaciones-rediseno-v2.html)
════════════════════════════════════════════ */
.page-publicaciones .container { max-width: 1100px; padding: 80px 24px 60px; }

        /* ========================================================================
           VARIABLES Y RESET
           ======================================================================== */
        

        

        .container {
            max-width: 1100px;
            margin: 0 auto;
            padding: 80px 24px 60px;
        }

        /* ========================================================================
           HEADER
           ======================================================================== */
        .page-header {
            margin-bottom: 60px;
            padding-bottom: 40px;
            border-bottom: 3px solid var(--primary);
        }

        .page-header h1 {
            font-size: 3rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 16px;
            letter-spacing: -0.8px;
            display: flex;
            align-items: center;
            gap: 16px;
        }

        .page-header h1::before {
            content: '';
            display: inline-block;
            width: 6px;
            height: 48px;
            background: var(--accent);
            border-radius: 3px;
        }

        .page-header p {
            font-size: 1.1rem;
            color: var(--text-dark);
            max-width: 900px;
            line-height: 1.7;
        }

        .page-header .subtitle {
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-light);
            margin-top: 24px;
            font-weight: 700;
        }

        /* ========================================================================
           FILTROS
           ======================================================================== */
        .filter-tabs {
            display: flex;
            gap: 12px;
            margin-bottom: 48px;
            overflow-x: auto;
            padding-bottom: 8px;
        }

        .filter-tab {
            padding: 10px 20px;
            border: 2px solid var(--border);
            background: var(--bg-card);
            color: var(--text-dark);
            border-radius: 24px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.95rem;
            transition: var(--transition);
            white-space: nowrap;
        }

        .filter-tab:hover {
            border-color: var(--accent);
            color: var(--accent);
        }

        .filter-tab.active {
            background: var(--primary);
            color: #fff;
            border-color: var(--primary);
        }

        /* ========================================================================
           GRID
           ======================================================================== */
        .publications-grid {
            display: grid;
            grid-template-columns: 1fr;
            gap: 32px;
            margin-bottom: 60px;
        }

        /* ========================================================================
           CARD
           ======================================================================== */
        .pub-card {
            background: var(--bg-card);
            border-radius: var(--radius);
            overflow: visible;
            box-shadow: var(--shadow-sm);
            transition: var(--transition);
        }

        .pub-card:hover {
            box-shadow: var(--shadow-md);
        }

        .pub-card-main {
            display: grid;
            grid-template-columns: 140px 1fr auto;
            gap: 16px;
            padding: 16px;
            align-items: center;
        }

        .pub-card:hover {
            box-shadow: var(--shadow-hover);
        }

        .pub-card-image {
            width: 100%;
            height: 140px;
            background: linear-gradient(135deg, #232D4F 0%, #3E5A7E 100%);
            overflow: hidden;
            position: relative;
            border-radius: var(--radius);
        }

        .pub-card-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }

        .pub-card:hover .pub-card-image img {
            transform: scale(1.05);
        }

        .pub-card-image::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(135deg, rgba(35, 45, 79, 0.3) 0%, rgba(62, 90, 126, 0.3) 100%);
            pointer-events: none;
        }

        .pub-card-content {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .pub-card-badge {
            display: inline-block;
            background: var(--accent);
            color: var(--primary);
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.65rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            width: fit-content;
        }

        .pub-card-title {
            font-size: 1rem;
            font-weight: 800;
            color: var(--primary);
            line-height: 1.3;
            margin: 0;
        }

        .pub-card-text {
            font-size: 0.8rem;
            color: var(--text-dark);
            line-height: 1.4;
            margin: 0;
        }

        .pub-card-meta {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.75rem;
            color: var(--text-light);
            font-weight: 600;
        }

        .pub-card-chapters {
            font-size: 0.75rem;
            color: var(--text-light);
            font-weight: 600;
        }

        .pub-card-toggle {
            cursor: pointer;
            display: contents;
        }

        .pub-card-toggle svg {
            width: 24px;
            height: 24px;
            color: var(--primary);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .pub-card:has(.pub-card-checkbox:checked) .pub-card-toggle svg {
            transform: rotate(180deg);
            color: var(--accent);
        }

        .pub-card-toggle:hover svg {
            color: var(--accent);
        }


        /* ========================================================================
           CAPÍTULOS EXPANDIBLES - CON CHECKBOX
           ======================================================================== */
        .pub-card-checkbox {
            display: none;
        }

        .pub-chapters {
            grid-column: 1 / -1;
            padding: 0;
            background: #f8fafc;
            border-top: 2px solid var(--border);
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                        padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                        opacity 0.4s ease-out;
            opacity: 0;
        }

        .pub-card:has(.pub-card-checkbox:checked) .pub-chapters {
            max-height: 500px;
            padding: 24px;
            opacity: 1;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .pub-card:has(.pub-card-checkbox:not(:checked)) .pub-sheet-expanded {
            opacity: 0;
            transform: translateY(-10px);
        }

        .pub-card:has(.pub-card-checkbox:checked) .pub-sheet-expanded {
            opacity: 1;
            transform: translateY(0);
            transition: opacity 0.4s ease-out 0.1s, transform 0.4s ease-out 0.1s;
        }

        .pub-sheet-expanded:nth-child(2) {
            transition-delay: 0.15s;
        }

        .chapters-title {
            font-size: 0.9rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .pub-sheet-expanded {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .chapters-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .chapters-list li {
            margin-bottom: 0;
        }

        .chapters-list a {
            color: var(--text-dark);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.85rem;
            display: block;
            padding: 10px 12px;
            border: 1px solid var(--border);
            border-radius: 6px;
            margin-bottom: 8px;
            background: #f9f9f9;
            transition: var(--transition);
        }

        .chapters-list a:hover {
            color: white;
            background: var(--primary);
            border-color: var(--primary);
            transform: translateX(4px);
        }

        /* ========================================================================
           PAGINACIÓN
           ======================================================================== */
        .pagination {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
            margin: 60px 0;
        }

        .pagination-btn {
            min-width: 40px;
            height: 40px;
            padding: 0 12px;
            border: 2px solid var(--border);
            background: var(--bg-card);
            color: var(--text-dark);
            border-radius: 6px;
            cursor: pointer;
            font-weight: 600;
            font-size: 0.9rem;
            transition: var(--transition);
        }

        .pagination-btn:hover:not(.disabled) {
            border-color: var(--accent);
            color: var(--accent);
        }

        .pagination-btn.active {
            background: var(--primary);
            border-color: var(--primary);
            color: #fff;
        }

        .pagination-btn.disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* ========================================================================
           HISTÓRICO
           ======================================================================== */
        .historical-section {
            padding-top: 60px;
            border-top: 3px solid var(--primary);
            margin-top: 80px;
        }

        .historical-section h2 {
            font-size: 2rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 40px;
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .historical-section h2::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 32px;
            background: var(--accent);
            border-radius: 2px;
        }

        .historical-year-group {
            display: flex;
            padding: 30px 0;
            border-bottom: 1px solid var(--border);
        }

        .historical-year-group:first-of-type {
            border-top: 1px solid var(--border);
        }

        .historical-year-label {
            width: 150px;
            font-size: 1.8rem;
            font-weight: 900;
            color: var(--text-light);
            flex-shrink: 0;
            line-height: 1.2;
        }

        .historical-links-container {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .historical-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-dark);
            text-decoration: none;
            font-size: 1.1rem;
            font-weight: 600;
            transition: var(--transition);
        }

        .historical-item::after {
            content: '→';
            font-weight: 300;
            opacity: 0;
            transform: translateX(-10px);
            transition: var(--transition);
            color: var(--primary);
        }

        .historical-item:hover {
            color: var(--primary);
            padding-left: 8px;
        }

        .historical-item:hover::after {
            opacity: 1;
            transform: translateX(0);
        }

        /* ========================================================================
           FICHA TÉCNICA
           ======================================================================== */
        .pub-sheet {
            background: #f8fafc;
            border-radius: var(--radius);
            padding: 12px;
            margin-top: 12px;
            font-size: 0.8rem;
        }

        .sheet-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 6px;
            margin-bottom: 8px;
        }

        .sheet-row:last-child {
            margin-bottom: 0;
        }

        .sheet-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-light);
            font-weight: 700;
        }

        .sheet-value {
            color: var(--text-dark);
            font-weight: 600;
            font-size: 0.75rem;
        }

        .badge-group {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .theme-badge {
            background: var(--accent);
            color: var(--primary);
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 0.65rem;
            font-weight: 700;
        }

        .tag-badge {
            background: white;
            border: 1px solid var(--accent);
            color: var(--accent);
            padding: 2px 6px;
            border-radius: 10px;
            font-size: 0.65rem;
            font-weight: 600;
        }

        /* ========================================================================
           RESPONSIVE
           ======================================================================== */
        @media (max-width: 768px) {
            .container {
                padding: 60px 16px 40px;
            }

            .page-header h1 {
                font-size: 2rem;
            }

            .publications-grid {
                grid-template-columns: 1fr;
                gap: 24px;
            }


            .filter-tabs {
                gap: 8px;
            }

            .filter-tab {
                padding: 8px 16px;
                font-size: 0.85rem;
            }

            .historical-year-group {
                flex-direction: column;
                gap: 16px;
            }

            .historical-year-label {
                width: 100%;
                font-size: 1.5rem;
                border-bottom: 2px solid var(--primary);
                padding-bottom: 4px;
                color: var(--primary);
            }

            .historical-item::after {
                display: none;
            }

            .historical-item:hover {
                padding-left: 0;
            }
        }
            
        
        

        
        
        
        
        
        

        

        
        
        @media (max-width: 1024px) {

            }

        @media (max-width: 768px) {
            
            
            
        }

            
        

        @media (max-width: 768px) {
        }

        /* ── Archivo Histórico ─────────────────────────────── */
        .historico-section {
            margin-top: 64px;
            padding-top: 48px;
            border-top: 2px solid var(--primary, #232D4F);
        }
        .historico-section h2 {
            font-size: 1.1rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 1.5px;
            color: var(--primary, #232D4F);
            margin-bottom: 28px;
        }
        .historico-list {
            list-style: none;
            padding: 0;
            margin: 0;
            display: flex;
            flex-direction: column;
        }
        .historico-item {
            display: grid;
            grid-template-columns: 1fr auto;
            align-items: baseline;
            gap: 16px;
            padding: 14px 0;
            border-bottom: 1px solid rgba(35,45,79,.1);
            text-decoration: none;
            color: inherit;
            transition: background .2s;
        }
        .historico-item:first-child { border-top: 1px solid rgba(35,45,79,.1); }
        .historico-item:hover { background: rgba(35,45,79,.03); padding-left: 6px; }
        .historico-item__title {
            font-size: .95rem;
            font-weight: 700;
            color: var(--primary, #232D4F);
            line-height: 1.3;
        }
        .historico-item__meta {
            display: flex;
            gap: 10px;
            align-items: center;
            flex-shrink: 0;
        }
        .historico-item__year {
            font-size: .75rem;
            font-weight: 700;
            color: rgba(35,45,79,.5);
        }
        .historico-item__badge {
            font-size: .65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .5px;
            padding: 3px 8px;
            border-radius: 3px;
            background: rgba(62,90,126,.14);
            color: var(--color-accent);
        }
        .historico-item__arrow {
            color: var(--color-accent);
            font-size: .75rem;
            transition: transform .2s;
        }
        .historico-item:hover .historico-item__arrow { transform: translateX(4px); }
    

/* ════════════════════════════════════════════
   PAGE: ADMIN PUBLICACIONES (admin-publicaciones.html)
════════════════════════════════════════════ */
.page-admin .container { max-width: 1600px; padding: 20px; }

        

        

        .container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 20px;
        }

        /* ========================================================================
           HEADER
           ======================================================================== */
        .admin-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            padding: 20px;
            background: var(--bg-card);
            border-radius: var(--radius);
            box-shadow: var(--shadow-sm);
            border-left: 6px solid var(--primary);
        }

        .admin-header h1 {
            font-size: 1.8rem;
            font-weight: 900;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 12px;
        }

        .admin-header h1::before {
            content: '✎';
            font-size: 1.5rem;
            color: var(--accent);
        }

        .admin-actions {
            display: flex;
            gap: 12px;
        }

        .btn {
            padding: 10px 20px;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            font-weight: 700;
            font-size: 0.9rem;
            transition: var(--transition);
            border: 2px solid transparent;
        }

        .btn-primary {
            background: var(--primary);
            color: white;
        }

        .btn-primary:hover {
            background: #1a1f3a;
        }

        .btn-secondary {
            background: transparent;
            border: 2px solid var(--border);
            color: var(--text-dark);
        }

        .btn-secondary:hover {
            border-color: var(--primary);
            color: var(--primary);
        }

        .btn-success {
            background: var(--success);
            color: #fff;
        }

        .btn-success:hover {
            background: #166b3c;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(29,138,78,.28);
        }

        .btn-danger {
            background: var(--error);
            color: #fff;
        }

        .btn-danger:hover {
            background: #9c2c20;
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(192,57,43,.28);
        }

        .btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        /* ========================================================================
           LAYOUT - 2 COLUMNAS
           ======================================================================== */
        .editor-layout {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
            min-height: 800px;
        }

        /* ========================================================================
           PANEL IZQUIERDO - EDITOR
           ======================================================================== */
        .editor-panel {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 30px;
            box-shadow: var(--shadow-sm);
            overflow-y: auto;
            max-height: 80vh;
        }

        .section {
            margin-bottom: 40px;
            padding-bottom: 30px;
            border-bottom: 1px solid var(--border);
        }

        .section:last-child {
            border-bottom: none;
        }

        .section-title {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .section-title::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 20px;
            background: var(--accent);
            border-radius: 2px;
        }

        /* Form Groups */
        .form-group {
            margin-bottom: 16px;
        }

        .form-group label {
            display: block;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 6px;
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .form-group input,
        .form-group select,
        .form-group textarea {
            width: 100%;
            padding: 10px 12px;
            border: 2px solid var(--border);
            border-radius: 6px;
            font-family: var(--font-main);
            font-size: 0.95rem;
            transition: var(--transition);
            color: var(--text-dark);
        }

        .form-group input:focus,
        .form-group select:focus,
        .form-group textarea:focus {
            outline: none;
            border-color: var(--accent);
            box-shadow: 0 0 0 3px rgba(62, 90, 126, 0.12);
        }

        .form-group textarea {
            resize: vertical;
            min-height: 100px;
            font-family: monospace;
        }

        .form-group small {
            display: block;
            color: var(--text-light);
            font-size: 0.8rem;
            margin-top: 4px;
        }

        /* Image Upload */
        .image-upload {
            border: 2px dashed var(--border);
            border-radius: 6px;
            padding: 20px;
            text-align: center;
            cursor: pointer;
            transition: var(--transition);
        }

        .image-upload:hover {
            border-color: var(--accent);
            background: rgba(62, 90, 126, 0.07);
        }

        .image-upload img {
            max-width: 100%;
            max-height: 200px;
            margin-top: 10px;
            border-radius: 6px;
        }

        /* Chapters List */
        .chapters-list {
            list-style: none;
        }

        .chapter-item {
            background: #f8fafc;
            padding: 16px;
            border-radius: 6px;
            margin-bottom: 12px;
            border-left: 4px solid var(--accent);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .chapter-item-title {
            font-weight: 700;
            color: var(--text-dark);
            flex-grow: 1;
        }

        .chapter-item-number {
            font-size: 0.8rem;
            color: var(--text-light);
            background: white;
            padding: 4px 8px;
            border-radius: 4px;
            margin-right: 8px;
        }

        .chapter-item-actions {
            display: flex;
            gap: 6px;
        }

        .chapter-item-actions button {
            padding: 6px 12px;
            font-size: 0.8rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: var(--transition);
        }

        .chapter-edit {
            background: var(--accent);
            color: var(--primary);
            font-weight: 700;
        }

        .chapter-delete {
            background: var(--error);
            color: white;
            font-weight: 700;
        }

        /* Add Chapter */
        .add-chapter {
            display: flex;
            gap: 8px;
            margin-top: 12px;
        }

        .add-chapter input {
            flex-grow: 1;
            padding: 10px 12px;
            border: 2px solid var(--border);
            border-radius: 6px;
            font-size: 0.95rem;
        }

        /* ========================================================================
           PANEL DERECHO - PREVIEW
           ======================================================================== */
        .preview-panel {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 30px;
            box-shadow: var(--shadow-sm);
            overflow-y: auto;
            max-height: 80vh;
            border: 2px solid var(--accent);
        }

        .preview-header {
            font-size: 0.9rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--accent);
            font-weight: 800;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .preview-header::before {
            content: '👁';
        }

        /* Preview Content */
        .preview-content {
            background: var(--bg-page);
            border-radius: var(--radius);
            padding: 24px;
        }

        .preview-publication-title {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 12px;
        }

        .preview-publication-meta {
            display: flex;
            gap: 16px;
            margin-bottom: 20px;
            font-size: 0.9rem;
            color: var(--text-light);
        }

        .preview-badge {
            background: var(--accent);
            color: var(--primary);
            padding: 6px 12px;
            border-radius: 20px;
            font-weight: 700;
            font-size: 0.75rem;
            text-transform: uppercase;
        }

        .preview-description {
            font-size: 0.95rem;
            color: var(--text-dark);
            line-height: 1.6;
            margin-bottom: 24px;
        }

        .preview-chapters-count {
            background: var(--primary);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            display: inline-block;
            font-weight: 700;
            font-size: 0.85rem;
        }

        /* ========================================================================
           MODAL
           ======================================================================== */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1000;
            align-items: center;
            justify-content: center;
        }

        .modal.active {
            display: flex;
        }

        .modal-content {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 40px;
            max-width: 600px;
            width: 90%;
            max-height: 80vh;
            overflow-y: auto;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
        }

        .modal-header {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 24px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .modal-close {
            position: absolute;
            top: 16px;
            right: 16px;
            background: transparent;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-light);
            transition: var(--transition);
        }

        .modal-close:hover {
            color: var(--primary);
        }

        .modal-actions {
            display: flex;
            gap: 12px;
            margin-top: 24px;
            justify-content: flex-end;
        }

        /* TABS */
        .tabs {
            display: flex;
            gap: 8px;
            margin-bottom: 24px;
            border-bottom: 2px solid var(--border);
        }

        .tab-btn {
            padding: 12px 16px;
            border: none;
            background: transparent;
            color: var(--text-light);
            cursor: pointer;
            font-weight: 700;
            font-size: 0.9rem;
            transition: var(--transition);
            border-bottom: 3px solid transparent;
            margin-bottom: -2px;
        }

        .tab-btn.active {
            color: var(--primary);
            border-bottom-color: var(--accent);
        }

        .tab-content {
            display: none;
        }

        .tab-content.active {
            display: block;
        }

        /* SECCIONES LIST */
        .sections-list {
            list-style: none;
            background: #f8fafc;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 16px;
        }

        .section-item {
            padding: 12px;
            border-bottom: 1px solid var(--border);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .section-item:last-child {
            border-bottom: none;
        }

        .section-item-text {
            flex-grow: 1;
        }

        .section-item-label {
            font-size: 0.75rem;
            color: var(--text-light);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 700;
            margin-bottom: 2px;
        }

        .section-item-title {
            font-weight: 700;
            color: var(--primary);
            font-size: 0.95rem;
        }

        .form-group.inline {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
        }

        .form-group.inline > div {
            margin-bottom: 0;
        }

        /* EDITOR DE TEXTO ENRIQUECIDO */
        .rich-editor {
            border: 2px solid var(--border);
            border-radius: 6px;
            overflow: hidden;
        }

        .editor-toolbar {
            display: flex;
            gap: 4px;
            padding: 8px;
            background: #f8fafc;
            border-bottom: 1px solid var(--border);
            flex-wrap: wrap;
        }

        .editor-btn {
            padding: 6px 10px;
            border: 1px solid var(--border);
            background: white;
            color: var(--text-dark);
            border-radius: 4px;
            cursor: pointer;
            font-size: 0.8rem;
            font-weight: 600;
            transition: var(--transition);
        }

        .editor-btn:hover {
            background: var(--accent);
            color: var(--primary);
            border-color: var(--accent);
        }

        .editor-content {
            min-height: 200px;
            padding: 12px;
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--text-dark);
            background: white;
            border: none;
            resize: vertical;
            font-family: var(--font-main);
            overflow-y: auto;
            outline: none;
        }

        .editor-content:focus {
            background: #fffbf5;
        }

        .preview-editor {
            background: #f8fafc;
            border: 1px solid var(--border);
            border-radius: 6px;
            padding: 12px;
            min-height: 80px;
            margin-top: 12px;
            font-size: 0.9rem;
            color: var(--text-dark);
            line-height: 1.6;
        }

        /* PREVIEW CAPÍTULO */
        .preview-chapter-type {
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--accent);
            font-weight: 800;
            margin-bottom: 12px;
        }

        .preview-section-item {
            margin-bottom: 20px;
            padding-bottom: 16px;
            border-bottom: 1px solid var(--border);
        }

        .preview-section-item:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .preview-section-title {
            font-size: 1.1rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 10px;
        }

        .preview-section-content {
            font-size: 0.9rem;
            color: var(--text-dark);
            line-height: 1.6;
        }

        /* ========================================================================
           RESPONSIVE
           ======================================================================== */
        @media (max-width: 1200px) {
            .editor-layout {
                grid-template-columns: 1fr;
            }

            .editor-panel,
            .preview-panel {
                max-height: none;
            }
        }

        @media (max-width: 768px) {
            .admin-header {
                flex-direction: column;
                align-items: flex-start;
                gap: 16px;
            }

            .admin-actions {
                width: 100%;
            }

            .admin-actions button {
                flex: 1;
            }

            .section-title {
                font-size: 1rem;
            }

            .modal-content {
                width: 95%;
                padding: 24px;
            }
        }
            
        
        

        
        
        
        
        
        

        

        
        
        @media (max-width: 1024px) {

            }

        @media (max-width: 768px) {
            
            
            
        }

            
        

        @media (max-width: 768px) {
            

            }
    

/* ════════════════════════════════════════════
   PAGE: CAPITULOS VIEWER (capitulos-viewer-v2.html)
════════════════════════════════════════════ */
.page-capitulos .container { width: 80%; max-width: 1400px; padding: 20px; }

        

        

        .container {
            width: 80%;
            max-width: 1400px;
            margin: 0 auto;
            padding: 20px;
        }

        @media (max-width: 1024px) {
            .container {
                width: 90%;
                padding: 16px;
            }
        }

        @media (max-width: 768px) {
            .container {
                width: 100%;
                padding: 12px;
            }
        }

        /* ========================================================================
           HEADER
           ======================================================================== */
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 40px;
            padding-bottom: 20px;
            border-bottom: 3px solid var(--primary);
        }

        .header-left h1 {
            font-size: 1.8rem;
            font-weight: 900;
            color: var(--primary);
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 8px;
        }

        .header-left h1::before {
            content: '';
            display: inline-block;
            width: 4px;
            height: 28px;
            background: var(--accent);
            border-radius: 2px;
        }

        .header-left p {
            font-size: 0.9rem;
            color: var(--text-light);
            margin: 0;
        }

        .header-right a {
            color: var(--primary);
            text-decoration: none;
            font-weight: 700;
            padding: 10px 20px;
            border: 2px solid var(--primary);
            border-radius: 24px;
            transition: var(--transition);
        }

        .header-right a:hover {
            background: var(--primary);
            color: white;
        }

        /* ========================================================================
           MAIN LAYOUT - 2 COLUMNAS
           ======================================================================== */
        .main-layout {
            display: grid;
            grid-template-columns: 320px 1fr;
            gap: 30px;
            min-height: 600px;
        }

        /* ========================================================================
           SIDEBAR COMBINADO (Publicación + Contenidos)
           ======================================================================== */
        .sidebar-combined {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 0;
            box-shadow: var(--shadow-sm);
            height: fit-content;
            position: sticky;
            top: 20px;
            overflow: hidden;
        }

        /* Sección desplegable - Publicación */
        .sidebar-section {
            border-bottom: 1px solid var(--border);
        }

        .sidebar-section:last-child {
            border-bottom: none;
        }

        .section-toggle {
            width: 100%;
            padding: 20px;
            background: transparent;
            border: none;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            transition: var(--transition);
            font-weight: 700;
            color: var(--primary);
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .section-toggle:hover {
            background: #f8fafc;
        }

        .section-toggle::after {
            content: '▼';
            font-size: 0.8rem;
            transition: transform 0.3s ease;
            color: var(--text-light);
        }

        .section-toggle.collapsed::after {
            transform: rotate(-90deg);
        }

        .section-content {
            max-height: 1000px;
            overflow: hidden;
            transition: max-height 0.3s ease, padding 0.3s ease;
            padding: 0 20px 20px;
        }

        .section-content.collapsed {
            max-height: 0;
            padding: 0 20px;
            overflow: hidden;
        }

        /* Contenido de Publicación */
        .publication-info {
            font-size: 0.85rem;
        }

        .publication-title {
            font-size: 1rem;
            font-weight: 800;
            color: var(--primary);
            margin-bottom: 12px;
            line-height: 1.3;
        }

        .publication-meta {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .publication-meta-item {
            font-size: 0.85rem;
            color: var(--text-light);
        }

        .publication-meta-item strong {
            color: var(--text-dark);
            display: block;
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 3px;
        }

        /* Ficha Técnica */
        .publication-sheet {
            background: #f8fafc;
            border-radius: var(--radius);
            padding: 12px;
            margin-top: 16px;
            font-size: 0.8rem;
        }

        .sheet-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin-bottom: 8px;
        }

        .sheet-row:last-child {
            margin-bottom: 0;
        }

        .sheet-label {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--text-light);
            font-weight: 700;
        }

        .sheet-value {
            color: var(--text-dark);
            font-weight: 600;
        }

        .badge-group {
            display: flex;
            flex-wrap: wrap;
            gap: 4px;
        }

        .theme-badge {
            background: var(--primary);
            color: #fff;
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 700;
        }

        .tag-badge {
            background: white;
            border: 1px solid var(--primary);
            color: var(--primary);
            padding: 3px 8px;
            border-radius: 12px;
            font-size: 0.7rem;
            font-weight: 600;
        }

        /* Contenido de Índice */
        .chapters-nav {
            list-style: none;
        }

        .chapters-nav li {
            margin-bottom: 0;
        }

        .chapters-nav a {
            display: block;
            padding: 10px 12px;
            color: var(--text-dark);
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            transition: var(--transition);
            border-left: 4px solid transparent;
            line-height: 1.3;
        }

        .chapters-nav a:hover,
        .chapters-nav a.active {
            color: var(--primary);
            background: #f8fafc;
            border-left-color: var(--primary);
            padding-left: 16px;
        }

        /* ========================================================================
           CONTENIDO PRINCIPAL
           ======================================================================== */
        .main-content {
            background: var(--bg-card);
            border-radius: var(--radius);
            padding: 40px;
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            min-height: calc(100vh - 220px);
        }

        /* Imagen del capítulo */
        .chapter-image {
            width: 100%;
            max-height: 200px;
            margin-bottom: 24px;
            border-radius: var(--radius);
            overflow: hidden;
            box-shadow: var(--shadow-md);
        }

        .chapter-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Header del capítulo */
        .content-header {
            margin-bottom: 30px;
            padding-bottom: 24px;
            border-bottom: 2px solid rgba(35,45,79,.12);
        }

        .chapter-number {
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 1px;
            color: var(--text-dark, #3E5A7E);
            font-weight: 800;
            margin-bottom: 8px;
        }

        .chapter-title {
            font-size: 2.5rem;
            font-weight: 900;
            color: var(--primary);
            margin-bottom: 12px;
            line-height: 1.2;
        }

        .chapter-meta {
            font-size: 0.9rem;
            color: var(--text-light);
        }

        /* Contenido del capítulo */
        .chapter-content {
            font-size: 1.1rem;
            color: var(--text-dark);
            line-height: 1.9;
            flex: 1;
        }

        .chapter-content p {
            margin-bottom: 20px;
            text-align: justify;
        }

        .chapter-content h3 {
            font-size: 1.4rem;
            font-weight: 800;
            color: var(--primary);
            margin-top: 32px;
            margin-bottom: 16px;
        }

        .chapter-content ul,
        .chapter-content ol {
            margin: 20px 0 20px 24px;
            line-height: 1.9;
        }

        .chapter-content li {
            margin-bottom: 12px;
        }

        /* ========================================================================
           NAVEGACIÓN
           ======================================================================== */
        .chapters-nav-bottom {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: auto;
            padding-top: 24px;
            border-top: 2px solid rgba(35,45,79,.12);
        }

        .nav-btn {
            padding: 10px 20px;
            border: 2px solid var(--primary);
            background: transparent;
            color: var(--primary);
            border-radius: 6px;
            cursor: pointer;
            font-weight: 700;
            transition: var(--transition);
        }

        .nav-btn:hover:not(:disabled) {
            background: var(--primary);
            color: white;
        }

        .nav-btn:disabled {
            opacity: 0.5;
            cursor: not-allowed;
        }

        .chapter-progress {
            font-size: 0.9rem;
            color: var(--text-light);
            font-weight: 600;
        }

        /* ========================================================================
           RESPONSIVE
           ======================================================================== */
        @media (max-width: 1024px) {
            .main-layout {
                grid-template-columns: 280px 1fr;
                gap: 20px;
            }

            .main-content {
                padding: 30px;
            }

            .chapter-title {
                font-size: 2rem;
            }

            .chapter-content {
                font-size: 1rem;
            }

            .header {
                margin-bottom: 30px;
            }

            .header-left h1 {
                font-size: 1.5rem;
            }

            .header-right a {
                padding: 8px 16px;
                font-size: 0.85rem;
            }
        }

        @media (max-width: 768px) {
            .header {
                flex-direction: column;
                gap: 12px;
                align-items: flex-start;
                margin-bottom: 20px;
                padding-bottom: 16px;
            }

            .header-left h1 {
                font-size: 1.3rem;
            }

            .header-left p {
                font-size: 0.8rem;
            }

            .header-right {
                width: 100%;
            }

            .header-right a {
                display: block;
                text-align: center;
                padding: 10px 16px;
                font-size: 0.85rem;
            }

            .main-layout {
                grid-template-columns: 1fr;
                gap: 16px;
            }

            .sidebar-combined {
                position: static;
                margin-bottom: 16px;
            }

            .main-content {
                padding: 16px;
            }

            .chapter-title {
                font-size: 1.5rem;
            }

            .chapter-number {
                font-size: 0.75rem;
            }

            .chapter-meta {
                font-size: 0.8rem;
            }

            .chapter-content {
                font-size: 0.95rem;
                line-height: 1.7;
            }

            .chapter-content h3 {
                font-size: 1.1rem;
                margin-top: 20px;
                margin-bottom: 12px;
            }

            .chapter-content ul,
            .chapter-content ol {
                margin: 16px 0 16px 20px;
                font-size: 0.9rem;
            }

            .chapter-image {
                max-height: 160px;
                margin-bottom: 20px;
            }

            .chapters-nav-bottom {
                flex-direction: column;
                gap: 12px;
                margin-top: 24px;
                padding-top: 16px;
            }

            .nav-btn {
                width: 100%;
                padding: 10px 16px;
                font-size: 0.85rem;
            }

            .chapter-progress {
                font-size: 0.8rem;
                text-align: center;
            }

            .section-toggle {
                padding: 14px 16px;
                font-size: 0.9rem;
            }

            .section-toggle::after {
                font-size: 0.75rem;
            }

            .section-content {
                padding: 0 14px 14px;
            }

            .publication-title {
                font-size: 1rem;
            }

            .publication-meta-item {
                font-size: 0.8rem;
            }

            .chapters-nav a {
                padding: 8px 10px;
                font-size: 0.85rem;
            }

            .content-header {
                margin-bottom: 20px;
                padding-bottom: 16px;
            }
        }

        @media (max-width: 480px) {
            .header-left h1 {
                font-size: 1.2rem;
            }

            .header-left h1::before {
                width: 3px;
                height: 22px;
            }

            .main-content {
                padding: 12px;
            }

            .chapter-title {
                font-size: 1.3rem;
            }

            .chapter-content {
                font-size: 0.9rem;
                line-height: 1.6;
            }

            .chapter-content h3 {
                font-size: 1rem;
            }

            .chapter-image {
                max-height: 140px;
            }

            .section-toggle {
                padding: 12px 14px;
                font-size: 0.85rem;
            }

            .publication-meta-item {
                font-size: 0.75rem;
            }

            .chapters-nav a {
                padding: 6px 8px;
                font-size: 0.8rem;
            }

            .nav-btn {
                padding: 8px 12px;
                font-size: 0.8rem;
            }

            .chapter-content ul,
            .chapter-content ol {
                margin: 12px 0 12px 16px;
                font-size: 0.85rem;
            }
        }
            
        
        

        
        
        
        
        
        

        

        
        
        @media (max-width: 1024px) {

            }

        @media (max-width: 768px) {
            
            
            
        }

            
        

        @media (max-width: 768px) {
            

            }
    

/* ════════════════════════════════════════════
   PAGE: NOVEDADES (novedades.html)
════════════════════════════════════════════ */
.nov-archive { padding: 72px 0 80px; }
.nov-container { display: flex; flex-direction: column; gap: 56px; }

/* Filtros */
.nov-filters {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.nov-filter {
    padding: 9px 20px;
    border: 2px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    border-radius: 24px;
    cursor: pointer;
    font-weight: 700;
    font-size: .85rem;
    font-family: 'Montserrat', sans-serif;
    transition: all .25s;
    white-space: nowrap;
}
.nov-filter:hover { border-color: var(--color-accent); color: var(--color-accent); }
.nov-filter.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* .nov-featured / .nov-card → migrados a .ds-card (--horizontal --featured / base) */

/* Paginación */
.nov-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.nov-page-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 2px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: .9rem;
    font-family: 'Montserrat', sans-serif;
    transition: all .25s;
}
.nov-page-btn:hover:not(.disabled):not(.active) { border-color: var(--color-accent); color: var(--color-accent); }
.nov-page-btn.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.nov-page-btn.disabled { opacity: .4; cursor: not-allowed; }
.nov-page-ellipsis { color: var(--color-text-muted); font-weight: 700; padding: 0 4px; }

/* Grilla de novedades (restaurada tras unificar cards a .ds-card) */
.nov-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
}

@media (max-width: 900px) {
    .nov-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .nov-grid { grid-template-columns: 1fr; }
}


/* ════════════════════════════════════════════
   PAGE: PROYECTO — CURSO INTERNACIONAL
   (curso-internacional.html y otros cipdh_proyecto)
════════════════════════════════════════════ */
.proy-wrap { padding: 72px 0 80px; }
.proy-container {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 48px;
    align-items: start;
}

/* Artículo principal */
.proy-lead {
    padding: 32px;
    background: var(--color-primary);
    color: #fff;
    margin-bottom: 40px;
    border-left: 4px solid var(--color-accent);
}
.proy-lead .texto-destacado { color: rgba(255,255,255,.92); font-size: 1.05rem; }

.proy-section { margin-bottom: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--color-border); }
.proy-section:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.proy-section__title {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1.3rem;
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 20px;
}
.proy-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: .75rem;
    font-weight: 900;
    border-radius: 50%;
    flex-shrink: 0;
}
.proy-section__body p { font-size: .97rem; color: var(--color-text-muted); line-height: 1.75; margin-bottom: 14px; }
.proy-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.proy-list li {
    padding: 12px 16px;
    background: #f7f7f7;
    border-left: 3px solid var(--color-accent);
    font-size: .9rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* Cronograma */
.proy-schedule { display: flex; flex-direction: column; gap: 0; }
.proy-week {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 20px;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-border);
}
.proy-week:last-child { border-bottom: none; }
.proy-week__num {
    font-size: .72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-accent);
    padding-top: 3px;
}
.proy-week__content strong { display: block; font-size: .97rem; font-weight: 800; color: var(--color-primary); margin-bottom: 6px; }
.proy-week__content p { font-size: .85rem; color: var(--color-text-muted); margin-bottom: 8px; line-height: 1.5; }
.proy-week__date { font-size: .75rem; font-weight: 700; color: var(--color-secondary); }

/* Mini noticias */
.proy-news-mini { display: flex; flex-direction: column; gap: 0; }
.proy-news-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 14px 0;
    border-bottom: 1px solid var(--color-border);
    text-decoration: none;
    color: inherit;
    transition: all .2s;
}
.proy-news-item:last-child { border-bottom: none; }
.proy-news-item:hover { padding-left: 6px; }
.proy-news-item time { font-size: .72rem; font-weight: 700; color: var(--color-secondary); white-space: nowrap; padding-top: 3px; min-width: 80px; }
.proy-news-item span { font-size: .9rem; color: var(--color-primary); font-weight: 600; line-height: 1.4; }
.proy-news-item:hover span { color: var(--color-accent); }

/* Sidebar */
.proy-sidebar { position: sticky; top: 110px; }
.proy-card-info {
    background: #fff;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(35,45,79,.08);
}
.proy-card-info__title {
    font-size: .8rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-accent);
    margin-bottom: 20px;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--color-primary);
}
.proy-meta-list { list-style: none; display: flex; flex-direction: column; gap: 0; margin-bottom: 24px; }
.proy-meta-list li { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.proy-meta-list li:last-child { border-bottom: none; }
.proy-meta-label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .5px; color: var(--color-secondary); }
.proy-meta-val { font-size: .88rem; font-weight: 600; color: var(--color-primary); }
.proy-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: .7rem; font-weight: 800; }
.proy-badge--active { background: #d1fae5; color: #065f46; }
.proy-cta-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--color-primary);
    color: #fff;
    padding: 12px 20px;
    font-weight: 800;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    transition: background .25s;
    width: 100%;
}
.proy-cta-btn:hover { background: var(--color-gold); color: var(--color-primary); }

/* Publicaciones relacionadas */
.proy-related-pubs { display: flex; flex-direction: column; gap: 14px; margin-bottom: 4px; }
.proy-related-item { display: flex; gap: 12px; align-items: center; text-decoration: none; color: inherit; transition: opacity .2s; }
.proy-related-item:hover { opacity: .8; }
.proy-related-img { width: 48px; height: 62px; flex-shrink: 0; border-radius: 3px; }
.proy-related-text strong { display: block; font-size: .82rem; font-weight: 800; color: var(--color-primary); line-height: 1.3; margin-bottom: 3px; }
.proy-related-text span { font-size: .72rem; color: var(--color-secondary); font-weight: 600; }

@media (max-width: 960px) {
    .proy-container { grid-template-columns: 1fr; }
    .proy-sidebar { position: static; }
}
@media (max-width: 640px) {
    .proy-week { grid-template-columns: 1fr; gap: 8px; }
    .proy-lead { padding: 20px; }
}

/* PAGE PROYECTOS */
.page-proyectos { --header-h: 80px; }
.page-proyectos .site-main { padding: 0; }

/* PAGE BLOG */
.page-blog { --header-h: 80px; }

/* HERO FULLSCREEN */
.cipdh-hero-fullscreen {
    width: 100vw;
    max-width: 100vw;
    position: relative;
    margin-left: calc(-50vw + 50%);
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 180px 0 100px 0;
    display: flex;
    align-items: flex-end;
    margin-bottom: 80px;
    margin-top: 0;
}

.cipdh-hero-fullscreen::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(15,23,42,0) 0%, rgba(15,23,42,0.75) 100%);
    z-index: 1;
}

.cipdh-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 0;
}

.cipdh-hero-content {
    position: relative;
    z-index: 2;
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: left;
}

.cipdh-blog-cat-pill {
    display: inline-block;
    margin-bottom: 20px;
}

.cipdh-blog-cat-pill a {
    display: inline-block;
    background: var(--color-accent);
    color: var(--color-primary);
    padding: 8px 18px;
    border-radius: 24px;
    font-weight: 700;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: all 0.3s;
}

.cipdh-blog-cat-pill a:hover {
    background: var(--color-primary);
    color: #fff;
}

.cipdh-hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    line-height: 1.1;
    margin: 0 0 24px 0;
    letter-spacing: -0.02em;
    color: #fff;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    word-wrap: break-word;
}

.cipdh-hero-meta {
    display: flex;
    gap: 24px;
    font-size: 1rem;
    font-weight: 600;
    opacity: 0.9;
}

/* BLOG CONTENT LAYOUT */
.cipdh-blog-content-columns {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 60px;
    width: 80%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
}

.cipdh-blog-main-content {
    flex: 1;
}

.cipdh-blog-article {
    background: #fff;
    border-radius: 8px;
    padding: 40px;
}

.blog-section {
    margin-bottom: 48px;
    padding-bottom: 48px;
    border-bottom: 1px solid var(--color-border);
}

.blog-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.blog-section h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--color-primary);
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}

.blog-section p {
    font-size: 1.05rem;
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: 16px;
    text-align: justify;
}

.blog-section p:last-child {
    margin-bottom: 0;
}

.blog-blockquote {
    background: #f8fafc;
    border-left: 5px solid var(--color-accent);
    padding: 24px;
    margin: 32px 0;
    border-radius: 4px;
}

.blog-blockquote p {
    font-size: 1.3rem;
    font-style: italic;
    color: var(--color-primary);
    font-weight: 600;
    margin: 0;
    text-align: center;
}

.blog-blockquote footer {
    margin-top: 12px;
    font-size: 0.9rem;
    color: var(--color-secondary);
    text-align: right;
    font-style: normal;
}

.blog-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.blog-list li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 14px;
    font-size: 1rem;
    color: var(--color-text);
    line-height: 1.7;
}

.blog-list li::before {
    content: '→';
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-accent);
    font-weight: bold;
}

.blog-article-footer {
    margin-top: 40px;
    padding-top: 40px;
    border-top: 1px solid var(--color-border);
}

.blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.blog-tag {
    display: inline-block;
    background: var(--color-bg);
    color: var(--color-primary);
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s;
    border: 1px solid var(--color-border);
}

.blog-tag:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* SIDEBAR */
.cipdh-blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.cipdh-blog-sidebar-widget {
    background: #fff;
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

.cipdh-sidebar-title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--color-accent);
    padding-bottom: 12px;
}

.cipdh-blog-related-minimal {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cipdh-blog-related-minimal li {
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.cipdh-blog-related-minimal li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.cipdh-blog-related-minimal a {
    display: block;
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.4;
    transition: color 0.3s;
    margin-bottom: 6px;
}

.cipdh-blog-related-minimal a:hover {
    color: var(--color-accent);
}

.cipdh-blog-related-date {
    display: block;
    font-size: 0.8rem;
    color: var(--color-secondary);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.cipdh-blog-categories {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cipdh-blog-categories a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
}

.cipdh-blog-categories a:hover {
    color: var(--color-accent);
    padding-left: 6px;
}

.cipdh-blog-cta-widget {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
    color: #fff;
}

.cipdh-blog-cta-widget .cipdh-sidebar-title {
    color: #fff;
    border-bottom-color: rgba(255, 255, 255, 0.3);
}

.cipdh-blog-cta-widget p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 16px 0;
}

.blog-newsletter-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.blog-newsletter-form input {
    padding: 10px 14px;
    border: none;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.9rem;
    width: 100%;
    box-sizing: border-box;
}

.blog-newsletter-form button {
    padding: 10px 20px;
    background: #fff;
    color: var(--color-primary);
    border: none;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s;
}

.blog-newsletter-form button:hover {
    background: var(--color-gold);
    color: var(--color-primary);
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    .cipdh-hero-fullscreen {
        padding: 140px 0 70px 0;
    }

    .cipdh-blog-content-columns {
        gap: 40px;
        width: 90%;
    }

    .cipdh-blog-article {
        padding: 30px;
    }
}

@media (max-width: 768px) {
    .cipdh-hero-fullscreen {
        padding: 100px 0 50px 0;
    }

    .cipdh-hero-title {
        font-size: 2rem;
    }

    .cipdh-blog-content-columns {
        grid-template-columns: 1fr;
        gap: 30px;
        width: 100%;
        padding: 0 16px;
    }

    .cipdh-blog-article {
        padding: 20px;
    }

    .blog-section {
        margin-bottom: 30px;
        padding-bottom: 30px;
    }

    .blog-section h2 {
        font-size: 1.5rem;
    }

    .blog-section p {
        font-size: 1rem;
        text-align: left;
    }

    .cipdh-hero-content {
        width: 90%;
    }
}

/* PAGE EFEMÉRIDES */
.page-efemerides { --header-h: 80px; }

.efemerides-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 60px 24px;
}

/* FILTROS POR MES */
.efemerides-filters {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 80px;
    justify-content: center;
}

.efemerides-filter {
    padding: 12px 20px;
    border: 2px solid var(--color-border);
    background: #fff;
    color: var(--color-text);
    border-radius: 24px;
    cursor: pointer;
    font-weight: 600;
    font-size: 0.95rem;
    transition: all 0.3s;
    text-transform: capitalize;
    white-space: nowrap;
}

.efemerides-filter:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.efemerides-filter.active {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* TIMELINE */
.efemerides-timeline {
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.efemerides-year-group {
    display: flex;
    gap: 40px;
    padding: 40px;
    background: #f8fafc;
    border-radius: 12px;
    border-left: 5px solid var(--color-accent);
}

.efemerides-month-label {
    flex: 0 0 150px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.month-name {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    line-height: 1;
}

.efemerides-events {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

/* EVENTOS */
.efemerides-event {
    background: #fff;
    border: var(--card-bd);
    border-left: 4px solid var(--color-accent);
    border-radius: var(--card-radius);
    padding: 24px;
    display: grid;
    grid-template-columns: 80px 1fr 60px;
    gap: 20px;
    align-items: flex-start;
    box-shadow: var(--card-shadow);
    transition: var(--card-transition);
}

.efemerides-event:hover {
    box-shadow: var(--card-shadow-hover);
    transform: var(--card-lift);
    border-color: var(--color-accent);
}

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}

.event-date .day {
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--color-primary);
    line-height: 1;
}

.event-date .year {
    font-size: 0.85rem;
    color: var(--color-secondary);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.event-content h3 {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--color-primary);
    margin: 0 0 12px 0;
    letter-spacing: -0.01em;
}

.event-content p {
    font-size: 0.95rem;
    color: var(--color-text);
    line-height: 1.6;
    margin: 0 0 12px 0;
}

.event-content p:last-child {
    margin-bottom: 0;
}

.event-content a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--color-accent);
    text-decoration: none;
    font-weight: 700;
    font-size: 0.9rem;
    transition: color .3s ease, gap .3s ease;
}

.event-content a i {
    transition: transform .3s ease;
}

.event-content a:hover {
    color: var(--color-gold);
    gap: 12px;
}

.event-content a:hover i {
    transform: translateX(4px);
}

.event-icon {
    font-size: 2.5rem;
    text-align: center;
    opacity: 0.6;
    transition: all 0.3s;
}

.efemerides-event:hover .event-icon {
    opacity: 1;
    transform: scale(1.2);
}

/* RESPONSIVE EFEMÉRIDES */
@media (max-width: 1024px) {
    .efemerides-year-group {
        gap: 30px;
        padding: 30px;
    }

    .efemerides-event {
        grid-template-columns: 70px 1fr 50px;
        gap: 15px;
        padding: 20px;
    }

    .event-date .day {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .efemerides-container {
        padding: 40px 16px;
    }

    .efemerides-filters {
        gap: 8px;
        margin-bottom: 60px;
    }

    .efemerides-filter {
        padding: 10px 16px;
        font-size: 0.85rem;
    }

    .efemerides-year-group {
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        border-left: none;
        border-top: 4px solid var(--color-accent);
    }

    .efemerides-month-label {
        flex: 0 0 auto;
        border-bottom: 2px solid var(--color-accent);
        padding-bottom: 16px;
        margin-bottom: 16px;
        justify-content: flex-start;
    }

    .month-name {
        font-size: 1.5rem;
    }

    .efemerides-events {
        gap: 20px;
    }

    .efemerides-event {
        grid-template-columns: 60px 1fr 40px;
        gap: 12px;
        padding: 16px;
        border-left: none;
        border-top: 3px solid var(--color-accent);
    }

    .event-date {
        justify-content: flex-start;
        text-align: left;
    }

    .event-date .day {
        font-size: 1.3rem;
    }

    .event-content h3 {
        font-size: 1rem;
        margin-bottom: 8px;
    }

    .event-content p {
        font-size: 0.9rem;
        margin-bottom: 8px;
    }

    .event-icon {
        font-size: 2rem;
    }
}

/* ════════════════════════════════════════════
   PUBLICACIONES SECTION (INTERACTIVE)
════════════════════════════════════════════ */
.pub-card:hover {
    box-shadow: 0 8px 24px rgba(35, 45, 79, 0.12);
}

.pub-card:hover .pub-card-image img {
    transform: scale(1.05);
}

.pub-card-checkbox {
    display: none;
}

.pub-card:has(.pub-card-checkbox:checked) .pub-chapters {
    max-height: 500px;
    padding: 24px;
    opacity: 1;
}

.pub-card:has(.pub-card-checkbox:checked) svg {
    transform: rotate(180deg);
    color: var(--color-accent);
}

/* ════════════════════════════════════════════════════════════════════
   COMPONENTES ESPECÍFICOS — CONSOLIDADOS DE PROTOTIPOS
   Extraído de: acerca-de-nosotros, admin-*, autoridades, capitulos,
   catalogo, crear-*, curso-internacional, escuela, examen, gestion,
   login, perfil-*, proyectos, publicaciones, transparencia
════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════
   FROM: acerca-de-nosotros.html
════════════════════════════════════════════ */

        .page-quienes .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

        .about-hero {
            background: linear-gradient(135deg, #232D4F 0%, #3E5A7E 100%);
            color: #fff;
            padding: 140px 0 80px;
            margin-bottom: 80px;
            text-align: center;
        }

        .about-hero h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 900;
            margin-bottom: 24px;
            letter-spacing: -0.02em;
        }

        .about-hero p {
            font-size: 1.3rem;
            opacity: 0.95;
            max-width: 800px;
            margin: 0 auto;
            font-weight: 300;
            line-height: 1.6;
        }

        .about-section {
            margin-bottom: 80px;
        }

        .about-section h2 {
            font-size: 2.5rem;
            font-weight: 900;
            color: #232D4F;
            margin-bottom: 40px;
            text-transform: uppercase;
            letter-spacing: -0.02em;
            border-bottom: 4px solid #3E5A7E;
            padding-bottom: 20px;
            display: inline-block;
        }

        .about-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 40px;
            margin-bottom: 60px;
        }

        .about-card {
            background: #fff;
            padding: 40px;
            border: var(--card-bd);
            border-left: 5px solid var(--color-accent);
            border-radius: var(--card-radius);
            box-shadow: var(--card-shadow);
            transition: var(--card-transition);
        }

        .about-card:hover {
            transform: var(--card-lift);
            box-shadow: var(--card-shadow-hover);
            border-color: var(--color-accent);
        }

        .about-card h3 {
            font-size: 1.5rem;
            font-weight: 800;
            color: #232D4F;
            margin-bottom: 16px;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .about-card p {
            font-size: 1rem;
            color: #475569;
            line-height: 1.7;
            margin: 0;
        }

        .about-full-text {
            background: #fff;
            padding: 40px;
            border-radius: 12px;
            border: 1px solid #e2e8f0;
            line-height: 1.8;
        }

        .about-full-text p {
            font-size: 1.05rem;
            color: #475569;
            margin-bottom: 20px;
            text-align: justify;
        }

        .about-full-text p:last-child {
            margin-bottom: 0;
        }

        .about-highlights {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
            margin: 60px 0;
        }

        .highlight-box {
            text-align: center;
            padding: 30px;
            background: linear-gradient(135deg, #232D4F 0%, #3E5A7E 100%);
            color: #fff;
            border-radius: 12px;
        }

        .highlight-box .number {
            font-size: 3.5rem;
            font-weight: 900;
            margin-bottom: 10px;
        }

        .highlight-box .label {
            font-size: 1rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        @media (max-width: 768px) {
            .about-hero { padding: 100px 0 60px; }
            .about-hero h1 { font-size: 2rem; }
            .about-section h2 { font-size: 1.8rem; }
        }

/* ════════════════════════════════════════════
   FROM: admin-add-students.html
════════════════════════════════════════════ */

        :root { --aa-main:#232D4F; --aa-accent:#3E5A7E; --aa-gold:#E7BA61; --aa-bd:#dce8f3; --aa-soft:#f0f6fc; }
        .page-build .container { max-width:1240px; margin:0 auto; padding:0 20px; }

        .aa-rolebar { background:linear-gradient(135deg,var(--aa-main),var(--aa-accent)); color:#fff; border-radius:12px; padding:14px 22px; display:flex; align-items:center; gap:12px; margin-bottom:26px; font-size:14px; }
        .aa-rolebar i { color:var(--aa-gold); font-size:20px; }
        .aa-rolebar a { color:#fff; margin-left:auto; font-weight:700; text-decoration:underline; font-size:13px; }

        .aa-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }

        /* Panel de formulario */
        .aa-form-card { background:#fff; border:1px solid var(--aa-bd); border-radius:16px; padding:30px 34px; box-shadow:0 4px 18px rgba(35,45,79,.06); }
        .aa-form-card > h2 { font-size:1.1rem; color:var(--aa-main); text-transform:uppercase; font-weight:800; letter-spacing:.03em; margin:0 0 24px; display:flex; align-items:center; gap:10px; }
        .aa-form-card > h2 i { color:var(--aa-accent); }

        .aa-form-group { margin-bottom:20px; }
        .aa-form-group label { display:block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#566; margin-bottom:7px; }
        .aa-form-group input, .aa-form-group select, .aa-form-group textarea {
            width:100%; box-sizing:border-box; font-family:inherit; font-size:14.5px; color:#222;
            border:1px solid var(--aa-bd); border-radius:9px; padding:11px 14px; background:#fdfdff; transition:border-color .15s;
        }
        .aa-form-group input:focus, .aa-form-group select:focus, .aa-form-group textarea:focus { outline:none; border-color:var(--aa-accent); box-shadow:0 0 0 3px rgba(62,90,126,.12); }

        .aa-two-cols { display:grid; grid-template-columns:1fr 1fr; gap:14px; }

        .aa-btn { display:inline-flex; align-items:center; gap:9px; background:var(--aa-main); color:#fff!important; padding:13px 26px; border-radius:10px; font-weight:800; font-size:15px; text-decoration:none!important; border:none; cursor:pointer; font-family:inherit; transition:all .2s; }
        .aa-btn:hover { background:var(--aa-gold); color:var(--aa-main)!important; transform:translateY(-2px); }
        .aa-btn--secondary { background:transparent; color:var(--aa-main)!important; border:1.5px solid var(--aa-bd); }
        .aa-btn--secondary:hover { background:var(--aa-soft); }

        .aa-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }

        .aa-saved { display:none; background:#e4f5ea; border:1px solid #aee0c0; color:#1d8a4e; border-radius:12px; padding:16px 20px; font-weight:700; margin-bottom:22px; }
        .aa-saved.show { display:flex; gap:10px; align-items:center; }

        /* Panel de tabla */
        .aa-table-card { background:#fff; border:1px solid var(--aa-bd); border-radius:16px; overflow:hidden; box-shadow:0 4px 18px rgba(35,45,79,.06); }
        .aa-table-card > h2 { font-size:1.1rem; color:var(--aa-main); text-transform:uppercase; font-weight:800; letter-spacing:.03em; margin:0; padding:24px 28px; border-bottom:1px solid var(--aa-bd); display:flex; align-items:center; gap:10px; }
        .aa-table-card > h2 i { color:var(--aa-accent); }

        .aa-table-wrap { overflow-x:auto; }
        .aa-table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:500px; }
        .aa-table th { text-align:left; padding:13px 14px; background:var(--aa-soft); color:var(--aa-main); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid var(--aa-bd); white-space:nowrap; }
        .aa-table td { padding:13px 14px; border-bottom:1px solid #eef2f7; color:#333; }
        .aa-table tr:hover td { background:#fafcff; }

        .aa-avatar { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--aa-main),var(--aa-accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex:0 0 32px; }
        .aa-student { display:flex; align-items:center; gap:10px; }
        .aa-student b { font-weight:700; color:#222; }
        .aa-inst { font-size:11.5px; color:#8a93a3; }

        .aa-badge { font-size:11px; font-weight:800; padding:4px 11px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em; }
        .aa-badge--curso { background:#e7eefb; color:#3E5A7E; }
        .aa-badge--empresas { background:#fdf6e3; color:#a07c1f; }
        .aa-badge--concurso { background:#ede7f6; color:#6b4fa0; }

        .aa-actions-cell { display:flex; gap:8px; }
        .aa-action-btn { display:inline-flex; align-items:center; gap:6px; background:var(--aa-main); color:#fff; padding:6px 11px; border-radius:6px; font-size:12px; font-weight:700; text-decoration:none; border:none; cursor:pointer; transition:all .2s; }
        .aa-action-btn:hover { background:var(--aa-gold); color:var(--aa-main); }
        .aa-action-btn--danger { background:#b14545; }
        .aa-action-btn--danger:hover { background:#9c3a3a; }

        .aa-empty { text-align:center; padding:40px; color:#9aa6b6; }

        .aa-export { display:inline-flex; align-items:center; gap:8px; background:var(--aa-accent); color:#fff!important; padding:10px 18px; border-radius:9px; font-weight:700; font-size:13.5px; text-decoration:none; border:none; cursor:pointer; transition:all .2s; }
        .aa-export:hover { background:var(--aa-gold); color:var(--aa-main)!important; }

        .aa-toolbar { display:flex; gap:14px; align-items:center; flex-wrap:wrap; padding:20px 28px; border-bottom:1px solid var(--aa-bd); background:var(--aa-soft); }
        .aa-toolbar span { font-size:13px; color:#6b7688; font-weight:600; }

        .aa-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
        .aa-stat { background:#fff; border:1px solid var(--aa-bd); border-radius:12px; padding:18px 20px; box-shadow:0 2px 14px rgba(35,45,79,.06); }
        .aa-stat .n { font-size:1.8rem; font-weight:900; color:var(--aa-main); display:block; line-height:1; }
        .aa-stat .l { font-size:11px; color:#6b7688; text-transform:uppercase; font-weight:700; margin-top:7px; }

        @media (max-width:1000px){ .aa-grid{grid-template-columns:1fr;} .aa-stats{grid-template-columns:repeat(2,1fr);} }

/* ════════════════════════════════════════════
   FROM: admin-publicaciones.html
════════════════════════════════════════════ */

        .page-admin .container { max-width: 1600px; padding: 20px; }
        .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; padding: 20px; background: var(--color-bg); border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); border-left: 6px solid var(--color-primary); }
        .admin-header h1 { font-size: 1.8rem; font-weight: 900; color: var(--color-primary); display: flex; align-items: center; gap: 12px; }
        .admin-header h1::before { content: '✎'; font-size: 1.5rem; color: var(--color-accent); }
        .btn { padding: 10px 20px; border: none; border-radius: 6px; cursor: pointer; font-weight: 700; font-size: 0.9rem; transition: all 0.3s; border: 2px solid transparent; }
        .btn-primary { background: var(--color-primary); color: white; }
        .btn-primary:hover { background: #1a1f3a; }
        .btn-secondary { background: transparent; border: 2px solid var(--color-border); color: var(--color-text); }
        .btn-secondary:hover { border-color: var(--color-primary); color: var(--color-primary); }
        .editor-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; min-height: 800px; }
        .editor-panel { background: var(--color-bg); border-radius: 8px; padding: 30px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow-y: auto; max-height: 80vh; }
        .section { margin-bottom: 40px; padding-bottom: 30px; border-bottom: 1px solid var(--color-border); }
        .section:last-child { border-bottom: none; }
        .section-title { font-size: 1.1rem; font-weight: 800; color: var(--color-primary); margin-bottom: 16px; display: flex; align-items: center; gap: 8px; }
        .section-title::before { content: ''; display: inline-block; width: 4px; height: 20px; background: var(--color-accent); border-radius: 2px; }
        .form-group { margin-bottom: 16px; }
        .form-group label { display: block; font-weight: 700; color: var(--color-text); margin-bottom: 6px; font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.5px; }
        .form-group input, .form-group select, .form-group textarea { width: 100%; padding: 10px 12px; border: 2px solid var(--color-border); border-radius: 6px; font-family: 'Montserrat', sans-serif; font-size: 0.95rem; transition: all 0.3s; color: var(--color-text); }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(62, 90, 126, 0.12); }
        .form-group textarea { resize: vertical; min-height: 100px; font-family: monospace; }
        .preview-panel { background: var(--color-bg); border-radius: 8px; padding: 30px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); overflow-y: auto; max-height: 80vh; border: 2px solid var(--color-accent); }
        .preview-header { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-accent); font-weight: 800; margin-bottom: 20px; display: flex; align-items: center; gap: 8px; }
        .preview-header::before { content: '👁'; }
        .preview-content { background: #f8fafc; border-radius: 8px; padding: 24px; }
        .preview-publication-title { font-size: 1.5rem; font-weight: 900; color: var(--color-primary); margin-bottom: 12px; }
        .preview-badge { background: var(--color-accent); color: var(--color-primary); padding: 6px 12px; border-radius: 20px; font-weight: 700; font-size: 0.75rem; text-transform: uppercase; }
        .tabs { display: flex; gap: 8px; margin-bottom: 24px; border-bottom: 2px solid var(--color-border); }
        .tab-btn { padding: 12px 16px; border: none; background: transparent; color: var(--color-secondary); cursor: pointer; font-weight: 700; font-size: 0.9rem; transition: all 0.3s; border-bottom: 3px solid transparent; margin-bottom: -2px; }
        .tab-btn.active { color: var(--color-primary); border-bottom-color: var(--color-accent); }
        .tab-content { display: none; }
        .tab-content.active { display: block; }
        .modal { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 1000; align-items: center; justify-content: center; }
        .modal.active { display: flex; }
        .modal-content { background: var(--color-bg); border-radius: 8px; padding: 40px; max-width: 600px; width: 90%; max-height: 80vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
        @media (max-width: 1200px) {
            .editor-layout { grid-template-columns: 1fr; }
            .editor-panel, .preview-panel { max-height: none; }
        }
        @media (max-width: 768px) {
            .admin-header { flex-direction: column; align-items: flex-start; gap: 16px; }
            .section-title { font-size: 1rem; }
            .modal-content { width: 95%; padding: 24px; }
        }

/* ════════════════════════════════════════════
   FROM: autoridades-cipdh-unesco.html
════════════════════════════════════════════ */

        :root {
            --ta-main: #232D4F;
            --ta-accent: #3E5A7E;
        }

        .page-autoridades .container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }

        .aut-hero {
            background: linear-gradient(135deg, var(--ta-main) 0%, #1a5a8a 100%);
            color: #fff;
            padding: 140px 0 80px;
            margin-bottom: 60px;
            text-align: center;
        }

        .aut-hero h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 900;
            margin-bottom: 24px;
            letter-spacing: -0.02em;
        }

        .aut-hero p {
            font-size: 1.2rem;
            opacity: 0.95;
            max-width: 800px;
            margin: 0 auto;
            font-weight: 300;
            line-height: 1.6;
        }

        /* AUTORIDAD DESTACADA */
        .ta-auth-card {
            display: flex;
            background: #fff;
            border: var(--card-bd);
            border-radius: var(--card-radius);
            margin-bottom: 40px;
            box-shadow: var(--card-shadow);
            transition: var(--card-transition);
            overflow: hidden;
        }

        .ta-auth-card:hover {
            transform: var(--card-lift);
            box-shadow: var(--card-shadow-hover);
            border-color: var(--color-accent);
        }

        .ta-auth-photo {
            flex: 0 0 280px;
            min-height: 320px;
            background: var(--ta-main);
            position: relative;
            overflow: hidden;
        }

        .ta-auth-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            display: block;
        }

        .ta-auth-info {
            flex: 1;
            padding: 32px 32px 24px;
            display: flex;
            flex-direction: column;
            border-top: 4px solid var(--ta-main);
        }

        .ta-auth-info h3 {
            margin: 0 0 5px 0;
            color: var(--ta-main);
            font-size: 1.3rem;
            font-weight: 800;
            border: none;
            padding: 0;
            line-height: 1.2;
            text-transform: uppercase;
            letter-spacing: .3px;
        }

        .ta-auth-info h4 {
            margin: 0 0 14px 0;
            color: #4a6078;
            font-size: 1rem;
            font-weight: 400;
        }

        .ta-auth-contact {
            margin-bottom: 14px;
        }

        .ta-auth-contact a {
            color: #555;
            text-decoration: none;
            margin-right: 20px;
            font-size: 0.9rem;
            font-weight: 500;
            transition: color 0.2s;
        }

        .ta-auth-contact a:hover {
            color: var(--ta-accent);
            text-decoration: underline;
        }

        .ta-auth-accordion {
            margin-top: 14px;
            border-top: 1px solid #eaeaea;
            padding-top: 10px;
        }

        .ta-auth-accordion summary {
            cursor: pointer;
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--ta-accent);
            list-style: none;
            padding: 4px 0;
            outline: none;
            -webkit-user-select: none; user-select: none;
        }

        .ta-auth-accordion summary::-webkit-details-marker { display: none; }
        .ta-auth-accordion summary::before { content: '＋ '; font-weight: 700; }
        details[open].ta-auth-accordion > summary::before { content: '－ '; }

        .ta-auth-bio {
            margin-top: 12px;
            font-size: 0.9rem;
            color: #444;
            line-height: 1.65;
        }

        .ta-auth-bio p {
            margin-bottom: 8px;
        }

        .ta-auth-bio p:last-child {
            margin-bottom: 0;
        }

        .ta-auth-links {
            margin-top: auto;
            padding-top: 14px;
            border-top: 1px solid #eaeaea;
        }

        .ta-btn-external {
            display: inline-block;
            background: var(--ta-main);
            color: #fff !important;
            padding: 8px 16px;
            border-radius: 5px;
            font-weight: 600;
            font-size: 0.8rem;
            text-decoration: none !important;
            margin-right: 10px;
            margin-bottom: 10px;
            transition: background 0.2s;
        }

        .ta-btn-external:hover { background: var(--ta-accent); }

        /* LISTA DE AUTORIDADES */
        .ta-solo-aut-section-title {
            color: var(--ta-main);
            font-size: 1.6rem;
            font-weight: 800;
            text-transform: uppercase;
            margin: 40px 0 24px 0;
            border-bottom: 2px solid #eaeaea;
            padding-bottom: 12px;
            letter-spacing: .3px;
        }

        .ta-team-list {
            list-style: none;
            padding: 0;
            margin: 0 0 40px 0;
        }

        .ta-team-list-item {
            padding: 16px 0;
            border-bottom: 1px solid #f0f4f8;
            display: flex;
            align-items: flex-start;
            gap: 16px;
            flex-wrap: wrap;
        }

        .ta-team-list-item:last-child { border-bottom: none; }

        .ta-list-cargo-title {
            font-size: 0.85rem;
            color: var(--ta-main);
            font-weight: 700;
            margin: 0;
            text-transform: uppercase;
            width: 100%;
        }

        .ta-list-person-name {
            font-size: 0.9rem;
            color: #555;
            margin-top: 4px;
            font-weight: 600;
            width: 100%;
        }

        .ta-list-actions {
            margin-top: 8px;
            width: 100%;
        }

        .ta-list-actions a {
            font-size: 0.8rem;
            color: var(--ta-accent);
            text-decoration: none;
            font-weight: 700;
            margin-right: 16px;
            transition: text-decoration 0.2s;
        }

        .ta-list-actions a:hover { text-decoration: underline; }

        @media (max-width: 768px) {
            .aut-hero { padding: 100px 0 60px; }
            .aut-hero h1 { font-size: 2rem; }
            .ta-auth-card {
                flex-direction: column;
            }
            .ta-auth-photo {
                flex: 0 0 100%;
                min-height: 260px;
            }
            .ta-auth-info {
                border-top: 4px solid var(--ta-main);
                border-left: none;
            }
        }

/* ════════════════════════════════════════════
   FROM: capitulos-viewer-v2.html
════════════════════════════════════════════ */

        .page-capitulos .container { width: 80%; max-width: 1400px; padding: 20px; }
        .main-layout { display: grid; grid-template-columns: 320px 1fr; gap: 30px; min-height: 600px; }
        .sidebar-combined { background: var(--color-bg); border-radius: 8px; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,0.08); height: fit-content; position: sticky; top: 20px; overflow: hidden; }
        .sidebar-section { border-bottom: 1px solid var(--color-border); }
        .sidebar-section:last-child { border-bottom: none; }
        .section-toggle { width: 100%; padding: 20px; background: transparent; border: none; display: flex; justify-content: space-between; align-items: center; cursor: pointer; transition: all 0.3s; font-weight: 700; color: var(--color-primary); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.5px; }
        .section-toggle:hover { background: #f8fafc; }
        .section-toggle::after { content: '▼'; font-size: 0.8rem; transition: transform 0.3s; color: var(--color-secondary); }
        .section-toggle.collapsed::after { transform: rotate(-90deg); }
        .section-content { max-height: 1000px; overflow: hidden; transition: max-height 0.3s, padding 0.3s; padding: 0 20px 20px; }
        .section-content.collapsed { max-height: 0; padding: 0 20px; overflow: hidden; }
        .publication-title { font-size: 1rem; font-weight: 800; color: var(--color-primary); margin-bottom: 12px; line-height: 1.3; }
        .publication-meta { display: flex; flex-direction: column; gap: 8px; }
        .publication-meta-item { font-size: 0.85rem; color: var(--color-secondary); }
        .publication-meta-item strong { color: var(--color-text); display: block; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 3px; }
        .publication-sheet { background: #f8fafc; border-radius: 8px; padding: 12px; margin-top: 16px; font-size: 0.8rem; }
        .sheet-row { display: grid; grid-template-columns: 1fr; gap: 8px; margin-bottom: 8px; }
        .sheet-row:last-child { margin-bottom: 0; }
        .sheet-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-secondary); font-weight: 700; }
        .sheet-value { color: var(--color-text); font-weight: 600; }
        .theme-badge { background: var(--color-primary); color: #fff; padding: 3px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 700; }
        .tag-badge { background: white; border: 1px solid var(--color-primary); color: var(--color-primary); padding: 3px 8px; border-radius: 12px; font-size: 0.7rem; font-weight: 600; }
        .chapters-nav { list-style: none; }
        .chapters-nav li { margin-bottom: 0; }
        .chapters-nav a { display: block; padding: 10px 12px; color: var(--color-text); text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.3s; border-left: 4px solid transparent; line-height: 1.3; }
        .chapters-nav a:hover, .chapters-nav a.active { color: var(--color-primary); background: #f8fafc; border-left-color: var(--color-primary); padding-left: 16px; }
        .main-content { background: var(--color-bg); border-radius: 8px; padding: 40px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); display: flex; flex-direction: column; min-height: calc(100vh - 220px); }
        .content-header { margin-bottom: 30px; padding-bottom: 24px; border-bottom: 2px solid rgba(35,45,79,.12); }
        .chapter-number { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-secondary); font-weight: 800; margin-bottom: 8px; }
        .chapter-title { font-size: 2.5rem; font-weight: 900; color: var(--color-primary); margin-bottom: 12px; line-height: 1.2; }
        .chapter-meta { font-size: 0.9rem; color: var(--color-secondary); }
        .chapter-content { font-size: 1.1rem; color: var(--color-text); line-height: 1.9; flex: 1; }
        .chapter-content p { margin-bottom: 20px; text-align: justify; }
        .chapter-content h3 { font-size: 1.4rem; font-weight: 800; color: var(--color-primary); margin-top: 32px; margin-bottom: 16px; }
        .chapter-content ul, .chapter-content ol { margin: 20px 0 20px 24px; line-height: 1.9; }
        .chapter-content li { margin-bottom: 12px; }
        .chapters-nav-bottom { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 24px; border-top: 2px solid rgba(35,45,79,.12); }
        .nav-btn { padding: 10px 20px; border: 2px solid var(--color-primary); background: transparent; color: var(--color-primary); border-radius: 6px; cursor: pointer; font-weight: 700; transition: all 0.3s; }
        .nav-btn:hover:not(:disabled) { background: var(--color-primary); color: white; }
        .nav-btn:disabled { opacity: 0.5; cursor: not-allowed; }
        .chapter-progress { font-size: 0.9rem; color: var(--color-secondary); font-weight: 600; }
        @media (max-width: 1024px) {
            .main-layout { grid-template-columns: 280px 1fr; gap: 20px; }
            .main-content { padding: 30px; }
            .chapter-title { font-size: 2rem; }
            .chapter-content { font-size: 1rem; }
        }
        @media (max-width: 768px) {
            .main-layout { grid-template-columns: 1fr; gap: 16px; }
            .sidebar-combined { position: static; }
            .main-content { padding: 16px; }
            .chapter-title { font-size: 1.5rem; }
            .chapter-content { font-size: 0.95rem; line-height: 1.7; }
            .chapters-nav-bottom { flex-direction: column; gap: 12px; margin-top: 24px; padding-top: 16px; }
            .nav-btn { width: 100%; padding: 10px 16px; font-size: 0.85rem; }
            .chapter-progress { font-size: 0.8rem; text-align: center; }
        }

/* ════════════════════════════════════════════
   FROM: catalogo.html
════════════════════════════════════════════ */

        .catalog-section { padding: 80px 0; border-bottom: 1px solid var(--color-border); }
        .catalog-section:last-child { border-bottom: none; }
        .catalog-title {
            font-size: 2.5rem; font-weight: 800; margin-bottom: 20px;
            padding-bottom: 20px; border-bottom: 4px solid var(--color-gold);
            color: var(--color-primary); display: flex; align-items: center; gap: 16px;
        }
        .catalog-subtitle { font-size: 1.1rem; color: var(--color-secondary); margin-bottom: 40px; font-style: italic; }
        .demo-box { background: #f8fafc; padding: 30px; border-radius: 8px; border: 1px solid var(--color-border); margin-bottom: 30px; }
        .demo-label { font-size: 0.85rem; text-transform: uppercase; color: var(--color-secondary); font-weight: 700; margin-bottom: 20px; letter-spacing: 0.5px; }
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
        .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
        @media (max-width: 1024px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } .grid-2 { grid-template-columns: 1fr; } }

/* ════════════════════════════════════════════
   FROM: crear-curso.html
════════════════════════════════════════════ */

        :root { --au-main:#232D4F; --au-accent:#3E5A7E; --au-gold:#E7BA61; --au-bd:#dce8f3; --au-soft:#f0f6fc; }
        .page-build .container { max-width: 1000px; margin: 0 auto; padding: 0 20px; }

        .bld-rolebar { background:linear-gradient(135deg,var(--au-main),var(--au-accent)); color:#fff; border-radius:12px; padding:14px 22px; display:flex; align-items:center; gap:12px; margin-bottom:26px; font-size:14px; }
        .bld-rolebar i { color:var(--color-accent-light); font-size:20px; }
        .bld-rolebar a { color:#fff; margin-left:auto; font-weight:700; text-decoration:underline; font-size:13px; }

        .bld-card { background:#fff; border:1px solid var(--au-bd); border-radius:16px; padding:30px 34px; margin-bottom:22px; box-shadow:0 4px 18px rgba(35,45,79,.06); }
        .bld-card > h2 { font-size:1.1rem; color:var(--au-main); text-transform:uppercase; font-weight:800; letter-spacing:.03em; margin:0 0 20px; display:flex; align-items:center; gap:10px; }
        .bld-card > h2 i { color:var(--au-accent); }

        .bld-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
        .bld-field { margin-bottom:16px; }
        .bld-field.full { grid-column:1/-1; }
        .bld-field label { display:block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#566; margin-bottom:7px; }
        .bld-field input[type=text], .bld-field input[type=number], .bld-field input[type=date], .bld-field input[type=url], .bld-field select, .bld-field textarea {
            width:100%; box-sizing:border-box; font-family:inherit; font-size:14.5px; color:#222;
            border:1px solid var(--au-bd); border-radius:9px; padding:11px 14px; background:#fdfdff; transition:border-color .15s;
        }
        .bld-field input:focus, .bld-field select:focus, .bld-field textarea:focus { outline:none; border-color:var(--au-accent); box-shadow:0 0 0 3px rgba(62,90,126,.12); }
        .bld-field textarea { resize:vertical; min-height:80px; }
        .bld-hint { font-size:12px; color:#9aa6b6; margin-top:5px; }
        .bld-upload { border:2px dashed var(--au-bd); border-radius:12px; padding:26px; text-align:center; color:#9aa6b6; cursor:pointer; transition:all .15s; }
        .bld-upload:hover { border-color:var(--au-accent); background:var(--au-soft); color:var(--au-accent); }
        .bld-upload i { font-size:28px; display:block; margin-bottom:8px; }

        /* módulos */
        .bld-mod { border:1px solid var(--au-bd); border-radius:14px; margin-bottom:18px; background:#fbfcfe; overflow:hidden; }
        .bld-mod__head { display:flex; align-items:center; gap:14px; padding:18px 22px; background:#f4f8fc; border-bottom:1px solid var(--au-bd); }
        .bld-mod__num { width:38px; height:38px; border-radius:10px; background:var(--au-main); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; flex:0 0 38px; }
        .bld-mod__head .bld-modtitle { flex:1; }
        .bld-mod__del { background:none; border:none; color:#b14545; cursor:pointer; font-weight:700; font-size:13px; }
        .bld-mod__body { padding:20px 22px; }
        .bld-mod__body h4 { margin:18px 0 12px; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:var(--au-accent); font-weight:800; display:flex; align-items:center; gap:8px; }

        .bld-clase { border:1px solid var(--au-bd); border-radius:10px; padding:16px 18px; margin-bottom:12px; background:#fff; }
        .bld-clase__top { display:flex; align-items:center; gap:10px; margin-bottom:12px; }
        .bld-clase__top .ci { color:var(--au-main); font-weight:800; font-size:13px; }
        .bld-clase__del { margin-left:auto; background:none; border:none; color:#b8c2d1; cursor:pointer; font-size:13px; }
        .bld-clase__del:hover { color:#b14545; }
        .bld-clase__grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
        .bld-clase__grid .ico-input { position:relative; }
        .bld-clase__grid .ico-input i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#b8c2d1; }
        .bld-clase__grid .ico-input input { padding-left:34px!important; }

        .bld-exam-toggle { display:flex; align-items:center; gap:12px; background:var(--au-soft); border:1px solid var(--au-bd); border-radius:10px; padding:14px 18px; margin-top:8px; }
        .bld-exam-toggle .ttx { flex:1; font-size:13.5px; color:#34415c; }
        .bld-exam-toggle .ttx strong { display:block; color:var(--au-main); }
        .switch { position:relative; width:46px; height:26px; flex:0 0 46px; }
        .switch input { opacity:0; width:0; height:0; }
        .slider { position:absolute; inset:0; background:#c2cad6; border-radius:30px; cursor:pointer; transition:.2s; }
        .slider::before { content:''; position:absolute; width:20px; height:20px; left:3px; top:3px; background:#fff; border-radius:50%; transition:.2s; }
        .switch input:checked + .slider { background:#1d8a4e; }
        .switch input:checked + .slider::before { transform:translateX(20px); }

        .au-btn { display:inline-flex; align-items:center; gap:9px; background:var(--au-main); color:#fff!important; padding:13px 26px; border-radius:10px; font-weight:800; font-size:15px; text-decoration:none!important; border:none; cursor:pointer; font-family:inherit; transition:all .2s; }
        .au-btn:hover { background:var(--au-gold); color:var(--au-main)!important; transform:translateY(-2px); }
        .au-btn--ghost { background:transparent; color:var(--au-main)!important; border:1.5px solid var(--au-bd); }
        .au-btn--ghost:hover { background:var(--au-soft); }
        .au-btn--add { background:var(--au-accent); }
        .au-btn--sm { padding:8px 16px; font-size:13px; }

        .bld-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
        .bld-saved { display:none; background:#e4f5ea; border:1px solid #aee0c0; color:#1d8a4e; border-radius:12px; padding:16px 20px; font-weight:700; margin-bottom:22px; }
        .bld-saved.show { display:flex; gap:10px; align-items:center; }
        .pf-back { display:inline-flex; align-items:center; gap:8px; color:var(--au-main); text-decoration:none; font-weight:700; font-size:14px; margin-bottom:20px; }
        .pf-back:hover { color:var(--au-gold); }

        @media (max-width:680px){ .bld-grid, .bld-clase__grid { grid-template-columns:1fr; } .bld-card{padding:24px 20px;} }

/* ════════════════════════════════════════════
   FROM: crear-examen.html
════════════════════════════════════════════ */

        :root { --au-main:#232D4F; --au-accent:#3E5A7E; --au-gold:#E7BA61; --au-bd:#dce8f3; --au-soft:#f0f6fc; }
        .page-build .container { max-width: 980px; margin: 0 auto; padding: 0 20px; }

        .bld-rolebar { background:linear-gradient(135deg,var(--au-main),var(--au-accent)); color:#fff; border-radius:12px; padding:14px 22px; display:flex; align-items:center; gap:12px; margin-bottom:26px; font-size:14px; }
        .bld-rolebar i { color:var(--color-accent-light); font-size:20px; }
        .bld-rolebar a { color:#fff; margin-left:auto; font-weight:700; text-decoration:underline; font-size:13px; }

        .bld-card { background:#fff; border:1px solid var(--au-bd); border-radius:16px; padding:30px 34px; margin-bottom:22px; box-shadow:0 4px 18px rgba(35,45,79,.06); }
        .bld-card > h2 { font-size:1.1rem; color:var(--au-main); text-transform:uppercase; font-weight:800; letter-spacing:.03em; margin:0 0 20px; display:flex; align-items:center; gap:10px; }
        .bld-card > h2 i { color:var(--au-accent); }

        .bld-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
        .bld-field { margin-bottom:16px; }
        .bld-field.full { grid-column:1/-1; }
        .bld-field label { display:block; font-size:12px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#566; margin-bottom:7px; }
        .bld-field input[type=text], .bld-field input[type=number], .bld-field select, .bld-field textarea {
            width:100%; box-sizing:border-box; font-family:inherit; font-size:14.5px; color:#222;
            border:1px solid var(--au-bd); border-radius:9px; padding:11px 14px; background:#fdfdff; transition:border-color .15s;
        }
        .bld-field input:focus, .bld-field select:focus, .bld-field textarea:focus { outline:none; border-color:var(--au-accent); box-shadow:0 0 0 3px rgba(62,90,126,.12); }
        .bld-field textarea { resize:vertical; min-height:64px; }
        .bld-hint { font-size:12px; color:#9aa6b6; margin-top:5px; }

        /* preguntas */
        .bld-q { border:1px solid var(--au-bd); border-radius:14px; padding:22px 24px; margin-bottom:16px; background:#fbfcfe; position:relative; }
        .bld-q__head { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
        .bld-q__num { width:30px; height:30px; border-radius:8px; background:var(--au-main); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:14px; flex:0 0 30px; }
        .bld-q__head strong { color:var(--au-main); font-size:14px; text-transform:uppercase; letter-spacing:.03em; }
        .bld-q__del { margin-left:auto; background:none; border:none; color:#b14545; cursor:pointer; font-size:13px; font-weight:700; }
        .bld-opt { display:flex; align-items:center; gap:10px; margin-bottom:9px; }
        .bld-opt input[type=radio] { accent-color:#1d8a4e; width:18px; height:18px; flex:0 0 18px; cursor:pointer; }
        .bld-opt input[type=text] { flex:1; }
        .bld-opt__del { background:none; border:none; color:#b8c2d1; cursor:pointer; font-size:14px; }
        .bld-opt__del:hover { color:#b14545; }
        .bld-opt__lbl { font-size:11px; color:#1d8a4e; font-weight:700; white-space:nowrap; }
        .bld-addopt { background:none; border:1px dashed var(--au-bd); color:var(--au-accent); border-radius:8px; padding:7px 14px; font-size:12.5px; font-weight:700; cursor:pointer; font-family:inherit; margin-top:4px; }
        .bld-addopt:hover { background:var(--au-soft); }

        .au-btn { display:inline-flex; align-items:center; gap:9px; background:var(--au-main); color:#fff!important; padding:13px 26px; border-radius:10px; font-weight:800; font-size:15px; text-decoration:none!important; border:none; cursor:pointer; font-family:inherit; transition:all .2s; }
        .au-btn:hover { background:var(--au-gold); color:var(--au-main)!important; transform:translateY(-2px); }
        .au-btn--ghost { background:transparent; color:var(--au-main)!important; border:1.5px solid var(--au-bd); }
        .au-btn--ghost:hover { background:var(--au-soft); }
        .au-btn--add { background:var(--au-accent); }

        .bld-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:8px; }
        .bld-saved { display:none; background:#e4f5ea; border:1px solid #aee0c0; color:#1d8a4e; border-radius:12px; padding:16px 20px; font-weight:700; margin-bottom:22px; }
        .bld-saved.show { display:flex; gap:10px; align-items:center; }

        .pf-back { display:inline-flex; align-items:center; gap:8px; color:var(--au-main); text-decoration:none; font-weight:700; font-size:14px; margin-bottom:20px; }
        .pf-back:hover { color:var(--au-gold); }

        @media (max-width:680px){ .bld-grid{ grid-template-columns:1fr; } .bld-card{padding:24px 20px;} }

/* ════════════════════════════════════════════
   FROM: curso-internacional.html
════════════════════════════════════════════ */

        :root {
            --cp-main: #232D4F;
            --cp-accent: #3E5A7E;
        }

        .cp-wrap { color: #111; line-height: 1.6; overflow-x: hidden; }
        .cp-container { width: 80%; max-width: 1200px; margin: 0 auto; }

        .cp-hero-full {
            width: 100vw;
            max-width: 100vw;
            position: relative;
            margin-left: calc(-50vw + 50%);
            background: url('images/curso-internacional-2023.webp');
            background-size: cover;
            background-position: center;
            color: #fff;
            padding: 160px 0 70px 0;
            display: flex;
            align-items: flex-end;
            margin-bottom: 60px;
            margin-top: 0;
        }

        .cp-hero-full::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(15,23,42,0) 0%, rgba(15,23,42,0.75) 100%);
            z-index: 1;
        }

        .cp-hero-content {
            position: relative;
            z-index: 2;
            width: 80%;
            max-width: 1200px;
            margin: 0 auto;
            text-align: left;
        }

        .cp-hero-title {
            font-size: clamp(3rem, 6vw, 6rem);
            font-weight: 900;
            line-height: 1.1;
            margin: 0 0 10px 0;
            letter-spacing: -0.02em;
            color: #fff;
            text-shadow: 0 10px 30px rgba(0,0,0,0.5);
            word-wrap: break-word;
        }

        .cp-badges {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            font-size: 0.85rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
        }

        .cp-badge-estado {
            background: var(--cp-accent);
            color: #fff;
            padding: 6px 18px;
            border-radius: 50px;
        }

        .cp-grid-2 {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 60px;
            margin-bottom: 80px;
        }

        .cp-bloque-texto { font-weight: 400; line-height: 1.8; }

        .cp-bloque-texto p {
            font-size: 1.1rem;
            margin-bottom: 20px;
            color: inherit;
            text-align: justify;
        }

        .cp-bloque-texto h2 {
            font-size: 1.9rem;
            font-weight: 800;
            text-transform: uppercase;
            color: var(--cp-main);
            margin-top: 50px;
            margin-bottom: 25px;
            padding-bottom: 10px;
            display: inline-block;
            border-bottom: 3px solid var(--cp-accent);
        }

        .cp-bloque-texto h2:first-child { margin-top: 0; }

        .cp-bloque-texto h3 {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--cp-main);
            margin-top: 30px;
            margin-bottom: 15px;
            text-transform: uppercase;
        }

        .cp-frase-destacada {
            font-size: 1.8rem;
            font-weight: 800;
            color: var(--cp-accent);
            line-height: 1.2;
            margin: 50px 0;
            padding-left: 25px;
            border-left: 5px solid var(--cp-main);
            letter-spacing: -0.02em;
        }

        .cp-lista-check {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .cp-lista-check li {
            position: relative;
            padding-left: 30px;
            margin-bottom: 15px;
            font-size: 1.1rem;
        }

        .cp-lista-check li::before {
            content: '→';
            position: absolute;
            left: 0;
            top: 0;
            color: var(--cp-accent);
            font-weight: bold;
        }

        .cp-cta-container {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
            margin-top: 30px;
            margin-bottom: 40px;
        }

        .cp-btn-inscripcion {
            display: inline-block;
            padding: 16px 30px;
            background: var(--cp-accent);
            color: #fff;
            font-size: 1.1rem;
            font-weight: 800;
            text-transform: uppercase;
            border-radius: 8px;
            text-decoration: none;
            transition: all 0.3s;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            letter-spacing: 0.05em;
        }

        .cp-btn-inscripcion:hover {
            background: var(--cp-main);
            color: #fff;
            transform: translateY(-3px);
        }

        .cp-info-box {
            background: #fdfdfd;
            border: 1px solid #eee;
            padding: 40px;
            border-top: 4px solid var(--cp-main);
            height: fit-content;
            position: sticky;
            top: 40px;
        }

        .cp-sidebar-logo {
            max-width: 100%;
            height: auto;
            margin-bottom: 30px;
            display: block;
        }

        .cp-info-box h3 {
            font-size: 1.2rem;
            margin: 0 0 25px 0;
            border-bottom: 1px solid #eaeaea;
            padding-bottom: 15px;
            text-transform: uppercase;
        }

        .cp-info-box h4 {
            font-size: 0.9rem;
            text-transform: uppercase;
            color: #999;
            margin: 0 0 5px 0;
            letter-spacing: 0.05em;
        }

        .cp-info-box p {
            font-size: 1.15rem;
            font-weight: 600;
            margin: 0 0 25px 0;
            line-height: 1.4;
        }

        .cp-sidebar-stat {
            margin-bottom: 25px;
            padding-bottom: 25px;
            border-bottom: 1px dashed #eaeaea;
        }

        .cp-sidebar-stat:last-child {
            border-bottom: none;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .cp-stat-num {
            display: block;
            font-size: 3rem;
            font-weight: 800;
            color: var(--cp-accent);
            line-height: 1;
            margin-bottom: 5px;
            letter-spacing: -0.03em;
        }

        .cp-stat-label {
            font-size: 0.9rem;
            color: #666;
            text-transform: uppercase;
            font-weight: 600;
            letter-spacing: 0.05em;
            display: block;
        }

        .cp-tematicas-mega {
            padding: 0 0 60px 0;
            border-bottom: 1px solid #eaeaea;
            margin-bottom: 60px;
        }

        .cp-tematica-label {
            font-size: 1.1rem;
            font-weight: 700;
            text-transform: uppercase;
            color: #999;
            letter-spacing: 0.1em;
            margin-bottom: 20px;
            display: block;
        }

        .cp-tematicas-mega ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .cp-tematicas-mega li {
            position: relative;
            padding-left: 30px;
            font-size: clamp(1.1rem, 2.5vw, 1.4rem);
            font-weight: 800;
            color: var(--cp-main);
            line-height: 1.2;
            margin-bottom: 15px;
        }

        .cp-tematicas-mega li::before {
            content: '•';
            position: absolute;
            left: 0;
            top: 0;
            color: var(--cp-accent);
        }

        .cp-history-sec {
            margin-top: 80px;
            padding-top: 60px;
            border-top: 2px solid var(--cp-main);
            margin-bottom: 80px;
        }

        .cp-acc {
            border-bottom: 1px solid #eaeaea;
            padding: 30px 0;
        }

        .cp-acc summary {
            font-size: 1.1rem;
            font-weight: 400;
            cursor: pointer;
            display: flex;
            justify-content: space-between;
            align-items: center;
            list-style: none;
        }

        .cp-acc summary::-webkit-details-marker { display: none; }

        .cp-acc summary::after {
            content: '+';
            font-size: 1.1rem;
            color: var(--cp-accent);
            transition: transform 0.3s;
        }

        .cp-acc[open] summary::after { transform: rotate(45deg); }

        .cp-ed-cont {
            padding-top: 25px;
            color: #444;
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
        }

        .cp-ed-data {
            background: #fdfdfd;
            padding: 20px;
            border: 1px solid #eaeaea;
            border-radius: 8px;
        }

        .cp-ed-item {
            margin-bottom: 15px;
        }

        .cp-ed-item strong {
            display: block;
            font-size: 0.9rem;
            color: #999;
            text-transform: uppercase;
            margin-bottom: 3px;
        }

        .cp-ed-item span {
            font-weight: 600;
            font-size: 1.1rem;
            color: #111;
        }

        .cp-timeline-sec {
            margin-top: 80px;
            padding-top: 60px;
            border-top: 2px solid var(--cp-main);
            margin-bottom: 80px;
        }

        .cp-tl-year-block {
            display: grid;
            grid-template-columns: 100px 1fr;
            gap: 40px;
            margin-bottom: 40px;
            border-bottom: 1px solid #eaeaea;
            padding-bottom: 40px;
        }

        .cp-tl-year-block:last-child {
            border-bottom: none;
        }

        .cp-tl-year {
            font-size: 1.5rem;
            font-weight: 600;
            color: var(--cp-main);
            line-height: 1;
        }

        .cp-tl-item {
            display: block;
            text-decoration: none;
            color: inherit;
            margin-bottom: 30px;
            transition: opacity 0.3s;
            border-bottom: 1px solid #f4f4f4;
            padding-bottom: 25px;
        }

        .cp-tl-item:last-child {
            margin-bottom: 0;
            border-bottom: none;
            padding-bottom: 0;
        }

        .cp-tl-item:hover { opacity: 0.6; }

        .cp-tl-meta {
            font-size: 0.85rem;
            font-weight: 400;
            text-transform: uppercase;
            color: #666;
            margin-bottom: 5px;
            display: block;
        }

        .cp-tl-jerarquia {
            display: block;
            font-size: 0.85rem;
            color: var(--cp-accent);
            font-weight: 800;
            text-transform: uppercase;
            margin-bottom: 10px;
            letter-spacing: 0.05em;
        }

        .cp-tl-tit {
            font-size: clamp(1.1rem, 2.5vw, 1.3rem);
            font-weight: 300;
            color: #111;
            line-height: 1.1;
            letter-spacing: -0.02em;
        }

        .proy-num {
            display: inline-block;
            font-size: 3.5rem;
            font-weight: 900;
            color: var(--cp-accent);
            line-height: 0.9;
            margin-right: 20px;
            letter-spacing: -0.03em;
        }

        @media (max-width: 768px) {
            .cp-grid-2, .cp-ed-cont, .cp-tl-year-block {
                grid-template-columns: 1fr;
            }
            .cp-hero-title { font-size: 2.5rem; }
        }

/* ════════════════════════════════════════════
   FROM: escuela-cipdh.html
════════════════════════════════════════════ */

        :root {
            --au-main: #232D4F;
            --au-accent: #3E5A7E;
            --au-gold: #E7BA61;
            --au-bd: #dce8f3;
            --au-soft: #f0f6fc;
        }

        .page-escuela .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

        /* ===== Barra de usuario conectado ===== */
        .au-userbar {
            background: var(--au-main);
            color: #fff;
            border-radius: 12px;
            padding: 16px 24px;
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 30px;
            box-shadow: 0 8px 24px rgba(35,45,79,.18);
        }
        .au-avatar {
            width: 48px; height: 48px; border-radius: 50%;
            background: var(--au-gold); color: var(--au-main);
            display: flex; align-items: center; justify-content: center;
            font-weight: 800; font-size: 1.05rem; flex: 0 0 48px;
        }
        .au-userbar__meta { flex: 1; min-width: 0; line-height: 1.35; }
        .au-userbar__meta strong { display: block; font-size: 1rem; }
        .au-userbar__meta span { font-size: .82rem; opacity: .8; }
        .au-userbar__link {
            color: #fff; text-decoration: none; font-weight: 700; font-size: .85rem;
            border: 1.5px solid rgba(255,255,255,.4); padding: 8px 16px; border-radius: 8px;
            white-space: nowrap; transition: all .2s;
        }
        .au-userbar__link:hover { background: var(--au-gold); border-color: var(--au-gold); color: var(--au-main); }

        /* ===== Selector de Programas (pills) ===== */
        .au-prog-tabs {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 14px;
            margin-bottom: 40px;
        }
        .au-prog-btn {
            background: #fff;
            border: 1px solid var(--au-bd);
            border-radius: 12px;
            padding: 20px 22px;
            text-align: left;
            cursor: pointer;
            transition: all .2s;
            font-family: inherit;
            border-top: 4px solid #cdd9e6;
        }
        .au-prog-btn:hover { box-shadow: 0 10px 26px rgba(35,45,79,.12); transform: translateY(-3px); border-top-color: var(--au-accent); }
        .au-prog-btn.active { border-top-color: var(--au-gold); box-shadow: 0 12px 30px rgba(35,45,79,.16); }
        .au-prog-btn__eyebrow { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--au-accent); display: block; margin-bottom: 6px; }
        .au-prog-btn__title { font-size: 1.05rem; font-weight: 800; color: var(--au-main); line-height: 1.2; }
        .au-prog-btn__sub { font-size: .8rem; color: #6b7688; margin-top: 6px; display: block; }

        /* ===== Portal (sidebar + contenido) ===== */
        .au-program { display: none; }
        .au-program.active { display: block; animation: auFade .35s ease; }
        @keyframes auFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

        .au-portal { display: flex; gap: 36px; align-items: flex-start; }
        .au-content { flex: 1; min-width: 0; }

        .au-side {
            flex: 0 0 250px;
            display: flex; flex-direction: column;
            background: #fff; border-radius: 10px; overflow: hidden;
            box-shadow: 0 2px 12px rgba(15,49,81,.10);
            border: 1px solid var(--au-bd);
            align-self: flex-start; position: sticky; top: 100px;
        }
        .au-side__head { background: var(--au-main); padding: 14px 18px 12px; }
        .au-side__head span { font-size: 10px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.75); }
        .au-tab-btn {
            background: transparent; color: #4a5568; cursor: pointer;
            padding: 12px 16px 12px 20px; text-align: left; border: none;
            border-left: 3px solid transparent; border-bottom: 1px solid #f0f5fa;
            outline: none; transition: all .18s; font-size: 13.5px; font-weight: 500;
            width: 100%; line-height: 1.3; font-family: inherit;
            display: flex; align-items: center; gap: 9px;
        }
        .au-tab-btn i { width: 16px; text-align: center; color: var(--au-accent); font-size: 13px; }
        .au-tab-btn:last-child { border-bottom: none; }
        .au-tab-btn:hover { background: var(--au-soft); color: var(--au-main); border-left-color: #a0c4df; }
        .au-tab-btn.active { background: #eaf2fb; color: var(--au-main); font-weight: 700; border-left-color: var(--au-accent); }
        .au-tab-btn.active i { color: var(--au-main); }

        .au-pane { display: none; animation: auFade .3s ease; }
        .au-pane.active { display: block; }

        /* ===== Cabeceras de sección ===== */
        .au-cat-head { margin-bottom: 28px; padding-bottom: 16px; border-bottom: 1px solid #eaeaea; }
        .au-cat-head h2 { color: var(--au-main); font-size: 1.7rem; font-weight: 800; text-transform: uppercase; margin: 0 0 12px; letter-spacing: -.01em; }
        .au-cat-desc { font-size: 15px; color: #555; line-height: 1.65; max-width: 760px; }
        .au-sub { color: var(--au-main); font-size: 1.15rem; margin: 32px 0 16px; text-transform: uppercase; font-weight: 800; letter-spacing: .02em; }

        /* ===== Objetivos / lista check ===== */
        .au-check { list-style: none; padding: 0; margin: 16px 0 0; }
        .au-check li { position: relative; padding-left: 30px; margin-bottom: 13px; font-size: 15px; color: #333; line-height: 1.55; }
        .au-check li::before { content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 1px; color: var(--au-accent); font-size: 12px; }

        /* ===== Botón externo ===== */
        .au-btn {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--au-main); color: #fff !important;
            padding: 10px 20px; border-radius: 8px; font-weight: 700; font-size: 13.5px;
            text-decoration: none !important; transition: all .2s; border: none; cursor: pointer; font-family: inherit;
        }
        .au-btn:hover { background: var(--au-gold); color: var(--au-main) !important; transform: translateY(-2px); }
        .au-btn--ghost { background: transparent; color: var(--au-main) !important; border: 1.5px solid var(--au-bd); }
        .au-btn--ghost:hover { background: var(--au-soft); color: var(--au-main) !important; }

        /* ===== Lista de documentos / PDFs ===== */
        .au-doc-list { list-style: none; padding: 0; margin: 0; }
        .au-doc-item {
            padding: 14px 16px; border: 1px solid var(--au-bd); border-radius: 10px; margin-bottom: 10px;
            display: flex; align-items: center; gap: 14px; transition: all .18s; background: #fff;
        }
        .au-doc-item:hover { border-color: var(--au-accent); box-shadow: 0 6px 18px rgba(35,45,79,.08); }
        .au-doc-item i.au-doc-ico { font-size: 22px; color: #c0392b; flex: 0 0 22px; }
        .au-doc-item .au-doc-body { flex: 1; min-width: 0; }
        .au-doc-item .au-doc-body strong { display: block; font-size: 14.5px; color: #222; font-weight: 600; }
        .au-doc-item .au-doc-body span { font-size: 12px; color: #888; }
        .au-doc-item a.au-doc-go { color: var(--au-main); font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; }
        .au-doc-item a.au-doc-go:hover { color: var(--color-accent); }

        /* ===== Cards de personas (docentes / jurado / staff) ===== */
        .au-people { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin-top: 8px; }
        .au-person {
            background: #fff; border: 1px solid var(--au-bd); border-radius: 14px; padding: 22px;
            display: flex; gap: 16px; align-items: flex-start; transition: all .2s; cursor: pointer; position: relative;
        }
        .au-person::after { content: 'Ver perfil \f105'; font-family: 'Font Awesome 6 Free'; font-weight: 700; position: absolute; bottom: 12px; right: 16px; font-size: 11px; color: var(--au-accent); opacity: 0; transition: opacity .2s; }
        .au-person:hover::after { opacity: .9; }
        .au-person:hover { box-shadow: 0 14px 32px rgba(35,45,79,.12); transform: translateY(-4px); border-color: var(--au-accent); }
        .au-person__ava {
            width: 56px; height: 56px; border-radius: 50%; flex: 0 0 56px;
            background: linear-gradient(135deg, var(--au-main), var(--au-accent));
            color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.1rem;
        }
        .au-person__body h4 { margin: 0 0 3px; font-size: 1rem; color: var(--au-main); font-weight: 800; }
        .au-person__body .au-role { font-size: 12px; color: var(--au-accent); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; display: block; margin-bottom: 7px; }
        .au-person__body p { margin: 0; font-size: 13px; color: #666; line-height: 1.5; }

        /* ===== Clases (YouTube oculto) ===== */
        .au-class {
            display: flex; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--au-bd);
            border-radius: 10px; margin-bottom: 10px; text-decoration: none; transition: all .18s; background: #fff;
        }
        .au-class:hover { border-color: var(--au-accent); box-shadow: 0 6px 18px rgba(35,45,79,.08); }
        .au-class__thumb {
            width: 96px; height: 56px; border-radius: 6px; flex: 0 0 96px;
            background: var(--au-main); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px;
            position: relative; overflow: hidden;
        }
        .au-class__thumb::after { content: 'YouTube · No listado'; position: absolute; bottom: 0; left: 0; right: 0; font-size: 7px; letter-spacing: .04em; background: rgba(0,0,0,.45); padding: 2px; text-align: center; }
        .au-class__body { flex: 1; min-width: 0; }
        .au-class__body strong { display: block; font-size: 14.5px; color: #222; }
        .au-class__body span { font-size: 12px; color: #888; }
        .au-class__lock { font-size: 12px; color: #999; }

        /* ===== Niveles de acceso (desplegables) ===== */
        .au-levels-intro {
            background: var(--au-soft); border: 1px solid var(--au-bd); border-radius: 12px; padding: 18px 20px;
            font-size: 14px; color: #34415c; line-height: 1.6; margin-bottom: 22px; display: flex; gap: 14px; align-items: flex-start;
        }
        .au-levels-intro i { color: var(--au-accent); font-size: 20px; margin-top: 2px; }

        .au-level { border: 1px solid var(--au-bd); border-radius: 12px; margin-bottom: 14px; overflow: hidden; background: #fff; }
        .au-level > summary {
            list-style: none; cursor: pointer; padding: 18px 22px; display: flex; align-items: center; gap: 14px;
            font-weight: 700; color: var(--au-main); -webkit-user-select: none; user-select: none;
        }
        .au-level > summary::-webkit-details-marker { display: none; }
        .au-level__badge {
            width: 34px; height: 34px; border-radius: 9px; background: var(--au-main); color: #fff;
            display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 14px; flex: 0 0 34px;
        }
        .au-level__t { flex: 1; }
        .au-level__t small { display: block; font-weight: 500; font-size: 12px; color: #7a8699; margin-top: 2px; }
        .au-level__state { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 4px 10px; border-radius: 20px; }
        .au-state-open { background: #e4f5ea; color: #1d8a4e; }
        .au-state-locked { background: #f3e7e7; color: #b14545; }
        .au-state-done { background: #e7eefb; color: var(--au-accent); }
        /* .au-level__chev es un .ds-chev (chevron circular unificado); el glyph rota al abrir */
        .au-level[open] .au-level__chev i { transform: rotate(180deg); }
        .au-level__inner { padding: 0 22px 22px; border-top: 1px solid #f0f3f8; padding-top: 18px; }
        /* Cuando .au-level__inner va DENTRO del <summary> (envuelve el título),
           ocupa el espacio (empuja el chevron a la derecha) y no lleva panel-styling */
        .au-level > summary .au-level__inner { flex: 1; padding: 0; border-top: none; }

        /* nivel bloqueado */
        .au-level--locked > summary { cursor: not-allowed; opacity: .85; }
        .au-level--locked .au-level__badge { background: #b8c2d1; }
        .au-locked-msg {
            text-align: center; padding: 30px 20px; color: #7a8699; font-size: 14px;
        }
        .au-locked-msg i { font-size: 30px; color: #b8c2d1; display: block; margin-bottom: 12px; }

        /* ===== Examen ===== */
        .au-exam { background: #fbfcfe; border: 1px solid var(--au-bd); border-radius: 14px; padding: 26px; margin-top: 8px; }
        .au-exam__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
        .au-exam__head i { color: var(--au-gold); font-size: 22px; }
        .au-exam__head h4 { margin: 0; color: var(--au-main); font-size: 1.15rem; font-weight: 800; }
        .au-exam__note { font-size: 13px; color: #6b7688; margin: 0 0 20px; }
        .au-progress { height: 8px; background: #e7edf5; border-radius: 6px; overflow: hidden; margin-bottom: 22px; }
        .au-progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--au-accent), var(--au-gold)); transition: width .4s; }
        .au-q { margin-bottom: 22px; padding-bottom: 22px; border-bottom: 1px dashed #e2e8f1; }
        .au-q:last-of-type { border-bottom: none; }
        .au-q__title { font-weight: 700; color: #222; font-size: 14.5px; margin-bottom: 12px; }
        .au-q__title span { color: var(--au-accent); margin-right: 6px; }
        .au-opt { display: flex; align-items: flex-start; gap: 10px; padding: 9px 12px; border: 1px solid #e2e8f1; border-radius: 8px; margin-bottom: 8px; cursor: pointer; transition: all .15s; font-size: 14px; color: #333; }
        .au-opt:hover { border-color: var(--au-accent); background: #fff; }
        .au-opt input { margin-top: 3px; accent-color: var(--au-accent); }
        .au-opt.correct { border-color: #1d8a4e; background: #effaf3; }
        .au-opt.wrong { border-color: #b14545; background: #fdf0f0; }
        .au-exam__result { display: none; padding: 18px 20px; border-radius: 10px; margin-bottom: 18px; font-size: 14.5px; font-weight: 600; }
        .au-exam__result.show { display: block; }
        .au-exam__result.pass { background: #e4f5ea; color: #1d8a4e; border: 1px solid #aee0c0; }
        .au-exam__result.fail { background: #fdf0f0; color: #b14545; border: 1px solid #f0c4c4; }

        /* ===== Certificados ===== */
        .au-cert-banner {
            background: linear-gradient(135deg, var(--au-main), var(--au-accent)); color: #fff;
            border-radius: 14px; padding: 24px 26px; margin-bottom: 26px; display: flex; gap: 18px; align-items: center;
        }
        .au-cert-banner i { font-size: 34px; color: var(--color-accent-light); }
        .au-cert-banner h3 { margin: 0 0 4px; font-size: 1.15rem; }
        .au-cert-banner p { margin: 0; font-size: 13.5px; opacity: .9; line-height: 1.5; }
        .au-cert-table { width: 100%; border-collapse: collapse; font-size: 14px; }
        .au-cert-table th { text-align: left; padding: 12px 14px; background: var(--au-soft); color: var(--au-main); font-size: 11px; text-transform: uppercase; letter-spacing: .05em; border-bottom: 2px solid var(--au-bd); }
        .au-cert-table td { padding: 14px; border-bottom: 1px solid #eef2f7; color: #333; }
        .au-cert-table tr:hover td { background: #fafcff; }
        .au-chip { display: inline-block; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 20px; }
        .au-chip--ok { background: #e4f5ea; color: #1d8a4e; }
        .au-chip--pend { background: #fdf6e3; color: #a07c1f; }

        /* ===== Visor PDF ===== */
        .au-pdfviewer {
            border: 1px solid var(--au-bd); border-radius: 12px; overflow: hidden; background: #525659;
            height: 480px; display: flex; align-items: center; justify-content: center; flex-direction: column; color: #fff; gap: 14px; text-align: center;
        }
        .au-pdfviewer i { font-size: 54px; color: #c0392b; }
        .au-pdfviewer span { font-size: 13px; opacity: .8; }

        .au-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 14px; margin: 8px 0 24px; }
        .au-info-card { background: var(--au-soft); border: 1px solid var(--au-bd); border-radius: 12px; padding: 18px; }
        .au-info-card .au-num { font-size: 1.9rem; font-weight: 900; color: var(--au-accent); display: block; line-height: 1; }
        .au-info-card .au-lbl { font-size: 12px; color: #6b7688; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; margin-top: 6px; display: block; }

        .au-uni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px,1fr)); gap: 14px; }
        .au-uni { background: #fff; border: 1px solid var(--au-bd); border-radius: 12px; padding: 18px; display: flex; align-items: center; gap: 12px; transition: all .2s; }
        .au-uni:hover { border-color: var(--au-accent); box-shadow: 0 8px 20px rgba(35,45,79,.08); }
        .au-uni i { font-size: 22px; color: var(--au-main); }
        .au-uni strong { font-size: 13.5px; color: #222; line-height: 1.3; }

        /* ===== Módulos ===== */
        .au-module { border: 1px solid var(--au-bd); border-radius: 14px; margin-bottom: 18px; overflow: hidden; background: #fff; }
        .au-module--locked { opacity: .96; }
        .au-module__head { display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: #f4f8fc; border-bottom: 1px solid var(--au-bd); }
        .au-module--locked .au-module__head { background: #f3f5f8; }
        .au-module__num { width: 42px; height: 42px; border-radius: 11px; background: var(--au-main); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.1rem; flex: 0 0 42px; }
        .au-module--locked .au-module__num { background: #b8c2d1; }
        .au-module__t { flex: 1; min-width: 0; }
        .au-module__t h3 { margin: 0; font-size: 1.1rem; color: var(--au-main); font-weight: 800; line-height: 1.2; }
        .au-module__t small { display: block; font-size: 12px; color: #7a8699; margin-top: 3px; }
        .au-module__state { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; padding: 5px 12px; border-radius: 20px; white-space: nowrap; }
        .au-module__body { padding: 18px 22px 22px; }
        .au-module__locknote { text-align: center; padding: 26px 20px; color: #7a8699; font-size: 14px; }
        .au-module__locknote i { font-size: 28px; color: #b8c2d1; display: block; margin-bottom: 10px; }

        .au-lesson { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--au-bd); border-radius: 10px; margin-bottom: 10px; background: #fff; }
        .au-lesson__ico { width: 44px; height: 44px; border-radius: 9px; background: var(--au-soft); color: var(--au-accent); display: flex; align-items: center; justify-content: center; font-size: 18px; flex: 0 0 44px; }
        .au-lesson__body { flex: 1; min-width: 0; }
        .au-lesson__body strong { display: block; font-size: 14.5px; color: #222; }
        .au-lesson__body > span { font-size: 12px; color: #888; }
        .au-lesson__links { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
        .au-mlink { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; text-decoration: none; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--au-bd); color: var(--au-main); transition: all .15s; }
        .au-mlink:hover { border-color: var(--au-accent); background: var(--au-soft); }
        .au-mlink i { color: #c0392b; }
        .au-mlink--zoom i { color: #2D8CFF; }
        .au-att { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 700; padding: 8px 13px; border-radius: 8px; border: 1px solid var(--au-bd); background: #fff; color: #6b7688; cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap; }
        .au-att:hover { border-color: var(--au-accent); color: var(--au-main); }
        .au-att.done { background: #e4f5ea; border-color: #aee0c0; color: #1d8a4e; }

        .au-module__exam { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 14px; padding: 18px 20px; border-radius: 12px; background: linear-gradient(135deg, var(--au-main), var(--au-accent)); color: #fff; }
        .au-module__exam i.exam-ico { font-size: 26px; color: var(--color-accent-light); }
        .au-module__exam div { flex: 1; min-width: 180px; }
        .au-module__exam strong { display: block; font-size: 15px; }
        .au-module__exam span { font-size: 12.5px; opacity: .85; }

        /* ===== Modal de perfil de persona ===== */
        .au-modal { position: fixed; inset: 0; background: rgba(15,23,42,.6); display: none; align-items: center; justify-content: center; z-index: 1000; padding: 20px; }
        .au-modal.open { display: flex; animation: auFade .2s ease; }
        .au-modal__box { background: #fff; border-radius: 18px; max-width: 460px; width: 100%; overflow: hidden; box-shadow: 0 30px 70px rgba(0,0,0,.4); }
        .au-modal__top { background: linear-gradient(135deg, var(--au-main), var(--au-accent)); padding: 30px; display: flex; gap: 18px; align-items: center; color: #fff; position: relative; }
        .au-modal__ava { width: 74px; height: 74px; border-radius: 50%; flex: 0 0 74px; background: var(--au-gold); color: var(--au-main); display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 1.6rem; }
        .au-modal__top h3 { margin: 0 0 4px; font-size: 1.3rem; }
        .au-modal__role { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .9; }
        .au-modal__close { position: absolute; top: 14px; right: 16px; background: rgba(255,255,255,.18); border: none; color: #fff; width: 32px; height: 32px; border-radius: 50%; cursor: pointer; font-size: 15px; }
        .au-modal__close:hover { background: rgba(255,255,255,.3); }
        .au-modal__body { padding: 26px 30px 30px; }
        .au-modal__body p { font-size: 14px; color: #444; line-height: 1.6; margin: 0 0 14px; }
        .au-modal__body .au-modal__bio { color: #555; }
        .au-modal__contact { font-size: 13px; color: var(--au-accent); font-weight: 700; display: flex; align-items: center; gap: 8px; }

        /* ===== Audiencias (enfrentamientos por Zoom) ===== */
        .au-match { border: 1px solid var(--au-bd); border-radius: 14px; padding: 18px 20px; margin-bottom: 14px; background: #fff; transition: all .18s; }
        .au-match:hover { box-shadow: 0 8px 22px rgba(35,45,79,.08); border-color: var(--au-accent); }
        .au-match__top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
        .au-match__tema { flex: 1; font-size: 12px; color: #7a8699; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
        .au-match__state { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 11px; border-radius: 20px; white-space: nowrap; }
        .au-match__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; }
        .au-match__team { display: flex; align-items: center; gap: 11px; min-width: 0; }
        .au-match__team:last-child { justify-content: flex-end; text-align: right; }
        .au-match__team i { font-size: 20px; color: var(--au-main); flex: 0 0 auto; }
        .au-match__team strong { font-size: 14px; color: #222; line-height: 1.25; }
        .au-match__team small { display: block; font-size: 11px; color: #8a93a3; font-weight: 600; }
        .au-match__vs { font-weight: 900; font-size: 13px; color: var(--au-accent); background: var(--au-soft); border: 1px solid var(--au-bd); width: 38px; height: 38px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
        .au-match__foot { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid #f0f3f8; font-size: 12.5px; color: #6b7688; }
        .au-match__foot .mf { display: inline-flex; align-items: center; gap: 6px; }
        .au-match__foot .mf i { color: var(--au-accent); }
        .au-match__zoom { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 700; text-decoration: none; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--au-bd); color: var(--au-main); transition: all .15s; }
        .au-match__zoom i { color: #2D8CFF; }
        .au-match__zoom:hover { border-color: #2D8CFF; background: #eef6ff; }
        .au-match__zoom.disabled { opacity: .5; pointer-events: none; }
        .au-match__result { margin-left: auto; font-weight: 800; color: #1d8a4e; font-size: 13px; }

        /* ===== Instituciones y equipos ===== */
        .au-inst2 { border: 1px solid var(--au-bd); border-radius: 14px; padding: 20px 22px; margin-bottom: 14px; background: #fff; transition: all .18s; }
        .au-inst2:hover { box-shadow: 0 8px 22px rgba(35,45,79,.08); border-color: var(--au-accent); }
        .au-inst2__head { display: flex; align-items: center; gap: 13px; }
        .au-inst2__ico { width: 44px; height: 44px; border-radius: 11px; background: var(--au-soft); color: var(--au-main); display: flex; align-items: center; justify-content: center; font-size: 19px; flex: 0 0 44px; }
        .au-inst2__head h4 { margin: 0; font-size: 1.02rem; color: var(--au-main); font-weight: 800; }
        .au-inst2__type { display: inline-block; font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 12px; margin-top: 4px; background: #e7eefb; color: var(--au-accent); }
        .au-inst2__count { margin-left: auto; font-size: 12px; color: #8a93a3; font-weight: 700; white-space: nowrap; }
        .au-inst2__team-lbl { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: #9aa6b6; margin: 16px 0 10px; }
        .au-members { display: flex; gap: 8px; flex-wrap: wrap; }
        .au-member { display: inline-flex; align-items: center; gap: 8px; background: var(--au-soft); border: 1px solid var(--au-bd); border-radius: 30px; padding: 5px 13px 5px 5px; font-size: 12.5px; color: #34415c; font-weight: 600; }
        .au-member .ma { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--au-main), var(--au-accent)); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; }

        @media (max-width: 880px) {
            .au-prog-tabs { grid-template-columns: 1fr; }
            .au-portal { flex-direction: column; gap: 0; }
            .au-side { display: none; }
            .au-mobile-nav { display: block; }
        }

/* ════════════════════════════════════════════
   FROM: examen.html
════════════════════════════════════════════ */

        :root { --au-main:#232D4F; --au-accent:#3E5A7E; --au-gold:#E7BA61; --au-bd:#dce8f3; --au-soft:#f0f6fc; }
        .page-examen .container { max-width: 920px; margin: 0 auto; padding: 0 20px; }

        /* Cuando el intento está activo: bloquear navegación */
        body.exam-active #masthead .main-navigation,
        body.exam-active #masthead .header-tools,
        body.exam-active #colophon { pointer-events: none; opacity: .35; filter: grayscale(.4); -webkit-user-select: none; user-select: none; }
        body.exam-active #masthead .site-branding { pointer-events: none; }

        /* Barra fija del examen (timer) */
        .ex-bar {
            position: sticky; top: 70px; z-index: 50; display: none;
            background: var(--au-main); color: #fff; border-radius: 12px;
            padding: 14px 22px; margin-bottom: 26px; align-items: center; gap: 18px;
            box-shadow: 0 10px 30px rgba(35,45,79,.25);
        }
        body.exam-active .ex-bar { display: flex; }
        .ex-bar__lock { font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex: 1; }
        .ex-bar__lock i { color: var(--color-accent-light); }
        .ex-timer { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: 1px; display: flex; align-items: center; gap: 9px; }
        .ex-timer.warn { color: #ffb4b4; animation: exblink 1s steps(2) infinite; }
        @keyframes exblink { 50% { opacity: .45; } }
        .ex-prog { font-size: 12px; opacity: .85; white-space: nowrap; }

        /* Tarjeta intro / resultado */
        .ex-panel { background:#fff; border:1px solid var(--au-bd); border-radius:16px; padding:38px 40px; box-shadow:0 4px 20px rgba(35,45,79,.07); }
        .ex-eyebrow { font-size:12px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--au-accent); }
        .ex-panel h1 { font-size:1.9rem; color:var(--au-main); font-weight:900; margin:6px 0 8px; letter-spacing:-.01em; }
        .ex-context { color:#6b7688; font-size:14px; margin-bottom:26px; }
        .ex-meta { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:28px; }
        .ex-meta__item { background:var(--au-soft); border:1px solid var(--au-bd); border-radius:12px; padding:16px; }
        .ex-meta__item .n { font-size:1.5rem; font-weight:900; color:var(--au-main); display:block; line-height:1; }
        .ex-meta__item .l { font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#6b7688; font-weight:700; margin-top:6px; display:block; }
        .ex-rules { list-style:none; padding:0; margin:0 0 30px; }
        .ex-rules li { position:relative; padding-left:30px; margin-bottom:12px; font-size:14.5px; color:#34415c; line-height:1.5; }
        .ex-rules li i { position:absolute; left:0; top:2px; color:var(--au-accent); }
        .ex-attempts-note { background:#fdf6e3; border:1px solid #f0e2b8; color:#8a6d1a; border-radius:10px; padding:14px 18px; font-size:13.5px; margin-bottom:24px; display:flex; gap:10px; align-items:flex-start; }
        .ex-attempts-note i { margin-top:2px; }

        .au-btn { display:inline-flex; align-items:center; gap:9px; background:var(--au-main); color:#fff!important; padding:13px 26px; border-radius:10px; font-weight:800; font-size:15px; text-decoration:none!important; border:none; cursor:pointer; font-family:inherit; transition:all .2s; }
        .au-btn:hover { background:var(--au-gold); color:var(--au-main)!important; transform:translateY(-2px); }
        .au-btn:disabled { background:#c2cad6; cursor:not-allowed; transform:none; color:#fff!important; }
        .au-btn--ghost { background:transparent; color:var(--au-main)!important; border:1.5px solid var(--au-bd); }
        .au-btn--ghost:hover { background:var(--au-soft); color:var(--au-main)!important; }

        /* Preguntas */
        .ex-quiz { display:none; }
        body.exam-active .ex-quiz { display:block; }
        .ex-q { background:#fff; border:1px solid var(--au-bd); border-radius:14px; padding:24px 26px; margin-bottom:16px; }
        .ex-q__t { font-weight:700; color:#222; font-size:15.5px; margin-bottom:14px; line-height:1.4; }
        .ex-q__t span { color:var(--au-accent); margin-right:8px; font-weight:800; }
        .ex-opt { display:flex; align-items:flex-start; gap:11px; padding:11px 14px; border:1px solid #e2e8f1; border-radius:9px; margin-bottom:9px; cursor:pointer; transition:all .15s; font-size:14.5px; color:#333; }
        .ex-opt:hover { border-color:var(--au-accent); background:var(--au-soft); }
        .ex-opt input { margin-top:3px; accent-color:var(--au-accent); }
        .ex-opt.correct { border-color:#1d8a4e; background:#effaf3; }
        .ex-opt.wrong { border-color:#b14545; background:#fdf0f0; }
        .ex-quiz__foot { display:flex; justify-content:flex-end; margin-top:8px; }

        /* Resultado */
        .ex-result { display:none; text-align:center; }
        .ex-score-ring { width:130px; height:130px; border-radius:50%; margin:0 auto 18px; display:flex; align-items:center; justify-content:center; flex-direction:column; font-weight:900; }
        .ex-score-ring .pts { font-size:2.4rem; line-height:1; }
        .ex-score-ring .of { font-size:.85rem; opacity:.7; }
        .ex-result.pass .ex-score-ring { background:#e4f5ea; color:#1d8a4e; border:6px solid #aee0c0; }
        .ex-result.fail .ex-score-ring { background:#fdf0f0; color:#b14545; border:6px solid #f0c4c4; }
        .ex-result h2 { font-size:1.6rem; margin:6px 0; color:var(--au-main); }
        .ex-result p { color:#566; font-size:15px; margin:0 0 24px; }
        .ex-result__actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

        @media (max-width:600px){ .ex-panel{padding:26px 22px;} .ex-bar{top:60px;flex-wrap:wrap;} }

/* ════════════════════════════════════════════
   FROM: gestion-alumnos.html
════════════════════════════════════════════ */

        :root { --ga-main:#232D4F; --ga-accent:#3E5A7E; --ga-gold:#E7BA61; --ga-bd:#dce8f3; --ga-soft:#f0f6fc; }
        .page-build .container { max-width:1240px; margin:0 auto; padding:0 20px; }

        .ga-rolebar { background:linear-gradient(135deg,var(--ga-main),var(--ga-accent)); color:#fff; border-radius:12px; padding:14px 22px; display:flex; align-items:center; gap:12px; margin-bottom:22px; font-size:14px; flex-wrap:wrap; }
        .ga-rolebar i { color:var(--ga-gold); font-size:20px; }
        .ga-rolebar a { color:#fff; margin-left:auto; font-weight:700; text-decoration:underline; font-size:13px; }

        /* selector curso */
        .ga-coursebar { display:flex; gap:16px; flex-wrap:wrap; align-items:flex-end; background:#fff; border:1px solid var(--ga-bd); border-radius:14px; padding:20px 24px; margin-bottom:22px; box-shadow:0 2px 14px rgba(35,45,79,.06); }
        .ga-coursebar .f { display:flex; flex-direction:column; gap:6px; }
        .ga-coursebar label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#9aa6b6; }
        .ga-coursebar select { font-family:inherit; font-size:14.5px; color:#222; border:1px solid var(--ga-bd); border-radius:9px; padding:10px 14px; background:#fdfdff; min-width:240px; }
        .ga-coursebar select:focus { outline:none; border-color:var(--ga-accent); }

        /* métricas */
        .ga-metrics { display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:22px; }
        .ga-metric { background:#fff; border:1px solid var(--ga-bd); border-radius:14px; padding:18px 20px; box-shadow:0 2px 14px rgba(35,45,79,.06); border-top:4px solid var(--ga-accent); }
        .ga-metric:nth-child(2){border-top-color:#1d8a4e;} .ga-metric:nth-child(3){border-top-color:#b14545;} .ga-metric:nth-child(5){border-top-color:var(--ga-gold);}
        .ga-metric .n { font-size:1.9rem; font-weight:900; color:var(--ga-main); display:block; line-height:1; }
        .ga-metric .l { font-size:11px; color:#6b7688; text-transform:uppercase; font-weight:700; margin-top:7px; display:block; }

        /* filtros */
        .ga-filters { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px; }
        .ga-search { position:relative; flex:1; min-width:220px; }
        .ga-search i { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:#b8c2d1; }
        .ga-search input { width:100%; box-sizing:border-box; padding:11px 14px 11px 38px; border:1px solid var(--ga-bd); border-radius:9px; font-family:inherit; font-size:14px; }
        .ga-search input:focus { outline:none; border-color:var(--ga-accent); }
        .ga-chip-filter { border:1px solid var(--ga-bd); background:#fff; color:#6b7688; padding:9px 16px; border-radius:20px; font-size:13px; font-weight:700; cursor:pointer; font-family:inherit; transition:all .15s; }
        .ga-chip-filter:hover { border-color:var(--ga-accent); color:var(--ga-main); }
        .ga-chip-filter.active { background:var(--ga-main); color:#fff; border-color:var(--ga-main); }
        .ga-btn { display:inline-flex; align-items:center; gap:8px; background:var(--ga-main); color:#fff!important; padding:10px 18px; border-radius:9px; font-weight:700; font-size:13.5px; text-decoration:none; border:none; cursor:pointer; font-family:inherit; transition:all .2s; }
        .ga-btn:hover { background:var(--ga-gold); color:var(--ga-main)!important; }

        /* tabla */
        .ga-tablewrap { background:#fff; border:1px solid var(--ga-bd); border-radius:14px; overflow:hidden; box-shadow:0 2px 14px rgba(35,45,79,.06); overflow-x:auto; }
        .ga-table { width:100%; border-collapse:collapse; font-size:13.5px; min-width:980px; }
        .ga-table th { text-align:left; padding:13px 14px; background:var(--ga-soft); color:var(--ga-main); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid var(--ga-bd); white-space:nowrap; position:sticky; top:0; }
        .ga-table td { padding:13px 14px; border-bottom:1px solid #eef2f7; color:#333; vertical-align:middle; }
        .ga-table tr:hover td { background:#fafcff; }
        .ga-alumno { display:flex; align-items:center; gap:10px; }
        .ga-ava { width:32px; height:32px; border-radius:50%; background:linear-gradient(135deg,var(--ga-main),var(--ga-accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; flex:0 0 32px; }
        .ga-alumno b { font-weight:700; color:#222; }
        .ga-inst { font-size:11.5px; color:#8a93a3; }

        .ga-grade { font-weight:800; }
        .ga-grade.ok { color:#1d8a4e; } .ga-grade.no { color:#b14545; } .ga-grade.na { color:#b8c2d1; font-weight:600; }
        .ga-att { display:inline-flex; align-items:center; gap:7px; }
        .ga-attbar { width:56px; height:7px; background:#e7edf5; border-radius:5px; overflow:hidden; }
        .ga-attbar > i { display:block; height:100%; background:linear-gradient(90deg,var(--ga-accent),var(--ga-gold)); }

        .ga-state { font-size:11px; font-weight:800; padding:4px 11px; border-radius:20px; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
        .ga-state--ok { background:#e4f5ea; color:#1d8a4e; }
        .ga-state--no { background:#fdf0f0; color:#b14545; }
        .ga-state--cur { background:#fdf6e3; color:#a07c1f; }

        .ga-cert-btn { display:inline-flex; align-items:center; gap:6px; background:var(--ga-main); color:#fff!important; padding:7px 13px; border-radius:7px; font-size:12px; font-weight:700; text-decoration:none; white-space:nowrap; transition:all .2s; }
        .ga-cert-btn:hover { background:var(--ga-gold); color:var(--ga-main)!important; }
        .ga-cert-na { font-size:12px; color:#b8c2d1; font-weight:600; }
        .ga-cert-pend { font-size:12px; color:#a07c1f; font-weight:600; }

        .ga-empty { display:none; text-align:center; padding:40px; color:#9aa6b6; }
        .pf-back { display:inline-flex; align-items:center; gap:8px; color:var(--ga-main); text-decoration:none; font-weight:700; font-size:14px; margin-bottom:18px; }
        .pf-back:hover { color:var(--ga-gold); }

        @media (max-width:980px){ .ga-metrics{grid-template-columns:repeat(2,1fr);} }

/* ════════════════════════════════════════════
   FROM: login.html
════════════════════════════════════════════ */

        :root {
            --lg-main: #232D4F;
            --lg-accent: #3E5A7E;
            --lg-gold: #E7BA61;
            --lg-border: #dce8f3;
            --lg-soft: #f0f6fc;
        }

        body.page-login {
            background: var(--lg-soft);
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px;
        }

        .login-container {
            width: 100%;
            max-width: 420px;
        }

        .login-card {
            background: #fff;
            border: 1px solid var(--lg-border);
            border-radius: 16px;
            padding: 48px 40px;
            box-shadow: 0 4px 20px rgba(35, 45, 79, 0.08);
        }

        .login-header {
            text-align: center;
            margin-bottom: 40px;
        }

        .login-logo {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            background: linear-gradient(135deg, var(--lg-main), var(--lg-accent));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-size: 2rem;
            font-weight: 900;
        }

        .login-header h1 {
            font-size: 1.6rem;
            font-weight: 800;
            color: var(--lg-main);
            margin: 0 0 8px 0;
            letter-spacing: -0.5px;
        }

        .login-header p {
            font-size: 0.95rem;
            color: #6b7688;
            margin: 0;
        }

        /* Tabs de roles */
        .login-roles {
            display: flex;
            gap: 8px;
            margin-bottom: 32px;
            background: var(--lg-soft);
            padding: 6px;
            border-radius: 10px;
        }

        .login-role-btn {
            flex: 1;
            min-width: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 10px 6px;
            border: none;
            background: transparent;
            color: #6b7688;
            font-weight: 700;
            font-size: 0.72rem;
            text-transform: uppercase;
            letter-spacing: 0.2px;
            line-height: 1.2;
            border-radius: 8px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: inherit;
            white-space: nowrap;
        }

        .login-role-btn i {
            font-size: 0.95rem;
        }

        .login-role-btn.active {
            background: #fff;
            color: var(--lg-main);
            box-shadow: 0 2px 8px rgba(35, 45, 79, 0.1);
        }

        .login-role-btn:hover {
            color: var(--lg-main);
        }

        /* Formulario */
        .login-form {
            display: flex;
            flex-direction: column;
            gap: 18px;
        }

        .login-field {
            display: flex;
            flex-direction: column;
            gap: 8px;
        }

        .login-field label {
            font-size: 0.85rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            color: var(--lg-main);
        }

        .login-field input,
        .login-field select {
            padding: 12px 16px;
            border: 1.5px solid var(--lg-border);
            border-radius: 10px;
            font-family: inherit;
            font-size: 0.95rem;
            color: var(--lg-main);
            background: #fff;
            transition: all 0.3s;
        }

        .login-field input::placeholder {
            color: #b8c2d1;
        }

        .login-field input:focus,
        .login-field select:focus {
            outline: none;
            border-color: var(--lg-gold);
            box-shadow: 0 0 0 3px rgba(231, 186, 97, 0.15);
        }

        /* Checkbox */
        .login-remember {
            display: flex;
            align-items: center;
            gap: 10px;
            font-size: 0.9rem;
            color: #6b7688;
        }

        .login-remember input[type="checkbox"] {
            width: 18px;
            height: 18px;
            accent-color: var(--lg-gold);
            cursor: pointer;
        }

        .login-remember a {
            color: var(--lg-gold);
            text-decoration: none;
            font-weight: 600;
        }

        .login-remember a:hover {
            text-decoration: underline;
        }

        /* Botones */
        .login-btn {
            padding: 14px 20px;
            background: linear-gradient(135deg, var(--lg-main), var(--lg-accent));
            color: #fff;
            border: none;
            border-radius: 10px;
            font-weight: 800;
            font-size: 0.95rem;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            cursor: pointer;
            transition: all 0.3s;
            font-family: inherit;
        }

        .login-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(35, 45, 79, 0.25);
        }

        .login-btn:active {
            transform: translateY(0);
        }

        /* Footer del login */
        .login-footer {
            margin-top: 28px;
            padding-top: 28px;
            border-top: 1px solid var(--lg-border);
            text-align: center;
            font-size: 0.9rem;
            color: #6b7688;
        }

        .login-footer a {
            color: var(--lg-gold);
            text-decoration: none;
            font-weight: 700;
        }

        .login-footer a:hover {
            text-decoration: underline;
        }

        /* Alertas */
        .login-alert {
            padding: 14px 16px;
            border-radius: 10px;
            font-size: 0.9rem;
            margin-bottom: 20px;
            display: none;
            align-items: center;
            gap: 10px;
        }

        .login-alert.show {
            display: flex;
        }

        .login-alert.error {
            background: #fdf0f0;
            border: 1px solid #dfc0c0;
            color: #b14545;
        }

        .login-alert.success {
            background: #e4f5ea;
            border: 1px solid #aee0c0;
            color: #1d8a4e;
        }

        .login-alert i {
            font-size: 1.1rem;
            flex-shrink: 0;
        }

        /* Responsive */
        @media (max-width: 480px) {
            .login-card {
                padding: 32px 24px;
            }

            .login-header h1 {
                font-size: 1.4rem;
            }

            .login-roles {
                flex-direction: column;
            }

            .login-role-btn {
                flex-direction: row;
                padding: 12px 10px;
                font-size: 0.8rem;
            }
        }

/* ════════════════════════════════════════════
   FROM: perfil-admin.html
════════════════════════════════════════════ */

        :root { --pf-main:#232D4F; --pf-accent:#3E5A7E; --pf-gold:#E7BA61; --pf-bd:#dce8f3; --pf-soft:#f0f6fc; }
        .page-perfil .container { max-width:1140px; margin:0 auto; padding:0 20px; }

        .pf-roleswitch { display:flex; gap:8px; background:#fff; border:1px solid var(--pf-bd); border-radius:12px; padding:6px; margin-bottom:24px; max-width:560px; }
        .pf-roleswitch a { flex:1; text-align:center; padding:10px 12px; border-radius:9px; text-decoration:none; font-size:13px; font-weight:700; color:#6b7688; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:7px; }
        .pf-roleswitch a:hover { background:var(--pf-soft); color:var(--pf-main); }
        .pf-roleswitch a.active { background:var(--pf-main); color:#fff; }

        .pf-head { display:flex; gap:28px; align-items:center; flex-wrap:wrap; background:linear-gradient(135deg,var(--pf-main) 0%,#1a3a5e 100%); color:#fff; border-radius:16px; padding:36px 40px; margin-bottom:24px; box-shadow:0 18px 44px rgba(35,45,79,.22); }
        .pf-avatar { width:104px; height:104px; border-radius:50%; flex:0 0 104px; background:var(--color-accent-light); color:var(--pf-main); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:2.2rem; border:4px solid rgba(255,255,255,.25); }
        .pf-head__info { flex:1; min-width:220px; }
        .pf-rolechip { display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); padding:4px 14px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
        .pf-head__info h1 { margin:0 0 6px; font-size:1.9rem; font-weight:900; letter-spacing:-.01em; }
        .pf-tag { font-size:.95rem; opacity:.9; display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; }
        .pf-tag span { display:inline-flex; align-items:center; gap:7px; }
        .pf-tag i { color:var(--color-accent-light); }

        /* métricas institucionales destacadas */
        .pf-metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px; }
        .pf-metric { background:#fff; border:1px solid var(--pf-bd); border-radius:14px; padding:22px; box-shadow:0 2px 14px rgba(35,45,79,.06); }
        .pf-metric .n { font-size:2.2rem; font-weight:900; color:var(--pf-main); display:block; line-height:1; }
        .pf-metric .l { font-size:12px; color:#6b7688; text-transform:uppercase; font-weight:700; margin-top:8px; display:flex; align-items:center; gap:7px; }
        .pf-metric .l i { color:var(--pf-accent); }

        .pf-grid { display:grid; grid-template-columns:320px 1fr; gap:28px; align-items:start; }
        .pf-card { background:#fff; border:1px solid var(--pf-bd); border-radius:14px; padding:26px; margin-bottom:24px; box-shadow:0 2px 14px rgba(35,45,79,.06); }
        .pf-card h2 { font-size:1.05rem; color:var(--pf-main); text-transform:uppercase; font-weight:800; letter-spacing:.03em; margin:0 0 18px; padding-bottom:12px; border-bottom:2px solid var(--pf-soft); display:flex; align-items:center; gap:10px; }
        .pf-card h2 i { color:var(--pf-accent); }

        .pf-actions { display:flex; flex-direction:column; gap:10px; }
        .au-btn { display:inline-flex; align-items:center; gap:9px; background:var(--pf-main); color:#fff!important; padding:12px 18px; border-radius:10px; font-weight:700; font-size:14px; text-decoration:none!important; transition:all .2s; justify-content:flex-start; }
        .au-btn:hover { background:var(--color-accent-light); color:var(--pf-main)!important; transform:translateX(3px); }
        .au-btn--ghost { background:transparent; color:var(--pf-main)!important; border:1.5px solid var(--pf-bd); }
        .au-btn--ghost:hover { background:var(--pf-soft); transform:none; }

        .pf-table { width:100%; border-collapse:collapse; font-size:13.5px; }
        .pf-table th { text-align:left; padding:11px 12px; background:var(--pf-soft); color:var(--pf-main); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid var(--pf-bd); }
        .pf-table td { padding:12px; border-bottom:1px solid #eef2f7; color:#333; }
        .pf-table tr:hover td { background:#fafcff; }
        .pf-chip { display:inline-block; font-size:11px; font-weight:800; padding:3px 10px; border-radius:20px; }
        .pf-chip--alumno { background:#e7eefb; color:#3E5A7E; }
        .pf-chip--docente { background:#fdf6e3; color:#a07c1f; }
        .pf-chip--admin { background:#e4f5ea; color:#1d8a4e; }
        .pf-link { color:var(--pf-accent); font-weight:700; text-decoration:none; }
        .pf-link:hover { color:var(--color-primary); }

        .pf-back { display:inline-flex; align-items:center; gap:8px; color:var(--pf-main); text-decoration:none; font-weight:700; font-size:14px; margin-bottom:18px; }
        .pf-back:hover { color:var(--color-accent); }
        @media (max-width:860px){ .pf-grid{grid-template-columns:1fr;} .pf-metrics{grid-template-columns:repeat(2,1fr);} }

/* ════════════════════════════════════════════
   FROM: perfil-docente.html
════════════════════════════════════════════ */

        :root { --pf-main:#232D4F; --pf-accent:#3E5A7E; --pf-gold:#E7BA61; --pf-bd:#dce8f3; --pf-soft:#f0f6fc; }
        .page-perfil .container { max-width:1140px; margin:0 auto; padding:0 20px; }

        /* conmutador de rol */
        .pf-roleswitch { display:flex; gap:8px; background:#fff; border:1px solid var(--pf-bd); border-radius:12px; padding:6px; margin-bottom:24px; max-width:560px; }
        .pf-roleswitch a { flex:1; text-align:center; padding:10px 12px; border-radius:9px; text-decoration:none; font-size:13px; font-weight:700; color:#6b7688; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:7px; }
        .pf-roleswitch a:hover { background:var(--pf-soft); color:var(--pf-main); }
        .pf-roleswitch a.active { background:var(--pf-main); color:#fff; }

        .pf-head { display:flex; gap:28px; align-items:center; flex-wrap:wrap; background:linear-gradient(135deg,var(--pf-main) 0%,#1a3a5e 100%); color:#fff; border-radius:16px; padding:36px 40px; margin-bottom:24px; box-shadow:0 18px 44px rgba(35,45,79,.22); }
        .pf-avatar { width:104px; height:104px; border-radius:50%; flex:0 0 104px; background:var(--color-accent-light); color:var(--pf-main); display:flex; align-items:center; justify-content:center; font-weight:900; font-size:2.2rem; border:4px solid rgba(255,255,255,.25); }
        .pf-head__info { flex:1; min-width:220px; }
        .pf-rolechip { display:inline-block; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.3); padding:4px 14px; border-radius:20px; font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; }
        .pf-head__info h1 { margin:0 0 6px; font-size:1.9rem; font-weight:900; letter-spacing:-.01em; }
        .pf-tag { font-size:.95rem; opacity:.9; display:flex; flex-wrap:wrap; gap:16px; margin-top:10px; }
        .pf-tag span { display:inline-flex; align-items:center; gap:7px; }
        .pf-tag i { color:var(--color-accent-light); }

        .pf-grid { display:grid; grid-template-columns:320px 1fr; gap:28px; align-items:start; }
        .pf-card { background:#fff; border:1px solid var(--pf-bd); border-radius:14px; padding:26px; margin-bottom:24px; box-shadow:0 2px 14px rgba(35,45,79,.06); }
        .pf-card h2 { font-size:1.05rem; color:var(--pf-main); text-transform:uppercase; font-weight:800; letter-spacing:.03em; margin:0 0 18px; padding-bottom:12px; border-bottom:2px solid var(--pf-soft); display:flex; align-items:center; gap:10px; }
        .pf-card h2 i { color:var(--pf-accent); }

        .pf-field { margin-bottom:16px; }
        .pf-field:last-child { margin-bottom:0; }
        .pf-field label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; font-weight:800; color:#9aa6b6; margin-bottom:3px; }
        .pf-field span { font-size:15px; color:#222; font-weight:600; }

        .pf-actions { display:flex; flex-direction:column; gap:10px; }
        .au-btn { display:inline-flex; align-items:center; gap:9px; background:var(--pf-main); color:#fff!important; padding:12px 18px; border-radius:10px; font-weight:700; font-size:14px; text-decoration:none!important; transition:all .2s; justify-content:flex-start; }
        .au-btn:hover { background:var(--color-accent-light); color:var(--pf-main)!important; transform:translateX(3px); }
        .au-btn--ghost { background:transparent; color:var(--pf-main)!important; border:1.5px solid var(--pf-bd); }
        .au-btn--ghost:hover { background:var(--pf-soft); transform:none; }

        /* auto-fit en vez de un N fijo de columnas: .pf-stats se reutiliza en
           varias páginas con distinta cantidad de estadísticas (perfil.html
           tiene 3, perfil-docente.html tiene 4) y, al ser la misma clase en
           un único escuela.css, un "repeat(N,1fr)" fijo de una página pisaba
           al de la otra según el orden en el archivo — con auto-fit cada
           página arma su propia grilla sin pisar a las demás. */
        .pf-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(75px,1fr)); gap:14px; }
        .pf-stat { background:var(--pf-soft); border:1px solid var(--pf-bd); border-radius:12px; padding:16px; text-align:center; }
        .pf-stat .n { font-size:1.8rem; font-weight:900; color:var(--pf-accent); display:block; line-height:1; }
        .pf-stat .l { font-size:11px; color:#6b7688; text-transform:uppercase; font-weight:700; margin-top:6px; display:block; overflow-wrap:break-word; hyphens:auto; }

        .pf-course { border:1px solid var(--pf-bd); border-radius:12px; padding:18px 20px; margin-bottom:14px; }
        .pf-course:last-child { margin-bottom:0; }
        .pf-course__top { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; flex-wrap:wrap; }
        .pf-course__top h3 { margin:0; font-size:1rem; color:var(--pf-main); font-weight:800; }
        .pf-badge { font-size:11px; font-weight:800; padding:4px 12px; border-radius:20px; text-transform:uppercase; }
        .pf-badge--ok { background:#e4f5ea; color:#1d8a4e; }
        .pf-badge--cur { background:#fdf6e3; color:#a07c1f; }
        .pf-course__meta { font-size:12.5px; color:#6b7688; display:flex; gap:18px; flex-wrap:wrap; }
        .pf-course__meta b { color:var(--pf-main); }

        .pf-table { width:100%; border-collapse:collapse; font-size:13.5px; }
        .pf-table th { text-align:left; padding:11px 12px; background:var(--pf-soft); color:var(--pf-main); font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; border-bottom:2px solid var(--pf-bd); }
        .pf-table td { padding:12px; border-bottom:1px solid #eef2f7; color:#333; }
        .pf-table tr:hover td { background:#fafcff; }
        .pf-link { color:var(--pf-accent); font-weight:700; text-decoration:none; }
        .pf-link:hover { color:var(--color-primary); }

        .pf-back { display:inline-flex; align-items:center; gap:8px; color:var(--pf-main); text-decoration:none; font-weight:700; font-size:14px; margin-bottom:18px; }
        .pf-back:hover { color:var(--color-accent); }
        @media (max-width:860px){ .pf-grid{grid-template-columns:1fr;} }

/* ════════════════════════════════════════════
   FROM: perfil-usuario.html
════════════════════════════════════════════ */

        :root {
            --pf-main: #232D4F;
            --pf-accent: #3E5A7E;
            --pf-gold: #E7BA61;
            --pf-bd: #dce8f3;
            --pf-soft: #f0f6fc;
        }

        .page-perfil .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

        /* ===== Cabecera de perfil ===== */
        .pf-head {
            display: flex; gap: 28px; align-items: center; flex-wrap: wrap;
            background: linear-gradient(135deg, var(--pf-main) 0%, #1a3a5e 100%);
            color: #fff; border-radius: 16px; padding: 36px 40px; margin-bottom: 30px;
            box-shadow: 0 18px 44px rgba(35,45,79,.22);
        }
        .pf-avatar {
            width: 104px; height: 104px; border-radius: 50%; flex: 0 0 104px;
            background: var(--color-accent-light); color: var(--pf-main);
            display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 2.2rem;
            border: 4px solid rgba(255,255,255,.25);
        }
        .pf-head__info { flex: 1; min-width: 220px; }
        .pf-head__info h1 { margin: 0 0 6px; font-size: 1.9rem; font-weight: 900; letter-spacing: -.01em; }
        .pf-head__info .pf-tag { font-size: .95rem; opacity: .9; display: flex; flex-wrap: wrap; gap: 16px; margin-top: 10px; }
        .pf-head__info .pf-tag span { display: inline-flex; align-items: center; gap: 7px; }
        .pf-head__info .pf-tag i { color: var(--color-accent-light); }
        .pf-edit {
            color: #fff; text-decoration: none; font-weight: 700; font-size: .85rem;
            border: 1.5px solid rgba(255,255,255,.4); padding: 10px 18px; border-radius: 9px; transition: all .2s; white-space: nowrap;
        }
        .pf-edit:hover { background: var(--color-accent-light); border-color: var(--color-accent-light); color: var(--pf-main); }

        /* ===== Layout ===== */
        .pf-grid { display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }

        .pf-card { background: #fff; border: 1px solid var(--pf-bd); border-radius: 14px; padding: 26px; margin-bottom: 24px; box-shadow: 0 2px 14px rgba(35,45,79,.06); }
        .pf-card h2 { font-size: 1.05rem; color: var(--pf-main); text-transform: uppercase; font-weight: 800; letter-spacing: .03em; margin: 0 0 18px; padding-bottom: 12px; border-bottom: 2px solid var(--pf-soft); display: flex; align-items: center; gap: 10px; }
        .pf-card h2 i { color: var(--pf-accent); }

        /* datos personales */
        .pf-field { margin-bottom: 16px; }
        .pf-field:last-child { margin-bottom: 0; }
        .pf-field label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; font-weight: 800; color: #9aa6b6; margin-bottom: 3px; }
        .pf-field span { font-size: 15px; color: #222; font-weight: 600; }

        /* progreso global */
        .pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(75px,1fr)); gap: 14px; }
        .pf-stat { background: var(--pf-soft); border: 1px solid var(--pf-bd); border-radius: 12px; padding: 16px; text-align: center; }
        .pf-stat .n { font-size: 1.8rem; font-weight: 900; color: var(--pf-accent); display: block; line-height: 1; }
        .pf-stat .l { font-size: 11px; color: #6b7688; text-transform: uppercase; font-weight: 700; margin-top: 6px; display: block; overflow-wrap: break-word; hyphens: auto; }

        /* cursos */
        .pf-course { border: 1px solid var(--pf-bd); border-radius: 12px; padding: 18px 20px; margin-bottom: 14px; }
        .pf-course:last-child { margin-bottom: 0; }
        .pf-course__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
        .pf-course__top h3 { margin: 0; font-size: 1rem; color: var(--pf-main); font-weight: 800; }
        .pf-course__top .pf-year { font-size: 12px; color: #888; }
        .pf-badge { font-size: 11px; font-weight: 800; padding: 4px 12px; border-radius: 20px; text-transform: uppercase; letter-spacing: .03em; }
        .pf-badge--curso { background: #fdf6e3; color: #a07c1f; }
        .pf-badge--ok { background: #e4f5ea; color: #1d8a4e; }
        .pf-bar { height: 9px; background: #e7edf5; border-radius: 6px; overflow: hidden; }
        .pf-bar > i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--pf-accent), var(--color-accent-light)); }
        .pf-course__meta { font-size: 12.5px; color: #6b7688; margin-top: 8px; display: flex; gap: 18px; flex-wrap: wrap; }
        .pf-course__meta b { color: var(--pf-main); }

        /* niveles */
        .pf-levels { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
        .pf-level { font-size: 12px; font-weight: 700; padding: 6px 12px; border-radius: 8px; display: inline-flex; align-items: center; gap: 6px; }
        .pf-level--done { background: #e4f5ea; color: #1d8a4e; }
        .pf-level--cur { background: #e7eefb; color: var(--pf-accent); }
        .pf-level--lock { background: #f1f4f8; color: #9aa6b6; }

        /* certificados */
        .pf-cert { display: flex; align-items: center; gap: 14px; padding: 14px 16px; border: 1px solid var(--pf-bd); border-radius: 10px; margin-bottom: 10px; }
        .pf-cert:last-child { margin-bottom: 0; }
        .pf-cert i.pf-cert-ico { font-size: 26px; color: var(--color-accent); flex: 0 0 26px; }
        .pf-cert__body { flex: 1; min-width: 0; }
        .pf-cert__body strong { display: block; font-size: 14px; color: #222; }
        .pf-cert__body span { font-size: 12px; color: #888; }
        .pf-dl { background: var(--pf-main); color: #fff !important; padding: 8px 16px; border-radius: 8px; font-weight: 700; font-size: 13px; text-decoration: none; white-space: nowrap; transition: all .2s; display: inline-flex; align-items: center; gap: 7px; }
        .pf-dl:hover { background: var(--color-accent-light); color: var(--pf-main) !important; }

        /* historial de exámenes */
        .pf-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
        .pf-table th { text-align: left; padding: 11px 12px; background: var(--pf-soft); color: var(--pf-main); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; border-bottom: 2px solid var(--pf-bd); }
        .pf-table td { padding: 12px; border-bottom: 1px solid #eef2f7; color: #333; }
        .pf-table tr:hover td { background: #fafcff; }
        .pf-score { font-weight: 800; }
        .pf-score.ok { color: #1d8a4e; }
        .pf-score.no { color: #b14545; }

        .pf-back { display: inline-flex; align-items: center; gap: 8px; color: var(--pf-main); text-decoration: none; font-weight: 700; font-size: 14px; margin-bottom: 18px; }
        .pf-back:hover { color: var(--color-accent); }

        .pf-roleswitch { display:flex; gap:8px; background:#fff; border:1px solid var(--pf-bd); border-radius:12px; padding:6px; margin-bottom:24px; max-width:560px; }
        .pf-roleswitch a { flex:1; text-align:center; padding:10px 12px; border-radius:9px; text-decoration:none; font-size:13px; font-weight:700; color:#6b7688; transition:all .15s; display:flex; align-items:center; justify-content:center; gap:7px; }
        .pf-roleswitch a:hover { background:var(--pf-soft); color:var(--pf-main); }
        .pf-roleswitch a.active { background:var(--pf-main); color:#fff; }

        .pf-inst { display:flex; align-items:center; gap:12px; margin-bottom:14px; }
        .pf-inst__ico { width:42px; height:42px; border-radius:10px; background:var(--pf-soft); color:var(--pf-main); display:flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 42px; }
        .pf-inst__t strong { display:block; color:var(--pf-main); font-size:15px; }
        .pf-inst__type { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:var(--pf-accent); }
        .pf-membtitle { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; color:#9aa6b6; margin:6px 0 10px; }
        .pf-members { display:flex; gap:8px; flex-wrap:wrap; }
        .pf-member { display:inline-flex; align-items:center; gap:8px; background:var(--pf-soft); border:1px solid var(--pf-bd); border-radius:30px; padding:5px 13px 5px 5px; font-size:12.5px; color:#34415c; font-weight:600; }
        .pf-member .ma { width:26px; height:26px; border-radius:50%; background:linear-gradient(135deg,var(--pf-main),var(--pf-accent)); color:#fff; display:flex; align-items:center; justify-content:center; font-size:10px; font-weight:800; }

        @media (max-width: 860px) {
            .pf-grid { grid-template-columns: 1fr; }
        }

/* ════════════════════════════════════════════
   FROM: proyectos.html
════════════════════════════════════════════ */

        /* Acá había un :root que redefinía --color-primary, --color-accent,
           --color-secondary, --color-text, --color-bg y --color-border para
           TODO el sitio, heredado de proyectos.html. Como components.css se
           carga después de tokens.css, pisaba los tokens reales (el texto
           salía #475569 en vez de #232D4F). Eliminado el 2026-09-17: los
           valores viven solo en tokens.css. */

        .page-proyectos .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }

        /* Hero proyectos */
        .proy-hero {
            width: 100vw;
            max-width: 100vw;
            position: relative;
            margin-left: calc(-50vw + 50%);
            background: linear-gradient(135deg, #232D4F 0%, #3E5A7E 100%);
            color: #fff;
            padding: 160px 0 70px 0;
            display: flex;
            align-items: flex-end;
            margin-bottom: 60px;
            margin-top: 0;
        }

        .proy-hero::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(15,23,42,0) 0%, rgba(15,23,42,0.75) 100%);
            z-index: 1;
        }

        .proy-hero__content {
            position: relative;
            z-index: 2;
            width: 80%;
            max-width: 1200px;
            margin: 0 auto;
            text-align: center;
        }

        .proy-hero__title {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 900;
            line-height: 1.1;
            margin: 0 0 20px 0;
            letter-spacing: -0.02em;
            color: #fff;
        }

        .proy-hero__desc {
            font-size: 1.3rem;
            opacity: 0.95;
            max-width: 800px;
            margin: 0 auto;
            color: #fff;
            font-weight: 300;
        }

        /* Grid de proyectos */
        .proy-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
            gap: 30px;
            margin-bottom: 80px;
        }

        /* .proy-card → migrado a .ds-card (sistema canónico, ver §CARD) */

        /* Sección de concluidos */
        .proy-seccion-titulo {
            font-size: 2rem;
            font-weight: 800;
            color: var(--color-primary);
            border-bottom: 3px solid var(--color-accent);
            padding-bottom: 15px;
            margin: 80px 0 50px 0;
            text-transform: uppercase;
            letter-spacing: -0.02em;
            display: flex;
            align-items: center;
            gap: 14px;
        }

        .proy-seccion-titulo::before {
            content: '';
            display: inline-block;
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background: var(--color-accent);
        }

        .proy-seccion-activos {
            background: rgba(62, 90, 126, 0.04);
            border: 1px solid rgba(62, 90, 126, 0.14);
            padding: 50px 40px 60px;
            border-radius: 16px;
            margin-bottom: 80px;
        }

        .proy-seccion-activos .proy-seccion-titulo {
            margin-top: 0;
            margin-bottom: 40px;
        }

        .proy-seccion-activos .proy-seccion-titulo::before {
            background: var(--color-accent);
        }

        .proy-seccion-historico {
            margin-bottom: 80px;
        }

        .proy-seccion-historico .proy-seccion-titulo::before {
            background: #9aa6b6;
        }

        .proy-concluidos-lista {
            display: flex;
            flex-direction: column;
            gap: 15px;
            margin-bottom: 80px;
        }

        .proy-concluido-item {
            background: linear-gradient(135deg, #fdfdfd 0%, #f8fbfc 100%);
            border: 2px solid var(--color-border);
            border-radius: 12px;
            overflow: hidden;
            transition: all 0.3s;
        }

        .proy-concluido-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            height: 4px;
            width: 100%;
            background: linear-gradient(90deg, #9aa6b6, transparent);
        }

        .proy-concluido-item:hover {
            border-color: #9aa6b6;
            box-shadow: 0 12px 30px rgba(62, 90, 126, 0.08);
        }

        .proy-concluido-toggle {
            padding: 24px 28px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            cursor: pointer;
            background: transparent;
            border: none;
            width: 100%;
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--color-primary);
            text-transform: uppercase;
            letter-spacing: -0.5px;
            transition: all 0.3s;
            position: relative;
        }

        .proy-concluido-toggle:hover {
            color: var(--color-accent);
        }

        /* Chevron circular unificado (.ds-chev): rota al abrir, se ilumina en hover */
        .proy-concluido-toggle:hover .ds-chev {
            transform: translateY(-2px);
            box-shadow: var(--card-shadow-hover);
            background: var(--color-gold);
            border-color: var(--color-gold);
            color: var(--color-primary);
        }
        .proy-concluido-item.open .proy-concluido-toggle .ds-chev {
            border-color: var(--color-accent);
            color: var(--color-accent);
        }
        .proy-concluido-item.open .proy-concluido-toggle .ds-chev i {
            transform: rotate(180deg);
        }

        .proy-concluido-content {
            padding: 0 28px;
            display: none;
            border-top: 1px solid rgba(35, 45, 79, 0.1);
            margin-top: 0;
            padding-top: 28px;
            padding-bottom: 28px;
        }

        .proy-concluido-item.open .proy-concluido-content {
            display: grid;
            grid-template-columns: 160px 1fr;
            gap: 28px;
            align-items: start;
            animation: slideDown 0.3s ease;
        }

        @keyframes slideDown {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .proy-concluido-img {
            width: 100%;
            height: 140px;
            border-radius: 10px;
            object-fit: cover;
            border: 2px solid var(--color-border);
            box-shadow: 0 4px 12px rgba(35, 45, 79, 0.1);
        }

        .proy-concluido-info {
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .proy-concluido-info p {
            font-size: 0.95rem;
            color: #475569;
            line-height: 1.6;
            margin: 0;
        }

        .proy-concluido-info strong {
            color: var(--color-primary);
            font-weight: 800;
            text-transform: uppercase;
            font-size: 0.75rem;
            letter-spacing: 0.8px;
            display: block;
            margin-bottom: -12px;
        }

        .proy-concluido-info p:first-child strong {
            color: var(--color-accent);
        }

        @media (max-width: 768px) {
            .proy-hero {
                padding: 120px 0 50px 0;
            }
            .proy-hero__title {
                font-size: 2rem;
            }
            .proy-grid {
                grid-template-columns: 1fr;
                gap: 20px;
            }
            .proy-concluido-item.open .proy-concluido-content {
                grid-template-columns: 1fr;
            }
        }

/* ════════════════════════════════════════════
   FROM: publicaciones-rediseno-v2.html
════════════════════════════════════════════ */

        .page-publicaciones .container { max-width: 1100px; padding: 80px 24px 60px; }
        .page-header { margin-bottom: 60px; padding-bottom: 40px; border-bottom: 3px solid var(--color-primary); }
        .page-header h1 { font-size: 3rem; font-weight: 900; color: var(--color-primary); margin-bottom: 16px; letter-spacing: -0.8px; display: flex; align-items: center; gap: 16px; }
        .page-header h1::before { content: ''; display: inline-block; width: 6px; height: 48px; background: var(--color-accent); border-radius: 3px; }
        .page-header p { font-size: 1.1rem; color: var(--color-text); max-width: 900px; line-height: 1.7; }
        .page-header .subtitle { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: var(--color-secondary); margin-top: 24px; font-weight: 700; }
        .filter-tabs { display: flex; gap: 12px; margin-bottom: 48px; overflow-x: auto; padding-bottom: 8px; }
        .filter-tab { padding: 10px 20px; border: 2px solid var(--color-border); background: var(--color-bg); color: var(--color-text); border-radius: 24px; cursor: pointer; font-weight: 600; font-size: 0.95rem; transition: all 0.3s; white-space: nowrap; }
        .filter-tab:hover { border-color: var(--color-accent); color: var(--color-accent); }
        .filter-tab.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
        .publications-grid { display: grid; grid-template-columns: 1fr; gap: 32px; margin-bottom: 60px; }
        .pub-card { background: var(--color-bg); border-radius: 8px; overflow: visible; box-shadow: 0 1px 4px rgba(0,0,0,0.08); transition: all 0.3s; }
        .pub-card:hover { box-shadow: 0 8px 24px rgba(35, 45, 79, 0.12); }
        .pub-card-main { display: grid; grid-template-columns: 140px 1fr auto; gap: 16px; padding: 16px; align-items: center; }
        .pub-card-image { width: 100%; height: 140px; background: linear-gradient(135deg, #232D4F 0%, #3E5A7E 100%); overflow: hidden; position: relative; border-radius: 8px; }
        .pub-card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
        .pub-card:hover .pub-card-image img { transform: scale(1.05); }
        .pub-card-content { display: flex; flex-direction: column; gap: 6px; }
        .pub-card-badge { display: inline-block; background: var(--color-accent); color: var(--color-primary); padding: 3px 8px; border-radius: 12px; font-size: 0.65rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; width: fit-content; }
        .pub-card-title { font-size: 1rem; font-weight: 800; color: var(--color-primary); line-height: 1.3; margin: 0; }
        .pub-card-text { font-size: 0.85rem; color: var(--color-text); line-height: 1.4; margin: 0; }
        .pub-card-meta { display: flex; justify-content: space-between; align-items: center; font-size: 0.75rem; color: var(--color-secondary); font-weight: 600; }
        .pub-card-toggle { cursor: pointer; display: contents; }
        .pub-card-toggle svg { width: 24px; height: 24px; color: var(--color-primary); transition: transform 0.4s; }
        .pub-card:has(.pub-card-checkbox:checked) .pub-card-toggle svg { transform: rotate(180deg); color: var(--color-accent); }
        .pub-card-checkbox { display: none; }
        .pub-chapters { grid-column: 1 / -1; padding: 0; background: #f8fafc; border-top: 2px solid var(--color-border); max-height: 0; overflow: hidden; transition: max-height 0.4s, padding 0.4s, opacity 0.4s; opacity: 0; }
        .pub-card:has(.pub-card-checkbox:checked) .pub-chapters { max-height: 500px; padding: 24px; opacity: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
        .chapters-title { font-size: 0.9rem; font-weight: 800; color: var(--color-primary); margin-bottom: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
        .chapters-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
        .chapters-list a { color: var(--color-text); text-decoration: none; font-weight: 600; font-size: 0.85rem; display: block; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: 6px; background: #f9f9f9; transition: all 0.3s; }
        .chapters-list a:hover { color: white; background: var(--color-primary); border-color: var(--color-primary); transform: translateX(4px); }
        .historical-section { padding-top: 60px; border-top: 3px solid var(--color-primary); margin-top: 80px; }
        .historical-section h2 { font-size: 2rem; font-weight: 900; color: var(--color-primary); margin-bottom: 40px; display: flex; align-items: center; gap: 12px; }
        .historical-section h2::before { content: ''; display: inline-block; width: 4px; height: 32px; background: var(--color-accent); border-radius: 2px; }
        .historical-year-group { display: flex; padding: 30px 0; border-bottom: 1px solid var(--color-border); }
        .historical-year-group:first-of-type { border-top: 1px solid var(--color-border); }
        .historical-year-label { width: 150px; font-size: 1.8rem; font-weight: 900; color: var(--color-secondary); flex-shrink: 0; line-height: 1.2; }
        .historical-links-container { flex-grow: 1; display: flex; flex-direction: column; gap: 16px; }
        .historical-item { display: flex; justify-content: space-between; align-items: center; color: var(--color-text); text-decoration: none; font-size: 1.1rem; font-weight: 600; transition: all 0.3s; }
        .historical-item::after { content: '→'; font-weight: 300; opacity: 0; transform: translateX(-10px); transition: all 0.3s; color: var(--color-primary); }
        .historical-item:hover { color: var(--color-primary); padding-left: 8px; }
        .historical-item:hover::after { opacity: 1; transform: translateX(0); }
        @media (max-width: 768px) {
            .page-header h1 { font-size: 2rem; }
            .pub-card-main { grid-template-columns: 1fr; }
            .historical-year-group { flex-direction: column; gap: 16px; }
            .historical-year-label { width: 100%; font-size: 1.5rem; border-bottom: 2px solid var(--color-primary); padding-bottom: 4px; color: var(--color-primary); }
            .historical-item::after { display: none; }
            .historical-item:hover { padding-left: 0; }
        }

/* ════════════════════════════════════════════
   FROM: transparencia.html
════════════════════════════════════════════ */

        :root {
            --ta-main: #232D4F;
            --ta-accent: #3E5A7E;
        }

        .page-transparencia .container { max-width: 1140px; margin: 0 auto; padding: 0 20px; }

        .ta-hero {
            background: linear-gradient(135deg, var(--ta-main) 0%, #1a5a8a 100%);
            color: #fff;
            padding: 140px 0 80px;
            margin-bottom: 60px;
            text-align: center;
        }

        .ta-hero h1 {
            font-size: clamp(2.5rem, 5vw, 4rem);
            font-weight: 900;
            margin-bottom: 24px;
            letter-spacing: -0.02em;
        }

        .ta-hero p {
            font-size: 1.2rem;
            opacity: 0.95;
            max-width: 800px;
            margin: 0 auto;
            font-weight: 300;
            line-height: 1.6;
        }

        /* LAYOUT */
        .ta-portal-wrapper {
            display: flex;
            gap: 36px;
            align-items: flex-start;
            margin-bottom: 80px;
        }

        .ta-portal-content-area { flex: 1; min-width: 0; }

        .ta-tab-pane { display: none; animation: taFadeIn 0.35s ease; margin-bottom: 48px; }
        .ta-tab-pane.active { display: block; }
        @keyframes taFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

        /* SIDEBAR */
        .ta-portal-sidebar {
            flex: 0 0 250px;
            display: flex;
            flex-direction: column;
            background: #fff;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 2px 12px rgba(15,49,81,0.10);
            border: 1px solid #dce8f3;
            align-self: flex-start;
            position: sticky;
            top: 100px;
        }

        .ta-sidebar-header {
            background: var(--ta-main);
            padding: 14px 18px 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .ta-sidebar-header span {
            font-size: 10px;
            font-weight: 800;
            letter-spacing: 2px;
            text-transform: uppercase;
            color: rgba(255,255,255,0.75);
        }

        .ta-tab-btn {
            background: transparent;
            color: #4a5568;
            cursor: pointer;
            padding: 11px 16px 11px 20px;
            text-align: left;
            border: none;
            border-left: 3px solid transparent;
            border-bottom: 1px solid #f0f5fa;
            border-radius: 0;
            outline: none;
            transition: all 0.18s;
            font-size: 13.5px;
            font-weight: 500;
            width: 100%;
            line-height: 1.3;
        }

        .ta-tab-btn:last-child { border-bottom: none; }
        .ta-tab-btn:hover { background: #f0f6fc; color: var(--ta-main); border-left-color: #a0c4df; }
        .ta-tab-btn.active { background: #eaf2fb; color: var(--ta-main); font-weight: 700; border-left-color: var(--ta-accent); }

        /* CONTENIDO DE CATEGORÍAS */
        .ta-cat-header { margin-bottom: 30px; padding-bottom: 18px; border-bottom: 1px solid #eaeaea; }
        .ta-cat-header h2 { color: var(--ta-main); font-size: 1.8rem; font-weight: 800; text-transform: uppercase; margin: 0 0 14px 0; }
        .ta-cat-desc { font-size: 15px; color: #555; line-height: 1.6; margin-bottom: 14px; }

        .ta-btn-external {
            display: inline-block;
            background: var(--ta-main);
            color: #fff !important;
            padding: 8px 18px;
            border-radius: 5px;
            font-weight: 600;
            font-size: 13px;
            text-decoration: none !important;
            margin-right: 10px;
            margin-bottom: 10px;
            transition: background 0.2s;
        }

        .ta-btn-external:hover { background: var(--ta-accent); }

        .ta-doc-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .ta-doc-list-item {
            padding: 13px 0;
            border-bottom: 1px solid #eaeaea;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
        }

        .ta-doc-list-item:last-child { border-bottom: none; }

        .ta-doc-link-wrap {
            display: flex;
            align-items: center;
            flex: 1;
        }

        .ta-doc-icon {
            margin-right: 11px;
            font-size: 17px;
            color: var(--ta-main);
        }

        .ta-doc-list-item a {
            color: #333;
            text-decoration: none;
            font-weight: 500;
            transition: color 0.2s;
        }

        .ta-doc-list-item a:hover { color: var(--ta-accent); }

        .ta-doc-year-badge {
            background: #f0f5fb;
            color: var(--ta-main);
            padding: 3px 9px;
            border-radius: 10px;
            font-size: 11px;
            font-weight: 700;
            margin-left: 12px;
            white-space: nowrap;
            border: 1px solid #dce8f3;
        }

        @media (max-width: 768px) {
            .ta-portal-wrapper {
                flex-direction: column;
                gap: 0;
            }
            .ta-portal-sidebar {
                display: none;
            }
            .ta-hero {
                padding: 100px 0 60px;
            }
            .ta-hero h1 {
                font-size: 2rem;
            }
        }

/* ════════════════════════════════════════════════════════════════════
   ╔══════════════════════════════════════════════════════════════════╗
   ║  DESIGN SYSTEM — CAPA GENÉRICA REUTILIZABLE                       ║
   ║  Tokens + primitivas con nombres genéricos para construir páginas ║
   ║  nuevas. NO reemplaza las clases namespaced (aa-/au-/pf-…); las   ║
   ║  complementa. Documentado en catalogo.html.                      ║
   ╚══════════════════════════════════════════════════════════════════╝
   ════════════════════════════════════════════════════════════════════ */

/* ── 1. TOKENS ADICIONALES ─────────────────────────────────────────── */
:root {
    /* Color semántico de información (success/error/warning ya existen) */
    --info:           #2b6cb0;
    --info-soft:      #e7f0fa;

    /* Escala de grises */
    --gray-50:  #f7f8fa;
    --gray-100: #eef1f6;
    --gray-200: #dce3ec;
    --gray-300: #c2ccda;
    --gray-400: #94a3b8;
    --gray-500: #64748b;
    --gray-600: #475569;
    --gray-700: #334155;
    --gray-800: #1e293b;
    --gray-900: #0f172a;

    /* Espaciado — múltiplos de 4 */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;
    --space-8:  64px;

    /* Radios de borde */
    --radius-sm:   6px;
    --radius-md:   10px;
    --radius-lg:   16px;
    --radius-full: 999px;

    /* Sombras (escala de elevación) */
    --shadow-1: 0 1px 3px rgba(35,45,79,.10);
    --shadow-2: 0 4px 12px rgba(35,45,79,.10);
    --shadow-3: 0 10px 28px rgba(35,45,79,.14);
    --shadow-4: 0 24px 60px rgba(35,45,79,.22);

    /* Tipografía — escala */
    --fs-xs:   .72rem;
    --fs-sm:   .85rem;
    --fs-base: 1rem;
    --fs-lg:   1.25rem;
    --fs-xl:   1.6rem;
    --fs-2xl:  2.2rem;
    --fs-3xl:  3rem;
    --fw-regular: 400;
    --fw-medium:  500;
    --fw-semibold:600;
    --fw-bold:    700;
    --fw-extra:   800;
    --fw-black:   900;

    /* Z-index — escala de superposición */
    --z-base:      1;
    --z-dropdown:  100;
    --z-sticky:    500;
    --z-header:    900;
    --z-overlay:   1080;
    --z-modal:     1100;
    --z-toast:     1200;
    --z-tooltip:   1300;
}

/* ── 2. BOTONES — modificadores genéricos ──────────────────────────── */
/* Base reutilizable (no pisa .btn existente; clase nueva .ds-btn) */
.ds-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 11px 22px; border: 2px solid transparent; border-radius: var(--radius-sm);
    font-family: var(--font-main); font-weight: var(--fw-bold); font-size: var(--fs-sm);
    line-height: 1; cursor: pointer; text-decoration: none; white-space: nowrap;
    transition: background .25s, color .25s, border-color .25s, transform .15s, box-shadow .25s;
}
.ds-btn:active { transform: translateY(1px); }
.ds-btn:focus-visible { outline: 3px solid rgba(231,186,97,.5); outline-offset: 2px; }
.ds-btn:disabled, .ds-btn.is-disabled { opacity: .5; cursor: not-allowed; transform: none; }

.ds-btn--primary   { background: var(--color-primary); color: #fff; }
.ds-btn--primary:hover   { background: var(--color-accent); color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-2); }
.ds-btn--secondary { background: var(--color-accent); color: #fff; }
.ds-btn--secondary:hover { background: var(--color-primary); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.ds-btn--outline   { background: transparent; border-color: var(--color-primary); color: var(--color-primary); }
.ds-btn--outline:hover   { background: var(--color-primary); color: #fff; }
.ds-btn--ghost     { background: transparent; color: var(--color-primary); }
.ds-btn--ghost:hover     { background: var(--color-bg-alt); color: var(--color-accent); }
.ds-btn--success   { background: var(--success); color: #fff; }
.ds-btn--success:hover   { background: #166b3c; transform: translateY(-2px); }
.ds-btn--danger    { background: var(--error); color: #fff; }
.ds-btn--danger:hover    { background: #9c2c20; transform: translateY(-2px); }
.ds-btn--gold      { background: var(--color-gold); color: var(--color-primary); }
.ds-btn--gold:hover      { background: var(--color-gold-dark); }

/* Tamaños */
.ds-btn--sm   { padding: 7px 14px; font-size: var(--fs-xs); }
.ds-btn--lg   { padding: 15px 30px; font-size: var(--fs-base); }
.ds-btn--block{ width: 100%; }
.ds-btn--icon { padding: 11px; width: 42px; height: 42px; border-radius: var(--radius-sm); }
.ds-btn--icon.ds-btn--sm { width: 34px; height: 34px; padding: 8px; }

/* ── 3. FORMULARIOS — controles genéricos ──────────────────────────── */
.form-field { margin-bottom: var(--space-5); }
.form-label { display: block; margin-bottom: var(--space-2); font-weight: var(--fw-bold); font-size: var(--fs-sm); color: var(--color-primary); }
.form-control {
    width: 100%; padding: 11px 14px; font-family: var(--font-main); font-size: var(--fs-sm);
    color: var(--color-text); background: #fff;
    border: 1.5px solid var(--gray-200); border-radius: var(--radius-sm);
    transition: border-color .2s, box-shadow .2s;
}
.form-control::placeholder { color: var(--gray-400); }
.form-control:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(62,90,126,.15); }
.form-control:disabled { background: var(--gray-100); cursor: not-allowed; }
textarea.form-control { resize: vertical; min-height: 96px; }
/* Estados de validación */
.form-control.is-valid   { border-color: var(--success); }
.form-control.is-valid:focus   { box-shadow: 0 0 0 3px rgba(29,138,78,.18); }
.form-control.is-invalid { border-color: var(--error); }
.form-control.is-invalid:focus { box-shadow: 0 0 0 3px rgba(192,57,43,.18); }
.form-hint  { display: block; margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--gray-500); }
.form-error { display: block; margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--error); font-weight: 600; }
.form-success { display: block; margin-top: var(--space-2); font-size: var(--fs-xs); color: var(--success); font-weight: 600; }

/* Checkbox / Radio */
.form-check { display: flex; align-items: center; gap: 10px; margin-bottom: var(--space-3); cursor: pointer; font-size: var(--fs-sm); }
.form-check input[type="checkbox"], .form-check input[type="radio"] {
    appearance: none; -webkit-appearance: none; width: 20px; height: 20px; flex: 0 0 20px; margin: 0;
    border: 2px solid var(--gray-300); background: #fff; cursor: pointer; transition: all .2s; position: relative;
}
.form-check input[type="checkbox"] { border-radius: 5px; }
.form-check input[type="radio"]    { border-radius: 50%; }
.form-check input:checked { background: var(--color-primary); border-color: var(--color-primary); }
.form-check input[type="checkbox"]:checked::after {
    content: ''; position: absolute; left: 5px; top: 1px; width: 6px; height: 11px;
    border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}
.form-check input[type="radio"]:checked::after {
    content: ''; position: absolute; inset: 4px; border-radius: 50%; background: #fff;
}
.form-check input:focus-visible { outline: 3px solid rgba(231,186,97,.5); outline-offset: 1px; }

/* Switch genérico (.ds-switch para no pisar el .switch existente) */
.ds-switch { position: relative; display: inline-block; width: 46px; height: 26px; }
.ds-switch input { opacity: 0; width: 0; height: 0; }
.ds-switch .ds-slider { position: absolute; inset: 0; background: var(--gray-300); border-radius: var(--radius-full); cursor: pointer; transition: background .25s; }
.ds-switch .ds-slider::before { content: ''; position: absolute; height: 20px; width: 20px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: transform .25s; box-shadow: var(--shadow-1); }
.ds-switch input:checked + .ds-slider { background: var(--success); }
.ds-switch input:checked + .ds-slider::before { transform: translateX(20px); }

/* ── 4. LAYOUT — grilla utilitaria ─────────────────────────────────── */
.ds-row  { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.ds-grid { display: grid; gap: var(--space-5); }
.ds-grid--2 { grid-template-columns: repeat(2, 1fr); }
.ds-grid--3 { grid-template-columns: repeat(3, 1fr); }
.ds-grid--4 { grid-template-columns: repeat(4, 1fr); }
.ds-grid--auto { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
@media (max-width: 900px) { .ds-grid--3, .ds-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ds-grid--2, .ds-grid--3, .ds-grid--4 { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════════════
   SISTEMA DE CARD CANÓNICO — .ds-card
   ──────────────────────────────────────────────────────────────────────
   FUENTE ÚNICA DE VERDAD para TODAS las tarjetas del sitio.
   Reemplaza a: .proyecto-card, .proy-card, .nov-card, .nov-featured,
                .pub-card (todos migrados a .ds-card + modificadores).

   Estilo base: MATERIAL con lift → fondo blanco, borde sutil, sombra
   suave; al hover se eleva (-6px), sombra más fuerte y el CTA vira a dorado.

   ANATOMÍA (vertical, caso por defecto):
     <a class="ds-card ds-card--destacada">        · destacada = borde azul sutil
       <div class="ds-card__media">                · wrapper imagen (zoom + badge overlay)
         <img>
         <span class="ds-card__badge ds-card__badge--overlay">Convocatoria</span>
       </div>
       <div class="ds-card__body">
         <span class="ds-card__badge">Categoría</span>   · badge inline (opcional)
         <time class="ds-card__date">15 nov 2025</time>   · fecha (opcional)
         <h3 class="ds-card__title">Título</h3>
         <p class="ds-card__desc">Descripción…</p>
         <span class="ds-card__btn">Ver proyecto</span>   · CTA botón   ─┐ usar
         <span class="ds-card__link">Leer más <i></i></span> · CTA flecha ─┘ uno u otro
       </div>
     </a>

   MODIFICADORES:
     .ds-card--destacada   · realce sutil (borde azul; badge azul normal)
     .ds-card--horizontal  · imagen a la izquierda, cuerpo a la derecha
     .ds-card--publication  · variante horizontal con acordeón de capítulos
     .ds-card--flat        · sin borde/sombra (uso puntual, p.ej. galerías)
   ════════════════════════════════════════════════════════════════════════ */

/* —— Contenedor base —————————————————————————————————————————————— */
.ds-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-bg);
    border: var(--card-bd);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: var(--card-transition);
}
.ds-card:hover {
    transform: var(--card-lift);
    box-shadow: var(--card-shadow-hover);
    border-color: var(--color-accent);
}

/* Wrapper de link interno (cuando la card no es <a> sino contiene uno) */
.ds-card__link-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

/* —— Media (imagen) —————————————————————————————————————————————— */
.ds-card__media {
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.ds-card__media img,
img.ds-card__img {
    display: block;
    width: 100%;
    height: 210px;
    object-fit: cover;
    transition: transform .5s ease;
}
.ds-card:hover .ds-card__media img {
    transform: scale(1.05);
}

/* —— Cuerpo ——————————————————————————————————————————————————————— */
.ds-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;
    gap: 10px;
    padding: 22px;
}

/* —— Badge (categoría / estado) ————————————————————————————————— */
.ds-card__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: fit-content;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: .65rem;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    background: var(--color-accent);
    color: #fff;
}
/* Badge superpuesto sobre la imagen (arriba-izquierda) */
.ds-card__badge--overlay {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    background: var(--color-bg);
    color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

/* —— Textos ——————————————————————————————————————————————————————— */
.ds-card__date {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: var(--color-secondary);
}
.ds-card__title {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 800;
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--color-primary);
}
.ds-card__desc {
    margin: 0;
    flex: 1;
    font-size: .9rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}
.ds-card__meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    font-size: .75rem;
    font-weight: 600;
    color: var(--color-secondary);
}

/* —— CTA botón (ancho completo) ————————————————————————————————— */
.ds-card__btn {
    display: inline-block;
    box-sizing: border-box;
    width: 100%;
    margin-top: auto;
    padding: 11px 16px;
    border-radius: 6px;
    font-size: .8rem;
    font-weight: 800;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    background: var(--color-primary);
    color: #fff;
    transition: background .3s, color .3s;
}
.ds-card:hover .ds-card__btn {
    background: var(--color-gold);
    color: var(--color-primary);
}

/* —— CTA flecha "Leer más" ——————————————————————————————————————— */
.ds-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    font-size: .85rem;
    font-weight: 700;
    text-decoration: none;
    color: var(--color-primary);
    cursor: pointer;
    transition: color .3s ease, gap .3s ease;
}
.ds-card__link .arrow-icon { width: 22px; height: 22px; }
.ds-card__link i { transition: transform .3s ease; }
/* MISMO elemento que .link-arrow: hover del enlace O de toda la card →
   dorado + círculo dibujado + flecha desplazada (svg.arrow-icon). */
.ds-card__link:hover,
.ds-card:hover .ds-card__link { color: var(--color-accent); gap: 12px; }
.ds-card__link:hover i,
.ds-card:hover .ds-card__link i { transform: translateX(4px); }
.ds-card__link:hover .arrow-icon,
.ds-card:hover .ds-card__link .arrow-icon { transform: translate3d(4px, 0, 0); }
.ds-card__link:hover .arrow-icon--circle,
.ds-card:hover .ds-card__link .arrow-icon--circle { stroke-dashoffset: 0; }
.ds-card__link:hover .arrow-icon g,
.ds-card:hover .ds-card__link .arrow-icon g { stroke: var(--color-accent); }

/* —— Modificador: DESTACADA (realce dorado) ————————————————————— */
/* Destacada: sin borde de realce — usa el borde neutro base de .ds-card.
   (El dorado es sólo para hover; el badge de destacada usa el azul normal.) */

/* —— Modificador: FLAT (sin borde/sombra) ——————————————————————— */
.ds-card--flat {
    border: none;
    box-shadow: none;
    background: transparent;
}
.ds-card--flat:hover {
    box-shadow: none;
    border-color: transparent;
    transform: translateY(-4px);
}

/* —— Modificador: HORIZONTAL (imagen a la izquierda) ———————————— */
.ds-card--horizontal { flex-direction: row; }
.ds-card--horizontal .ds-card__link-wrap { flex-direction: row; width: 100%; }
.ds-card--horizontal .ds-card__media { width: 40%; min-width: 200px; }
.ds-card--horizontal .ds-card__media img { height: 100%; min-height: 220px; }
.ds-card--horizontal .ds-card__body { justify-content: center; padding: 28px; }
@media (max-width: 700px) {
    .ds-card--horizontal { flex-direction: column; }
    .ds-card--horizontal .ds-card__media { width: 100%; }
    .ds-card--horizontal .ds-card__media img { height: 210px; min-height: 0; }
}

/* —— Modificador: FEATURED (destacado editorial grande) ———————————— */
.ds-card--featured .ds-card__title {
    font-size: 1.6rem;
    line-height: 1.25;
    text-transform: none;
}
.ds-card--featured .ds-card__desc { font-size: .95rem; line-height: 1.7; }
.ds-card--featured .ds-card__body { gap: 14px; padding: 40px; }
@media (max-width: 700px) {
    .ds-card--featured .ds-card__title { font-size: 1.3rem; }
    .ds-card--featured .ds-card__body { padding: 28px 24px; }
}

/* ══════════════════════════════════════════════════════════════════════
   VARIANTE PUBLICACIÓN — .ds-card--publication
   Card horizontal con acordeón de capítulos (toggle vía checkbox oculto).
   ════════════════════════════════════════════════════════════════════════ */
.ds-card--publication { overflow: visible; }
.ds-card--publication .ds-card__checkbox { display: none; }
.ds-card--publication .ds-card__toggle { display: block; cursor: pointer; }
.ds-card__pub-main {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 24px;
    align-items: center;
    padding: 20px;
}
/* Espacio reservado a la derecha para el chevron de la esquina */
.ds-card__pub-body { padding-right: 40px; }
.ds-card--publication .ds-card__media {
    width: 200px;
    height: 150px;
    border-radius: 8px;
}
.ds-card--publication .ds-card__media img { height: 100%; }
.ds-card__pub-body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
/* El título de publicación usa el .ds-card__title base (mayúsculas, 1.15rem) igual que las demás cards */
.ds-card--publication .ds-card__desc  { font-size: .85rem; }
/* Panel expandido: dos columnas (ficha técnica | capítulos) */
.ds-card__pub-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border);
}
@media (max-width: 700px) {
    .ds-card__pub-cols { grid-template-columns: 1fr; gap: 20px; }
}
.ds-card__pub-col-title {
    font-size: .7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-secondary);
    margin-bottom: 12px;
}
/* Lista de capítulos del libro — items con lift + hover (azul/gris) */
.ds-card__chapters {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ds-card__chapters li {
    padding: 9px 12px;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    cursor: default;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, color .2s ease;
}
.ds-card__chapters li:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
    border-color: var(--color-accent);
    color: var(--color-primary);
}
.ds-card__pub-sheet {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 12px;
    font-size: .85rem;
}
/* Cuando la ficha va dentro de una columna, sin separador propio */
.ds-card__pub-cols .ds-card__pub-sheet { padding-top: 0; border-top: none; }
.ds-card__pub-sheet dt,
.ds-card__pub-sheet .sheet-label { font-weight: 700; color: var(--color-primary); margin: 0; }
.ds-card__pub-sheet dd { margin: 0; }
.ds-card__tags { display: flex; gap: 6px; flex-wrap: wrap; }
.ds-card__tag {
    padding: 3px 10px;
    border-radius: 12px;
    font-size: .7rem;
    font-weight: 700;
    background: var(--color-accent);
    color: #fff;
}
/* Fila de acciones de la ficha expandida (Leer / Descargar) */
.ds-card__pub-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}
/* CTA dentro de la ficha expandida (p.ej. "Leer publicación") */
.ds-card__pub-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1.5px solid var(--color-primary);
    border-radius: 6px;
    background: var(--color-primary);
    color: #fff;
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    transition: background .3s, color .3s, border-color .3s;
}
.ds-card__pub-cta:hover {
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-primary);
}
/* Variante secundaria (contorno) — p.ej. "Descargar publicación" */
.ds-card__pub-cta--ghost {
    background: transparent;
    color: var(--color-primary);
}
.ds-card__pub-cta--ghost:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}
/* ── Chevron circular unificado — desplegables (publicaciones, aula, etc.) ──
   Círculo neutro (gris/azul) con lift; se ILUMINA en dorado sólo en hover;
   el glyph interno rota 180° al abrir. Estructura:
   <span class="ds-chev [ds-card__chevron|au-level__chev]"><i class="fas fa-chevron-down"></i></span> */
.ds-chev {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    color: var(--color-primary);
    font-size: .85rem;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, border-color .25s ease, color .25s ease;
}
.ds-chev i { line-height: 1; transition: transform .3s ease; }
/* Hover → lift + iluminado dorado (dorado sólo para hover) */
.ds-chev:hover,
.ds-card__toggle:hover .ds-chev,
.au-level > summary:hover .ds-chev {
    transform: translateY(-2px);
    box-shadow: var(--card-shadow-hover);
    background: var(--color-gold);
    border-color: var(--color-gold);
    color: var(--color-primary);
}
/* Glyph rota al abrir el desplegable */
.ds-card--publication:has(.ds-card__checkbox:checked) .ds-card__chevron i,
.au-level[open] .au-level__chev i { transform: rotate(180deg); }
/* Estado ABIERTO/activo → azul (nunca dorado; el dorado es sólo hover) */
.ds-card--publication:has(.ds-card__checkbox:checked) .ds-card__chevron,
.au-level[open] .au-level__chev {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

/* Card de publicación: chevron fijado en la esquina superior derecha */
.ds-card--publication .ds-card__chevron {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
}
.ds-card__expanded {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px;
    transition: max-height .4s ease, padding .4s ease;
}
.ds-card--publication:has(.ds-card__checkbox:checked) .ds-card__expanded {
    max-height: 900px;
    padding: 0 20px 24px;
}
@media (max-width: 700px) {
    .ds-card__pub-main { grid-template-columns: 1fr; }
    .ds-card--publication .ds-card__media { width: 100%; height: 180px; }
}

/* ══════════════════════════════════════════════════════════════════════
   BENTO GRID — layout reutilizable para .ds-card
   Grilla de 3 columnas con celdas de alto automático. Combinar con los
   modificadores de tamaño --wide / --tall / --hero / --full.
   ════════════════════════════════════════════════════════════════════════ */
.ds-bento {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    grid-auto-rows: auto;
}
.ds-card--wide { grid-column: span 2; }
.ds-card--tall { grid-row: span 2; }
.ds-card--hero { grid-column: span 2; grid-row: span 2; }
.ds-card--full { grid-column: 1 / -1; }
@media (max-width: 900px) {
    .ds-bento { grid-template-columns: repeat(2, 1fr); }
    .ds-card--hero { grid-column: span 2; grid-row: span 1; }
    .ds-card--full { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
    .ds-bento { grid-template-columns: 1fr; }
    .ds-card--wide, .ds-card--tall, .ds-card--hero, .ds-card--full { grid-column: span 1; grid-row: span 1; }
}

/* ══════════════════════════════════════════════════════════════════════
   VARIANTE EFEMÉRIDES — .ds-card--efem
   Card de efeméride para el bento: sin imagen, con tira de acento por
   categoría, badge de fecha (día/mes) y panel de recursos colapsable.
   Hereda de .ds-card (fondo, borde, radius, sombra). Hover más sutil.
   ════════════════════════════════════════════════════════════════════════ */
.ds-card--efem:hover {
    transform: translateY(-2px);
    border-color: transparent;
}
/* Tira de acento superior, coloreada por categoría */
.ds-card--efem::before {
    content: '';
    display: block;
    flex-shrink: 0;
    width: 100%;
    height: 4px;
}
.ds-card--efem-conv::before   { background: var(--color-primary); }
.ds-card--efem-onu::before    { background: var(--color-gold); }
.ds-card--efem-critica::before{ background: #c0392b; }
.ds-card--efem-inst::before   { background: #1d8a4e; }
.ds-card--efem-mujer::before  { background: #8e44ad; }
.ds-card--efem-ninez::before  { background: #2980b9; }

/* Cuerpo de la efeméride (reusa .ds-card__body) */
.ds-card--efem .ds-card__body { gap: 0; padding: 20px 22px 16px; }
.ds-card--efem.ds-card--hero .ds-card__body,
.ds-card--efem.ds-card--wide .ds-card__body { padding: 28px 32px 20px; }

/* Título / descripción: sin mayúsculas, escala propia */
.ds-card--efem .ds-card__title {
    font-size: 1rem;
    text-transform: none;
    margin-bottom: 10px;
}
.ds-card--efem.ds-card--hero .ds-card__title,
.ds-card--efem.ds-card--wide .ds-card__title { font-size: 1.3rem; }
.ds-card--efem .ds-card__desc { font-size: .87rem; line-height: 1.65; }
.ds-card--efem.ds-card--hero .ds-card__desc { font-size: .95rem; }

/* Fila meta: fecha + año + tipo */
.ds-card__ef-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.ds-card__ef-date {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 6px 12px;
}
.ds-card__ef-day {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--color-primary);
}
.ds-card--efem.ds-card--hero .ds-card__ef-day { font-size: 2.2rem; }
.ds-card__ef-month {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
    color: var(--color-secondary);
}
.ds-card__ef-year {
    font-size: .75rem;
    font-weight: 700;
    color: var(--color-secondary);
    background: var(--color-bg-alt);
    border: 1px solid var(--color-border);
    border-radius: 20px;
    padding: 4px 10px;
}
.ds-card__ef-type {
    font-size: .65rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .8px;
    padding: 3px 9px;
    border-radius: 20px;
    margin-left: auto;
    background: var(--color-bg-alt);
    color: var(--color-secondary);
}
.ds-card--efem-conv   .ds-card__ef-type { background: rgba(35,45,79,.1);   color: var(--color-primary); }
.ds-card--efem-onu    .ds-card__ef-type { background: rgba(231,186,97,.2);  color: #a07c1f; }
.ds-card--efem-critica .ds-card__ef-type { background: rgba(192,57,43,.12); color: #c0392b; }
.ds-card--efem-inst   .ds-card__ef-type { background: rgba(29,138,78,.12);  color: #1d8a4e; }
.ds-card--efem-mujer  .ds-card__ef-type { background: rgba(142,68,173,.12); color: #8e44ad; }
.ds-card--efem-ninez  .ds-card__ef-type { background: rgba(41,128,185,.12); color: #2980b9; }

/* Panel de recursos colapsable (toggle JS → clase .open) */
.ds-card__ef-resources {
    border-top: 1.5px solid var(--color-border);
    background: var(--color-bg-alt);
}
.ds-card__ef-toggle {
    width: 100%;
    padding: 12px 22px;
    background: none;
    border: none;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--color-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: color .2s, background .2s;
}
.ds-card__ef-toggle:hover { color: var(--color-primary); background: rgba(35,45,79,.04); }
.ds-card__ef-toggle i { font-size: .7rem; transition: transform .3s; }
.ds-card.open .ds-card__ef-toggle i { transform: rotate(180deg); }
.ds-card__ef-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #fff;
    font-size: .65rem;
    font-weight: 800;
    margin-left: 6px;
}
.ds-card__ef-panel { display: none; padding: 4px 22px 18px; }
.ds-card.open .ds-card__ef-panel { display: block; }
.ds-card__ef-res-group { margin-bottom: 12px; }
.ds-card__ef-res-group:last-child { margin-bottom: 0; }
.ds-card__ef-res-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: .65rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 800;
    color: var(--color-secondary);
    margin-bottom: 6px;
}
.ds-card__ef-res-label i { font-size: .7rem; }
.ds-card__ef-res-links { display: flex; flex-direction: column; gap: 5px; }
.ds-card__ef-res-link {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: #fff;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    text-decoration: none;
    font-size: .8rem;
    font-weight: 600;
    color: var(--color-primary);
    transition: all .2s;
}
.ds-card__ef-res-link:hover {
    border-color: var(--color-accent);
    background: rgba(62,90,126,.06);
    color: var(--color-accent);
    transform: translateX(3px);
}
.ds-card__ef-res-link i { font-size: .65rem; color: var(--color-secondary); flex-shrink: 0; width: 14px; text-align: center; }
.ds-card__ef-res-link span { flex: 1; line-height: 1.3; }
.ds-card__ef-res-ext { font-size: .6rem; color: var(--color-secondary); flex-shrink: 0; }

/* ── Chrome de la página Efemérides (filtros + secciones por mes) ─────── */
.ef-wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; }
.ef-filters { display: flex; flex-wrap: wrap; gap: 8px; padding: 40px 0 32px; }
.ef-filter {
    padding: 7px 16px;
    border: 1.5px solid var(--color-border);
    border-radius: 20px;
    background: none;
    font-family: inherit;
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--color-secondary);
    cursor: pointer;
    transition: all .2s;
}
.ef-filter:hover { border-color: var(--color-primary); color: var(--color-primary); }
.ef-filter.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.ef-month-section { margin-bottom: 64px; }
.ef-month-section[hidden] { display: none; }
.ef-month-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-border);
}
.ef-month-name { font-size: 1.4rem; font-weight: 900; letter-spacing: -.5px; text-transform: uppercase; color: var(--color-primary); }
.ef-month-count {
    background: var(--color-bg-alt);
    color: var(--color-secondary);
    font-size: .75rem;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--color-border);
}

/* ── 6. FEEDBACK — Alertas ─────────────────────────────────────────── */
.alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: var(--radius-sm); border-left: 4px solid; font-size: var(--fs-sm); margin-bottom: var(--space-4); }
.alert i { font-size: 1.1rem; margin-top: 1px; }
.alert--success { background: var(--success-soft); border-color: var(--success); color: #166b3c; }
.alert--error   { background: var(--error-soft);   border-color: var(--error);   color: #9c2c20; }
.alert--warning { background: var(--warning-soft); border-color: var(--warning); color: #7a5e16; }
.alert--info    { background: var(--info-soft);    border-color: var(--info);    color: #1f4f7a; }
.alert__close { margin-left: auto; background: none; border: none; cursor: pointer; color: inherit; opacity: .6; font-size: 1rem; }
.alert__close:hover { opacity: 1; }

/* Toast (notificación flotante) */
.toast-container { position: fixed; bottom: 24px; right: 24px; z-index: var(--z-toast); display: flex; flex-direction: column; gap: 12px; max-width: 360px; }
.toast { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: var(--color-primary); color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-3); animation: ds-toast-in .3s ease; }
.toast--success { background: var(--success); }
.toast--error   { background: var(--error); }
.toast i { font-size: 1.2rem; }
@keyframes ds-toast-in { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }

/* Badge / Chip genéricos */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: .04em; background: var(--gray-100); color: var(--color-primary); }
.badge--primary { background: var(--color-primary); color: #fff; }
.badge--gold    { background: var(--color-accent); color: #fff; }
.badge--success { background: var(--success-soft); color: #166b3c; }
.badge--error   { background: var(--error-soft); color: #9c2c20; }
.badge--warning { background: var(--warning-soft); color: #7a5e16; }
.badge--info    { background: var(--info-soft); color: #1f4f7a; }
.chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 14px; border-radius: var(--radius-full); font-size: var(--fs-sm); font-weight: 600; background: var(--gray-100); color: var(--color-primary); }
.chip--removable i { cursor: pointer; opacity: .6; }
.chip--removable i:hover { opacity: 1; }

/* Avatar */
.avatar { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-gold); color: var(--color-primary); font-weight: var(--fw-black); flex-shrink: 0; overflow: hidden; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar--sm { width: 32px; height: 32px; font-size: .8rem; }
.avatar--lg { width: 72px; height: 72px; font-size: 1.6rem; }
.avatar--xl { width: 104px; height: 104px; font-size: 2.2rem; }

/* Progreso */
.progress { width: 100%; height: 10px; background: var(--gray-200); border-radius: var(--radius-full); overflow: hidden; }
.progress__bar { height: 100%; background: linear-gradient(90deg, var(--color-accent), var(--color-gold)); border-radius: inherit; transition: width .4s ease; }

/* Spinner / Loader */
.spinner { width: 38px; height: 38px; border: 4px solid var(--gray-200); border-top-color: var(--color-gold); border-radius: 50%; animation: ds-spin .8s linear infinite; }
.spinner--sm { width: 22px; height: 22px; border-width: 3px; }
.spinner--lg { width: 56px; height: 56px; border-width: 5px; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.loader-dots { display: inline-flex; gap: 6px; }
.loader-dots span { width: 9px; height: 9px; border-radius: 50%; background: var(--color-gold); animation: ds-bounce 1s infinite ease-in-out; }
.loader-dots span:nth-child(2) { animation-delay: .15s; }
.loader-dots span:nth-child(3) { animation-delay: .3s; }
@keyframes ds-bounce { 0%,80%,100% { transform: scale(.5); opacity: .5; } 40% { transform: scale(1); opacity: 1; } }

/* Divisor */
.divider { border: none; border-top: 1px solid var(--color-border); margin: var(--space-5) 0; }
.divider--vertical { border-top: none; border-left: 1px solid var(--color-border); margin: 0 var(--space-4); align-self: stretch; }
.divider--gold { border-top: 2px solid var(--color-gold); }

/* Breadcrumb */
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--gray-500); padding: 0; list-style: none; margin: 0; }
.breadcrumb a { color: var(--color-primary); font-weight: 600; }
.breadcrumb a:hover { color: var(--color-gold); }
.breadcrumb li { display: flex; align-items: center; gap: 8px; }
.breadcrumb li:not(:last-child)::after { content: '/'; color: var(--gray-300); }
.breadcrumb li[aria-current] { color: var(--gray-500); }

/* Tooltip (CSS puro vía [data-tooltip]) */
[data-tooltip] { position: relative; }
[data-tooltip]::after {
    content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px);
    background: var(--color-primary); color: #fff; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
    padding: 6px 10px; border-radius: var(--radius-sm); box-shadow: var(--shadow-2);
    opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: var(--z-tooltip);
}
[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 7. UTILIDADES (helpers) ───────────────────────────────────────── */
/* Espaciado */
.u-m-0{margin:0!important} .u-mt-1{margin-top:var(--space-1)} .u-mt-2{margin-top:var(--space-2)} .u-mt-3{margin-top:var(--space-3)} .u-mt-4{margin-top:var(--space-4)} .u-mt-5{margin-top:var(--space-5)} .u-mt-6{margin-top:var(--space-6)}
.u-mb-1{margin-bottom:var(--space-1)} .u-mb-2{margin-bottom:var(--space-2)} .u-mb-3{margin-bottom:var(--space-3)} .u-mb-4{margin-bottom:var(--space-4)} .u-mb-5{margin-bottom:var(--space-5)} .u-mb-6{margin-bottom:var(--space-6)}
.u-p-2{padding:var(--space-2)} .u-p-3{padding:var(--space-3)} .u-p-4{padding:var(--space-4)} .u-p-5{padding:var(--space-5)} .u-p-6{padding:var(--space-6)}
/* Texto */
.u-text-center{text-align:center} .u-text-left{text-align:left} .u-text-right{text-align:right}
.u-uppercase{text-transform:uppercase} .u-capitalize{text-transform:capitalize}
.u-text-primary{color:var(--color-primary)} .u-text-gold{color:var(--color-gold)} .u-text-muted{color:var(--gray-500)} .u-text-success{color:var(--success)} .u-text-error{color:var(--error)} .u-text-white{color:#fff}
.u-fw-bold{font-weight:var(--fw-bold)} .u-fw-black{font-weight:var(--fw-black)}
.u-fs-sm{font-size:var(--fs-sm)} .u-fs-lg{font-size:var(--fs-lg)} .u-fs-xl{font-size:var(--fs-xl)}
/* Display */
.u-block{display:block} .u-inline-block{display:inline-block} .u-flex{display:flex} .u-inline-flex{display:inline-flex} .u-grid{display:grid} .u-none{display:none}
.u-items-center{align-items:center} .u-justify-center{justify-content:center} .u-justify-between{justify-content:space-between} .u-gap-2{gap:var(--space-2)} .u-gap-3{gap:var(--space-3)} .u-gap-4{gap:var(--space-4)}
.u-flex-col{flex-direction:column} .u-flex-wrap{flex-wrap:wrap} .u-flex-1{flex:1}
/* Posición */
.u-relative{position:relative} .u-absolute{position:absolute} .u-fixed{position:fixed} .u-sticky{position:sticky}
/* Bordes / radios / sombra */
.u-rounded-sm{border-radius:var(--radius-sm)} .u-rounded{border-radius:var(--radius-md)} .u-rounded-lg{border-radius:var(--radius-lg)} .u-rounded-full{border-radius:var(--radius-full)}
.u-shadow-1{box-shadow:var(--shadow-1)} .u-shadow-2{box-shadow:var(--shadow-2)} .u-shadow-3{box-shadow:var(--shadow-3)}
.u-w-full{width:100%} .u-bg-soft{background:var(--gray-50)} .u-bg-primary{background:var(--color-primary)}
/* Visibilidad responsive */
@media (max-width: 768px) { .u-hide-mobile{display:none!important} }
@media (min-width: 769px) { .u-hide-desktop{display:none!important} }
.u-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

/* ════════════════════════ FIN CAPA GENÉRICA ════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   ESCUELA VIRTUAL CIPDH — capa propia del prototipo standalone
   Namespace: esc-  ·  Reutiliza tokens, .ds-card, .ds-btn, au-/pf-/login-
   ════════════════════════════════════════════════════════════════════════ */

/* ── 0. Menú móvil sobre header siempre navy (esc-header nunca es transparente) ── */
.esc-header .mobile-menu-toggle span { background: #fff; }
.esc-header .mobile-menu-toggle.is-open span:nth-child(1),
.esc-header .mobile-menu-toggle.is-open span:nth-child(3) { background: #fff; }
/* El header fijo debe quedar por encima del drawer para que el botón (abrir/cerrar)
   sea siempre visible mientras el menú móvil está abierto */
.esc-header { z-index: 1095; }

/* ── 1. HEADER — lockup propio + estado conectado ──────────────────── */
.esc-header .header-inner { gap: 28px; }
.esc-header .site-branding { display: flex; align-items: center; gap: 13px; }
.esc-header .site-branding img.custom-logo,
.esc-header.is-scrolled .site-branding img.custom-logo {
    height: 76px; width: auto; filter: none;
}
.esc-logo-text { display: flex; flex-direction: column; line-height: 1.15; }
.esc-logo-text .esc-logo-eyebrow { font-size: 9.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: rgba(255,255,255,.62); max-width: 210px; margin-top: 3px; }
.esc-logo-text .esc-logo-main { font-size: 21px; font-weight: 900; letter-spacing: -.01em; text-transform: uppercase; color: #fff; }
.esc-logo-text .esc-logo-main strong { color: var(--color-accent-light); font-weight: 900; }
@media (max-width: 760px) {
    .esc-header .site-branding img.custom-logo,
    .esc-header.is-scrolled .site-branding img.custom-logo { height: 56px; }
    .esc-logo-text .esc-logo-main { font-size: 16px; }
}

.esc-header .header-tools { gap: 22px; }
.esc-btn-login {
    display: inline-flex; align-items: center; gap: 8px;
    background: var(--color-gold); color: var(--color-primary) !important;
    padding: 10px 22px; border-radius: 8px;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
    transition: all .25s;
}
.esc-btn-login:hover { background: #fff; color: var(--color-primary) !important; transform: translateY(-2px); box-shadow: var(--shadow-2); }

/* Chip de usuario conectado (páginas de campus) */
.esc-userchip { display: flex; align-items: center; gap: 11px; }
.esc-userchip__ava {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
    background: var(--color-accent-light); color: var(--color-primary);
    display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 12.5px;
}
.esc-userchip__meta { display: flex; flex-direction: column; line-height: 1.25; }
.esc-userchip__name { font-size: 12.5px; font-weight: 700; color: #fff; }
.esc-userchip__role { font-size: 10px; color: rgba(255,255,255,.62); text-transform: uppercase; letter-spacing: .05em; }
.esc-userchip__logout {
    color: rgba(255,255,255,.7); font-size: 15px; margin-left: 4px; padding: 6px; border-radius: 6px; transition: all .2s;
}
.esc-userchip__logout:hover { color: var(--color-accent-light); background: rgba(255,255,255,.08); }

/* ── 2. HERO de portada ─────────────────────────────────────────────── */
.esc-hero {
    position: relative;
    min-height: 640px;
    padding-top: 40px;
    background: var(--color-primary);
}
.esc-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .34; }
.esc-hero__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(115deg, rgba(35,45,79,.97) 0%, rgba(35,45,79,.88) 42%, rgba(62,90,126,.55) 100%);
}
.esc-hero__content { position: relative; z-index: 2; padding: 64px 0 76px; color: #fff; max-width: 680px; }
.esc-hero__eyebrow {
    display: inline-flex; align-items: center; gap: 9px;
    background: rgba(231,186,97,.14); border: 1px solid rgba(231,186,97,.4); color: var(--color-gold);
    padding: 7px 16px; border-radius: 30px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .08em;
    margin-bottom: 26px;
}
.esc-hero__content h1 { font-size: 3.4rem; line-height: 1.08; letter-spacing: -1.5px; margin: 0 0 22px; }
.esc-hero__content h1 span { color: var(--color-accent-light); }
.esc-hero__content p { font-size: 1.1rem; font-weight: 500; opacity: .9; line-height: 1.6; margin: 0 0 34px; max-width: 560px; }
.esc-hero__cta { display: flex; gap: 16px; flex-wrap: wrap; }
@media (max-width: 760px) {
    .esc-hero { min-height: 560px; }
    .esc-hero__content h1 { font-size: 2.3rem; }
}

/* Tira de estadísticas superpuesta al hero */
.esc-stats {
    position: relative; z-index: 3;
    display: grid; grid-template-columns: repeat(4, 1fr);
    background: #fff; border-radius: 16px; box-shadow: var(--shadow-4);
    margin: 0 auto; max-width: 1100px; transform: translateY(56px);
}
.esc-stat { padding: 30px 20px; text-align: center; border-right: 1px solid var(--color-border); }
.esc-stat:last-child { border-right: none; }
.esc-stat__n { display: block; font-size: 2.1rem; font-weight: 900; color: var(--color-primary); line-height: 1; }
.esc-stat__l { display: block; margin-top: 8px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--color-secondary); }
@media (max-width: 760px) {
    .esc-stats { grid-template-columns: repeat(2, 1fr); transform: translateY(40px); }
    .esc-stat { border-bottom: 1px solid var(--color-border); }
}

/* ── 3. Cabeceras de sección genéricas ──────────────────────────────── */
.esc-sec { padding: 120px 0 90px; }
.esc-sec--alt { background: var(--color-bg-alt); }
.esc-sec-head { max-width: 640px; margin: 0 0 48px; }
.esc-sec-head--center { margin-left: auto; margin-right: auto; text-align: center; }
.esc-eyebrow { display: block; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .1em; color: var(--color-accent); margin-bottom: 12px; }
.esc-sec-head h2 { font-size: 2.3rem; letter-spacing: -.02em; margin-bottom: 14px; text-transform: uppercase; }
.esc-sec-head p { font-size: 1rem; color: var(--color-text-muted); line-height: 1.65; margin: 0; }
.esc-sec-foot { display: flex; justify-content: center; margin-top: 48px; }

/* ── 4. Miniatura de curso ("pantallazo") dentro de .ds-card__media ──
   Más alta que una card genérica (aspect-ratio en vez de alto fijo) y con
   los textos (fecha, título, modalidad) superpuestos sobre la imagen —
   así el cuerpo blanco de la card queda liviano (solo bajada + CTA). */
.esc-course-grid .ds-card__media,
.ds-card__media:has(.esc-course-thumb) { aspect-ratio: 4 / 3; }
.esc-course-thumb {
    position: relative; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    display: flex; align-items: center; justify-content: center;
}
.esc-course-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.esc-course-thumb::after { content:''; position:absolute; inset:0; background: linear-gradient(180deg, rgba(35,45,79,0) 30%, rgba(20,27,48,.94) 100%); }
.esc-course-thumb__play {
    position: relative; z-index: 2;
    width: 58px; height: 58px; border-radius: 50%;
    background: rgba(255,255,255,.16); border: 1.5px solid rgba(255,255,255,.5);
    display: flex; align-items: center; justify-content: center; color: #fff; font-size: 18px;
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    transition: all .3s;
    margin-bottom: 46px; /* deja lugar visual al bloque de texto inferior */
}
.ds-card:hover .esc-course-thumb__play { background: var(--color-accent-light); border-color: var(--color-accent-light); color: var(--color-primary); transform: scale(1.08); }

/* Bloque de texto (fecha · título · modalidad) superpuesto sobre la imagen */
.esc-course-thumb__info {
    position: absolute; z-index: 2; left: 0; right: 0; bottom: 0;
    padding: 16px 16px 14px;
    display: flex; flex-direction: column; gap: 5px;
}
.esc-course-thumb__date {
    font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent-light);
}
.esc-course-thumb__info .ds-card__title.esc-course-thumb__title {
    margin: 0; color: #fff; font-size: 1.08rem; line-height: 1.22;
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.esc-course-thumb__modalidad {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: rgba(255,255,255,.85);
}
.esc-course-thumb__modalidad i { color: var(--color-accent-light); }

/* Tipo de programa: curso vs diplomatura */
.esc-course-thumb__tipo {
    position: absolute; z-index: 2; top: 14px; right: 14px;
    font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    padding: 4px 10px; border-radius: 20px; background: rgba(255,255,255,.92); color: var(--color-primary);
}
.esc-course-thumb__tipo--diplo { background: var(--color-accent); color: #fff; }

.esc-course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
@media (max-width: 980px) { .esc-course-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 620px) { .esc-course-grid { grid-template-columns: 1fr; } }

.esc-card-meta { display: flex; align-items: center; gap: 14px; font-size: 12px; color: var(--color-secondary); font-weight: 600; }
.esc-card-meta span { display: inline-flex; align-items: center; gap: 5px; }
.esc-card-meta i { color: var(--color-accent); }

/* ── 5. Modalidades (sincrónico / asincrónico / híbrido) ────────────── */
.esc-modalities { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 860px) { .esc-modalities { grid-template-columns: 1fr; } }
.esc-modality {
    background: #fff; border: 1px solid var(--color-border); border-radius: 16px; padding: 34px 30px;
    transition: var(--card-transition);
}
.esc-modality:hover { transform: var(--card-lift); box-shadow: var(--card-shadow-hover); border-color: var(--color-accent); }
.esc-modality__ico {
    width: 56px; height: 56px; border-radius: 14px; margin-bottom: 22px;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); color: #fff;
    display: flex; align-items: center; justify-content: center; font-size: 22px;
}
.esc-modality h3 { font-size: 1.2rem; text-transform: none; letter-spacing: -.01em; margin-bottom: 10px; }
.esc-modality p { font-size: .92rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; }

/* ── 6. Instituciones aliadas ────────────────────────────────────────── */
.esc-sec--dark { background: var(--color-primary); color: #fff; }
.esc-sec--dark .esc-eyebrow { color: var(--color-accent-light); }
.esc-sec--dark .esc-sec-head h2 { color: #fff; }
.esc-sec--dark .esc-sec-head p { color: rgba(255,255,255,.7); }
.esc-instituciones { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 64px; }
.esc-instituciones img { height: 50px; width: auto; opacity: .82; transition: all .3s; }
.esc-instituciones a:hover img { opacity: 1; transform: scale(1.06); }
.esc-instituciones a.esc-inst--dark img { filter: brightness(0) invert(1); }

/* ── 7. CTA final de portada ─────────────────────────────────────────── */
.esc-cta {
    background: linear-gradient(120deg, var(--color-primary), #1a3557);
    border-radius: 22px; padding: 64px 60px; color: #fff;
    display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap;
}
.esc-cta h2 { font-size: 2rem; text-transform: none; letter-spacing: -.01em; margin: 0 0 10px; }
.esc-cta p { margin: 0; opacity: .85; max-width: 440px; }
@media (max-width: 760px) { .esc-cta { padding: 44px 30px; text-align: center; justify-content: center; } .esc-cta p { margin: 0 auto; } }

/* ── 8. Footer compacto (páginas de campus/herramienta) ─────────────── */
.esc-footer-compact { background: var(--color-primary); color: #fff; padding: 26px 0; }
.esc-footer-compact .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; font-size: 12.5px; opacity: .75; }
.esc-footer-compact a { color: #fff; opacity: .85; }
.esc-footer-compact a:hover { color: var(--color-accent-light); opacity: 1; }
.esc-footer-compact .esc-footer-links { display: flex; gap: 22px; }

/* ── 9. Filtros de catálogo ──────────────────────────────────────────── */
.esc-catalog-bar { display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; margin-bottom: 40px; padding-bottom: 26px; border-bottom: 1px solid var(--color-border); }
.esc-filter-group { display: flex; flex-wrap: wrap; gap: 8px; }
.esc-filter {
    padding: 8px 18px; border-radius: 20px; border: 1.5px solid var(--color-border);
    background: #fff; font-family: inherit; font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
    color: var(--color-secondary); cursor: pointer; transition: all .2s;
}
.esc-filter:hover { border-color: var(--color-primary); color: var(--color-primary); }
.esc-filter.active { background: var(--color-primary); border-color: var(--color-primary); color: #fff; }
.esc-search { display: flex; align-items: center; gap: 10px; padding: 9px 16px; border: 1.5px solid var(--color-border); border-radius: 20px; min-width: 240px; }
.esc-search i { color: var(--color-secondary); }
.esc-search input { border: none; outline: none; font-family: inherit; font-size: 13px; width: 100%; color: var(--color-text); }
.esc-count { font-size: 13px; color: var(--color-secondary); font-weight: 600; margin-bottom: 26px; }
.esc-count strong { color: var(--color-primary); }

/* ── 10. Ficha pública de curso (curso.html) ─────────────────────────── */
.esc-course-hero { background: var(--color-primary); padding: 56px 0 0; color: #fff; position: relative; overflow: hidden; }
.esc-course-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .22; }
.esc-course-hero__overlay { position: absolute; inset: 0; background: linear-gradient(100deg, rgba(35,45,79,.96), rgba(35,45,79,.75)); }
.esc-course-hero__inner { position: relative; z-index: 2; padding-bottom: 60px; }
.esc-course-hero .esc-badges { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.esc-course-hero h1 { font-size: 2.6rem; letter-spacing: -.02em; margin-bottom: 16px; }
.esc-course-hero p.esc-lead { font-size: 1.02rem; opacity: .88; line-height: 1.65; max-width: 620px; margin-bottom: 28px; }
.esc-course-facts { display: flex; flex-wrap: wrap; gap: 28px; }
.esc-course-facts div { display: flex; flex-direction: column; gap: 4px; }
.esc-course-facts span.n { font-size: 1.05rem; font-weight: 800; }
.esc-course-facts span.l { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; opacity: .65; }

.esc-course-body { display: grid; grid-template-columns: 1fr 340px; gap: 44px; padding: 60px 0 100px; align-items: start; }
@media (max-width: 940px) { .esc-course-body { grid-template-columns: 1fr; } }
.esc-course-side {
    position: sticky; top: 116px; background: #fff; border: 1px solid var(--color-border); border-radius: 16px;
    padding: 28px; box-shadow: var(--shadow-2);
}
.esc-course-side__price { font-size: 1.5rem; font-weight: 900; color: var(--color-primary); margin-bottom: 4px; }
.esc-course-side__price small { font-size: 12px; font-weight: 600; color: var(--color-secondary); display:block; margin-top: 2px; }
.esc-course-side ul { list-style: none; margin: 22px 0; padding: 18px 0 0; border-top: 1px solid var(--color-border); }
.esc-course-side li { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--color-text-muted); margin-bottom: 12px; }
.esc-course-side li i { color: var(--color-accent); width: 16px; text-align: center; }

.esc-teachers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
@media (max-width: 560px) { .esc-teachers { grid-template-columns: 1fr; } }

/* ── 11. Reproductor de clase (sincrónico / asincrónico) ─────────────── */
.esc-player {
    position: relative; border-radius: 16px; overflow: hidden; background: #0e1729;
    aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center;
    color: #fff; text-align: center;
}
.esc-player__bg { position: absolute; inset: 0; background-size: cover; background-position: center; opacity: .38; }
.esc-player__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,23,41,.4), rgba(14,23,41,.86)); }
.esc-player__body { position: relative; z-index: 2; padding: 24px; max-width: 420px; }
.esc-player__play {
    width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 20px;
    background: rgba(255,255,255,.14); border: 1.5px solid rgba(255,255,255,.5);
    display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; transition: all .25s;
}
.esc-player__play:hover { background: var(--color-accent-light); border-color: var(--color-accent-light); color: var(--color-primary); transform: scale(1.08); }
.esc-player__body h3 { font-size: 1.15rem; margin-bottom: 8px; }
.esc-player__body p { font-size: .85rem; opacity: .78; margin: 0; }
.esc-player__badge {
    position: absolute; z-index: 2; top: 18px; left: 18px;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
    padding: 6px 12px; border-radius: 20px; background: rgba(0,0,0,.4);
}
.esc-player__badge--live { background: #c0392b; }
.esc-player__badge--live i { color: #fff; animation: escPulse 1.4s infinite; }
@keyframes escPulse { 0%,100%{opacity:1;} 50%{opacity:.3;} }

.esc-lesson-tabs { display: flex; gap: 10px; margin: 18px 0 26px; flex-wrap: wrap; }
.esc-lesson-tab {
    flex: 1; min-width: 180px; display: flex; align-items: center; gap: 12px; padding: 14px 18px;
    border: 1.5px solid var(--au-bd, #dce8f3); border-radius: 12px; background: #fff; cursor: pointer;
    text-align: left; font-family: inherit; transition: all .2s;
}
.esc-lesson-tab i { font-size: 18px; color: var(--color-accent); }
.esc-lesson-tab strong { display: block; font-size: 13px; color: var(--color-primary); }
.esc-lesson-tab span { display: block; font-size: 11px; color: var(--color-secondary); margin-top: 2px; }
.esc-lesson-tab.active { border-color: var(--color-primary); background: var(--color-bg-alt); }
.esc-lesson-tab.active i { color: var(--color-primary); }

/* ── 12. Campus (panel del alumno) ───────────────────────────────────── */
/* Pedido 2026-08-28: bienvenida como hero de ancho completo (full-bleed),
   mismo patrón que .esc-course-hero — la sección ocupa todo el ancho y el
   contenido (.esc-welcome, que ahora también lleva .container) se centra
   adentro con el ancho de lectura habitual del sitio. */
.esc-welcome-hero {
    background: linear-gradient(120deg, var(--color-primary), #1a3a5e); color: #fff;
    padding: 40px 0 44px;
    box-shadow: 0 18px 44px rgba(35,45,79,.2);
}
.esc-welcome {
    display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap;
}
.esc-welcome h1 { font-size: 1.7rem; margin: 0 0 8px; letter-spacing: -.01em; }
.esc-welcome p { margin: 0; opacity: .82; font-size: .92rem; }
.esc-welcome__stats { display: flex; gap: 30px; }
.esc-welcome__stats div { text-align: center; }
.esc-welcome__stats .n { display: block; font-size: 1.7rem; font-weight: 900; color: var(--color-accent-light); line-height: 1; }
.esc-welcome__stats .l { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; opacity: .72; margin-top: 6px; }

.esc-continue {
    display: flex; gap: 22px; background: #fff; border: 1px solid var(--color-border); border-radius: 16px;
    padding: 22px; margin-bottom: 34px; box-shadow: var(--shadow-1); align-items: center;
}
.esc-continue__thumb { flex: 0 0 200px; height: 112px; border-radius: 10px; overflow: hidden; position: relative; }
.esc-continue__thumb img { width: 100%; height: 100%; object-fit: cover; }
.esc-continue__thumb::after { content:''; position:absolute; inset:0; background:rgba(35,45,79,.28); }
.esc-continue__body { flex: 1; min-width: 0; }
.esc-continue__eyebrow { font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--color-accent); }
.esc-continue__body h3 { font-size: 1.1rem; margin: 6px 0 10px; }
@media (max-width: 700px) { .esc-continue { flex-direction: column; align-items: stretch; } .esc-continue__thumb { flex: 0 0 auto; width: 100%; } }

.esc-live-list { display: flex; flex-direction: column; gap: 12px; }
.esc-live-item {
    display: flex; align-items: center; gap: 16px; padding: 16px 18px;
    border: 1px solid var(--color-border); border-radius: 12px; background: #fff; transition: all .2s;
}
.esc-live-item:hover { border-color: var(--color-accent); box-shadow: var(--shadow-1); }
.esc-live-date { flex: 0 0 58px; text-align: center; background: var(--color-bg-alt); border-radius: 10px; padding: 8px 4px; }
.esc-live-date .d { display: block; font-size: 1.2rem; font-weight: 900; color: var(--color-primary); line-height: 1; }
.esc-live-date .m { display: block; font-size: 9.5px; text-transform: uppercase; color: var(--color-secondary); font-weight: 700; }
.esc-live-item__body { flex: 1; min-width: 0; }
.esc-live-item__body strong { display: block; font-size: 13.5px; color: var(--color-primary); }
.esc-live-item__body span { font-size: 12px; color: var(--color-secondary); }

.esc-dash-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 32px; align-items: start; }
@media (max-width: 940px) { .esc-dash-grid { grid-template-columns: 1fr; } }

/* ── 13. Certificado descargable ─────────────────────────────────────── */
.esc-cert-actions { display: flex; gap: 12px; justify-content: center; margin: 30px 0 46px; flex-wrap: wrap; }
.esc-cert-doc {
    max-width: 900px; margin: 0 auto; background: #fdfcf8;
    border: 10px solid var(--color-primary); border-radius: 4px; padding: 64px 70px;
    position: relative; box-shadow: var(--shadow-4);
}
.esc-cert-doc::before {
    content: ''; position: absolute; inset: 14px; border: 1.5px solid var(--color-gold); pointer-events: none;
}
/* Tres columnas iguales a los lados (P-145): con flex y space-between el sello
   quedaba corrido hacia el lado del bloque más angosto (logo o N.º). */
.esc-cert-doc__top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-bottom: 40px; }
.esc-cert-doc__top .esc-cert-doc__id { justify-self: end; }
.esc-cert-doc__top img { height: 84px; }
.esc-cert-doc__id { font-size: 10.5px; color: var(--color-secondary); text-align: right; letter-spacing: .05em; }
/* Lugar y fecha de emisión y nota al pie (P-148, datos del certificado del INAP). */
.esc-cert-doc__lugar { display: block; margin-top: 6px; font-size: 12px; letter-spacing: 0; color: var(--color-primary); }
.esc-cert-doc__desc--constancia { max-width: 760px; }
.esc-cert-doc__nota { margin: 28px 0 0; text-align: center; font-size: 10.5px; color: var(--color-secondary); }
.esc-cert-doc__eyebrow { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--color-accent); margin-bottom: 18px; }
.esc-cert-doc h1 { text-align: center; font-size: 1.1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--color-secondary); font-weight: 700; margin-bottom: 6px; }
.esc-cert-doc__name { text-align: center; font-size: 2.6rem; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; color: var(--color-primary); margin: 14px 0 22px; letter-spacing: -.01em; }
.esc-cert-doc__desc { text-align: center; font-size: 1rem; color: var(--color-text-muted); max-width: 560px; margin: 0 auto 40px; line-height: 1.7; }
.esc-cert-doc__desc strong { color: var(--color-primary); }
.esc-cert-doc__foot { display: flex; justify-content: center; align-items: flex-end; margin-top: 56px; gap: 12%; }
/* Cada firma ocupa lo mismo que cuando compartía el pie con el sello: la línea
   no cruza el diploma de punta a punta con una sola firmante (P-143/P-145). */
.esc-cert-doc__sig { text-align: center; flex: 0 1 40%; }
/* Firmas al doble (pedido de Xavier, 2026-09-29: «quedaron muy chicas»). El
   prototipo las limitaba a 46px de alto pensando en una firma apaisada; las
   que se subieron son casi cuadradas y a esa altura medían 38px de ancho.
   Ahora el tope es una caja: 96px de alto y el ancho de la columna. Si cambia,
   cambia también en el PDF (class-pdf.php, «.firma-img»). */
.esc-cert-doc__sig .firma-img { display: block; width: auto; height: 96px; max-width: 100%; margin: 0 auto 2px; object-fit: contain; }
.esc-cert-doc__sig .line { border-top: 1.5px solid var(--color-primary); padding-top: 8px; font-size: 12px; font-weight: 700; color: var(--color-primary); }
.esc-cert-doc__sig .role { font-size: 10.5px; color: var(--color-secondary); text-transform: uppercase; letter-spacing: .04em; }
.esc-cert-doc__seal { width: 84px; height: 84px; border-radius: 50%; border: 3px solid var(--color-gold); display: flex; align-items: center; justify-content: center; color: var(--color-gold); font-size: 30px; flex: 0 0 84px; }
@media (max-width: 700px) {
    .esc-cert-doc { padding: 40px 26px; }
    .esc-cert-doc__name { font-size: 1.7rem; }
    .esc-cert-doc__foot { flex-direction: column; align-items: center; gap: 24px; }
    .esc-cert-doc__sig { flex: none; width: 100%; }
    /* En el teléfono: logo arriba, sello y N.º debajo, cada uno centrado. */
    .esc-cert-doc__top { grid-template-columns: 1fr; justify-items: center; }
    .esc-cert-doc__top .esc-cert-doc__id { justify-self: center; text-align: center; }
}
/* Impresión / descarga en PDF: horizontal y ocupando toda la hoja, sin
   header/footer/menú ni el padding de página pensado para pantalla. */
@media print {
    @page { size: A4 landscape; margin: 10mm; }
    .esc-header, .esc-footer-compact, .esc-cert-actions, .pf-back, .mobile-menu, .mobile-menu-overlay, .mobile-menu-toggle { display: none !important; }
    html, body { background: #fff; margin: 0; }
    body.page-esc-certificado main .container { padding: 0 !important; max-width: 100% !important; }
    .esc-cert-doc {
        box-shadow: none; margin: 0 auto; max-width: 100%; width: 100%;
        min-height: calc(100vh - 20mm);
        display: flex; flex-direction: column; justify-content: center;
        page-break-inside: avoid; break-inside: avoid;
    }
    .esc-cert-doc__desc { max-width: 720px; }
    .esc-cert-actions ~ p { display: none; } /* nota de verificación: solo en pantalla */
}

/* ── 14. Empty / lock states reutilizables ───────────────────────────── */
.esc-empty { text-align: center; padding: 60px 20px; color: var(--color-secondary); }
.esc-empty i { font-size: 40px; margin-bottom: 16px; color: var(--gray-300); display: block; }
.esc-empty p { margin: 0; font-size: 14px; }

/* ── 15b. Pestañas primarias del curso (curso-cursando.html) ─────────── */
/* Reemplaza al sidebar au-side: van arriba de todo, antes del reproductor,
   para que el alumno elija qué hacer sin tener que scrollear primero. */
.esc-course-tabs {
    display: flex; gap: 8px; flex-wrap: wrap;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 28px; padding-bottom: 0;
}
.esc-course-tab {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 20px; border: none; background: none; cursor: pointer; font-family: inherit;
    font-size: 13.5px; font-weight: 700; color: var(--color-secondary);
    border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all .2s;
}
.esc-course-tab i { font-size: 14px; color: var(--color-secondary); transition: color .2s; }
.esc-course-tab:hover { color: var(--color-primary); }
.esc-course-tab.active { color: var(--color-primary); border-bottom-color: var(--color-accent); }
.esc-course-tab.active i { color: var(--color-accent); }
@media (max-width: 700px) {
    .esc-course-tabs { overflow-x: auto; flex-wrap: nowrap; }
    .esc-course-tab { white-space: nowrap; }
}

/* ── 15. Constructor de exámenes — tipos de pregunta (bld-type*) ─────── */
/* Reutiliza .bld-card/.bld-field/.bld-q/.bld-opt/.bld-hint ya presentes
   (portados de crear-examen.html / crear-curso.html). Esto agrega el
   selector visual de "variables de examen" y los editores por tipo. */
.bld-typegrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 6px; }
@media (max-width: 860px) { .bld-typegrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .bld-typegrid { grid-template-columns: 1fr; } }
.bld-type {
    display: flex; align-items: flex-start; gap: 12px; text-align: left;
    background: #fff; border: 1.5px solid var(--au-bd, #dce8f3); border-radius: 12px; padding: 14px 16px;
    cursor: pointer; font-family: inherit; transition: all .18s;
}
.bld-type:hover { border-color: var(--au-accent); box-shadow: 0 6px 18px rgba(35,45,79,.08); transform: translateY(-2px); }
.bld-type__ico {
    width: 38px; height: 38px; border-radius: 10px; flex: 0 0 38px;
    background: var(--au-soft); color: var(--au-main); display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.bld-type__t { min-width: 0; }
.bld-type__t strong { display: block; font-size: 13.5px; color: var(--au-main); font-weight: 800; }
.bld-type__t span { display: block; font-size: 11.5px; color: #8a93a3; margin-top: 2px; line-height: 1.4; }

/* Cabecera de pregunta: ícono de tipo + etiqueta + autocorrección */
.bld-q__type { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 800; color: var(--au-accent); text-transform: uppercase; letter-spacing: .03em; }
.bld-q__type i { font-size: 12px; }

/* Verdadero / Falso — dos filas fijas */
.bld-vf { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.bld-vf label { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--au-bd, #dce8f3); border-radius: 9px; font-size: 14px; color: #333; cursor: pointer; }
.bld-vf input[type=radio] { accent-color: #1d8a4e; width: 18px; height: 18px; }

/* Relacionar columnas */
.bld-pairs { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.bld-pair { display: flex; align-items: center; gap: 10px; }
.bld-pair input[type=text] { flex: 1; }
.bld-pair i.bld-pair__link { color: var(--au-accent); font-size: 13px; flex: 0 0 auto; }
.bld-pair .bld-opt__del { flex: 0 0 auto; }

/* Ordenar elementos */
.bld-order { display: flex; flex-direction: column; gap: 9px; margin-bottom: 4px; }
.bld-order-item { display: flex; align-items: center; gap: 10px; }
.bld-order-item .bld-order__num { width: 24px; height: 24px; border-radius: 7px; background: var(--au-soft); color: var(--au-main); font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; flex: 0 0 24px; }
.bld-order-item input[type=text] { flex: 1; }

/* Alternar aprobación del módulo: con examen / sin examen (pills tipo esc-filter) */
.bld-approve { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* Nota destacada dentro del constructor (autocorrección vs manual) */
.bld-flag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 4px 10px; border-radius: 20px; margin-left: 10px; }
.bld-flag--auto { background: var(--success-soft); color: #166b3c; }
.bld-flag--manual { background: var(--warning-soft); color: #7a5e16; }


/* ── Modal de perfil de docente (curso.html) ─────────────────────────── */
.au-person[data-teacher] { cursor: pointer; transition: transform .2s, box-shadow .2s; }
.au-person[data-teacher]:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); }
.esc-teacher-modal {
    display: none; position: fixed; inset: 0; z-index: 1000;
    align-items: center; justify-content: center; padding: 24px;
    background: rgba(20,27,48,.6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.esc-teacher-modal.active { display: flex; }
.esc-teacher-modal__card {
    position: relative; width: 100%; max-width: 560px; max-height: 86vh; overflow-y: auto;
    background: var(--color-bg); border-radius: 18px; box-shadow: var(--shadow-4);
    padding: 40px;
}
.esc-teacher-modal__close {
    position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
    border: none; background: var(--color-border); color: var(--color-primary); font-size: 15px;
    cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s;
}
.esc-teacher-modal__close:hover { background: var(--color-accent); color: #fff; }
.esc-teacher-modal__head { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.esc-teacher-modal__ava {
    width: 84px; height: 84px; border-radius: 50%; flex: 0 0 auto;
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: #fff; font-size: 1.6rem; font-weight: 900;
    display: flex; align-items: center; justify-content: center;
    background-size: cover; background-position: center;
}
.esc-teacher-modal__head h3 { margin: 0 0 4px; font-size: 1.3rem; color: var(--color-primary); }
.esc-teacher-modal__head .role { display: block; font-size: .8rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--color-accent); }
.esc-teacher-modal__bio { font-size: .92rem; line-height: 1.7; color: var(--color-text-muted); margin: 0 0 20px; }
.esc-teacher-modal__cv { border-top: 1px solid var(--color-border); padding-top: 18px; }
.esc-teacher-modal__cv h4 { margin: 0 0 12px; font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; color: var(--color-secondary); }
.esc-teacher-modal__cv ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.esc-teacher-modal__cv li { display: flex; gap: 10px; font-size: .87rem; color: var(--color-text-muted); line-height: 1.5; }
.esc-teacher-modal__cv li i { color: var(--color-accent); margin-top: 3px; flex: 0 0 auto; }
@media (max-width: 560px) {
    .esc-teacher-modal__card { padding: 28px 22px; }
    .esc-teacher-modal__head { flex-direction: column; text-align: center; }
}

/* ── ID de alumno con énfasis (perfil.html) ──────────────────────────── */
.pf-student-id {
    display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
    margin-top: 16px; padding: 12px 18px;
    background: rgba(157,182,214,.16); border: 1px solid rgba(157,182,214,.45); border-radius: 12px;
    width: fit-content; max-width: 100%;
}
.pf-student-id > i.fa-id-badge { font-size: 1.3rem; color: var(--color-accent-light); }
.pf-student-id__body { display: flex; flex-direction: column; line-height: 1.25; }
.pf-student-id__label { font-size: .68rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; opacity: .8; }
.pf-student-id__code { font-family: 'Courier New', monospace; font-size: 1.15rem; font-weight: 900; letter-spacing: .04em; color: var(--color-accent-light); }
.pf-student-id__copy {
    width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,.3);
    background: transparent; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .2s;
}
.pf-student-id__copy:hover { background: rgba(255,255,255,.15); }
.pf-student-id__hint { flex-basis: 100%; font-size: .78rem; opacity: .8; }
@media (max-width: 600px) { .pf-student-id { width: 100%; } }

/* Fix global: varios componentes nuevos usan display:flex/grid, que anula el
   [hidden] del navegador. Esto restablece la semántica de [hidden]. */
[hidden] { display: none !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   MEJORAS EDUCACIÓN CIPDH — pedidos del equipo 2026-09-03 (puntos 1-35).
   Bloque único y comentado: todo lo nuevo vive acá para no tocar los bloques
   por-página de arriba. Reusa los tokens --au-* / --color-* ya definidos.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Punto 33: el contenido ocupa el 80% del dispositivo; los formularios que
      estaban clavados en 720px se ensanchan. Las franjas full-width mantienen
      su fondo, pero su contenido interno va al 80%. ───────────────────────── */
/* Contenedor ancho para los paneles de administración nuevos. `!important`
   porque algunos bloques por-página convierten `.container` en flex y le
   ponen un max-width chico. */
.cipdh-wide { display: block !important; width: 100% !important; max-width: 1360px !important; margin-left: auto !important; margin-right: auto !important; }
.page-build .container,
.page-esc-editprofile .container { max-width: none; }
.page-build .bld-card,
.page-esc-editprofile .bld-card,
.bld-card.is-wide { max-width: min(1100px, 80vw); margin-left: auto; margin-right: auto; }
.bld-grid.is-3col { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .bld-grid.is-3col { grid-template-columns: 1fr; } }

/* ── Punto 11: editor de texto enriquecido mínimo para la descripción de cada
      módulo (y para textos largos de otros formularios). ──────────────────── */
.rt-field { margin-bottom: 16px; }
.rt-toolbar { display: flex; flex-wrap: wrap; gap: 4px; border: 1px solid var(--au-bd); border-bottom: none; border-radius: 10px 10px 0 0; padding: 6px; background: var(--au-soft); }
.rt-toolbar button { border: none; background: transparent; width: 32px; height: 30px; border-radius: 7px; cursor: pointer; font-size: 13px; color: var(--au-main); font-family: inherit; }
.rt-toolbar button:hover { background: #fff; }
.rt-toolbar .rt-sep { width: 1px; background: var(--au-bd); margin: 3px 2px; }
.rt-editor { border: 1px solid var(--au-bd); border-radius: 0 0 10px 10px; padding: 12px 14px; min-height: 120px; font-size: 14px; line-height: 1.6; background: #fff; }
.rt-editor:focus { outline: 2px solid var(--au-accent); outline-offset: -1px; }
.rt-editor p { margin: 0 0 8px; } .rt-editor ul, .rt-editor ol { margin: 0 0 8px 20px; }
.rt-editor a { color: var(--au-accent); }

/* ── Punto 12: selector de tipo de embed por clase (YouTube/Vimeo/Zoom/iframe/
      Instagram/X/otro) + campo URL. ──────────────────────────────────────── */
.emb-row { display: grid; grid-template-columns: 190px 1fr; gap: 8px; }
.emb-row select, .emb-row input { width: 100%; }
.emb-hint { font-size: 11.5px; color: var(--color-secondary); margin: 4px 0 0; }
.emb-frame { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #0d1526; }
.emb-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.emb-card { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border-radius: 12px; background: var(--au-soft); border: 1px solid var(--au-bd); }
.emb-card i { font-size: 1.6rem; color: var(--au-accent); }
@media (max-width: 680px) { .emb-row { grid-template-columns: 1fr; } }

/* ── Punto 1 + 11: extras del módulo en el builder (bibliografía por módulo,
      links externos, imagen). ────────────────────────────────────────────── */
.mod-extra { margin-top: 22px; }
.mod-extra > h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--au-main); display: flex; align-items: center; gap: 8px; }
.mod-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.mod-list__row { display: grid; grid-template-columns: 150px 1fr auto; gap: 8px; align-items: center; }
.mod-list__row select, .mod-list__row input { width: 100%; }
.mod-list__row .x { border: none; background: #f3e0df; color: #b3261e; border-radius: 8px; width: 34px; height: 34px; cursor: pointer; }
@media (max-width: 680px) { .mod-list__row { grid-template-columns: 1fr; } }

/* ── Punto 24: nota de optimización de imagen ──────────────────────────────── */
.optim-note { font-size: 12px; color: #1d8a4e; margin: 8px 0 0; min-height: 16px; }

/* ── Punto 25: medidor de completitud del CV ─────────────────────────────── */
.cv-meter { display: flex; align-items: center; gap: 12px; margin: 4px 0 18px; }
.cv-meter__bar { flex: 1; height: 10px; border-radius: 6px; background: var(--au-soft); overflow: hidden; }
.cv-meter__fill { height: 100%; background: linear-gradient(90deg, var(--au-accent), var(--color-accent-light)); transition: width .4s ease; }
.cv-meter__pct { font-weight: 900; font-size: 14px; color: var(--au-main); min-width: 44px; text-align: right; }

/* ── Puntos 4/17: chips de rol (aditivos) ────────────────────────────────── */
.role-badges { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.role-badge { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; background: var(--au-soft); color: var(--au-main); border: 1px solid var(--au-bd); }
.role-badge--alumno { background: #eef6ec; color: #2f7d32; border-color: #cfe6cd; }
.role-badge--docente { background: #eef1fb; color: #3949ab; border-color: #d6ddf6; }
.role-badge--secretaria { background: #fdf3e6; color: #b26a00; border-color: #f2ddbd; }
.role-badge--admin { background: #fdeaea; color: #b3261e; border-color: #f3cccc; }

/* ── Punto 23: tabla densa de datos (gestión de alumnos a escala) ─────────── */
.dt-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.dt-search { flex: 1; min-width: 220px; position: relative; }
.dt-search input { width: 100%; padding: 10px 14px 10px 38px; border: 1.5px solid var(--au-bd); border-radius: 10px; font-family: inherit; font-size: 14px; }
.dt-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--color-secondary); }
.fct-bar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fct-chip { border: 1.5px solid var(--au-bd); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 700; color: var(--au-main); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.fct-chip.active { background: var(--au-main); color: #fff; border-color: var(--au-main); }
.fct-chip .n { opacity: .6; font-weight: 800; }
.dt-wrap { overflow-x: auto; border: 1px solid var(--au-bd); border-radius: 14px; }
.dt-table { width: 100%; border-collapse: collapse; font-size: 13px; white-space: nowrap; }
.dt-table th, .dt-table td { padding: 11px 14px; text-align: left; border-bottom: 1px solid var(--au-bd); }
.dt-table thead th { background: var(--au-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--au-main); cursor: pointer; position: sticky; top: 0; }
.dt-table thead th[aria-sort="ascending"]::after { content: " ▲"; font-size: 9px; }
.dt-table thead th[aria-sort="descending"]::after { content: " ▼"; font-size: 9px; }
.dt-table tbody tr:hover { background: var(--au-soft); }
.dt-table tbody tr.is-selected { background: #eef6ff; }
.dt-progress { display: inline-block; width: 90px; height: 8px; border-radius: 5px; background: var(--au-soft); overflow: hidden; vertical-align: middle; }
.dt-progress > span { display: block; height: 100%; background: var(--au-accent); }
.dt-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; margin-top: 12px; font-size: 13px; }
.dt-pager { display: inline-flex; gap: 4px; }
.dt-pager button { border: 1.5px solid var(--au-bd); background: #fff; border-radius: 8px; min-width: 34px; height: 34px; cursor: pointer; font-weight: 700; }
.dt-pager button.active { background: var(--au-main); color: #fff; border-color: var(--au-main); }
.dt-pager button:disabled { opacity: .4; cursor: default; }
.dt-bulk { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 14px; background: #eef6ff; border: 1px solid #cfe2f7; border-radius: 10px; margin-bottom: 12px; }

/* Drawer lateral de detalle (alumno, hilo, ticket) */
.drawer-overlay { position: fixed; inset: 0; background: rgba(13,21,38,.45); z-index: 1200; display: none; }
.drawer-overlay.active { display: block; }
.drawer { position: fixed; top: 0; right: 0; height: 100%; width: min(560px, 92vw); background: #fff; z-index: 1201; transform: translateX(100%); transition: transform .28s ease; overflow-y: auto; box-shadow: -12px 0 40px rgba(13,21,38,.2); }
.drawer.active { transform: translateX(0); }
.drawer__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 22px 24px; border-bottom: 1px solid var(--au-bd); position: sticky; top: 0; background: #fff; }
.drawer__head h3 { margin: 0; font-size: 1.15rem; }
.drawer__body { padding: 22px 24px 60px; }
.drawer__close { border: none; background: var(--au-soft); width: 36px; height: 36px; border-radius: 9px; cursor: pointer; font-size: 15px; color: var(--au-main); }
.drawer__sec { margin-bottom: 22px; }
.drawer__sec > h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-secondary); }

/* ── Puntos 5/7/8/18/19: mensajería + etiquetas ─────────────────────────── */
.msg-layout { display: grid; grid-template-columns: 300px 1fr; gap: 20px; align-items: start; }
@media (max-width: 900px) { .msg-layout { grid-template-columns: 1fr; } }
.msg-list { border: 1px solid var(--au-bd); border-radius: 14px; overflow: hidden; }
.msg-item { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--au-bd); background: #fff; padding: 14px 16px; cursor: pointer; font-family: inherit; }
.msg-item:hover { background: var(--au-soft); }
.msg-item.active { background: #eef6ff; }
.msg-item.unread strong::before { content: "● "; color: var(--au-accent); }
.msg-item strong { display: block; font-size: 13.5px; color: var(--au-main); }
.msg-item span { display: block; font-size: 12px; color: var(--color-secondary); margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-thread { border: 1px solid var(--au-bd); border-radius: 14px; padding: 20px 22px; }
.msg-bubble { border: 1px solid var(--au-bd); border-radius: 12px; padding: 12px 16px; margin-bottom: 12px; font-size: 13.5px; line-height: 1.6; }
.msg-bubble.out { background: var(--au-soft); }
.msg-bubble .meta { font-size: 11.5px; color: var(--color-secondary); margin-bottom: 4px; }
.tag-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 800; padding: 3px 10px; border-radius: 999px; color: #fff; }
.tag-pick { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.tag-pick button { border: 1.5px dashed var(--au-bd); background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 11px; font-weight: 700; cursor: pointer; color: var(--au-main); }
.seg-preview { background: var(--au-soft); border: 1px solid var(--au-bd); border-radius: 10px; padding: 12px 16px; font-size: 13px; margin: 12px 0; }
.seg-preview strong { font-size: 22px; color: var(--au-main); }

/* ── Punto 9: tickets ───────────────────────────────────────────────────── */
.tk-code { font-family: 'Courier New', monospace; font-weight: 900; letter-spacing: .04em; color: var(--au-accent); }
.tk-state { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 999px; }
.tk-state--abierto { background: #fdf3e6; color: #b26a00; }
.tk-state--curso { background: #eef1fb; color: #3949ab; }
.tk-state--resuelto { background: #eef6ec; color: #2f7d32; }

/* ── Puntos 6/7: estadísticas por curso ─────────────────────────────────── */
.stx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin-bottom: 22px; }
.stx-kpi { background: #fff; border: 1px solid var(--au-bd); border-radius: 14px; padding: 16px 18px; }
.stx-kpi .n { display: block; font-size: 1.7rem; line-height: 1.15; font-weight: 900; color: var(--au-main); }
.stx-kpi .l { display: block; font-size: 12px; color: var(--color-secondary); margin-top: 2px; }
.stx-modbar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.stx-modbar__label { width: 220px; font-size: 13px; font-weight: 700; color: var(--au-main); flex: 0 0 auto; }
.stx-modbar__track { flex: 1; height: 22px; border-radius: 6px; background: var(--au-soft); overflow: hidden; }
.stx-modbar__fill { height: 100%; background: var(--au-accent); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; padding: 0 8px; }
.stx-matrix { overflow-x: auto; }
.stx-matrix table { border-collapse: collapse; font-size: 12px; }
.stx-matrix th, .stx-matrix td { border: 1px solid var(--au-bd); padding: 6px 8px; text-align: center; }
.stx-matrix td.hit { background: #e4f5ea; } .stx-matrix td.miss { background: #fdecec; }
.stx-matrix th.row { text-align: left; white-space: nowrap; }
@media (max-width: 680px) { .stx-modbar { flex-wrap: wrap; } .stx-modbar__label { width: 100%; } }

/* ── Puntos 13/14: panel técnico del administrador ──────────────────────── */
.sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.sys-card { background: #fff; border: 1px solid var(--au-bd); border-radius: 14px; padding: 18px 20px; }
.sys-card h3 { margin: 0 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-secondary); }
.sys-card .v { font-size: 1.5rem; font-weight: 900; color: var(--au-main); }
.sys-card .ok { color: #2f7d32; } .sys-card .warn { color: #b26a00; } .sys-card .bad { color: #b3261e; }
.sys-gauge { height: 12px; border-radius: 6px; background: var(--au-soft); overflow: hidden; margin-top: 8px; }
.sys-gauge > span { display: block; height: 100%; background: var(--au-accent); }
.sys-log { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.sys-log th, .sys-log td { padding: 9px 12px; border-bottom: 1px solid var(--au-bd); text-align: left; vertical-align: top; }
.sys-log th { background: var(--au-soft); font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.sys-alert { display: flex; gap: 12px; align-items: flex-start; background: #fdf6e3; border: 1px solid #f0e2b8; color: #8a6d1a; border-radius: 10px; padding: 14px 18px; font-size: 13px; margin-bottom: 18px; }

/* ── Punto 27: páginas legales ──────────────────────────────────────────── */
.legal-doc { max-width: min(860px, 80vw); margin: 0 auto; }
.legal-doc h2 { font-size: 1.15rem; margin: 30px 0 10px; color: var(--au-main); }
.legal-doc p, .legal-doc li { font-size: 14px; line-height: 1.75; color: var(--color-text-muted); }
.legal-doc ul { margin: 0 0 14px 20px; }
.legal-draft { display: flex; gap: 10px; align-items: flex-start; background: #fdf6e3; border: 1px solid #f0e2b8; color: #8a6d1a; border-radius: 10px; padding: 14px 18px; font-size: 13px; margin-bottom: 24px; }

/* ── Puntos 30/32: certificado — logo más grande + impresión en 1 hoja ──── */
.esc-cert-doc__top img { max-width: 260px !important; height: auto !important; }
.esc-cert-doc__seal i { font-size: 2.6rem !important; }
@media print {
    @page { size: A4 landscape; margin: 10mm; }
    header, footer, .esc-cert-actions, .pf-back, .site-header, #colophon,
    .cipdh-gate, #cipdhCookieBar, .cipdh-tour { display: none !important; }
    body { background: #fff !important; }
    main .container { padding: 0 !important; max-width: none !important; width: 100% !important; }
    .esc-cert-doc {
        box-shadow: none !important; border: 1px solid #d9d9d9 !important;
        width: 271mm; max-width: 271mm; margin: 0 auto !important;
        transform-origin: top center;
    }
    .esc-cert-doc__top img { max-width: 300px !important; }
}
/* El certificado se imprime siempre apaisado (2026-09-25): ya no hay variante vertical. */

/* ── Sistema interno de tickets (ampliación pedido 2026-09-03): panel único
      lista + hilo + ficha de persona. ──────────────────────────────────── */
/* Reorganización (pedido 2026-09-03): ficha de persona ARRIBA (franja
   horizontal) y abajo cola + hilo, dándole al hilo el mayor espacio. */
.sop-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 16px; align-items: start; width: 100%; }
@media (max-width: 860px) { .sop-layout { grid-template-columns: 1fr; } }
.sop-col { background: #fff; border: 1px solid var(--au-bd); border-radius: 14px; min-width: 0; }

/* Franja superior con los datos de la persona */
.sop-personabar { background: #fff; border: 1px solid var(--au-bd); border-radius: 14px; padding: 16px 20px; margin-bottom: 16px; display: grid; grid-template-columns: 1fr auto; gap: 14px 24px; align-items: center; }
.sop-personabar .idblock strong { font-size: 1.1rem; color: var(--au-main); display: block; }
.sop-personabar .idblock .mat { font-family: 'Courier New', monospace; font-weight: 800; color: var(--au-accent); font-size: 13px; }
.sop-personabar .idblock .mail { font-size: 12.5px; color: var(--color-secondary); }
.sop-personabar .cursos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sop-personabar .cursos span { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; background: var(--au-soft); border: 1px solid var(--au-bd); color: var(--au-main); }
.sop-personabar .side { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: flex-end; }
.sop-personabar .kpi { text-align: center; padding: 4px 12px; }
.sop-personabar .kpi b { display: block; font-size: 1.3rem; color: var(--au-main); }
.sop-personabar .kpi small { font-size: 10.5px; color: var(--color-secondary); text-transform: uppercase; letter-spacing: .03em; }
@media (max-width: 700px) { .sop-personabar { grid-template-columns: 1fr; } .sop-personabar .side { justify-content: flex-start; } }
.sop-col__head { padding: 14px 16px; border-bottom: 1px solid var(--au-bd); font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; color: var(--au-main); display: flex; align-items: center; gap: 8px; }
.sop-filters { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--au-bd); }
.sop-filters input, .sop-filters select { width: 100%; padding: 8px 10px; border: 1.5px solid var(--au-bd); border-radius: 8px; font-family: inherit; font-size: 13px; }
.sop-list { max-height: 620px; overflow-y: auto; }
.sop-item { display: block; width: 100%; text-align: left; border: none; border-bottom: 1px solid var(--au-bd); background: #fff; padding: 12px 14px; cursor: pointer; font-family: inherit; }
.sop-item:hover { background: var(--au-soft); }
.sop-item.active { background: #eef6ff; box-shadow: inset 3px 0 0 var(--au-accent); }
.sop-item .top { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.sop-item .cod { font-family: 'Courier New', monospace; font-size: 11px; color: var(--au-accent); font-weight: 800; }
.sop-item .asu { display: block; font-size: 13px; font-weight: 700; color: var(--au-main); margin: 3px 0; }
.sop-item .meta { display: block; font-size: 11px; color: var(--color-secondary); }
.sop-item.is-open .cod::before { content: "● "; color: #b26a00; }
.sop-thread__head { padding: 16px 18px; border-bottom: 1px solid var(--au-bd); }
.sop-thread__head h3 { margin: 0 0 4px; font-size: 1.05rem; }
.sop-controls { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 18px; border-bottom: 1px solid var(--au-bd); background: var(--au-soft); }
.sop-controls select, .sop-controls button { padding: 7px 12px; border: 1.5px solid var(--au-bd); border-radius: 8px; font-family: inherit; font-size: 12.5px; font-weight: 700; background: #fff; color: var(--au-main); cursor: pointer; }
.sop-controls .close-btn { background: #2f7d32; color: #fff; border-color: #2f7d32; }
.sop-controls .reopen-btn { background: #b26a00; color: #fff; border-color: #b26a00; }
.sop-resolved-banner { display: flex; gap: 10px; align-items: center; margin: 14px 18px 0; padding: 12px 16px; background: #eef6ec; border: 1px solid #cfe6cd; border-radius: 10px; font-size: 13px; color: #2f7d32; }
.sop-msgs { padding: 18px; display: flex; flex-direction: column; gap: 12px; max-height: 460px; overflow-y: auto; }
.sop-msg { max-width: 78%; border-radius: 12px; padding: 10px 14px; font-size: 13.5px; line-height: 1.6; }
.sop-msg .who { font-size: 11px; font-weight: 800; margin-bottom: 3px; }
.sop-msg .when { font-size: 10.5px; opacity: .7; margin-top: 4px; }
.sop-msg--alumno { align-self: flex-start; background: #f1f4f8; border: 1px solid var(--au-bd); }
.sop-msg--staff { align-self: flex-end; background: #e9f1fb; border: 1px solid #cfe0f5; }
.sop-msg--sistema { align-self: center; background: transparent; color: var(--color-secondary); font-size: 11.5px; font-style: italic; max-width: 100%; text-align: center; padding: 4px; }
.sop-reply { padding: 14px 18px; border-top: 1px solid var(--au-bd); }
.sop-reply textarea { width: 100%; min-height: 74px; padding: 10px 12px; border: 1.5px solid var(--au-bd); border-radius: 10px; font-family: inherit; font-size: 13.5px; resize: vertical; }
.sop-persona { padding: 16px; }
.sop-persona h4 { margin: 0 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--color-secondary); }
.sop-persona .pdata { font-size: 13px; line-height: 1.9; color: var(--color-text-muted); margin: 0 0 14px; }
.sop-persona .pchip { display: block; font-size: 12px; padding: 6px 10px; border-radius: 8px; background: var(--au-soft); margin-bottom: 6px; }
.sop-persona .mini-tk { display: block; font-size: 12px; padding: 6px 0; border-bottom: 1px solid var(--au-bd); cursor: pointer; }
.sop-persona .mini-tk:hover { color: var(--au-accent); }

/* ── Dashboards de administración con pestañas (pedido 2026-09-03 ampliación):
      gestión de alumnos y mensajería como paneles completos. ─────────────── */
.dash-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 18px; border-bottom: 2px solid var(--au-bd); }
.dash-tab { padding: 10px 20px; border: none; background: transparent; font-family: inherit; font-weight: 800; font-size: 13.5px; color: var(--color-secondary); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.dash-tab:hover { color: var(--au-main); }
.dash-tab.active { color: var(--au-main); border-bottom-color: var(--au-accent); }
.dash-pane { display: none; }
.dash-pane.active { display: block; }

/* Tabla densa optimizada para desktop: encabezado y 1ª columna fijos,
   celdas largas truncadas con tooltip. */
.dt-table.dt-dense { font-size: 11.5px; }
.dt-table.dt-dense th, .dt-table.dt-dense td { padding: 6px 8px; }
.dt-table.dt-dense .dt-progress { width: 46px !important; }
.dt-table.dt-dense .trunc { max-width: 170px; }
.dt-table.dt-dense thead th { position: sticky; top: 0; z-index: 3; }
.dt-table.dt-dense tbody td:nth-child(2), .dt-table.dt-dense thead th:nth-child(2) { position: sticky; left: 0; z-index: 2; background: #fff; box-shadow: 1px 0 0 var(--au-bd); }
.dt-table.dt-dense thead th:nth-child(2) { z-index: 4; background: var(--au-soft); }
.dt-table.dt-dense tbody tr:hover td:nth-child(2) { background: var(--au-soft); }
.dt-table.dt-dense .trunc { max-width: 220px; overflow: hidden; text-overflow: ellipsis; display: inline-block; vertical-align: middle; }
.dt-table.dt-dense .trunc--sm { max-width: 130px; }
.dt-wrap.dt-wrap--tall { max-height: 68vh; overflow: auto; }
.al-colbar { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 11.5px; padding: 10px 12px; background: var(--au-soft); border: 1px solid var(--au-bd); border-radius: 10px; margin-bottom: 10px; }
.al-colbar label { display: inline-flex; align-items: center; gap: 4px; }
.al-colbar summary { cursor: pointer; font-weight: 800; color: var(--au-main); }

/* Fix: los bloques por-página solo estilaban input[type=text|number|date|url].
   Normalizamos TODOS los tipos usados en los formularios nuevos (email, tel,
   password, search, color…) para que ocupen el ancho del campo. */
.bld-field input, .rt-field input, .sop-reply input,
.dt-toolbar input, .mg-filterbar input {
    width: 100%; box-sizing: border-box;
}
.bld-field input[type=checkbox], .bld-field input[type=radio],
.bld-field input[type=color], .bld-field input[type=file] { width: auto; }
.bld-field input[type=email], .bld-field input[type=tel], .bld-field input[type=password],
.bld-field input[type=search] {
    padding: 11px 14px; border: 1.5px solid var(--au-bd); border-radius: 10px;
    font-family: inherit; font-size: 14px; background: #fff;
}
.bld-field input[type=email]:focus, .bld-field input[type=tel]:focus,
.bld-field input[type=password]:focus, .bld-field input[type=search]:focus {
    outline: none; border-color: var(--au-accent); box-shadow: 0 0 0 3px rgba(62,90,126,.12);
}


/* ============================================================================
   .esc-datos — lista rótulo/valor. Movida desde paneles.css el 2026-09-17:
   la usan siete plantillas y también el examen del alumno, que carga solo
   examen.css y la mostraba sin estilo.
   ============================================================================ */
/* Lista de datos (rótulo arriba, valor abajo). La usan siete plantillas.
 *
 * Era una grilla `repeat(auto-fit, minmax(200px,1fr))` con dt y dd como ítems
 * sueltos. Eso empareja bien SOLO cuando caben exactamente dos columnas: con
 * tres, el rótulo y su valor caen en celdas que no se corresponden y la lista
 * se lee en zigzag. Se veía al ensanchar el perfil dentro del campus.
 *
 * Multi-columna en vez de grilla: respeta el orden del documento, así que el
 * valor siempre va pegado a su rótulo, y `break-after: avoid` impide que un
 * par se parta entre dos columnas. `columns: 240px` es un ANCHO, no una
 * cantidad: el navegador mete las columnas que entren y baja a una sola en un
 * teléfono, sin consulta de medios. */

.esc-datos { margin: 0; columns: 240px; column-gap: 36px; }

.esc-datos dt {
    margin-top: 16px;
    font-size: .75rem;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--color-secondary);
    break-after: avoid;
    break-inside: avoid;
}

.esc-datos dt:first-child { margin-top: 0; }
.esc-datos dd { margin: 4px 0 0; font-weight: 600; break-inside: avoid; }
/* Un correo largo no tiene espacios donde cortar y se salía del panel lateral de la ficha (2026-10-16). */
.esc-datos dd { overflow-wrap: anywhere; }