/* ===================================================================
   IVEST AUTO — Diseño de la ficha de cada coche (08/10/2026)
   Solo lo cargan las fichas (tools/build_catalogo.py, FICHA_CSS), después de ui.css: el resto de páginas no cambia.
   - Ordenador (≥ 900 px): contenedor más ancho; galería a la izquierda y resumen (estado, precio, datos esenciales y
     contacto) a la derecha; los detalles debajo, a todo el ancho (ficha técnica compacta y, desde 1100 px, los bloques en
     dos columnas de lectura cómoda). Barra de contacto pegada abajo al bajar (ficha.js la esconde mientras se ven la caja
     del precio o el formulario).
   - Tableta (721–899 px): una columna, sin la barra inferior del móvil: la barra de contacto de la ficha.
   - Móvil (≤ 720 px): una columna (título, fotos, precio, datos esenciales, contacto); barra inferior de conv.js
     (Llamar · WhatsApp · Me interesa) con su hueco reservado; ficha.js pliega los detalles extensos (se pueden abrir
     varios a la vez). Sin JavaScript, todo abierto.
   styles.css sigue congelado. Colores y tipografías: las variables de siempre.
   =================================================================== */

:root { --ficha-maxw: 1520px; }

/* Toda la página de la ficha (cabecera, migas, contenido y pie) con el mismo ancho, para que los bordes coincidan */
body:has(.ficha-seccion) .container { max-width: var(--ficha-maxw); }

/* ---------- Resumen: estado, precio, datos esenciales y contacto ---------- */
/* Botones según el ancho del propio resumen (no de la ventana): si «Llamar · 629 00 81 67» no cabe en medio botón,
   «Llamar» y «Me interesa» van uno encima del otro, a todo el ancho, con el número entero */
.ficha-caja { container-type: inline-size; }
.ficha-caja .ficha-acciones .btn { min-width: 0; }
@container (max-width: 440px) {
  .ficha-caja .ficha-acciones { grid-template-columns: minmax(0, 1fr); }
}
.ficha-caja .ficha-clave { margin: 8px 0 0; color: var(--muted); font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.ficha-caja .ficha-precio + .nota { margin-top: 2px; }

/* Compra online en la caja del precio: compra-ficha.js le pone en línea el margen pensado para el formulario (0 0 22px) */
.ficha-caja .compra-online { margin: 16px 0 0 !important; }
.ficha-caja .compra-online .nota { margin: 6px 0 0; }
.ficha-caja .compra-online .form-status { margin: 0; }

/* ---------- Ficha técnica («Datos de la unidad»): junto al resumen; en una columna, justo después del precio ---------- */
.ficha-datos { grid-area: datos; min-width: 0; margin-top: 0; }
@media (max-width: 899px) {
  .ficha-grid { grid-template-areas: "media" "caja" "datos" "info"; }
}
@media (min-width: 560px) and (max-width: 899px) {
  /* Tableta en vertical: la ficha técnica aprovecha el ancho */
  .ficha-specs { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); column-gap: 20px; }
}

/* ---------- Detalles: textos con un ancho cómodo de lectura ---------- */
.ficha-info .ficha-bloque p, .ficha-info .ficha-bloque ul, .ficha-solicitud > .nota { max-width: 75ch; }

/* ---------- Ordenador y tableta horizontal: dos columnas arriba, detalles debajo a todo el ancho ---------- */
@media (min-width: 900px) {
  .ficha-grid {
    /* Foto principal (4:3, sin recortar) y su tira de miniaturas en la primera pantalla: la columna de la galería mide
       como mucho lo que deja la altura de la ventana; el resumen ocupa el resto (nunca menos de 320 px) */
    /* y nunca más del 62 % del ancho (pantallas altas): el resumen no queda estrecho (mínimo 340 px) */
    grid-template-columns: minmax(0, min(calc((100vh - 290px) * 4 / 3), 62%)) minmax(340px, 1fr);
    grid-template-columns: minmax(0, min(calc((100svh - 290px) * 4 / 3), 62%)) minmax(340px, 1fr);
    /* La galería ocupa las dos primeras filas; a su derecha, el resumen y debajo la ficha técnica. La fila flexible
       recoge la diferencia de altura: entre el resumen y la ficha técnica no queda hueco */
    grid-template-areas: "media caja" "media datos" "info info";
    grid-template-rows: auto 1fr auto;
    gap: 24px 40px;
  }
  .ficha-media { align-self: start; }
  .ficha-datos { align-self: start; }
  .ficha-datos h2 { margin-bottom: 4px; }
  /* La caja ya no recorre toda la página (los detalles van a todo el ancho): el contacto al bajar lo da la barra */
  .ficha-caja { position: static; }
  .ficha-caja { padding: 26px 28px; }
  .ficha-caja .ficha-precio { font-size: 2.6rem; }
  .ficha-specs { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); column-gap: 20px; }
  .ficha-specs div { padding: 9px 0; }
  .ficha-info { margin-top: 8px; padding-top: 28px; border-top: 1px solid var(--line); }
  .ficha-solicitud > *:not(h2):not(.nota) { max-width: 880px; }
}
@media (min-width: 1100px) {
  /* Los bloques de detalle, en dos columnas que se reparten la altura; la ficha técnica y el formulario, a todo el ancho */
  .ficha-info { columns: 2; column-gap: 56px; }
  .ficha-info > .ficha-bloque { break-inside: avoid; margin: 0 0 30px; }
  .ficha-info > .ficha-bloque:first-child { margin-top: 0; }
  .ficha-info > .ficha-solicitud { column-span: all; }
  .ficha-info > .ficha-solicitud { margin-top: 8px; }
}

/* ---------- Barra de contacto al bajar (tableta y ordenador) ---------- */
.ficha-barra {
  position: sticky; bottom: 0; z-index: 60; margin-top: 24px;
  background: rgba(10,10,12,.97); border-top: 1px solid var(--line);
  transition: transform .2s ease, opacity .2s ease, visibility .2s;
}
.ficha-barra.ficha-barra--oculta { transform: translateY(100%); opacity: 0; visibility: hidden; }
.ficha-barra-in { display: flex; align-items: center; gap: 10px; padding-block: 10px; }
.ficha-barra-coche { flex: 1 1 auto; min-width: 0; margin: 0; display: flex; align-items: baseline; gap: 12px; }
.ficha-barra-titulo {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-family: "Space Grotesk", sans-serif; font-weight: 600; color: var(--text);
}
.ficha-barra-precio { flex: none; white-space: nowrap; font-family: "Space Grotesk", sans-serif; font-size: 1.15rem; font-weight: 700; }
.ficha-barra .btn { flex: none; min-height: 44px; padding: 10px 18px; white-space: nowrap; }
.ficha-barra-num { display: none; }
@media (min-width: 1280px) { .ficha-barra-num { display: inline; } }
@media (min-width: 721px) {
  /* La barra lleva WhatsApp: sobra el botón flotante. El foco del teclado no queda detrás de la barra (WCAG 2.4.11) */
  body:has(.ficha-barra) .wa-float { display: none; }
  html:has(.ficha-barra) { scroll-padding-bottom: 84px; }
}
@media (max-width: 860px) and (min-width: 721px) {
  .ficha-barra-precio { display: none; }
}
@media (max-width: 720px) {
  /* En el móvil, la barra inferior de conv.js */
  .ficha-barra { display: none; }
}
@media print { .ficha-barra { display: none !important; } }

/* ---------- Móvil: detalles extensos plegables (ficha.js); varios abiertos a la vez ---------- */
.ficha-plegar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%;
  min-height: 48px; margin: 0; padding: 10px 0; border: 0; background: none; color: var(--text);
  font: inherit; text-align: left; cursor: pointer;
}
.ficha-plegar::after {
  content: ""; flex: none; width: 10px; height: 10px; margin-right: 6px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-3px); transition: transform .15s ease;
}
.ficha-plegar[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-3px); }
.ficha-plegar:focus-visible { outline: 3px solid #fff; outline-offset: 2px; border-radius: 4px; }
.ficha-bloque[data-plegable] h2:has(.ficha-plegar) { margin-bottom: 0; }
.ficha-bloque[data-plegable]:has(.ficha-plegar) { border-top: 1px solid var(--line); margin-top: 0; padding-top: 2px; }
.ficha-plegable-cuerpo { padding-bottom: 14px; }
@media (prefers-reduced-motion: reduce) {
  .ficha-barra, .ficha-plegar::after { transition: none; }
}