:root {
    --bs-blue: #0d6efd;
    --bs-indigo: #6610f2;
    --bs-purple: #6f42c1;
    --bs-pink: #d63384;
    --bs-red: #dc3545;
    --bs-yellow: #ffc107;
    --bs-green: #198754;
    --bs-cyan: #0dcaf0;
    --bs-white: #fff;
    --bs-gray: #6c757d;
    --bs-gray-dark: #343a40;
    --bs-primary: #2d5ca9;
    --bs-secondary: #039dd9;
    --bs-tertiary: #544c9f;
    --bs-quartiary: #6cbd45;
    --bs-teal: #20c997;
    --bs-orange: #d68051;
    --bs-light: #eaf8ff;
    --bs-darkblue: #1b2c56;
    --bs-yellow: #f9ed35;
    --bs-yellow-2: #fcd323;
    --bs-success: #198754;
    --bs-info: #0dcaf0;
    --bs-warning: #ffc107;
    --bs-danger: #dc3545;
    --bs-dark: #212529;
    --bs-font-sans-serif: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
}

::placeholder {
    opacity: 0.5 !important;
}



.bg-primary {
    background-color: var(--bs-secondary) !important;
}

.text-primary {
    color: var(--bs-primary) !important;
}

.text-secondary {
    color: var(--bs-secondary) !important;
}

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

    .btn-primary:hover {
        border-color: var(--bs-quartiary);
        background-color: var(--bs-quartiary);
    }

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

    .btn-outline-primary:hover {
        color: var(--bs-white);
        border-color: var(--bs-secondary);
        background-color: var(--bs-secondary);
    }

.btn-link {
    color: var(--bs-secondary);
}

    .btn-link:hover {
        color: var(--bs-quartiary);
    }

.btn:active {
    border-color: transparent !important;
    background-color: transparent !important;
    color: black !important;
}

.btn-menu {
    font-size: 12px;
    border: none;
    background-color: var(--bs-darkblue);
    color: white;
    padding: 6px 20px;
    min-width: 120px;
    max-height: 32px;
    border-radius: 16px;
}

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

    .btn-menu.active {
        color: white;
        background-color: var(--bs-primary);
        font-weight: 600;
    }

    .btn-menu:active {
        color: white !important;
        background-color: var(--bs-primary) !important;
        font-weight: 600;
    }

.btn-searchbar {
    border-color: var(--bs-darkblue);
    background-color: var(--bs-darkblue);
    color: white;
}

    .btn-searchbar:hover {
        border-color: var(--bs-primary);
        background-color: var(--bs-primary);
        color: white;
    }

.btn.btn-searchbar {
    min-width: fit-content;
}

.bg-body-tertiary {
    background-color: var(--bs-darkblue) !important;
}

.bg-light {
    background-color: var(--bs-light) !important;
}

.bg-presencial {
    background-color: var(--bs-teal);
}

.bg-virtual {
    background-color: var(--bs-orange);
}

.bg-cupos {
    background-color: var(--bs-quartiary);
}

.card-body {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.form-control {
    border: 2px solid rgba(0, 0, 0, 0.175);
    margin-left: 0px !important;
    border-radius: 25px;
}

.form-select {
    border: 2px solid rgba(0, 0, 0, 0.175);
}

.form-control:focus {
    box-shadow: none;
    border-color: var(--bs-primary);
}

.search {
    background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%231b2c56' viewBox='0 0 612.01 612.01'%3E%3Cpath d='M606.209,578.714L448.198,423.228C489.576,378.272,515,318.817,515,253.393C514.98,113.439,399.704,0,257.493,0 C115.282,0,0.006,113.439,0.006,253.393s115.276,253.393,257.487,253.393c61.445,0,117.801-21.253,162.068-56.586l158.011,155.486 c6.628,6.512,15.339,9.799,24.05,9.799c8.712,0,17.422-3.287,24.05-9.799C619.465,613.558,619.465,591.738,606.209,578.714z M257.493,459.786c-113.25,0-205.393-92.143-205.393-205.393S144.243,49,257.493,49s205.393,92.143,205.393,205.393 S370.743,459.786,257.493,459.786z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 16px;
    padding-left: 36px;
    padding-right: 38px; /* espacio para el ícono de ayuda ⓘ a la derecha */
}

.searchbar {
    display: flex;
    padding: 8px 20px;
    gap: 8px;
}

.searchbar-buttons {
    display: flex;
    gap: 8px;
    width: 100%;
}

/* Campo de búsqueda: contenedor del input. Hereda el ancho que antes tenía el
   input (min 300 / max 400) para no alterar el layout de escritorio.
   position:relative para anclar el ícono de ayuda ⓘ dentro del input. */
.search-field {
    display: flex;
    flex-direction: column;
    min-width: 300px;
    max-width: 400px;
    position: relative;
}

/* Ícono de ayuda ⓘ del buscador: discreto, dentro del input a la derecha.
   Muestra un tooltip (Bootstrap) con las opciones de búsqueda y ejemplos. */
.search-help-icon {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    color: #9aa7bd;
    font-size: 15px;
    line-height: 1;
    cursor: help;
    z-index: 3;
    transition: color 0.15s ease;
}

    .search-help-icon:hover,
    .search-help-icon:focus {
        color: var(--bs-primary);
        outline: none;
    }

/* Carrusel horizontal de filtros (categorías, sedes, horarios, tipos, modalidades).
   NO reintroducir `min-width: max-content` aquí: los .item usan `width: 70%` en el
   <img>, y un porcentaje sobre un reemplazado no se puede resolver al calcular el
   tamaño max-content. Firefox cae entonces al ancho natural del PNG (400px) en vez
   del flex-basis de 220px, así que la caja se estiraba al doble de lo que ocupan los
   ítems (12012px vs 6356px con 27 categorías) y `justify-content: center` repartía la
   sobra en huecos de ~2800px a cada lado. Chromium sí acota al flex-basis, por eso
   solo se veía en Firefox. Sin max-content la caja mide lo que el contenedor y los
   ítems desbordan de forma normal, que es lo que hace el scroll.
   `safe center` centra cuando los ítems caben y alinea al inicio cuando desbordan,
   para que el primero nunca quede fuera del área alcanzable por el scroll. */
.h-scroll {
    display: flex;
    gap: 16px;
    padding: 8px 20px;
    overflow-x: auto;
    overflow-y: hidden;
    justify-content: safe center;
}

    .h-scroll.unactive {
        display: none
    }

/* Barra de desplazamiento horizontal VISIBLE en escritorio para el carrusel de
   filtros. En escritorio no hay swipe táctil y la barra venía oculta
   (scrollbar-width: none), por lo que las categorías desbordadas quedaban
   inaccesibles. Se estiliza tanto el contenedor con scroll como cada .h-scroll:
   solo el que realmente desborda muestra la barra. En mobile/tablet (<=1000px)
   NO aplica: ahí ya hay swipe + la flecha-hint animada. */
@media (min-width: 1001px) {
    .h-scroll-area > div,
    .h-scroll {
        scrollbar-width: thin !important;                          /* estándar/Firefox */
        scrollbar-color: var(--bs-secondary) #dcecf7 !important;
        padding-bottom: 8px;
    }

        /* WebKit antiguo (Chrome/Edge/Safari sin soporte de scrollbar-width) */
        .h-scroll-area > div::-webkit-scrollbar,
        .h-scroll::-webkit-scrollbar {
            height: 8px;
        }

        .h-scroll-area > div::-webkit-scrollbar-track,
        .h-scroll::-webkit-scrollbar-track {
            background: #dcecf7;
            border-radius: 8px;
        }

        .h-scroll-area > div::-webkit-scrollbar-thumb,
        .h-scroll::-webkit-scrollbar-thumb {
            background: var(--bs-secondary);
            border-radius: 8px;
        }
}

/* Filtros aplicados: una etiqueta por filtro, con X para quitarlo por separado.
   Resuelve que los filtros de pestañas ocultas recortaran el listado sin dar
   ninguna señal de que seguían activos. */
.filtros-aplicados {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.filtros-aplicados-titulo {
    font-weight: 600;
    color: var(--bs-darkblue);
}

.filtro-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--bs-secondary);
    background-color: #eaf8ff;
    color: var(--bs-darkblue);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 13px;
    line-height: 1.4;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .filtro-chip:hover,
    .filtro-chip:focus {
        background-color: var(--bs-secondary);
        border-color: var(--bs-secondary);
        color: #fff;
    }

    .filtro-chip i {
        font-size: 12px;
        opacity: 0.7;
    }

/* Botón "Quitar filtros": salida evidente para dejar el listado completo de una
   sola vez. El JS lo muestra solo cuando hay algún filtro activo (contenedor
   #filtros-activos). */
.btn-ver-todos {
    background-color: var(--bs-primary);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 22px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: filter 0.15s ease, background-color 0.15s ease;
}

    .btn-ver-todos:hover,
    .btn-ver-todos:focus {
        background-color: var(--bs-quartiary);
        color: #fff;
    }

    .btn-ver-todos i {
        margin-right: 6px;
    }

/* El ancho de la opción manda sobre el tamaño del ícono, porque la imagen se
   dimensiona en porcentaje del recuadro. A 220 px solo entraban unas seis
   opciones en una pantalla de escritorio y la barra de filtros se comía el
   alto disponible; a 170 px entran nueve. */
.item {
    flex: 0 1 170px;
    min-width: 170px;
    align-self: top;
    text-align: center;
    cursor: pointer
}

.link-dark {
    cursor: pointer;
}

.img-div {
    display: flex;
    justify-self: center;
    justify-content: center;
    border: 2px solid rgba(0, 0, 0, 0.175);
    border-radius: 12px;
    padding: 4px 12px;
    background-color: white;
    overflow: visible;
    transition: transform 0.2s ease-in-out;
}

    .img-div img {
        transition: transform 0.2s ease-in-out;
    }

.item:hover .img-div {
    transform: scale(1.05);
}

    .item:hover .img-div img {
        transform: translateY(-10px) scale(0.9);
    }

.item.active .img-div {
    border: 2px solid var(--bs-primary);
}

.item.active p {
    font-weight: 600;
}

.item.active {
    border-bottom: 3px solid var(--bs-primary);
}

/* Sube el porcentaje para compensar el recuadro más angosto: la imagen queda
   en unos 120 px en vez de los ~135 de antes y el recuadro pasa de 220 a 170. */
.item img {
    width: 85%;
    height: auto;
    display: block;
}

.badge.badge-etiqueta {
    padding: 0px 0.65em;
}

.badge {
    height: 22px;
    line-height: 14px;
    max-width: fit-content;
}

/* Etiquetas de tipo y modalidad. Antes el texto estaba oculto y aparecía al
   pasar el cursor sobre el ícono, de modo que en celular y tableta no había
   forma de saber qué decía la etiqueta. Ahora el ícono y el texto se ven
   siempre, uno al lado del otro. */
.badge-etiqueta {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    vertical-align: middle;
}

    .badge-etiqueta .icon,
    .badge-etiqueta .icon-text {
        display: flex;
        align-items: center;
    }

    .badge-etiqueta svg {
        fill: var(--bs-white);
        width: 16px;
        height: 16px;
    }

    .badge-etiqueta .icon img {
        width: 16px;
        height: 16px;
        filter: brightness(0) invert(1); /* pinta de blanco los SVG negros */
    }

/* ============ Card de curso: columna izquierda (Iniciamos + calendario isométrico) ============ */
.curso-calendar-col {
    padding: 12px 4px;
    gap: 4px;
    min-width: 0;
}

.curso-iniciamos {
    width: 100%;
    max-width: 140px;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* Calendario = 2 imágenes PNG apiladas (igual que la maqueta): el día arriba
   y el mes (base con letras) abajo. PNG porque el SVG se recortaba al escalar
   en algunos navegadores (bug de rasterizado GPU). PNG es bitmap → sin bug. */
.curso-calendar {
    position: relative;
    width: 100%;
    max-width: 140px;
    margin: 0 auto;
    flex-shrink: 0;
    line-height: 0;
}

    .curso-calendar img {
        display: block;
        width: 100%;
        height: auto;
    }

    .curso-calendar img.cal-mes {
        margin-top: -0.2px;   /* une el mes con el día sin gap (como la maqueta) */
    }

/* Datos de la tarjeta: se diferencian sobre todo por el ÍCONO (forma) y una
   ligera jerarquía tipográfica, NO por varios colores (para no saturar el
   diseño). Los íconos usan un único color de acento de marca. */
/* Opción C: íconos circulares con jerarquía visual.
   Cada dato (fecha/lugar/horario) es un <span> flex con ícono pastel + valor.
   Antes usaba <br> entre líneas; ahora los span son display:flex → cada uno es
   su propio bloque, con espaciado controlado por margin-bottom. */
.curso-datos {
    color: var(--bs-darkblue);
    line-height: 1.5;
    margin-bottom: 0;
}

    .curso-datos > span {
        display: flex;
        align-items: center;
        gap: 10px;
        margin-bottom: 6px;
    }

        .curso-datos > span:last-child {
            margin-bottom: 0;
        }

    /* Íconos con fondo circular pastel: complementan el estilo isométrico del
       calendario 3D y de los badges sin duplicar su peso visual. */
    .curso-datos i {
        color: var(--bs-primary);
        background: var(--bs-primary-bg-subtle);
        width: 28px;
        height: 28px;
        border-radius: 50%;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 12px;
        flex-shrink: 0;
        margin-right: 0;
    }

    /* Jerarquía: fecha = dato principal, lugar = normal, horario = terciario. */
    .curso-datos .dato-fecha {
        font-weight: 600;
        color: var(--bs-darkblue);
    }

    .curso-datos .dato-lugar {
        font-weight: 500;
    }

    /* Horario en tono más suave y tamaño menor: no compite con fecha/lugar. */
    .curso-datos .dato-horario {
        color: #5a6b8c;
        font-size: 13px;
    }

.filter-menu {
    gap: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
    padding: 8px 20px;
    padding-right: 0px;
}

.cldDistante {
    fill: #00e200;
}

.cldInminente {
    fill: #fdfd00;
}

.cldCercano {
    fill: #fd0000;
}

.collapse .nav-item {
    padding: 0px 12px;
}

.collapse .nav-link {
    color: white;
    padding: 0px !important;
}

    .collapse .nav-link.active {
        color: var(--bs-yellow) !important;
    }

/* Ancho en vw (no en %) porque el <a> ahora envuelve solo el logo y ya no
   ocupa el ancho del viewport; 15vw ≡ el 15% anterior (el <a> medía todo el ancho). */
.intecap-img {
    width: 15vw;
}

svg {
    width: 100%;
    margin-top: -0.28px;
}

.filter-searchbar {
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: center;
    scrollbar-width: none;
    min-width: max-content;
}

.modal-body {
    overflow: hidden !important;
}

/* Contenedor sticky (el padre debe ser relative) */
.container-fluid {
    position: relative;
}

.sede-submenu {
    position: relative;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--bs-light);
    border-radius: 12px;
    margin-left: auto;
    margin-right: auto;
    transition: max-height .2s ease-in-out;
    max-height: 0;
    /* Necesario para que max-height:0 realmente OCULTE el contenido (colapso).
       El scroll horizontal de los centros vive en .submenu-content (interno),
       así que ocultar aquí no lo rompe. Permite ocultar el submenú al cambiar
       de pestaña sin borrar su contenido (se conserva la selección de centro). */
    overflow: hidden;
}

    .sede-submenu.open {
        max-height: 300px;
        display: block;
    }

.submenu-content {
    display: flex;
    padding: 16px 20px;
    gap: 16px;
    overflow-x: auto;
}

.hidden {
    display: none;
}

.selectItem {
    display: flex;
    flex-direction: column;
    justify-content: center;
    border: 2px solid rgba(0, 0, 0, 0.175);
    border-radius: 12px;
    padding: 8px 16px;
    background-color: white;
    min-width: 400px;
    cursor: pointer;
}

    .selectItem.active {
        border-color: var(--bs-primary);
    }

.item-title {
    font-size: 14px;
    font-weight: 600;
}

.item-desc {
    font-size: 12px;
}

@media (max-width: 1000px) {
    .item {
        min-width: 110px;
        padding: 0 4px;
        box-sizing: border-box;
        overflow: hidden;
    }

        .item p {
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
            text-align: center;
            max-width: 100%;
        }

        .item:hover .img-div img {
            transform: translateY(-5px) scale(0.9);
        }

    .searchbar {
        flex-direction: column;
    }

    .filter-searchbar {
        display: block;
    }

    .searchbar input {
        max-width: 100% !important;
    }

    /* En columna, el campo de búsqueda ocupa todo el ancho disponible */
    .search-field {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
    }

    .searchbar .btn {
        margin-left: 0px !important;
        width: 100%;
    }

    /* Flecha indicadora de scroll horizontal (mobile + tablet) */
    .h-scroll:not(.unactive) {
        padding-right: 52px !important;
    }

        .h-scroll:not(.unactive)::after {
            content: '›';
            flex-shrink: 0;
            position: sticky;
            right: 4px;
            width: 32px;
            height: 32px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: auto 0 auto 8px;
            background: var(--bs-primary);
            color: white;
            border-radius: 50%;
            font-size: 22px;
            font-weight: 700;
            line-height: 1;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
            animation: arrowNudge 1.5s ease-in-out infinite;
            pointer-events: none;
            z-index: 5;
            align-self: center;
        }

    @keyframes arrowNudge {
        0%, 100% {
            transform: translateX(0);
            opacity: 0.85;
        }

        50% {
            transform: translateX(5px);
            opacity: 1;
        }
    }
}

@media(max-width: 980px) {
    .intecap-img {
        width: 37vw !important;
    }
}

@media(max-width: 767px) {
    .intecap-img {
        width: 48vw !important;
    }

    /* Menú de filtros compacto en mobile */
    .btn-menu {
        min-width: auto !important;
        padding: 4px 10px !important;
        font-size: 11px !important;
    }

    .filter-menu {
        padding: 8px 12px !important;
        gap: 6px !important;
        justify-content: center !important;
    }

    /* Buscador más compacto */
    .searchbar {
        padding: 8px 12px !important;
        gap: 6px !important;
    }

        .searchbar input {
            min-width: 100% !important;
            font-size: 13px !important;
            padding: 6px 12px 6px 32px !important;
        }

    .btn-searchbar {
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .searchbar-buttons {
        gap: 6px !important;
    }

    /* Items del carrusel más pequeños en mobile */
    .item {
        min-width: 100px !important;
        flex: 0 0 100px !important;
    }

        .item p {
            font-size: 12px !important;
            line-height: 1.2;
        }

    .img-div {
        padding: 2px 8px !important;
    }

    .h-scroll {
        gap: 10px !important;
        padding: 8px 12px !important;
        justify-content: flex-start !important;
    }

    /* Submenú de sedes en mobile */
    .selectItem {
        min-width: 85% !important;
    }

    .submenu-content {
        padding: 12px !important;
        gap: 10px !important;
    }

    /* Botón flotante más pequeño en mobile */
    .floating-button {
        width: 50px !important;
        height: 50px !important;
        bottom: 12px !important;
        right: 12px !important;
    }

    .boton-volver-arriba {
        width: 50px !important;
        height: 50px !important;
        bottom: 12px !important;
        right: 72px !important;
    }

    /* Contador de resultados */
    #resultado-count {
        font-size: 14px !important;
    }
}

/* Tablet pequeña */
@media (min-width: 768px) and (max-width: 991px) {
    .btn-menu {
        min-width: 90px;
        padding: 5px 14px;
        font-size: 12px;
    }

    .item {
        min-width: 130px;
    }
}

/* Botón flotante */
.high-contrast {
    filter: invert(1) hue-rotate(180deg)
}

.grayscale {
    filter: grayscale(100%);
}

.floating-button {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background-color: var(--bs-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9000;
}

    .floating-button:hover {
        background-color: var(--bs-secondary);
    }



/* Volver arriba. El listado puede traer cientos de tarjetas y para cambiar un
   filtro había que devolverse arrastrando todo el camino. Se coloca junto al
   botón de accesibilidad y solo se muestra cuando ya se bajó lo suficiente
   para que haga falta. */
.boton-volver-arriba {
    position: fixed;
    bottom: 20px;
    right: 90px;
    width: 60px;
    height: 60px;
    background-color: var(--bs-darkblue);
    color: var(--bs-white);
    border: none;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9000;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

    .boton-volver-arriba.visible {
        display: flex;
    }

    .boton-volver-arriba i {
        font-size: 24px;
    }

/* Menú flotante */
.floating-menu {
    position: fixed;
    bottom: 90px;
    right: 20px;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    display: none;
    z-index: 9000;
}

    .floating-menu ul {
        list-style: none;
        margin: 0;
        padding: 10px;
    }

        .floating-menu ul li {
            margin: 5px 0;
        }

            .floating-menu ul li button {
                background: none;
                border: none;
                color: var(--sidebar);
                cursor: pointer;
                font-size: 14px;
                text-align: left;
                width: 100%;
            }

                .floating-menu ul li button:hover {
                    text-decoration: underline;
                    color: var(--focus);
                }


/* ============================================================
   Ficha de detalle del curso (/detalle/{id}/{año})
   Vista del iframe del modal "Inscripción" en /cursos/v4
   ============================================================ */
.ficha-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.ficha-card {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    border-bottom: 3px solid rgba(0, 0, 0, 0.15);
    overflow: visible;
}

.ficha-label {
    font-weight: 600;
    color: var(--bs-darkblue);
    margin: 0 0 8px 0;
    font-size: 14px;
}

.ficha-titulo {
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--bs-darkblue);
    font-size: 18px;
    line-height: 1.3;
}

/* ---- Mini-card (cuerpo + icono + datos) ---- */
.ficha-mini-icon {
    padding: 12px;
}

    .ficha-mini-icon img {
        max-width: 100%;
        height: auto;
        max-height: 140px;
    }

.ficha-mini-body {
    padding: 16px 16px 12px 0;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* .ficha-fechas ahora solo aporta el margen específico dentro de la mini-card;
   la tipografía + íconos circulares vienen de .curso-datos (Opción C compartida). */
.ficha-fechas {
    margin: 4px 0 8px 0;
}

/* ---- Caja de Inversión ---- */
.ficha-inversion {
    background: var(--bs-light);
}

.ficha-inversion-body {
    padding: 16px 24px;
}

.ficha-precio {
    font-size: 36px;
    font-weight: 700;
    text-align: center;
    margin: 8px 0 16px 0;
    color: var(--bs-darkblue);
    line-height: 1;
}

.btn-inscripcion {
    width: 100%;
    font-size: 16px;
    font-weight: 600;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 12px;
}

.ficha-nota {
    font-size: 11px;
    color: #c0392b;
    margin: 4px 0;
    line-height: 1.4;
}

/* ---- Compartir (social icons) ---- */
.ficha-share {
    padding: 16px 24px;
}

    .ficha-share > span {
        font-size: 14px;
        margin: 0;
    }

.ficha-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--bs-secondary);
    color: white;
    text-decoration: none;
    font-size: 16px;
    transition: background 0.2s;
}

    .ficha-social:hover {
        color: white;
        background: var(--bs-primary);
    }

    .ficha-social svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
        display: block;
    }

/* ---- Formas de pago ---- */
.ficha-pago-card {
    background: var(--bs-light);   /* mismo azul claro que Inversión */
}

.ficha-pago-body {
    padding: 16px 24px;
}

.ficha-pago-item {
    font-size: 12px;
    margin: 8px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    line-height: 1.3;
}

.ficha-pago-icon-img {
    width: 26px;
    height: 26px;
    border-radius: 4px;
    flex-shrink: 0;
    display: block;
    object-fit: cover;
}

/* ---- Tabs (Requisitos / Descripción / Objetivos / Dirigido a) ---- */
.ficha-tabs-body {
    padding: 16px 24px;
}

.ficha-tabs.nav-tabs {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

    .ficha-tabs .nav-link {
        background: var(--bs-quartiary);
        color: white;
        border: 1px solid transparent;
        border-radius: 6px 6px 0 0;
        font-weight: 500;
        font-size: 14px;
        padding: 6px 16px;
    }

        .ficha-tabs .nav-link:hover {
            background: var(--bs-primary);
            color: white;
        }

        .ficha-tabs .nav-link.active {
            background: white;
            color: var(--bs-darkblue);
            border: 1px solid rgba(0, 0, 0, 0.1);
            border-bottom-color: white;
            font-weight: 600;
        }

.ficha-tab-content {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

    /* white-space:pre-wrap va en CADA tab-pane (no en el container) — si lo
       ponemos en .ficha-tab-content, los saltos de línea entre los <div class="tab-pane">
       del HTML se vuelven visibles y empujan el contenido de cada tab hacia abajo. */
    .ficha-tab-content .tab-pane {
        white-space: pre-wrap;
    }

    .ficha-tab-content .tab-pane:empty::before {
        content: "Sin información disponible";
        color: #999;
        font-style: italic;
    }

/* ---- Print: oculta lo no esencial ---- */
@media print {
    .btn, .ficha-share, .ficha-social, .ficha-pago-body, .nav-tabs {
        display: none !important;
    }
}

/* ============================================================
   Modal "Más Información" del card V4 (contenedor del iframe)
   ============================================================ */
/* Desktop (>=992px): la modal crece con el contenido de la ficha (via postMessage)
   hasta un máximo de 90vh. Antes usaba height:85vh fijo → dejaba espacio blanco
   cuando la ficha era corta (pocos requisitos, sin convocatoria, etc). */
.modal-curso-content {
    max-height: 90vh;
}

/* Tablet / móvil (<992px = modal-fullscreen-md-down activo): fullscreen */
@media (max-width: 991.98px) {
    .modal-curso-content {
        height: 100%;
        max-height: 100%;
    }
}

#cursoModal .modal-body {
    overflow: hidden;
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
}

    #cursoModal .modal-body iframe {
        width: 100%;
        /* height la setea el JS dinámicamente según la altura reportada por la ficha
           via postMessage. En mobile (fullscreen) forzamos 100% con la media query. */
        border: 0;
        display: block;
    }

@media (max-width: 991.98px) {
    #cursoModal .modal-body iframe {
        height: 100% !important;
    }
}

/* ============================================================
   Ficha de detalle: ajustes responsive para móvil/tablet
   ============================================================ */
/* Tablet (<992px) – cuando los col-lg-8/col-lg-4 ya se apilaron */
@media (max-width: 991.98px) {
    .ficha-container {
        padding: 14px;
    }
}

/* Móvil pequeño (<576px) */
@media (max-width: 575.98px) {
    .ficha-container {
        padding: 10px;
    }
    .ficha-titulo {
        font-size: 16px;
    }
    .ficha-precio {
        font-size: 28px;
    }
    .ficha-mini-icon {
        padding: 8px;
    }
        .ficha-mini-icon img {
            max-height: 110px;
        }
    .ficha-mini-body {
        padding: 12px;
    }
    .ficha-inversion-body,
    .ficha-pago-body,
    .ficha-tabs-body,
    .ficha-share {
        padding: 12px 16px;
    }
    .ficha-share {
        flex-wrap: wrap;
    }
    .ficha-social {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    .ficha-tabs .nav-link {
        font-size: 12px;
        padding: 4px 10px;
    }
    .ficha-tab-content {
        font-size: 13px;
    }
}