/* ============================================================
   VARIABLES & RESET
   ============================================================ */
:root {
  --naranja:     #F2711C;
  --naranja-osc: #d45e0e;
  --verde:       #21BA45;
  --oscuro:      #2a2a2a;
  --medio:       #4c4c4c;
  --gris-claro:  #f5f5f5;
  --gris-borde:  #e0e0e0;
  --blanco:      #ffffff;
  --texto-suave: #888888;
  --radio:       6px;
  --sombra:      0 2px 12px rgba(0,0,0,0.08);
  --sombra-hover:0 4px 20px rgba(0,0,0,0.14);
  --trans:       0.2s ease;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; color: var(--medio); background: var(--gris-claro); font-size: 14px; max-width: 1100px; margin: 0 auto; }
a { text-decoration: none; color: inherit; }

/* ============================================================
   BOTONES TIPO VEHÍCULO
   ============================================================ */
.vehiculos {
  background: var(--blanco);
  border-bottom: 1px solid var(--gris-borde);
}
/* Centrar todo el bloque de botones */
.vehiculos > .boton-vehiculo { display: none; } /* se usan como pills, ver abajo */
.selector-vehiculo {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 14px 20px;
}
.boton-vehiculo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--medio);
  padding: 8px 22px;
  width: auto;
  min-width: 120px;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  border: 2px solid var(--gris-borde);
  border-radius: 30px;
  background: var(--blanco);
  transition: all var(--trans);
}
.boton-vehiculo:hover {
  border-color: var(--naranja);
  color: var(--naranja);
  background: rgba(242,113,28,0.05);
}
.btn-select {
  border-color: var(--naranja);
  color: var(--naranja);
  background: rgba(242,113,28,0.08);
  font-weight: 700;
}
.btn-left, .btn-right { float: none; }
.iconv { display: none; }
.textv { display: inline; }

/* ============================================================
   BARRA DE FECHAS
   ============================================================ */
.cont-fechas {
  background: var(--oscuro);
  padding: 14px 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}
.fechas-lista {
  display: flex;
  flex-direction: column;
  flex: 1 1 200px;
  min-width: 190px;
}
.fechas-lista.end {
  flex: 0 0 auto;
  align-self: flex-end;
}
.label-lista {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: rgba(255,255,255,0.55);
  margin-bottom: 5px;
}
/* Contenedor fecha + hora dentro de cada campo */
#rangestart, #rangeend {
  display: flex;
  gap: 5px;
}
#rangestart .fecha,
#rangeend .fecha {
  flex: 0 0 55%;
  min-width: 0;
  display: block;
  background: var(--blanco) !important;
  border: none;
  border-radius: var(--radio);
  font-size: 12px;
  height: 36px;
  padding: 0 6px;
}
#rangestart .hora,
#rangeend .hora {
  flex: 0 0 calc(45% - 5px);
  min-width: 0;
  display: block;
  border: none;
  border-radius: var(--radio);
  font-size: 12px;
  height: 36px;
  padding: 0 4px;
  background: var(--blanco);
  margin-left: 0;
}
/* Selects de lugar (recogida/devolución) */
.fechas-lista .pickup {
  border: none;
  border-radius: var(--radio);
  font-size: 13px;
  height: 36px;
  padding: 0 8px;
  background: var(--blanco);
}
.btn-fechas {
  background: var(--naranja);
  color: var(--blanco);
  font-weight: 700;
  border: none;
  border-radius: var(--radio);
  height: 36px;
  width: 140px;
  font-size: 13px;
  cursor: pointer;
  transition: background var(--trans), transform var(--trans);
  white-space: nowrap;
}
.btn-fechas:hover { background: var(--naranja-osc); transform: translateY(-1px); }

/* ============================================================
   ALERTA
   ============================================================ */
.alerta { display: none; }
.alerthoras {
  background-color: rgba(255,230,200,0.95) !important;
  color: rgb(241,131,2) !important;
  font-weight: bold;
  border-color: rgb(241,131,2) !important;
}

/* ============================================================
   CONTENEDOR GENERAL
   ============================================================ */
.cont-general { background: var(--gris-claro); min-height: 100%; padding: 20px 0; }
.cont-lista { width: 100%; }
.lista {
  width: 1020px;
  max-width: 100%;
  background: var(--blanco);
  margin: auto;
  padding: 20px;
  box-shadow: var(--sombra);
  border-radius: var(--radio);
}

/* ============================================================
   TARJETAS DE VEHÍCULO
   ============================================================ */
.vehiculo-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 15px;
  padding: 20px 15px;
  border-bottom: 1px solid var(--gris-borde);
  background: var(--blanco);
  border-radius: var(--radio);
  margin-bottom: 12px;
  box-shadow: var(--sombra);
  transition: box-shadow var(--trans);
}
.vehiculo-lista:hover { box-shadow: var(--sombra-hover); }
.vehiculo-lista:last-child { border-bottom: none; margin-bottom: 0; }

.cont-detalles { flex: 1 1 220px; }
.cont-detalles .imgvehiculo { width: 100%; border-radius: var(--radio); }
.imgvehiculo img { width: 100%; border-radius: var(--radio); }

.modelo { font-size: 15px; font-weight: 700; color: var(--oscuro); margin-bottom: 10px; }
.cont-caract { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.caract-vehiculo { display: flex; align-items: center; gap: 5px; font-weight: 600; font-size: 12px; background: var(--gris-claro); padding: 4px 7px; border-radius: 20px; }
.icon-caract { width: 18px; }

.carnets { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; }
.carnet {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--naranja); height: 30px; width: 30px; font-weight: 700; font-size: 12px;
  border: 2px solid var(--naranja); border-radius: 50%;
}

/* Precios */
.cont-precio { background: var(--gris-claro); border-radius: var(--radio); padding: 12px 15px; margin-bottom: 8px; }
.tipopago { font-weight: 700; font-size: 13px; margin-bottom: 8px; color: var(--oscuro); }
.porcentageoferta { color: var(--verde); font-size: 16px; font-weight: 800; margin-left: 5px; }
.precio-wrap { display: flex; align-items: center; justify-content: space-between; }
.precio { display: flex; flex-direction: column; }
.precio-num { font-size: 16px; font-weight: 800; color: var(--oscuro); }
.original { font-size: 12px; text-decoration: line-through; color: var(--texto-suave); }
.btn-reservar {
  background: var(--naranja); color: var(--blanco); font-weight: 700;
  border: none; border-radius: var(--radio); padding: 8px 16px; font-size: 13px;
  cursor: pointer; transition: background var(--trans), transform var(--trans);
  white-space: nowrap;
}
.btn-reservar:hover { background: var(--naranja-osc); transform: translateY(-1px); }
.oferta { background: var(--verde) !important; }
.oferta:hover { background: #1a9e3a !important; }
.sinfechas { font-weight: 700; color: var(--naranja); padding: 20px 0; text-align: center; }

/* ============================================================
   LAYOUT EXTRAS / DATOS PERSONALES (2 columnas)
   ============================================================ */
.lista.flex { display: flex; flex-wrap: wrap; gap: 20px; padding: 20px; }
.cont-info { width: 28%; min-width: 240px; flex-shrink: 0; }
.cont-tye  { flex: 1; min-width: 280px; }

/* Panel lateral oscuro */
.infovehiculo {
  border-radius: var(--radio);
  overflow: hidden;
  background: var(--oscuro);
  color: var(--blanco);
  box-shadow: var(--sombra);
}
.infovehiculo .imgvehiculo { background: var(--blanco); padding: 20px; }
.infovehiculo .imgvehiculo img { width: 100%; border-radius: var(--radio); }
.contenido-info { padding: 18px; }
.veh-titulo { font-size: 14px; font-weight: 700; margin-bottom: 14px; line-height: 1.3; }

.info-bloque { border-top: 1px solid rgba(255,255,255,0.12); padding-top: 12px; margin-bottom: 14px; }
.info-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.info-row i { margin-top: 3px; font-size: 16px; flex-shrink: 0; }
.tituinf { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 2px; color: rgba(255,255,255,0.6); }
.fechinf span { font-size: 13px; }
.fecha-hora { font-size: 12px; color: rgba(255,255,255,0.65); }

.sidebar-actions { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.btn-cambio {
  width: 100%; background: var(--naranja); color: var(--blanco);
  border: none; border-radius: var(--radio); padding: 9px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background var(--trans);
}
.btn-cambio:hover { background: var(--naranja-osc); }
.btn-condiciones {
  background: transparent; border: none; color: rgba(255,255,255,0.75);
  font-size: 13px; font-weight: 600; text-align: left; padding: 4px 0; cursor: pointer;
  transition: color var(--trans);
}
.btn-condiciones:hover { color: var(--blanco); }
.ifrminfo { width: 100%; height: 50%; border: none; }

/* ============================================================
   SECCIÓN HEADER (extras / personales)
   ============================================================ */
.section-header { margin-bottom: 16px; border-bottom: 2px solid var(--gris-borde); padding-bottom: 12px; }
.section-header h1 { font-size: 18px; font-weight: 800; color: var(--oscuro); }

/* Incluidos */
.incluidos-box { background: var(--gris-claro); border-radius: var(--radio); padding: 14px 18px; margin-bottom: 10px; }
.incluidos-subtitle { font-size: 13px; color: var(--texto-suave); margin-bottom: 8px; }
.check-item { font-size: 13px; margin-bottom: 5px; display: flex; align-items: flex-start; gap: 6px; }
.check-item i { margin-top: 2px; flex-shrink: 0; }

/* Cabecera de categoría de extras */
.h2extras {
  background: var(--naranja); color: var(--blanco);
  padding: 8px 16px; margin: 16px 0 10px;
  border-radius: var(--radio);
}
.h2extras h2 { font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 700; }

/* Caja de extra individual */
.boxextra {
  display: flex; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--gris-borde); border-radius: var(--radio);
  padding: 10px 14px; margin-bottom: 8px; gap: 8px;
  background: var(--blanco); transition: border-color var(--trans);
}
.boxextra:hover { border-color: var(--naranja); }
.contbox { min-width: 60px; }
.nomextra { flex: 1 1 160px; font-size: 13px; font-weight: 600; word-break: break-word; }
.masinfextras { margin-top: 3px; }
.popupex { color: var(--naranja); font-size: 11px; font-weight: 700; cursor: pointer; }
.popupex:hover { text-decoration: underline; }
.cobroextra { color: var(--naranja); font-size: 12px; text-align: center; }
.prextra { text-align: center; font-weight: 700; font-size: 14px; }
.checkextra { text-align: right; }
.chkbxexts { width: 18px; height: 18px; accent-color: var(--naranja); cursor: pointer; }

/* ============================================================
   RESUMEN DE PRECIOS
   ============================================================ */
.precio-resumen {
  background: var(--gris-claro); border-radius: var(--radio);
  padding: 18px 20px; margin-top: 20px;
  border: 1px solid var(--gris-borde);
}
.precio-fila {
  display: flex; justify-content: space-between; align-items: center;
  padding: 8px 0; border-bottom: 1px solid var(--gris-borde); font-size: 14px;
}
.precio-fila:last-of-type { border-bottom: none; }
.descuento-row { background: rgba(33,186,69,0.07); border-radius: 4px; padding: 8px 6px; color: var(--verde); }
.precio-total-row { font-size: 15px; font-weight: 800; color: var(--oscuro); padding-top: 12px; }
.impuesto { font-size: 11px; color: var(--texto-suave); margin: 6px 0 14px; }
.contbtn { text-align: center; margin-top: 10px; }
.btn-siguiente {
  background: var(--naranja); color: var(--blanco); border: none;
  border-radius: var(--radio); padding: 9px 30px; font-size: 14px; font-weight: 700;
  cursor: pointer; transition: background var(--trans), transform var(--trans);
  min-width: 200px;
}
.btn-siguiente:hover { background: var(--naranja-osc); transform: translateY(-1px); }
.btn-pago { background: var(--verde) !important; }
.btn-pago:hover { background: #1a9e3a !important; }

/* ============================================================
   FORMULARIO DATOS PERSONALES
   ============================================================ */
.form-grupo { margin-bottom: 16px; }
.form-grupo-fila { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.width3 { flex: 1 1 calc(33% - 10px); min-width: 120px; }
.width2 { flex: 1 1 calc(50% - 10px); min-width: 160px; }
.padlateral { padding: 0 5px; }
.form-control { border-radius: var(--radio); border: 1px solid var(--gris-borde); }
.form-control:focus { border-color: var(--naranja); outline: none; box-shadow: 0 0 0 3px rgba(242,113,28,0.15); }
.textarea { resize: vertical; width: 100%; height: 130px; max-height: 400px; padding: 10px; }
.datosvuelo { display: none; }
.continp { display: flex; flex-wrap: wrap; gap: 10px; }

/* ============================================================
   UTILIDADES
   ============================================================ */
.fila { margin-top: 14px; min-height: 18px; }
.line { display: inline-block; vertical-align: top; }
.line-middle { display: inline-block; vertical-align: middle; }
.end { text-align: right !important; }
.mar-right { margin-right: 20px; }
.flex { display: flex; flex-wrap: wrap; }
.red { color: #f40000; }
.gray { color: var(--texto-suave); }
.orange { color: var(--naranja); }
.center { text-align: center; }

/* Buscador standalone */
.buscador { width: 50%; margin: auto; padding-top: 10%; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1050px) {
  .lista { width: 100%; border-radius: 0; }
  .buscador { width: 90%; }
  .cont-fechas { flex-wrap: wrap; }
  .fechas-lista { flex: 1 1 45%; }
}

@media (max-width: 855px) {
  .lista.flex { flex-direction: column-reverse; }
  .cont-info { width: 100%; }
  .cont-tye { width: 100%; }
  .width3 { flex: 1 1 100%; }
}

@media (max-width: 640px) {
  .cont-detalles { display: block; width: 100%; }
  .vehiculo-lista { flex-direction: column; }
  .cont-fechas { flex-direction: column; padding: 12px; }
  .fechas-lista { flex: 1 1 100%; min-width: 100%; }
  .fechas-lista.end { width: 100%; }
  .btn-fechas { width: 100%; }
  .boton-vehiculo { font-size: 13px; padding: 14px 5px; }
  .iconv { display: inline-block; margin-right: 4px; }
  .textv { display: none; }
  .width2 { flex: 1 1 100%; }
  .precio-resumen { padding: 14px; }
}

@media (max-width: 450px) {
  .lista { padding: 12px; }
  .contenido-info { padding: 12px; }
}