{"id":2066,"date":"2023-11-24T14:42:34","date_gmt":"2023-11-24T14:42:34","guid":{"rendered":"https:\/\/cdadepasto.com\/?page_id=2066"},"modified":"2025-11-19T13:42:37","modified_gmt":"2025-11-19T18:42:37","slug":"agendarcita","status":"publish","type":"page","link":"https:\/\/cdadepasto.com\/?page_id=2066","title":{"rendered":"Agendar Cita"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"2066\" class=\"elementor elementor-2066\" data-elementor-settings=\"{&quot;ha_cmc_init_switcher&quot;:&quot;no&quot;}\">\n\t\t\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-4aa4a1c elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"4aa4a1c\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-d5862c7\" data-id=\"d5862c7\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-77742b6 elementor-widget elementor-widget-html\" data-id=\"77742b6\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<style>\r\n    \/* Variables de tu dise\u00f1o original (Modo Oscuro Predeterminado) *\/\r\n    :root{\r\n        --fondo-principal: #000;\r\n        --card: #0d0d0d; \r\n        --input-bg: #141416;\r\n        --input-border: #2a2a2a;\r\n        --texto-claro: #ffffff;\r\n        --texto-sec: #bdbfc6;\r\n        --accent: #0049ff; \r\n        --accent-2: #2a6bff; \r\n        --right-bg-color: #0033cc; \r\n    }\r\n\r\n    \/* \ud83d\udca1 VARIABLES PARA EL MODO CLARO \ud83d\udca1 *\/\r\n    .light-mode {\r\n        --fondo-principal: #f0f2f5; \r\n        --card: #ffffff;           \r\n        --input-bg: #e9ebee;       \r\n        --input-border: #ccd0d5;   \r\n        --texto-claro: #1c1e21;    \r\n        --texto-sec: #606770;      \r\n        --right-bg-color: #0033cc; \r\n    }\r\n\r\n    \/* Contenedor de ancho y alto completos de la ventana (Escritorio) *\/\r\n    .agenda-banner-wp {\r\n        width: 100vw; \r\n        position: relative; \r\n        left: 50%;\r\n        right: 50%;\r\n        margin-left: -50vw; \r\n        margin-right: -50vw;\r\n\r\n        min-height: 100vh; \r\n        \r\n        display: flex;\r\n        align-items: center;\r\n        justify-content: center;\r\n        padding: 0; \r\n        box-sizing: border-box;\r\n        background: var(--fondo-principal); \r\n        color: var(--texto-claro);\r\n        font-family: 'Poppins', system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial;\r\n        -webkit-font-smoothing: antialiased;\r\n        -moz-osx-smoothing: grayscale;\r\n        margin-top: 0 !important; \r\n        margin-bottom: 0 !important;\r\n        transition: background-color 0.3s, color 0.3s; \r\n    }\r\n\r\n    \/* CONTENEDOR CENTRAL (Escritorio) *\/\r\n    .agenda-container {\r\n        width: 100%;\r\n        display: flex;\r\n        gap: 0;\r\n        align-items: stretch;\r\n        background: none; \r\n        box-shadow: none; \r\n        border-radius: 0; \r\n        overflow: hidden;\r\n        height: 110vh; \r\n    }\r\n\r\n    \/* LADO FORM (IZQUIERDA - Escritorio) *\/\r\n    .agenda-form {\r\n        flex: 1 1 50%; \r\n        padding: 50px 40px; \r\n        background: var(--fondo-principal); \r\n        box-sizing: border-box;\r\n        \r\n        display: grid; \r\n        place-items: center; \r\n    }\r\n\r\n    \/* Contenido interno para evitar que los campos se estiren demasiado (Escritorio) *\/\r\n    .form-content {\r\n        width: 100%;\r\n        max-width: 450px; \r\n        display: flex;\r\n        flex-direction: column;\r\n        gap: 6px;\r\n    }\r\n    \r\n    \/* \ud83d\udca1 BOT\u00d3N SOL\/LUNA \ud83d\udca1 *\/\r\n    #theme-toggle {\r\n        background: none;\r\n        border: none;\r\n        color: var(--texto-claro);\r\n        cursor: pointer;\r\n        padding: 0;\r\n        margin-bottom: 15px;\r\n        align-self: flex-end; \r\n        transition: color 0.3s;\r\n        width: 30px; \r\n        height: 30px;\r\n        position: relative; \/* Contenedor para que los hijos absolutos se superpongan *\/\r\n        display: block; \r\n    }\r\n    #theme-toggle img {\r\n        width: 30px;\r\n        height: 30px;\r\n        object-fit: contain; \r\n        transition: opacity 0.3s;\r\n\r\n        \/* Clave para la superposici\u00f3n: Absoluta y anclada *\/\r\n        position: absolute; \r\n        top: 0;\r\n        left: 0;\r\n        right: 0;\r\n        bottom: 0;\r\n        margin: auto; \r\n    }\r\n    \r\n    \/* Mostrar el icono de SOL por defecto (para cambiar a modo claro) *\/\r\n    .moon-icon { display: none; }\r\n    .sun-icon { display: block; }\r\n    \r\n    \/* En MODO CLARO, mostrar el icono de LUNA (para cambiar a modo oscuro) *\/\r\n    .light-mode .moon-icon { display: block; }\r\n    .light-mode .sun-icon { display: none; }\r\n\r\n\r\n    .form-content header { margin-bottom: 6px; }\r\n    .form-content h2 { font-size: 32px; margin: 0 0 4px 0; color: var(--texto-claro); font-weight: 700; }\r\n    .form-content p { margin: 0 0 20px 0; color: var(--texto-sec); font-size: 14px; line-height: 1.3; }\r\n\r\n    \/* LABELS E INPUTS (Estilos generales) *\/\r\n    .agenda-form label { display:block; font-size:12px; color:var(--texto-sec); margin-bottom:6px; font-weight:600; }\r\n    .agenda-form input[type=\"text\"],\r\n    .agenda-form input[type=\"tel\"],\r\n    .agenda-form input[type=\"date\"],\r\n    .agenda-form input[type=\"time\"],\r\n    .agenda-form select {\r\n        width:100%; padding:10px 12px; border-radius:8px; border:1px solid var(--input-border);\r\n        background:var(--input-bg); color:var(--texto-claro); font-size:14px; box-sizing:border-box;\r\n        transition: box-shadow .18s ease, border-color .18s ease, transform .06s ease, background-color 0.3s, color 0.3s;\r\n        -webkit-appearance: none; -moz-appearance: none; appearance: none; margin:0;\r\n        background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%20viewBox%3D%220%200%20292.4%20292.4%22%3E%3Cpath%20fill%3D%22%23bdbdbd%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.6A17.6%2017.6%200%200%200%205.4%2069.4a17.6%2017.6%200%200%200%200%2024.8l128%20128a17.6%2017.6%200%200%200%2024.8%200l128-128a17.6%2017.6%200%200%200%200-24.8z%22%2F%3E%3C%2Fsvg%3E'); \r\n        background-repeat: no-repeat; background-position: right 10px center; background-size: 10px; padding-right: 30px; \r\n    }\r\n    .light-mode .agenda-form select {\r\n        background-image: url('data:image\/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%20viewBox%3D%220%200%20292.4%20292.4%22%3E%3Cpath%20fill%3D%22%231c1e21%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13.2-5.4H18.6A17.6%2017.6%200%200%200%205.4%2069.4a17.6%2017.6%200%200%200%200%2024.8l128%20128a17.6%2017.6%200%200%200%2024.8%200l128-128a17.6%2017.6%200%200%200%200-24.8z%22%2F%3E%3C%2Fsvg%3E'); \r\n    }\r\n    .agenda-form select option { background: var(--input-bg); color: var(--texto-claro); padding: 5px; }\r\n    .agenda-form input::placeholder { color:var(--texto-sec); opacity: 0.6; }\r\n    .agenda-form input:focus, .agenda-form select:focus { outline: none; border-color: var(--accent); box-shadow: 0 8px 20px rgba(0,123,255,0.12), 0 0 8px rgba(0,123,255,0.06); transform: translateY(-1px); }\r\n\r\n    \/* GRIDS y FIELDs - Estilos generales *\/\r\n    .grid-2-cols { display:grid; grid-template-columns:repeat(2, 1fr); gap:15px; } \r\n    .grid-2-cols-row { display:grid; grid-template-columns:repeat(2, 1fr); gap:15px; margin-bottom:15px; }\r\n    .field { display:flex; flex-direction:column; gap:6px; margin-bottom:15px; }\r\n\r\n    \/* Centrado de Pol\u00edtica de Privacidad *\/\r\n    .politica{ \r\n        display:flex; \r\n        align-items:center; \r\n        justify-content:center;\r\n        gap:8px; \r\n        margin-top:10px; \r\n        margin-bottom:10px; \r\n        color:var(--texto-sec); \r\n        font-size:13px; \r\n        text-align: center; \r\n    }\r\n    .politica label { margin:0; cursor:pointer; font-size:13px; color:var(--texto-sec); }\r\n    .politica a { color: var(--accent); text-decoration: none; font-weight: 600; }\r\n    .politica a:hover { text-decoration: underline; }\r\n    \r\n    .agenda-form button[type=\"submit\"]{ \r\n        width:100%; \r\n        border:0; \r\n        cursor:pointer; \r\n        text-decoration: none;\r\n        \r\n        font-size:16px; \r\n        font-weight: 600; \r\n        color: white; \r\n\r\n        padding: 14px 26px; \r\n        border-radius: 30px; \r\n        \r\n        background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 100%); \r\n        box-shadow: 0 0 15px rgba(0, 73, 255, 0.4); \r\n        \r\n        transition: 0.3s; \r\n        margin-top:5px; \r\n    }\r\n    .agenda-form button[type=\"submit\"]:hover{ \r\n        transform:translateY(-3px); \r\n        box-shadow: 0 12px 28px rgba(0,170,255,0.12); \r\n    }\r\n    \r\n    \/* Centrado de iconos de Redes Sociales *\/\r\n    .redes{ \r\n        display:flex; \r\n        gap:20px; \r\n        margin-top:20px; \r\n        align-items:center; \r\n        justify-content:center;\r\n    } \r\n    .redes a{ \r\n        display:inline-flex; \r\n        align-items:center; \r\n        justify-content:center; \r\n        width:30px; \r\n        height:30px; \r\n        text-decoration:none; \r\n    }\r\n    .redes a img{ \r\n        width:30px; \r\n        height:30px; \r\n        object-fit:contain; \r\n        display:block; \r\n        transition: transform 0.2s ease;\r\n    }\r\n    .redes a:hover img {\r\n        transform: scale(1.1); \r\n    }\r\n\r\n    \/* LADO VIDEO DERECHA (Escritorio) *\/\r\n    .agenda-img-right {\r\n        flex: 1 1 50%; \r\n        background-color: var(--right-bg-color); \r\n        display: flex;\r\n        align-items: flex-end; \r\n        justify-content: center;\r\n        padding: 0;\r\n        box-sizing: border-box;\r\n        position: relative;\r\n        overflow: hidden;\r\n    }\r\n    \r\n    .agenda-img-right video { \r\n        width: 100%; \r\n        height: 100%;\r\n        object-fit: cover; \r\n        display: block;\r\n    }\r\n\r\n    \/* Ajustes responsivos (M\u00f3vil y Tablet) *\/\r\n    @media (max-width: 980px){\r\n        .agenda-banner-wp {\r\n            min-height: auto;\r\n            padding: 0;\r\n            position: static; \r\n            margin-left: 0;\r\n            margin-right: 0;\r\n            width: 100%;\r\n        }\r\n        .agenda-container{ \r\n            flex-direction:column-reverse; \r\n            height: auto; \r\n            max-width: 100%; \r\n            margin-left: 0;\r\n            margin-right: 0;\r\n            border-radius: 0;\r\n            box-shadow: none;\r\n        }\r\n        .agenda-img-right{ \r\n            flex:0 0 auto; \r\n            height: 500px; \/* Altura fija para la secci\u00f3n de video en m\u00f3vil *\/\r\n            border-radius: 0;\r\n        }\r\n        .agenda-form{ \r\n            padding:30px; \r\n            gap:8px; \r\n            border-radius: 0;\r\n            background: var(--card);\r\n            \r\n            display: flex;\r\n            flex-direction: column;\r\n            justify-content: flex-start;\r\n            align-items: stretch; \r\n        }\r\n        .form-content {\r\n            max-width: 100%; \/* Asegura que el contenido interno del formulario use todo el ancho disponible *\/\r\n            gap: 10px; \r\n        }\r\n        #theme-toggle { align-self: flex-end; }\r\n        .grid-2-cols, .grid-2-cols-row { grid-template-columns: 1fr; gap:10px; }\r\n        \r\n        .form-content h2, .form-content p { text-align: left; }\r\n    }\r\n<\/style>\r\n<script type=\"text\/javascript\" src=\"https:\/\/cdadepasto.com\/agenda_cdapasto\/js\/js_query.js\"><\/script>\r\n<script>\r\n    function getList_TipoVH(){\r\n\t\t$(\"#divShowMsgBox\").html(\"\");\r\n\t\tvar ls_code=$(\"#vagendar_code_txt_codeacceso\").val();\r\n\t\t$(\"#\"+ls_code+\"_cmb_tipovh\").html(\"\");\r\n\t\tvar data = new FormData();\r\n\t\t$.ajax({\r\n\t\t\turl: \"https:\/\/cdadepasto.com\/agenda_cdapasto\/log\/lt_tipovh.php\",\r\n\t\t\ttype: \"post\",\r\n\t\t\tdata: data,\r\n\t\t\tcontentType: false,\r\n\t\t\tprocessData: false,\r\n\t\t\tcache: false,\r\n\t\t\tsuccess: function(response,status, xhr){\r\n\t\t\t\tif(parseInt(String(response.int_Rta_AgendaLTRevisiones))==1){\r\n\t\t\t\t\t\/\/alert(response.string_Rta_AgendaLTRevisiones);\r\n\t\t\t\t\tvar ls_ArrTipos=String(response.string_Rta_AgendaLTRevisiones).split(\";\");\r\n\t\t\t\t\tvar ls_ArrItem;\r\n\t\t\t\t\tfor(var i=0;i<ls_ArrTipos.length;i++){\r\n\t\t\t\t\t\tif(ls_ArrTipos[i].replace(\/ \/gi,\"\").length>0){\r\n\t\t\t\t\t\t\tls_ArrItem=ls_ArrTipos[i].split(\"|\");\r\n\t\t\t\t\t\t\t $(\"#\"+ls_code+\"_cmb_tipovh\").append($('<option>', { \r\n\t\t\t\t\t\t\t\tvalue: ls_ArrItem[0],\r\n\t\t\t\t\t\t\t\ttext : ls_ArrItem[1]\r\n\t\t\t\t\t\t\t}));\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t}\r\n\t\t\t\telse{\r\n\t\t\t\t\tvar ls_Rta=response.string_Rta_AgendaLTRevisiones;\r\n\t\t\t\t\tls_Rta=ls_Rta.replaceAll(\"*\",\"\").replaceAll(\"_\",\"\");\r\n\t\t\t\t\t$(\"#divShowMsgBox\").html(ls_Rta);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\tfunction getList_Horarios($fli_ShowError){\r\n\t\tif($fli_ShowError==1){$(\"#divShowMsgBox\").html(\"\");}\r\n\t\tvar ls_code=$(\"#vagendar_code_txt_codeacceso\").val();\r\n\t\t$(\"#\"+ls_code+\"_cmb_hora\").html(\"\");\t\t\r\n\t\t$(\"#\"+ls_code+\"_txt_horalistkeys\").val(\"\");\t\t\r\n\t\tvar li_otsvid=parseInt(String($(\"#\"+ls_code+\"_cmb_tipovh\").val()));\r\n\t\tvar li_tipoagenda=parseInt(String($(\"#\"+ls_code+\"_cmb_tipoagenda\").val()));\r\n\t\tvar ls_placa=String($(\"#\"+ls_code+\"_txt_placa\").val());\r\n\t\tvar ls_fecha=String($(\"#\"+ls_code+\"_txt_fecha\").val());\t\r\n\t\t\r\n\t\t\r\n\t\t$(\"#divShowMsgBox\").html(\"li_otsvid: \"+String(li_otsvid)+\r\n\t\t\" li_tipoagenda: \"+String(li_tipoagenda)+\r\n\t\t\" ls_placa: \"+ls_placa+\r\n\t\t\" ls_fecha: \"+ls_fecha);\r\n\t\t\r\n\t\tif(li_otsvid<=0){\r\n\t\t\tif($fli_ShowError==1){\r\n\t\t\t\t$(\"#divShowMsgBox\").html(\"!!! Debe seleccionar tipo de veh&iacute;culo !!!\");\r\n\t\t\t\t$(\"#\"+ls_code+\"_cmb_tipovh\").focus();\r\n\t\t\t}\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tif(ls_placa.replace(\/ \/gi,\"\").length<=0){\r\n\t\t\tif($fli_ShowError==1){\r\n\t\t\t\t$(\"#divShowMsgBox\").html(\"!!! Debe ingresar placa !!!\");\r\n\t\t\t\t$(\"#\"+ls_code+\"_txt_placa\").focus();\r\n\t\t\t}\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tif(ls_fecha.replace(\/ \/gi,\"\").length<=0){\r\n\t\t\tif($fli_ShowError==1){\r\n\t\t\t\t$(\"#divShowMsgBox\").html(\"!!! Debe ingresar fecha !!!\");\r\n\t\t\t\t$(\"#\"+ls_code+\"_txt_fecha\").focus();\r\n\t\t\t}\r\n\t\t\treturn;\r\n\t\t}\r\n\t\r\n\t\t\/*$(\"#divShowMsgBox\").html(\"li_otsvid: \"+String(li_otsvid)+\r\n\t\t\"<br>li_otsvid: \"+String(li_otsvid)+\r\n\t\t\"<br>ls_placa: \"+ls_placa+\r\n\t\t\"<br>ls_fecha: \"+ls_fecha);*\/\r\n\t\t\r\n\t\t$(\"#divShowMsgBox\").html(\"<img src='https:\/\/cdadepasto.com\/agenda_cdapasto\/img\/gif_load_rueda.gif' width='16px' height='16px' align='top'\/>Consultando horario,<br\/>por favor espere...\");\r\n\t\tvar data = new FormData();\r\n\t\tdata.append(\"li_otsvid\",li_otsvid);\r\n\t\tdata.append(\"li_tipoagenda\",li_tipoagenda);\r\n\t\tdata.append(\"ls_placa\",ls_placa);\r\n\t\tdata.append(\"ls_fecha\",ls_fecha);\r\n\t\t$.ajax({\r\n\t\t\turl: \"https:\/\/cdadepasto.com\/agenda_cdapasto\/log\/lt_horarios.php\",\r\n\t\t\ttype: \"post\",\r\n\t\t\tdata: data,\r\n\t\t\tcontentType: false,\r\n\t\t\tprocessData: false,\r\n\t\t\tcache: false,\r\n\t\t\tsuccess: function(response,status, xhr){\r\n\t\t\t\t$(\"#divShowMsgBox\").html(\"\");\r\n\t\t\t\tif(parseInt(String(response.int_Rta_LTHorario))==1){\r\n\t\t\t\t    \r\n\t\t\t\t\tvar ls_keys=\"\";\r\n\t\t\t\t\tvar ls_ArrHora=String(response.string_Rta_LTHorario).split(\";\");\r\n\t\t\t\t\tfor(var i=0;i<ls_ArrHora.length;i++){\r\n\t\t\t\t\t\tif(ls_ArrHora[i].replace(\/ \/gi,\"\").length>0){\r\n\t\t\t\t\t\t\t $(\"#\"+ls_code+\"_cmb_hora\").append($('<option>', { \r\n\t\t\t\t\t\t\t\tvalue: ls_ArrHora[i],\r\n\t\t\t\t\t\t\t\ttext : ls_ArrHora[i]\r\n\t\t\t\t\t\t\t}));\r\n\t\t\t\t\t\t\tif(ls_keys.replace(\/ \/gi,\"\").length<=0){\r\n\t\t\t\t\t\t\t\tls_keys=\";\"+ls_ArrHora[i]+\";\";\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t\telse{\r\n\t\t\t\t\t\t\t\tls_keys=ls_keys+ls_ArrHora[i]+\";\";\r\n\t\t\t\t\t\t\t}\r\n\t\t\t\t\t\t}\r\n\t\t\t\t\t}\r\n\t\t\t\t\t$(\"#\"+ls_code+\"_txt_horalistkeys\").val(ls_keys);\r\n\t\t\t\t}\r\n\t\t\t\telse{\r\n\t\t\t\t\tvar ls_Rta=response.string_Rta_LTHorario;\r\n\t\t\t\t\tls_Rta=ls_Rta.replaceAll(\"*\",\"\").replaceAll(\"_\",\"\");\r\n\t\t\t\t\t$(\"#divShowMsgBox\").html(ls_Rta);\r\n\t\t\t\t}\r\n\t\t\t}\r\n\t\t});\r\n\t}\r\n\t\r\n\tfunction Clear_Agenda(){\t\t\r\n\t\tvar ls_code=$(\"#vagendar_code_txt_codeacceso\").val();\r\n\t\t$(\"#\"+ls_code+\"_txt_documento\").val(\"\");\r\n\t\t$(\"#\"+ls_code+\"_txt_nombre\").val(\"\");\r\n\t\t\/\/$(\"#\"+ls_code+\"_cmb_tipovh\").val();\r\n\t\t$(\"#\"+ls_code+\"_txt_placa\").val(\"\");\r\n\t\t$(\"#\"+ls_code+\"_txt_celular\").val(\"\");\r\n\t\t\/\/$(\"#\"+ls_code+\"_txt_fecha\").val(\"\");\r\n\t\t\/\/$(\"#\"+ls_code+\"_cmb_hora\").val();\r\n\t\tgetList_Horarios(0);\r\n\t}\r\n\t\r\n\tfunction Send_Agenda(){\r\n\t   $(\"#divShowMsgBox\").html(\"\");\r\n\t\tvar ls_code=$(\"#vagendar_code_txt_codeacceso\").val();\r\n\t\tvar ls_documento=String($(\"#\"+ls_code+\"_txt_documento\").val());\r\n\t\tvar ls_nombre=String($(\"#\"+ls_code+\"_txt_nombre\").val());\r\n\t\tvar li_otsvid=parseInt(String($(\"#\"+ls_code+\"_cmb_tipovh\").val()));\r\n\t\tvar li_tipoagenda=parseInt(String($(\"#\"+ls_code+\"_cmb_tipoagenda\").val()));\r\n\t\tvar ls_placa=String($(\"#\"+ls_code+\"_txt_placa\").val());\r\n\t\tvar ls_celular=String($(\"#\"+ls_code+\"_txt_celular\").val());\r\n\t\tvar ls_fecha=String($(\"#\"+ls_code+\"_txt_fecha\").val());\t\t\r\n\t\tvar ls_listkeyhoras=String($(\"#\"+ls_code+\"_txt_horalistkeys\").val());\r\n\t\tvar ls_hora=String($(\"#\"+ls_code+\"_cmb_hora\").val());\r\n\t\t\t\t\r\n\t\tif(ls_documento.replace(\/ \/gi,\"\").length<=0){\r\n\t\t\t$(\"#divShowMsgBox\").html(\"!!! Debe ingresar documento !!!\");\r\n\t\t\t$(\"#\"+ls_code+\"_txt_documento\").focus();\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\tif(ls_nombre.replace(\/ \/gi,\"\").length<=0){\r\n\t\t\t$(\"#divShowMsgBox\").html(\"!!! Debe ingresar nombre !!!\");\r\n\t\t\t$(\"#\"+ls_code+\"_txt_nombre\").focus();\r\n\t\t\treturn false;\r\n\t\t}\t\t\r\n\t\tif(li_otsvid<=0){\r\n\t\t\t$(\"#divShowMsgBox\").html(\"!!! Debe seleccionar tipo de veh&iacute;culo !!!\");\r\n\t\t\t$(\"#\"+ls_code+\"_cmb_tipovh\").focus();\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\tif(ls_placa.replace(\/ \/gi,\"\").length<=0){\r\n\t\t\t$(\"#divShowMsgBox\").html(\"!!! Debe ingresar placa !!!\");\r\n\t\t\t$(\"#\"+ls_code+\"_txt_placa\").focus();\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\tif(ls_celular.replace(\/ \/gi,\"\").length<=0){\r\n\t\t\t$(\"#divShowMsgBox\").html(\"!!! Debe ingresar n&uacute;mero de celular !!!\");\r\n\t\t\t$(\"#\"+ls_code+\"_txt_celular\").focus();\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\tif(ls_fecha.replace(\/ \/gi,\"\").length<=0){\r\n\t\t\t$(\"#divShowMsgBox\").html(\"!!! Debe seleccionar fecha !!!\");\r\n\t\t\t$(\"#\"+ls_code+\"_txt_fecha\").focus();\r\n\t\t\treturn;\r\n\t\t}\r\n\t\tif(ls_hora === null || ls_hora==\"null\"){\r\n\t\t\t$(\"#divShowMsgBox\").html(\"!!! Debe seleccionar hora !!!\");\r\n\t\t\t$(\"#\"+ls_code+\"_cmb_hora\").focus();\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\tif(ls_hora.replace(\/ \/gi,\"\").length<=0){\r\n\t\t\t$(\"#divShowMsgBox\").html(\"!!! Debe seleccionar hora !!!\");\r\n\t\t\t$(\"#\"+ls_code+\"_cmb_hora\").focus();\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\tif($(\"#\"+ls_code+\"_chk_acepto\").is(':checked')!=true){\r\n\t\t\t$(\"#divShowMsgBox\").html(\"!!! Debe aceptar la politica de privacidad !!!\");\r\n\t\t\t$(\"#\"+ls_code+\"_chk_acepto\").focus();\r\n\t\t\treturn false;\r\n\t\t}\r\n\t\t\/*\r\n\t\t$(\"#divShowMsgBox\").html(\r\n\t\t\"ls_documento: \"+ls_documento+\r\n\t\t\"<br>ls_nombre: \"+ls_nombre+\r\n\t\t\"<br>li_otsvid: \"+String(li_otsvid)+\r\n\t\t\"<br>ls_placa: \"+ls_placa+\r\n\t\t\"<br>ls_celular: \"+ls_celular+\r\n\t\t\"<br>ls_fecha: \"+ls_fecha+\" ls_hora: \"+ls_hora);\r\n\t\t*\/\t\t\r\n\t\t$(\"#\"+ls_code+\"_link_send\").css(\"display\", \"none\");\r\n\t\t\r\n\t\t$(\"#divShowMsgBox\").html(\"<img src='https:\/\/cdadepasto.com\/agenda_cdapasto\/img\/gif_load_rueda.gif' width='16px' height='16px' align='top'\/>Registrando agendamiento,<br\/>por favor espere...\");\r\n\t\tvar data = new FormData();\r\n\t\tdata.append(\"ls_documento\",ls_documento);\r\n\t\tdata.append(\"ls_nombre\",ls_nombre);\r\n\t\tdata.append(\"li_tipoagenda\",li_tipoagenda);\r\n\t\tdata.append(\"li_otsvid\",li_otsvid);\r\n\t\tdata.append(\"ls_placa\",ls_placa);\r\n\t\tdata.append(\"ls_celular\",ls_celular);\r\n\t\tdata.append(\"ls_fecha\",ls_fecha);\r\n\t\tdata.append(\"ls_listkeyhoras\",ls_listkeyhoras);\r\n\t\tdata.append(\"ls_hora\",ls_hora);\r\n\t\t$.ajax({\r\n\t\t\turl: 'https:\/\/cdadepasto.com\/agenda_cdapasto\/log\/reg_agenda.php',\r\n\t\t\ttype: \"post\",\r\n\t\t\tdata: data,\r\n\t\t\tcontentType: false,\r\n\t\t\tprocessData: false,\r\n\t\t\tcache: false,\r\n\t\t\tsuccess: function(response,status, xhr){\r\n\t\t\t\t$(\"#divShowMsgBox\").html(\"\");\r\n\t\t\t\tvar ls_Rta=response.string_Rta_RegAgenda;\r\n\t\t\t\tls_Rta=ls_Rta.replaceAll(\"*\",\"\").replaceAll(\"_\",\"\");\r\n\t\t\t\tif(parseInt(String(response.int_Rta_RegAgenda))==1){\r\n\t\t\t\t\t\/\/Clear_Agenda();\r\n\t\t\t\t\t$(\"#divShowMsgBox\").html(\"<label style='color: #06E338;'>\"+ls_Rta+\"<\/label>\");\r\n\t\t\t\t}\r\n\t\t\t\telse{\r\n\t\t\t\t\t$(\"#divShowMsgBox\").html(ls_Rta);\r\n\t\t\t\t\t$(\"#\"+ls_code+\"_link_send\").css(\"display\", \"block\");\r\n\t\t\t\t}\r\n\t\t\t\treturn false;\r\n\t\t\t}\r\n\t\t});\r\n\t    return false;\r\n\t}\r\n<\/script>\r\n\r\n<div id=\"main-container\" class=\"agenda-banner-wp\" aria-label=\"Agendar cita\">\r\n    <div class=\"agenda-container\">\r\n\r\n        <div class=\"agenda-form\">\r\n            <div class=\"form-content\">\r\n                \r\n                <button id=\"theme-toggle\" aria-label=\"Cambiar tema a modo oscuro o claro\">\r\n                    <img decoding=\"async\" id=\"sun-icon\" class=\"sun-icon lazyload\" data-src=\"https:\/\/cdadepasto.com\/wp-content\/uploads\/2025\/10\/soleado.png\" alt=\"Modo Claro (Sol)\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 512px; --smush-placeholder-aspect-ratio: 512\/512;\"><noscript><img decoding=\"async\" id=\"sun-icon\" class=\"sun-icon\" src=\"https:\/\/cdadepasto.com\/wp-content\/uploads\/2025\/10\/soleado.png\" alt=\"Modo Claro (Sol)\"><\/noscript>\r\n                    <img decoding=\"async\" id=\"moon-icon\" class=\"moon-icon lazyload\" data-src=\"https:\/\/cdadepasto.com\/wp-content\/uploads\/2025\/10\/luna-1.png\" alt=\"Modo Oscuro (Luna)\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" style=\"--smush-placeholder-width: 512px; --smush-placeholder-aspect-ratio: 512\/512;\"><noscript><img decoding=\"async\" id=\"moon-icon\" class=\"moon-icon\" src=\"https:\/\/cdadepasto.com\/wp-content\/uploads\/2025\/10\/luna-1.png\" alt=\"Modo Oscuro (Luna)\"><\/noscript>\r\n                <\/button>\r\n                \r\n                <header>\r\n                    <h2 id=\"titulo-agenda\">Agendar cita<\/h2>\r\n                    <p>Confirma tus datos y un asesor de nosotros se pondr\u00e1 en contacto contigo en el menor tiempo posible.<\/p>\r\n                <\/header>\r\n\r\n                <form id=\"form-agenda\" action=\"#\" method=\"POST\" autocomplete=\"on\" novalidate onsubmit=\"return Send_Agenda();\">\r\n                    <div class=\"grid-2-cols\">\r\n                        <div class=\"field\">\r\n                            <input id=\"vagendar_code_txt_codeacceso\" name=\"vagendar_code_txt_codeacceso\" value=\"\" type=\"hidden\" readonly\/>\r\n                            <label for=\"_txt_documento\">Documento<\/label>\r\n                            <input id=\"_txt_documento\" name=\"_txt_documento\" type=\"text\" placeholder=\"N\u00famero de documento\" required>\r\n                        <\/div>\r\n                        <div class=\"field\">\r\n                            <label for=\"_txt_nombre\">Nombre completo<\/label>\r\n                            <input id=\"_txt_nombre\" name=\"_txt_nombre\" type=\"text\" placeholder=\"Nombre completo\" required>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"field\">\r\n                        <label for=\"_cmb_tipoagenda\">Tipo de agenda<\/label>\r\n                        <select id=\"_cmb_tipoagenda\" name=\"_cmb_tipoagenda\" required onChange=\"getList_Horarios(0);\">\r\n                            <option value=\"5\">Peritaje<\/option>\r\n                            <option value=\"1\">Revisi\u00f3n tecnomec\u00e1nica<\/option>\r\n                        <\/select>\r\n                    <\/div>\r\n\r\n                    <div class=\"field\">\r\n                        <label for=\"_cmb_tipovh\">Tipo de veh\u00edculo<\/label>\r\n                        <select id=\"_cmb_tipovh\" name=\"_cmb_tipovh\" required onChange=\"getList_Horarios(0);\">\r\n                        <\/select>\r\n                    <\/div>\r\n\r\n                    <div class=\"grid-2-cols-row\" role=\"group\" aria-label=\"Datos de veh\u00edculo y cita\">\r\n                        <div class=\"field\">\r\n                            <label for=\"_txt_placa\">Placa<\/label>\r\n                            <input id=\"_txt_placa\" name=\"_txt_placa\" type=\"text\" placeholder=\"Ej: ABC123\" required>\r\n                        <\/div>\r\n                        <div class=\"field\">\r\n                            <label for=\"_txt_celular\">Celular<\/label>\r\n                            <input id=\"_txt_celular\" name=\"_txt_celular\" type=\"tel\" placeholder=\"Ej: 3001234567\" pattern=\"[0-9]{7,15}\" required>\r\n                        <\/div>\r\n                        <div class=\"field\">\r\n                            <label for=\"_txt_fecha\">Fecha<\/label>\r\n                            <input id=\"_txt_fecha\" name=\"_txt_fecha\" type=\"date\" required>\r\n                        <\/div>\r\n                        <div class=\"field\">\r\n                            <input type=\"hidden\" id=\"_txt_horalistkeys\" value=\"\" readonly>\r\n                             <label for=\"_cmb_hora\">\r\n                                <a href=\"javascript:\" onClick=\"getList_Horarios(1);\" style=\"text-decoration:none;\" title=\"Click para listar horarios\">Hora<\/a>\r\n                             <\/label>\r\n                             <select id=\"_cmb_hora\" name=\"_cmb_hora\" required>\r\n                             <\/select>\r\n                        <\/div>\r\n                    <\/div>\r\n\r\n                    <div class=\"politica\">\r\n                        <input id=\"_chk_acepto\" name=\"_chk_acepto\" type=\"checkbox\" required>\r\n                        <label for=\"_chk_acepto\">Acepto las <a href=\"#\" target=\"_blank\" rel=\"noopener noreferrer\">pol\u00edticas de privacidad<\/a><\/label>\r\n                    <\/div>\r\n                    \r\n                    <div id=\"divShowMsgBox\" style=\"color:#F00; font-family:Verdana, Geneva, sans-serif; font-size:13px; text-align:center\"><\/div>\r\n\r\n                    <button id=\"_link_send\" type=\"submit\">Enviar<\/button>\r\n                <\/form>\r\n\r\n                <div class=\"redes\" aria-label=\"S\u00edguenos en redes\">\r\n                    <a href=\"https:\/\/www.facebook.com\/cdadepasto\/?locale=es_LA\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Facebook\">\r\n                        <img decoding=\"async\" data-src=\"https:\/\/cdadepasto.com\/wp-content\/uploads\/2025\/10\/icono-facebook-web.png\" alt=\"Facebook\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/800;\"><noscript><img decoding=\"async\" src=\"https:\/\/cdadepasto.com\/wp-content\/uploads\/2025\/10\/icono-facebook-web.png\" alt=\"Facebook\"><\/noscript>\r\n                    <\/a>\r\n                    <a href=\"https:\/\/www.instagram.com\/cdadepasto\/?hl=es\" target=\"_blank\" rel=\"noopener noreferrer\" aria-label=\"Instagram\">\r\n                        <img decoding=\"async\" data-src=\"https:\/\/cdadepasto.com\/wp-content\/uploads\/2025\/10\/icono-instagram-web.png\" alt=\"Instagram\" src=\"data:image\/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==\" class=\"lazyload\" style=\"--smush-placeholder-width: 800px; --smush-placeholder-aspect-ratio: 800\/800;\"><noscript><img decoding=\"async\" src=\"https:\/\/cdadepasto.com\/wp-content\/uploads\/2025\/10\/icono-instagram-web.png\" alt=\"Instagram\"><\/noscript>\r\n                    <\/a>\r\n                <\/div>\r\n            <\/div>\r\n        <\/div>\r\n\r\n        <div class=\"agenda-img-right\" aria-hidden=\"false\">\r\n            <video id=\"agendaVideo\" src=\"https:\/\/cdadepasto.com\/wp-content\/uploads\/2025\/10\/video-3-agendar-web-4.mp4\" muted playsinline preload=\"metadata\" alt=\"Video de fondo para agendar cita\"><\/video>\r\n        <\/div>\r\n\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\ndocument.addEventListener('DOMContentLoaded', () => {\r\n    const mainContainer = document.getElementById('main-container');\r\n    const themeToggle = document.getElementById('theme-toggle');\r\n    const video = document.getElementById('agendaVideo');\r\n    if (!mainContainer || !themeToggle || !video) return;\r\n\r\n    \/\/ --- L\u00d3GICA DEL TEMA (MODO OSCURO\/CLARO) ---\r\n    \r\n    \/\/ Funci\u00f3n para aplicar el tema\r\n    function applyTheme(isLight) {\r\n        if (isLight) {\r\n            mainContainer.classList.add('light-mode');\r\n            localStorage.setItem('theme', 'light');\r\n        } else {\r\n            mainContainer.classList.remove('light-mode');\r\n            localStorage.setItem('theme', 'dark');\r\n        }\r\n    }\r\n\r\n    \/\/ 1. Cargar la preferencia guardada o detectar la preferencia del sistema\r\n    const savedTheme = localStorage.getItem('theme');\r\n    const prefersLight = window.matchMedia && window.matchMedia('(prefers-color-scheme: light)').matches;\r\n\r\n    \/\/ Si hay tema guardado, \u00fasalo. Si no, usa el sistema.\r\n    if (savedTheme) {\r\n        applyTheme(savedTheme === 'light');\r\n    } else {\r\n        \/\/ Usar preferencia del sistema por defecto\r\n        applyTheme(prefersLight);\r\n    }\r\n    \r\n    \/\/ 2. Manejar el clic del bot\u00f3n\r\n    themeToggle.addEventListener('click', () => {\r\n        const isCurrentlyLight = mainContainer.classList.contains('light-mode');\r\n        \/\/ Cambiar al tema opuesto\r\n        applyTheme(!isCurrentlyLight);\r\n    });\r\n    \r\n    \r\n    \/\/ --- L\u00d3GICA DE REPRODUCCI\u00d3N DEL VIDEO ---\r\n\r\n    let hasPlayedOnce = false;\r\n\r\n    const options = {\r\n        root: null, \r\n        rootMargin: '0px',\r\n        threshold: 0.1 \r\n    };\r\n\r\n    const observer = new IntersectionObserver((entries, observer) => {\r\n        entries.forEach(entry => {\r\n            if (entry.isIntersecting) {\r\n                \/\/ El video est\u00e1 visible\r\n                \r\n                \/\/ 1. Reproducci\u00f3n inicial\r\n                if (!hasPlayedOnce) {\r\n                    video.play().catch(error => {\r\n                        console.log(\"Error al reproducir el video (puede ser por pol\u00edticas del navegador):\", error);\r\n                    });\r\n                    hasPlayedOnce = true; \r\n                } \r\n                \/\/ 2. Reiniciar si estaba pausado al final (scroll up)\r\n                else if (video.paused && video.currentTime >= video.duration - 0.1) {\r\n                    video.currentTime = 0;\r\n                    video.play();\r\n                }\r\n            } else {\r\n                \/\/ El video no est\u00e1 visible (scroll down)\r\n                if (!video.paused) {\r\n                    video.pause();\r\n                }\r\n            }\r\n        });\r\n    }, options);\r\n\r\n    observer.observe(video);\r\n});\r\n<\/script>\r\n<script>\r\n\t$(\"#documento\").focus();\r\n\tgetList_TipoVH();\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<section class=\"elementor-section elementor-top-section elementor-element elementor-element-ac79c9e elementor-section-full_width elementor-section-height-default elementor-section-height-default\" data-id=\"ac79c9e\" data-element_type=\"section\" data-settings=\"{&quot;_ha_eqh_enable&quot;:false}\">\n\t\t\t\t\t\t<div class=\"elementor-container elementor-column-gap-no\">\n\t\t\t\t\t<div class=\"elementor-column elementor-col-100 elementor-top-column elementor-element elementor-element-08e42a9\" data-id=\"08e42a9\" data-element_type=\"column\">\n\t\t\t<div class=\"elementor-widget-wrap elementor-element-populated\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-1acf8eb elementor-widget elementor-widget-html\" data-id=\"1acf8eb\" data-element_type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<!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\">\r\n    <title>Horarios de Atenci\u00f3n<\/title>\r\n    <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\r\n    \r\n    <style>\r\n        @import url('https:\/\/fonts.googleapis.com\/css2?family=Inter:wght@100..900&display=swap');\r\n        \r\n        \/* \ud83d\udca1 CONFIGURACI\u00d3N PRINCIPAL \ud83d\udca1 *\/\r\n        \r\n        \/* Estilo para el contenedor principal *\/\r\n        .horarios-container {\r\n            --fondo-principal: #001c7a; \r\n            --texto-claro: #ffffff;\r\n            --accent: #0049ff; \r\n\r\n            font-family: 'Inter', sans-serif;\r\n            width: 100%; \r\n            min-height: 180px; \r\n            padding: 4.55rem 1rem; \r\n            border-radius: 0; \r\n            \r\n            background-color: var(--fondo-principal); \r\n            color: var(--texto-claro);\r\n            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.3); \r\n            box-sizing: border-box; \r\n        }\r\n\r\n        \/* Centramos el contenido interno del banner *\/\r\n        .horarios-inner-content {\r\n            max-width: 900px; \r\n            margin: 0 auto;\r\n        }\r\n\r\n        \/* --- ESTILO PARA FORZAR EL T\u00cdTULO (700) --- *\/\r\n        .horarios-inner-content h1 {\r\n            color: #ffffff !important; \r\n            font-size: 2rem !important; \r\n            line-height: 1.2 !important;\r\n            margin-bottom: 0.1rem !important; \r\n            font-weight: 700 !important; \r\n        }\r\n\r\n        \/* AJUSTE: FORZAR EL PESO DE FUENTE DEL TEXTO DE LA HORA A DELGADO (400) *\/\r\n        #today-info {\r\n            font-weight: 400 !important; \r\n            margin-bottom: 1.25rem !important; \r\n        }\r\n        \r\n        \/* Ajuste de tama\u00f1o para pantallas m\u00e1s grandes (md:text-4xl) *\/\r\n        @media (min-width: 768px) {\r\n            .horarios-inner-content h1 {\r\n                font-size: 2.25rem !important; \r\n            }\r\n        }\r\n        \r\n        \/* --- ESTILOS CLAVE PARA EL MODO SLIDER\/GRID --- *\/\r\n        \r\n        \/* Este estilo asegura que el scroll sea suave *\/\r\n        #calendar-grid {\r\n             scroll-behavior: smooth;\r\n             \/* Habilita el anclaje central en el scroll del navegador *\/\r\n             scroll-snap-type: x mandatory; \r\n             \/* Ocultar scrollbar para IE, Edge y Firefox *\/\r\n             -ms-overflow-style: none;\r\n             scrollbar-width: none;\r\n        }\r\n        \r\n        \/* Ocultar scrollbar para navegadores basados en WebKit (Chrome, Safari, Opera) *\/\r\n        #calendar-grid::-webkit-scrollbar {\r\n             display: none;\r\n        }\r\n\r\n        \/* Centrado y Ancho en M\u00f3vil *\/\r\n        #calendar-grid > div {\r\n            \/* Mantenemos el snap align para el scroll interactivo *\/\r\n            scroll-snap-align: center;\r\n            \/* CAMBIO CLAVE: Definimos el ancho de forma precisa para m\u00f3vil *\/\r\n            width: calc(33.333% - 0.5rem); \r\n            \/* Agregamos flex-shrink-0 forzado para asegurar que no se encoja *\/\r\n            flex-shrink: 0 !important;\r\n        }\r\n\r\n        \/* CAMBIO CLAVE: A partir de SM (tableta), volvemos al modo Grid de 7 columnas *\/\r\n        @media (min-width: 640px) { \/* El breakpoint 'sm' es 640px en la configuraci\u00f3n por defecto de Tailwind *\/\r\n             #calendar-grid {\r\n                 display: grid !important; \r\n                 grid-template-columns: repeat(7, minmax(0, 1fr)) !important; \r\n                 overflow-x: hidden !important; \/* Deshabilita el scroll *\/\r\n                 white-space: normal !important; \r\n                 scroll-snap-type: none; \/* Deshabilita el snap en desktop\/grid *\/\r\n               }\r\n             \/* Las tarjetas a partir de SM vuelven a su configuraci\u00f3n normal *\/\r\n             #calendar-grid > div {\r\n                 width: auto !important; \r\n                 scroll-snap-align: none;\r\n             }\r\n        }\r\n\r\n        \/* Asegurar que las reglas de lg sigan funcionando si se cambia el breakpoint sm *\/\r\n        @media (min-width: 1024px) {\r\n            #calendar-grid {\r\n                \/* Asegurarse que el gap de la cuadr\u00edcula tambi\u00e9n se aplique *\/\r\n                gap: 0.5rem;\r\n            }\r\n        }\r\n    <\/style>\r\n<\/head>\r\n<body>\r\n    \r\n<div id=\"horarios-banner\" class=\"horarios-container\">\r\n        \r\n<div class=\"horarios-inner-content\">\r\n\r\n            \r\n<h1 class=\"font-extrabold text-white\" style=\"border-color: var(--accent);\">\r\n    Horarios de Atenci\u00f3n\r\n<\/h1>\r\n            \r\n            \r\n<p id=\"today-info\" class=\"text-xl text-white\">\r\n<\/p>\r\n\r\n            \r\n<div id=\"calendar-grid\" class=\"flex overflow-x-scroll whitespace-nowrap gap-2\">\r\n<\/div>\r\n\r\n<\/div>  \r\n<\/div>  \r\n<script>\r\n        \/\/ Estructura de los horarios de atenci\u00f3n para cada d\u00eda de la semana\r\n        const schedules = [\r\n            { name: 'Domingo', index: 0, time: '8:00 AM - 1:00 PM', short: 'Dom' },\r\n            { name: 'Lunes', index: 1, time: '7:00 AM - 7:00 PM', short: 'Lun' },\r\n            { name: 'Martes', index: 2, time: '7:00 AM - 7:00 PM', short: 'Mar' },\r\n            { name: 'Mi\u00e9rcoles', index: 3, time: '7:00 AM - 7:00 PM', short: 'Mi\u00e9' },\r\n            { name: 'Jueves', index: 4, time: '7:00 AM - 7:00 PM', short: 'Jue' },\r\n            { name: 'Viernes', index: 5, time: '7:00 AM - 7:00 PM', short: 'Vie' },\r\n            { name: 'S\u00e1bado', index: 6, time: '7:00 AM - 6:00 PM', short: 'S\u00e1b' }\r\n        ];\r\n\r\n        \/\/ Obtener el d\u00eda actual (0=Domingo, 1=Lunes, ..., 6=S\u00e1bado)\r\n        const todayIndex = new Date().getDay();\r\n        const gridContainer = document.getElementById('calendar-grid');\r\n        const todayInfo = document.getElementById('today-info'); \r\n        \r\n        function formatTimeForCard(timeString) {\r\n            return timeString.replace(\/\\s-\\s\/, '<br>'); \r\n        }\r\n\r\n        \/\/ FUNCI\u00d3N CLAVE PARA CENTRAR EL D\u00cdA ACTUAL (Mejorada con comportamiento 'auto')\r\n        function centerTodayCard() {\r\n            \/\/ Solo centrar si estamos en m\u00f3vil (ancho menor a 640px)\r\n            if (window.innerWidth >= 640) return;\r\n            \r\n            const todayCard = document.querySelector('.is-today');\r\n            const container = gridContainer;\r\n\r\n            if (todayCard && container) {\r\n                \/\/ Usamos requestAnimationFrame para asegurar que la tarjeta tiene las dimensiones correctas\r\n                requestAnimationFrame(() => {\r\n                    const containerWidth = container.offsetWidth;\r\n                    const cardWidth = todayCard.offsetWidth;\r\n                    const cardOffset = todayCard.offsetLeft;\r\n                    \r\n                    \/\/ Calcula la posici\u00f3n para centrar el elemento\r\n                    const scrollPosition = cardOffset - (containerWidth \/ 2) + (cardWidth \/ 2);\r\n\r\n                    container.scrollTo({\r\n                        left: scrollPosition,\r\n                        \/\/ Usamos 'auto' para forzar el centrado instant\u00e1neo en la carga\r\n                        behavior: 'auto' \r\n                    });\r\n                });\r\n            }\r\n        }\r\n\r\n\r\n        function renderCalendar() {\r\n            if (!gridContainer || !todayInfo) return;\r\n\r\n            gridContainer.innerHTML = '';\r\n            \r\n            \/\/ 1. Mostrar el horario de hoy en el encabezado\r\n            const todaySchedule = schedules.find(s => s.index === todayIndex);\r\n            const todayTimeDisplay = todaySchedule.time; \r\n            if (todaySchedule) {\r\n                todayInfo.innerHTML = `Hoy estamos de <span style=\"color: var(--texto-claro);\">${todayTimeDisplay}<\/span>`;\r\n            } else {\r\n                todayInfo.innerHTML = `Consulta la disponibilidad para cada d\u00eda de la semana.`;\r\n            }\r\n\r\n            \/\/ 2. Reordenar y renderizar los d\u00edas (Lun a Dom)\r\n            const orderedDays = [\r\n                schedules.find(d => d.index === 1), \/\/ Lunes\r\n                schedules.find(d => d.index === 2), \/\/ Martes\r\n                schedules.find(d => d.index === 3), \/\/ Mi\u00e9rcoles\r\n                schedules.find(d => d.index === 4), \/\/ Jueves\r\n                schedules.find(d => d.index === 5), \/\/ Viernes\r\n                schedules.find(d => d.index === 6), \/\/ S\u00e1bado\r\n                schedules.find(d => d.index === 0)  \/\/ Domingo\r\n            ].filter(day => day !== undefined);\r\n\r\n            orderedDays.forEach((day, index) => {\r\n                const isToday = day.index === todayIndex;\r\n                const formattedTime = formatTimeForCard(day.time); \r\n                \r\n                \/\/ RESTAURADO: w-1\/3 sm:w-auto lg:w-auto es CRUCIAL para que Tailwind determine el ancho inicial\r\n                let sizeClasses = 'w-1\/3 sm:w-auto lg:w-auto flex-shrink-0'; \r\n\r\n                let cardClasses = 'p-2 rounded-xl text-center transition-all duration-300 transform hover:scale-[1.03] cursor-default border-2 ' + sizeClasses;\r\n                let dayCardStyle = '';\r\n                let contentHTML = '';\r\n                \r\n                \/\/ Clases condicionales para el resaltado\r\n                if (isToday) {\r\n                    cardClasses += ' text-white ring-4 ring-white\/20 is-today';\r\n                    dayCardStyle = `background-color: var(--accent); border-color: var(--accent); box-shadow: 0 0 15px rgba(0, 73, 255, 0.4);`;\r\n                    \r\n                    contentHTML = `\r\n                        <p class=\"text-lg font-bold mb-1\">${day.short}<\/p>\r\n                        <p class=\"text-sm font-medium text-white\/80 time-text\">${formattedTime}<\/p>\r\n                    `;\r\n                    \r\n                } else {\r\n                    cardClasses += ' bg-white text-gray-900 border-gray-300 hover:border-blue-500 shadow-md';\r\n                    dayCardStyle = ``;\r\n                    \r\n                    contentHTML = `\r\n                        <p class=\"text-lg font-bold mb-1\">${day.short}<\/p>\r\n                        <p class=\"text-sm font-medium text-gray-600 time-text\">${formattedTime}<\/p>\r\n                    `;\r\n                }\r\n\r\n                const dayCard = document.createElement('div');\r\n                dayCard.className = cardClasses;\r\n                dayCard.style = dayCardStyle;\r\n                dayCard.innerHTML = contentHTML;\r\n\r\n                dayCard.title = day.name;\r\n\r\n                gridContainer.appendChild(dayCard);\r\n            });\r\n            \r\n            \/\/ Llama a la funci\u00f3n de centrado despu\u00e9s de 500ms\r\n            \/\/ Este retraso es la \u00faltima l\u00ednea de defensa si el centrado autom\u00e1tico falla.\r\n            setTimeout(centerTodayCard, 500); \r\n        }\r\n\r\n        document.addEventListener('DOMContentLoaded', renderCalendar);\r\n        \/\/ Volvemos a renderizar en resize para manejar la transici\u00f3n m\u00f3vil\/escritorio\r\n        window.addEventListener('resize', renderCalendar); \r\n        \r\n<\/script>\r\n\r\n<\/body>\r\n<\/html>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t<\/section>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Agendar cita Confirma tus datos y un asesor de nosotros se pondr\u00e1 en contacto contigo en el menor tiempo posible. Documento Nombre completo Tipo de agenda PeritajeRevisi\u00f3n tecnomec\u00e1nica Tipo de veh\u00edculo Placa Celular Fecha Hora Acepto las pol\u00edticas de privacidad Enviar Horarios de Atenci\u00f3n Horarios de Atenci\u00f3n<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"no-sidebar","site-content-layout":"page-builder","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"disabled","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-2066","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/cdadepasto.com\/index.php?rest_route=\/wp\/v2\/pages\/2066","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cdadepasto.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/cdadepasto.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/cdadepasto.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/cdadepasto.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2066"}],"version-history":[{"count":322,"href":"https:\/\/cdadepasto.com\/index.php?rest_route=\/wp\/v2\/pages\/2066\/revisions"}],"predecessor-version":[{"id":5400,"href":"https:\/\/cdadepasto.com\/index.php?rest_route=\/wp\/v2\/pages\/2066\/revisions\/5400"}],"wp:attachment":[{"href":"https:\/\/cdadepasto.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2066"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}