/* ===== navbar (extraído de navbar.php, DEV-438) =====
   Rediseño 2026-09 estilo Netflix (medido en netflix.com/browse):
   - navbar de 80px, una sola fila en TODOS los anchos; gutter lateral ≈4vw
     (60px @1720, 48 @1280, 36 @900, 24 @≤600)
   - logo a la izquierda; pills de sección pegadas al logo (padding 10/16,
     radio 24, 16px). En 768–1199 se colapsan en Inicio + "Más ▾"; en móvil en
     un solo "Explorar ▾".
   - derecha: lupa (el input solo aparece al activarla) + avatar con menú
   - el mismo gutter lo usa el hero del home (.home-nf) para alinear todo */
:root {
        --app-navbar-item-size: 40px; /* lupa y avatar: mismo círculo de 40px (Netflix) */
        --app-navbar-item-icon-size: 1.3333em;
        --app-navbar-img-max-size: 120px;
        --app-navbar-item-font-size: 1rem;
        --app-navbar-height: 54px;
        --fby-nav-height: 80px;
        --fby-gutter: clamp(24px, 4vw, 60px);
    }

    @media only screen and (max-width: 500px) {
        :root {
            --app-navbar-item-icon-size: 1.2em !important;
            --app-navbar-img-max-size: 96px !important;
            --app-navbar-item-font-size: 0.9rem !important;
            --app-navbar-height: 40px;
        }
    }

    /* Transparente arriba del todo (no tapa la sombra del hero ni el ambient
       light); navbar.js agrega .scrolled con cualquier scroll y ahí toma fondo
       sólido, como Netflix que pasa de degradado a fondo sólido. */
    #fby-navbar-wrapper {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        background-color: rgba(var(--bs-body-bg-rgb), 0);
        box-shadow: none;
        border-bottom: 1px solid transparent;
        transition: background-color .25s ease-in-out, box-shadow .25s ease-in-out, border-color .25s ease-in-out;
        z-index: 1030;
    }
    /* Abrir el buscador NO pinta el fondo: arriba del todo sigue transparente
       (el input y el panel ya traen su propio fondo blanco). */
    #fby-navbar-wrapper.scrolled {
        background-color: rgba(var(--bs-body-bg-rgb), 1);
    }
    #fby-navbar-wrapper.scrolled {
        border-bottom-color: rgba(var(--bs-body-color-rgb), .08);
        box-shadow: 0 1px 12px rgba(0, 0, 0, .06);
    }

    .navbar-main-row {
        position: relative;
        display: flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 0 12px;
        padding: 0 var(--fby-gutter);
        min-height: var(--fby-nav-height);
    }

    .navbar-brand-zone {
        display: flex;
        align-items: center;
        flex-shrink: 0;
    }

    .navbar-logo-link {
        display: inline-flex;
        align-items: center;
    }

    .navbar-spring {
        flex: 1 1 0;
        min-width: 0;
    }

    .navbar-actions-zone {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }
    /* El wrapper .dropdown es block y añade descender bajo el botón: que no
       desplace el avatar respecto a la lupa */
    .navbar-actions-zone .dropdown {
        display: flex;
        align-items: center;
    }

    .app-navbar-img {
        max-width: var(--app-navbar-img-max-size);
    }

    .app-navbar-item {
        height: var(--app-navbar-item-size);
        min-width: var(--app-navbar-item-size);
        font-size: var(--app-navbar-item-font-size);
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .app-navbar-item i {
        font-size: var(--app-navbar-item-icon-size);
    }

    #fby-navbar-wrapper .nav-link {
        color: rgba(0, 0, 0, 0.45);
        transition: color .15s ease-in-out;
    }

    #fby-navbar-wrapper .nav-link:hover {
        color: rgba(0, 0, 0, 1);
    }

    #fby-navbar-wrapper .nav-link.active {
        color: rgba(0, 0, 0, 1);
        border-bottom: 2px solid rgba(0, 0, 0, 1);
        padding-bottom: 2px;
    }

    /* ---- Avatar = único menú (perfil + "más") ---- */
    .navbar-avatar-toggle {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        height: var(--app-navbar-item-size);
        line-height: 1;
        padding: 0;
        border: 0;
        background: none;
        color: var(--bs-body-color);
        cursor: pointer;
    }
    .navbar-avatar-toggle .avatar {
        width: var(--app-navbar-item-size);
        height: var(--app-navbar-item-size);
        background-color: var(--bs-secondary-bg);
    }
    .navbar-avatar-toggle > i {
        font-size: 18px;
        line-height: 1;
        opacity: .7;
        transition: transform .2s ease;
    }
    .navbar-avatar-toggle[aria-expanded="true"] > i {
        transform: rotate(180deg);
    }
    /* Menú del avatar: una sola lista (el nombre arriba es el primer
       elemento y lleva al perfil), sin iconos, filas con hover redondeado. */
    .navbar-avatar-menu {
        min-width: 240px;
        padding: 8px;
        border-radius: 16px;
        margin-top: 10px !important;
    }
    .navbar-avatar-menu-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 8px 12px;
        margin-bottom: 4px;
        border-radius: 10px;
        color: var(--bs-body-color);
        text-decoration: none;
    }
    .navbar-avatar-menu-head:hover {
        background-color: rgba(var(--bs-body-color-rgb), .06);
        color: var(--bs-body-color);
    }
    .navbar-avatar-menu-head .avatar {
        width: 36px;
        height: 36px;
        flex-shrink: 0;
        background-color: var(--bs-secondary-bg);
    }
    .navbar-avatar-menu-name {
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .navbar-avatar-menu .mas_lista {
        width: auto;
        padding: 0;
    }
    .navbar-avatar-menu .mas_lista .list-unstyled {
        margin: 4px 0 !important;
    }
    .navbar-avatar-menu .mas_lista a {
        padding: 9px 12px !important;
        border-radius: 10px;
        font-size: 15px;
        text-decoration: none;
    }
    .navbar-avatar-menu .mas_lista a:hover {
        background-color: rgba(var(--bs-body-color-rgb), .06);
    }
    .navbar-avatar-menu .mas_lista .px-3 {
        padding: 0 12px !important;
    }
    .navbar-avatar-menu .mas_lista hr {
        margin: 4px 0 !important;
        opacity: 1;
        border-color: rgba(var(--bs-body-color-rgb), .12);
    }

    /* ---- Buscador: solo la lupa; el input se despliega al activarlo ----
       Netflix: círculo de 40px; al hacer clic el input crece hacia la
       izquierda. La lupa va ENCIMA del input (pointer-events none) para que el
       clic caiga en el input y el focus abra el panel (navbar.js). */
    .navbar-search-wrapper {
        position: relative;
        flex: 0 0 var(--app-navbar-item-size);
        min-width: 0;
        transition: flex-basis .25s ease;
    }
    .navbar-search-icon {
        position: absolute;
        top: 50%;
        left: 11px;
        transform: translateY(-50%);
        font-size: 18px;
        line-height: 1;
        color: var(--bs-body-color);
        pointer-events: none;
    }
    #navbar-search-input {
        width: 100%;
        height: var(--app-navbar-item-size);
        /* padding + borde = 40px exactos (si no, el input crece a 42) */
        padding: 0 0 0 calc(var(--app-navbar-item-size) - 2px);
        /* Bootstrap pinta el fondo solo dentro del borde (padding-box): el
           círculo se veía de 38px junto al avatar de 40 */
        background-clip: border-box;
        font-size: .95rem;
        background-color: rgba(var(--bs-body-color-rgb), .06);
        border-color: transparent;
        box-shadow: none !important;
        cursor: pointer;
    }
    #navbar-search-input::placeholder {
        color: transparent;
    }
    #fby-navbar-wrapper.searching .navbar-search-wrapper {
        flex-basis: 380px;
    }
    #fby-navbar-wrapper.searching #navbar-search-input {
        padding-right: 12px;
        cursor: text;
        background-color: var(--bs-body-bg);
        border-color: rgba(var(--bs-body-color-rgb), .15);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .10) !important;
    }
    #fby-navbar-wrapper.searching #navbar-search-input::placeholder {
        color: var(--bs-secondary-color);
    }

    @media (min-width: 768px) {
        .navbar-section-tabs {
            margin-left: 12px;
        }
        /* El panel de filtros/resultados se ancla al lado derecho, ancho fijo */
        .navbar-search-dropdown {
            left: auto !important;
            right: 0 !important;
            width: 720px !important;
            max-width: calc(100vw - 2 * var(--fby-gutter)) !important;
            transform-origin: top right !important;
        }
    }

    /* Móvil: al activar la lupa el input cubre toda la fila del navbar y el
       panel sale a todo lo ancho debajo. */
    @media (max-width: 767.98px) {
        .navbar-section-tabs {
            margin-left: 4px;
        }
        #fby-navbar-wrapper.searching .navbar-search-wrapper {
            position: absolute;
            left: var(--fby-gutter);
            right: var(--fby-gutter);
            top: 50%;
            transform: translateY(-50%);
            flex: none;
            z-index: 5;
        }
        #fby-navbar-wrapper.searching #navbar-search-input {
            height: 44px;
        }
        .navbar-search-dropdown {
            border-radius: 1rem;
        }
    }

    /* Desktop angosto (768–1199): logo y pills un poco más compactos */
    @media (min-width: 768px) and (max-width: 1199.98px) {
        :root {
            --app-navbar-img-max-size: 100px;
        }
        .navbar-section-tabs {
            margin-left: 4px;
            gap: 0;
        }
        .navbar-section-tab {
            padding: 8px 12px;
            font-size: 15px;
        }
    }

    /* ---- Panel del buscador (dropdown de filtros/resultados) ---- */
    .navbar-search-dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 70vh;
        overflow: hidden;
        background: #fff;
        border: 1px solid rgba(0,0,0,.1);
        border-radius: 1.5rem;
        box-shadow: 0 .5rem 2rem rgba(0,0,0,.12);
        z-index: 1050;
        margin-top: .5rem;
        /* Animation: zoom from input */
        transform-origin: top center;
        transform: scaleX(.92) scaleY(.6);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: transform .25s cubic-bezier(.2, 0, .13, 1.02), opacity .2s ease, visibility 0s .25s;
    }
    .nbs-scroll-wrapper {
        max-height: 70vh;
        overflow-y: auto;
        padding: .75rem 0;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,.2) transparent;
    }
    .nbs-scroll-wrapper::-webkit-scrollbar {
        width: 6px;
    }
    .nbs-scroll-wrapper::-webkit-scrollbar-track {
        background: transparent;
    }
    .nbs-scroll-wrapper::-webkit-scrollbar-thumb {
        background: rgba(0,0,0,.18);
        border-radius: 3px;
    }
    .nbs-scroll-wrapper::-webkit-scrollbar-thumb:hover {
        background: rgba(0,0,0,.3);
    }

    .navbar-search-dropdown.show {
        transform: scaleX(1) scaleY(1);
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: transform .25s cubic-bezier(.2, 0, .13, 1.02), opacity .2s ease, visibility 0s 0s;
    }

    /* Filter sections */
    .nbs-section {
        padding: .4rem 1.25rem;
        margin-bottom: .6rem;
    }
    .nbs-section h6 {
        font-size: .75rem;
        font-weight: 600;
        color: rgba(0,0,0,.4);
        text-transform: uppercase;
        letter-spacing: .04em;
        margin-bottom: .5rem;
    }

    /* Coaches horizontal scroll */
    .nbs-coaches {
        display: flex;
        gap: .6rem;
        overflow-x: auto;
        padding-bottom: .25rem;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .nbs-coaches::-webkit-scrollbar { display: none; }
    .nbs-scroll-btn {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        border: 1px solid var(--bs-border-color, #dee2e6);
        background: var(--bs-body-bg, #fff);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        cursor: pointer;
        color: #222;
        transition: all .15s ease;
    }
    .nbs-scroll-btn:hover { background: var(--bs-tertiary-bg); }
    .nbs-scroll-btn.disabled { opacity: .3; cursor: default; pointer-events: none; }
    .nbs-scroll-btn i { font-size: 16px; line-height: 1; }
    .nbs-coach {
        flex-shrink: 0;
        text-align: center;
        width: 76px;
    }
    .nbs-coach input { display: none; }
    .nbs-coach img {
        width: 72px;
        height: 72px;
        border-radius: 50%;
        object-fit: cover;
        border: 2px solid transparent;
        transition: border-color .15s;
    }
    .nbs-coach input:checked ~ label img {
        border-color: var(--bs-primary);
    }
    .nbs-coach label {
        cursor: pointer;
        font-size: .75rem;
        color: rgba(0,0,0,.7);
        line-height: 1.2;
        display: block;
        margin-top: .4rem;
    }

    /* Filter chips */
    .nbs-chips {
        display: flex;
        flex-wrap: wrap;
        gap: .35rem;
    }
    .nbs-chip input { display: none; }
    .nbs-chip label {
        display: inline-block;
        padding: .25rem .7rem;
        border-radius: 2rem;
        border: 1px solid var(--bs-primary);
        font-size: .8rem;
        cursor: pointer;
        transition: all .15s;
        color: var(--bs-primary);
        background: transparent;
        user-select: none;
    }
    .nbs-chip label:hover {
        background: rgba(var(--bs-primary-rgb), .06);
    }
    .nbs-chip input:checked + label {
        background: var(--bs-primary);
        border-color: var(--bs-primary);
        color: #fff;
    }
    /* Cascade: filtro sin resultados con los demás filtros activos */
    .nbs-filtro-no-disponible label,
    .nbs-filtro-no-disponible img,
    .nbs-coach.nbs-filtro-no-disponible {
        opacity: .35;
        pointer-events: none;
        cursor: not-allowed;
    }

    /* Duration chips */
    .nbs-durations {
        display: flex;
        gap: .4rem;
        flex-wrap: wrap;
    }
    .nbs-dur input { display: none; }
    .nbs-dur label {
        width: 52px;
        height: 52px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid var(--bs-primary);
        font-size: .72rem;
        cursor: pointer;
        transition: all .15s;
        color: var(--bs-primary);
        text-align: center;
        line-height: 1.15;
        user-select: none;
    }
    .nbs-dur label:hover {
        background: rgba(var(--bs-primary-rgb), .06);
    }
    .nbs-dur input:checked + label {
        background: var(--bs-primary);
        border-color: var(--bs-primary);
        color: #fff;
    }

    /* Footer with apply button */
    .nbs-footer {
        position: sticky;
        bottom: 0;
        background: #fff;
        padding: .6rem 1.25rem;
        border-top: 1px solid rgba(0,0,0,.06);
    }

    /* Results */
    .nbs-result {
        display: flex;
        align-items: center;
        padding: .5rem 1.25rem;
        text-decoration: none;
        color: inherit;
        transition: background .12s;
        cursor: pointer;
    }
    .nbs-result:hover {
        background: rgba(0,0,0,.04);
    }
    .nbs-result-thumb {
        width: 128px;
        aspect-ratio: 16/9;
        border-radius: .75rem;
        object-fit: cover;
        background: #f0f0f0;
        flex-shrink: 0;
    }
    .nbs-result-info {
        margin-left: .75rem;
        overflow: hidden;
        flex: 1;
    }
    .nbs-result-title {
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nbs-result-sub {
        font-size: .82rem;
        color: rgba(0,0,0,.5);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .nbs-result-tags {
        display: flex;
        flex-wrap: wrap;
        gap: .2rem;
        margin-top: .25rem;
        overflow: hidden;
        max-height: 1.6rem;
    }
    .nbs-result-tags .badge {
        font-size: .68rem;
        font-weight: 400;
    }

    .nbs-header {
        padding: .3rem 1.25rem .5rem;
        display: flex;
        align-items: center;
        gap: .5rem;
    }
    .nbs-header button {
        background: none;
        border: none;
        padding: .2rem;
        cursor: pointer;
        color: rgba(0,0,0,.5);
        display: flex;
    }
    .nbs-header button:hover { color: rgba(0,0,0,.8); }
    .nbs-header span {
        font-size: .8rem;
        font-weight: 600;
        color: rgba(0,0,0,.4);
        text-transform: uppercase;
        letter-spacing: .04em;
    }

    .nbs-empty {
        padding: 2rem 1.25rem;
        text-align: center;
        color: rgba(0,0,0,.4);
    }

    /* Active filter pills */
    .nbs-pills {
        display: flex;
        flex-wrap: wrap;
        gap: .3rem;
        padding: .25rem 1.25rem .5rem;
    }
    .nbs-pill {
        display: inline-flex;
        align-items: center;
        gap: .2rem;
        padding: .15rem .55rem;
        border-radius: 2rem;
        background: rgba(var(--bs-primary-rgb), .1);
        color: var(--bs-primary);
        font-size: .75rem;
        cursor: pointer;
        border: none;
    }
    .nbs-pill:hover {
        background: rgba(var(--bs-primary-rgb), .2);
    }

    /* Search shade overlay — behind navbar, covers page content */
    #navbar-search-shade {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, .35);
        z-index: 1029; /* just below navbar (1030) */
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .25s ease, visibility 0s .25s;
    }
    #navbar-search-shade.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .25s ease, visibility 0s 0s;
    }

    /* Pills de sección — estilo Netflix.
       Specs medidas en netflix.com: padding 10px 16px, radio 24px, 16px/400,
       activa = fondo translúcido + texto pleno, inactiva = 70 % de opacidad. */
    .navbar-section-tabs {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-shrink: 0;
    }
    .navbar-section-tab {
        display: inline-flex;
        align-items: center;
        gap: 2px;
        padding: 10px 16px;
        border: 0;
        border-radius: 24px;
        background: none;
        font-size: 16px;
        line-height: 21px;
        font-weight: 400;
        color: rgba(var(--bs-body-color-rgb), .7);
        text-decoration: none;
        white-space: nowrap;
        cursor: pointer;
        transition: background-color .15s ease, color .15s ease;
    }
    .navbar-section-tab:hover {
        color: var(--bs-body-color);
        background-color: rgba(var(--bs-body-color-rgb), .05);
    }
    .navbar-section-tab.active {
        color: var(--bs-body-color);
        background-color: rgba(var(--bs-body-color-rgb), .08);
        font-weight: 500;
    }
    .nav-more-toggle > i {
        font-size: 18px;
        line-height: 1;
        margin-right: -6px;
        transition: transform .2s ease;
    }
    .nav-more-toggle[aria-expanded="true"] > i {
        transform: rotate(180deg);
    }
    .nav-more-menu {
        min-width: 200px;
        padding: 6px;
        border-radius: 16px;
        margin-top: 10px !important;
    }
    .nav-more-menu .dropdown-item {
        border-radius: 10px;
        padding: 10px 14px;
        font-size: 16px;
    }
    .nav-more-menu .dropdown-item.active,
    .nav-more-menu .dropdown-item:active {
        background-color: rgba(var(--bs-body-color-rgb), .08);
        color: var(--bs-body-color);
        font-weight: 500;
    }
    /* Qué se ve en cada ancho (Netflix: todas / Inicio + Más / Explorar) */
    .nav-more,
    .nav-more-label-sm {
        display: none;
    }
    @media (max-width: 1199.98px) {
        .nav-pill-resto {
            display: none;
        }
        .nav-more {
            display: block;
        }
        .nav-more-item-inicio {
            display: none;
        }
    }
    @media (max-width: 767.98px) {
        .nav-pill-inicio,
        .nav-more-label-md {
            display: none;
        }
        .nav-more-label-sm {
            display: inline;
        }
        .nav-more-item-inicio {
            display: block;
        }
    }

    /* Tabs del buscador (Fitness / Nutrición) — viven DENTRO del dropdown,
       como chips arriba de los filtros. Solo se muestran con el panel abierto. */
    .search-context-tabs {
        display: none;
        gap: 6px;
        padding: .25rem 1.25rem .6rem;
    }
    #fby-navbar-wrapper.searching .search-context-tabs {
        display: flex;
    }
    .search-context-tab {
        border: 0;
        cursor: pointer;
        padding: 6px 14px;
        border-radius: 24px;
        font-size: 14px;
        line-height: 18px;
        font-weight: 500;
        background-color: rgba(var(--bs-body-color-rgb), .06);
        color: rgba(var(--bs-body-color-rgb), .7);
        transition: background-color .15s ease, color .15s ease;
    }
    .search-context-tab:hover {
        color: var(--bs-body-color);
    }
    .search-context-tab.active {
        background-color: var(--bs-body-color);
        color: var(--bs-body-bg);
    }

    .nbs-panel {
        display: block;
    }
    .nbs-panel.d-none { display: none !important; }

/* ===== footer (extraído de footer.php, DEV-438) ===== */
.btn-fav-col {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #999;
    font-size: 1.25rem;
    line-height: 1;
    transition: color 0.15s;
    border-radius: 50%;
}
.btn-fav-col:hover { color: #666; }
.btn-fav-col.fav-active { color: var(--bs-danger); }
.btn-fav-col.fav-active i { color: var(--bs-danger); }
.fav-col-popover {
    width: 240px;
    animation: favPopIn 0.15s ease;
}
@keyframes favPopIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.fav-col-popover-inner {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.18);
    overflow: hidden;
}
.fav-col-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 0.85rem 0.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent);
}
.fav-col-header-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--bs-body-color);
}
.fav-col-add-btn {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--bs-body-color);
    font-size: 1.2rem;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
}
.fav-col-add-btn:hover { color: var(--bs-primary); }
.fav-col-list {
    max-height: 240px;
    overflow-y: auto;
    padding: 0.25rem 0;
}
.fav-col-item {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    width: 100%;
    padding: 0.45rem 0.85rem;
    border: none;
    background: none;
    font-size: 0.9rem;
    cursor: pointer;
    text-align: left;
    color: var(--bs-body-color);
    transition: background 0.1s;
}
.fav-col-item:hover { background: var(--bs-tertiary-bg); }
.fav-col-item-active { background: var(--bs-primary-bg-subtle); }
.fav-col-item-active:hover { background: var(--bs-primary-bg-subtle); }
.fav-col-thumb {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: var(--bs-secondary-bg);
}
.fav-col-thumb-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    flex-shrink: 0;
    background: var(--bs-secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #aaa;
    font-size: 1rem;
}
.fav-col-name {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fav-col-empty {
    padding: 1.5rem 0.85rem;
    text-align: center;
    color: #999;
    font-size: 0.85rem;
}
.fav-col-input-wrap {
    display: flex;
    gap: 0.25rem;
    padding: 0;
    width: 100%;
}
.fav-col-input {
    flex-grow: 1;
    border: 1px solid var(--bs-border-color);
    border-radius: 6px;
    padding: 0.25rem 0.5rem;
    font-size: 0.85rem;
    outline: none;
}
.fav-col-input:focus { border-color: var(--bs-primary); }
.fav-col-input-btn {
    border: none;
    background: var(--bs-primary);
    color: #fff;
    border-radius: 6px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
}
.fav-col-header .fav-col-input-wrap {
    padding: 0;
}

/* Toast global: anclado abajo; en desktop ya no hay tabbar flotante */
#fby-toast-container {
    bottom: 32px;
}

@media (max-width: 575.98px) {
    #fby-toast-container {
        bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}
#fby-toast-container .toast {
    min-width: 0;
    max-width: min(320px, 90vw);
    background-color: #fff;
}

/* ===== tabbar: ELIMINADO 2026-09 (la navegación va en el navbar / "Explorar ▾") ===== */

/* ===== home: ambient light (2026-09) =====
   Resplandor detrás del navbar y del hero con el color dominante del banner
   activo (lo calcula ajax_banner_color.php). El color vive en --fby-ambient y
   transiciona al cambiar de slide; la forma la da la máscara radial. */
.home-nf-ambient {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: min(110vh, 1100px);
    z-index: -1;
    pointer-events: none;
    background-color: var(--fby-ambient, #ff7356);
    opacity: .55;
    -webkit-mask-image: radial-gradient(120% 90% at 50% -10%, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 75%);
    mask-image: radial-gradient(120% 90% at 50% -10%, #000 0%, rgba(0, 0, 0, .55) 40%, transparent 75%);
    transition: background-color 1.2s ease;
}
[data-bs-theme="dark"] .home-nf-ambient {
    opacity: .5;
}

/* ===== "Abrir en la app" (2026-10-17): enlace al link canónico
   https://fitbyyou.com/app/<tipo>/<id> en clase/programa/colección/receta. Solo en
   pantallas chicas (d-lg-none lo pone abrir_en_app_html en funciones/index.php). */
.abrir-en-app {
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
    opacity: .85;
}
.abrir-en-app:hover {
    color: inherit;
    opacity: 1;
}

/* ===== hero estilo Netflix (2026-09) — .hero-nf va en el contenedor del
   swiper de banners (home: .swiper-home; nutrición: .swiper-banners-nutricion).
   Netflix: hero en tarjeta redondeada alineada al gutter del navbar, 8px bajo
   el navbar y 32px de aire abajo. La proporción cambia por ancho (medido):
   ≥992px 24:11 (2.18), 576–991px 5:6 (0.83, vertical), <576px 2:3 (0.67).
   Contenido abajo a la izquierda; botón blanco pill (48px en desktop, 40px y
   a todo lo ancho en móvil). Títulos de fila 24px/500. */
.home-nf {
    padding-left: var(--fby-gutter);
    padding-right: var(--fby-gutter);
}
.home-nf-widgets {
    row-gap: 32px;
    padding-top: 8px;
    padding-bottom: 32px;
}
/* Con el CTA flotante de cuenta no activa (toda la web), aire extra al pie
   para que el final de cada página no quede tapado */
body:has(.fby-cuenta-aviso) .footer {
    padding-bottom: 240px !important;
}
.home-nf-row-title {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    margin: 0 0 12px;
}
.home-nf .home-tile {
    border-radius: 12px;
}
.home-nf .home-tile:hover {
    filter: brightness(.97);
}

.hero-nf {
    height: auto;
    aspect-ratio: 2 / 3;
    /* Netflix no deja asomar el slide vecino en los gutters */
    overflow: hidden !important;
    border-radius: 16px;
}
.hero-nf .swiper-slide .card {
    border-radius: 16px;
}
/* Banners como familia (2026-10-17): la imagen puede venir en <picture>
   (variante phone < 992px, web ≥ 992px) y con punto focal + zoom por medio en
   variables --bn-* que pone noticiaSlide() en el .swiper-slide. Sin variables
   = centro y sin zoom (igual que antes). */
.hero-nf .swiper-slide .card > picture {
    display: block;
    width: 100%;
    height: 100%;
}
.hero-nf .swiper-slide .card > img,
.hero-nf .swiper-slide .card > picture > img {
    width: 100%;
    object-position: var(--bn-ph-x, 50%) var(--bn-ph-y, 50%);
    transform: scale(var(--bn-ph-z, 1));
    transform-origin: var(--bn-ph-x, 50%) var(--bn-ph-y, 50%);
}
.hero-nf .swiper-slide .card .card-body {
    justify-content: flex-end !important;
    padding: 24px !important;
    background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .2) 40%, rgba(0, 0, 0, 0) 65%);
}
.hero-nf .swiper-slide .title {
    font-size: clamp(30px, 8vw, 40px);
    line-height: 1.05;
    margin-bottom: 10px;
}
.hero-nf .swiper-slide h6.subtitle {
    font-size: 16px;
}
.hero-nf .swiper-slide h6.subtitle.text-uppercase {
    font-size: 12px;
    letter-spacing: .08em;
}
/* El botón deja de ocupar 1/3 del ancho: va al tamaño de su contenido
   (y a todo lo ancho en móvil, como "Reproducir" en Netflix) */
.hero-nf .swiper-slide .card-body .row {
    margin-top: 16px !important;
}
.hero-nf .swiper-slide .card-body .row > [class*="col-"] {
    flex: 1 1 auto;
    width: 100%;
}
.hero-nf .swiper-slide .card-body .row .row {
    display: block;
}
.hero-nf .swiper-slide .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 40px;
    padding: 6px 16px;
    font-size: 16px;
    font-weight: 500;
    white-space: nowrap;
    max-width: none;
    background-color: #fff;
    color: #000;
}
.hero-nf .swiper-pagination {
    bottom: 12px;
}
.hero-nf .swiper-pagination-bullet {
    background: #fff;
}

@media (min-width: 576px) {
    .hero-nf {
        aspect-ratio: 5 / 6;
        border-radius: 24px;
    }
    .hero-nf .swiper-slide .card {
        border-radius: 24px;
    }
    .hero-nf .swiper-slide .title {
        font-size: clamp(32px, 5.5vw, 48px);
    }
    .hero-nf .swiper-slide h6.subtitle {
        font-size: 17px;
    }
    .hero-nf .swiper-slide .card-body .row > [class*="col-"] {
        flex: 0 0 auto;
        width: auto;
    }
    .hero-nf .swiper-slide .btn {
        width: auto;
        min-width: 200px;
    }
}

@media (min-width: 992px) {
    .hero-nf {
        aspect-ratio: 24 / 11;
        /* Sombra del hero, mismos valores que Netflix */
        box-shadow: 10px 20px 32px rgba(0, 0, 0, .45);
        /* Netflix en pantallas muy anchas/bajas: el hero no ocupa todo el
           ancho; lo limita la altura de la ventana (queda aire abajo para que
           asome la primera fila) y se centra conservando la proporción. */
        --hero-cap: calc(100vh - 180px);
        max-height: var(--hero-cap);
        max-width: calc(var(--hero-cap) * 24 / 11);
        margin-left: auto;
        margin-right: auto;
    }
    .hero-nf .swiper-slide .card > img,
    .hero-nf .swiper-slide .card > picture > img {
        object-position: var(--bn-web-x, 50%) var(--bn-web-y, 50%);
        transform: scale(var(--bn-web-z, 1));
        transform-origin: var(--bn-web-x, 50%) var(--bn-web-y, 50%);
    }
    .hero-nf .swiper-slide .card .card-body {
        padding: 40px !important;
        background: linear-gradient(to top, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .18) 40%, rgba(0, 0, 0, 0) 65%);
    }
    .hero-nf .swiper-slide .title {
        font-size: clamp(36px, 3.5vw, 60px);
        margin-bottom: 12px;
        max-width: 60%;
    }
    .hero-nf .swiper-slide h6.subtitle {
        font-size: 18px;
        max-width: 50%;
    }
    .hero-nf .swiper-slide h6.subtitle.text-uppercase {
        font-size: 13px;
    }
    .hero-nf .swiper-slide .card-body .row {
        margin-top: 20px !important;
    }
    .hero-nf .swiper-slide .btn {
        height: 48px;
        padding: 8px 24px;
        font-size: 18px;
        min-width: 0;
    }
    .hero-nf .swiper-pagination {
        bottom: 24px;
    }
}

/* ===== home: CTA flotante de cuenta no activa (2026-09) =====
   Sustituye a la tarjeta coral de arriba del home. Tarjeta fija abajo al
   centro, con la marca (coral + patrón + Ale asomando) y un solo botón:
   es una invitación a activar la suscripción, no un aviso. */
.fby-cuenta-aviso {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 1025;
    display: flex;
    align-items: center;
    gap: 28px;
    width: max-content;
    max-width: calc(100vw - 2 * var(--fby-gutter));
    padding: 26px 26px 26px 32px;
    color: #fff;
    background:
        url('../img/backgrounds/generig_bg2_1.svg') center / cover no-repeat,
        linear-gradient(120deg, #ff6a4b 0%, #ff8b6a 100%);
    background-blend-mode: soft-light, normal;
    border-radius: 28px;
    box-shadow: 0 22px 56px rgba(255, 115, 86, .42), 0 4px 12px rgba(0, 0, 0, .12);
    animation: fby-cuenta-aviso-in .5s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes fby-cuenta-aviso-in {
    from { opacity: 0; transform: translate(-50%, 24px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
/* Ale asoma por arriba de la tarjeta */
.fby-cuenta-aviso-img {
    align-self: flex-end;
    width: 170px;
    margin: -96px -8px -26px -16px;
    filter: drop-shadow(0 6px 12px rgba(0, 0, 0, .25));
    pointer-events: none;
}
.fby-cuenta-aviso-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.fby-cuenta-aviso-tag {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .22);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.fby-cuenta-aviso-title {
    font-size: 30px;
    font-weight: 800;
    line-height: 1.05;
}
.fby-cuenta-aviso-sub {
    font-size: 16px;
    line-height: 1.35;
    opacity: .92;
    max-width: 34ch;
}
.fby-cuenta-aviso-btn {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 56px;
    padding: 0 28px;
    border-radius: 999px;
    background: #fff;
    color: #ff7356;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
    transition: transform .15s ease, box-shadow .15s ease;
}
.fby-cuenta-aviso-btn i {
    font-size: 20px;
    transition: transform .15s ease;
}
.fby-cuenta-aviso-btn:hover {
    color: #ff5a38;
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
}
.fby-cuenta-aviso-btn:hover i {
    transform: translateX(3px);
}
@media (max-width: 767.98px) {
    .fby-cuenta-aviso {
        flex-wrap: wrap;
        gap: 12px 16px;
        width: auto;
        left: var(--fby-gutter);
        right: var(--fby-gutter);
        transform: none;
        max-width: none;
        padding: 16px;
    }
    @keyframes fby-cuenta-aviso-in {
        from { opacity: 0; transform: translateY(24px); }
        to   { opacity: 1; transform: none; }
    }
    .fby-cuenta-aviso-img {
        width: 96px;
        margin: -56px 0 -16px -8px;
    }
    .fby-cuenta-aviso-body {
        flex: 1 1 0;
    }
    .fby-cuenta-aviso-title {
        font-size: 19px;
    }
    .fby-cuenta-aviso-sub {
        font-size: 13px;
    }
    .fby-cuenta-aviso-btn {
        flex: 1 1 100%;
        justify-content: center;
        height: 44px;
    }
}
@media (max-width: 575.98px) {
    .fby-cuenta-aviso {
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
    }
}

/* ===== home: rows estilo Netflix (2026-09) =====
   Título 24px/500 con flecha "ver todo" al lado y prev/next a la derecha;
   swiper de tarjetas (las mismas plantillas y el mismo tamaño de tile que
   clases.php / nutricion.php). */
.home-nf-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}
.home-nf-row-head .home-nf-row-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
.home-nf-row-nav {
    gap: 6px;
}
/* prev/next y "ver todo": mismos que en clases.php / nutricion.php */
.swiper-nav-btn,
.swiper-ver-todos {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 0;
    padding: 0;
    background: var(--bs-secondary-bg);
    color: var(--bs-body-color);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all .15s ease;
}
.swiper-nav-btn:hover,
.swiper-ver-todos:hover {
    background: var(--bs-tertiary-bg);
    color: var(--bs-body-color);
}
.swiper-nav-btn.disabled {
    opacity: .3;
    cursor: default;
    pointer-events: none;
}
.swiper-nav-btn i {
    font-size: 18px;
    line-height: 1;
}
.swiper-ver-todos i {
    font-size: 16px;
    line-height: 1;
}
/* Tiles del MISMO tamaño que en clases.php: ahí .swiper-contenidos mide
   calc(30% - 8px) de un contenedor de 1320px = 374px. Aquí se fija ese ancho y la
   cantidad por fila sale sola del ancho disponible (como Netflix). En
   teléfono una tarjeta ancha con la siguiente asomando. */
.home-row-contenidos .swiper-slide {
    width: 78%;
    margin-right: 12px;
}
.home-row-coaches .swiper-slide {
    width: auto;
    margin-right: 16px;
}
.home-row-coaches .swiper-slide img {
    width: 96px;
    height: 96px;
}
@media (min-width: 768px) {
    .home-row-contenidos .swiper-slide {
        width: min(374px, calc(50% - 8px));
        margin-right: 16px;
    }
    .home-row-coaches .swiper-slide img {
        width: 123px;
        height: 123px;
    }
}

/* ===== contenedor fluido de sección (2026-09) =====
   Fitness, Nutrición, Semanal, Favoritos, Tracking y sus listados se
   expanden con la pantalla igual que el home, alineados al gutter del
   navbar (el hero conserva su tope por alto de ventana vía .hero-nf). En
   pantallas muy anchas las cuadrículas de tarjetas suman columnas para que
   las tarjetas no crezcan sin control. */
.container-nf {
    width: 100%;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--fby-gutter);
    padding-right: var(--fby-gutter);
}
@media (min-width: 1600px) {
    .container-nf .row > .col-lg-3,
    .container-nf .row > .col-md-3 { flex: 0 0 auto; width: 20%; }
    .container-nf .row > .col-lg-4,
    .container-nf .row > .col-md-4 { flex: 0 0 auto; width: 25%; }
    .container-nf .row > .col-lg-6,
    .container-nf .row > .col-md-6 { flex: 0 0 auto; width: 33.3333%; }
}
@media (min-width: 2100px) {
    .container-nf .row > .col-lg-3,
    .container-nf .row > .col-md-3 { width: 16.6667%; }
    .container-nf .row > .col-lg-4,
    .container-nf .row > .col-md-4 { width: 20%; }
    .container-nf .row > .col-lg-6,
    .container-nf .row > .col-md-6 { width: 25%; }
}

/* ===== modal de título (programas / colecciones), estilo Netflix (2026-09) =====
   Tarjeta que sube desde abajo y llega al borde inferior de la pantalla (no
   flota): ~1300px de ancho, 32px de aire arriba, esquinas superiores de 24px
   como el hero, scroll interno. Fondo oscurecido al 70 %, ✕ circular arriba a
   la derecha. El contenido es la página de detalle pedida por AJAX
   (titulo_modal.js) con su hero de lado a lado disolviéndose en el fondo. */
/* Ancho medido en Netflix: ~65 % del viewport (1086px @1717, 1290px @2050);
   la imagen/trailer de arriba es 16:9 a todo el ancho del modal. */
.fby-titulo-modal .modal-dialog {
    position: relative;
    --titulo-modal-w: clamp(680px, 66vw, 1330px);   /* Netflix ≈1325px en pantallas anchas */
    max-width: var(--titulo-modal-w);
    width: var(--titulo-modal-w);
    margin: 32px auto 0;
}
/* entra deslizándose desde abajo (Bootstrap por defecto baja desde arriba) */
.fby-titulo-modal.fade .modal-dialog {
    transform: translateY(48px);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.modal.fby-titulo-modal.show .modal-dialog {
    transform: none !important;
}
.fby-titulo-modal .modal-content {
    position: relative;
    height: calc(100vh - 32px);
    height: calc(100dvh - 32px);
    border: 0;
    border-radius: 24px 24px 0 0;
    overflow-y: auto;
    overflow-x: hidden;
    background: var(--bs-body-bg);
    box-shadow: 0 -8px 40px rgba(0, 0, 0, .35);
}
.fby-titulo-modal .fby-titulo-modal-body {
    opacity: 0;
    transition: opacity .25s ease;
    padding-bottom: 32px;
}
.fby-titulo-modal.cargado .fby-titulo-modal-body {
    opacity: 1;
}
/* la página trae sus .container de 1320: aquí que llenen el modal */
.fby-titulo-modal .fby-titulo-modal-body .container {
    max-width: none;
}
/* Hero (programa o colección) de lado a lado dentro del modal */
.fby-titulo-modal .detalle-hero {
    border-radius: 0 !important;
}
.fby-titulo-modal .fby-titulo-modal-loader {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.fby-titulo-modal.cargado .fby-titulo-modal-loader {
    display: none;
}
/* la ✕ vive en .modal-dialog (no en el contenido que hace scroll): fija arriba a la derecha */
.fby-titulo-modal .fby-titulo-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 3;
    pointer-events: auto;   /* .modal-dialog trae pointer-events:none en Bootstrap */
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(20, 20, 20, .75);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color .15s ease;
}
.fby-titulo-modal .fby-titulo-modal-close:hover {
    background: rgba(20, 20, 20, .95);
}
.fby-titulo-modal .fby-titulo-modal-close i {
    font-size: 22px;
    line-height: 1;
}
.fby-titulo-modal + .modal-backdrop.show,
.modal-backdrop.show:has(+ .fby-titulo-modal.show) {
    opacity: .7;
}
@media (max-width: 767.98px) {
    .fby-titulo-modal .modal-dialog {
        width: 100vw;
        max-width: 100vw;
        margin: 16px 0 0;
    }
    .fby-titulo-modal .modal-content {
        height: calc(100vh - 16px);
        height: calc(100dvh - 16px);
        border-radius: 16px 16px 0 0;
    }
}

/* ===== detalle de programa estilo Netflix (2026-09) =====
   Hero: solo título + coach + botones. Debajo, fila de info (descripción |
   coach · duración · clases · frecuencia · equipo) y lista de clases en UNA
   columna numeradas como episodios, con un <select> de semanas como las
   temporadas. Un solo padding lateral (.prog-inner) igual al del texto del
   hero (48px en desktop). Aplica en la página y dentro del modal de título. */
.prog-inner {
    padding-left: 48px;
    padding-right: 48px;
}
/* Hero compartido (programa #titulo-programa y colección): va al ancho
   completo de su contenedor (sin gutter) para que su texto (48px) quede
   alineado con las filas de abajo, en página y en modal. Degradado inferior
   chico, como Netflix: solo el último tercio se funde con el fondo. */
.container:has(> .detalle-hero) {
    padding-left: 0;
    padding-right: 0;
}
.detalle-hero {
    position: relative;
    color: var(--bs-body-color);
}
.detalle-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 100%;
    display: block;
    /* Netflix: linear-gradient(0deg, #181818, transparent 50%) sobre un player 16:9 */
    background: linear-gradient(0deg, rgba(var(--bs-body-bg-rgb), 1) 0%, rgba(var(--bs-body-bg-rgb), .85) 12%, rgba(var(--bs-body-bg-rgb), 0) 50%);
    z-index: 0;
    pointer-events: none;
}
.detalle-hero .card-body {
    /* Netflix: el título/botones quedan a ~12 % del alto del player desde
       abajo (≈90px en 747), no pegados al borde: la franja inferior se ve
       fundida con el fondo. El % de padding es relativo al ANCHO del hero. */
    padding: 48px 48px 6.5% !important;
    z-index: 1;   /* sobre el degradado ::after; sigue absoluto (.ratio > *) */
}
.detalle-hero .card-body .col-md-6 {
    flex: 0 0 auto;
    width: 100%;
    max-width: 640px;
}
.detalle-hero .title {
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1.05;
    font-weight: 800;
    margin-bottom: 4px;
}
.prog-info {
    padding-top: 32px;
    padding-bottom: 8px;
}
.prog-info-desc {
    font-size: 16px;
    line-height: 1.5;
}
.prog-meta {
    margin: 0;
    font-size: 14px;
    line-height: 1.45;
}
.prog-meta > div {
    margin-bottom: 8px;
}
.prog-meta dt {
    display: inline;
    font-weight: 400;
    color: var(--bs-secondary-color);
    margin-right: 4px;
}
.prog-meta dd {
    display: inline;
    margin: 0;
}
.prog-clases-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 32px 0 12px;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), .1);
    margin-bottom: 8px;
}
.prog-clases-head h5 {
    font-size: 24px;
}
.prog-semana-select {
    width: auto;
    min-width: 180px;
    font-weight: 600;
    border-radius: 12px;
    border-color: rgba(var(--bs-body-color-rgb), .2);
    padding: 10px 40px 10px 16px;
}
.prog-subseccion-titulo {
    margin: 20px 0 4px;
    color: var(--bs-secondary-color);
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: 12px;
    font-weight: 600;
}
.prog-clase {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 16px 8px;
    border-bottom: 1px solid rgba(var(--bs-body-color-rgb), .08);
}
.prog-clase-num {
    flex: 0 0 32px;
    text-align: center;
    font-size: 22px;
    color: var(--bs-secondary-color);
}
.prog-clase-link {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 20px;
}
/* tile de 260px: radio proporcional al de los tiles grandes (20px en 374px) */
.prog-clase-thumb {
    flex: 0 0 260px;
    margin: 0 !important;
}
.prog-clase-thumb .card {
    border-radius: 14px;
}
.prog-clase-thumb .link-video-tagduracion {
    bottom: 10px;
    right: 10px;
}
.prog-clase-info {
    flex: 1 1 auto;
    min-width: 0;
}
.prog-clase-coach {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--bs-secondary-color);
}
.prog-clase-coach .avatar {
    width: 26px;
    height: 26px;
    flex-shrink: 0;
    background-color: var(--bs-secondary-bg);
}
.prog-clase-titulo {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 8px !important;
}
.prog-clase-check {
    flex: 0 0 auto;
}
.prog-clase-check .checkmark {
    display: block;
}
/* subrayado de "completada" del diseño anterior: aquí atenúa la fila entera */
.prog-clase .link-contenido.programa-clase-completada:after {
    display: none;
}
/* descripción recortada a 3 líneas con "Leer más" como parte del texto */
.prog-info-desc {
    position: relative;
}
.prog-info-desc.recortada {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.prog-info-mas {
    position: absolute;
    right: 0;
    bottom: 0;
    border: 0;
    padding: 0 0 0 40px;
    background: linear-gradient(90deg, rgba(var(--bs-body-bg-rgb), 0) 0%, rgba(var(--bs-body-bg-rgb), 1) 45%);
    color: var(--bs-body-color);
    font-weight: 700;
    line-height: inherit;
    cursor: pointer;
}
.prog-info-mas:hover {
    text-decoration: underline;
}
@media (max-width: 991.98px) {
    .prog-inner,
    .detalle-hero .card-body {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
    .prog-clase-thumb {
        flex-basis: 140px;
    }
    .prog-clase-thumb .card {
        border-radius: 8px;
    }
    .prog-clase-num {
        display: none;
    }
    .prog-clase-link {
        gap: 12px;
        align-items: flex-start;
    }
}