.status-bar-safe-area {
    display: none;
}

@import url("css/admin-theme.css");
@import url("css/rutina-editor.css");
@font-face {
    font-family: 'AtleticoBold';
    src: url('fonts/Atletico-Bold.otf') format('opentype');
    /*font-weight: 700;*/ /* es la variante Bold */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'AtleticoMedium';
    src: url('fonts/Atletico-Medium.otf') format('opentype');
    font-weight: 500; /* es la variante Bold */
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Atletico Regular';
    src: url('fonts/Atletico-Regular.otf') format('opentype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('fonts/DMSans-Regular.ttf') format('truetype');
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('fonts/DMSans-Medium.ttf') format('truetype');
    font-style: normal;
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'DM Sans';
    src: url('fonts/DMSans-Bold.ttf') format('truetype');
    font-style: normal;
    font-weight: 700;
    font-display: swap;
}

@supports (-webkit-touch-callout: none) {
    .status-bar-safe-area {
        display: flex;
        position: sticky;
        top: 0;
        height: env(safe-area-inset-top);
        background-color: #f7f7f7;
        width: 100%;
        z-index: 1;
    }

    .flex-column, .navbar-brand {
        padding-left: env(safe-area-inset-left);
    }
}

html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
 /*   background: url('/images/fondo_sporteate_1.png') no-repeat center center fixed;
    background-size: cover;*/
}
.navbar {
    background-color: white !important;
    box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.19);
}
.navbar-nav {
    margin-left: auto !important;
    padding-left: 20px;
}

/* Navbar admin: legibilidad y estado activo claro */
.admin-top-navbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e5e7eb;
}

.admin-top-navbar .navbar-brand {
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    color: #0f172a !important;
}

.admin-top-nav {
    gap: 0.2rem;
}

.admin-top-nav .nav-item {
    display: flex;
    align-items: center;
}

.admin-top-nav .nav-group-label {
    display: flex;
    align-items: center;
    margin: 0 0.35rem 0 0.65rem;
    padding: 0.25rem 0.45rem;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.admin-top-nav .nav-group-label:first-child {
    margin-left: 0;
}

.admin-top-nav .nav-link {
    color: #334155 !important;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    border-radius: 10px;
    padding: 0.5rem 0.75rem !important;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.admin-top-nav .nav-link:hover,
.admin-top-nav .nav-link:focus-visible {
    color: #0f172a !important;
    background: #f1f5f9;
    text-decoration: none;
}

.admin-top-nav .nav-link.active {
    color: #1d4ed8 !important;
    background: #dbeafe;
    box-shadow: inset 0 0 0 1px #bfdbfe;
}

.admin-top-navbar .navbar-toggler {
    border-color: #cbd5e1;
}

.admin-top-navbar .navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(59, 130, 246, 0.25);
}

@media (max-width: 991.98px) {
    .admin-top-navbar .navbar-collapse {
        margin-top: 0.6rem;
        padding-top: 0.4rem;
        border-top: 1px solid #e5e7eb;
    }

    .admin-top-nav .nav-group-label {
        width: 100%;
        margin: 0.5rem 0 0.25rem 0;
        background: transparent;
        color: #64748b;
        border-radius: 0;
        border-top: 1px solid #e2e8f0;
        padding: 0.5rem 0 0;
    }

    .admin-top-nav .nav-group-label:first-child {
        margin-top: 0.15rem;
        border-top: 0;
        padding-top: 0.2rem;
    }

    .admin-top-nav .nav-link {
        width: 100%;
    }
}

/* Auth admin: login/register similar a cliente y optimizado para desktop */
.admin-auth-page {
    min-height: 100vh;
    min-height: 100dvh;
    padding: clamp(16px, 3vw, 36px);
    background: radial-gradient(circle at 18% 10%, #4f46e5 0%, #2563eb 40%, #0ea5e9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-auth-shell {
    width: min(1080px, 100%);
    display: grid;
    grid-template-columns: 1fr minmax(360px, 460px);
    gap: clamp(16px, 3vw, 40px);
    align-items: center;
}

.admin-auth-brand {
    color: #f8fafc;
    animation: admin-auth-fade-up 420ms ease-out both;
}

.admin-auth-brand-logo {
    width: clamp(118px, 13vw, 170px);
    height: auto;
    margin-bottom: 1.2rem;
    filter: drop-shadow(0 12px 22px rgba(15, 23, 42, 0.35));
}

.admin-auth-brand-kicker {
    margin: 0 0 0.65rem 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.98rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    opacity: 0.92;
}

.admin-auth-brand-title {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(2.2rem, 4.4vw, 3.25rem);
    font-weight: 700;
    line-height: 1.15;
}

.admin-auth-brand-subtitle {
    margin: 1rem 0 0 0;
    max-width: 50ch;
    font-family: 'DM Sans', sans-serif;
    font-size: clamp(1.1rem, 1.8vw, 1.35rem);
    color: #dbeafe;
}

.admin-auth-card {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.08);
    border-radius: 1.2rem;
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.2);
    padding: clamp(1rem, 2.3vw, 1.8rem);
    animation: admin-auth-fade-up 520ms ease-out both;
    animation-delay: 80ms;
}

.admin-auth-card-head {
    margin-bottom: 1rem;
}

.admin-auth-card-title {
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    color: #0f172a;
    font-size: clamp(1.35rem, 2.6vw, 1.65rem);
    font-weight: 700;
}

.admin-auth-card-subtitle {
    margin: 0.3rem 0 0 0;
    font-family: 'DM Sans', sans-serif;
    color: #64748b;
    font-size: 0.92rem;
}

.admin-auth-field {
    margin-bottom: 0.8rem;
}

.admin-auth-label {
    display: inline-block;
    margin-bottom: 0.35rem;
    color: #0f172a;
    font-family: 'DM Sans', sans-serif;
    font-weight: 600;
    font-size: 0.88rem;
}

.admin-auth-input,
.admin-auth-input-wrap {
    width: 100%;
    border: 1px solid #dbe3f0;
    border-radius: 0.75rem;
    background: #f8fafc;
}

.admin-auth-input {
    height: 2.75rem;
    padding: 0 0.85rem;
    outline: none;
    color: #0f172a;
    font-family: 'DM Sans', sans-serif;
}

.admin-auth-input:focus,
.admin-auth-input-wrap:focus-within {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.22);
    background: #ffffff;
}

.admin-auth-input-wrap {
    display: flex;
    align-items: center;
}

.admin-auth-input-password {
    border: none;
    background: transparent;
    box-shadow: none;
}

.admin-auth-input-password:focus {
    box-shadow: none;
}

.admin-auth-toggle {
    border: none;
    background: transparent;
    color: #64748b;
    width: 2.6rem;
    height: 2.6rem;
}

.admin-auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}

.admin-auth-check {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    color: #334155;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
}

.admin-auth-link-btn {
    border: none;
    background: none;
    color: #2563eb;
    font-family: 'DM Sans', sans-serif;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0;
}

.admin-auth-submit {
    width: 100%;
    border: none;
    border-radius: 0.8rem;
    padding: 0.72rem 1rem;
    font-family: 'DM Sans', sans-serif;
    font-weight: 700;
    color: #ffffff;
    background: linear-gradient(90deg, #0ea5e9 0%, #2563eb 50%, #4f46e5 100%);
}

.admin-auth-footer {
    margin-top: 0.95rem;
    display: flex;
    justify-content: center;
    gap: 0.35rem;
    font-family: 'DM Sans', sans-serif;
    color: #64748b;
    font-size: 0.9rem;
}

.admin-auth-footer a {
    color: #2563eb;
    font-weight: 700;
    text-decoration: none;
}

@keyframes admin-auth-fade-up {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

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

.admin-auth-page.is-windows .admin-auth-card {
    border-radius: 1rem;
}

.admin-auth-page.is-windows .admin-auth-brand {
    background: rgba(15, 23, 42, 0.28);
    border: 1px solid rgba(191, 219, 254, 0.36);
    border-radius: 1.25rem;
    padding: clamp(1.2rem, 2.5vw, 2rem);
    box-shadow: 0 18px 38px rgba(15, 23, 42, 0.22);
}

@media (max-width: 900px) {
    .admin-auth-shell {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .admin-auth-brand {
        text-align: center;
    }

    .admin-auth-brand-subtitle {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-auth-brand,
    .admin-auth-card {
        animation: none !important;
    }
}
body {
    /*background: linear-gradient(124deg, #242C3B 50%, #4B4CED 80%);*/
    background-size: cover; /* Ajusta la imagen para cubrir toda la pantalla */
    background-repeat: no-repeat; /* Evita que la imagen se repita */
    background-attachment: fixed; /* Fija la imagen al fondo */
    background-position: center; /* Centra la imagen */
}
.spt-label {
    font-weight: bold;
    color: #333; /* Color m�s oscuro para destacar */
    font-size: 14px; /* Tama�o de fuente ajustado */
}
.stp-label-altacliente {
    padding-bottom: 10px;
    font-size:16px;
}

.spt-value {
    font-weight: normal;
    color: #555; /* Color m�s claro para diferenciar del label */
    font-size: 14px; /* Tama�o de fuente ajustado */
}
a, .btn-link {
    color: #006bb7;
}
/* Button */

.btn-outline-primary {
    box-sizing: border-box;
    padding: 4px 8px;
    gap: 8px;
    background: rgba(47, 128, 237, 0.15);
    border: 1px solid #2F80ED;
    border-radius: 4px;
}
    
    .btn-outline-warning {
        box-sizing: border-box;
        padding: 4px 8px;
        gap: 8px;
        background: rgba(226, 185, 59, 0.15);
        border: 1px solid #E2B93B;
        border-radius: 4px;
    }
.btn-outline-warning:hover {
    color: #ffffff;
}
.btn-outline-danger {
    box-sizing: border-box;
    padding: 4px 8px;
    gap: 8px;
    background: rgba(235, 87, 87, 0.15);
    border: 1px solid #EB5757;
    border-radius: 4px;
}
.btn-outline-secondary {

    box-sizing: border-box;
    padding: 4px 8px;
    gap: 8px;
    background: rgba(156, 163, 175, 0.15);
    border: 1px solid #9CA3AF;
    border-radius: 4px;
}
.btn-primary {
    color: #fff;
    padding: 8px 28px;
    gap: 8px;
    border-radius: 32px;
    background-color: #3299E5;
}
.btn-secondary {
    color: #fff;
    padding: 8px 28px;
    gap: 8px;
    border-radius: 32px;
    background-color: #9CA3AF;
}

.btn-success {
    color: #fff;
    padding: 8px 28px;
    gap: 8px;
    background-color: #27AE60;
    border-radius: 32px;
}
.btn-danger {
    padding: 8px 28px;
    gap: 8px;
    background: #EB5757;
    border-radius: 32px;
}

.btn-warning {
    padding: 8px 28px;
    gap: 8px;
    background-color: #E2B93B;
    border-radius: 32px;
    color: white;
}
.btn-info {
    padding: 4px 8px;
    gap: 8px;
    background: #2F80ED;
    border-radius: 32px;
    color: white;
}
btn-info:hover {
    background: #2F80ED;
}

.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;
}


/* Estilos popup legacy (sin pisar Bootstrap global) */
.legacy-modal {
    display: none;
    position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0,0.4);
    padding-top: 60px;
}

.legacy-modal-content {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

.legacy-modal-content-wide {
    background-color: #fefefe;
    margin: 5% auto;
    padding: 20px;
    border: 1px solid #888;
    width: 120%;
}

.legacy-close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.legacy-close:hover,
.legacy-close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}
/* Final estilos popup legacy */

/* custom-icons.css */
.icon-large {
    font-size: 2rem; /* Ajusta el tama�o seg�n tus necesidades */
    vertical-align: middle; /* Ajusta la alineaci�n vertical */
}

.icon-medium {
    font-size: 1.5rem; /* Ajusta el tama�o seg�n tus necesidades */
    vertical-align: middle; /* Ajusta la alineaci�n vertical */
    line-height: 1;
}

.icon-small {
    font-size: 1rem; /* Ajusta el tama�o seg�n tus necesidades */
    vertical-align: middle; /* Ajusta la alineaci�n vertical */
}

.custom-file-input input[type="file"] {
    display: none;
}

.custom-file-input label {
    cursor: pointer;
}

.modal-dialog-custom-wide {
    max-width: 80%;
}

.arrow-transition {
    transition: transform 0.5s;
}

.arrow-rotate {
    transform: rotate(180deg);
    padding-bottom: 15px;
}

.transition-collapse {
    transition: height 0.3s ease-in-out, opacity 0.3s ease-in-out;
    overflow: hidden;
}

.collapse {
    height: 0;
    opacity: 0;
    transition: height 0.9s ease;
}


    .collapse.show {
        height: auto;
        opacity: 1;
    }


/* ======================== */
/* BASE BUTTON              */
/* ======================== */

.btn-spt {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    font-family: 'Gothic A1', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    padding: 16px 24px;
    border: none;
    border-radius: 32px;
    cursor: pointer;
    transition: background 0.3s ease, transform 0.1s ease;
    text-align: center;
    text-decoration: none;
    user-select: none;
}
/*BOTON PARA LOS ICONOS DE CLIENTES*/
.btn-spt-acciones-cliente {
    box-sizing: border-box;
    font-size:20px;
    padding: 12px;
    gap: 10px;
    width: 62px;
    height: 44px;
    background: rgba(50, 153, 229, 0.1);
    border: 0.7px solid #3299E5;
    border-radius: 8px;
    flex: none;
    order: 2;
    flex-grow: 1;
}
    .btn-spt-acciones-cliente:disabled {
        /* Frame 101 */
        /* Auto layout */
        padding: 12px;
        gap: 10px;
        width: 46.4px;
        height: 44px;
        background: #D1D5DB;
        border: 0.7px solid #D1D5DB;
        border-radius: 8px;
        flex: none;
        order: 3;
        flex-grow: 1;
    }
    button:disabled .btn-icon-color,
    .btn:disabled .btn-icon-color,
    .btn[disabled] .btn-icon-color {
        color: #6B7280 /* mismo gris que us�s en el bot�n disabled */
    }

.btn-icon-color {
    width: 20px;
    height: 20px;
    flex: none;
    color: #3299E5;
    order: 0;
    flex-grow: 0;
}

.popup-mode .modal-content {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centra horizontalmente los elementos dentro del popup */
    justify-content: center; /* Centra verticalmente los elementos dentro del popup */
}

.popup-mode.sa-open {
    display: block;
}

.popup-mode .datepicker {
    width: 100%; /* Ajusta el ancho al contenedor del popup */
    max-width: 250px; /* Limita el ancho m�ximo */
    margin: 0 auto; /* Centra el componente horizontalmente */
    box-sizing: border-box; /* Asegura que el padding no afecte el ancho */
}

.card-clickable {
    cursor: pointer;
}

.flex-basis-48 {
    flex: 1 1 48px;
}

.card-lift-click {
    cursor: pointer;
    transition: transform .2s;
}

.card-lift-click:hover {
    transform: scale(1.02);
    box-shadow: 0 12px 22px rgba(16, 24, 40, 0.12);
}

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

.list-scroll-65 {
    max-height: 65vh;
    overflow-y: auto;
}

.min-h-100 {
    min-height: 100px;
}

.gym-logo-image {
    border-radius: 50px;
}

.gym-list-content {
    margin-bottom: 110px;
}

.dep-color-wrap {
    display: flex;
    align-items: center;
}

.dep-color-box {
    width: 20px;
    height: 20px;
    background-color: var(--dep-color, #cccccc);
    border: 1px solid #ccc;
    margin-right: 10px;
}

.rounded-1rem {
    border-radius: 1rem;
}

.caja-spinner-min {
    min-height: 300px;
}

.caja-open-modal {
    display: block;
    background: rgba(0, 0, 0, 0.5);
    z-index: 5002;
}

.caja-open-modal .modal-dialog {
    position: relative;
    z-index: 5003;
}

.caja-table-scroll-500 {
    max-height: 500px;
    overflow-y: auto;
}

.caja-table-scroll-600 {
    max-height: 600px;
    overflow-y: auto;
}

.caja-table-scroll-500 thead th,
.caja-table-scroll-600 thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #f8fafc;
}

.caja-col-48 {
    width: 48px;
}

.caja-col-120 {
    width: 120px;
}

.caja-col-140 {
    width: 140px;
}

.caja-col-160 {
    width: 160px;
}

.caja-nowrap {
    white-space: nowrap;
}

.caja-date-sm {
    font-size: 0.85rem;
}

.caja-max-200 {
    max-width: 200px;
}

.caja-numeric {
    font-variant-numeric: tabular-nums;
}

.caja-numeric tr:hover td {
    background-color: #f8fbff;
}

.caja-open-modal .modal-content {
    border-radius: 14px;
    border: 1px solid #dbe3ef;
    box-shadow: 0 22px 48px rgba(15, 23, 42, 0.3);
}
/* ======================== */
/* COLOR VARIANTS           */
/* ======================== */

.btn-spt-primary {
    background: #3299E5;
    color: white;
}

    .btn-spt-primary:active {
        background: linear-gradient(44.46deg, #7f2ea4 10%, #c933cc 86.44%);
        transform: scale(0.97);
    }

.btn-spt-secondary {
    background: #6516B7;
    color: white;

}

    .btn-spt-secondary:active {
        background: #4c1290;
    }

.btn-spt-outline {
    background: transparent;
    border: 2px solid #636BE9;
    color: #636BE9;
}

    .btn-spt-outline:hover {
        background: #636BE9;
        color: white;
    }

    .btn-spt-outline:active {
        background: #6516B7;
    }

.btn-spt-success {
    background: linear-gradient(44.46deg, #16B77E 10%, #45F4C2 86.44%);
    color: white;
}

    .btn-spt-success:active {
        transform: scale(0.97);
    }

.btn-spt-danger {
    background: linear-gradient(44.46deg, #B71616 10%, #F44545 86.44%);
    color: white;
}

    .btn-spt-danger:active {
        transform: scale(0.97);
    }

.btn-spt:disabled,
.btn-spt-disabled {
    background: #C0C0C0;
    color: #FFFFFF;
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}
.btn-spt-third {
    /* Button */
    color: #3299E5;
    box-sizing: border-box;
    /* Auto layout */
    background: white;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 12px 32px;
    gap: 8px;
    border: 1px solid #3299E5;
    border-radius: 32px;
}

/* ======================== */
/* SIZE VARIANTS            */
/* ======================== */

.btn-spt-sm {
    padding: 8px 14px;
    font-size: 13px;
    height: 36px;
    min-width: 100px;
}

.btn-spt-md {
    padding: 14px 20px;
    font-size: 15px;
    height: 44px;
    min-width: 160px;
}

.btn-spt-lg {
    padding: 20px 28px;
    font-size: 18px;
    height: 60px;
    min-width: 220px;
}

.btn-spt-full {
    width: 100% !important;
}

/* ======================== */
/* ICON BUTTON              */
/* ======================== */

.btn-spt-icon {
    width: 56px;
    height: 56px;
    padding: 0;
    border-radius: 50%;
    font-size: 24px;
    justify-content: center;
    align-items: center;
    background: linear-gradient(44.46deg, #45CAF4 10%, #636BE9 86.44%);
    color: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
}

    .btn-spt-icon:hover {
        transform: scale(1.05);
    }
.form-control {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 8px 12px;
    gap: 8px;
    width: 328px;
    height: 40px;
    border: 2px medium rgb(0,0,0);
    border-radius: 26px;
   
}

    .form-control:focus {
    }
        .product-card {
    width: 351px;
    height: 163.48px;
    border-radius: 20px;
    background: linear-gradient(167.4deg, rgba(54, 62, 81, 0.6) 25.94%, rgba(25, 30, 38, 0.6) 68.26%);
    backdrop-filter: blur(30px);
    position: relative;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;
}

/* �cono del coraz�n */
.product-heart {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 24px;
    height: 24px;
}

    .product-heart img {
        width: 100%;
        height: 100%;
    }

/* Imagen del producto */
.product-image {
    position: absolute;
    top: -13px;
    left: 5px;
    width: 123.5px;
    height: 130px;
}

    .product-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

/* Info del producto (texto) */
.product-info {
    position: absolute;
    bottom: 16px;
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: white;
    font-family: 'Poppins', sans-serif;
}

.product-category {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: -0.3px;
}

.product-title {
    font-size: 15px;
    font-weight: 700;
    margin: 0;
    letter-spacing: -0.3px;
}

.product-price {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: -0.3px;
}
/*************************************CARDS**********************************/
/***************************Card***********************/
.card {
    background-color: #fff;
    border-radius: 16px;
    padding: 16px;
    margin: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.sub-card {
    background-color: #f9f9f9;
    border-radius: 10px;
    padding: 12px;
    margin-top: 8px;
    border: 1px solid #ddd;
}

.collapsible details summary {
    cursor: pointer;
    font-weight: bold;
    margin-top: 10px;
}

.header {
    padding: 16px;
    background-color: #eeeeee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
/**************************Card Cliente****************/
.card-cliente {
    background-color: #fff;
    border-radius: 16px;
    padding: 16px;
    margin: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    box-sizing: border-box;
    transition: box-shadow 0.2s ease-in-out;
}

    .card-cliente:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    }

.divImgCliente {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 12px;
}

.imgcliente {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #ddd;
}

.spt-label {
    font-weight: 500;
    font-size: 13px;
    color: #444;
    margin-right: 6px;
}

.spt-value {
    font-weight: 400;
    font-size: 13px;
    color: #000;
}

.estado-activo {
    color: #28a745;
    font-weight: bold;
}

.estado-pausado {
    color: #ffc107;
    font-weight: bold;
}

.estado-cancelado,
.estado-expirado {
    color: #dc3545;
    font-weight: bold;
}

.estado-espera {
    color: #17a2b8;
    font-weight: bold;
}

.badge-membresia {
    font-size: 11px;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
    text-transform: uppercase;
}

/* Botones dentro de la card (expandido) */
.card-cliente .btn {
    justify-content: center;
    align-items: center;
    height: 38px;
    padding: 0;
    border-radius: 10px;
}

/* Para los �conos de acciones custom */
.card-cliente .btn img {
    width: 20px;
    height: 20px;
}

.card-cliente .row.g-2 {
    gap: 8px;
}
.btn-whatsapp {
    background-color: #25D366; /* verde WhatsApp */
    color: white;
    border: none;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 38px;
    font-size: 18px;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

    .btn-whatsapp:hover:not(:disabled) {
        background-color: #1ebe57;
        color: white;
    }

    /* Si us�s Bootstrap Icons con WhatsApp, el icono queda blanco autom�ticamente con color: white */
    .btn-whatsapp i {
        color: white;
    }
.d-flex.gap-2 > button {
    flex: 1 1 48px; /* cada bot�n ocupa 48px de base y puede crecer */
    padding: 6px 8px;
    font-size: 14px;
    border-radius: 8px;
}

/**************************CARD INFO******************/
.cardinfo {
    width: 100%; /* O el ancho deseado */
    height: auto;
    background: linear-gradient(44.46deg, rgba(255, 255, 255, 0.05) 10%, rgba(255, 255, 255, 0.05) 86.44%);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    /*transform: skewY(-4deg);*/
    overflow: hidden;
    position: relative;
    margin: 2rem auto;
    box-shadow: 5px -8px 24px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.cardinfo:hover {
    /*transform: skewY(-4deg) scale(1.02);*/
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3);
}

.cardinfo__content {
    /*transform: skewY(4deg);*/
    padding: 1rem;
    font-family: 'Poppins', sans-serif;
    color: #2c2c2c; /* Gris oscuro legible */
}

.cardinfo__title {
    font-size: 20px;
    font-weight: 600;
    margin: 0 0 1rem;
    text-align: center;
    color: #1e1e1e;
}

.cardinfo__label {
    margin: 0.2rem 0;
    font-size: 15px;
    color: #2c2c2c;
}

.cardinfo__value {
    opacity: 0.6;
    font-weight: 400;
    margin-left: 0.25rem;
    color: #444;
}

.cardinfo__icon {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
}

.cardinfo__icon img {
    width: 24px;
    height: 24px;
    opacity: 0.7;
}
.cardinfo__info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem; /* Espaciado entre las secciones */
    margin-bottom:10px;
}

.cardinfo__info-item {
    font-size: 15px;
    color: #2c2c2c;
    display: flex;
    justify-content: space-between;
}

.cardinfo__info-label {
    font-weight: bold;
    margin-right: 0.5rem;
}

.cardinfo__info-value {
    opacity: 0.7;
}
.cardinfo__buttons {
    display: flex;
    gap: 0.5rem; /* Espaciado entre los botones */
    justify-content: flex-start; /* Alineaci�n horizontal */
    flex-wrap: wrap; /* Permite que los botones se ajusten si no caben en una l�nea */
}
/**********CARD INFO***********************/
/**********CARD DATA***********************/
.card-data {
    width: 165px;
    height: 150px;
    position: relative;
}

.card-data-background {
    width: 165px;
    height: 160px;
    background-color: white;
    border-radius: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(30px);
    box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.2);
    transform: skewY(-5deg);
    position: relative;
}



.card-data-frame {
    width: 112px;
    height: 15.85px;
    position: absolute;
    left: 25px;
    top: 69.37px;
}

.card-data-title {
    width: 140px;
    height: 60px;
    position: absolute;
    left: 13px;
    top: 79px;
    text-align: center;
    color: #111827;
    font-size: 16px;
    line-height: 21px;

    font-family: 'DM Sans';
    font-weight: 500;
    word-wrap: break-word;
}



.card-data-number {
    width: 129px;
    height: 58px;
    position: absolute;
    left: 18px;
    top: 21px;
    text-align: center;
    display: flex;
    justify-content: center;
    flex-direction: column;
    color: #5062F5;
    font-size: 32px;
    font-family: 'Poppins', sans-serif;
    font-weight: 700;
    word-wrap: break-word;
}

/*****************************CARDS******************************/


/****************************INPUTS*******************************/
.input-dark-container {
    width: 350px;
    height: 44px;
    position: relative;
}

.input-dark {
    width: 100%;
    height: 100%;
    padding: 12px;
    background: #242C3B;
    box-shadow: inset 4px 10px 30px #191E29;
    border-radius: 8px;
    border: none;
    color: white;
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    outline: none;
}

/* Contenedor principal */
#clasesScroller {
    position: relative;
}

/* Fila scrollable */
#clasesTrack.scroller-track {
    display: flex;
    gap: 12px; /* espacio entre cards */
    overflow-x: auto; /* scroll horizontal */
    padding: 8px 0 8px 4px;
    scroll-snap-type: x proximity; /* que �encastre� cerca de cada card */
    -webkit-overflow-scrolling: touch;
}

/* Cada card: ancho fijo + snap */
#clasesTrack .card-wrap {
    flex: 0 0 185px;
    scroll-snap-align: start;
}

#clasesTrack .card_princ {
    margin: 0 !important;
}
/* sin margen propio */

/* Botones de navegaci�n */
#clasesScroller .btn-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    cursor: pointer;
    z-index: 2;
}

#clasesScroller .btn-prev {
    left: -8px;
}

#clasesScroller .btn-next {
    right: -8px;
}

/* Ocultar flechas en mobile */
@media (max-width: 767.98px) {
    #clasesScroller .btn-nav {
        display: none !important;
    }
}
/* Box-sizing aplicado SOLO al componente card_princ */
.card_princ,
.card_princ *,
.card_princ *::before,
.card_princ *::after {
    box-sizing: border-box;
}

/* Body de demo (pod�s usarlo solo en la p�gina de pruebas) */
.card_princ_body {
    font-size: 14px;
    font-family: "DM Sans", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    background: #fff; /* contraste si la card se muestra sola */
    padding: 10px;
}

/* Card base */
.card_princ {
    position: relative;
    width: 185px;
    min-height: 198px;
    padding: 16px;
    margin: 16px;
    border-radius: 16px;
    overflow: hidden;
    color: #fff;
    background-color: #2347a5;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-image:
        linear-gradient(155deg, rgba(24, 71, 180, 0.92) 0%, rgba(55, 120, 220, 0.88) 52%, rgba(28, 58, 148, 0.95) 100%),
        var(--card_princ-bg, none);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Variante (puede definir un fondo distinto por disciplina) */
.card_princ--principal-clase {
    --card_princ-bg: radial-gradient(circle at 18% 22%, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0) 40%);
}

.card_princ--placeholder {
    background-image: linear-gradient(155deg, rgba(71, 85, 105, 0.95) 0%, rgba(100, 116, 139, 0.9) 100%);
}

/* Header */
.card_princ__header {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 42px;
}

.card_princ__icon {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: #fff;
    flex: 0 0 24px;
    display: none; /* mu�stralo si lo necesit�s */
}

.card_princ__icon-inner {
    width: 100%;
    height: 100%;
    border-radius: inherit;
}

.card_princ__title {
    font-weight: 800;
    font-size: 18px; /* 32px en 185px de ancho se corta */
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Footer */
.card_princ__footer {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
}

/* Chip disponibilidad (100% ancho) */
.chip--disp {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 4px 10px;
    width: 100%;
    background: rgba(255,255,255,0.16);
    border-radius: 16px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Contenedor de fecha/hora */
.chips {
    display: flex;
    width: 100%;
    justify-content: space-between; /* date a la izq, time al borde derecho */
    gap: 6px;
    min-width: 0;
}

.chip {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.28);
    border-radius: 16px;
    line-height: 1;
    white-space: nowrap;
    min-width: 0;
}

.chip__text {
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.desk-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.desk-header {
    flex: 0 0 auto;
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
}

.desk-body {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    min-height: 0;
}

.desk-sidebar {
    border-right: 1px solid #eee;
    padding: 12px;
    overflow: auto;
}

.desk-content {
    overflow: auto;
}

.desk-footer {
    flex: 0 0 auto;
    border-top: 1px solid #eee;
    padding: 8px 16px;
    font-size: .9rem;
    color: #666;
}

.asistencia-card-mobile {
    border: 1px solid #e0e0e0;
    border-radius: 0.75rem;
    padding: 0.8rem 1rem;
    background-color: #ffffff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.asistencia-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.asistencia-card-nombre {
    font-weight: 600;
    font-size: 1rem;
}

/* Estado de asistencia más grande */
.asistencia-card-estado .badge {
    font-size: 0.9rem;
    padding: 0.35rem 0.55rem;
    border-radius: 999px;
}

/* Contenedor de botones: fila con 3 columnas iguales */
.asistencia-card-actions {
    display: flex;
    justify-content: space-between;
    gap: 0.45rem;
    margin-top: 0.5rem;
}

/* Cada botón ocupa 1/3 del ancho (flex:1) y es más grande */
.asistencia-card-actions .asistencia-btn-mobile {
    flex: 1;
    height: 2.7rem;          /* un poco más altos */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;    /* estilo pill redondeado */
}

/* Icono un poco más grande en mobile */
.asistencia-card-actions .asistencia-btn-mobile i {
    font-size: 1.1rem;
}

/* Layout general */
.res-calendario-layout {
    display: flex;
    height: calc(100vh - 80px); /* ajustá según tu header */
    background: #f9fafb;
}

/* Sidebar */
.res-sidebar {
    width: 320px;
    background: #ffffff;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}

.res-sidebar-header {
    padding: 1.5rem;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.res-sidebar-icon {
    padding: 0.5rem;
    background: #2563eb;
    border-radius: 0.75rem;
    color: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.res-sidebar-title {
    font-size: 18px;
    margin: 0;
    font-weight: 600;
    color: #111827;
}

.res-sidebar-subtitle {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: #4b5563;
}

.res-sidebar-body {
    padding: 1.5rem;
    overflow-y: auto;
    flex: 1 1 auto;
}

/* Tarjeta draggable (equivalente a SidebarReserva) */
.sidebar-reserva {
    background: #ffffff;
    border: 2px solid #e5e7eb;
    border-left-width: 4px;
    border-left-color: #3b82f6; /* color base de las reservas */
    border-radius: 0.75rem;
    padding: 0.75rem;
    cursor: move;
    transition: box-shadow 0.15s ease;
}

.sidebar-reserva:hover {
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.07);
}

.sidebar-reserva-body {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.sidebar-reserva-grip {
    width: 16px;
    font-size: 0.75rem;
    color: #9ca3af;
    margin-top: 2px;
}

.sidebar-reserva-content {
    flex: 1 1 auto;
    min-width: 0;
}

.sidebar-reserva-title-row {
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.sidebar-reserva-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-reserva-draggable {
    user-select: none;
    cursor: grab;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 10px;
    margin-bottom: 8px;
}

.sidebar-reserva-meta {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.sidebar-reserva-meta-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #4b5563;
}

.sidebar-reserva-meta-icon {
    font-size: 0.8rem;
}

/* Footer del sidebar */
.res-sidebar-footer {
    padding: 1.5rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 0.875rem;
    color: #4b5563;
}

.res-sidebar-tip-title {
    margin: 0 0 0.35rem;
    font-weight: 500;
}

.res-sidebar-tip-text {
    margin: 0;
}

/* Main */
.res-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Header superior (equivalente al header de CalendarContainer) */
.res-main-header {
    background: #ffffff;
    border-bottom: 1px solid #e5e7eb;
    padding: 0.75rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.res-main-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.res-main-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
    color: #111827;
}

.res-main-header-right {
    display: flex;
    gap: 0.5rem;
}

/* Botones */
.res-btn-primary {
    border: none;
    border-radius: 0.5rem;
    padding: 0.4rem 1.1rem;
    background: #2563eb;
    color: #ffffff;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

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

.res-nav-buttons {
    display: flex;
    gap: 0.25rem;
}

.res-btn-icon {
    border: none;
    border-radius: 0.5rem;
    padding: 0.35rem 0.7rem;
    background: transparent;
    cursor: pointer;
    color: #374151;
    transition: background-color 0.15s ease;
}

.res-btn-icon:hover {
    background: #f3f4f6;
}

/* Botones de cambio de vista: Día / Semana / Lista */
.res-view-btn {
    padding: 6px 14px;
    margin-left: 6px;

    border: 1px solid #d0d5dd;
    border-radius: 999px;

    background-color: #ffffff;
    color: #344054;

    font-size: 0.85rem;
    font-weight: 500;
    line-height: 1;

    cursor: pointer;

    /* Animación suave al cambiar de estado */
    transition:
        background-color 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        box-shadow 0.15s ease;
}

/* Hover cuando NO están activos */
.res-view-btn:hover {
    background-color: #f3f4f6;
    border-color: #c4c4c4;
}

/* Estado activo (botón seleccionado) */
.res-view-btn.res-view-btn-active {
    background-color: #2563eb;   /* azul */
    border-color: #2563eb;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25);
}

/* Hover cuando están activos */
.res-view-btn.res-view-btn-active:hover {
    background-color: #1d4ed8;
    border-color: #1d4ed8;
}

/* Accesibilidad: foco con teclado */
.res-view-btn:focus-visible {
    outline: none;
    box-shadow:
        0 0 0 1px #ffffff,
        0 0 0 3px rgba(37, 99, 235, 0.6);
}

/* Contenedor calendario */
.res-main-calendar-wrapper {
    padding: 2rem;
    flex: 1 1 auto;
}

.res-main-calendar {
    background: #ffffff;
    border-radius: 0.75rem;
    box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.06);
    padding: 0.75rem;
}

/* EVENTOS (equivalente EventContent) */
.fc-event.res-event {
    padding: 0;
    border: none;
}

.res-event-inner {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 0.1rem 0.25rem;
    font-size: 0.75rem;
}

.res-event-main-row {
    display: flex;
    justify-content: space-between;
    gap: 0.25rem;
}

.res-event-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.res-event-extra {
    margin-top: 0.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    opacity: 0.9;
}

.res-event-extra-row {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

.res-event-remove {
    opacity: 0;
    border: none;
    background: rgba(255,255,255,0.2);
    border-radius: 999px;
    width: 16px;
    height: 16px;
    font-size: 11px;
    line-height: 16px;
    text-align: center;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.fc-event.res-event:hover .res-event-remove {
    opacity: 1;
}

.res-event-remove:hover {
    background: rgba(255,255,255,0.4);
}

/* FullCalendar Custom Styles */
.fc {
    font-family: inherit;
}

.fc .fc-button {
    background-color: #3b82f6;
    border-color: #3b82f6;
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    text-transform: none;
    font-size: 0.875rem;
}

.fc .fc-button:hover:not(:disabled) {
    background-color: #2563eb;
    border-color: #2563eb;
}

.fc .fc-button-active {
    background-color: #1d4ed8 !important;
    border-color: #1d4ed8 !important;
}

.fc .fc-button:focus {
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
}

.fc .fc-toolbar-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #111827;
}

.fc-theme-standard .fc-scrollgrid {
    border-color: #e5e7eb;
}

.fc-theme-standard td,
.fc-theme-standard th {
    border-color: #e5e7eb;
}

.fc .fc-col-header-cell {
    background-color: #f9fafb;
    font-weight: 600;
    color: #374151;
    padding: 0.75rem 0;
}

.fc .fc-daygrid-day-number {
    color: #374151;
    font-weight: 500;
    padding: 0.5rem;
}

.fc .fc-daygrid-day.fc-day-today {
    background-color: #eff6ff !important;
}

.fc .fc-timegrid-slot {
    height: 3rem;
}

.fc .fc-timegrid-slot-label {
    color: #6b7280;
    font-size: 0.875rem;
}

.fc .fc-event {
    border-radius: 0.375rem;
    padding: 0.125rem;
    cursor: pointer;
    font-size: 0.875rem;
    border-width: 1px;
}

.fc .fc-event:hover {
    opacity: 0.9;
}

.fc .fc-list-event:hover td {
    background-color: #f3f4f6;
}

.fc .fc-list-day-cushion {
    background-color: #f9fafb;
    font-weight: 600;
    color: #374151;
}

.fc .fc-list-event-time {
    color: #6b7280;
}

.fc .fc-list-event-title {
    color: #111827;
}

.fc-timegrid-event {
    overflow: hidden;
}

.fc-v-event .fc-event-main {
    color: white;
}

.fc .fc-timegrid-now-indicator-line {
    border-color: #ef4444;
    border-width: 2px;
}

.fc .fc-timegrid-now-indicator-arrow {
    border-color: #ef4444;
    border-width: 5px;
}

/* Custom Event Content */
.event-content {
    position: relative;
    height: 100%;
    width: 100%;
    padding: 0.125rem 0.25rem;
}

.event-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.25rem;
}

.event-details {
    flex: 1;
    min-width: 0;
}

.event-time-title {
    font-size: 0.75rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-info-row {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    opacity: 0.9;
    margin-top: 0.125rem;
}

.event-info-row svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.event-info-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.event-delete-btn {
    flex-shrink: 0;
    padding: 0.125rem;
    background-color: rgba(255, 255, 255, 0.2);
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.2s;
    display: none;
}

.fc-event:hover .event-delete-btn {
    display: block;
}

.event-delete-btn:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

.event-delete-btn svg {
    width: 12px;
    height: 12px;
    color: white;
}

/* Admin dashboard metrics */
.admin-dashboard-page .dashboard-top {
  margin-bottom: 1.4rem;
}

.admin-dashboard-page .dash-section {
  border-top: 1px solid #e8e8ef;
  padding-top: 1.25rem;
  margin-top: 5.2rem;
}

.admin-dashboard-page .dash-section-title {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}

.admin-dashboard-page .dash-section-title i {
  font-size: 1.2rem;
  color: #5c4fd3;
}

.admin-dashboard-page .dash-section-title h4 {
  margin: 0;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0d1b38;
}

.admin-dashboard-page .dash-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.admin-dashboard-page .dash-range {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.admin-dashboard-page .dash-range label {
  font-weight: 600;
  color: #334155;
  margin: 0;
}

.admin-dashboard-page .dash-range .form-control {
  min-width: 150px;
  border-radius: 0.75rem;
}

.admin-dashboard-page .dash-grid {
  display: grid;
  gap: 1rem;
}

.admin-dashboard-page .dash-grid-4 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.admin-dashboard-page .dash-grid-2 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.admin-dashboard-page .metric-card {
  background: #fff;
  border: 1px solid #e7e8f2;
  border-radius: 1rem;
  padding: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  min-height: 132px;
}

.admin-dashboard-page .metric-icon {
  width: 42px;
  height: 42px;
  border-radius: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.admin-dashboard-page .metric-content {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.admin-dashboard-page .metric-value {
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  color: #0b1730;
}

.admin-dashboard-page .metric-label {
  font-size: 1.15rem;
  font-weight: 600;
  color: #152544;
}

.admin-dashboard-page .metric-hint {
  color: #7c879c;
}

.admin-dashboard-page .bg-soft-success {
  background: #e8f8ef;
}

.admin-dashboard-page .bg-soft-warning {
  background: #fff5d7;
}

.admin-dashboard-page .bg-soft-danger {
  background: #ffe7e7;
}

.admin-dashboard-page .bg-soft-primary {
  background: #ece8ff;
}

.admin-dashboard-page .bg-soft-violet {
  background: #efe9ff;
}

.admin-dashboard-page .bg-soft-info {
  background: #e8f1ff;
}

.admin-dashboard-page .bg-soft-orange {
  background: #ffefe1;
}

.admin-dashboard-page .text-violet {
  color: #5a43d5;
}

.admin-dashboard-page .text-orange {
  color: #f16f18;
}

@media (min-width: 768px) {
  .admin-dashboard-page .dash-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .admin-dashboard-page .dash-grid-4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1400px) {
  .admin-dashboard-page .dash-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}