{"id":6,"date":"2026-02-10T08:50:35","date_gmt":"2026-02-10T08:50:35","guid":{"rendered":"https:\/\/reservas.itacaflow.com\/?page_id=6"},"modified":"2026-02-10T08:50:35","modified_gmt":"2026-02-10T08:50:35","slug":"reservas","status":"publish","type":"page","link":"https:\/\/reservas.itacaflow.com\/?page_id=6","title":{"rendered":"Reservas"},"content":{"rendered":"    <div class=\"rd-container\">\n        <h2>Reserva de Pistas<\/h2>\n        \n        <!-- Contenedor para mensajes de \u00e9xito\/error -->\n        <div id=\"rd-top-message\" class=\"rd-message-container\" style=\"display:none;\"><\/div>\n        \n                \n        <div class=\"rd-booking-layout\">\n            <!-- Panel de selecci\u00f3n inicial -->\n            <div class=\"rd-selection-panel\">\n                <!-- Panel del Calendario -->\n                <div class=\"rd-calendar-panel\">\n                    <h3>Selecciona fecha<\/h3>\n                    <div id=\"rd-datepicker\"><\/div>\n                <\/div>\n                \n                <!-- Panel de Selecci\u00f3n de Deporte -->\n                <div class=\"rd-sport-panel\">\n                    <h3>Selecciona deporte<\/h3>\n                    <div class=\"rd-sport-options\">\n                                                <div class=\"rd-sport-option selected\" data-sport=\"padel\">\n                            <div class=\"rd-sport-name\">P\u00e1del<\/div>\n                            <div class=\"rd-sport-duration\">90 min<\/div>\n                        <\/div>\n                                                <div class=\"rd-sport-option\" data-sport=\"futbol\">\n                            <div class=\"rd-sport-name\">F\u00fatbol<\/div>\n                            <div class=\"rd-sport-duration\">60 min<\/div>\n                        <\/div>\n                                            <\/div>\n                <\/div>\n            <\/div>\n            \n            <!-- Panel de Horarios y Formulario (contenedor flexible) -->\n            <div class=\"rd-info-panel\">\n                <!-- Panel de horarios -->\n                <div class=\"rd-timeslots-container rd-panel-section\" id=\"rd-timeslots-panel\" style=\"display:none;\">\n                    <h3>Horarios disponibles<\/h3>\n                    <div id=\"rd-timeslots\" class=\"rd-timeslots-grid\"><\/div>\n                <\/div>\n                \n                <!-- Formulario de reserva -->\n                <div id=\"rd-reservation-form\" class=\"rd-reservation-form-container rd-panel-section\" style=\"display:none;\">\n                    <h3>Completa tu reserva <span id=\"rd-selected-time-display\"><\/span><\/h3>\n                    \n                    <!-- Mensajes -->\n                    <div id=\"rd-message\" class=\"rd-message-container\" style=\"display:none;\"><\/div>\n                    \n                    <form id=\"rd-booking-form\">\n                        <!-- Campos ocultos para almacenar selecciones -->\n                        <input type=\"hidden\" id=\"rdpis_date\" name=\"rdpis_date\" value=\"\">\n                        <input type=\"hidden\" id=\"rdpis_time_slot\" name=\"rdpis_time_slot\" value=\"\">\n                        <input type=\"hidden\" id=\"rdpis_sport_type\" name=\"rdpis_sport_type\" value=\"\">\n                        <input type=\"hidden\" id=\"rdpis_court\" name=\"rdpis_court\" value=\"\">\n                        \n                        <div id=\"rd-court-selection\" style=\"display:none;\"><\/div>\n                        \n                        <div class=\"rd-form-row\">\n                            <label for=\"rdpis_user_name\">Nombre:<\/label>\n                            <input type=\"text\" name=\"rdpis_user_name\" id=\"rdpis_user_name\" required>\n                        <\/div>\n                        \n                        <div class=\"rd-form-row\">\n                            <label for=\"rdpis_user_email\">Email:<\/label>\n                            <input type=\"email\" name=\"rdpis_user_email\" id=\"rdpis_user_email\" required>\n                        <\/div>\n                        \n                        <div class=\"rd-form-row\">\n                            <label for=\"rdpis_user_phone\">Tel\u00e9fono:<\/label>\n                            <input type=\"tel\" name=\"rdpis_user_phone\" id=\"rdpis_user_phone\" required>\n                        <\/div>\n                        \n                        <div class=\"rd-form-row\">\n                            \n                                                            <div class=\"rd-payment-buttons\">\n                                                                            <button type=\"button\" id=\"rd-stripe-payment\" class=\"rd-button\">Pagar con Stripe<\/button>\n                                                                                                                                                    <button type=\"button\" id=\"rd-cash-payment\" class=\"rd-button\">Pagar en mano<\/button>\n                                                                    <\/div>\n                                                    <\/div>\n                    <\/form>\n                <\/div>\n            <\/div>\n        <\/div>\n    <\/div>\n    \n    <style>\n    \/* Estilos para la nueva estructura de layout *\/\n    @media (min-width: 1024px) {\n        .rd-info-panel {\n            display: flex;\n            flex-wrap: wrap;\n            justify-content: space-between;\n            align-items: flex-start;\n        }\n        \n        .rd-timeslots-container {\n            flex: 0 0 60%;\n        }\n        \n        .rd-reservation-form-container {\n            flex: 0 0 35%;\n        }\n        \n        .rd-message-container {\n            flex: 0 0 100%;\n            margin-top: 20px;\n        }\n    }\n    \n    \/* Estilos para el mensaje debajo del t\u00edtulo del formulario *\/\n    #rd-message {\n        margin: 15px 0;\n        padding: 10px;\n        border-radius: 4px;\n        text-align: center;\n    }\n    \n    #rd-message .rd-loading {\n        background-color: #e9f5ff;\n        color: #0073aa;\n        padding: 12px;\n        border-radius: 4px;\n        font-weight: 600;\n        box-shadow: 0 2px 6px rgba(0, 115, 170, 0.2);\n    }\n    \n    #rd-message .rd-error {\n        padding: 12px 15px;\n        background-color: #f8d7da;\n        color: #721c24;\n        border: 1px solid #f5c6cb;\n        border-radius: 6px;\n    }\n    \n    #rd-message .rd-success {\n        padding: 12px 15px;\n        background-color: #d4edda;\n        color: #155724;\n        border: 1px solid #c3e6cb;\n        border-radius: 6px;\n    }\n    <\/style>\n    \n        \n    <style type=\"text\/css\">\n        .rd-container {\n            max-width: 1000px;\n            margin: 0 auto;\n            padding: 20px;\n            font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Oxygen-Sans, Ubuntu, Cantarell, \"Helvetica Neue\", sans-serif;\n        }\n        \n        .rd-container h2 {\n            text-align: center;\n            color: #333;\n            margin-bottom: 30px;\n            font-size: 28px;\n        }\n        \n        .rd-container h3 {\n            color: #0073aa;\n            margin-top: 0;\n            margin-bottom: 15px;\n            font-size: 20px;\n        }\n        \n        .rd-booking-layout {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 20px;\n        }\n        \n        .rd-selection-panel {\n            flex: 1;\n            min-width: 300px;\n            display: flex;\n            flex-direction: column;\n            gap: 20px;\n        }\n        \n        .rd-calendar-panel {\n            background-color: #fff;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            padding: 20px;\n        }\n        \n        .rd-sport-panel {\n            background-color: #fff;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            padding: 20px;\n            margin-bottom: 0;\n        }\n        \n        .rd-info-panel {\n            flex: 2;\n            min-width: 300px;\n            display: flex;\n            flex-direction: column;\n            gap: 20px;\n        }\n        \n        .rd-panel-section {\n            background-color: #fff;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            padding: 20px;\n        }\n        \n        \/* Datepicker personalizado *\/\n        .ui-datepicker {\n            width: 100%;\n            padding: 0;\n            border: none;\n            border-radius: 8px;\n            overflow: hidden;\n        }\n        \n        .ui-datepicker .ui-datepicker-header {\n            background: #0073aa;\n            color: white;\n            border: none;\n            border-radius: 0;\n            padding: 10px;\n        }\n        \n        .ui-datepicker .ui-datepicker-title {\n            font-weight: bold;\n        }\n        \n        .ui-datepicker th {\n            background: #f7f7f7;\n            color: #333;\n            padding: 7px 0;\n        }\n        \n        .ui-datepicker td {\n            padding: 0;\n            border: 1px solid #f0f0f0;\n        }\n        \n        .ui-datepicker td span, .ui-datepicker td a {\n            padding: 8px;\n            text-align: center;\n        }\n        \n        .ui-datepicker .ui-state-default {\n            background: white;\n            border: none;\n            color: #333;\n        }\n        \n        .ui-datepicker .ui-state-hover {\n            background: #e9f5ff;\n        }\n        \n        .ui-datepicker .ui-state-active {\n            background: #0073aa;\n            color: white;\n        }\n        \n        \/* D\u00edas cerrados en el datepicker *\/\n        .ui-datepicker-highlighted .ui-state-default {\n            background: #f8d7da !important;\n            color: #721c24 !important;\n            text-decoration: line-through;\n        }\n        \n        \/* Horarios - MODIFICADO PARA 2 COLUMNAS FIJAS *\/\n        .rd-timeslots-grid {\n            display: grid;\n            grid-template-columns: repeat(2, 1fr); \/* Siempre 2 columnas fijas *\/\n            gap: 10px;\n            padding-right: 5px;\n        }\n        \n        .rd-timeslot {\n            text-align: center;\n            padding: 10px;\n            border-radius: 6px;\n            background-color: #e9f5ff;\n            border: 1px solid #c5e1ff;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            color: #000;\n            font-weight: 600;\n        }\n        \n        .rd-timeslot:hover {\n            background: #0073aa;\n            color: #fff;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 8px rgba(0,115,170,0.2);\n        }\n        \n        .rd-timeslot.rd-unavailable {\n            background-color: #f8d7da;\n            color: #721c24;\n            border-color: #f5c6cb;\n            cursor: not-allowed;\n            opacity: 0.8;\n            text-decoration: line-through;\n        }\n        \n        .rd-timeslot.rd-unavailable:hover {\n            background-color: #f8d7da;\n            color: #721c24;\n            transform: none;\n            box-shadow: none;\n        }\n        \n        .rd-timeslot.rd-selected {\n            background-color: #0073aa;\n            color: #fff;\n            border-color: #005177;\n            font-weight: bold;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 8px rgba(0,115,170,0.3);\n        }\n        \n        .rd-unavailable-text {\n            display: inline-block;\n            background-color: #dc3545;\n            color: #fff;\n            font-weight: bold;\n            padding: 2px 5px;\n            border-radius: 3px;\n            margin-top: 3px;\n        }\n        \n        .rd-day-closed {\n            padding: 15px;\n            background-color: #f8d7da;\n            color: #721c24;\n            border: 1px solid #f5c6cb;\n            border-radius: 6px;\n            text-align: center;\n            font-weight: 600;\n        }\n        \n        \/* Estilos para selecci\u00f3n de pistas *\/\n        .rd-court-selection-container {\n            margin-bottom: 20px;\n        }\n        \n        .rd-court-options {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 10px;\n            margin-top: 10px;\n        }\n        \n        .rd-court-option {\n            flex: 1;\n            min-width: 120px;\n            background-color: #f0f7ff;\n            border: 2px solid #d0e3ff;\n            border-radius: 8px;\n            padding: 12px 15px;\n            cursor: pointer;\n            text-align: center;\n            transition: all 0.2s ease;\n        }\n        \n        .rd-court-option:hover {\n            background-color: #e0eeff;\n            border-color: #b0d0ff;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 8px rgba(0,115,170,0.15);\n        }\n        \n        .rd-court-option.selected {\n            background-color: #0073aa;\n            color: white;\n            border-color: #005e8a;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 8px rgba(0,115,170,0.25);\n        }\n        \n        .rd-court-name {\n            font-weight: 600;\n            font-size: 16px;\n            margin-bottom: 5px;\n        }\n        \n        .rd-court-price {\n            font-size: 14px;\n            font-weight: 500;\n            color: #666;\n        }\n        \n        .rd-court-option.selected .rd-court-price {\n            color: rgba(255,255,255,0.9);\n        }\n        \n        .rd-price-info {\n            margin-top: 10px;\n            font-size: 13px;\n            color: #666;\n            font-style: italic;\n        }\n        \n        \/* Formulario *\/\n        .rd-form-row {\n            margin-bottom: 15px;\n        }\n        \n        .rd-form-row label {\n            display: block;\n            margin-bottom: 5px;\n            font-weight: 500;\n            color: #444;\n        }\n        \n        .rd-form-row input, \n        .rd-form-row select {\n            width: 100%;\n            padding: 10px;\n            border: 1px solid #ddd;\n            border-radius: 6px;\n            font-size: 14px;\n        }\n        \n        .rd-form-row input:focus, \n        .rd-form-row select:focus {\n            border-color: #0073aa;\n            outline: none;\n            box-shadow: 0 0 0 2px rgba(0,115,170,0.2);\n        }\n        \n        .rd-button {\n            background-color: #0073aa;\n            color: white;\n            border: none;\n            padding: 12px 20px;\n            border-radius: 6px;\n            cursor: pointer;\n            font-size: 16px;\n            font-weight: 600;\n            transition: all 0.3s ease;\n            width: 100%;\n        }\n        \n        .rd-button:hover {\n            background-color: #005177;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 12px rgba(0,115,170,0.3);\n        }\n        \n        \/* Estados de carga y mensajes *\/\n        .rd-loading {\n            text-align: center;\n            padding: 15px;\n            color: #666;\n        }\n        \n        .rd-error {\n            padding: 12px 15px;\n            background-color: #f8d7da;\n            color: #721c24;\n            border: 1px solid #f5c6cb;\n            border-radius: 6px;\n        }\n        \n        .rd-success {\n            padding: 12px 15px;\n            background-color: #d4edda;\n            color: #155724;\n            border: 1px solid #c3e6cb;\n            border-radius: 6px;\n        }\n        \n        \/* Sport Options *\/\n        .rd-sport-panel {\n            background-color: #fff;\n            border-radius: 8px;\n            box-shadow: 0 2px 10px rgba(0,0,0,0.1);\n            padding: 20px;\n            margin-top: 15px;\n        }\n        \n        .rd-sport-options {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 10px;\n        }\n        \n        .rd-sport-option {\n            flex: 1;\n            min-width: 90px;\n            display: flex;\n            flex-direction: column;\n            align-items: center;\n            justify-content: center;\n            text-align: center;\n            padding: 15px 14px;\n            background-color: #f8f9fa;\n            border: 1px solid #dee2e6;\n            border-radius: 6px;\n            cursor: pointer;\n            transition: all 0.2s ease;\n            box-sizing: border-box;\n        }\n        \n        .rd-sport-option:hover {\n            background-color: #e9ecef;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n        }\n        \n        .rd-sport-option.selected {\n            background-color: #0073aa;\n            color: white;\n            border-color: #0073aa;\n            transform: translateY(-2px);\n            box-shadow: 0 4px 8px rgba(0,115,170,0.2);\n        }\n        \n        .rd-sport-name {\n            font-weight: 600;\n            font-size: 16px;\n            margin-bottom: 5px;\n            width: 100%;\n            text-align: center;\n        }\n        \n        .rd-sport-duration {\n            font-size: 13px;\n            color: #6c757d;\n            width: 100%;\n            text-align: center;\n        }\n        \n        .rd-sport-option.selected .rd-sport-duration {\n            color: rgba(255,255,255,0.8);\n        }\n        \n        \/* Responsive *\/\n        @media (max-width: 768px) {\n            .rd-booking-layout {\n                flex-direction: column;\n            }\n            \n            .rd-sport-options {\n                flex-direction: column;\n            }\n            \n            .rd-sport-option {\n                width: 100%;\n                min-height: 78px;\n            }\n            \n            \/* Mantener 2 columnas en m\u00f3vil para horarios *\/\n            .rd-timeslots-grid {\n                grid-template-columns: repeat(2, 1fr);\n            }\n        }\n        \n        @media (max-width: 480px) {\n            \/* Para pantallas muy peque\u00f1as, volver a 1 columna *\/\n            .rd-timeslots-grid {\n                grid-template-columns: 1fr;\n            }\n        }\n        \n        \/* Estilos de la reserva *\/\n        .rd-container {\n            max-width: 1000px;\n            margin: 0 auto;\n            padding: 20px;\n            font-family: Arial, sans-serif;\n        }\n        \n        \/* Estilos para el texto de hora seleccionada *\/\n        #rd-selected-time-display {\n            font-weight: normal;\n            color: #0056b3;\n            font-size: 0.9em;\n            display: block;\n            margin-top: 5px;\n        }\n        \n        .rd-reservation-detail {\n            display: flex;\n            align-items: center;\n            gap: 10px;\n            background-color: #f0f8ff;\n            padding: 8px 12px;\n            border-radius: 4px;\n            font-size: 0.9em;\n        }\n        \n        .rd-reservation-detail i {\n            color: #0056b3;\n            margin-right: 4px;\n        }\n        \n        .rd-sports-grid {\n            display: grid;\n        }\n        \n        .rd-payment-buttons {\n            display: flex;\n            flex-wrap: wrap;\n            gap: 10px;\n            width: 100%;\n        }\n        \n        .rd-payment-buttons .rd-button {\n            flex: 1;\n            min-width: 140px;\n        }\n        \n        #rd-stripe-payment {\n            background-color: #6772e5;\n            border-color: #6772e5;\n        }\n        \n        #rd-stripe-payment:hover {\n            background-color: #5469d4;\n            border-color: #5469d4;\n        }\n        \n        #rd-cash-payment {\n            background-color: #28a745;\n            border-color: #28a745;\n        }\n        \n        #rd-cash-payment:hover {\n            background-color: #218838;\n            border-color: #1e7e34;\n        }\n        \n        \/* Estilos para mensajes en la parte superior *\/\n        #rd-top-message {\n            margin: 0 0 20px 0;\n            padding: 0;\n        }\n        \n        #rd-top-message .rd-success {\n            padding: 15px 20px;\n            background-color: #d4edda;\n            color: #155724;\n            border: 1px solid #c3e6cb;\n            border-radius: 6px;\n            text-align: center;\n            font-size: 16px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n        \n        #rd-top-message .rd-error {\n            padding: 15px 20px;\n            background-color: #f8d7da;\n            color: #721c24;\n            border: 1px solid #f5c6cb;\n            border-radius: 6px;\n            text-align: center;\n            font-size: 16px;\n            box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n        }\n    <\/style>\n    \n    \n","protected":false},"excerpt":{"rendered":"","protected":false},"author":0,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-6","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/reservas.itacaflow.com\/index.php?rest_route=\/wp\/v2\/pages\/6","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/reservas.itacaflow.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/reservas.itacaflow.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"replies":[{"embeddable":true,"href":"https:\/\/reservas.itacaflow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6"}],"version-history":[{"count":0,"href":"https:\/\/reservas.itacaflow.com\/index.php?rest_route=\/wp\/v2\/pages\/6\/revisions"}],"wp:attachment":[{"href":"https:\/\/reservas.itacaflow.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}