/**
 * Estilos del frontend para reservas de espacios
 */

/* Día seleccionado por el usuario */
.calendar__day.selected {
    background: rgba(54, 162, 235, 0.15) !important;
    color: #333 !important;
}

.calendar__day.selected .calendar__date {
    color: #333 !important;
}

.grve-notification.danger {
    width: 100%;
    color: #8c0000;
    background: #ffc4c4;
    padding: 10px;
    border: solid #8c0000 1px;
}

.c-reserva-calendario p {
    width: 100%;
}

/* ========== Calendario de reservas - diseño moderno (con !important para prevalecer sobre el tema) ========== */
/* Tamaños de fuente en px para que no dependan de 1rem y se mantengan en responsive */
.c-reserva-calendario .month-calendar .grve-title.grve-h6 {
    display: none !important;
}

.calendar {
    max-width: 100% !important;
    margin: 0 auto !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
    font-family: sans-serif !important;
    background: #fff !important;
}

/* Header: días de la semana (LUN, MAR, …) */
.calendar__header {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    background: #fff !important;
    text-align: center !important;
    border-bottom: 1px solid #e0e0e0 !important;
}

.calendar__header-day {
    padding: 10px 0 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.02em !important;
}

.calendar__header-day:last-child {
    border-right: none !important;
}

/* Body: grid 7 columnas */
.calendar__body {
    display: grid !important;
    grid-template-columns: repeat(7, 1fr) !important;
    grid-auto-rows: minmax(100px, auto) !important;
}

.calendar__day {
    border-right: 1px solid #e0e0e0 !important;
    border-bottom: 1px solid #e0e0e0 !important;
    padding: 6px !important;
    position: relative !important;
    cursor: pointer !important;
    background: #fff !important;
    min-height: 100px !important;
}

.calendar__day:nth-child(7n) {
    border-right: none !important;
}

.calendar__day--empty {
    background: #fafafa !important;
    cursor: default !important;
}

/* Número del día: esquina superior derecha */
.calendar__date {
    position: absolute !important;
    top: 6px !important;
    right: 8px !important;
    font-size: 13px !important;
    color: #333 !important;
    margin: 0 !important;
}

/* Contenedor de eventos (bloques apilados) */
.calendar__info {
    margin-top: 22px !important;
    padding: 0 2px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
}

/* Bloques de evento: pastel azul, naranja, verde */
.calendar__event {
    padding: 6px 8px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
    text-align: left !important;
}

.calendar__event--blue {
    background: #d1e8ff !important;
    color: #333 !important;
}

.calendar__event--orange {
    background: #ffecd1 !important;
    color: #333 !important;
}

.calendar__event--green {
    background: #d4edda !important;
    color: #333 !important;
}

.calendar__event-time {
    display: block !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 2px !important;
}

.calendar__event-desc {
    display: block !important;
    font-weight: 400 !important;
    color: #333 !important;
}

/* Compatibilidad: tramos antiguos si algún HTML los usa */
.calendar__tramo {
    display: inline-block !important;
    margin-right: 2px !important;
    padding: 2px 4px !important;
    border-radius: 4px !important;
    background: #eee !important;
}

/* Estados especiales */
.calendar__day--today {
    background: #f5f9ff !important;
}

.calendar__day--today .calendar__date {
    font-weight: 700 !important;
}

.calendar__day--occupied-full {
    background: #fff5f5 !important;
    cursor: not-allowed !important;
}

.calendar__day--occupied-full .calendar__event--blue,
.calendar__day--occupied-full .calendar__event--orange,
.calendar__day--occupied-full .calendar__event--green {
    opacity: 0.9 !important;
}

.calendar__day--occupied-partial {
    background: #fff !important;
}

.c-reserva-calendario #calendar-container .calendar {
    max-width: 100% !important;
}

/* Contenedor del calendario: altura mínima para que el loader se vea durante la carga */
.c-reserva-calendario #calendar-container {
    min-height: 320px !important;
}

/* Loader del calendario (px fijos para que no dependa de rem en responsive) */
.calendar-loader {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 300px !important;
    padding: 32px !important;
    box-sizing: border-box !important;
}
.calendar-loader__spinner {
    width: 40px !important;
    height: 40px !important;
    border: 3px solid #e0e0e0 !important;
    border-top-color: #0073aa !important;
    border-radius: 50% !important;
    animation: calendar-loader-spin 0.8s linear infinite !important;
}
.calendar-loader__text {
    margin: 16px 0 0 !important;
    font-size: 15px !important;
    color: #555 !important;
}
@keyframes calendar-loader-spin {
    to { transform: rotate(360deg); }
}

.gdpr-consent {
    display: block;
    margin-top: 20px;
    font-size: 0.9em;
}

.gdpr-consent input[type="checkbox"] {
    margin-right: 6px;
}

/* Responsive: scroll horizontal en móvil */
@media (max-width: 600px) {
    .calendar {
        overflow-x: auto !important;
    }
    
    .calendar__header,
    .calendar__body {
        min-width: 700px !important;
    }
}

/* Controles calendario: permitir wrap y reducir tamaños en móvil */
@media (max-width: 480px) {
    .c-reserva-calendario .reservas-calendario-controls-inner {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .c-reserva-calendario .reservas-calendario-select-month-wrap {
        width: 120px !important;
        min-width: 120px !important;
        max-width: 120px !important;
    }
    .c-reserva-calendario .reservas-calendario-select-year-wrap {
        width: 76px !important;
        min-width: 76px !important;
        max-width: 76px !important;
    }
    .c-reserva-calendario .reservas-calendario-select-wrap select {
        font-size: 13px !important;
        padding: 6px 28px 6px 8px !important;
    }
    .c-reserva-calendario .grve-title.grve-h4 {
        font-size: 1.1rem !important;
    }
}

/* Estilos para días seleccionados - diseño modal */
.reservas-modal-diseno .reserva-dia-item {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: start !important;
    padding: 14px !important;
    margin-bottom: 0 !important;
    background: #f9f9f9 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
}

.reservas-modal-diseno .reserva-dia-fecha {
    grid-column: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 500 !important;
    color: #333 !important;
}

.reservas-modal-diseno .reserva-dia-fecha .reserva-dia-fecha-icon {
    display: flex !important;
    align-items: center !important;
    color: #666 !important;
}

.reservas-modal-diseno .reserva-dia-horas {
    grid-column: 1 / -1 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

.reservas-modal-diseno .reserva-dia-horas label {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
}

.reservas-modal-diseno .reserva-dia-horas .reservas-input-wrapper {
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
}

.reservas-modal-diseno .reserva-dia-horas .reservas-input-icon {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    min-width: 40px !important;
    color: #666 !important;
}

.reservas-modal-diseno .reserva-dia-horas select {
    flex: 1 !important;
    padding: 10px 36px 10px 12px !important;
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
}

/* Fallback para días sin modal-diseno */
.reserva-dia-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px;
    margin-bottom: 10px;
    background: #f9f9f9;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.reserva-dia-fecha {
    flex: 1;
}

.reserva-dia-horas {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.reserva-dia-horas label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9em;
    font-weight: 500;
}

.reserva-dia-horas select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    background-color: #fff;
    cursor: pointer;
}

.reserva-dia-horas select:hover {
    border-color: #999;
}

.reserva-dia-horas select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

.reserva-dia-remove {
    flex-shrink: 0;
}

.reserva-dia-remove a {
    display: inline-block;
    width: 24px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    background: #dc3232;
    color: #fff;
    text-decoration: none;
    border-radius: 3px;
    font-weight: bold;
}

.reserva-dia-remove a:hover {
    background: #a00;
}

/* Estilos para el shortcode de mostrar espacios (alineados con calendario, modal y mis reservas) */
.reservas-espacios-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
}

.reservas-espacios-hotel-group {
    margin-bottom: 40px !important;
}

.reservas-espacios-hotel-group:last-child {
    margin-bottom: 0 !important;
}

.reservas-espacios-hotel-title {
    font-size: 1.5em !important;
    font-weight: 600 !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
    color: #fff !important;
    letter-spacing: 0.02em !important;
}

.reservas-espacios-grid {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 20px !important;
    width: 100% !important;
}

.reservas-espacio-form {
    display: flex !important;
    flex: 0 0 auto !important;
    width: 15.625rem !important;
    min-width: 15.625rem !important;
    max-width: 15.625rem !important;
}

.reservas-espacio-button {
    display: flex !important;
    flex-direction: column !important;
    text-decoration: none !important;
    color: #333 !important;
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 8px !important;
    padding: 15px !important;
    transition: border-color 0.25s, box-shadow 0.25s, transform 0.25s !important;
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
    overflow: hidden !important;
    position: relative !important;
    width: 100% !important;
    font-family: inherit !important;
    font-size: inherit !important;
    cursor: pointer !important;
    text-align: left !important;
    margin: 0 !important;
}

.reservas-espacio-button:hover {
    border-color: rgba(255, 255, 255, 0.9) !important;
    background: #fff !important;
    background-color: #fff !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25), 0 0 0 2px rgba(255, 255, 255, 0.5) !important;
    transform: translateY(-6px) scale(1.02) !important;
    color: #333 !important;
}

.reservas-espacio-button:focus {
    outline: none !important;
    border-color: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5) !important;
    background: #fff !important;
    background-color: #fff !important;
}

.reservas-espacio-imagen {
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    margin-bottom: 15px !important;
    background: #f9f9f9 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
}

.reservas-espacio-imagen img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    min-width: 100% !important;
    min-height: 100% !important;
}

.reservas-espacio-titulo {
    text-align: center !important;
    padding: 10px 0 !important;
}

.reservas-espacio-titulo span {
    font-size: 1.1em !important;
    font-weight: 600 !important;
    color: #333 !important;
    display: block !important;
    line-height: 1.4 !important;
}

.reservas-espacio-button:hover .reservas-espacio-titulo span {
    color: #333 !important;
}

.reservas-espacio-deshabilitado {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
    pointer-events: none !important;
    position: relative !important;
}

.reservas-espacio-deshabilitado::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(255, 255, 255, 0.7) !important;
    z-index: 1 !important;
}

/* Responsive */
@media (min-width: 1921px) {
    .reservas-espacios-grid {
        flex-wrap: nowrap !important;
    }
}

@media (min-width: 1601px) and (max-width: 1920px) {
    .reservas-espacios-grid {
        flex-wrap: wrap !important;
        gap: 1.25rem !important;
    }
    
    .reservas-espacio-form {
        width: calc((100% - 3.75rem) / 4) !important;
        min-width: calc((100% - 3.75rem) / 4) !important;
        max-width: calc((100% - 3.75rem) / 4) !important;
    }
}

@media (min-width: 1401px) and (max-width: 1600px) {
    .reservas-espacios-grid {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }
    
    .reservas-espacio-form {
        width: calc((100% - 3rem) / 4) !important;
        min-width: calc((100% - 3rem) / 4) !important;
        max-width: calc((100% - 3rem) / 4) !important;
    }
}

@media (min-width: 1201px) and (max-width: 1400px) {
    .reservas-espacios-grid {
        flex-wrap: wrap !important;
        gap: 0.875rem !important;
    }
    
    .reservas-espacio-form {
        width: calc((100% - 2.625rem) / 4) !important;
        min-width: calc((100% - 2.625rem) / 4) !important;
        max-width: calc((100% - 2.625rem) / 4) !important;
    }
}

@media (max-width: 1200px) {
    .reservas-espacios-grid {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }
    
    .reservas-espacio-form {
        width: calc((100% - 3rem) / 4) !important;
        min-width: calc((100% - 3rem) / 4) !important;
        max-width: calc((100% - 3rem) / 4) !important;
    }
}

@media (max-width: 992px) {
    .reservas-espacios-grid {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }
    
    .reservas-espacio-form {
        width: calc((100% - 2rem) / 3) !important;
        min-width: calc((100% - 2rem) / 3) !important;
        max-width: calc((100% - 2rem) / 3) !important;
    }
}

@media (max-width: 768px) {
    .reservas-espacios-grid {
        flex-wrap: wrap !important;
        gap: 0.9375rem !important;
    }
    
    .reservas-espacio-form {
        width: calc((100% - 0.9375rem) / 2) !important;
        min-width: calc((100% - 0.9375rem) / 2) !important;
        max-width: calc((100% - 0.9375rem) / 2) !important;
    }
    
    .reservas-espacio-button {
        padding: 0.75rem !important;
        min-height: 12.5rem !important;
    }
    
    .reservas-espacio-imagen {
        aspect-ratio: 4 / 3 !important;
        margin-bottom: 0.75rem !important;
    }
    
    .reservas-espacios-hotel-title {
        font-size: 1.3em !important;
        margin-bottom: 0.9375rem !important;
    }
}

@media (max-width: 480px) {
    .reservas-espacios-grid {
        flex-wrap: wrap !important;
        gap: 0.75rem !important;
    }
    
    .reservas-espacio-form {
        width: 100% !important;
        min-width: 100% !important;
        max-width: 100% !important;
    }
    
    .reservas-espacio-button {
        padding: 0.9375rem !important;
        min-height: 13.75rem !important;
    }
    
    .reservas-espacio-imagen {
        aspect-ratio: 4 / 3 !important;
        margin-bottom: 0.625rem !important;
    }
}

/* Estilos para el formulario de reserva (alineado con reserva-dia-item y modal) */
.reservas-espacios-mensaje {
    padding: 20px !important;
    background: #f9f9f9 !important;
    border: 1px solid #e8e8e8 !important;
    border-radius: 8px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}

/* Contenedor de espacios: padding en móvil para no pegar a los bordes */
@media (max-width: 768px) {
    .reservas-espacios-container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .reservas-espacios-hotel-group {
        margin-bottom: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    .reservas-espacios-mensaje {
        padding: 14px !important;
        margin-bottom: 16px !important;
    }
}

/* Controles del calendario: flechas + selectores mes/año (font-size en px para mantener en responsive) */
.c-reserva-calendario .reservas-calendario-controls {
    display: block !important;
    margin-bottom: 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Contenedor interno: flex row para ancho y posición fijos */
.c-reserva-calendario .reservas-calendario-controls-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Wrapper de botón anterior o siguiente: un botón por wrap, ancho fijo */
.c-reserva-calendario .reservas-calendario-nav-wrap {
    flex: 0 0 auto !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.c-reserva-calendario .reservas-calendario-nav-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 36px !important;
    min-width: 36px !important;
    max-width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    background-color: #fff !important;
    color: #333 !important;
    font-size: 20px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    transition: border-color 0.2s, background 0.2s, color 0.2s !important;
    box-sizing: border-box !important;
}

.c-reserva-calendario .reservas-calendario-nav-btn:hover {
    border-color: #bdbdbd !important;
    background: #f5f5f5 !important;
    background-color: #f5f5f5 !important;
    color: #333 !important;
}

.c-reserva-calendario .reservas-calendario-nav-btn:focus {
    outline: none !important;
    border-color: #36a2eb !important;
    box-shadow: 0 0 0 2px rgba(54, 162, 235, 0.15) !important;
}

.c-reserva-calendario .reservas-calendario-nav-btn:active {
    background: #eee !important;
    background-color: #eee !important;
}

/* Wrapper del select mes: ancho fijo */
.c-reserva-calendario .reservas-calendario-select-month-wrap {
    flex: 0 0 auto !important;
    width: 140px !important;
    min-width: 140px !important;
    max-width: 140px !important;
    box-sizing: border-box !important;
}

/* Wrapper del select año: ancho fijo */
.c-reserva-calendario .reservas-calendario-select-year-wrap {
    flex: 0 0 auto !important;
    width: 90px !important;
    min-width: 90px !important;
    max-width: 90px !important;
    box-sizing: border-box !important;
}

.c-reserva-calendario .reservas-calendario-select-wrap select {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: 36px !important;
    padding: 6px 32px 6px 10px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    color: #333 !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23333' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.c-reserva-calendario .reservas-calendario-select-wrap select:hover {
    border-color: #bdbdbd !important;
}

.c-reserva-calendario .reservas-calendario-select-wrap select:focus {
    outline: none !important;
    border-color: #36a2eb !important;
    box-shadow: 0 0 0 2px rgba(54, 162, 235, 0.15) !important;
}

/* Modal de reserva - Diseño Formulario de Solicitud */
.reservas-modal-overlay {
    display: none !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 100001 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}
.reservas-modal-overlay.is-open {
    display: flex !important;
}

.reservas-modal.reservas-modal-diseno {
    position: relative !important;
    width: 100% !important;
    max-width: 500px !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    background: #fff !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15) !important;
    padding: 28px 24px 24px !important;
}

@media (min-width: 1201px) {
    .reservas-modal.reservas-modal-diseno {
        max-width: 720px !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }
    .reservas-modal-diseno .reservas-formulario-reserva {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 12px 24px !important;
    }
    .reservas-modal-diseno .reservas-form-field.reservas-form-field-icon {
        flex: 1 1 calc(50% - 14px) !important;
        min-width: 240px !important;
    }
    .reservas-modal-diseno .reservas-form-field:not(.reservas-form-field-icon),
    .reservas-modal-diseno .reservas-form-submit,
    .reservas-modal-diseno .reservas-modal-privacy {
        flex: 1 1 100% !important;
    }
}

/* Tablet horizontal y portátil: reducir separación entre filas para evitar scroll */
@media (min-width: 768px) and (max-width: 1400px) {
    .reservas-modal-diseno .reservas-form-field.reservas-form-field-icon {
        margin-bottom: 10px !important;
    }
    .reservas-modal-diseno .reserva-dia-item {
        margin-bottom: 10px !important;
    }
    .reservas-modal-diseno .reservas-form-field:has(.gdpr-consent) {
        margin-top: 6px !important;
    }
    .reservas-modal-diseno .reservas-btn-submit {
        margin-top: 10px !important;
    }
    .reservas-modal-diseno .reservas-modal-privacy {
        margin: 6px 0 0 !important;
    }
}
@media (min-width: 1201px) and (max-width: 1400px) {
    .reservas-modal-diseno .reservas-formulario-reserva {
        gap: 10px 18px !important;
    }
    .reservas-modal-diseno .reservas-form-field.reservas-form-field-icon {
        flex: 1 1 calc(50% - 9px) !important;
        margin-bottom: 10px !important;
    }
}

/* Modal responsive: ocupar casi toda la pantalla en móvil */
@media (max-width: 600px) {
    .reservas-modal-diseno .reservas-form-field.reservas-form-field-icon {
        margin-bottom: 10px !important;
    }
    .reservas-modal-diseno .reserva-dia-item {
        margin-bottom: 10px !important;
    }
    .reservas-modal-diseno .reservas-form-field:has(.gdpr-consent) {
        margin-top: 6px !important;
    }
    .reservas-modal-diseno .reservas-btn-submit {
        margin-top: 10px !important;
    }
    .reservas-modal-diseno .reservas-modal-privacy {
        margin: 6px 0 0 !important;
    }
    .reservas-modal-overlay {
        padding: 12px !important;
        align-items: flex-start !important;
        padding-top: max(12px, env(safe-area-inset-top)) !important;
        padding-bottom: max(12px, env(safe-area-inset-bottom)) !important;
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }
    .reservas-modal.reservas-modal-diseno {
        max-width: 100% !important;
        max-height: calc(100vh - 24px) !important;
        max-height: calc(100dvh - 24px) !important;
        padding: 20px 16px 16px !important;
        border-radius: 10px !important;
    }
    .reservas-modal-diseno .reservas-modal-titulo {
        margin-right: 36px !important;
        font-size: 18px !important;
    }
    .reservas-modal-diseno .reservas-modal-cerrar {
        top: 12px !important;
        right: 12px !important;
        width: 32px !important;
        height: 32px !important;
        font-size: 22px !important;
    }
}

@media (max-width: 480px) {
    .reservas-modal-diseno .reservas-form-field.reservas-form-field-icon {
        margin-bottom: 8px !important;
    }
    .reservas-modal-diseno .reserva-dia-item {
        margin-bottom: 8px !important;
    }
    .reservas-modal-diseno .reservas-form-field:has(.gdpr-consent) {
        margin-top: 4px !important;
    }
    .reservas-modal-diseno .reservas-btn-submit {
        margin-top: 8px !important;
    }
    .reservas-modal-diseno .reservas-modal-privacy {
        margin: 4px 0 0 !important;
    }
    .reservas-modal-overlay {
        padding: 8px !important;
        padding-top: max(8px, env(safe-area-inset-top)) !important;
        padding-bottom: max(8px, env(safe-area-inset-bottom)) !important;
    }
    .reservas-modal.reservas-modal-diseno {
        padding: 16px 12px 12px !important;
        max-height: calc(100vh - 16px) !important;
        max-height: calc(100dvh - 16px) !important;
    }
}

.reservas-modal-diseno .reservas-modal-titulo {
    margin: 0 44px 24px 0 !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #1e3a5f !important;
    text-align: center !important;
}

.reservas-modal-diseno .reservas-modal-cerrar {
    position: absolute !important;
    top: 16px !important;
    right: 16px !important;
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    font-size: 24px !important;
    line-height: 1 !important;
    color: #555 !important;
    cursor: pointer !important;
    border-radius: 6px !important;
    transition: background 0.2s, color 0.2s !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}

.reservas-modal-diseno .reservas-modal-cerrar:hover {
    background: #f0f0f0 !important;
    color: #000 !important;
}

.reservas-modal-diseno .reservas-modal-dias {
    margin-bottom: 0 !important;
}

/* Campos con iconos */
.reservas-modal-diseno .reservas-form-field {
    margin-bottom: 0 !important;
}

.reservas-modal-diseno .reservas-form-field label {
    display: block !important;
    margin-bottom: 0 !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    color: #333 !important;
}

.reservas-modal-diseno .reservas-required {
    color: #c62828 !important;
}

.reservas-modal-diseno .reservas-input-wrapper {
    display: flex !important;
    align-items: center !important;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.reservas-modal-diseno .reservas-input-icon {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    min-width: 44px !important;
    color: #666 !important;
}

.reservas-modal-diseno .reservas-input-wrapper input,
.reservas-modal-diseno .reservas-input-wrapper input[type="number"],
.reservas-modal-diseno .reservas-input-wrapper select {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    border: none !important;
    background: transparent !important;
    font-size: 15px !important;
    color: #333 !important;
}

.reservas-modal-diseno .reservas-input-wrapper input::placeholder {
    color: #999 !important;
}

.reservas-modal-diseno .reservas-input-wrapper input:focus,
.reservas-modal-diseno .reservas-input-wrapper select:focus {
    outline: none !important;
}

.reservas-modal-diseno .reservas-input-wrapper:focus-within {
    border-color: #1e3a5f !important;
    box-shadow: 0 0 0 2px rgba(30, 58, 95, 0.1) !important;
}

.reservas-modal-diseno .reservas-field-hint {
    font-size: 13px !important;
    color: #666 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* Fila de hora inicio / hora final lado a lado */
.reservas-modal-diseno .reservas-dias-horas-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    margin-bottom: 0 !important;
}

/* En móvil estrecho: hora inicio/final en una columna */
@media (max-width: 400px) {
    .reservas-modal-diseno .reservas-dias-horas-row {
        grid-template-columns: 1fr !important;
    }
    .reservas-modal-diseno .reserva-dia-horas {
        grid-template-columns: 1fr !important;
    }
}

.reservas-modal-diseno .reservas-dia-item .reservas-input-wrapper select {
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 36px !important;
}

/* Botón Solicitar reserva - naranja */
.reservas-modal-diseno .reservas-btn-submit {
    display: block !important;
    width: 100% !important;
    padding: 14px 24px !important;
    margin-top: 12px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #fff !important;
    background: #ff8800 !important;
    background-color: #ff8800 !important;
    border: none !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: background 0.2s, transform 0.1s !important;
}

.reservas-modal-diseno .reservas-btn-submit:hover {
    background: #e67a00 !important;
    background-color: #e67a00 !important;
}

.reservas-modal-diseno .reservas-btn-submit:active {
    transform: scale(0.99) !important;
}

/* Enlace Política de Privacidad */
.reservas-modal-diseno .reservas-modal-privacy {
    margin: 8px 0 0 !important;
    text-align: right !important;
}

.reservas-modal-diseno .reservas-modal-privacy a {
    color: #1e3a5f !important;
    text-decoration: underline !important;
    font-size: 14px !important;
}

.reservas-modal-diseno .reservas-modal-privacy a:hover {
    color: #2d5a8a !important;
}

/* GDPR consent - reducir separación con campos anteriores */
.reservas-modal-diseno .reservas-form-field:has(.gdpr-consent) {
    margin-top: 8px !important;
}
.reservas-modal-diseno .gdpr-consent {
    font-size: 14px !important;
    color: #333 !important;
}

.reservas-modal-diseno .gdpr-consent input[type="checkbox"] {
    margin-right: 8px !important;
}

/* Responsive: mantener tamaños de fuente en el modal (px fijos, sin depender de rem) */
@media (max-width: 768px) {
    .reservas-modal-diseno .reservas-modal-titulo {
        font-size: 20px !important;
    }
    .reservas-modal-diseno .reservas-form-field label {
        font-size: 14px !important;
    }
    .reservas-modal-diseno .reservas-input-wrapper input,
    .reservas-modal-diseno .reservas-input-wrapper input[type="number"],
    .reservas-modal-diseno .reservas-input-wrapper select {
        font-size: 15px !important;
    }
    .reservas-modal-diseno .reserva-dia-horas label {
        font-size: 14px !important;
    }
    .reservas-modal-diseno .reserva-dia-horas select {
        font-size: 15px !important;
    }
    .reservas-modal-diseno .reservas-field-hint {
        font-size: 13px !important;
    }
    .reservas-modal-diseno .reservas-btn-submit {
        font-size: 16px !important;
    }
    .reservas-modal-diseno .reservas-modal-privacy a {
        font-size: 14px !important;
    }
    .reservas-modal-diseno .gdpr-consent {
        font-size: 14px !important;
    }
    .reservas-modal-diseno .reservas-modal-cerrar {
        font-size: 24px !important;
    }
}

@media (max-width: 480px) {
    .reservas-modal-diseno .reservas-modal-titulo {
        font-size: 20px !important;
    }
    .reservas-modal-diseno .reservas-form-field label {
        font-size: 14px !important;
    }
    .reservas-modal-diseno .reservas-input-wrapper input,
    .reservas-modal-diseno .reservas-input-wrapper input[type="number"],
    .reservas-modal-diseno .reservas-input-wrapper select {
        font-size: 15px !important;
    }
    .reservas-modal-diseno .reserva-dia-horas label {
        font-size: 14px !important;
    }
    .reservas-modal-diseno .reserva-dia-horas select {
        font-size: 15px !important;
    }
    .reservas-modal-diseno .reservas-field-hint {
        font-size: 13px !important;
    }
    .reservas-modal-diseno .reservas-btn-submit {
        font-size: 16px !important;
    }
    .reservas-modal-diseno .reservas-modal-privacy a {
        font-size: 14px !important;
    }
    .reservas-modal-diseno .gdpr-consent {
        font-size: 14px !important;
    }
    .reservas-modal-diseno .reservas-modal-cerrar {
        font-size: 24px !important;
    }
}

/* Fallback para modal sin clase diseno (compatibilidad) */
.reservas-modal:not(.reservas-modal-diseno) {
    position: relative;
    width: 100%;
    max-width: 600px;
    max-height: calc(100vh - 40px);
    overflow-y: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
    padding: 24px;
}

.reservas-formulario-reserva {
    max-width: 100%;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* Modal diseño: eliminar margin-bottom de todos los campos del formulario */
.reservas-modal-diseno .reservas-formulario-reserva .reservas-form-field,
.reservas-modal-diseno .reservas-formulario-reserva .reservas-form-field label,
.reservas-modal-diseno .reservas-formulario-reserva .reservas-form-field input,
.reservas-modal-diseno .reservas-formulario-reserva .reservas-form-field select,
.reservas-modal-diseno .reservas-formulario-reserva .reservas-form-field .reservas-input-wrapper,
.reservas-modal-diseno .reservas-formulario-reserva .reservas-form-field .reservas-field-hint,
.reservas-modal-diseno .reservas-formulario-reserva .reservas-form-field p,
.reservas-modal-diseno .reservas-formulario-reserva .gdpr-consent,
.reservas-modal-diseno .reservas-formulario-reserva .reservas-form-submit,
.reservas-modal-diseno .reservas-formulario-reserva .reservas-modal-privacy,
.reservas-modal-diseno .reservas-formulario-reserva .reservas-modal-privacy p,
.reservas-modal-diseno .reserva-dia-item,
.reservas-modal-diseno .reserva-dia-horas,
.reservas-modal-diseno .reserva-dia-horas label,
.reservas-modal-diseno .reserva-dia-fecha,
.reservas-modal-diseno .reservas-dias-horas-row,
.reservas-modal-diseno .reservas-modal-dias,
.reservas-modal-diseno .reservas-formulario-reserva *,
.reservas-modal-diseno select,
.reservas-modal-diseno .reserva-dia-horas select,
.reservas-modal-diseno .reservas-input-wrapper select {
    margin-bottom: 0 !important;
}

/* Márgenes entre campos con icono y bajo cada día seleccionado */
.reservas-modal-diseno .reservas-form-field.reservas-form-field-icon {
    margin-bottom: 12px !important;
}

.reservas-modal-diseno .reserva-dia-item {
    margin-bottom: 12px !important;
}

.reservas-form-field {
    margin-bottom: 15px;
}

.reservas-form-field label {
    display: block;
    margin-bottom: 5px;
    font-weight: 600;
}

.reservas-form-field input[type="text"],
.reservas-form-field input[type="email"],
.reservas-form-field select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.reservas-form-field input[type="text"]:focus,
.reservas-form-field input[type="email"]:focus,
.reservas-form-field select:focus {
    outline: none;
    border-color: #0073aa;
    box-shadow: 0 0 0 2px rgba(0, 115, 170, 0.1);
}

.reservas-form-submit {
    margin-top: 20px;
}

/* =========================================================
 * DataTables (tabla de reservas - Mis Reservas) - tema naranja/azul
 * ========================================================= */
.reservas-espacios-reservas-table-wrapper {
    width: 100%;
    max-width: 100%;
}

/* Filtros admin (solo administradores) - misma fila, estilos DataTables */

.reservas-espacios-admin-filters {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 16px;
    margin-bottom: 1em;
    padding: 16px 20px;
    background: #f5f9ff;
    border: 1px solid #e0e8f5;
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.reservas-espacios-admin-filters-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.reservas-espacios-admin-filters-row label {
    font-size: 13px;
    font-weight: 500;
    color: #1e3a5f;
}

/* Selects múltiples: mismos estilos que DataTables length/search */
.reservas-admin-filter-select {
    min-height: 42px !important;
    height: auto !important;
    max-height: 120px;
    min-width: 140px;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #333;
    background: #fff !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.reservas-admin-filter-select:focus {
    outline: none !important;
    border-color: #1e3a5f !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 2px rgba(30, 58, 95, 0.15) !important;
}

/* Botones Mostrar/Ocultar/Limpiar filtros: mismo estilo que Justificante y Ver Reserva */
.reservas-admin-filter-btn {
    display: inline-block !important;
    padding: 6px 14px !important;
    border: none !important;
    border-radius: 8px !important;
    background: #ff8800 !important;
    color: #fff !important;
    font-weight: 500;
    font-size: 13px !important;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(255, 136, 0, 0.35);
}

.reservas-admin-filter-btn:hover {
    background: #1e3a5f !important;
    color: #fff !important;
    box-shadow: 0 4px 8px rgba(30, 58, 95, 0.4);
    transform: translateY(-1px);
}

.reservas-admin-filter-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(255, 136, 0, 0.3);
}

.reservas-espacios-reservas-table-wrapper .dataTables_length {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
}

.reservas-espacios-reservas-table-wrapper .dataTables_length .reservas-admin-filters-show {
    margin-left: 8px;
    margin-top: 0 !important;
    margin-bottom: 1em !important;
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    line-height: 1;
}

.reservas-espacios-reservas-table-wrapper.reservas-filters-expanded .reservas-admin-filters-show {
    display: none !important;
}

@media (max-width: 640px) {
    .reservas-espacios-reservas-table-wrapper .dataTables_length {
        justify-content: center;
        align-items: center;
        align-content: center;
    }
    .reservas-espacios-reservas-table-wrapper .dataTables_length .reservas-admin-filters-show {
        margin-left: 8px;
        margin-top: 0 !important;
        margin-bottom: 1em !important;
        align-self: center;
        min-height: 42px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        line-height: 1;
    }
}

@media (max-width: 992px) {
    .reservas-espacios-admin-filters {
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
    }
}

@media (max-width: 640px) {
    .reservas-espacios-admin-filters {
        flex-direction: column;
        align-items: stretch;
    }
    .reservas-admin-filter-select {
        min-width: 0;
    }
}

.reservas-espacios-reservas-table-wrapper .dataTables_wrapper {
    width: 100%;
    max-width: 100%;
}

/* Reservar espacio scrollbar para que thead y tbody no se desalineen */
.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody {
    scrollbar-gutter: stable;
}

/* Alineación thead/tbody: mismo ancho de columnas en todo viewport */
.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead table,
.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody table {
    table-layout: fixed;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead th,
.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody tbody td {
    box-sizing: border-box !important;
    padding: 10px 12px;
    overflow-wrap: break-word;
    word-break: break-word;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead th {
    text-align: center !important;
    vertical-align: middle !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody tbody td {
    vertical-align: middle;
}

.reservas-espacios-reservas-table {
    font-family: inherit;
    border-collapse: collapse;
}

.reservas-espacios-reservas-table thead th {
    text-align: center !important;
    vertical-align: middle !important;
}

.reservas-espacios-reservas-table th {
    box-sizing: border-box !important;
    padding: 10px 12px;
    vertical-align: middle;
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
}

.reservas-espacios-reservas-table td {
    box-sizing: border-box !important;
    padding: 10px 12px;
    vertical-align: middle;
    overflow-wrap: break-word;
    word-break: break-word;
}

.reservas-espacios-reservas-table a {
    text-decoration: none;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Thead: azul estándar (#1e3a5f) - texto centrado horizontal y vertical */
.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead th,
.reservas-espacios-reservas-table thead th {
    background-color: #1e3a5f !important;
    color: #fff !important;
    font-weight: 600;
    border-bottom: none !important;
    border: 1px solid #2d5a8a;
    text-align: center !important;
    vertical-align: middle !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead tr:first-child th:first-child,
.reservas-espacios-reservas-table thead tr:first-child th:first-child {
    border-top-left-radius: 10px;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead tr:first-child th:last-child,
.reservas-espacios-reservas-table thead tr:first-child th:last-child {
    border-top-right-radius: 10px;
}

/* Iconos ordenación: inactivos (th.sorting) = azul muy pálido, activo = blanco */
.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead th.sorting:before,
.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead th.sorting:after,
.reservas-espacios-reservas-table thead th.sorting:before,
.reservas-espacios-reservas-table thead th.sorting:after {
    color: #d8e3f0 !important;
    opacity: 1 !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead th.sorting_asc:before,
.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead th.sorting_asc:after,
.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead th.sorting_desc:before,
.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead th.sorting_desc:after,
.reservas-espacios-reservas-table thead th.sorting_asc:before,
.reservas-espacios-reservas-table thead th.sorting_asc:after,
.reservas-espacios-reservas-table thead th.sorting_desc:before,
.reservas-espacios-reservas-table thead th.sorting_desc:after {
    color: #d8e3f0 !important;
    opacity: 1 !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead th.sorting_asc:before,
.reservas-espacios-reservas-table-wrapper .dataTables_scrollHead thead th.sorting_desc:after,
.reservas-espacios-reservas-table thead th.sorting_asc:before,
.reservas-espacios-reservas-table thead th.sorting_desc:after {
    color: #ff8800 !important;
    opacity: 1 !important;
}

/* Filas: alternancia azul claro (variación del azul estándar) - anular stripe/hover por defecto de DataTables */
.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody tbody tr td,
.reservas-espacios-reservas-table tbody tr td {
    box-shadow: none !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody tbody tr.even td,
.reservas-espacios-reservas-table tbody tr.even td {
    background-color: #fff !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody tbody tr.odd td,
.reservas-espacios-reservas-table tbody tr.odd td {
    background-color: #e8eef5 !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody tbody tr:hover td,
.reservas-espacios-reservas-table tbody tr:hover td {
    background-color: #d1e8ff !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody tbody tr.odd:hover td {
    background-color: #d1e8ff !important;
}

/* Bordes filas */
.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody tbody td,
.reservas-espacios-reservas-table tbody td {
    border: 1px solid #e0e0e0 !important;
    border-top: none !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody tbody tr:first-child td {
    border-top: 1px solid #e0e0e0 !important;
}

/* Bordes inferiores redondeados en última fila */
.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody tbody tr:last-child td:first-child {
    border-bottom-left-radius: 10px;
}

.reservas-espacios-reservas-table-wrapper .dataTables_scrollBody tbody tr:last-child td:last-child {
    border-bottom-right-radius: 10px;
}

/* Contenedor tabla: bordes redondeados y sombra */
.reservas-espacios-reservas-table-wrapper .dataTables_scroll,
.reservas-espacios-reservas-table-wrapper .dataTables_wrapper > .row:first-child + .row {
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.reservas-espacios-reservas-table-wrapper table.dataTable {
    border-radius: 10px;
    overflow: hidden;
}

/* Botones PDF y Ver Reserva: naranja con volumen y sombra */
.reservas-espacios-pdf-link,
.reservas-espacios-admin-link {
    display: inline-block;
    padding: 6px 14px;
    border: none;
    border-radius: 8px;
    background: #ff8800 !important;
    color: #fff !important;
    font-weight: 500;
    font-size: 13px;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(255, 136, 0, 0.35);
}

.reservas-espacios-pdf-link:hover,
.reservas-espacios-admin-link:hover {
    background: #1e3a5f !important;
    color: #fff !important;
    box-shadow: 0 4px 8px rgba(30, 58, 95, 0.4);
    transform: translateY(-1px);
}

.reservas-espacios-pdf-link:active,
.reservas-espacios-admin-link:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(255, 136, 0, 0.3);
}

/* Paginación: botones con bordes redondeados, sombra y volumen */
.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_paginate {
    padding-top: 1em;
}

.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 8px !important;
    padding: 6px 12px !important;
    margin: 0 2px !important;
    transition: all 0.2s ease !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current,
.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
    background: #ff8800 !important;
    border-color: #ff8800 !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(255, 136, 0, 0.4) !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button:hover:not(.disabled):not(.current) {
    background: #ff8800 !important;
    border-color: #ff8800 !important;
    color: #fff !important;
    box-shadow: 0 3px 8px rgba(255, 136, 0, 0.35) !important;
    transform: translateY(-1px) !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_paginate .paginate_button:active {
    background: #e67a00 !important;
    border-color: #e67a00 !important;
    transform: translateY(0) !important;
}

/* Length y search: bordes redondeados, sombra suave */
.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_length,
.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_filter {
    margin-bottom: 1em;
}

.reservas-espacios-dt-search,
.reservas-espacios-dt-select,
.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_filter input,
.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_length select {
    min-height: 42px !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 8px !important;
    padding: 8px 14px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
    transition: border-color 0.2s, box-shadow 0.2s !important;
}

.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_filter input:focus,
.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_length select:focus {
    border-color: #1e3a5f !important;
    outline: none !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 2px rgba(30, 58, 95, 0.15) !important;
}

/* Info de registros: estilo consistente con bordes redondeados */
.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_info {
    padding: 12px 0;
    font-size: 14px;
    color: #555;
}

/* Iconos en lugar de "Mostrar" y "Buscar" - azul thead #1e3a5f, misma altura que los campos */
.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_length label,
.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_filter label {
    display: inline-flex !important;
    align-items: center;
    min-height: 42px;
    font-size: 14px;
    color: #555;
}

.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_length label::before,
.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_filter label::before {
    content: '';
    align-self: stretch;
    width: auto;
    aspect-ratio: 1;
    min-width: 2em;
    margin-right: 8px;
    margin-bottom: 1em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    flex-shrink: 0;
}

.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_length label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e3a5f'%3E%3Cpath d='M4 6h16v2H4zm0 5h16v2H4zm0 5h10v2H4z'/%3E%3C/svg%3E");
}

.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_filter label::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e3a5f'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.47 6.47 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E");
}

.reservas-espacios-reservas-table-wrapper .dataTables_wrapper .dataTables_length label select {
    margin: 0 0 0 4px;
}

/* Mensaje de éxito global (post-reserva): responsive */
.reservas-espacios-mensaje-exito-global {
    box-sizing: border-box;
}
@media (max-width: 600px) {
    .reservas-espacios-mensaje-exito-global {
        left: max(12px, env(safe-area-inset-left)) !important;
        right: max(12px, env(safe-area-inset-right)) !important;
        top: max(12px, env(safe-area-inset-top)) !important;
        max-width: none !important;
        margin: 0 !important;
        padding: 16px 44px 16px 16px !important;
    }
}
@media (max-width: 400px) {
    .reservas-espacios-mensaje-exito-global {
        padding: 12px 40px 12px 12px !important;
    }
    .reservas-espacios-mensaje-exito-global h3 {
        font-size: 1.1rem !important;
    }
}