/* Front de clientes: ajustes sobre Metronic 8 y app-back.css (colores del tema en las variables de :root) */

body.app-front {
    background-color: #f5f8fa;
}

/* Márgenes laterales del contenido algo más amplios que los de Metronic (12px) en móvil y tablet */
body.app-front .container-xxl {
    padding-left: 1rem;
    padding-right: 1rem;
}

@media (min-width: 768px) {
    body.app-front .container-xxl {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Permite que el texto de un hijo flexible se ajuste en lugar de desbordar (Metronic no trae esta utilidad) */
.min-w-0 {
    min-width: 0;
}

/* Tarjetas para elegir el centro */
.tarjeta-centro {
    transition: box-shadow .15s ease-in-out, transform .15s ease-in-out;
}

.tarjeta-centro:hover {
    box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .1);
    transform: translateY(-2px);
}

.tarjeta-centro .logo-centro {
    height: 80px;
    object-fit: contain;
}

/* Calendario de reservas: en escritorio, rejilla de siete columnas; en móvil y tablet, un día cada vez */
.calendario-reservas {
    --alto-bloque: 3.6rem;
    --separacion-bloques: .5rem;
    --radio-bloque: .475rem;
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .75rem;
}

.calendario-reservas .calendario-dia {
    display: flex;
    flex-direction: column;
    gap: var(--separacion-bloques);
}

/* Selector de días (solo en móvil y tablet): siete botones con la letra, el día y un punto si hay huecos libres */
.calendario-selector-dias {
    display: none;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: .5rem;
}

.calendario-selector-dias .dia-selector {
    padding: .5rem .25rem;
    line-height: 1.2;
}

/* También al pasar por encima y con el foco, que en Metronic cambian el fondo de .btn-light */
.calendario-selector-dias .btn.dia-selector.activo,
.calendario-selector-dias .btn.dia-selector.activo:hover,
.calendario-selector-dias .btn.dia-selector.activo:focus,
.calendario-selector-dias .btn.dia-selector.activo:active {
    background-color: var(--color-principal) !important;
    color: var(--color-contraste) !important;
}

/* Cabecera del calendario (semana y navegación) y de cada día, con el color del tema */
.calendario-cabecera {
    background-color: var(--color-principal);
    color: var(--color-contraste);
}

.calendario-cabecera .btn-calendario-semana {
    background-color: rgba(255, 255, 255, .15);
    color: var(--color-contraste);
}

.calendario-cabecera .btn-calendario-semana:hover {
    background-color: rgba(255, 255, 255, .3);
    color: var(--color-contraste);
}

.calendario-cabecera .btn-calendario-semana.disabled {
    opacity: .35;
}

.calendario-reservas .calendario-dia-cabecera {
    background-color: var(--color-principalL10);
    color: var(--color-contraste);
    border-radius: var(--radio-bloque);
    margin-bottom: .25rem;
}

/* Todos los recuadros con el mismo alto y redondeado, y dos líneas centradas */
.calendario-reservas .bloque {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: var(--alto-bloque);
    margin: 0;
    padding: .25rem .5rem;
    line-height: 1.3;
    border-radius: var(--radio-bloque);
}

/* Huecos de los días con menos bloques: discretos, para completar la rejilla */
.calendario-reservas .bloque-hueco {
    border: 1px dashed var(--bs-gray-200);
}

/* Día sin horario: un recuadro que ocupa toda la columna */
.calendario-reservas .bloque-sin-horario {
    height: calc(var(--filas-calendario) * var(--alto-bloque) + (var(--filas-calendario) - 1) * var(--separacion-bloques));
    background-color: var(--bs-gray-100);
    border: 1px dashed var(--bs-gray-300);
    color: #526071;
}

/* Móvil y tablet: un día cada vez (después de las reglas de la rejilla, para prevalecer sobre ellas) */
@media (max-width: 991.98px) {
    .calendario-selector-dias {
        display: grid;
    }

    .calendario-reservas {
        display: block;
    }

    .calendario-reservas .calendario-dia {
        display: none;
    }

    /* El día elegido: sus bloques en dos columnas (tres desde 576px) y sin los huecos de relleno de la rejilla */
    .calendario-reservas .calendario-dia.activo {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--separacion-bloques);
    }

    .calendario-reservas .calendario-dia-cabecera,
    .calendario-reservas .bloque-sin-horario {
        grid-column: 1 / -1;
    }

    .calendario-reservas .bloque-hueco {
        display: none;
    }

    .calendario-reservas .bloque-sin-horario {
        height: auto;
        padding: 2rem 1rem;
    }
}

@media (min-width: 576px) and (max-width: 991.98px) {
    .calendario-reservas .calendario-dia.activo {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Modal de reserva: extras y formas de pago como opciones seleccionables */
.opcion-reserva,
.opcion-pago {
    border: 1px solid var(--bs-gray-300);
    border-radius: .475rem;
    cursor: pointer;
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.opcion-reserva:hover,
.opcion-pago:hover {
    border-color: var(--color-principal);
}

.opcion-reserva:has(input:checked) {
    border-color: var(--color-principal);
    background-color: var(--bs-gray-100);
}

.opcion-pago {
    color: var(--bs-gray-700);
}

.btn-check:checked + .opcion-pago {
    border-color: var(--color-principal);
    background-color: var(--color-principal);
    color: var(--color-contraste);
}

.btn-check:checked + .opcion-pago .text-muted {
    color: var(--color-contraste) !important;
    opacity: .8;
}

.btn-check:focus-visible + .opcion-pago {
    box-shadow: 0 0 0 .2rem rgba(0, 0, 0, .15);
}

/* Monedero: el campo del importe y los botones de la forma de pago, con el mismo alto */
.recarga-monedero .input-group,
.recarga-monedero .form-control,
.recarga-monedero .input-group-text,
.recarga-monedero .opcion-pago {
    height: 46px;
}

.recarga-monedero .input-group {
    flex-wrap: nowrap;
}

/* Mis reservas: fecha destacada de cada reserva */
.fecha-reserva {
    min-width: 72px;
    background-color: var(--color-principal);
    color: var(--color-contraste);
}

/* Monedero: tarjeta del saldo con el color del tema */
.tarjeta-saldo {
    background-color: var(--color-principal);
    color: var(--color-contraste);
}

/* Centro elegido en las páginas de acceso */
.centro-acceso {
    border: 1px dashed var(--color-principal);
}

/* ==========================================================================
   Sistema de estilo del front (referencia visual: prototipo de reservas municipales).
   Estructura de Metronic 8; el color principal sale de la configuración general (--color-principal).
   ========================================================================== */
body.app-front {
    --front-fondo: #f8fafc;
    --front-texto: #0f172a;
    --front-texto-suave: #475569;
    --front-borde: #e2e8f0;
    --front-exito: #057a55;
    --front-aviso: #f59e0b;
    --front-error: #e02424;
    --front-radio-control: .75rem;
    --front-radio-tarjeta: 1rem;
    --front-ancho-lateral: 270px;
    --front-alto-cabecera: 72px;
    --front-principal-suave: color-mix(in srgb, var(--color-principal) 10%, #fff);

    font-family: Inter, Helvetica, Arial, sans-serif;
    background-color: var(--front-fondo);
    color: var(--front-texto);
}

/* Barra lateral: fija en escritorio y cajón deslizante en móvil y tablet (drawer de Metronic) */
.front-sidebar {
    background: #fff;
    border-right: 1px solid var(--front-borde);
}

.front-sidebar.drawer-on {
    display: flex;
    flex-direction: column;
}

@media (min-width: 992px) {
    .front-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--front-ancho-lateral);
        z-index: 100;
    }

    .front-principal {
        margin-left: var(--front-ancho-lateral);
    }
}

/* Misma altura que la cabecera superior para que no haya escalón entre ambas */
.front-sidebar-logo {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    height: var(--front-alto-cabecera);
    padding: 0 1.5rem;
    border-bottom: 1px solid var(--front-borde);
}

.front-sidebar-nav {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: .5rem 0 1rem;
}

.front-sidebar-grupo {
    padding: 1.25rem 1.5rem .4rem;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #94a3b8;
}

.front-sidebar-item {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .1rem .75rem;
    padding: .65rem .9rem;
    border-radius: var(--front-radio-control);
    font-size: .95rem;
    font-weight: 500;
    color: var(--front-texto-suave);
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.front-sidebar-item i {
    width: 1.25rem;
    text-align: center;
    font-size: 1rem;
}

.front-sidebar-item:hover {
    background-color: #f1f5f9;
    color: var(--front-texto);
}

.front-sidebar-item.activo {
    background-color: var(--front-principal-suave);
    color: var(--color-principal);
    font-weight: 600;
}

.front-sidebar-pie {
    padding: 1rem;
    border-top: 1px solid var(--front-borde);
}


/* Cabecera superior con el título de la página, el centro y el usuario */
.front-cabecera {
    position: sticky;
    top: 0;
    z-index: 90;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    box-sizing: border-box;
    flex: 0 0 var(--front-alto-cabecera); /* no se encoge cuando la página es más alta que la ventana */
    height: var(--front-alto-cabecera);
    padding: 0 1rem;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--front-borde);
}

@media (min-width: 768px) {
    .front-cabecera {
        padding: 0 1.5rem;
    }
}

.front-cabecera-titulo {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--front-texto);
}

/* Tarjetas, botones, campos e insignias con las esquinas y la sombra del sistema */
body.app-front .card {
    border: 1px solid var(--front-borde);
    border-radius: var(--front-radio-tarjeta);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .05);
}

body.app-front .btn {
    border-radius: var(--front-radio-control);
    font-weight: 600;
}

body.app-front .form-control,
body.app-front .form-select {
    border-radius: var(--front-radio-control);
}

body.app-front .badge {
    border-radius: 999px;
    font-weight: 600;
}

/* Jerarquía tipográfica: título de pantalla, de sección y texto de apoyo */
body.app-front main h1 {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    color: var(--front-texto);
}

body.app-front main h2 {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.3;
}

body.app-front .text-muted {
    color: var(--front-texto-suave) !important;
}

/* Inicio: bloque de bienvenida con degradado del color principal y accesos rápidos */
.front-hero {
    padding: 1.75rem;
    border-radius: var(--front-radio-tarjeta);
    background: linear-gradient(135deg, var(--color-principal) 0%, var(--color-principalD20) 100%);
    color: #fff;
    box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--color-principal) 25%, transparent);
}

@media (min-width: 768px) {
    .front-hero {
        padding: 2rem 2.25rem;
    }
}

.front-hero-saludo {
    font-size: .85rem;
    font-weight: 500;
    opacity: .85;
}

.front-hero .front-hero-titulo {
    margin: .15rem 0 .35rem;
    font-size: 1.75rem;
    font-weight: 800;
    color: #fff;
}

.front-hero-texto {
    opacity: .9;
}

.front-hero-saldo {
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.1;
}

.front-hero .front-btn-translucido {
    background-color: rgba(255, 255, 255, .18);
    color: #fff;
}

.front-hero .front-btn-translucido:hover {
    background-color: rgba(255, 255, 255, .3);
    color: #fff;
}

.front-icono {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--front-radio-control);
    background-color: var(--front-principal-suave);
    color: var(--color-principal);
    font-size: 1.15rem;
}




.front-enlace {
    font-weight: 600;
    color: var(--color-principal);
}

.front-enlace:hover {
    color: var(--color-principalD20);
}

/* Fila de una reserva en el inicio */
.front-fila-reserva {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .75rem 1rem;
    border: 1px solid var(--front-borde);
    border-radius: var(--front-radio-control);
    transition: border-color .15s ease-in-out, background-color .15s ease-in-out;
}

.front-fila-reserva:hover {
    border-color: color-mix(in srgb, var(--color-principal) 35%, var(--front-borde));
    background-color: #f8fafc;
}

/* Reservar: indicador de pasos y tarjetas de deporte e instalación */
.front-pasos {
    display: flex;
    align-items: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
}

.front-paso {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    text-align: center;
}

/* Línea que une cada paso con el siguiente */
.front-paso:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 1.1rem;
    left: calc(50% + 1.5rem);
    right: calc(-50% + 1.5rem);
    height: 2px;
    background-color: var(--front-borde);
}

.front-paso.hecho:not(:last-child)::after {
    background-color: var(--color-principal);
}

.front-paso-numero {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 2px solid var(--front-borde);
    background-color: #fff;
    font-size: .85rem;
    font-weight: 700;
    color: var(--front-texto-suave);
}

.front-paso.hecho .front-paso-numero {
    border-color: var(--color-principal);
    background-color: var(--color-principal);
    color: var(--color-contraste);
}

.front-paso.activo .front-paso-numero {
    border-color: var(--color-principal);
    background-color: var(--color-principal);
    color: var(--color-contraste);
    box-shadow: 0 0 0 .25rem var(--front-principal-suave);
}

.front-paso-nombre {
    font-size: .75rem;
    font-weight: 500;
    color: var(--front-texto-suave);
}

.front-paso.activo .front-paso-nombre {
    font-weight: 700;
    color: var(--color-principal);
}

.front-tarjeta {
    transition: box-shadow .15s ease-in-out, transform .15s ease-in-out, border-color .15s ease-in-out;
}

.front-tarjeta:hover {
    border-color: color-mix(in srgb, var(--color-principal) 35%, var(--front-borde));
    box-shadow: 0 .5rem 1.25rem rgba(15, 23, 42, .08);
    transform: translateY(-2px);
}

.front-tarjeta-cabecera {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 8rem;
    background: linear-gradient(135deg, var(--front-principal-suave), color-mix(in srgb, var(--color-principal) 22%, #fff));
}

.front-tarjeta-cabecera-alta {
    height: 10.9rem;
}

/* Calendario: cabecera de la semana con el degradado del inicio y bloques con las esquinas del sistema */
.calendario-cabecera {
    background: linear-gradient(135deg, var(--color-principal) 0%, var(--color-principalD20) 100%);
}

.calendario-reservas {
    --radio-bloque: var(--front-radio-control);
}

/* Pestañas en forma de selector segmentado (Mis reservas) */
.front-pestanas {
    display: flex;
    padding: .25rem;
    border-radius: var(--front-radio-control);
    background-color: #eef2f6;
}

.front-pestana {
    flex: 1 1 0;
    padding: .55rem 1rem;
    border-radius: calc(var(--front-radio-control) - .15rem);
    text-align: center;
    font-size: .95rem;
    font-weight: 600;
    color: var(--front-texto-suave);
    transition: background-color .15s ease-in-out, color .15s ease-in-out;
}

.front-pestana:hover {
    color: var(--front-texto);
}

.front-pestana.activa {
    background-color: #fff;
    color: var(--color-principal);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .1);
}

/* Insignias de estado con contraste suficiente (verde, ámbar y rojo semánticos del sistema) */
body.app-front .badge-light-success {
    background-color: #def7ec;
    color: var(--front-exito);
}

body.app-front .badge-light-warning {
    background-color: #fdf3d6;
    color: #92400e;
}

body.app-front .badge-light-danger {
    background-color: #fde8e8;
    color: #c81e1e;
}

body.app-front .text-warning {
    color: #92400e !important;
}

/* Monedero: tarjeta del saldo con el degradado del inicio */
body.app-front .tarjeta-saldo {
    background: linear-gradient(135deg, var(--color-principal) 0%, var(--color-principalD20) 100%);
    color: var(--color-contraste);
    border: 0;
    box-shadow: 0 .5rem 1.5rem color-mix(in srgb, var(--color-principal) 25%, transparent);
}

/* Acceso (login, registro y recuperar contraseña): tarjeta centrada sobre un fondo con un velo del color principal */
.front-acceso {
    background: radial-gradient(60rem 28rem at 50% -8%, color-mix(in srgb, var(--color-principal) 12%, transparent), transparent);
}

.front-acceso-tarjeta {
    background-color: #fff;
    border: 1px solid var(--front-borde);
    border-radius: var(--front-radio-tarjeta);
    box-shadow: 0 .5rem 2rem rgba(15, 23, 42, .06);
}

.centro-acceso {
    border: 1px solid var(--front-borde);
    background-color: var(--front-principal-suave);
    border-radius: var(--front-radio-control);
}

/* Enlaces con el color de la marca */
body.app-front .link-primary {
    color: var(--color-principal) !important;
}

body.app-front .link-primary:hover {
    color: var(--color-principalD20) !important;
}

/* ==========================================================================
   Contraste (WCAG AA): los grises, verdes y rojos de Metronic quedan por debajo de 4,5:1 sobre blanco.
   Se sustituyen por los colores semánticos del sistema.
   ========================================================================== */
body.app-front .text-gray-500,
body.app-front .form-text {
    color: #526071 !important;
}

body.app-front .text-gray-600 {
    color: var(--front-texto-suave) !important;
}

body.app-front .text-success {
    color: var(--front-exito) !important;
}

body.app-front .text-danger {
    color: #c81e1e !important;
}

body.app-front .table thead th {
    color: var(--front-texto-suave);
}

.front-sidebar-grupo {
    color: #64748b;
}

body.app-front .btn-light-danger {
    background-color: #fde8e8;
    color: #c81e1e;
}

body.app-front .btn-light-danger:hover:not(.disabled) {
    background-color: var(--front-error);
    color: #fff;
}

body.app-front .btn-light-success {
    background-color: #def7ec;
    color: var(--front-exito);
}

body.app-front .btn-light-success:hover:not(.disabled) {
    background-color: var(--front-exito);
    color: #fff;
}

body.app-front .btn-light-warning {
    background-color: #fdf3d6;
    color: #92400e;
}

/* Bloques del calendario que no se pueden pulsar: sin la transparencia de .disabled, que resta contraste */
.calendario-reservas .bloque-ocupado,
.calendario-reservas .bloque-no-disponible {
    opacity: 1;
}

body.app-front .calendario-reservas .bloque-ocupado.btn {
    background-color: #fde8e8 !important;
    color: #c81e1e !important;
}

body.app-front .calendario-reservas .bloque-no-disponible.btn {
    background-color: #eef2f6 !important;
    color: #526071 !important;
}

.calendario-reservas .bloque-no-disponible span {
    color: inherit;
}