@charset "utf-8";
/* ============================================================
   Autos · Rediseño UX/UI moderno (estilo Apple mx-edu)
   Skin compartido para index / resultados / checkout.
   Se carga DESPUÉS del CSS base de cada página.
   Incluye tema del calendario Flatpickr (igual que tours).
   ============================================================ */

:root{
  --ap-bg:#f5f5f7;
  --ap-card:#ffffff;
  --ap-ink:#1d1d1f;
  --ap-muted:#6e6e73;
  --ap-line:#e3e3e6;
  --ap-blue:#1E90FF;
  --ap-blue-d:#0a6fe0;
  --ap-tqz:#17c3d4;
  --ap-font:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif;
}

*{ font-family:var(--ap-font); }
body{ background:var(--ap-bg); color:var(--ap-ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }

/* ---------- Header / navegación ---------- */
#header{ background:rgba(255,255,255,.9) !important; backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px); box-shadow:none !important; border-bottom:1px solid var(--ap-line) !important; }
/* #top transparente para que el hero video se vea detrás del bottomHeader.
   Solo la topHeader (logo + sesión) lleva fondo blanco. */
#top{ background:transparent !important; border-bottom:none !important; position:relative; z-index:1; }
.topHeader{ background:#fff !important; }
.bottomHeader{ background:transparent !important; }
.nameLogotype{ color:var(--ap-ink) !important; font-weight:600 !important; letter-spacing:-.5px; }
a.dropbtn{ color:var(--ap-ink) !important; font-weight:500 !important; }
/* Botones del menú (topbottom): fondo transparente, sin borde, texto blanco;
   al hover el texto se pone azul turquesa */
a.menuIconsItem,
a.menuIconsItem:hover{
  background:transparent !important;
  background-color:transparent !important;
  border:none !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  color:#fff !important;
}
a.menuIconsItem p{ color:#fff !important; transition:color .2s ease; }
a.menuIconsItem:hover,
a.menuIconsItem:hover p{ color:var(--ap-tqz) !important; }
.topHeaderItem{ background:var(--ap-card) !important; border:1px solid var(--ap-line) !important; box-shadow:none !important; border-radius:12px !important; }
.topHeaderItem p{ color:var(--ap-ink) !important; }

/* ---------- Sección de búsqueda ---------- */
.index{ background:var(--ap-bg) !important; background-image:none !important; padding:48px 16px 64px !important; }
.index h1,.index h2{ color:var(--ap-ink) !important; text-transform:none !important; letter-spacing:-.4px !important; font-weight:600 !important; }

/* Card del formulario de búsqueda */
#consultaForm{
  background:var(--ap-card) !important;
  border:1px solid var(--ap-line) !important;
  border-radius:20px !important;
  box-shadow:0 18px 50px rgba(0,0,0,.08) !important;
  max-width:560px;
  padding:30px 30px 34px !important;
}
#consultaForm label{
  color:var(--ap-muted) !important;
  text-transform:none !important;
  letter-spacing:0 !important;
  font-size:13px !important;
  font-weight:500 !important;
  margin-top:16px;
}
#consultaForm input[type="text"],
#consultaForm input[type="datetime-local"],
#consultaForm .input-wrapper input,
#consultaForm select{
  border:1px solid var(--ap-line) !important;
  border-radius:12px !important;
  color:var(--ap-ink) !important;
  background:#fff !important;
  font-family:var(--ap-font) !important;
  font-size:16px !important;
  padding:14px 14px !important;
  box-sizing:border-box;
}
#consultaForm input:focus,
#consultaForm select:focus{
  outline:none !important;
  border-color:var(--ap-blue) !important;
  box-shadow:0 0 0 4px rgba(30,144,255,.15) !important;
}
/* Usamos placeholder real del input; ocultamos el label simulado */
.placeholder-label{ display:none !important; }

/* Fila de selects de hora (hora / minuto / AM-PM) */
.time-row{ display:flex; gap:10px; margin-top:10px; }
.time-row select{ flex:1 1 0; min-width:0; }

/* Nota de las reglas de renta (24 h por día) */
.rent-note{ display:block; color:var(--ap-muted); font-size:13px; line-height:1.45; margin-top:12px; }

#consultaForm button{
  display:inline-flex !important; align-items:center; justify-content:center;
  width:100%;
  background:var(--ap-blue) !important;
  color:#fff !important;
  border:none !important;
  border-radius:980px !important;
  letter-spacing:0 !important;
  text-transform:none !important;
  font-size:16px !important;
  font-weight:600 !important;
  padding:14px 40px !important;
  margin-top:24px;
  cursor:pointer;
  transition:background .25s ease, transform .2s ease !important;
}
#consultaForm button:hover{ background:var(--ap-blue-d) !important; transform:translateY(-1px) !important; }

/* Resumen de fechas */
#resumenFechas{
  background:var(--ap-card) !important;
  border:1px solid var(--ap-line) !important;
  border-radius:20px !important;
  box-shadow:0 12px 40px rgba(0,0,0,.06) !important;
}
#resumenFechas h2{ color:var(--ap-ink) !important; text-transform:none !important; letter-spacing:-.3px !important; font-weight:600 !important; }
#resumenFechas p{ color:var(--ap-muted) !important; }
#btnCambiar{
  background:var(--ap-blue) !important; color:#fff !important;
  border:none !important; border-radius:980px !important;
  letter-spacing:0 !important; text-transform:none !important; font-size:14px !important; font-weight:600 !important;
  padding:12px 28px !important; cursor:pointer;
}
#btnCambiar:hover{ background:var(--ap-blue-d) !important; }

/* ---------- Cards de resultados (auto) ---------- */
.car-card{
  background:var(--ap-card) !important;
  border:1px solid var(--ap-line) !important;
  border-radius:18px !important;
  box-shadow:0 12px 34px rgba(0,0,0,.06) !important;
  overflow:hidden !important;
  transition:transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s ease, border-color .35s ease !important;
}
.car-card:hover{ transform:translateY(-4px); box-shadow:0 22px 54px rgba(0,0,0,.1) !important; border-color:rgba(30,144,255,.35) !important; }
.car-card h3{ color:var(--ap-ink) !important; font-weight:600 !important; letter-spacing:-.3px !important; }
.car-card p{ color:#333 !important; }
.car-card .price{ background:var(--ap-bg) !important; color:var(--ap-ink) !important; font-weight:600 !important; letter-spacing:-.2px !important; }
.select-btn{
  background:var(--ap-blue) !important; color:#fff !important;
  border:none !important; border-radius:980px !important;
  letter-spacing:0 !important; text-transform:none !important; font-size:14px !important; font-weight:600 !important;
  transition:background .25s ease !important;
}
.select-btn:hover{ background:var(--ap-blue-d) !important; }

/* ---------- Footer / carrito ---------- */
.footer{ background:var(--ap-bg) !important; border:1px solid var(--ap-line); border-radius:18px !important; }
.title{ color:var(--ap-ink) !important; font-weight:600 !important; }
.box_footer_son a{ color:var(--ap-blue) !important; }
/* Carrito flotante: usa el estilo teal/goldenrod global (igual que el inicio) */

/* Accesos rápidos (products) */
.item1{ border-radius:16px !important; overflow:hidden; }

/* ============================================================
   FLATPICKR — tema (réplica del calendario de tours), con hora
   ============================================================ */
.flatpickr-calendar{
  border-radius:16px !important;
  border:1px solid var(--ap-line) !important;
  box-shadow:0 20px 55px rgba(0,0,0,.18) !important;
  padding:6px !important;
  font-family:var(--ap-font) !important;
}
.flatpickr-current-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year{ color:var(--ap-ink) !important; font-weight:600 !important; }
.flatpickr-months .flatpickr-month{ color:var(--ap-ink) !important; }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg{ fill:var(--ap-ink) !important; }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg{ fill:var(--ap-blue) !important; }
span.flatpickr-weekday{ color:var(--ap-muted) !important; font-weight:600 !important; }
.flatpickr-day{ border-radius:50% !important; color:var(--ap-ink); font-weight:500; }
.flatpickr-day:hover,
.flatpickr-day:focus{ background:var(--ap-bg) !important; border-color:transparent !important; }
.flatpickr-day.today{ border-color:var(--ap-blue) !important; }
.flatpickr-day.selected,
.flatpickr-day.selected:hover{ background:var(--ap-blue) !important; border-color:var(--ap-blue) !important; color:#fff !important; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{ color:#c7c7cc !important; }
/* Selector de hora */
.flatpickr-time input:hover,
.flatpickr-time input:focus{ background:var(--ap-bg) !important; }
.flatpickr-time .flatpickr-am-pm:hover{ background:var(--ap-bg) !important; }
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm{ color:var(--ap-ink) !important; }

/* ============================================================
   PRODUCTS - el titulo nunca debe salirse del tile
   (banda inferior centrada, con wrap, en TODOS los tamanos)
   ============================================================ */
.item1{ position:relative !important; overflow:hidden !important; }
.item1 p{
  position:absolute !important;
  left:8px !important; right:8px !important; bottom:10px !important; top:auto !important;
  width:auto !important; max-width:calc(100% - 16px) !important;
  margin:0 !important; padding:6px 10px !important; box-sizing:border-box !important;
  text-align:center !important;
  font-size:clamp(14px,2vw,24px) !important; line-height:1.15 !important;
  overflow-wrap:break-word !important; word-break:break-word !important; hyphens:auto;
  color:#fff !important; background:rgba(0,0,0,.45) !important; border-radius:12px !important;
}
/* Tablet (vertical y horizontal): version movil, 2 por fila */
@media (max-width:1024px){
  .item1{ flex:2 2 calc(50% - 10px) !important; }
  .item1 p{ font-size:clamp(14px,2.6vw,20px) !important; }
}
/* Smartphone: 1 por fila */
@media (max-width:600px){
  .item1{ flex:1 1 100% !important; height:170px !important; }
  .item1 p{ font-size:18px !important; }
}