/* =========================================================
   AutoFullRD — estilos. Identidad propia: azul noche + naranja.
   ========================================================= */
:root {
  --bg: #f4f6fb; --card: #ffffff; --ink: #0f172a; --muted: #64748b; --line: #e2e8f0;
  --navy: #0f172a; --navy-2: #1e293b; --accent: #ff6a13; --accent-dark: #e35a0a; --accent-soft: #fff1e8;
  --ok: #16a34a; --warn: #b45309; --danger: #dc2626; --soft: #eef2ff;
  --radius: 16px; --shadow: 0 10px 30px -14px rgba(15, 23, 42, .25);
  --font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; font-family: var(--font); color: var(--ink); background: var(--bg); line-height: 1.5; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { margin: 0; line-height: 1.2; letter-spacing: -.01em; }
p { margin: 0; }
.wrap { width: min(1180px, 100% - 32px); margin-inline: auto; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
.hidden { display: none !important; }
svg.lucide { width: 1.05em; height: 1.05em; vertical-align: -0.18em; display: inline-block; flex: none; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .7rem 1.1rem;
  border-radius: 12px; border: 1px solid transparent; font-weight: 600; cursor: pointer; background: var(--navy); color: #fff;
  transition: transform .15s, box-shadow .15s, background .15s; white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.btn-accent { background: var(--accent); color: #fff; box-shadow: 0 8px 20px -8px rgba(255, 106, 19, .7); }
.btn-accent:hover { background: var(--accent-dark); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover { border-color: #cbd5e1; }
.btn-danger { background: #fff; color: var(--danger); border-color: #fecaca; }
.btn-wa { background: #25d366; color: #fff; }
.btn-wa:hover { background: #1fb457; }
.btn-block { width: 100%; }
.btn-lg { padding: .9rem 1.3rem; font-size: 1.05rem; }
.btn-sm { padding: .45rem .75rem; font-size: .88rem; border-radius: 10px; }
.btn-link { background: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: .4rem; color: var(--ink); padding: .5rem .6rem; border-radius: 10px; font-weight: 600; }
.btn-link:hover { background: var(--soft); color: var(--accent); }
.btn-icon { background: #fff; border: 1px solid var(--line); border-radius: 999px; width: 40px; height: 40px; display: inline-grid; place-items: center; cursor: pointer; color: var(--ink); }
.btn-icon.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* ---------- Cabecera ----------
   Antes era un bloque de azul noche. En un móvil, la barra de arriba más el
   hero llenaban casi toda la primera pantalla de oscuro. Ahora es blanca con
   una línea fina: el color de la marca lo pone el naranja, que resalta mucho
   más sobre blanco que sobre azul. */
.topbar { background: #fff; color: var(--ink); position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); }
.topbar-in { display: flex; align-items: center; gap: 1rem; height: 66px; }
.logo { display: flex; align-items: center; gap: .55rem; }
.logo-mark { width: 38px; height: 38px; border-radius: 11px; background: var(--accent); display: grid; place-items: center; color: #fff; }
.logo-mark svg { width: 22px; height: 22px; }
.logo-text { font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; }
.logo-text b { color: var(--accent); }
.logo-text span { font-weight: 600; opacity: .7; }
.logo-text.small { font-size: 1.1rem; color: var(--ink); }
.mainnav { display: flex; gap: .25rem; margin-left: .5rem; }
/* El menú se veía flojo desde que la barra es blanca: gris medio sobre blanco.
   Ahora va en el color del texto normal y con más cuerpo. NO se le pone un
   borde negro a las letras: en textos de 15 px un contorno las emborrona y se
   leen PEOR, que es justo lo contrario de lo que se busca. */
.mainnav a { display: inline-flex; white-space: nowrap; align-items: center; gap: .4rem; padding: .5rem .7rem; border-radius: 10px; color: var(--ink); font-weight: 600; }
.mainnav a:hover, .mainnav a.active { background: var(--soft); color: var(--accent); }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
/* Enlaces según quién entra. ".mainnav a" tiene más peso que una clase sola: por eso se repite aquí. */
.auth-only, .admin-only, .staff-only, .dealer-only,
.mainnav a.auth-only, .mainnav a.admin-only, .mainnav a.staff-only, .mainnav a.dealer-only { display: none; }
body.logged .auth-only, body.logged .mainnav a.auth-only,
body.admin .admin-only, body.admin .mainnav a.admin-only,
body.staff .staff-only, body.staff .mainnav a.staff-only,
body.dealer .dealer-only, body.dealer .mainnav a.dealer-only { display: inline-flex; }
/* Al revés: visible solo SIN sesión. En la barra de abajo del móvil no caben
   Favoritos y Mensajes a la vez, así que con sesión manda Mensajes: una
   conversación sin contestar vale más que un favorito guardado. Favoritos
   sigue arriba y en Mi cuenta. */
body.logged .no-auth-only { display: none !important; }

/* Insignia de mensajes sin leer. */
.badge {
  position: absolute; top: 2px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px;
  display: grid; place-items: center; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: .68rem; font-weight: 800; line-height: 1;
}
.mainnav a, .bottomnav a { position: relative; }
.bottomnav .badge { top: 4px; right: 22%; }

/* ---------- Portada ---------- */
/* El hero era azul noche con letras blancas y ocupaba media pantalla en el
   móvil. Ahora es crema con un toque de naranja y el texto en oscuro: se lee
   mejor, pesa menos y el naranja de la marca gana protagonismo. */
.hero { margin-top: 1.5rem; background: linear-gradient(135deg, #fff6f0 0%, #eef2ff 100%); color: var(--ink); border: 1px solid #ffe0cc; border-radius: 22px; padding: 2.4rem 2rem 2rem; position: relative; overflow: hidden; }
.hero::after { content: ""; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px; border-radius: 50%; background: radial-gradient(circle, rgba(255,106,19,.22), transparent 68%); }
.hero h1 { font-size: clamp(1.7rem, 4vw, 2.6rem); position: relative; }
.hero p { color: var(--muted); margin-top: .5rem; position: relative; }
.hero-count { display: inline-block; margin-top: .6rem; background: #fff; border: 1px solid #ffd4b8; color: var(--accent-dark); font-weight: 600; padding: .3rem .8rem; border-radius: 999px; font-size: .9rem; position: relative; }
/* ---------- Buscador de la portada ----------
   Una casilla ancha con la lupa DENTRO, debajo una fila de desplegables
   compactos y el botón enseñando cuántos resultados hay ahora mismo. Ese
   contador vivo es lo importante: dice si afinar o aflojar antes de pulsar. */
.searchbox { background: #fff; color: var(--ink); border-radius: 16px; padding: 1.1rem; margin-top: 1.4rem; position: relative; box-shadow: var(--shadow); }
/* El contador de vehículos: lo primero que se lee. Un portal con carros
   dentro se nota en el número, no en un eslogan. */
.sb-total { font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; margin-bottom: .15rem; }
.sb-total b { color: var(--accent-dark); }
.sb-label { font-weight: 600; color: var(--muted); margin-bottom: .6rem; }

/* Nuevo / usado: tres pastillas, no un desplegable. Es la primera decisión
   que toma un comprador y merece verse de un vistazo, con su número al lado. */
.sb-cond { display: flex; gap: .4rem; margin-top: .7rem; flex-wrap: wrap; }
.sb-cond-op { flex: 0 1 auto; min-width: 0; }
.sb-cond-op input { position: absolute; opacity: 0; pointer-events: none; }
.sb-cond-op span {
  display: flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg); font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, border-color .15s, color .15s;
}
.sb-cond-op span small { color: var(--muted); font-weight: 600; }
.sb-cond-op span:hover { border-color: var(--accent); }
.sb-cond-op input:checked + span { background: var(--accent); border-color: var(--accent); color: #fff; }
.sb-cond-op input:checked + span small { color: rgba(255, 255, 255, .85); }
.sb-cond-op input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Pulso del portal. Números reales; si son pequeños no se enseña nada
   (lo decide el servidor, ver server/stats.js). */
/* Cada dato entero o en la línea de abajo, nunca partido por la mitad: en el
   móvil, "1,240 visitas al" / "día" se lee fatal. */
.sb-pulso { display: inline-flex; align-items: center; gap: .3rem .9rem; color: var(--muted); font-size: .85rem; flex-wrap: wrap; }
.sb-pulso b { color: var(--ink); }
.sb-pulso .sb-dato { white-space: nowrap; }
.sb-pulso svg { width: 15px; height: 15px; color: var(--ok); flex: none; }

/* Las mismas pastillas dentro del panel lateral, que es más estrecho: sin
   números al lado y con letra algo menor para que las tres quepan en fila. */
.fl-cond { margin: 0 0 .9rem; }
.fl-cond .sb-cond-op span { padding: .45rem .3rem; font-size: .88rem; }

/* ---------- Filtro de precio con el dibujo del mercado ----------
   Las barras dicen cuántos carros hay en cada tramo. Enseñarlo antes de
   elegir es lo que hace útil el filtro: se ve dónde está el grueso y dónde
   no hay nada, en vez de probar cifras a ciegas.
   Las dos manijas son dos <input type=range> superpuestos. El truco está en
   que la pista no recibe el ratón (pointer-events: none) y solo lo reciben
   las manijas: si no, el de arriba taparía al de abajo y una de las dos no
   se podría agarrar nunca. */
.field .precio-filtro { margin-top: .2rem; }
.field .pf-barras { display: flex; align-items: flex-end; gap: 1px; height: 46px; padding: 0 9px; }
.field .pf-barra { flex: 1 1 0; min-width: 0; background: var(--accent); opacity: .85; border-radius: 2px 2px 0 0; transition: opacity .12s, background .12s; }
.field .pf-barra.fuera { background: var(--line); opacity: 1; }

.field .pf-pista { position: relative; height: 22px; margin-top: 2px; }
.field .pf-pista::before {
  content: ''; position: absolute; left: 9px; right: 9px; top: 50%; height: 4px;
  transform: translateY(-50%); background: var(--line); border-radius: 999px;
}
.field .pf-tramo { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); background: var(--accent); border-radius: 999px; }

.field .pf-mano { position: absolute; inset: 0; width: 100%; height: 22px; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
.field .pf-mano:focus { outline: none; }
.field .pf-mano::-webkit-slider-runnable-track { background: none; border: 0; height: 22px; }
.field .pf-mano::-moz-range-track { background: none; border: 0; height: 22px; }
.field .pf-mano::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(15, 23, 42, .3); margin-top: 2px;
}
.field .pf-mano::-moz-range-thumb {
  pointer-events: auto; cursor: grab;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(15, 23, 42, .3);
}
.field .pf-mano:active::-webkit-slider-thumb { cursor: grabbing; }
.field .pf-mano:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(255, 106, 19, .28); }
.field .pf-mano:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(255, 106, 19, .28); }

.field .pf-cajas { margin-top: .5rem; }
/* El pie con Aceptar. Sin este botón el filtro se aplicaba al soltar la
   manija, y eso obligaba a entrar dos veces: una por cada manija. */
.pf-pie { display: flex; justify-content: space-between; align-items: center; gap: .8rem; margin-top: .6rem; }

/* ---------- El precio en el buscador de la portada ----------
   El mismo bloque, dentro de una ventanita que cuelga del botón. */
.sb-precio { position: relative; min-width: 0; }
.sb-precio-btn { display: flex; align-items: center; justify-content: space-between; gap: .3rem; width: 100%; cursor: pointer; text-align: left; }
.sb-precio-btn svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.sb-precio-btn > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-precio-btn.puesto { border-color: var(--accent); color: var(--accent-dark); }
.sb-precio-pop {
  position: absolute; z-index: 40; top: calc(100% + .4rem); left: 0; width: min(320px, 78vw);
  background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: .9rem;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .45);
}
/* Dentro de la ventanita no hay `.field`, así que las reglas del bloque de
   precio (escritas bajo `.field` para ganarle a `.field input`) no aplican:
   se repiten aquí las cuatro que hacen falta. */
.sb-precio-pop .pf-cajas input { width: 100%; padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.sb-precio-pop .pf-mano { position: absolute; inset: 0; width: 100%; height: 22px; margin: 0; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; pointer-events: none; }
.sb-precio-pop .pf-mano::-webkit-slider-runnable-track { background: none; border: 0; height: 22px; }
.sb-precio-pop .pf-mano::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; pointer-events: auto; cursor: grab;
  width: 18px; height: 18px; border-radius: 50%; background: #fff;
  border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(15, 23, 42, .3); margin-top: 2px;
}
.sb-precio-pop .pf-mano::-moz-range-track { background: none; border: 0; height: 22px; }
.sb-precio-pop .pf-mano::-moz-range-thumb {
  pointer-events: auto; cursor: grab; width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--accent); box-shadow: 0 1px 4px rgba(15, 23, 42, .3);
}
.sb-precio-pop .pf-barras { display: flex; align-items: flex-end; gap: 1px; height: 46px; padding: 0 9px; }
.sb-precio-pop .pf-barra { flex: 1 1 0; min-width: 0; background: var(--accent); opacity: .85; border-radius: 2px 2px 0 0; }
.sb-precio-pop .pf-barra.fuera { background: var(--line); opacity: 1; }
.sb-precio-pop .pf-pista { position: relative; height: 22px; margin-top: 2px; }
.sb-precio-pop .pf-pista::before { content: ''; position: absolute; left: 9px; right: 9px; top: 50%; height: 4px; transform: translateY(-50%); background: var(--line); border-radius: 999px; }
.sb-precio-pop .pf-tramo { position: absolute; top: 50%; height: 4px; transform: translateY(-50%); background: var(--accent); border-radius: 999px; }
.sb-precio-pop .precio-filtro.sin-dibujo .pf-barras,
.sb-precio-pop .precio-filtro.sin-dibujo .pf-pista { display: none; }
@media (max-width: 720px) {
  /* En el móvil la ventanita se centra bajo la fila: pegada a la izquierda se
     saldría de la pantalla cuando el botón está a la derecha. */
  .sb-precio-pop { left: 50%; transform: translateX(-50%); width: min(320px, calc(100vw - 48px)); }
}
/* Con uno o ningún carro no hay mercado que dibujar: se dejan solo las dos
   casillas de escribir, que siguen funcionando igual. */
.field .precio-filtro.sin-dibujo .pf-barras,
.field .precio-filtro.sin-dibujo .pf-pista { display: none; }
.field .precio-filtro.sin-dibujo .pf-cajas { margin-top: 0; }

/* ---------- Valorar el vehículo ---------- */
.valorar-caja { margin: -.3rem 0 1rem; }
.val-res { margin-top: .7rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.val-rango { font-size: 1.25rem; font-weight: 800; letter-spacing: -.01em; }
.val-rango b { color: var(--accent-dark); }
.val-aviso { margin-top: .5rem; padding: .5rem .7rem; border-radius: 10px; font-weight: 600; font-size: .9rem; }
.val-aviso.dentro { background: #dcfce7; color: #14532d; }
.val-aviso.alto { background: #fef3c7; color: #78350f; }
.val-aviso.bajo { background: var(--soft); color: #312e81; }
.hint.warn { color: var(--warn); }

/* La pista de dónde buscar el código. Va justo debajo del aviso de enviado,
   antes de la casilla: si se lee después de teclear ya no sirve de nada. */
.code-where { margin: -.4rem 0 .8rem; }
.code-where b { color: var(--ink); }

/* La cinta de "en revisión". Amarilla, no roja: no es un castigo ni una
   acusación, es un aviso temporal, y el color lo dice antes que el texto. */
.rev-cinta { display: flex; align-items: center; gap: .5rem; margin: .4rem 0; padding: .5rem .7rem; border-radius: 10px; background: #fef3c7; color: #78350f; font-size: .88rem; line-height: 1.4; }
.rev-cinta svg { width: 18px; height: 18px; flex: none; }

/* ---------- Mensajes ----------
   Dos paneles, como WhatsApp: la lista de conversaciones a la izquierda y la
   abierta a la derecha. La altura la manda la ventana y lo que se desplaza es
   el interior de cada panel; si se desplazara la página entera, el cajetín de
   escribir se iría hacia abajo y habría que perseguirlo para contestar. */
.msg-app {
  display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 1rem;
  margin: 1.2rem 0; min-height: 420px;
  height: calc(100vh - 66px - 2.4rem);
  /* `dvh` en vez de `vh` por el móvil: la barra del navegador aparece y
     desaparece al desplazarse, y con `vh` el cajetín queda tapado. */
  height: calc(100dvh - 66px - 2.4rem);
}
.msg-side { display: flex; flex-direction: column; min-height: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.msg-side-head { display: grid; gap: .6rem; padding: .8rem; border-bottom: 1px solid var(--line); }
.msg-side-head h1 { margin: 0; font-size: 1.2rem; }
.msg-filtro { width: 100%; padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font: inherit; color: inherit; }
.msg-filtro:focus { outline: none; border-color: var(--accent); }
.msg-main { display: flex; flex-direction: column; min-height: 0; }
.msg-vacio { flex: 1; display: grid; place-items: center; text-align: center; color: var(--muted); padding: 2rem; background: var(--card); border: 1px solid var(--line); border-radius: 16px; }
.msg-vacio svg { width: 44px; height: 44px; opacity: .45; margin-bottom: .6rem; }
/* En esta pantalla el pie sobra: lo único que hace es añadir una barra de
   desplazamiento que mueve el cajetín de escribir fuera de la vista. */
body.en-mensajes .footer { display: none; }

/* `minmax(0, 1fr)` y no `1fr` a secas: en una rejilla, una fila no encoge por
   debajo de su contenido, y el nombre largo de un carro sacaba una barra de
   desplazamiento horizontal dentro del panel. Con esto se corta con puntos. */
.msg-lista { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: .4rem; padding: .5rem; overflow-y: auto; overflow-x: hidden; min-height: 0; }
.msg-fila {
  display: flex; gap: .8rem; align-items: center; position: relative;
  padding: .7rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  transition: border-color .15s, transform .15s;
}
.msg-fila:hover { border-color: var(--accent); transform: translateY(-1px); }
/* Sin leer: barra naranja a la izquierda y el texto en negrita. Se ve de un
   vistazo cuál falta por contestar, que es lo único que importa en esta lista. */
.msg-fila.sin-leer { border-left: 4px solid var(--accent); }
.msg-fila.sin-leer .msg-ultimo { font-weight: 700; color: var(--ink); }
/* La que se está leyendo. Con el panel siempre a la vista hay que poder decir
   de un vistazo cuál de todas es la de la derecha. */
.msg-fila.activa { border-color: var(--accent); background: var(--accent-soft); }
.msg-foto { width: 56px; height: 56px; flex: none; border-radius: 10px; overflow: hidden; background: var(--bg); display: grid; place-items: center; color: var(--muted); }
.msg-foto img { width: 100%; height: 100%; object-fit: cover; }
.msg-datos { flex: 1 1 auto; min-width: 0; }
.msg-cab { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; }
.msg-ultimo { color: var(--muted); font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.badge.estatico { position: static; flex: none; }

/* La conversación */
.hilo { display: flex; flex-direction: column; min-height: 0; height: 100%; }
.hilo-cab { display: flex; align-items: center; gap: .5rem; flex: none; }
.hilo-carro {
  display: flex; gap: .8rem; align-items: center; flex: 1 1 auto; min-width: 0;
  padding: .6rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px;
}
/* La flecha de atrás solo hace falta en el móvil: en pantalla grande la lista
   nunca se fue de la vista. */
.hilo-atras { display: none; }
.burbujas {
  display: flex; flex-direction: column; gap: .5rem;
  max-height: 58vh; overflow-y: auto; padding: .6rem;
  background: var(--bg); border: 1px solid var(--line); border-radius: 14px;
}
.hilo .burbujas { flex: 1 1 auto; max-height: none; min-height: 0; margin-top: .6rem; }
.hilo .safety, .hilo .adj-previa, .hilo .msg-form { flex: none; }
.burbuja { max-width: 78%; align-self: flex-start; background: #fff; border: 1px solid var(--line); border-radius: 14px 14px 14px 4px; padding: .55rem .8rem; }
.burbuja.mia { align-self: flex-end; background: var(--accent-soft); border-color: #ffd9c0; border-radius: 14px 14px 4px 14px; }
.burbuja-txt { white-space: pre-wrap; overflow-wrap: anywhere; }
.burbuja-hora { margin-top: .2rem; font-size: .72rem; color: var(--muted); text-align: right; }

/* Mensaje del agente. Se distingue a propósito: quien cree estar hablando con
   una persona y descubre que no, se siente engañado. Y el dealer necesita ver
   de un vistazo qué contestó su agente y qué contestó él. */
.burbuja.del-agente { background: var(--soft); border-color: #c7d2fe; }
.agente-marca { display: flex; align-items: center; gap: .3rem; margin-bottom: .3rem; font-size: .72rem; font-weight: 700; color: #4338ca; text-transform: uppercase; letter-spacing: .03em; }
.agente-marca svg { width: 14px; height: 14px; }

.msg-form { display: flex; gap: .4rem; align-items: flex-end; margin-top: .7rem; min-width: 0; }
.msg-form textarea { flex: 1 1 auto; resize: none; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.msg-form textarea:focus { outline: none; border-color: var(--accent); }
.msg-form .btn { flex: none; padding: 0; width: 42px; height: 42px; display: grid; place-items: center; }
.msg-form .btn svg { width: 20px; height: 20px; }
.msg-form textarea { min-width: 0; }
.hilo .safety { margin-top: .7rem; }

/* El clip de adjuntar. Es un <label> sobre un <input type=file> escondido:
   así se ve como un botón y funciona con el teclado. */
.msg-clip { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; }
.msg-clip:hover { border-color: var(--accent); color: var(--accent); }
.msg-clip svg { width: 20px; height: 20px; }

/* Lo elegido, antes de mandarlo: se ve qué va a salir y se puede quitar. */
.adj-previa { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .6rem; }
.adj-chip { display: inline-flex; align-items: center; gap: .3rem; max-width: 220px; padding: .3rem .5rem; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); font-size: .85rem; }
.adj-chip > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adj-chip button { border: 0; background: none; cursor: pointer; color: var(--muted); display: grid; place-items: center; padding: 0; }
.adj-chip button:hover { color: var(--danger); }
.adj-chip svg { width: 14px; height: 14px; }

/* Los ficheros dentro de la conversación */
.adj-img { display: block; margin-bottom: .35rem; }
.adj-img img { max-width: 100%; max-height: 260px; border-radius: 10px; object-fit: cover; }
.adj-audio { width: 100%; min-width: 210px; margin-bottom: .35rem; }
.adj-video { max-width: 100%; max-height: 300px; border-radius: 10px; margin-bottom: .35rem; background: #000; }
.adj-doc { display: flex; align-items: center; gap: .5rem; margin-bottom: .35rem; padding: .5rem .6rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.adj-doc svg { width: 22px; height: 22px; color: var(--accent); flex: none; }
.adj-doc span { min-width: 0; overflow-wrap: anywhere; }
/* En la burbuja propia el fondo ya es naranja claro: el documento se separa. */
.burbuja.mia .adj-doc { background: #fff; }

/* ---------- Seguir a un dealer ---------- */
.seguir-btn { align-self: flex-start; flex: none; gap: .4rem; }
.seguir-btn small { opacity: .75; font-weight: 700; }
.sigo-fila { display: flex; align-items: center; gap: .9rem; margin-bottom: .7rem; }
.sigo-datos { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 560px) {
  /* En el móvil el botón cae debajo y a lo ancho: es lo que hay que pulsar. */
  .sigo-fila { flex-wrap: wrap; }
  .sigo-fila .btn { width: 100%; }
}

/* ---------- Pruebas de manejo ---------- */
.td-check { align-items: flex-start; gap: .6rem; padding: .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); margin-top: .4rem; }
.td-check input { margin-top: .2rem; }
.field .td-slot { margin-top: 0; }

.td-bandeja { margin-bottom: 1.2rem; border-left: 3px solid var(--accent); }
.td-bandeja .tag.pend { background: var(--accent); color: #fff; }
.td-bandeja .tag.ok { background: #dcfce7; color: #14532d; }
.td-fila { display: flex; gap: 1rem; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; padding: .7rem 0; border-top: 1px solid var(--line); }
.td-datos { min-width: 0; overflow-wrap: anywhere; }
.td-botones { display: flex; gap: .4rem; flex-wrap: wrap; flex: none; }
@media (max-width: 560px) {
  /* En el móvil los botones van debajo y a lo ancho: son los que hay que
     pulsar, y en una fila apretada se falla el dedo. */
  .td-fila { flex-direction: column; gap: .6rem; }
  .td-botones { width: 100%; }
  .td-botones .btn { flex: 1 1 0; }
}

/* ---------- Número de referencia ----------
   Cada anuncio, cada cuenta y cada dealer tienen el suyo. Va en letra de
   máquina de escribir porque es un código que la gente lee en voz alta por
   teléfono: así no se confunde un 0 con una O. */
.ref-linea { margin-top: .3rem; }
.ref { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82em; letter-spacing: .02em; color: var(--muted); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .35rem; white-space: nowrap; }

/* ---------- Ficha del dealer: dónde está, web y horarios ---------- */
.tag.abierto { background: #dcfce7; color: #14532d; }
.tag.cerrado { background: #fee2e2; color: #7f1d1d; }
.dl-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.2rem; margin-bottom: 1.2rem; }
.dl-dato { display: flex; gap: .6rem; align-items: flex-start; min-width: 0; }
.dl-dato > svg { width: 20px; height: 20px; color: var(--accent); flex: none; margin-top: .15rem; }
.dl-dato > div { min-width: 0; overflow-wrap: anywhere; }
.dl-horas { border-collapse: collapse; margin-top: .3rem; font-size: .9rem; }
.dl-horas td { padding: .12rem .7rem .12rem 0; }
.dl-horas td:last-child { padding-right: 0; white-space: nowrap; }
/* El día de hoy en negrita: es el único que la mayoría va a mirar. */
.dl-horas .es-hoy { font-weight: 700; }

/* Editar los horarios: una fila por día, con sus dos horas.
   Todo va escrito bajo `.field` porque estas filas viven dentro de un campo
   del formulario, y `.field label { display: block }` y `.field input { width:
   100% }` ganarían: la casilla de marcar se estiraría a lo ancho y el nombre
   del día caería debajo. */
.field .hor-grid { display: grid; gap: .4rem; }
.field .hor-fila { display: grid; grid-template-columns: minmax(96px, 1fr) auto auto auto; gap: .5rem; align-items: center; }
.field .hor-dia { display: flex; align-items: center; gap: .4rem; font-weight: 600; font-size: .95rem; color: var(--ink); margin-bottom: 0; min-width: 0; }
.field .hor-dia input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin: 0; accent-color: var(--accent); }
.field .hor-fila input[type="time"] { width: auto; padding: .4rem .5rem; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.field .hor-fila input[type="time"]:disabled { background: var(--bg); color: var(--muted); }
@media (max-width: 560px) {
  /* En el teléfono el día va arriba y las horas debajo. Caben los dos en una
     fila por muy poco, y "Miércoles" se parte en dos líneas; así se lee de un
     vistazo y no depende de milímetros ni del tamaño de letra del sistema. */
  .field .hor-fila { grid-template-columns: auto auto auto; row-gap: .3rem; padding: .5rem 0; border-bottom: 1px solid var(--line); }
  .field .hor-dia { grid-column: 1 / -1; }
  .field .hor-fila:last-child { border-bottom: 0; }
}
.sb-q { position: relative; }
.sb-q input {
  width: 100%; padding: .95rem 3.2rem .95rem 1rem; font-size: 1.05rem;
  border: 2px solid var(--accent); border-radius: 12px; background: #fff;
  box-shadow: 0 2px 10px -4px rgba(255, 106, 19, .35);
}
.sb-q input:focus { outline: none; box-shadow: 0 0 0 4px rgba(255, 106, 19, .18); }
.sb-q input::placeholder { color: #9aa5b5; }
.sb-lupa { position: absolute; right: .45rem; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 0; background: none; cursor: pointer; display: grid; place-items: center; color: var(--accent-dark); border-radius: 10px; }
.sb-lupa:hover { background: var(--accent-soft); }
.sb-lupa svg { width: 22px; height: 22px; }

.sb-row { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: .6rem; margin-top: .7rem; }
.sb-sel { padding: .75rem .8rem; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); font-weight: 600; color: var(--ink); min-width: 0; }
.sb-sel:focus { outline: none; border-color: var(--accent); }
.sb-go { padding: .75rem 1.4rem; font-size: 1rem; white-space: nowrap; }
.sb-go:disabled { opacity: .5; }

.searchbox-more { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: .7rem; flex-wrap: wrap; }
.searchbox-more a { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; }

@media (max-width: 720px) {
  /* En el móvil los tres desplegables siguen en una fila —caben porque las
     palabras son cortas— y el botón pasa debajo a todo lo ancho: un botón que
     enseña cuántos carros hay merece ese sitio. */
  .sb-row { grid-template-columns: 1fr 1fr 1fr; gap: .45rem; }
  .sb-sel { padding: .7rem .45rem; font-size: .92rem; }
  .sb-go { grid-column: 1 / -1; width: 100%; }
  .searchbox { padding: .9rem; }
  .sb-total { font-size: 1.3rem; }
  .sb-cond-op { flex: 1 1 0; }
  .sb-cond-op span { padding: .5rem .35rem; font-size: .9rem; }
  .searchbox-more { justify-content: center; gap: .5rem; }
}

.section { margin-top: 2.2rem; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }
.section-head h2 { font-size: 1.35rem; }
.section-head a { color: var(--accent); font-weight: 600; }
.body-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; }
.body-tile { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; display: flex; align-items: center; gap: .8rem; transition: transform .15s, box-shadow .15s; }
.body-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.body-tile svg { width: 30px; height: 30px; color: var(--accent); }
.body-tile b { display: block; }
.make-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip { background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: .4rem .9rem; font-weight: 600; font-size: .9rem; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip small { color: var(--muted); font-weight: 500; margin-left: .3rem; }
.sell-banner { background: var(--accent-soft); border: 1px solid #ffd4b8; border-radius: 18px; padding: 1.6rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; }
.sell-banner h2 { font-size: 1.3rem; }
.safe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.safe-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem; display: flex; gap: .7rem; }
.safe-item svg { color: var(--ok); width: 22px; height: 22px; flex: none; margin-top: .1rem; }

/* ---------- Tarjetas de anuncio ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: transform .15s, box-shadow .15s; position: relative; }
.card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.card-img { aspect-ratio: 4 / 3; background: #e2e8f0 url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.3'><path d='M5 17h14M6 11l1.5-4.5A2 2 0 0 1 9.4 5h5.2a2 2 0 0 1 1.9 1.5L18 11M4 11h16v6H4zM7 17v2M17 17v2'/></svg>") center/40% no-repeat; position: relative; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-badge { position: absolute; left: .6rem; top: .6rem; background: rgba(15,23,42,.85); color: #fff; font-size: .72rem; font-weight: 700; padding: .2rem .5rem; border-radius: 6px; text-transform: uppercase; letter-spacing: .03em; }
.card-badge.sold { background: var(--danger); }
.card-photos { position: absolute; right: .6rem; bottom: .6rem; background: rgba(15,23,42,.7); color: #fff; font-size: .72rem; padding: .15rem .45rem; border-radius: 6px; display: inline-flex; gap: .25rem; align-items: center; }
.card-fav { position: absolute; right: .5rem; top: .5rem; width: 34px; height: 34px; }
.card-body { padding: .8rem .9rem .9rem; display: flex; flex-direction: column; gap: .25rem; flex: 1; }
.card-title { font-weight: 700; font-size: 1rem; line-height: 1.25; }
.card-title small { color: var(--muted); font-weight: 500; display: block; font-size: .82rem; }
.card-price { font-weight: 800; font-size: 1.15rem; color: var(--navy); margin-top: .2rem; }
.card-price small { font-weight: 600; color: var(--accent); font-size: .75rem; margin-left: .35rem; }
.card-meta { color: var(--muted); font-size: .82rem; display: flex; flex-wrap: wrap; gap: .25rem .6rem; }
.card-foot { margin-top: auto; padding-top: .5rem; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-size: .8rem; }
.tag { display: inline-flex; align-items: center; gap: .25rem; border-radius: 6px; padding: .1rem .45rem; font-size: .75rem; font-weight: 600; background: var(--soft); color: #3730a3; }
.tag.dealer { background: #ecfdf5; color: #047857; }

/* ---------- Búsqueda ---------- */
.search-layout { display: grid; grid-template-columns: 280px 1fr; gap: 1.2rem; margin-top: 1.5rem; align-items: start; }
/* `min-width: 0` es imprescindible: por defecto, un hijo de grid NO encoge por
   debajo del ancho de su contenido. Sin esto, la fila de atajos (que se desplaza
   a lo ancho) estiraba los resultados a 857 px dentro de una pantalla de 375, y
   el móvil encogía la página entera para que cupiera: se veía todo diminuto. */
.results { min-width: 0; }
.filters { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; position: sticky; top: 82px; }
.filters h3 { font-size: 1rem; margin-bottom: .6rem; display: flex; justify-content: space-between; align-items: center; }
.filters .field { margin-bottom: .7rem; }
.field label { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin-bottom: .25rem; }
.field input, .field select, .field textarea { width: 100%; padding: .6rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,106,19,.15); }
.field textarea { resize: vertical; min-height: 120px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .5rem; }
.results-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: .9rem; flex-wrap: wrap; }
.results-head h1 { font-size: 1.25rem; }
.results-head select { padding: .5rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.results .cards { grid-template-columns: repeat(3, 1fr); }
.pager { display: flex; justify-content: center; align-items: center; gap: .8rem; margin: 1.5rem 0; }
.empty { background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius); padding: 2.5rem 1rem; text-align: center; color: var(--muted); }
.filters-toggle { display: none; }
.check { display: flex; align-items: center; gap: .5rem; font-size: .9rem; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--accent); }

/* ---------- Ficha ---------- */
.detail { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.2rem; margin-top: 1.5rem; align-items: start; }
/* Sin `min-width: 0` los hijos de una rejilla NO encogen por debajo de su
   contenido: la tira de miniaturas, que se desplaza a lo ancho, empujaba la
   columna a 376 px dentro de una pantalla de 375 y el móvil encogía la página.
   Solo se notaba en anuncios CON fotos de verdad. */
.detail > * { min-width: 0; }
.gallery { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.gallery-main { aspect-ratio: 4 / 3; background: #eef2f7; position: relative; }
.gallery-main img { width: 100%; height: 100%; object-fit: contain; }
.gallery-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px; border-radius: 50%; border: 0; background: rgba(255,255,255,.9); cursor: pointer; display: grid; place-items: center; }
.gallery-nav.prev { left: .6rem; } .gallery-nav.next { right: .6rem; }
.gallery-count { position: absolute; right: .7rem; bottom: .7rem; background: rgba(15,23,42,.75); color: #fff; font-size: .8rem; padding: .2rem .55rem; border-radius: 6px; }
.gallery-thumbs { display: flex; gap: .4rem; padding: .6rem; overflow-x: auto; }
.gallery-thumbs img { width: 84px; height: 63px; object-fit: cover; border-radius: 8px; cursor: pointer; border: 2px solid transparent; flex: none; }
.gallery-thumbs img.on { border-color: var(--accent); }
.gallery-empty { display: grid; place-items: center; color: #94a3b8; height: 100%; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.2rem; }
.panel + .panel { margin-top: 1rem; }
.detail-title { font-size: 1.5rem; }
.detail-sub { color: var(--muted); margin-top: .2rem; }
.detail-price { font-size: 2rem; font-weight: 800; color: var(--navy); margin: .8rem 0 .2rem; }
.detail-price small { font-size: .85rem; color: var(--accent); font-weight: 600; margin-left: .4rem; }
.detail-actions { display: grid; gap: .5rem; margin-top: 1rem; }
.contact-line { display: flex; justify-content: space-between; align-items: center; gap: .6rem; margin-top: .9rem; padding: .6rem .8rem; background: var(--bg); border-radius: 10px; font-size: .95rem; }
.contact-line b { letter-spacing: .04em; }
.contact-line .link { display: inline-flex; align-items: center; gap: .3rem; white-space: nowrap; }
.lock-badge { width: 56px; height: 56px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; margin: 0 auto .8rem; }
.lock-badge svg { width: 26px; height: 26px; }
.detail-actions .row2 { gap: .5rem; }
.seller-box { display: flex; gap: .8rem; align-items: center; }
.seller-avatar { width: 46px; height: 46px; border-radius: 12px; background: var(--soft); display: grid; place-items: center; color: #3730a3; flex: none; }
.seller-box b { display: block; }
.specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.spec { background: var(--bg); border-radius: 10px; padding: .6rem .7rem; }
.spec small { display: block; color: var(--muted); font-size: .75rem; }
.spec b { font-size: .95rem; }
.desc { white-space: pre-line; line-height: 1.6; }
.safety { background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px; padding: .8rem 1rem; display: flex; gap: .6rem; color: #92400e; font-size: .9rem; }
.safety svg { flex: none; margin-top: .15rem; }
.owner-bar { background: var(--soft); border-radius: 12px; padding: .7rem 1rem; display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; gap: 1rem; }
.sold-banner { background: #fee2e2; color: #991b1b; border-radius: 12px; padding: .7rem 1rem; font-weight: 600; margin-bottom: 1rem; }

/* ---------- Formularios de página ---------- */
.page { margin-top: 1.5rem; }
.page-head { margin-bottom: 1.2rem; }
.page-head h1 { font-size: 1.6rem; }
.form-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; max-width: 780px; }
.form-card h2 { font-size: 1.05rem; margin: 1.2rem 0 .7rem; display: flex; align-items: center; gap: .5rem; }
.form-card h2:first-child { margin-top: 0; }
.form-card h2 .num { width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; display: inline-grid; place-items: center; font-size: .85rem; }
.field { margin-bottom: .9rem; }
.form-err { background: #fee2e2; color: #991b1b; border-radius: 10px; padding: .6rem .8rem; margin: .6rem 0; }
.form-ok { background: #dcfce7; color: #166534; border-radius: 10px; padding: .6rem .8rem; margin: .6rem 0; }
.form-foot { display: flex; gap: .6rem; justify-content: flex-end; margin-top: 1.2rem; flex-wrap: wrap; }
.hint { color: var(--muted); font-size: .82rem; margin-top: .25rem; }
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem; margin: .8rem 0; }
.photo-item { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden; border: 1px solid var(--line); background: #f1f5f9; }
.photo-item img { width: 100%; height: 100%; object-fit: cover; }
.photo-item .cover { position: absolute; left: .4rem; top: .4rem; background: var(--accent); color: #fff; font-size: .7rem; font-weight: 700; padding: .15rem .45rem; border-radius: 6px; }
.photo-tools { position: absolute; right: .3rem; bottom: .3rem; display: flex; gap: .25rem; }
.photo-tools button { width: 28px; height: 28px; border-radius: 8px; border: 0; background: rgba(255,255,255,.95); cursor: pointer; display: grid; place-items: center; }
.dropzone { border: 2px dashed #cbd5e1; border-radius: 14px; padding: 1.4rem; text-align: center; color: var(--muted); cursor: pointer; }
.dropzone:hover, .dropzone.over { border-color: var(--accent); background: var(--accent-soft); }
.dropzone input { display: none; }

/* ---------- Auth ---------- */
.auth-card { max-width: 440px; margin: 2rem auto; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 1.8rem; box-shadow: var(--shadow); }
.auth-card h1 { font-size: 1.4rem; margin-bottom: .3rem; }
.auth-card .lead { color: var(--muted); margin-bottom: 1.2rem; }
.auth-card .btn-block { margin-top: .4rem; }
.auth-alt { text-align: center; margin-top: .9rem; font-size: .9rem; }
.auth-alt a, .link { color: var(--accent); font-weight: 600; cursor: pointer; background: none; border: 0; padding: 0; }
.code-input { text-align: center; font-size: 1.6rem; letter-spacing: .5em; font-weight: 700; }

/* ---------- Listas propias / admin ---------- */
.list-rows { display: grid; gap: .7rem; }
.list-row { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .8rem; display: grid; grid-template-columns: 120px minmax(220px, 1fr) fit-content(560px); gap: .9rem; align-items: center; }
.list-row img, .list-row .noimg { width: 120px; height: 90px; object-fit: cover; border-radius: 10px; background: #e2e8f0; }
.list-row .actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.pill { display: inline-block; border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 700; }
.pill.activo { background: #dcfce7; color: #166534; } .pill.pausado { background: #fef3c7; color: #92400e; }
.pill.vendido { background: #e0e7ff; color: #3730a3; } .pill.retirado { background: #fee2e2; color: #991b1b; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-bottom: 1.2rem; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; }
.stat .val { font-size: 1.6rem; font-weight: 800; }
.stat .lbl { color: var(--muted); font-size: .8rem; }
.tabs { display: flex; gap: .4rem; margin-bottom: 1rem; }
.tabs button { background: #fff; border: 1px solid var(--line); padding: .5rem .9rem; border-radius: 999px; cursor: pointer; font-weight: 600; }
.tabs button.on { background: var(--accent); color: #fff; border-color: var(--accent); }
.table-wrap { overflow-x: auto; background: var(--card); border: 1px solid var(--line); border-radius: 14px; }
table.grid { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.grid th, table.grid td { padding: .6rem .7rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.grid th { background: var(--bg); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* ---------- Modal / toast ---------- */
.modal-bg { position: fixed; inset: 0; background: rgba(15,23,42,.55); display: grid; place-items: center; z-index: 100; padding: 1rem; }
.modal-bg[hidden], .toast[hidden], [hidden] { display: none !important; }
.modal { background: #fff; border-radius: 18px; padding: 1.6rem; width: min(480px, 100%); position: relative; max-height: 90vh; overflow: auto; }
.modal h2 { font-size: 1.2rem; margin-bottom: .6rem; }
.modal-x { position: absolute; right: .8rem; top: .8rem; background: var(--bg); border: 0; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; }
.toast { position: fixed; left: 50%; bottom: 1.4rem; transform: translateX(-50%); background: var(--navy); color: #fff; padding: .7rem 1.1rem; border-radius: 12px; z-index: 200; font-weight: 500; box-shadow: var(--shadow); max-width: 90vw; }
.toast.err { background: var(--danger); } .toast.ok { background: var(--ok); }

/* ---------- Ayuda ---------- */
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.help-grid ul { margin: .5rem 0 0; padding-left: 1.2rem; line-height: 1.7; }

/* ---------- Footer ---------- */
.footer { margin-top: 3rem; padding: 2rem 0; border-top: 1px solid var(--line); background: #fff; }
.footer-in { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; align-items: center; }
.footer-links { display: flex; gap: 1.2rem; font-weight: 600; }

/* ---------- Recorrido de bienvenida ---------- */
#tourWrap { position: fixed; inset: 0; z-index: 3000; }
#tourHole { position: fixed; border-radius: 12px; box-shadow: 0 0 0 9999px rgba(15, 23, 42, .6); pointer-events: none; transition: all .25s; }
#tourCard { position: fixed; width: min(340px, calc(100vw - 24px)); background: #fff; border-radius: 16px; padding: 16px 18px; box-shadow: 0 20px 50px rgba(0,0,0,.35); }
#tourCard h3 { margin: 2px 0 6px; font-size: 16px; }
#tourCard p { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.tour-step { font-size: 11px; font-weight: 700; letter-spacing: .4px; color: var(--accent); }
.tour-foot { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.tour-foot .spacer { flex: 1; }
.tour-foot .btn { padding: 7px 12px; font-size: 13px; }
#tourWrap.center { background: rgba(15, 23, 42, .6); }

/* ---------- Aviso "Instala la app" ---------- */
.install-bar {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 1rem; z-index: 90;
  width: min(520px, calc(100% - 24px)); background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 16px;
  padding: .7rem .8rem; display: flex; align-items: center; gap: .7rem; box-shadow: 0 16px 40px -12px rgba(15,23,42,.25);
}
.install-bar img { border-radius: 11px; flex: none; }
.install-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.install-txt span { font-size: .82rem; color: var(--muted); }
.install-x { background: none; border: 0; color: var(--muted); cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; flex: none; }
.install-x:hover { background: var(--soft); }
.ios-steps { counter-reset: paso; list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: .8rem; }
.ios-steps li { counter-increment: paso; display: flex; gap: .7rem; align-items: flex-start; line-height: 1.5; }
.ios-steps li::before { content: counter(paso); flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; display: grid; place-items: center; font-size: .85rem; }
.ios-share { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; background: var(--soft); color: #2563eb; vertical-align: middle; }
.admin-entry { display: flex; align-items: center; justify-content: space-between; gap: 1rem; background: var(--accent-soft); color: var(--ink); border: 1px solid #ffd4b8; border-radius: var(--radius); padding: 1rem 1.2rem; margin-bottom: 1rem; max-width: 780px; }
.admin-entry b { display: flex; align-items: center; gap: .5rem; }
.adm-tools { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .8rem; }
.adm-tools input, .adm-tools select { padding: .55rem .7rem; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
.adm-tools input { flex: 1; min-width: 220px; }

/* ---------- Barra inferior (móvil) ---------- */
.bottomnav { display: none; position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); z-index: 60; padding: .35rem .3rem calc(.35rem + env(safe-area-inset-bottom)); }
.bottomnav a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: .1rem; font-size: .68rem; color: var(--muted); padding: .2rem 0; }
.bottomnav a.active { color: var(--accent); }
/* Quién ve qué en la barra de abajo. Va aparte del bloque general de arriba
   porque `.bottomnav a` ya trae `display: flex`, y a eso NO se le gana con una
   clase sola: pesa más una clase + un elemento que una clase. Ese era el fallo
   — «Mensajes» es `auth-only` y se le enseñaba a quien no ha entrado, que al
   pulsarlo iba a parar a la pantalla de acceso sin saber por qué. */
.bottomnav a.auth-only,
.bottomnav a.admin-only,
.bottomnav a.staff-only,
.bottomnav a.dealer-only { display: none; }
body.logged .bottomnav a.auth-only { display: flex; }
body.admin  .bottomnav a.admin-only { display: flex; }
body.staff  .bottomnav a.staff-only { display: flex; }
body.dealer .bottomnav a.dealer-only { display: flex; }
body.staff  .bottomnav a.not-staff { display: none; }
body.dealer .bottomnav a.not-dealer { display: none; }
.bottomnav a svg { width: 22px; height: 22px; }
.bottomnav a.sell svg { width: 38px; height: 38px; padding: 8px; border-radius: 50%; background: var(--accent); color: #fff; margin-top: -14px; box-shadow: 0 6px 14px -4px rgba(255,106,19,.7); }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .cards, .results .cards { grid-template-columns: repeat(3, 1fr); }
  .body-grid { grid-template-columns: repeat(2, 1fr); }
  .searchbox { grid-template-columns: 1fr 1fr; }
  .searchbox .btn { grid-column: 1 / -1; }
  .detail { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 820px) {
  .mainnav { display: none; }
  .search-layout { grid-template-columns: 1fr; }
  .filters { position: static; display: none; }
  .filters.open { display: block; }
  .filters-toggle { display: inline-flex; }
  .cards, .results .cards { grid-template-columns: repeat(2, 1fr); }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .safe-grid, .help-grid { grid-template-columns: 1fr; }
  .sell-banner { flex-direction: column; align-items: flex-start; }
  .specs { grid-template-columns: repeat(2, 1fr); }
  .list-row { grid-template-columns: 90px 1fr; }
  .list-row .actions { grid-column: 1 / -1; justify-content: flex-start; }
  .list-row img, .list-row .noimg { width: 90px; height: 68px; }
  #navSell, #navAccount { display: none; }
  #btnLang span { display: none; }
  .hero { padding: 1.6rem 1.2rem; }
  .bottomnav { display: flex; }
  body { padding-bottom: 68px; }
  /* Mensajería: en el móvil no caben los dos paneles, así que se ve uno u
     otro. /mensajes enseña la lista y /mensajes/12 la conversación, con la
     flecha de atrás para volver. Es como se comporta WhatsApp en el teléfono. */
  .msg-app {
    grid-template-columns: 1fr; gap: 0; margin: .6rem 0;
    /* 66 de la barra de arriba, 68 de la de abajo y el margen de la caja:
       así cabe justo y la página no se desplaza por detrás. */
    height: calc(100vh - 66px - 87px);
    height: calc(100dvh - 66px - 87px);
  }
  .msg-app[data-pane="hilo"] .msg-side { display: none; }
  .msg-app[data-pane="lista"] .msg-main { display: none; }
  .msg-side { border: 0; background: transparent; border-radius: 0; }
  .msg-side-head { padding: .2rem 0 .6rem; border-bottom: 0; }
  .msg-lista { padding: 0; }
  .hilo-atras {
    display: grid; place-items: center; flex: none; width: 40px; height: 40px;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px; color: var(--ink);
  }
  .install-bar { bottom: calc(76px + env(safe-area-inset-bottom)); }
  .toast { bottom: calc(84px + env(safe-area-inset-bottom)); }
}
/* Ya instalada: la barra del sistema no existe, se respeta la zona segura del notch */
@media (display-mode: standalone) {
  .topbar { padding-top: env(safe-area-inset-top); }
}
@media (max-width: 520px) {
  .cards, .results .cards { grid-template-columns: 1fr; }
  .body-grid { grid-template-columns: 1fr 1fr; }
  .searchbox { grid-template-columns: 1fr; }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
  .row3 { grid-template-columns: 1fr; }
}

/* =========================================================
   Equipo: tareas del empleado, ficha del comercio y panel
   ========================================================= */
.lpill { display: inline-block; border-radius: 999px; padding: .15rem .6rem; font-size: .75rem; font-weight: 700; background: var(--bg); color: var(--muted); white-space: nowrap; }
.lpill.st-nuevo { background: #e0f2fe; color: #075985; }
.lpill.st-aviso { background: #fef3c7; color: #92400e; }
.lpill.st-accent { background: var(--accent-soft); color: var(--accent-dark); }
.lpill.st-azul { background: #e0e7ff; color: #3730a3; }
.lpill.st-ok { background: #dcfce7; color: #166534; }
.lpill.st-ok2 { background: #166534; color: #fff; }
.lpill.st-rojo { background: #fee2e2; color: #991b1b; }
/* "Se puede importar": la prioridad al llamar. En azul noche de la marca, que no
   choca con ningún color de estado — el verde ya es "autorizado" y se confundirían. */
.lpill.st-imp { background: var(--ink); color: #fff; display: inline-flex; align-items: center; gap: .25rem; }
.lpill.st-imp svg { width: 13px; height: 13px; }
.tag.warn { background: #fef3c7; color: #92400e; }
.late { color: var(--danger); font-weight: 600; }
.pre { white-space: pre-wrap; }
.warn-box, .ok-box { border-radius: 10px; padding: .6rem .8rem; font-size: .92rem; }
.warn-box { background: #fef3c7; color: #78350f; }
.ok-box { background: #dcfce7; color: #14532d; }

/* Mis tareas */
.task-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; margin-bottom: 1rem; }
.task-group { margin: 1.4rem 0 .4rem; }
.task-group h2 { font-size: 1.05rem; display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
.task-group h2 .count { background: var(--navy); color: #fff; border-radius: 999px; font-size: .75rem; padding: .05rem .5rem; }
details.task-group summary { cursor: pointer; list-style: none; }
details.task-group summary::-webkit-details-marker { display: none; }
.task-list { display: grid; gap: .5rem; margin-top: .5rem; }
.task-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .85rem 1rem; transition: border-color .15s, transform .15s; }
.task-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.task-card .tc-main { display: flex; flex-direction: column; min-width: 0; }
.task-card .tc-main b { overflow: hidden; text-overflow: ellipsis; }
.task-card .tc-side { display: flex; flex-direction: column; align-items: flex-end; gap: .2rem; text-align: right; flex: none; }

/* Ficha del comercio */
.lead-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; }
.lead-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 1.2rem; align-items: start; }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; }
.step { display: grid; grid-template-columns: 34px 1fr; gap: .8rem; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.step h3 { font-size: 1.02rem; margin: .3rem 0 .6rem; }
.step-num { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; background: var(--bg); color: var(--muted); }
.step.current { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,106,19,.12); }
.step.current .step-num { background: var(--accent); color: #fff; }
.step.done .step-num { background: #dcfce7; color: var(--ok); }
.step.locked { opacity: .6; }
.step-body { min-width: 0; }
.call-btns { display: flex; gap: .5rem; flex-wrap: wrap; }
.say { background: var(--accent-soft); border-radius: 10px; padding: .55rem .8rem; margin-bottom: .6rem; }
.script { white-space: pre-wrap; background: #f8fafc; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 10px; padding: .8rem 1rem; line-height: 1.6; font-size: .98rem; }
.outcomes { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.outcomes .btn { white-space: normal; text-align: center; }
.when-box { margin-top: .7rem; }
.step textarea, .side-card textarea { min-height: 64px; }
.when-box .adm-tools { margin: .3rem 0 0; }
.mini-steps { margin: 0 0 .8rem; padding-left: 1.2rem; font-size: .92rem; display: grid; gap: .35rem; }
.err-list { margin: .4rem 0 0; padding-left: 1.2rem; font-size: .88rem; color: #7f1d1d; max-height: 220px; overflow: auto; }
.side-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.side-card h2 { font-size: 1rem; margin-bottom: .6rem; }
.side-head { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.side-head h2 { margin: 0; }
.kv { display: grid; grid-template-columns: 90px 1fr; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed var(--line); font-size: .9rem; }
.kv:last-child { border-bottom: 0; }
.kv > span { color: var(--muted); font-size: .8rem; padding-top: .1rem; }
.kv > div { min-width: 0; overflow-wrap: anywhere; }
.timeline { list-style: none; margin: .8rem 0 0; padding: 0; display: grid; gap: .7rem; max-height: 520px; overflow: auto; }
.timeline li { display: grid; grid-template-columns: 20px 1fr; gap: .5rem; font-size: .88rem; }
.timeline li > svg { color: var(--accent); margin-top: .15rem; }
.timeline li > div { min-width: 0; overflow-wrap: anywhere; }

/* Panel: comercios, usuarios, ajustes */
.chips { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .8rem; }
.chip { background: #fff; border: 1px solid var(--line); border-radius: 999px; padding: .35rem .75rem; cursor: pointer; font-size: .85rem; }
.chip b { margin-left: .2rem; }
.chip.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.bulk-bar { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; background: var(--navy); color: #fff; border-radius: 12px; padding: .6rem .8rem; margin-bottom: .8rem; }
.bulk-bar select { padding: .45rem .6rem; border-radius: 10px; border: 0; color: var(--ink); }
.user-actions { display: flex; gap: .4rem; flex-wrap: wrap; border-top: 1px solid var(--line); margin-top: 1rem; padding-top: 1rem; }
.settings-wrap { display: block; }
table.grid td input[type="checkbox"], table.grid th input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--accent); }

@media (max-width: 1024px) {
  .lead-grid { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .task-sum { grid-template-columns: repeat(2, 1fr); }
  .outcomes { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .task-card { flex-direction: column; align-items: flex-start; }
  .task-card .tc-side { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .5rem; text-align: left; }
  .step { grid-template-columns: 1fr; padding: .9rem; }
  .step-num { width: 30px; height: 30px; }
  .call-btns .btn { flex: 1 1 100%; }
  .kv { grid-template-columns: 1fr; gap: .1rem; }
}
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--bg); color: var(--muted); cursor: not-allowed; }

/* ---------- Concesionario: equipo, verificación y reservados ---------- */
.tabs { flex-wrap: wrap; }
.tabs button svg { width: 16px; height: 16px; vertical-align: -3px; margin-right: .3rem; }
.card-badge.reserved { background: #c2410c; }
.sold-banner.reserved { background: #ffedd5; color: #9a3412; }
.pill.reservado { background: #ffedd5; color: #9a3412; }
.tag.verified { background: #e0f2fe; color: #0369a1; }
.tag svg { width: 13px; height: 13px; }
.kyc-pill { display: inline-flex; align-items: center; gap: .3rem; border-radius: 999px; padding: .15rem .6rem; font-size: .78rem; font-weight: 700; background: #f1f5f9; color: #475569; vertical-align: middle; }
.kyc-pill svg { width: 14px; height: 14px; }
.kyc-pill.kyc-verificado { background: #e0f2fe; color: #0369a1; }
.kyc-pill.kyc-pendiente { background: #fef3c7; color: #92400e; }
.kyc-pill.kyc-rechazado { background: #fee2e2; color: #991b1b; }
.admin-entry .kyc-pill { margin-left: .4rem; }
.member-card { display: flex; gap: .7rem; align-items: center; max-width: 780px; }
.member-card svg { color: var(--accent); flex: none; }
.dl-h2 { font-size: 1.1rem; margin: 1.6rem 0 .7rem; display: flex; align-items: center; gap: .45rem; }
.dl-h2 svg { width: 20px; height: 20px; color: var(--accent); }
.act-list { max-height: none; }
.member-row { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; }
.member-row.off { opacity: .65; }
.member-row .actions { display: flex; flex-wrap: wrap; gap: .4rem; justify-content: flex-end; }
.perm-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.preset-list { display: grid; gap: .5rem; }
.preset-list label.preset { display: flex; gap: .6rem; align-items: flex-start; border: 1px solid var(--line); border-radius: 12px; padding: .6rem .8rem; cursor: pointer; font-weight: 400; color: var(--ink); font-size: .9rem; margin: 0; }
.preset-list label.preset:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.preset-list label.preset input { width: 18px; height: 18px; flex: none; margin: .1rem 0 0; padding: 0; accent-color: var(--accent); }
.preset-list label.preset span { flex: 1; min-width: 0; }
.preset small { display: block; color: var(--muted); font-size: .8rem; }
.preset b { font-weight: 700; }
.perm-list { display: grid; gap: .4rem; }
.kyc-why h2 { display: flex; gap: .5rem; align-items: center; }
.why-list { list-style: none; padding: 0; margin: .6rem 0 0; display: grid; gap: .5rem; }
.why-list li { display: flex; gap: .5rem; align-items: flex-start; }
.why-list svg { color: var(--ok); flex: none; width: 18px; height: 18px; margin-top: .15rem; }
.kyc-why { margin-bottom: 1rem; }
.seg-row { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* ---------- Importación desde la web del dealer (equipo AutoFullRD) ---------- */
.verify-box { background: #f8fafc; border: 1px solid var(--line); border-left: 4px solid var(--accent); border-radius: 12px; padding: .8rem 1rem; margin: .4rem 0 .9rem; font-size: .92rem; }
.verify-box ul { margin: .5rem 0 .6rem 1.1rem; display: grid; gap: .2rem; }
.web-import { margin: .6rem 0; }
.web-progress { display: flex; gap: .8rem; align-items: center; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: .8rem 1rem; margin-top: .6rem; }
.web-progress > div { flex: 1; min-width: 0; }
.spinner { width: 22px; height: 22px; border: 3px solid #bfdbfe; border-top-color: #2563eb; border-radius: 50%; animation: spin 1s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 4s; } }
.web-table td { vertical-align: top; }
.web-table td.miss { background: #fff7ed; }
.web-table tr.dup { opacity: .55; }
.web-table .wf { display: block; width: 100%; min-width: 96px; padding: .3rem .4rem; border: 1px solid #fdba74; border-radius: 8px; font: inherit; font-size: .85rem; margin-bottom: .25rem; background: #fff; }
.ok-txt { color: var(--ok); font-weight: 600; }
.bulk-fills { display: grid; gap: .4rem; margin: .6rem 0; }
.bulk-fill { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; font-size: .88rem; }
.bulk-fill select { padding: .3rem .4rem; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.csv-alt { margin-top: 1rem; border-top: 1px dashed var(--line); padding-top: .8rem; }
.csv-alt summary { cursor: pointer; font-weight: 600; color: var(--muted); }
.kyc-admin { background: #f8fafc; border: 1px solid var(--line); border-radius: 12px; padding: .7rem .9rem; margin: .8rem 0; font-size: .9rem; }
.kyc-review .kv { grid-template-columns: 130px 1fr; }
.doc-list { list-style: none; padding: 0; display: grid; gap: .4rem; }
.doc-list svg { width: 16px; height: 16px; vertical-align: -3px; }
@media (max-width: 640px) {
  .member-row { grid-template-columns: 1fr; }
  .member-row .seller-avatar { display: none; }
  .member-row .actions { justify-content: flex-start; }
  .kyc-review .kv { grid-template-columns: 1fr; }
}
.web-ico { width: 15px; height: 15px; color: #2563eb; vertical-align: -2px; }
@media (max-width: 900px) and (min-width: 641px) {
  .member-row { grid-template-columns: auto 1fr; }
  .member-row .actions { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 640px) {
  #kycForm .row2, #mForm .row2 { grid-template-columns: 1fr; }
}
/* Tabletas y portátiles pequeños: el menú de arriba solo con iconos (el texto sale al pasar el ratón). */
@media (min-width: 821px) and (max-width: 1100px) {
  .mainnav a span { display: none; }
  .mainnav a { padding: .5rem .6rem; }
}
/* Empleados y administración tienen más pestañas: solo iconos hasta 1400 px para que la barra no se salga */
@media (min-width: 1101px) and (max-width: 1400px) {
  body.staff .mainnav a span, body.admin .mainnav a span { display: none; }
  body.staff .mainnav a, body.admin .mainnav a { padding: .5rem .6rem; }
}
@media (max-width: 640px) {
  .admin-entry { flex-wrap: wrap; }
  .admin-entry .btn { width: 100%; justify-content: center; }
  .member-card { flex-wrap: wrap; }
}

/* ---------- Anuncios destacados ("Top") ---------- */
.card.top { border-color: #f5b301; box-shadow: 0 0 0 2px rgba(245, 179, 1, .35), 0 10px 24px -14px rgba(180, 120, 0, .5); }
.card-badge.top { background: #f5b301; color: #1f1500; display: inline-flex; align-items: center; gap: .25rem; }
.card-badge.top svg { width: 13px; height: 13px; }
.pill.top, .tag.top { background: #fef3c7; color: #8a5a00; display: inline-flex; align-items: center; gap: .25rem; }
.pill.top svg, .tag.top svg { width: 13px; height: 13px; }
.top-star { color: #f5b301; width: 22px; height: 22px; vertical-align: -3px; }
.top-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem; }
.top-plan { display: flex; gap: .6rem; align-items: center; border: 1px solid var(--line); border-radius: 14px; padding: .8rem 1rem; cursor: pointer; }
.top-plan:has(input:checked) { border-color: #f5b301; background: #fffbeb; }
.top-plan input { width: 18px; height: 18px; accent-color: #d99a00; flex: none; }
.top-plan > span { display: grid; }
.top-price { font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.top-steps { margin: .4rem 0 1rem 1.2rem; display: grid; gap: .7rem; }
.bank-box { white-space: pre-wrap; background: #f8fafc; border: 1px solid var(--line); border-radius: 10px; padding: .7rem .9rem; margin-top: .4rem; font: inherit; font-weight: 600; }
.top-ref { background: #fff7ed; border: 1px dashed var(--accent); border-radius: 8px; padding: .1rem .45rem; letter-spacing: .03em; }
.top-settings summary { cursor: pointer; }
.top-settings summary svg { width: 16px; height: 16px; vertical-align: -3px; }

/* ---------- Recuadro del chasis (VIN) en publicar ---------- */
.vin-box { background: var(--accent-soft); border: 1px dashed var(--accent); border-radius: 14px; padding: .9rem 1rem; margin-bottom: 1.1rem; }
.vin-title { font-weight: 800; color: var(--ink); display: flex; align-items: center; gap: .4rem; margin: 0 0 .2rem; }
.vin-title svg { width: 18px; height: 18px; color: var(--accent); }
.vin-sub { color: var(--muted); font-size: .9rem; margin: 0 0 .7rem; }
.vin-row { display: flex; gap: .5rem; flex-wrap: wrap; }
.vin-row input { flex: 1 1 240px; min-width: 0; text-transform: uppercase; letter-spacing: .06em; font-weight: 600;
  border: 1px solid var(--line); border-radius: 10px; padding: .6rem .8rem; background: var(--card); font-family: inherit; font-size: 1rem; }
.vin-row input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* El chasis se escribe en mayúsculas, pero el texto de ejemplo no: "EJ.:" se lee fatal. */
.vin-row input::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; }
.vin-row .btn { flex: none; background: var(--card); }
.vin-msg { margin: .6rem 0 0; font-size: .9rem; font-weight: 600; border-radius: 10px; padding: .5rem .7rem; }
.vin-msg.ok { background: #ecfdf5; color: #166534; }
.vin-msg.aviso { background: #fffbeb; color: var(--warn); }
.vin-msg.error { background: #fef2f2; color: var(--danger); }
.vin-box .hint { margin: .6rem 0 0; display: flex; align-items: center; gap: .35rem; }
.vin-box .hint svg { width: 13px; height: 13px; flex: none; }

/* Aviso de "esto lo rellenamos por ti" */
.auto-note { display: flex; align-items: center; gap: .4rem; margin: -.3rem 0 .9rem; font-size: .88rem; color: var(--muted); }
.auto-note svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* ---------- Barra de "qué tan completo está el anuncio" ---------- */
.quality { margin-top: .5rem; max-width: 420px; }
.quality-top { display: flex; justify-content: space-between; align-items: baseline; gap: .5rem; font-size: .85rem; }
.quality-label { color: var(--muted); font-weight: 600; }
.quality-pct { font-weight: 800; color: var(--ink); }
.quality-bar { height: 7px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: .25rem; }
.quality-bar > span { display: block; height: 100%; border-radius: 99px; transition: width .4s ease; }
.q-bajo .quality-bar > span { background: var(--danger); }
.q-medio .quality-bar > span { background: #f5b301; }
.q-alto .quality-bar > span { background: var(--ok); }
.q-alto .quality-pct { color: var(--ok); }
.quality-tips { margin-top: .35rem; font-size: .84rem; color: var(--muted); line-height: 1.45; }
.quality-tips b { color: var(--ink); }

/* ---------- Chequeo automático: avisos en el panel ---------- */
.flags { display: grid; gap: .3rem; max-width: 380px; }
.flag { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; font-weight: 700; border-radius: 8px; padding: .15rem .45rem; }
.flag svg { width: 13px; height: 13px; flex: none; }
.flag.grave { background: #fef2f2; color: var(--danger); }
.flag.aviso { background: #fffbeb; color: var(--warn); }
.flag-detail { display: block; margin: -.15rem 0 .25rem .2rem; font-size: .78rem; }
.stat.alerta { border-color: var(--warn); background: #fffbeb; }
.stat.alerta .val { color: var(--warn); }

/* Anuncio guardado pero sin publicar (le falta el WhatsApp) */
.pill.borrador { background: #fef3c7; color: #8a5a00; }
.draft-box { display: flex; align-items: flex-start; gap: .6rem; }
.draft-box > svg { width: 20px; height: 20px; flex: none; margin-top: .1rem; }

/* ---------- Búsqueda: atajos y filtros puestos ----------
   Antes los 13 filtros vivían en un panel lateral, todos con el mismo peso y
   con un botón "Aplicar" que había que acordarse de pulsar. En el móvil ni se
   veían. Ahora: atajos de un toque arriba, y cada filtro puesto se enseña como
   una etiqueta con su "×" para poder quitarlo sin abrir nada. */
.quick-row { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .5rem; margin-bottom: .2rem; scrollbar-width: none; min-width: 0; max-width: 100%; }
.quick-row::-webkit-scrollbar { display: none; }
.chip.quick { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; cursor: pointer; flex: none; }
.chip.quick svg { width: 15px; height: 15px; }
.chip.quick.on { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.quick.on:hover { color: #fff; }

.active-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .6rem; }
.chip.active-f { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; background: var(--accent-soft); border-color: #ffd4b8; color: var(--accent-dark); font-size: .85rem; }
.chip.active-f svg { width: 14px; height: 14px; opacity: .75; }
.chip.active-f:hover { background: #ffe3d2; color: var(--accent-dark); }

/* Cuántos filtros hay puestos, en el botón del móvil */
.fcount { background: var(--accent); color: #fff; border-radius: 999px; font-size: .72rem; font-weight: 700; padding: .05rem .4rem; margin-left: .3rem; }

.more-filters > summary { cursor: pointer; font-weight: 600; padding: .5rem 0; color: var(--accent); list-style: none; }
.more-filters > summary::-webkit-details-marker { display: none; }
.more-filters > summary::before { content: "+ "; font-weight: 700; }
.more-filters[open] > summary::before { content: "− "; }

/* ---------- Financiamiento por cuotas ----------
   Plegado a propósito en el formulario de publicar: un vendedor que no
   financia no debe ver ni un campo de esto. */
.fin-box { border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; margin: 1rem 0; background: #fafbfe; }
.fin-box > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: .4rem; }
.fin-box > summary::-webkit-details-marker { display: none; }
.fin-box > summary svg { width: 18px; height: 18px; color: var(--accent); }
.fin-preview { margin-top: .8rem; padding: .8rem; background: var(--accent-soft); border-radius: 12px; }
.fin-cuota { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; }
.fin-cuota b { font-size: 1.5rem; color: var(--accent-dark); }

/* En la tarjeta de la búsqueda: en RD mucha gente mira la cuota antes que el precio */
.card-fin { display: flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 600; color: var(--accent-dark); margin-top: .15rem; }
.card-fin svg { width: 14px; height: 14px; }

/* Calculadora en la ficha del anuncio */
.fin-calc { margin-top: 1rem; }
.fin-big { display: flex; align-items: baseline; gap: .35rem; flex-wrap: wrap; margin: .6rem 0 1rem; }
.fin-big b { font-size: 2rem; color: var(--accent-dark); letter-spacing: -.02em; }
.fin-range { display: block; margin-bottom: .9rem; font-size: .9rem; }
.fin-range span { display: block; margin-bottom: .3rem; color: var(--muted); }
.fin-range b { color: var(--ink); }
.fin-range input[type=range] { width: 100%; accent-color: var(--accent); }
.fin-tot { border-top: 1px solid var(--line); padding-top: .6rem; font-weight: 600; }

/* ---------- La casilla de escribir qué buscas ----------
   Es la entrada principal del portal y estaba igual que los demás campos.
   Ahora destaca: borde naranja, más alta y letra más grande. */
.field-q input {
  border: 2px solid var(--accent) !important;
  padding: .85rem 1rem !important;
  font-size: 1.05rem;
  border-radius: 12px !important;
  box-shadow: 0 2px 10px -4px rgba(255, 106, 19, .35);
}
.field-q input::placeholder { color: #9aa5b5; }
.field-q input:focus { box-shadow: 0 0 0 4px rgba(255, 106, 19, .18) !important; }

/* ---------- Reputación y reseñas de concesionarios ---------- */
.stars { display: inline-flex; gap: 1px; vertical-align: -2px; }
.stars svg { width: 15px; height: 15px; color: #d7dce5; fill: #d7dce5; }
.stars svg.on { color: #f5b301; fill: #f5b301; }
.stars.big svg { width: 22px; height: 22px; }

.rep-box { display: grid; grid-template-columns: auto 1fr; gap: 1.5rem; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.1rem; margin-bottom: 1rem; }
.rep-media { display: grid; justify-items: center; gap: .15rem; }
.rep-media b { font-size: 2.4rem; line-height: 1; letter-spacing: -.02em; }
.rep-barras { display: grid; gap: .25rem; }
.rep-fila { display: grid; grid-template-columns: 12px 1fr 28px; gap: .5rem; align-items: center; font-size: .82rem; }
.rep-barra { height: 7px; background: var(--line); border-radius: 99px; overflow: hidden; }
.rep-barra > span { display: block; height: 100%; background: #f5b301; border-radius: 99px; }

.reviews { display: grid; gap: .8rem; }
.review { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; }
.review-top { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .35rem; }
.review p { color: var(--ink); line-height: 1.55; }
.review-reply { margin-top: .6rem; padding: .6rem .8rem; background: var(--bg); border-radius: 10px; border-left: 3px solid var(--accent); }
.review-reply b { font-size: .85rem; color: var(--muted); }

/* Elegir estrellas al escribir la opinión */
.star-pick { display: flex; gap: .25rem; justify-content: center; }
.star-pick button { background: none; border: 0; cursor: pointer; padding: .2rem; line-height: 0; }
.star-pick svg { width: 34px; height: 34px; color: #d7dce5; fill: #d7dce5; transition: transform .1s; }
.star-pick button.on svg { color: #f5b301; fill: #f5b301; }
.star-pick button:hover svg { transform: scale(1.12); }

.detail-views { margin-top: .3rem; display: flex; align-items: center; gap: .3rem; }
.detail-views svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .rep-box { grid-template-columns: 1fr; gap: .9rem; }
}

/* ---------- Publicar: los dos caminos con su nombre ----------
   La gente creía que el chasis era un paso obligatorio más. Ahora se ve que
   arriba está la forma rápida y abajo la manual, con un "o" en medio. */
.via-titulo { display: flex; align-items: center; gap: .5rem; font-weight: 700; margin: 1.2rem 0 .5rem; color: var(--ink); }
.via-num { width: 22px; height: 22px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-dark); display: grid; place-items: center; font-size: .78rem; font-weight: 800; flex: none; }
.via-o { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 .2rem; color: var(--muted); font-size: .85rem; }
.via-o::before, .via-o::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.vin-title b { color: var(--accent-dark); }

/* ---------- El panel de filtros, marcado como la casilla de buscar ---------- */
.filters { border: 2px solid var(--accent) !important; box-shadow: 0 2px 12px -6px rgba(255, 106, 19, .4); }
.filters h3 { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }

/* ---------- Buscar en la barra de arriba ----------
   Igual que el botón naranja de la portada: es la acción principal del portal
   y estaba como un enlace más del menú. */
.mainnav a#navSearch { background: var(--accent); color: #fff; font-weight: 700; }
.mainnav a#navSearch:hover { background: var(--accent-dark); color: #fff; }