/* ===== Estilos globales de AV ===== */

:root {
  --av-shadow-card: 0 4px 16px -4px rgba(0, 0, 0, .35);
  --av-shadow-hover: 0 10px 28px -6px rgba(0, 0, 0, .5);
  --av-shadow-nav: 0 -2px 24px -8px rgba(0, 0, 0, .5);
}

body {
  font-family: "Plus Jakarta Sans", Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .font-display {
  font-family: "Clash Display", "Plus Jakarta Sans", system-ui, sans-serif;
}
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Efecto "pulsado" para botones de acción (Buscar, Vender, CTA principales) */
.btn-press { transition: transform .08s ease, filter .15s ease; }
.btn-press:hover { filter: brightness(1.1); }
.btn-press:active { transform: scale(.95); }

/* Transiciones suaves globales */
a, button, input, select, textarea, .av-card {
  transition: color .2s ease, background-color .2s ease, transform .2s ease,
              box-shadow .2s ease, border-color .2s ease;
}

/* Sombras de marca */
.shadow-card { box-shadow: var(--av-shadow-card); }
.shadow-cardHover { box-shadow: var(--av-shadow-hover); }
.shadow-nav { box-shadow: var(--av-shadow-nav); }

/* Tarjeta de anuncio */
.av-card:hover { box-shadow: var(--av-shadow-hover); transform: translateY(-2px); }
.av-card:active { transform: scale(.985); }
.av-card img { transition: transform .3s ease, opacity .2s ease; }
.av-card:hover .av-card-media:not([data-carousel]) img { transform: scale(1.05); }

/* ----- Vistas del listado (rejilla / lista / compacto) ----- */
/* Compacto: rejilla más densa (más columnas) */
.av-results[data-view="compact"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
}
@media (min-width: 640px) { .av-results[data-view="compact"] { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .av-results[data-view="compact"] { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1280px) { .av-results[data-view="compact"] { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.av-results[data-view="compact"] .av-card-body { padding: .5rem; }
.av-results[data-view="compact"] .av-card-cmp { display: none; }

/* Lista: una columna, tarjeta horizontal (miniatura izq + datos der) */
.av-results[data-view="list"] {
  grid-template-columns: minmax(0, 1fr);
  gap: .625rem;
}
.av-results[data-view="list"] .av-card-link { display: flex; align-items: stretch; }
.av-results[data-view="list"] .av-card-media {
  aspect-ratio: 1 / 1;
  width: 7rem;
  flex: 0 0 7rem;
}
@media (min-width: 640px) {
  .av-results[data-view="list"] .av-card-media { width: 10rem; flex-basis: 10rem; }
}
.av-results[data-view="list"] .av-card-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .25rem;
}
.av-results[data-view="list"] .av-card-title {
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* En lista mostramos las métricas (vistas / favoritos) */
.av-results[data-view="list"] .av-card-stats { display: inline-flex; }
/* Las flechas/puntos del carrusel no caben en la miniatura de lista */
.av-results[data-view="list"] .av-car-btn,
.av-results[data-view="list"] .av-car-dots { display: none; }

/* ----- Barra de precio: doble range superpuesto (estilo Wallapop) ----- */
.av-range-dual { position: relative; height: 1.5rem; }
/* Pista base y relleno del tramo seleccionado */
.av-range-dual .av-range-track,
.av-range-dual .av-range-fill {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: .4rem; border-radius: 9999px; pointer-events: none;
}
.av-range-dual .av-range-track { left: 0; right: 0; background: oklch(var(--bc) / .18); }
.av-range-dual .av-range-fill { background: oklch(var(--p)); }
/* Ambos inputs ocupan el mismo carril; solo el thumb captura el puntero */
.av-range-dual input[type="range"] {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  margin: 0; padding: 0; background: none; -webkit-appearance: none; appearance: none;
  pointer-events: none; --range-shdw: transparent;
}
.av-range-dual input[type="range"]::-webkit-slider-runnable-track { background: transparent; height: 100%; }
.av-range-dual input[type="range"]::-moz-range-track { background: transparent; height: 100%; }
.av-range-dual input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto;
  width: 1.1rem; height: 1.1rem; border-radius: 9999px;
  background: oklch(var(--p)); border: 2px solid oklch(var(--b1));
  box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: grab;
}
.av-range-dual input[type="range"]::-moz-range-thumb {
  pointer-events: auto; width: 1.1rem; height: 1.1rem; border-radius: 9999px;
  background: oklch(var(--p)); border: 2px solid oklch(var(--b1));
  box-shadow: 0 1px 4px rgba(0,0,0,.4); cursor: grab;
}
.av-range-dual input[type="range"]:active::-webkit-slider-thumb { cursor: grabbing; }

/* ----- Desplegables de filtros: centrar la flecha con el título ----- */
/* DaisyUI ancla la flecha de collapse-arrow a una posición fija desde
   arriba; con un summary compacto queda más baja que el texto. La
   recolocamos al centro vertical real del título. */
.collapse-arrow > .collapse-title:after {
  top: 50%;
  inset-inline-end: 1.1rem;
  transform: translateY(-50%) rotate(45deg);
}
.collapse-arrow > input[type="checkbox"]:checked ~ .collapse-title:after,
.collapse-arrow > input[type="radio"]:checked ~ .collapse-title:after,
details.collapse-arrow[open] > .collapse-title:after {
  transform: translateY(-50%) rotate(225deg);
}

/* Iconos de la barra de navegación: al pasar el ratón, fondo del color
   principal del tema, icono en blanco y ligero zoom. Usa tokens DaisyUI. */
.nav-icon { transition: background-color .2s ease, color .2s ease, transform .2s ease; }
.nav-icon:hover,
.nav-icon:focus-visible {
  background-color: oklch(var(--p));
  color: oklch(var(--pc));
  transform: scale(1.1);
}
/* El icono "Chollos" arranca en color secundario; al hover pasa a blanco */
.nav-icon:hover :where(svg, i),
.nav-icon:focus-visible :where(svg, i) { color: oklch(var(--pc)); }

/* ----- Paneles desplegables del navbar (notificaciones / cuenta) en MÓVIL -----
   En móvil (< 640px) el panel debe quedar SIEMPRE dentro del viewport, con
   márgenes iguales a ambos lados, y nunca más ancho que la pantalla.
   El <header> tiene `backdrop-blur` (backdrop-filter), lo que lo convierte en
   bloque contenedor de los descendientes `position:fixed`: por eso el intento
   anterior (max-sm:fixed + left-1/2 + -translate-x-1/2) NO centraba contra el
   viewport y, con w-80 (20rem), se salía. La solución es anclar con left/right
   (no width fija) para que el ancho se calcule solo y queden márgenes iguales.
   Como el header ocupa todo el ancho del viewport y empieza en top:0, anclar
   con left/right respecto a él equivale a anclarlo al viewport. */
@media (max-width: 639.98px) {
  .av-nav-panel.dropdown-content {
    position: fixed !important;
    left: 0.75rem !important;
    right: 0.75rem !important;
    top: 4rem !important;          /* justo bajo el navbar (h-16 = 4rem) */
    width: auto !important;        /* el ancho lo marcan left/right */
    max-width: calc(100vw - 1.5rem) !important; /* seguridad anti-overflow */
    margin: 0 !important;          /* anula mt-2 para que top sea exacto */
    transform: none !important;    /* anula cualquier -translate-x */
  }
}

/* Favorito: latido al activar */
@keyframes av-beat { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } }
.av-fav-active { animation: av-beat .35s ease; }

/* Acciones de tarjeta: botón "+" que despliega favorito/comparar/lista/compartir.
   El menú está oculto por defecto y se revela al añadir `av-actions-open` al
   contenedor `.av-actions` (toggle por tarjeta, gestionado en common.js). */
.av-actions-menu {
  max-height: 0;
  overflow: hidden;
  visibility: hidden;
}
.av-actions-open .av-actions-menu {
  max-height: 16rem;
  overflow: visible;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  opacity: 1;
}
.av-actions-open .av-actions-icon { transform: rotate(45deg); }

/* En vista LISTA la tarjeta es horizontal y baja: el menú vertical se cortaría.
   Lo desplegamos en HORIZONTAL (iconos en fila) creciendo hacia la IZQUIERDA
   desde el botón "+", para que quepan todos dentro de la fila sin recortarse.
   El contenedor y el menú usan `row-reverse`: así el "+" queda pegado al borde
   derecho y las opciones se alinean a su izquierda. El modo cuadrícula (y
   compacto) conservan el despliegue en columna. */
.av-results[data-view="list"] .av-actions { flex-direction: row-reverse; }
.av-results[data-view="list"] .av-actions-menu {
  flex-direction: row-reverse;
  align-items: center;
  max-height: none;
  max-width: 0;
}
.av-results[data-view="list"] .av-actions-open .av-actions-menu {
  max-height: none;
  max-width: 20rem;
}

/* Scrollbar */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: oklch(var(--bc) / .25); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: oklch(var(--bc) / .4); }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Entrada de página */
@keyframes av-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.animate-in { animation: av-fade .3s ease-out; }

/* Skeleton */
@keyframes av-shimmer { 0% { background-position: -300px 0; } 100% { background-position: 300px 0; } }
.skeleton-box {
  background: linear-gradient(90deg, oklch(var(--b2)) 25%, oklch(var(--b3)) 50%, oklch(var(--b2)) 75%);
  background-size: 600px 100%;
  animation: av-shimmer 1.4s infinite linear;
}

/* Foco accesible */
:focus-visible { outline: 2px solid oklch(var(--p)); outline-offset: 2px; }

/* Espacio para la barra inferior en móvil */
@media (max-width: 767px) {
  body.has-bottom-nav { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom)); }
}

/* ===== Hilo de chat: layout de 3 zonas tipo WhatsApp =====
   Estructura flex column: cabecera (shrink-0) + lista de mensajes
   (#msgs: flex-1, min-height:0, overflow-y:auto -> ES LO ÚNICO que scrollea)
   + caja de escribir (shrink-0, siempre visible abajo).
   El min-height:0 es imprescindible para que #msgs scrollee en vez de empujar
   el formulario fuera de la pantalla. */
.chat-thread { display: flex; flex-direction: column; min-height: 0; }
.chat-thread #msgs { min-height: 0; }
/* La envoltura del hilo encadena el flex desde <main> hasta #msgs para que
   solo la lista de mensajes scrollee. min-height:0 imprescindible en cada
   nivel de la cadena flex. */
.chat-thread-wrap { min-height: 0; }

/* --- DESKTOP (>= 768px): el hilo se integra en el layout estándar de la web
   (contenedor ancho centrado, md:max-w-5xl) con una caja de ayuda encima. La
   página NO scrollea como documento: solo la lista de mensajes (#msgs) tiene
   scroll interno. El footer se oculta para que la caja quede clavada y el
   input siempre visible. El borde/redondeo/box los aplican utilidades md: en
   la plantilla. --- */
@media (min-width: 768px) {
  /* La ruta del hilo no scrollea a nivel de documento en desktop */
  body.chat-thread-page { overflow: hidden; height: 100vh; }
  /* main es el contenedor acotado: viewport menos el navbar (~4rem) */
  body.chat-thread-page main {
    height: calc(100vh - 4rem);
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* El footer no debe empujar ni aparecer dentro del hilo en desktop */
  body.chat-thread-page > footer { display: none; }
}

/* --- MÓVIL (< 768px): el hilo es una vista a PANTALLA COMPLETA.
   El navbar superior y la barra inferior se ocultan en esta ruta (ver
   base.html), así el chat usa los 100dvh íntegros. El documento NO scrollea:
   se bloquea el scroll del body SOLO en .chat-thread-page. --- */
@media (max-width: 767px) {
  /* Bloquea el scroll del documento solo en la ruta del hilo de chat.
     100svh = viewport "pequeño" (con barras del navegador presentes): garantiza
     que la barra de input quede dentro del área visible sin que el navegador la
     empuje fuera. Fallback a 100vh para navegadores sin soporte de svh. */
  body.chat-thread-page {
    overflow: hidden;
    height: 100vh;
    height: 100svh;
    padding-bottom: 0; /* anula el espacio que reserva has-bottom-nav */
  }
  /* main hereda la altura del viewport pequeño; chat.js lo afina a
     visualViewport.height al abrir el teclado para que el input siga visible
     y no quede tapado por el teclado virtual. */
  body.chat-thread-page main {
    height: 100vh;
    height: 100svh;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
  }

  /* El hilo llena <main> (la envoltura no añade padding/anchura en móvil).
     Flex-1 en vez de altura fija para reajustarse al teclado sin solaparse. */
  .chat-thread-wrap { flex: 1 1 auto; }
  .chat-thread {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
  }
  /* La caja de texto va pegada al borde inferior y respeta el área segura del
     notch/gesto inferior (home indicator). */
  .chat-thread__input {
    padding-bottom: calc(0.5rem + env(safe-area-inset-bottom));
  }
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Los tooltips de la barra de navegación solo en pantallas grandes (ratón),
   para que su texto no se solape con la barra de búsqueda al reducir la ventana. */
@media (max-width: 1023px) {
  header nav .tooltip::before,
  header nav .tooltip::after { display: none !important; }
}

/* =================================================================
   RECIBO / FACTURA IMPRIMIBLE  (.receipt-print)
   Documento formal con fondo blanco, tipografía sobria y sin colores
   del tema oscuro. Pensado para verse igual en pantalla y al imprimir.
   ================================================================= */
.receipt-print { color: #27272a; }
.receipt-brand-accent { color: var(--av-receipt-accent, #7c3aed); }
.receipt-h2 {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #71717a;
  margin-bottom: .75rem;
}
.receipt-dt { font-size: .7rem; text-transform: uppercase; letter-spacing: .03em; color: #a1a1aa; }
.receipt-dd { color: #27272a; font-weight: 500; }
.receipt-desc {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.receipt-photo {
  width: 132px;
  height: 132px;
  object-fit: cover;
  border-radius: .75rem;
  border: 1px solid #e4e4e7;
  background: #f4f4f5;
}
.receipt-thumb {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: .4rem;
  border: 1px solid #e4e4e7;
}
.receipt-badge {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  padding: .2rem .6rem;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.receipt-badge--ok { background: #dcfce7; color: #15803d; }
.receipt-badge--wait { background: #fef3c7; color: #b45309; }
.receipt-badge--cancel { background: #f4f4f5; color: #71717a; }
.receipt-totals { border-top: 1px dashed #d4d4d8; padding-top: .5rem; }
.receipt-steps {
  list-style: decimal;
  padding-left: 1.25rem;
  font-size: .875rem;
  color: #3f3f46;
}
.receipt-steps li { margin-bottom: .4rem; }
.receipt-qr {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 1rem;
  border: 1px solid #e4e4e7;
  border-radius: .75rem;
  background: #fafafa;
}
.receipt-qr-img { width: 96px; height: 96px; background: #fff; }
.receipt-thanks {
  background: var(--av-receipt-soft, #f5f3ff);
  border: 1px solid var(--av-receipt-soft-border, #ddd6fe);
  border-radius: .75rem;
  padding: 1rem 1.25rem;
}
.receipt-rate { color: #52525b; }

/* ---- Reglas de impresión: solo sale el documento ---- */
@media print {
  /* Fondo blanco real y forzar colores en la impresión */
  html, body {
    background: #fff !important;
    color: #000 !important;
  }
  body { padding: 0 !important; margin: 0 !important; }

  /* Ocultar TODA la interfaz de la app */
  header,
  footer,
  .btm-nav,
  #assistantFab,
  #toast-container,
  #cookieBanner,
  .toast,
  .modal,
  [no-print],
  .back-button-bar,
  nav { display: none !important; }

  /* El recibo ocupa toda la página, sin sombras ni bordes redondeados feos */
  main, main > * { margin: 0 !important; }
  .receipt-print {
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  /* Evitar cortes feos entre secciones */
  .receipt-print section,
  .receipt-print header,
  .receipt-print footer,
  .receipt-qr,
  .receipt-thanks,
  .receipt-totals { break-inside: avoid; }

  @page { margin: 14mm; size: A4; }
}