/* ─────────────────────────────────────────────────────────────────────────────
   Panel lateral y visor de fotos.

   El panel se abre encima de la lista sin perderla: quien revisa 40 leads no
   debería tener que volver atrás y buscar dónde estaba después de cada uno.
   En pantalla angosta entra desde abajo, que es de donde el pulgar lo puede
   cerrar; en escritorio entra por la derecha.

   Todo esto es mejora encima de un enlace que ya funciona: sin JavaScript,
   tocar una tarjeta sigue abriendo /leads/{id} como una página normal.
   ───────────────────────────────────────────────────────────────────────────── */

.panel-fondo {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .55);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
  z-index: 40;
}
.panel-fondo.abierto { opacity: 1; pointer-events: auto; }
/* En escritorio se puede seguir usando la lista con el panel abierto: el
   fondo no intercepta los clics, solo sirve de capa. */
@media (min-width: 900px) { .panel-fondo { pointer-events: none !important } }

.panel-lat {
  position: fixed;
  z-index: 41;
  background: var(--fon, #0B1220);
  border: 1px solid var(--lin);
  display: flex;
  flex-direction: column;
  /* La transición se hace sobre `transform`, no sobre `right`/`bottom`: el
     navegador la puede mover sin recalcular el diseño en cada cuadro. */
  transition: transform .24s cubic-bezier(.2, .8, .2, 1);
  overscroll-behavior: contain;
}

/* Escritorio: entra por la derecha, y la lista se CORRE a la izquierda en vez
   de quedar tapada. Es el motivo por el que Duke lo pidió así: mira la ficha
   arriba, decide, y sigue bajando por la lista que nunca dejó de ver.
   Tapar la lista con el panel arruinaría justamente eso. */
@media (min-width: 900px) {
  .panel-lat {
    top: 0; right: 0; bottom: 0;
    width: min(520px, 42vw);
    border-right: 0;
    transform: translateX(100%);
  }
  .panel-lat.abierto { transform: translateX(0); }

  /* La lista no solo se corre: se ENCOGE. Con solo correrla, a 1024 px el
     contenido seguía midiendo 720 y quedaba debajo del panel. Ahora se queda
     con lo que sobra, y el `margin-left: 0` desarma el centrado automático
     que peleaba con el margen de la derecha. */
  body.panel-abierto .env {
    margin-right: min(520px, 42vw);
    margin-left: 0;
    max-width: min(720px, calc(100vw - min(520px, 42vw) - 2.5rem));
    transition: margin-right .24s cubic-bezier(.2, .8, .2, 1),
                max-width .24s cubic-bezier(.2, .8, .2, 1);
  }
  /* Con el panel abierto el fondo no se oscurece en escritorio: la lista tiene
     que quedar legible, que es para lo que está ahí. */
  body.panel-abierto .panel-fondo { background: transparent }
}

/* Móvil: entra desde abajo y deja una franja de la lista arriba, para que se
   vea que sigue ahí y para poder cerrarla tocándola. */
/* Por debajo de 900 px no caben los dos: a 768 la lista quedaría en 240 px,
   que no sirve para nada. Ahí el panel entra desde abajo, como en el
   teléfono, y se cierra con el pulgar o con el botón de atrás. */
@media (max-width: 899px) {
  .panel-lat {
    left: 0; right: 0; bottom: 0;
    height: 86vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
  }
  .panel-lat.abierto { transform: translateY(0); }
}

.panel-barra {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .7rem .9rem;
  border-bottom: 1px solid var(--lin);
  flex: 0 0 auto;
}
.panel-barra b { flex: 1; font-size: .9rem; font-weight: 700; }
.panel-x {
  appearance: none;
  background: var(--sup);
  border: 1px solid var(--lin);
  color: var(--tx);
  width: 34px; height: 34px;
  border-radius: 99px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.panel-cuerpo {
  flex: 1 1 auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0 1rem 2rem;
}
/* El agarre de arrastre en móvil. */
.panel-agarre {
  width: 40px; height: 4px;
  border-radius: 99px;
  background: var(--lin);
  margin: .5rem auto 0;
}
@media (min-width: 900px) { .panel-agarre { display: none } }

.panel-cargando {
  padding: 2rem 1rem;
  text-align: center;
  color: var(--fai);
  font-size: .88rem;
}

/* ── visor de fotos ───────────────────────────────────────────────────────── */

.visor {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .94);
  display: none;
  align-items: center;
  justify-content: center;
  touch-action: pan-y;
}
.visor.abierto { display: flex; }
.visor img {
  max-width: 100vw;
  max-height: 100vh;
  /* `contain`: una cédula o el golpe de un carro no se pueden recortar. */
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}
.visor-x, .visor-ir {
  position: absolute;
  appearance: none;
  background: rgba(255, 255, 255, .12);
  border: 0;
  color: #fff;
  border-radius: 99px;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.visor-x { top: max(1rem, env(safe-area-inset-top)); right: 1rem; width: 42px; height: 42px; font-size: 1.3rem }
.visor-ir { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 1.6rem }
.visor-ant { left: .6rem }
.visor-sig { right: .6rem }
.visor-x:hover, .visor-ir:hover { background: rgba(255, 255, 255, .24) }
.visor-cuenta {
  position: absolute;
  bottom: max(1rem, env(safe-area-inset-bottom));
  left: 0; right: 0;
  text-align: center;
  color: rgba(255, 255, 255, .75);
  font-size: .85rem;
  font-weight: 600;
}
/* En pantalla de dedo las flechas estorban: ahí se pasa deslizando. */
@media (max-width: 899px) { .visor-ir { display: none } }

/* Con el panel o el visor abiertos, el fondo no se mueve. */
body.sin-scroll { overflow: hidden }


/* ─────────────────────────────────────────────────────────────────────────────
   La ficha del lead.

   Vive acá y no en la plantilla porque el panel carga SOLO el fragmento
   (`_lead_cuerpo.html`) y no la plantilla base. Cuando estos estilos estaban
   en el <style> de lead.html, dentro del panel «Kilometraje» y «92,300 km»
   salían pegados y los botones de WhatsApp salían como texto suelto.

   Todo está deliberadamente APRETADO. La primera versión usaba los tamaños de
   una página completa —título de 2rem, botones de 120 px de ancho mínimo,
   fichas con 0,85rem de relleno— y dentro de un panel de 390 px eso se veía
   como una web con la lupa puesta: el título ocupaba dos líneas, los tres
   botones no caían en una fila y «Correo» se caía solo a la siguiente.
   Acá lo que importa es cuánta información entra sin hacer scroll.
   ───────────────────────────────────────────────────────────────────────────── */

/* El regreso es un BOTÓN, no un texto gris de 0,85rem. Era casi invisible y
   en el teléfono además era imposible de acertar: un enlace de una línea de
   texto es un blanco de 18 px de alto. Ahora tiene borde, 40 px de alto y una
   flecha que se ve. */
.volver {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  /* 34 px: se ve y se acierta con el pulgar, pero es navegación y no una
     acción — un botón de 40 px competiría con el WhatsApp de las tarjetas. */
  min-height: 34px;
  padding: .3rem .8rem .3rem .6rem;
  margin: 0 0 .7rem;
  border: 1px solid var(--lin);
  border-radius: 99px;
  background: var(--sup);
  color: var(--tx);
  font-size: .84rem;
  font-weight: 600;
  text-decoration: none;
}
.volver:hover { border-color: var(--ac); color: var(--ac2) }
.volver svg { width: 15px; height: 15px; flex: 0 0 auto }
/* Dentro del panel no va: ahí el marco tiene su propia equis y su arrastre. */
.panel-cuerpo .volver { display: none }

/* El nombre del auto. No es un título de página: el panel ya lo dice arriba. */
.lead-cuerpo h1 {
  font-size: 1.25rem;
  line-height: 1.2;
  margin: .5rem 0 0;
  letter-spacing: -.01em;
}
.lead-cuerpo .sub { font-size: .84rem; margin: .2rem 0 0 }

/* Los tres botones en una sola fila, siempre. Antes eran `flex` con
   `min-width: 120px`, y en 390 px solo caían dos: el tercero se iba solo a
   una línea entera, que es lo que se veía mal. */
.contacto {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .4rem;
  margin: .9rem 0 0;
}
.contacto a {
  text-align: center;
  padding: .6rem .3rem;
  border-radius: var(--r);
  font-weight: 700;
  font-size: .86rem;
  text-decoration: none;
  border: 1px solid var(--lin);
  color: var(--tx);
  white-space: nowrap;
}
.contacto a.wa { background: #25D366; border-color: #25D366; color: #06281a }
/* Con solo dos (sin correo) se reparten el ancho igual. */
.contacto:has(a:nth-child(2):last-child) { grid-template-columns: repeat(2, 1fr) }

/* Dos columnas fijas: con `auto-fit` la última fila quedaba con una ficha
   estirada a lo ancho y se veía desordenado. */
.ficha {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .4rem;
  margin-top: .9rem;
}
.ficha div {
  background: var(--sup);
  border: 1px solid var(--lin);
  border-radius: var(--r);
  padding: .5rem .6rem;
  min-width: 0;
}
.ficha b {
  display: block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--fai);
  margin-bottom: .1rem;
}
/* El correo es largo y no se puede cortar en cualquier parte: ocupa la fila
   entera y parte por el arroba si hace falta. */
.ficha div.ancha { grid-column: 1 / -1 }
.ficha div.ancha, .ficha div { font-size: .88rem; overflow-wrap: anywhere }

.caja {
  background: var(--sup);
  border: 1px solid var(--lin);
  border-radius: var(--r2);
  padding: .7rem .8rem;
  margin-top: .9rem;
}
.caja.wa { border-color: #25D366 }
.caja h3 { margin: 0 0 .25rem; font-size: .84rem }
.caja p { font-size: .82rem !important }

.sen {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  padding: .15rem .45rem;
  border-radius: .3rem;
  background: rgba(255, 120, 110, .16);
  color: #FFB4AC;
  margin: 0 .25rem .25rem 0;
}
.pri {
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .05em;
  padding: .12rem .4rem;
  border-radius: .3rem;
  vertical-align: middle;
}
.pri.ALTA { background: rgba(232, 163, 61, .18); color: #E8A33D }
.pri.MEDIA { background: var(--lin); color: var(--mut) }
.pri.BAJA { background: transparent; color: var(--fai) }

/* Las fotos: la primera grande porque es la que decide si vale la pena mirar
   las otras; el resto en tira de miniaturas. */
.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: .3rem;
  margin: .7rem 0 0;
}
.galeria a {
  aspect-ratio: 4/3;
  border-radius: var(--r);
  overflow: hidden;
  background: var(--lin);
  display: block;
}
.galeria img { width: 100%; height: 100%; object-fit: cover; display: block }
.galeria a:first-child { grid-column: 1 / -1; aspect-ratio: 16/10 }

/* ── el WhatsApp dentro del visor de fotos ───────────────────────────────────
   Mirando las fotos es justo cuando se decide escribir. Bajarse del visor,
   volver a la ficha y buscar el botón es perder el momento. */
.visor-wa {
  position: absolute;
  bottom: max(3.2rem, calc(env(safe-area-inset-bottom) + 3.2rem));
  left: 50%;
  transform: translateX(-50%);
  background: #25D366;
  color: #06281a;
  font-weight: 800;
  font-size: .9rem;
  text-decoration: none;
  padding: .7rem 1.4rem;
  border-radius: 99px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  display: none;
  white-space: nowrap;
}
.visor.abierto .visor-wa[href] { display: block }