.aioshop-calendario-wrapper {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    font-size: 14px;
    background: #fafafa;
}

.aioshop-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.aioshop-topbar-left h3 {
    margin: 0 0 5px 0;
}

.aioshop-sede-selector-inline select {
    min-width: 160px;
}

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

.aioshop-datepicker label {
    margin-right: 4px;
}

.aioshop-datepicker input {
    padding: 4px 8px;
    min-width: 130px;
}

/* Tira semanal */
.aioshop-week-strip {
    display: flex;
    flex-wrap: nowrap;
    gap: 5px;
    margin: 10px 0 15px 0;
}

.aioshop-week-day {
    flex: 1;
    text-align: center;
    padding: 6px 4px;
    border-radius: 4px;
    text-decoration: none;
    border: 1px solid #ddd;
    background: #fff;
    font-size: 12px;
}

.aioshop-week-day.hoy {
    border-color: #0073aa;
}

.aioshop-week-day.activo {
    background: #0073aa;
    color: #fff;
}

/* Reservas del usuario como tarjetas */
.aioshop-reservas-usuario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 10px;
    margin-bottom: 15px;
}

.aioshop-reserva-card {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    padding: 8px 10px;
}

.aioshop-reserva-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}

.aioshop-reserva-pista {
    font-weight: 600;
}

.aioshop-reserva-estado {
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 12px;
    border: 1px solid #ccc;
}

/* Estados con colores */
.estado-confirmada,
.estado-pagada {
    background: #d1e7dd;
    border-color: #badbcc;
}

.estado-pendiente,
.estado-pendiente_pago {
    background: #fff3cd;
    border-color: #ffecb5;
}

.estado-cancelada {
    background: #f8d7da;
    border-color: #f5c2c7;
}

.estado-bloqueada_admin {
    background: #e2e3e5;
    border-color: #d3d6d8;
}

.aioshop-reserva-fecha {
    font-size: 13px;
    margin-bottom: 4px;
}

.aioshop-reserva-acciones {
    text-align: right;
}

.aioshop-btn-cancelar {
    background: #d9534f;
    border-color: #d43f3a;
    color: #fff !important;
}

/* Grid de pistas como tarjetas */
.aioshop-pistas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
    margin-top: 10px;
}

.aioshop-pista-card {
    border: 1px solid #ddd;
    border-radius: 6px;
    background: #fff;
    display: flex;
    flex-direction: column;
}

.aioshop-pista-card-header {
    padding: 8px 10px;
    border-bottom: 1px solid #eee;
}

.aioshop-pista-nombre {
    font-weight: 600;
}

.aioshop-pista-tipo {
    font-size: 12px;
    color: #555;
}

.aioshop-pista-card-body {
    padding: 8px 10px 10px 10px;
}

/* Slots como botones */
.aioshop-slots-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.aioshop-slot {
    display: inline-block;
    padding: 4px 6px;
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    min-width: 46px;
    text-align: center;
}

.aioshop-slot.libre {
    background: #e3f7e3;
    border: 1px solid #8bc34a;
    color: #000;
}

.aioshop-slot.ocupado {
    background: #f8d7da;
    border: 1px solid #f5c2c7;
    color: #7f1d1d;
}

.aioshop-slot.bloqueado {
    background: #e2e3e5;
    border: 1px solid #d3d6d8;
    color: #555;
}

.aioshop-msg-ok {
    background: #d1e7dd;
    border: 1px solid #badbcc;
    padding: 8px;
    margin-bottom: 10px;
}

/* Iconos SVG/emoji via clases */
.aioshop-ico-pista::before {
    content: '\1F3DF'; /* estadio / pista */
    margin-right: 4px;
}
.aioshop-ico-fecha::before {
    content: '\1F4C5'; /* calendario */
    margin-right: 3px;
}
.aioshop-ico-hora::before {
    content: '\23F0'; /* reloj despertador */
    margin-right: 3px;
}
.aioshop-ico-euro::before {
    content: '\20AC'; /* símbolo euro */
    margin-right: 3px;
}

/* Ajustes pequeños para texto y alineación */
.aioshop-reserva-pista,
.aioshop-pista-nombre {
    display: flex;
    align-items: center;
    gap: 3px;
}

/* Imagen destacada en la tarjeta de pista */
.aioshop-pista-imagen {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    display: block;
}

/* Slot de hora en pasado (día anterior u hora pasada de hoy) */
.aioshop-slot.pasado {
    background: #f0f0f0;
    border: 1px solid #d0d0d0;
    color: #999;
    cursor: default;
}

/* Banner de sede con relación 16:9 y overlay de título */
.aioshop-sede-banner-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    margin: 12px 0 20px 0;
}

.aioshop-sede-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.aioshop-sede-banner-overlay {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    padding: 12px 16px;
    background: linear-gradient(to top, rgba(0,0,0,0.75), transparent);
    color: #fff;
    box-sizing: border-box;
}

.aioshop-sede-banner-title {
    font-size: 18px;
    font-weight: 600;
}

.aioshop-sede-banner-desc {
    font-size: 13px;
    margin-top: 2px;
}


/* Ocultar reservas canceladas en frontend */
.aioshop-reserva-card .estado-cancelada,
.aioshop-reserva-card.estado-cancelada,
.estado-cancelada,
.aioshop-reserva-card[data-estado="cancelada"] {
    display: none !important;
}


.aioshop-auth-box {
    border: 1px solid #ddd;
    padding: 16px;
    margin-bottom: 20px;
    max-width: 420px;
    background: #fafafa;
}

.aioshop-auth-box h3 {
    margin-top: 0;
    margin-bottom: 12px;
}

.aioshop-register-link {
    margin-top: 8px;
}


#aioshop-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 99999;
}

#aioshop-modal {
    background: #ffffff;
    border-radius: 10px;
    max-width: 360px;
    width: 90%;
    padding: 18px 20px 16px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.25);
    text-align: center;
    font-family: inherit;
}

.aioshop-modal-icon {
    font-size: 32px;
    margin-bottom: 8px;
}

.aioshop-modal-message {
    font-size: 15px;
    margin-bottom: 14px;
    white-space: pre-line;
}

.aioshop-modal-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}

.aioshop-modal-btn {
    border: none;
    border-radius: 999px;
    padding: 7px 16px;
    font-size: 14px;
    cursor: pointer;
}

.aioshop-modal-confirm {
    background: #0073aa;
    color: #fff;
}

.aioshop-modal-cancel {
    background: #e2e2e2;
    color: #333;
}


/* Force small titles */
.aioshop-reservas-titulo,
.aioshop-disponibilidad-titulo {
    font-size: 16px !important;
    font-weight: 600 !important;
    margin: 10px 0 !important;
    line-height: 1.2em !important;
}

/* QR dentro de la tarjeta de reserva */
.aioshop-reserva-qr {
    margin-top: 10px;
    text-align: right;
}

.aioshop-reserva-qr-img {
    max-width: 80px;
    height: auto;
    cursor: pointer;
    border-radius: 4px;
    box-shadow: 0 0 4px rgba(0,0,0,0.15);
}

/* Overlay para ampliar el QR */
#aioshop-qr-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#aioshop-qr-overlay img {
    max-width: 90vw;
    max-height: 90vh;
    display: block;
}

#aioshop-qr-overlay-close {
    position: absolute;
    top: 12px;
    right: 16px;
    font-size: 32px;
    line-height: 1;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
}



/* Slots con capacidad (opción C) */
.aioshop-slots-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.aioshop-slot-multi-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.aioshop-slot-multi {
    background: #f7f7f7;
    border-radius: 6px;
    padding: 6px 8px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}

.aioshop-slot-multi-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
    margin-bottom: 4px;
}

.aioshop-slot-hora {
    font-weight: 600;
}

.aioshop-slot-estado {
    font-size: 12px;
}

.aioshop-slot-seats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.aioshop-slot-seat {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    border: 1px solid rgba(0,0,0,0.15);
    box-shadow: 0 1px 1px rgba(0,0,0,0.05);
}

.aioshop-slot-seat.seat-libre {
    background: #ffffff;
}

.aioshop-slot-seat.seat-ocupado {
    background: #ffc66e;
}

.aioshop-slot-multi.aioshop-slot-disponible {
    background: #e8f9e8;
}

.aioshop-slot-multi.aioshop-slot-completo {
    background: #ffecec;
}

.aioshop-slot-multi.aioshop-slot-bloqueado {
    background: #e6e6e6;
}


/* --- Vista móvil: las pistas se pliegan/despliegan --- */
@media (max-width: 768px) {
    .aioshop-pista-card {
        border-radius: 10px;
        overflow: hidden;
    }

    .aioshop-pista-card-header {
        cursor: pointer;
    }

    .aioshop-pista-card-body {
        display: none;
    }

    .aioshop-pista-card.aioshop-pista-open .aioshop-pista-card-body {
        display: block;
    }
}


/* =========================================================
   Rediseño premium mobile-first v3.7.8
   ========================================================= */
.aioshop-calendario-wrapper,
.aioshop-auth-box {
    --aioshop-bg: #f5f4f1;
    --aioshop-surface: #ffffff;
    --aioshop-surface-2: #f8f8fb;
    --aioshop-ink: #22244f;
    --aioshop-ink-soft: #666b85;
    --aioshop-line: #e7e8f0;
    --aioshop-primary: #6576ff;
    --aioshop-primary-dark: #25275f;
    --aioshop-success: #19b97a;
    --aioshop-danger: #e16d75;
    --aioshop-warning: #f1b44c;
    --aioshop-muted: #cfd4e2;
    --aioshop-shadow-soft: 0 12px 35px rgba(31, 36, 80, 0.08);
    --aioshop-shadow-card: 0 10px 24px rgba(29, 36, 78, 0.08);
    --aioshop-radius-xl: 28px;
    --aioshop-radius-lg: 22px;
    --aioshop-radius-md: 16px;
    --aioshop-radius-sm: 12px;
}

.aioshop-calendario-wrapper {
    max-width: 1180px;
    margin: 0 auto 24px;
    padding: 18px;
    border: 0;
    border-radius: 36px;
    background: linear-gradient(180deg, #faf9f6 0%, #f3f1ec 100%);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
    font-size: 14px;
}

.aioshop-calendario-wrapper h3,
.aioshop-auth-box h3,
.aioshop-reservas-titulo,
.aioshop-disponibilidad-titulo,
.aioshop-sede-banner-title {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: -0.02em;
    color: var(--aioshop-ink);
}

.aioshop-topbar {
    gap: 16px;
    margin-bottom: 16px;
    padding: 18px;
    border-radius: 24px;
    background: rgba(255,255,255,0.82);
    box-shadow: var(--aioshop-shadow-soft);
    backdrop-filter: blur(10px);
}

.aioshop-topbar-left h3 {
    margin: 0 0 10px;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1;
}

.aioshop-sede-selector-inline,
.aioshop-datepicker,
.aioshop-sede-selector {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.aioshop-sede-selector-inline select,
.aioshop-sede-selector select,
.aioshop-datepicker input,
.aioshop-auth-box input[type="text"],
.aioshop-auth-box input[type="password"] {
    min-height: 46px;
    padding: 0 14px;
    border-radius: 14px;
    border: 1px solid var(--aioshop-line);
    background: #fff;
    color: var(--aioshop-ink);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7);
}

.aioshop-datepicker label,
.aioshop-sede-selector label {
    margin-right: 2px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--aioshop-ink-soft);
}

.aioshop-calendario-wrapper .button,
.aioshop-calendario-wrapper button,
.aioshop-auth-box .button,
.aioshop-auth-box input[type="submit"] {
    min-height: 48px;
    padding: 0 20px;
    border: 0;
    border-radius: 999px;
    background: var(--aioshop-primary-dark);
    color: #fff;
    font-weight: 700;
    box-shadow: 0 12px 24px rgba(37, 39, 95, 0.18);
}

.aioshop-calendario-wrapper .button:hover,
.aioshop-calendario-wrapper button:hover,
.aioshop-auth-box .button:hover,
.aioshop-auth-box input[type="submit"]:hover {
    background: #1d1f4f;
    color: #fff;
}

.aioshop-sede-banner-wrap {
    margin: 14px 0 18px;
    border-radius: 28px;
    box-shadow: var(--aioshop-shadow-soft);
}

.aioshop-sede-banner-overlay {
    padding: 22px 24px;
    background: linear-gradient(to top, rgba(18,21,49,0.92), rgba(18,21,49,0.15));
}

.aioshop-sede-banner-title {
    font-size: clamp(24px, 4vw, 38px);
    line-height: 1;
}

.aioshop-sede-banner-desc {
    max-width: 720px;
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.45;
    color: rgba(255,255,255,0.9);
}

.aioshop-week-strip {
    gap: 10px;
    margin: 14px 0 18px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.aioshop-week-day {
    flex: 0 0 auto;
    min-width: 82px;
    padding: 12px 10px;
    border-radius: 16px;
    border: 1px solid var(--aioshop-line);
    background: rgba(255,255,255,0.95);
    color: var(--aioshop-ink);
    font-size: 12px;
    font-weight: 700;
    box-shadow: var(--aioshop-shadow-card);
}

.aioshop-week-day.hoy {
    border-color: rgba(101,118,255,0.45);
}

.aioshop-week-day.activo {
    background: var(--aioshop-primary-dark);
    border-color: var(--aioshop-primary-dark);
    color: #fff;
}

.aioshop-msg-ok {
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid rgba(25,185,122,0.18);
    border-radius: 18px;
    background: linear-gradient(180deg, #effcf7 0%, #e4f8ef 100%);
    color: #156848;
    font-weight: 600;
}

.aioshop-reservas-titulo,
.aioshop-disponibilidad-titulo {
    font-size: clamp(24px, 3vw, 34px) !important;
    line-height: 1.05 !important;
    margin: 18px 0 14px !important;
}

.aioshop-reservas-usuario-grid,
.aioshop-pistas-grid {
    gap: 16px;
}

.aioshop-reserva-card,
.aioshop-pista-card,
.aioshop-auth-box,
.aioshop-calendario-wrapper .aioshop-sede-selector {
    border: 1px solid rgba(231,232,240,0.95);
    border-radius: 24px;
    background: rgba(255,255,255,0.96);
    box-shadow: var(--aioshop-shadow-card);
}

.aioshop-auth-box {
    padding: 22px;
    max-width: 480px;
    background: linear-gradient(180deg, #faf9f6 0%, #f1efea 100%);
}

.aioshop-auth-box h3 {
    font-size: 34px;
    line-height: 1;
    margin-bottom: 14px;
}

.aioshop-auth-box .login-username,
.aioshop-auth-box .login-password,
.aioshop-auth-box .login-submit,
.aioshop-auth-box .forgetmenot {
    margin-bottom: 12px;
}

.aioshop-auth-box label {
    display: block;
    margin-bottom: 6px;
    color: var(--aioshop-ink);
    font-weight: 600;
}

.aioshop-auth-box .login-username input,
.aioshop-auth-box .login-password input {
    width: 100%;
}

.aioshop-register-link a {
    color: var(--aioshop-primary-dark);
    font-weight: 700;
}

.aioshop-reserva-card {
    padding: 14px;
}

.aioshop-reserva-card-header {
    margin-bottom: 10px;
    gap: 10px;
}

.aioshop-reserva-pista,
.aioshop-reserva-pista-nombre,
.aioshop-pista-nombre {
    color: var(--aioshop-ink);
    font-size: 16px;
    font-weight: 700;
}

.aioshop-reserva-estado {
    border-radius: 999px;
    border: 0;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.estado-confirmada,
.estado-pagada {
    background: rgba(25,185,122,0.14);
    color: #127552;
}

.estado-pendiente,
.estado-pendiente_pago {
    background: rgba(241,180,76,0.18);
    color: #925c00;
}

.estado-cancelada {
    background: rgba(225,109,117,0.16);
    color: #9f2f39;
}

.estado-bloqueada_admin {
    background: rgba(114,124,143,0.16);
    color: #4b556c;
}

.aioshop-reserva-card-body,
.aioshop-pista-card-body {
    color: var(--aioshop-ink-soft);
}

.aioshop-reserva-fecha,
.aioshop-pista-tipo {
    font-size: 13px;
    line-height: 1.45;
    color: var(--aioshop-ink-soft);
}

.aioshop-reserva-qr {
    text-align: left;
}

.aioshop-reserva-qr-img {
    max-width: 94px;
    border-radius: 14px;
    box-shadow: 0 10px 18px rgba(27, 32, 73, 0.14);
}

.aioshop-reserva-acciones {
    margin-top: 12px;
    text-align: left;
}

.aioshop-btn-cancelar {
    background: #fff0f1 !important;
    color: #b6414a !important;
    box-shadow: none !important;
}

.aioshop-pista-card {
    overflow: hidden;
    border-radius: 28px;
}

.aioshop-pista-imagen {
    height: 220px;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
}

.aioshop-pista-card-header {
    padding: 16px 18px 8px;
    border-bottom: 0;
}

.aioshop-pista-card-body {
    padding: 8px 18px 18px;
}

.aioshop-slots-grid {
    gap: 10px;
}

.aioshop-slot-multi-link {
    border-radius: 18px;
}

.aioshop-slot-multi {
    padding: 12px 14px;
    border-radius: 18px;
    border: 1px solid var(--aioshop-line);
    box-shadow: none;
}

.aioshop-slot-multi-header {
    margin-bottom: 8px;
    gap: 10px;
}

.aioshop-slot-hora {
    color: var(--aioshop-ink);
    font-size: 16px;
}

.aioshop-slot-estado {
    font-size: 12px;
    font-weight: 700;
    color: var(--aioshop-ink-soft);
}

.aioshop-slot-seats {
    gap: 6px;
}

.aioshop-slot-seat {
    width: 16px;
    height: 16px;
    border-radius: 999px;
    border: 1px solid rgba(34,36,79,0.08);
    box-shadow: none;
}

.aioshop-slot-seat.seat-libre {
    background: #fff;
}

.aioshop-slot-seat.seat-ocupado {
    background: #bac3ff;
}

.aioshop-slot-multi.aioshop-slot-disponible {
    background: linear-gradient(180deg, #ffffff 0%, #f7f8ff 100%);
    border-color: rgba(101,118,255,0.25);
}

.aioshop-slot-multi-link:hover .aioshop-slot-multi.aioshop-slot-disponible {
    transform: translateY(-1px);
    box-shadow: 0 12px 22px rgba(101,118,255,0.14);
}

.aioshop-slot-multi.aioshop-slot-completo {
    background: linear-gradient(180deg, #fff6f6 0%, #fff0f1 100%);
    border-color: rgba(225,109,117,0.2);
}

.aioshop-slot-multi.aioshop-slot-bloqueado {
    background: linear-gradient(180deg, #f0f1f5 0%, #e8e9ef 100%);
    border-color: rgba(114,124,143,0.2);
}

#aioshop-modal {
    border-radius: 24px;
    padding: 22px;
    box-shadow: 0 24px 60px rgba(0,0,0,0.28);
}

.aioshop-modal-btn {
    min-height: 42px;
    padding: 0 18px;
    font-weight: 700;
}

.aioshop-modal-confirm {
    background: var(--aioshop-primary-dark);
}

@media (max-width: 900px) {
    .aioshop-calendario-wrapper {
        border-radius: 28px;
        padding: 14px;
    }

    .aioshop-topbar {
        padding: 16px;
        border-radius: 22px;
    }

    .aioshop-pista-imagen {
        height: 190px;
    }
}

@media (max-width: 768px) {
    .aioshop-calendario-wrapper {
        padding: 12px;
        border-radius: 24px;
    }

    .aioshop-topbar {
        align-items: stretch;
    }

    .aioshop-topbar-right,
    .aioshop-datepicker,
    .aioshop-sede-selector-inline,
    .aioshop-sede-selector {
        width: 100%;
    }

    .aioshop-sede-selector-inline select,
    .aioshop-sede-selector select,
    .aioshop-datepicker input {
        width: 100%;
        min-width: 0;
    }

    .aioshop-week-day {
        min-width: 74px;
        padding: 11px 8px;
    }

    .aioshop-pistas-grid,
    .aioshop-reservas-usuario-grid {
        grid-template-columns: 1fr;
    }

    .aioshop-pista-card {
        border-radius: 22px;
    }

    .aioshop-pista-imagen {
        height: 170px;
        border-top-left-radius: 22px;
        border-top-right-radius: 22px;
    }

    .aioshop-pista-card-header {
        padding: 14px 16px 8px;
        cursor: pointer;
    }

    .aioshop-pista-card-body {
        padding: 8px 16px 16px;
    }

    .aioshop-auth-box h3,
    .aioshop-reservas-titulo,
    .aioshop-disponibilidad-titulo {
        font-size: 28px !important;
    }
}


/* Acceso QR + PIN */
.aioshop-reserva-acceso {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 14px;
  align-items: center;
  margin-top: 14px;
}

.aioshop-reserva-pin-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  border-radius: 18px;
  background: #f7f7fb;
  border: 1px solid #e6e8f2;
}

.aioshop-reserva-pin-wrap.expirado {
  background: #fbf7f7;
  border-color: #f0dede;
}

.aioshop-reserva-pin-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7085;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.aioshop-reserva-pin {
  font-size: 28px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .12em;
  color: #23245b;
}

@media (max-width: 640px) {
  .aioshop-reserva-acceso {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================
   v3.8.6 · Selector visual de población / sede
   ========================================================== */
.aioshop-calendario-wrapper.aioshop-sede-home {
    padding: 28px;
    background: #fff;
    border: 1px solid #ececf3;
    border-radius: 28px;
    box-shadow: 0 18px 45px rgba(29, 36, 78, 0.08);
}

.aioshop-sede-home .aioshop-sede-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 26px;
}

.aioshop-sede-home .aioshop-sede-hero-icon {
    display: grid;
    place-items: center;
    flex: 0 0 82px;
    width: 82px;
    height: 82px;
    border-radius: 50%;
    background: linear-gradient(145deg, #fff8e9, #f6edd8);
    color: #a16b12;
}

.aioshop-sede-home .aioshop-sede-hero-icon svg {
    width: 42px;
    height: 42px;
    fill: currentColor;
}

.aioshop-sede-home .aioshop-sede-hero h3 {
    margin: 0 0 7px !important;
    font-family: inherit;
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.05;
    font-weight: 800;
    color: #13224a;
}

.aioshop-sede-home .aioshop-sede-hero p {
    margin: 0;
    font-size: 17px;
    color: #68728e;
}

.aioshop-sede-home .aioshop-sede-cards-form {
    display: block;
    padding: 24px;
    border: 1px solid #ece9e2;
    border-radius: 22px;
    background: linear-gradient(180deg, #fffefa 0%, #ffffff 100%);
}

.aioshop-sede-home .aioshop-sede-cards-heading {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 20px;
    color: #087e83;
    font-size: 17px;
    font-weight: 800;
}

.aioshop-sede-home .aioshop-sede-cards-pin {
    display: inline-grid;
    place-items: center;
    width: 24px;
    height: 24px;
}

.aioshop-sede-home .aioshop-sede-cards-pin svg {
    width: 22px;
    height: 22px;
    fill: currentColor;
}

.aioshop-sede-home .aioshop-sede-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 18px;
}

.aioshop-sede-home .aioshop-sede-card-wrap {
    position: relative;
    min-width: 0;
}

.aioshop-sede-home .aioshop-sede-radio {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

.aioshop-sede-home .aioshop-sede-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 300px;
    height: 100%;
    padding: 26px 18px 20px;
    border: 2px solid #eef0f5;
    border-radius: 20px;
    background: #fff;
    box-shadow: 0 10px 24px rgba(29, 36, 78, 0.07);
    text-align: center;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.aioshop-sede-home .aioshop-sede-card:hover {
    transform: translateY(-3px);
    border-color: #bcdfe0;
    box-shadow: 0 16px 34px rgba(29, 36, 78, 0.12);
}

.aioshop-sede-home .aioshop-sede-radio:focus-visible + .aioshop-sede-card {
    outline: 3px solid rgba(8, 126, 131, 0.2);
    outline-offset: 3px;
}

.aioshop-sede-home .aioshop-sede-radio:checked + .aioshop-sede-card {
    border-color: #0b9899;
    background: linear-gradient(180deg, #ffffff 0%, #f7ffff 100%);
    box-shadow: 0 14px 34px rgba(8, 126, 131, 0.14);
}

.aioshop-sede-home .aioshop-sede-card-check {
    position: absolute;
    top: 12px;
    right: 12px;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #0b9899;
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    opacity: 0;
    transform: scale(.75);
    transition: opacity .18s ease, transform .18s ease;
}

.aioshop-sede-home .aioshop-sede-radio:checked + .aioshop-sede-card .aioshop-sede-card-check {
    opacity: 1;
    transform: scale(1);
}

.aioshop-sede-home .aioshop-sede-card-visual {
    display: grid;
    place-items: center;
    width: 112px;
    height: 112px;
    margin-bottom: 14px;
    overflow: hidden;
    border-radius: 50%;
    background: linear-gradient(145deg, #eaf8f7, #f5fbfa);
    color: #087e83;
}

.aioshop-sede-home .aioshop-sede-card-wrap:nth-child(2n) .aioshop-sede-card-visual {
    background: linear-gradient(145deg, #fff7e8, #fffdf8);
    color: #b57a1e;
}

.aioshop-sede-home .aioshop-sede-card-wrap:nth-child(3n) .aioshop-sede-card-visual {
    background: linear-gradient(145deg, #eef7e7, #fbfdf7);
    color: #608838;
}

.aioshop-sede-home .aioshop-sede-card-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.aioshop-sede-home .aioshop-sede-card-visual svg {
    width: 62px;
    height: 62px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.aioshop-sede-home .aioshop-sede-card-name {
    display: block;
    margin-bottom: 7px;
    color: #13224a;
    font-size: 21px;
    line-height: 1.15;
    font-weight: 800;
}

.aioshop-sede-home .aioshop-sede-card-desc {
    display: block;
    min-height: 42px;
    margin-bottom: 16px;
    color: #65708c;
    font-size: 14px;
    line-height: 1.45;
}

.aioshop-sede-home .aioshop-sede-card-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    margin-top: auto;
    padding: 8px 12px;
    border-radius: 10px;
    background: #e8f7f6;
    color: #08777a;
    font-size: 13px;
    font-weight: 800;
}

.aioshop-sede-home .aioshop-sede-card-count svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
}

.aioshop-sede-home .aioshop-sede-actions {
    display: flex;
    justify-content: center;
    margin-top: 24px;
}

.aioshop-calendario-wrapper.aioshop-sede-home .aioshop-sede-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    background: linear-gradient(135deg, #172a64, #173e85);
    font-size: 15px;
    box-shadow: 0 12px 24px rgba(23, 42, 100, 0.22);
}

.aioshop-calendario-wrapper.aioshop-sede-home .aioshop-sede-submit:hover {
    background: linear-gradient(135deg, #102053, #123675);
    transform: translateY(-1px);
}

.aioshop-sede-home .aioshop-sede-help {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 22px;
    padding: 15px 18px;
    border: 1px solid #dae7f7;
    border-radius: 14px;
    background: #f5f9ff;
    color: #405274;
    font-size: 13px;
}

.aioshop-sede-home .aioshop-sede-help-icon {
    display: grid;
    place-items: center;
    flex: 0 0 26px;
    width: 26px;
    height: 26px;
    border: 2px solid #25569e;
    border-radius: 50%;
    color: #25569e;
    font-family: Georgia, serif;
    font-weight: 800;
}

@media (max-width: 700px) {
    .aioshop-calendario-wrapper.aioshop-sede-home {
        padding: 18px;
        border-radius: 22px;
    }

    .aioshop-sede-home .aioshop-sede-hero {
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 18px;
    }

    .aioshop-sede-home .aioshop-sede-hero-icon {
        flex-basis: 58px;
        width: 58px;
        height: 58px;
    }

    .aioshop-sede-home .aioshop-sede-hero-icon svg {
        width: 30px;
        height: 30px;
    }

    .aioshop-sede-home .aioshop-sede-hero h3 {
        font-size: 26px;
    }

    .aioshop-sede-home .aioshop-sede-hero p {
        font-size: 14px;
    }

    .aioshop-sede-home .aioshop-sede-cards-form {
        padding: 16px;
        border-radius: 18px;
    }

    .aioshop-sede-home .aioshop-sede-cards-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .aioshop-sede-home .aioshop-sede-card {
        display: grid;
        grid-template-columns: 74px 1fr;
        grid-template-areas:
            "visual name"
            "visual desc"
            "visual count";
        align-items: center;
        min-height: 0;
        padding: 16px;
        text-align: left;
    }

    .aioshop-sede-home .aioshop-sede-card-visual {
        grid-area: visual;
        width: 64px;
        height: 64px;
        margin: 0 12px 0 0;
    }

    .aioshop-sede-home .aioshop-sede-card-visual svg {
        width: 38px;
        height: 38px;
    }

    .aioshop-sede-home .aioshop-sede-card-name {
        grid-area: name;
        padding-right: 30px;
        margin: 0 0 3px;
        font-size: 18px;
    }

    .aioshop-sede-home .aioshop-sede-card-desc {
        grid-area: desc;
        min-height: 0;
        margin: 0 0 8px;
        font-size: 12px;
    }

    .aioshop-sede-home .aioshop-sede-card-count {
        grid-area: count;
        justify-self: start;
        padding: 6px 9px;
        font-size: 11px;
    }

    .aioshop-sede-home .aioshop-sede-card-check {
        top: 10px;
        right: 10px;
        width: 28px;
        height: 28px;
        font-size: 15px;
    }

    .aioshop-calendario-wrapper.aioshop-sede-home .aioshop-sede-submit {
        width: 100%;
    }

    .aioshop-sede-home .aioshop-sede-help {
        align-items: flex-start;
    }
}

/* v3.8.9 · Confirmación de reserva */
.aioshop-confirmacion-reserva{margin:24px 0;padding:24px;border:1px solid #d0d5dd;border-radius:20px;background:#fff;box-shadow:0 14px 40px rgba(16,24,40,.08);display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}.aioshop-confirmacion-check{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#ecfdf3;color:#067647;font-size:26px;font-weight:800}.aioshop-confirmacion-main span{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#067647;font-weight:800}.aioshop-confirmacion-main h2{margin:3px 0 6px}.aioshop-confirmacion-main p{margin:0;color:#667085}.aioshop-confirmacion-acceso{text-align:center;padding:12px 18px;background:#f8fafc;border-radius:16px}.aioshop-confirmacion-acceso span{display:block;font-size:12px;color:#667085}.aioshop-confirmacion-acceso strong{display:block;font-size:28px;letter-spacing:5px}.aioshop-confirmacion-acceso img{width:110px;height:110px;margin-top:8px}.aioshop-confirmacion-actions{grid-column:1/-1;display:flex;gap:10px;flex-wrap:wrap}.aioshop-confirm-btn{padding:10px 15px;border:1px solid #d0d5dd;border-radius:10px;text-decoration:none!important;font-weight:700}.aioshop-confirm-btn.primary{background:#155eef;color:#fff!important;border-color:#155eef}@media(max-width:700px){.aioshop-confirmacion-reserva{grid-template-columns:auto 1fr}.aioshop-confirmacion-acceso{grid-column:1/-1}.aioshop-confirmacion-actions{flex-direction:column}.aioshop-confirm-btn{text-align:center}}


/* === v4.1.4.1 · Reglas de reserva por recurso === */
.aioshop-resource-booking-rules{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}
.aioshop-resource-booking-rules span{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:4px 8px;
    border-radius:999px;
    background:#f3f6fb;
    color:#667085;
    font-size:10px;
    font-weight:700;
}
.aioshop-resource-rule-notice{
    padding:14px 16px;
    border:1px solid #dbe7ff;
    border-radius:12px;
    background:#f5f8ff;
    color:#31539a;
    font-size:13px;
    font-weight:700;
    line-height:1.45;
}
.aioshop-resource-rule-notice.is-limit{
    border-color:#f2d6a2;
    background:#fff9ed;
    color:#9a6200;
}
.aioshop-booking-rule-error{
    margin:14px 0;
    padding:13px 15px;
    border:1px solid #fecdca;
    border-radius:12px;
    background:#fef3f2;
    color:#b42318;
    font-weight:700;
    font-size:13px;
}
.aioshop-week-day.is-disabled{
    opacity:.38;
    cursor:not-allowed;
    pointer-events:none;
    filter:grayscale(1);
}
@media(max-width:768px){
    .aioshop-resource-booking-rules{
        gap:5px;
    }
    .aioshop-resource-booking-rules span{
        font-size:9px;
        padding:4px 7px;
    }
}


/* === v4.1.4.5 · Evitar reservas simultáneas del mismo usuario === */
.aioshop-slot-user-conflict{
    border-color:#f4d6a2;
    background:#fffaf0;
    cursor:not-allowed;
}
.aioshop-slot-user-conflict .aioshop-slot-estado{
    color:#9a6700;
}
.aioshop-slot-conflict-note{
    display:block;
    margin-top:7px;
    color:#8a6b2f;
    font-size:9px;
    line-height:1.35;
}


/* v4.1.4.6 · Confirmación visual previa a la reserva */
body.aioshop-modal-open { overflow: hidden; }
#aioshop-modal-overlay { padding: 18px; backdrop-filter: blur(3px); }
#aioshop-modal {
    max-width: 430px;
    width: 100%;
    padding: 26px;
    border-radius: 24px;
    text-align: left;
}
.aioshop-modal-icon {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    margin: 0 0 14px;
    border-radius: 15px;
    background: #e8f7f6;
    color: #087e83;
    font-size: 24px;
    font-weight: 800;
}
.aioshop-modal-title {
    margin: 0 0 7px;
    color: #172033;
    font-size: 22px;
    line-height: 1.2;
    font-weight: 800;
}
.aioshop-modal-message {
    margin-bottom: 18px;
    color: #667085;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
}
.aioshop-modal-summary {
    margin-bottom: 22px;
    padding: 7px 16px;
    border: 1px solid #e2eaec;
    border-radius: 16px;
    background: #f8fbfb;
}
.aioshop-modal-summary-row {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 14px;
    align-items: center;
    padding: 11px 0;
    border-bottom: 1px solid #e7edef;
}
.aioshop-modal-summary-row:last-child { border-bottom: 0; }
.aioshop-modal-summary-row span { color: #7b8497; font-size: 13px; }
.aioshop-modal-summary-row strong { color: #172033; font-size: 14px; text-align: right; }
.aioshop-modal-buttons { justify-content: flex-end; gap: 10px; }
.aioshop-modal-btn { min-height: 44px; padding: 0 18px; font-weight: 800; }
.aioshop-modal-confirm { background: #087e83; color: #fff; }
.aioshop-modal-confirm:hover { background: #066e72; }
.aioshop-modal-cancel { background: #eef1f3; color: #475467; }
@media (max-width: 520px) {
    #aioshop-modal { padding: 22px 18px; border-radius: 20px; }
    .aioshop-modal-summary-row { grid-template-columns: 72px 1fr; }
    .aioshop-modal-buttons { flex-direction: column-reverse; }
    .aioshop-modal-btn { width: 100%; justify-content: center; }
}


/* Acceso compacto a Mi cuenta desde la disponibilidad (v4.1.4.9) */
.aioshop-mi-cuenta-link-wrap {
    display: flex;
    justify-content: flex-end;
    margin: 14px 0 18px;
}

.aioshop-mi-cuenta-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border: 1px solid rgba(36, 31, 101, .18);
    border-radius: 999px;
    background: #fff;
    color: #241f65;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(23, 31, 55, .06);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.aioshop-mi-cuenta-link:hover,
.aioshop-mi-cuenta-link:focus {
    color: #241f65;
    border-color: rgba(36, 31, 101, .34);
    box-shadow: 0 6px 18px rgba(23, 31, 55, .10);
    transform: translateY(-1px);
}

.aioshop-mi-cuenta-link-icon {
    font-size: 15px;
}

.aioshop-mi-cuenta-link-arrow {
    font-size: 17px;
    line-height: 1;
}

@media (max-width: 640px) {
    .aioshop-mi-cuenta-link-wrap {
        justify-content: flex-start;
        margin: 10px 0 14px;
    }

    .aioshop-mi-cuenta-link {
        padding: 10px 14px;
        font-size: 13px;
    }
}


/* === v4.1.4.41 · Mejora transversal de usabilidad === */
.aioshop-booking-progress{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 18px;padding:12px;border:1px solid #e4e7ec;border-radius:16px;background:#fff;box-shadow:0 8px 24px rgba(16,24,40,.04)}
.aioshop-booking-progress span{display:flex;align-items:center;gap:8px;min-width:0;color:#98a2b3;font-size:12px;font-weight:700}
.aioshop-booking-progress b{display:grid;place-items:center;width:27px;height:27px;flex:0 0 27px;border-radius:50%;background:#f2f4f7;color:#667085;font-size:12px}
.aioshop-booking-progress em{font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aioshop-booking-progress .is-done{color:#067647}.aioshop-booking-progress .is-done b{background:#ecfdf3;color:#067647}.aioshop-booking-progress .is-active{color:#155eef}.aioshop-booking-progress .is-active b{background:#155eef;color:#fff}
.aioshop-week-strip{scroll-behavior:smooth;scroll-padding-inline:35%;}
.aioshop-week-day.activo{position:relative;transform:translateY(-1px)}
.aioshop-week-day.activo:after{content:"";position:absolute;left:24%;right:24%;bottom:5px;height:3px;border-radius:5px;background:currentColor;opacity:.9}
.aioshop-confirmacion-numero{margin:3px 0 6px!important;color:#344054!important}.aioshop-confirmacion-numero strong{font-size:18px;color:#101828}
.aioshop-pin-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.aioshop-copy-pin{border:1px solid #cfd8dc;border-radius:9px;background:#fff;color:#155eef;padding:8px 11px;font-size:12px;font-weight:800;cursor:pointer}.aioshop-copy-pin:hover,.aioshop-copy-pin.is-copied{background:#eef4ff;border-color:#b2ccff}.aioshop-copy-pin:focus-visible{outline:3px solid rgba(21,94,239,.25);outline-offset:2px}
.aioshop-reserva-numero{display:inline-flex;margin:0 0 9px;padding:5px 9px;border-radius:999px;background:#f2f4f7;color:#475467!important;text-decoration:none!important;font-size:11px;font-weight:800}.aioshop-reserva-numero:hover{background:#eef4ff;color:#155eef!important}
.aioshop-resumen-link{text-decoration:none!important;color:inherit!important;transition:transform .16s ease,box-shadow .16s ease}.aioshop-resumen-link:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(16,24,40,.08)}
.aioshop-repeat-btn{display:inline-flex;align-items:center;justify-content:center;padding:8px 11px;border:1px solid #d0d5dd;border-radius:9px;background:#fff;color:#155eef!important;text-decoration:none!important;font-size:12px;font-weight:800;white-space:nowrap}
.aioshop-anchor-highlight{animation:aioshopAnchorPulse 2.4s ease}@keyframes aioshopAnchorPulse{0%,100%{box-shadow:inherit}20%,70%{box-shadow:0 0 0 4px rgba(21,94,239,.18),0 16px 36px rgba(16,24,40,.10)}}
body.aioshop-page-loading{cursor:progress}body.aioshop-page-loading:after{content:"";position:fixed;z-index:999998;inset:0;background:rgba(255,255,255,.48);backdrop-filter:blur(1px);pointer-events:auto}body.aioshop-page-loading:before{content:"";position:fixed;z-index:999999;left:50%;top:50%;width:38px;height:38px;margin:-19px;border:4px solid #d0d5dd;border-top-color:#155eef;border-radius:50%;animation:aioshopSpin .75s linear infinite}@keyframes aioshopSpin{to{transform:rotate(360deg)}}
.aioshop-modal-confirm:disabled{opacity:.65;cursor:wait}
@media(max-width:700px){.aioshop-booking-progress{grid-template-columns:repeat(4,1fr);gap:4px;padding:9px}.aioshop-booking-progress span{justify-content:center}.aioshop-booking-progress em{display:none}.aioshop-booking-progress b{width:30px;height:30px;flex-basis:30px}.aioshop-pin-row{justify-content:center}.aioshop-copy-pin{min-height:42px;padding-inline:14px}.aioshop-repeat-btn{min-height:40px}.aioshop-week-strip{scroll-padding-inline:40%}}
@media(prefers-reduced-motion:reduce){.aioshop-week-strip{scroll-behavior:auto}.aioshop-anchor-highlight{animation:none}.aioshop-resumen-link{transition:none}}
\n\n/* v4.1.4.43 · UX de confirmación y progreso móvil */\n.aioshop-success-number-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:#667085;text-align:center;margin-top:2px}\n.aioshop-success-number{font-size:32px;font-weight:800;line-height:1.1;text-align:center;color:#155eef;margin:6px 0}\n.aioshop-success-resource{text-align:center;font-weight:700;color:#344054}\n.aioshop-msg-ok-prominent{margin:14px 0 18px;padding:16px 18px;border-radius:16px;font-weight:700}\n.aioshop-msg-ok-prominent a{font-weight:800;text-decoration:underline}\n@media(max-width:700px){\n  .aioshop-booking-progress span{flex-direction:column;gap:4px;text-align:center;font-size:10px;line-height:1.1}\n  .aioshop-booking-progress em{display:block;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip}\n  .aioshop-booking-progress b{width:30px;height:30px;flex-basis:30px}\n  #aioshop-modal-overlay{align-items:center;justify-content:center;padding:16px}\n  #aioshop-modal{max-height:calc(100dvh - 32px);overflow:auto}\n}\n