/* _content/CR.SafeSport.UI/Components/Layout/LoadingAnimation.razor.rz.scp.css */
.sports-loader-overlay[b-the6667618] {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background: rgba(15, 23, 42, 0.18);
    backdrop-filter: blur(4px);
}

.sports-loader-card[b-the6667618] {
    min-width: 280px;
    max-width: 340px;
    width: 100%;
    padding: 28px 24px;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sports-loader-stage[b-the6667618] {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sport-ball-item[b-the6667618] {
    position: absolute;
    opacity: 0;
    transform: scale(0.6) translateY(12px) rotate(-10deg);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

    .sport-ball-item.active[b-the6667618] {
        opacity: 1;
        transform: scale(1) translateY(0) rotate(0deg);
        animation: sport-ball-float-b-the6667618 1.2s ease-in-out infinite;
    }

.sport-ball-emoji[b-the6667618] {
    font-size: 70px;
    line-height: 1;
    display: inline-block;
    filter: drop-shadow(0 8px 10px rgba(15, 23, 42, 0.18));
}

.sports-loader-shadow[b-the6667618] {
    position: absolute;
    bottom: 8px;
    width: 60px;
    height: 12px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.12);
    filter: blur(2px);
    animation: sport-shadow-b-the6667618 1.2s ease-in-out infinite;
}

.sports-loader-dots[b-the6667618] {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
    justify-content: center;
}

.sports-loader-dot[b-the6667618] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
    transition: all 0.25s ease;
}

    .sports-loader-dot.active[b-the6667618] {
        background: #2563eb;
        transform: scale(1.2);
    }

.sports-loader-text[b-the6667618] {
    font-size: 1rem;
    font-weight: 700;
    color: #0f172a;
    text-align: center;
    margin-bottom: 4px;
}

.sports-loader-subtext[b-the6667618] {
    font-size: 0.85rem;
    color: #64748b;
    text-align: center;
}

@keyframes sport-ball-float-b-the6667618 {
    0%, 100% {
        transform: scale(1) translateY(0) rotate(0deg);
    }

    50% {
        transform: scale(1.05) translateY(-8px) rotate(5deg);
    }
}

@keyframes sport-shadow-b-the6667618 {
    0%, 100% {
        transform: scaleX(1);
        opacity: 0.18;
    }

    50% {
        transform: scaleX(0.82);
        opacity: 0.10;
    }
}
/* _content/CR.SafeSport.UI/Components/Layout/MainLayout.razor.rz.scp.css */
.page[b-ehv6v8ge67] {
    position: relative;
    display: flex;
    flex-direction: column;
}

main[b-ehv6v8ge67] {
    flex: 1;
}

.sidebar[b-ehv6v8ge67] {
    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
}

.top-row[b-ehv6v8ge67] {
    background-color: #f7f7f7;
    border-bottom: 1px solid #d6d5d5;
    justify-content: flex-end;
    height: 3.5rem;
    display: flex;
    align-items: center;
}

    .top-row[b-ehv6v8ge67]  a, .top-row[b-ehv6v8ge67]  .btn-link {
        white-space: nowrap;
        margin-left: 1.5rem;
        text-decoration: none;
    }

    .top-row[b-ehv6v8ge67]  a:hover, .top-row[b-ehv6v8ge67]  .btn-link:hover {
        text-decoration: underline;
    }

    .top-row[b-ehv6v8ge67]  a:first-child {
        overflow: hidden;
        text-overflow: ellipsis;
    }

@media (max-width: 640.98px) {
    .top-row[b-ehv6v8ge67] {
        justify-content: space-between;
    }

    .top-row[b-ehv6v8ge67]  a, .top-row[b-ehv6v8ge67]  .btn-link {
        margin-left: 0;
    }
}

@media (min-width: 641px) {
    .page[b-ehv6v8ge67] {
        flex-direction: row;
    }

    .sidebar[b-ehv6v8ge67] {
        width: 250px;
        height: 100vh;
        position: sticky;
        top: 0;
    }

    .top-row[b-ehv6v8ge67] {
        position: sticky;
        top: 0;
        z-index: 1;
    }

    .top-row.auth[b-ehv6v8ge67]  a:first-child {
        flex: 1;
        text-align: right;
        width: 0;
    }

    .top-row[b-ehv6v8ge67], article[b-ehv6v8ge67] {
        padding-left: 2rem !important;
        padding-right: 1.5rem !important;
    }
}

#blazor-error-ui[b-ehv6v8ge67] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-ehv6v8ge67] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/CR.SafeSport.UI/Components/Layout/NavMenu.razor.rz.scp.css */
.ds-header[b-fircmu4lix] {
    position: fixed;
    inset: 0 0 auto 0;
    width: 100%;
    height: 78px;
    background: #FFFFFF;
    border-bottom: 1px solid #EEF2F7;
    z-index: 99999;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

.ds-header-inner[b-fircmu4lix] {
    height: 100%;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 30px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 28px;
    box-sizing: border-box;
}

.ds-brand[b-fircmu4lix] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
}

.ds-logo[b-fircmu4lix] {
    display: block;
    object-fit: cover;
}

.ds-logo-main[b-fircmu4lix] {
    width: 46px;
    height: 62px;
}

.ds-logo-secondary[b-fircmu4lix] {
    width: 62px;
    height: 62px;
}

.ds-nav[b-fircmu4lix] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 24px;
    min-width: 0;
}

.ds-nav-link[b-fircmu4lix],
.ds-dropdown-trigger[b-fircmu4lix] {
    position: relative;
    border: 0;
    background: transparent;
    color: #111827;
    text-decoration: none;
    font-size: 16px;
    line-height: 1;
    font-weight: 500;
    padding: 10px 0;
    cursor: pointer;
    white-space: nowrap;
    font-family: 'Inter', sans-serif;
}

    .ds-nav-link:hover[b-fircmu4lix],
    .ds-dropdown-trigger:hover[b-fircmu4lix],
    .ds-nav-link.is-active[b-fircmu4lix],
    .ds-dropdown.is-active .ds-dropdown-trigger[b-fircmu4lix] {
        color: #0F172A;
        font-weight: 800;
    }

        .ds-nav-link.is-active[b-fircmu4lix]::after,
        .ds-dropdown.is-active .ds-dropdown-trigger[b-fircmu4lix]::after {
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 2px;
            height: 2px;
            border-radius: 999px;
            background: #0F172A;
        }

.ds-dropdown[b-fircmu4lix] {
    position: relative;
}

.ds-dropdown-menu[b-fircmu4lix] {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    min-width: 220px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

.ds-dropdown:hover .ds-dropdown-menu[b-fircmu4lix],
.ds-dropdown:focus-within .ds-dropdown-menu[b-fircmu4lix] {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.ds-dropdown-link[b-fircmu4lix] {
    display: block;
    padding: 12px 14px;
    border-radius: 10px;
    color: #334155;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

    .ds-dropdown-link:hover[b-fircmu4lix],
    .ds-dropdown-link.is-active[b-fircmu4lix] {
        background: #F1F5F9;
        color: #0F172A;
    }

.ds-user[b-fircmu4lix] {
    position: relative;
}

.ds-user-btn[b-fircmu4lix] {
    height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    border-radius: 999px;
    padding: 4px 12px 4px 4px;
    cursor: pointer;
    color: #0F172A;
    font-size: 13px;
    font-weight: 700;
    font-family: 'Inter', sans-serif;
}

    .ds-user-btn img[b-fircmu4lix] {
        width: 34px;
        height: 34px;
        border-radius: 999px;
        object-fit: cover;
    }

.ds-user-menu[b-fircmu4lix],
.ds-mobile-user-menu[b-fircmu4lix] {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    min-width: 170px;
    padding: 8px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    box-shadow: 0 18px 42px rgba(15, 23, 42, 0.12);
    z-index: 100000;
}

    .ds-user-menu button[b-fircmu4lix],
    .ds-mobile-user-menu button[b-fircmu4lix] {
        width: 100%;
        border: 0;
        background: transparent;
        padding: 11px 12px;
        border-radius: 10px;
        color: #0F172A;
        font-size: 14px;
        font-weight: 700;
        text-align: left;
        cursor: pointer;
        font-family: 'Inter', sans-serif;
    }

        .ds-user-menu button:hover[b-fircmu4lix],
        .ds-mobile-user-menu button:hover[b-fircmu4lix] {
            background: #F1F5F9;
        }

.ds-mobile-header[b-fircmu4lix] {
    display: none;
}

.ds-drawer-wrap[b-fircmu4lix] {
    display: none;
}

@media (max-width: 1024px) {
    .ds-header[b-fircmu4lix] {
        display: none;
    }

    .ds-mobile-header[b-fircmu4lix] {
        position: fixed;
        inset: 0 0 auto 0;
        width: 100%;
        height: 72px;
        background: #FFFFFF;
        border-bottom: 1px solid #EEF2F7;
        z-index: 99999;
        display: grid;
        grid-template-columns: 48px 1fr 48px;
        align-items: center;
        gap: 10px;
        padding: 0 14px;
        box-sizing: border-box;
        font-family: 'Inter', sans-serif;
    }

    .ds-mobile-burger[b-fircmu4lix] {
        width: 44px;
        height: 44px;
        border: 1px solid #E5E7EB;
        background: #FFFFFF;
        border-radius: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
    }

        .ds-mobile-burger span[b-fircmu4lix],
        .ds-mobile-burger span[b-fircmu4lix]::before,
        .ds-mobile-burger span[b-fircmu4lix]::after {
            width: 20px;
            height: 2px;
            border-radius: 999px;
            background: #0F172A;
            display: block;
            content: "";
            position: relative;
        }

            .ds-mobile-burger span[b-fircmu4lix]::before {
                position: absolute;
                top: -6px;
                left: 0;
            }

            .ds-mobile-burger span[b-fircmu4lix]::after {
                position: absolute;
                top: 6px;
                left: 0;
            }

    .ds-mobile-brand[b-fircmu4lix] {
        justify-self: center;
        display: inline-flex;
        align-items: center;
        gap: 8px;
        text-decoration: none;
    }

    .ds-mobile-logo-main[b-fircmu4lix] {
        width: 42px;
        height: 42px;
        object-fit: contain;
    }

    .ds-mobile-logo-secondary[b-fircmu4lix] {
        width: 58px;
        height: 42px;
        object-fit: contain;
    }

    .ds-mobile-user[b-fircmu4lix] {
        justify-self: end;
        width: 44px;
        height: 44px;
        border: 1px solid #E5E7EB;
        background: #FFFFFF;
        border-radius: 999px;
        padding: 3px;
        cursor: pointer;
    }

        .ds-mobile-user img[b-fircmu4lix] {
            width: 100%;
            height: 100%;
            border-radius: 999px;
            object-fit: cover;
        }

    .ds-mobile-user-menu[b-fircmu4lix] {
        top: 62px;
        right: 14px;
    }

    .ds-drawer-wrap[b-fircmu4lix] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99998;
    }

    .ds-drawer-backdrop[b-fircmu4lix] {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.38);
        backdrop-filter: blur(2px);
    }

    .ds-drawer[b-fircmu4lix] {
        position: absolute;
        inset: 0 auto 0 0;
        width: min(86vw, 360px);
        background: #FFFFFF;
        border-right: 1px solid #E5E7EB;
        box-shadow: 18px 0 42px rgba(15, 23, 42, 0.18);
        padding: 18px;
        box-sizing: border-box;
        overflow-y: auto;
        font-family: 'Inter', sans-serif;
    }

    .ds-drawer-header[b-fircmu4lix] {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 14px;
        margin-bottom: 20px;
    }

    .ds-drawer-logo-group[b-fircmu4lix] {
        display: inline-flex;
        align-items: center;
        gap: 8px;
    }

        .ds-drawer-logo-group img[b-fircmu4lix] {
            max-width: 62px;
            height: 44px;
            object-fit: contain;
        }

    .ds-drawer-close[b-fircmu4lix] {
        width: 42px;
        height: 42px;
        border: 1px solid #E5E7EB;
        background: #FFFFFF;
        border-radius: 14px;
        color: #0F172A;
        cursor: pointer;
        font-size: 18px;
        font-weight: 800;
    }

    .ds-drawer-nav[b-fircmu4lix] {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    .ds-drawer-link[b-fircmu4lix],
    .ds-drawer-group summary[b-fircmu4lix] {
        width: 100%;
        min-height: 46px;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        border-radius: 14px;
        padding: 12px 14px;
        color: #0F172A;
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        text-decoration: none;
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        font-family: 'Inter', sans-serif;
    }

        .ds-drawer-link:hover[b-fircmu4lix],
        .ds-drawer-link.is-active[b-fircmu4lix],
        .ds-drawer-group[open] summary[b-fircmu4lix] {
            background: #0F172A;
            border-color: #0F172A;
            color: #FFFFFF;
        }

    .ds-drawer-group summary[b-fircmu4lix] {
        list-style: none;
    }

        .ds-drawer-group summary[b-fircmu4lix]::-webkit-details-marker {
            display: none;
        }

    .ds-drawer-submenu[b-fircmu4lix] {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px 0 4px 14px;
    }

        .ds-drawer-submenu .ds-drawer-link[b-fircmu4lix] {
            min-height: 42px;
            font-size: 14px;
            background: #F8FAFC;
        }

            .ds-drawer-submenu .ds-drawer-link.is-active[b-fircmu4lix],
            .ds-drawer-submenu .ds-drawer-link:hover[b-fircmu4lix] {
                background: #0F172A;
                color: #FFFFFF;
            }

    .ds-drawer-link.is-logout[b-fircmu4lix] {
        justify-content: center;
        margin-top: 12px;
        background: #FEE2E2;
        border-color: #FECACA;
        color: #991B1B;
    }

        .ds-drawer-link.is-logout:hover[b-fircmu4lix] {
            background: #991B1B;
            border-color: #991B1B;
            color: #FFFFFF;
        }
}

@media (max-width: 520px) {
    .ds-mobile-header[b-fircmu4lix] {
        height: 68px;
        padding: 0 12px;
    }

    .ds-mobile-logo-main[b-fircmu4lix] {
        width: 38px;
        height: 38px;
    }

    .ds-mobile-logo-secondary[b-fircmu4lix] {
        width: 54px;
        height: 38px;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Activities/ActivitiesAdmin.razor.rz.scp.css */
/* =========================================================
   ACTIVITIES ADMIN - TABLA MEJORADA
   Estándar:
   Título principal: 24px
   Título 2: 22px
   Subtítulo: 20px
   Texto: 16px
   ========================================================= */

.activities-admin-page[b-ctxgiqw9nx] {
    position: relative;
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.activities-admin-shell[b-ctxgiqw9nx] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.activities-admin-bg[b-ctxgiqw9nx],
.activities-admin-glow[b-ctxgiqw9nx],
.activities-admin-glow-1[b-ctxgiqw9nx],
.activities-admin-glow-2[b-ctxgiqw9nx] {
    display: none !important;
}

.activities-admin-main-banner[b-ctxgiqw9nx] {
    margin-bottom: 28px;
}

/* =========================
   HEADER
   ========================= */

.activities-admin-header[b-ctxgiqw9nx] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.activities-admin-badge[b-ctxgiqw9nx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    color: #0F172A;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 14px;
}

.activities-admin-header h1[b-ctxgiqw9nx] {
    margin: 0;
    color: #0F172A;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.activities-admin-header p[b-ctxgiqw9nx] {
    margin: 12px 0 0 0;
    max-width: 760px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

.activities-admin-header-actions[b-ctxgiqw9nx] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

/* =========================
   BOTONES
   ========================= */

.activities-admin-btn[b-ctxgiqw9nx] {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .activities-admin-btn .rz-icon[b-ctxgiqw9nx] {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .activities-admin-btn span[b-ctxgiqw9nx] {
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

.activities-admin-btn-primary[b-ctxgiqw9nx] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .activities-admin-btn-primary .rz-icon[b-ctxgiqw9nx] {
        color: #FFFFFF !important;
    }

    .activities-admin-btn-primary:hover[b-ctxgiqw9nx] {
        background: #1E293B;
        border-color: #1E293B;
        color: #FFFFFF;
        transform: translateY(-1px);
    }

.activities-admin-btn-secondary[b-ctxgiqw9nx] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .activities-admin-btn-secondary .rz-icon[b-ctxgiqw9nx] {
        color: #0F172A !important;
    }

    .activities-admin-btn-secondary:hover[b-ctxgiqw9nx] {
        background: #CBD5E1;
        border-color: #CBD5E1;
        color: #0F172A;
        transform: translateY(-1px);
    }

.activities-admin-btn:disabled[b-ctxgiqw9nx] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #64748B;
    cursor: not-allowed;
    transform: none;
}

    .activities-admin-btn:disabled .rz-icon[b-ctxgiqw9nx] {
        color: #64748B !important;
    }

/* =========================
   PANEL
   ========================= */

.activities-admin-panel[b-ctxgiqw9nx] {
    border-radius: 18px !important;
    padding: 18px;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    min-width: 0;
}

/* =========================
   TOOLBAR
   ========================= */

.activities-admin-toolbar[b-ctxgiqw9nx] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.activities-admin-toolbar-left[b-ctxgiqw9nx] {
    display: flex;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.activities-admin-search[b-ctxgiqw9nx] {
    flex: 1.3;
}

.activities-admin-filter[b-ctxgiqw9nx] {
    width: 240px;
}

.activities-admin-toolbar-right[b-ctxgiqw9nx] {
    display: flex;
    gap: 10px;
}

.activities-admin-panel .rz-textbox[b-ctxgiqw9nx],
.activities-admin-panel .rz-dropdown[b-ctxgiqw9nx],
.activities-admin-panel .rz-dropdown-label[b-ctxgiqw9nx] {
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
}

.activities-admin-panel .rz-textbox[b-ctxgiqw9nx],
.activities-admin-panel .rz-dropdown[b-ctxgiqw9nx] {
    min-height: 40px !important;
    border-radius: 10px !important;
    border-color: #E5E7EB !important;
    box-shadow: none !important;
}

    .activities-admin-panel .rz-textbox:focus[b-ctxgiqw9nx],
    .activities-admin-panel .rz-dropdown:focus-within[b-ctxgiqw9nx] {
        border-color: #0F172A !important;
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
    }

/* =========================
   TABLA
   ========================= */

.activities-admin-table-scroll[b-ctxgiqw9nx] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    padding-bottom: 6px;
}

.activities-admin-grid[b-ctxgiqw9nx] {
    border-radius: 14px;
    overflow: hidden;
}

.activities-admin-grid-scrollable[b-ctxgiqw9nx] {
    width: 100%;
    min-width: 1120px;
}

.activities-admin-table-scroll[b-ctxgiqw9nx]  .rz-data-grid,
.activities-admin-table-scroll[b-ctxgiqw9nx]  .rz-grid,
.activities-admin-table-scroll[b-ctxgiqw9nx]  .rz-grid-table,
.activities-admin-table-scroll[b-ctxgiqw9nx]  table {
    min-width: 1120px;
}

.activities-admin-table-scroll[b-ctxgiqw9nx]::-webkit-scrollbar {
    height: 8px;
}

.activities-admin-table-scroll[b-ctxgiqw9nx]::-webkit-scrollbar-track {
    background: #EEF2F7;
    border-radius: 999px;
}

.activities-admin-table-scroll[b-ctxgiqw9nx]::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 999px;
}

    .activities-admin-table-scroll[b-ctxgiqw9nx]::-webkit-scrollbar-thumb:hover {
        background: #94A3B8;
    }

/* =========================
   RADZEN GRID
   ========================= */

.activities-admin-grid[b-ctxgiqw9nx]  .rz-datatable-tablewrapper table,
.activities-admin-grid .rz-datatable-tablewrapper table[b-ctxgiqw9nx] {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.activities-admin-grid[b-ctxgiqw9nx]  .rz-grid-table thead th,
.activities-admin-grid .rz-grid-table thead th[b-ctxgiqw9nx] {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E5E7EB !important;
    color: #64748B !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 14px 16px !important;
}

.activities-admin-grid[b-ctxgiqw9nx]  .rz-column-title,
.activities-admin-grid .rz-column-title[b-ctxgiqw9nx] {
    color: #64748B !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.activities-admin-grid[b-ctxgiqw9nx]  .rz-data-row td,
.activities-admin-grid .rz-data-row td[b-ctxgiqw9nx] {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding: 14px 16px !important;
    vertical-align: middle !important;
}

.activities-admin-grid[b-ctxgiqw9nx]  .rz-data-row:hover td,
.activities-admin-grid .rz-data-row:hover td[b-ctxgiqw9nx] {
    background: #F8FAFC !important;
}

.activities-admin-grid[b-ctxgiqw9nx]  .rz-cell-data,
.activities-admin-grid .rz-cell-data[b-ctxgiqw9nx],
.activities-admin-grid[b-ctxgiqw9nx]  td,
.activities-admin-grid td[b-ctxgiqw9nx] {
    color: #0F172A !important;
    font-size: 16px !important;
}

.activities-admin-grid[b-ctxgiqw9nx]  .rz-paginator,
.activities-admin-grid .rz-paginator[b-ctxgiqw9nx] {
    border-top: 1px solid #E5E7EB !important;
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
}

/* =========================
   CELDAS
   ========================= */

.activity-admin-main-cell[b-ctxgiqw9nx] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.activity-admin-title-row h3[b-ctxgiqw9nx] {
    margin: 0;
    color: #0F172A;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
}

.activity-admin-description[b-ctxgiqw9nx] {
    color: #64748B;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 400;
}

.activity-admin-meta-row[b-ctxgiqw9nx] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.activity-mini-chip[b-ctxgiqw9nx],
.activity-type-badge[b-ctxgiqw9nx] {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid #CBD5E1;
}

.activity-mini-chip[b-ctxgiqw9nx] {
    background: #F1F5F9;
    color: #334155;
}

    .activity-mini-chip .rz-icon[b-ctxgiqw9nx] {
        font-size: 17px !important;
        color: #334155 !important;
    }

.activity-type-badge[b-ctxgiqw9nx],
.type-course[b-ctxgiqw9nx],
.type-workshop[b-ctxgiqw9nx],
.type-training[b-ctxgiqw9nx] {
    background: #E5E7EB !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

.activity-date-cell[b-ctxgiqw9nx] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.activity-date-item[b-ctxgiqw9nx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .activity-date-item span[b-ctxgiqw9nx],
    .activity-info-block span[b-ctxgiqw9nx] {
        color: #64748B;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 600;
    }

    .activity-date-item strong[b-ctxgiqw9nx],
    .activity-info-block strong[b-ctxgiqw9nx] {
        color: #0F172A;
        font-size: 16px;
        line-height: 1.25;
        font-weight: 800;
    }

    .activity-date-item small[b-ctxgiqw9nx] {
        color: #64748B;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 500;
    }

.activity-info-stack[b-ctxgiqw9nx] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.activity-info-block[b-ctxgiqw9nx] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.activity-admin-status-cell[b-ctxgiqw9nx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.activity-count-pill[b-ctxgiqw9nx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #E5E7EB !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
}

.activity-status-wrap[b-ctxgiqw9nx] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.activity-status-pill[b-ctxgiqw9nx] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

    .activity-status-pill.is-published[b-ctxgiqw9nx] {
        background: #DCFCE7 !important;
        color: #166534 !important;
    }

    .activity-status-pill.is-draft[b-ctxgiqw9nx] {
        background: #E5E7EB !important;
        color: #374151 !important;
    }

    .activity-status-pill.is-featured[b-ctxgiqw9nx] {
        background: #FEF3C7 !important;
        color: #92400E !important;
    }

/* =========================
   ACCIONES
   ========================= */

.activity-actions[b-ctxgiqw9nx] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.activity-action-btn[b-ctxgiqw9nx] {
    min-width: 38px;
    width: 38px;
    height: 38px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #E5E7EB;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

    .activity-action-btn .rz-icon[b-ctxgiqw9nx] {
        color: #0F172A !important;
        font-size: 19px !important;
    }

    .activity-action-btn:hover[b-ctxgiqw9nx] {
        background: #CBD5E1;
        border-color: #CBD5E1;
        transform: translateY(-1px);
    }

.activity-action-btn-danger[b-ctxgiqw9nx] {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #991B1B;
}

    .activity-action-btn-danger .rz-icon[b-ctxgiqw9nx] {
        color: #991B1B !important;
    }

    .activity-action-btn-danger:hover[b-ctxgiqw9nx] {
        background: #FECACA;
        border-color: #FECACA;
    }

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1024px) {
    .activities-admin-page[b-ctxgiqw9nx] {
        padding: 24px 20px;
    }

    .activities-admin-toolbar[b-ctxgiqw9nx] {
        flex-direction: column;
        align-items: stretch;
    }

    .activities-admin-toolbar-left[b-ctxgiqw9nx] {
        flex-direction: column;
    }

    .activities-admin-filter[b-ctxgiqw9nx] {
        width: 100%;
    }

    .activities-admin-grid-scrollable[b-ctxgiqw9nx],
    .activities-admin-table-scroll[b-ctxgiqw9nx]  .rz-data-grid,
    .activities-admin-table-scroll[b-ctxgiqw9nx]  .rz-grid,
    .activities-admin-table-scroll[b-ctxgiqw9nx]  .rz-grid-table,
    .activities-admin-table-scroll[b-ctxgiqw9nx]  table {
        min-width: 1120px;
    }
}

@media (max-width: 768px) {
    .activities-admin-header[b-ctxgiqw9nx] {
        flex-direction: column;
        gap: 18px;
    }

    .activities-admin-header-actions[b-ctxgiqw9nx] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

        .activities-admin-header-actions .activities-admin-btn[b-ctxgiqw9nx],
        .activities-admin-toolbar-right .activities-admin-btn[b-ctxgiqw9nx] {
            width: 100%;
        }

    .activities-admin-panel[b-ctxgiqw9nx] {
        padding: 16px;
        border-radius: 16px !important;
    }

    .activities-admin-table-scroll[b-ctxgiqw9nx] {
        margin-top: 4px;
        padding-bottom: 10px;
    }
}

@media (max-width: 640px) {
    .activities-admin-page[b-ctxgiqw9nx] {
        padding: 18px 14px;
    }

    .activities-admin-main-banner[b-ctxgiqw9nx] {
        margin-bottom: 24px;
    }

    .activities-admin-header h1[b-ctxgiqw9nx] {
        font-size: 24px;
    }

    .activities-admin-header p[b-ctxgiqw9nx],
    .activities-admin-badge[b-ctxgiqw9nx] {
        font-size: 16px;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Activities/ActivityAssignmentAdmin.razor.rz.scp.css */
/* =========================================================
   ACTIVITY ASSIGNMENT - AJUSTADO
   ========================================================= */

.activity-assignment-page[b-0fkas8fu85] {
    position: relative;
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.activity-assignment-shell[b-0fkas8fu85] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.activity-assignment-bg[b-0fkas8fu85],
.activity-assignment-glow[b-0fkas8fu85],
.activity-assignment-glow-1[b-0fkas8fu85],
.activity-assignment-glow-2[b-0fkas8fu85],
.activity-assignment-main-banner[b-0fkas8fu85] {
    display: none !important;
}

/* HEADER */

.activity-assignment-header[b-0fkas8fu85] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    min-width: 0;
}

    .activity-assignment-header h1[b-0fkas8fu85] {
        margin: 0;
        color: #0F172A;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .activity-assignment-header p[b-0fkas8fu85] {
        margin: 12px 0 0 0;
        max-width: 760px;
        color: #64748B;
        font-size: 16px;
        line-height: 1.6;
    }

.activity-assignment-badge[b-0fkas8fu85] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    color: #0F172A;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 14px;
}

.activity-assignment-header-actions[b-0fkas8fu85] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* BOTONES */

.activity-assignment-btn[b-0fkas8fu85] {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
}

    .activity-assignment-btn .rz-icon[b-0fkas8fu85] {
        font-size: 18px !important;
    }

    .activity-assignment-btn span[b-0fkas8fu85] {
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

.activity-assignment-btn-primary[b-0fkas8fu85] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .activity-assignment-btn-primary .rz-icon[b-0fkas8fu85] {
        color: #FFFFFF !important;
    }

    .activity-assignment-btn-primary:hover[b-0fkas8fu85] {
        background: #1E293B;
        border-color: #1E293B;
    }

.activity-assignment-btn-secondary[b-0fkas8fu85] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .activity-assignment-btn-secondary .rz-icon[b-0fkas8fu85] {
        color: #0F172A !important;
    }

    .activity-assignment-btn-secondary:hover[b-0fkas8fu85] {
        background: #CBD5E1;
        border-color: #CBD5E1;
    }

.activity-assignment-btn:disabled[b-0fkas8fu85] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #64748B;
    cursor: not-allowed;
}

    .activity-assignment-btn:disabled .rz-icon[b-0fkas8fu85] {
        color: #64748B !important;
    }

/* PANEL */

.activity-assignment-panel[b-0fkas8fu85] {
    border-radius: 18px !important;
    padding: 18px;
    width: 100%;
    max-width: 100%;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    overflow: hidden;
    box-sizing: border-box;
    min-width: 0;
}

.activity-assignment-filter-panel[b-0fkas8fu85] {
    padding: 18px;
}

/* TOOLBAR */

.activity-assignment-toolbar[b-0fkas8fu85] {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.95fr) auto;
    gap: 14px;
    align-items: end;
    width: 100%;
    min-width: 0;
}

.activity-assignment-toolbar-single[b-0fkas8fu85] {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 14px;
}

.activity-assignment-field[b-0fkas8fu85] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .activity-assignment-field label[b-0fkas8fu85] {
        color: #0F172A;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 800;
    }

.activity-assignment-actions[b-0fkas8fu85] {
    display: flex;
    align-items: flex-end;
    min-width: 0;
}

/* INPUTS */

.activity-assignment-page .rz-textbox[b-0fkas8fu85],
.activity-assignment-page .rz-dropdown[b-0fkas8fu85],
.activity-assignment-page .rz-dropdown-label[b-0fkas8fu85] {
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
}

.activity-assignment-page .rz-textbox[b-0fkas8fu85],
.activity-assignment-page .rz-dropdown[b-0fkas8fu85] {
    min-height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid #CBD5E1 !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

    .activity-assignment-page .rz-textbox:focus[b-0fkas8fu85],
    .activity-assignment-page .rz-dropdown:focus-within[b-0fkas8fu85] {
        border-color: #0F172A !important;
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
    }

/* LAYOUT */

.activity-assignment-grid-layout[b-0fkas8fu85] {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(340px, 0.55fr);
    gap: 16px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.activity-assignment-members-card[b-0fkas8fu85],
.activity-assignment-csv-card[b-0fkas8fu85],
.activity-assignment-list-card[b-0fkas8fu85] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
}

.activity-assignment-members-card[b-0fkas8fu85] {
    min-height: 330px;
}

.activity-assignment-csv-card[b-0fkas8fu85] {
    min-height: 330px;
}

.activity-assignment-list-card[b-0fkas8fu85] {
    min-height: 300px;
}

.activity-assignment-panel-heading[b-0fkas8fu85] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.activity-assignment-panel-heading-inline[b-0fkas8fu85] {
    align-items: center;
}

.activity-assignment-panel-heading p[b-0fkas8fu85] {
    margin: 6px 0 0 0;
    color: #64748B;
    font-size: 16px;
    line-height: 1.45;
}

.panel-title[b-0fkas8fu85] {
    margin: 0;
    color: #0F172A;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}

.activity-assignment-assigned-search[b-0fkas8fu85] {
    width: 320px;
}

/* CSV */

.csv-card-content[b-0fkas8fu85] {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.csv-help[b-0fkas8fu85] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: #64748B;
    line-height: 1.55;
    padding: 14px;
    border-radius: 14px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
}

    .csv-help span[b-0fkas8fu85] {
        color: #64748B;
        font-size: 16px;
        font-weight: 700;
    }

    .csv-help strong[b-0fkas8fu85] {
        color: #0F172A;
        font-size: 16px;
        line-height: 1.4;
        word-break: break-word;
    }

    .csv-help small[b-0fkas8fu85] {
        color: #64748B;
        font-size: 16px;
        line-height: 1.5;
    }

.csv-upload-box[b-0fkas8fu85] {
    position: relative;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: 14px;
    padding: 16px;
    border-radius: 14px;
    border: 1.5px dashed #CBD5E1;
    background: #FFFFFF;
    min-width: 0;
    overflow: hidden;
}

.csv-upload-icon[b-0fkas8fu85] {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 12px;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    color: #0F172A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 800;
}

.csv-upload-text[b-0fkas8fu85] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

    .csv-upload-text strong[b-0fkas8fu85] {
        color: #0F172A;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 800;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .csv-upload-text span[b-0fkas8fu85] {
        color: #64748B;
        font-size: 16px;
        line-height: 1.4;
    }

.csv-file-button[b-0fkas8fu85] {
    position: relative;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border-radius: 8px;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    color: #0F172A;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
}

    .csv-file-button:hover[b-0fkas8fu85] {
        background: #CBD5E1;
    }

.activity-assignment-file-input[b-0fkas8fu85] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
}

.activity-assignment-upload-action[b-0fkas8fu85] {
    display: flex;
    justify-content: flex-end;
}

/* TABLAS */

.activity-assignment-table-scroll[b-0fkas8fu85] {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    padding-bottom: 8px;
    box-sizing: border-box;
}

    .activity-assignment-table-scroll[b-0fkas8fu85]::-webkit-scrollbar {
        height: 8px;
    }

    .activity-assignment-table-scroll[b-0fkas8fu85]::-webkit-scrollbar-track {
        background: #EEF2F7;
        border-radius: 999px;
    }

    .activity-assignment-table-scroll[b-0fkas8fu85]::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 999px;
    }

        .activity-assignment-table-scroll[b-0fkas8fu85]::-webkit-scrollbar-thumb:hover {
            background: #94A3B8;
        }

.activity-assignment-grid[b-0fkas8fu85] {
    border-radius: 14px;
    overflow: hidden;
}

.activity-assignment-members-grid-scrollable[b-0fkas8fu85] {
    width: 100% !important;
    min-width: 620px !important;
}

.activity-assignment-members-scroll[b-0fkas8fu85]  .rz-data-grid,
.activity-assignment-members-scroll[b-0fkas8fu85]  .rz-grid,
.activity-assignment-members-scroll[b-0fkas8fu85]  .rz-grid-table,
.activity-assignment-members-scroll[b-0fkas8fu85]  table {
    min-width: 620px !important;
}

.activity-assignment-assignments-grid-scrollable[b-0fkas8fu85] {
    width: 100%;
    min-width: 980px;
}

.activity-assignment-assignments-scroll[b-0fkas8fu85]  .rz-data-grid,
.activity-assignment-assignments-scroll[b-0fkas8fu85]  .rz-grid,
.activity-assignment-assignments-scroll[b-0fkas8fu85]  .rz-grid-table,
.activity-assignment-assignments-scroll[b-0fkas8fu85]  table {
    min-width: 980px;
}

/* RADZEN GRID */

.activity-assignment-grid[b-0fkas8fu85]  .rz-datatable-tablewrapper table,
.activity-assignment-grid .rz-datatable-tablewrapper table[b-0fkas8fu85] {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.activity-assignment-grid[b-0fkas8fu85]  .rz-grid-table thead th,
.activity-assignment-grid .rz-grid-table thead th[b-0fkas8fu85] {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E5E7EB !important;
    color: #64748B !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    padding: 14px 16px !important;
}

.activity-assignment-grid[b-0fkas8fu85]  .rz-column-title,
.activity-assignment-grid .rz-column-title[b-0fkas8fu85] {
    color: #64748B !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.activity-assignment-grid[b-0fkas8fu85]  .rz-data-row td,
.activity-assignment-grid .rz-data-row td[b-0fkas8fu85] {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding: 14px 16px !important;
    vertical-align: middle !important;
}

.activity-assignment-grid[b-0fkas8fu85]  .rz-data-row:hover td,
.activity-assignment-grid .rz-data-row:hover td[b-0fkas8fu85] {
    background: #F8FAFC !important;
}

.activity-assignment-grid[b-0fkas8fu85]  .rz-cell-data,
.activity-assignment-grid .rz-cell-data[b-0fkas8fu85],
.activity-assignment-grid[b-0fkas8fu85]  td,
.activity-assignment-grid td[b-0fkas8fu85] {
    color: #0F172A !important;
    font-size: 16px !important;
}

.activity-assignment-grid[b-0fkas8fu85]  .rz-paginator,
.activity-assignment-grid .rz-paginator[b-0fkas8fu85] {
    border-top: 1px solid #E5E7EB !important;
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
}

/* CELDAS */

.assignment-member-cell[b-0fkas8fu85] {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

    .assignment-member-cell strong[b-0fkas8fu85] {
        color: #0F172A;
        font-size: 16px;
        font-weight: 800;
        line-height: 1.3;
        word-break: break-word;
    }

    .assignment-member-cell div[b-0fkas8fu85] {
        color: #64748B;
        font-size: 16px;
        line-height: 1.4;
        word-break: break-word;
    }

.assignment-date-cell[b-0fkas8fu85] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .assignment-date-cell strong[b-0fkas8fu85] {
        color: #0F172A;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 800;
    }

    .assignment-date-cell span[b-0fkas8fu85] {
        color: #64748B;
        font-size: 16px;
        line-height: 1.3;
    }

.assignment-notes-cell[b-0fkas8fu85] {
    max-width: 280px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.45;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

.assignment-status[b-0fkas8fu85] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

    .assignment-status.assigned[b-0fkas8fu85] {
        background: #E5E7EB;
        color: #374151;
        border-color: #CBD5E1;
    }

    .assignment-status.attended[b-0fkas8fu85] {
        background: #DCFCE7;
        color: #166534;
        border-color: #BBF7D0;
    }

    .assignment-status.available[b-0fkas8fu85] {
        background: #F8FAFC;
        color: #475569;
        border-color: #E5E7EB;
    }

.assignment-action-cell[b-0fkas8fu85] {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.assignment-assign-btn[b-0fkas8fu85] {
    min-height: 36px;
    height: 36px;
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    border-radius: 8px;
    padding: 0 12px;
    border: 1px solid #0F172A;
    background: #0F172A;
    color: #FFFFFF;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
}

    .assignment-assign-btn .rz-icon[b-0fkas8fu85] {
        color: #FFFFFF !important;
        font-size: 18px !important;
    }

    .assignment-assign-btn:hover[b-0fkas8fu85] {
        background: #1E293B;
        border-color: #1E293B;
    }

    .assignment-assign-btn:disabled[b-0fkas8fu85] {
        background: #E5E7EB;
        border-color: #CBD5E1;
        color: #64748B;
        cursor: not-allowed;
    }

        .assignment-assign-btn:disabled .rz-icon[b-0fkas8fu85] {
            color: #64748B !important;
        }

.assignment-delete-btn[b-0fkas8fu85] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    border: 1px solid #FECACA;
    background: #FEE2E2;
    color: #991B1B;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
}

    .assignment-delete-btn .rz-icon[b-0fkas8fu85] {
        color: #991B1B !important;
        font-size: 19px !important;
    }

    .assignment-delete-btn:hover[b-0fkas8fu85] {
        background: #FECACA;
        border-color: #FECACA;
    }

/* RESPONSIVE */

@media (max-width: 1180px) {
    .activity-assignment-grid-layout[b-0fkas8fu85] {
        grid-template-columns: 1fr;
    }

    .activity-assignment-csv-card[b-0fkas8fu85] {
        width: 100%;
    }

    .activity-assignment-members-card[b-0fkas8fu85],
    .activity-assignment-csv-card[b-0fkas8fu85] {
        min-height: unset;
    }
}

@media (max-width: 1024px) {
    .activity-assignment-page[b-0fkas8fu85] {
        padding: 24px 20px;
    }

    .activity-assignment-toolbar[b-0fkas8fu85] {
        grid-template-columns: 1fr;
        align-items: stretch;
    }

    .activity-assignment-actions[b-0fkas8fu85],
    .activity-assignment-upload-action[b-0fkas8fu85] {
        width: 100%;
    }

        .activity-assignment-actions .activity-assignment-btn[b-0fkas8fu85],
        .activity-assignment-upload-action .activity-assignment-btn[b-0fkas8fu85] {
            width: 100%;
        }

    .activity-assignment-panel-heading-inline[b-0fkas8fu85] {
        align-items: flex-start;
        flex-direction: column;
    }

    .activity-assignment-assigned-search[b-0fkas8fu85] {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .activity-assignment-page[b-0fkas8fu85] {
        padding: 18px 14px;
    }

    .activity-assignment-shell[b-0fkas8fu85] {
        gap: 16px;
    }

    .activity-assignment-header[b-0fkas8fu85] {
        flex-direction: column;
        gap: 16px;
    }

        .activity-assignment-header h1[b-0fkas8fu85] {
            font-size: 24px;
        }

        .activity-assignment-header p[b-0fkas8fu85],
        .activity-assignment-badge[b-0fkas8fu85] {
            font-size: 16px;
        }

    .activity-assignment-header-actions[b-0fkas8fu85] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

        .activity-assignment-header-actions .activity-assignment-btn[b-0fkas8fu85] {
            width: 100%;
        }

    .activity-assignment-panel[b-0fkas8fu85] {
        padding: 16px;
        border-radius: 16px !important;
    }

    .csv-upload-box[b-0fkas8fu85] {
        grid-template-columns: 48px minmax(0, 1fr);
    }

    .csv-file-button[b-0fkas8fu85] {
        grid-column: 1 / -1;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .activity-assignment-page[b-0fkas8fu85] {
        padding: 18px 10px;
    }

    .activity-assignment-panel[b-0fkas8fu85] {
        padding: 12px;
    }

    .panel-title[b-0fkas8fu85] {
        font-size: 22px;
    }

    .activity-assignment-members-grid-scrollable[b-0fkas8fu85],
    .activity-assignment-members-scroll[b-0fkas8fu85]  .rz-data-grid,
    .activity-assignment-members-scroll[b-0fkas8fu85]  .rz-grid,
    .activity-assignment-members-scroll[b-0fkas8fu85]  .rz-grid-table,
    .activity-assignment-members-scroll[b-0fkas8fu85]  table {
        min-width: 620px !important;
    }

    .activity-assignment-assignments-grid-scrollable[b-0fkas8fu85],
    .activity-assignment-assignments-scroll[b-0fkas8fu85]  .rz-data-grid,
    .activity-assignment-assignments-scroll[b-0fkas8fu85]  .rz-grid,
    .activity-assignment-assignments-scroll[b-0fkas8fu85]  .rz-grid-table,
    .activity-assignment-assignments-scroll[b-0fkas8fu85]  table {
        min-width: 920px;
    }
}

/* =========================================================
   LISTA PRELIMINAR DE ASISTENCIA
   ========================================================= */

.activity-assignment-preliminary-heading[b-0fkas8fu85] {
    align-items: center;
}

.preliminary-counts[b-0fkas8fu85] {
    display: flex;
    align-items: stretch;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.preliminary-count-item[b-0fkas8fu85] {
    min-width: 105px;
    padding: 10px 14px;
    border: 1px solid #CBD5E1;
    border-radius: 12px;
    background: #F8FAFC;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .preliminary-count-item span[b-0fkas8fu85] {
        color: #64748B;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 700;
    }

    .preliminary-count-item strong[b-0fkas8fu85] {
        color: #0F172A;
        font-size: 22px;
        line-height: 1.1;
        font-weight: 800;
    }

    .preliminary-count-item.selected[b-0fkas8fu85] {
        background: #F0FDF4;
        border-color: #BBF7D0;
    }

        .preliminary-count-item.selected strong[b-0fkas8fu85] {
            color: #166534;
        }

    .preliminary-count-item.absent[b-0fkas8fu85] {
        background: #FEF2F2;
        border-color: #FECACA;
    }

        .preliminary-count-item.absent strong[b-0fkas8fu85] {
            color: #991B1B;
        }

.preliminary-toolbar[b-0fkas8fu85] {
    min-height: 52px;
    margin-bottom: 14px;
    padding: 10px 12px;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    background: #F8FAFC;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.preliminary-help-text[b-0fkas8fu85] {
    color: #64748B;
    font-size: 16px;
    line-height: 1.45;
    text-align: right;
}

.preliminary-loading[b-0fkas8fu85] {
    min-height: 220px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    color: #64748B;
    font-size: 16px;
    font-weight: 700;
}

    .preliminary-loading .rz-progressbar[b-0fkas8fu85] {
        width: min(420px, 100%);
    }

.attendance-checkbox-wrapper[b-0fkas8fu85] {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.attendance-checkbox[b-0fkas8fu85] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.attendance-checkbox-design[b-0fkas8fu85] {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    border: 2px solid #94A3B8;
    background: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

    .attendance-checkbox-design .rz-icon[b-0fkas8fu85] {
        color: transparent !important;
        font-size: 20px !important;
        font-weight: 800;
    }

.attendance-checkbox:checked + .attendance-checkbox-design[b-0fkas8fu85] {
    background: #0F172A;
    border-color: #0F172A;
}

    .attendance-checkbox:checked + .attendance-checkbox-design
    .rz-icon[b-0fkas8fu85] {
        color: #FFFFFF !important;
    }

.attendance-checkbox-wrapper:hover
.attendance-checkbox-design[b-0fkas8fu85] {
    transform: scale(1.06);
    border-color: #0F172A;
}

.attendance-checkbox:disabled + .attendance-checkbox-design[b-0fkas8fu85] {
    opacity: 0.55;
    cursor: not-allowed;
}

.attendance-selection[b-0fkas8fu85] {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
}

    .attendance-selection .rz-icon[b-0fkas8fu85] {
        font-size: 18px !important;
    }

    .attendance-selection.attended[b-0fkas8fu85] {
        color: #166534;
        background: #DCFCE7;
        border-color: #BBF7D0;
    }

        .attendance-selection.attended .rz-icon[b-0fkas8fu85] {
            color: #166534 !important;
        }

    .attendance-selection.absent[b-0fkas8fu85] {
        color: #991B1B;
        background: #FEE2E2;
        border-color: #FECACA;
    }

        .attendance-selection.absent .rz-icon[b-0fkas8fu85] {
            color: #991B1B !important;
        }

.preliminary-save-section[b-0fkas8fu85] {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.preliminary-save-summary[b-0fkas8fu85] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .preliminary-save-summary strong[b-0fkas8fu85] {
        color: #0F172A;
        font-size: 16px;
        line-height: 1.35;
        font-weight: 800;
    }

    .preliminary-save-summary span[b-0fkas8fu85] {
        color: #64748B;
        font-size: 16px;
        line-height: 1.4;
    }

.preliminary-save-btn[b-0fkas8fu85] {
    min-width: 220px;
}

@media (max-width: 900px) {
    .activity-assignment-preliminary-heading[b-0fkas8fu85] {
        align-items: flex-start;
        flex-direction: column;
    }

    .preliminary-counts[b-0fkas8fu85] {
        width: 100%;
        justify-content: flex-start;
    }

    .preliminary-count-item[b-0fkas8fu85] {
        flex: 1;
    }
}

@media (max-width: 768px) {
    .preliminary-toolbar[b-0fkas8fu85] {
        align-items: stretch;
        flex-direction: column;
    }

        .preliminary-toolbar .activity-assignment-btn[b-0fkas8fu85] {
            width: 100%;
        }

    .preliminary-help-text[b-0fkas8fu85] {
        text-align: left;
    }

    .preliminary-save-section[b-0fkas8fu85] {
        align-items: stretch;
        flex-direction: column;
    }

    .preliminary-save-btn[b-0fkas8fu85] {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .preliminary-counts[b-0fkas8fu85] {
        display: grid;
        grid-template-columns: 1fr;
    }

    .preliminary-count-item[b-0fkas8fu85] {
        width: 100%;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Activities/ActivityDetail.razor.rz.scp.css */
/* =========================================================
   ACTIVITY DETAIL - LÍNEA GRÁFICA ACTUAL
   Título principal: 24px
   Título 2: 22px
   Subtítulo: 20px
   Texto: 16px
   ========================================================= */

.activity-detail-page[b-m0b87e2nfp] {
    position: relative;
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.activity-detail-shell[b-m0b87e2nfp] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.activity-detail-bg[b-m0b87e2nfp],
.activity-detail-glow[b-m0b87e2nfp],
.activity-detail-glow-1[b-m0b87e2nfp],
.activity-detail-glow-2[b-m0b87e2nfp] {
    display: none !important;
}

/* =========================================================
   BANNER PUBLICIDAD
   ========================================================= */

.activity-detail-main-banner[b-m0b87e2nfp] {
    margin-bottom: 28px;
}

/* =========================================================
   HEADER / BOTONES SUPERIORES
   ========================================================= */

.activity-detail-header[b-m0b87e2nfp] {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.activity-detail-header-actions[b-m0b87e2nfp] {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

/* =========================================================
   BOTONES PROPIOS
   ========================================================= */

.activity-detail-btn[b-m0b87e2nfp] {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .activity-detail-btn .rz-icon[b-m0b87e2nfp] {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .activity-detail-btn span[b-m0b87e2nfp] {
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

.activity-detail-btn-primary[b-m0b87e2nfp] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .activity-detail-btn-primary .rz-icon[b-m0b87e2nfp] {
        color: #FFFFFF !important;
    }

    .activity-detail-btn-primary:hover[b-m0b87e2nfp] {
        background: #1E293B;
        border-color: #1E293B;
        color: #FFFFFF;
        transform: translateY(-1px);
    }

.activity-detail-btn-secondary[b-m0b87e2nfp] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .activity-detail-btn-secondary .rz-icon[b-m0b87e2nfp] {
        color: #0F172A !important;
    }

    .activity-detail-btn-secondary:hover[b-m0b87e2nfp] {
        background: #CBD5E1;
        border-color: #CBD5E1;
        color: #0F172A;
        transform: translateY(-1px);
    }

.activity-detail-btn:active[b-m0b87e2nfp] {
    transform: scale(0.98);
}

.activity-detail-btn:disabled[b-m0b87e2nfp] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #64748B;
    cursor: not-allowed;
    transform: none;
}

    .activity-detail-btn:disabled .rz-icon[b-m0b87e2nfp] {
        color: #64748B !important;
    }

.activity-detail-btn-full[b-m0b87e2nfp] {
    width: 100%;
}

/* =========================================================
   LAYOUT
   ========================================================= */

.activity-detail-layout[b-m0b87e2nfp] {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, 0.8fr);
    gap: 22px;
    align-items: flex-start;
}

.activity-detail-main[b-m0b87e2nfp],
.activity-detail-side[b-m0b87e2nfp] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.activity-detail-panel[b-m0b87e2nfp],
.activity-summary-card[b-m0b87e2nfp] {
    border-radius: 18px !important;
    padding: 22px;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: none !important;
}

/* =========================================================
   FILA SUPERIOR DEL PANEL
   ========================================================= */

.activity-detail-title-row[b-m0b87e2nfp] {
    display: flex;
    justify-content: space-between;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
    flex-wrap: wrap;
}

.activity-type-chip[b-m0b87e2nfp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
    font-weight: 800;
    border: 1px solid #CBD5E1;
}

.type-course[b-m0b87e2nfp],
.type-workshop[b-m0b87e2nfp],
.type-training[b-m0b87e2nfp] {
    background: #E5E7EB !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

.activity-detail-statuses[b-m0b87e2nfp] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.activity-status-pill[b-m0b87e2nfp] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

    .activity-status-pill.published[b-m0b87e2nfp] {
        background: #DCFCE7 !important;
        color: #166534 !important;
    }

    .activity-status-pill.draft[b-m0b87e2nfp] {
        background: #E5E7EB !important;
        color: #374151 !important;
    }

    .activity-status-pill.featured[b-m0b87e2nfp] {
        background: #FEF3C7 !important;
        color: #92400E !important;
    }

/* =========================================================
   CARDS DE INFORMACIÓN
   ========================================================= */

.activity-detail-grid[b-m0b87e2nfp] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.activity-info-card[b-m0b87e2nfp] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 14px;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    box-sizing: border-box;
}

.activity-info-card-full[b-m0b87e2nfp] {
    grid-column: 1 / -1;
}

.activity-info-icon[b-m0b87e2nfp] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #E5E7EB !important;
    color: #0F172A !important;
    flex-shrink: 0;
}

    .activity-info-icon .rz-icon[b-m0b87e2nfp] {
        font-size: 22px !important;
        color: #0F172A !important;
    }

.activity-info-card strong[b-m0b87e2nfp] {
    display: block;
    margin-bottom: 6px;
    color: #0F172A;
    font-size: 20px;
    line-height: 1.2;
    font-weight: 800;
}

.activity-info-card p[b-m0b87e2nfp] {
    margin: 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.55;
    font-weight: 400;
}

/* =========================================================
   DESCRIPCIÓN
   ========================================================= */

.activity-section-title[b-m0b87e2nfp] {
    margin: 0 0 14px 0;
    color: #0F172A;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}

.activity-description-box[b-m0b87e2nfp] {
    min-height: 180px;
    padding: 18px;
    border-radius: 14px;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    color: #475569 !important;
    font-size: 16px;
    line-height: 1.7;
    font-weight: 400;
    box-sizing: border-box;
}

    .activity-description-box p[b-m0b87e2nfp],
    .activity-description-box span[b-m0b87e2nfp],
    .activity-description-box div[b-m0b87e2nfp],
    .activity-description-box li[b-m0b87e2nfp],
    .activity-description-box ul[b-m0b87e2nfp],
    .activity-description-box ol[b-m0b87e2nfp] {
        font-size: 16px;
        line-height: 1.7;
        color: #475569;
    }

    .activity-description-box ul[b-m0b87e2nfp],
    .activity-description-box ol[b-m0b87e2nfp] {
        margin-top: 0;
        margin-bottom: 0;
        padding-left: 22px;
    }

.activity-description-placeholder[b-m0b87e2nfp] {
    color: #94A3B8 !important;
    font-size: 16px;
    line-height: 1.6;
}

/* =========================================================
   RESUMEN RÁPIDO
   ========================================================= */

.activity-summary-card[b-m0b87e2nfp] {
    position: sticky;
    top: 24px;
}

.activity-summary-list[b-m0b87e2nfp] {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-bottom: 18px;
}

.activity-summary-row[b-m0b87e2nfp] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #E5E7EB !important;
}

    .activity-summary-row:first-child[b-m0b87e2nfp] {
        padding-top: 0;
    }

    .activity-summary-row span[b-m0b87e2nfp] {
        color: #64748B !important;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 500;
    }

    .activity-summary-row strong[b-m0b87e2nfp] {
        color: #0F172A !important;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 800;
        text-align: right;
    }

/* =========================================================
   LOADING / ACTIONS
   ========================================================= */

.activity-detail-loading[b-m0b87e2nfp] {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: #64748B;
    font-size: 16px;
    font-weight: 700;
}

.activity-detail-actions[b-m0b87e2nfp] {
    margin-top: 16px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
    .activity-detail-page[b-m0b87e2nfp] {
        padding: 24px 20px;
    }

    .activity-detail-main-banner[b-m0b87e2nfp] {
        margin-bottom: 28px;
    }

    .activity-detail-layout[b-m0b87e2nfp] {
        grid-template-columns: 1fr;
    }

    .activity-detail-grid[b-m0b87e2nfp] {
        grid-template-columns: 1fr;
    }

    .activity-summary-card[b-m0b87e2nfp] {
        position: static;
    }
}

@media (max-width: 768px) {
    .activity-detail-header[b-m0b87e2nfp] {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .activity-detail-header-actions[b-m0b87e2nfp] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .activity-detail-btn[b-m0b87e2nfp] {
        width: 100%;
    }

    .activity-detail-panel[b-m0b87e2nfp],
    .activity-summary-card[b-m0b87e2nfp] {
        padding: 16px;
        border-radius: 16px !important;
    }

    .activity-detail-title-row[b-m0b87e2nfp] {
        align-items: flex-start;
        flex-direction: column;
    }

    .activity-detail-statuses[b-m0b87e2nfp] {
        width: 100%;
    }

    .activity-type-chip[b-m0b87e2nfp],
    .activity-status-pill[b-m0b87e2nfp] {
        font-size: 16px;
    }

    .activity-info-card[b-m0b87e2nfp] {
        padding: 14px;
    }

        .activity-info-card strong[b-m0b87e2nfp] {
            font-size: 20px;
        }

    .activity-section-title[b-m0b87e2nfp] {
        font-size: 22px;
    }

    .activity-summary-row[b-m0b87e2nfp] {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

        .activity-summary-row strong[b-m0b87e2nfp] {
            text-align: left;
        }
}

@media (max-width: 640px) {
    .activity-detail-page[b-m0b87e2nfp] {
        padding: 18px 14px;
    }

    .activity-detail-main-banner[b-m0b87e2nfp] {
        margin-bottom: 24px;
    }

    .activity-info-card[b-m0b87e2nfp] {
        flex-direction: column;
    }

    .activity-info-icon[b-m0b87e2nfp] {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
}

.activity-detail-header[b-m0b87e2nfp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 22px;
}

.activity-detail-page-label[b-m0b87e2nfp] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    padding: 0 12px;
    margin-bottom: 12px;
    border-radius: 999px;
    background: #E5E7EB;
    color: #0F172A;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    font-weight: 700;
}

.activity-detail-header h1[b-m0b87e2nfp] {
    margin: 0;
    color: #0F172A;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.activity-detail-header p[b-m0b87e2nfp] {
    margin: 10px 0 0 0;
    max-width: 760px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.6;
}

.activity-detail-title-content[b-m0b87e2nfp] {
    min-width: 0;
}

    .activity-detail-title-content h2[b-m0b87e2nfp] {
        margin: 14px 0 0 0;
        color: #0F172A;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 800;
        letter-spacing: -0.03em;
        word-break: break-word;
    }

    .activity-detail-title-content p[b-m0b87e2nfp] {
        margin: 8px 0 0 0;
        color: #64748B;
        font-size: 16px;
        line-height: 1.5;
    }

.activity-detail-title-row[b-m0b87e2nfp] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

@media (max-width: 768px) {
    .activity-detail-header[b-m0b87e2nfp] {
        flex-direction: column;
    }

    .activity-detail-header-actions[b-m0b87e2nfp] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .activity-detail-title-row[b-m0b87e2nfp] {
        flex-direction: column;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Activities/ActivityEnroll.razor.rz.scp.css */
/* =========================================================
   ACTIVITY ENROLL - LÍNEA GRÁFICA ACTUAL
   Título principal: 24px
   Título 2: 22px
   Subtítulo: 20px
   Texto: 16px
   ========================================================= */

.activity-enroll-page[b-3yudyigrmz] {
    position: relative;
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.activity-enroll-shell[b-3yudyigrmz] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.activity-enroll-bg[b-3yudyigrmz],
.activity-enroll-glow[b-3yudyigrmz],
.activity-enroll-glow-1[b-3yudyigrmz],
.activity-enroll-glow-2[b-3yudyigrmz] {
    display: none !important;
}

/* =========================================================
   BANNER PUBLICIDAD
   ========================================================= */

.activity-enroll-main-banner[b-3yudyigrmz] {
    margin-bottom: 28px;
}

/* =========================================================
   HEADER
   ========================================================= */

.activity-enroll-header[b-3yudyigrmz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.activity-enroll-badge[b-3yudyigrmz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    color: #0F172A;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 14px;
}

.activity-enroll-header h1[b-3yudyigrmz] {
    margin: 0;
    color: #0F172A;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.activity-enroll-header p[b-3yudyigrmz] {
    margin: 12px 0 0 0;
    max-width: 760px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

.activity-enroll-header-actions[b-3yudyigrmz] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

/* =========================================================
   BOTONES PROPIOS
   ========================================================= */

.activity-enroll-btn[b-3yudyigrmz] {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .activity-enroll-btn .rz-icon[b-3yudyigrmz] {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .activity-enroll-btn span[b-3yudyigrmz] {
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

.activity-enroll-btn-primary[b-3yudyigrmz] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .activity-enroll-btn-primary .rz-icon[b-3yudyigrmz] {
        color: #FFFFFF !important;
    }

    .activity-enroll-btn-primary:hover[b-3yudyigrmz] {
        background: #1E293B;
        border-color: #1E293B;
        color: #FFFFFF;
        transform: translateY(-1px);
    }

.activity-enroll-btn-secondary[b-3yudyigrmz] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .activity-enroll-btn-secondary .rz-icon[b-3yudyigrmz] {
        color: #0F172A !important;
    }

    .activity-enroll-btn-secondary:hover[b-3yudyigrmz] {
        background: #CBD5E1;
        border-color: #CBD5E1;
        color: #0F172A;
        transform: translateY(-1px);
    }

.activity-enroll-btn:active[b-3yudyigrmz] {
    transform: scale(0.98);
}

.activity-enroll-btn:disabled[b-3yudyigrmz] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #64748B;
    cursor: not-allowed;
    transform: none;
}

    .activity-enroll-btn:disabled .rz-icon[b-3yudyigrmz] {
        color: #64748B !important;
    }

/* =========================================================
   LAYOUT
   ========================================================= */

.activity-enroll-layout[b-3yudyigrmz] {
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.75fr);
    gap: 22px;
    align-items: flex-start;
}

.activity-enroll-main[b-3yudyigrmz],
.activity-enroll-side[b-3yudyigrmz] {
    min-width: 0;
}

.activity-enroll-panel[b-3yudyigrmz],
.activity-enroll-summary-card[b-3yudyigrmz] {
    border-radius: 18px !important;
    padding: 22px;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: none !important;
}

.activity-enroll-summary-card[b-3yudyigrmz] {
    position: sticky;
    top: 24px;
}

/* =========================================================
   FORMULARIO
   ========================================================= */

.activity-enroll-form[b-3yudyigrmz] {
    width: 100%;
}

.activity-enroll-grid[b-3yudyigrmz] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.activity-enroll-field[b-3yudyigrmz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activity-enroll-field-full[b-3yudyigrmz] {
    grid-column: 1 / -1;
}

.activity-enroll-field label[b-3yudyigrmz] {
    color: #0F172A;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 800;
}

.activity-enroll-section-title[b-3yudyigrmz] {
    margin: 0 0 16px 0;
    color: #0F172A;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}

.activity-enroll-input[b-3yudyigrmz],
.activity-enroll-input.rz-textarea[b-3yudyigrmz],
.activity-enroll-input textarea[b-3yudyigrmz],
.rz-textarea.activity-enroll-input[b-3yudyigrmz] {
    width: 100% !important;
    min-height: 130px !important;
    border-radius: 14px !important;
    border: 1px solid #E5E7EB !important;
    background: #F8FAFC !important;
    color: #0F172A !important;
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}

    .activity-enroll-input:focus[b-3yudyigrmz],
    .activity-enroll-input.rz-state-focused[b-3yudyigrmz],
    .rz-textarea.activity-enroll-input:focus[b-3yudyigrmz] {
        border-color: #0F172A !important;
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
    }

/* =========================================================
   ALERTAS
   ========================================================= */

.activity-fixed-alert[b-3yudyigrmz] {
    margin-top: 16px;
    margin-bottom: 8px;
    border-radius: 14px !important;
    font-size: 16px !important;
    line-height: 1.5 !important;
}

    .activity-fixed-alert .rz-alert-message[b-3yudyigrmz],
    .activity-fixed-alert .rz-alert-content[b-3yudyigrmz] {
        font-size: 16px !important;
        line-height: 1.5 !important;
    }

/* =========================================================
   ACCIONES
   ========================================================= */

.activity-enroll-actions[b-3yudyigrmz] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    flex-wrap: wrap;
}

/* =========================================================
   RESUMEN
   ========================================================= */

.activity-enroll-summary-title[b-3yudyigrmz] {
    margin: 0 0 16px 0;
    color: #0F172A;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
}

.activity-enroll-summary-list[b-3yudyigrmz] {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.activity-enroll-summary-row[b-3yudyigrmz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #E5E7EB !important;
}

    .activity-enroll-summary-row:first-child[b-3yudyigrmz] {
        padding-top: 0;
    }

    .activity-enroll-summary-row span[b-3yudyigrmz] {
        color: #64748B;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 500;
    }

    .activity-enroll-summary-row strong[b-3yudyigrmz] {
        color: #0F172A;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 800;
        text-align: right;
    }

/* =========================================================
   LOADING
   ========================================================= */

.activity-enroll-loading[b-3yudyigrmz] {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: #64748B;
    font-size: 16px;
    font-weight: 700;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
    .activity-enroll-page[b-3yudyigrmz] {
        padding: 24px 20px;
    }

    .activity-enroll-main-banner[b-3yudyigrmz] {
        margin-bottom: 28px;
    }

    .activity-enroll-layout[b-3yudyigrmz] {
        grid-template-columns: 1fr;
    }

    .activity-enroll-summary-card[b-3yudyigrmz] {
        position: static;
    }
}

@media (max-width: 768px) {
    .activity-enroll-header[b-3yudyigrmz] {
        flex-direction: column;
        gap: 18px;
    }

    .activity-enroll-header-actions[b-3yudyigrmz] {
        width: 100%;
    }

        .activity-enroll-header-actions .activity-enroll-btn[b-3yudyigrmz] {
            width: 100%;
        }

    .activity-enroll-grid[b-3yudyigrmz] {
        grid-template-columns: 1fr;
    }

    .activity-enroll-panel[b-3yudyigrmz],
    .activity-enroll-summary-card[b-3yudyigrmz] {
        padding: 16px;
        border-radius: 16px !important;
    }

    .activity-enroll-actions[b-3yudyigrmz] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

        .activity-enroll-actions .activity-enroll-btn[b-3yudyigrmz] {
            width: 100%;
        }

    .activity-enroll-summary-row[b-3yudyigrmz] {
        align-items: flex-start;
        flex-direction: column;
        gap: 6px;
    }

        .activity-enroll-summary-row strong[b-3yudyigrmz] {
            text-align: left;
        }
}

@media (max-width: 640px) {
    .activity-enroll-page[b-3yudyigrmz] {
        padding: 18px 14px;
    }

    .activity-enroll-main-banner[b-3yudyigrmz] {
        margin-bottom: 24px;
    }

    .activity-enroll-header h1[b-3yudyigrmz] {
        font-size: 24px;
    }

    .activity-enroll-header p[b-3yudyigrmz],
    .activity-enroll-badge[b-3yudyigrmz] {
        font-size: 16px;
    }

    .activity-enroll-section-title[b-3yudyigrmz] {
        font-size: 22px;
    }

    .activity-enroll-summary-title[b-3yudyigrmz] {
        font-size: 20px;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Activities/ActivityEnrollmentAdmin.razor.rz.scp.css */
/* =========================================================
   ACTIVITY ENROLLMENTS - LÍNEA GRÁFICA ACTUAL
   Título principal: 24px
   Título 2: 22px
   Subtítulo: 20px
   Texto: 16px
   ========================================================= */

.activity-enrollments-page[b-f9kpoh15wu] {
    position: relative;
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.activity-enrollments-shell[b-f9kpoh15wu] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.activity-enrollments-bg[b-f9kpoh15wu],
.activity-enrollments-glow[b-f9kpoh15wu],
.activity-enrollments-glow-1[b-f9kpoh15wu],
.activity-enrollments-glow-2[b-f9kpoh15wu] {
    display: none !important;
}

/* =========================================================
   BANNER PUBLICIDAD
   ========================================================= */

.activity-enrollments-main-banner[b-f9kpoh15wu] {
    margin-bottom: 28px;
}

/* =========================================================
   HEADER
   ========================================================= */

.activity-enrollments-header[b-f9kpoh15wu] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.activity-enrollments-badge[b-f9kpoh15wu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    color: #0F172A;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 14px;
}

.activity-enrollments-header h1[b-f9kpoh15wu] {
    margin: 0;
    color: #0F172A;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.activity-enrollments-header p[b-f9kpoh15wu] {
    margin: 12px 0 0 0;
    max-width: 760px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

.activity-enrollments-header-actions[b-f9kpoh15wu] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

/* =========================================================
   BOTONES PROPIOS
   ========================================================= */

.activity-enrollments-btn[b-f9kpoh15wu] {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .activity-enrollments-btn .rz-icon[b-f9kpoh15wu] {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .activity-enrollments-btn span[b-f9kpoh15wu] {
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

.activity-enrollments-btn-primary[b-f9kpoh15wu] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .activity-enrollments-btn-primary .rz-icon[b-f9kpoh15wu] {
        color: #FFFFFF !important;
    }

    .activity-enrollments-btn-primary:hover[b-f9kpoh15wu] {
        background: #1E293B;
        border-color: #1E293B;
        color: #FFFFFF;
        transform: translateY(-1px);
    }

.activity-enrollments-btn-secondary[b-f9kpoh15wu] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .activity-enrollments-btn-secondary .rz-icon[b-f9kpoh15wu] {
        color: #0F172A !important;
    }

    .activity-enrollments-btn-secondary:hover[b-f9kpoh15wu] {
        background: #CBD5E1;
        border-color: #CBD5E1;
        color: #0F172A;
        transform: translateY(-1px);
    }

.activity-enrollments-btn:active[b-f9kpoh15wu] {
    transform: scale(0.98);
}

.activity-enrollments-btn:disabled[b-f9kpoh15wu] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #64748B;
    cursor: not-allowed;
    transform: none;
}

    .activity-enrollments-btn:disabled .rz-icon[b-f9kpoh15wu] {
        color: #64748B !important;
    }

/* =========================================================
   PANEL
   ========================================================= */

.activity-enrollments-panel[b-f9kpoh15wu] {
    border-radius: 18px !important;
    padding: 22px;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: none !important;
    min-width: 0;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.activity-enrollments-toolbar[b-f9kpoh15wu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.activity-enrollments-toolbar-left[b-f9kpoh15wu] {
    display: flex;
    gap: 12px;
    flex: 1;
    min-width: 0;
}

.activity-enrollments-search[b-f9kpoh15wu] {
    flex: 1.3;
}

.activity-enrollments-filter[b-f9kpoh15wu] {
    width: 260px;
}

.activity-enrollments-toolbar-right[b-f9kpoh15wu] {
    display: flex;
    gap: 10px;
}

/* =========================================================
   INPUTS RADZEN
   ========================================================= */

.activity-enrollments-panel .rz-textbox[b-f9kpoh15wu],
.activity-enrollments-panel .rz-dropdown[b-f9kpoh15wu],
.activity-enrollments-panel .rz-dropdown-label[b-f9kpoh15wu] {
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
}

.activity-enrollments-panel .rz-textbox[b-f9kpoh15wu],
.activity-enrollments-panel .rz-dropdown[b-f9kpoh15wu] {
    min-height: 40px !important;
    border-radius: 10px !important;
    border-color: #E5E7EB !important;
    box-shadow: none !important;
}

    .activity-enrollments-panel .rz-textbox:focus[b-f9kpoh15wu],
    .activity-enrollments-panel .rz-dropdown:focus-within[b-f9kpoh15wu] {
        border-color: #0F172A !important;
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
    }

/* =========================================================
   TABLA CON SCROLL HORIZONTAL
   ========================================================= */

.activity-enrollments-table-scroll[b-f9kpoh15wu] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    padding-bottom: 8px;
}

.activity-enrollments-grid[b-f9kpoh15wu] {
    border-radius: 14px;
    overflow: hidden;
}

.activity-enrollments-grid-scrollable[b-f9kpoh15wu] {
    width: 100%;
    min-width: 1220px;
}

.activity-enrollments-table-scroll[b-f9kpoh15wu]  .rz-data-grid,
.activity-enrollments-table-scroll[b-f9kpoh15wu]  .rz-grid,
.activity-enrollments-table-scroll[b-f9kpoh15wu]  .rz-grid-table,
.activity-enrollments-table-scroll[b-f9kpoh15wu]  table {
    min-width: 1220px;
}

.activity-enrollments-table-scroll[b-f9kpoh15wu]::-webkit-scrollbar {
    height: 8px;
}

.activity-enrollments-table-scroll[b-f9kpoh15wu]::-webkit-scrollbar-track {
    background: #EEF2F7;
    border-radius: 999px;
}

.activity-enrollments-table-scroll[b-f9kpoh15wu]::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 999px;
}

    .activity-enrollments-table-scroll[b-f9kpoh15wu]::-webkit-scrollbar-thumb:hover {
        background: #94A3B8;
    }

/* =========================================================
   RADZEN GRID - LIMPIO
   ========================================================= */

.activity-enrollments-grid[b-f9kpoh15wu]  .rz-datatable-tablewrapper table,
.activity-enrollments-grid .rz-datatable-tablewrapper table[b-f9kpoh15wu] {
    border-collapse: separate;
    border-spacing: 0 10px;
}

.activity-enrollments-grid[b-f9kpoh15wu]  .rz-column-title,
.activity-enrollments-grid .rz-column-title[b-f9kpoh15wu] {
    color: #64748B !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.activity-enrollments-grid[b-f9kpoh15wu]  .rz-cell-data,
.activity-enrollments-grid .rz-cell-data[b-f9kpoh15wu],
.activity-enrollments-grid[b-f9kpoh15wu]  td,
.activity-enrollments-grid td[b-f9kpoh15wu] {
    color: #0F172A !important;
    font-size: 16px !important;
}

.activity-enrollments-grid[b-f9kpoh15wu]  .rz-data-row td,
.activity-enrollments-grid .rz-data-row td[b-f9kpoh15wu] {
    background: #F8FAFC !important;
    border-top: 1px solid #E5E7EB !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding-top: 16px;
    padding-bottom: 16px;
}

    .activity-enrollments-grid[b-f9kpoh15wu]  .rz-data-row td:first-child,
    .activity-enrollments-grid .rz-data-row td:first-child[b-f9kpoh15wu] {
        border-left: 1px solid #E5E7EB !important;
        border-top-left-radius: 14px;
        border-bottom-left-radius: 14px;
    }

    .activity-enrollments-grid[b-f9kpoh15wu]  .rz-data-row td:last-child,
    .activity-enrollments-grid .rz-data-row td:last-child[b-f9kpoh15wu] {
        border-right: 1px solid #E5E7EB !important;
        border-top-right-radius: 14px;
        border-bottom-right-radius: 14px;
    }

.activity-enrollments-grid[b-f9kpoh15wu]  .rz-paginator,
.activity-enrollments-grid .rz-paginator[b-f9kpoh15wu] {
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
}

/* =========================================================
   CELDAS
   ========================================================= */

.enrollment-main-cell[b-f9kpoh15wu] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.enrollment-main-title[b-f9kpoh15wu] {
    color: #0F172A;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 800;
}

.enrollment-main-subtitle[b-f9kpoh15wu] {
    color: #64748B;
    font-size: 16px;
    line-height: 1.35;
    font-weight: 500;
}

/* =========================================================
   ESTADOS
   ========================================================= */

.enrollment-status-pill[b-f9kpoh15wu] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-confirmed[b-f9kpoh15wu] {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
}

.status-waiting[b-f9kpoh15wu] {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}

.status-attended[b-f9kpoh15wu] {
    background: #DBEAFE;
    color: #1D4ED8;
    border-color: #BFDBFE;
}

.status-cancelled[b-f9kpoh15wu] {
    background: #FEE2E2;
    color: #991B1B;
    border-color: #FECACA;
}

.status-default[b-f9kpoh15wu] {
    background: #E5E7EB;
    color: #374151;
    border-color: #CBD5E1;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1024px) {
    .activity-enrollments-page[b-f9kpoh15wu] {
        padding: 24px 20px;
    }

    .activity-enrollments-main-banner[b-f9kpoh15wu] {
        margin-bottom: 28px;
    }

    .activity-enrollments-toolbar[b-f9kpoh15wu] {
        flex-direction: column;
        align-items: stretch;
    }

    .activity-enrollments-toolbar-left[b-f9kpoh15wu] {
        flex-direction: column;
    }

    .activity-enrollments-filter[b-f9kpoh15wu] {
        width: 100%;
    }

    .activity-enrollments-grid-scrollable[b-f9kpoh15wu],
    .activity-enrollments-table-scroll[b-f9kpoh15wu]  .rz-data-grid,
    .activity-enrollments-table-scroll[b-f9kpoh15wu]  .rz-grid,
    .activity-enrollments-table-scroll[b-f9kpoh15wu]  .rz-grid-table,
    .activity-enrollments-table-scroll[b-f9kpoh15wu]  table {
        min-width: 1180px;
    }
}

@media (max-width: 768px) {
    .activity-enrollments-header[b-f9kpoh15wu] {
        flex-direction: column;
        gap: 18px;
    }

    .activity-enrollments-header-actions[b-f9kpoh15wu] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

        .activity-enrollments-header-actions .activity-enrollments-btn[b-f9kpoh15wu],
        .activity-enrollments-toolbar-right .activity-enrollments-btn[b-f9kpoh15wu] {
            width: 100%;
        }

    .activity-enrollments-panel[b-f9kpoh15wu] {
        padding: 16px;
        border-radius: 16px !important;
    }

    .activity-enrollments-table-scroll[b-f9kpoh15wu] {
        margin-top: 4px;
        padding-bottom: 10px;
    }

        .activity-enrollments-grid-scrollable[b-f9kpoh15wu],
        .activity-enrollments-table-scroll[b-f9kpoh15wu]  .rz-data-grid,
        .activity-enrollments-table-scroll[b-f9kpoh15wu]  .rz-grid,
        .activity-enrollments-table-scroll[b-f9kpoh15wu]  .rz-grid-table,
        .activity-enrollments-table-scroll[b-f9kpoh15wu]  table {
            min-width: 1120px;
        }
}

@media (max-width: 640px) {
    .activity-enrollments-page[b-f9kpoh15wu] {
        padding: 18px 14px;
    }

    .activity-enrollments-main-banner[b-f9kpoh15wu] {
        margin-bottom: 24px;
    }

    .activity-enrollments-header h1[b-f9kpoh15wu] {
        font-size: 24px;
    }

    .activity-enrollments-header p[b-f9kpoh15wu],
    .activity-enrollments-badge[b-f9kpoh15wu] {
        font-size: 16px;
    }

    .activity-enrollments-grid-scrollable[b-f9kpoh15wu],
    .activity-enrollments-table-scroll[b-f9kpoh15wu]  .rz-data-grid,
    .activity-enrollments-table-scroll[b-f9kpoh15wu]  .rz-grid,
    .activity-enrollments-table-scroll[b-f9kpoh15wu]  .rz-grid-table,
    .activity-enrollments-table-scroll[b-f9kpoh15wu]  table {
        min-width: 1080px;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Activities/Component_Activities.razor.rz.scp.css */
/* =========================================================
   ACTIVIDADES - CALENDARIO
   Tipografía estándar:
   Título: 24px
   Título 2: 22px
   Subtítulo: 20px
   Texto: 16px
   ========================================================= */

.activities-page[b-l2h7thsyae] {
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter';
    padding: 30px 34px;
    box-sizing: border-box;
}

.activities-shell[b-l2h7thsyae] {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

/* =========================================================
   BANNER
   ========================================================= */

.activities-main-banner[b-l2h7thsyae] {
    margin-bottom: 52px;
}

/* =========================================================
   HEADER / RESUMEN
   ========================================================= */

.activities-header[b-l2h7thsyae] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 28px;
    margin-bottom: 18px;
}

.activities-title-block h1[b-l2h7thsyae] {
    margin: 0;
    color: #0F172A;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.activities-summary-grid[b-l2h7thsyae] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.activities-summary-card[b-l2h7thsyae] {
    width: 154px;
    min-height: 72px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 8px;
    box-shadow: none;
}

    .activities-summary-card strong[b-l2h7thsyae] {
        color: #0F172A;
        font-size: 24px;
        line-height: 1;
        font-weight: 800;
    }

    .activities-summary-card span[b-l2h7thsyae] {
        color: #94A3B8;
        font-size: 16px;
        line-height: 1.15;
        font-weight: 500;
        text-align: center;
    }

/* =========================================================
   TOOLBAR / FILTROS
   ========================================================= */

.activities-calendar-area[b-l2h7thsyae] {
    width: 100%;
}

.activities-toolbar[b-l2h7thsyae] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

.activities-month-control[b-l2h7thsyae] {
    display: inline-flex;
    align-items: center;
    gap: 18px;
}

    .activities-month-control span[b-l2h7thsyae] {
        min-width: 150px;
        color: #0F172A;
        font-size: 20px;
        line-height: 1;
        font-weight: 800;
        text-transform: capitalize;
    }

.activities-nav-btn[b-l2h7thsyae] {
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #0F172A;
    font-size: 24px;
    line-height: 1;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

    .activities-nav-btn:hover[b-l2h7thsyae] {
        background: #E5E7EB;
    }

    .activities-nav-btn:active[b-l2h7thsyae] {
        transform: scale(0.95);
    }

.activities-filter-group[b-l2h7thsyae] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}

.activities-filter-pill[b-l2h7thsyae] {
    height: 40px;
    min-width: 90px;
    padding: 0 18px;
    border: 0;
    border-radius: 8px;
    background: #E5E7EB;
    color: #0F172A;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .activities-filter-pill:hover[b-l2h7thsyae] {
        background: #CBD5E1;
    }

    .activities-filter-pill.is-active[b-l2h7thsyae] {
        background: #0F172A;
        color: #FFFFFF;
    }

    .activities-filter-pill:active[b-l2h7thsyae] {
        transform: scale(0.98);
    }

/* =========================================================
   LOADING
   ========================================================= */

.activities-loader[b-l2h7thsyae] {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: #64748B;
    font-size: 16px;
    font-weight: 700;
}

/* =========================================================
   CALENDARIO MES / SEMANA
   ========================================================= */

.activities-calendar-scroll[b-l2h7thsyae] {
    width: 100%;
    overflow-x: auto;
    padding-bottom: 14px;
}

    .activities-calendar-scroll[b-l2h7thsyae]::-webkit-scrollbar {
        height: 8px;
    }

    .activities-calendar-scroll[b-l2h7thsyae]::-webkit-scrollbar-track {
        background: #EEF2F7;
        border-radius: 999px;
    }

    .activities-calendar-scroll[b-l2h7thsyae]::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 999px;
    }

.activities-calendar-board[b-l2h7thsyae] {
    min-width: 1120px;
    border-bottom: 1px solid #E5E7EB;
}

    .activities-calendar-board.is-week-view[b-l2h7thsyae] {
        min-width: 980px;
    }

.activities-weekdays[b-l2h7thsyae] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
}

.activities-weekday[b-l2h7thsyae] {
    height: 42px;
    color: #64748B;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    border-left: 1px solid #E5E7EB;
}

    .activities-weekday:last-child[b-l2h7thsyae] {
        border-right: 1px solid #E5E7EB;
    }

.activities-calendar-grid[b-l2h7thsyae] {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    border-top: 1px solid #E5E7EB;
    border-left: 1px solid #E5E7EB;
}

.activities-calendar-day[b-l2h7thsyae] {
    min-height: 122px;
    background: #FFFFFF;
    border-right: 1px solid #E5E7EB;
    border-bottom: 1px solid #E5E7EB;
    padding: 10px 9px;
    box-sizing: border-box;
    overflow: hidden;
}

.is-week-view .activities-calendar-day[b-l2h7thsyae] {
    min-height: 170px;
}

.activities-calendar-day.is-outside-month[b-l2h7thsyae] {
    background: #F8FAFC;
}

    .activities-calendar-day.is-outside-month .activities-day-number[b-l2h7thsyae] {
        color: #CBD5E1;
    }

.activities-calendar-day.is-today .activities-day-number[b-l2h7thsyae] {
    color: #22C55E;
    font-weight: 800;
}

.activities-day-number[b-l2h7thsyae] {
    color: #0F172A;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 10px;
}

.activities-day-events[b-l2h7thsyae] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.activities-event-chip[b-l2h7thsyae] {
    width: 100%;
    min-height: 28px;
    border: 0;
    border-radius: 6px;
    padding: 4px 8px;
    color: #FFFFFF;
    font-size: 16px;
    line-height: 1.15;
    font-weight: 700;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    transition: transform 0.16s ease, opacity 0.16s ease;
}

    .activities-event-chip:hover[b-l2h7thsyae] {
        opacity: 0.92;
        transform: translateY(-1px);
    }

    .activities-event-chip:active[b-l2h7thsyae] {
        transform: scale(0.99);
    }

.activity-course[b-l2h7thsyae] {
    background: #3B82F6;
}

.activity-workshop[b-l2h7thsyae] {
    background: #8B5CF6;
}

.activity-training[b-l2h7thsyae] {
    background: #64748B;
}

.activity-unavailable[b-l2h7thsyae] {
    background: #64748B;
}

.activities-event-more[b-l2h7thsyae] {
    background: #0F172A;
    text-align: center;
}

/* =========================================================
   VISTA ANUAL
   ========================================================= */

.activities-year-view[b-l2h7thsyae] {
    width: 100%;
}

.activities-year-grid[b-l2h7thsyae] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.activities-year-month-card[b-l2h7thsyae] {
    min-height: 265px;
    padding: 16px;
    border-radius: 16px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .activities-year-month-card:hover[b-l2h7thsyae] {
        transform: translateY(-2px);
        border-color: #CBD5E1;
        box-shadow: 0 12px 26px rgba(15, 23, 42, 0.08);
    }

    .activities-year-month-card.is-current-month[b-l2h7thsyae] {
        border-color: #0F172A;
    }

    .activities-year-month-card.has-activities[b-l2h7thsyae] {
        background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%);
    }

.activities-year-month-header[b-l2h7thsyae] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

    .activities-year-month-header h3[b-l2h7thsyae] {
        margin: 0;
        color: #0F172A;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .activities-year-month-header p[b-l2h7thsyae] {
        margin: 4px 0 0 0;
        color: #64748B;
        font-size: 16px;
        line-height: 1.25;
        font-weight: 600;
    }

    .activities-year-month-header span[b-l2h7thsyae] {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        border-radius: 999px;
        background: #0F172A;
        color: #FFFFFF;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 16px;
        font-weight: 800;
    }

.activities-year-stats[b-l2h7thsyae] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

    .activities-year-stats small[b-l2h7thsyae] {
        padding: 7px 10px;
        border-radius: 999px;
        background: #E5E7EB;
        color: #0F172A;
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

.activities-year-list[b-l2h7thsyae] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.activities-year-activity[b-l2h7thsyae] {
    width: 100%;
    min-height: 46px;
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 8px;
    align-items: center;
    border: 0;
    border-radius: 10px;
    padding: 8px;
    color: #FFFFFF;
    cursor: pointer;
    text-align: left;
    transition: opacity 0.16s ease, transform 0.16s ease;
}

    .activities-year-activity:hover[b-l2h7thsyae] {
        opacity: 0.92;
        transform: translateX(2px);
    }

    .activities-year-activity strong[b-l2h7thsyae] {
        font-size: 16px;
        font-weight: 800;
        text-transform: uppercase;
    }

    .activities-year-activity span[b-l2h7thsyae] {
        min-width: 0;
        font-size: 16px;
        font-weight: 700;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.activities-year-more[b-l2h7thsyae],
.activities-year-empty[b-l2h7thsyae] {
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    color: #64748B;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    font-size: 16px;
    font-weight: 700;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
    .activities-year-grid[b-l2h7thsyae] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .activities-page[b-l2h7thsyae] {
        padding: 18px 28px;
    }

    .activities-main-banner[b-l2h7thsyae] {
        margin-bottom: 42px;
    }

    .activities-header[b-l2h7thsyae] {
        flex-direction: column;
        gap: 18px;
    }

    .activities-summary-grid[b-l2h7thsyae] {
        width: 100%;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .activities-summary-card[b-l2h7thsyae] {
        width: 100%;
    }

    .activities-toolbar[b-l2h7thsyae] {
        align-items: flex-start;
        flex-direction: column;
    }

    .activities-filter-group[b-l2h7thsyae] {
        width: 100%;
        justify-content: flex-start;
    }

    .activities-calendar-board[b-l2h7thsyae] {
        min-width: 980px;
    }
}

@media (max-width: 900px) {
    .activities-year-grid[b-l2h7thsyae] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .activities-page[b-l2h7thsyae] {
        padding:  14px 24px;
    }

    .activities-main-banner[b-l2h7thsyae] {
        margin-bottom: 38px;
    }

    .activities-title-block h1[b-l2h7thsyae] {
        font-size: 24px;
    }

    .activities-summary-grid[b-l2h7thsyae] {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .activities-summary-card[b-l2h7thsyae] {
        min-height: 76px;
    }

        .activities-summary-card span[b-l2h7thsyae] {
            font-size: 16px;
        }

    .activities-toolbar[b-l2h7thsyae] {
        gap: 14px;
    }

    .activities-month-control[b-l2h7thsyae] {
        width: 100%;
        justify-content: space-between;
    }

        .activities-month-control span[b-l2h7thsyae] {
            min-width: auto;
            text-align: center;
            font-size: 20px;
        }

    .activities-filter-pill[b-l2h7thsyae] {
        flex: 1 1 calc(50% - 8px);
        min-width: 0;
        font-size: 16px;
    }

    .activities-calendar-board[b-l2h7thsyae] {
        min-width: 980px;
    }

    .activities-calendar-day[b-l2h7thsyae] {
        min-height: 118px;
        padding: 8px 7px;
    }

    .activities-event-chip[b-l2h7thsyae] {
        font-size: 16px;
        min-height: 28px;
    }

    .activities-year-grid[b-l2h7thsyae] {
        grid-template-columns: 1fr;
    }

    .activities-year-month-card[b-l2h7thsyae] {
        min-height: auto;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Activities/CreateEvent.razor.rz.scp.css */
/* =========================================================
   EVENT CREATE / EDIT - LÍNEA GRÁFICA ACTUAL
   Título principal: 24px
   Título 2: 22px
   Subtítulo: 20px
   Texto: 16px
   ========================================================= */

.event-create-page[b-0g13ontgv6] {
    position: relative;
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.event-create-shell[b-0g13ontgv6] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.event-create-bg[b-0g13ontgv6],
.event-create-glow[b-0g13ontgv6],
.event-create-glow-1[b-0g13ontgv6],
.event-create-glow-2[b-0g13ontgv6] {
    display: none !important;
}

.event-create-main-banner[b-0g13ontgv6] {
    margin-bottom: 28px;
}

/* =========================
   HEADER
   ========================= */

.event-create-header[b-0g13ontgv6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.event-create-badge[b-0g13ontgv6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    color: #0F172A;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 14px;
}

.event-create-header h1[b-0g13ontgv6] {
    margin: 0;
    color: #0F172A;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.event-create-header p[b-0g13ontgv6] {
    margin: 12px 0 0 0;
    max-width: 760px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.6;
    font-weight: 400;
}

.event-create-header-actions[b-0g13ontgv6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* =========================
   BOTONES PROPIOS
   ========================= */

.event-create-btn[b-0g13ontgv6] {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .event-create-btn .rz-icon[b-0g13ontgv6] {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .event-create-btn span[b-0g13ontgv6] {
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

.event-create-btn-primary[b-0g13ontgv6] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .event-create-btn-primary .rz-icon[b-0g13ontgv6] {
        color: #FFFFFF !important;
    }

    .event-create-btn-primary:hover[b-0g13ontgv6] {
        background: #1E293B;
        border-color: #1E293B;
        color: #FFFFFF;
        transform: translateY(-1px);
    }

.event-create-btn-secondary[b-0g13ontgv6] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .event-create-btn-secondary .rz-icon[b-0g13ontgv6] {
        color: #0F172A !important;
    }

    .event-create-btn-secondary:hover[b-0g13ontgv6] {
        background: #CBD5E1;
        border-color: #CBD5E1;
        color: #0F172A;
        transform: translateY(-1px);
    }

.event-create-btn:disabled[b-0g13ontgv6] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #64748B;
    cursor: not-allowed;
    transform: none;
}

    .event-create-btn:disabled .rz-icon[b-0g13ontgv6] {
        color: #64748B !important;
    }

/* =========================
   LAYOUT
   ========================= */

.event-create-layout[b-0g13ontgv6] {
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(330px, 0.75fr);
    gap: 22px;
    align-items: start;
}

.event-create-main[b-0g13ontgv6],
.event-create-side[b-0g13ontgv6] {
    min-width: 0;
}

.event-form[b-0g13ontgv6] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* =========================
   PANELES
   ========================= */

.event-panel[b-0g13ontgv6],
.event-preview-card[b-0g13ontgv6],
.event-help-card[b-0g13ontgv6] {
    border-radius: 18px !important;
    padding: 22px;
    background: #FFFFFF !important;
    border: 1px solid #E5E7EB !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: none !important;
}

.event-panel-header[b-0g13ontgv6] {
    margin-bottom: 18px;
}

    .event-panel-header h3[b-0g13ontgv6],
    .event-preview-header h3[b-0g13ontgv6] {
        margin: 0;
        color: #0F172A;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .event-panel-header p[b-0g13ontgv6] {
        margin: 8px 0 0 0;
        color: #64748B;
        font-size: 16px;
        line-height: 1.55;
    }

/* =========================
   FORMULARIO
   ========================= */

.event-form-grid[b-0g13ontgv6] {
    display: grid;
    gap: 16px;
}

    .event-form-grid.two-cols[b-0g13ontgv6] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

.event-field[b-0g13ontgv6] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-field-full[b-0g13ontgv6] {
    grid-column: 1 / -1;
}

.event-field label[b-0g13ontgv6] {
    color: #0F172A;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 800;
}

.event-field-help[b-0g13ontgv6] {
    color: #64748B;
    font-size: 16px;
    line-height: 1.4;
}

/* =========================
   INPUTS RADZEN
   ========================= */

.event-create-page .rz-textbox[b-0g13ontgv6],
.event-create-page .rz-dropdown[b-0g13ontgv6],
.event-create-page .rz-datepicker[b-0g13ontgv6],
.event-create-page .rz-numeric[b-0g13ontgv6] {
    width: 100%;
    min-height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid #E5E7EB !important;
    background: #F8FAFC !important;
    color: #0F172A !important;
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
    box-shadow: none !important;
}

.event-create-page .rz-inputtext[b-0g13ontgv6],
.event-create-page .rz-dropdown-label[b-0g13ontgv6],
.event-create-page .rz-spinner-input[b-0g13ontgv6] {
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
    color: #0F172A !important;
}

.event-create-page .rz-placeholder[b-0g13ontgv6] {
    color: #94A3B8 !important;
}

.event-create-page .rz-state-focus[b-0g13ontgv6],
.event-create-page .rz-dropdown:focus-within[b-0g13ontgv6],
.event-create-page .rz-datepicker:focus-within[b-0g13ontgv6],
.event-create-page .rz-numeric:focus-within[b-0g13ontgv6] {
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
    border-color: #0F172A !important;
}

/* =========================
   HTML EDITOR
   ========================= */

.event-create-page .rz-html-editor[b-0g13ontgv6] {
    border-radius: 14px !important;
    overflow: hidden;
    border: 1px solid #E5E7EB !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
}

.event-create-page .rz-html-editor-content[b-0g13ontgv6] {
    padding: 16px;
    min-height: 220px;
    color: #0F172A !important;
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6;
}

.event-create-page .rz-html-editor-toolbar[b-0g13ontgv6] {
    background: #F8FAFC !important;
    border-bottom: 1px solid #E5E7EB !important;
}

/* =========================
   SWITCHES / CONFIGURACIÓN
   ========================= */

.event-settings-grid[b-0g13ontgv6] {
    display: grid;
    gap: 14px;
}

.event-setting-item[b-0g13ontgv6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 18px;
    border-radius: 14px;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
}

.event-setting-title[b-0g13ontgv6] {
    color: #0F172A;
    font-size: 20px;
    line-height: 1.3;
    font-weight: 800;
    margin-bottom: 4px;
}

.event-setting-text[b-0g13ontgv6] {
    color: #64748B;
    font-size: 16px;
    line-height: 1.5;
}

/* =========================
   ACCIONES FORM
   ========================= */

.event-form-actions[b-0g13ontgv6] {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: 6px;
}

/* =========================
   PREVIEW
   ========================= */

.event-create-side[b-0g13ontgv6] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.event-preview-card[b-0g13ontgv6] {
    position: sticky;
    top: 24px;
}

.event-preview-header[b-0g13ontgv6] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.event-preview-eyebrow[b-0g13ontgv6] {
    display: inline-block;
    margin-bottom: 8px;
    color: #64748B;
    font-size: 16px;
    font-weight: 700;
}

.event-type-chip[b-0g13ontgv6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
    font-weight: 800;
    white-space: nowrap;
    border: 1px solid #CBD5E1;
}

.type-course[b-0g13ontgv6],
.type-workshop[b-0g13ontgv6],
.type-training[b-0g13ontgv6] {
    background: #E5E7EB !important;
    border-color: #CBD5E1 !important;
    color: #0F172A !important;
}

.event-preview-info[b-0g13ontgv6] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}

.event-preview-item[b-0g13ontgv6] {
    display: grid;
    grid-template-columns: 42px 1fr;
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: 14px;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
}

.event-preview-icon[b-0g13ontgv6] {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: #E5E7EB !important;
    color: #0F172A !important;
    flex-shrink: 0;
}

    .event-preview-icon .rz-icon[b-0g13ontgv6] {
        font-size: 22px !important;
        color: #0F172A !important;
    }

.event-preview-item strong[b-0g13ontgv6] {
    display: block;
    margin-bottom: 4px;
    color: #0F172A;
    font-size: 20px;
    line-height: 1.25;
    font-weight: 800;
}

.event-preview-item p[b-0g13ontgv6] {
    margin: 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.55;
}

.preview-section-title[b-0g13ontgv6] {
    margin-bottom: 10px;
    color: #0F172A;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}

.event-preview-description-box[b-0g13ontgv6] {
    border-radius: 14px;
    padding: 16px;
    min-height: 160px;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
    color: #475569;
    font-size: 16px;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

    .event-preview-description-box p[b-0g13ontgv6],
    .event-preview-description-box span[b-0g13ontgv6],
    .event-preview-description-box div[b-0g13ontgv6],
    .event-preview-description-box li[b-0g13ontgv6] {
        font-size: 16px;
        line-height: 1.7;
    }

.event-preview-placeholder[b-0g13ontgv6] {
    color: #94A3B8;
    font-size: 16px;
    line-height: 1.5;
}

/* =========================
   VALIDADORES
   ========================= */

.event-create-page .rz-message-error[b-0g13ontgv6] {
    color: #B42318;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 700;
}

.event-create-loading[b-0g13ontgv6] {
    min-height: 320px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: #64748B;
    font-size: 16px;
    font-weight: 700;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 1200px) {
    .event-create-layout[b-0g13ontgv6] {
        grid-template-columns: 1fr;
    }

    .event-preview-card[b-0g13ontgv6] {
        position: static;
    }

    .event-create-header[b-0g13ontgv6] {
        flex-direction: column;
    }
}

@media (max-width: 768px) {
    .event-create-page[b-0g13ontgv6] {
        padding: 24px 20px;
    }

    .event-form-grid.two-cols[b-0g13ontgv6] {
        grid-template-columns: 1fr;
    }

    .event-panel[b-0g13ontgv6],
    .event-preview-card[b-0g13ontgv6],
    .event-help-card[b-0g13ontgv6] {
        padding: 16px;
        border-radius: 16px !important;
    }

    .event-form-actions[b-0g13ontgv6] {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

        .event-form-actions .event-create-btn[b-0g13ontgv6],
        .event-create-header-actions .event-create-btn[b-0g13ontgv6] {
            width: 100%;
        }

    .event-preview-header[b-0g13ontgv6] {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 640px) {
    .event-create-page[b-0g13ontgv6] {
        padding: 18px 14px;
    }

    .event-create-main-banner[b-0g13ontgv6] {
        margin-bottom: 24px;
    }

    .event-create-header h1[b-0g13ontgv6] {
        font-size: 24px;
    }

    .event-create-header p[b-0g13ontgv6],
    .event-create-badge[b-0g13ontgv6],
    .event-field label[b-0g13ontgv6] {
        font-size: 16px;
    }

    .event-setting-item[b-0g13ontgv6] {
        flex-direction: column;
        align-items: flex-start;
    }

    .event-preview-item[b-0g13ontgv6] {
        grid-template-columns: 1fr;
    }

    .event-preview-icon[b-0g13ontgv6] {
        width: 40px;
        height: 40px;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Articles/ArticleAdmin.razor.rz.scp.css */
/* =========================================================
   ARTICLE ADMIN - LÍNEA GRÁFICA ACTUAL
   Título: 24px
   Título 2: 22px
   Subtítulo: 20px
   Texto: 16px
   ========================================================= */

.article-admin-page[b-f8hrs08z8t] {
    position: relative;
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.article-admin-shell[b-f8hrs08z8t] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.article-admin-bg[b-f8hrs08z8t],
.article-admin-glow[b-f8hrs08z8t],
.article-admin-glow-1[b-f8hrs08z8t],
.article-admin-glow-2[b-f8hrs08z8t] {
    display: none !important;
}

/* HEADER */

.article-admin-header[b-f8hrs08z8t] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.article-admin-badge[b-f8hrs08z8t] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    width: fit-content;
    padding: 0 14px;
    border-radius: 999px;
    color: #0F172A;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    margin-bottom: 14px;
}

.article-admin-header h1[b-f8hrs08z8t] {
    margin: 0;
    color: #0F172A;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.article-admin-header p[b-f8hrs08z8t] {
    margin: 12px 0 0 0;
    max-width: 760px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.6;
}

.article-admin-actions[b-f8hrs08z8t] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

/* BOTONES */

.article-admin-btn[b-f8hrs08z8t] {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .article-admin-btn .rz-icon[b-f8hrs08z8t] {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .article-admin-btn span[b-f8hrs08z8t] {
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

.article-admin-btn-primary[b-f8hrs08z8t] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .article-admin-btn-primary .rz-icon[b-f8hrs08z8t] {
        color: #FFFFFF !important;
    }

    .article-admin-btn-primary:hover[b-f8hrs08z8t] {
        background: #1E293B;
        border-color: #1E293B;
        color: #FFFFFF;
        transform: translateY(-1px);
    }

.article-admin-btn-secondary[b-f8hrs08z8t] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .article-admin-btn-secondary .rz-icon[b-f8hrs08z8t] {
        color: #0F172A !important;
    }

    .article-admin-btn-secondary:hover[b-f8hrs08z8t] {
        background: #CBD5E1;
        border-color: #CBD5E1;
        color: #0F172A;
        transform: translateY(-1px);
    }

/* CARD */

.article-admin-card[b-f8hrs08z8t] {
    border-radius: 18px !important;
    border: 1px solid #E5E7EB !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    padding: 22px;
}

/* TOOLBAR */

.article-admin-toolbar[b-f8hrs08z8t] {
    display: grid;
    grid-template-columns: minmax(280px, 1fr) auto;
    gap: 14px;
    align-items: center;
    margin-bottom: 18px;
}

.article-admin-search[b-f8hrs08z8t] {
    position: relative;
    display: flex;
    align-items: center;
}

    .article-admin-search .rz-icon[b-f8hrs08z8t] {
        position: absolute;
        left: 14px;
        color: #64748B !important;
        font-size: 21px !important;
        z-index: 2;
    }

.article-admin-input[b-f8hrs08z8t] {
    width: 100%;
    min-height: 40px;
    padding: 9px 14px 9px 44px;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    outline: none;
    box-sizing: border-box;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .article-admin-input[b-f8hrs08z8t]::placeholder {
        color: #94A3B8;
        font-weight: 500;
    }

    .article-admin-input:hover[b-f8hrs08z8t] {
        background: #FFFFFF;
        border-color: #CBD5E1;
    }

    .article-admin-input:focus[b-f8hrs08z8t] {
        border-color: #0F172A;
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
        background: #FFFFFF;
    }

.article-admin-filters[b-f8hrs08z8t] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.article-admin-filter[b-f8hrs08z8t] {
    min-width: 170px;
}

.article-admin-card .rz-dropdown[b-f8hrs08z8t],
.article-admin-card .rz-dropdown-label[b-f8hrs08z8t] {
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
}

.article-admin-card .rz-dropdown[b-f8hrs08z8t] {
    min-height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid #E5E7EB !important;
    background: #F8FAFC !important;
    box-shadow: none !important;
}

    .article-admin-card .rz-dropdown:focus-within[b-f8hrs08z8t] {
        border-color: #0F172A !important;
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
    }

/* STATS */

.article-admin-summary[b-f8hrs08z8t] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.article-admin-stat[b-f8hrs08z8t] {
    padding: 16px;
    border-radius: 14px;
    background: #F8FAFC !important;
    border: 1px solid #E5E7EB !important;
}

    .article-admin-stat span[b-f8hrs08z8t] {
        display: block;
        color: #64748B;
        font-size: 16px;
        font-weight: 700;
    }

    .article-admin-stat strong[b-f8hrs08z8t] {
        display: block;
        margin-top: 6px;
        color: #0F172A;
        font-size: 24px;
        line-height: 1.1;
        font-weight: 800;
    }

/* TABLA */

.article-admin-table-scroll[b-f8hrs08z8t] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 14px;
    padding-bottom: 8px;
}

.article-admin-grid[b-f8hrs08z8t] {
    overflow: hidden;
    border-radius: 14px;
}

.article-admin-grid-scrollable[b-f8hrs08z8t] {
    width: 100%;
    min-width: 1340px;
}

.article-admin-table-scroll[b-f8hrs08z8t]  .rz-data-grid,
.article-admin-table-scroll[b-f8hrs08z8t]  .rz-grid,
.article-admin-table-scroll[b-f8hrs08z8t]  .rz-grid-table,
.article-admin-table-scroll[b-f8hrs08z8t]  table {
    min-width: 1340px;
}

.article-admin-table-scroll[b-f8hrs08z8t]::-webkit-scrollbar {
    height: 8px;
}

.article-admin-table-scroll[b-f8hrs08z8t]::-webkit-scrollbar-track {
    background: #EEF2F7;
    border-radius: 999px;
}

.article-admin-table-scroll[b-f8hrs08z8t]::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 999px;
}

    .article-admin-table-scroll[b-f8hrs08z8t]::-webkit-scrollbar-thumb:hover {
        background: #94A3B8;
    }

.article-admin-grid[b-f8hrs08z8t]  .rz-data-grid {
    border: none !important;
}

.article-admin-grid[b-f8hrs08z8t]  .rz-grid-table {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

    .article-admin-grid[b-f8hrs08z8t]  .rz-grid-table thead th,
    .article-admin-grid[b-f8hrs08z8t]  .rz-datatable-thead th {
        background: #F8FAFC !important;
        border-bottom: 1px solid #E5E7EB !important;
        color: #64748B !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        padding: 14px 16px !important;
        text-transform: none !important;
        letter-spacing: 0 !important;
    }

.article-admin-grid[b-f8hrs08z8t]  .rz-column-title {
    color: #64748B !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.article-admin-grid[b-f8hrs08z8t]  .rz-datatable-data td,
.article-admin-grid[b-f8hrs08z8t]  .rz-data-row td {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding: 14px 16px !important;
    vertical-align: middle !important;
}

.article-admin-grid[b-f8hrs08z8t]  .rz-data-row:hover td,
.article-admin-grid[b-f8hrs08z8t]  .rz-datatable-data tr:hover td {
    background: #F8FAFC !important;
}

.article-admin-grid[b-f8hrs08z8t]  .rz-cell-data,
.article-admin-grid[b-f8hrs08z8t]  td {
    color: #0F172A !important;
    font-size: 16px !important;
}

.article-admin-grid[b-f8hrs08z8t]  .rz-paginator {
    border-top: 1px solid #E5E7EB !important;
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
}

/* CELDAS */

.article-table-info[b-f8hrs08z8t] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.article-table-media[b-f8hrs08z8t] {
    width: 72px;
    height: 58px;
    border-radius: 12px;
    overflow: hidden;
    flex: 0 0 auto;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .article-table-media img[b-f8hrs08z8t] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.article-table-no-image[b-f8hrs08z8t]::before {
    content: "IMG";
    color: #64748B;
    font-size: 16px;
    font-weight: 800;
}

.article-table-video[b-f8hrs08z8t] {
    width: 100%;
    height: 100%;
    background: #E5E7EB;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .article-table-video .rz-icon[b-f8hrs08z8t] {
        color: #0F172A !important;
        font-size: 28px !important;
    }

.article-table-text[b-f8hrs08z8t] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .article-table-text strong[b-f8hrs08z8t] {
        color: #0F172A;
        font-size: 16px;
        font-weight: 800;
        line-height: 1.25;
    }

    .article-table-text span[b-f8hrs08z8t] {
        color: #64748B;
        font-size: 16px;
        font-weight: 600;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .article-table-text small[b-f8hrs08z8t] {
        color: #64748B;
        font-size: 16px;
        line-height: 1.35;
    }

.article-table-categories[b-f8hrs08z8t] {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
}

    .article-table-categories span[b-f8hrs08z8t],
    .article-table-type[b-f8hrs08z8t],
    .article-status[b-f8hrs08z8t],
    .article-featured-badge[b-f8hrs08z8t],
    .article-muted-badge[b-f8hrs08z8t] {
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 11px;
        border-radius: 999px;
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .article-table-categories span[b-f8hrs08z8t],
    .article-table-type[b-f8hrs08z8t],
    .article-muted-badge[b-f8hrs08z8t],
    .article-status-draft[b-f8hrs08z8t] {
        color: #374151;
        background: #E5E7EB;
        border-color: #CBD5E1;
    }

    .article-table-categories em[b-f8hrs08z8t] {
        color: #94A3B8;
        font-size: 16px;
        font-style: normal;
        font-weight: 600;
    }

.article-table-date[b-f8hrs08z8t] {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .article-table-date strong[b-f8hrs08z8t] {
        color: #0F172A;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 800;
    }

.article-status-published[b-f8hrs08z8t] {
    background: #DCFCE7;
    color: #166534;
    border-color: #BBF7D0;
}

.article-featured-badge[b-f8hrs08z8t] {
    background: #FEF3C7;
    color: #92400E;
    border-color: #FDE68A;
}

/* ACCIONES */

.article-table-actions[b-f8hrs08z8t] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.article-action-btn[b-f8hrs08z8t] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border: 1px solid #CBD5E1;
    border-radius: 10px;
    background: #E5E7EB;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
}

    .article-action-btn .rz-icon[b-f8hrs08z8t] {
        color: #0F172A !important;
        font-size: 19px !important;
    }

    .article-action-btn:hover[b-f8hrs08z8t] {
        background: #CBD5E1;
        border-color: #CBD5E1;
    }

.article-action-btn-danger[b-f8hrs08z8t] {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #991B1B;
}

    .article-action-btn-danger .rz-icon[b-f8hrs08z8t] {
        color: #991B1B !important;
    }

    .article-action-btn-danger:hover[b-f8hrs08z8t] {
        background: #FECACA;
        border-color: #FECACA;
    }

/* RESPONSIVE */

@media (max-width: 1180px) {
    .article-admin-toolbar[b-f8hrs08z8t] {
        grid-template-columns: 1fr;
    }

    .article-admin-filters[b-f8hrs08z8t] {
        justify-content: flex-start;
        flex-wrap: wrap;
    }
}

@media (max-width: 820px) {
    .article-admin-page[b-f8hrs08z8t] {
        padding: 24px 20px;
    }

    .article-admin-header[b-f8hrs08z8t] {
        flex-direction: column;
    }

    .article-admin-actions[b-f8hrs08z8t] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

        .article-admin-actions .article-admin-btn[b-f8hrs08z8t] {
            width: 100%;
        }

    .article-admin-card[b-f8hrs08z8t] {
        padding: 16px;
        border-radius: 16px !important;
    }

    .article-admin-summary[b-f8hrs08z8t] {
        grid-template-columns: 1fr;
    }

    .article-admin-filters[b-f8hrs08z8t] {
        flex-direction: column;
        align-items: stretch;
    }

        .article-admin-filter[b-f8hrs08z8t],
        .article-admin-filters .article-admin-btn[b-f8hrs08z8t] {
            width: 100%;
        }

    .article-table-info[b-f8hrs08z8t] {
        align-items: flex-start;
    }

    .article-table-media[b-f8hrs08z8t] {
        width: 60px;
        height: 54px;
    }

    .article-admin-table-scroll[b-f8hrs08z8t] {
        margin-top: 4px;
        padding-bottom: 10px;
    }

        .article-admin-grid-scrollable[b-f8hrs08z8t],
        .article-admin-table-scroll[b-f8hrs08z8t]  .rz-data-grid,
        .article-admin-table-scroll[b-f8hrs08z8t]  .rz-grid,
        .article-admin-table-scroll[b-f8hrs08z8t]  .rz-grid-table,
        .article-admin-table-scroll[b-f8hrs08z8t]  table {
            min-width: 1280px;
        }
}

@media (max-width: 480px) {
    .article-admin-page[b-f8hrs08z8t] {
        padding: 18px 10px;
    }

    .article-admin-header h1[b-f8hrs08z8t] {
        font-size: 24px;
    }

    .article-admin-card[b-f8hrs08z8t] {
        padding: 12px;
    }

    .article-table-text small[b-f8hrs08z8t] {
        display: none;
    }

    .article-admin-grid-scrollable[b-f8hrs08z8t],
    .article-admin-table-scroll[b-f8hrs08z8t]  .rz-data-grid,
    .article-admin-table-scroll[b-f8hrs08z8t]  .rz-grid,
    .article-admin-table-scroll[b-f8hrs08z8t]  .rz-grid-table,
    .article-admin-table-scroll[b-f8hrs08z8t]  table {
        min-width: 1220px;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Articles/ArticleCategoriesAdmin.razor.rz.scp.css */
/* =========================================================
   ARTICLE CATEGORIES - LÍNEA GRÁFICA ACTUAL
   ========================================================= */

.article-categories-page[b-t80rozhrw4] {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.article-categories-shell[b-t80rozhrw4] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    min-width: 0;
    box-sizing: border-box;
}

.article-categories-bg[b-t80rozhrw4],
.article-categories-glow[b-t80rozhrw4],
.article-categories-glow-1[b-t80rozhrw4],
.article-categories-glow-2[b-t80rozhrw4] {
    display: none !important;
}

/* =========================================================
   BANNER
   ========================================================= */

.article-categories-main-banner[b-t80rozhrw4] {
    margin-bottom: 28px;
}

/* =========================================================
   HEADER
   ========================================================= */

.article-categories-header[b-t80rozhrw4] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
    min-width: 0;
}

    .article-categories-header > div:first-child[b-t80rozhrw4] {
        min-width: 0;
    }

.article-categories-badge[b-t80rozhrw4],
.article-categories-mini-badge[b-t80rozhrw4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    color: #0F172A;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.article-categories-badge[b-t80rozhrw4] {
    min-height: 34px;
    padding: 0 14px;
    margin-bottom: 14px;
}

.article-categories-mini-badge[b-t80rozhrw4] {
    min-height: 30px;
    padding: 0 12px;
    margin-bottom: 10px;
}

.article-categories-header h1[b-t80rozhrw4] {
    margin: 0;
    color: #0F172A;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.article-categories-header p[b-t80rozhrw4] {
    margin: 12px 0 0 0;
    max-width: 760px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.6;
}

.article-categories-header-actions[b-t80rozhrw4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

/* =========================================================
   BOTONES
   ========================================================= */

.article-categories-btn[b-t80rozhrw4] {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .article-categories-btn .rz-icon[b-t80rozhrw4] {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .article-categories-btn span[b-t80rozhrw4] {
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

.article-categories-btn-primary[b-t80rozhrw4] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .article-categories-btn-primary .rz-icon[b-t80rozhrw4] {
        color: #FFFFFF !important;
    }

    .article-categories-btn-primary:hover[b-t80rozhrw4] {
        background: #1E293B;
        border-color: #1E293B;
        color: #FFFFFF;
        transform: translateY(-1px);
    }

.article-categories-btn-secondary[b-t80rozhrw4] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .article-categories-btn-secondary .rz-icon[b-t80rozhrw4] {
        color: #0F172A !important;
    }

    .article-categories-btn-secondary:hover[b-t80rozhrw4] {
        background: #CBD5E1;
        border-color: #CBD5E1;
        color: #0F172A;
        transform: translateY(-1px);
    }

.article-categories-btn:disabled[b-t80rozhrw4] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #64748B;
    cursor: not-allowed;
    transform: none;
}

    .article-categories-btn:disabled .rz-icon[b-t80rozhrw4] {
        color: #64748B !important;
    }

/* =========================================================
   LAYOUT
   ========================================================= */

.article-categories-layout[b-t80rozhrw4] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.article-categories-panel[b-t80rozhrw4],
.article-category-form-card[b-t80rozhrw4] {
    border-radius: 18px !important;
    border: 1px solid #E5E7EB !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: none !important;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}

.article-categories-panel[b-t80rozhrw4] {
    padding: 22px;
    width: 100%;
    max-width: 100%;
}

.article-category-form-card[b-t80rozhrw4] {
    padding: 22px;
    width: 390px;
    max-width: 390px;
    position: sticky;
    top: 24px;
}

/* =========================================================
   TOOLBAR
   ========================================================= */

.article-categories-toolbar[b-t80rozhrw4] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.article-categories-search[b-t80rozhrw4] {
    flex: 1 1 auto;
    min-width: 0;
}

.article-categories-toolbar-actions[b-t80rozhrw4] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    min-width: 0;
}

.article-categories-alert[b-t80rozhrw4] {
    margin-bottom: 16px;
    border-radius: 14px !important;
}

/* =========================================================
   INPUTS RADZEN
   ========================================================= */

.article-categories-page .rz-textbox[b-t80rozhrw4],
.article-categories-page .rz-numeric[b-t80rozhrw4],
.article-categories-page .rz-spinner[b-t80rozhrw4],
.article-categories-page .rz-inputtext[b-t80rozhrw4] {
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
}

.article-categories-page .rz-textbox[b-t80rozhrw4],
.article-categories-page .rz-numeric[b-t80rozhrw4],
.article-categories-page .rz-spinner[b-t80rozhrw4] {
    min-height: 40px !important;
    border-radius: 10px !important;
    border: 1px solid #E5E7EB !important;
    background: #F8FAFC !important;
    color: #0F172A !important;
    box-shadow: none !important;
}

    .article-categories-page .rz-textbox:focus[b-t80rozhrw4],
    .article-categories-page .rz-numeric:focus-within[b-t80rozhrw4],
    .article-categories-page .rz-spinner:focus-within[b-t80rozhrw4] {
        border-color: #0F172A !important;
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
    }

/* =========================================================
   TABLA
   ========================================================= */

.article-categories-table-scroll[b-t80rozhrw4] {
    display: block;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-x;
    overscroll-behavior-x: contain;
    border-radius: 14px;
    padding-bottom: 8px;
    box-sizing: border-box;
    scrollbar-width: thin;
}

.article-categories-grid[b-t80rozhrw4] {
    width: 100%;
    border-radius: 14px;
    overflow: hidden;
}

.article-categories-grid-scrollable[b-t80rozhrw4] {
    width: 100%;
    min-width: 920px;
}

.article-categories-table-scroll[b-t80rozhrw4]  .rz-data-grid,
.article-categories-table-scroll[b-t80rozhrw4]  .rz-grid,
.article-categories-table-scroll[b-t80rozhrw4]  .rz-grid-table,
.article-categories-table-scroll[b-t80rozhrw4]  .rz-datatable-tablewrapper,
.article-categories-table-scroll[b-t80rozhrw4]  table {
    min-width: 920px !important;
}

.article-categories-table-scroll[b-t80rozhrw4]::-webkit-scrollbar {
    height: 8px;
}

.article-categories-table-scroll[b-t80rozhrw4]::-webkit-scrollbar-track {
    background: #EEF2F7;
    border-radius: 999px;
}

.article-categories-table-scroll[b-t80rozhrw4]::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 999px;
}

    .article-categories-table-scroll[b-t80rozhrw4]::-webkit-scrollbar-thumb:hover {
        background: #94A3B8;
    }

/* =========================================================
   RADZEN GRID
   ========================================================= */

.article-categories-grid[b-t80rozhrw4]  .rz-datatable-tablewrapper table,
.article-categories-grid .rz-datatable-tablewrapper table[b-t80rozhrw4] {
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

.article-categories-grid[b-t80rozhrw4]  .rz-grid-table,
.article-categories-grid .rz-grid-table[b-t80rozhrw4] {
    background: transparent !important;
}

    .article-categories-grid[b-t80rozhrw4]  .rz-grid-table thead th,
    .article-categories-grid .rz-grid-table thead th[b-t80rozhrw4],
    .article-categories-grid[b-t80rozhrw4]  .rz-datatable-thead th,
    .article-categories-grid .rz-datatable-thead th[b-t80rozhrw4] {
        background: #F8FAFC !important;
        border-bottom: 1px solid #E5E7EB !important;
        color: #64748B !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        padding: 14px 16px !important;
        text-transform: none !important;
    }

.article-categories-grid[b-t80rozhrw4]  .rz-column-title,
.article-categories-grid .rz-column-title[b-t80rozhrw4] {
    color: #64748B !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.article-categories-grid[b-t80rozhrw4]  .rz-data-row td,
.article-categories-grid .rz-data-row td[b-t80rozhrw4],
.article-categories-grid[b-t80rozhrw4]  .rz-datatable-data td,
.article-categories-grid .rz-datatable-data td[b-t80rozhrw4] {
    background: #FFFFFF !important;
    border-bottom: 1px solid #E5E7EB !important;
    padding: 14px 16px !important;
    vertical-align: middle !important;
}

.article-categories-grid[b-t80rozhrw4]  .rz-data-row:hover td,
.article-categories-grid .rz-data-row:hover td[b-t80rozhrw4] {
    background: #F8FAFC !important;
}

.article-categories-grid[b-t80rozhrw4]  .rz-cell-data,
.article-categories-grid .rz-cell-data[b-t80rozhrw4],
.article-categories-grid[b-t80rozhrw4]  td,
.article-categories-grid td[b-t80rozhrw4] {
    color: #0F172A !important;
    font-size: 16px !important;
}

.article-categories-grid[b-t80rozhrw4]  .rz-paginator,
.article-categories-grid .rz-paginator[b-t80rozhrw4] {
    border-top: 1px solid #E5E7EB !important;
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
}

/* =========================================================
   CELDAS
   ========================================================= */

.category-name-cell[b-t80rozhrw4] {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.category-name-text[b-t80rozhrw4] {
    min-width: 0;
}

.category-color-dot[b-t80rozhrw4] {
    width: 42px;
    height: 42px;
    min-width: 42px;
    border-radius: 12px;
    border: 1px solid #CBD5E1;
    box-shadow: inset 0 0 0 2px rgba(255,255,255,0.45);
}

.category-name-cell strong[b-t80rozhrw4] {
    display: block;
    color: #0F172A;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.3;
    word-break: break-word;
}

.category-name-cell small[b-t80rozhrw4] {
    display: -webkit-box;
    margin-top: 4px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.4;
    word-break: break-word;
    overflow: hidden;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.category-color-pill[b-t80rozhrw4] {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    color: var(--category-color);
    background: color-mix(in srgb, var(--category-color) 12%, white);
    border: 1px solid color-mix(in srgb, var(--category-color) 28%, white);
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

.category-count-pill[b-t80rozhrw4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 38px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: #E5E7EB;
    color: #0F172A;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    line-height: 1;
    font-weight: 800;
}

.category-status-pill[b-t80rozhrw4] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}

    .category-status-pill.active[b-t80rozhrw4] {
        background: #DCFCE7;
        color: #166534;
        border: 1px solid #BBF7D0;
    }

    .category-status-pill.inactive[b-t80rozhrw4] {
        background: #E5E7EB;
        color: #374151;
        border: 1px solid #CBD5E1;
    }

.category-actions[b-t80rozhrw4] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.category-action-btn[b-t80rozhrw4] {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    border: 1px solid #CBD5E1;
    background: #E5E7EB;
    color: #0F172A;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
}

    .category-action-btn .rz-icon[b-t80rozhrw4] {
        color: #0F172A !important;
        font-size: 19px !important;
    }

    .category-action-btn:hover[b-t80rozhrw4] {
        background: #CBD5E1;
        border-color: #CBD5E1;
    }

.category-action-btn-danger[b-t80rozhrw4] {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #991B1B;
}

    .category-action-btn-danger .rz-icon[b-t80rozhrw4] {
        color: #991B1B !important;
    }

    .category-action-btn-danger:hover[b-t80rozhrw4] {
        background: #FECACA;
        border-color: #FECACA;
    }

.category-action-btn:disabled[b-t80rozhrw4] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* =========================================================
   FORMULARIO
   ========================================================= */

.article-category-form-header[b-t80rozhrw4] {
    margin-bottom: 18px;
}

    .article-category-form-header h2[b-t80rozhrw4] {
        margin: 0;
        color: #0F172A;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .article-category-form-header p[b-t80rozhrw4] {
        margin: 8px 0 0 0;
        color: #64748B;
        font-size: 16px;
        line-height: 1.55;
    }

.article-category-form-list[b-t80rozhrw4] {
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.article-category-field[b-t80rozhrw4] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

    .article-category-field label[b-t80rozhrw4] {
        color: #0F172A;
        font-size: 16px;
        font-weight: 800;
        margin-bottom: 8px;
    }

.category-input[b-t80rozhrw4],
.category-textarea[b-t80rozhrw4] {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.category-input[b-t80rozhrw4] {
    min-height: 44px;
    padding: 10px 14px;
}

.category-textarea[b-t80rozhrw4] {
    min-height: 96px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.55;
}

    .category-input:focus[b-t80rozhrw4],
    .category-textarea:focus[b-t80rozhrw4] {
        border-color: #0F172A;
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
        background: #FFFFFF;
    }

.article-category-field .validation-message[b-t80rozhrw4],
.article-category-field[b-t80rozhrw4]  .validation-message {
    color: #B42318;
    font-size: 16px;
    margin-top: 6px;
    font-weight: 700;
}

.category-color-control[b-t80rozhrw4] {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-width: 0;
}

.category-color-input[b-t80rozhrw4] {
    flex: 0 0 58px;
    width: 58px;
    height: 44px;
    padding: 4px;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    cursor: pointer;
}

.category-color-control .category-input[b-t80rozhrw4] {
    flex: 1 1 auto;
    min-width: 0;
}

.article-category-radzen-control[b-t80rozhrw4] {
    width: 100%;
}

    .article-category-radzen-control[b-t80rozhrw4]  .rz-numeric,
    .article-category-radzen-control .rz-numeric[b-t80rozhrw4] {
        min-height: 44px;
        border-radius: 10px !important;
        border: 1px solid #E5E7EB !important;
        background: #F8FAFC !important;
        box-shadow: none !important;
    }

.category-active-box[b-t80rozhrw4] {
    margin-top: 2px;
}

.category-switch-row[b-t80rozhrw4] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
    margin: 0;
    min-width: 0;
}

    .category-switch-row span[b-t80rozhrw4] {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-width: 0;
    }

    .category-switch-row strong[b-t80rozhrw4] {
        color: #0F172A;
        font-size: 16px;
        font-weight: 800;
    }

    .category-switch-row small[b-t80rozhrw4] {
        color: #64748B;
        font-size: 16px;
        font-weight: 500;
        line-height: 1.35;
    }

.article-category-preview[b-t80rozhrw4] {
    margin-top: 18px;
    padding: 16px;
    border-radius: 14px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    max-width: 100%;
    overflow: hidden;
}

.article-category-preview-pill[b-t80rozhrw4] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    max-width: 100%;
    min-height: 32px;
    padding: 0 12px;
    border-radius: 999px;
    color: var(--category-color);
    background: color-mix(in srgb, var(--category-color) 12%, white);
    border: 1px solid color-mix(in srgb, var(--category-color) 28%, white);
    font-size: 16px;
    font-weight: 700;
    word-break: break-word;
}

.article-category-form-actions[b-t80rozhrw4] {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .article-category-form-actions .article-categories-btn[b-t80rozhrw4] {
        width: 100%;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .article-categories-layout[b-t80rozhrw4] {
        grid-template-columns: 1fr;
    }

    .article-category-form-card[b-t80rozhrw4] {
        width: 100%;
        max-width: 100%;
        position: static;
    }
}

@media (max-width: 820px) {
    .article-categories-page[b-t80rozhrw4] {
        padding: 24px 20px;
    }

    .article-categories-header[b-t80rozhrw4] {
        flex-direction: column;
        gap: 18px;
    }

    .article-categories-header-actions[b-t80rozhrw4] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

        .article-categories-header-actions .article-categories-btn[b-t80rozhrw4] {
            width: 100%;
        }

    .article-categories-panel[b-t80rozhrw4],
    .article-category-form-card[b-t80rozhrw4] {
        padding: 16px;
        border-radius: 16px !important;
    }

    .article-categories-toolbar[b-t80rozhrw4] {
        flex-direction: column;
        align-items: stretch;
    }

    .article-categories-toolbar-actions[b-t80rozhrw4] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

        .article-categories-toolbar-actions .article-categories-btn[b-t80rozhrw4] {
            width: 100%;
        }

    .article-categories-table-scroll[b-t80rozhrw4] {
        margin-top: 4px;
        padding-bottom: 10px;
    }

        .article-categories-grid-scrollable[b-t80rozhrw4],
        .article-categories-table-scroll[b-t80rozhrw4]  .rz-data-grid,
        .article-categories-table-scroll[b-t80rozhrw4]  .rz-grid,
        .article-categories-table-scroll[b-t80rozhrw4]  .rz-grid-table,
        .article-categories-table-scroll[b-t80rozhrw4]  .rz-datatable-tablewrapper,
        .article-categories-table-scroll[b-t80rozhrw4]  table {
            min-width: 880px !important;
        }
}

@media (max-width: 480px) {
    .article-categories-page[b-t80rozhrw4] {
        padding: 18px 10px;
    }

    .article-categories-main-banner[b-t80rozhrw4] {
        margin-bottom: 24px;
    }

    .article-categories-header h1[b-t80rozhrw4] {
        font-size: 24px;
    }

    .article-categories-header p[b-t80rozhrw4],
    .article-categories-badge[b-t80rozhrw4],
    .article-categories-mini-badge[b-t80rozhrw4] {
        font-size: 16px;
    }

    .article-categories-panel[b-t80rozhrw4],
    .article-category-form-card[b-t80rozhrw4] {
        padding: 12px;
    }

    .category-name-cell[b-t80rozhrw4] {
        align-items: flex-start;
    }

    .category-color-dot[b-t80rozhrw4] {
        width: 36px;
        height: 36px;
        min-width: 36px;
    }

    .category-color-input[b-t80rozhrw4] {
        flex: 0 0 48px;
        width: 48px;
    }

    .category-switch-row[b-t80rozhrw4] {
        align-items: flex-start;
        flex-direction: column;
    }

    .article-categories-grid-scrollable[b-t80rozhrw4],
    .article-categories-table-scroll[b-t80rozhrw4]  .rz-data-grid,
    .article-categories-table-scroll[b-t80rozhrw4]  .rz-grid,
    .article-categories-table-scroll[b-t80rozhrw4]  .rz-grid-table,
    .article-categories-table-scroll[b-t80rozhrw4]  .rz-datatable-tablewrapper,
    .article-categories-table-scroll[b-t80rozhrw4]  table {
        min-width: 840px !important;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Articles/ArticleCreate.razor.rz.scp.css */
/* =========================================================
   ARTICLE FORM - LÍNEA GRÁFICA ACTUAL
   ========================================================= */

.article-form-page[b-8ueekg2e1y] {
    position: relative;
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.article-form-shell[b-8ueekg2e1y] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
}

.article-form-bg[b-8ueekg2e1y],
.article-form-glow[b-8ueekg2e1y],
.article-form-glow-1[b-8ueekg2e1y],
.article-form-glow-2[b-8ueekg2e1y] {
    display: none !important;
}

.article-form-main-banner[b-8ueekg2e1y] {
    margin-bottom: 28px;
}

/* =========================================================
   HEADER
   ========================================================= */

.article-form-header[b-8ueekg2e1y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 22px;
}

.article-form-badge[b-8ueekg2e1y],
.article-form-mini-badge[b-8ueekg2e1y] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    color: #0F172A;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.article-form-badge[b-8ueekg2e1y] {
    min-height: 34px;
    padding: 0 14px;
    margin-bottom: 14px;
}

.article-form-mini-badge[b-8ueekg2e1y] {
    min-height: 30px;
    padding: 0 12px;
    margin-bottom: 10px;
}

.article-form-header h1[b-8ueekg2e1y] {
    margin: 0;
    color: #0F172A;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.article-form-header p[b-8ueekg2e1y] {
    margin: 12px 0 0 0;
    max-width: 760px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.6;
}

.article-form-header-actions[b-8ueekg2e1y] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* =========================================================
   BOTONES
   ========================================================= */

.article-form-btn[b-8ueekg2e1y] {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
}

    .article-form-btn .rz-icon[b-8ueekg2e1y] {
        font-size: 18px !important;
    }

    .article-form-btn span[b-8ueekg2e1y] {
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

.article-form-btn-primary[b-8ueekg2e1y] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .article-form-btn-primary .rz-icon[b-8ueekg2e1y] {
        color: #FFFFFF !important;
    }

    .article-form-btn-primary:hover[b-8ueekg2e1y] {
        background: #1E293B;
        border-color: #1E293B;
    }

.article-form-btn-secondary[b-8ueekg2e1y] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .article-form-btn-secondary .rz-icon[b-8ueekg2e1y] {
        color: #0F172A !important;
    }

    .article-form-btn-secondary:hover[b-8ueekg2e1y] {
        background: #CBD5E1;
        border-color: #CBD5E1;
    }

.article-form-btn-danger[b-8ueekg2e1y] {
    background: #FEE2E2;
    border-color: #FECACA;
    color: #991B1B;
}

    .article-form-btn-danger .rz-icon[b-8ueekg2e1y] {
        color: #991B1B !important;
    }

    .article-form-btn-danger:hover[b-8ueekg2e1y] {
        background: #FECACA;
        border-color: #FECACA;
    }

.article-form-btn:disabled[b-8ueekg2e1y] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #64748B;
    cursor: not-allowed;
}

    .article-form-btn:disabled .rz-icon[b-8ueekg2e1y] {
        color: #64748B !important;
    }

/* =========================================================
   LAYOUT
   ========================================================= */

.article-form-layout[b-8ueekg2e1y] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 370px;
    gap: 20px;
    align-items: start;
}

.article-form-side[b-8ueekg2e1y] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: sticky;
    top: 24px;
}

/* =========================================================
   CARDS
   ========================================================= */

.article-form-panel[b-8ueekg2e1y],
.article-form-side-card[b-8ueekg2e1y] {
    border-radius: 18px !important;
    border: 1px solid #E5E7EB !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: none !important;
}

.article-form-panel[b-8ueekg2e1y] {
    padding: 22px;
}

.article-form-side-card[b-8ueekg2e1y] {
    padding: 18px;
}

.article-form-section-header[b-8ueekg2e1y] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 18px;
}

    .article-form-section-header h2[b-8ueekg2e1y],
    .article-form-side-title strong[b-8ueekg2e1y] {
        margin: 0;
        display: block;
        color: #0F172A;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

.article-form-side-title span[b-8ueekg2e1y] {
    display: block;
    color: #64748B;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 6px;
}

/* =========================================================
   FORM
   ========================================================= */

.article-form-grid[b-8ueekg2e1y] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.article-form-field[b-8ueekg2e1y] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.article-form-field-full[b-8ueekg2e1y] {
    grid-column: 1 / -1;
}

.article-form-field label[b-8ueekg2e1y] {
    color: #0F172A;
    font-size: 16px;
    line-height: 1.3;
    font-weight: 800;
    margin-bottom: 8px;
}

.article-input[b-8ueekg2e1y],
.article-textarea[b-8ueekg2e1y] {
    width: 100%;
    border-radius: 10px;
    border: 1px solid #E5E7EB;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    outline: none;
    box-sizing: border-box;
    box-shadow: none;
}

.article-input[b-8ueekg2e1y] {
    min-height: 44px;
    padding: 10px 14px;
}

.article-textarea[b-8ueekg2e1y] {
    min-height: 110px;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.55;
}

    .article-input:focus[b-8ueekg2e1y],
    .article-textarea:focus[b-8ueekg2e1y] {
        border-color: #0F172A;
        box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
        background: #FFFFFF;
    }

.article-field-help[b-8ueekg2e1y] {
    margin-top: 7px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.4;
}

.article-form-field .validation-message[b-8ueekg2e1y],
.article-form-field[b-8ueekg2e1y]  .validation-message {
    color: #B42318;
    font-size: 16px;
    margin-top: 6px;
    font-weight: 700;
}

.article-form-alert[b-8ueekg2e1y] {
    margin-bottom: 16px;
    border-radius: 14px !important;
}

/* =========================================================
   RADZEN CONTROLS
   ========================================================= */

.article-radzen-control[b-8ueekg2e1y] {
    width: 100%;
}

.article-form-page .rz-dropdown[b-8ueekg2e1y],
.article-form-page .rz-multiselect[b-8ueekg2e1y],
.article-form-page .rz-picker[b-8ueekg2e1y],
.article-form-page .rz-datepicker[b-8ueekg2e1y] {
    width: 100% !important;
    min-height: 44px !important;
    border-radius: 10px !important;
    border: 1px solid #E5E7EB !important;
    background: #F8FAFC !important;
    box-shadow: none !important;
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
}

.article-form-page .rz-dropdown-label[b-8ueekg2e1y],
.article-form-page .rz-multiselect-label[b-8ueekg2e1y],
.article-form-page .rz-inputtext[b-8ueekg2e1y] {
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
    color: #0F172A !important;
}

.article-form-page .rz-dropdown:focus-within[b-8ueekg2e1y],
.article-form-page .rz-multiselect:focus-within[b-8ueekg2e1y],
.article-form-page .rz-datepicker:focus-within[b-8ueekg2e1y] {
    border-color: #0F172A !important;
    box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08) !important;
}

.article-category-dropdown[b-8ueekg2e1y]  .rz-chip {
    background: #E5E7EB !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
    border-radius: 999px !important;
    font-weight: 700;
    font-size: 16px;
}

/* =========================================================
   UPLOAD MULTIMEDIA - CORREGIDO
   ========================================================= */

.article-upload-box[b-8ueekg2e1y] {
    display: grid;
    grid-template-columns: 280px minmax(0, 1fr);
    gap: 18px;
    padding: 16px;
    border-radius: 16px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    box-sizing: border-box;
    align-items: stretch;
}

.article-upload-preview[b-8ueekg2e1y] {
    min-height: 190px;
    height: 190px;
    border-radius: 14px;
    overflow: hidden;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.article-preview-media[b-8ueekg2e1y] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.article-upload-placeholder[b-8ueekg2e1y] {
    width: 100%;
    height: 100%;
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    color: #64748B;
    box-sizing: border-box;
}

    .article-upload-placeholder .rz-icon[b-8ueekg2e1y] {
        color: #64748B !important;
        font-size: 34px !important;
    }

    .article-upload-placeholder strong[b-8ueekg2e1y] {
        display: block;
        color: #0F172A;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 800;
    }

    .article-upload-placeholder small[b-8ueekg2e1y] {
        display: block;
        color: #64748B;
        font-size: 16px;
        line-height: 1.35;
        font-weight: 500;
    }

.article-upload-actions[b-8ueekg2e1y] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 12px;
    min-width: 0;
}

.article-hidden-input[b-8ueekg2e1y] {
    display: none !important;
}

.article-upload-button[b-8ueekg2e1y] {
    min-height: 42px;
    width: fit-content;
    max-width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 0 18px;
    border-radius: 8px;
    border: 1px solid #0F172A;
    background: #0F172A;
    color: #FFFFFF;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    box-sizing: border-box;
}

    .article-upload-button .rz-icon[b-8ueekg2e1y] {
        color: #FFFFFF !important;
        font-size: 18px !important;
    }

    .article-upload-button:hover[b-8ueekg2e1y] {
        background: #1E293B;
        border-color: #1E293B;
    }

    .article-upload-button span[b-8ueekg2e1y] {
        color: #FFFFFF;
        font-size: 16px;
        font-weight: 700;
    }

.article-file-name[b-8ueekg2e1y] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    border-radius: 12px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    max-width: 100%;
    box-sizing: border-box;
}

    .article-file-name span[b-8ueekg2e1y] {
        color: #64748B;
        font-size: 16px;
        line-height: 1.3;
        font-weight: 700;
    }

    .article-file-name strong[b-8ueekg2e1y] {
        color: #0F172A;
        font-size: 16px;
        line-height: 1.35;
        font-weight: 800;
        word-break: break-word;
    }

.article-file-empty strong[b-8ueekg2e1y] {
    color: #64748B;
    font-weight: 600;
}

.article-upload-help[b-8ueekg2e1y],
.article-upload-error[b-8ueekg2e1y],
.article-upload-success[b-8ueekg2e1y],
.article-upload-message[b-8ueekg2e1y] {
    font-size: 16px;
    line-height: 1.45;
}

.article-upload-help[b-8ueekg2e1y] {
    color: #64748B;
}

.article-upload-error[b-8ueekg2e1y] {
    color: #B42318;
    font-weight: 700;
}

.article-upload-success[b-8ueekg2e1y] {
    color: #166534;
    font-weight: 700;
}

/* =========================================================
   HTML EDITOR
   ========================================================= */

.article-html-editor[b-8ueekg2e1y] {
    border-radius: 14px;
    overflow: hidden;
}

    .article-html-editor[b-8ueekg2e1y]  .rz-html-editor {
        border-radius: 14px;
        border: 1px solid #E5E7EB;
        overflow: hidden;
        box-shadow: none;
    }

    .article-html-editor[b-8ueekg2e1y]  .rz-html-editor-toolbar {
        background: #F8FAFC !important;
        border-bottom: 1px solid #E5E7EB !important;
    }

    .article-html-editor[b-8ueekg2e1y]  .rz-html-editor-content {
        color: #0F172A !important;
        font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
        font-size: 16px !important;
        line-height: 1.6;
    }

/* =========================================================
   SWITCHES
   ========================================================= */

.article-status-list[b-8ueekg2e1y] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.article-switch-row[b-8ueekg2e1y] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px;
    border-radius: 14px;
    background: #F8FAFC;
    border: 1px solid #E5E7EB;
}

    .article-switch-row span[b-8ueekg2e1y] {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .article-switch-row strong[b-8ueekg2e1y] {
        color: #0F172A;
        font-size: 16px;
        font-weight: 800;
    }

    .article-switch-row small[b-8ueekg2e1y] {
        color: #64748B;
        font-size: 16px;
        font-weight: 500;
    }

/* =========================================================
   PREVIEW
   ========================================================= */

.article-preview-card[b-8ueekg2e1y] {
    border-radius: 16px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
}

.article-preview-card-media[b-8ueekg2e1y] {
    position: relative;
    height: 190px;
    background: #E5E7EB;
    overflow: hidden;
}

    .article-preview-card-media img[b-8ueekg2e1y],
    .article-preview-card-media video[b-8ueekg2e1y] {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

.article-preview-empty[b-8ueekg2e1y] {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    font-weight: 800;
    font-size: 16px;
}

.article-preview-featured[b-8ueekg2e1y] {
    position: absolute;
    top: 12px;
    left: 12px;
    min-height: 30px;
    display: inline-flex;
    align-items: center;
    padding: 0 11px;
    border-radius: 999px;
    background: #FEF3C7;
    color: #92400E;
    border: 1px solid #FDE68A;
    font-size: 16px;
    font-weight: 700;
}

.article-preview-play[b-8ueekg2e1y] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    color: #0F172A;
}

    .article-preview-play .rz-icon[b-8ueekg2e1y] {
        font-size: 32px !important;
        color: #0F172A !important;
    }

.article-preview-card-body[b-8ueekg2e1y] {
    padding: 16px;
}

.article-preview-meta[b-8ueekg2e1y] {
    color: #64748B;
    font-size: 16px;
    font-weight: 700;
}

.article-preview-card-body h3[b-8ueekg2e1y] {
    margin: 8px 0;
    color: #0F172A;
    font-size: 20px;
    line-height: 1.28;
    font-weight: 800;
}

.article-preview-card-body p[b-8ueekg2e1y] {
    margin: 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.article-preview-categories[b-8ueekg2e1y] {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 12px;
}

    .article-preview-categories span[b-8ueekg2e1y] {
        min-height: 30px;
        display: inline-flex;
        align-items: center;
        padding: 0 11px;
        border-radius: 999px;
        color: #0F172A;
        background: #E5E7EB;
        border: 1px solid #CBD5E1;
        font-size: 16px;
        font-weight: 700;
    }

/* =========================================================
   ACTIONS
   ========================================================= */

.article-form-actions[b-8ueekg2e1y] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

    .article-form-actions .article-form-btn[b-8ueekg2e1y] {
        width: 100%;
    }

/* =========================================================
   LOADING
   ========================================================= */

.article-form-loading[b-8ueekg2e1y] {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748B;
    text-align: center;
}

    .article-form-loading h3[b-8ueekg2e1y] {
        margin: 14px 0 4px 0;
        color: #0F172A;
        font-size: 22px;
        font-weight: 800;
    }

    .article-form-loading p[b-8ueekg2e1y] {
        margin: 0;
        color: #64748B;
        font-size: 16px;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .article-form-layout[b-8ueekg2e1y] {
        grid-template-columns: 1fr;
    }

    .article-form-side[b-8ueekg2e1y] {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-form-side-card:last-child[b-8ueekg2e1y] {
        grid-column: 1 / -1;
    }
}

@media (max-width: 820px) {
    .article-form-page[b-8ueekg2e1y] {
        padding: 24px 20px;
    }

    .article-form-header[b-8ueekg2e1y] {
        flex-direction: column;
    }

    .article-form-header-actions[b-8ueekg2e1y] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

        .article-form-header-actions .article-form-btn[b-8ueekg2e1y] {
            width: 100%;
        }

    .article-form-panel[b-8ueekg2e1y],
    .article-form-side-card[b-8ueekg2e1y] {
        padding: 16px;
        border-radius: 16px !important;
    }

    .article-form-grid[b-8ueekg2e1y] {
        grid-template-columns: 1fr;
    }

    .article-upload-box[b-8ueekg2e1y] {
        grid-template-columns: 1fr;
    }

    .article-upload-preview[b-8ueekg2e1y] {
        height: 210px;
    }

    .article-upload-button[b-8ueekg2e1y] {
        width: 100%;
    }

    .article-form-side[b-8ueekg2e1y] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .article-form-page[b-8ueekg2e1y] {
        padding: 18px 10px;
    }

    .article-form-main-banner[b-8ueekg2e1y] {
        margin-bottom: 24px;
    }

    .article-form-header h1[b-8ueekg2e1y] {
        font-size: 24px;
    }

    .article-upload-box[b-8ueekg2e1y] {
        padding: 12px;
    }

    .article-upload-preview[b-8ueekg2e1y] {
        height: 170px;
        min-height: 170px;
    }

    .article-preview-media[b-8ueekg2e1y] {
        min-height: 170px;
    }

    .article-preview-card-media[b-8ueekg2e1y] {
        height: 170px;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Articles/ArticleDetail.razor.rz.scp.css */
/* =========================================================
   ARTICLE DETAIL - LÍNEA GRÁFICA ACTUAL
   ========================================================= */

.article-detail-page[b-vefvrnrgon] {
    position: relative;
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.article-detail-shell[b-vefvrnrgon] {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1320px;
    margin: 0 auto;
}

.articles-bg[b-vefvrnrgon],
.articles-glow[b-vefvrnrgon],
.articles-glow-1[b-vefvrnrgon],
.articles-glow-2[b-vefvrnrgon] {
    display: none !important;
}

/* =========================================================
   BANNER
   ========================================================= */

.article-detail-main-banner[b-vefvrnrgon] {
    margin-bottom: 28px;
}

/* =========================================================
   TOP BAR
   ========================================================= */

.article-detail-topbar[b-vefvrnrgon] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.article-detail-actions[b-vefvrnrgon] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

/* =========================================================
   BOTONES
   ========================================================= */

.article-detail-btn[b-vefvrnrgon] {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .article-detail-btn .rz-icon[b-vefvrnrgon] {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .article-detail-btn span[b-vefvrnrgon] {
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

.article-detail-btn-primary[b-vefvrnrgon] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .article-detail-btn-primary .rz-icon[b-vefvrnrgon] {
        color: #FFFFFF !important;
    }

    .article-detail-btn-primary:hover[b-vefvrnrgon] {
        background: #1E293B;
        border-color: #1E293B;
        color: #FFFFFF;
        transform: translateY(-1px);
    }

.article-detail-btn-secondary[b-vefvrnrgon] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .article-detail-btn-secondary .rz-icon[b-vefvrnrgon] {
        color: #0F172A !important;
    }

    .article-detail-btn-secondary:hover[b-vefvrnrgon] {
        background: #CBD5E1;
        border-color: #CBD5E1;
        color: #0F172A;
        transform: translateY(-1px);
    }

/* =========================================================
   BADGES
   ========================================================= */

.articles-badge[b-vefvrnrgon],
.articles-mini-badge[b-vefvrnrgon] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    border-radius: 999px;
    color: #0F172A;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.articles-badge[b-vefvrnrgon] {
    min-height: 34px;
    padding: 0 14px;
    margin-bottom: 14px;
}

.articles-mini-badge[b-vefvrnrgon] {
    min-height: 30px;
    padding: 0 12px;
    margin-bottom: 10px;
}

/* =========================================================
   CARD DETALLE
   ========================================================= */

.article-detail-card[b-vefvrnrgon] {
    border-radius: 18px;
    padding: 24px;
    border: 1px solid #E5E7EB;
    background: #FFFFFF;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
}

.article-detail-header[b-vefvrnrgon] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .article-detail-header h1[b-vefvrnrgon] {
        margin: 0;
        color: #0F172A;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 800;
        letter-spacing: -0.03em;
        max-width: 980px;
    }

.article-detail-meta[b-vefvrnrgon] {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #64748B;
    font-size: 16px;
    font-weight: 700;
}

.articles-category-row[b-vefvrnrgon] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.article-category-pill[b-vefvrnrgon] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    color: var(--category-color, #0F172A);
    background: color-mix(in srgb, var(--category-color, #0F172A) 12%, white);
    border: 1px solid color-mix(in srgb, var(--category-color, #0F172A) 28%, white);
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

/* =========================================================
   MEDIA
   ========================================================= */

.article-detail-media-wrap[b-vefvrnrgon] {
    margin-top: 24px;
    border-radius: 16px;
    overflow: hidden;
    background: #E5E7EB;
    border: 1px solid #E5E7EB;
}

.article-detail-media[b-vefvrnrgon] {
    width: 100%;
    max-height: 560px;
    min-height: 360px;
    object-fit: cover;
    display: block;
}

video.article-detail-media[b-vefvrnrgon] {
    background: #0F172A;
}

/* =========================================================
   CONTENT
   ========================================================= */

.article-detail-content[b-vefvrnrgon] {
    max-width: 920px;
    margin: 30px auto 0 auto;
}

.article-detail-lead[b-vefvrnrgon] {
    color: #475569;
    font-size: 20px;
    line-height: 1.7;
    font-weight: 600;
    margin: 0 0 20px 0;
}

.article-html-content[b-vefvrnrgon] {
    color: #475569;
    font-size: 16px;
    line-height: 1.8;
}

    .article-html-content h1[b-vefvrnrgon],
    .article-html-content h2[b-vefvrnrgon],
    .article-html-content h3[b-vefvrnrgon] {
        color: #0F172A;
        font-weight: 800;
        line-height: 1.2;
    }

    .article-html-content h1[b-vefvrnrgon] {
        font-size: 24px;
        margin: 32px 0 14px 0;
    }

    .article-html-content h2[b-vefvrnrgon] {
        font-size: 22px;
        margin: 28px 0 12px 0;
    }

    .article-html-content h3[b-vefvrnrgon] {
        font-size: 20px;
        margin: 22px 0 10px 0;
    }

    .article-html-content p[b-vefvrnrgon] {
        margin: 0 0 16px 0;
        color: #475569;
        font-size: 16px;
        line-height: 1.8;
    }

    .article-html-content ul[b-vefvrnrgon],
    .article-html-content ol[b-vefvrnrgon] {
        padding-left: 24px;
        margin: 12px 0 18px 0;
    }

    .article-html-content li[b-vefvrnrgon] {
        margin-bottom: 8px;
        font-size: 16px;
        line-height: 1.7;
    }

    .article-html-content img[b-vefvrnrgon] {
        max-width: 100%;
        border-radius: 16px;
        margin: 18px 0;
        border: 1px solid #E5E7EB;
    }

    .article-html-content a[b-vefvrnrgon] {
        color: #0F172A;
        font-weight: 800;
        text-decoration: underline;
        text-underline-offset: 3px;
    }

.article-detail-empty-content[b-vefvrnrgon] {
    margin-top: 22px;
    padding: 18px;
    border-radius: 14px;
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    color: #64748B;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 700;
}

/* =========================================================
   RELATED
   ========================================================= */

.articles-panel[b-vefvrnrgon] {
    border-radius: 18px !important;
    padding: 22px;
    border: 1px solid #E5E7EB !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    backdrop-filter: none !important;
}

.related-panel[b-vefvrnrgon] {
    margin-top: 22px;
}

.related-header[b-vefvrnrgon] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

    .related-header h2[b-vefvrnrgon] {
        margin: 0;
        color: #0F172A;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

.articles-grid[b-vefvrnrgon] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.article-card[b-vefvrnrgon] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .article-card:hover[b-vefvrnrgon] {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
        border-color: #CBD5E1;
    }

.article-media-wrap[b-vefvrnrgon] {
    position: relative;
    height: 210px;
    overflow: hidden;
    background: #E5E7EB;
}

.article-media[b-vefvrnrgon] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.article-card:hover .article-media[b-vefvrnrgon] {
    transform: scale(1.04);
}

.article-play-overlay[b-vefvrnrgon] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 52px;
    height: 52px;
    border-radius: 999px;
    background: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .article-play-overlay .rz-icon[b-vefvrnrgon] {
        color: #0F172A !important;
        font-size: 32px !important;
    }

.article-card-body[b-vefvrnrgon] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
}

.article-card-meta[b-vefvrnrgon] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    color: #64748B;
    font-size: 16px;
    font-weight: 700;
}

.article-card-body h3[b-vefvrnrgon] {
    margin: 10px 0 8px 0;
    color: #0F172A;
    font-size: 20px;
    line-height: 1.28;
    font-weight: 800;
}

.article-card-body p[b-vefvrnrgon] {
    margin: 0;
    color: #475569;
    font-size: 16px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 74px;
}

.article-card-footer[b-vefvrnrgon] {
    margin-top: auto;
    padding-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #0F172A;
    font-size: 16px;
    font-weight: 800;
}

    .article-card-footer .rz-icon[b-vefvrnrgon] {
        color: #0F172A !important;
        font-size: 20px !important;
    }

/* =========================================================
   EMPTY / LOADING
   ========================================================= */

.articles-empty[b-vefvrnrgon] {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748B;
    text-align: center;
    padding: 28px;
}

.articles-empty-icon[b-vefvrnrgon] {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

    .articles-empty-icon .rz-icon[b-vefvrnrgon] {
        color: #0F172A !important;
        font-size: 30px !important;
    }

.articles-empty h3[b-vefvrnrgon] {
    margin: 0;
    color: #0F172A;
    font-size: 22px;
    font-weight: 800;
}

.articles-empty p[b-vefvrnrgon] {
    margin: 8px 0 0 0;
    max-width: 420px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.6;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .articles-grid[b-vefvrnrgon] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .article-detail-media[b-vefvrnrgon] {
        min-height: 320px;
    }
}

@media (max-width: 820px) {
    .article-detail-page[b-vefvrnrgon] {
        padding: 24px 20px;
    }

    .article-detail-topbar[b-vefvrnrgon] {
        flex-direction: column;
        align-items: stretch;
    }

    .article-detail-actions[b-vefvrnrgon] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .article-detail-btn[b-vefvrnrgon] {
        width: 100%;
    }

    .article-detail-card[b-vefvrnrgon],
    .articles-panel[b-vefvrnrgon] {
        padding: 16px;
        border-radius: 16px !important;
    }

    .article-detail-media-wrap[b-vefvrnrgon] {
        border-radius: 14px;
    }

    .article-detail-media[b-vefvrnrgon] {
        min-height: 260px;
        max-height: 420px;
    }

    .article-detail-content[b-vefvrnrgon] {
        margin-top: 22px;
    }

    .article-detail-lead[b-vefvrnrgon] {
        font-size: 20px;
        line-height: 1.6;
    }

    .articles-grid[b-vefvrnrgon] {
        grid-template-columns: 1fr;
    }

    .related-header[b-vefvrnrgon] {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .article-detail-page[b-vefvrnrgon] {
        padding: 18px 10px;
    }

    .article-detail-main-banner[b-vefvrnrgon] {
        margin-bottom: 24px;
    }

    .article-detail-card[b-vefvrnrgon],
    .articles-panel[b-vefvrnrgon] {
        padding: 14px;
    }

    .article-detail-header h1[b-vefvrnrgon] {
        font-size: 24px;
    }

    .article-detail-meta[b-vefvrnrgon],
    .article-category-pill[b-vefvrnrgon],
    .article-card-meta[b-vefvrnrgon] {
        font-size: 16px;
    }

    .article-detail-media[b-vefvrnrgon] {
        min-height: 220px;
    }

    .article-media-wrap[b-vefvrnrgon] {
        height: 190px;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Articles/Component_Articles.razor.rz.scp.css */
/* =========================================================
   ARTICLES / REVISTA - MOCKUP AJUSTADO
   Línea gráfica actual:
   Título: 24px
   Título 2: 22px
   Subtítulo: 20px
   Texto: 16px
   ========================================================= */

.articles-page[b-9hkvvicmjg] {
    position: relative;
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.articles-shell[b-9hkvvicmjg] {
    width: 100%;
    max-width: 1180px;
    margin: 0 auto;
    min-width: 0;
    box-sizing: border-box;
}

.articles-bg[b-9hkvvicmjg],
.articles-glow[b-9hkvvicmjg],
.articles-glow-1[b-9hkvvicmjg],
.articles-glow-2[b-9hkvvicmjg] {
    display: none !important;
}

/* =========================================================
   PUBLICIDAD
   ========================================================= */

.articles-main-banner[b-9hkvvicmjg] {
    margin-bottom: 28px;
}

/* =========================================================
   HEADER
   ========================================================= */

.articles-header[b-9hkvvicmjg] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 26px;
}

    .articles-header > div:first-child[b-9hkvvicmjg] {
        min-width: 0;
    }

    .articles-header h1[b-9hkvvicmjg] {
        margin: 0;
        color: #0F172A;
        font-size: 24px;
        line-height: 1.2;
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .articles-header p[b-9hkvvicmjg] {
        margin: 14px 0 0 0;
        max-width: 760px;
        color: #64748B;
        font-size: 16px;
        line-height: 1.6;
    }

.articles-header-actions[b-9hkvvicmjg] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    flex-wrap: nowrap;
    margin-top: 0;
    flex-shrink: 0;
}

/* =========================================================
   ADMIN BUTTONS
   ========================================================= */

.articles-admin-btn[b-9hkvvicmjg] {
    min-height: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    white-space: nowrap;
    text-decoration: none;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .articles-admin-btn .rz-icon[b-9hkvvicmjg] {
        font-size: 18px !important;
        line-height: 1 !important;
    }

    .articles-admin-btn span[b-9hkvvicmjg] {
        font-size: 16px;
        line-height: 1;
        font-weight: 700;
    }

.articles-admin-btn-primary[b-9hkvvicmjg] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .articles-admin-btn-primary .rz-icon[b-9hkvvicmjg] {
        color: #FFFFFF !important;
    }

    .articles-admin-btn-primary:hover[b-9hkvvicmjg] {
        background: #1E293B;
        border-color: #1E293B;
        color: #FFFFFF;
        transform: translateY(-1px);
    }

.articles-admin-btn-secondary[b-9hkvvicmjg] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .articles-admin-btn-secondary .rz-icon[b-9hkvvicmjg] {
        color: #0F172A !important;
    }

    .articles-admin-btn-secondary:hover[b-9hkvvicmjg] {
        background: #CBD5E1;
        border-color: #CBD5E1;
        color: #0F172A;
        transform: translateY(-1px);
    }

/* =========================================================
   FILTROS / BUSCADOR
   ========================================================= */

.articles-filter-bar[b-9hkvvicmjg] {
    display: grid;
    grid-template-columns: 390px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    width: 100%;
    margin-bottom: 28px;
    overflow: hidden;
}

.articles-search-box[b-9hkvvicmjg] {
    position: relative;
    width: 100%;
    min-width: 0;
    height: 42px;
    display: flex;
    align-items: center;
}

    .articles-search-box .rz-icon[b-9hkvvicmjg],
    .articles-search-box[b-9hkvvicmjg]  .rz-icon {
        position: absolute !important;
        left: 15px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        color: #0F172A !important;
        font-size: 21px !important;
        z-index: 3 !important;
        line-height: 1 !important;
        margin: 0 !important;
        pointer-events: none !important;
    }

.articles-search-input[b-9hkvvicmjg] {
    width: 100%;
    height: 42px;
    min-height: 42px;
    padding: 0 16px 0 48px;
    border-radius: 8px;
    border: none;
    background: #E5E7EB;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 42px;
    font-weight: 600;
    outline: none;
    box-sizing: border-box;
    display: block;
    text-align: left;
    text-transform: none !important;
}

    .articles-search-input[b-9hkvvicmjg]::placeholder {
        color: #94A3B8;
        font-weight: 600;
        text-transform: none !important;
    }

    .articles-search-input:focus[b-9hkvvicmjg] {
        background: #FFFFFF;
        box-shadow: 0 0 0 2px #0F172A;
    }

.articles-category-tabs[b-9hkvvicmjg] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    height: 42px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 0 2px 0;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
}

    .articles-category-tabs[b-9hkvvicmjg]::-webkit-scrollbar {
        height: 6px;
    }

    .articles-category-tabs[b-9hkvvicmjg]::-webkit-scrollbar-track {
        background: transparent;
    }

    .articles-category-tabs[b-9hkvvicmjg]::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 999px;
    }

.articles-category-tab[b-9hkvvicmjg] {
    height: 36px;
    min-height: 36px;
    padding: 0 16px;
    border-radius: 7px;
    border: none;
    background: #E5E7EB;
    color: #334155;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    transition: background 0.18s ease, color 0.18s ease;
    text-transform: none !important;
}

    .articles-category-tab:hover[b-9hkvvicmjg] {
        background: #CBD5E1;
        color: #0F172A;
    }

    .articles-category-tab.active[b-9hkvvicmjg] {
        background: #0F172A;
        color: #FFFFFF;
    }

/* =========================================================
   ARTÍCULO DESTACADO
   ========================================================= */

.articles-featured-section[b-9hkvvicmjg] {
    margin-bottom: 34px;
}

.articles-featured-card[b-9hkvvicmjg] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(420px, 0.9fr);
    height: 310px;
    border-radius: 14px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    cursor: pointer;
    box-sizing: border-box;
}

.articles-featured-media[b-9hkvvicmjg] {
    position: relative;
    height: 310px;
    background: #4FC35D;
    overflow: hidden;
}

    .articles-featured-media img[b-9hkvvicmjg],
    .articles-featured-media video[b-9hkvvicmjg] {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }

.articles-media-placeholder[b-9hkvvicmjg] {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .articles-media-placeholder[b-9hkvvicmjg]::before {
        content: "Imagen del artículo";
        color: rgba(15, 23, 42, 0.35);
        font-size: 16px;
        font-weight: 700;
    }

.articles-featured-media.articles-media-placeholder[b-9hkvvicmjg]::before {
    content: "Artículo destacado";
    color: rgba(255, 255, 255, 0.88);
}

.articles-featured-image-label[b-9hkvvicmjg] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: fit-content;
    height: fit-content;
    color: rgba(255, 255, 255, 0.86);
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    pointer-events: none;
}

.articles-featured-media:has(img:not([style*="display: none"])) .articles-featured-image-label[b-9hkvvicmjg],
.articles-featured-media:has(video) .articles-featured-image-label[b-9hkvvicmjg] {
    display: none;
}

.articles-featured-content[b-9hkvvicmjg] {
    padding: 34px 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.articles-featured-pill[b-9hkvvicmjg] {
    width: fit-content;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    padding: 0 9px;
    border-radius: 4px;
    background: #FEE2E2;
    color: #B91C1C;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    text-transform: uppercase;
    margin-bottom: 16px;
}

.articles-featured-content h2[b-9hkvvicmjg] {
    margin: 0;
    color: #0F172A;
    font-size: 24px;
    line-height: 1.22;
    font-weight: 800;
    letter-spacing: -0.03em;
    max-width: 520px;
}

.articles-featured-content p[b-9hkvvicmjg] {
    margin: 18px 0 0 0;
    color: #64748B;
    font-size: 16px;
    line-height: 1.65;
    max-width: 520px;
}

.articles-featured-date[b-9hkvvicmjg] {
    margin-top: 16px;
    color: #94A3B8;
    font-size: 16px;
    line-height: 1;
    font-weight: 600;
}

.articles-read-btn[b-9hkvvicmjg] {
    width: fit-content;
    min-height: 36px;
    margin-top: 18px;
    padding: 0 16px;
    border-radius: 7px;
    border: none;
    background: #0F172A;
    color: #FFFFFF;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
}

    .articles-read-btn:hover[b-9hkvvicmjg] {
        background: #1E293B;
    }

/* =========================================================
   ARTÍCULOS RECIENTES
   ========================================================= */

.articles-recent-section h2[b-9hkvvicmjg] {
    margin: 0 0 18px 0;
    color: #0F172A;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.articles-grid[b-9hkvvicmjg] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.article-card[b-9hkvvicmjg] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    border-radius: 12px;
    overflow: hidden;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.035);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .article-card:hover[b-9hkvvicmjg] {
        transform: translateY(-3px);
        box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
        border-color: #CBD5E1;
    }

.article-media-wrap[b-9hkvvicmjg] {
    position: relative;
    height: 170px;
    overflow: hidden;
    background: #E5E7EB;
}

.article-media[b-9hkvvicmjg] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.25s ease;
}

.article-card:hover .article-media[b-9hkvvicmjg] {
    transform: scale(1.04);
}

.article-media-wrap.articles-media-placeholder[b-9hkvvicmjg] {
    display: flex;
    align-items: center;
    justify-content: center;
}

    .article-media-wrap.articles-media-placeholder[b-9hkvvicmjg]::before {
        content: "Imagen del artículo";
        color: rgba(15, 23, 42, 0.35);
        font-size: 16px;
        font-weight: 600;
    }

.articles-play-overlay[b-9hkvvicmjg] {
    position: absolute;
    inset: 0;
    margin: auto;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
}

    .articles-play-overlay .rz-icon[b-9hkvvicmjg] {
        color: #0F172A !important;
        font-size: 30px !important;
    }

.article-card-body[b-9hkvvicmjg] {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 18px;
}

.articles-card-categories[b-9hkvvicmjg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-height: 26px;
}

.article-category-pill[b-9hkvvicmjg] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 4px;
    color: var(--category-color, #166534);
    background: color-mix(in srgb, var(--category-color, #16A34A) 12%, white);
    border: 1px solid color-mix(in srgb, var(--category-color, #16A34A) 22%, white);
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
}

.article-card-body h3[b-9hkvvicmjg] {
    margin: 12px 0 8px 0;
    color: #0F172A;
    font-size: 17px;
    line-height: 1.3;
    font-weight: 800;
}

.article-card-body p[b-9hkvvicmjg] {
    margin: 0;
    color: #64748B;
    font-size: 16px;
    line-height: 1.55;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 74px;
}

.article-card-bottom[b-9hkvvicmjg] {
    margin-top: auto;
    padding-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

    .article-card-bottom > span[b-9hkvvicmjg] {
        color: #94A3B8;
        font-size: 14px;
        line-height: 1;
        font-weight: 600;
    }

.article-card-read-btn[b-9hkvvicmjg] {
    min-height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    border: none;
    background: #0F172A;
    color: #FFFFFF;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 13px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

    .article-card-read-btn:hover[b-9hkvvicmjg] {
        background: #1E293B;
    }

/* =========================================================
   EMPTY / LOADING / ALERT
   ========================================================= */

.articles-empty-state[b-9hkvvicmjg] {
    min-height: 280px;
    padding: 32px;
    border-radius: 18px;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #64748B;
    text-align: center;
}

.articles-empty-icon[b-9hkvvicmjg] {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}

    .articles-empty-icon .rz-icon[b-9hkvvicmjg] {
        color: #0F172A !important;
        font-size: 30px !important;
    }

.articles-empty-state h3[b-9hkvvicmjg] {
    margin: 0;
    color: #0F172A;
    font-size: 22px;
    font-weight: 800;
}

.articles-empty-state p[b-9hkvvicmjg] {
    margin: 8px 0 0 0;
    max-width: 420px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.6;
}

.articles-alert[b-9hkvvicmjg] {
    margin-bottom: 18px;
    border-radius: 14px !important;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1180px) {
    .articles-shell[b-9hkvvicmjg] {
        max-width: 100%;
    }

    .articles-featured-card[b-9hkvvicmjg] {
        grid-template-columns: 1fr;
        height: auto;
    }

    .articles-featured-media[b-9hkvvicmjg] {
        height: 300px;
    }

    .articles-featured-content[b-9hkvvicmjg] {
        min-height: auto;
    }

    .articles-filter-bar[b-9hkvvicmjg] {
        grid-template-columns: 1fr;
        gap: 12px;
        overflow: visible;
    }

    .articles-category-tabs[b-9hkvvicmjg] {
        height: auto;
        padding-bottom: 6px;
    }

    .articles-grid[b-9hkvvicmjg] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .articles-page[b-9hkvvicmjg] {
        padding: 24px 20px;
    }

    .articles-header[b-9hkvvicmjg] {
        flex-direction: column;
        gap: 18px;
    }

    .articles-header-actions[b-9hkvvicmjg] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

        .articles-header-actions .articles-admin-btn[b-9hkvvicmjg] {
            width: 100%;
        }

    .articles-featured-content[b-9hkvvicmjg] {
        padding: 24px;
    }

    .articles-grid[b-9hkvvicmjg] {
        grid-template-columns: 1fr;
    }

    .article-media-wrap[b-9hkvvicmjg] {
        height: 210px;
    }
}

@media (max-width: 480px) {
    .articles-page[b-9hkvvicmjg] {
        padding: 18px 10px;
    }

    .articles-main-banner[b-9hkvvicmjg] {
        margin-bottom: 24px;
    }

    .articles-header h1[b-9hkvvicmjg] {
        font-size: 24px;
    }

    .articles-header p[b-9hkvvicmjg] {
        font-size: 16px;
    }

    .articles-featured-media[b-9hkvvicmjg] {
        height: 240px;
    }

    .articles-featured-content[b-9hkvvicmjg] {
        padding: 18px;
    }

        .articles-featured-content h2[b-9hkvvicmjg] {
            font-size: 24px;
        }

        .articles-featured-content p[b-9hkvvicmjg],
        .articles-featured-date[b-9hkvvicmjg] {
            font-size: 16px;
        }

    .articles-search-input[b-9hkvvicmjg] {
        font-size: 16px;
    }

    .article-media-wrap[b-9hkvvicmjg] {
        height: 190px;
    }

    .article-card-body[b-9hkvvicmjg] {
        padding: 16px;
    }

    .article-card-bottom[b-9hkvvicmjg] {
        align-items: flex-start;
        flex-direction: column;
    }

    .article-card-read-btn[b-9hkvvicmjg] {
        width: 100%;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Members/MembersDirectory.razor.rz.scp.css */
/* =========================================================
   MEMBER DIRECTORY - LÍNEA GRÁFICA ACTUAL
   ========================================================= */

.member-directory-page[b-mun23a1d1i] {
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.member-directory-shell[b-mun23a1d1i] {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

.member-directory-main-banner[b-mun23a1d1i] {
    margin-bottom: 6px;
}

/* =========================================================
   HEADER
   ========================================================= */

.member-directory-header[b-mun23a1d1i] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
}

.member-directory-badge[b-mun23a1d1i] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 34px;
    padding: 0 14px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #E5E7EB;
    color: #0F172A;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.member-directory-header h1[b-mun23a1d1i] {
    margin: 0;
    color: #0F172A;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.member-directory-header p[b-mun23a1d1i] {
    margin: 12px 0 0 0;
    max-width: 820px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.6;
}

/* =========================================================
   PANEL FILTROS
   ========================================================= */

.member-directory-panel[b-mun23a1d1i] {
    border-radius: 18px !important;
    border: 1px solid #E5E7EB !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05) !important;
    padding: 22px;
    overflow: hidden;
}

.member-directory-panel-header[b-mun23a1d1i] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 18px;
}

    .member-directory-panel-header h2[b-mun23a1d1i],
    .member-directory-results-header h2[b-mun23a1d1i] {
        margin: 0;
        color: #0F172A;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .member-directory-panel-header p[b-mun23a1d1i],
    .member-directory-results-header p[b-mun23a1d1i] {
        margin: 6px 0 0 0;
        color: #64748B;
        font-size: 16px;
        line-height: 1.5;
    }

.member-filters-grid[b-mun23a1d1i] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
    gap: 16px;
    align-items: end;
}

.member-filter-item[b-mun23a1d1i] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

    .member-filter-item label[b-mun23a1d1i] {
        color: #0F172A;
        font-size: 16px;
        line-height: 1.2;
        font-weight: 800;
    }

.member-filter-actions[b-mun23a1d1i] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: max-content;
}

/* =========================================================
   BOTONES
   ========================================================= */

.member-directory-btn[b-mun23a1d1i] {
    min-height: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .member-directory-btn .rz-icon[b-mun23a1d1i],
    .member-directory-btn[b-mun23a1d1i]  .rz-icon {
        font-size: 18px !important;
    }

.member-directory-btn-primary[b-mun23a1d1i] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .member-directory-btn-primary .rz-icon[b-mun23a1d1i],
    .member-directory-btn-primary[b-mun23a1d1i]  .rz-icon {
        color: #FFFFFF !important;
    }

    .member-directory-btn-primary:hover[b-mun23a1d1i] {
        background: #1E293B;
        border-color: #1E293B;
        transform: translateY(-1px);
    }

.member-directory-btn-secondary[b-mun23a1d1i] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .member-directory-btn-secondary .rz-icon[b-mun23a1d1i],
    .member-directory-btn-secondary[b-mun23a1d1i]  .rz-icon {
        color: #0F172A !important;
    }

    .member-directory-btn-secondary:hover[b-mun23a1d1i] {
        background: #CBD5E1;
        border-color: #CBD5E1;
        transform: translateY(-1px);
    }

/* =========================================================
   INPUTS RADZEN
   ========================================================= */

.member-directory-page .rz-textbox[b-mun23a1d1i],
.member-directory-page .rz-dropdown[b-mun23a1d1i] {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 10px !important;
    border: 1px solid #CBD5E1 !important;
    background: #F8FAFC !important;
    box-shadow: none !important;
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
    color: #0F172A !important;
}

.member-directory-page .rz-textbox[b-mun23a1d1i] {
    padding: 0 14px !important;
    line-height: 42px !important;
}

.member-directory-page .rz-dropdown[b-mun23a1d1i] {
    display: flex !important;
    align-items: center !important;
}

.member-directory-page .rz-dropdown-label[b-mun23a1d1i] {
    height: 42px !important;
    line-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 38px 0 14px !important;
    color: #64748B !important;
    font-size: 16px !important;
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
}

.member-directory-page .rz-dropdown-trigger[b-mun23a1d1i] {
    width: 38px !important;
    height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: none !important;
    background: transparent !important;
}

    .member-directory-page .rz-dropdown-trigger-icon[b-mun23a1d1i],
    .member-directory-page .rz-dropdown-trigger .rz-icon[b-mun23a1d1i],
    .member-directory-page .rz-dropdown[b-mun23a1d1i]  .rz-dropdown-trigger-icon {
        color: #0F172A !important;
        font-size: 20px !important;
    }

.member-directory-page .rz-textbox:focus[b-mun23a1d1i],
.member-directory-page .rz-dropdown:focus-within[b-mun23a1d1i] {
    border-color: #0F172A !important;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08) !important;
    background: #FFFFFF !important;
}

.member-directory-input[b-mun23a1d1i] {
    width: 100% !important;
}

/* =========================================================
   RESULTADOS
   ========================================================= */

.member-directory-results-header[b-mun23a1d1i] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.members-cards-grid[b-mun23a1d1i] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.member-card[b-mun23a1d1i] {
    min-width: 0;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 18px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
    gap: 14px;
    cursor: pointer;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

    .member-card:hover[b-mun23a1d1i] {
        transform: translateY(-3px);
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.08);
        border-color: #CBD5E1;
    }

.member-card-top[b-mun23a1d1i] {
    display: flex;
    gap: 14px;
    align-items: center;
    min-width: 0;
}

.member-card-photo[b-mun23a1d1i] {
    width: 68px;
    height: 68px;
    min-width: 68px;
    border-radius: 16px;
    object-fit: cover;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
}

.member-card-main[b-mun23a1d1i] {
    min-width: 0;
    flex: 1;
}

.member-card-name[b-mun23a1d1i] {
    color: #0F172A;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 800;
    word-break: break-word;
}

.member-card-id[b-mun23a1d1i],
.member-card-email[b-mun23a1d1i] {
    color: #64748B;
    font-size: 16px;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.member-card-statuses[b-mun23a1d1i],
.member-card-sports[b-mun23a1d1i] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.member-status-chip[b-mun23a1d1i],
.sport-chip[b-mun23a1d1i] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 30px;
    padding: 0 11px;
    border-radius: 999px;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.member-status-chip[b-mun23a1d1i] {
    background: #E5E7EB;
    color: #374151;
    border: 1px solid #CBD5E1;
}

.sport-chip[b-mun23a1d1i] {
    background: #EEF2FF;
    color: #3730A3;
    border: 1px solid #C7D2FE;
}

.sport-chip-more[b-mun23a1d1i] {
    background: #F8FAFC;
    color: #64748B;
    border-color: #E5E7EB;
}

.member-card-empty[b-mun23a1d1i] {
    color: #64748B;
    font-size: 16px;
    font-weight: 600;
}

.member-card-footer[b-mun23a1d1i] {
    margin-top: auto;
    padding-top: 4px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #0F172A;
    font-size: 16px;
    font-weight: 800;
}

    .member-card-footer .rz-icon[b-mun23a1d1i],
    .member-card-footer[b-mun23a1d1i]  .rz-icon {
        color: #0F172A !important;
        font-size: 20px !important;
    }

/* =========================================================
   PAGER
   ========================================================= */

.member-directory-pager[b-mun23a1d1i] {
    display: flex;
    justify-content: center;
    margin-top: 12px;
}

    .member-directory-pager .rz-paginator[b-mun23a1d1i],
    .member-directory-pager[b-mun23a1d1i]  .rz-paginator {
        background: transparent !important;
        border: none !important;
        font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    }

/* =========================================================
   LOADING / EMPTY
   ========================================================= */

.member-loading[b-mun23a1d1i],
.member-empty[b-mun23a1d1i] {
    min-height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #64748B;
    text-align: center;
}

.member-loading[b-mun23a1d1i] {
    flex-direction: column;
    gap: 12px;
}

    .member-loading h3[b-mun23a1d1i],
    .member-empty h3[b-mun23a1d1i] {
        margin: 8px 0 0 0;
        color: #0F172A;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .member-loading p[b-mun23a1d1i],
    .member-empty p[b-mun23a1d1i] {
        margin: 6px 0 0 0;
        color: #64748B;
        font-size: 16px;
        line-height: 1.5;
    }

.member-empty[b-mun23a1d1i] {
    flex-direction: column;
}

.member-empty-icon[b-mun23a1d1i] {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: #E5E7EB;
    border: 1px solid #CBD5E1;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .member-empty-icon .rz-icon[b-mun23a1d1i],
    .member-empty-icon[b-mun23a1d1i]  .rz-icon {
        color: #0F172A !important;
        font-size: 32px !important;
    }

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1280px) {
    .member-filters-grid[b-mun23a1d1i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .member-filter-actions[b-mun23a1d1i] {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .members-cards-grid[b-mun23a1d1i] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 820px) {
    .member-directory-page[b-mun23a1d1i] {
        padding: 24px 20px;
    }

    .member-directory-shell[b-mun23a1d1i] {
        gap: 20px;
    }

    .member-directory-panel[b-mun23a1d1i] {
        padding: 16px;
        border-radius: 16px !important;
    }

    .member-filters-grid[b-mun23a1d1i] {
        grid-template-columns: 1fr;
    }

    .member-filter-actions[b-mun23a1d1i] {
        grid-column: auto;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
        min-width: 0;
    }

    .member-directory-btn[b-mun23a1d1i] {
        width: 100%;
    }

    .members-cards-grid[b-mun23a1d1i] {
        grid-template-columns: 1fr;
    }

    .member-card[b-mun23a1d1i] {
        border-radius: 16px;
    }
}

@media (max-width: 480px) {
    .member-directory-page[b-mun23a1d1i] {
        padding: 18px 10px;
    }

    .member-directory-main-banner[b-mun23a1d1i] {
        margin-bottom: 4px;
    }

    .member-directory-header h1[b-mun23a1d1i] {
        font-size: 24px;
    }

    .member-directory-header p[b-mun23a1d1i] {
        font-size: 16px;
    }

    .member-card[b-mun23a1d1i] {
        padding: 16px;
    }

    .member-card-top[b-mun23a1d1i] {
        align-items: flex-start;
    }

    .member-card-photo[b-mun23a1d1i] {
        width: 58px;
        height: 58px;
        min-width: 58px;
        border-radius: 14px;
    }

    .member-card-name[b-mun23a1d1i] {
        font-size: 18px;
    }

    .member-card-id[b-mun23a1d1i],
    .member-card-email[b-mun23a1d1i] {
        font-size: 16px;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Profiles/Profile.razor.rz.scp.css */
.profile-page[b-lthk15jhb0] {
    min-height: 100%;
    background: #f4f7fb;
    padding: 28px 16px 42px;
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

.profile-shell[b-lthk15jhb0] {
    width: 100%;
    max-width: 980px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.profile-shell-editing[b-lthk15jhb0] {
    max-width: 1280px;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 320px;
    align-items: start;
    gap: 18px;
}

    .profile-shell-editing > :not(.profile-edit-sidebar)[b-lthk15jhb0] {
        grid-column: 1;
    }

.profile-card[b-lthk15jhb0] {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 7px;
}

.profile-loading-card[b-lthk15jhb0] {
    min-height: 280px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    align-items: center;
    justify-content: center;
    color: #667085;
    font-weight: 700;
}

.profile-hero[b-lthk15jhb0] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 18px;
    padding: 22px 0 10px;
}

.profile-avatar-wrap[b-lthk15jhb0] {
    position: relative;
    width: 126px;
    height: 126px;
    border-radius: 50%;
    overflow: visible;
    background: #eaf0f7;
    flex-shrink: 0;
}

.profile-avatar[b-lthk15jhb0] {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
    border: 4px solid #ffffff;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.08);
}

.profile-avatar-camera[b-lthk15jhb0] {
    position: absolute;
    right: 4px;
    bottom: 8px;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    background: #ffffff;
    border: 1px solid #dbe3ee;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.16);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    margin: 0;
    line-height: 1;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

    .profile-avatar-camera:hover[b-lthk15jhb0] {
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.20);
        background: #f8fafc;
    }

    .profile-avatar-camera .rz-icon[b-lthk15jhb0] {
        font-size: 15px !important;
        color: #2563eb !important;
        line-height: 1 !important;
    }

    .profile-avatar-camera input[type="file"][b-lthk15jhb0],
    .profile-avatar-camera .profile-avatar-file-input[b-lthk15jhb0] {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        opacity: 0 !important;
        position: absolute !important;
        pointer-events: none !important;
    }

.profile-avatar-camera-loading[b-lthk15jhb0] {
    pointer-events: none;
    opacity: 0.85;
}

    .profile-avatar-camera-loading[b-lthk15jhb0]::after {
        content: "";
        position: absolute;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid rgba(37, 99, 235, 0.25);
        border-top-color: rgba(37, 99, 235, 1);
        animation: profileAvatarSpin-b-lthk15jhb0 0.75s linear infinite;
    }

    .profile-avatar-camera-loading .rz-icon[b-lthk15jhb0] {
        opacity: 0;
    }

@keyframes profileAvatarSpin-b-lthk15jhb0 {
    to {
        transform: rotate(360deg);
    }
}

.profile-photo-feedback[b-lthk15jhb0] {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-photo-file[b-lthk15jhb0] {
    color: #475467;
    font-size: 0.74rem;
    font-weight: 600;
}

.profile-photo-error[b-lthk15jhb0] {
    color: #dc2626;
    font-size: 0.74rem;
    font-weight: 800;
}

.profile-hero-info[b-lthk15jhb0] {
    min-width: 0;
}

.profile-title-row[b-lthk15jhb0] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .profile-title-row h1[b-lthk15jhb0] {
        margin: 0;
        color: #101828;
        font-size: 1.42rem;
        font-weight: 800;
        line-height: 1.15;
        word-break: break-word;
    }

.profile-edit-circle[b-lthk15jhb0],
.profile-close-btn[b-lthk15jhb0] {
    border: 0;
    outline: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-edit-circle[b-lthk15jhb0] {
    width: 34px;
    height: 34px;
    border-radius: 999px;
    background: #ffffff;
    color: #475467;
}

    .profile-edit-circle .rz-icon[b-lthk15jhb0],
    .profile-close-btn .rz-icon[b-lthk15jhb0] {
        color: inherit !important;
    }

.profile-pills-row[b-lthk15jhb0] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.profile-pill[b-lthk15jhb0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    padding: 4px 10px;
    border-radius: 5px;
    font-size: 0.76rem;
    font-weight: 800;
    line-height: 1;
}

.profile-pill-active[b-lthk15jhb0] {
    background: #dcfce7;
    color: #16a34a;
}

.profile-pill-neutral[b-lthk15jhb0] {
    background: #eef2f7;
    color: #475467;
}

.profile-pill-role[b-lthk15jhb0] {
    background: #eef2ff;
    color: #475467;
}

.profile-meta-row[b-lthk15jhb0] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    margin-top: 10px;
    color: #667085;
    font-size: 0.84rem;
}

.profile-meta-item[b-lthk15jhb0] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    min-width: 0;
}

    .profile-meta-item .rz-icon[b-lthk15jhb0] {
        font-size: 17px;
        color: #667085;
    }

.profile-meta-email[b-lthk15jhb0] {
    max-width: 100%;
    word-break: break-word;
}

.profile-stats-grid[b-lthk15jhb0] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.profile-stat-card[b-lthk15jhb0] {
    background: #ffffff;
    border: 1px solid #eaeaea;
    border-radius: 8px;
    min-height: 112px;
    padding: 14px 8px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    text-align: center;
}

.profile-stat-icon[b-lthk15jhb0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 26px;
}

    .profile-stat-icon .rz-icon[b-lthk15jhb0] {
        font-size: 24px !important;
        line-height: 1 !important;
        color: inherit !important;
    }

.profile-stat-icon-blue[b-lthk15jhb0] {
    color: #2563eb !important;
}

.profile-stat-icon-green[b-lthk15jhb0] {
    color: #16a34a !important;
}

.profile-stat-icon-orange[b-lthk15jhb0] {
    color: #fb923c !important;
}

.profile-stat-icon-purple[b-lthk15jhb0] {
    color: #7c6cc7 !important;
}

.profile-stat-card strong[b-lthk15jhb0] {
    color: #101828;
    font-size: 1.55rem;
    font-weight: 900;
    line-height: 1;
}

.profile-stat-card span[b-lthk15jhb0] {
    color: #344054;
    font-size: 0.74rem;
    font-weight: 500;
    line-height: 1.15;
}

.profile-role-credits-card[b-lthk15jhb0],
.profile-courses-card[b-lthk15jhb0],
.profile-activities-card[b-lthk15jhb0],
.profile-edit-card[b-lthk15jhb0] {
    padding: 18px;
}

    .profile-role-credits-card h2[b-lthk15jhb0],
    .profile-courses-card h2[b-lthk15jhb0],
    .profile-activities-card h2[b-lthk15jhb0],
    .profile-section-header h2[b-lthk15jhb0] {
        margin: 0 0 14px;
        color: #101828;
        font-size: 1.05rem;
        font-weight: 900;
        line-height: 1.2;
    }

.profile-role-credit-list[b-lthk15jhb0],
.profile-course-list[b-lthk15jhb0] {
    display: flex;
    flex-direction: column;
}

.profile-role-credit-item[b-lthk15jhb0] {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #edf1f7;
}

    .profile-role-credit-item:first-child[b-lthk15jhb0] {
        padding-top: 2px;
    }

    .profile-role-credit-item:last-child[b-lthk15jhb0] {
        border-bottom: 0;
        padding-bottom: 2px;
    }

.profile-role-credit-icon[b-lthk15jhb0] {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .profile-role-credit-icon .rz-icon[b-lthk15jhb0] {
        font-size: 27px !important;
        color: inherit !important;
    }

.profile-role-credit-icon-blue[b-lthk15jhb0] {
    background: #e8eefb;
    color: #2563eb;
}

.profile-role-credit-icon-green[b-lthk15jhb0] {
    background: #dcfce7;
    color: #16a34a;
}

.profile-role-credit-icon-orange[b-lthk15jhb0] {
    background: #fff3e0;
    color: #fb923c;
}

.profile-role-credit-icon-purple[b-lthk15jhb0] {
    background: #ede9fe;
    color: #7c3aed;
}

.profile-role-credit-icon-red[b-lthk15jhb0] {
    background: #fee2e2;
    color: #dc2626;
}

.profile-role-credit-icon-cyan[b-lthk15jhb0] {
    background: #cffafe;
    color: #0891b2;
}

.profile-role-credit-icon-neutral[b-lthk15jhb0] {
    background: #eef2f7;
    color: #475467;
}

.profile-role-credit-main[b-lthk15jhb0] {
    min-width: 0;
}

    .profile-role-credit-main h3[b-lthk15jhb0] {
        margin: 0;
        color: #101828;
        font-size: 0.9rem;
        font-weight: 900;
        line-height: 1.25;
        word-break: break-word;
    }

.profile-role-credit-meta[b-lthk15jhb0] {
    margin-top: 4px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #667085;
    font-size: 0.72rem;
    font-weight: 600;
}

.profile-role-credit-values[b-lthk15jhb0] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

.profile-role-credit-value[b-lthk15jhb0] {
    min-width: 62px;
    border-radius: 10px;
    padding: 7px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1.1;
}

    .profile-role-credit-value strong[b-lthk15jhb0] {
        font-size: 1rem;
        font-weight: 900;
    }

    .profile-role-credit-value span[b-lthk15jhb0] {
        margin-top: 3px;
        font-size: 0.6rem;
        font-weight: 800;
    }

.profile-role-credit-value-active[b-lthk15jhb0] {
    background: #eff6ff;
    color: #2563eb;
}

.profile-role-credit-value-expired[b-lthk15jhb0] {
    background: #fff7ed;
    color: #ea580c;
}

.profile-course-item[b-lthk15jhb0] {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid #edf1f7;
}

    .profile-course-item:first-child[b-lthk15jhb0] {
        padding-top: 2px;
    }

    .profile-course-item:last-child[b-lthk15jhb0] {
        border-bottom: 0;
        padding-bottom: 2px;
    }

.profile-course-icon[b-lthk15jhb0] {
    width: 42px;
    height: 42px;
    border-radius: 7px;
    background: #e8eefb;
    color: #2563eb;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .profile-course-icon .rz-icon[b-lthk15jhb0] {
        font-size: 28px !important;
        color: inherit !important;
    }

.profile-course-content[b-lthk15jhb0] {
    min-width: 0;
}

.profile-course-title-row[b-lthk15jhb0] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
}

    .profile-course-title-row h3[b-lthk15jhb0] {
        margin: 0;
        color: #101828;
        font-size: 0.86rem;
        font-weight: 900;
        line-height: 1.25;
        word-break: break-word;
    }

.profile-course-status[b-lthk15jhb0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 18px;
    padding: 3px 7px;
    border-radius: 5px;
    background: #dcfce7;
    color: #16a34a;
    font-size: 0.56rem;
    font-weight: 900;
    white-space: nowrap;
}

.profile-course-meta[b-lthk15jhb0] {
    margin-top: 4px;
    display: flex;
    justify-content: space-between;
    gap: 10px;
    color: #667085;
    font-size: 0.78rem;
    font-weight: 600;
}

.profile-table-wrap[b-lthk15jhb0] {
    width: 100%;
    overflow-x: auto;
    border: 1px solid #dfe7f1;
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

.profile-activities-table[b-lthk15jhb0] {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    background: #ffffff;
}

    .profile-activities-table thead th[b-lthk15jhb0] {
        background: #f4f7fb;
        color: #475467;
        font-size: 0.8rem;
        font-weight: 900;
        text-transform: uppercase;
        letter-spacing: 0.02em;
        text-align: left;
        padding: 14px 14px;
        border-bottom: 1px solid #dfe7f1;
        white-space: nowrap;
    }

    .profile-activities-table tbody td[b-lthk15jhb0] {
        color: #344054;
        font-size: 0.83rem;
        font-weight: 500;
        padding: 14px 14px;
        border-bottom: 1px solid #edf1f7;
        white-space: nowrap;
    }

    .profile-activities-table tbody tr:last-child td[b-lthk15jhb0] {
        border-bottom: 0;
    }

.profile-attendance-pill[b-lthk15jhb0],
.profile-credit-pill[b-lthk15jhb0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 42px;
    padding: 5px 9px;
    border-radius: 7px;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
    white-space: nowrap;
}

.profile-attendance-pill-yes[b-lthk15jhb0] {
    background: #dcfce7;
    color: #16a34a;
}

.profile-attendance-pill-no[b-lthk15jhb0] {
    background: #fee2e2;
    color: #dc2626;
}

.profile-attendance-pill-pending[b-lthk15jhb0] {
    background: #fff7ed;
    color: #ea580c;
}

.profile-credit-pill[b-lthk15jhb0] {
    background: #eff6ff;
    color: #2563eb;
}

.profile-credit-pill-zero[b-lthk15jhb0] {
    background: #f2f4f7;
    color: #667085;
}

.profile-empty-text[b-lthk15jhb0] {
    color: #667085;
    font-size: 0.9rem;
    font-weight: 600;
    padding: 8px 0;
}

/* Panel derecho limpio */

.profile-shell-editing .profile-edit-sidebar[b-lthk15jhb0] {
    grid-column: 2;
    grid-row: 1 / span 30;
    align-self: start;
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: auto !important;
    height: auto !important;
    background: #f4f7fb;
    border: 1px solid #dfe7f1;
    border-radius: 14px;
    padding: 18px 14px 16px;
    overflow: visible !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
    animation: profileSidebarInClean-b-lthk15jhb0 0.18s ease-out;
}

@keyframes profileSidebarInClean-b-lthk15jhb0 {
    from {
        opacity: 0;
        transform: translateX(14px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.profile-edit-sidebar[b-lthk15jhb0],
.profile-edit-sidebar *[b-lthk15jhb0] {
    box-sizing: border-box;
}

.profile-edit-sidebar-header[b-lthk15jhb0] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 28px;
}

.profile-sidebar-close[b-lthk15jhb0] {
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 999px;
    background: #ffffff;
    color: #111827;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
}

    .profile-sidebar-close .rz-icon[b-lthk15jhb0] {
        font-size: 20px !important;
        color: inherit !important;
    }

.profile-sidebar-divider[b-lthk15jhb0] {
    height: 1px;
    background: #dfe7f1;
    margin: 12px 0 16px;
}

.profile-sidebar-body[b-lthk15jhb0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .profile-sidebar-body h2[b-lthk15jhb0] {
        margin: 0 0 4px;
        color: #111827;
        font-size: 1.05rem;
        font-weight: 900;
        line-height: 1.25;
    }

.profile-sidebar-field[b-lthk15jhb0],
.profile-sidebar-sports[b-lthk15jhb0] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

    .profile-sidebar-field label[b-lthk15jhb0],
    .profile-sidebar-sports label[b-lthk15jhb0] {
        color: #050505;
        font-size: 0.78rem;
        font-weight: 900;
        line-height: 1.2;
    }

.profile-edit-sidebar .rz-textbox[b-lthk15jhb0],
.profile-edit-sidebar .rz-inputtext[b-lthk15jhb0] {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    color: #344054 !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    padding: 0 12px !important;
    box-shadow: none !important;
    outline: none !important;
}

    .profile-edit-sidebar .rz-inputtext:focus[b-lthk15jhb0],
    .profile-edit-sidebar .rz-textbox:focus[b-lthk15jhb0],
    .profile-edit-sidebar .rz-state-focused[b-lthk15jhb0] {
        border-color: #9ca3af !important;
        box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08) !important;
        outline: none !important;
    }

    .profile-edit-sidebar .rz-state-disabled[b-lthk15jhb0],
    .profile-edit-sidebar .rz-inputtext:disabled[b-lthk15jhb0],
    .profile-edit-sidebar .rz-textbox:disabled[b-lthk15jhb0] {
        opacity: 1 !important;
        background: #ffffff !important;
        color: #9ca3af !important;
    }

.profile-edit-sidebar .profile-sidebar-dropdown.rz-dropdown[b-lthk15jhb0] {
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
    display: flex !important;
    align-items: center !important;
}

    .profile-edit-sidebar .profile-sidebar-dropdown.rz-dropdown:hover[b-lthk15jhb0],
    .profile-edit-sidebar .profile-sidebar-dropdown.rz-dropdown.rz-state-focused[b-lthk15jhb0],
    .profile-edit-sidebar .profile-sidebar-dropdown.rz-dropdown:focus-within[b-lthk15jhb0] {
        border-color: #9ca3af !important;
        box-shadow: 0 0 0 3px rgba(17, 24, 39, 0.08) !important;
        outline: none !important;
        background: #ffffff !important;
    }

.profile-edit-sidebar .profile-sidebar-dropdown .rz-dropdown-label[b-lthk15jhb0] {
    height: 36px !important;
    line-height: 36px !important;
    padding: 0 34px 0 12px !important;
    color: #344054 !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

    .profile-edit-sidebar .profile-sidebar-dropdown .rz-placeholder[b-lthk15jhb0],
    .profile-edit-sidebar .profile-sidebar-dropdown .rz-dropdown-label.rz-inputtext-placeholder[b-lthk15jhb0] {
        color: #9ca3af !important;
    }

.profile-edit-sidebar .profile-sidebar-dropdown .rz-dropdown-trigger[b-lthk15jhb0] {
    width: 32px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: #667085 !important;
    box-shadow: none !important;
}

    .profile-edit-sidebar .profile-sidebar-dropdown .rz-dropdown-trigger .rz-icon[b-lthk15jhb0],
    .profile-edit-sidebar .profile-sidebar-dropdown .rz-dropdown-trigger .rzi[b-lthk15jhb0] {
        font-size: 18px !important;
        color: #667085 !important;
    }

.rz-popup[b-lthk15jhb0],
.rz-dropdown-panel[b-lthk15jhb0],
.rz-multiselect-panel[b-lthk15jhb0],
.rz-autocomplete-panel[b-lthk15jhb0] {
    z-index: 10000 !important;
}

.rz-dropdown-panel[b-lthk15jhb0] {
    border-radius: 10px !important;
    border: 1px solid #d1d5db !important;
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14) !important;
}

    .rz-dropdown-panel .rz-dropdown-items[b-lthk15jhb0],
    .rz-popup .rz-dropdown-items[b-lthk15jhb0] {
        padding: 4px !important;
        background: #ffffff !important;
    }

    .rz-dropdown-panel .rz-dropdown-item[b-lthk15jhb0],
    .rz-popup .rz-dropdown-item[b-lthk15jhb0] {
        min-height: 34px !important;
        padding: 8px 12px !important;
        border-radius: 6px !important;
        color: #344054 !important;
        font-size: 0.78rem !important;
        font-weight: 500 !important;
    }

        .rz-dropdown-panel .rz-dropdown-item:hover[b-lthk15jhb0],
        .rz-popup .rz-dropdown-item:hover[b-lthk15jhb0] {
            background: #f3f4f6 !important;
            color: #111827 !important;
        }

        .rz-dropdown-panel .rz-dropdown-item.rz-state-highlight[b-lthk15jhb0],
        .rz-popup .rz-dropdown-item.rz-state-highlight[b-lthk15jhb0] {
            background: #111827 !important;
            color: #ffffff !important;
        }

.profile-sidebar-sport-list[b-lthk15jhb0] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0;
}

    .profile-sidebar-sport-list span[b-lthk15jhb0] {
        min-height: 32px;
        border-radius: 8px;
        background: #8f96a1;
        color: #ffffff;
        font-size: 0.74rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 7px 10px;
        text-align: center;
    }

.profile-sidebar-empty[b-lthk15jhb0] {
    border-radius: 8px;
    background: #ffffff;
    color: #667085;
    padding: 10px 12px;
    font-size: 0.76rem;
    font-weight: 700;
}

.profile-sidebar-footer[b-lthk15jhb0] {
    position: relative !important;
    bottom: auto !important;
    background: transparent !important;
    padding-top: 18px;
    margin-top: 18px;
}

.profile-sidebar-save-btn[b-lthk15jhb0] {
    width: 100% !important;
    min-height: 38px !important;
    border-radius: 8px !important;
    background: #111827 !important;
    border-color: #111827 !important;
    color: #ffffff !important;
    font-size: 0.78rem !important;
    font-weight: 900 !important;
    letter-spacing: 0.05em;
}

.profile-section-header[b-lthk15jhb0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.profile-close-btn[b-lthk15jhb0] {
    width: 32px;
    height: 32px;
    border-radius: 999px;
    background: #f2f4f7;
    color: #475467;
}

.profile-form-grid[b-lthk15jhb0] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.profile-password-grid[b-lthk15jhb0] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.profile-form-group[b-lthk15jhb0] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

.profile-form-label[b-lthk15jhb0] {
    color: #475467;
    font-size: 0.78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.profile-form-actions[b-lthk15jhb0] {
    margin-top: 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.profile-form-actions-end[b-lthk15jhb0] {
    justify-content: flex-end;
}

.profile-page .rz-textbox[b-lthk15jhb0],
.profile-page .rz-password[b-lthk15jhb0] {
    border-radius: 10px !important;
}

.profile-page .rz-button[b-lthk15jhb0] {
    border-radius: 10px !important;
    font-weight: 800 !important;
}

@media (max-width: 1100px) {
    .profile-shell-editing[b-lthk15jhb0] {
        max-width: 980px;
        display: flex !important;
        flex-direction: column;
        gap: 16px;
    }

        .profile-shell-editing .profile-hero[b-lthk15jhb0] {
            order: 1;
        }

        .profile-shell-editing .profile-edit-sidebar[b-lthk15jhb0] {
            order: 2;
            width: 100% !important;
            max-width: 100% !important;
            grid-column: auto;
            grid-row: auto;
            padding: 18px 14px 16px;
        }

        .profile-shell-editing > :not(.profile-edit-sidebar):not(.profile-hero)[b-lthk15jhb0] {
            order: 3;
        }
}

@media (max-width: 768px) {
    .profile-page[b-lthk15jhb0] {
        padding: 24px 16px 36px;
    }

    .profile-hero[b-lthk15jhb0] {
        grid-template-columns: 112px minmax(0, 1fr);
        gap: 14px;
        padding-top: 18px;
    }

    .profile-avatar-wrap[b-lthk15jhb0] {
        width: 112px;
        height: 112px;
    }

    .profile-avatar-camera[b-lthk15jhb0] {
        width: 29px;
        height: 29px;
        right: 2px;
        bottom: 6px;
    }

        .profile-avatar-camera .rz-icon[b-lthk15jhb0] {
            font-size: 14px !important;
        }

    .profile-title-row h1[b-lthk15jhb0] {
        font-size: 1.12rem;
    }

    .profile-form-grid[b-lthk15jhb0],
    .profile-password-grid[b-lthk15jhb0] {
        grid-template-columns: 1fr;
    }

    .profile-form-actions[b-lthk15jhb0] {
        align-items: stretch;
        justify-content: stretch;
    }

        .profile-form-actions .rz-button[b-lthk15jhb0] {
            width: 100%;
        }
}

@media (max-width: 520px) {
    .profile-role-credit-item[b-lthk15jhb0] {
        grid-template-columns: 42px minmax(0, 1fr);
        align-items: flex-start;
    }

    .profile-role-credit-icon[b-lthk15jhb0] {
        width: 42px;
        height: 42px;
    }

        .profile-role-credit-icon .rz-icon[b-lthk15jhb0] {
            font-size: 25px !important;
        }

    .profile-role-credit-values[b-lthk15jhb0] {
        grid-column: 1 / -1;
        justify-content: stretch;
    }

    .profile-role-credit-value[b-lthk15jhb0] {
        flex: 1;
    }

    .profile-role-credit-main h3[b-lthk15jhb0] {
        font-size: 0.84rem;
    }

    .profile-role-credit-meta[b-lthk15jhb0] {
        font-size: 0.68rem;
    }
}

@media (max-width: 480px) {
    .profile-page[b-lthk15jhb0] {
        padding: 22px 16px 34px;
    }

    .profile-shell[b-lthk15jhb0] {
        gap: 14px;
    }

    .profile-hero[b-lthk15jhb0] {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 12px;
        align-items: center;
    }

    .profile-avatar-wrap[b-lthk15jhb0] {
        width: 96px;
        height: 96px;
    }

    .profile-avatar-camera[b-lthk15jhb0] {
        width: 27px;
        height: 27px;
        right: 0;
        bottom: 5px;
    }

        .profile-avatar-camera .rz-icon[b-lthk15jhb0] {
            font-size: 13px !important;
        }

    .profile-title-row[b-lthk15jhb0] {
        align-items: flex-start;
    }

        .profile-title-row h1[b-lthk15jhb0] {
            font-size: 1rem;
        }

    .profile-edit-circle[b-lthk15jhb0] {
        width: 30px;
        height: 30px;
    }

        .profile-edit-circle .rz-icon[b-lthk15jhb0] {
            font-size: 16px;
        }

    .profile-meta-row[b-lthk15jhb0] {
        gap: 6px 10px;
        font-size: 0.74rem;
    }

    .profile-meta-item .rz-icon[b-lthk15jhb0] {
        font-size: 15px;
    }

    .profile-pill[b-lthk15jhb0] {
        min-height: 22px;
        padding: 4px 8px;
        font-size: 0.66rem;
    }

    .profile-stats-grid[b-lthk15jhb0] {
        gap: 6px;
    }

    .profile-stat-card[b-lthk15jhb0] {
        min-height: 104px;
        padding: 12px 5px 10px;
    }

    .profile-stat-icon .rz-icon[b-lthk15jhb0] {
        font-size: 22px !important;
    }

    .profile-stat-card strong[b-lthk15jhb0] {
        font-size: 1.4rem;
    }

    .profile-stat-card span[b-lthk15jhb0] {
        font-size: 0.66rem;
    }

    .profile-courses-card[b-lthk15jhb0],
    .profile-activities-card[b-lthk15jhb0],
    .profile-edit-card[b-lthk15jhb0],
    .profile-role-credits-card[b-lthk15jhb0] {
        padding: 16px;
        border-radius: 10px;
    }

    .profile-course-item[b-lthk15jhb0] {
        grid-template-columns: 38px minmax(0, 1fr);
        gap: 10px;
        padding: 13px 0;
    }

    .profile-course-icon[b-lthk15jhb0] {
        width: 38px;
        height: 38px;
    }

        .profile-course-icon .rz-icon[b-lthk15jhb0] {
            font-size: 25px !important;
        }

    .profile-course-title-row h3[b-lthk15jhb0] {
        font-size: 0.78rem;
    }

    .profile-course-meta[b-lthk15jhb0] {
        font-size: 0.7rem;
    }

    .profile-activities-table[b-lthk15jhb0] {
        min-width: 640px;
    }

        .profile-activities-table thead th[b-lthk15jhb0],
        .profile-activities-table tbody td[b-lthk15jhb0] {
            padding: 13px 12px;
            font-size: 0.72rem;
        }

    .profile-shell-editing .profile-edit-sidebar[b-lthk15jhb0] {
        width: 100% !important;
        max-width: 100% !important;
        padding: 16px 12px 14px;
        border-radius: 12px;
    }

    .profile-sidebar-body h2[b-lthk15jhb0] {
        font-size: 1rem;
    }

    .profile-sidebar-field label[b-lthk15jhb0],
    .profile-sidebar-sports label[b-lthk15jhb0] {
        font-size: 0.76rem;
    }

    .profile-edit-sidebar .rz-textbox[b-lthk15jhb0],
    .profile-edit-sidebar .rz-inputtext[b-lthk15jhb0],
    .profile-edit-sidebar .profile-sidebar-dropdown.rz-dropdown[b-lthk15jhb0] {
        height: 36px !important;
        min-height: 36px !important;
        font-size: 0.76rem !important;
    }

    .profile-sidebar-save-btn[b-lthk15jhb0] {
        min-height: 38px !important;
    }

    .profile-sidebar-sport-list span[b-lthk15jhb0] {
        min-height: 29px;
        font-size: 0.72rem;
    }
}


/* =========================================================
   PROFILE SIDEBAR - DROPDOWNS UBICACIÓN / ROLES
   ========================================================= */

.profile-edit-sidebar .profile-sidebar-info[b-lthk15jhb0] {
    color: #64748B;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.35;
}

.profile-edit-sidebar .profile-sidebar-warning[b-lthk15jhb0] {
    color: #B45309;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.35;
}

/* Dropdown simple */
.profile-edit-sidebar .profile-sidebar-dropdown.rz-dropdown[b-lthk15jhb0] {
    width: 100% !important;
    min-height: 36px !important;
    border: 1px solid #d1d5db !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    box-shadow: none !important;
}

/* Dropdown múltiple de tipos de usuario */
.profile-edit-sidebar .profile-sidebar-roles-dropdown.rz-dropdown[b-lthk15jhb0] {
    height: auto !important;
    min-height: 38px !important;
    align-items: stretch !important;
    overflow: visible !important;
}

/* Label interno del dropdown múltiple */
.profile-edit-sidebar .profile-sidebar-roles-dropdown .rz-dropdown-label[b-lthk15jhb0] {
    height: auto !important;
    min-height: 38px !important;
    line-height: normal !important;
    padding: 6px 34px 6px 8px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
    white-space: normal !important;
    overflow: visible !important;
}

/* Chips Radzen */
.profile-edit-sidebar .profile-sidebar-roles-dropdown .rz-chip[b-lthk15jhb0],
.profile-edit-sidebar .profile-sidebar-roles-dropdown .rz-token[b-lthk15jhb0] {
    max-width: 100% !important;
    min-height: 25px !important;
    height: 25px !important;
    margin: 0 !important;
    padding: 0 7px !important;
    border-radius: 999px !important;
    background: #EEF2F7 !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
    font-size: 0.7rem !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Texto del chip */
.profile-edit-sidebar .profile-sidebar-roles-dropdown .rz-chip-text[b-lthk15jhb0],
.profile-edit-sidebar .profile-sidebar-roles-dropdown .rz-token-label[b-lthk15jhb0] {
    max-width: 185px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* Flecha */
.profile-edit-sidebar .profile-sidebar-dropdown .rz-dropdown-trigger[b-lthk15jhb0] {
    width: 32px !important;
    min-height: 36px !important;
    border: 0 !important;
    background: transparent !important;
    color: #667085 !important;
    box-shadow: none !important;
}

/* Disabled limpio */
.profile-edit-sidebar .profile-sidebar-dropdown.rz-state-disabled[b-lthk15jhb0],
.profile-edit-sidebar .profile-sidebar-dropdown.rz-dropdown-disabled[b-lthk15jhb0] {
    opacity: 1 !important;
    background: #ffffff !important;
    color: #9ca3af !important;
}

/* Panel emergente */
.rz-popup[b-lthk15jhb0],
.rz-dropdown-panel[b-lthk15jhb0],
.rz-multiselect-panel[b-lthk15jhb0],
.rz-autocomplete-panel[b-lthk15jhb0] {
    z-index: 10000 !important;
}

/* Mobile chips */
@media (max-width: 480px) {
    .profile-edit-sidebar .profile-sidebar-roles-dropdown .rz-chip-text[b-lthk15jhb0],
    .profile-edit-sidebar .profile-sidebar-roles-dropdown .rz-token-label[b-lthk15jhb0] {
        max-width: 130px !important;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Reports/MembersReports.razor.rz.scp.css */
/* =========================================================
   MEMBER REPORT - MOCKUP AJUSTADO
   Desktop: sidebar izquierda + contenido principal
   Mobile: drawer desde la derecha con scroll propio
   ========================================================= */

.member-report-page[b-ds3hhwewub] {
    width: 100%;
    min-height: 100vh;
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    box-sizing: border-box;
    overflow-x: hidden;
}

/* =========================================================
   OVERLAY MOBILE
   ========================================================= */

.member-report-mobile-overlay[b-ds3hhwewub] {
    display: none;
}

/* =========================================================
   SIDEBAR FILTROS - DESKTOP
   ========================================================= */

.member-report-sidebar[b-ds3hhwewub] {
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
    max-height: 100vh;
    background: #F1F5F9;
    border-right: 1px solid #D8E0EA;
    padding: 24px 18px;
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #CBD5E1 transparent;
    z-index: 5;
}

    .member-report-sidebar[b-ds3hhwewub]::-webkit-scrollbar {
        width: 8px;
    }

    .member-report-sidebar[b-ds3hhwewub]::-webkit-scrollbar-track {
        background: transparent;
    }

    .member-report-sidebar[b-ds3hhwewub]::-webkit-scrollbar-thumb {
        background: #CBD5E1;
        border-radius: 999px;
    }

.member-report-sidebar-inner[b-ds3hhwewub] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 28px;
}

.member-report-sidebar-header[b-ds3hhwewub] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

    .member-report-sidebar-header h2[b-ds3hhwewub] {
        margin: 0;
        color: #0F172A;
        font-size: 20px;
        line-height: 1.15;
        font-weight: 800;
        letter-spacing: -0.03em;
    }

    .member-report-sidebar-header p[b-ds3hhwewub] {
        margin: 8px 0 0 0;
        color: #64748B;
        font-size: 14px;
        line-height: 1.45;
        font-weight: 500;
    }

.member-report-close-filter[b-ds3hhwewub] {
    display: none;
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 999px;
    border: none;
    background: transparent;
    color: #0F172A;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

    .member-report-close-filter .rz-icon[b-ds3hhwewub],
    .member-report-close-filter[b-ds3hhwewub]  .rz-icon {
        font-size: 24px !important;
        color: #0F172A !important;
    }

.member-report-filter-buttons[b-ds3hhwewub] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.member-report-small-btn[b-ds3hhwewub] {
    min-height: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    padding: 0 14px;
    border: none;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 14px;
    line-height: 1;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.member-report-small-btn-dark[b-ds3hhwewub] {
    background: #0F172A;
    color: #FFFFFF;
}

.member-report-small-btn-light[b-ds3hhwewub] {
    background: #D1D5DB;
    color: #FFFFFF;
}

.member-report-small-btn:disabled[b-ds3hhwewub] {
    opacity: .65;
    cursor: not-allowed;
}

/* =========================================================
   GRUPOS / LABELS FILTROS
   ========================================================= */

.member-report-filter-group[b-ds3hhwewub] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

    .member-report-filter-group h3[b-ds3hhwewub] {
        margin: 0 0 4px 0;
        color: #0F172A;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 800;
        letter-spacing: -0.02em;
    }

.member-report-field[b-ds3hhwewub] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 0;
}

    .member-report-field label[b-ds3hhwewub] {
        color: #334155;
        font-size: 14px;
        line-height: 1.2;
        font-weight: 800;
    }

/* =========================================================
   MAIN DESKTOP
   ========================================================= */

.member-report-main[b-ds3hhwewub] {
    min-width: 0;
    padding: 0 34px 34px 34px;
    box-sizing: border-box;
}

.member-report-hero[b-ds3hhwewub] {
    min-height: 160px;
    width: 100%;
    background: #0F172A;
    border-radius: 0 0 28px 28px;
    color: #FFFFFF;
    padding: 42px 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

    .member-report-hero h1[b-ds3hhwewub] {
        margin: 0;
        color: #FFFFFF;
        text-align: center;
        font-size: 38px;
        line-height: 1.08;
        font-weight: 800;
        letter-spacing: -0.04em;
    }

    .member-report-hero p[b-ds3hhwewub] {
        margin: 12px 0 0 0;
        color: rgba(255, 255, 255, 0.72);
        text-align: center;
        font-size: 16px;
        line-height: 1.5;
    }

.member-report-export-btn[b-ds3hhwewub] {
    position: absolute;
    top: 18px;
    right: 22px;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.18);
    background: rgba(255,255,255,0.08);
    color: #FFFFFF;
    padding: 0 14px;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

    .member-report-export-btn .rz-icon[b-ds3hhwewub],
    .member-report-export-btn[b-ds3hhwewub]  .rz-icon {
        color: #FFFFFF !important;
        font-size: 18px !important;
    }

/* =========================================================
   BUSCADOR PRINCIPAL
   ========================================================= */

.member-report-search-row[b-ds3hhwewub] {
    width: 100%;
    max-width: 520px;
    margin: 28px 0 18px 0;
}

    .member-report-search-row label[b-ds3hhwewub] {
        display: block;
        margin-bottom: 8px;
        color: #0F172A;
        font-size: 16px;
        font-weight: 700;
    }

.member-report-search-inline[b-ds3hhwewub] {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 96px;
    align-items: center;
}

.member-report-main-search[b-ds3hhwewub] {
    width: 100%;
}

.member-report-search-btn[b-ds3hhwewub] {
    min-height: 42px;
    height: 42px;
    border: none;
    border-radius: 0 8px 8px 0;
    background: #0F172A;
    color: #FFFFFF;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

/* =========================================================
   RESULTADOS
   ========================================================= */

.member-report-results[b-ds3hhwewub] {
    width: 100%;
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    overflow: hidden;
    box-sizing: border-box;
}

.member-report-results-header[b-ds3hhwewub] {
    padding: 18px 22px 10px 22px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    position: relative;
}

    .member-report-results-header h2[b-ds3hhwewub] {
        margin: 0;
        color: #0F172A;
        font-size: 20px;
        line-height: 1.2;
        font-weight: 800;
    }

    .member-report-results-header span[b-ds3hhwewub] {
        display: block;
        margin-top: 5px;
        color: #64748B;
        font-size: 16px;
    }

.member-report-loading[b-ds3hhwewub] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #64748B;
    font-size: 16px;
    font-weight: 700;
}

.member-report-mobile-filter-btn[b-ds3hhwewub] {
    display: none;
}

/* =========================================================
   TABLA
   ========================================================= */

.member-report-table-scroll[b-ds3hhwewub] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 22px 22px 22px;
    box-sizing: border-box;
    -webkit-overflow-scrolling: touch;
}

.member-report-grid[b-ds3hhwewub] {
    min-width: 1650px;
    border-radius: 8px;
    overflow: hidden;
}

.member-report-table-scroll[b-ds3hhwewub]::-webkit-scrollbar {
    height: 8px;
}

.member-report-table-scroll[b-ds3hhwewub]::-webkit-scrollbar-track {
    background: #EEF2F7;
    border-radius: 999px;
}

.member-report-table-scroll[b-ds3hhwewub]::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 999px;
}

    .member-report-table-scroll[b-ds3hhwewub]::-webkit-scrollbar-thumb:hover {
        background: #94A3B8;
    }

/* =========================================================
   RADZEN GRID
   ========================================================= */

.member-report-page .rz-datatable[b-ds3hhwewub],
.member-report-page .rz-grid-table[b-ds3hhwewub] {
    width: 100%;
}

.member-report-page .rz-grid-table[b-ds3hhwewub] {
    table-layout: fixed;
    border-collapse: collapse !important;
}

    .member-report-page .rz-datatable-thead th[b-ds3hhwewub],
    .member-report-page .rz-grid-table thead th[b-ds3hhwewub] {
        background: #FFFFFF !important;
        color: #0F172A !important;
        font-size: 14px !important;
        font-weight: 800 !important;
        border-bottom: 1px solid #E5E7EB !important;
        padding: 12px 14px !important;
    }

.member-report-page .rz-column-title[b-ds3hhwewub] {
    color: #0F172A !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

.member-report-page .rz-datatable-data td[b-ds3hhwewub],
.member-report-page .rz-data-row td[b-ds3hhwewub] {
    color: #334155 !important;
    font-size: 14px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 10px 14px !important;
}

.member-report-page .rz-data-row:hover td[b-ds3hhwewub] {
    background: #F8FAFC !important;
}

.member-report-page .rz-paginator[b-ds3hhwewub] {
    border-top: 1px solid #E5E7EB;
    padding-top: 12px;
    font-size: 14px !important;
}

/* =========================================================
   CELDAS
   ========================================================= */

.member-report-user-cell[b-ds3hhwewub] {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

    .member-report-user-cell img[b-ds3hhwewub] {
        width: 38px;
        height: 38px;
        border-radius: 12px;
        object-fit: cover;
        background: #E5E7EB;
        flex: 0 0 auto;
    }

    .member-report-user-cell div[b-ds3hhwewub] {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .member-report-user-cell strong[b-ds3hhwewub] {
        color: #0F172A;
        font-size: 14px;
        font-weight: 800;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .member-report-user-cell span[b-ds3hhwewub] {
        color: #64748B;
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.member-report-status-pill[b-ds3hhwewub],
.member-report-enabled[b-ds3hhwewub],
.member-report-disabled[b-ds3hhwewub] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.member-report-status-pill[b-ds3hhwewub] {
    background: #E5E7EB;
    color: #374151;
    border: 1px solid #CBD5E1;
}

.member-report-enabled[b-ds3hhwewub] {
    background: #DCFCE7;
    color: #166534;
    border: 1px solid #BBF7D0;
}

.member-report-disabled[b-ds3hhwewub] {
    background: #FEE2E2;
    color: #991B1B;
    border: 1px solid #FECACA;
}

/* =========================================================
   RADZEN INPUTS - FILTROS PAREJOS
   ========================================================= */

.member-report-page .rz-textbox[b-ds3hhwewub],
.member-report-page .rz-dropdown[b-ds3hhwewub],
.member-report-page .rz-numeric[b-ds3hhwewub],
.member-report-page .rz-spinner[b-ds3hhwewub],
.member-report-page .rz-datepicker[b-ds3hhwewub] {
    width: 100% !important;
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 14px !important;
    border: 1px solid #CBD5E1 !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    overflow: hidden !important;
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
    font-size: 16px !important;
}

    /* Inputs internos de Radzen */
    .member-report-page .rz-textbox[b-ds3hhwewub],
    .member-report-page .rz-inputtext[b-ds3hhwewub],
    .member-report-page .rz-dropdown-label[b-ds3hhwewub],
    .member-report-page .rz-spinner-input[b-ds3hhwewub],
    .member-report-page .rz-datepicker input[b-ds3hhwewub] {
        color: #0F172A !important;
        font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
        font-size: 16px !important;
        font-weight: 500 !important;
    }

        /* Placeholder / texto */
        .member-report-page .rz-dropdown-label[b-ds3hhwewub],
        .member-report-page .rz-placeholder[b-ds3hhwewub],
        .member-report-page .rz-inputtext[b-ds3hhwewub]::placeholder,
        .member-report-page .rz-textbox[b-ds3hhwewub]::placeholder {
            color: #64748B !important;
            font-size: 16px !important;
            font-weight: 500 !important;
        }

/* TextBox normal */
.member-report-page .rz-textbox[b-ds3hhwewub] {
    padding: 0 14px !important;
    line-height: 42px !important;
}

/* Dropdown */
.member-report-page .rz-dropdown[b-ds3hhwewub] {
    display: flex !important;
    align-items: center !important;
}

.member-report-page .rz-dropdown-label[b-ds3hhwewub] {
    display: flex !important;
    align-items: center !important;
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 38px 0 14px !important;
}

/* Flecha del dropdown */
.member-report-page .rz-dropdown-trigger[b-ds3hhwewub] {
    width: 38px !important;
    height: 42px !important;
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-left: none !important;
    background: transparent !important;
}

    .member-report-page .rz-dropdown-trigger .rz-icon[b-ds3hhwewub],
    .member-report-page .rz-dropdown-trigger-icon[b-ds3hhwewub],
    .member-report-page .rz-dropdown[b-ds3hhwewub]  .rz-dropdown-trigger-icon {
        color: #0F172A !important;
        font-size: 20px !important;
    }

/* Numeric */
.member-report-page .rz-numeric[b-ds3hhwewub],
.member-report-page .rz-spinner[b-ds3hhwewub] {
    display: flex !important;
    align-items: center !important;
}

.member-report-page .rz-spinner-input[b-ds3hhwewub] {
    height: 42px !important;
    line-height: 42px !important;
    padding: 0 14px !important;
}

/* DatePicker */
.member-report-page .rz-datepicker[b-ds3hhwewub] {
    display: flex !important;
    align-items: center !important;
}

    .member-report-page .rz-datepicker input[b-ds3hhwewub] {
        height: 42px !important;
        line-height: 42px !important;
        padding: 0 14px !important;
    }

/* Disabled parejo */
.member-report-page .rz-state-disabled[b-ds3hhwewub],
.member-report-page .rz-dropdown.rz-state-disabled[b-ds3hhwewub],
.member-report-page .rz-textbox:disabled[b-ds3hhwewub],
.member-report-page .rz-inputtext:disabled[b-ds3hhwewub] {
    background: #F8FAFC !important;
    border-color: #E5E7EB !important;
    color: #94A3B8 !important;
    opacity: 1 !important;
}

/* Focus parejo */
.member-report-page .rz-textbox:focus[b-ds3hhwewub],
.member-report-page .rz-dropdown:focus-within[b-ds3hhwewub],
.member-report-page .rz-datepicker:focus-within[b-ds3hhwewub],
.member-report-page .rz-numeric:focus-within[b-ds3hhwewub],
.member-report-page .rz-spinner:focus-within[b-ds3hhwewub] {
    border-color: #0F172A !important;
    box-shadow: 0 0 0 2px rgba(15, 23, 42, 0.08) !important;
}

/* Buscador principal de la derecha */
.member-report-page .member-report-main-search.rz-textbox[b-ds3hhwewub],
.member-report-page .member-report-main-search[b-ds3hhwewub] {
    min-height: 42px !important;
    height: 42px !important;
    border-radius: 8px 0 0 8px !important;
    padding: 0 14px !important;
    line-height: 42px !important;
}

.member-report-input[b-ds3hhwewub] {
    width: 100% !important;
}

/* =========================================================
   DESKTOP MEDIO
   ========================================================= */

@media (max-width: 1180px) {
    .member-report-page[b-ds3hhwewub] {
        grid-template-columns: 290px minmax(0, 1fr);
    }

    .member-report-sidebar[b-ds3hhwewub] {
        padding: 22px 14px;
    }

    .member-report-main[b-ds3hhwewub] {
        padding: 0 20px 28px 20px;
    }

    .member-report-hero h1[b-ds3hhwewub] {
        font-size: 32px;
    }
}

/* =========================================================
   MOBILE - DRAWER DERECHA
   ========================================================= */

@media (max-width: 900px) {
    .member-report-page[b-ds3hhwewub] {
        display: block;
        min-height: 100vh;
    }

    .member-report-main[b-ds3hhwewub] {
        padding: 0 14px 28px 14px;
    }

    .member-report-mobile-overlay[b-ds3hhwewub] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 99998;
        background: rgba(15, 23, 42, 0.58);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.2s ease, visibility 0.2s ease;
    }

        .member-report-mobile-overlay.show[b-ds3hhwewub] {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

    .member-report-sidebar[b-ds3hhwewub] {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        width: min(88vw, 360px);
        height: 100dvh;
        min-height: 100dvh;
        max-height: 100dvh;
        padding: 28px 18px 34px 18px;
        background: #F8FAFC;
        border-left: 1px solid #E5E7EB;
        border-right: none;
        z-index: 99999;
        transform: translateX(105%);
        transition: transform 0.24s ease;
        box-shadow: -20px 0 45px rgba(15, 23, 42, 0.25);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }

        .member-report-sidebar.open[b-ds3hhwewub] {
            transform: translateX(0);
        }

    .member-report-close-filter[b-ds3hhwewub] {
        display: inline-flex;
    }

    .member-report-sidebar-header[b-ds3hhwewub] {
        padding-right: 2px;
    }

        .member-report-sidebar-header h2[b-ds3hhwewub] {
            font-size: 20px;
        }

        .member-report-sidebar-header p[b-ds3hhwewub] {
            font-size: 14px;
        }

    .member-report-filter-buttons[b-ds3hhwewub] {
        position: sticky;
        top: -28px;
        z-index: 10;
        padding: 10px 0;
        background: #F8FAFC;
    }

    .member-report-small-btn[b-ds3hhwewub] {
        min-height: 36px;
        height: 36px;
        padding: 0 14px;
        font-size: 14px;
    }

    .member-report-hero[b-ds3hhwewub] {
        min-height: 144px;
        border-radius: 0 0 24px 24px;
        padding: 30px 22px;
    }

        .member-report-hero h1[b-ds3hhwewub] {
            max-width: 240px;
            margin: 0 auto;
            font-size: 27px;
            line-height: 1.05;
        }

        .member-report-hero p[b-ds3hhwewub] {
            max-width: 310px;
            margin: 8px auto 0 auto;
            font-size: 14px;
            line-height: 1.45;
        }

    .member-report-export-btn[b-ds3hhwewub] {
        display: none;
    }

    .member-report-search-row[b-ds3hhwewub] {
        max-width: 100%;
        margin: 24px 0 18px 0;
    }

        .member-report-search-row label[b-ds3hhwewub] {
            font-size: 16px;
        }

    .member-report-results[b-ds3hhwewub] {
        background: transparent;
        border: none;
        overflow: visible;
        border-radius: 0;
    }

    .member-report-results-header[b-ds3hhwewub] {
        padding: 0 0 10px 0;
        background: transparent;
        border: none;
    }

        .member-report-results-header h2[b-ds3hhwewub] {
            font-size: 20px;
        }

        .member-report-results-header span[b-ds3hhwewub] {
            font-size: 16px;
        }

    .member-report-mobile-filter-btn[b-ds3hhwewub] {
        width: 58px;
        height: 58px;
        min-width: 58px;
        border-radius: 999px;
        border: none;
        background: #0F172A;
        color: #FFFFFF;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        right: 18px;
        bottom: 24px;
        z-index: 9990;
        box-shadow: 0 12px 28px rgba(15, 23, 42, 0.25);
        cursor: pointer;
    }

        .member-report-mobile-filter-btn .rz-icon[b-ds3hhwewub],
        .member-report-mobile-filter-btn[b-ds3hhwewub]  .rz-icon {
            color: #FFFFFF !important;
            font-size: 24px !important;
        }

    .member-report-table-scroll[b-ds3hhwewub] {
        padding: 0 0 18px 0;
        border-radius: 12px;
        overflow-x: auto;
    }

    .member-report-grid[b-ds3hhwewub] {
        min-width: 960px;
        background: #FFFFFF;
        border: 1px solid #E5E7EB;
        border-radius: 12px;
    }

    .member-report-page .rz-datatable-thead th[b-ds3hhwewub],
    .member-report-page .rz-grid-table thead th[b-ds3hhwewub] {
        font-size: 13px !important;
        padding: 12px 14px !important;
    }

    .member-report-page .rz-datatable-data td[b-ds3hhwewub],
    .member-report-page .rz-data-row td[b-ds3hhwewub] {
        font-size: 13px !important;
        padding: 12px 14px !important;
    }
}

@media (max-width: 600px) {
    .member-report-main[b-ds3hhwewub] {
        padding: 0 14px 28px 14px;
    }

    .member-report-search-inline[b-ds3hhwewub] {
        grid-template-columns: minmax(0, 1fr) 76px;
    }

    .member-report-search-btn[b-ds3hhwewub] {
        font-size: 13px;
        padding: 0 10px;
    }

    .member-report-hero h1[b-ds3hhwewub] {
        font-size: 26px;
    }

    .member-report-hero p[b-ds3hhwewub] {
        font-size: 14px;
    }

    .member-report-sidebar[b-ds3hhwewub] {
        width: min(88vw, 340px);
    }

    .member-report-sidebar-inner[b-ds3hhwewub] {
        gap: 18px;
    }

    .member-report-grid[b-ds3hhwewub] {
        min-width: 900px;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Reports/ReportsDashboard.razor.rz.scp.css */
/* =========================================================
   REPORTS DASHBOARD - LÍNEA GRÁFICA ACTUAL
   ========================================================= */

.reports-page[b-f90wustevd] {
    min-height: 100vh;
    background: #F8FAFC;
    color: #0F172A;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    padding: 30px 34px;
    box-sizing: border-box;
    overflow-x: hidden;
}

.reports-shell[b-f90wustevd] {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 22px;
    min-width: 0;
}

/* =========================================================
   PUBLICIDAD
   ========================================================= */

.reports-main-banner[b-f90wustevd] {
    margin-bottom: 6px;
}

/* =========================================================
   HEADER
   ========================================================= */

.reports-header[b-f90wustevd] {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-start;
}

    .reports-header > div:first-child[b-f90wustevd] {
        min-width: 0;
    }

.reports-badge[b-f90wustevd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    min-height: 34px;
    padding: 0 14px;
    margin-bottom: 14px;
    border-radius: 999px;
    background: #E5E7EB;
    color: #0F172A;
    border: 1px solid #CBD5E1;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
}

.reports-header h1[b-f90wustevd] {
    margin: 0;
    color: #0F172A;
    font-size: 24px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.reports-header p[b-f90wustevd] {
    margin: 12px 0 0 0;
    max-width: 820px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.6;
}

.reports-actions[b-f90wustevd] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* =========================================================
   BOTONES
   ========================================================= */

.reports-action-btn[b-f90wustevd] {
    min-height: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 8px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-family: 'ClashGrotesk', 'Inter', sans-serif;
    font-size: 16px;
    line-height: 1;
    font-weight: 700;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: none;
    white-space: nowrap;
    transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}

    .reports-action-btn .rz-icon[b-f90wustevd],
    .reports-action-btn[b-f90wustevd]  .rz-icon {
        font-size: 18px !important;
    }

.reports-action-btn-primary[b-f90wustevd] {
    background: #0F172A;
    border-color: #0F172A;
    color: #FFFFFF;
}

    .reports-action-btn-primary .rz-icon[b-f90wustevd],
    .reports-action-btn-primary[b-f90wustevd]  .rz-icon {
        color: #FFFFFF !important;
    }

    .reports-action-btn-primary:hover[b-f90wustevd] {
        background: #1E293B;
        border-color: #1E293B;
        transform: translateY(-1px);
    }

.reports-action-btn-secondary[b-f90wustevd] {
    background: #E5E7EB;
    border-color: #CBD5E1;
    color: #0F172A;
}

    .reports-action-btn-secondary .rz-icon[b-f90wustevd],
    .reports-action-btn-secondary[b-f90wustevd]  .rz-icon {
        color: #0F172A !important;
    }

    .reports-action-btn-secondary:hover[b-f90wustevd] {
        background: #CBD5E1;
        border-color: #CBD5E1;
        transform: translateY(-1px);
    }

/* =========================================================
   SUMMARY KPI
   ========================================================= */

.reports-summary-grid[b-f90wustevd] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
}

.reports-card[b-f90wustevd] {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    border-radius: 18px;
    padding: 20px;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05);
    min-width: 0;
    overflow: hidden;
}

.reports-kpi[b-f90wustevd] {
    min-height: 118px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

    .reports-kpi span[b-f90wustevd] {
        color: #64748B;
        font-size: 16px;
        line-height: 1.35;
        font-weight: 700;
    }

    .reports-kpi strong[b-f90wustevd] {
        display: block;
        color: #0F172A;
        font-size: 34px;
        line-height: 1;
        font-weight: 900;
        letter-spacing: -0.04em;
    }

/* =========================================================
   GRID CARDS
   ========================================================= */

.reports-grid[b-f90wustevd] {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.reports-card-header[b-f90wustevd] {
    margin-bottom: 14px;
}

    .reports-card-header h3[b-f90wustevd],
    .reports-card h3[b-f90wustevd] {
        margin: 0;
        color: #0F172A;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .reports-card-header p[b-f90wustevd] {
        margin: 6px 0 0 0;
        color: #64748B;
        font-size: 16px;
        line-height: 1.5;
    }

.reports-chart-card[b-f90wustevd] {
    min-height: 430px;
}

.reports-chart-box[b-f90wustevd] {
    width: 100%;
    min-height: 330px;
}

/* =========================================================
   TABLAS
   ========================================================= */

.reports-table-scroll[b-f90wustevd] {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px;
    padding-bottom: 6px;
}

.reports-data-grid[b-f90wustevd] {
    min-width: 520px;
    border-radius: 12px;
    overflow: hidden;
}

.reports-events-grid[b-f90wustevd] {
    min-width: 760px;
}

.reports-table-scroll[b-f90wustevd]::-webkit-scrollbar {
    height: 8px;
}

.reports-table-scroll[b-f90wustevd]::-webkit-scrollbar-track {
    background: #EEF2F7;
    border-radius: 999px;
}

.reports-table-scroll[b-f90wustevd]::-webkit-scrollbar-thumb {
    background: #CBD5E1;
    border-radius: 999px;
}

    .reports-table-scroll[b-f90wustevd]::-webkit-scrollbar-thumb:hover {
        background: #94A3B8;
    }

/* =========================================================
   RADZEN GRID / CHART
   ========================================================= */

.reports-page .rz-chart[b-f90wustevd] {
    font-family: 'ClashGrotesk', 'Inter', sans-serif !important;
}

.reports-page .rz-data-grid[b-f90wustevd],
.reports-page .rz-grid[b-f90wustevd],
.reports-page .rz-grid-table[b-f90wustevd] {
    width: 100%;
}

.reports-page .rz-grid-table[b-f90wustevd] {
    border-collapse: collapse !important;
}

    .reports-page .rz-datatable-thead th[b-f90wustevd],
    .reports-page .rz-grid-table thead th[b-f90wustevd] {
        background: #F8FAFC !important;
        color: #0F172A !important;
        font-size: 16px !important;
        font-weight: 800 !important;
        border-bottom: 1px solid #E5E7EB !important;
        padding: 12px 14px !important;
    }

.reports-page .rz-column-title[b-f90wustevd] {
    color: #0F172A !important;
    font-size: 16px !important;
    font-weight: 800 !important;
}

.reports-page .rz-datatable-data td[b-f90wustevd],
.reports-page .rz-data-row td[b-f90wustevd] {
    color: #334155 !important;
    font-size: 16px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid #F1F5F9 !important;
    padding: 12px 14px !important;
}

.reports-page .rz-data-row:hover td[b-f90wustevd] {
    background: #F8FAFC !important;
}

.reports-page .rz-paginator[b-f90wustevd] {
    border-top: 1px solid #E5E7EB;
    padding-top: 12px;
    font-size: 16px !important;
}

/* =========================================================
   LOADING
   ========================================================= */

.reports-loading-card[b-f90wustevd] {
    min-height: 240px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reports-loading[b-f90wustevd] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    color: #64748B;
}

    .reports-loading > span[b-f90wustevd] {
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: #0F172A;
        animation: pulseReport-b-f90wustevd 1s infinite ease-in-out;
    }

    .reports-loading h3[b-f90wustevd] {
        margin: 0;
        color: #0F172A;
        font-size: 22px;
        line-height: 1.2;
        font-weight: 800;
    }

    .reports-loading p[b-f90wustevd] {
        margin: 6px 0 0 0;
        color: #64748B;
        font-size: 16px;
        line-height: 1.5;
    }

@keyframes pulseReport-b-f90wustevd {
    50% {
        transform: scale(1.25);
        opacity: 0.45;
    }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1200px) {
    .reports-summary-grid[b-f90wustevd] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reports-grid[b-f90wustevd] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    .reports-page[b-f90wustevd] {
        padding: 24px 20px;
    }

    .reports-header[b-f90wustevd] {
        flex-direction: column;
        gap: 18px;
    }

    .reports-actions[b-f90wustevd] {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .reports-action-btn[b-f90wustevd] {
        width: 100%;
    }

    .reports-summary-grid[b-f90wustevd] {
        grid-template-columns: 1fr;
    }

    .reports-card[b-f90wustevd] {
        padding: 16px;
        border-radius: 16px;
    }

    .reports-chart-card[b-f90wustevd] {
        min-height: auto;
    }

    .reports-chart-box[b-f90wustevd] {
        min-height: 300px;
    }
}

@media (max-width: 480px) {
    .reports-page[b-f90wustevd] {
        padding: 18px 10px;
    }

    .reports-main-banner[b-f90wustevd] {
        margin-bottom: 4px;
    }

    .reports-header h1[b-f90wustevd] {
        font-size: 24px;
    }

    .reports-header p[b-f90wustevd] {
        font-size: 16px;
    }

    .reports-kpi strong[b-f90wustevd] {
        font-size: 32px;
    }

    .reports-card-header h3[b-f90wustevd],
    .reports-card h3[b-f90wustevd] {
        font-size: 22px;
    }

    .reports-loading[b-f90wustevd] {
        align-items: flex-start;
    }
}

/* =========================================================
   PRINT
   ========================================================= */

@media print {
    .no-print[b-f90wustevd],
    .rz-paginator[b-f90wustevd],
    .reports-main-banner[b-f90wustevd] {
        display: none !important;
    }

    .reports-page[b-f90wustevd] {
        padding: 0;
        background: #FFFFFF;
    }

    .reports-shell[b-f90wustevd] {
        max-width: 100%;
        gap: 14px;
    }

    .reports-header[b-f90wustevd] {
        margin-bottom: 10px;
    }

    .reports-summary-grid[b-f90wustevd],
    .reports-grid[b-f90wustevd] {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .reports-card[b-f90wustevd] {
        box-shadow: none;
        break-inside: avoid;
        border: 1px solid #CBD5E1;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Security/Login.razor.rz.scp.css */
/* =========================================================
   LOGIN - MOCKUP FINAL AISLADO
   Comisión Deporte Seguro

   IMPORTANTE:
   No usa .sport-input, .sport-label ni clases globales
   para evitar choques con app.css.
   ========================================================= */

.sport-login-page[b-rltg4h4h1h] {
    --login-main: #0F172A;
    --login-secondary: #243044;
    --login-details: #1F2937;
    --login-lighter: #2B3648;
    --login-light: #F8FAFC;
    --login-muted: #64748B;
    --login-border: #D8DEE8;
    --login-disabled-bg: #E5EAF1;
    --login-disabled-text: #94A3B8;
    --login-danger-bg: #FEF2F2;
    --login-danger-border: #FECACA;
    --login-danger-text: #B91C1C;
    display: grid;
    grid-template-columns: 44% 56%;
    min-height: 100vh;
    width: 100%;
    background: var(--login-light);
    overflow: hidden;
    font-size: 16px;
    color: var(--login-main);
}

/* Evita espacio superior global */
.page-container[b-rltg4h4h1h] {
    padding-top: 0 !important;
}

/* =========================
   Panel izquierdo
   ========================= */

.sport-login-left[b-rltg4h4h1h] {
    grid-column: 1;
    grid-row: 1;
    background: var(--login-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 36px 48px 48px;
    position: relative;
    z-index: 2;
}

.sport-login-box[b-rltg4h4h1h] {
    width: 100%;
    max-width: 390px;
    background: transparent;
}

/* =========================
   Logos
   ========================= */

.sport-login-logo-row[b-rltg4h4h1h] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-bottom: 24px;
}

.sport-login-logo-equidad[b-rltg4h4h1h] {
    width: 164px;
    height: auto;
    object-fit: contain;
    display: block;
}

.sport-login-logo-seguro[b-rltg4h4h1h] {
    width: 220px;
    height: auto;
    object-fit: contain;
    display: block;
}

/* =========================
   Títulos
   ========================= */

.sport-login-title[b-rltg4h4h1h] {
    margin: 0 0 30px 0;
    padding: 0;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: var(--login-main);
    font-size: 24px;
    font-weight: 900;
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-align: center;
}

.sport-login-subtitle[b-rltg4h4h1h] {
    margin: 0 0 16px 0;
    padding: 0;
    border: 0;
    outline: none;
    box-shadow: none;
    background: transparent;
    color: var(--login-details);
    font-size: 22px;
    font-weight: 800;
    line-height: 1.2;
}

/* =========================
   Formulario
   ========================= */

.sport-login-form[b-rltg4h4h1h] {
    width: 100%;
}

.sport-login-field[b-rltg4h4h1h] {
    width: 100%;
    margin: 0 0 16px 0;
    padding: 0;
}

.sport-login-field-label[b-rltg4h4h1h] {
    display: block;
    margin: 0 0 8px 0;
    padding: 0;
    color: var(--login-main);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700;
}

/* =========================
   Inputs
   ========================= */

.sport-login-input-wrap[b-rltg4h4h1h] {
    position: relative;
    width: 100%;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
}

.sport-login-input-icon[b-rltg4h4h1h] {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
    width: 42px;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9AA4B2;
    pointer-events: none;
}

    /* RadzenIcon dentro de CSS isolation */
    .sport-login-input-icon[b-rltg4h4h1h]  .rz-icon,
    .sport-login-input-icon[b-rltg4h4h1h]  .rzi {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px !important;
        line-height: 18px !important;
        color: #9AA4B2 !important;
    }

    /* Por si este CSS lo movés a app.css */
    .sport-login-input-icon .rz-icon[b-rltg4h4h1h],
    .sport-login-input-icon .rzi[b-rltg4h4h1h] {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px !important;
        line-height: 18px !important;
        color: #9AA4B2 !important;
    }

.sport-login-input[b-rltg4h4h1h] {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px 0 42px !important;
    border-radius: 8px !important;
    border: 1px solid var(--login-border) !important;
    background: #FFFFFF !important;
    color: var(--login-main) !important;
    font-size: 16px !important;
    line-height: 46px !important;
    font-weight: 400 !important;
    outline: none !important;
    box-shadow: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

    .sport-login-input[b-rltg4h4h1h]::placeholder {
        color: #9CA3AF !important;
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    .sport-login-input:focus[b-rltg4h4h1h] {
        border-color: var(--login-secondary) !important;
        box-shadow: 0 0 0 3px rgba(36, 48, 68, 0.10) !important;
    }

    .sport-login-input:disabled[b-rltg4h4h1h] {
        background: #F1F5F9 !important;
        color: #94A3B8 !important;
        cursor: not-allowed !important;
    }

.sport-login-password-input[b-rltg4h4h1h] {
    padding-left: 42px !important;
    padding-right: 58px !important;
}

/* =========================
   Botón ojito
   ========================= */

.sport-login-password-toggle[b-rltg4h4h1h] {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 3;
    width: 46px;
    min-width: 46px;
    max-width: 46px;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    padding: 0;
    margin: 0;
    border: 0;
    border-left: 1px solid var(--login-border);
    border-radius: 0 8px 8px 0;
    background: var(--login-disabled-bg);
    color: var(--login-muted);
    box-shadow: none;
    outline: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transform: none;
    font-size: 0;
    line-height: 1;
}

    .sport-login-password-toggle:hover:not(:disabled)[b-rltg4h4h1h] {
        background: #DDE4EE;
        color: var(--login-main);
        transform: none;
    }

    .sport-login-password-toggle:disabled[b-rltg4h4h1h] {
        background: var(--login-disabled-bg);
        color: #A3AAB6;
        opacity: 1;
        cursor: not-allowed;
    }

.sport-login-password-eye-icon[b-rltg4h4h1h] {
    width: 22px;
    height: 22px;
    display: block;
    flex: 0 0 auto;
    stroke: currentColor;
}

/* =========================
   Alertas
   ========================= */

.sport-login-alert[b-rltg4h4h1h] {
    margin: 12px 0 0 0;
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--login-danger-bg);
    border: 1px solid var(--login-danger-border);
    color: var(--login-danger-text);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

/* =========================
   Botón iniciar sesión
   ========================= */

.sport-login-submit-button[b-rltg4h4h1h] {
    width: 100%;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    margin: 16px 0 0 0;
    padding: 0 14px;
    border: 0;
    border-radius: 8px;
    background: var(--login-secondary);
    color: var(--login-light);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.18);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

    .sport-login-submit-button:hover:not(:disabled)[b-rltg4h4h1h] {
        background: var(--login-main);
    }

    .sport-login-submit-button:disabled[b-rltg4h4h1h] {
        background: var(--login-secondary);
        color: var(--login-light);
        opacity: 0.78;
        cursor: not-allowed;
        transform: none;
    }

/* =========================
   Loading
   ========================= */

.sport-login-loading[b-rltg4h4h1h] {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--login-secondary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.4;
}

.sport-login-loading-dot[b-rltg4h4h1h] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--login-main);
    animation: sportLoginPulseDot-b-rltg4h4h1h 1.1s infinite ease-in-out;
}

@keyframes sportLoginPulseDot-b-rltg4h4h1h {
    0%, 100% {
        transform: scale(0.85);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* =========================
   Registro
   ========================= */

.sport-login-register-row[b-rltg4h4h1h] {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: center;
}

.sport-login-register-text[b-rltg4h4h1h] {
    color: var(--login-muted);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    text-align: center;
}

.sport-login-register-button[b-rltg4h4h1h] {
    width: 100%;
    height: 46px;
    min-height: 46px;
    max-height: 46px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--login-border);
    background: #FFFFFF;
    color: var(--login-main);
    box-shadow: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}

    .sport-login-register-button:hover:not(:disabled)[b-rltg4h4h1h] {
        background: #F1F5F9;
        border-color: #CBD5E1;
        color: var(--login-main);
    }

    .sport-login-register-button:disabled[b-rltg4h4h1h] {
        background: #F8FAFC;
        color: #94A3B8;
        border-color: var(--login-border);
        cursor: not-allowed;
    }

/* =========================
   Imagen derecha
   ========================= */

.sport-login-image[b-rltg4h4h1h] {
    grid-column: 2;
    grid-row: 1;
    min-height: 100vh;
    background-image: linear-gradient( 90deg, rgba(248, 250, 252, 1) 0%, rgba(248, 250, 252, 0.98) 8%, rgba(248, 250, 252, 0.82) 18%, rgba(248, 250, 252, 0.40) 34%, rgba(248, 250, 252, 0.00) 52% ), url('/images/login-sport-bg.jpg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1100px) {
    .sport-login-page[b-rltg4h4h1h] {
        grid-template-columns: 46% 54%;
    }

    .sport-login-left[b-rltg4h4h1h] {
        padding: 40px 28px;
    }
}

@media (max-width: 900px) {
    .sport-login-page[b-rltg4h4h1h] {
        display: block;
        background: linear-gradient(rgba(248, 250, 252, 0.88), rgba(248, 250, 252, 0.94)), url('/images/login-sport-bg.jpg');
        background-size: cover;
        background-position: center;
        overflow-y: auto;
    }

    .sport-login-image[b-rltg4h4h1h] {
        display: none;
    }

    .sport-login-left[b-rltg4h4h1h] {
        min-height: 100vh;
        padding: 24px 18px;
        background: transparent;
    }

    .sport-login-box[b-rltg4h4h1h] {
        max-width: 520px;
        padding: 28px 24px;
        border-radius: 18px;
        background: rgba(248, 250, 252, 0.94);
        border: 1px solid rgba(216, 222, 232, 0.85);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
        backdrop-filter: blur(8px);
    }
}

@media (max-width: 480px) {
    .sport-login-left[b-rltg4h4h1h] {
        padding: 18px 12px;
    }

    .sport-login-box[b-rltg4h4h1h] {
        max-width: 100%;
        padding: 24px 18px 22px;
        border-radius: 16px;
    }

    .sport-login-logo-row[b-rltg4h4h1h] {
        gap: 14px;
        margin-bottom: 20px;
    }

    .sport-login-logo-equidad[b-rltg4h4h1h] {
        width: 142px;
    }

    .sport-login-logo-seguro[b-rltg4h4h1h] {
        width: 142px;
    }

    .sport-login-title[b-rltg4h4h1h] {
        font-size: 24px;
        margin-bottom: 24px;
    }

    .sport-login-subtitle[b-rltg4h4h1h] {
        font-size: 22px;
    }

    .sport-login-field-label[b-rltg4h4h1h],
    .sport-login-input[b-rltg4h4h1h],
    .sport-login-input[b-rltg4h4h1h]::placeholder,
    .sport-login-register-text[b-rltg4h4h1h],
    .sport-login-submit-button[b-rltg4h4h1h],
    .sport-login-register-button[b-rltg4h4h1h] {
        font-size: 16px !important;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Security/PasswordUpdate.razor.rz.scp.css */
.sport-login-page[b-dcjbq4nckz] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
    font-family: 'Inter', sans-serif;
}

.sport-login-bg[b-dcjbq4nckz] {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(17, 24, 39, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 24, 39, 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.24;
    pointer-events: none;
}

.sport-login-glow[b-dcjbq4nckz] {
    display: none;
}

.password-update-shell[b-dcjbq4nckz] {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    max-width: 1260px;
    margin: 0 auto;
    padding: 28px 20px;
    display: grid;
    grid-template-columns: minmax(520px, 640px) minmax(390px, 500px);
    justify-content: center;
    align-items: center;
    gap: 34px;
}

.sport-login-brand-panel[b-dcjbq4nckz] {
    position: relative;
    min-height: 620px;
    border-radius: 30px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82)), linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
    border: 1px solid rgba(17, 24, 39, 0.12);
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.10);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.password-update-brand-panel[b-dcjbq4nckz] {
    min-height: 680px;
}

.sport-login-brand-top[b-dcjbq4nckz] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.sport-login-logo[b-dcjbq4nckz] {
    width: 280px;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.sport-login-badge[b-dcjbq4nckz],
.sport-login-card-badge[b-dcjbq4nckz] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #111827;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
}

.sport-login-overline[b-dcjbq4nckz] {
    display: block;
    margin-bottom: 14px;
    color: #6b7280;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.sport-login-title[b-dcjbq4nckz] {
    margin: 0;
    color: #111827;
    font-size: clamp(2.4rem, 4vw, 4.1rem);
    line-height: 1.02;
    font-weight: 900;
    max-width: 520px;
}

    .sport-login-title span[b-dcjbq4nckz] {
        display: block;
        color: #000000;
    }

.sport-login-description[b-dcjbq4nckz] {
    margin: 18px 0 0 0;
    max-width: 500px;
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.7;
}

.sport-login-chip-row[b-dcjbq4nckz] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.sport-chip[b-dcjbq4nckz] {
    padding: 10px 14px;
    border-radius: 999px;
    color: #374151;
    background: #ffffff;
    border: 1px solid #d1d5db;
    font-size: 0.9rem;
    font-weight: 700;
}

.sport-login-feature-grid[b-dcjbq4nckz] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 26px;
}

.sport-feature-card[b-dcjbq4nckz] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 14px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.10);
    min-height: 108px;
}

.sport-feature-icon[b-dcjbq4nckz] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #111827;
    font-size: 1.08rem;
}

.sport-feature-title[b-dcjbq4nckz] {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.sport-feature-text[b-dcjbq4nckz] {
    color: #6b7280;
    font-size: 0.84rem;
    line-height: 1.45;
}

.sport-login-form-panel[b-dcjbq4nckz] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sport-login-card[b-dcjbq4nckz] {
    width: 100%;
    max-width: 500px;
    padding: 32px 28px;
    border-radius: 28px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(17, 24, 39, 0.12);
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.10);
    backdrop-filter: blur(10px);
}

.password-update-card[b-dcjbq4nckz] {
    max-width: 520px;
}

.password-update-userbox[b-dcjbq4nckz] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(17, 24, 39, 0.14);
}

.password-update-avatar[b-dcjbq4nckz] {
    width: 72px;
    height: 72px;
    min-width: 72px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid rgba(17, 24, 39, 0.22);
    box-shadow: 0 8px 22px rgba(17, 24, 39, 0.12);
    background: #fff;
}

.password-update-userinfo h2[b-dcjbq4nckz] {
    margin: 0;
    color: #111827;
    font-size: 1.6rem;
    line-height: 1.1;
    font-weight: 900;
}

.password-update-userinfo p[b-dcjbq4nckz] {
    margin: 8px 0 0 0;
    color: #6b7280;
    font-size: 0.95rem;
    line-height: 1.6;
}

.sport-login-card-badge[b-dcjbq4nckz] {
    margin-bottom: 12px;
}

.sport-login-form[b-dcjbq4nckz] {
    margin-top: 6px;
    width: 100%;
}

.sport-form-group[b-dcjbq4nckz] {
    margin-bottom: 18px;
}

.sport-label[b-dcjbq4nckz] {
    display: inline-block;
    margin-bottom: 8px;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 700;
}

.sport-input-wrap[b-dcjbq4nckz] {
    position: relative;
    display: flex;
    align-items: center;
}

.sport-input-icon[b-dcjbq4nckz] {
    position: absolute;
    left: 14px;
    z-index: 1;
    font-size: 1rem;
    opacity: 0.82;
    color: #374151;
}

.sport-input[b-dcjbq4nckz] {
    width: 100%;
    height: 54px;
    border-radius: 16px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    padding: 0 16px 0 44px;
    font-size: 0.95rem;
    color: #111827;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

    .sport-input:focus[b-dcjbq4nckz] {
        border-color: #111827;
        box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.12);
    }

    .sport-input[b-dcjbq4nckz]::placeholder {
        color: #9ca3af;
    }

.sport-input-password[b-dcjbq4nckz] {
    padding-right: 92px;
}

.sport-password-toggle[b-dcjbq4nckz] {
    position: absolute;
    right: 10px;
    border: none;
    background: transparent;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 0.2s ease;
}

    .sport-password-toggle:hover[b-dcjbq4nckz] {
        background: #f3f4f6;
    }

.sport-login-alert[b-dcjbq4nckz] {
    margin: 14px 0 16px 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(153, 27, 27, 0.08);
    border: 1px solid rgba(153, 27, 27, 0.18);
    color: #991b1b;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.5;
}

.password-rules-card[b-dcjbq4nckz] {
    margin: 18px 0 20px 0;
    padding: 18px;
    border-radius: 20px;
    background: #f9fafb;
    border: 1px solid #d1d5db;
}

.password-rules-title[b-dcjbq4nckz] {
    color: #111827;
    font-size: 0.94rem;
    font-weight: 800;
    margin-bottom: 14px;
}

.password-rules-grid[b-dcjbq4nckz] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 14px;
}

.password-rule-item[b-dcjbq4nckz] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #6b7280;
    font-size: 0.87rem;
    font-weight: 600;
    line-height: 1.35;
    transition: color 0.2s ease;
}

    .password-rule-item.is-valid[b-dcjbq4nckz] {
        color: #111827;
    }

.password-rule-dot[b-dcjbq4nckz] {
    width: 10px;
    height: 10px;
    min-width: 10px;
    border-radius: 50%;
    background: #d1d5db;
    transition: background 0.2s ease, transform 0.2s ease;
}

.password-rule-item.is-valid .password-rule-dot[b-dcjbq4nckz] {
    background: #111827;
    transform: scale(1.08);
}

.rz-button.sport-login-button[b-dcjbq4nckz] {
    margin-top: 6px;
    height: 54px;
    border-radius: 16px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #111827 0%, #374151 100%) !important;
    border-color: #111827 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.20) !important;
}

    .rz-button.sport-login-button:hover[b-dcjbq4nckz] {
        background: linear-gradient(135deg, #000000 0%, #1f2933 100%) !important;
        border-color: #000000 !important;
    }

.sport-login-loading[b-dcjbq4nckz] {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    font-size: 0.88rem;
    font-weight: 600;
}

.sport-login-loading-dot[b-dcjbq4nckz] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #111827;
    animation: pulseDot-b-dcjbq4nckz 1.1s infinite ease-in-out;
}

.validation-message[b-dcjbq4nckz] {
    display: block;
    margin-top: 8px;
    color: #991b1b;
    font-size: 0.82rem;
    font-weight: 600;
}

@keyframes pulseDot-b-dcjbq4nckz {
    0%, 100% {
        transform: scale(0.85);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

@media (max-width: 1100px) {
    .password-update-shell[b-dcjbq4nckz] {
        grid-template-columns: 1fr;
        gap: 22px;
        max-width: 760px;
        padding: 24px 18px;
    }

    .sport-login-form-panel[b-dcjbq4nckz] {
        order: 1;
    }

    .sport-login-brand-panel[b-dcjbq4nckz] {
        order: 2;
        min-height: auto;
        padding: 28px;
    }

    .sport-login-card[b-dcjbq4nckz] {
        max-width: 100%;
    }

    .sport-login-feature-grid[b-dcjbq4nckz] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .sport-login-page[b-dcjbq4nckz] {
        background: linear-gradient(180deg, #ffffff 0%, #e5e7eb 100%);
    }

    .password-update-shell[b-dcjbq4nckz] {
        min-height: auto;
        padding: 16px;
        gap: 16px;
    }

    .sport-login-form-panel[b-dcjbq4nckz] {
        order: 1;
    }

    .sport-login-brand-panel[b-dcjbq4nckz] {
        order: 2;
        border-radius: 24px;
        padding: 22px 20px;
        min-height: auto;
    }

    .sport-login-card[b-dcjbq4nckz] {
        border-radius: 24px;
        padding: 24px 20px;
    }

    .sport-login-logo[b-dcjbq4nckz] {
        width: 280px;
    }

    .sport-login-title[b-dcjbq4nckz] {
        font-size: 2.1rem;
        max-width: 100%;
    }

    .sport-login-description[b-dcjbq4nckz] {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .password-update-userbox[b-dcjbq4nckz] {
        align-items: flex-start;
    }

    .password-update-userinfo h2[b-dcjbq4nckz] {
        font-size: 1.35rem;
    }

    .sport-login-chip-row[b-dcjbq4nckz] {
        gap: 8px;
        margin-top: 18px;
    }

    .sport-chip[b-dcjbq4nckz] {
        font-size: 0.82rem;
        padding: 9px 12px;
    }

    .sport-login-feature-grid[b-dcjbq4nckz] {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 18px;
    }

    .sport-feature-card[b-dcjbq4nckz] {
        min-height: auto;
        padding: 14px;
    }

    .password-rules-grid[b-dcjbq4nckz] {
        grid-template-columns: 1fr;
    }

    .rz-button.sport-login-button[b-dcjbq4nckz] {
        height: 52px;
        border-radius: 15px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .password-update-shell[b-dcjbq4nckz] {
        padding: 12px;
    }

    .sport-login-card[b-dcjbq4nckz],
    .sport-login-brand-panel[b-dcjbq4nckz] {
        padding: 18px;
        border-radius: 20px;
    }

    .password-update-avatar[b-dcjbq4nckz] {
        width: 62px;
        height: 62px;
        min-width: 62px;
    }

    .sport-login-title[b-dcjbq4nckz] {
        font-size: 1.9rem;
    }

    .sport-login-overline[b-dcjbq4nckz] {
        font-size: 0.68rem;
        letter-spacing: 0.16em;
    }

    .password-update-userinfo h2[b-dcjbq4nckz] {
        font-size: 1.2rem;
    }

    .password-update-userinfo p[b-dcjbq4nckz] {
        font-size: 0.9rem;
    }

    .sport-login-badge[b-dcjbq4nckz],
    .sport-login-card-badge[b-dcjbq4nckz] {
        font-size: 0.74rem;
        padding: 8px 12px;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Security/Register.razor.rz.scp.css */
/* =========================================================
   REGISTER - MOCKUP FINAL + OTP MODAL FINAL
   Comisión Deporte Seguro

   Escala tipográfica:
   - Títulos grandes: 24px
   - Títulos 2: 22px
   - Subtítulos / labels: 20px
   - Botones: 16px
   - Texto normal: 16px
   ========================================================= */

.register-page[b-z1v9xikipp] {
    --register-main: #0F172A;
    --register-secondary: #243044;
    --register-details: #1F2937;
    --register-lighter: #2B3648;
    --register-light: #F8FAFC;
    --register-muted: #64748B;
    --register-border: #D8DEE8;
    --register-danger: #B91C1C;
    --register-success: #15803D;
    --register-disabled-bg: #E5EAF1;
    --register-disabled-text: #94A3B8;
    --register-title-lg: 24px;
    --register-title-2: 22px;
    --register-subtitle: 20px;
    --register-body: 16px;
    --register-button: 16px;
    position: relative;
    display: grid;
    grid-template-columns: 44% 56%;
    min-height: 100vh;
    width: 100%;
    background: var(--register-light);
    overflow: hidden;
    font-size: var(--register-body);
}

.page-container[b-z1v9xikipp] {
    padding-top: 0 !important;
}

/* =========================
   Imagen derecha
   ========================= */

.register-bg-image[b-z1v9xikipp] {
    grid-column: 2;
    grid-row: 1;
    min-height: 100vh;
    background-image: linear-gradient(90deg, rgba(248, 250, 252, 1) 0%, rgba(248, 250, 252, 0.98) 8%, rgba(248, 250, 252, 0.82) 18%, rgba(248, 250, 252, 0.40) 34%, rgba(248, 250, 252, 0.00) 52%), url('/images/login-sport-bg.jpg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: cover;
    z-index: 1;
}

.register-bg-fade[b-z1v9xikipp] {
    display: none;
}

.register-step-2 .register-bg-image[b-z1v9xikipp] {
    background-image: linear-gradient(90deg, rgba(248, 250, 252, 1) 0%, rgba(248, 250, 252, 0.98) 10%, rgba(248, 250, 252, 0.84) 24%, rgba(248, 250, 252, 0.38) 42%, rgba(248, 250, 252, 0.00) 62%), url('/images/login-sport-bg.jpg') !important;
    background-position: center right !important;
    background-size: cover !important;
}

/* =========================
   Panel izquierdo
   ========================= */

.register-shell[b-z1v9xikipp] {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 2;
    min-height: 100vh;
    background: var(--register-light);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 36px 48px 48px;
}

.register-form-card[b-z1v9xikipp] {
    width: 100%;
    max-width: 460px;
    background: transparent;
    border: none;
    box-shadow: none;
}

.register-step-2 .register-shell[b-z1v9xikipp] {
    padding-left: 86px !important;
    padding-right: 28px !important;
}

.register-step-2 .register-form-card[b-z1v9xikipp] {
    max-width: 620px !important;
}

.register-step-3 .register-form-card[b-z1v9xikipp] {
    max-width: 460px;
}

/* =========================
   Pasos
   ========================= */

.register-progress[b-z1v9xikipp] {
    display: flex !important;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
}

.register-step-2 .register-progress[b-z1v9xikipp] {
    margin-bottom: 18px !important;
}

.register-progress span[b-z1v9xikipp] {
    width: 30px;
    height: 2px;
    background: #CBD5E1;
    border-radius: 999px;
}

.register-step-dot[b-z1v9xikipp] {
    width: 30px;
    height: 30px;
    min-width: 30px;
    border-radius: 999px;
    border: 1px solid #CBD5E1;
    background: #FFFFFF;
    color: #64748B;
    font-size: var(--register-body);
    font-weight: 900;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

    .register-step-dot.active[b-z1v9xikipp],
    .register-step-dot.done[b-z1v9xikipp] {
        background: var(--register-main);
        border-color: var(--register-main);
        color: #FFFFFF;
    }

    .register-step-dot.pending[b-z1v9xikipp] {
        background: #FFFFFF;
        color: #64748B;
    }

/* =========================
   Header
   ========================= */

.register-form-header[b-z1v9xikipp] {
    margin-bottom: 18px;
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

    .register-form-header h1[b-z1v9xikipp],
    .register-form-header h2[b-z1v9xikipp],
    .register-form-header p[b-z1v9xikipp] {
        border: 0 !important;
        outline: 0 !important;
        box-shadow: none !important;
        background: transparent !important;
    }

    .register-form-header h1[b-z1v9xikipp] {
        margin: 0;
        color: var(--register-main);
        font-size: var(--register-title-lg);
        font-weight: 900;
        line-height: 1.15;
        letter-spacing: -0.03em;
    }

        .register-form-header h1 span[b-z1v9xikipp] {
            color: rgba(15, 23, 42, 0.18);
            font-size: var(--register-title-2);
            font-weight: 900;
            line-height: 1.15;
            letter-spacing: -0.02em;
            margin-left: 4px;
            vertical-align: middle;
        }

    .register-form-header h2[b-z1v9xikipp] {
        margin: 6px 0 0;
        color: var(--register-details);
        font-size: var(--register-title-2);
        font-weight: 800;
        line-height: 1.2;
    }

    .register-form-header p[b-z1v9xikipp] {
        margin: 5px 0 0;
        color: var(--register-details);
        font-size: var(--register-body);
        font-weight: 400;
        line-height: 1.45;
    }

/* =========================
   Formulario
   ========================= */

.register-form[b-z1v9xikipp] {
    width: 100%;
}

.register-step-content[b-z1v9xikipp] {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.register-step-content-wide[b-z1v9xikipp] {
    gap: 16px;
}

.register-step-content-last[b-z1v9xikipp] {
    max-width: 390px;
}

.register-grid[b-z1v9xikipp] {
    display: grid;
    gap: 14px 18px;
}

.register-grid-two[b-z1v9xikipp] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.register-step-two-top[b-z1v9xikipp] {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 18px;
    align-items: stretch;
}

    .register-step-two-top .register-grid-two[b-z1v9xikipp] {
        grid-template-columns: 1fr;
    }

.register-field[b-z1v9xikipp] {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.register-field-full[b-z1v9xikipp] {
    grid-column: 1 / -1;
}

.sport-label[b-z1v9xikipp],
.register-field > label[b-z1v9xikipp],
.register-other-sport-box label[b-z1v9xikipp] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 8px 0;
    color: var(--register-details);
    font-size: var(--register-subtitle) !important;
    font-weight: 600;
    line-height: 1.25;
}

    .sport-label span[b-z1v9xikipp] {
        color: #94A3B8;
        font-size: var(--register-body) !important;
        font-weight: 400;
        line-height: 1.35;
    }

/* =========================
   Inputs
   ========================= */

.sport-input[b-z1v9xikipp],
.register-otp-input[b-z1v9xikipp] {
    display: block;
    width: 100% !important;
    height: 46px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 8px;
    border: 1px solid var(--register-border);
    background: #FFFFFF;
    color: var(--register-main);
    font-size: var(--register-body) !important;
    font-weight: 500;
    line-height: 46px;
    outline: none;
    box-shadow: none;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

    .sport-input[b-z1v9xikipp]::placeholder,
    .register-otp-input[b-z1v9xikipp]::placeholder {
        color: #9CA3AF;
        font-size: var(--register-body) !important;
    }

    .sport-input:focus[b-z1v9xikipp],
    .register-otp-input:focus[b-z1v9xikipp] {
        border-color: var(--register-secondary);
        box-shadow: 0 0 0 3px rgba(36, 48, 68, 0.10);
    }

    .sport-input:disabled[b-z1v9xikipp] {
        background: #F1F5F9;
        color: #9CA3AF;
        cursor: not-allowed;
    }

.register-input-icon-wrap[b-z1v9xikipp],
.register-password-wrap[b-z1v9xikipp] {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}

    .register-input-icon-wrap > span[b-z1v9xikipp],
    .register-password-wrap > span[b-z1v9xikipp] {
        position: absolute;
        left: 13px;
        z-index: 2;
        color: #9AA4B2;
        font-size: var(--register-body) !important;
        pointer-events: none;
    }

    .register-input-icon-wrap .sport-input[b-z1v9xikipp],
    .register-password-wrap .sport-input[b-z1v9xikipp] {
        padding-left: 39px;
    }

    .register-password-wrap .sport-input[b-z1v9xikipp] {
        padding-right: 98px;
    }

.register-password-toggle-button[b-z1v9xikipp] {
    position: absolute;
    right: 10px;
    z-index: 2;
    border: 0;
    background: transparent;
    color: var(--register-details);
    font-size: var(--register-body) !important;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 5px;
}

    .register-password-toggle-button:hover[b-z1v9xikipp] {
        color: var(--register-main);
    }

    .register-password-toggle-button:disabled[b-z1v9xikipp] {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* =========================
   Email
   ========================= */

.register-email-row[b-z1v9xikipp] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 128px !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100%;
}

.register-email-input[b-z1v9xikipp],
.register-input-icon-wrap[b-z1v9xikipp] {
    min-width: 0;
}

.rz-button.register-email-button[b-z1v9xikipp],
.register-email-button[b-z1v9xikipp] {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: var(--register-secondary) !important;
    border-color: var(--register-secondary) !important;
    color: var(--register-light) !important;
    box-shadow: none !important;
    font-size: var(--register-button) !important;
    font-weight: 900 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    overflow: hidden !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .rz-button.register-email-button .rz-button-text[b-z1v9xikipp],
    .register-email-button .rz-button-text[b-z1v9xikipp] {
        font-size: var(--register-button) !important;
        font-weight: 900 !important;
        white-space: nowrap !important;
        line-height: 1 !important;
    }

    .rz-button.register-email-button:hover[b-z1v9xikipp],
    .register-email-button:hover[b-z1v9xikipp] {
        background: var(--register-main) !important;
        border-color: var(--register-main) !important;
    }

    .rz-button.register-email-button.rz-state-disabled[b-z1v9xikipp],
    .rz-button.register-email-button:disabled[b-z1v9xikipp],
    .register-email-button.rz-state-disabled[b-z1v9xikipp],
    .register-email-button:disabled[b-z1v9xikipp] {
        background: var(--register-disabled-bg) !important;
        color: var(--register-disabled-text) !important;
        opacity: 1 !important;
        cursor: not-allowed !important;
    }

.register-email-verified[b-z1v9xikipp],
.register-email-pending[b-z1v9xikipp] {
    margin-top: 7px;
    font-size: var(--register-body) !important;
    font-weight: 700;
    line-height: 1.4;
}

.register-email-verified[b-z1v9xikipp] {
    color: var(--register-success);
}

.register-email-pending[b-z1v9xikipp] {
    color: #92400E;
}

/* =========================
   Radzen controls
   ========================= */

.register-radzen-control[b-z1v9xikipp] {
    width: 100%;
}

    .register-radzen-control[b-z1v9xikipp]  .rz-dropdown,
    .register-radzen-control[b-z1v9xikipp]  .rz-multiselect,
    .register-radzen-control[b-z1v9xikipp]  .rz-inputtext,
    .register-radzen-control[b-z1v9xikipp]  .rz-picker {
        width: 100%;
        min-height: 46px !important;
        height: 46px !important;
        border-radius: 8px !important;
        border: 1px solid var(--register-border) !important;
        background: #FFFFFF !important;
        color: var(--register-main) !important;
        font-size: var(--register-body) !important;
        box-shadow: none !important;
    }

    .register-radzen-control[b-z1v9xikipp]  .rz-dropdown-label,
    .register-radzen-control[b-z1v9xikipp]  .rz-multiselect-label,
    .register-radzen-control[b-z1v9xikipp]  .rz-placeholder,
    .register-radzen-control[b-z1v9xikipp]  .rz-inputtext {
        font-size: var(--register-body) !important;
        line-height: 46px !important;
        color: #64748B !important;
        font-weight: 500 !important;
    }

    .register-radzen-control[b-z1v9xikipp]  .rz-dropdown:not(.rz-state-disabled):hover,
    .register-radzen-control[b-z1v9xikipp]  .rz-multiselect:not(.rz-state-disabled):hover,
    .register-radzen-control[b-z1v9xikipp]  .rz-picker:not(.rz-state-disabled):hover {
        border-color: var(--register-secondary) !important;
    }

    .register-radzen-control[b-z1v9xikipp]  .rz-dropdown-trigger,
    .register-radzen-control[b-z1v9xikipp]  .rz-multiselect-trigger,
    .register-radzen-control[b-z1v9xikipp]  .rz-datepicker-trigger {
        width: 38px !important;
        height: 46px !important;
        min-height: 46px !important;
    }

        .register-radzen-control[b-z1v9xikipp]  .rz-dropdown-trigger .rzi,
        .register-radzen-control[b-z1v9xikipp]  .rz-multiselect-trigger .rzi,
        .register-radzen-control[b-z1v9xikipp]  .rz-datepicker-trigger .rzi,
        .register-radzen-control[b-z1v9xikipp]  .rz-icon {
            font-size: var(--register-body) !important;
        }

    .register-radzen-control[b-z1v9xikipp]  .rz-chip,
    .sport-search-dropdown[b-z1v9xikipp]  .rz-chip {
        border-radius: 999px !important;
        background: rgba(36, 48, 68, 0.10) !important;
        color: var(--register-main) !important;
        font-weight: 800 !important;
        font-size: var(--register-body) !important;
    }

.sport-search-dropdown[b-z1v9xikipp]  .rz-dropdown,
.sport-search-dropdown[b-z1v9xikipp]  .rz-multiselect {
    min-height: 46px !important;
    height: auto !important;
}

/* =========================
   Foto
   ========================= */

.register-photo-upload-shell[b-z1v9xikipp] {
    width: 100%;
    min-height: 150px;
    border-radius: 10px;
    border: 1px solid var(--register-border);
    background: rgba(241, 245, 249, 0.82);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px;
    text-align: center;
}

.register-step-2 .register-photo-upload-shell[b-z1v9xikipp] {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    
}

.register-photo-preview-wrap[b-z1v9xikipp] {
    width: 100%;
    height: 50px;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
}

.register-photo-preview[b-z1v9xikipp] {
    width: 50px;
    height: 50px;
    border-radius: 999px;
    object-fit: cover;
}

.register-photo-placeholder[b-z1v9xikipp] {
    color: #A3AAB6;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.register-photo-placeholder-icon[b-z1v9xikipp] {
    font-size: 20px;
    line-height: 1;
}

.register-photo-placeholder-text[b-z1v9xikipp],
.register-photo-placeholder-text small[b-z1v9xikipp] {
    font-size: var(--register-body) !important;
    font-weight: 500;
    line-height: 1.25;
}

.register-photo-select-button[b-z1v9xikipp] {
    width: 128px;
    min-width: 128px;
    max-width: 128px;
    height: 46px;
    min-height: 46px;
    padding: 0 14px;
    border-radius: 8px;
    background: var(--register-secondary);
    color: #FFFFFF;
    font-size: var(--register-button) !important;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none;
    border: 0;
}

    .register-photo-select-button:hover[b-z1v9xikipp] {
        background: var(--register-main);
    }

.register-photo-select-button-loading[b-z1v9xikipp] {
    opacity: 0.7;
    pointer-events: none;
}

.register-photo-hidden-input[b-z1v9xikipp] {
    display: none;
}

.register-photo-file-name[b-z1v9xikipp] {
    color: #64748B;
    font-size: var(--register-body) !important;
    font-weight: 700;
    max-width: 150px;
    word-break: break-word;
}

.register-photo-error[b-z1v9xikipp] {
    color: var(--register-danger);
    font-size: var(--register-body) !important;
    font-weight: 700;
}

/* =========================
   Ayudas / separadores
   ========================= */

.register-separator[b-z1v9xikipp] {
    width: 100%;
    height: 1px;
    background: #BFC6D1;
    margin: 3px 0 4px;
}

.register-other-sport-box[b-z1v9xikipp] {
    margin-top: 10px;
    padding: 10px;
    border-radius: 8px;
    background: rgba(248, 250, 252, 0.86);
    border: 1px dashed #CBD5E1;
    color: var(--register-details);
    font-size: var(--register-body) !important;
    line-height: 1.4;
}

.sport-dropdown-help[b-z1v9xikipp] {
    margin-top: 7px;
    color: #64748B;
    font-size: var(--register-body) !important;
    line-height: 1.4;
}

/* =========================
   Botones
   ========================= */

.register-actions[b-z1v9xikipp] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 12px;
}

.register-btn[b-z1v9xikipp] {
    width: 100%;
    height: 46px;
    min-height: 46px;
    border-radius: 8px;
    border: none;
    font-size: var(--register-button) !important;
    font-weight: 900;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.18s ease, transform 0.18s ease;
}

    .register-btn span[b-z1v9xikipp] {
        font-size: var(--register-button) !important;
        font-weight: 900;
        line-height: 1;
    }

    .register-btn:hover[b-z1v9xikipp] {
        transform: translateY(-1px);
    }

.register-btn-muted[b-z1v9xikipp] {
    background: #C8C8C8;
    color: #FFFFFF;
}

.register-btn-primary[b-z1v9xikipp] {
    background: var(--register-secondary) !important;
    border-color: var(--register-secondary) !important;
    color: var(--register-light) !important;
    box-shadow: none !important;
}

    .register-btn-primary:hover[b-z1v9xikipp] {
        background: var(--register-main) !important;
        border-color: var(--register-main) !important;
    }

.rz-button.register-final-button[b-z1v9xikipp],
.register-final-button[b-z1v9xikipp] {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    border-radius: 8px !important;
    background: var(--register-secondary) !important;
    border: 0 !important;
    color: var(--register-light) !important;
    font-size: var(--register-button) !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}

    .rz-button.register-final-button .rz-button-text[b-z1v9xikipp],
    .register-final-button .rz-button-text[b-z1v9xikipp],
    .rz-button.register-final-button .rz-button-box[b-z1v9xikipp],
    .register-final-button .rz-button-box[b-z1v9xikipp] {
        font-size: var(--register-button) !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

    .rz-button.register-final-button:hover[b-z1v9xikipp],
    .register-final-button:hover[b-z1v9xikipp] {
        background: var(--register-main) !important;
    }

.register-button-loading[b-z1v9xikipp] {
    opacity: 0.7;
    pointer-events: none;
}

/* =========================
   Alertas / validaciones
   ========================= */

.sport-login-alert[b-z1v9xikipp],
.register-success-alert[b-z1v9xikipp] {
    margin: 0 0 14px;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: var(--register-body) !important;
    font-weight: 700;
    line-height: 1.4;
}

.sport-login-alert[b-z1v9xikipp] {
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: var(--register-danger);
}

.register-success-alert[b-z1v9xikipp] {
    background: #ECFDF5;
    border: 1px solid #BBF7D0;
    color: var(--register-success);
}

.register-field .validation-message[b-z1v9xikipp],
.register-field[b-z1v9xikipp]  .validation-message {
    color: var(--register-danger);
    font-size: var(--register-body) !important;
    font-weight: 700;
    margin-top: 5px;
    line-height: 1.4;
}

.sport-login-loading[b-z1v9xikipp] {
    margin-top: 12px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--register-secondary);
    font-size: var(--register-body) !important;
    font-weight: 700;
}

.sport-login-loading-dot[b-z1v9xikipp] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--register-main);
    animation: sportLoginPulseDot-b-z1v9xikipp 1.1s infinite ease-in-out;
}

@keyframes sportLoginPulseDot-b-z1v9xikipp {
    0%, 100% {
        transform: scale(0.85);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

/* =========================================================
   OTP MODAL - FINAL AJUSTADO
   ========================================================= */

.register-otp-backdrop[b-z1v9xikipp] {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(15, 23, 42, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.register-otp-modal[b-z1v9xikipp] {
    position: relative;
    width: min(100%, 620px);
    min-height: 500px;
    background: #FFFFFF;
    border-radius: 36px;
    padding: 0;
    box-shadow: 0 32px 90px rgba(0, 0, 0, 0.30);
    animation: registerOtpIn-b-z1v9xikipp 0.18s ease-out;
}

.register-otp-content[b-z1v9xikipp] {
    width: 100%;
    padding: 76px 48px 48px;
}

.register-otp-close[b-z1v9xikipp] {
    position: absolute;
    top: 28px;
    right: 32px;
    width: 38px;
    height: 38px;
    border: 0;
    background: transparent;
    color: #000000;
    font-size: 38px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}

    .register-otp-close:hover[b-z1v9xikipp] {
        opacity: 0.7;
    }

.otp-modal-status-icon[b-z1v9xikipp] {
    width: 92px;
    height: 92px;
    margin-bottom: 26px;
    border-radius: 28px;
    background: #35C84A;
    color: #FFFFFF;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 32px rgba(53, 200, 74, 0.24);
}

    .otp-modal-status-icon[b-z1v9xikipp]  .rz-icon,
    .otp-modal-status-icon .rz-icon[b-z1v9xikipp] {
        color: #FFFFFF !important;
        font-size: 52px !important;
        width: 52px !important;
        height: 52px !important;
        line-height: 52px !important;
    }

.register-otp-modal h3[b-z1v9xikipp] {
    margin: 0 0 10px;
    color: #000000;
    font-size: 32px;
    line-height: 1.12;
    font-weight: 900;
    letter-spacing: -0.03em;
}

.register-otp-modal p[b-z1v9xikipp] {
    max-width: 500px;
    margin: 0 0 24px;
    color: var(--register-details);
    font-size: var(--register-body) !important;
    line-height: 1.5;
    font-weight: 400;
}

.register-otp-input[b-z1v9xikipp] {
    height: 50px;
    min-height: 50px;
    line-height: 50px;
    margin-bottom: 12px;
}

.register-otp-error[b-z1v9xikipp] {
    margin-bottom: 12px;
    padding: 11px 13px;
    border-radius: 10px;
    background: #FEF2F2;
    border: 1px solid #FECACA;
    color: var(--register-danger);
    font-size: var(--register-body) !important;
    font-weight: 700;
    line-height: 1.35;
}

.register-otp-button[b-z1v9xikipp] {
    width: 100%;
    height: 50px;
    min-height: 50px;
    border: 0;
    border-radius: 10px;
    background: var(--register-secondary);
    color: var(--register-light);
    box-shadow: none;
    font-size: var(--register-button) !important;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, transform 0.18s ease;
}

    .register-otp-button:hover:not(:disabled)[b-z1v9xikipp] {
        background: var(--register-main);
        transform: translateY(-1px);
    }

    .register-otp-button:disabled[b-z1v9xikipp] {
        background: #D1D5DB;
        color: #FFFFFF;
        opacity: 1;
        cursor: not-allowed;
        transform: none;
    }

@keyframes registerOtpIn-b-z1v9xikipp {
    from {
        opacity: 0;
        transform: translateY(12px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* =========================
   Responsive
   ========================= */

@media (max-width: 1100px) {
    .register-page[b-z1v9xikipp] {
        grid-template-columns: 46% 54%;
    }

    .register-shell[b-z1v9xikipp] {
        padding: 40px 28px;
    }

    .register-step-2 .register-form-card[b-z1v9xikipp] {
        max-width: 560px !important;
    }
}

@media (max-width: 900px) {
    .register-page[b-z1v9xikipp] {
        display: block;
        background: linear-gradient(rgba(248, 250, 252, 0.88), rgba(248, 250, 252, 0.94)), url('/images/login-sport-bg.jpg');
        background-size: cover;
        background-position: center;
        overflow-y: auto;
    }

    .register-bg-image[b-z1v9xikipp] {
        display: none;
    }

    .register-shell[b-z1v9xikipp],
    .register-step-2 .register-shell[b-z1v9xikipp] {
        min-height: 100vh;
        padding: 24px 18px !important;
        background: transparent;
    }

    .register-form-card[b-z1v9xikipp],
    .register-step-2 .register-form-card[b-z1v9xikipp],
    .register-step-3 .register-form-card[b-z1v9xikipp] {
        max-width: 520px !important;
        padding: 28px 24px;
        border-radius: 18px;
        background: rgba(248, 250, 252, 0.94);
        border: 1px solid rgba(216, 222, 232, 0.85);
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.10);
        backdrop-filter: blur(8px);
    }

    .register-step-content-last[b-z1v9xikipp] {
        max-width: none;
    }

    .register-step-two-top[b-z1v9xikipp],
    .register-step-2 .register-step-two-top[b-z1v9xikipp] {
        grid-template-columns: 1fr;
    }

    .register-photo-upload-shell[b-z1v9xikipp],
    .register-step-2 .register-photo-upload-shell[b-z1v9xikipp] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        min-height: 160px !important;
        height: auto !important;
        max-height: none !important;
    }

    .register-photo-preview-wrap[b-z1v9xikipp] {
        height: 58px;
    }
}

@media (max-width: 640px) {
    .register-shell[b-z1v9xikipp],
    .register-step-2 .register-shell[b-z1v9xikipp] {
        padding: 18px 12px !important;
    }

    .register-form-card[b-z1v9xikipp],
    .register-step-2 .register-form-card[b-z1v9xikipp],
    .register-step-3 .register-form-card[b-z1v9xikipp] {
        max-width: 100% !important;
        padding: 24px 18px 22px;
        border-radius: 16px;
    }

    .register-grid-two[b-z1v9xikipp],
    .register-step-2 .register-grid-two[b-z1v9xikipp] {
        grid-template-columns: 1fr !important;
    }

    .register-email-row[b-z1v9xikipp] {
        grid-template-columns: 1fr !important;
    }

    .rz-button.register-email-button[b-z1v9xikipp],
    .register-email-button[b-z1v9xikipp],
    .register-photo-select-button[b-z1v9xikipp] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .register-actions[b-z1v9xikipp],
    .register-step-2 .register-actions[b-z1v9xikipp] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .register-progress[b-z1v9xikipp] {
        justify-content: flex-start;
        margin-bottom: 18px;
    }

    .register-otp-backdrop[b-z1v9xikipp] {
        padding: 14px;
    }

    .register-otp-modal[b-z1v9xikipp] {
        width: 100%;
        min-height: auto;
        border-radius: 28px;
    }

    .register-otp-content[b-z1v9xikipp] {
        padding: 74px 24px 28px;
    }

    .register-otp-close[b-z1v9xikipp] {
        top: 22px;
        right: 22px;
        font-size: 38px;
    }

    .otp-modal-status-icon[b-z1v9xikipp] {
        width: 82px;
        height: 82px;
        border-radius: 24px;
        margin-bottom: 22px;
    }

        .otp-modal-status-icon[b-z1v9xikipp]  .rz-icon,
        .otp-modal-status-icon .rz-icon[b-z1v9xikipp] {
            font-size: 46px !important;
            width: 46px !important;
            height: 46px !important;
            line-height: 46px !important;
        }

    .register-otp-modal h3[b-z1v9xikipp] {
        font-size: 28px;
    }

    .register-otp-modal p[b-z1v9xikipp] {
        font-size: var(--register-body) !important;
    }
}


/* =========================================================
   REGISTER - FIX FINAL TIPOGRAFÍA + STEP 1/2/3
   Títulos grandes: 24px
   Títulos 2: 22px
   Subtítulos / labels: 20px
   Botones: 16px
   Texto normal: 16px
   PEGAR AL FINAL DE Register.razor.css
   ========================================================= */

.register-page[b-z1v9xikipp] {
    --register-main: #0F172A;
    --register-secondary: #243044;
    --register-details: #1F2937;
    --register-light: #F8FAFC;
    --register-muted: #64748B;
    --register-border: #D8DEE8;
    --register-disabled: #E5EAF1;
    --register-disabled-text: #94A3B8;
    --register-danger: #B91C1C;
    --register-success: #15803D;
    font-size: 16px !important;
}

/* =========================
   HEADER GENERAL
   ========================= */

.register-form-header[b-z1v9xikipp] {
    margin-bottom: 18px !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
}

    .register-form-header h1[b-z1v9xikipp] {
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        color: var(--register-main) !important;
        font-size: 24px !important;
        line-height: 1.15 !important;
        font-weight: 900 !important;
        letter-spacing: -0.02em !important;
        border: 0 !important;
        outline: none !important;
        box-shadow: none !important;
    }

        .register-form-header h1 span[b-z1v9xikipp] {
            color: rgba(15, 23, 42, 0.18) !important;
            font-size: 22px !important;
            line-height: 1.15 !important;
            font-weight: 900 !important;
            letter-spacing: -0.02em !important;
        }

    .register-form-header h2[b-z1v9xikipp] {
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
        color: var(--register-main) !important;
        font-size: 22px !important;
        line-height: 1.2 !important;
        font-weight: 800 !important;
    }

    .register-form-header p[b-z1v9xikipp] {
        margin: 0 !important;
        padding: 0 !important;
        color: var(--register-details) !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        font-weight: 400 !important;
    }

/* =========================
   LABELS / SUBTÍTULOS
   ========================= */

.sport-label[b-z1v9xikipp],
.register-field > label[b-z1v9xikipp],
.register-other-sport-box label[b-z1v9xikipp] {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin: 0 0 8px 0 !important;
    color: var(--register-main) !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 800 !important;
}

    .sport-label span[b-z1v9xikipp] {
        display: block !important;
        color: var(--register-muted) !important;
        font-size: 16px !important;
        line-height: 1.35 !important;
        font-weight: 400 !important;
    }

/* =========================
   TEXTO NORMAL
   ========================= */

.register-page p[b-z1v9xikipp],
.register-page span[b-z1v9xikipp],
.register-page input[b-z1v9xikipp],
.register-page textarea[b-z1v9xikipp],
.register-page select[b-z1v9xikipp],
.register-page .register-email-verified[b-z1v9xikipp],
.register-page .register-email-pending[b-z1v9xikipp],
.register-page .sport-dropdown-help[b-z1v9xikipp],
.register-page .register-photo-file-name[b-z1v9xikipp],
.register-page .register-photo-error[b-z1v9xikipp],
.register-page .register-otp-error[b-z1v9xikipp],
.register-page .validation-message[b-z1v9xikipp],
.register-page .sport-login-alert[b-z1v9xikipp],
.register-page .register-success-alert[b-z1v9xikipp],
.register-page .sport-login-loading[b-z1v9xikipp] {
    font-size: 16px !important;
    line-height: 1.4 !important;
}

/* =========================
   INPUTS
   ========================= */

.sport-input[b-z1v9xikipp],
input.sport-input[b-z1v9xikipp],
.register-field .sport-input[b-z1v9xikipp],
.register-otp-input[b-z1v9xikipp] {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    border: 1px solid var(--register-border) !important;
    background: #FFFFFF !important;
    color: var(--register-main) !important;
    font-size: 16px !important;
    line-height: 46px !important;
    font-weight: 400 !important;
    box-shadow: none !important;
    outline: none !important;
}

    .sport-input[b-z1v9xikipp]::placeholder,
    input.sport-input[b-z1v9xikipp]::placeholder,
    .register-otp-input[b-z1v9xikipp]::placeholder {
        color: #9CA3AF !important;
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    .sport-input:focus[b-z1v9xikipp],
    .register-otp-input:focus[b-z1v9xikipp] {
        border-color: var(--register-secondary) !important;
        box-shadow: 0 0 0 3px rgba(36, 48, 68, 0.10) !important;
    }

    .sport-input:disabled[b-z1v9xikipp] {
        background: #F1F5F9 !important;
        color: #9CA3AF !important;
        cursor: not-allowed !important;
    }

/* =========================
   INPUTS CON ICONO
   ========================= */

.register-input-icon-wrap[b-z1v9xikipp],
.register-password-wrap[b-z1v9xikipp] {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}

    .register-input-icon-wrap > span[b-z1v9xikipp],
    .register-password-wrap > span[b-z1v9xikipp] {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 42px !important;
        height: 46px !important;
        z-index: 2 !important;
        color: #9AA4B2 !important;
        font-size: 16px !important;
        line-height: 46px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        pointer-events: none !important;
    }

    .register-input-icon-wrap .sport-input[b-z1v9xikipp],
    .register-password-wrap .sport-input[b-z1v9xikipp] {
        padding-left: 42px !important;
    }

    .register-password-wrap .sport-input[b-z1v9xikipp] {
        padding-right: 112px !important;
    }

/* Botón Mostrar */
.register-password-toggle-button[b-z1v9xikipp] {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 102px !important;
    height: 46px !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    border: 0 !important;
    border-left: 1px solid var(--register-border) !important;
    border-radius: 0 8px 8px 0 !important;
    background: var(--register-disabled) !important;
    color: var(--register-muted) !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    box-shadow: none !important;
}

    .register-password-toggle-button:hover:not(:disabled)[b-z1v9xikipp] {
        color: var(--register-main) !important;
        background: #DDE4EE !important;
    }

    .register-password-toggle-button:disabled[b-z1v9xikipp] {
        opacity: 1 !important;
        cursor: not-allowed !important;
    }

/* =========================
   EMAIL STEP 1
   ========================= */

.register-email-row[b-z1v9xikipp] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 128px !important;
    gap: 10px !important;
    align-items: start !important;
    width: 100% !important;
}

.register-email-input[b-z1v9xikipp],
.register-input-icon-wrap[b-z1v9xikipp] {
    min-width: 0 !important;
    width: 100% !important;
}

.rz-button.register-email-button[b-z1v9xikipp],
.register-email-button[b-z1v9xikipp] {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: var(--register-secondary) !important;
    border-color: var(--register-secondary) !important;
    color: var(--register-light) !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

    .rz-button.register-email-button .rz-button-text[b-z1v9xikipp],
    .register-email-button .rz-button-text[b-z1v9xikipp] {
        width: auto !important;
        height: auto !important;
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
        white-space: nowrap !important;
    }

    .rz-button.register-email-button:hover:not(:disabled)[b-z1v9xikipp],
    .register-email-button:hover:not(:disabled)[b-z1v9xikipp] {
        background: var(--register-main) !important;
        border-color: var(--register-main) !important;
    }

    .rz-button.register-email-button.rz-state-disabled[b-z1v9xikipp],
    .rz-button.register-email-button:disabled[b-z1v9xikipp],
    .register-email-button.rz-state-disabled[b-z1v9xikipp],
    .register-email-button:disabled[b-z1v9xikipp] {
        background: var(--register-disabled) !important;
        color: var(--register-disabled-text) !important;
        opacity: 1 !important;
        cursor: not-allowed !important;
    }

/* =========================
   RADZEN CONTROLS
   ========================= */

.register-radzen-control[b-z1v9xikipp] {
    width: 100% !important;
}

    .register-radzen-control[b-z1v9xikipp]  .rz-dropdown,
    .register-radzen-control[b-z1v9xikipp]  .rz-multiselect,
    .register-radzen-control[b-z1v9xikipp]  .rz-inputtext,
    .register-radzen-control[b-z1v9xikipp]  .rz-picker {
        width: 100% !important;
        height: 46px !important;
        min-height: 46px !important;
        border-radius: 8px !important;
        border: 1px solid var(--register-border) !important;
        background: #FFFFFF !important;
        color: var(--register-main) !important;
        font-size: 16px !important;
        box-shadow: none !important;
    }

    .register-radzen-control[b-z1v9xikipp]  .rz-dropdown-label,
    .register-radzen-control[b-z1v9xikipp]  .rz-multiselect-label,
    .register-radzen-control[b-z1v9xikipp]  .rz-placeholder,
    .register-radzen-control[b-z1v9xikipp]  .rz-inputtext {
        height: 46px !important;
        min-height: 46px !important;
        line-height: 46px !important;
        padding: 0 14px !important;
        color: #9CA3AF !important;
        font-size: 16px !important;
        font-weight: 400 !important;
    }

    .register-radzen-control[b-z1v9xikipp]  .rz-dropdown-trigger,
    .register-radzen-control[b-z1v9xikipp]  .rz-multiselect-trigger,
    .register-radzen-control[b-z1v9xikipp]  .rz-datepicker-trigger {
        width: 38px !important;
        height: 46px !important;
        min-height: 46px !important;
        color: var(--register-main) !important;
    }

        .register-radzen-control[b-z1v9xikipp]  .rz-dropdown-trigger .rz-icon,
        .register-radzen-control[b-z1v9xikipp]  .rz-dropdown-trigger .rzi,
        .register-radzen-control[b-z1v9xikipp]  .rz-multiselect-trigger .rz-icon,
        .register-radzen-control[b-z1v9xikipp]  .rz-multiselect-trigger .rzi,
        .register-radzen-control[b-z1v9xikipp]  .rz-datepicker-trigger .rz-icon,
        .register-radzen-control[b-z1v9xikipp]  .rz-datepicker-trigger .rzi {
            color: var(--register-main) !important;
            font-size: 16px !important;
        }

    .register-radzen-control[b-z1v9xikipp]  .rz-chip {
        min-height: 30px !important;
        padding: 0 10px !important;
        border-radius: 999px !important;
        background: #EEF2F7 !important;
        color: var(--register-main) !important;
        border: 1px solid var(--register-border) !important;
        font-size: 16px !important;
        font-weight: 700 !important;
    }

/* =========================
   FOTO STEP 2
   ========================= */

.register-step-2 .register-step-two-top[b-z1v9xikipp] {
    display: grid !important;
    grid-template-columns: 180px minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}

    .register-step-2 .register-step-two-top .register-grid-two[b-z1v9xikipp] {
        grid-template-columns: 1fr !important;
        gap: 14px !important;
    }

.register-step-2 .register-grid-two[b-z1v9xikipp] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 14px 18px !important;
}

.register-step-2 .register-photo-upload-shell[b-z1v9xikipp] {
    width: 180px !important;
    min-width: 180px !important;
    max-width: 180px !important;
    height: 158px !important;
    min-height: 158px !important;
    max-height: 158px !important;
    padding: 14px !important;
    border-radius: 10px !important;
    border: 1px solid var(--register-border) !important;
    background: #F3F4F6 !important;
    box-shadow: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    text-align: center !important;
    overflow: hidden !important;
}

.register-step-2 .register-photo-preview-wrap[b-z1v9xikipp] {
    width: 100% !important;
    height: 50px !important;
    min-height: 50px !important;
    border: 0 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.register-step-2 .register-photo-preview[b-z1v9xikipp] {
    width: 50px !important;
    height: 50px !important;
    border-radius: 999px !important;
    object-fit: cover !important;
}

.register-step-2 .register-photo-placeholder[b-z1v9xikipp] {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    color: #C4C4C4 !important;
}

.register-step-2 .register-photo-placeholder-icon[b-z1v9xikipp],
.register-step-2 .register-photo-placeholder-icon .rz-icon[b-z1v9xikipp],
.register-step-2 .register-photo-placeholder-icon .rzi[b-z1v9xikipp] {
    color: #C9C9C9 !important;
    font-size: 22px !important;
    line-height: 1 !important;
}

.register-step-2 .register-photo-placeholder-text[b-z1v9xikipp],
.register-step-2 .register-photo-placeholder-text small[b-z1v9xikipp] {
    color: #C4C4C4 !important;
    font-size: 16px !important;
    line-height: 1.2 !important;
    font-weight: 700 !important;
    text-align: center !important;
}

.register-photo-select-button[b-z1v9xikipp],
.register-step-2 .register-photo-select-button[b-z1v9xikipp] {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    border: 0 !important;
    background: var(--register-secondary) !important;
    color: var(--register-light) !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

    .register-photo-select-button:hover[b-z1v9xikipp],
    .register-step-2 .register-photo-select-button:hover[b-z1v9xikipp] {
        background: var(--register-main) !important;
    }

.register-photo-file-name[b-z1v9xikipp],
.register-photo-error[b-z1v9xikipp] {
    font-size: 16px !important;
    line-height: 1.35 !important;
}

/* =========================
   BOTONES
   ========================= */

.register-actions[b-z1v9xikipp] {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px !important;
    margin-top: 12px !important;
    width: 100% !important;
}

.register-btn[b-z1v9xikipp],
.rz-button.register-final-button[b-z1v9xikipp],
.register-final-button[b-z1v9xikipp],
.register-otp-button[b-z1v9xikipp] {
    width: 100% !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 14px !important;
    border-radius: 8px !important;
    border: 0 !important;
    box-shadow: none !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    cursor: pointer !important;
    transform: none !important;
}

    .register-btn span[b-z1v9xikipp],
    .rz-button.register-final-button .rz-button-text[b-z1v9xikipp],
    .rz-button.register-final-button .rz-button-box[b-z1v9xikipp] {
        font-size: 16px !important;
        font-weight: 900 !important;
        line-height: 1 !important;
    }

.register-btn-muted[b-z1v9xikipp] {
    background: #C8C8C8 !important;
    color: #FFFFFF !important;
}

.register-btn-primary[b-z1v9xikipp],
.rz-button.register-final-button[b-z1v9xikipp],
.register-final-button[b-z1v9xikipp],
.register-otp-button[b-z1v9xikipp] {
    background: var(--register-secondary) !important;
    color: var(--register-light) !important;
}

    .register-btn-primary:hover[b-z1v9xikipp],
    .rz-button.register-final-button:hover[b-z1v9xikipp],
    .register-final-button:hover[b-z1v9xikipp],
    .register-otp-button:hover:not(:disabled)[b-z1v9xikipp] {
        background: var(--register-main) !important;
    }

/* =========================
   ALERTAS / VALIDACIONES
   ========================= */

.sport-login-alert[b-z1v9xikipp],
.register-success-alert[b-z1v9xikipp],
.register-field .validation-message[b-z1v9xikipp],
.register-field[b-z1v9xikipp]  .validation-message,
.register-email-verified[b-z1v9xikipp],
.register-email-pending[b-z1v9xikipp],
.sport-login-loading[b-z1v9xikipp],
.sport-dropdown-help[b-z1v9xikipp] {
    font-size: 16px !important;
    line-height: 1.4 !important;
}

/* =========================
   OTP MODAL
   ========================= */

.register-otp-modal h3[b-z1v9xikipp] {
    font-size: 24px !important;
    line-height: 1.15 !important;
    font-weight: 900 !important;
}

.register-otp-modal p[b-z1v9xikipp] {
    font-size: 16px !important;
    line-height: 1.5 !important;
}

.register-otp-error[b-z1v9xikipp] {
    font-size: 16px !important;
    line-height: 1.35 !important;
}

/* =========================
   RESPONSIVE
   ========================= */

@media (max-width: 900px) {
    .register-shell[b-z1v9xikipp] {
        padding: 24px 18px !important;
    }

    .register-form-card[b-z1v9xikipp],
    .register-step-2 .register-form-card[b-z1v9xikipp],
    .register-step-3 .register-form-card[b-z1v9xikipp] {
        max-width: 620px !important;
    }

    .register-step-2 .register-step-two-top[b-z1v9xikipp] {
        grid-template-columns: 1fr !important;
    }

    .register-step-2 .register-photo-upload-shell[b-z1v9xikipp] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
        height: 160px !important;
        min-height: 160px !important;
    }
}

@media (max-width: 640px) {
    .register-grid-two[b-z1v9xikipp],
    .register-step-2 .register-grid-two[b-z1v9xikipp] {
        grid-template-columns: 1fr !important;
    }

    .register-email-row[b-z1v9xikipp] {
        grid-template-columns: 1fr !important;
    }

    .rz-button.register-email-button[b-z1v9xikipp],
    .register-email-button[b-z1v9xikipp],
    .register-photo-select-button[b-z1v9xikipp],
    .register-step-2 .register-photo-select-button[b-z1v9xikipp] {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }

    .register-actions[b-z1v9xikipp] {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .register-form-header h1[b-z1v9xikipp] {
        font-size: 24px !important;
    }

        .register-form-header h1 span[b-z1v9xikipp],
        .register-form-header h2[b-z1v9xikipp] {
            font-size: 22px !important;
        }

    .sport-label[b-z1v9xikipp],
    .register-field > label[b-z1v9xikipp] {
        font-size: 20px !important;
    }
}

/* =========================================================
   REGISTER - Botón contraseña con ojito
   PEGAR AL FINAL DE Register.razor.css
   ========================================================= */

.register-password-wrap .sport-input[b-z1v9xikipp] {
    padding-right: 58px !important;
}

.register-password-toggle-button[b-z1v9xikipp] {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
    max-height: 46px !important;
    padding: 0 !important;
    border: 0 !important;
    border-left: 1px solid var(--register-border) !important;
    border-radius: 0 8px 8px 0 !important;
    background: #E5EAF1 !important;
    color: #64748B !important;
    box-shadow: none !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transform: none !important;
}

    .register-password-toggle-button:hover:not(:disabled)[b-z1v9xikipp] {
        background: #DDE4EE !important;
        color: #0F172A !important;
        transform: none !important;
    }

    .register-password-toggle-button:disabled[b-z1v9xikipp] {
        background: #E5EAF1 !important;
        color: #A3AAB6 !important;
        opacity: 1 !important;
        cursor: not-allowed !important;
    }

.register-password-eye-icon[b-z1v9xikipp] {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    flex: 0 0 auto !important;
    stroke: currentColor !important;
}

/* =========================================================
   REGISTER - PASO 3 CORREGIDO
   ========================================================= */

.register-step-3 .register-shell[b-z1v9xikipp] {
    align-items: flex-start;
}

.register-step-3 .register-form-card[b-z1v9xikipp] {
    width: 100%;
    max-width: 520px;
    min-height: auto;
    padding-top: 120px;
}

.register-step-content-last[b-z1v9xikipp] {
    width: 100%;
    max-width: 520px;
}

    .register-step-content-last .register-field[b-z1v9xikipp] {
        width: 100%;
    }

    .register-step-content-last .register-field-full[b-z1v9xikipp] {
        width: 100%;
    }

/* Caja de "otros deporte" */
.register-other-sport-box[b-z1v9xikipp] {
    width: 100%;
    margin-top: 10px;
    padding: 14px;
    border-radius: 10px;
    border: 1px dashed #CBD5E1;
    background: rgba(255, 255, 255, 0.72);
    box-sizing: border-box;
}

    .register-other-sport-box .sport-label[b-z1v9xikipp] {
        margin-bottom: 10px;
    }

/* =========================================================
   RADZEN MULTISELECT - PASO 3
   Corrige chips cortados
   ========================================================= */

.register-step-3 .register-radzen-control.rz-dropdown[b-z1v9xikipp],
.register-step-3 .sport-search-dropdown.rz-dropdown[b-z1v9xikipp] {
    width: 100% !important;
    min-height: 48px !important;
    height: auto !important;
    border-radius: 10px !important;
    border: 1px solid #CBD5E1 !important;
    background: #FFFFFF !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* Contenedor interno del dropdown múltiple */
.register-step-3 .register-radzen-control .rz-dropdown-label[b-z1v9xikipp],
.register-step-3 .sport-search-dropdown .rz-dropdown-label[b-z1v9xikipp] {
    min-height: 48px !important;
    height: auto !important;
    line-height: normal !important;
    padding: 7px 42px 7px 10px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    overflow: visible !important;
    white-space: normal !important;
}

/* Chips seleccionados */
.register-step-3 .register-radzen-control .rz-chip[b-z1v9xikipp],
.register-step-3 .sport-search-dropdown .rz-chip[b-z1v9xikipp],
.register-step-3 .register-radzen-control .rz-token[b-z1v9xikipp],
.register-step-3 .sport-search-dropdown .rz-token[b-z1v9xikipp] {
    max-width: 100% !important;
    min-height: 28px !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    border-radius: 999px !important;
    background: #EEF2F7 !important;
    color: #0F172A !important;
    border: 1px solid #CBD5E1 !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
}

/* Texto dentro del chip */
.register-step-3 .register-radzen-control .rz-chip-text[b-z1v9xikipp],
.register-step-3 .sport-search-dropdown .rz-chip-text[b-z1v9xikipp] {
    max-width: 150px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* X del chip */
.register-step-3 .register-radzen-control .rz-chip .rz-icon[b-z1v9xikipp],
.register-step-3 .sport-search-dropdown .rz-chip .rz-icon[b-z1v9xikipp],
.register-step-3 .register-radzen-control .rz-token .rz-icon[b-z1v9xikipp],
.register-step-3 .sport-search-dropdown .rz-token .rz-icon[b-z1v9xikipp] {
    color: #0F172A !important;
    font-size: 16px !important;
}

/* Flecha y botón limpiar */
.register-step-3 .register-radzen-control .rz-dropdown-trigger[b-z1v9xikipp],
.register-step-3 .sport-search-dropdown .rz-dropdown-trigger[b-z1v9xikipp] {
    width: 38px !important;
    min-height: 48px !important;
    height: 100% !important;
    border-left: none !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.register-step-3 .register-radzen-control .rz-dropdown-trigger-icon[b-z1v9xikipp],
.register-step-3 .sport-search-dropdown .rz-dropdown-trigger-icon[b-z1v9xikipp] {
    color: #0F172A !important;
    font-size: 20px !important;
}

.register-step-3 .register-radzen-control .rz-dropdown-clear-icon[b-z1v9xikipp],
.register-step-3 .sport-search-dropdown .rz-dropdown-clear-icon[b-z1v9xikipp] {
    color: #0F172A !important;
}

/* Placeholder */
.register-step-3 .register-radzen-control .rz-placeholder[b-z1v9xikipp],
.register-step-3 .sport-search-dropdown .rz-placeholder[b-z1v9xikipp] {
    color: #64748B !important;
    font-size: 16px !important;
    font-weight: 600 !important;
}

/* Help text */
.register-step-3 .sport-dropdown-help[b-z1v9xikipp] {
    margin-top: 8px;
    color: #64748B;
    font-size: 16px;
    line-height: 1.45;
    font-weight: 500;
}

/* Botones paso 3 */
.register-step-3 .register-actions[b-z1v9xikipp] {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 24px;
}

    .register-step-3 .register-actions .register-btn[b-z1v9xikipp],
    .register-step-3 .register-actions .rz-button[b-z1v9xikipp] {
        width: 100% !important;
        min-height: 48px !important;
    }

/* =========================================================
   RESPONSIVE PASO 3
   ========================================================= */

@media (max-width: 900px) {
    .register-step-3 .register-form-card[b-z1v9xikipp] {
        max-width: 100%;
        padding-top: 60px;
    }

    .register-step-content-last[b-z1v9xikipp] {
        max-width: 100%;
    }
}

@media (max-width: 520px) {
    .register-step-3 .register-actions[b-z1v9xikipp] {
        grid-template-columns: 1fr;
    }

    .register-step-3 .register-radzen-control .rz-chip-text[b-z1v9xikipp],
    .register-step-3 .sport-search-dropdown .rz-chip-text[b-z1v9xikipp] {
        max-width: 120px !important;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/Security/ResetPassword.razor.rz.scp.css */
.sport-login-page[b-skp81poiz1] {
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    background: linear-gradient(180deg, #ffffff 0%, #f3f4f6 100%);
    font-family: 'Inter', sans-serif;
}

.sport-login-bg[b-skp81poiz1] {
    position: absolute;
    inset: 0;
    background-image: linear-gradient(rgba(17, 24, 39, 0.035) 1px, transparent 1px), linear-gradient(90deg, rgba(17, 24, 39, 0.035) 1px, transparent 1px);
    background-size: 42px 42px;
    opacity: 0.24;
    pointer-events: none;
}

.sport-login-glow[b-skp81poiz1] {
    display: none;
}

.sport-login-shell[b-skp81poiz1] {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    max-width: 1260px;
    margin: 0 auto;
    padding: 28px 20px;
    display: grid;
    grid-template-columns: minmax(520px, 640px) minmax(390px, 470px);
    justify-content: center;
    align-items: center;
    gap: 34px;
}

.sport-login-brand-panel[b-skp81poiz1] {
    position: relative;
    min-height: 620px;
    border-radius: 30px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: linear-gradient(145deg, rgba(255,255,255,0.96), rgba(255,255,255,0.82)), linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
    border: 1px solid rgba(17, 24, 39, 0.12);
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.10);
    backdrop-filter: blur(10px);
    overflow: hidden;
}

.sport-login-brand-top[b-skp81poiz1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.sport-login-logo[b-skp81poiz1] {
    width: 280px;
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.sport-login-badge[b-skp81poiz1],
.sport-login-card-badge[b-skp81poiz1] {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 10px 16px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.03em;
    color: #111827;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
}

.sport-login-overline[b-skp81poiz1] {
    display: block;
    margin-bottom: 14px;
    color: #6b7280;
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.22em;
}

.sport-login-title[b-skp81poiz1] {
    margin: 0;
    color: #111827;
    font-size: clamp(2.5rem, 4vw, 4.35rem);
    line-height: 1.02;
    font-weight: 900;
    max-width: 520px;
}

    .sport-login-title span[b-skp81poiz1] {
        display: block;
        color: #000000;
    }

.sport-login-description[b-skp81poiz1] {
    margin: 18px 0 0 0;
    max-width: 500px;
    color: #6b7280;
    font-size: 1rem;
    line-height: 1.7;
}

.sport-login-chip-row[b-skp81poiz1] {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.sport-chip[b-skp81poiz1] {
    padding: 10px 14px;
    border-radius: 999px;
    color: #374151;
    background: #ffffff;
    border: 1px solid #d1d5db;
    font-size: 0.9rem;
    font-weight: 700;
}

.sport-login-feature-grid[b-skp81poiz1] {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 26px;
}

.sport-feature-card[b-skp81poiz1] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 16px 14px;
    border-radius: 20px;
    background: #ffffff;
    border: 1px solid rgba(17, 24, 39, 0.10);
    min-height: 108px;
}

.sport-feature-icon[b-skp81poiz1] {
    width: 40px;
    height: 40px;
    min-width: 40px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #111827;
    font-size: 1.08rem;
}

.sport-feature-title[b-skp81poiz1] {
    color: #111827;
    font-size: 0.98rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.sport-feature-text[b-skp81poiz1] {
    color: #6b7280;
    font-size: 0.84rem;
    line-height: 1.45;
}

.sport-login-form-panel[b-skp81poiz1] {
    display: flex;
    justify-content: center;
    align-items: center;
}

.sport-login-card[b-skp81poiz1] {
    width: 100%;
    max-width: 470px;
    padding: 32px 28px;
    border-radius: 28px;
    background: rgba(255,255,255,0.96);
    border: 1px solid rgba(17, 24, 39, 0.12);
    box-shadow: 0 24px 60px rgba(17, 24, 39, 0.10);
    backdrop-filter: blur(10px);
}

.sport-login-card-badge[b-skp81poiz1] {
    margin-bottom: 14px;
}

.sport-login-card-header h2[b-skp81poiz1] {
    margin: 0;
    color: #111827;
    font-size: 2rem;
    line-height: 1.08;
    font-weight: 900;
}

.sport-login-card-header p[b-skp81poiz1] {
    margin: 10px 0 0 0;
    color: #6b7280;
    font-size: 0.97rem;
    line-height: 1.6;
}

.sport-login-form[b-skp81poiz1] {
    margin-top: 22px;
    width: 100%;
}

.sport-form-group[b-skp81poiz1] {
    margin-bottom: 18px;
}

.sport-label-row[b-skp81poiz1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
}

.sport-label[b-skp81poiz1] {
    display: inline-block;
    margin-bottom: 8px;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 700;
}

.sport-input-wrap[b-skp81poiz1] {
    position: relative;
    display: flex;
    align-items: center;
}

.sport-input-icon[b-skp81poiz1] {
    position: absolute;
    left: 14px;
    z-index: 1;
    font-size: 1rem;
    opacity: 0.82;
    color: #374151;
}

.sport-input[b-skp81poiz1] {
    width: 100%;
    height: 54px;
    border-radius: 16px;
    border: 1px solid #d1d5db;
    background: #ffffff;
    padding: 0 16px 0 44px;
    font-size: 0.95rem;
    color: #111827;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

    .sport-input:focus[b-skp81poiz1] {
        border-color: #111827;
        box-shadow: 0 0 0 4px rgba(17, 24, 39, 0.12);
    }

    .sport-input[b-skp81poiz1]::placeholder {
        color: #9ca3af;
    }

.sport-input-password[b-skp81poiz1] {
    padding-right: 92px;
}

.sport-password-toggle[b-skp81poiz1] {
    position: absolute;
    right: 10px;
    border: none;
    background: transparent;
    color: #374151;
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    padding: 8px 10px;
    border-radius: 10px;
    transition: background 0.2s ease;
}

    .sport-password-toggle:hover[b-skp81poiz1] {
        background: #f3f4f6;
    }

    .sport-password-toggle:disabled[b-skp81poiz1] {
        opacity: 0.65;
        cursor: not-allowed;
    }

.sport-link-small[b-skp81poiz1] {
    color: #111827;
    font-size: 0.84rem;
    font-weight: 700;
    text-decoration: none;
}

    .sport-link-small:hover[b-skp81poiz1] {
        text-decoration: underline;
    }

.sport-login-alert[b-skp81poiz1] {
    margin: 14px 0 16px 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: rgba(153, 27, 27, 0.08);
    border: 1px solid rgba(153, 27, 27, 0.18);
    color: #991b1b;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
}

.sport-login-alert-success[b-skp81poiz1] {
    margin: 14px 0 16px 0;
    padding: 14px 16px;
    border-radius: 16px;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    color: #111827;
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.45;
}

.sport-login-loading[b-skp81poiz1] {
    margin-top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #374151;
    font-size: 0.88rem;
    font-weight: 600;
}

.sport-login-loading-dot[b-skp81poiz1] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #111827;
    animation: pulseDot-b-skp81poiz1 1.1s infinite ease-in-out;
}

.sport-register-row[b-skp81poiz1],
.sport-reset-footer[b-skp81poiz1] {
    margin-top: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sport-register-text[b-skp81poiz1] {
    color: #6b7280;
    font-size: 0.9rem;
    text-align: center;
    font-weight: 600;
}

.rz-button.sport-login-button[b-skp81poiz1] {
    margin-top: 6px;
    height: 54px;
    border-radius: 16px !important;
    font-size: 0.95rem !important;
    font-weight: 800 !important;
    background: linear-gradient(135deg, #111827 0%, #374151 100%) !important;
    border-color: #111827 !important;
    color: #ffffff !important;
    box-shadow: 0 10px 24px rgba(17, 24, 39, 0.20) !important;
}

    .rz-button.sport-login-button:hover[b-skp81poiz1] {
        background: linear-gradient(135deg, #000000 0%, #1f2933 100%) !important;
        border-color: #000000 !important;
    }

.rz-button.sport-register-button[b-skp81poiz1] {
    height: 52px;
    border-radius: 16px !important;
    font-size: 0.92rem !important;
    font-weight: 700 !important;
    background: #ffffff !important;
    color: #111827 !important;
    border: 1px solid #d1d5db !important;
}

    .rz-button.sport-register-button:hover[b-skp81poiz1] {
        background: #f3f4f6 !important;
        border-color: #9ca3af !important;
    }

.validation-message[b-skp81poiz1] {
    display: block;
    margin-top: 8px;
    color: #991b1b;
    font-size: 0.82rem;
    font-weight: 600;
}

.sport-ball-decoration[b-skp81poiz1] {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: rgba(255,255,255,0.42);
    border: 1px solid rgba(17, 24, 39, 0.10);
    backdrop-filter: blur(8px);
    box-shadow: 0 12px 30px rgba(17, 24, 39, 0.08);
    pointer-events: none;
    opacity: 0.68;
}

.sport-ball-1[b-skp81poiz1] {
    top: 118px;
    right: 26px;
    width: 66px;
    height: 66px;
    font-size: 1.8rem;
}

.sport-ball-2[b-skp81poiz1] {
    bottom: 72px;
    right: 56px;
    width: 76px;
    height: 76px;
    font-size: 2rem;
}

@keyframes pulseDot-b-skp81poiz1 {
    0%, 100% {
        transform: scale(0.85);
        opacity: 0.65;
    }

    50% {
        transform: scale(1.15);
        opacity: 1;
    }
}

@media (max-width: 1100px) {
    .sport-login-shell[b-skp81poiz1] {
        grid-template-columns: 1fr;
        gap: 22px;
        max-width: 760px;
        padding: 24px 18px;
    }

    .sport-login-form-panel[b-skp81poiz1] {
        order: 1;
    }

    .sport-login-brand-panel[b-skp81poiz1] {
        order: 2;
        min-height: auto;
        padding: 28px;
    }

    .sport-login-card[b-skp81poiz1] {
        max-width: 100%;
    }

    .sport-login-feature-grid[b-skp81poiz1] {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .sport-ball-decoration[b-skp81poiz1] {
        display: none;
    }
}

@media (max-width: 768px) {
    .sport-login-page[b-skp81poiz1] {
        background: linear-gradient(180deg, #ffffff 0%, #e5e7eb 100%);
    }

    .sport-login-shell[b-skp81poiz1] {
        min-height: auto;
        padding: 16px;
        gap: 16px;
    }

    .sport-login-form-panel[b-skp81poiz1] {
        order: 1;
    }

    .sport-login-brand-panel[b-skp81poiz1] {
        order: 2;
        border-radius: 24px;
        padding: 22px 20px;
        min-height: auto;
    }

    .sport-login-card[b-skp81poiz1] {
        border-radius: 24px;
        padding: 24px 20px;
    }

    .sport-login-logo[b-skp81poiz1] {
        width: 280px;
    }

    .sport-login-title[b-skp81poiz1] {
        font-size: 2.15rem;
        max-width: 100%;
    }

    .sport-login-description[b-skp81poiz1] {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .sport-login-card-header h2[b-skp81poiz1] {
        font-size: 1.65rem;
    }

    .sport-login-chip-row[b-skp81poiz1] {
        gap: 8px;
        margin-top: 18px;
    }

    .sport-chip[b-skp81poiz1] {
        font-size: 0.82rem;
        padding: 9px 12px;
    }

    .sport-login-feature-grid[b-skp81poiz1] {
        grid-template-columns: 1fr;
        gap: 10px;
        margin-top: 18px;
    }

    .sport-feature-card[b-skp81poiz1] {
        min-height: auto;
        padding: 14px;
    }

    .rz-button.sport-login-button[b-skp81poiz1],
    .rz-button.sport-register-button[b-skp81poiz1] {
        height: 52px;
        border-radius: 15px !important;
        font-size: 0.9rem !important;
    }
}

@media (max-width: 480px) {
    .sport-login-shell[b-skp81poiz1] {
        padding: 12px;
    }

    .sport-login-card[b-skp81poiz1],
    .sport-login-brand-panel[b-skp81poiz1] {
        padding: 18px;
        border-radius: 20px;
    }

    .sport-login-title[b-skp81poiz1] {
        font-size: 1.92rem;
    }

    .sport-login-overline[b-skp81poiz1] {
        font-size: 0.68rem;
        letter-spacing: 0.16em;
    }

    .sport-login-card-header h2[b-skp81poiz1] {
        font-size: 1.45rem;
    }

    .sport-login-card-header p[b-skp81poiz1] {
        font-size: 0.9rem;
    }

    .sport-login-badge[b-skp81poiz1],
    .sport-login-card-badge[b-skp81poiz1] {
        font-size: 0.74rem;
        padding: 8px 12px;
    }
}
/* _content/CR.SafeSport.UI/Components/Pages/shared/PromoBannerCarousel.razor.rz.scp.css */
.promo-banner-carousel[b-703tvx30hd] {
    position: relative;
    width: 100%;
    margin-bottom: 28px;
    border-radius: 18px;
    overflow: hidden;
    background: #0F172A;
    border: 1px solid #E5E7EB;
    box-shadow: 0 4px 18px rgba(15, 23, 42, 0.06);
}

.promo-banner-stage[b-703tvx30hd] {
    position: relative;
    width: 100%;
    height: var(--promo-height-desktop);
    min-height: 260px;
    overflow: hidden;
    background: #0F172A;
}

.promo-banner-link[b-703tvx30hd] {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    padding: 0;
    background: transparent;
    text-decoration: none;
    cursor: pointer;
}

.promo-banner-button[b-703tvx30hd] {
    appearance: none;
}

.promo-banner-image[b-703tvx30hd] {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /*
       Ajusta el encuadre.
       50% 50% = centro.
       50% 42% sube un poco la imagen y ayuda a no cortar tanto texto arriba.
    */
    object-position: center 42%;
    animation: promoBannerFade-b-703tvx30hd 0.28s ease both;
}

.promo-banner-overlay[b-703tvx30hd] {
    position: absolute;
    left: 18px;
    bottom: 18px;
    max-width: min(520px, calc(100% - 36px));
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(8px);
    color: #FFFFFF;
    pointer-events: none;
}

    .promo-banner-overlay span[b-703tvx30hd] {
        display: block;
        color: #FFFFFF;
        font-size: 18px;
        line-height: 1.2;
        font-weight: 800;
    }

    .promo-banner-overlay small[b-703tvx30hd] {
        display: block;
        margin-top: 4px;
        color: rgba(255, 255, 255, 0.82);
        font-size: 13px;
        line-height: 1.3;
        font-weight: 500;
    }

.promo-banner-dots[b-703tvx30hd] {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.35);
    backdrop-filter: blur(6px);
    z-index: 2;
}

.promo-banner-dot[b-703tvx30hd] {
    width: 9px;
    height: 9px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.58);
    cursor: pointer;
    transition: width 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

    .promo-banner-dot:hover[b-703tvx30hd] {
        transform: scale(1.1);
    }

    .promo-banner-dot.active[b-703tvx30hd] {
        width: 24px;
        background: #FFFFFF;
    }

@keyframes promoBannerFade-b-703tvx30hd {
    from {
        opacity: 0.35;
        transform: scale(1.01);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

@media (max-width: 1024px) {
    .promo-banner-stage[b-703tvx30hd] {
        height: var(--promo-height-tablet);
        min-height: 210px;
    }

    .promo-banner-image[b-703tvx30hd] {
        object-position: center center;
    }
}

@media (max-width: 640px) {
    .promo-banner-carousel[b-703tvx30hd] {
        margin-bottom: 22px;
        border-radius: 14px;
    }

    .promo-banner-stage[b-703tvx30hd] {
        height: var(--promo-height-mobile);
        min-height: 135px;
    }

    /*
       En mobile, cover recorta mucho por ser una imagen panorámica.
       Contain evita que se corte el texto.
       Si prefieres que llene todo aunque recorte, cambia contain por cover.
    */
    .promo-banner-image[b-703tvx30hd] {
        object-fit: contain;
        object-position: center;
        background: #0F172A;
    }

    .promo-banner-overlay[b-703tvx30hd] {
        left: 12px;
        bottom: 12px;
        max-width: calc(100% - 24px);
        padding: 10px 12px;
        border-radius: 12px;
    }

        .promo-banner-overlay span[b-703tvx30hd] {
            font-size: 15px;
        }

        .promo-banner-overlay small[b-703tvx30hd] {
            font-size: 11px;
        }

    .promo-banner-dots[b-703tvx30hd] {
        bottom: 8px;
        gap: 6px;
        padding: 5px 8px;
    }

    .promo-banner-dot[b-703tvx30hd] {
        width: 8px;
        height: 8px;
    }

        .promo-banner-dot.active[b-703tvx30hd] {
            width: 20px;
        }
}