FM / prechequeo

/home/simp499cl/public_html/prechequeo_v1/

/home/simp499cl/public_html/prechequeo_v1

Name	Size	Mode	Actions
css/	-	0755	rm
font/	-	0755	rm
img/	-	0755	rm
js/	-	0755	rm
ttf/	-	0755	rm
agendar.html	98542	0644	edit dl rm
agendar10112025.html	42185	0644	edit dl rm
index.html	292492	0644	edit dl rm

Edit: /home/simp499cl/public_html/prechequeo_v1/agendar10112025.html (42185B)

<!DOCTYPE html>
<html  lang="es_ES">
 <head>
  <meta charset="utf-8"/>
  <meta content="width=device-width,initial-scale=1" name="viewport"/>
  <meta content="#000000" name="theme-color"/>
  <meta content="Agendar Paso 1" name="description"/>
  <title>
   Agendar Inspección PreCompra
  </title>
    <link href="css/main.css" rel="stylesheet"/>
  <link href="css/agendar.cleaned_formatted.css" rel="stylesheet"/>
  <style type="text/css">
   [data-sonner-toaster][dir=ltr],html[dir=ltr]{--toast-icon-margin-start:-3px;--toast-icon-margin-end:4px;--toast-svg-margin-start:-1px;--toast-svg-margin-end:0px;--toast-button-margin-start:auto;--toast-button-margin-end:0;--toast-close-button-start:0;--toast-close-button-end:unset;--toast-close-button-transform:translate(-35%, -35%)}[data-sonner-toaster][dir=rtl],html[dir=rtl]{--toast-icon-margin-start:4px;--toast-icon-margin-end:-3px;--toast-svg-margin-start:0px;--toast-svg-margin-end:-1px;--toast-button-margin-start:0;--toast-button-margin-end:auto;--toast-close-button-start:unset;--toast-close-button-end:0;--toast-close-button-transform:translate(35%, -35%)}[data-sonner-toaster]{position:fixed;width:var(--width);font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;--gray1:hsl(0, 0%, 99%);--gray2:hsl(0, 0%, 97.3%);--gray3:hsl(0, 0%, 95.1%);--gray4:hsl(0, 0%, 93%);--gray5:hsl(0, 0%, 90.9%);--gray6:hsl(0, 0%, 88.7%);--gray7:hsl(0, 0%, 85.8%);--gray8:hsl(0, 0%, 78%);--gray9:hsl(0, 0%, 56.1%);--gray10:hsl(0, 0%, 52.3%);--gray11:hsl(0, 0%, 43.5%);--gray12:hsl(0, 0%, 9%);--border-radius:8px;box-sizing:border-box;padding:0;margin:0;list-style:none;outline:0;z-index:999999999;transition:transform .4s ease}@media (hover:none) and (pointer:coarse){[data-sonner-toaster][data-lifted=true]{transform:none}}[data-sonner-toaster][data-x-position=right]{right:var(--offset-right)}[data-sonner-toaster][data-x-position=left]{left:var(--offset-left)}[data-sonner-toaster][data-x-position=center]{left:50%;transform:translateX(-50%)}[data-sonner-toaster][data-y-position=top]{top:var(--offset-top)}[data-sonner-toaster][data-y-position=bottom]{bottom:var(--offset-bottom)}[data-sonner-toast]{--y:translateY(100%);--lift-amount:calc(var(--lift) * var(--gap));z-index:var(--z-index);position:absolute;opacity:0;transform:var(--y);touch-action:none;transition:transform .4s,opacity .4s,height .4s,box-shadow .2s;box-sizing:border-box;outline:0;overflow-wrap:anywhere}[data-sonner-toast][data-styled=true]{padding:16px;background:var(--normal-bg);border:1px solid var(--normal-border);color:var(--normal-text);border-radius:var(--border-radius);box-shadow:0 4px 12px rgba(0,0,0,.1);width:var(--width);font-size:13px;display:flex;align-items:center;gap:6px}[data-sonner-toast]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-y-position=top]{top:0;--y:translateY(-100%);--lift:1;--lift-amount:calc(1 * var(--gap))}[data-sonner-toast][data-y-position=bottom]{bottom:0;--y:translateY(100%);--lift:-1;--lift-amount:calc(var(--lift) * var(--gap))}[data-sonner-toast][data-styled=true] [data-description]{font-weight:400;line-height:1.4;color:#3f3f3f}[data-rich-colors=true][data-sonner-toast][data-styled=true] [data-description]{color:inherit}[data-sonner-toaster][data-sonner-theme=dark] [data-description]{color:#e8e8e8}[data-sonner-toast][data-styled=true] [data-title]{font-weight:500;line-height:1.5;color:inherit}[data-sonner-toast][data-styled=true] [data-icon]{display:flex;height:16px;width:16px;position:relative;justify-content:flex-start;align-items:center;flex-shrink:0;margin-left:var(--toast-icon-margin-start);margin-right:var(--toast-icon-margin-end)}[data-sonner-toast][data-promise=true] [data-icon]>svg{opacity:0;transform:scale(.8);transform-origin:center;animation:sonner-fade-in .3s ease forwards}[data-sonner-toast][data-styled=true] [data-icon]>*{flex-shrink:0}[data-sonner-toast][data-styled=true] [data-icon] svg{margin-left:var(--toast-svg-margin-start);margin-right:var(--toast-svg-margin-end)}[data-sonner-toast][data-styled=true] [data-content]{display:flex;flex-direction:column;gap:2px}[data-sonner-toast][data-styled=true] [data-button]{border-radius:4px;padding-left:8px;padding-right:8px;height:24px;font-size:12px;color:var(--normal-bg);background:var(--normal-text);margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end);border:none;font-weight:500;cursor:pointer;outline:0;display:flex;align-items:center;flex-shrink:0;transition:opacity .4s,box-shadow .2s}[data-sonner-toast][data-styled=true] [data-button]:focus-visible{box-shadow:0 0 0 2px rgba(0,0,0,.4)}[data-sonner-toast][data-styled=true] [data-button]:first-of-type{margin-left:var(--toast-button-margin-start);margin-right:var(--toast-button-margin-end)}[data-sonner-toast][data-styled=true] [data-cancel]{color:var(--normal-text);background:rgba(0,0,0,.08)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-styled=true] [data-cancel]{background:rgba(255,255,255,.3)}[data-sonner-toast][data-styled=true] [data-close-button]{position:absolute;left:var(--toast-close-button-start);right:var(--toast-close-button-end);top:0;height:20px;width:20px;display:flex;justify-content:center;align-items:center;padding:0;color:var(--gray12);background:var(--normal-bg);border:1px solid var(--gray4);transform:var(--toast-close-button-transform);border-radius:50%;cursor:pointer;z-index:1;transition:opacity .1s,background .2s,border-color .2s}[data-sonner-toast][data-styled=true] [data-close-button]:focus-visible{box-shadow:0 4px 12px rgba(0,0,0,.1),0 0 0 2px rgba(0,0,0,.2)}[data-sonner-toast][data-styled=true] [data-disabled=true]{cursor:not-allowed}[data-sonner-toast][data-styled=true]:hover [data-close-button]:hover{background:var(--gray2);border-color:var(--gray5)}[data-sonner-toast][data-swiping=true]::before{content:'';position:absolute;left:-100%;right:-100%;height:100%;z-index:-1}[data-sonner-toast][data-y-position=top][data-swiping=true]::before{bottom:50%;transform:scaleY(3) translateY(50%)}[data-sonner-toast][data-y-position=bottom][data-swiping=true]::before{top:50%;transform:scaleY(3) translateY(-50%)}[data-sonner-toast][data-swiping=false][data-removed=true]::before{content:'';position:absolute;inset:0;transform:scaleY(2)}[data-sonner-toast][data-expanded=true]::after{content:'';position:absolute;left:0;height:calc(var(--gap) + 1px);bottom:100%;width:100%}[data-sonner-toast][data-mounted=true]{--y:translateY(0);opacity:1}[data-sonner-toast][data-expanded=false][data-front=false]{--scale:var(--toasts-before) * 0.05 + 1;--y:translateY(calc(var(--lift-amount) * var(--toasts-before))) scale(calc(-1 * var(--scale)));height:var(--front-toast-height)}[data-sonner-toast]>*{transition:opacity .4s}[data-sonner-toast][data-x-position=right]{right:0}[data-sonner-toast][data-x-position=left]{left:0}[data-sonner-toast][data-expanded=false][data-front=false][data-styled=true]>*{opacity:0}[data-sonner-toast][data-visible=false]{opacity:0;pointer-events:none}[data-sonner-toast][data-mounted=true][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset)));height:var(--initial-height)}[data-sonner-toast][data-removed=true][data-front=true][data-swipe-out=false]{--y:translateY(calc(var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]{--y:translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%));opacity:0}[data-sonner-toast][data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false]{--y:translateY(40%);opacity:0;transition:transform .5s,opacity .2s}[data-sonner-toast][data-removed=true][data-front=false]::before{height:calc(var(--initial-height) + 20%)}[data-sonner-toast][data-swiping=true]{transform:var(--y) translateY(var(--swipe-amount-y,0)) translateX(var(--swipe-amount-x,0));transition:none}[data-sonner-toast][data-swiped=true]{user-select:none}[data-sonner-toast][data-swipe-out=true][data-y-position=bottom],[data-sonner-toast][data-swipe-out=true][data-y-position=top]{animation-duration:.2s;animation-timing-function:ease-out;animation-fill-mode:forwards}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=left]{animation-name:swipe-out-left}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=right]{animation-name:swipe-out-right}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=up]{animation-name:swipe-out-up}[data-sonner-toast][data-swipe-out=true][data-swipe-direction=down]{animation-name:swipe-out-down}@keyframes swipe-out-left{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) - 100%));opacity:0}}@keyframes swipe-out-right{from{transform:var(--y) translateX(var(--swipe-amount-x));opacity:1}to{transform:var(--y) translateX(calc(var(--swipe-amount-x) + 100%));opacity:0}}@keyframes swipe-out-up{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) - 100%));opacity:0}}@keyframes swipe-out-down{from{transform:var(--y) translateY(var(--swipe-amount-y));opacity:1}to{transform:var(--y) translateY(calc(var(--swipe-amount-y) + 100%));opacity:0}}@media (max-width:600px){[data-sonner-toaster]{position:fixed;right:var(--mobile-offset-right);left:var(--mobile-offset-left);width:100%}[data-sonner-toaster][dir=rtl]{left:calc(var(--mobile-offset-left) * -1)}[data-sonner-toaster] [data-sonner-toast]{left:0;right:0;width:calc(100% - var(--mobile-offset-left) * 2)}[data-sonner-toaster][data-x-position=left]{left:var(--mobile-offset-left)}[data-sonner-toaster][data-y-position=bottom]{bottom:var(--mobile-offset-bottom)}[data-sonner-toaster][data-y-position=top]{top:var(--mobile-offset-top)}[data-sonner-toaster][data-x-position=center]{left:var(--mobile-offset-left);right:var(--mobile-offset-right);transform:none}}[data-sonner-toaster][data-sonner-theme=light]{--normal-bg:#fff;--normal-border:var(--gray4);--normal-text:var(--gray12);--success-bg:hsl(143, 85%, 96%);--success-border:hsl(145, 92%, 87%);--success-text:hsl(140, 100%, 27%);--info-bg:hsl(208, 100%, 97%);--info-border:hsl(221, 91%, 93%);--info-text:hsl(210, 92%, 45%);--warning-bg:hsl(49, 100%, 97%);--warning-border:hsl(49, 91%, 84%);--warning-text:hsl(31, 92%, 45%);--error-bg:hsl(359, 100%, 97%);--error-border:hsl(359, 100%, 94%);--error-text:hsl(360, 100%, 45%)}[data-sonner-toaster][data-sonner-theme=light] [data-sonner-toast][data-invert=true]{--normal-bg:#000;--normal-border:hsl(0, 0%, 20%);--normal-text:var(--gray1)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast][data-invert=true]{--normal-bg:#fff;--normal-border:var(--gray3);--normal-text:var(--gray12)}[data-sonner-toaster][data-sonner-theme=dark]{--normal-bg:#000;--normal-bg-hover:hsl(0, 0%, 12%);--normal-border:hsl(0, 0%, 20%);--normal-border-hover:hsl(0, 0%, 25%);--normal-text:var(--gray1);--success-bg:hsl(150, 100%, 6%);--success-border:hsl(147, 100%, 12%);--success-text:hsl(150, 86%, 65%);--info-bg:hsl(215, 100%, 6%);--info-border:hsl(223, 43%, 17%);--info-text:hsl(216, 87%, 65%);--warning-bg:hsl(64, 100%, 6%);--warning-border:hsl(60, 100%, 9%);--warning-text:hsl(46, 87%, 65%);--error-bg:hsl(358, 76%, 10%);--error-border:hsl(357, 89%, 16%);--error-text:hsl(358, 100%, 81%)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]{background:var(--normal-bg);border-color:var(--normal-border);color:var(--normal-text)}[data-sonner-toaster][data-sonner-theme=dark] [data-sonner-toast] [data-close-button]:hover{background:var(--normal-bg-hover);border-color:var(--normal-border-hover)}[data-rich-colors=true][data-sonner-toast][data-type=success]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-sonner-toast][data-type=success] [data-close-button]{background:var(--success-bg);border-color:var(--success-border);color:var(--success-text)}[data-rich-colors=true][data-sonner-toast][data-type=info]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-sonner-toast][data-type=info] [data-close-button]{background:var(--info-bg);border-color:var(--info-border);color:var(--info-text)}[data-rich-colors=true][data-sonner-toast][data-type=warning]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-sonner-toast][data-type=warning] [data-close-button]{background:var(--warning-bg);border-color:var(--warning-border);color:var(--warning-text)}[data-rich-colors=true][data-sonner-toast][data-type=error]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}[data-rich-colors=true][data-sonner-toast][data-type=error] [data-close-button]{background:var(--error-bg);border-color:var(--error-border);color:var(--error-text)}.sonner-loading-wrapper{--size:16px;height:var(--size);width:var(--size);position:absolute;inset:0;z-index:10}.sonner-loading-wrapper[data-visible=false]{transform-origin:center;animation:sonner-fade-out .2s ease forwards}.sonner-spinner{position:relative;top:50%;left:50%;height:var(--size);width:var(--size)}.sonner-loading-bar{animation:sonner-spin 1.2s linear infinite;background:var(--gray11);border-radius:6px;height:8%;left:-10%;position:absolute;top:-3.9%;width:24%}.sonner-loading-bar:first-child{animation-delay:-1.2s;transform:rotate(.0001deg) translate(146%)}.sonner-loading-bar:nth-child(2){animation-delay:-1.1s;transform:rotate(30deg) translate(146%)}.sonner-loading-bar:nth-child(3){animation-delay:-1s;transform:rotate(60deg) translate(146%)}.sonner-loading-bar:nth-child(4){animation-delay:-.9s;transform:rotate(90deg) translate(146%)}.sonner-loading-bar:nth-child(5){animation-delay:-.8s;transform:rotate(120deg) translate(146%)}.sonner-loading-bar:nth-child(6){animation-delay:-.7s;transform:rotate(150deg) translate(146%)}.sonner-loading-bar:nth-child(7){animation-delay:-.6s;transform:rotate(180deg) translate(146%)}.sonner-loading-bar:nth-child(8){animation-delay:-.5s;transform:rotate(210deg) translate(146%)}.sonner-loading-bar:nth-child(9){animation-delay:-.4s;transform:rotate(240deg) translate(146%)}.sonner-loading-bar:nth-child(10){animation-delay:-.3s;transform:rotate(270deg) translate(146%)}.sonner-loading-bar:nth-child(11){animation-delay:-.2s;transform:rotate(300deg) translate(146%)}.sonner-loading-bar:nth-child(12){animation-delay:-.1s;transform:rotate(330deg) translate(146%)}@keyframes sonner-fade-in{0%{opacity:0;transform:scale(.8)}100%{opacity:1;transform:scale(1)}}@keyframes sonner-fade-out{0%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(.8)}}@keyframes sonner-spin{0%{opacity:1}100%{opacity:.15}}@media (prefers-reduced-motion){.sonner-loading-bar,[data-sonner-toast],[data-sonner-toast]>*{transition:none!important;animation:none!important}}.sonner-loader{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transform-origin:center;transition:opacity .2s,transform .2s}.sonner-loader[data-visible=false]{opacity:0;transform:scale(.8) translate(-50%,-50%)}
  </style>
       <link href="img/cropped-favicon-32x32.webp" rel="icon" sizes="32x32"/>
     <link href="img/cropped-favicon-192x192.webp" rel="icon" sizes="192x192"/>
     <link href="img/cropped-favicon-180x180.webp" rel="apple-touch-icon"/>
     <meta content="img/cropped-favicon-270x270.webp" name="msapplication-TileImage"/>
 
 <style>
/* Bottom sheet móvil */
@media (max-width: 1023px) {
  .mobile-sheet {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    background: #fff;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -10px 30px rgba(0,0,0,.15);
    transform: translateY(100%);
    transition: transform .35s ease;
    z-index: 60; /* sobre el botón */
  }
  .mobile-sheet.open { transform: translateY(0); }

.mobile-sheet__handle {
    width: 42px; height: 5px; border-radius: 9999px;
    background: #E5E7EB; margin: 8px auto 12px;
  }

.mobile-sheet__content { max-height: 70vh; overflow: auto; padding: 12px 16px 16px; }

.mobile-sheet-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.35);
    opacity: 0; pointer-events: none;
    transition: opacity .25s ease;
    z-index: 50;
  }
  .mobile-sheet-backdrop.open {
    opacity: 1; pointer-events: auto;
  }
}
</style>

</head>
  <body>
  <noscript>
   You need to enable JavaScript to run this app.
  </noscript>
  <div id="root" >
   <div class="App bg-gray-100">
    <div class="min-h-screen py-8 px-4 sm:px-6 lg:px-8">
     <div class="max-w-7xl mx-auto">
      <div class="text-center mb-12">
       <h1 class="text-4xl sm:text-5xl font-bold text-gray-600 mb-4" data-testid="booking-title">
            Agenda Ahora
       </h1>
       <p class="text-lg text-gray-600">
            Reserva de forma rápida y segura tu Inspección PreCompra
       </p>
      </div>
      <div class="mb-12">
       <div class="flex items-center justify-center space-x-4">
        <div class="flex flex-col items-center cursor-pointer transition-all opacity-100" data-testid="step-indicator-1">
         <div class="w-16 h-16 rounded-full flex items-center justify-center mb-2 transition-all bg-[rgb(16,113,229)] text-white ring-4 ring-blue-200">
          <svg aria-hidden="true" class="lucide lucide-file-text w-8 h-8" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
           <path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z">
           </path>
           <path d="M14 2v4a2 2 0 0 0 2 2h4">
           </path>
           <path d="M10 9H8">
           </path>
           <path d="M16 13H8">
           </path>
           <path d="M16 17H8">
           </path>
          </svg>
         </div>
         <span class="text-xs sm:text-sm font-medium text-gray-700 text-center max-w-[80px]">
          Fecha
         </span>
        </div>
        <div class="w-12 sm:w-24 h-1 rounded bg-gray-200">
        </div>
        <div class="flex flex-col items-center cursor-pointer transition-all opacity-40 cursor-not-allowed" data-testid="step-indicator-2">
         <div class="w-16 h-16 rounded-full flex items-center justify-center mb-2 transition-all bg-gray-200 text-gray-500">
          <svg aria-hidden="true" class="lucide lucide-map-pin w-8 h-8" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
           <path d="M20 10c0 4.993-5.539 10.193-7.399 11.799a1 1 0 0 1-1.202 0C9.539 20.193 4 14.993 4 10a8 8 0 0 1 16 0">
           </path>
           <circle cx="12" cy="10" r="3">
           </circle>
          </svg>
         </div>
         <span class="text-xs sm:text-sm font-medium text-gray-700 text-center max-w-[80px]">
          Direcci&oacute;n
         </span>
        </div>
        <div class="w-12 sm:w-24 h-1 rounded bg-gray-200">
        </div>
        <div class="flex flex-col items-center cursor-pointer transition-all opacity-40 cursor-not-allowed" data-testid="step-indicator-3">
         <div class="w-16 h-16 rounded-full flex items-center justify-center mb-2 transition-all bg-gray-200 text-gray-500">
          <svg aria-hidden="true" class="lucide lucide-car w-8 h-8" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
           <path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2">
           </path>
           <circle cx="7" cy="17" r="2">
           </circle>
           <path d="M9 17h6">
           </path>
           <circle cx="17" cy="17" r="2">
           </circle>
          </svg>
         </div>
         <span class="text-xs sm:text-sm font-medium text-gray-700 text-center max-w-[80px]">
          Veh&iacute;culo
         </span>
        </div>
        <div class="w-12 sm:w-24 h-1 rounded bg-gray-200">
        </div>
        <div class="flex flex-col items-center cursor-pointer transition-all opacity-40 cursor-not-allowed" data-testid="step-indicator-4">
         <div class="w-16 h-16 rounded-full flex items-center justify-center mb-2 transition-all bg-gray-200 text-gray-500">
          <svg aria-hidden="true" class="lucide lucide-user w-8 h-8" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg">
           <path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2">
           </path>
           <circle cx="12" cy="7" r="4">
           </circle>
          </svg>
         </div>
         <span class="text-xs sm:text-sm font-medium text-gray-700 text-center max-w-[80px]">
          Cliente
         </span>
        </div>
       </div>
      </div>
      <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
       <div class="lg:col-span-2">
        <div class="bg-white rounded-2xl shadow-lg p-6 sm:p-8" data-testid="step-1-form">
         <div class="space-y-8">
       
     
        
<div>
  <h3 class="text-lg font-semibold text-gray-600 mb-4">
    ¿Cuándo deseas realizar la inspección del vehículo?
  </h3>

<div class="mt-8">
  <h3 class="text-lg font-semibold text-gray-600 mb-4 flex items-center">
    ¿A qué hora deseas realizar la inspección?
  </h3>

<div id="hoursGrid" class="grid grid-cols-3 sm:grid-cols-5 md:grid-cols-9 gap-2">
    
  </div>
</div>

<div class="flex justify-end pt-6">
           <button class="inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&amp;_svg]:pointer-events-none [&amp;_svg]:size-4 [&amp;_svg]:shrink-0 shadow h-9 bg-[rgb(16,113,229)] hover:bg-blue-700 text-white px-8 py-6 text-lg rounded-lg" data-testid="step1-next-btn">
            Siguiente
           </button>
          </div>
         </div>
        </div>
       </div>
      <section id="sidebarResumen" class="lg:col-span-1">
  <div class="hidden lg:block">
    <div class="sticky top-8">
      <div class="rounded-xl border text-card-foreground p-6 shadow-xl bg-white relative">
        <h3 class="text-2xl font-bold text-gray-900 mb-6">Resumen de Reserva</h3>

<div>
            <div class="flex items-center mb-2">
              <svg class="lucide lucide-calendar w-5 h-5 text-[rgb(16,113,229)] mr-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M8 2v4"></path><path d="M16 2v4"></path><rect width="18" height="18" x="3" y="4" rx="2"></rect><path d="M3 10h18"></path>
              </svg>
              <h4 class="font-semibold text-gray-700">Fecha y Hora</h4>
            </div>
            <p class="text-gray-900 ml-7" id="resumen-fecha">—</p>
            <p class="text-gray-900 ml-7" id="resumen-hora">—</p>
          </div>

<div class="bg-blue-50 p-4 rounded-lg">
            <div class="flex justify-between items-center mb-2">
              <span class="text-gray-700">Informe:</span>
              <span class="font-semibold text-gray-900" id="resumen-servicio">$0</span>
            </div>
            <div class="flex justify-between items-center mb-3">
              <span class="text-gray-700">Desplazamiento:</span>
              <span class="font-semibold text-gray-900" id="resumen-desplazamiento">$0</span>
            </div>
            <div class="shrink-0 bg-border h-[1px] w-full my-3"></div>
            <div class="flex justify-between items-center">
              <span class="text-xl font-bold text-gray-900">Total a Pagar:</span>
              <span class="text-2xl font-bold text-[rgb(16,113,229)]" id="resumen-total">$0</span>
            </div>
          </div>

<button id="btnPagar" class="inline-flex items-center justify-center gap-2 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none shadow h-9 px-4 w-full bg-[rgb(16,113,229)] hover:bg-blue-700 text-white py-6 text-lg font-semibold rounded-lg disabled:opacity-50 disabled:cursor-not-allowed" disabled>
            Completa todos los pasos
          </button>
        </div>
      </div>
    </div>
  </div>
</section>

</div>
      
      
      
<div id="mobileSheetBackdrop" class="mobile-sheet-backdrop lg:hidden"></div>

<div id="mobileSheet" class="mobile-sheet lg:hidden" aria-hidden="true" role="dialog" aria-label="Resumen de reserva">
  <div class="mobile-sheet__handle"></div>
  <div class="mobile-sheet__content">
    <h3 class="text-xl font-bold text-gray-900 mb-4">Resumen de Reserva</h3>

<div class="space-y-4 text-sm">
      <div class="flex items-center gap-2">
        <svg class="w-5 h-5 text-[rgb(16,113,229)]" viewBox="0 0 24 24" fill="none" stroke="currentColor"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>
        <div>
          <div class="text-gray-600">Informe</div>
          <div class="font-semibold text-gray-900" data-mobile-resumen-plan>—</div>
        </div>
        <div class="ml-auto font-bold text-[rgb(16,113,229)]" data-mobile-resumen-precio>—</div>
      </div>

<div>
        <div class="text-gray-600 mb-1">Fecha y hora</div>
        <div class="font-medium text-gray-900" data-mobile-resumen-fecha>—</div>
        <div class="font-medium text-gray-900" data-mobile-resumen-hora>—</div>
      </div>

<div class="bg-blue-50 p-4 rounded-lg space-y-2">
        <div class="flex justify-between">
          <span class="text-gray-700">Informe:</span>
          <span class="font-semibold text-gray-900" data-mobile-resumen-servicio>—</span>
        </div>
        <div class="flex justify-between">
          <span class="text-gray-700">Desplazamiento:</span>
          <span class="font-semibold text-gray-900" data-mobile-resumen-comuna>$0</span>
        </div>
        <hr class="border-gray-200 my-2">
        <div class="flex justify-between items-center">
          <span class="text-lg font-bold text-gray-900">Total a pagar:</span>
          <span class="text-2xl font-bold text-[rgb(16,113,229)]" data-mobile-resumen-total>—</span>
        </div>
      </div>

<button class="w-full bg-[rgb(16,113,229)] text-white py-3 rounded-lg font-semibold mt-2" disabled data-mobile-pagar>
        Completa todos los pasos
      </button>
    </div>
  </div>
</div>

<div class="lg:hidden fixed bottom-0 left-0 right-0 z-50">
  <button class="w-full bg-[rgb(16,113,229)] text-white py-4 font-semibold flex items-center justify-between px-6 shadow-lg" data-testid="toggle-summary-mobile-btn" aria-expanded="false" aria-controls="mobileSheet">
    <span data-mobile-toggle-text>Ver Resumen</span>
    <span class="text-xl font-bold" id="mobileTotal"></span>
  </button>
</div>
     </div>
    </div>
   </div>
   <section aria-atomic="false" aria-label="Notifications alt+T" aria-live="polite" aria-relevant="additions text" tabindex="-1">
   </section>
  </div>

// ==== Estado ====
  const DAYS_TOTAL = 11; // hoy + 10
  const isSmall = () => matchMedia('(max-width: 640px)').matches;
  const windowSizeLg = 5;
  const windowSizeSm = 2;

let visibleStart = 0;
  let selectedDateIndex = null;
  let selectedHour = null;

const costoInforme = precioQS;
  const costoDesplaz = 0; // Ajusta si luego calculas por comuna

// ==== Elements ====
  const elCarousel  = document.getElementById('dateCarousel');
  const elPrev      = document.getElementById('btnPrev');
  const elNext      = document.getElementById('btnNext');
  const elHoursGrid = document.getElementById('hoursGrid');

const elPlan   = document.getElementById('resumen-plan');
  const elPrecio = document.getElementById('resumen-precio');
  const elFecha  = document.getElementById('resumen-fecha');
  const elHora   = document.getElementById('resumen-hora');
  const elServ   = document.getElementById('resumen-servicio');
  const elDespl  = document.getElementById('resumen-desplazamiento');
  const elTotal  = document.getElementById('resumen-total');
  const elPay    = document.getElementById('btnPagar');
  const elMobileTotal = document.getElementById('mobileTotal');

// Inicializar resumen con plan/valor
  elPlan.textContent   = planQS;
  elPrecio.textContent = fmtCLP(costoInforme);
  elServ.textContent   = fmtCLP(costoInforme);
  elDespl.textContent  = fmtCLP(costoDesplaz);
  elTotal.textContent  = fmtCLP(costoInforme + costoDesplaz);
  if (elMobileTotal) elMobileTotal.textContent = fmtCLP(costoInforme + costoDesplaz);

// ==== Generación de fechas ====
  const dow = ['dom','lun','mar','mie','jue','vie','sáb'];
  const mon = ['ene','feb','mar','abr','may','jun','jul','ago','sep','oct','nov','dic'];

// ==== Horas por día (patrón simple) ====
  function hoursForIndex(i){
    const bases = [
      ['09:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00'],
      ['09:00','10:00','12:00','14:00','16:00'],
      ['10:00','11:00','13:00','15:00','17:00'],
      ['09:00','10:00','13:00','14:30','16:00'],
      ['10:00','12:00','14:00','15:00','17:00']
    ];
    return bases[i % bases.length];
  }

// ==== Render fechas ====
  function renderDates(){
    elCarousel.innerHTML = '';
    const windowSize = isSmall() ? windowSizeSm : windowSizeLg;
    const end = Math.min(visibleStart + windowSize, days.length);

for (let i=visibleStart; i<end; i++){
      const d = days[i];
      const btn = document.createElement('button');
      const selected = (i===selectedDateIndex);
      btn.className =
        'p-4 rounded-lg border-2 transition-all ' +
        (selected ? 'border-[rgb(16,113,229)] bg-blue-50' : 'border-gray-200 hover:border-blue-300');
      btn.setAttribute('data-index', i);
      btn.innerHTML = `
        <div class="text-center">
          <div class="text-xs text-gray-600 capitalize">${d.dow}</div>
          <div class="text-2xl font-bold text-gray-700">${d.day}</div>
          <div class="text-xs font-bold text-gray-600 capitalize">${(d.mon || '').slice(0,3)}</div>
        </div>
      `;
      btn.addEventListener('click', () => {
        selectedDateIndex = i;
        selectedHour = null;
        renderDates();
        renderHours();
        updateSummary();
      });
      elCarousel.appendChild(btn);
    }

elPrev.disabled = (visibleStart === 0);
    elNext.disabled = (end >= days.length);
  }

// ==== Render horas ====
  function renderHours(){
    elHoursGrid.innerHTML = '';
    if (selectedDateIndex === null){
      elHoursGrid.innerHTML = '<div class="col-span-full text-gray-500"></div>';
      return;
    }
    hoursForIndex(selectedDateIndex).forEach(h => {
      const b = document.createElement('button');
      const selected = (h === selectedHour);
      b.className =
        'py-3 px-4 rounded-lg border-2 font-medium transition-all ' +
        (selected ? 'border-[rgb(16,113,229)] bg-blue-50 text-[rgb(16,113,229)]' : 'border-gray-200 hover:border-blue-300 text-gray-700');
      b.textContent = h;
      b.addEventListener('click', () => {
        selectedHour = h;
        renderHours();
        updateSummary();
      });
      elHoursGrid.appendChild(b);
    });
  }

// ==== Resumen ====
  function updateSummary(){
    // Fecha
    if (selectedDateIndex != null){
      const d = days[selectedDateIndex].dateObj;
      elFecha.textContent = new Intl.DateTimeFormat('es-CL', { dateStyle:'long' }).format(d);
    } else {
      elFecha.textContent = '—';
    }
    // Hora
    elHora.textContent = selectedHour || '—';

// Totales
    const total = costoInforme + costoDesplaz;
    elServ.textContent  = fmtCLP(costoInforme);
    elDespl.textContent = fmtCLP(costoDesplaz);
    elTotal.textContent = fmtCLP(total);
    if (elMobileTotal) elMobileTotal.textContent = fmtCLP(total);

// Botón continuar
    elPay.disabled = !(selectedDateIndex !== null && selectedHour);
      if (window.syncMobileSummary) window.syncMobileSummary();
  }

// ==== Nav carrusel ====
  elPrev.addEventListener('click', () => {
    const windowSize = isSmall() ? windowSizeSm : windowSizeLg;
    visibleStart = Math.max(0, visibleStart - windowSize);
    renderDates();
  });
  elNext.addEventListener('click', () => {
    const windowSize = isSmall() ? windowSizeSm : windowSizeLg;
    visibleStart = Math.min(days.length - windowSize, visibleStart + windowSize);
    renderDates();
  });
  window.addEventListener('resize', renderDates);

// ==== Init ====
  renderDates();
  renderHours();
  updateSummary();
})();
</script>

function syncMobileSummary(){
    const q = s => document.querySelector(s);

// Lee desde el resumen desktop por ID (coincide con tu HTML actual)
    const plan     = q('#resumen-plan')?.textContent?.trim() || '—';
    const precio   = q('#resumen-precio')?.textContent?.trim() || '—';
    const fecha    = q('#resumen-fecha')?.textContent?.trim() || '—';
    const hora     = q('#resumen-hora')?.textContent?.trim() || '—';
    const servicio = q('#resumen-servicio')?.textContent?.trim() || precio;
    const despl    = q('#resumen-desplazamiento')?.textContent?.trim() || '$0';
    const total    = q('#resumen-total')?.textContent?.trim() || precio;

const set = (sel, val) => { const el = q(sel); if (el) el.textContent = val; };

set('[data-mobile-resumen-plan]', plan);
    set('[data-mobile-resumen-precio]', precio);
    set('[data-mobile-resumen-fecha]', fecha);
    set('[data-mobile-resumen-hora]', hora);
    set('[data-mobile-resumen-servicio]', servicio);
    set('[data-mobile-resumen-comuna]', despl); // si luego es “Comuna”, cámbialo por el valor correcto
    set('[data-mobile-resumen-total]', total);

// habilita o no el botón pagar del sheet
    const mobilePayBtn = q('[data-mobile-pagar]');
    if (mobilePayBtn) mobilePayBtn.disabled = (fecha === '—' || hora === '—');

// actualiza el total del botón fijo inferior
    const mobileTotalInline = q('#mobileTotal');
    if (mobileTotalInline && total !== '—') mobileTotalInline.textContent = total;
  }

// Exponer para que lo llames cuando cambies fecha/hora/plan
  window.syncMobileSummary = syncMobileSummary;

// Sincroniza al cargar
  syncMobileSummary();

// Mejora de robustez: evita error si no existe el span del texto
  const sheet = document.getElementById('mobileSheet');
  const backdrop = document.getElementById('mobileSheetBackdrop');
  const toggleBtn = document.querySelector('[data-testid="toggle-summary-mobile-btn"]');
  const toggleText = document.querySelector('[data-mobile-toggle-text]');

// ==== Swipe down to close (mobile sheet) ====
  let startY = 0;
  let currentY = 0;
  let dragging = false;
  const THRESHOLD = 70; // px para cerrar
  const sheetContent = sheet.querySelector('.mobile-sheet__content');
  const sheetHandle  = sheet.querySelector('.mobile-sheet__handle');

function onTouchStart(e){
    if (!isOpen()) return;

// Sólo inicia el gesto si:
    // - el toque viene del "handle", o
    // - el contenido está scrolleado arriba del todo (scrollTop === 0)
    const fromHandle = sheetHandle && (e.target === sheetHandle || sheetHandle.contains(e.target));
    if (!fromHandle && sheetContent && sheetContent.scrollTop > 0) return;

dragging = true;
    startY = (e.touches ? e.touches[0].clientY : e.clientY);
    currentY = startY;
    sheet.style.transition = 'none'; // desactiva anim para arrastre
  }

function onTouchMove(e){
    if (!dragging) return;
    const y = (e.touches ? e.touches[0].clientY : e.clientY);
    currentY = y;

const delta = Math.max(0, currentY - startY); // sólo hacia abajo
    if (delta > 0){
      e.preventDefault(); // evita scroll detrás
      sheet.style.transform = `translateY(${delta}px)`; // arrastra la hoja
    }
  }

function onTouchEnd(){
    if (!dragging) return;
    const delta = Math.max(0, currentY - startY);
    dragging = false;

// restablece transición suave
    sheet.style.transition = 'transform .35s ease';

if (delta > THRESHOLD){
      // cerrar si superó el umbral
      sheet.style.transform = ''; // limpia inline
      closeSheet();
    } else {
      // volver a su posición original
      sheet.style.transform = 'translateY(0)';
      // limpia el inline cuando termina la animación
      setTimeout(()=>{ sheet.style.transform = ''; }, 350);
    }
  }

// Soporte táctil
  sheet.addEventListener('touchstart', onTouchStart, {passive:true});
  sheet.addEventListener('touchmove',  onTouchMove,  {passive:false});
  sheet.addEventListener('touchend',   onTouchEnd,   {passive:true});

// (Opcional) soporte mouse para pruebas en desktop
  sheet.addEventListener('mousedown', onTouchStart);
  window.addEventListener('mousemove', onTouchMove);
  window.addEventListener('mouseup', onTouchEnd);

if (toggleBtn) {
    toggleBtn.addEventListener('click', ()=> {
      if(isOpen()){
        closeSheet();
        if (toggleText) toggleText.textContent = 'Ver Resumen';
      } else {
        openSheet();
        if (toggleText) toggleText.textContent = 'Ocultar Resumen';
      }
    });
  }
  if (backdrop) {
    backdrop.addEventListener('click', ()=> {
      closeSheet();
      if (toggleText) toggleText.textContent = 'Ver Resumen';
    });
  }
})();
</script>

</body>

</html>

cmd: