{"id":8,"date":"2026-10-15T06:16:37","date_gmt":"2026-10-15T06:16:37","guid":{"rendered":"https:\/\/autoservicionaranjo.com\/?page_id=8"},"modified":"2026-10-15T06:16:37","modified_gmt":"2026-10-15T06:16:37","slug":"agendar-cita","status":"publish","type":"page","link":"https:\/\/autoservicionaranjo.com\/?page_id=8","title":{"rendered":"Agendar Cita"},"content":{"rendered":"<!DOCTYPE html>\r\n<html lang=\"es\">\r\n<head>\r\n    <meta charset=\"UTF-8\">\r\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=yes, viewport-fit=cover\">\r\n    <meta name=\"theme-color\" content=\"#0a0a0a\">\r\n    <title>Agendar Cita | AutoServicio Naranjo<\/title>\r\n    <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\r\n    <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@300;400;500;600;700;800&display=swap\" rel=\"stylesheet\">\r\n    <style>\r\n        \/* ============================================\r\n           RESET Y VARIABLES - DARK PREMIUM\r\n        ============================================ *\/\r\n        * {\r\n            margin: 0;\r\n            padding: 0;\r\n            box-sizing: border-box;\r\n            -webkit-tap-highlight-color: transparent;\r\n        }\r\n\r\n        :root {\r\n            --bg-primary: #0a0a0a;\r\n            --bg-secondary: #0f0f0f;\r\n            --bg-card: #141414;\r\n            --bg-elevated: #1a1a1a;\r\n            --border: rgba(255,255,255,0.08);\r\n            --border-light: rgba(255,255,255,0.05);\r\n            --text-primary: #ffffff;\r\n            --text-secondary: #a0a0a0;\r\n            --text-muted: #6b6b6b;\r\n            --accent: #C5A028;\r\n            --accent-dark: #9e7b2c;\r\n            --accent-light: #d4af37;\r\n            --accent-glow: rgba(197,160,40,0.3);\r\n            --success: #10b981;\r\n            --danger: #ef4444;\r\n            --warning: #f59e0b;\r\n            --shadow-sm: 0 2px 4px rgba(0,0,0,0.3);\r\n            --shadow-md: 0 4px 6px rgba(0,0,0,0.4);\r\n            --shadow-lg: 0 10px 15px rgba(0,0,0,0.5);\r\n            --shadow-xl: 0 20px 25px rgba(0,0,0,0.6);\r\n            --radius-sm: 8px;\r\n            --radius-md: 12px;\r\n            --radius-lg: 20px;\r\n            --radius-xl: 28px;\r\n            --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        body {\r\n            font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;\r\n            background: var(--bg-primary);\r\n            min-height: 100vh;\r\n            padding: 24px;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            position: relative;\r\n        }\r\n\r\n        \/* Fondo con gradiente elegante *\/\r\n        body::before {\r\n            content: '';\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background: radial-gradient(circle at 20% 30%, rgba(197,160,40,0.08) 0%, transparent 60%),\r\n                        radial-gradient(circle at 80% 70%, rgba(197,160,40,0.05) 0%, transparent 60%);\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* Grid de l\u00edneas sutiles *\/\r\n        body::after {\r\n            content: '';\r\n            position: fixed;\r\n            top: 0;\r\n            left: 0;\r\n            right: 0;\r\n            bottom: 0;\r\n            background-image: linear-gradient(rgba(197,160,40,0.03) 1px, transparent 1px),\r\n                              linear-gradient(90deg, rgba(197,160,40,0.03) 1px, transparent 1px);\r\n            background-size: 40px 40px;\r\n            pointer-events: none;\r\n        }\r\n\r\n        \/* Contenedor principal *\/\r\n        .booking-container {\r\n            max-width: 1300px;\r\n            width: 100%;\r\n            margin: 0 auto;\r\n            position: relative;\r\n            z-index: 1;\r\n        }\r\n\r\n        \/* Card principal premium *\/\r\n        .booking-card {\r\n            background: var(--bg-card);\r\n            border-radius: var(--radius-xl);\r\n            overflow: hidden;\r\n            box-shadow: var(--shadow-xl), 0 0 0 1px var(--border);\r\n            backdrop-filter: blur(10px);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .booking-card:hover {\r\n            box-shadow: 0 30px 40px rgba(0,0,0,0.5), 0 0 0 1px rgba(197,160,40,0.2);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        \/* Bot\u00f3n cerrar premium *\/\r\n        .close-btn {\r\n            position: absolute;\r\n            top: 24px;\r\n            right: 24px;\r\n            width: 44px;\r\n            height: 44px;\r\n            border-radius: 50%;\r\n            background: rgba(255,255,255,0.03);\r\n            border: 1px solid var(--border);\r\n            color: var(--text-secondary);\r\n            font-size: 18px;\r\n            cursor: pointer;\r\n            z-index: 100;\r\n            transition: var(--transition);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n        }\r\n\r\n        .close-btn:hover {\r\n            background: rgba(239,68,68,0.2);\r\n            border-color: var(--danger);\r\n            color: var(--danger);\r\n            transform: rotate(90deg);\r\n        }\r\n\r\n        \/* Header premium *\/\r\n        .booking-header {\r\n            background: linear-gradient(135deg, #0a0a0a 0%, #141414 50%, #0a0a0a 100%);\r\n            padding: clamp(40px, 8vw, 60px) clamp(30px, 6vw, 50px) clamp(35px, 6vw, 50px);\r\n            text-align: center;\r\n            position: relative;\r\n            border-bottom: 1px solid var(--border);\r\n        }\r\n\r\n        .booking-header::after {\r\n            content: '';\r\n            position: absolute;\r\n            bottom: -1px;\r\n            left: 10%;\r\n            width: 80%;\r\n            height: 1px;\r\n            background: linear-gradient(90deg, transparent, var(--accent), var(--accent-light), transparent);\r\n        }\r\n\r\n        .booking-header h1 {\r\n            font-size: clamp(1.8rem, 6vw, 2.8rem);\r\n            font-weight: 800;\r\n            background: linear-gradient(135deg, #ffffff 0%, var(--accent) 50%, var(--accent-light) 100%);\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            letter-spacing: -0.02em;\r\n        }\r\n\r\n        .booking-header h1 i {\r\n            background: rgba(197,160,40,0.15);\r\n            padding: clamp(12px, 3vw, 16px);\r\n            border-radius: 50%;\r\n            margin-right: 12px;\r\n            -webkit-text-fill-color: initial;\r\n            color: var(--accent);\r\n        }\r\n\r\n        .booking-header p {\r\n            color: var(--text-secondary);\r\n            margin-top: 16px;\r\n            font-size: clamp(0.85rem, 3vw, 1rem);\r\n            letter-spacing: 0.5px;\r\n        }\r\n\r\n        \/* Progress steps premium *\/\r\n        .progress-steps {\r\n            display: flex;\r\n            background: var(--bg-secondary);\r\n            padding: clamp(16px, 3vw, 24px) clamp(20px, 5vw, 50px);\r\n            border-bottom: 1px solid var(--border);\r\n            gap: clamp(20px, 5vw, 50px);\r\n            justify-content: center;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .step {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 12px;\r\n            color: var(--text-muted);\r\n            transition: var(--transition);\r\n            font-size: clamp(0.8rem, 2.5vw, 0.9rem);\r\n            font-weight: 500;\r\n        }\r\n\r\n        .step.active { \r\n            color: var(--accent); \r\n        }\r\n        \r\n        .step.completed { \r\n            color: var(--success); \r\n        }\r\n\r\n        .step-number {\r\n            width: clamp(32px, 7vw, 40px);\r\n            height: clamp(32px, 7vw, 40px);\r\n            border-radius: 50%;\r\n            background: currentColor;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: var(--bg-primary);\r\n            font-weight: 700;\r\n            font-size: clamp(0.9rem, 3vw, 1rem);\r\n        }\r\n\r\n        \/* Body *\/\r\n        .booking-body {\r\n            padding: clamp(30px, 6vw, 50px);\r\n            background: var(--bg-card);\r\n        }\r\n\r\n        \/* ============================================\r\n           SECCIONES PREMIUM\r\n        ============================================ *\/\r\n        .section-title {\r\n            font-size: clamp(0.75rem, 2.5vw, 0.85rem);\r\n            font-weight: 600;\r\n            color: var(--accent);\r\n            margin-bottom: 20px;\r\n            text-transform: uppercase;\r\n            letter-spacing: 2px;\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 10px;\r\n        }\r\n\r\n        .section-title i {\r\n            font-size: 1rem;\r\n        }\r\n\r\n        \/* Campos de fecha premium *\/\r\n        .date-section {\r\n            margin-bottom: 30px;\r\n            position: relative;\r\n        }\r\n\r\n        .date-input-field {\r\n            width: 100%;\r\n            padding: 18px 24px;\r\n            background: var(--bg-elevated);\r\n            border: 1px solid var(--border);\r\n            border-radius: var(--radius-lg);\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: space-between;\r\n        }\r\n\r\n        .date-input-field span:first-child {\r\n            color: var(--text-secondary);\r\n        }\r\n\r\n        .date-input-field span:first-child i {\r\n            margin-right: 12px;\r\n            color: var(--accent);\r\n        }\r\n\r\n        .date-input-field span:last-child {\r\n            color: var(--text-primary);\r\n            font-weight: 500;\r\n        }\r\n\r\n        .date-input-field:hover {\r\n            border-color: rgba(197,160,40,0.3);\r\n            background: rgba(197,160,40,0.03);\r\n        }\r\n\r\n        .date-input-field.active {\r\n            border-color: var(--accent);\r\n            box-shadow: 0 0 0 3px var(--accent-glow);\r\n        }\r\n\r\n        \/* Calendario flotante premium *\/\r\n        .floating-calendar {\r\n            position: absolute;\r\n            top: calc(100% + 12px);\r\n            left: 0;\r\n            right: 0;\r\n            background: var(--bg-elevated);\r\n            border-radius: var(--radius-lg);\r\n            box-shadow: var(--shadow-xl);\r\n            z-index: 1000;\r\n            display: none;\r\n            border: 1px solid var(--border);\r\n            backdrop-filter: blur(20px);\r\n        }\r\n\r\n        .floating-calendar.show {\r\n            display: block;\r\n            animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        @keyframes slideDown {\r\n            from { opacity: 0; transform: translateY(-10px); }\r\n            to { opacity: 1; transform: translateY(0); }\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            padding: 20px;\r\n            border-bottom: 1px solid var(--border);\r\n        }\r\n\r\n        .calendar-nav {\r\n            background: none;\r\n            border: none;\r\n            width: 40px;\r\n            height: 40px;\r\n            border-radius: 50%;\r\n            cursor: pointer;\r\n            color: var(--accent);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .calendar-nav:hover {\r\n            background: rgba(197,160,40,0.1);\r\n        }\r\n\r\n        .calendar-month {\r\n            font-weight: 700;\r\n            color: var(--text-primary);\r\n            font-size: 1.1rem;\r\n        }\r\n\r\n        .calendar-weekdays {\r\n            display: grid;\r\n            grid-template-columns: repeat(7, 1fr);\r\n            padding: 16px;\r\n            text-align: center;\r\n            font-size: 0.75rem;\r\n            font-weight: 600;\r\n            color: var(--accent);\r\n            border-bottom: 1px solid var(--border);\r\n        }\r\n\r\n        .calendar-days {\r\n            display: grid;\r\n            grid-template-columns: repeat(7, 1fr);\r\n            gap: 6px;\r\n            padding: 16px;\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            font-size: 0.9rem;\r\n            transition: var(--transition);\r\n            background: transparent;\r\n            color: var(--text-primary);\r\n        }\r\n\r\n        .calendar-day:hover:not(.empty):not(.disabled) {\r\n            background: rgba(197,160,40,0.15);\r\n        }\r\n\r\n        .calendar-day.selected {\r\n            background: linear-gradient(135deg, var(--accent), var(--accent-dark));\r\n            color: var(--bg-primary);\r\n            font-weight: 700;\r\n            box-shadow: 0 0 15px var(--accent-glow);\r\n        }\r\n\r\n        .calendar-day.disabled {\r\n            opacity: 0.25;\r\n            cursor: not-allowed;\r\n        }\r\n\r\n        \/* Selector de hora premium con slider *\/\r\n        .time-section {\r\n            margin-top: 30px;\r\n        }\r\n\r\n        .time-slider-container {\r\n            background: var(--bg-elevated);\r\n            border-radius: var(--radius-lg);\r\n            padding: 28px;\r\n            border: 1px solid var(--border);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .time-slider-container:focus-within {\r\n            border-color: var(--accent);\r\n            box-shadow: 0 0 0 3px var(--accent-glow);\r\n        }\r\n\r\n        .time-value {\r\n            text-align: center;\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        .time-value span {\r\n            font-size: 3rem;\r\n            font-weight: 800;\r\n            background: linear-gradient(135deg, var(--accent), var(--accent-light));\r\n            -webkit-background-clip: text;\r\n            -webkit-text-fill-color: transparent;\r\n            background-clip: text;\r\n            letter-spacing: 2px;\r\n        }\r\n\r\n        \/* Slider personalizado premium *\/\r\n        .time-slider {\r\n            width: 100%;\r\n            height: 4px;\r\n            -webkit-appearance: none;\r\n            background: linear-gradient(90deg, var(--accent), var(--accent-light));\r\n            border-radius: 10px;\r\n            outline: none;\r\n            margin: 25px 0;\r\n        }\r\n\r\n        .time-slider::-webkit-slider-thumb {\r\n            -webkit-appearance: none;\r\n            width: 24px;\r\n            height: 24px;\r\n            background: var(--accent);\r\n            border: 2px solid var(--bg-card);\r\n            border-radius: 50%;\r\n            cursor: pointer;\r\n            box-shadow: 0 0 15px var(--accent-glow);\r\n            transition: transform 0.2s;\r\n        }\r\n\r\n        .time-slider::-webkit-slider-thumb:hover {\r\n            transform: scale(1.3);\r\n        }\r\n\r\n        .time-marks {\r\n            display: flex;\r\n            justify-content: space-between;\r\n            margin-top: 15px;\r\n            font-size: 0.7rem;\r\n            color: var(--text-muted);\r\n        }\r\n\r\n        \/* Botones r\u00e1pidos de hora *\/\r\n        .time-buttons {\r\n            display: flex;\r\n            flex-wrap: wrap;\r\n            gap: 12px;\r\n            margin-top: 25px;\r\n            justify-content: center;\r\n        }\r\n\r\n        .time-quick-btn {\r\n            background: var(--bg-secondary);\r\n            border: 1px solid var(--border);\r\n            border-radius: 40px;\r\n            padding: 12px 24px;\r\n            font-weight: 600;\r\n            font-size: 0.9rem;\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n            color: var(--text-secondary);\r\n        }\r\n\r\n        .time-quick-btn:hover {\r\n            background: rgba(197,160,40,0.1);\r\n            border-color: var(--accent);\r\n            color: var(--accent);\r\n            transform: translateY(-2px);\r\n        }\r\n\r\n        .time-quick-btn.selected {\r\n            background: linear-gradient(135deg, var(--accent), var(--accent-dark));\r\n            border-color: transparent;\r\n            color: var(--bg-primary);\r\n            box-shadow: 0 5px 20px var(--accent-glow);\r\n        }\r\n\r\n        \/* Formulario premium *\/\r\n        .form-group {\r\n            margin-bottom: 25px;\r\n        }\r\n\r\n        .form-group label {\r\n            display: block;\r\n            margin-bottom: 10px;\r\n            font-weight: 600;\r\n            color: var(--text-secondary);\r\n            font-size: 0.75rem;\r\n            text-transform: uppercase;\r\n            letter-spacing: 1.5px;\r\n        }\r\n\r\n        .form-group label i {\r\n            margin-right: 8px;\r\n            color: var(--accent);\r\n        }\r\n\r\n        .form-group input {\r\n            width: 100%;\r\n            padding: 16px 20px;\r\n            background: var(--bg-elevated);\r\n            border: 1px solid var(--border);\r\n            border-radius: var(--radius-md);\r\n            font-size: 1rem;\r\n            color: var(--text-primary);\r\n            transition: var(--transition);\r\n        }\r\n\r\n        .form-group input:focus {\r\n            outline: none;\r\n            border-color: var(--accent);\r\n            box-shadow: 0 0 0 3px var(--accent-glow);\r\n        }\r\n\r\n        .form-group input.valid {\r\n            border-color: var(--success);\r\n            background: rgba(16,185,129,0.05);\r\n        }\r\n\r\n        .form-group input.invalid {\r\n            border-color: var(--danger);\r\n            background: rgba(239,68,68,0.05);\r\n        }\r\n\r\n        \/* Botones premium *\/\r\n        .button-group {\r\n            display: flex;\r\n            gap: 20px;\r\n            margin-top: 35px;\r\n            flex-wrap: wrap;\r\n        }\r\n\r\n        .btn {\r\n            padding: 16px 32px;\r\n            border-radius: 60px;\r\n            font-weight: 700;\r\n            font-size: 0.9rem;\r\n            cursor: pointer;\r\n            transition: var(--transition);\r\n            text-align: center;\r\n            letter-spacing: 0.5px;\r\n            flex: 1;\r\n        }\r\n\r\n        .btn-primary {\r\n            background: linear-gradient(135deg, var(--accent), var(--accent-dark));\r\n            color: var(--bg-primary);\r\n            border: none;\r\n        }\r\n\r\n        .btn-primary:hover {\r\n            transform: translateY(-2px);\r\n            box-shadow: 0 10px 30px var(--accent-glow);\r\n            filter: brightness(1.05);\r\n        }\r\n\r\n        .btn-secondary {\r\n            background: transparent;\r\n            border: 1px solid var(--border);\r\n            color: var(--text-secondary);\r\n        }\r\n\r\n        .btn-secondary:hover {\r\n            border-color: var(--accent);\r\n            color: var(--accent);\r\n            background: rgba(197,160,40,0.05);\r\n        }\r\n\r\n        .btn-next {\r\n            background: linear-gradient(135deg, var(--accent), var(--accent-dark));\r\n            color: var(--bg-primary);\r\n            width: 100%;\r\n            margin-top: 25px;\r\n            padding: 18px;\r\n            font-size: 1rem;\r\n        }\r\n\r\n        .btn-next:disabled {\r\n            opacity: 0.5;\r\n            cursor: not-allowed;\r\n            transform: none;\r\n            filter: grayscale(0.3);\r\n        }\r\n\r\n        \/* Pantalla de confirmaci\u00f3n premium *\/\r\n        .confirmation-screen {\r\n            display: none;\r\n            text-align: center;\r\n            padding: 20px;\r\n            animation: fadeInScale 0.5s cubic-bezier(0.4, 0, 0.2, 1);\r\n        }\r\n\r\n        @keyframes fadeInScale {\r\n            from { opacity: 0; transform: scale(0.95); }\r\n            to { opacity: 1; transform: scale(1); }\r\n        }\r\n\r\n        .success-icon {\r\n            font-size: 4rem;\r\n            color: var(--success);\r\n            background: rgba(16,185,129,0.1);\r\n            width: 100px;\r\n            height: 100px;\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            margin: 0 auto 25px;\r\n            border: 1px solid rgba(16,185,129,0.2);\r\n        }\r\n\r\n        .confirmation-screen h2 {\r\n            font-size: clamp(1.5rem, 5vw, 2rem);\r\n            color: var(--text-primary);\r\n            margin-bottom: 10px;\r\n        }\r\n\r\n        .confirmation-screen p {\r\n            color: var(--text-secondary);\r\n        }\r\n\r\n        .summary-card {\r\n            background: var(--bg-elevated);\r\n            border-radius: var(--radius-lg);\r\n            padding: 28px;\r\n            margin: 30px 0;\r\n            text-align: left;\r\n            border: 1px solid var(--border);\r\n        }\r\n\r\n        .summary-item {\r\n            display: flex;\r\n            align-items: center;\r\n            gap: 18px;\r\n            padding: 14px 0;\r\n            border-bottom: 1px solid var(--border);\r\n        }\r\n\r\n        .summary-item:last-child {\r\n            border-bottom: none;\r\n        }\r\n\r\n        .summary-icon {\r\n            width: 50px;\r\n            height: 50px;\r\n            background: rgba(197,160,40,0.1);\r\n            border-radius: 50%;\r\n            display: flex;\r\n            align-items: center;\r\n            justify-content: center;\r\n            color: var(--accent);\r\n        }\r\n\r\n        .summary-label {\r\n            font-size: 0.7rem;\r\n            color: var(--text-muted);\r\n            text-transform: uppercase;\r\n            letter-spacing: 1px;\r\n            margin-bottom: 5px;\r\n        }\r\n\r\n        .summary-value {\r\n            font-weight: 700;\r\n            color: var(--text-primary);\r\n            font-size: 1rem;\r\n        }\r\n\r\n        \/* Transiciones de pasos *\/\r\n        .form-section {\r\n            display: none;\r\n        }\r\n\r\n        .form-section.active {\r\n            display: block;\r\n            animation: fadeIn 0.4s ease;\r\n        }\r\n\r\n        @keyframes fadeIn {\r\n            from { opacity: 0; transform: translateY(10px); }\r\n            to { opacity: 1; transform: translateY(0); }\r\n        }\r\n\r\n        \/* ============================================\r\n           TOAST PERSONALIZADO PARA MENSAJES\r\n        ============================================ *\/\r\n        .toast-premium {\r\n            position: fixed;\r\n            bottom: 30px;\r\n            left: 50%;\r\n            transform: translateX(-50%) translateY(20px);\r\n            padding: 16px 24px;\r\n            border-radius: 12px;\r\n            color: #fff;\r\n            font-weight: 600;\r\n            z-index: 99999;\r\n            box-shadow: 0 10px 40px rgba(0,0,0,0.5);\r\n            max-width: 90%;\r\n            text-align: center;\r\n            font-size: 14px;\r\n            opacity: 0;\r\n            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n            border: 1px solid rgba(255,255,255,0.1);\r\n            backdrop-filter: blur(10px);\r\n            font-family: 'Inter', sans-serif;\r\n        }\r\n\r\n        .toast-premium.show {\r\n            opacity: 1;\r\n            transform: translateX(-50%) translateY(0);\r\n        }\r\n\r\n        .toast-premium.error {\r\n            background: rgba(239,68,68,0.95);\r\n        }\r\n\r\n        .toast-premium.success {\r\n            background: rgba(16,185,129,0.95);\r\n        }\r\n\r\n        .toast-premium.warning {\r\n            background: rgba(245,158,11,0.95);\r\n        }\r\n\r\n        .toast-premium i {\r\n            margin-right: 10px;\r\n        }\r\n\r\n        \/* ============================================\r\n           RESPONSIVE - PC + M\u00d3VIL\r\n        ============================================ *\/\r\n        \r\n        \/* Desktop grande *\/\r\n        @media (min-width: 1400px) {\r\n            .booking-container {\r\n                max-width: 1300px;\r\n            }\r\n            \r\n            .fecha-hora-row {\r\n                display: grid;\r\n                grid-template-columns: 1fr 1fr;\r\n                gap: 40px;\r\n            }\r\n        }\r\n\r\n        \/* Desktop mediano *\/\r\n        @media (min-width: 992px) and (max-width: 1399px) {\r\n            .booking-container {\r\n                max-width: 1000px;\r\n            }\r\n        }\r\n\r\n        \/* Tablet *\/\r\n        @media (min-width: 768px) and (max-width: 991px) {\r\n            body {\r\n                padding: 20px;\r\n            }\r\n            \r\n            .fecha-hora-row {\r\n                display: block;\r\n            }\r\n        }\r\n\r\n        \/* M\u00f3vil *\/\r\n        @media (max-width: 767px) {\r\n            body {\r\n                padding: 0;\r\n                background: var(--bg-card);\r\n            }\r\n            \r\n            .booking-container {\r\n                max-width: 100%;\r\n            }\r\n            \r\n            .booking-card {\r\n                border-radius: 0;\r\n                box-shadow: none;\r\n            }\r\n            \r\n            .close-btn {\r\n                top: 16px;\r\n                right: 16px;\r\n                background: rgba(0,0,0,0.3);\r\n                color: white;\r\n            }\r\n            \r\n            .booking-header {\r\n                border-radius: 0;\r\n            }\r\n            \r\n            .step span:last-child {\r\n                display: none;\r\n            }\r\n            \r\n            .step {\r\n                gap: 8px;\r\n            }\r\n            \r\n            .time-value span {\r\n                font-size: 2.2rem;\r\n            }\r\n            \r\n            .time-quick-btn {\r\n                padding: 10px 18px;\r\n                font-size: 0.8rem;\r\n            }\r\n            \r\n            .button-group {\r\n                flex-direction: column;\r\n                gap: 12px;\r\n            }\r\n            \r\n            .btn {\r\n                width: 100%;\r\n            }\r\n        }\r\n\r\n        \/* Landscape en m\u00f3viles *\/\r\n        @media (max-width: 900px) and (orientation: landscape) {\r\n            .booking-body {\r\n                max-height: 60vh;\r\n                overflow-y: auto;\r\n            }\r\n        }\r\n\r\n        \/* Desktop dise\u00f1o de dos columnas para fecha\/hora *\/\r\n        @media (min-width: 992px) {\r\n            .fecha-hora-row {\r\n                display: grid;\r\n                grid-template-columns: 1fr 1fr;\r\n                gap: 40px;\r\n            }\r\n            \r\n            .date-section {\r\n                margin-bottom: 0;\r\n            }\r\n            \r\n            .time-section {\r\n                margin-top: 0;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    <div class=\"booking-container\">\r\n        <div class=\"booking-card\">\r\n            <!-- Bot\u00f3n cerrar -->\r\n            <button class=\"close-btn\" onclick=\"cerrarWidgetExterno()\" title=\"Cerrar\">\r\n                <i class=\"fas fa-times\"><\/i>\r\n            <\/button>\r\n            \r\n            <div class=\"booking-header\">\r\n                <h1><i class=\"fas fa-calendar-check\"><\/i> Agendar Cita<\/h1>\r\n                <p>Selecciona tu fecha y hora preferida<\/p>\r\n            <\/div>\r\n            \r\n            <div class=\"progress-steps\">\r\n                <div class=\"step active\" id=\"step1\">\r\n                    <div class=\"step-number\">1<\/div>\r\n                    <span>Fecha y Hora<\/span>\r\n                <\/div>\r\n                <div class=\"step\" id=\"step2\">\r\n                    <div class=\"step-number\">2<\/div>\r\n                    <span>Tus Datos<\/span>\r\n                <\/div>\r\n                <div class=\"step\" id=\"step3\">\r\n                    <div class=\"step-number\">3<\/div>\r\n                    <span>Confirmar<\/span>\r\n                <\/div>\r\n            <\/div>\r\n            \r\n            <div class=\"booking-body\">\r\n                <!-- PASO 1: FECHA Y HORA -->\r\n                <div id=\"step1Content\">\r\n                    <div class=\"fecha-hora-row\">\r\n                        <div class=\"date-section\">\r\n                            <div class=\"section-title\">\r\n                                <i class=\"fas fa-calendar-alt\"><\/i>\r\n                                <span>SELECCIONA UNA FECHA<\/span>\r\n                            <\/div>\r\n                            <div style=\"position: relative;\">\r\n                                <div class=\"date-input-field\" id=\"dateInputField\">\r\n                                    <span><i class=\"fas fa-calendar\"><\/i> Fecha<\/span>\r\n                                    <span id=\"selectedDateText\">Elige una fecha<\/span>\r\n                                <\/div>\r\n                                <div class=\"floating-calendar\" id=\"floatingCalendar\">\r\n                                    <div class=\"calendar-header\">\r\n                                        <button class=\"calendar-nav\" id=\"prevMonth\"><i class=\"fas fa-chevron-left\"><\/i><\/button>\r\n                                        <span class=\"calendar-month\" id=\"currentMonth\"><\/span>\r\n                                        <button class=\"calendar-nav\" id=\"nextMonth\"><i class=\"fas fa-chevron-right\"><\/i><\/button>\r\n                                    <\/div>\r\n                                    <div class=\"calendar-weekdays\">\r\n                                        <span>L<\/span><span>M<\/span><span>M<\/span><span>J<\/span><span>V<\/span><span>S<\/span><span>D<\/span>\r\n                                    <\/div>\r\n                                    <div class=\"calendar-days\" id=\"calendarDays\"><\/div>\r\n                                <\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                        \r\n                        <div class=\"time-section\">\r\n                            <div class=\"section-title\">\r\n                                <i class=\"fas fa-clock\"><\/i>\r\n                                <span>SELECCIONA UNA HORA<\/span>\r\n                            <\/div>\r\n                            <div class=\"time-slider-container\" id=\"timeSliderContainer\">\r\n                                <div class=\"time-value\">\r\n                                    <span id=\"timeDisplay\">09:00<\/span>\r\n                                <\/div>\r\n                                <input type=\"range\" id=\"timeSlider\" class=\"time-slider\" min=\"8\" max=\"19\" step=\"1\" value=\"9\">\r\n                                <div class=\"time-marks\">\r\n                                    <span>08:00<\/span><span>10:00<\/span><span>12:00<\/span><span>14:00<\/span><span>16:00<\/span><span>18:00<\/span>\r\n                                <\/div>\r\n                                <div class=\"time-buttons\" id=\"timeButtons\"><\/div>\r\n                            <\/div>\r\n                        <\/div>\r\n                    <\/div>\r\n                    \r\n                    <button class=\"btn btn-next\" id=\"nextToData\" disabled>Continuar <i class=\"fas fa-arrow-right\"><\/i><\/button>\r\n                <\/div>\r\n                \r\n                <!-- PASO 2: DATOS PERSONALES -->\r\n                <div id=\"step2Content\" class=\"form-section\">\r\n                    <div class=\"form-group\">\r\n                        <label><i class=\"fas fa-user\"><\/i> NOMBRE COMPLETO *<\/label>\r\n                        <input type=\"text\" id=\"nombre\" placeholder=\"Ej: Juan P\u00e9rez\" autocomplete=\"name\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label><i class=\"fas fa-phone\"><\/i> TEL\u00c9FONO *<\/label>\r\n                        <input type=\"tel\" id=\"telefono\" placeholder=\"Ej: 0996128299\" autocomplete=\"tel\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label><i class=\"fas fa-envelope\"><\/i> EMAIL (OPCIONAL)<\/label>\r\n                        <input type=\"email\" id=\"email\" placeholder=\"correo@ejemplo.com\" autocomplete=\"email\">\r\n                    <\/div>\r\n                    <div class=\"form-group\">\r\n                        <label><i class=\"fas fa-car\"><\/i> PLACA DEL VEH\u00cdCULO<\/label>\r\n                        <input type=\"text\" id=\"placa\" placeholder=\"Ej: ABC-123\" style=\"text-transform: uppercase;\" maxlength=\"10\" autocomplete=\"off\">\r\n                    <\/div>\r\n                    <div class=\"button-group\">\r\n                        <button class=\"btn btn-secondary\" id=\"backToDate\"><i class=\"fas fa-arrow-left\"><\/i> Atr\u00e1s<\/button>\r\n                        <button class=\"btn btn-primary\" id=\"confirmBtn\">Confirmar Cita <i class=\"fas fa-check\"><\/i><\/button>\r\n                    <\/div>\r\n                <\/div>\r\n                \r\n                <!-- PASO 3: CONFIRMACI\u00d3N -->\r\n                <div id=\"confirmationScreen\" class=\"confirmation-screen\">\r\n                    <div class=\"success-icon\">\r\n                        <i class=\"fas fa-check-circle\"><\/i>\r\n                    <\/div>\r\n                    <h2>\u00a1Cita Confirmada!<\/h2>\r\n                    <p>Tu cita ha sido agendada exitosamente<\/p>\r\n                    <div class=\"summary-card\" id=\"summaryCard\"><\/div>\r\n                    <button class=\"btn btn-primary\" onclick=\"cerrarWidgetExterno()\">Aceptar <i class=\"fas fa-check\"><\/i><\/button>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n    <\/div>\r\n    \r\n    <script src=\"https:\/\/code.jquery.com\/jquery-3.6.0.min.js\"><\/script>\r\n    <script>\r\n    jQuery(document).ready(function($) {\r\n        const nonce = 'eb05242b45';\r\n        \r\n        \/\/ Variables de estado\r\n        let selectedDate = null;\r\n        let selectedHour = 9;\r\n        let horaSeleccionada = '09:00';\r\n        let currentMonth = new Date().getMonth();\r\n        let currentYear = new Date().getFullYear();\r\n        \r\n        \/\/ Horarios disponibles\r\n        const horarios = ['08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00'];\r\n        \r\n        \/\/ ============================================\r\n        \/\/ FUNCI\u00d3N PARA CERRAR WIDGET\r\n        \/\/ ============================================\r\n        window.cerrarWidgetExterno = function() {\r\n            console.log('\ud83d\udd12 Cerrando widget de citas...');\r\n            \r\n            \/\/ 1. Intentar cerrar desde el padre (si existe)\r\n            try {\r\n                \/\/ Buscar el contenedor del widget en el padre\r\n                const widgetExterno = window.parent.document.getElementById('formulario-cita');\r\n                if (widgetExterno) {\r\n                    widgetExterno.style.display = 'none';\r\n                    \/\/ Tambi\u00e9n remover la clase show si existe\r\n                    widgetExterno.classList.remove('show');\r\n                    console.log('\u2705 Widget cerrado desde el padre');\r\n                    return;\r\n                }\r\n                \r\n                \/\/ Buscar modal en el padre\r\n                const modalPadre = window.parent.document.querySelector('.taller-cita-modal');\r\n                if (modalPadre) {\r\n                    modalPadre.classList.remove('show');\r\n                    modalPadre.style.display = 'none';\r\n                    console.log('\u2705 Modal cerrado desde el padre');\r\n                    return;\r\n                }\r\n            } catch(e) {\r\n                console.log('\u2139\ufe0f No se pudo acceder al padre, intentando en el mismo documento');\r\n            }\r\n            \r\n            \/\/ 2. Si estamos en un modal dentro de la misma p\u00e1gina\r\n            const modal = document.querySelector('.taller-modal-overlay');\r\n            if (modal) {\r\n                modal.classList.remove('show');\r\n                modal.style.display = 'none';\r\n                console.log('\u2705 Modal cerrado');\r\n                return;\r\n            }\r\n            \r\n            \/\/ 3. Si estamos en un widget dentro de la misma p\u00e1gina\r\n            const widget = document.getElementById('formulario-cita');\r\n            if (widget) {\r\n                widget.style.display = 'none';\r\n                widget.classList.remove('show');\r\n                console.log('\u2705 Widget cerrado');\r\n                return;\r\n            }\r\n            \r\n            \/\/ 4. Si estamos en un iframe, notificar al padre\r\n            if (window.parent !== window) {\r\n                try {\r\n                    window.parent.postMessage({ \r\n                        type: 'closeWidget',\r\n                        source: 'citas' \r\n                    }, '*');\r\n                    console.log('\u2705 Mensaje enviado al padre para cerrar');\r\n                    return;\r\n                } catch(e) {\r\n                    console.log('\u2139\ufe0f No se pudo enviar mensaje al padre');\r\n                }\r\n            }\r\n            \r\n            \/\/ 5. \u00daltimo recurso: ocultar el contenedor principal\r\n            const container = document.querySelector('.booking-container');\r\n            if (container) {\r\n                container.style.display = 'none';\r\n                console.log('\u2705 Contenedor ocultado');\r\n            }\r\n            \r\n            console.log('\ud83d\udd12 Widget cerrado correctamente');\r\n        };\r\n        \r\n        \/\/ ============================================\r\n        \/\/ TOAST PERSONALIZADO\r\n        \/\/ ============================================\r\n        function mostrarToast(mensaje, tipo) {\r\n            \/\/ Eliminar toasts anteriores\r\n            $('.toast-premium').remove();\r\n            \r\n            const toast = $(`\r\n                <div class=\"toast-premium ${tipo}\">\r\n                    <i class=\"fas ${tipo === 'error' ? 'fa-exclamation-circle' : tipo === 'warning' ? 'fa-triangle-exclamation' : 'fa-check-circle'}\"><\/i>\r\n                    ${mensaje}\r\n                <\/div>\r\n            `);\r\n            \r\n            $('body').append(toast);\r\n            \r\n            \/\/ Mostrar con animaci\u00f3n\r\n            setTimeout(() => {\r\n                toast.addClass('show');\r\n            }, 10);\r\n            \r\n            \/\/ Auto-ocultar despu\u00e9s de 4 segundos\r\n            setTimeout(() => {\r\n                toast.removeClass('show');\r\n                setTimeout(() => {\r\n                    toast.remove();\r\n                }, 300);\r\n            }, 4000);\r\n        }\r\n        \r\n        \/\/ ============================================\r\n        \/\/ CALENDARIO\r\n        \/\/ ============================================\r\n        function generateCalendar(month, year) {\r\n            const monthNames = ['Enero', 'Febrero', 'Marzo', 'Abril', 'Mayo', 'Junio', 'Julio', 'Agosto', 'Septiembre', 'Octubre', 'Noviembre', 'Diciembre'];\r\n            $('#currentMonth').text(monthNames[month] + ' ' + year);\r\n            \r\n            const firstDay = new Date(year, month, 1);\r\n            let startingDay = firstDay.getDay();\r\n            startingDay = startingDay === 0 ? 6 : startingDay - 1;\r\n            const monthLength = new Date(year, month + 1, 0).getDate();\r\n            const today = new Date();\r\n            today.setHours(0, 0, 0, 0);\r\n            \r\n            let html = '';\r\n            for (let i = 0; i < startingDay; i++) html += '<div class=\"calendar-day empty\"><\/div>';\r\n            \r\n            for (let d = 1; d <= monthLength; d++) {\r\n                const date = new Date(year, month, d);\r\n                date.setHours(0, 0, 0, 0);\r\n                let classes = 'calendar-day';\r\n                let isDisabled = false;\r\n                \r\n                if (date < today) {\r\n                    classes += ' disabled';\r\n                    isDisabled = true;\r\n                }\r\n                \r\n                if (selectedDate && date.getTime() === selectedDate.getTime() && !isDisabled) {\r\n                    classes += ' selected';\r\n                }\r\n                \r\n                const dateStr = `${year}-${String(month+1).padStart(2,'0')}-${String(d).padStart(2,'0')}`;\r\n                html += `<div class=\"${classes}\" data-date=\"${dateStr}\" data-timestamp=\"${date.getTime()}\">${d}<\/div>`;\r\n            }\r\n            $('#calendarDays').html(html);\r\n        }\r\n        \r\n        \/\/ Eventos del calendario\r\n        $('#dateInputField').on('click', function(e) {\r\n            e.stopPropagation();\r\n            $('#floatingCalendar').toggleClass('show');\r\n            $(this).toggleClass('active');\r\n        });\r\n        \r\n        $(document).on('click', function(e) {\r\n            if (!$(e.target).closest('.date-section').length) {\r\n                $('#floatingCalendar').removeClass('show');\r\n                $('#dateInputField').removeClass('active');\r\n            }\r\n        });\r\n        \r\n        $('#prevMonth').on('click', function() {\r\n            currentMonth--;\r\n            if (currentMonth < 0) {\r\n                currentMonth = 11;\r\n                currentYear--;\r\n            }\r\n            generateCalendar(currentMonth, currentYear);\r\n        });\r\n        \r\n        $('#nextMonth').on('click', function() {\r\n            currentMonth++;\r\n            if (currentMonth > 11) {\r\n                currentMonth = 0;\r\n                currentYear++;\r\n            }\r\n            generateCalendar(currentMonth, currentYear);\r\n        });\r\n        \r\n        $(document).on('click', '.calendar-day:not(.empty):not(.disabled)', function() {\r\n            const dateStr = $(this).data('date');\r\n            selectedDate = new Date(dateStr + 'T00:00:00');\r\n            \r\n            const fechaFormateada = selectedDate.toLocaleDateString('es-ES', {\r\n                weekday: 'long', day: 'numeric', month: 'long'\r\n            });\r\n            $('#selectedDateText').text(fechaFormateada.charAt(0).toUpperCase() + fechaFormateada.slice(1));\r\n            $('.calendar-day').removeClass('selected');\r\n            $(this).addClass('selected');\r\n            $('#floatingCalendar').removeClass('show');\r\n            $('#dateInputField').removeClass('active');\r\n            \r\n            verificarPaso1();\r\n            \r\n            if (navigator.vibrate) navigator.vibrate(20);\r\n        });\r\n        \r\n        \/\/ ============================================\r\n        \/\/ SELECTOR DE HORA\r\n        \/\/ ============================================\r\n        function actualizarHora() {\r\n            const horaFormateada = String(selectedHour).padStart(2, '0') + ':00';\r\n            horaSeleccionada = horaFormateada;\r\n            $('#timeDisplay').text(horaSeleccionada);\r\n            $('#timeSlider').val(selectedHour);\r\n            \r\n            $('.time-quick-btn').removeClass('selected');\r\n            $(`.time-quick-btn[data-hour=\"${selectedHour}\"]`).addClass('selected');\r\n            \r\n            verificarPaso1();\r\n        }\r\n        \r\n        $('#timeSlider').on('input', function() {\r\n            selectedHour = parseInt($(this).val());\r\n            actualizarHora();\r\n            if (navigator.vibrate) navigator.vibrate(10);\r\n        });\r\n        \r\n        function generarBotonesHora() {\r\n            let html = '';\r\n            for (let i = 8; i <= 19; i++) {\r\n                const hora = String(i).padStart(2, '0') + ':00';\r\n                html += `<div class=\"time-quick-btn\" data-hour=\"${i}\">${hora}<\/div>`;\r\n            }\r\n            $('#timeButtons').html(html);\r\n            \r\n            $('.time-quick-btn').on('click', function() {\r\n                selectedHour = parseInt($(this).data('hour'));\r\n                actualizarHora();\r\n                if (navigator.vibrate) navigator.vibrate(10);\r\n            });\r\n        }\r\n        \r\n        \/\/ ============================================\r\n        \/\/ VALIDACI\u00d3N PASO 1\r\n        \/\/ ============================================\r\n        function verificarPaso1() {\r\n            if (selectedDate && horaSeleccionada) {\r\n                $('#nextToData').prop('disabled', false);\r\n            } else {\r\n                $('#nextToData').prop('disabled', true);\r\n            }\r\n        }\r\n        \r\n        \/\/ ============================================\r\n        \/\/ NAVEGACI\u00d3N DE PASOS\r\n        \/\/ ============================================\r\n        $('#nextToData').on('click', function() {\r\n            if (!selectedDate || !horaSeleccionada) return;\r\n            \r\n            $('#step1Content').hide();\r\n            $('#step2Content').addClass('active');\r\n            $('#step1').removeClass('active').addClass('completed');\r\n            $('#step2').addClass('active');\r\n            $('#step1 .step-number').text('\u2713');\r\n            \r\n            \/\/ Scroll suave al top\r\n            $('html, body').animate({ scrollTop: 0 }, 200);\r\n        });\r\n        \r\n        $('#backToDate').on('click', function() {\r\n            $('#step2Content').removeClass('active');\r\n            $('#step1Content').show();\r\n            $('#step2').removeClass('active');\r\n            $('#step1').removeClass('completed').addClass('active');\r\n            $('#step1 .step-number').text('1');\r\n        });\r\n        \r\n        \/\/ ============================================\r\n        \/\/ VALIDACI\u00d3N EN TIEMPO REAL\r\n        \/\/ ============================================\r\n        function validarTelefono(telefono) {\r\n            const cleaned = telefono.replace(\/\\D\/g, '');\r\n            return cleaned.length >= 10;\r\n        }\r\n        \r\n        function validarEmail(email) {\r\n            const regex = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$\/;\r\n            return regex.test(email);\r\n        }\r\n        \r\n        $('#telefono').on('input', function() {\r\n            const val = $(this).val();\r\n            if (validarTelefono(val)) {\r\n                $(this).addClass('valid').removeClass('invalid');\r\n            } else if (val.length > 0) {\r\n                $(this).addClass('invalid').removeClass('valid');\r\n            } else {\r\n                $(this).removeClass('valid invalid');\r\n            }\r\n        });\r\n        \r\n        $('#email').on('input', function() {\r\n            const val = $(this).val().trim();\r\n            if (val && !validarEmail(val)) {\r\n                $(this).addClass('invalid').removeClass('valid');\r\n            } else if (val && validarEmail(val)) {\r\n                $(this).addClass('valid').removeClass('invalid');\r\n            } else {\r\n                $(this).removeClass('valid invalid');\r\n            }\r\n        });\r\n        \r\n        $('#placa').on('input', function() {\r\n            let val = $(this).val().toUpperCase();\r\n            val = val.replace(\/[^A-Z0-9-]\/g, '');\r\n            if (val.length > 10) val = val.slice(0, 10);\r\n            $(this).val(val);\r\n        });\r\n        \r\n        \/\/ ============================================\r\n        \/\/ ENV\u00cdO DEL FORMULARIO\r\n        \/\/ ============================================\r\n        $('#confirmBtn').on('click', function() {\r\n            const nombre = $('#nombre').val().trim();\r\n            const telefono = $('#telefono').val().trim();\r\n            \r\n            if (!nombre) {\r\n                mostrarToast('Por favor ingresa tu nombre completo', 'error');\r\n                $('#nombre').focus();\r\n                return;\r\n            }\r\n            \r\n            if (!telefono) {\r\n                mostrarToast('Por favor ingresa tu n\u00famero de tel\u00e9fono', 'error');\r\n                $('#telefono').focus();\r\n                return;\r\n            }\r\n            \r\n            if (!validarTelefono(telefono)) {\r\n                mostrarToast('Ingresa un n\u00famero de tel\u00e9fono v\u00e1lido (m\u00ednimo 10 d\u00edgitos)', 'error');\r\n                $('#telefono').focus();\r\n                return;\r\n            }\r\n            \r\n            const email = $('#email').val().trim();\r\n            if (email && !validarEmail(email)) {\r\n                mostrarToast('Ingresa un correo electr\u00f3nico v\u00e1lido', 'error');\r\n                $('#email').focus();\r\n                return;\r\n            }\r\n            \r\n            const btn = $(this);\r\n            btn.prop('disabled', true).html('<i class=\"fas fa-spinner fa-spin\"><\/i> Procesando...');\r\n            \r\n            const data = {\r\n                action: 'taller_guardar_cita',\r\n                nonce: nonce,\r\n                fecha: selectedDate.toISOString().split('T')[0],\r\n                hora: horaSeleccionada,\r\n                nombre: nombre,\r\n                telefono: telefono,\r\n                email: email,\r\n                placa: $('#placa').val().toUpperCase()\r\n            };\r\n            \r\n            $.ajax({\r\n                url: 'https:\/\/autoservicionaranjo.com\/wp-admin\/admin-ajax.php',\r\n                type: 'POST',\r\n                data: data,\r\n                success: function(response) {\r\n                    if (response.success) {\r\n                        if (navigator.vibrate) navigator.vibrate([50, 100, 50]);\r\n                        \r\n                        const fechaFormateada = selectedDate.toLocaleDateString('es-ES', {\r\n                            weekday: 'long', year: 'numeric', month: 'long', day: 'numeric'\r\n                        });\r\n                        \r\n                        const summaryHtml = `\r\n                            <div class=\"summary-item\">\r\n                                <div class=\"summary-icon\"><i class=\"fas fa-calendar-alt\"><\/i><\/div>\r\n                                <div><div class=\"summary-label\">FECHA<\/div><div class=\"summary-value\">${fechaFormateada.charAt(0).toUpperCase() + fechaFormateada.slice(1)}<\/div><\/div>\r\n                            <\/div>\r\n                            <div class=\"summary-item\">\r\n                                <div class=\"summary-icon\"><i class=\"fas fa-clock\"><\/i><\/div>\r\n                                <div><div class=\"summary-label\">HORA<\/div><div class=\"summary-value\">${horaSeleccionada}<\/div><\/div>\r\n                            <\/div>\r\n                            <div class=\"summary-item\">\r\n                                <div class=\"summary-icon\"><i class=\"fas fa-user\"><\/i><\/div>\r\n                                <div><div class=\"summary-label\">CLIENTE<\/div><div class=\"summary-value\">${nombre}<\/div><\/div>\r\n                            <\/div>\r\n                            <div class=\"summary-item\">\r\n                                <div class=\"summary-icon\"><i class=\"fas fa-phone\"><\/i><\/div>\r\n                                <div><div class=\"summary-label\">TEL\u00c9FONO<\/div><div class=\"summary-value\">${telefono}<\/div><\/div>\r\n                            <\/div>\r\n                            ${data.email ? `<div class=\"summary-item\"><div class=\"summary-icon\"><i class=\"fas fa-envelope\"><\/i><\/div><div><div class=\"summary-label\">EMAIL<\/div><div class=\"summary-value\">${data.email}<\/div><\/div><\/div>` : ''}\r\n                            ${data.placa ? `<div class=\"summary-item\"><div class=\"summary-icon\"><i class=\"fas fa-car\"><\/i><\/div><div><div class=\"summary-label\">PLACA<\/div><div class=\"summary-value\">${data.placa}<\/div><\/div><\/div>` : ''}\r\n                        `;\r\n                        $('#summaryCard').html(summaryHtml);\r\n                        \r\n                        $('#step2Content').removeClass('active');\r\n                        $('#confirmationScreen').show();\r\n                        $('#step2').removeClass('active').addClass('completed');\r\n                        $('#step3').addClass('active');\r\n                        $('#step2 .step-number').text('\u2713');\r\n                        \r\n                        mostrarToast('\u00a1Cita agendada exitosamente! \ud83c\udf89', 'success');\r\n                        \r\n                        \/\/ Scroll suave al top\r\n                        $('html, body').animate({ scrollTop: 0 }, 300);\r\n                    } else {\r\n                        mostrarToast('Error: ' + (response.data || 'Error al guardar la cita'), 'error');\r\n                    }\r\n                    btn.prop('disabled', false).html('Confirmar Cita <i class=\"fas fa-check\"><\/i>');\r\n                },\r\n                error: function() {\r\n                    mostrarToast('Error de conexi\u00f3n. Por favor intenta nuevamente.', 'error');\r\n                    btn.prop('disabled', false).html('Confirmar Cita <i class=\"fas fa-check\"><\/i>');\r\n                }\r\n            });\r\n        });\r\n        \r\n        \/\/ ============================================\r\n        \/\/ ESCAPE KEY PARA CERRAR\r\n        \/\/ ============================================\r\n        $(document).keyup(function(e) {\r\n            if (e.key === \"Escape\") {\r\n                cerrarWidgetExterno();\r\n            }\r\n        });\r\n        \r\n        \/\/ ============================================\r\n        \/\/ INICIALIZAR\r\n        \/\/ ============================================\r\n        generateCalendar(currentMonth, currentYear);\r\n        generarBotonesHora();\r\n        actualizarHora();\r\n        \r\n        console.log('\u2705 Sistema de citas DARK PREMIUM cargado');\r\n        console.log('\u2139\ufe0f Para cerrar: cerrarWidgetExterno()');\r\n    });\r\n    <\/script>\r\n<\/body>\r\n<\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-8","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=\/wp\/v2\/pages\/8","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=8"}],"version-history":[{"count":0,"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=\/wp\/v2\/pages\/8\/revisions"}],"wp:attachment":[{"href":"https:\/\/autoservicionaranjo.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=8"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}