{"id":31,"date":"2026-06-24T11:22:01","date_gmt":"2026-06-24T16:22:01","guid":{"rendered":"http:\/\/localhost\/DominioTech\/?page_id=31"},"modified":"2026-07-05T23:10:58","modified_gmt":"2026-07-06T04:10:58","slug":"reservas","status":"publish","type":"page","link":"https:\/\/techsolutions.vcsistemas.com\/?page_id=31","title":{"rendered":"Reservas"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"31\" class=\"elementor elementor-31\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3c408f3 e-con e-atomic-element e-flexbox-base e-5b7c027 \" data-id=\"3c408f3\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"3c408f3\">\n    \t\t<div class=\"elementor-element elementor-element-5d1f6bd elementor-widget elementor-widget-html\" data-id=\"5d1f6bd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================\r\n     CONTENIDO DE RESERVAS (SOLO ESTO)\r\n     ============================================ -->\r\n\r\n<!-- Toast Message -->\r\n<div class=\"toast-message\" id=\"toastMessage\">\r\n    <i class=\"fas fa-check-circle\"><\/i>\r\n    <div class=\"toast-content\">\r\n        <h4 id=\"toastTitle\">\u00c9xito<\/h4>\r\n        <p id=\"toastDescription\">Mensaje<\/p>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Header de Reservas -->\r\n<div class=\"header-reservas\">\r\n    <h1>Reserva tu Servicio T\u00e9cnico<\/h1>\r\n    <p>Agenda una cita con nuestros expertos en soporte t\u00e9cnico e instalaci\u00f3n de redes de manera r\u00e1pida y sencilla.<\/p>\r\n<\/div>\r\n\r\n<!-- Steps -->\r\n<div class=\"steps\">\r\n    <div class=\"step\">\r\n        <div class=\"step-icon\">\r\n            <i class=\"fas fa-calendar-check\"><\/i>\r\n        <\/div>\r\n        <h3>Selecciona el servicio<\/h3>\r\n        <p>Elige el servicio que necesitas<\/p>\r\n    <\/div>\r\n    <div class=\"step\">\r\n        <div class=\"step-icon\">\r\n            <i class=\"fas fa-clock\"><\/i>\r\n        <\/div>\r\n        <h3>Elige fecha y hora<\/h3>\r\n        <p>Selecciona tu disponibilidad<\/p>\r\n    <\/div>\r\n    <div class=\"step\">\r\n        <div class=\"step-icon\">\r\n            <i class=\"fas fa-user-check\"><\/i>\r\n        <\/div>\r\n        <h3>Confirma tus datos<\/h3>\r\n        <p>Completa el formulario<\/p>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- Reservation Form -->\r\n<div class=\"reservation-section\">\r\n    <h2>Formulario de Reserva<\/h2>\r\n    \r\n    <form id=\"reservationForm\">\r\n        <!-- Service Selection -->\r\n        <div class=\"form-group service-selection\">\r\n            <label>Selecciona el servicio:<\/label>\r\n            <div class=\"service-cards\">\r\n                <div class=\"service-card selected\" data-service=\"Soporte T\u00e9cnico Remoto\" data-price=\"50\">\r\n                    <i class=\"fas fa-laptop\"><\/i>\r\n                    <h4>Soporte Remoto<\/h4>\r\n                <\/div>\r\n                <div class=\"service-card\" data-service=\"Soporte T\u00e9cnico Presencial\" data-price=\"120\">\r\n                    <i class=\"fas fa-tools\"><\/i>\r\n                    <h4>Soporte Presencial<\/h4>\r\n                <\/div>\r\n                <div class=\"service-card\" data-service=\"Instalaci\u00f3n de Red B\u00e1sica\" data-price=\"80\">\r\n                    <i class=\"fas fa-network-wired\"><\/i>\r\n                    <h4>Red B\u00e1sica<\/h4>\r\n                <\/div>\r\n                <div class=\"service-card\" data-service=\"Instalaci\u00f3n de Red Avanzada\" data-price=\"180\">\r\n                    <i class=\"fas fa-server\"><\/i>\r\n                    <h4>Red Avanzada<\/h4>\r\n                <\/div>\r\n                <div class=\"service-card\" data-service=\"Instalaci\u00f3n de Red Empresarial\" data-price=\"500\">\r\n                    <i class=\"fas fa-building\"><\/i>\r\n                    <h4>Red Empresarial<\/h4>\r\n                <\/div>\r\n                <div class=\"service-card\" data-service=\"Instalaci\u00f3n de Red Inal\u00e1mbrica\" data-price=\"100\">\r\n                    <i class=\"fas fa-wifi\"><\/i>\r\n                    <h4>Red Inal\u00e1mbrica<\/h4>\r\n                <\/div>\r\n                <div class=\"service-card\" data-service=\"Mantenimiento Preventivo\" data-price=\"150\">\r\n                    <i class=\"fas fa-shield-alt\"><\/i>\r\n                    <h4>Mantenimiento<\/h4>\r\n                <\/div>\r\n                <div class=\"service-card\" data-service=\"Configuraci\u00f3n de Servidores\" data-price=\"600\">\r\n                    <i class=\"fas fa-database\"><\/i>\r\n                    <h4>Servidores<\/h4>\r\n                <\/div>\r\n            <\/div>\r\n            <input type=\"hidden\" id=\"selectedService\" name=\"service\" value=\"Soporte T\u00e9cnico Remoto\">\r\n            <input type=\"hidden\" id=\"selectedPrice\" name=\"price\" value=\"50\">\r\n        <\/div>\r\n\r\n        <!-- Calendar -->\r\n        <div class=\"form-group calendar-container\">\r\n            <label>Selecciona la fecha:<\/label>\r\n            <div class=\"calendar\">\r\n                <div class=\"calendar-header\">\r\n                    <h3 id=\"currentMonthYear\">Julio 2026<\/h3>\r\n                    <div class=\"calendar-nav\">\r\n                        <button type=\"button\" id=\"prevMonth\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\r\n                        <button type=\"button\" id=\"nextMonth\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\r\n                    <\/div>\r\n                <\/div>\r\n                <div class=\"calendar-weekdays\">\r\n                    <div>Dom<\/div>\r\n                    <div>Lun<\/div>\r\n                    <div>Mar<\/div>\r\n                    <div>Mi\u00e9<\/div>\r\n                    <div>Jue<\/div>\r\n                    <div>Vie<\/div>\r\n                    <div>S\u00e1b<\/div>\r\n                <\/div>\r\n                <div class=\"calendar-days\" id=\"calendarDays\"><\/div>\r\n            <\/div>\r\n            <input type=\"hidden\" id=\"selectedDate\" name=\"date\" value=\"\">\r\n        <\/div>\r\n\r\n        <!-- Time Slots -->\r\n        <div class=\"form-group time-slots\">\r\n            <label>Selecciona la hora:<\/label>\r\n            <div class=\"time-slot-grid\" id=\"timeSlots\">\r\n                <div class=\"time-slot\" data-time=\"09:00\">09:00 AM<\/div>\r\n                <div class=\"time-slot\" data-time=\"10:00\">10:00 AM<\/div>\r\n                <div class=\"time-slot\" data-time=\"11:00\">11:00 AM<\/div>\r\n                <div class=\"time-slot\" data-time=\"12:00\">12:00 PM<\/div>\r\n                <div class=\"time-slot\" data-time=\"14:00\">02:00 PM<\/div>\r\n                <div class=\"time-slot\" data-time=\"15:00\">03:00 PM<\/div>\r\n                <div class=\"time-slot\" data-time=\"16:00\">04:00 PM<\/div>\r\n                <div class=\"time-slot\" data-time=\"17:00\">05:00 PM<\/div>\r\n            <\/div>\r\n            <input type=\"hidden\" id=\"selectedTime\" name=\"time\" value=\"\">\r\n        <\/div>\r\n\r\n        <!-- Personal Information -->\r\n        <div class=\"form-grid\">\r\n            <div class=\"form-group\">\r\n                <label for=\"name\">Nombre completo:<\/label>\r\n                <input type=\"text\" id=\"name\" name=\"name\" placeholder=\"Ej: Clara Suni\" required>\r\n            <\/div>\r\n            <div class=\"form-group\">\r\n                <label for=\"email\">Correo electr\u00f3nico:<\/label>\r\n                <input type=\"email\" id=\"email\" name=\"email\" placeholder=\"Ej: clara@ejemplo.com\" required>\r\n            <\/div>\r\n            <div class=\"form-group\">\r\n                <label for=\"phone\">Tel\u00e9fono:<\/label>\r\n                <input type=\"tel\" id=\"phone\" name=\"phone\" placeholder=\"Ej: 987654321\" required>\r\n            <\/div>\r\n            <div class=\"form-group\">\r\n                <label for=\"address\">Direcci\u00f3n:<\/label>\r\n                <input type=\"text\" id=\"address\" name=\"address\" placeholder=\"Ej: Av. Ejemplo 123\" required>\r\n            <\/div>\r\n            <div class=\"form-group\">\r\n                <label for=\"notes\">Notas adicionales:<\/label>\r\n                <textarea id=\"notes\" name=\"notes\" placeholder=\"Ej: Urgente, preferencia de horario...\"><\/textarea>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <button type=\"submit\" class=\"submit-btn\">\r\n            <span class=\"btn-text\"><i class=\"fas fa-calendar-plus\"><\/i> Reservar Ahora<\/span>\r\n            <span class=\"spinner\"><\/span>\r\n        <\/button>\r\n    <\/form>\r\n<\/div>\r\n\r\n<!-- Appointment Summary -->\r\n<div class=\"appointment-summary\">\r\n    <h2><i class=\"fas fa-info-circle\"><\/i> Resumen de tu Reserva<\/h2>\r\n    <div class=\"summary-grid\">\r\n        <div class=\"summary-item\">\r\n            <i class=\"fas fa-calendar-alt\"><\/i>\r\n            <div>\r\n                <h4>Fecha<\/h4>\r\n                <p id=\"summaryDate\">-<\/p>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"summary-item\">\r\n            <i class=\"fas fa-clock\"><\/i>\r\n            <div>\r\n                <h4>Hora<\/h4>\r\n                <p id=\"summaryTime\">-<\/p>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"summary-item\">\r\n            <i class=\"fas fa-tools\"><\/i>\r\n            <div>\r\n                <h4>Servicio<\/h4>\r\n                <p id=\"summaryService\">Soporte T\u00e9cnico Remoto<\/p>\r\n            <\/div>\r\n        <\/div>\r\n        <div class=\"summary-item\">\r\n            <i class=\"fas fa-tag\"><\/i>\r\n            <div>\r\n                <h4>Precio<\/h4>\r\n                <p id=\"summaryPrice\">S\/ 50<\/p>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<!-- ============================================\r\n     ESTILOS SOLO PARA RESERVAS\r\n     ============================================ -->\r\n<style>\r\n    \/* ===== ESTILOS DE RESERVAS ===== *\/\r\n    \/* Estos estilos NO afectan tu men\u00fa porque usan selectores espec\u00edficos *\/\r\n    \r\n    .header-reservas {\r\n        text-align: center;\r\n        margin-bottom: 40px;\r\n        margin-top: 30px;\r\n    }\r\n\r\n    .header-reservas h1 {\r\n        font-size: 2.5rem;\r\n        font-weight: 700;\r\n        color: var(--dark, #212529);\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .header-reservas p {\r\n        font-size: 1.1rem;\r\n        color: #6c757d;\r\n        max-width: 700px;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .steps {\r\n        display: flex;\r\n        justify-content: center;\r\n        gap: 30px;\r\n        margin-bottom: 50px;\r\n        flex-wrap: wrap;\r\n    }\r\n\r\n    .step {\r\n        display: flex;\r\n        flex-direction: column;\r\n        align-items: center;\r\n        text-align: center;\r\n        max-width: 200px;\r\n    }\r\n\r\n    .step-icon {\r\n        width: 60px;\r\n        height: 60px;\r\n        background: var(--primary, #4361ee);\r\n        border-radius: 50%;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        color: white;\r\n        font-size: 1.8rem;\r\n        margin-bottom: 15px;\r\n        box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,0.1));\r\n    }\r\n\r\n    .step h3 {\r\n        font-size: 1.1rem;\r\n        font-weight: 600;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    .step p {\r\n        font-size: 0.9rem;\r\n        color: #6c757d;\r\n    }\r\n\r\n    .reservation-section {\r\n        background: white;\r\n        border-radius: var(--border-radius, 16px);\r\n        box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,0.1));\r\n        padding: 40px;\r\n        margin-bottom: 50px;\r\n    }\r\n\r\n    .reservation-section h2 {\r\n        font-size: 1.8rem;\r\n        font-weight: 700;\r\n        margin-bottom: 30px;\r\n        color: var(--dark, #212529);\r\n        text-align: center;\r\n    }\r\n\r\n    .form-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n        gap: 20px;\r\n        margin-bottom: 25px;\r\n    }\r\n\r\n    .form-group {\r\n        position: relative;\r\n    }\r\n\r\n    .form-group label {\r\n        display: block;\r\n        margin-bottom: 8px;\r\n        font-weight: 500;\r\n        color: var(--dark, #212529);\r\n    }\r\n\r\n    .form-group input,\r\n    .form-group select,\r\n    .form-group textarea {\r\n        width: 100%;\r\n        padding: 12px 15px;\r\n        border: 2px solid #e0e0e0;\r\n        border-radius: 10px;\r\n        font-size: 1rem;\r\n        transition: all 0.3s ease;\r\n        background: #f8f9fa;\r\n    }\r\n\r\n    .form-group input:focus,\r\n    .form-group select:focus,\r\n    .form-group textarea:focus {\r\n        border-color: var(--primary, #4361ee);\r\n        outline: none;\r\n        background: white;\r\n        box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.1);\r\n    }\r\n\r\n    .form-group textarea {\r\n        min-height: 100px;\r\n        resize: vertical;\r\n    }\r\n\r\n    .service-selection {\r\n        grid-column: 1 \/ -1;\r\n    }\r\n\r\n    .service-cards {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\r\n        gap: 15px;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .service-card {\r\n        background: white;\r\n        border: 2px solid #e0e0e0;\r\n        border-radius: 10px;\r\n        padding: 15px;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        text-align: center;\r\n    }\r\n\r\n    .service-card:hover {\r\n        border-color: var(--primary, #4361ee);\r\n        background: #f0f4ff;\r\n        transform: translateY(-3px);\r\n    }\r\n\r\n    .service-card.selected {\r\n        border-color: var(--primary, #4361ee);\r\n        background: #e8edff;\r\n    }\r\n\r\n    .service-card i {\r\n        font-size: 2rem;\r\n        color: var(--primary, #4361ee);\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .service-card h4 {\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        color: var(--dark, #212529);\r\n    }\r\n\r\n    .calendar-container {\r\n        grid-column: 1 \/ -1;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .calendar {\r\n        background: white;\r\n        border-radius: 10px;\r\n        padding: 20px;\r\n        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);\r\n    }\r\n\r\n    .calendar-header {\r\n        display: flex;\r\n        justify-content: space-between;\r\n        align-items: center;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .calendar-header h3 {\r\n        font-size: 1.2rem;\r\n        font-weight: 600;\r\n    }\r\n\r\n    .calendar-nav {\r\n        display: flex;\r\n        gap: 10px;\r\n    }\r\n\r\n    .calendar-nav button {\r\n        background: none;\r\n        border: none;\r\n        width: 35px;\r\n        height: 35px;\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        color: var(--primary, #4361ee);\r\n        font-size: 1.2rem;\r\n        transition: all 0.3s ease;\r\n    }\r\n\r\n    .calendar-nav button:hover {\r\n        background: #f0f4ff;\r\n    }\r\n\r\n    .calendar-weekdays {\r\n        display: grid;\r\n        grid-template-columns: repeat(7, 1fr);\r\n        text-align: center;\r\n        font-weight: 600;\r\n        color: #6c757d;\r\n        margin-bottom: 10px;\r\n    }\r\n\r\n    .calendar-days {\r\n        display: grid;\r\n        grid-template-columns: repeat(7, 1fr);\r\n        gap: 5px;\r\n    }\r\n\r\n    .calendar-day {\r\n        aspect-ratio: 1;\r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        border-radius: 50%;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        font-weight: 500;\r\n    }\r\n\r\n    .calendar-day:hover:not(.disabled):not(.selected) {\r\n        background: #f0f4ff;\r\n    }\r\n\r\n    .calendar-day.today {\r\n        font-weight: 700;\r\n        color: var(--primary, #4361ee);\r\n    }\r\n\r\n    .calendar-day.selected {\r\n        background: var(--primary, #4361ee);\r\n        color: white;\r\n    }\r\n\r\n    .calendar-day.disabled {\r\n        color: #adb5bd;\r\n        cursor: not-allowed;\r\n    }\r\n\r\n    .calendar-day.other-month {\r\n        color: #e9ecef;\r\n    }\r\n\r\n    .time-slots {\r\n        grid-column: 1 \/ -1;\r\n        margin-bottom: 20px;\r\n    }\r\n\r\n    .time-slots h3 {\r\n        font-size: 1.1rem;\r\n        font-weight: 600;\r\n        margin-bottom: 15px;\r\n    }\r\n\r\n    .time-slot-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));\r\n        gap: 10px;\r\n    }\r\n\r\n    .time-slot {\r\n        padding: 12px;\r\n        background: white;\r\n        border: 2px solid #e0e0e0;\r\n        border-radius: 10px;\r\n        text-align: center;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        font-weight: 500;\r\n    }\r\n\r\n    .time-slot:hover:not(.disabled) {\r\n        border-color: var(--primary, #4361ee);\r\n        background: #f0f4ff;\r\n    }\r\n\r\n    .time-slot.selected {\r\n        background: var(--primary, #4361ee);\r\n        color: white;\r\n        border-color: var(--primary, #4361ee);\r\n    }\r\n\r\n    .time-slot.disabled {\r\n        background: #f8f9fa;\r\n        color: #adb5bd;\r\n        cursor: not-allowed;\r\n    }\r\n\r\n    .submit-btn {\r\n        display: block;\r\n        width: 100%;\r\n        padding: 15px;\r\n        background: linear-gradient(135deg, var(--primary, #4361ee), var(--secondary, #3f37c9));\r\n        color: white;\r\n        border: none;\r\n        border-radius: 10px;\r\n        font-size: 1.1rem;\r\n        font-weight: 600;\r\n        cursor: pointer;\r\n        transition: all 0.3s ease;\r\n        box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,0.1));\r\n        position: relative;\r\n    }\r\n\r\n    .submit-btn:hover:not(:disabled) {\r\n        transform: translateY(-2px);\r\n        box-shadow: 0 12px 35px rgba(67, 97, 238, 0.3);\r\n    }\r\n\r\n    .submit-btn:disabled {\r\n        opacity: 0.7;\r\n        cursor: not-allowed;\r\n    }\r\n\r\n    .submit-btn .spinner {\r\n        display: none;\r\n        width: 20px;\r\n        height: 20px;\r\n        border: 3px solid rgba(255,255,255,0.3);\r\n        border-radius: 50%;\r\n        border-top-color: #fff;\r\n        animation: spin 0.8s ease-in-out infinite;\r\n        margin: 0 auto;\r\n    }\r\n\r\n    .submit-btn.loading .spinner {\r\n        display: block;\r\n    }\r\n\r\n    .submit-btn.loading .btn-text {\r\n        display: none;\r\n    }\r\n\r\n    @keyframes spin {\r\n        to { transform: rotate(360deg); }\r\n    }\r\n\r\n    .toast-message {\r\n        position: fixed;\r\n        top: 20px;\r\n        right: 20px;\r\n        padding: 20px 25px;\r\n        border-radius: var(--border-radius, 16px);\r\n        background: white;\r\n        box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,0.1));\r\n        transform: translateX(120%);\r\n        transition: transform 0.3s ease;\r\n        z-index: 1000;\r\n        max-width: 400px;\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n    }\r\n\r\n    .toast-message.show {\r\n        transform: translateX(0);\r\n    }\r\n\r\n    .toast-message.success {\r\n        border-left: 5px solid #4bb543;\r\n    }\r\n\r\n    .toast-message.error {\r\n        border-left: 5px solid #f94144;\r\n    }\r\n\r\n    .toast-message i {\r\n        font-size: 1.8rem;\r\n    }\r\n\r\n    .toast-message.success i {\r\n        color: #4bb543;\r\n    }\r\n\r\n    .toast-message.error i {\r\n        color: #f94144;\r\n    }\r\n\r\n    .toast-message .toast-content h4 {\r\n        font-size: 1rem;\r\n        font-weight: 600;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    .toast-message .toast-content p {\r\n        font-size: 0.9rem;\r\n        color: #6c757d;\r\n        margin: 0;\r\n    }\r\n\r\n    .appointment-summary {\r\n        background: white;\r\n        border-radius: var(--border-radius, 16px);\r\n        box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,0.1));\r\n        padding: 30px;\r\n        margin-bottom: 50px;\r\n    }\r\n\r\n    .appointment-summary h2 {\r\n        font-size: 1.8rem;\r\n        font-weight: 700;\r\n        margin-bottom: 20px;\r\n        color: var(--dark, #212529);\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 10px;\r\n    }\r\n\r\n    .summary-grid {\r\n        display: grid;\r\n        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));\r\n        gap: 20px;\r\n    }\r\n\r\n    .summary-item {\r\n        display: flex;\r\n        align-items: center;\r\n        gap: 15px;\r\n    }\r\n\r\n    .summary-item i {\r\n        font-size: 1.5rem;\r\n        color: var(--primary, #4361ee);\r\n        width: 40px;\r\n        text-align: center;\r\n    }\r\n\r\n    .summary-item div h4 {\r\n        font-size: 0.9rem;\r\n        font-weight: 600;\r\n        color: #6c757d;\r\n        margin-bottom: 5px;\r\n    }\r\n\r\n    .summary-item div p {\r\n        font-size: 1.1rem;\r\n        font-weight: 600;\r\n        color: var(--dark, #212529);\r\n    }\r\n\r\n    \/* Responsive *\/\r\n    @media (max-width: 768px) {\r\n        .steps {\r\n            gap: 20px;\r\n        }\r\n\r\n        .form-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .service-cards {\r\n            grid-template-columns: repeat(2, 1fr);\r\n        }\r\n\r\n        .time-slot-grid {\r\n            grid-template-columns: repeat(2, 1fr);\r\n        }\r\n    }\r\n\r\n    @media (max-width: 480px) {\r\n        .service-cards {\r\n            grid-template-columns: 1fr;\r\n        }\r\n\r\n        .time-slot-grid {\r\n            grid-template-columns: 1fr;\r\n        }\r\n    }\r\n<\/style>\r\n\r\n<!-- ============================================\r\n     JAVASCRIPT SOLO PARA RESERVAS\r\n     ============================================ -->\r\n<script>\r\n    \/\/ ============================================\r\n    \/\/ CONFIGURACI\u00d3N DE EMAILJS\r\n    \/\/ REEMPLAZA ESTOS VALORES CON LOS TUYOS\r\n    \/\/ ============================================\r\n    const EMAILJS_CONFIG = {\r\n        PUBLIC_KEY: 'TU_PUBLIC_KEY',\r\n        SERVICE_ID: 'TU_SERVICE_ID',\r\n        TEMPLATE_ID: 'TU_TEMPLATE_ID'\r\n    };\r\n\r\n    \/\/ ============================================\r\n    \/\/ VARIABLES GLOBALES\r\n    \/\/ ============================================\r\n    let currentDate = new Date();\r\n    let selectedDate = null;\r\n    let selectedTime = null;\r\n    const monthNames = [\"Enero\", \"Febrero\", \"Marzo\", \"Abril\", \"Mayo\", \"Junio\", \r\n                       \"Julio\", \"Agosto\", \"Septiembre\", \"Octubre\", \"Noviembre\", \"Diciembre\"];\r\n\r\n    \/\/ ============================================\r\n    \/\/ FUNCIONES DEL CALENDARIO\r\n    \/\/ ============================================\r\n    function initCalendar() {\r\n        renderCalendar(currentDate.getFullYear(), currentDate.getMonth());\r\n    }\r\n\r\n    function renderCalendar(year, month) {\r\n        const calendarDays = document.getElementById('calendarDays');\r\n        if (!calendarDays) return;\r\n        \r\n        calendarDays.innerHTML = '';\r\n\r\n        document.getElementById('currentMonthYear').textContent = \r\n            `${monthNames[month]} ${year}`;\r\n\r\n        const firstDay = new Date(year, month, 1).getDay();\r\n        const daysInMonth = new Date(year, month + 1, 0).getDate();\r\n        const daysInPrevMonth = new Date(year, month, 0).getDate();\r\n\r\n        for (let i = firstDay - 1; i >= 0; i--) {\r\n            const dayElement = document.createElement('div');\r\n            dayElement.className = 'calendar-day other-month disabled';\r\n            dayElement.textContent = daysInPrevMonth - i;\r\n            calendarDays.appendChild(dayElement);\r\n        }\r\n\r\n        const today = new Date();\r\n        for (let day = 1; day <= daysInMonth; day++) {\r\n            const dayElement = document.createElement('div');\r\n            dayElement.className = 'calendar-day';\r\n            dayElement.textContent = day;\r\n\r\n            if (year === today.getFullYear() && month === today.getMonth() && day === today.getDate()) {\r\n                dayElement.classList.add('today');\r\n            }\r\n\r\n            const dayDate = new Date(year, month, day);\r\n            if (dayDate < new Date(today.getFullYear(), today.getMonth(), today.getDate())) {\r\n                dayElement.classList.add('disabled');\r\n            }\r\n\r\n            if (selectedDate && \r\n                year === selectedDate.getFullYear() && \r\n                month === selectedDate.getMonth() && \r\n                day === selectedDate.getDate()) {\r\n                dayElement.classList.add('selected');\r\n            }\r\n\r\n            if (!dayElement.classList.contains('disabled')) {\r\n                dayElement.addEventListener('click', () => {\r\n                    document.querySelectorAll('.calendar-day').forEach(d => {\r\n                        d.classList.remove('selected');\r\n                    });\r\n                    dayElement.classList.add('selected');\r\n                    selectedDate = new Date(year, month, day);\r\n                    document.getElementById('selectedDate').value = \r\n                        selectedDate.toISOString().split('T')[0];\r\n                    updateSummary();\r\n                    enableTimeSlots();\r\n                });\r\n            }\r\n\r\n            calendarDays.appendChild(dayElement);\r\n        }\r\n\r\n        const totalCells = firstDay + daysInMonth;\r\n        const remainingCells = 7 - (totalCells % 7);\r\n\r\n        if (remainingCells < 7) {\r\n            for (let day = 1; day <= remainingCells; day++) {\r\n                const dayElement = document.createElement('div');\r\n                dayElement.className = 'calendar-day other-month disabled';\r\n                dayElement.textContent = day;\r\n                calendarDays.appendChild(dayElement);\r\n            }\r\n        }\r\n    }\r\n\r\n    \/\/ ============================================\r\n    \/\/ FUNCIONES DE HORARIOS\r\n    \/\/ ============================================\r\n    function enableTimeSlots() {\r\n        const timeSlots = document.querySelectorAll('.time-slot');\r\n        timeSlots.forEach(slot => {\r\n            slot.classList.remove('disabled');\r\n            slot.classList.remove('selected');\r\n        });\r\n        selectedTime = null;\r\n        document.getElementById('selectedTime').value = '';\r\n        updateSummary();\r\n    }\r\n\r\n    function initTimeSlots() {\r\n        const timeSlots = document.querySelectorAll('.time-slot');\r\n        timeSlots.forEach(slot => {\r\n            slot.addEventListener('click', () => {\r\n                if (slot.classList.contains('disabled')) return;\r\n                \r\n                timeSlots.forEach(s => s.classList.remove('selected'));\r\n                slot.classList.add('selected');\r\n                selectedTime = slot.dataset.time;\r\n                document.getElementById('selectedTime').value = selectedTime;\r\n                updateSummary();\r\n            });\r\n        });\r\n    }\r\n\r\n    \/\/ ============================================\r\n    \/\/ FUNCIONES DE SERVICIOS\r\n    \/\/ ============================================\r\n    function initServiceCards() {\r\n        const serviceCards = document.querySelectorAll('.service-card');\r\n        serviceCards.forEach(card => {\r\n            card.addEventListener('click', () => {\r\n                serviceCards.forEach(c => c.classList.remove('selected'));\r\n                card.classList.add('selected');\r\n                document.getElementById('selectedService').value = card.dataset.service;\r\n                document.getElementById('selectedPrice').value = card.dataset.price;\r\n                updateSummary();\r\n            });\r\n        });\r\n    }\r\n\r\n    \/\/ ============================================\r\n    \/\/ FUNCI\u00d3N DE ACTUALIZACI\u00d3N DE RESUMEN\r\n    \/\/ ============================================\r\n    function updateSummary() {\r\n        const selectedService = document.getElementById('selectedService').value;\r\n        const selectedPrice = document.getElementById('selectedPrice').value;\r\n        document.getElementById('summaryService').textContent = selectedService;\r\n        document.getElementById('summaryPrice').textContent = `S\/ ${selectedPrice}`;\r\n\r\n        if (selectedDate) {\r\n            const day = selectedDate.getDate();\r\n            const month = monthNames[selectedDate.getMonth()];\r\n            const year = selectedDate.getFullYear();\r\n            document.getElementById('summaryDate').textContent = `${day} de ${month} de ${year}`;\r\n        } else {\r\n            document.getElementById('summaryDate').textContent = '-';\r\n        }\r\n\r\n        if (selectedTime) {\r\n            document.getElementById('summaryTime').textContent = selectedTime;\r\n        } else {\r\n            document.getElementById('summaryTime').textContent = '-';\r\n        }\r\n    }\r\n\r\n    \/\/ ============================================\r\n    \/\/ FUNCI\u00d3N DE TOAST (NOTIFICACIONES)\r\n    \/\/ ============================================\r\n    function showToast(type, title, description) {\r\n        const toast = document.getElementById('toastMessage');\r\n        if (!toast) return;\r\n        \r\n        const icon = toast.querySelector('i');\r\n        const titleElement = document.getElementById('toastTitle');\r\n        const descElement = document.getElementById('toastDescription');\r\n\r\n        toast.className = 'toast-message';\r\n        \r\n        if (type === 'success') {\r\n            toast.classList.add('success');\r\n            icon.className = 'fas fa-check-circle';\r\n        } else {\r\n            toast.classList.add('error');\r\n            icon.className = 'fas fa-exclamation-circle';\r\n        }\r\n\r\n        titleElement.textContent = title;\r\n        descElement.textContent = description;\r\n        toast.classList.add('show');\r\n\r\n        clearTimeout(toast.timeout);\r\n        toast.timeout = setTimeout(() => {\r\n            toast.classList.remove('show');\r\n        }, 5000);\r\n    }\r\n\r\n    \/\/ ============================================\r\n    \/\/ FUNCI\u00d3N DE RESET DEL FORMULARIO\r\n    \/\/ ============================================\r\n    function resetForm() {\r\n        document.getElementById('reservationForm').reset();\r\n        \r\n        document.querySelectorAll('.service-card').forEach(c => c.classList.remove('selected'));\r\n        document.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected'));\r\n        document.querySelectorAll('.calendar-day').forEach(d => d.classList.remove('selected'));\r\n        \r\n        selectedDate = null;\r\n        selectedTime = null;\r\n        document.getElementById('selectedDate').value = '';\r\n        document.getElementById('selectedTime').value = '';\r\n        \r\n        const firstCard = document.querySelector('.service-card');\r\n        if (firstCard) {\r\n            firstCard.classList.add('selected');\r\n            document.getElementById('selectedService').value = 'Soporte T\u00e9cnico Remoto';\r\n            document.getElementById('selectedPrice').value = '50';\r\n        }\r\n        \r\n        updateSummary();\r\n        document.querySelectorAll('.time-slot').forEach(s => s.classList.add('disabled'));\r\n    }\r\n\r\n    \/\/ ============================================\r\n    \/\/ ENV\u00cdO DEL FORMULARIO CON EMAILJS\r\n    \/\/ ============================================\r\n    document.addEventListener('DOMContentLoaded', function() {\r\n        const form = document.getElementById('reservationForm');\r\n        if (!form) return;\r\n        \r\n        form.addEventListener('submit', async (e) => {\r\n            e.preventDefault();\r\n            \r\n            if (!selectedDate) {\r\n                showToast('error', 'Error', 'Por favor selecciona una fecha');\r\n                return;\r\n            }\r\n            \r\n            if (!selectedTime) {\r\n                showToast('error', 'Error', 'Por favor selecciona una hora');\r\n                return;\r\n            }\r\n\r\n            const name = document.getElementById('name').value;\r\n            const email = document.getElementById('email').value;\r\n            const phone = document.getElementById('phone').value;\r\n            const address = document.getElementById('address').value;\r\n            const notes = document.getElementById('notes').value || 'Sin notas adicionales';\r\n            const service = document.getElementById('selectedService').value;\r\n            const price = document.getElementById('selectedPrice').value;\r\n            const date = document.getElementById('selectedDate').value;\r\n            const time = document.getElementById('selectedTime').value;\r\n\r\n            if (!name || !email || !phone || !address) {\r\n                showToast('error', 'Error', 'Por favor completa todos los campos requeridos');\r\n                return;\r\n            }\r\n\r\n            const submitBtn = document.querySelector('.submit-btn');\r\n            submitBtn.disabled = true;\r\n            submitBtn.classList.add('loading');\r\n\r\n            try {\r\n                if (typeof emailjs !== 'undefined' && EMAILJS_CONFIG.PUBLIC_KEY !== 'TU_PUBLIC_KEY') {\r\n                    emailjs.init(EMAILJS_CONFIG.PUBLIC_KEY);\r\n                }\r\n\r\n                const templateParams = {\r\n                    to_email: 'dominiotechsolutions@gmail.com',\r\n                    from_name: name,\r\n                    from_email: email,\r\n                    phone: phone,\r\n                    address: address,\r\n                    service: service,\r\n                    price: price,\r\n                    date: date,\r\n                    time: time,\r\n                    notes: notes\r\n                };\r\n\r\n                if (EMAILJS_CONFIG.SERVICE_ID !== 'TU_SERVICE_ID' && \r\n                    EMAILJS_CONFIG.TEMPLATE_ID !== 'TU_TEMPLATE_ID') {\r\n                    \r\n                    const response = await emailjs.send(\r\n                        EMAILJS_CONFIG.SERVICE_ID,\r\n                        EMAILJS_CONFIG.TEMPLATE_ID,\r\n                        templateParams\r\n                    );\r\n                    \r\n                    console.log('Correo enviado:', response);\r\n                    showToast('success', '\u00a1Reserva Confirmada!', \r\n                        'Tu reserva ha sido enviada correctamente. Recibir\u00e1s un correo de confirmaci\u00f3n.');\r\n                    resetForm();\r\n                } else {\r\n                    console.log('DEMO: Datos de la reserva:', templateParams);\r\n                    showToast('success', '\u00a1Reserva Confirmada!', \r\n                        'DEMO: Tu reserva se ha registrado (EmailJS no configurado)');\r\n                    resetForm();\r\n                }\r\n\r\n            } catch (error) {\r\n                console.error('Error al enviar el correo:', error);\r\n                showToast('error', 'Error al enviar', \r\n                    'Hubo un problema al procesar tu reserva. Por favor, intenta nuevamente.');\r\n            } finally {\r\n                submitBtn.disabled = false;\r\n                submitBtn.classList.remove('loading');\r\n            }\r\n        });\r\n\r\n        \/\/ ============================================\r\n        \/\/ NAVEGACI\u00d3N DEL CALENDARIO\r\n        \/\/ ============================================\r\n        document.getElementById('prevMonth').addEventListener('click', () => {\r\n            currentDate.setMonth(currentDate.getMonth() - 1);\r\n            renderCalendar(currentDate.getFullYear(), currentDate.getMonth());\r\n        });\r\n\r\n        document.getElementById('nextMonth').addEventListener('click', () => {\r\n            currentDate.setMonth(currentDate.getMonth() + 1);\r\n            renderCalendar(currentDate.getFullYear(), currentDate.getMonth());\r\n        });\r\n\r\n        \/\/ ============================================\r\n        \/\/ INICIALIZACI\u00d3N\r\n        \/\/ ============================================\r\n        initCalendar();\r\n        initTimeSlots();\r\n        initServiceCards();\r\n        updateSummary();\r\n        document.querySelectorAll('.time-slot').forEach(s => s.classList.add('disabled'));\r\n    });\r\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>\u00c9xito Mensaje Reserva tu Servicio T\u00e9cnico Agenda una cita con nuestros expertos en soporte t\u00e9cnico e instalaci\u00f3n de redes de manera r\u00e1pida y sencilla. Selecciona el servicio Elige el servicio que necesitas Elige fecha y hora Selecciona tu disponibilidad Confirma&hellip;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-31","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/techsolutions.vcsistemas.com\/index.php?rest_route=\/wp\/v2\/pages\/31","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/techsolutions.vcsistemas.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/techsolutions.vcsistemas.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/techsolutions.vcsistemas.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/techsolutions.vcsistemas.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=31"}],"version-history":[{"count":7,"href":"https:\/\/techsolutions.vcsistemas.com\/index.php?rest_route=\/wp\/v2\/pages\/31\/revisions"}],"predecessor-version":[{"id":269,"href":"https:\/\/techsolutions.vcsistemas.com\/index.php?rest_route=\/wp\/v2\/pages\/31\/revisions\/269"}],"wp:attachment":[{"href":"https:\/\/techsolutions.vcsistemas.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=31"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}