*, *::before, *::after {
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
    overflow-y: auto;
    height: 100%;
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 0;
    padding: 0;
    max-width: 100vw;
    overflow-x: hidden;
    background: #0D0D0D;
    color: #F5F5F5;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

:root {
    --fondo: #0D0D0D;
    --sidebar: #161616;
    --rojo: #E53935;
    --blanco: #F5F5F5;
    --gris: #B0B0B0;
    --hover: #FF5252;
}

.auth-layout {
    min-height: 100vh;
    background: #0D0D0D;
    color: #F5F5F5;
    overflow-x: hidden;
}

/* ===== AUTH PAGES (LOGIN / REGISTRO) ===== */

.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at 30% 0%, #1a0a0a 0%, #0D0D0D 50%);
    position: relative;
    overflow: hidden;
    padding: 40px 20px;
}

/* Decorative diagonal corner lines */
.auth-corner {
    position: absolute;
    width: 300px;
    height: 300px;
    pointer-events: none;
}

.auth-corner-tl {
    top: -60px;
    left: -60px;
    border-right: 2px solid rgba(229, 57, 53, 0.15);
    border-bottom: 2px solid rgba(229, 57, 53, 0.15);
    transform: rotate(-10deg);
}

.auth-corner-br {
    bottom: -60px;
    right: -60px;
    border-left: 2px solid rgba(229, 57, 53, 0.15);
    border-top: 2px solid rgba(229, 57, 53, 0.15);
    transform: rotate(-10deg);
}

/* Container */
.auth-container {
    width: 100%;
    max-width: 480px;
    text-align: center;
    position: relative;
    z-index: 1;
}

/* Logo */
.auth-logo {
    margin-bottom: 28px;
}

.auth-logo-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #E53935 0%, #B71C1C 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 14px;
    box-shadow: 0 4px 20px rgba(229, 57, 53, 0.3);
}

.auth-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}


.auth-brand {
    font-size: 32px;
    font-weight: 900;
    letter-spacing: 3px;
    margin: 0;
}

.brand-giga {
    color: #F5F5F5;
}

.brand-chad {
    color: #E53935;
}

.auth-tagline {
    color: #666;
    font-size: 11px;
    letter-spacing: 4px;
    margin: 6px 0 0;
    font-weight: 600;
}

/* Title */
.auth-title {
    font-size: 28px;
    font-weight: 800;
    color: #F5F5F5;
    margin: 0 0 6px;
}

.auth-desc {
    color: #B0B0B0;
    font-size: 14px;
    margin: 0 0 28px;
}

/* Card */
.auth-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 32px;
    text-align: left;
}

/* Form groups */
.auth-form-group {
    margin-bottom: 22px;
}

    .auth-form-group:last-of-type {
        margin-bottom: 28px;
    }

    .auth-form-group label {
        display: block;
        font-size: 11px;
        font-weight: 700;
        letter-spacing: 1.5px;
        color: #F5F5F5;
        margin-bottom: 10px;
        text-transform: uppercase;
    }

/* Input wrapper with icon */
.auth-input-wrapper {
    display: flex;
    align-items: center;
    background: #1C1C1C;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 0 14px;
    transition: border-color 0.2s;
}

    .auth-input-wrapper:focus-within {
        border-color: #E53935;
    }

.auth-input-icon {
    font-size: 16px;
    flex-shrink: 0;
    margin-right: 12px;
    opacity: 0.6;
}

.auth-input-wrapper input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #F5F5F5;
    font-size: 14px;
    padding: 14px 0;
    width: 100%;
}

    .auth-input-wrapper input::placeholder {
        color: #555;
    }

/* Eye toggle button */
.auth-eye-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    margin-left: 8px;
    opacity: 0.5;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

    .auth-eye-btn:hover {
        opacity: 1;
    }

/* Submit button */
.auth-submit-btn {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #E53935 0%, #C62828 100%);
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    letter-spacing: 0.5px;
}

    .auth-submit-btn:hover {
        background: linear-gradient(135deg, #FF5252 0%, #E53935 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(229, 57, 53, 0.3);
    }

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

/* Bottom link */
.auth-link-text {
    color: #666;
    font-size: 14px;
    margin: 28px 0 6px;
}

.auth-link {
    color: #E53935;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

    .auth-link:hover {
        color: #FF5252;
    }

/* Auth messages (error / success) */
.auth-error-msg {
    background: rgba(229, 57, 53, 0.12);
    border: 1px solid rgba(229, 57, 53, 0.35);
    border-radius: 12px;
    padding: 12px 16px;
    color: #FF5252;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.auth-success-msg {
    background: rgba(38, 176, 80, 0.12);
    border: 1px solid rgba(38, 176, 80, 0.35);
    border-radius: 12px;
    padding: 12px 16px;
    color: #4CAF50;
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
}

.auth-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

.admin-shell {
    min-height: 100vh;
    display: flex;
    background: #0D0D0D;
    color: #F5F5F5;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

.admin-sidebar {
    width: 270px;
    height: 100vh;
    background: #161616;
    border-right: 1px solid #2A2A2A;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: fixed;
    left: 0;
    top: 0;
}

.admin-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
}

.admin-bottom {
    margin-top: 24px;
}

.admin-profile {
    padding: 14px;
    border-radius: 14px;
    background: #202020;
    border: 1px solid #2A2A2A;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #E53935;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.admin-profile strong {
    display: block;
    font-size: 14px;
    color: #F5F5F5;
}

.admin-profile span {
    display: block;
    color: #B0B0B0;
    font-size: 12px;
}

.admin-logout {
    display: block;
    margin-top: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    color: #B0B0B0;
    text-decoration: none;
    font-weight: 600;
}

    .admin-logout:hover {
        background: #232323;
        color: #F5F5F5;
    }

.logo-mark {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #E53935;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.admin-logo h2 {
    font-size: 18px;
    margin: 0;
    letter-spacing: 2px;
}

.admin-logo span {
    color: #B0B0B0;
    font-size: 12px;
}

.admin-nav {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

    .admin-nav a {
        color: #B0B0B0;
        text-decoration: none;
        padding: 11px 14px;
        border-radius: 10px;
        font-weight: 500;
        transition: 0.2s;
    }

        .admin-nav a:hover {
            background: #232323;
            color: #F5F5F5;
        }

        .admin-nav a.active {
            background: #E53935;
            color: white;
        }

.nav-section {
    margin-top: 14px;
    margin-bottom: 4px;
    padding-left: 14px;
    color: #666;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}

.admin-profile {
    margin-top: 24px;
    padding: 14px;
    border-radius: 14px;
    background: #202020;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.admin-profile strong {
    display: block;
    font-size: 14px;
}

.admin-profile span {
    display: block;
    color: #B0B0B0;
    font-size: 12px;
}

/* .admin-main is defined below in the UPDATED section */

.admin-home {
    max-width: 1100px;
    margin: 0 auto;
}

.welcome-card {
    background: linear-gradient(135deg, #1C1C1C, #121212);
    border: 1px solid #2A2A2A;
    border-radius: 22px;
    padding: 38px;
    margin-bottom: 28px;
}

.welcome-label {
    color: #E53935;
    text-transform: uppercase;
    font-weight: 800;
    letter-spacing: 1px;
    font-size: 13px;
    margin-bottom: 12px;
}

.welcome-card h1 {
    font-size: 38px;
    margin-bottom: 12px;
}

.welcome-card p {
    color: #B0B0B0;
    font-size: 16px;
    max-width: 650px;
}

.admin-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
}

.admin-option-card {
    display: block;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 24px;
    text-decoration: none;
    color: #F5F5F5;
    transition: 0.2s;
}

    .admin-option-card:hover {
        border-color: #FF5252;
        transform: translateY(-2px);
        background: #1D1D1D;
    }

    .admin-option-card h3 {
        margin-bottom: 8px;
        font-size: 20px;
    }

    .admin-option-card p {
        color: #B0B0B0;
        margin: 0;
    }

.socio-shell {
    min-height: 100vh;
    display: flex;
    background: #0D0D0D;
    color: #F5F5F5;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

.socio-sidebar {
    width: 270px;
    min-height: 100vh;
    background: #161616;
    border-right: 1px solid #2A2A2A;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
}

.socio-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

    .socio-logo h2 {
        font-size: 18px;
        margin: 0;
        letter-spacing: 2px;
    }

    .socio-logo span {
        color: #E53935;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
    }

.socio-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

    .socio-nav a {
        color: #B0B0B0;
        text-decoration: none;
        padding: 13px 16px;
        border-radius: 10px;
        font-weight: 600;
        transition: 0.2s;
    }

        .socio-nav a:hover {
            background: #232323;
            color: #F5F5F5;
        }

        .socio-nav a.active {
            background: #E53935;
            color: white;
        }

.socio-profile {
    margin-top: 24px;
    padding: 16px;
    border-radius: 16px;
    background: #202020;
    border: 1px solid #2A2A2A;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .socio-profile strong {
        display: block;
        font-size: 14px;
    }

    .socio-profile span {
        color: #E53935;
        font-size: 12px;
        font-weight: 700;
    }

.socio-logout {
    margin-top: 16px;
    color: #B0B0B0;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 10px;
}

    .socio-logout:hover {
        color: white;
        background: #232323;
    }

/* .socio-main is defined below in the UPDATED section */

.socio-home {
    max-width: 1200px;
    margin: 0 auto;
}

.socio-hero {
    min-height: 180px;
    border-radius: 20px;
    border: 1px solid #2A2A2A;
    background: linear-gradient(90deg, rgba(229, 57, 53, 0.18), rgba(13, 13, 13, 0.95)), radial-gradient(circle at right, rgba(229, 57, 53, 0.25), transparent 35%), #161616;
    padding: 42px;
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

    .socio-hero h1 {
        font-size: 36px;
        margin-bottom: 10px;
    }

    .socio-hero p {
        color: #B0B0B0;
        font-size: 17px;
    }

.socio-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.socio-card {
    min-height: 240px;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
    color: #F5F5F5;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.2s;
}

    .socio-card:hover {
        border-color: #FF5252;
        background: #1D1D1D;
        transform: translateY(-2px);
    }

.socio-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #242424;
    color: #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 18px;
}

.socio-card h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.socio-card p {
    color: #B0B0B0;
    margin-bottom: 20px;
}

.socio-card span {
    width: fit-content;
    background: #E53935;
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
}

.motivacion-card {
    justify-content: center;
    border-color: rgba(229, 57, 53, 0.35);
}

    .motivacion-card h3 {
        max-width: 260px;
    }

    .motivacion-card p {
        max-width: 260px;
    }

.entrenador-shell {
    min-height: 100vh;
    display: flex;
    background: #0D0D0D;
    color: #F5F5F5;
    overflow-x: hidden;
    max-width: 100vw;
    width: 100%;
}

.entrenador-sidebar {
    width: 270px;
    min-height: 100vh;
    background: #161616;
    border-right: 1px solid #2A2A2A;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
}

.entrenador-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

    .entrenador-logo h2 {
        font-size: 18px;
        margin: 0;
        letter-spacing: 2px;
    }

    .entrenador-logo span {
        color: #E53935;
        font-size: 13px;
        font-weight: 700;
        text-transform: uppercase;
    }

.entrenador-nav {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

    .entrenador-nav a {
        color: #B0B0B0;
        text-decoration: none;
        padding: 13px 16px;
        border-radius: 10px;
        font-weight: 600;
        transition: 0.2s;
    }

        .entrenador-nav a:hover {
            background: #232323;
            color: #F5F5F5;
        }

        .entrenador-nav a.active {
            background: #E53935;
            color: white;
        }

.entrenador-profile {
    margin-top: 24px;
    padding: 16px;
    border-radius: 16px;
    background: #202020;
    border: 1px solid #2A2A2A;
    display: flex;
    align-items: center;
    gap: 12px;
}

    .entrenador-profile strong {
        display: block;
        font-size: 14px;
    }

    .entrenador-profile span {
        color: #E53935;
        font-size: 12px;
        font-weight: 700;
    }

.entrenador-logout {
    margin-top: 16px;
    color: #B0B0B0;
    text-decoration: none;
    padding: 12px 16px;
    border-radius: 10px;
}

    .entrenador-logout:hover {
        color: white;
        background: #232323;
    }

/* .entrenador-main is defined below in the UPDATED section */

.entrenador-home {
    max-width: 1200px;
    margin: 0 auto;
}

.entrenador-hero {
    min-height: 190px;
    border-radius: 20px;
    border: 1px solid #2A2A2A;
    background: linear-gradient(90deg, rgba(229, 57, 53, 0.20), rgba(13, 13, 13, 0.92)), radial-gradient(circle at right, rgba(229, 57, 53, 0.28), transparent 35%), #161616;
    padding: 42px;
    display: flex;
    align-items: center;
    margin-bottom: 28px;
}

    .entrenador-hero h1 {
        font-size: 36px;
        margin-bottom: 10px;
    }

    .entrenador-hero p {
        color: #B0B0B0;
        font-size: 17px;
        max-width: 520px;
    }

.hero-line {
    width: 46px;
    height: 4px;
    border-radius: 999px;
    background: #E53935;
    margin-top: 24px;
}

.entrenador-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.entrenador-card {
    min-height: 230px;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
    color: #F5F5F5;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.2s;
}

    .entrenador-card:hover {
        border-color: #FF5252;
        background: #1D1D1D;
        transform: translateY(-2px);
    }

.entrenador-icon {
    width: 62px;
    height: 62px;
    border-radius: 50%;
    background: #242424;
    color: #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 18px;
}

.entrenador-card h3 {
    font-size: 22px;
    margin-bottom: 8px;
}

.entrenador-card p {
    color: #B0B0B0;
    margin-bottom: 20px;
}

.entrenador-card span {
    width: fit-content;
    background: #E53935;
    color: white;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 700;
}

.entrenador-motivacion-card {
    grid-column: span 2;
    justify-content: center;
    border-color: rgba(229, 57, 53, 0.35);
    background: radial-gradient(circle at right, rgba(229, 57, 53, 0.18), transparent 35%), #161616;
}

    .entrenador-motivacion-card h3 {
        font-size: 30px;
        max-width: 360px;
        line-height: 1.2;
    }

    .entrenador-motivacion-card p {
        max-width: 430px;
    }

.notfound-page {
    min-height: 100vh;
    background: radial-gradient(circle at top, rgba(229, 57, 53, 0.16), transparent 35%), #0D0D0D;
    color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 32px;
}

.notfound-card {
    width: 520px;
    max-width: 100%;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 22px;
    padding: 44px;
    text-align: center;
    box-shadow: 0 0 45px rgba(0, 0, 0, 0.55);
}

.notfound-code {
    font-size: 82px;
    font-weight: 900;
    color: #E53935;
    letter-spacing: 6px;
    line-height: 1;
    margin-bottom: 18px;
}

.notfound-card h1 {
    font-size: 30px;
    margin-bottom: 14px;
    color: #F5F5F5;
}

.notfound-card p {
    color: #B0B0B0;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 30px;
}

.notfound-actions {
    display: flex;
    gap: 14px;
    justify-content: center;
}

.btn-primary-link,
.btn-secondary-link {
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 700;
    transition: 0.2s;
}

.btn-primary-link {
    background: #E53935;
    color: white;
}

    .btn-primary-link:hover {
        background: #FF5252;
        color: white;
    }

.btn-secondary-link {
    background: #202020;
    color: #F5F5F5;
    border: 1px solid #333;
}

    .btn-secondary-link:hover {
        border-color: #FF5252;
        color: #F5F5F5;
    }

.admin-sidebar {
    width: 270px;
    height: 100vh;
    background: #161616;
    border-right: 1px solid #2A2A2A;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    position: fixed;
    left: 0;
    top: 0;
    overflow: hidden;
}

.admin-logo {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
}

.admin-nav {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-right: 4px;
}

    .admin-nav a {
        color: #B0B0B0;
        text-decoration: none;
        padding: 9px 14px;
        border-radius: 10px;
        font-weight: 500;
        transition: 0.2s;
    }

        .admin-nav a:hover {
            background: #232323;
            color: #F5F5F5;
        }

        .admin-nav a.active {
            background: #E53935;
            color: white;
        }

.nav-section {
    margin-top: 10px;
    margin-bottom: 3px;
    padding-left: 14px;
    color: #777;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 800;
}

.admin-bottom {
    flex-shrink: 0;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid #2A2A2A;
}

.admin-profile {
    padding: 12px;
    border-radius: 14px;
    background: #202020;
    border: 1px solid #2A2A2A;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #E53935;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
}

.admin-profile strong {
    display: block;
    font-size: 14px;
    color: #F5F5F5;
}

.admin-profile span {
    display: block;
    color: #B0B0B0;
    font-size: 12px;
}

.admin-logout {
    display: block;
    margin-top: 10px;
    padding: 10px 14px;
    border-radius: 10px;
    color: #B0B0B0;
    text-decoration: none;
    font-weight: 600;
}

    .admin-logout:hover {
        background: #232323;
        color: #F5F5F5;
    }

.admin-nav::-webkit-scrollbar {
    width: 4px;
}

.admin-nav::-webkit-scrollbar-thumb {
    background: #333;
    border-radius: 999px;
}

    .admin-nav::-webkit-scrollbar-thumb:hover {
        background: #E53935;
    }

/* ===== ENTRENADOR LAYOUT - UPDATED ===== */

.entrenador-content-area {
    margin-left: 270px;
    width: calc(100% - 270px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    background: #0D0D0D;
}

.entrenador-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 38px;
    background: transparent;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.topbar-btn {
    background: none;
    border: 1px solid #2A2A2A;
    color: #B0B0B0;
    padding: 8px 12px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .topbar-btn:hover {
        background: #232323;
        color: #F5F5F5;
        border-color: #444;
    }

.topbar-logout {
    color: #B0B0B0;
    font-weight: 600;
}

.entrenador-main {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 38px 38px;
    flex: 1;
    min-width: 0;
}

.entrenador-bottom {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #2A2A2A;
}

.entrenador-profile .profile-role {
    color: #B0B0B0;
    font-size: 12px;
    font-weight: 400;
}

.nav-icon {
    margin-right: 10px;
    font-size: 16px;
}

/* ===== BREADCRUMB ===== */

.breadcrumb-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 24px;
    font-size: 14px;
}

    .breadcrumb-nav a {
        color: #B0B0B0;
        text-decoration: none;
        transition: 0.2s;
    }

        .breadcrumb-nav a:hover {
            color: #F5F5F5;
        }

.breadcrumb-sep {
    color: #555;
}

.breadcrumb-current {
    color: #F5F5F5;
    font-weight: 600;
}

/* ===== SESSION DETAIL LAYOUT ===== */

.sesion-detalle {
    max-width: 1400px;
    margin: 0 auto;
}

.detalle-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

/* ===== SESSION HEADER CARD ===== */

.sesion-header-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 20px;
}

.sesion-header-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

.sesion-icon-box {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(229, 57, 53, 0.15);
    border: 1px solid rgba(229, 57, 53, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.sesion-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

    .sesion-title-row h1 {
        font-size: 22px;
        font-weight: 700;
        margin: 0;
        color: #F5F5F5;
    }

.badge {
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

.badge-programada {
    background: rgba(76, 175, 80, 0.18);
    color: #66BB6A;
    border: 1px solid rgba(76, 175, 80, 0.35);
}

.badge-cancelada {
    background: rgba(229, 57, 53, 0.18);
    color: #EF5350;
    border: 1px solid rgba(229, 57, 53, 0.35);
}

.badge-finalizada {
    background: rgba(66, 165, 245, 0.18);
    color: #42A5F5;
    border: 1px solid rgba(66, 165, 245, 0.35);
}

.badge-confirmada {
    background: rgba(76, 175, 80, 0.15);
    color: #66BB6A;
    border: 1px solid rgba(76, 175, 80, 0.3);
    padding: 3px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
}

.badge-pendiente {
    background: rgba(255, 193, 7, 0.15);
    color: #FFD54F;
    border: 1px solid rgba(255, 193, 7, 0.3);
    padding: 3px 12px;
    border-radius: 16px;
    font-size: 11px;
    font-weight: 600;
}

.sesion-subtitle {
    color: #B0B0B0;
    font-size: 14px;
    margin: 4px 0 0;
}

/* ===== METADATA GRID ===== */

.sesion-meta-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

.meta-item {
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 14px 16px;
    text-align: center;
}

.meta-label {
    display: block;
    color: #666;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 6px;
}

.meta-value {
    display: block;
    color: #F5F5F5;
    font-size: 15px;
    font-weight: 700;
}

/* ===== CAPACITY BAR ===== */

.capacidad-section {
    margin-bottom: 20px;
}

.capacidad-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.capacidad-label {
    color: #666;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.capacidad-count {
    color: #F5F5F5;
    font-size: 14px;
    font-weight: 600;
}

.capacidad-bar-track {
    width: 100%;
    height: 10px;
    background: #2A2A2A;
    border-radius: 999px;
    overflow: hidden;
}

.capacidad-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #E53935, #FF5252);
    border-radius: 999px;
    transition: width 0.6s ease;
}

/* ===== STATS ROW ===== */

.sesion-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.stat-card {
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 18px;
    text-align: center;
}

.stat-value {
    display: block;
    font-size: 28px;
    font-weight: 800;
    margin-bottom: 4px;
}

.stat-ocupados {
    color: #E53935;
}

.stat-disponibles {
    color: #66BB6A;
}

.stat-porcentaje {
    color: #42A5F5;
}

.stat-label {
    display: block;
    color: #B0B0B0;
    font-size: 12px;
    font-weight: 500;
}

/* ===== DESCRIPTION CARD ===== */

.descripcion-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
}

    .descripcion-card h3 {
        font-size: 16px;
        font-weight: 700;
        color: #F5F5F5;
        margin-bottom: 12px;
    }

    .descripcion-card p {
        color: #B0B0B0;
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
    }

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

.alumnos-panel {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 24px;
    position: sticky;
    top: 24px;
}

.alumnos-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

    .alumnos-header h3 {
        font-size: 16px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0;
    }

.alumnos-total {
    color: #B0B0B0;
    font-size: 13px;
}

.alumnos-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.alumno-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    border-radius: 12px;
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    transition: 0.2s;
}

    .alumno-item:hover {
        border-color: #444;
    }

.alumno-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.alumno-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2A2A2A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.alumno-info strong {
    display: block;
    font-size: 13px;
    color: #F5F5F5;
    font-weight: 600;
}

.alumno-meta {
    display: block;
    color: #B0B0B0;
    font-size: 11px;
    margin-top: 2px;
}

.alumno-badge {
    flex-shrink: 0;
}

/* ===== MI HORARIO PAGE ===== */

.horario-page {
    max-width: 1200px;
    margin: 0 auto;
}

.breadcrumb-hint {
    color: #666;
    font-size: 13px;
}

.horario-header {
    margin-bottom: 28px;
}

    .horario-header h1 {
        font-size: 30px;
        font-weight: 800;
        color: #F5F5F5;
        margin: 0 0 6px;
    }

.horario-subtitle {
    color: #B0B0B0;
    font-size: 15px;
    margin: 0;
}

/* Tabs */
.horario-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 28px;
}

.horario-tab {
    padding: 10px 22px;
    border-radius: 10px;
    border: 1px solid #2A2A2A;
    background: #161616;
    color: #B0B0B0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .horario-tab:hover {
        background: #232323;
        color: #F5F5F5;
    }

    .horario-tab.tab-active {
        background: #E53935;
        color: white;
        border-color: #E53935;
    }

/* Session List */
.horario-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.horario-sesion-card {
    display: flex;
    align-items: center;
    gap: 20px;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 20px 24px;
    transition: 0.2s;
}

    .horario-sesion-card:hover {
        border-color: #3A3A3A;
        background: #1A1A1A;
    }

.horario-sesion-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 240px;
}

.horario-sesion-icon {
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(229, 57, 53, 0.15);
    border: 1px solid rgba(229, 57, 53, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.horario-sesion-info strong {
    display: block;
    font-size: 15px;
    color: #F5F5F5;
    font-weight: 700;
}

.horario-sesion-cat {
    display: block;
    color: #B0B0B0;
    font-size: 12px;
    margin-top: 2px;
}

/* Meta columns */
.horario-sesion-meta {
    display: flex;
    gap: 32px;
    flex: 1;
}

.horario-meta-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

    .horario-meta-col .meta-label {
        font-size: 10px;
        color: #666;
        font-weight: 700;
        letter-spacing: 1px;
        text-transform: uppercase;
        margin-bottom: 0;
    }

    .horario-meta-col .meta-value {
        font-size: 14px;
        color: #F5F5F5;
        font-weight: 600;
    }

/* Right side */
.horario-sesion-right {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-left: auto;
}

.horario-alumnos {
    color: #B0B0B0;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.horario-btn-cancel {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid #2A2A2A;
    background: transparent;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    flex-shrink: 0;
}

    .horario-btn-cancel:hover {
        background: rgba(229, 57, 53, 0.15);
        border-color: #E53935;
        color: #E53935;
    }

/* Empty state */
.horario-empty {
    padding: 48px;
    text-align: center;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
}

    .horario-empty p {
        color: #666;
        font-size: 15px;
        margin: 0;
    }

/* ===== MIS PAGOS PAGE ===== */

.pagos-page {
    max-width: 1200px;
    margin: 0 auto;
}

.pagos-header {
    margin-bottom: 28px;
}

    .pagos-header h1 {
        font-size: 30px;
        font-weight: 800;
        color: #F5F5F5;
        margin: 0 0 6px;
    }

.pagos-subtitle {
    color: #B0B0B0;
    font-size: 15px;
    margin: 0;
}

/* Stats Grid */
.pagos-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.pagos-stat-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 22px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: 0.2s;
}

    .pagos-stat-card:hover {
        border-color: #3A3A3A;
    }

.pagos-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.icon-green {
    background: rgba(76, 175, 80, 0.15);
    border: 2px solid rgba(76, 175, 80, 0.4);
    color: #66BB6A;
}

.icon-yellow {
    background: rgba(255, 193, 7, 0.15);
    border: 2px solid rgba(255, 193, 7, 0.4);
    color: #FFD54F;
}

.icon-blue {
    background: rgba(66, 165, 245, 0.15);
    border: 2px solid rgba(66, 165, 245, 0.4);
    color: #42A5F5;
}

.icon-red {
    background: rgba(229, 57, 53, 0.15);
    border: 2px solid rgba(229, 57, 53, 0.4);
    color: #EF5350;
}

.pagos-stat-info {
    display: flex;
    flex-direction: column;
}

.pagos-stat-label {
    font-size: 10px;
    color: #666;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 4px;
}

.pagos-stat-value {
    font-size: 24px;
    font-weight: 800;
    color: #F5F5F5;
    line-height: 1;
    margin-bottom: 4px;
}

.pagos-stat-hint {
    font-size: 11px;
    color: #666;
}

/* Content Grid (Table + Info) */
.pagos-content-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 20px;
    align-items: start;
}

/* Table Card */
.pagos-table-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
}

    .pagos-table-card h3 {
        font-size: 18px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0 0 20px;
    }

.pagos-table-wrapper {
    overflow-x: auto;
}

.pagos-table {
    width: 100%;
    border-collapse: collapse;
}

    .pagos-table thead th {
        font-size: 10px;
        color: #666;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        padding: 10px 12px;
        text-align: left;
        border-bottom: 1px solid #2A2A2A;
    }

    .pagos-table tbody tr {
        border-bottom: 1px solid #1E1E1E;
        transition: 0.15s;
    }

        .pagos-table tbody tr:hover {
            background: #1A1A1A;
        }

        .pagos-table tbody tr:last-child {
            border-bottom: none;
        }

    .pagos-table tbody td {
        padding: 14px 12px;
        font-size: 13px;
        color: #B0B0B0;
    }

.td-concepto {
    color: #F5F5F5 !important;
    font-weight: 600;
}

.td-monto {
    color: #F5F5F5 !important;
    font-weight: 700;
}

/* Status indicator */
.pagos-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 16px;
}

.estado-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
}

.estado-pagado {
    color: #66BB6A;
    background: rgba(76, 175, 80, 0.12);
}

    .estado-pagado .estado-dot {
        background: #66BB6A;
    }

.estado-pendiente {
    color: #FFD54F;
    background: rgba(255, 193, 7, 0.12);
}

    .estado-pendiente .estado-dot {
        background: #FFD54F;
    }

/* Info Panel */
.pagos-info-panel {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
    position: sticky;
    top: 24px;
}

    .pagos-info-panel h3 {
        font-size: 18px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0 0 14px;
    }

.pagos-info-text {
    color: #B0B0B0;
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 24px;
}

.pagos-info-items {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pagos-info-item {
    display: flex;
    align-items: center;
    gap: 14px;
}

.pagos-info-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.pagos-info-label {
    display: block;
    font-size: 10px;
    color: #666;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.pagos-info-item strong {
    display: block;
    font-size: 14px;
    color: #F5F5F5;
    font-weight: 600;
}

.estado-al-dia {
    color: #66BB6A !important;
}

/* ===== SOCIO LAYOUT - UPDATED ===== */

.socio-content-area {
    margin-left: 270px;
    width: calc(100% - 270px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    background: #0D0D0D;
}

.socio-main {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 38px 38px;
    flex: 1;
    min-width: 0;
}

.socio-bottom {
    margin-top: auto;
    padding-top: 14px;
    border-top: 1px solid #2A2A2A;
}

.socio-profile .profile-role {
    color: #B0B0B0;
    font-size: 12px;
    font-weight: 400;
}

/* ===== ADMIN LAYOUT - UPDATED ===== */

.admin-content-area {
    margin-left: 270px;
    width: calc(100% - 270px);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: auto;
    background: #0D0D0D;
}

.admin-main {
    margin-left: 0;
    width: 100%;
    max-width: 100%;
    padding: 0 38px 38px;
    flex: 1;
    min-width: 0;
}

/* ===== MI PERFIL PAGE (SHARED) ===== */

.perfil-page {
    max-width: 900px;
    margin: 0 auto;
}

.perfil-header {
    margin-bottom: 28px;
}

    .perfil-header h1 {
        font-size: 30px;
        font-weight: 800;
        color: #F5F5F5;
        margin: 0 0 6px;
    }

.perfil-subtitle {
    color: #B0B0B0;
    font-size: 15px;
    margin: 0;
}

/* Profile Card */
.perfil-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.perfil-card-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.perfil-avatar-large {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #1C1C1C;
    border: 2px solid #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    flex-shrink: 0;
}

.perfil-card-info h2 {
    font-size: 22px;
    font-weight: 700;
    color: #F5F5F5;
    margin: 0 0 4px;
}

.perfil-email {
    color: #B0B0B0;
    font-size: 14px;
    margin: 0 0 10px;
}

.perfil-badges {
    display: flex;
    gap: 10px;
}

.perfil-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.badge-activo {
    background: rgba(76, 175, 80, 0.15);
    color: #66BB6A;
    border: 1px solid rgba(76, 175, 80, 0.3);
}

    .badge-activo .estado-dot {
        background: #66BB6A;
    }

.badge-membresia {
    background: rgba(229, 57, 53, 0.12);
    color: #EF5350;
    border: 1px solid rgba(229, 57, 53, 0.3);
}

.badge-especialidad {
    background: rgba(66, 165, 245, 0.12);
    color: #42A5F5;
    border: 1px solid rgba(66, 165, 245, 0.3);
}

.badge-admin-role {
    background: rgba(255, 193, 7, 0.12);
    color: #FFD54F;
    border: 1px solid rgba(255, 193, 7, 0.3);
}

.perfil-card-actions {
    display: flex;
    gap: 10px;
}

.btn-perfil-edit {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #E53935;
    background: transparent;
    color: #E53935;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .btn-perfil-edit:hover {
        background: #E53935;
        color: white;
    }

.btn-perfil-password {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #2A2A2A;
    background: transparent;
    color: #B0B0B0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .btn-perfil-password:hover {
        background: #232323;
        color: #F5F5F5;
        border-color: #444;
    }

/* Info Card */
.perfil-info-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
}

    .perfil-info-card h3 {
        font-size: 18px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0 0 24px;
    }

.perfil-info-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.perfil-info-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #1E1E1E;
}

    .perfil-info-row:last-child {
        border-bottom: none;
    }

.perfil-info-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.perfil-info-label {
    display: block;
    font-size: 11px;
    color: #666;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.perfil-info-row strong {
    display: block;
    font-size: 15px;
    color: #F5F5F5;
    font-weight: 600;
}

/* ============================================
   RESPONSIVE DESIGN - ALL PAGES
   ============================================ */

/* ---------- 1200px: Reduce grids ---------- */
@media (max-width: 1200px) {
    /* Stats grids: 4 → 2 columns */
    .pagos-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Session detail: collapse side panel below */
    .detalle-layout {
        grid-template-columns: 1fr;
    }

    .alumnos-panel {
        position: static;
    }

    /* Pagos content: table full width, info below */
    .pagos-content-grid {
        grid-template-columns: 1fr;
    }

    .pagos-info-panel {
        position: static;
    }

    /* Metadata grid: 4 → 2 */
    .sesion-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Entrenador/Socio card grids: 3 → 2 */
    .entrenador-grid,
    .socio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .entrenador-motivacion-card {
        grid-column: span 2;
    }
}

/* ---------- 992px: Collapse sidebar ---------- */
@media (max-width: 992px) {
    /* Sidebar collapses */
    .entrenador-sidebar,
    .socio-sidebar,
    .admin-sidebar {
        width: 220px;
        padding: 18px 14px;
    }

    /* Content areas adapt */
    .entrenador-content-area,
    .socio-content-area,
    .admin-content-area {
        margin-left: 220px;
        width: calc(100% - 220px);
    }

    /* Reduce padding */
    .entrenador-main,
    .socio-main,
    .admin-main {
        padding: 0 24px 24px;
    }

    .entrenador-topbar {
        padding: 12px 24px;
    }

    /* Profile card: stack vertically */
    .perfil-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .perfil-card-left {
        flex-wrap: wrap;
    }

    .perfil-card-actions {
        width: 100%;
        justify-content: flex-start;
    }

    /* Horario session cards: wrap meta */
    .horario-sesion-card {
        flex-wrap: wrap;
        gap: 14px;
    }

    .horario-sesion-left {
        min-width: 200px;
    }

    .horario-sesion-right {
        margin-left: 0;
    }

    /* Admin grid: 2 → 1 */
    .admin-grid {
        grid-template-columns: 1fr;
    }

    /* Entrenador/Socio grids: 2 → 1 */
    .entrenador-grid,
    .socio-grid {
        grid-template-columns: 1fr;
    }

    .entrenador-motivacion-card {
        grid-column: span 1;
    }

    /* Welcome/Hero cards: reduce padding */
    .welcome-card,
    .entrenador-hero,
    .socio-hero {
        padding: 28px;
    }

        .welcome-card h1,
        .entrenador-hero h1,
        .socio-hero h1 {
            font-size: 28px;
        }
}

/* ---------- 768px: Mobile-friendly ---------- */
@media (max-width: 768px) {
    /* Hide sidebar completely, full-width content */
    .entrenador-sidebar,
    .socio-sidebar,
    .admin-sidebar {
        display: none;
    }

    .entrenador-content-area,
    .socio-content-area,
    .admin-content-area {
        margin-left: 0;
        width: 100%;
    }

    .entrenador-main,
    .socio-main,
    .admin-main {
        padding: 0 16px 24px;
    }

    .entrenador-topbar {
        padding: 12px 16px;
    }

    /* Stats grids: 2 → 1 column */
    .pagos-stats-grid {
        grid-template-columns: 1fr;
    }

    /* Metadata grid: 2 → 1 */
    .sesion-meta-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Stats row: 3 → stack */
    .sesion-stats-row {
        grid-template-columns: 1fr;
    }

    /* Profile card */
    .perfil-card-left {
        flex-direction: column;
        align-items: flex-start;
    }

    .perfil-avatar-large {
        width: 64px;
        height: 64px;
        font-size: 28px;
    }

    .perfil-badges {
        flex-wrap: wrap;
    }

    .perfil-card-actions {
        flex-wrap: wrap;
    }

    /* Horario cards: full vertical stack */
    .horario-sesion-card {
        flex-direction: column;
        align-items: flex-start;
    }

    .horario-sesion-left {
        min-width: auto;
        width: 100%;
    }

    .horario-sesion-meta {
        width: 100%;
        flex-wrap: wrap;
        gap: 16px;
    }

    .horario-sesion-right {
        width: 100%;
        justify-content: space-between;
    }

    /* Table: horizontal scroll */
    .pagos-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .pagos-table {
        min-width: 600px;
    }

    /* Header sizes */
    .perfil-header h1,
    .pagos-header h1,
    .horario-header h1 {
        font-size: 24px;
    }

    .sesion-title-row h1 {
        font-size: 18px;
    }

    .welcome-card h1,
    .entrenador-hero h1,
    .socio-hero h1 {
        font-size: 24px;
    }

    /* Cards: smaller padding */
    .sesion-header-card,
    .descripcion-card,
    .alumnos-panel,
    .pagos-table-card,
    .pagos-info-panel,
    .perfil-card,
    .perfil-info-card {
        padding: 20px;
        border-radius: 14px;
    }

    .entrenador-card,
    .socio-card,
    .admin-option-card {
        min-height: auto;
        padding: 20px;
    }

    /* Stat card values: smaller */
    .pagos-stat-value {
        font-size: 20px;
    }

    .stat-value {
        font-size: 22px;
    }
}

/* ===== MI MEMBRESÍA PAGE ===== */

.membresia-page {
    max-width: 1000px;
    margin: 0 auto;
}

.membresia-header {
    margin-bottom: 28px;
}

    .membresia-header h1 {
        font-size: 30px;
        font-weight: 800;
        color: #F5F5F5;
        margin: 0 0 6px;
    }

.membresia-subtitle {
    color: #B0B0B0;
    font-size: 15px;
    margin: 0;
}

/* Alert card (sin membresía) */
.membresia-alert-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
    display: flex;
    gap: 28px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.membresia-alert-left {
    flex: 1;
    display: flex;
    gap: 18px;
    min-width: 280px;
}

.membresia-alert-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(229, 57, 53, 0.12);
    border: 2px solid rgba(229, 57, 53, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
}

.membresia-alert-left h3 {
    font-size: 17px;
    font-weight: 700;
    color: #F5F5F5;
    margin: 0 0 6px;
}

.membresia-alert-left p {
    color: #B0B0B0;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 16px;
}

.btn-adquirir {
    padding: 10px 28px;
    border-radius: 10px;
    border: none;
    background: #E53935;
    color: white;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-adquirir:hover {
        background: #FF5252;
    }

.membresia-alert-right {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    min-width: 280px;
}

.membresia-meta-item {
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 12px 16px;
}

.meta-full {
    grid-column: span 2;
}

.meta-label {
    display: block;
    font-size: 10px;
    color: #666;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.membresia-meta-item strong {
    display: block;
    font-size: 14px;
    color: #F5F5F5;
    font-weight: 600;
}

.estado-sin {
    color: #FF5252 !important;
}

/* Beneficios card */
.membresia-beneficios-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 20px;
}

    .membresia-beneficios-card h3 {
        font-size: 18px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0 0 22px;
    }

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

.beneficio-item {
    text-align: center;
}

.beneficio-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin: 0 auto 10px;
}

.beneficio-item strong {
    display: block;
    font-size: 13px;
    color: #F5F5F5;
    font-weight: 600;
    margin-bottom: 4px;
}

.beneficio-item p {
    color: #666;
    font-size: 11px;
    margin: 0;
    line-height: 1.4;
}

/* Plan card (con membresía) */
.membresia-plan-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 24px;
}

.plan-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.plan-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.plan-icon-large {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
}

.plan-label-sm {
    display: block;
    font-size: 10px;
    color: #666;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.plan-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: #F5F5F5;
    margin: 0;
}

.plan-badge-activa {
    background: rgba(76, 175, 80, 0.15);
    color: #66BB6A;
    border: 1px solid rgba(76, 175, 80, 0.3);
    padding: 4px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.plan-precio {
    margin-bottom: 20px;
}

.plan-precio-valor {
    font-size: 36px;
    font-weight: 800;
    color: #F5F5F5;
}

.plan-precio-periodo {
    font-size: 16px;
    color: #666;
}

.plan-fechas-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 24px;
}

.plan-fecha-item {
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 14px 16px;
}

    .plan-fecha-item strong {
        display: block;
        font-size: 14px;
        color: #F5F5F5;
        font-weight: 600;
    }

.plan-section-title {
    font-size: 15px;
    font-weight: 700;
    color: #F5F5F5;
    margin: 0 0 14px;
}

.plan-beneficios-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 22px;
}

.plan-beneficio-tag {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13px;
    color: #B0B0B0;
}

.tag-rojo {
    background: rgba(229, 57, 53, 0.08);
    border-color: rgba(229, 57, 53, 0.2);
}

.check-green {
    color: #66BB6A;
    font-weight: 700;
}

.check-rojo {
    color: #E53935;
}

.btn-renovar {
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 12px;
    background: #E53935;
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
    margin-top: 4px;
}

    .btn-renovar:hover {
        background: #FF5252;
    }

/* Planes section */
.planes-section {
    margin-bottom: 40px;
}

    .planes-section h3 {
        font-size: 20px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0 0 18px;
    }

.planes-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.plan-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 24px;
    position: relative;
}

.plan-card-premium {
    border-color: #E53935;
}

.plan-premium-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: #E53935;
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
    letter-spacing: 1px;
}

.plan-card-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
}

.plan-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

.plan-card-header h4 {
    font-size: 16px;
    font-weight: 700;
    color: #F5F5F5;
    margin: 0 0 4px;
}

.plan-card-precio {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.plan-card-valor {
    font-size: 22px;
    font-weight: 800;
    color: #F5F5F5;
}

.plan-card-periodo {
    font-size: 13px;
    color: #666;
}

.plan-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}

    .plan-card-features li {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 6px 0;
        font-size: 13px;
        color: #B0B0B0;
    }

.btn-suscribirme {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 10px;
    background: #E53935;
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-suscribirme:hover {
        background: #FF5252;
    }

.btn-suscribirme-premium {
    background: #E53935;
}

.plan-actual-label {
    display: block;
    text-align: center;
    color: #E53935;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 0 0;
}

/* Responsive membresía */
@media (max-width: 992px) {
    .beneficios-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .membresia-alert-card {
        flex-direction: column;
    }

    .membresia-alert-right {
        min-width: auto;
    }
}

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

    .planes-grid {
        grid-template-columns: 1fr;
    }

    .plan-fechas-grid {
        grid-template-columns: 1fr;
    }

    .plan-beneficios-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== RESERVAR CLASE PAGE ===== */

.reservar-page {
    max-width: 1100px;
    margin: 0 auto;
}

.reservar-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 14px;
}

    .reservar-top h1 {
        font-size: 30px;
        font-weight: 800;
        color: #F5F5F5;
        margin: 0 0 6px;
    }

.reservar-subtitle {
    color: #B0B0B0;
    font-size: 15px;
    margin: 0;
}

.btn-ver-reservas {
    padding: 10px 22px;
    border-radius: 10px;
    border: 1px solid #E53935;
    background: transparent;
    color: #E53935;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

    .btn-ver-reservas:hover {
        background: #E53935;
        color: white;
    }

/* Filtros */
.filtros-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 24px;
    margin-bottom: 24px;
}

    .filtros-card h4 {
        font-size: 16px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0 0 16px;
    }

.filtros-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
    margin-bottom: 12px;
}

.filtro-group label {
    display: block;
    font-size: 10px;
    color: #666;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.filtro-group select,
.filtro-group input {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid #333;
    background: #1C1C1C;
    color: #F5F5F5;
    font-size: 13px;
    outline: none;
    transition: border-color 0.2s;
}

    .filtro-group select:focus,
    .filtro-group input:focus {
        border-color: #E53935;
    }

.btn-limpiar {
    background: none;
    border: none;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

    .btn-limpiar:hover {
        color: #E53935;
    }

/* Clases grid */
.clases-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
}

.clase-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 22px;
    transition: 0.2s;
}

    .clase-card:hover {
        border-color: #3A3A3A;
    }

.clase-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.clase-disciplina {
    font-size: 10px;
    font-weight: 700;
    color: #E53935;
    letter-spacing: 1.5px;
}

.clase-cupos {
    font-size: 12px;
    font-weight: 600;
    color: #66BB6A;
}

.cupos-pocos {
    color: #FFD54F;
}

.clase-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: #F5F5F5;
    margin: 0 0 6px;
}

.clase-desc {
    color: #666;
    font-size: 12px;
    line-height: 1.5;
    margin: 0 0 14px;
}

.clase-detalles {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 16px;
}

    .clase-detalles span {
        font-size: 12px;
        color: #B0B0B0;
    }

/* Occupation bar */
.clase-ocupacion {
    margin-bottom: 16px;
}

.ocupacion-info {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #666;
    margin-bottom: 6px;
}

.ocupacion-bar {
    height: 6px;
    background: #2A2A2A;
    border-radius: 3px;
    overflow: hidden;
}

.ocupacion-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}

.fill-verde {
    background: #66BB6A;
}

.fill-amarillo {
    background: #FFD54F;
}

.fill-rojo {
    background: #E53935;
}

.btn-reservar-clase {
    width: 100%;
    padding: 11px;
    border: none;
    border-radius: 10px;
    background: #E53935;
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-reservar-clase:hover {
        background: #FF5252;
    }

/* ===== MIS RESERVAS PAGE ===== */

.reservas-page {
    max-width: 1100px;
    margin: 0 auto;
}

.reservas-breadcrumb {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.reservas-header {
    margin-bottom: 22px;
}

    .reservas-header h1 {
        font-size: 30px;
        font-weight: 800;
        color: #F5F5F5;
        margin: 0 0 6px;
    }

.reservas-subtitle {
    color: #B0B0B0;
    font-size: 15px;
    margin: 0;
}

/* Tabs */
.reservas-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 22px;
}

.reservas-tab {
    padding: 10px 24px;
    border: 1px solid #2A2A2A;
    background: transparent;
    color: #B0B0B0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .reservas-tab:first-child {
        border-radius: 10px 0 0 10px;
    }

    .reservas-tab:last-child {
        border-radius: 0 10px 10px 0;
    }

.tab-activa {
    background: #E53935;
    border-color: #E53935;
    color: white;
}

/* Reserva rows */
.reservas-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.reserva-row {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 18px 22px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: 0.2s;
}

    .reserva-row:hover {
        border-color: #3A3A3A;
    }

.reserva-row-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(229, 57, 53, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.reserva-row-info {
    min-width: 130px;
}

    .reserva-row-info strong {
        display: block;
        font-size: 15px;
        color: #F5F5F5;
        font-weight: 700;
    }

    .reserva-row-info span {
        font-size: 12px;
        color: #666;
    }

.reserva-row-meta {
    min-width: 90px;
}

    .reserva-row-meta .meta-label {
        font-size: 10px;
        margin-bottom: 2px;
    }

    .reserva-row-meta strong {
        display: block;
        font-size: 13px;
        color: #F5F5F5;
        font-weight: 600;
    }

.reserva-row-estado {
    margin-left: auto;
}

.estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
}

.estado-confirmada {
    background: rgba(76, 175, 80, 0.15);
    color: #66BB6A;
}

.estado-completada {
    background: rgba(66, 165, 245, 0.12);
    color: #42A5F5;
}

.estado-cancelada {
    background: rgba(229, 57, 53, 0.12);
    color: #EF5350;
}

.btn-cancelar-reserva {
    background: none;
    border: none;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
    flex-shrink: 0;
}

    .btn-cancelar-reserva:hover {
        color: #E53935;
    }

.reservas-empty {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 40px;
    text-align: center;
}

    .reservas-empty p {
        color: #666;
        margin: 0;
    }

/* ===== RESERVA CONFIRMADA PAGE ===== */

.confirmada-page {
    max-width: 1000px;
    margin: 0 auto;
}

.confirmada-header {
    margin-bottom: 24px;
}

    .confirmada-header h1 {
        font-size: 30px;
        font-weight: 800;
        color: #F5F5F5;
        margin: 0 0 6px;
    }

.confirmada-subtitle {
    color: #B0B0B0;
    font-size: 15px;
    margin: 0;
}

/* Success banner */
.confirmada-banner {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

.confirmada-check {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(76, 175, 80, 0.12);
    border: 2px solid #66BB6A;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #66BB6A;
    flex-shrink: 0;
}

.confirmada-banner h3 {
    font-size: 18px;
    font-weight: 700;
    color: #F5F5F5;
    margin: 0 0 4px;
}

.confirmada-banner p {
    color: #B0B0B0;
    font-size: 13px;
    line-height: 1.5;
    margin: 0;
}

/* Content grid */
.confirmada-grid {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 20px;
    margin-bottom: 24px;
}

/* Detalles */
.confirmada-detalles {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
}

    .confirmada-detalles h3 {
        font-size: 18px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0 0 20px;
    }

.detalle-row {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #1E1E1E;
}

    .detalle-row:last-child {
        border-bottom: none;
    }

.detalle-icon {
    width: 28px;
    font-size: 14px;
    flex-shrink: 0;
}

.detalle-label {
    flex: 1;
    font-size: 13px;
    color: #B0B0B0;
}

.detalle-row strong {
    font-size: 14px;
    color: #F5F5F5;
    font-weight: 600;
}

.text-rojo {
    color: #E53935 !important;
}

.text-verde {
    color: #66BB6A !important;
}

/* Próximos pasos */
.confirmada-pasos {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
}

    .confirmada-pasos h3 {
        font-size: 18px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0 0 20px;
    }

.paso-item {
    display: flex;
    gap: 14px;
    margin-bottom: 18px;
}

.paso-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
}

.paso-item strong {
    display: block;
    font-size: 14px;
    color: #F5F5F5;
    font-weight: 600;
    margin-bottom: 4px;
}

.paso-item p {
    color: #B0B0B0;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

.paso-nota {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 14px;
    margin-top: 14px;
}

    .paso-nota span {
        font-size: 16px;
        flex-shrink: 0;
    }

    .paso-nota p {
        color: #B0B0B0;
        font-size: 12px;
        line-height: 1.5;
        margin: 0;
    }

/* Bottom actions */
.confirmada-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.btn-confirmada-primary {
    padding: 14px;
    border-radius: 12px;
    background: #E53935;
    color: white;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
}

    .btn-confirmada-primary:hover {
        background: #FF5252;
    }

.btn-confirmada-secondary {
    padding: 14px;
    border-radius: 12px;
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    color: #F5F5F5;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
}

    .btn-confirmada-secondary:hover {
        background: #232323;
        border-color: #444;
    }

/* Responsive reservar/reservas/confirmada */
@media (max-width: 1200px) {
    .clases-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .confirmada-grid {
        grid-template-columns: 1fr;
    }
}

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

    .reserva-row {
        flex-wrap: wrap;
        gap: 14px;
    }

    .reserva-row-estado {
        margin-left: 0;
    }
}

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

    .filtros-grid {
        grid-template-columns: 1fr;
    }

    .confirmada-actions {
        grid-template-columns: 1fr;
    }

    .reserva-row {
        flex-direction: column;
        align-items: flex-start;
    }
}

.auth-logo-img {
    width: 180px;
    height: auto;
    object-fit: contain;
    display: block;
}

.auth-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 18px;
}

.admin-list-page {
    max-width: 1180px;
    margin: 0 auto;
}

.admin-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

    .admin-list-header h1 {
        color: #F5F5F5;
        font-size: 32px;
        margin-bottom: 6px;
    }

    .admin-list-header p {
        color: #B0B0B0;
        margin: 0;
    }

.new-button {
    background: #E53935;
    color: white;
    text-decoration: none;
    padding: 13px 20px;
    border-radius: 10px;
    font-weight: 800;
    transition: 0.2s;
}

    .new-button:hover {
        background: #FF5252;
        color: white;
    }

.admin-list-toolbar {
    display: flex;
    gap: 14px;
    margin-bottom: 22px;
}

.admin-search {
    flex: 1;
    background: #202020;
    color: #F5F5F5;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 13px 16px;
    outline: none;
}

    .admin-search:focus {
        border-color: #E53935;
    }

.admin-filter-group {
    display: flex;
    gap: 8px;
}

.filter-button {
    background: #202020;
    color: #B0B0B0;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 12px 18px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
}

    .filter-button:hover {
        color: #F5F5F5;
        border-color: #FF5252;
    }

    .filter-button.active {
        background: #E53935;
        color: white;
        border-color: #E53935;
    }

.admin-table-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    overflow-x: auto;
}

.admin-table {
    width: 100%;
    border-collapse: collapse;
}

    .admin-table thead {
        background: #141414;
    }

    .admin-table th {
        color: #B0B0B0;
        text-align: left;
        padding: 18px;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1px;
    }

    .admin-table td {
        padding: 18px;
        border-top: 1px solid #242424;
        color: #F5F5F5;
        vertical-align: middle;
    }

.trainer-cell {
    display: flex;
    align-items: center;
    gap: 12px;
}

.trainer-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #242424;
    color: #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.trainer-cell strong {
    display: block;
    color: #F5F5F5;
    font-size: 15px;
}

.trainer-cell span {
    display: block;
    color: #B0B0B0;
    font-size: 13px;
}

.status-badge {
    display: inline-block;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

    .status-badge.active {
        background: rgba(0, 200, 83, 0.15);
        color: #00C853;
    }

    .status-badge.inactive {
        background: rgba(229, 57, 53, 0.15);
        color: #FF5252;
    }

.action-button {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: #202020;
    color: #B0B0B0;
    cursor: pointer;
    transition: 0.2s;
}

    .action-button:hover {
        background: #E53935;
        color: white;
    }

.empty-row {
    text-align: center;
    color: #B0B0B0 !important;
    padding: 34px !important;
}

/* ===== ADMIN SESIONES ===== */
.sesion-clase-cell strong {
    display: block;
    color: #F5F5F5;
    font-size: 15px;
}

.sesion-clase-cell span {
    display: block;
    color: #B0B0B0;
    font-size: 13px;
}

.cupos-cell {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 90px;
}

.cupos-bar {
    height: 5px;
    background: #2A2A2A;
    border-radius: 3px;
    overflow: hidden;
}

.cupos-fill {
    height: 100%;
    background: #E53935;
    border-radius: 3px;
}

.status-badge.finished {
    background: rgba(100, 100, 100, 0.15);
    color: #888888;
}

/* ===== ADMIN FORM PAGES ===== */

.admin-form-page {
    max-width: 1180px;
    margin: 0 auto;
}

.admin-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
    color: #B0B0B0;
}

    .admin-breadcrumb a {
        color: #B0B0B0;
        text-decoration: none;
        transition: color 0.2s;
    }

        .admin-breadcrumb a:hover {
            color: #E53935;
        }

.breadcrumb-active {
    color: #F5F5F5;
    font-weight: 700;
}

.admin-form-title {
    color: #F5F5F5;
    font-size: 32px;
    margin-bottom: 6px;
}

.admin-form-subtitle {
    color: #B0B0B0;
    margin-bottom: 28px;
}

.sesion-form-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 24px;
    align-items: start;
}

.sesion-form-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sesion-form-right {
    position: sticky;
    top: 20px;
}

.form-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    overflow: hidden;
}

.form-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 18px 22px;
    border-bottom: 1px solid #2A2A2A;
}

    .form-card-header h2 {
        color: #F5F5F5;
        font-size: 16px;
        font-weight: 700;
        margin: 0;
    }

.form-card-icon {
    font-size: 18px;
}

.form-card-body {
    padding: 22px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.form-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

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

.form-label {
    color: #B0B0B0;
    font-size: 13px;
    font-weight: 600;
}

.required {
    color: #E53935;
}

.form-input,
.form-select {
    background: #202020;
    color: #F5F5F5;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    outline: none;
    width: 100%;
    transition: border-color 0.2s;
    appearance: auto;
}

    .form-input:focus,
    .form-select:focus {
        border-color: #E53935;
    }

    .form-input::placeholder {
        color: #555;
    }

    .form-select option {
        background: #202020;
        color: #F5F5F5;
    }

.form-radio-group {
    display: flex;
    gap: 28px;
}

.form-radio-label {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #F5F5F5;
    font-size: 14px;
    cursor: pointer;
}

    .form-radio-label input[type="radio"] {
        accent-color: #E53935;
        width: 16px;
        height: 16px;
        cursor: pointer;
    }

/* Vista previa */

.sesion-preview-card {
    min-height: 260px;
}

.preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 30px 10px;
    text-align: center;
}

.preview-empty-icon {
    font-size: 36px;
    opacity: 0.4;
}

.preview-empty p {
    color: #B0B0B0;
    font-size: 13px;
    line-height: 1.6;
}

.sesion-preview {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid #242424;
}

    .preview-row:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }

.preview-label {
    color: #B0B0B0;
    font-size: 13px;
}

.preview-value {
    color: #F5F5F5;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
}

/* Botones de acción */

.form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    padding-bottom: 40px;
}

.btn-primary {
    background: #E53935;
    color: white;
    border: none;
    border-radius: 10px;
    padding: 13px 22px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-primary:hover {
        background: #FF5252;
    }

.btn-secondary {
    background: #202020;
    color: #B0B0B0;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 13px 22px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

    .btn-secondary:hover {
        color: #F5F5F5;
        border-color: #555;
    }

.btn-ghost {
    color: #B0B0B0;
    text-decoration: none;
    font-size: 14px;
    padding: 13px 10px;
    transition: color 0.2s;
}

    .btn-ghost:hover {
        color: #F5F5F5;
    }

/* ===== ADMIN NUEVO ENTRENADOR ===== */

.trainer-form-page {
    max-width: 980px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.trainer-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #B0B0B0;
    font-size: 14px;
    margin-bottom: 18px;
}

    .trainer-breadcrumb a {
        color: #B0B0B0;
        text-decoration: none;
    }

        .trainer-breadcrumb a:hover {
            color: #FF5252;
        }

    .trainer-breadcrumb strong {
        color: #F5F5F5;
    }

.trainer-form-title {
    margin-bottom: 24px;
}

    .trainer-form-title h1 {
        color: #F5F5F5;
        font-size: 30px;
        margin-bottom: 6px;
    }

    .trainer-form-title p {
        color: #B0B0B0;
        margin: 0;
    }

.trainer-section {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 22px;
}

    .trainer-section h2 {
        color: #F5F5F5;
        font-size: 18px;
        margin-bottom: 22px;
    }

.trainer-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.trainer-field label {
    display: block;
    color: #F5F5F5;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

    .trainer-field label span {
        color: #E53935;
    }

.trainer-field input,
.trainer-field select {
    width: 100%;
    background: #0D0D0D;
    border: 1px solid #242424;
    color: #F5F5F5;
    border-radius: 8px;
    padding: 13px 14px;
    outline: none;
}

    .trainer-field input:focus,
    .trainer-field select:focus {
        border-color: #E53935;
    }

    .trainer-field input::placeholder {
        color: #777;
    }

.trainer-radio-row {
    display: flex;
    align-items: center;
    gap: 28px;
}

    .trainer-radio-row label {
        color: #F5F5F5;
        font-weight: 700;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .trainer-radio-row input {
        accent-color: #E53935;
    }

.trainer-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
}

.trainer-save-button {
    background: #E53935;
    color: white;
    border: none;
    padding: 13px 22px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
}

    .trainer-save-button:hover {
        background: #FF5252;
    }

.trainer-cancel-button {
    background: #202020;
    color: #F5F5F5;
    border: 1px solid #2A2A2A;
    padding: 13px 22px;
    border-radius: 8px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

    .trainer-cancel-button:hover {
        border-color: #FF5252;
    }

.trainer-return-link {
    color: #B0B0B0;
    text-decoration: none;
    font-weight: 700;
    padding: 13px 16px;
}

    .trainer-return-link:hover {
        color: #FF5252;
    }

.trainer-message {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 22px;
    font-weight: 700;
}

    .trainer-message.error {
        background: rgba(229, 57, 53, 0.15);
        border: 1px solid rgba(229, 57, 53, 0.45);
        color: #FF5252;
    }

    .trainer-message.success {
        background: rgba(0, 200, 83, 0.15);
        border: 1px solid rgba(0, 200, 83, 0.45);
        color: #00C853;
    }

.action-button {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: #202020;
    color: #B0B0B0;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .action-button:hover {
        background: #E53935;
        color: white;
    }

.trainer-edit-page {
    max-width: 1250px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.trainer-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: start;
}

.trainer-edit-main {
    min-width: 0;
}

.trainer-summary-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
    position: sticky;
    top: 30px;
}

    .trainer-summary-card h2 {
        color: #F5F5F5;
        font-size: 18px;
        margin-bottom: 22px;
    }

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #242424;
    padding: 14px 0;
}

    .summary-row span {
        color: #B0B0B0;
    }

    .summary-row strong {
        color: #F5F5F5;
        text-align: right;
    }

.summary-status.active {
    color: #00C853;
}

.summary-status.inactive {
    color: #FF5252;
}

.summary-warning {
    margin-top: 22px;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.25);
    color: #D6B35A;
    border-radius: 12px;
    padding: 16px;
    line-height: 1.5;
}

.action-button {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: #202020;
    color: #B0B0B0;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .action-button:hover {
        background: #E53935;
        color: white;
    }

.trainer-edit-page {
    max-width: 1250px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.trainer-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 330px;
    gap: 24px;
    align-items: start;
}

.trainer-edit-main {
    min-width: 0;
}

.trainer-summary-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
    position: sticky;
    top: 30px;
}

    .trainer-summary-card h2 {
        color: #F5F5F5;
        font-size: 18px;
        margin-bottom: 22px;
    }

.summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #242424;
    padding: 14px 0;
}

    .summary-row span {
        color: #B0B0B0;
    }

    .summary-row strong {
        color: #F5F5F5;
        text-align: right;
    }

.summary-status.active {
    color: #00C853;
}

.summary-status.inactive {
    color: #FF5252;
}

.summary-warning {
    margin-top: 22px;
    background: rgba(255, 193, 7, 0.08);
    border: 1px solid rgba(255, 193, 7, 0.25);
    color: #D6B35A;
    border-radius: 12px;
    padding: 16px;
    line-height: 1.5;
}
/* ════════════════════════════════════════
   ADMIN SOCIOS – estilos locales
   (complementan app.css del proyecto)
════════════════════════════════════════ */

/* ── Página ── */
.socios-page {
    max-width: 1300px;
    margin: 0 auto;
}

/* ── Header ── */
.socios-page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 24px;
}

    .socios-page-header h1 {
        font-size: 30px;
        font-weight: 800;
        color: #F5F5F5;
        margin: 0 0 4px;
    }

.socios-subtitle {
    color: #B0B0B0;
    font-size: 15px;
    margin: 0;
}

/* ── Botón primario ── */
.btn-socios-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 11px;
    border: none;
    cursor: pointer;
    background: #E53935;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    transition: .15s;
}

    .btn-socios-primary:hover {
        background: #FF5252;
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(229,57,53,.35);
    }

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

/* ── Stats ── */
.socios-stats-row {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 14px;
    margin-bottom: 24px;
}

.socios-stat-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    transition: .15s;
}

    .socios-stat-card:hover {
        border-color: #3A3A3A;
    }

.socios-stat-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
}

.icon-red {
    background: rgba(229,57,53,.15);
    border: 2px solid rgba(229,57,53,.4);
}

.icon-green {
    background: rgba(76,175,80,.15);
    border: 2px solid rgba(76,175,80,.4);
}

.icon-yellow {
    background: rgba(255,193,7,.15);
    border: 2px solid rgba(255,193,7,.4);
}

.icon-blue {
    background: rgba(66,165,245,.15);
    border: 2px solid rgba(66,165,245,.4);
}

.socios-stat-body {
    display: flex;
    flex-direction: column;
}

.socios-stat-label {
    font-size: 10px;
    color: #555;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    margin-bottom: 3px;
}

.socios-stat-value {
    font-size: 28px;
    font-weight: 800;
    color: #F5F5F5;
    line-height: 1;
}

.socios-stat-hint {
    font-size: 11px;
    color: #B0B0B0;
    margin-top: 3px;
}

/* ── Toolbar ── */
.socios-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.socios-search-box {
    flex: 1;
    min-width: 240px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 10px 16px;
    transition: .15s;
}

    .socios-search-box:focus-within {
        border-color: #E53935;
    }

.search-icon-s {
    color: #555;
    font-size: 15px;
}

.socios-search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: #F5F5F5;
    font-family: inherit;
    font-size: 14px;
    flex: 1;
}

    .socios-search-box input::placeholder {
        color: #555;
    }

.socios-filter-tabs {
    display: flex;
    gap: 0;
}

.socios-filter-tab {
    padding: 9px 20px;
    border: 1px solid #2A2A2A;
    background: transparent;
    color: #B0B0B0;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s;
}

    .socios-filter-tab:first-child {
        border-radius: 10px 0 0 10px;
    }

    .socios-filter-tab:last-child {
        border-radius: 0 10px 10px 0;
    }

    .socios-filter-tab + .socios-filter-tab {
        border-left: none;
    }

    .socios-filter-tab:hover {
        background: #232323;
        color: #F5F5F5;
    }

    .socios-filter-tab.tab-sel {
        background: #E53935;
        border-color: #E53935;
        color: #fff;
    }

/* ── Table Card ── */
.socios-table-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    overflow: hidden;
}

.socios-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    border-bottom: 1px solid #2A2A2A;
}

    .socios-table-header h3 {
        font-size: 16px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0;
    }

.socios-table-count {
    font-size: 13px;
    color: #B0B0B0;
}

.socios-table-wrapper {
    overflow-x: auto;
}

.socios-table {
    width: 100%;
    border-collapse: collapse;
}

    .socios-table thead th {
        padding: 12px 16px;
        text-align: left;
        font-size: 10px;
        color: #555;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        border-bottom: 1px solid #2A2A2A;
        white-space: nowrap;
    }

    .socios-table tbody tr {
        border-bottom: 1px solid #1a1a1a;
        transition: .12s;
    }

        .socios-table tbody tr:hover {
            background: #191919;
        }

        .socios-table tbody tr:last-child {
            border-bottom: none;
        }

    .socios-table tbody td {
        padding: 14px 16px;
        font-size: 13px;
        color: #B0B0B0;
        vertical-align: middle;
    }

/* col helpers */
.td-s-dni {
    color: #666;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .5px;
}

.td-s-name-cell {
    display: flex;
    align-items: center;
    gap: 10px;
}

.td-s-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #2A2A2A;
    border: 1px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: #B0B0B0;
    flex-shrink: 0;
}

.td-s-name-cell strong {
    display: block;
    font-size: 14px;
    color: #F5F5F5;
    font-weight: 700;
}

.td-s-name-cell span {
    display: block;
    font-size: 11px;
    color: #555;
    margin-top: 1px;
}

.td-s-pago {
    color: #F5F5F5;
    font-weight: 600;
}

.td-s-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* badges */
.badge-s {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.badge-s-black {
    background: rgba(255,193,7,.15);
    color: #FFD54F;
    border: 1px solid rgba(255,193,7,.3);
}

.badge-s-basic {
    background: rgba(66,165,245,.15);
    color: #42A5F5;
    border: 1px solid rgba(66,165,245,.3);
}

.badge-s-activo {
    background: rgba(76,175,80,.15);
    color: #66BB6A;
    border: 1px solid rgba(76,175,80,.3);
}

.badge-s-inactivo {
    background: rgba(229,57,53,.15);
    color: #EF5350;
    border: 1px solid rgba(229,57,53,.3);
}

.bdot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    display: inline-block;
}

.bdot-green {
    background: #66BB6A;
}

.bdot-red {
    background: #EF5350;
}

/* action btn */
.btn-s-action {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #2A2A2A;
    background: transparent;
    color: #B0B0B0;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .15s;
}

    .btn-s-action:hover {
        background: rgba(229,57,53,.12);
        border-color: #E53935;
        color: #E53935;
    }

/* empty */
.socios-empty {
    padding: 48px;
    text-align: center;
    color: #555;
    font-size: 15px;
}

/* pagination */
.socios-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid #2A2A2A;
    flex-wrap: wrap;
    gap: 10px;
}

.pagination-s-info {
    font-size: 13px;
    color: #B0B0B0;
}

.pagination-s-btns {
    display: flex;
    gap: 6px;
}

.pgbtn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #2A2A2A;
    background: transparent;
    color: #B0B0B0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .15s;
}

    .pgbtn:hover {
        background: #232323;
        color: #F5F5F5;
    }

.pgbtn-active {
    background: #E53935;
    border-color: #E53935;
    color: #fff;
}

/* ── Modal ── */
.socios-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.72);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    animation: fadeIn .2s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.socios-modal {
    background: #181818;
    border: 1px solid #2A2A2A;
    border-radius: 20px;
    padding: 32px;
    width: 520px;
    max-width: 95vw;
    max-height: 90vh;
    overflow-y: auto;
    animation: slideUp .25s ease;
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.socios-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

    .socios-modal-header h3 {
        font-size: 20px;
        font-weight: 800;
        color: #F5F5F5;
    }

.socios-modal-close {
    background: none;
    border: 1px solid #2A2A2A;
    color: #B0B0B0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .15s;
}

    .socios-modal-close:hover {
        background: #2A2A2A;
        color: #F5F5F5;
    }

.socios-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.socios-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.socios-form-full {
    grid-column: span 2;
}

.socios-form-group label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #777;
}

.socios-form-group input,
.socios-form-group select {
    background: #1C1C1C;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 11px 14px;
    color: #F5F5F5;
    font-family: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .15s;
}

    .socios-form-group input:focus,
    .socios-form-group select:focus {
        border-color: #E53935;
    }

    .socios-form-group input::placeholder {
        color: #444;
    }

    .socios-form-group select option {
        background: #1C1C1C;
    }

.socios-form-error {
    margin-top: 14px;
    color: #EF5350;
    font-size: 13px;
    font-weight: 600;
    background: rgba(229,57,53,.1);
    border: 1px solid rgba(229,57,53,.3);
    border-radius: 8px;
    padding: 10px 14px;
}

.socios-modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 24px;
}

.btn-s-cancel {
    padding: 10px 22px;
    border-radius: 10px;
    border: 1px solid #2A2A2A;
    background: transparent;
    color: #B0B0B0;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: .15s;
}

    .btn-s-cancel:hover {
        background: #232323;
        color: #F5F5F5;
    }

/* ── Toast ── */
.socios-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    z-index: 300;
    background: #1C1C1C;
    border: 1px solid #333;
    border-radius: 12px;
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.5);
    font-size: 13px;
    font-weight: 600;
    color: #F5F5F5;
    opacity: 0;
    transform: translateY(16px);
    transition: .25s;
    pointer-events: none;
    max-width: 320px;
}

.socios-toast-show {
    opacity: 1;
    transform: translateY(0);
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .socios-stats-row {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width: 768px) {
    .socios-stats-row {
        grid-template-columns: 1fr;
    }

    .socios-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .socios-filter-tabs {
        justify-content: center;
    }

    .socios-form-grid {
        grid-template-columns: 1fr;
    }

    .socios-form-full {
        grid-column: span 1;
    }
}


/* ================================================================
   ADMIN SOCIO FORM — CSS compartido para Nuevo y Editar
   Paleta: #0D0D0D fondo, #161616 sidebar, #E53935 rojo, #F5F5F5 blanco
   ================================================================ */

/* ── Page shell ── */
.socio-form-page {
    max-width: 1060px;
    margin: 0 auto;
}

/* ── Breadcrumb ── */
.sf-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 20px;
    font-size: 13px;
}

    .sf-breadcrumb a {
        color: #B0B0B0;
        text-decoration: none;
        transition: color 0.2s;
    }

        .sf-breadcrumb a:hover {
            color: #F5F5F5;
        }

.sf-bc-sep {
    color: #444;
}

.sf-bc-current {
    color: #E53935;
    font-weight: 600;
}

/* ── Page header ── */
.sf-page-header {
    margin-bottom: 28px;
}

    .sf-page-header h1 {
        font-size: 30px;
        font-weight: 800;
        color: #F5F5F5;
        margin: 0 0 6px;
    }

.sf-page-subtitle {
    color: #B0B0B0;
    font-size: 15px;
    margin: 0;
}

/* ── Layout: Nuevo (single col) ── */
.sf-layout {
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Layout: Editar (two cols) ── */
.sf-edit-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

.sf-resumen-col {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Section cards ── */
.sf-section-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 20px;
    transition: border-color 0.2s;
}

    .sf-section-card:hover {
        border-color: #333;
    }

.sf-section-title {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

    .sf-section-title .sf-section-icon {
        width: 44px;
        height: 44px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .sf-section-title h3 {
        font-size: 17px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0 0 2px;
    }

    .sf-section-title span {
        font-size: 12px;
        color: #666;
    }

/* Icon variants */
.sf-section-icon.icon-red {
    background: rgba(229, 57, 53, 0.12);
    border: 1px solid rgba(229, 57, 53, 0.25);
    color: #EF5350;
}

.sf-section-icon.icon-blue {
    background: rgba(66, 165, 245, 0.12);
    border: 1px solid rgba(66, 165, 245, 0.25);
    color: #42A5F5;
}

.sf-section-icon.icon-yellow {
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.25);
    color: #FFD54F;
}

.sf-section-icon.icon-green {
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.25);
    color: #66BB6A;
}

/* ── Form grid ── */
.sf-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.sf-form-full {
    grid-column: span 2;
}

.sf-mt-16 {
    margin-top: 20px;
}

/* ── Form group ── */
.sf-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .sf-form-group label {
        font-size: 11px;
        font-weight: 700;
        color: #F5F5F5;
        letter-spacing: 0.8px;
        text-transform: uppercase;
    }

    .sf-form-group input,
    .sf-form-group select,
    .sf-form-group textarea {
        background: #1C1C1C;
        border: 1px solid #333;
        border-radius: 10px;
        padding: 12px 14px;
        color: #F5F5F5;
        font-size: 14px;
        outline: none;
        transition: border-color 0.2s;
        width: 100%;
        font-family: inherit;
        resize: vertical;
    }

        .sf-form-group input:focus,
        .sf-form-group select:focus,
        .sf-form-group textarea:focus {
            border-color: #E53935;
        }

        .sf-form-group input::placeholder,
        .sf-form-group textarea::placeholder {
            color: #555;
        }

        .sf-form-group select option {
            background: #1C1C1C;
            color: #F5F5F5;
        }

.sf-req {
    color: #E53935;
    font-size: 13px;
}

/* ── Errors ── */
.sf-input-error {
    border-color: #E53935 !important;
}

.sf-error-msg {
    font-size: 11px;
    color: #EF5350;
    font-weight: 500;
}

/* ── Password input ── */
.sf-input-pass {
    display: flex;
    align-items: center;
    background: #1C1C1C;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 0 14px;
    transition: border-color 0.2s;
}

    .sf-input-pass:focus-within {
        border-color: #E53935;
    }

    .sf-input-pass input {
        flex: 1;
        background: transparent;
        border: none;
        padding: 12px 0;
        color: #F5F5F5;
        font-size: 14px;
        outline: none;
        width: 100%;
    }

    .sf-input-pass .sf-input-error {
        border: none;
    }

.sf-eye-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    opacity: 0.5;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

    .sf-eye-btn:hover {
        opacity: 1;
    }

/* ── Sublabel ── */
.sf-sublabel {
    font-size: 11px;
    font-weight: 700;
    color: #666;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin: 0 0 14px;
}

/* ── Plan cards ── */
.sf-plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.sf-plan-card {
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 18px;
    cursor: pointer;
    display: flex;
    gap: 12px;
    transition: border-color 0.2s, background 0.2s;
    position: relative;
}

    .sf-plan-card:hover {
        border-color: #444;
    }

.sf-plan-premium {
    border-color: rgba(229, 57, 53, 0.25);
}

.sf-plan-selected {
    border-color: #E53935;
    background: rgba(229, 57, 53, 0.06);
}

.sf-plan-premium-sel {
    background: rgba(229, 57, 53, 0.08);
}

/* Radio circle */
.sf-plan-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid #555;
    flex-shrink: 0;
    margin-top: 2px;
    transition: border-color 0.2s, background 0.2s;
}

.sf-radio-sel {
    border-color: #42A5F5;
    background: #42A5F5;
}

.sf-radio-red {
    border-color: #E53935;
    background: #E53935;
}

.sf-plan-body {
    flex: 1;
    min-width: 0;
}

    .sf-plan-body h4 {
        font-size: 14px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0 0 6px;
    }

.sf-plan-badge-premium {
    display: inline-block;
    background: #E53935;
    color: white;
    font-size: 9px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 6px;
    letter-spacing: 1px;
    margin-bottom: 6px;
}

.sf-plan-precio {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin-bottom: 10px;
}

.sf-precio-val {
    font-size: 22px;
    font-weight: 800;
    color: #F5F5F5;
}

.sf-precio-per {
    font-size: 12px;
    color: #666;
}

.sf-plan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

    .sf-plan-features li {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 12px;
        color: #B0B0B0;
    }

.sf-chk {
    color: #66BB6A;
    font-weight: 700;
    font-size: 11px;
}

/* ── Estado buttons ── */
.sf-estado-row {
    display: flex;
    gap: 12px;
}

.sf-estado-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: 10px;
    border: 1px solid #2A2A2A;
    background: #1C1C1C;
    color: #B0B0B0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .sf-estado-btn:hover {
        border-color: #444;
        color: #F5F5F5;
    }

.sf-estado-activo {
    border-color: rgba(76, 175, 80, 0.5) !important;
    background: rgba(76, 175, 80, 0.12) !important;
    color: #66BB6A !important;
}

.sf-estado-inactivo {
    border-color: rgba(229, 57, 53, 0.5) !important;
    background: rgba(229, 57, 53, 0.10) !important;
    color: #EF5350 !important;
}

.sf-estado-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.dot-green {
    background: #66BB6A;
}

.dot-red {
    background: #E53935;
}

/* ── Quitar membresía ── */
.sf-btn-quitar {
    background: transparent;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    color: #666;
    font-size: 12px;
    font-weight: 600;
    padding: 9px 16px;
    cursor: pointer;
    margin-top: 16px;
    transition: 0.2s;
}

    .sf-btn-quitar:hover {
        border-color: #E53935;
        color: #EF5350;
        background: rgba(229, 57, 53, 0.08);
    }

/* ── Form actions ── */
.sf-form-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 40px;
    flex-wrap: wrap;
}

.sf-btn-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border: none;
    border-radius: 12px;
    background: #E53935;
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

    .sf-btn-primary:hover {
        background: #FF5252;
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(229, 57, 53, 0.3);
    }

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

.sf-btn-secondary {
    padding: 13px 22px;
    border-radius: 12px;
    border: 1px solid #2A2A2A;
    background: transparent;
    color: #B0B0B0;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.2s;
}

    .sf-btn-secondary:hover {
        background: #1C1C1C;
        color: #F5F5F5;
        border-color: #444;
    }

.sf-back-link {
    margin-left: auto;
}

    .sf-back-link a {
        color: #555;
        font-size: 13px;
        text-decoration: none;
        transition: color 0.2s;
    }

        .sf-back-link a:hover {
            color: #E53935;
        }

/* ── Resumen card (editar) ── */
.sf-resumen-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
}

    .sf-resumen-card h4 {
        font-size: 16px;
        font-weight: 700;
        color: #F5F5F5;
        margin: 0 0 18px;
        padding-bottom: 12px;
        border-bottom: 1px solid #2A2A2A;
    }

.sf-resumen-rows {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.sf-resumen-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    padding: 11px 0;
    border-bottom: 1px solid #1E1E1E;
    font-size: 13px;
}

    .sf-resumen-row:last-child {
        border-bottom: none;
    }

    .sf-resumen-row span {
        color: #666;
        font-size: 12px;
        flex-shrink: 0;
    }

    .sf-resumen-row strong {
        color: #F5F5F5;
        font-size: 13px;
        text-align: right;
        word-break: break-word;
    }

.rsm-activo {
    color: #66BB6A !important;
}

.rsm-inactivo {
    color: #EF5350 !important;
}

/* ── Admin nota ── */
.sf-admin-nota {
    background: rgba(255, 193, 7, 0.07);
    border: 1px solid rgba(255, 193, 7, 0.2);
    border-radius: 14px;
    padding: 16px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}

.sf-nota-icon {
    font-size: 18px;
    flex-shrink: 0;
    margin-top: 1px;
}

.sf-admin-nota p {
    font-size: 12px;
    color: #B0B0B0;
    line-height: 1.6;
    margin: 0;
}

/* ── Toast (reutilizado del sistema) ── */
.socios-toast {
    position: fixed;
    bottom: -80px;
    left: 50%;
    transform: translateX(-50%);
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 14px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #F5F5F5;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    transition: bottom 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 9999;
    white-space: nowrap;
}

.socios-toast-show {
    bottom: 28px;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .sf-edit-layout {
        grid-template-columns: 1fr 260px;
    }
}

@media (max-width: 900px) {
    .sf-edit-layout {
        grid-template-columns: 1fr;
    }

    .sf-resumen-col {
        position: static;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sf-resumen-card {
        flex: 1;
        min-width: 280px;
    }

    .sf-admin-nota {
        flex: 1;
        min-width: 280px;
    }
}

@media (max-width: 640px) {
    .sf-form-grid {
        grid-template-columns: 1fr;
    }

    .sf-form-full {
        grid-column: span 1;
    }

    .sf-plan-grid {
        grid-template-columns: 1fr;
    }

    .sf-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sf-btn-primary,
    .sf-btn-secondary {
        text-align: center;
        justify-content: center;
    }

    .sf-back-link {
        margin-left: 0;
        text-align: center;
    }

    .sf-resumen-col {
        flex-direction: column;
    }
}

.membership-page {
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.membership-header {
    margin-bottom: 34px;
}

    .membership-header h1 {
        color: #F5F5F5;
        font-size: 32px;
        margin-bottom: 8px;
    }

    .membership-header p {
        color: #B0B0B0;
        margin: 0;
        font-size: 16px;
    }

.membership-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}

.membership-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
    color: #F5F5F5;
}

.membership-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 26px;
}

.membership-title-block {
    display: flex;
    align-items: center;
    gap: 14px;
}

.membership-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    background: #242424;
    color: #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 900;
}

    .membership-icon.black {
        background: rgba(229, 57, 53, 0.16);
    }

.membership-title-block h2 {
    font-size: 21px;
    margin: 0 0 8px 0;
}

.membership-status {
    display: inline-block;
    background: rgba(0, 200, 83, 0.15);
    color: #00C853;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.membership-price {
    text-align: right;
}

    .membership-price strong {
        display: block;
        font-size: 30px;
        color: #F5F5F5;
    }

    .membership-price span {
        color: #B0B0B0;
        font-size: 14px;
    }

.membership-section {
    margin-bottom: 24px;
}

    .membership-section h3 {
        color: #B0B0B0;
        font-size: 13px;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        margin-bottom: 14px;
    }

    .membership-section ul {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .membership-section li {
        color: #F5F5F5;
        margin-bottom: 11px;
        font-size: 15px;
    }

        .membership-section li::before {
            content: "✓";
            color: #00C853;
            font-weight: 900;
            margin-right: 10px;
        }

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

    .membership-tags span {
        background: #202020;
        color: #B0B0B0;
        border: 1px solid #2A2A2A;
        padding: 8px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
    }

.membership-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 28px;
}

.membership-button-secondary,
.membership-button-primary {
    text-align: center;
    text-decoration: none;
    padding: 13px 16px;
    border-radius: 10px;
    font-weight: 800;
    transition: 0.2s;
}

.membership-button-secondary {
    background: #202020;
    color: #F5F5F5;
    border: 1px solid #2A2A2A;
}

    .membership-button-secondary:hover {
        border-color: #FF5252;
        color: #F5F5F5;
    }

.membership-button-primary {
    background: #E53935;
    color: white;
    border: 1px solid #E53935;
}

    .membership-button-primary:hover {
        background: #FF5252;
        border-color: #FF5252;
        color: white;
    }

.plan-edit-page {
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.plan-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #B0B0B0;
    font-size: 14px;
    margin-bottom: 22px;
}

    .plan-breadcrumb a {
        color: #B0B0B0;
        text-decoration: none;
    }

        .plan-breadcrumb a:hover {
            color: #FF5252;
        }

    .plan-breadcrumb strong {
        color: #F5F5F5;
    }

.plan-edit-title {
    margin-bottom: 28px;
}

    .plan-edit-title h1 {
        color: #F5F5F5;
        font-size: 30px;
        margin-bottom: 6px;
    }

    .plan-edit-title p {
        color: #B0B0B0;
        margin: 0;
    }

.plan-edit-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.plan-edit-main {
    min-width: 0;
}

.plan-section {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 22px;
}

    .plan-section h2 {
        color: #F5F5F5;
        font-size: 18px;
        margin-bottom: 22px;
    }

.plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}

.plan-field label {
    display: block;
    color: #B0B0B0;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.plan-field input {
    width: 100%;
    background: #0D0D0D;
    border: 1px solid #242424;
    color: #F5F5F5;
    border-radius: 8px;
    padding: 13px 14px;
    outline: none;
}

    .plan-field input:focus {
        border-color: #E53935;
    }

.plan-add-row {
    display: grid;
    grid-template-columns: 1fr 120px;
    gap: 12px;
    margin-bottom: 16px;
}

    .plan-add-row input {
        background: #0D0D0D;
        border: 1px solid #242424;
        color: #F5F5F5;
        border-radius: 8px;
        padding: 13px 14px;
        outline: none;
    }

        .plan-add-row input:focus {
            border-color: #E53935;
        }

    .plan-add-row button {
        background: #202020;
        color: #F5F5F5;
        border: 1px solid #2A2A2A;
        border-radius: 8px;
        font-weight: 800;
        cursor: pointer;
    }

        .plan-add-row button:hover {
            border-color: #FF5252;
        }

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

    .plan-tags span {
        background: #202020;
        color: #F5F5F5;
        border: 1px solid #2A2A2A;
        border-radius: 8px;
        padding: 9px 12px;
        font-size: 13px;
        font-weight: 700;
    }

    .plan-tags button {
        margin-left: 8px;
        background: transparent;
        border: none;
        color: #B0B0B0;
        cursor: pointer;
        font-weight: 900;
    }

        .plan-tags button:hover {
            color: #FF5252;
        }

    .plan-tags.secondary span {
        color: #B0B0B0;
    }

.plan-status-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.plan-status-option {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: #202020;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 18px;
    cursor: pointer;
}

    .plan-status-option input {
        margin-top: 4px;
        accent-color: #E53935;
    }

    .plan-status-option strong {
        display: block;
        color: #F5F5F5;
        margin-bottom: 4px;
    }

    .plan-status-option p {
        color: #B0B0B0;
        margin: 0;
        font-size: 13px;
    }

    .plan-status-option.active-option {
        border-color: rgba(0, 200, 83, 0.45);
    }

.plan-actions {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
}

.plan-save-button {
    background: #E53935;
    color: white;
    border: none;
    padding: 13px 22px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}

    .plan-save-button:hover {
        background: #FF5252;
    }

.plan-cancel-button {
    background: #202020;
    color: #F5F5F5;
    border: 1px solid #2A2A2A;
    padding: 13px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

    .plan-cancel-button:hover {
        border-color: #FF5252;
        color: #F5F5F5;
    }

.plan-return-link {
    color: #B0B0B0;
    text-decoration: none;
    font-weight: 700;
    padding: 13px 16px;
}

    .plan-return-link:hover {
        color: #FF5252;
    }

.plan-preview {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
    position: sticky;
    top: 30px;
}

.plan-preview-section-title h2 {
    color: #F5F5F5;
    font-size: 18px;
    margin-bottom: 22px;
}

.plan-preview-card {
    background: #202020;
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 22px;
    margin-bottom: 18px;
}

.plan-preview-top {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 22px;
}

.plan-preview-name {
    display: flex;
    gap: 12px;
}

.plan-preview-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: #2A2A2A;
    color: #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

.plan-preview-name h3 {
    color: #F5F5F5;
    font-size: 18px;
    margin: 0 0 8px 0;
}

.plan-preview-status {
    background: rgba(0, 200, 83, 0.15);
    color: #00C853;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

    .plan-preview-status.inactive {
        background: rgba(229, 57, 53, 0.15);
        color: #FF5252;
    }

.plan-preview-price {
    text-align: right;
}

    .plan-preview-price strong {
        color: #F5F5F5;
        font-size: 24px;
        display: block;
    }

    .plan-preview-price span {
        color: #B0B0B0;
        font-size: 13px;
    }

.plan-preview-block {
    margin-bottom: 18px;
}

    .plan-preview-block h4 {
        color: #B0B0B0;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 10px;
    }

    .plan-preview-block p {
        color: #F5F5F5;
        margin-bottom: 8px;
        font-size: 14px;
    }

.plan-preview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

    .plan-preview-tags span {
        background: #161616;
        border: 1px solid #2A2A2A;
        color: #B0B0B0;
        border-radius: 7px;
        padding: 7px 10px;
        font-size: 12px;
    }

.plan-summary-box {
    background: #202020;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 14px;
}

    .plan-summary-box span {
        color: #B0B0B0;
        display: block;
        margin-bottom: 8px;
    }

    .plan-summary-box strong {
        color: #F5F5F5;
        display: block;
        font-size: 26px;
        margin-bottom: 4px;
    }

    .plan-summary-box p {
        color: #B0B0B0;
        margin: 0;
        font-size: 13px;
    }

.plan-message {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 22px;
    font-weight: 700;
}

    .plan-message.error {
        background: rgba(229, 57, 53, 0.15);
        border: 1px solid rgba(229, 57, 53, 0.45);
        color: #FF5252;
    }

    .plan-message.success {
        background: rgba(0, 200, 83, 0.15);
        border: 1px solid rgba(0, 200, 83, 0.45);
        color: #00C853;
    }

.subscribe-page {
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.subscribe-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #B0B0B0;
    font-size: 14px;
    margin-bottom: 22px;
}

    .subscribe-breadcrumb a {
        color: #B0B0B0;
        text-decoration: none;
    }

        .subscribe-breadcrumb a:hover {
            color: #FF5252;
        }

    .subscribe-breadcrumb strong {
        color: #F5F5F5;
    }

.subscribe-title {
    margin-bottom: 28px;
}

    .subscribe-title h1 {
        color: #F5F5F5;
        font-size: 30px;
        margin-bottom: 6px;
    }

    .subscribe-title p {
        color: #B0B0B0;
        margin: 0;
    }

.subscribe-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 28px;
    align-items: start;
}

.subscribe-section {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 28px;
    margin-bottom: 22px;
}

    .subscribe-section h2 {
        color: #F5F5F5;
        font-size: 18px;
        margin-bottom: 22px;
    }

.subscribe-search {
    width: 100%;
    background: #0D0D0D;
    border: 1px solid #242424;
    color: #F5F5F5;
    border-radius: 8px;
    padding: 14px;
    outline: none;
}

    .subscribe-search:focus {
        border-color: #E53935;
    }

.subscribe-member-list {
    margin-top: 16px;
    display: grid;
    gap: 10px;
}

.subscribe-member-card {
    width: 100%;
    background: #202020;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    color: #F5F5F5;
    padding: 14px 16px;
    display: flex;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
}

    .subscribe-member-card:hover {
        border-color: #FF5252;
    }

    .subscribe-member-card.selected {
        border-color: #E53935;
        background: rgba(229, 57, 53, 0.12);
    }

    .subscribe-member-card strong {
        display: block;
        margin-bottom: 4px;
    }

    .subscribe-member-card span {
        color: #B0B0B0;
        font-size: 13px;
    }

    .subscribe-member-card small {
        color: #B0B0B0;
    }

.subscribe-plan-card {
    background: #0D0D0D;
    border: 1px solid #242424;
    border-radius: 14px;
    padding: 24px;
}

.subscribe-plan-top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 24px;
}

.subscribe-plan-name {
    display: flex;
    gap: 14px;
    align-items: center;
}

.subscribe-plan-icon {
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(229, 57, 53, 0.16);
    color: #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.subscribe-plan-name h3 {
    color: #F5F5F5;
    margin: 0 0 8px 0;
}

.subscribe-plan-name span {
    background: rgba(0, 200, 83, 0.15);
    color: #00C853;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.subscribe-plan-price {
    text-align: right;
}

    .subscribe-plan-price strong {
        display: block;
        color: #E53935;
        font-size: 28px;
    }

    .subscribe-plan-price span {
        color: #B0B0B0;
    }

.subscribe-plan-info {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
}

    .subscribe-plan-info h4 {
        color: #B0B0B0;
        text-transform: uppercase;
        font-size: 12px;
        letter-spacing: 1px;
        margin-bottom: 12px;
    }

    .subscribe-plan-info p {
        color: #F5F5F5;
        margin-bottom: 10px;
        font-size: 14px;
    }

.subscribe-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 22px;
}

.subscribe-field label {
    display: block;
    color: #F5F5F5;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}

.subscribe-field input {
    width: 100%;
    background: #0D0D0D;
    border: 1px solid #242424;
    color: #F5F5F5;
    border-radius: 8px;
    padding: 13px 14px;
    outline: none;
}

    .subscribe-field input:focus {
        border-color: #E53935;
    }

.subscribe-status-row {
    display: flex;
    gap: 12px;
    margin-top: 22px;
}

.subscribe-status-button {
    background: #202020;
    color: #B0B0B0;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 12px 22px;
    font-weight: 800;
    cursor: pointer;
}

    .subscribe-status-button.active {
        background: rgba(0, 200, 83, 0.15);
        color: #00C853;
        border-color: rgba(0, 200, 83, 0.35);
    }

.subscribe-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.subscribe-save-button {
    background: #E53935;
    color: white;
    border: none;
    padding: 13px 22px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}

    .subscribe-save-button:hover {
        background: #FF5252;
    }

.subscribe-cancel-button {
    background: #202020;
    color: #F5F5F5;
    border: 1px solid #2A2A2A;
    padding: 13px 22px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

.subscribe-return-link {
    color: #B0B0B0;
    text-decoration: none;
    font-weight: 700;
}

    .subscribe-return-link:hover {
        color: #FF5252;
    }

.subscribe-summary {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
    position: sticky;
    top: 30px;
}

    .subscribe-summary h2 {
        color: #F5F5F5;
        font-size: 18px;
        margin-bottom: 20px;
    }

.subscribe-summary-row {
    border-bottom: 1px solid #242424;
    padding: 16px 0;
}

    .subscribe-summary-row span {
        color: #B0B0B0;
        display: block;
        margin-bottom: 8px;
        text-transform: uppercase;
        font-size: 12px;
        font-weight: 800;
    }

    .subscribe-summary-row strong {
        color: #F5F5F5;
        display: block;
    }

    .subscribe-summary-row .muted {
        color: #B0B0B0;
        font-style: italic;
    }

    .subscribe-summary-row .price {
        color: #E53935;
        font-size: 22px;
    }

.summary-active {
    color: #00C853 !important;
}

.summary-inactive {
    color: #FF5252 !important;
}

.subscribe-message {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 22px;
    font-weight: 700;
}

    .subscribe-message.error {
        background: rgba(229, 57, 53, 0.15);
        border: 1px solid rgba(229, 57, 53, 0.45);
        color: #FF5252;
    }

    .subscribe-message.success {
        background: rgba(0, 200, 83, 0.15);
        border: 1px solid rgba(0, 200, 83, 0.45);
        color: #00C853;
    }

/* ============================================================
   GESTIÓN DE RESERVAS  (GestionReservas.razor)
   ============================================================ */

.gr-page {
    max-width: 1400px;
    margin: 0 auto;
}

/* ── Header ── */
.gr-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

    .gr-header h1 {
        font-size: 30px;
        font-weight: 800;
        color: #F5F5F5;
        margin: 0 0 6px;
    }

.gr-subtitle {
    color: #B0B0B0;
    font-size: 14px;
    margin: 0;
}

.gr-btn-nueva {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border-radius: 12px;
    background: #E53935;
    color: white;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.2s;
    white-space: nowrap;
    flex-shrink: 0;
}

    .gr-btn-nueva:hover {
        background: #FF5252;
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(229, 57, 53, 0.3);
        color: white;
    }

/* ── Toolbar (search + filter tabs) ── */
.gr-toolbar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.gr-search-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 0 16px;
    flex: 1;
    min-width: 240px;
    transition: border-color 0.2s;
}

    .gr-search-wrapper:focus-within {
        border-color: #444;
    }

.gr-search-icon {
    font-size: 15px;
    opacity: 0.5;
    flex-shrink: 0;
}

.gr-search-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #F5F5F5;
    font-size: 14px;
    padding: 13px 0;
}

    .gr-search-input::placeholder {
        color: #555;
    }

.gr-filter-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.gr-tab {
    padding: 9px 18px;
    border-radius: 10px;
    border: 1px solid #2A2A2A;
    background: #161616;
    color: #B0B0B0;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    white-space: nowrap;
}

    .gr-tab:hover {
        background: #232323;
        color: #F5F5F5;
    }

.gr-tab-active {
    background: #E53935 !important;
    color: white !important;
    border-color: #E53935 !important;
}

/* ── Table Card ── */
.gr-table-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    overflow: hidden;
}

.gr-table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.gr-table {
    width: 100%;
    border-collapse: collapse;
    min-width: 900px;
}

    .gr-table thead th {
        font-size: 10px;
        color: #666;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        padding: 14px 16px;
        text-align: left;
        border-bottom: 1px solid #2A2A2A;
        white-space: nowrap;
    }

    .gr-table tbody tr {
        border-bottom: 1px solid #1E1E1E;
        transition: background 0.15s;
    }

        .gr-table tbody tr:last-child {
            border-bottom: none;
        }

        .gr-table tbody tr:hover {
            background: #1A1A1A;
        }

    .gr-table tbody td {
        padding: 14px 16px;
        font-size: 13px;
        color: #B0B0B0;
        vertical-align: middle;
    }

/* ── Cell variants ── */
.gr-socio-cell strong,
.gr-clase-cell strong {
    display: block;
    color: #F5F5F5;
    font-weight: 600;
    font-size: 13px;
}

.gr-socio-dni,
.gr-clase-tipo {
    display: block;
    color: #666;
    font-size: 11px;
    margin-top: 2px;
}

.gr-td-entrenador {
    color: #B0B0B0 !important;
    font-weight: 500;
    white-space: nowrap;
}

.gr-td-fecha,
.gr-td-horario {
    color: #B0B0B0 !important;
    white-space: nowrap;
}

/* ── Cupos bar ── */
.gr-cupos-cell {
    min-width: 100px;
}

.gr-cupos-text {
    display: block;
    font-size: 12px;
    color: #F5F5F5;
    font-weight: 600;
    margin-bottom: 5px;
}

.gr-cupos-bar-track {
    width: 100%;
    height: 6px;
    background: #2A2A2A;
    border-radius: 999px;
    overflow: hidden;
}

.gr-cupos-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.gr-bar-green {
    background: #66BB6A;
}

.gr-bar-yellow {
    background: #FFD54F;
}

.gr-bar-red {
    background: #E53935;
}

/* ── Estado badges ── */
.gr-estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 16px;
    white-space: nowrap;
}

.gr-estado-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.gr-estado-confirmada {
    color: #66BB6A;
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.25);
}

    .gr-estado-confirmada .gr-estado-dot {
        background: #66BB6A;
    }

.gr-estado-pendiente {
    color: #FFD54F;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.25);
}

    .gr-estado-pendiente .gr-estado-dot {
        background: #FFD54F;
    }

.gr-estado-asistió,
.gr-estado-asistio {
    color: #42A5F5;
    background: rgba(66, 165, 245, 0.12);
    border: 1px solid rgba(66, 165, 245, 0.25);
}

    .gr-estado-asistió .gr-estado-dot,
    .gr-estado-asistio .gr-estado-dot {
        background: #42A5F5;
    }

.gr-estado-cancelada {
    color: #EF5350;
    background: rgba(229, 57, 53, 0.12);
    border: 1px solid rgba(229, 57, 53, 0.25);
}

    .gr-estado-cancelada .gr-estado-dot {
        background: #EF5350;
    }

/* ── Action buttons ── */
.gr-acciones {
    display: flex;
    align-items: center;
    gap: 6px;
}

.gr-accion-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid #2A2A2A;
    background: transparent;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
}

    .gr-accion-btn:hover {
        background: #232323;
        border-color: #444;
        color: #F5F5F5;
    }

/* ── Empty row ── */
.gr-empty-row {
    padding: 0 !important;
}

.gr-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px;
    color: #555;
    font-size: 28px;
}

    .gr-empty p {
        font-size: 14px;
        color: #555;
        margin: 0;
    }

/* ============================================================
   NUEVA RESERVA  (NuevaReserva.razor)
   ============================================================ */

.nr-page {
    max-width: 1100px;
    margin: 0 auto;
}

/* ── Page Header ── */
.nr-header {
    margin-bottom: 28px;
}

    .nr-header h1 {
        font-size: 28px;
        font-weight: 800;
        color: #F5F5F5;
        margin: 0 0 6px;
    }

.nr-subtitle {
    color: #B0B0B0;
    font-size: 14px;
    margin: 0;
}

/* ── Two-column layout ── */
.nr-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
}

.nr-form-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── Section cards ── */
.nr-section-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
}

.nr-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #F5F5F5;
    margin-bottom: 20px;
}

.nr-section-icon {
    font-size: 18px;
    opacity: 0.85;
}

.nr-icon-red {
    color: #E53935;
}

/* ── Field ── */
.nr-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.nr-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #B0B0B0;
    text-transform: uppercase;
}

.nr-required {
    color: #E53935;
}

.nr-select {
    background: #1C1C1C;
    border: 1px solid #333;
    border-radius: 10px;
    color: #F5F5F5;
    font-size: 14px;
    padding: 13px 14px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    width: 100%;
    appearance: auto;
}

    .nr-select:focus {
        border-color: #E53935;
    }

    .nr-select option {
        background: #1C1C1C;
        color: #F5F5F5;
    }

/* ── Radio group ── */
.nr-radio-group {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.nr-radio-option {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 20px;
    border-radius: 10px;
    border: 1px solid #2A2A2A;
    background: #1C1C1C;
    color: #B0B0B0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .nr-radio-option input[type="radio"] {
        display: none;
    }

    .nr-radio-option:hover {
        border-color: #444;
        color: #F5F5F5;
    }

.nr-radio-active {
    border-color: rgba(229, 57, 53, 0.5) !important;
    background: rgba(229, 57, 53, 0.10) !important;
    color: #F5F5F5 !important;
}

.nr-radio-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.nr-dot-red {
    background: #E53935;
}

.nr-dot-gray {
    background: #888;
}

.nr-dot-outline {
    border: 2px solid #555;
    background: transparent;
}

/* ── Action buttons ── */
.nr-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 40px;
}

.nr-btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 14px 26px;
    border: none;
    border-radius: 12px;
    background: #E53935;
    color: white;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

    .nr-btn-primary:hover {
        background: #FF5252;
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(229, 57, 53, 0.3);
    }

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

.nr-btn-secondary {
    padding: 13px 20px;
    border-radius: 12px;
    border: 1px solid #2A2A2A;
    background: transparent;
    color: #B0B0B0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .nr-btn-secondary:hover {
        background: #1C1C1C;
        color: #F5F5F5;
        border-color: #444;
    }

.nr-btn-back {
    margin-left: auto;
    color: #555;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.2s;
}

    .nr-btn-back:hover {
        color: #E53935;
    }

/* ── Preview card ── */
.nr-preview-col {
    position: sticky;
    top: 24px;
}

.nr-preview-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
}

.nr-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 36px 20px;
    text-align: center;
}

.nr-preview-empty-icon {
    font-size: 40px;
    opacity: 0.3;
}

.nr-preview-empty p {
    color: #555;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

.nr-preview-content {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.nr-preview-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 11px 0;
    border-bottom: 1px solid #1E1E1E;
    font-size: 13px;
}

    .nr-preview-row:last-child {
        border-bottom: none;
    }

.nr-preview-label {
    color: #555;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    flex-shrink: 0;
}

.nr-preview-row strong {
    color: #F5F5F5;
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    word-break: break-word;
}

.nr-cupos-ok {
    color: #66BB6A !important;
}

.nr-cupos-low {
    color: #FFD54F !important;
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .nr-layout {
        grid-template-columns: 1fr;
    }

    .nr-preview-col {
        position: static;
    }
}

@media (max-width: 768px) {
    .gr-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .gr-filter-tabs {
        overflow-x: auto;
        flex-wrap: nowrap;
        padding-bottom: 4px;
    }

    .gr-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .nr-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .nr-btn-primary,
    .nr-btn-secondary {
        text-align: center;
        justify-content: center;
    }

    .nr-btn-back {
        margin-left: 0;
        text-align: center;
    }

    .nr-radio-group {
        flex-direction: column;
    }
}

/* ============================================================
   RESERVAS - Estilos adicionales para app.css
   Solo clases nuevas; el resto reutiliza las del sistema:
   admin-list-page, admin-list-header, admin-table-card,
   admin-table, admin-search, admin-filter-group,
   filter-button, trainer-cell, trainer-avatar, action-button,
   sf-section-card, sf-form-group, sf-label, sf-select,
   sf-estado-row, sf-estado-btn, sf-resumen-card, sf-resumen-rows,
   sf-resumen-row, sf-form-actions, sf-btn-primary, sf-btn-secondary,
   sf-back-link, socios-toast, breadcrumb-nav, etc.
   ============================================================ */

/* ── Cupos bar en tabla ── */
.reserva-cupos-cell {
    min-width: 110px;
}

.reserva-cupos-text {
    display: block;
    font-size: 12px;
    color: #F5F5F5;
    font-weight: 600;
    margin-bottom: 5px;
}

.reserva-bar-track {
    width: 100%;
    height: 6px;
    background: #2A2A2A;
    border-radius: 999px;
    overflow: hidden;
}

.reserva-bar-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.4s ease;
}

.reserva-bar-green {
    background: #66BB6A;
}

.reserva-bar-yellow {
    background: #FFD54F;
}

.reserva-bar-red {
    background: #E53935;
}

/* ── Estado badges ── */
.reserva-estado-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 16px;
    white-space: nowrap;
}

.reserva-estado-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

/* Confirmada / Confirmadas */
.reserva-estado-confirmadas,
.reserva-estado-confirmada {
    color: #66BB6A;
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.25);
}

    .reserva-estado-confirmadas .reserva-estado-dot,
    .reserva-estado-confirmada .reserva-estado-dot {
        background: #66BB6A;
    }

/* Pendiente / Pendientes */
.reserva-estado-pendientes,
.reserva-estado-pendiente {
    color: #FFD54F;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.25);
}

    .reserva-estado-pendientes .reserva-estado-dot,
    .reserva-estado-pendiente .reserva-estado-dot {
        background: #FFD54F;
    }

/* Asistió */
.reserva-estado-asistio {
    color: #42A5F5;
    background: rgba(66, 165, 245, 0.12);
    border: 1px solid rgba(66, 165, 245, 0.25);
}

    .reserva-estado-asistio .reserva-estado-dot {
        background: #42A5F5;
    }

/* Cancelada / Canceladas */
.reserva-estado-canceladas,
.reserva-estado-cancelada {
    color: #EF5350;
    background: rgba(229, 57, 53, 0.12);
    border: 1px solid rgba(229, 57, 53, 0.25);
}

    .reserva-estado-canceladas .reserva-estado-dot,
    .reserva-estado-cancelada .reserva-estado-dot {
        background: #EF5350;
    }

/* ── Nueva Reserva: layout dos columnas ── */
.nr-layout {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 24px;
    align-items: start;
}

.nr-form-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* ── sf-section-card / sf-section-head
   (reutiliza sf-resumen-card para la preview,
    añadimos sf-section-card y sf-section-head si no existen) ── */
.sf-section-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
}

.sf-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    color: #F5F5F5;
    margin-bottom: 20px;
}

.sf-section-icon {
    font-size: 18px;
}

.sf-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sf-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;
    color: #B0B0B0;
    text-transform: uppercase;
}

.sf-select {
    background: #1C1C1C;
    border: 1px solid #333;
    border-radius: 10px;
    color: #F5F5F5;
    font-size: 14px;
    padding: 13px 14px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    width: 100%;
}

    .sf-select:focus {
        border-color: #E53935;
    }

    .sf-select option {
        background: #1C1C1C;
        color: #F5F5F5;
    }

/* ── Estado pendiente seleccionado ── */
.sf-estado-pendiente-sel {
    border-color: rgba(255, 193, 7, 0.5) !important;
    background: rgba(255, 193, 7, 0.10) !important;
    color: #FFD54F !important;
}

.dot-yellow {
    background: #FFD54F;
}

/* ── Preview empty state ── */
.nr-preview-col {
    position: sticky;
    top: 24px;
}

.nr-preview-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 36px 16px;
    text-align: center;
}

.nr-preview-empty-icon {
    font-size: 38px;
    opacity: 0.25;
}

.nr-preview-empty p {
    color: #555;
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
}

/* ── Responsive ── */
@media (max-width: 960px) {
    .nr-layout {
        grid-template-columns: 1fr;
    }

    .nr-preview-col {
        position: static;
    }
}

.reports-page {
    max-width: 1250px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.reports-header {
    margin-bottom: 24px;
}

    .reports-header h1 {
        color: #F5F5F5;
        font-size: 32px;
        margin-bottom: 6px;
    }

    .reports-header p {
        color: #B0B0B0;
        margin: 0;
    }

.reports-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 26px;
}

.report-tab {
    background: #202020;
    color: #B0B0B0;
    border: 1px solid #2A2A2A;
    padding: 13px 22px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
}

    .report-tab:hover {
        color: #F5F5F5;
        border-color: #FF5252;
    }

    .report-tab.active {
        background: #E53935;
        color: white;
        border-color: #E53935;
    }

.reports-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.report-stat-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 22px;
}

.report-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    margin-bottom: 18px;
}

    .report-stat-icon.green {
        background: rgba(0, 200, 83, 0.15);
        color: #00C853;
    }

    .report-stat-icon.red {
        background: rgba(229, 57, 53, 0.15);
        color: #FF5252;
    }

    .report-stat-icon.yellow {
        background: rgba(255, 193, 7, 0.15);
        color: #FFC107;
    }

    .report-stat-icon.blue {
        background: rgba(3, 169, 244, 0.15);
        color: #03A9F4;
    }

.report-stat-card span {
    display: block;
    color: #B0B0B0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
}

.report-stat-card strong {
    display: block;
    color: #F5F5F5;
    font-size: 30px;
    margin-bottom: 4px;
}

.report-stat-card p {
    color: #B0B0B0;
    margin: 0;
    font-size: 13px;
}

.reports-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.report-panel {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
}

    .report-panel h2 {
        color: #F5F5F5;
        font-size: 20px;
        margin-bottom: 24px;
    }

.membership-bar-row {
    margin-bottom: 24px;
}

.membership-bar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .membership-bar-header span,
    .membership-bar-header strong {
        color: #F5F5F5;
        font-weight: 700;
    }

.membership-bar-track {
    width: 100%;
    height: 12px;
    background: #202020;
    border-radius: 999px;
    overflow: hidden;
}

.membership-bar-fill {
    height: 100%;
    width: 50%;
    border-radius: 999px;
}

    .membership-bar-fill.basic {
        background: #B0B0B0;
    }

    .membership-bar-fill.black {
        background: #E53935;
    }

    .membership-bar-fill.wide {
        width: 75%;
    }

.report-legend {
    display: flex;
    gap: 18px;
    margin-top: 16px;
}

    .report-legend span {
        color: #B0B0B0;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .report-legend i {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: block;
    }

.legend-basic {
    background: #B0B0B0;
}

.legend-black {
    background: #E53935;
}

.report-member-list {
    display: flex;
    flex-direction: column;
}

.report-member-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #242424;
}

.member-avatar-small {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #202020;
    color: #B0B0B0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

.member-info-report {
    flex: 1;
}

    .member-info-report strong {
        display: block;
        color: #F5F5F5;
        margin-bottom: 3px;
    }

    .member-info-report span {
        color: #B0B0B0;
        font-size: 13px;
    }

.report-status {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

    .report-status.active {
        background: rgba(0, 200, 83, 0.15);
        color: #00C853;
    }

    .report-status.inactive {
        background: rgba(229, 57, 53, 0.15);
        color: #FF5252;
    }

.report-money {
    color: #E53935;
    font-weight: 900;
}



/* ===== GESTION DE SALONES ===== */

.salones-page {
    max-width: 1080px;
    margin: 0 auto;
    padding-top: 32px;
}

.salones-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: 22px;
}

    .salones-header h1 {
        color: #F5F5F5;
        font-size: 24px;
        font-weight: 800;
        margin: 0 0 6px;
        letter-spacing: -0.4px;
    }

    .salones-header p {
        color: #B0B0B0;
        font-size: 14px;
        margin: 0;
    }

.salones-new-btn {
    border: none;
    background: #E53935;
    color: white;
    padding: 12px 18px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    transition: 0.2s;
    white-space: nowrap;
}

    .salones-new-btn span {
        font-size: 18px;
        line-height: 1;
        font-weight: 900;
    }

    .salones-new-btn:hover {
        background: #FF5252;
        transform: translateY(-1px);
        box-shadow: 0 8px 18px rgba(229, 57, 53, 0.22);
    }

.salones-toolbar {
    margin-bottom: 22px;
}

.salones-search {
    width: 360px;
    max-width: 100%;
    height: 38px;
    background: #1A1A1A;
    border: 1px solid #2A2A2A;
    border-radius: 7px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 0 14px;
    color: #777;
    transition: 0.2s;
}

    .salones-search:focus-within {
        border-color: #3A3A3A;
        background: #1D1D1D;
    }

    .salones-search span {
        font-size: 18px;
        line-height: 1;
        color: #888;
    }

    .salones-search input {
        width: 100%;
        background: transparent;
        border: none;
        outline: none;
        color: #F5F5F5;
        font-size: 14px;
    }

        .salones-search input::placeholder {
            color: #8A8A8A;
        }

.salones-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}

.salon-card {
    min-height: 166px;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 9px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: 0.2s;
}

    .salon-card:hover {
        background: #1A1A1A;
        border-color: #3A3A3A;
        transform: translateY(-1px);
    }

.salon-card-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 14px;
}

.salon-icon {
    width: 40px;
    height: 40px;
    border-radius: 7px;
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #DCDCDC;
    font-size: 17px;
}

.salon-status {
    background: rgba(0, 180, 100, 0.14);
    color: #36D287;
    padding: 5px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 800;
}

.salon-info h3 {
    color: #F5F5F5;
    font-size: 16px;
    font-weight: 800;
    margin: 0 0 7px;
}

.salon-info p {
    color: #D0D0D0;
    font-size: 13px;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

    .salon-info p strong {
        color: #F5F5F5;
        font-weight: 900;
        margin-left: 4px;
    }

.salon-info-icon {
    color: #DCDCDC;
    font-size: 13px;
}

.salon-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 14px;
}

.salon-btn {
    height: 30px;
    border-radius: 6px;
    border: 1px solid #2A2A2A;
    font-size: 12px;
    font-weight: 800;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: 0.2s;
}

.salon-btn-view {
    background: #1A1A1A;
    color: #F5F5F5;
}

    .salon-btn-view:hover {
        background: #232323;
        border-color: #444;
    }

.salon-btn-edit {
    background: #E53935;
    border-color: #E53935;
    color: white;
}

    .salon-btn-edit:hover {
        background: #FF5252;
        border-color: #FF5252;
    }

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

@media (max-width: 1200px) {
    .salones-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 768px) {
    .salones-page {
        padding-top: 18px;
    }

    .salones-header {
        flex-direction: column;
        align-items: stretch;
    }

    .salones-new-btn {
        justify-content: center;
        width: 100%;
    }

    .salones-search {
        width: 100%;
    }

    .salones-grid {
        grid-template-columns: 1fr;
    }
}


/* ===== MODAL DETALLE SALON ===== */

.salon-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.76);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    padding: 24px;
}

.salon-modal {
    width: 420px;
    max-width: 100%;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 24px;
    color: #F5F5F5;
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.65);
}

.salon-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 22px;
}

    .salon-modal-header h2 {
        margin: 0;
        font-size: 18px;
        font-weight: 800;
        color: #F5F5F5;
    }

.salon-modal-close {
    background: transparent;
    border: none;
    color: #F5F5F5;
    font-size: 22px;
    cursor: pointer;
    line-height: 1;
    opacity: 0.85;
}

    .salon-modal-close:hover {
        opacity: 1;
        color: #FF5252;
    }

.salon-modal-main {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 20px;
}

.salon-modal-icon {
    width: 54px;
    height: 54px;
    border-radius: 7px;
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F5F5F5;
    font-size: 22px;
    flex-shrink: 0;
}

.salon-modal-main h3 {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 800;
    color: #F5F5F5;
}

.salon-modal-main p {
    margin: 0;
    color: #B0B0B0;
    font-size: 13px;
}

.salon-modal-info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
    margin-bottom: 22px;
}

.salon-modal-info {
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    border-radius: 7px;
    padding: 11px 14px;
}

    .salon-modal-info span {
        display: block;
        color: #B0B0B0;
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1.2px;
        margin-bottom: 6px;
    }

    .salon-modal-info strong {
        display: block;
        color: #F5F5F5;
        font-size: 13px;
        font-weight: 800;
    }

.salon-estado-activo {
    color: #36D287 !important;
}

.salon-estado-inactivo {
    color: #EF5350 !important;
}

.salon-modal-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.salon-modal-edit,
.salon-modal-cancel {
    height: 36px;
    border-radius: 7px;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
}

.salon-modal-edit {
    background: #E53935;
    border: 1px solid #E53935;
    color: white;
}

    .salon-modal-edit:hover {
        background: #FF5252;
        border-color: #FF5252;
    }

.salon-modal-cancel {
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    color: #F5F5F5;
}

    .salon-modal-cancel:hover {
        background: #232323;
        border-color: #444;
    }

@media (max-width: 520px) {
    .salon-modal {
        padding: 20px;
    }

    .salon-modal-info-grid,
    .salon-modal-actions {
        grid-template-columns: 1fr;
    }
}

.salones-new-btn {
    text-decoration: none;
}

/* ===== ADMIN NUEVO SALON ===== */

.salon-form-page {
    max-width: 1440px;
    margin: 0 auto;
    padding-top: 28px;
    padding-bottom: 40px;
}

.salon-form-breadcrumb {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #B0B0B0;
    font-size: 14px;
    margin-bottom: 24px;
}

    .salon-form-breadcrumb a {
        color: #B0B0B0;
        text-decoration: none;
        transition: 0.2s;
    }

        .salon-form-breadcrumb a:hover {
            color: #F5F5F5;
        }

    .salon-form-breadcrumb span {
        color: #555;
    }

    .salon-form-breadcrumb strong {
        color: #E53935;
        font-weight: 700;
    }

.salon-form-header {
    margin-bottom: 32px;
}

    .salon-form-header h1 {
        color: #F5F5F5;
        font-size: 30px;
        font-weight: 900;
        margin: 0 0 8px;
    }

    .salon-form-header p {
        color: #C8C8C8;
        font-size: 15px;
        margin: 0;
    }

        .salon-form-header p span {
            color: #E53935;
            font-weight: 900;
        }

.salon-form-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(380px, 0.85fr);
    gap: 24px;
    align-items: stretch;
}

.salon-form-card,
.salon-preview-panel {
    background: rgba(22, 22, 22, 0.9);
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 28px;
}

.salon-card-title {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 34px;
}

.salon-card-title-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(229, 57, 53, 0.16);
    color: #E53935;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.salon-card-title h2 {
    color: #F5F5F5;
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 8px;
}

.salon-card-title p {
    color: #B0B0B0;
    font-size: 14px;
    margin: 0;
}

.salon-form-group {
    margin-bottom: 30px;
}

    .salon-form-group label {
        display: block;
        color: #F5F5F5;
        font-size: 15px;
        font-weight: 800;
        margin-bottom: 10px;
    }

        .salon-form-group label span {
            color: #E53935;
        }

    .salon-form-group small {
        display: block;
        color: #B0B0B0;
        font-size: 13px;
        margin-top: 10px;
    }

.salon-status-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

.salon-status-option {
    min-height: 92px;
    background: #151515;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    cursor: pointer;
    transition: 0.2s;
}

    .salon-status-option:hover {
        border-color: #444;
    }

    .salon-status-option.active {
        border-color: #E53935;
        background: rgba(229, 57, 53, 0.04);
    }

    .salon-status-option input {
        width: 20px;
        height: 20px;
        margin-top: 3px;
        accent-color: #E53935;
        cursor: pointer;
    }

    .salon-status-option strong {
        display: block;
        color: #F5F5F5;
        font-size: 15px;
        font-weight: 800;
        margin-bottom: 8px;
    }

    .salon-status-option p {
        color: #B0B0B0;
        font-size: 14px;
        margin: 0;
    }

.salon-required-text {
    color: #C8C8C8;
    font-size: 14px;
    margin: 44px 0 0;
}

.salon-preview-panel {
    min-height: 100%;
}

.preview-icon {
    border-radius: 50%;
}

.salon-preview-card {
    margin-top: 18px;
    background: #151515;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 28px;
    min-height: 230px;
}

.salon-preview-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 28px;
}

.salon-preview-icon {
    width: 78px;
    height: 78px;
    border-radius: 10px;
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    color: #F5F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
}

.salon-preview-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 9px 18px;
    border-radius: 999px;
    font-size: 15px;
    font-weight: 800;
}

    .salon-preview-status.activo {
        color: #36D287;
        background: rgba(0, 180, 100, 0.14);
    }

    .salon-preview-status.inactivo {
        color: #EF5350;
        background: rgba(229, 57, 53, 0.14);
    }

.salon-preview-card h3 {
    color: #F5F5F5;
    font-size: 25px;
    font-weight: 900;
    margin: 0 0 18px;
}

.salon-preview-card p {
    color: #CFCFCF;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    margin: 0;
}

    .salon-preview-card p strong {
        color: #F5F5F5;
        font-weight: 900;
    }

.salon-form-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 28px;
    padding-top: 30px;
    border-top: 1px solid #242424;
}

.salon-back-btn,
.salon-cancel-btn,
.salon-save-btn {
    height: 50px;
    border-radius: 8px;
    padding: 0 24px;
    font-size: 15px;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: 0.2s;
}

.salon-back-btn {
    background: #1C1C1C;
    border: 1px solid #2A2A2A;
    color: #F5F5F5;
}

    .salon-back-btn:hover {
        background: #232323;
        color: #F5F5F5;
    }

.salon-action-right {
    display: flex;
    align-items: center;
    gap: 18px;
}

.salon-cancel-btn {
    background: #151515;
    border: 1px solid #2A2A2A;
    color: #F5F5F5;
}

    .salon-cancel-btn:hover {
        background: #232323;
        border-color: #444;
    }

.salon-save-btn {
    background: #E53935;
    border: 1px solid #E53935;
    color: white;
}

    .salon-save-btn:hover {
        background: #FF5252;
        border-color: #FF5252;
    }

@media (max-width: 1100px) {
    .salon-form-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .salon-form-page {
        padding-top: 18px;
    }

    .salon-form-header h1 {
        font-size: 24px;
    }

    .salon-form-card,
    .salon-preview-panel {
        padding: 20px;
    }

    .salon-status-options {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .salon-form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .salon-action-right {
        flex-direction: column;
        align-items: stretch;
    }

    .salon-back-btn,
    .salon-cancel-btn,
    .salon-save-btn {
        width: 100%;
    }
}

.salon-btn {
    text-decoration: none;
}

.reports-page {
    max-width: 1250px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.reports-header {
    margin-bottom: 24px;
}

    .reports-header h1 {
        color: #F5F5F5;
        font-size: 32px;
        margin-bottom: 6px;
    }

    .reports-header p {
        color: #B0B0B0;
        margin: 0;
    }

.reports-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 26px;
}

.report-tab {
    background: #202020;
    color: #B0B0B0;
    border: 1px solid #2A2A2A;
    padding: 13px 22px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
}

    .report-tab:hover {
        color: #F5F5F5;
        border-color: #FF5252;
    }

    .report-tab.active {
        background: #E53935;
        color: white;
        border-color: #E53935;
    }

.reports-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 24px;
}

.report-stat-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 22px;
}

.report-stat-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    margin-bottom: 18px;
}

    .report-stat-icon.green {
        background: rgba(0, 200, 83, 0.15);
        color: #00C853;
    }

    .report-stat-icon.red {
        background: rgba(229, 57, 53, 0.15);
        color: #FF5252;
    }

    .report-stat-icon.yellow {
        background: rgba(255, 193, 7, 0.15);
        color: #FFC107;
    }

    .report-stat-icon.blue {
        background: rgba(3, 169, 244, 0.15);
        color: #03A9F4;
    }

.report-stat-card span {
    display: block;
    color: #B0B0B0;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 12px;
}

.report-stat-card strong {
    display: block;
    color: #F5F5F5;
    font-size: 30px;
    margin-bottom: 4px;
}

.report-stat-card p {
    color: #B0B0B0;
    margin: 0;
    font-size: 13px;
}

.reports-content-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.report-panel {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
}

    .report-panel h2 {
        color: #F5F5F5;
        font-size: 20px;
        margin-bottom: 24px;
    }

.membership-bar-row {
    margin-bottom: 24px;
}

.membership-bar-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
}

    .membership-bar-header span,
    .membership-bar-header strong {
        color: #F5F5F5;
        font-weight: 700;
    }

.membership-bar-track {
    width: 100%;
    height: 12px;
    background: #202020;
    border-radius: 999px;
    overflow: hidden;
}

.membership-bar-fill {
    height: 100%;
    width: 50%;
    border-radius: 999px;
}

    .membership-bar-fill.basic {
        background: #B0B0B0;
    }

    .membership-bar-fill.black {
        background: #E53935;
    }

    .membership-bar-fill.wide {
        width: 75%;
    }

.report-legend {
    display: flex;
    gap: 18px;
    margin-top: 16px;
}

    .report-legend span {
        color: #B0B0B0;
        font-size: 13px;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .report-legend i {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        display: block;
    }

.legend-basic {
    background: #B0B0B0;
}

.legend-black {
    background: #E53935;
}

.report-member-list {
    display: flex;
    flex-direction: column;
}

.report-member-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid #242424;
}

.member-avatar-small {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #202020;
    color: #B0B0B0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    flex-shrink: 0;
}

.member-info-report {
    flex: 1;
}

    .member-info-report strong {
        display: block;
        color: #F5F5F5;
        margin-bottom: 3px;
    }

    .member-info-report span {
        color: #B0B0B0;
        font-size: 13px;
    }

.report-status {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

    .report-status.active {
        background: rgba(0, 200, 83, 0.15);
        color: #00C853;
    }

    .report-status.inactive {
        background: rgba(229, 57, 53, 0.15);
        color: #FF5252;
    }

.report-money {
    color: #E53935;
    font-weight: 900;
}

.revenue-filter-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.revenue-period-button {
    background: #202020;
    color: #B0B0B0;
    border: 1px solid #2A2A2A;
    padding: 12px 22px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
}

    .revenue-period-button:hover {
        color: #F5F5F5;
        border-color: #FF5252;
    }

    .revenue-period-button.active {
        background: #E53935;
        color: white;
        border-color: #E53935;
    }

.revenue-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 18px;
}

.revenue-kpi-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .revenue-kpi-card span {
        display: block;
        color: #B0B0B0;
        text-transform: uppercase;
        letter-spacing: 1px;
        font-size: 12px;
        font-weight: 800;
        margin-bottom: 8px;
    }

    .revenue-kpi-card strong {
        display: block;
        color: #F5F5F5;
        font-size: 34px;
        margin-bottom: 4px;
    }

    .revenue-kpi-card p {
        color: #B0B0B0;
        margin: 0;
        font-size: 13px;
    }

.green-money {
    color: #00C853 !important;
}

.yellow-money {
    color: #FFC107 !important;
}

.revenue-kpi-icon {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    font-size: 22px;
}

    .revenue-kpi-icon.green {
        background: rgba(0, 200, 83, 0.15);
        color: #00C853;
    }

    .revenue-kpi-icon.yellow {
        background: rgba(255, 193, 7, 0.15);
        color: #FFC107;
    }

    .revenue-kpi-icon.neutral {
        background: #202020;
        color: #B0B0B0;
    }

.revenue-chart-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
    margin-bottom: 18px;
}

    .revenue-chart-card h2 {
        color: #F5F5F5;
        font-size: 20px;
        margin-bottom: 18px;
    }

.fake-line-chart {
    position: relative;
    height: 270px;
    padding-left: 52px;
    padding-right: 20px;
}

.chart-svg {
    position: absolute;
    left: 52px;
    right: 20px;
    top: 12px;
    width: calc(100% - 72px);
    height: 220px;
    z-index: 2;
}

.chart-grid-line {
    position: absolute;
    left: 52px;
    right: 20px;
    height: 1px;
    border-top: 1px dashed #2A2A2A;
    z-index: 1;
}

.line1200 {
    top: 15px;
}

.line900 {
    top: 58px;
}

.line600 {
    top: 101px;
}

.line300 {
    top: 144px;
}

.line0 {
    top: 187px;
    border-top: 1px solid #3A3A3A;
}

.chart-y-label {
    position: absolute;
    left: 0;
    color: #B0B0B0;
    font-size: 13px;
}

.y1200 {
    top: 6px;
}

.y900 {
    top: 49px;
}

.y600 {
    top: 92px;
}

.y300 {
    top: 135px;
}

.y0 {
    top: 178px;
}

.point-label {
    position: absolute;
    color: #F5F5F5;
    font-weight: 800;
    font-size: 13px;
    z-index: 3;
}

.p1 {
    left: 128px;
    top: 72px;
}

.p2 {
    left: 312px;
    top: 55px;
}

.p3 {
    left: 500px;
    top: 40px;
}

.p4 {
    left: 695px;
    top: 50px;
}

.p5 {
    right: 45px;
    top: 0;
}

.chart-months {
    position: absolute;
    left: 52px;
    right: 20px;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    color: #B0B0B0;
    font-size: 14px;
}

.revenue-bottom-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.revenue-panel {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
}

    .revenue-panel h2 {
        color: #F5F5F5;
        font-size: 20px;
        margin-bottom: 22px;
    }

.donut-layout {
    display: grid;
    grid-template-columns: 190px 1fr;
    gap: 26px;
    align-items: center;
}

.donut-card {
    width: 170px;
    height: 170px;
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.payment-donut {
    background: conic-gradient( #E53935 0deg 225deg, #1976D2 225deg 315deg, #4CAF50 315deg 360deg );
}

.status-donut {
    background: conic-gradient( #4CAF50 0deg 315deg, #FF9800 315deg 360deg );
}

.donut-card::after {
    content: "";
    position: absolute;
    width: 86px;
    height: 86px;
    background: #161616;
    border-radius: 50%;
}

.donut-center {
    position: relative;
    z-index: 2;
    text-align: center;
}

    .donut-center strong {
        display: block;
        color: #F5F5F5;
        font-size: 32px;
    }

    .donut-center span {
        color: #B0B0B0;
        font-size: 12px;
    }

.donut-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.donut-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #242424;
    padding-bottom: 12px;
    gap: 18px;
}

    .donut-row span {
        color: #F5F5F5;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .donut-row strong {
        color: #F5F5F5;
    }

.dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

    .dot.red {
        background: #E53935;
    }

    .dot.blue {
        background: #1976D2;
    }

    .dot.green {
        background: #4CAF50;
    }

    .dot.orange {
        background: #FF9800;
    }

.donut-total {
    color: #B0B0B0;
    text-align: right;
    margin: 0;
}

.pending-box {
    margin-top: 6px;
    background: #202020;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 16px;
    display: flex;
    justify-content: space-between;
}

    .pending-box span {
        color: #B0B0B0;
    }

    .pending-box strong {
        color: #FFC107;
    }
/* ===== REPORTES RECAUDACION DINAMICO ===== */

.chart-value-label {
    fill: #F5F5F5;
    font-size: 15px;
    font-weight: 800;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.chart-svg {
    overflow: visible;
}

.payment-donut,
.status-donut {
    transition: background 0.25s ease;
}

.revenue-period-button.active {
    background: #E53935;
    color: white;
    border-color: #E53935;
}

.revenue-kpi-card strong {
    transition: color 0.2s ease;
}

.fake-line-chart {
    overflow: visible;
}

.chart-months span {
    min-width: 28px;
    text-align: center;
}
/* ===== SOCIO PAGOS ===== */

.socio-payments-page {
    max-width: 1280px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.socio-payments-header {
    margin-bottom: 28px;
}

    .socio-payments-header h1 {
        color: #F5F5F5;
        font-size: 32px;
        margin-bottom: 8px;
    }

    .socio-payments-header p {
        color: #B0B0B0;
        margin: 0;
        font-size: 16px;
    }

.socio-payments-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
    margin-bottom: 28px;
}

.socio-payment-stat-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px;
    display: flex;
    gap: 18px;
    align-items: flex-start;
}

.socio-payment-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    flex-shrink: 0;
}

    .socio-payment-icon.success {
        background: rgba(0, 200, 83, 0.15);
        color: #00C853;
    }

    .socio-payment-icon.warning {
        background: rgba(255, 193, 7, 0.15);
        color: #FFC107;
    }

    .socio-payment-icon.danger {
        background: rgba(229, 57, 53, 0.15);
        color: #FF5252;
    }

    .socio-payment-icon.red {
        background: rgba(229, 57, 53, 0.15);
        color: #E53935;
    }

.socio-payment-stat-card span {
    display: block;
    color: #B0B0B0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 16px;
}

.socio-payment-stat-card strong {
    display: block;
    color: #F5F5F5;
    font-size: 32px;
    margin-bottom: 8px;
}

.socio-payment-stat-card p {
    color: #B0B0B0;
    margin: 0;
    font-size: 14px;
}

.socio-payments-table-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    overflow: hidden;
}

    .socio-payments-table-card h2 {
        color: #F5F5F5;
        font-size: 20px;
        padding: 24px 28px;
        margin: 0;
        border-bottom: 1px solid #2A2A2A;
    }

.socio-payments-table-wrapper {
    width: 100%;
    overflow-x: auto;
}

.socio-payments-table {
    width: 100%;
    border-collapse: collapse;
}

    .socio-payments-table th {
        color: #B0B0B0;
        text-align: left;
        text-transform: uppercase;
        letter-spacing: 1.5px;
        font-size: 12px;
        padding: 20px 28px;
        border-bottom: 1px solid #242424;
    }

    .socio-payments-table td {
        color: #F5F5F5;
        padding: 22px 28px;
        border-bottom: 1px solid #242424;
        vertical-align: middle;
    }

    .socio-payments-table tr:last-child td {
        border-bottom: none;
    }

.payment-muted {
    color: #B0B0B0;
}

.socio-payment-status {
    display: inline-block;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

    .socio-payment-status.paid {
        background: rgba(0, 200, 83, 0.15);
        color: #00C853;
    }

    .socio-payment-status.pending {
        background: rgba(255, 193, 7, 0.15);
        color: #FFC107;
    }

    .socio-payment-status.expired {
        background: rgba(229, 57, 53, 0.15);
        color: #FF5252;
    }

.socio-pay-button {
    background: transparent;
    border: 1px solid #E53935;
    color: #FF5252;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
}

    .socio-pay-button:hover {
        background: #E53935;
        color: white;
    }

.socio-payment-message {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 22px;
    font-weight: 700;
}

    .socio-payment-message.success {
        background: rgba(0, 200, 83, 0.15);
        border: 1px solid rgba(0, 200, 83, 0.45);
        color: #00C853;
    }
/* ===== SOCIO REALIZAR PAGO ===== */

.socio-pay-process-page {
    max-width: 1120px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.pay-breadcrumb {
    display: flex;
    gap: 10px;
    align-items: center;
    color: #B0B0B0;
    font-size: 14px;
    margin-bottom: 18px;
}

    .pay-breadcrumb a {
        color: #B0B0B0;
        text-decoration: none;
    }

        .pay-breadcrumb a:hover {
            color: #FF5252;
        }

    .pay-breadcrumb strong {
        color: #E53935;
    }

.pay-process-header {
    margin-bottom: 26px;
}

    .pay-process-header h1 {
        color: #F5F5F5;
        font-size: 32px;
        margin-bottom: 8px;
    }

    .pay-process-header p {
        color: #B0B0B0;
        margin: 0;
    }

.pay-process-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 24px;
    align-items: start;
}

.pay-process-main {
    min-width: 0;
}

.pay-detail-card,
.pay-method-card,
.pay-summary-card,
.pending-alert-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
}

.pay-detail-card,
.pay-method-card {
    padding: 26px;
    margin-bottom: 18px;
}

    .pay-detail-card h2,
    .pay-method-card h2,
    .pay-summary-card h2 {
        color: #F5F5F5;
        font-size: 19px;
        margin-bottom: 22px;
    }

.pay-detail-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 13px 0;
    border-bottom: 1px solid #242424;
}

    .pay-detail-row span {
        color: #B0B0B0;
    }

    .pay-detail-row strong {
        color: #F5F5F5;
        text-align: right;
    }

    .pay-detail-row.total {
        border-bottom: none;
        padding-top: 18px;
    }

        .pay-detail-row.total span {
            color: #F5F5F5;
            font-weight: 800;
        }

        .pay-detail-row.total strong {
            font-size: 28px;
        }

.pay-status {
    display: inline-block;
    padding: 7px 13px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
}

    .pay-status.pending {
        background: rgba(255, 193, 7, 0.15);
        color: #FFC107 !important;
    }

    .pay-status.expired {
        background: rgba(229, 57, 53, 0.15);
        color: #FF5252 !important;
    }

.pay-method-options {
    display: flex;
    justify-content: center;
    gap: 16px;
    margin-bottom: 20px;
}

.pay-method-option {
    width: 150px;
    height: 100px;
    background: #101010;
    border: 1px solid #2A2A2A;
    color: #F5F5F5;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    cursor: pointer;
    transition: 0.2s;
}

    .pay-method-option:hover,
    .pay-method-option.selected {
        border-color: #E53935;
        background: rgba(229, 57, 53, 0.08);
    }

.pay-card-icon {
    font-size: 30px;
    color: #B0B0B0;
}

.pay-method-option strong {
    font-size: 14px;
}

.pay-note {
    color: #B0B0B0;
    font-size: 13px;
    margin: 0;
}

.pay-process-actions {
    display: flex;
    align-items: center;
    gap: 14px;
}

.confirm-pay-button {
    background: #E53935;
    color: white;
    border: none;
    padding: 14px 28px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
}

    .confirm-pay-button:hover {
        background: #FF5252;
    }

.cancel-pay-button {
    background: #202020;
    color: #F5F5F5;
    border: 1px solid #2A2A2A;
    padding: 14px 26px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 700;
}

    .cancel-pay-button:hover {
        border-color: #FF5252;
        color: #F5F5F5;
    }

.back-pay-link {
    color: #E53935;
    text-decoration: none;
    font-weight: 800;
    padding: 14px 16px;
}

    .back-pay-link:hover {
        color: #FF5252;
    }

.pay-summary-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.pay-summary-card {
    padding: 26px;
}

.summary-pay-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 15px 0;
    border-bottom: 1px solid #242424;
}

    .summary-pay-row span {
        color: #B0B0B0;
    }

    .summary-pay-row strong {
        color: #F5F5F5;
        text-align: right;
    }

.summary-pay-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 24px;
}

    .summary-pay-total span {
        color: #F5F5F5;
        font-weight: 800;
    }

    .summary-pay-total strong {
        color: #F5F5F5;
        font-size: 34px;
    }

.pending-alert-card {
    border-color: rgba(255, 193, 7, 0.35);
    background: rgba(255, 193, 7, 0.06);
    padding: 24px;
    display: flex;
    gap: 18px;
}

.pending-alert-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 2px solid #FFC107;
    color: #FFC107;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
    flex-shrink: 0;
}

.pending-alert-card h3 {
    color: #FFC107;
    font-size: 17px;
    margin-bottom: 8px;
}

.pending-alert-card p {
    color: #F5F5F5;
    line-height: 1.55;
    margin: 0;
    font-size: 14px;
}

.pay-process-message {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 22px;
    font-weight: 700;
}

    .pay-process-message.success {
        background: rgba(0, 200, 83, 0.15);
        border: 1px solid rgba(0, 200, 83, 0.45);
        color: #00C853;
    }
.socio-pay-button {
    display: inline-block;
    background: transparent;
    border: 1px solid #E53935;
    color: #FF5252;
    padding: 10px 16px;
    border-radius: 8px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s;
    text-decoration: none;
}

    .socio-pay-button:hover {
        background: #E53935;
        color: white;
        text-decoration: none;
    }


.sesion-detalle {
    max-width: 1180px;
    margin: 0 auto;
    padding-top: 18px;
}

.alumnos-panel {
    min-height: 420px;
}

.capacidad-count {
    font-weight: 800;
}

.descripcion-card h3 {
    margin-top: 0;
}


/* ============================================================
   CLASES - Estilos adicionales para agregar al final de app.css
   
   Clases reutilizadas del sistema (NO redefinir):
   admin-list-page, admin-list-header, admin-list-toolbar,
   admin-search, new-button, admin-form-page, admin-breadcrumb,
   breadcrumb-active, admin-form-title, admin-form-subtitle,
   sesion-form-layout, sesion-form-left, sesion-form-right,
   form-card, form-card-header, form-card-body, form-card-icon,
   form-group, form-row, form-label, form-input, form-select,
   form-radio-group, form-radio-label, form-actions,
   btn-primary, btn-secondary, btn-ghost, required,
   sesion-preview-card, preview-empty, preview-empty-icon,
   sesion-preview, preview-row, preview-label, preview-value,
   socios-toast, socios-toast-show
   ============================================================ */

/* ── Toolbar: search con ícono ── */
.gc-search-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #202020;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 0 16px;
    transition: border-color 0.2s;
}

    .gc-search-wrapper:focus-within {
        border-color: #E53935;
    }

.gc-search-icon {
    font-size: 14px;
    opacity: 0.4;
    flex-shrink: 0;
}

/* ── Dropdown disciplina ── */
.gc-discipline-select-wrapper {
    position: relative;
    flex-shrink: 0;
}

.gc-discipline-select {
    background: #202020;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    color: #F5F5F5;
    font-size: 14px;
    font-weight: 600;
    padding: 13px 40px 13px 16px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s;
    appearance: none;
    min-width: 200px;
}

    .gc-discipline-select:focus {
        border-color: #E53935;
    }

    .gc-discipline-select option {
        background: #202020;
        color: #F5F5F5;
    }

.gc-select-arrow {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #666;
    pointer-events: none;
    font-size: 12px;
}

/* ── Grid de cards ── */
.gc-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

/* ── Card individual ── */
.gc-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: border-color 0.2s, transform 0.2s;
}

    .gc-card:hover {
        border-color: #3A3A3A;
        transform: translateY(-2px);
    }

/* Top: nivel + estado */
.gc-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

/* Badge de nivel */
.gc-nivel-badge {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 3px 10px;
    border-radius: 8px;
}

.gc-nivel-principiante {
    color: #42A5F5;
    background: rgba(66, 165, 245, 0.12);
    border: 1px solid rgba(66, 165, 245, 0.25);
}

.gc-nivel-intermedio {
    color: #FFD54F;
    background: rgba(255, 193, 7, 0.12);
    border: 1px solid rgba(255, 193, 7, 0.25);
}

.gc-nivel-avanzado {
    color: #EF5350;
    background: rgba(229, 57, 53, 0.12);
    border: 1px solid rgba(229, 57, 53, 0.25);
}

/* Badge activa/inactiva */
.gc-activa-badge {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 8px;
}

.gc-badge-activa {
    color: #66BB6A;
    background: rgba(76, 175, 80, 0.12);
    border: 1px solid rgba(76, 175, 80, 0.25);
}

.gc-badge-inactiva {
    color: #EF5350;
    background: rgba(229, 57, 53, 0.12);
    border: 1px solid rgba(229, 57, 53, 0.25);
}

/* Nombre */
.gc-card-nombre {
    font-size: 17px;
    font-weight: 700;
    color: #F5F5F5;
    margin: 0 0 4px;
    line-height: 1.3;
}

/* Disciplina (subtítulo) */
.gc-card-disciplina {
    font-size: 12px;
    color: #666;
    margin: 0 0 12px;
    font-weight: 500;
}

/* Descripción */
.gc-card-desc {
    font-size: 12px;
    color: #B0B0B0;
    line-height: 1.55;
    margin: 0 0 14px;
    flex: 1;
    /* Limitar a 3 líneas */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Duración */
.gc-card-duracion {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #B0B0B0;
    font-size: 12px;
    margin-bottom: 18px;
}

.gc-clock-icon {
    font-size: 13px;
    opacity: 0.6;
}

/* Botones de la card */
.gc-card-actions {
    display: flex;
    gap: 8px;
}

.gc-btn-ver {
    flex: 1;
    padding: 9px 12px;
    border-radius: 9px;
    border: 1px solid #2A2A2A;
    background: transparent;
    color: #B0B0B0;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
}

    .gc-btn-ver:hover {
        background: #232323;
        color: #F5F5F5;
        border-color: #444;
    }

.gc-btn-editar {
    flex: 1;
    padding: 9px 12px;
    border-radius: 9px;
    border: none;
    background: #E53935;
    color: white;
    font-size: 13px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: 0.2s;
}

    .gc-btn-editar:hover {
        background: #FF5252;
        color: white;
    }

/* ── Empty state ── */
.gc-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 64px 24px;
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    text-align: center;
    font-size: 40px;
    color: #444;
}

    .gc-empty p {
        font-size: 14px;
        color: #555;
        margin: 0;
    }

/* ── NuevaClase: textarea y contador ── */
.gc-textarea {
    resize: vertical;
    min-height: 110px;
    font-family: inherit;
    line-height: 1.5;
}

.gc-char-count {
    font-size: 11px;
    color: #555;
    text-align: right;
    display: block;
    margin-top: 4px;
}

/* ── Responsive ── */
@media (max-width: 1200px) {
    .gc-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

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

    .sesion-form-layout {
        grid-template-columns: 1fr;
    }

    .sesion-form-right {
        position: static;
    }
}

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

    .admin-list-toolbar {
        flex-direction: column;
    }

    .gc-discipline-select {
        min-width: auto;
        width: 100%;
    }
}


/* ============================================================
   GESTION DE PAGOS (admin) — GestionPagos.razor
   ============================================================ */

/* Topbar compartido pagos */
.gp-topbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 16px 38px;
    background: transparent;
}

/* Stats row: 3 tarjetas horizontales */
.gp-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.gp-stat-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 16px;
    padding: 24px 28px;
    transition: border-color 0.2s;
}

    .gp-stat-card:hover {
        border-color: #3A3A3A;
    }

.gp-stat-label {
    font-size: 10px;
    color: #666;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.gp-stat-value {
    font-size: 30px;
    font-weight: 900;
    color: #F5F5F5;
    line-height: 1;
}

.gp-stat-yellow {
    color: #FFD54F;
}

/* Filter selects en toolbar */
.gp-filter-select {
    background: #202020;
    color: #B0B0B0;
    border: 1px solid #2A2A2A;
    border-radius: 10px;
    padding: 12px 36px 12px 16px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: 0.2s;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    min-width: 160px;
}

    .gp-filter-select:hover {
        border-color: #444;
        color: #F5F5F5;
    }

    .gp-filter-select:focus {
        border-color: #E53935;
        color: #F5F5F5;
    }

    .gp-filter-select option {
        background: #1C1C1C;
        color: #F5F5F5;
    }

/* Responsive */
@media (max-width: 900px) {
    .gp-stats-row {
        grid-template-columns: 1fr;
    }

    .admin-list-toolbar {
        flex-direction: column;
    }

    .gp-filter-select {
        width: 100%;
    }
}


/* ============================================================
   REGISTRAR PAGO — RegistrarPago.razor
   ============================================================ */

.rp-page {
    max-width: 820px;
    margin: 0 auto;
}

.rp-header {
    margin-bottom: 28px;
}

    .rp-header h1 {
        font-size: 30px;
        font-weight: 800;
        color: #F5F5F5;
        margin: 0 0 6px;
    }

.rp-subtitle {
    color: #B0B0B0;
    font-size: 14px;
    margin: 0;
}

/* Single column layout */
.rp-layout {
    display: flex;
    flex-direction: column;
}

.rp-form-col {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Required asterisk */
.rp-req {
    color: #E53935;
    font-weight: 900;
}

/* ── Socio search ── */
.rp-socio-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.rp-socio-search-icon {
    position: absolute;
    left: 14px;
    font-size: 15px;
    opacity: 0.5;
    pointer-events: none;
}

.rp-socio-search {
    width: 100%;
    background: #1C1C1C;
    border: 1px solid #333;
    border-radius: 10px;
    color: #F5F5F5;
    font-size: 14px;
    padding: 13px 14px 13px 40px;
    outline: none;
    transition: border-color 0.2s;
}

    .rp-socio-search:focus {
        border-color: #E53935;
    }

    .rp-socio-search::placeholder {
        color: #555;
    }

/* Dropdown */
.rp-socio-dropdown {
    margin-top: 6px;
    background: #1C1C1C;
    border: 1px solid #333;
    border-radius: 10px;
    overflow: hidden;
}

.rp-socio-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: 0.15s;
    border-bottom: 1px solid #262626;
}

    .rp-socio-option:last-child {
        border-bottom: none;
    }

    .rp-socio-option:hover {
        background: #252525;
    }

    .rp-socio-option strong {
        display: block;
        font-size: 14px;
        color: #F5F5F5;
        font-weight: 600;
    }

    .rp-socio-option span {
        display: block;
        font-size: 12px;
        color: #666;
    }

/* Selected socio chip */
.rp-socio-selected {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 10px;
    padding: 12px 16px;
    background: rgba(229, 57, 53, 0.08);
    border: 1px solid rgba(229, 57, 53, 0.3);
    border-radius: 10px;
}

    .rp-socio-selected strong {
        display: block;
        font-size: 14px;
        color: #F5F5F5;
        font-weight: 600;
        flex: 1;
    }

    .rp-socio-selected span {
        display: block;
        font-size: 12px;
        color: #B0B0B0;
        flex: 1;
    }

.rp-socio-clear {
    background: none;
    border: none;
    color: #666;
    cursor: pointer;
    font-size: 16px;
    padding: 4px;
    transition: color 0.15s;
    margin-left: auto;
    flex-shrink: 0;
}

    .rp-socio-clear:hover {
        color: #E53935;
    }

/* Shared avatar (reusable in the dropdowns) */
.rp-socio-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #E53935;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 13px;
    flex-shrink: 0;
}

/* ── Radio button groups (tipo, método, estado) ── */
.rp-radio-group {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rp-radio-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 10px;
    border: 1px solid #2A2A2A;
    background: #1C1C1C;
    color: #B0B0B0;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    flex: 1;
    min-width: 130px;
    justify-content: center;
}

    .rp-radio-btn:hover {
        border-color: #444;
        color: #F5F5F5;
        background: #242424;
    }

/* Red active (default) */
.rp-radio-active {
    background: rgba(229, 57, 53, 0.15) !important;
    border-color: #E53935 !important;
    color: #F5F5F5 !important;
}

/* Green active (for estado = pagado) */
.rp-radio-green:hover {
    border-color: rgba(76, 175, 80, 0.5);
    color: #66BB6A;
}

.rp-radio-active-green {
    background: rgba(76, 175, 80, 0.15) !important;
    border-color: rgba(76, 175, 80, 0.6) !important;
    color: #66BB6A !important;
}

/* ── Monto + Fecha row ── */
.rp-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.rp-monto-wrapper {
    display: flex;
    align-items: center;
    background: #1C1C1C;
    border: 1px solid #333;
    border-radius: 10px;
    padding: 0 14px;
    transition: border-color 0.2s;
}

    .rp-monto-wrapper:focus-within {
        border-color: #E53935;
    }

.rp-monto-prefix {
    color: #666;
    font-weight: 700;
    font-size: 15px;
    margin-right: 8px;
    flex-shrink: 0;
}

.rp-monto-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: #F5F5F5;
    font-size: 15px;
    font-weight: 700;
    padding: 13px 0;
    width: 100%;
}

    .rp-monto-input::placeholder {
        color: #555;
        font-weight: 400;
    }

.rp-date-input {
    width: 100%;
    background: #1C1C1C;
    border: 1px solid #333;
    border-radius: 10px;
    color: #F5F5F5;
    font-size: 14px;
    padding: 13px 14px;
    outline: none;
    transition: border-color 0.2s;
    cursor: pointer;
}

    .rp-date-input:focus {
        border-color: #E53935;
    }

    .rp-date-input::-webkit-calendar-picker-indicator {
        filter: invert(0.5);
        cursor: pointer;
    }

.rp-text-input {
    width: 100%;
    background: #1C1C1C;
    border: 1px solid #333;
    border-radius: 10px;
    color: #F5F5F5;
    font-size: 14px;
    padding: 13px 14px;
    outline: none;
    transition: border-color 0.2s;
}

    .rp-text-input:focus {
        border-color: #E53935;
    }

    .rp-text-input::placeholder {
        color: #555;
    }

/* ── Mini info trio ── */
.rp-info-trio {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
}

.rp-info-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 20px 18px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.rp-info-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    flex-shrink: 0;
    margin-bottom: 4px;
}

.rp-icon-red {
    background: rgba(229, 57, 53, 0.15);
    border: 2px solid rgba(229, 57, 53, 0.35);
}

.rp-icon-green {
    background: rgba(76, 175, 80, 0.15);
    border: 2px solid rgba(76, 175, 80, 0.35);
}

.rp-icon-yellow {
    background: rgba(255, 193, 7, 0.15);
    border: 2px solid rgba(255, 193, 7, 0.35);
}

.rp-info-label {
    font-size: 10px;
    color: #555;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.rp-info-val {
    font-size: 18px;
    font-weight: 800;
    color: #F5F5F5;
}

/* ── Action buttons ── */
.rp-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.rp-btn-primary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 28px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #E53935 0%, #C62828 100%);
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: 0.2s;
}

    .rp-btn-primary:hover:not(:disabled) {
        background: linear-gradient(135deg, #FF5252 0%, #E53935 100%);
        transform: translateY(-1px);
        box-shadow: 0 4px 16px rgba(229, 57, 53, 0.3);
    }

    .rp-btn-primary:disabled {
        opacity: 0.45;
        cursor: not-allowed;
    }

.rp-btn-secondary {
    padding: 14px 24px;
    border-radius: 10px;
    border: 1px solid #2A2A2A;
    background: transparent;
    color: #B0B0B0;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

    .rp-btn-secondary:hover {
        background: #202020;
        color: #F5F5F5;
        border-color: #444;
    }

.rp-btn-back {
    color: #666;
    font-size: 13px;
    text-decoration: none;
    margin-left: auto;
    transition: color 0.2s;
}

    .rp-btn-back:hover {
        color: #F5F5F5;
    }

/* Toast messages */
.socios-toast {
    padding: 14px 18px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
}

.socios-toast-ok {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: #66BB6A;
}

.socios-toast-err {
    background: rgba(229, 57, 53, 0.15);
    border: 1px solid rgba(229, 57, 53, 0.4);
    color: #EF5350;
}

/* Responsive */
@media (max-width: 768px) {
    .rp-row-2 {
        grid-template-columns: 1fr;
    }

    .rp-info-trio {
        grid-template-columns: 1fr;
    }

    .rp-radio-group {
        flex-direction: column;
    }

    .rp-radio-btn {
        min-width: unset;
    }

    .rp-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .rp-btn-primary,
    .rp-btn-secondary {
        text-align: center;
        justify-content: center;
    }

    .rp-btn-back {
        margin-left: 0;
        text-align: center;
    }
}
/* Formularios de Edición y Contenedores */
.form-container {
    background: #141414;
    border: 1px solid #252525;
    padding: 28px;
    border-radius: 12px;
    max-width: 650px;
    margin: 24px auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

.form-title {
    font-size: 22px;
    font-weight: 700;
    color: #F5F5F5;
    margin-bottom: 24px;
    border-bottom: 1px solid #2A2A2A;
    padding-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

    .form-group label {
        font-size: 13px;
        font-weight: 600;
        color: #999999;
        text-transform: uppercase;
    }

/* Inputs y Selects Oscuros */
.form-control-dark {
    background: #1E1E1E;
    border: 1px solid #333333;
    color: #F5F5F5;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    transition: all 0.2s ease;
    width: 100%;
}

    .form-control-dark:focus {
        outline: none;
        border-color: #1b6ec2;
        box-shadow: 0 0 0 3px rgba(27, 110, 194, 0.25);
    }

    .form-control-dark:disabled {
        background: #161616;
        color: #666666;
        border-color: #222222;
        cursor: not-allowed;
    }

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: 14px;
    margin-top: 28px;
}

/* Botones de Activación/Edición en Listas */
.action-btn-pencil {
    background: transparent;
    border: none;
    color: #FFC107;
    font-size: 16px;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.2s;
}

    .action-btn-pencil:hover {
        background: rgba(255, 193, 7, 0.1);
    }

.action-btn-text {
    background: #1b6ec2;
    color: #FFFFFF;
    border: none;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}

    .action-btn-text:hover {
        background: #1861ac;
    }

/* Reemplazar los botones anteriores del form-actions con estos */

.btn-primary-gigachad {
    background-color: #EF4444; /* Rojo vibrante del botón Nueva Reserva */
    color: #FFFFFF;
    border: none;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

    .btn-primary-gigachad:hover {
        background-color: #DC2626; /* Rojo más oscuro al pasar el mouse */
    }

.btn-secondary-gigachad {
    background-color: transparent;
    color: #9CA3AF;
    border: 1px solid #4B5563;
    padding: 10px 24px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

    .btn-secondary-gigachad:hover {
        background-color: #374151;
        color: #FFFFFF;
    }

/* Opcional: Para que el borde de los inputs al hacer focus sea rojo y no azul */
.form-control-dark:focus {
    outline: none;
    border-color: #EF4444;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
/* ===== SOCIO RENOVAR MEMBRESIA ===== */

.renew-membership-page {
    max-width: 1250px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.renew-header {
    margin-bottom: 24px;
}

    .renew-header h1 {
        color: #F5F5F5;
        font-size: 32px;
        margin-bottom: 8px;
    }

    .renew-header p {
        color: #B0B0B0;
        margin: 0;
    }

.renew-current-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 18px 22px;
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr 1fr;
    gap: 22px;
    align-items: center;
    margin-bottom: 24px;
}

.renew-current-plan {
    display: flex;
    align-items: center;
    gap: 16px;
}

.renew-current-icon {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    background: #E53935;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.renew-current-plan span,
.renew-current-info span {
    display: block;
    color: #B0B0B0;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 6px;
}

.renew-current-plan strong,
.renew-current-info strong {
    color: #F5F5F5;
    font-size: 16px;
}

.renew-active-dot {
    color: #00C853 !important;
}

    .renew-active-dot::before {
        content: "• ";
    }

.renew-step-title {
    color: #F5F5F5;
    font-size: 18px;
    margin: 22px 0 16px 0;
}

.renew-plan-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 20px;
    margin-bottom: 24px;
}

.renew-plans-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}

.renew-plan-card {
    position: relative;
    background: #161616;
    border: 1px solid #2A2A2A;
    color: #F5F5F5;
    border-radius: 14px;
    padding: 24px;
    text-align: left;
    cursor: pointer;
    transition: 0.2s;
    min-height: 250px;
}

    .renew-plan-card:hover {
        border-color: #FF5252;
    }

    .renew-plan-card.selected {
        border-color: #E53935;
        background: rgba(229, 57, 53, 0.05);
    }

.recommended-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(229, 57, 53, 0.2);
    color: #FF5252;
    padding: 6px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
}

.renew-plan-top {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
}

.renew-plan-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

    .renew-plan-icon.basic {
        background: #202020;
        color: #B0B0B0;
    }

    .renew-plan-icon.black {
        background: rgba(229, 57, 53, 0.18);
        color: #FF5252;
    }

.renew-plan-top h3 {
    margin: 0 0 8px 0;
    color: #F5F5F5;
    font-size: 18px;
}

.renew-plan-top strong {
    color: #F5F5F5;
    font-size: 28px;
}

.renew-plan-top span {
    color: #B0B0B0;
    margin-left: 4px;
}

.renew-plan-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.renew-plan-card li {
    color: #B0B0B0;
    margin-bottom: 10px;
    font-size: 14px;
}

    .renew-plan-card li::before {
        content: "✓";
        color: #00C853;
        margin-right: 10px;
        font-weight: 900;
    }

.renew-radio-circle {
    position: absolute;
    bottom: 22px;
    left: 50%;
    transform: translateX(-50%);
    width: 20px;
    height: 20px;
    border: 2px solid #777;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .renew-radio-circle span {
        width: 10px;
        height: 10px;
        background: #E53935;
        border-radius: 50%;
    }

.renew-summary-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 24px;
}

    .renew-summary-card h2 {
        color: #F5F5F5;
        font-size: 18px;
        margin-bottom: 22px;
    }

.renew-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #242424;
    padding: 14px 0;
}

    .renew-summary-row span {
        color: #B0B0B0;
    }

    .renew-summary-row strong {
        color: #F5F5F5;
        text-align: right;
    }

.renew-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #242424;
    padding: 22px 0;
}

    .renew-summary-total span {
        color: #F5F5F5;
        font-weight: 800;
    }

    .renew-summary-total strong {
        color: #E53935;
        font-size: 26px;
    }

.renew-details-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 18px;
    margin-bottom: 20px;
}

.renew-detail-card,
.renew-auto-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 14px;
    padding: 20px;
}

    .renew-detail-card label {
        display: block;
        color: #B0B0B0;
        margin-bottom: 12px;
        font-weight: 700;
    }

    .renew-detail-card input {
        width: 100%;
        background: #101010;
        border: 1px solid #2A2A2A;
        color: #F5F5F5;
        padding: 13px 14px;
        border-radius: 8px;
        outline: none;
    }

        .renew-detail-card input:focus {
            border-color: #E53935;
        }

.renew-methods {
    display: flex;
    gap: 10px;
}

.renew-method {
    background: #202020;
    border: 1px solid #2A2A2A;
    color: #B0B0B0;
    border-radius: 8px;
    padding: 12px 18px;
    font-weight: 800;
    cursor: pointer;
}

    .renew-method.selected {
        border-color: #E53935;
        color: #F5F5F5;
        background: rgba(229, 57, 53, 0.08);
    }

.renew-auto-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

    .renew-auto-card strong {
        color: #F5F5F5;
        display: block;
        margin-bottom: 6px;
    }

    .renew-auto-card p {
        color: #B0B0B0;
        margin: 0;
        font-size: 13px;
    }

.renew-switch {
    width: 52px;
    height: 28px;
    background: #2A2A2A;
    border: none;
    border-radius: 999px;
    padding: 4px;
    cursor: pointer;
}

    .renew-switch span {
        display: block;
        width: 20px;
        height: 20px;
        background: #B0B0B0;
        border-radius: 50%;
        transition: 0.2s;
    }

    .renew-switch.active {
        background: #E53935;
    }

        .renew-switch.active span {
            transform: translateX(24px);
            background: white;
        }

.renew-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.renew-cancel-button,
.renew-confirm-button {
    text-align: center;
    border-radius: 8px;
    padding: 15px 20px;
    font-weight: 800;
    text-decoration: none;
}

.renew-cancel-button {
    background: #202020;
    color: #F5F5F5;
    border: 1px solid #2A2A2A;
}

    .renew-cancel-button:hover {
        border-color: #FF5252;
        color: #F5F5F5;
    }

.renew-confirm-button {
    background: #E53935;
    color: white;
    border: none;
    cursor: pointer;
}

    .renew-confirm-button:hover {
        background: #FF5252;
    }

.renew-message {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 22px;
    font-weight: 700;
}

    .renew-message.success {
        background: rgba(0, 200, 83, 0.15);
        border: 1px solid rgba(0, 200, 83, 0.45);
        color: #00C853;
    }

    .renew-message.error {
        background: rgba(229, 57, 53, 0.15);
        border: 1px solid rgba(229, 57, 53, 0.45);
        color: #FF5252;
    }

.membership-renew-button {
    display: block;
    width: 100%;
    background: #E53935;
    color: white;
    text-align: center;
    padding: 16px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    margin-top: 28px;
}

    .membership-renew-button:hover {
        background: #FF5252;
        color: white;
        text-decoration: none;
    }

.subscribe-button {
    display: block;
    width: 100%;
    background: #E53935;
    color: white;
    text-align: center;
    padding: 16px 20px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    border: none;
}

    .subscribe-button:hover {
        background: #FF5252;
        color: white;
        text-decoration: none;
    }

/* ===== SOCIO RESERVA CONFIRMADA REDISEÑO FINAL ===== */

.confirmada-page {
    max-width: 1180px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.confirmada-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

    .confirmada-header h1 {
        color: #F5F5F5;
        font-size: 34px;
        margin: 0 0 8px 0;
        letter-spacing: 1px;
    }

    .confirmada-header p {
        color: #B0B0B0;
        margin: 0;
        font-size: 16px;
    }

.confirmada-header-link {
    color: #FF5252;
    border: 1px solid rgba(229, 57, 53, 0.6);
    padding: 12px 18px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
}

    .confirmada-header-link:hover {
        background: rgba(229, 57, 53, 0.15);
        color: white;
        text-decoration: none;
    }

.confirmada-banner {
    background: linear-gradient(135deg, rgba(22, 22, 22, 0.98), rgba(20, 35, 22, 0.6));
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 34px 40px;
    display: flex;
    align-items: center;
    gap: 32px;
    margin-bottom: 26px;
    box-shadow: 0 0 35px rgba(0, 200, 83, 0.08);
}

.confirmada-check {
    width: 86px;
    height: 86px;
    border-radius: 50%;
    border: 3px solid #4CAF50;
    color: #F5F5F5;
    box-shadow: 0 0 30px rgba(76, 175, 80, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    font-weight: 900;
    flex-shrink: 0;
}

.confirmada-eyebrow {
    color: #00C853;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 12px;
    font-weight: 900;
}

.confirmada-banner h2 {
    color: #F5F5F5;
    font-size: 25px;
    margin: 6px 0 10px 0;
}

.confirmada-banner p {
    color: #B0B0B0;
    line-height: 1.5;
    margin: 0;
}

.confirmada-main-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.75fr);
    gap: 24px;
    align-items: start;
}

.confirmada-detalles-card,
.confirmada-pasos-card,
.confirmada-summary-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
}

.confirmada-detalles-card {
    padding: 28px;
}

.confirmada-side {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.confirmada-summary-card,
.confirmada-pasos-card {
    padding: 24px;
}

.confirmada-card-title {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

    .confirmada-card-title h3,
    .confirmada-summary-card h3 {
        color: #F5F5F5;
        font-size: 20px;
        margin: 0;
    }

.confirmada-title-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(0, 200, 83, 0.14);
    color: #00C853;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 900;
}

    .confirmada-title-icon.red {
        background: rgba(229, 57, 53, 0.14);
        color: #FF5252;
    }

.detalle-lista {
    display: flex;
    flex-direction: column;
}

.detalle-row {
    display: grid;
    grid-template-columns: minmax(220px, 1fr) auto;
    gap: 24px;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #242424;
}

    .detalle-row:last-child {
        border-bottom: none;
    }

.detalle-left {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #B0B0B0;
    font-weight: 600;
}

.detalle-icon {
    width: 32px;
    height: 32px;
    border-radius: 9px;
    background: #202020;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.detalle-row strong {
    color: #F5F5F5;
    text-align: right;
    font-size: 15px;
}

.detalle-red {
    color: #FF5252 !important;
}

.detalle-green {
    color: #4CAF50 !important;
}

.detalle-divider {
    height: 1px;
    background: #2A2A2A;
    margin: 12px 0;
}

.confirmada-status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
    border: 1px solid rgba(76, 175, 80, 0.35);
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 900;
}

    .confirmada-status::before {
        content: "✓";
        margin-right: 7px;
    }

.summary-mini-row {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 0;
    border-bottom: 1px solid #242424;
}

    .summary-mini-row span {
        color: #B0B0B0;
    }

    .summary-mini-row strong {
        color: #F5F5F5;
        text-align: right;
    }

.summary-mini-total {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    padding-top: 20px;
}

    .summary-mini-total span {
        color: #F5F5F5;
        font-weight: 800;
    }

    .summary-mini-total strong {
        color: #00C853;
    }

.pasos-lista {
    display: flex;
    flex-direction: column;
}

.paso-item {
    display: grid;
    grid-template-columns: 54px 1fr;
    gap: 16px;
    padding: 18px 0;
    border-bottom: 1px solid #242424;
}

    .paso-item:first-child {
        padding-top: 0;
    }

.paso-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(229, 57, 53, 0.5);
    color: #FF5252;
    background: rgba(229, 57, 53, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.paso-item strong {
    display: block;
    color: #F5F5F5;
    margin-bottom: 7px;
}

.paso-item p {
    color: #B0B0B0;
    line-height: 1.45;
    margin: 0;
    font-size: 14px;
}

.paso-nota {
    margin-top: 20px;
    display: grid;
    grid-template-columns: 28px 1fr;
    gap: 10px;
    background: #202020;
    border: 1px solid #2A2A2A;
    border-radius: 12px;
    padding: 15px;
    color: #B0B0B0;
}

    .paso-nota span {
        color: #B0B0B0;
    }

    .paso-nota p {
        margin: 0;
        line-height: 1.45;
        font-size: 14px;
    }

.confirmada-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 28px;
}

.btn-confirmada-primary,
.btn-confirmada-secondary {
    text-align: center;
    border-radius: 12px;
    padding: 18px 22px;
    text-decoration: none;
    font-weight: 900;
    transition: 0.2s;
}

.btn-confirmada-primary {
    background: #E53935;
    color: white;
}

    .btn-confirmada-primary:hover {
        background: #FF5252;
        color: white;
        text-decoration: none;
    }

.btn-confirmada-secondary {
    background: #161616;
    color: #F5F5F5;
    border: 1px solid #2A2A2A;
}

    .btn-confirmada-secondary:hover {
        border-color: #FF5252;
        color: white;
        text-decoration: none;
    }
/* ===== SOCIO RESERVAR CLASE - FIX FINAL ===== */

.reservar-page {
    max-width: 1250px;
    margin: 0 auto;
    padding-bottom: 50px;
}

.reservar-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

    .reservar-top h1 {
        color: #F5F5F5;
        font-size: 34px;
        margin: 0 0 8px 0;
        letter-spacing: 1px;
    }

.reservar-subtitle {
    color: #B0B0B0;
    margin: 0;
    font-size: 16px;
}

.btn-ver-reservas {
    color: #FF5252;
    border: 1px solid rgba(229, 57, 53, 0.7);
    padding: 13px 22px;
    border-radius: 10px;
    text-decoration: none;
    font-weight: 800;
    background: transparent;
    transition: 0.2s;
}

    .btn-ver-reservas:hover {
        background: rgba(229, 57, 53, 0.15);
        color: white;
        text-decoration: none;
    }

.filtros-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 28px;
    margin-bottom: 28px;
}

    .filtros-card h4 {
        color: #F5F5F5;
        font-size: 20px;
        margin: 0 0 20px 0;
    }

.filtros-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 18px;
}

.filtro-group label {
    display: block;
    color: #777;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
}

.filtro-group select,
.filtro-group input {
    width: 100%;
    background: #101010;
    border: 1px solid #2A2A2A;
    color: #F5F5F5;
    border-radius: 10px;
    padding: 14px 16px;
    outline: none;
}

    .filtro-group select:focus,
    .filtro-group input:focus {
        border-color: #E53935;
    }

.btn-limpiar {
    background: transparent;
    border: none;
    color: #777;
    font-size: 14px;
    cursor: pointer;
    padding: 0;
}

    .btn-limpiar:hover {
        color: #FF5252;
    }

.clases-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
}

.clase-card {
    background: #161616;
    border: 1px solid #2A2A2A;
    border-radius: 18px;
    padding: 26px;
    color: #F5F5F5;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    transition: 0.2s;
}

    .clase-card:hover {
        border-color: rgba(229, 57, 53, 0.55);
        transform: translateY(-2px);
    }

.clase-card-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.clase-disciplina {
    color: #FF5252;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 2px;
}

.clase-cupos {
    color: #00C853;
    font-weight: 900;
    font-size: 14px;
}

    .clase-cupos.cupos-pocos {
        color: #FFEB3B;
    }

.clase-card h3 {
    color: #F5F5F5;
    font-size: 21px;
    margin: 0 0 12px 0;
}

.clase-desc {
    color: #8F8F8F;
    line-height: 1.45;
    margin: 0 0 20px 0;
    min-height: 44px;
}

.clase-detalles {
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: #CFCFCF;
    font-size: 14px;
    margin-bottom: 20px;
}

.clase-ocupacion {
    margin-top: auto;
    margin-bottom: 18px;
}

.ocupacion-info {
    display: flex;
    justify-content: space-between;
    color: #8F8F8F;
    font-size: 13px;
    margin-bottom: 8px;
}

.ocupacion-bar {
    width: 100%;
    height: 8px;
    background: #2A2A2A;
    border-radius: 999px;
    overflow: hidden;
}

.ocupacion-fill {
    height: 100%;
    border-radius: 999px;
}

    .ocupacion-fill.fill-rojo {
        background: #E53935;
    }

    .ocupacion-fill.fill-amarillo {
        background: #FFEB3B;
    }

    .ocupacion-fill.fill-verde {
        background: #00C853;
    }

.reserve-class-button {
    display: block !important;
    width: 100% !important;
    background: #E53935 !important;
    color: white !important;
    text-align: center !important;
    padding: 14px 18px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    font-weight: 900 !important;
    border: none !important;
    cursor: pointer !important;
    transition: 0.2s !important;
}

    .reserve-class-button:hover {
        background: #FF5252 !important;
        color: white !important;
        text-decoration: none !important;
    }
/* =========================================================
   ADMIN PANEL - LOOK GIGACHAD FINAL
   Pegar al final de wwwroot/app.css
   ========================================================= */

.admin-shell {
    background: radial-gradient(circle at top left, rgba(229, 57, 53, 0.10), transparent 32%), radial-gradient(circle at bottom right, rgba(229, 57, 53, 0.06), transparent 35%), #080808 !important;
}

/* SIDEBAR */
.admin-sidebar {
    width: 285px !important;
    background: #070707 !important;
    border-right: 1px solid #1f1f1f !important;
    padding: 22px 18px !important;
    box-shadow: 10px 0 38px rgba(0, 0, 0, 0.35);
}

.admin-content-area {
    margin-left: 285px !important;
    width: calc(100% - 285px) !important;
    background: radial-gradient(circle at 40% 10%, rgba(255, 255, 255, 0.035), transparent 26%), #0b0b0b !important;
}

/* LOGO */
.admin-logo-image-box {
    justify-content: center !important;
    margin-bottom: 30px !important;
}

.admin-brand-logo {
    width: 220px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 12px rgba(229, 57, 53, 0.22));
}

/* NAV */
.admin-nav {
    gap: 7px !important;
}

    .admin-nav a {
        display: flex !important;
        align-items: center;
        gap: 12px;
        min-height: 42px;
        padding: 10px 14px !important;
        color: #d8d8d8 !important;
        font-weight: 700 !important;
        border-radius: 9px !important;
    }

        .admin-nav a:hover {
            background: #151515 !important;
            color: #ffffff !important;
        }

        .admin-nav a.active {
            background: linear-gradient(90deg, #f23636, #e11d1d) !important;
            color: #ffffff !important;
            box-shadow: 0 10px 24px rgba(229, 57, 53, 0.25);
        }

.nav-bi {
    width: 22px;
    font-size: 18px;
    line-height: 1;
    color: inherit;
}

.nav-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px !important;
    padding-left: 14px !important;
    color: #8a8a8a !important;
    font-size: 10px !important;
    letter-spacing: 1.5px !important;
}

    .nav-section::after {
        content: "";
        flex: 1;
        height: 1px;
        background: #292929;
    }

/* TOPBAR */
.entrenador-topbar {
    background: transparent !important;
    border: none !important;
    padding: 24px 42px 0 !important;
}

.topbar-btn {
    background: transparent !important;
    border: 1px solid #222 !important;
    color: #f2f2f2 !important;
    min-width: 42px;
    height: 38px;
    border-radius: 10px;
}

    .topbar-btn:hover {
        color: #ef2f2f !important;
        border-color: #ef2f2f !important;
    }

/* MAIN */
.admin-main {
    padding: 26px 48px 48px !important;
}

/* HOME */
.admin-home {
    max-width: 1160px !important;
    margin: 0 auto !important;
}

.welcome-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.055), rgba(255,255,255,0.015)), #121212 !important;
    border: 1px solid #282828 !important;
    border-radius: 10px !important;
    padding: 42px 40px !important;
    margin-bottom: 28px !important;
    box-shadow: 0 16px 38px rgba(0,0,0,0.22);
}

.welcome-label {
    color: #bfbfbf !important;
    text-transform: uppercase;
    font-weight: 900 !important;
    letter-spacing: 1.6px !important;
    font-size: 14px !important;
    margin-bottom: 20px !important;
}

.welcome-card h1 {
    font-size: 38px !important;
    font-weight: 900 !important;
    color: #ffffff !important;
    margin-bottom: 14px !important;
}

.welcome-card p {
    color: #b7b7b7 !important;
    font-size: 16px !important;
}

/* CARDS */
.admin-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    gap: 18px !important;
}

.admin-option-card {
    min-height: 118px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), #121212 !important;
    border: 1px solid #252525 !important;
    border-radius: 10px !important;
    padding: 26px 28px !important;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
    transition: 0.18s ease !important;
}

    .admin-option-card::after {
        content: "›";
        position: absolute;
        right: 26px;
        top: 50%;
        transform: translateY(-50%);
        color: #ff2d2d;
        font-size: 38px;
        line-height: 1;
        opacity: 0.95;
    }

    .admin-option-card:hover {
        transform: translateY(-3px) !important;
        border-color: rgba(239, 47, 47, 0.65) !important;
        box-shadow: 0 16px 35px rgba(0,0,0,0.35);
        background: radial-gradient(circle at 12% 20%, rgba(239, 47, 47, 0.14), transparent 34%), #151515 !important;
    }

    .admin-option-card h3 {
        font-size: 22px !important;
        font-weight: 900 !important;
        color: #f5f5f5 !important;
        margin-bottom: 8px !important;
        padding-right: 32px;
    }

    .admin-option-card p {
        color: #b5b5b5 !important;
        font-size: 15.5px !important;
        line-height: 1.45;
        padding-right: 32px;
    }

/* PROFILE */
.admin-bottom {
    background: transparent !important;
}

.admin-profile {
    background: #171717 !important;
    border: 1px solid #282828 !important;
}

.profile-avatar {
    background: linear-gradient(135deg, #f23636, #c91515) !important;
}

.admin-logout {
    display: flex !important;
    align-items: center;
    gap: 8px;
    color: #e8e8e8 !important;
}

    .admin-logout:hover {
        color: #ffffff !important;
        background: #151515 !important;
    }

/* RESPONSIVE */
@media (max-width: 1000px) {
    .admin-grid {
        grid-template-columns: 1fr !important;
    }

    .admin-main {
        padding: 24px !important;
    }
}
/* =========================================================
   ICONOS EN TARJETAS DEL ADMIN INICIO
   ========================================================= */

.welcome-red-line {
    width: 44px;
    height: 5px;
    background: #ef2f2f;
    border-radius: 999px;
    margin: 16px 0 22px;
    box-shadow: 0 0 14px rgba(239, 47, 47, 0.55);
}

.admin-card-with-icon {
    display: flex !important;
    align-items: center;
    gap: 24px;
    text-decoration: none !important;
}

.admin-card-icon {
    width: 76px;
    height: 76px;
    min-width: 76px;
    border-radius: 50%;
    background: #202020;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff2d2d;
    font-size: 36px;
    position: relative;
    z-index: 1;
    box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.03);
}

.admin-card-with-icon:hover .admin-card-icon {
    background: #242424;
    color: #ff3838;
    box-shadow: inset 0 0 18px rgba(255, 255, 255, 0.04), 0 0 18px rgba(239, 47, 47, 0.18);
}

.admin-card-body {
    position: relative;
    z-index: 1;
    padding-right: 36px;
}

    .admin-card-body h3 {
        margin: 0 0 8px !important;
    }

    .admin-card-body p {
        margin: 0 !important;
    }

.admin-option-card::after {
    right: 24px !important;
    color: #ff2d2d !important;
    font-size: 38px !important;
}

@media (max-width: 700px) {
    .admin-card-with-icon {
        align-items: flex-start;
    }

    .admin-card-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        font-size: 28px;
    }
}
/* =========================================================
   ROLE LAYOUT REUTILIZABLE: SOCIO / ENTRENADOR
   ========================================================= */

.role-shell {
    min-height: 100vh;
    background: #050505 !important;
}

.role-sidebar {
    background: #050505 !important;
    border-right: 1px solid #1f1f1f !important;
    box-shadow: 10px 0 38px rgba(0, 0, 0, 0.38);
}

.role-content {
    background: radial-gradient(circle at 40% 10%, rgba(255, 255, 255, 0.035), transparent 26%), #0b0b0b !important;
}

.role-logo {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 34px;
    padding-top: 4px;
}

.role-brand-logo {
    width: 205px;
    max-width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
    filter: drop-shadow(0 0 14px rgba(239, 47, 47, 0.20));
}

.role-nav a {
    display: flex !important;
    align-items: center;
    gap: 12px;
    min-height: 42px;
    padding: 10px 14px !important;
    color: #d8d8d8 !important;
    font-weight: 700 !important;
    border-radius: 9px !important;
    text-decoration: none !important;
}

    .role-nav a:hover {
        background: #151515 !important;
        color: #ffffff !important;
    }

    .role-nav a.active {
        background: linear-gradient(90deg, #f23636, #e11d1d) !important;
        color: #ffffff !important;
        box-shadow: 0 10px 24px rgba(229, 57, 53, 0.25);
    }

.role-nav-icon {
    width: 22px;
    font-size: 18px;
    line-height: 1;
    color: inherit;
}

.role-bottom {
    background: transparent !important;
}

.role-profile {
    background: #171717 !important;
    border: 1px solid #282828 !important;
    border-radius: 14px;
}

.role-profile-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

    .role-profile-text strong {
        color: #ffffff;
        font-weight: 800;
    }

    .role-profile-text span {
        color: #ef4444;
        font-size: 13px;
        font-weight: 700;
    }

.role-logout {
    margin-top: 14px;
    width: 100%;
    border: none;
    background: transparent;
    color: #e8e8e8;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 10px;
    font-weight: 800;
    text-align: left;
}

    .role-logout:hover {
        color: #ffffff;
        background: #151515;
    }

/* HOME REUTILIZABLE */

.role-home {
    max-width: 1180px;
    margin: 0 auto;
}

.role-hero {
    background: linear-gradient(135deg, rgba(239, 47, 47, 0.18), rgba(255,255,255,0.015)), #121212 !important;
    border: 1px solid #282828 !important;
    border-radius: 18px;
    padding: 42px 44px;
    margin-bottom: 28px;
    box-shadow: 0 16px 38px rgba(0,0,0,0.22);
}

.role-label {
    color: #bfbfbf;
    text-transform: uppercase;
    font-weight: 900;
    letter-spacing: 1.6px;
    font-size: 14px;
    margin-bottom: 14px;
}

.role-hero h1 {
    font-size: 38px;
    font-weight: 900;
    color: #ffffff;
    margin: 0;
}

.role-hero p {
    color: #c7c7c7;
    font-size: 16px;
    margin: 0;
}

.role-red-line {
    width: 44px;
    height: 5px;
    background: #ef2f2f;
    border-radius: 999px;
    margin: 16px 0 22px;
    box-shadow: 0 0 14px rgba(239, 47, 47, 0.55);
}

.role-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(280px, 1fr)) !important;
    gap: 18px !important;
}

.role-card {
    min-height: 150px;
    background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)), #121212 !important;
    border: 1px solid #252525 !important;
    border-radius: 14px !important;
    padding: 26px 28px !important;
    color: #ffffff !important;
    position: relative;
    overflow: hidden;
    transition: 0.18s ease !important;
    text-decoration: none !important;
    display: flex !important;
    align-items: center;
    gap: 24px;
}

    .role-card::after {
        content: "›";
        position: absolute;
        right: 26px;
        top: 50%;
        transform: translateY(-50%);
        color: #ff2d2d;
        font-size: 38px;
        line-height: 1;
        opacity: 0.95;
    }

    .role-card:hover {
        transform: translateY(-3px) !important;
        border-color: rgba(239, 47, 47, 0.65) !important;
        box-shadow: 0 16px 35px rgba(0,0,0,0.35);
        background: radial-gradient(circle at 12% 20%, rgba(239, 47, 47, 0.14), transparent 34%), #151515 !important;
    }

.role-card-icon {
    width: 76px;
    height: 76px;
    min-width: 76px;
    border-radius: 50%;
    background: #202020;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff2d2d;
    font-size: 36px;
    position: relative;
    z-index: 1;
}

.role-card-body {
    position: relative;
    z-index: 1;
    padding-right: 36px;
}

    .role-card-body h3 {
        font-size: 22px;
        font-weight: 900;
        color: #f5f5f5;
        margin: 0 0 8px;
    }

    .role-card-body p {
        color: #b5b5b5;
        font-size: 15.5px;
        line-height: 1.45;
        margin: 0 0 16px;
    }

    .role-card-body span {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #ef3838;
        color: #ffffff;
        font-weight: 800;
        padding: 9px 16px;
        border-radius: 8px;
    }

.motivacion-card::after {
    display: none;
}

@media (max-width: 900px) {
    .role-grid {
        grid-template-columns: 1fr !important;
    }

    .role-hero h1 {
        font-size: 30px;
    }

    .role-card {
        align-items: flex-start;
    }

    .role-card-icon {
        width: 58px;
        height: 58px;
        min-width: 58px;
        font-size: 28px;
    }
}
/* =========================================================
   FIX: iconos de cards a la izquierda
   ========================================================= */

.role-grid .role-card {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    text-align: left !important;
}

    .role-grid .role-card .role-card-icon {
        margin: 0 !important;
        align-self: center !important;
    }

    .role-grid .role-card .role-card-body {
        text-align: left !important;
        width: 100%;
    }

        .role-grid .role-card .role-card-body h3,
        .role-grid .role-card .role-card-body p {
            text-align: left !important;
        }

        .role-grid .role-card .role-card-body span {
            margin-top: 4px;
        }