FM / propuesta

/home/simp499cl/public_html/propuesta_auto/

/home/simp499cl/public_html/propuesta_auto

Name	Size	Mode	Actions
4b22fe4a-219d-4844-9f79-ab3202f826e9-1024x676.webp	40920	0644	edit dl rm
index.html	61676	0644	edit dl rm
main.ea6b31dc.css	61510	0644	edit dl rm

Edit: /home/simp499cl/public_html/propuesta_auto/index.html (61676B)

<!DOCTYPE html>
<html
  data-scrapbook-source="https://auto-inspect-report.preview.static.emergentagent.com/circular"
  lang="en"
>
  <head>
    <meta charset="utf-8" />
    <meta content="width=device-width,initial-scale=1" name="viewport" />
    <meta content="#000000" name="theme-color" />
    <meta content="A product of emergent.sh" name="description" />
    <title>Prechequeo - Informe</title>
    <link href="main.ea6b31dc.css" rel="stylesheet" />
  </head>
  <body>
    <noscript> You need to enable JavaScript to run this app. </noscript>
    <div id="root">
      <div class="App">
        <div
          class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-blue-50"
        >
          <div class="bg-white shadow-sm border-b border-blue-100">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
              <div class="flex items-center justify-between">
                <div class="flex items-center gap-3">
                  <button
                    class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm 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 h-9 px-4 py-2 text-blue-600 hover:text-blue-700 hover:bg-blue-50"
                  >
                    <svg
                      aria-hidden="true"
                      class="lucide lucide-arrow-left w-4 h-4 mr-2"
                      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="m12 19-7-7 7-7"></path>
                      <path d="M19 12H5"></path>
                    </svg>
                  </button>
                </div>
              </div>
            </div>
          </div>
          <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
              <div class="lg:col-span-2">
                <div
                  class="rounded-xl border text-card-foreground bg-white border-blue-100 shadow-md"
                >
                  <div class="p-6 pt-8 pb-8">
                    <div
                      class="relative w-full aspect-square max-w-3xl mx-auto"
                    >
                      <div
                        class="absolute inset-0 flex items-center justify-center"
                      >
                        <div
                          class="w-[90%] h-[90%] rounded-full bg-blue-50 shadow-inner"
                        ></div>
                      </div>
                      <div
                        class="absolute inset-0 flex items-center justify-center"
                      >
                        <div
                          class="w-[50%] h-[50%] flex items-center justify-center"
                        >
                          <img
                            alt="Vista frontal del vehículo"
                            class="w-full h-full object-contain drop-shadow-2xl"
                            src="4b22fe4a-219d-4844-9f79-ab3202f826e9-1024x676.webp"
                          />
                        </div>
                      </div>
                      <div
                        class="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
                        data-description="Inspección visual y auditiva del motor. No se observan fugas evidentes ni ruidos anómalos durante el ralentí."
                        data-detail-spot="true"
                        data-quick="Funcionamiento general correcto."
                        data-status="Revisado"
                        data-status-color="green"
                        data-title="Motor"
                        style="left: 50%; top: 5%"
                      >
                        <div
                          class="relative w-16 h-16 bg-white rounded-full shadow-lg border-4 border-green-400 flex items-center justify-center transition-all duration-200 hover:scale-110"
                        >
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-cog w-7 h-7 text-gray-700"
                            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="M12 20a8 8 0 1 0 0-16 8 8 0 0 0 0 16Z"
                            ></path>
                            <path
                              d="M12 14a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z"
                            ></path>
                            <path d="M12 2v2"></path>
                            <path d="M12 22v-2"></path>
                            <path d="m17 20.66-1-1.73"></path>
                            <path d="M11 10.27 7 3.34"></path>
                            <path d="m20.66 17-1.73-1"></path>
                            <path d="m3.34 7 1.73 1"></path>
                            <path d="M14 12h8"></path>
                            <path d="M2 12h2"></path>
                            <path d="m20.66 7-1.73 1"></path>
                            <path d="m3.34 17 1.73-1"></path>
                            <path d="m17 3.34-1 1.73"></path>
                            <path d="m11 13.73-4 6.93"></path>
                          </svg>
                          <div class="absolute -bottom-1 -right-1">
                            <div class="relative">
                              <div
                                class="absolute w-6 h-6 bg-green-500 rounded-full animate-pulse-gentle"
                              ></div>
                              <div
                                class="relative w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-lg"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="lucide lucide-circle-check w-4 h-4"
                                  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"
                                >
                                  <circle cx="12" cy="12" r="10"></circle>
                                  <path d="m9 12 2 2 4-4"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
                        >
                          <div
                            class="inline-flex items-center rounded-md px-2.5 py-0.5 font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-secondary-foreground hover:bg-secondary/80 bg-white border-2 border-green-400 text-xs shadow-md transition-opacity opacity-0 group-hover:opacity-100"
                          >
                            Motor
                          </div>
                        </div>
                      </div>
                      <div
                        class="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
                        data-description="Nivel de aceite dentro del rango recomendado por el fabricante, sin signos de contaminación evidente."
                        data-detail-spot="true"
                        data-quick="Aceite en nivel correcto."
                        data-status="Aprobado"
                        data-status-color="green"
                        data-title="Nivel de Aceite"
                        style="left: 72.5%; top: 11.0289%"
                      >
                        <div
                          class="relative w-16 h-16 bg-white rounded-full shadow-lg border-4 border-green-400 flex items-center justify-center transition-all duration-200 hover:scale-110 scale-110 ring-4 ring-blue-400"
                        >
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-droplet w-7 h-7 text-gray-700"
                            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="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"
                            ></path>
                          </svg>
                          <div class="absolute -bottom-1 -right-1">
                            <div class="relative">
                              <div
                                class="absolute w-6 h-6 bg-green-500 rounded-full animate-pulse-gentle"
                              ></div>
                              <div
                                class="relative w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-lg"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="lucide lucide-circle-check w-4 h-4"
                                  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"
                                >
                                  <circle cx="12" cy="12" r="10"></circle>
                                  <path d="m9 12 2 2 4-4"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
                        >
                          <div
                            class="inline-flex items-center rounded-md px-2.5 py-0.5 font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-secondary-foreground hover:bg-secondary/80 bg-white border-2 border-green-400 text-xs shadow-md transition-opacity opacity-100"
                          >
                            Nivel de Aceite1
                          </div>
                        </div>
                      </div>
                      <div
                        class="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
                        data-description="Se observa desgaste en pastillas y/o discos que requerirá reemplazo en el corto plazo."
                        data-detail-spot="true"
                        data-quick="Revisar desgaste de frenos."
                        data-status="Advertencia"
                        data-status-color="orange"
                        data-title="Sistema de Frenos"
                        style="left: 88.9711%; top: 27.5%"
                      >
                        <div
                          class="relative w-16 h-16 bg-white rounded-full shadow-lg border-4 border-green-400 flex items-center justify-center transition-all duration-200 hover:scale-110"
                        >
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-disc w-7 h-7 text-gray-700"
                            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"
                          >
                            <circle cx="12" cy="12" r="10"></circle>
                            <circle cx="12" cy="12" r="2"></circle>
                          </svg>
                          <div class="absolute -bottom-1 -right-1">
                            <div class="relative">
                              <div
                                class="absolute w-6 h-6 bg-green-500 rounded-full animate-pulse-gentle"
                              ></div>
                              <div
                                class="relative w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-lg"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="lucide lucide-circle-check w-4 h-4"
                                  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"
                                >
                                  <circle cx="12" cy="12" r="10"></circle>
                                  <path d="m9 12 2 2 4-4"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
                        >
                          <div
                            class="inline-flex items-center rounded-md px-2.5 py-0.5 font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-secondary-foreground hover:bg-secondary/80 bg-white border-2 border-green-400 text-xs shadow-md transition-opacity opacity-0 group-hover:opacity-100"
                          >
                            Sistema de Frenos 1
                          </div>
                        </div>
                      </div>
                      <div
                        class="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
                        data-description="Desgaste irregular o cercano al límite legal en al menos uno de los neumáticos."
                        data-detail-spot="true"
                        data-quick="Recomendable reemplazo próximo."
                        data-status="Advertencia"
                        data-status-color="orange"
                        data-title="Neumáticos"
                        style="left: 95%; top: 50%"
                      >
                        <div
                          class="relative w-16 h-16 bg-white rounded-full shadow-lg border-4 border-orange-400 flex items-center justify-center transition-all duration-200 hover:scale-110"
                        >
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-circle-dot w-7 h-7 text-gray-700"
                            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"
                          >
                            <circle cx="12" cy="12" r="10"></circle>
                            <circle cx="12" cy="12" r="1"></circle>
                          </svg>
                          <div class="absolute -bottom-1 -right-1">
                            <div class="relative">
                              <div
                                class="absolute w-6 h-6 bg-orange-500 rounded-full animate-pulse-medium"
                              ></div>
                              <div
                                class="relative w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-lg"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="lucide lucide-triangle-alert w-4 h-4"
                                  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="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
                                  ></path>
                                  <path d="M12 9v4"></path>
                                  <path d="M12 17h.01"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
                        >
                          <div
                            class="inline-flex items-center rounded-md px-2.5 py-0.5 font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-secondary-foreground hover:bg-secondary/80 bg-white border-2 border-orange-400 text-xs shadow-md transition-opacity opacity-0 group-hover:opacity-100"
                          >
                            Neumáticos
                          </div>
                        </div>
                      </div>
                      <div
                        class="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
                        data-description="Alguna luz exterior no funciona correctamente (posición, freno, señalizador o baja/alta)."
                        data-detail-spot="true"
                        data-quick="Reparar luces defectuosas."
                        data-status="Requiere atención"
                        data-status-color="red"
                        data-title="Sistema de Luces"
                        style="left: 88.9711%; top: 72.5%"
                      >
                        <div
                          class="relative w-16 h-16 bg-white rounded-full shadow-lg border-4 border-red-400 flex items-center justify-center transition-all duration-200 hover:scale-110"
                        >
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-lightbulb w-7 h-7 text-gray-700"
                            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 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5"
                            ></path>
                            <path d="M9 18h6"></path>
                            <path d="M10 22h4"></path>
                          </svg>
                          <div class="absolute -bottom-1 -right-1">
                            <div class="relative">
                              <div
                                class="absolute w-6 h-6 bg-red-500 rounded-full animate-ping opacity-75"
                              ></div>
                              <div
                                class="relative w-6 h-6 bg-red-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-lg"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="lucide lucide-circle-x w-4 h-4"
                                  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"
                                >
                                  <circle cx="12" cy="12" r="10"></circle>
                                  <path d="m15 9-6 6"></path>
                                  <path d="m9 9 6 6"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
                        >
                          <div
                            class="inline-flex items-center rounded-md px-2.5 py-0.5 font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-secondary-foreground hover:bg-secondary/80 bg-white border-2 border-red-400 text-xs shadow-md transition-opacity opacity-0 group-hover:opacity-100"
                          >
                            Sistema de Luces
                          </div>
                        </div>
                      </div>
                      <div
                        class="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
                        data-description="No se perciben ruidos anormales en baches y la altura del vehículo es homogénea."
                        data-detail-spot="true"
                        data-quick="Sin ruidos ni holguras evidentes."
                        data-status="Revisado"
                        data-status-color="green"
                        data-title="Suspensión"
                        style="left: 72.5%; top: 88.9711%"
                      >
                        <div
                          class="relative w-16 h-16 bg-white rounded-full shadow-lg border-4 border-green-400 flex items-center justify-center transition-all duration-200 hover:scale-110"
                        >
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-waves w-7 h-7 text-gray-700"
                            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="M2 6c.6.5 1.2 1 2.5 1C7 7 7 5 9.5 5c2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"
                            ></path>
                            <path
                              d="M2 12c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"
                            ></path>
                            <path
                              d="M2 18c.6.5 1.2 1 2.5 1 2.5 0 2.5-2 5-2 2.6 0 2.4 2 5 2 2.5 0 2.5-2 5-2 1.3 0 1.9.5 2.5 1"
                            ></path>
                          </svg>
                          <div class="absolute -bottom-1 -right-1">
                            <div class="relative">
                              <div
                                class="absolute w-6 h-6 bg-green-500 rounded-full animate-pulse-gentle"
                              ></div>
                              <div
                                class="relative w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-lg"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="lucide lucide-circle-check w-4 h-4"
                                  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"
                                >
                                  <circle cx="12" cy="12" r="10"></circle>
                                  <path d="m9 12 2 2 4-4"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
                        >
                          <div
                            class="inline-flex items-center rounded-md px-2.5 py-0.5 font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-secondary-foreground hover:bg-secondary/80 bg-white border-2 border-green-400 text-xs shadow-md transition-opacity opacity-0 group-hover:opacity-100"
                          >
                            Suspensión
                          </div>
                        </div>
                      </div>
                      <div
                        class="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
                        data-description="Bornes limpios y firmes, sin signos visibles de sulfatación o filtración."
                        data-detail-spot="true"
                        data-quick="Estado general adecuado."
                        data-status="Revisado"
                        data-status-color="green"
                        data-title="Batería"
                        style="left: 50%; top: 95%"
                      >
                        <div
                          class="relative w-16 h-16 bg-white rounded-full shadow-lg border-4 border-green-400 flex items-center justify-center transition-all duration-200 hover:scale-110"
                        >
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-zap w-7 h-7 text-gray-700"
                            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="M4 14a1 1 0 0 1-.78-1.63l9.9-10.2a.5.5 0 0 1 .86.46l-1.92 6.02A1 1 0 0 0 13 10h7a1 1 0 0 1 .78 1.63l-9.9 10.2a.5.5 0 0 1-.86-.46l1.92-6.02A1 1 0 0 0 11 14z"
                            ></path>
                          </svg>
                          <div class="absolute -bottom-1 -right-1">
                            <div class="relative">
                              <div
                                class="absolute w-6 h-6 bg-green-500 rounded-full animate-pulse-gentle"
                              ></div>
                              <div
                                class="relative w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-lg"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="lucide lucide-circle-check w-4 h-4"
                                  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"
                                >
                                  <circle cx="12" cy="12" r="10"></circle>
                                  <path d="m9 12 2 2 4-4"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
                        >
                          <div
                            class="inline-flex items-center rounded-md px-2.5 py-0.5 font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-secondary-foreground hover:bg-secondary/80 bg-white border-2 border-green-400 text-xs shadow-md transition-opacity opacity-0 group-hover:opacity-100"
                          >
                            Batería
                          </div>
                        </div>
                      </div>
                      <div
                        class="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
                        data-description="Nivel de refrigerante correcto y sin fugas visibles en mangueras o radiador."
                        data-detail-spot="true"
                        data-quick="Temperatura de trabajo normal."
                        data-status="Revisado"
                        data-status-color="green"
                        data-title="Sistema de Refrigeración"
                        style="left: 27.5%; top: 88.9711%"
                      >
                        <div
                          class="relative w-16 h-16 bg-white rounded-full shadow-lg border-4 border-green-400 flex items-center justify-center transition-all duration-200 hover:scale-110"
                        >
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-wind w-7 h-7 text-gray-700"
                            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="M12.8 19.6A2 2 0 1 0 14 16H2"></path>
                            <path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"></path>
                            <path d="M9.8 4.4A2 2 0 1 1 11 8H2"></path>
                          </svg>
                          <div class="absolute -bottom-1 -right-1">
                            <div class="relative">
                              <div
                                class="absolute w-6 h-6 bg-green-500 rounded-full animate-pulse-gentle"
                              ></div>
                              <div
                                class="relative w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-lg"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="lucide lucide-circle-check w-4 h-4"
                                  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"
                                >
                                  <circle cx="12" cy="12" r="10"></circle>
                                  <path d="m9 12 2 2 4-4"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
                        >
                          <div
                            class="inline-flex items-center rounded-md px-2.5 py-0.5 font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-secondary-foreground hover:bg-secondary/80 bg-white border-2 border-green-400 text-xs shadow-md transition-opacity opacity-0 group-hover:opacity-100"
                          >
                            Sistema de Refrigeración
                          </div>
                        </div>
                      </div>
                      <div
                        class="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
                        data-description="No se perciben golpes o patinamientos evidentes durante los cambios de marcha."
                        data-detail-spot="true"
                        data-quick="Cambios suaves y progresivos."
                        data-status="Revisado"
                        data-status-color="green"
                        data-title="Transmisión"
                        style="left: 11.0289%; top: 72.5%"
                      >
                        <div
                          class="relative w-16 h-16 bg-white rounded-full shadow-lg border-4 border-green-400 flex items-center justify-center transition-all duration-200 hover:scale-110"
                        >
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-settings w-7 h-7 text-gray-700"
                            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="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"
                            ></path>
                            <circle cx="12" cy="12" r="3"></circle>
                          </svg>
                          <div class="absolute -bottom-1 -right-1">
                            <div class="relative">
                              <div
                                class="absolute w-6 h-6 bg-green-500 rounded-full animate-pulse-gentle"
                              ></div>
                              <div
                                class="relative w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-lg"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="lucide lucide-circle-check w-4 h-4"
                                  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"
                                >
                                  <circle cx="12" cy="12" r="10"></circle>
                                  <path d="m9 12 2 2 4-4"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
                        >
                          <div
                            class="inline-flex items-center rounded-md px-2.5 py-0.5 font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-secondary-foreground hover:bg-secondary/80 bg-white border-2 border-green-400 text-xs shadow-md transition-opacity opacity-0 group-hover:opacity-100"
                          >
                            Transmisión
                          </div>
                        </div>
                      </div>
                      <div
                        class="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
                        data-description="No se observan fugas evidentes ni ruidos anormales provenientes del sistema de escape."
                        data-detail-spot="true"
                        data-quick="Sin fugas apreciables."
                        data-status="Revisado"
                        data-status-color="green"
                        data-title="Sistema de Escape"
                        style="left: 5%; top: 50%"
                      >
                        <div
                          class="relative w-16 h-16 bg-white rounded-full shadow-lg border-4 border-orange-400 flex items-center justify-center transition-all duration-200 hover:scale-110"
                        >
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-wind w-7 h-7 text-gray-700"
                            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="M12.8 19.6A2 2 0 1 0 14 16H2"></path>
                            <path d="M17.5 8a2.5 2.5 0 1 1 2 4H2"></path>
                            <path d="M9.8 4.4A2 2 0 1 1 11 8H2"></path>
                          </svg>
                          <div class="absolute -bottom-1 -right-1">
                            <div class="relative">
                              <div
                                class="absolute w-6 h-6 bg-orange-500 rounded-full animate-pulse-medium"
                              ></div>
                              <div
                                class="relative w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-lg"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="lucide lucide-triangle-alert w-4 h-4"
                                  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="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3"
                                  ></path>
                                  <path d="M12 9v4"></path>
                                  <path d="M12 17h.01"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
                        >
                          <div
                            class="inline-flex items-center rounded-md px-2.5 py-0.5 font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-secondary-foreground hover:bg-secondary/80 bg-white border-2 border-orange-400 text-xs shadow-md transition-opacity opacity-0 group-hover:opacity-100"
                          >
                            Sistema de Escape
                          </div>
                        </div>
                      </div>
                      <div
                        class="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
                        data-description="Volante sin holguras excesivas y sin ruidos extraños al girar a ambos lados."
                        data-detail-spot="true"
                        data-quick="Dirección estable y precisa."
                        data-status="Revisado"
                        data-status-color="green"
                        data-title="Dirección"
                        style="left: 11.0289%; top: 27.5%"
                      >
                        <div
                          class="relative w-16 h-16 bg-white rounded-full shadow-lg border-4 border-green-400 flex items-center justify-center transition-all duration-200 hover:scale-110"
                        >
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-circle-dashed w-7 h-7 text-gray-700"
                            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="M10.1 2.182a10 10 0 0 1 3.8 0"></path>
                            <path d="M13.9 21.818a10 10 0 0 1-3.8 0"></path>
                            <path d="M17.609 3.721a10 10 0 0 1 2.69 2.7"></path>
                            <path d="M2.182 13.9a10 10 0 0 1 0-3.8"></path>
                            <path
                              d="M20.279 17.609a10 10 0 0 1-2.7 2.69"
                            ></path>
                            <path d="M21.818 10.1a10 10 0 0 1 0 3.8"></path>
                            <path d="M3.721 6.391a10 10 0 0 1 2.7-2.69"></path>
                            <path d="M6.391 20.279a10 10 0 0 1-2.69-2.7"></path>
                          </svg>
                          <div class="absolute -bottom-1 -right-1">
                            <div class="relative">
                              <div
                                class="absolute w-6 h-6 bg-green-500 rounded-full animate-pulse-gentle"
                              ></div>
                              <div
                                class="relative w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-lg"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="lucide lucide-circle-check w-4 h-4"
                                  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"
                                >
                                  <circle cx="12" cy="12" r="10"></circle>
                                  <path d="m9 12 2 2 4-4"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
                        >
                          <div
                            class="inline-flex items-center rounded-md px-2.5 py-0.5 font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-secondary-foreground hover:bg-secondary/80 bg-white border-2 border-green-400 text-xs shadow-md transition-opacity opacity-0 group-hover:opacity-100"
                          >
                            Dirección
                          </div>
                        </div>
                      </div>
                      <div
                        class="absolute transform -translate-x-1/2 -translate-y-1/2 cursor-pointer group"
                        data-description="Pequeños detalles estéticos normales para el uso del vehículo, sin daños estructurales evidentes."
                        data-detail-spot="true"
                        data-quick="Sin daños estructurales visibles."
                        data-status="Revisado"
                        data-status-color="green"
                        data-title="Carrocería"
                        style="left: 27.5%; top: 11.0289%"
                      >
                        <div
                          class="relative w-16 h-16 bg-white rounded-full shadow-lg border-4 border-green-400 flex items-center justify-center transition-all duration-200 hover:scale-110"
                        >
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-shield w-7 h-7 text-gray-700"
                            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 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z"
                            ></path>
                          </svg>
                          <div class="absolute -bottom-1 -right-1">
                            <div class="relative">
                              <div
                                class="absolute w-6 h-6 bg-green-500 rounded-full animate-pulse-gentle"
                              ></div>
                              <div
                                class="relative w-6 h-6 bg-green-500 rounded-full flex items-center justify-center text-white border-2 border-white shadow-lg"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="lucide lucide-circle-check w-4 h-4"
                                  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"
                                >
                                  <circle cx="12" cy="12" r="10"></circle>
                                  <path d="m9 12 2 2 4-4"></path>
                                </svg>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div
                          class="absolute top-full mt-2 left-1/2 transform -translate-x-1/2 whitespace-nowrap"
                        >
                          <div
                            class="inline-flex items-center rounded-md px-2.5 py-0.5 font-semibold focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 text-secondary-foreground hover:bg-secondary/80 bg-white border-2 border-green-400 text-xs shadow-md transition-opacity opacity-0 group-hover:opacity-100"
                          >
                            Carrocería
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="lg:col-span-1">
                <div
                  class="rounded-xl border text-card-foreground bg-white border-blue-100 shadow-md sticky top-4"
                >
                  <div class="p-6 pt-6">
                    <div class="space-y-4" id="detail-panel">
                      <div>
                        <div class="flex items-center gap-2 mb-2">
                          <svg
                            aria-hidden="true"
                            class="lucide lucide-droplet w-6 h-6 text-blue-600"
                            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="M12 22a7 7 0 0 0 7-7c0-2-1-3.9-3-5.5s-3.5-4-4-6.5c-.5 2.5-2 4.9-4 6.5C6 11.1 5 13 5 15a7 7 0 0 0 7 7z"
                            ></path>
                          </svg>
                          <h3 class="text-xl font-bold text-gray-900">
                            Nivel de Aceite
                          </h3>
                        </div>
                        <div
                          class="inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 border-transparent shadow hover:bg-primary/80 bg-green-500 text-white"
                          data-detail-status="true"
                        >
                          Aprobado
                        </div>
                      </div>
                      <div class="pt-4 border-t border-gray-200">
                        <p class="text-sm text-gray-600 mb-2">Descripción:</p>
                        <p class="text-gray-900" data-detail-description="true">
                          Nivel de aceite óptimo y en buen estado.
                        </p>
                      </div>
                      <div class="pt-4 border-t border-gray-200">
                        <p class="text-sm text-gray-600 mb-2">Estado Rápido:</p>
                        <p
                          class="font-medium text-green-600"
                          data-detail-quick="true"
                        >
                          Aceite en nivel correcto
                        </p>
                      </div>
                      <button
                        class="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm 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 text-primary-foreground shadow h-9 px-4 py-2 w-full bg-blue-600 hover:bg-blue-700 mt-4"
                      >
                        Ver Detalles Completos
                      </button>
                    </div>
                  </div>
                </div>
                <div
                  class="rounded-xl border text-card-foreground bg-white border-blue-100 shadow-md mt-6"
                >
                  <div class="p-6 pt-6">
                    <h4 class="font-semibold text-gray-900 mb-4">Resumen</h4>
                    <div class="space-y-3">
                      <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                          <div class="w-3 h-3 bg-green-500 rounded-full"></div>
                          <span class="text-sm text-gray-600"> Aprobados </span>
                        </div>
                        <span class="font-semibold text-green-600"> 9 </span>
                      </div>
                      <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                          <div class="w-3 h-3 bg-orange-500 rounded-full"></div>
                          <span class="text-sm text-gray-600">
                            Advertencias
                          </span>
                        </div>
                        <span class="font-semibold text-orange-600"> 2 </span>
                      </div>
                      <div class="flex items-center justify-between">
                        <div class="flex items-center gap-2">
                          <div class="w-3 h-3 bg-red-500 rounded-full"></div>
                          <span class="text-sm text-gray-600">
                            Requiere Atención
                          </span>
                        </div>
                        <span class="font-semibold text-red-600"> 1 </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <a
      href="https://app.emergent.sh/?utm_source=emergent-badge"
      id="emergent-badge"
      style='display:flex!important;align-items:center!important;position:fixed!important;bottom:20px;right:20px;text-decoration:none;padding:6px 10px;font-family:-apple-system,BlinkMacSystemFont,"z-index:9999!important;box-shadow:0 2px 8px rgba(0,0,0,.15)!important;border-radius:8px!important;background-color:#fff!important;border:1px solid rgba(255,255,255,.25)!important'
      target="_blank"
    >
      <div style="display: flex; flex-direction: row; align-items: center">
        <img
          src="1201222.png"
          style="width: 20px; height: 20px; margin-right: 8px"
        />
        <p
          style='color:#000;font-family:-apple-system,BlinkMacSystemFont,"align-items:center;margin-bottom:0'
        >
          Made with Emergent
        </p>
      </div>
    </a>
    <script>
      (function () {
        var panel = document.getElementById("detail-panel");
        if (!panel) return;

var titleEl = panel.querySelector("h3");
        var statusBadge = panel.querySelector("[data-detail-status]");
        var descriptionEl = panel.querySelector("[data-detail-description]");
        var quickEl = panel.querySelector("[data-detail-quick]");

if (!titleEl || !statusBadge || !descriptionEl || !quickEl) return;

var STATUS_BG = {
          green: "bg-green-500",
          orange: "bg-orange-500",
          red: "bg-red-500",
        };

var QUICK_TEXT = {
          green: "text-green-600",
          orange: "text-orange-600",
          red: "text-red-600",
        };

function clearClasses(el, classes) {
          classes.forEach(function (c) {
            el.classList.remove(c);
          });
        }

var spots = document.querySelectorAll("[data-detail-spot]");
        spots.forEach(function (spot) {
          spot.addEventListener("mouseenter", function () {
            var title = spot.getAttribute("data-title") || "";
            var status = spot.getAttribute("data-status") || "";
            var statusColor = spot.getAttribute("data-status-color") || "green";
            var description = spot.getAttribute("data-description") || "";
            var quick = spot.getAttribute("data-quick") || "";
            var quickColor = statusColor;

// Título
            titleEl.textContent = title;

// Badge de estado
            statusBadge.textContent = status;
            clearClasses(statusBadge, [
              STATUS_BG.green,
              STATUS_BG.orange,
              STATUS_BG.red,
            ]);
            statusBadge.classList.add(
              STATUS_BG[statusColor] || STATUS_BG.green
            );

// Descripción
            descriptionEl.textContent = description;

// Estado rápido
            clearClasses(quickEl, [
              QUICK_TEXT.green,
              QUICK_TEXT.orange,
              QUICK_TEXT.red,
            ]);
            quickEl.classList.add(QUICK_TEXT[quickColor] || QUICK_TEXT.green);
            quickEl.textContent = quick;
          });
        });
      })();
    </script>
  </body>
</html>

cmd: