/* ============================================================================
   FullCarro · Componentes
   Todo el color y la medida sale de tokens.css. Si algo se ve mal, primero
   revisa que use var(--token) y no un valor a fuego.
   ============================================================================ */
* { box-sizing: border-box; }
body {
  margin: 0; background: var(--fondo); color: var(--tinta);
  font-family: var(--fuente); line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.contenedor { max-width: var(--ancho-contenedor); margin: 0 auto; padding: 0 var(--esp-4); }

/* ── Cabecera azul marino con buscador ─────────────────────────────────────*/
.cab { background: var(--navy); position: sticky; top: 0; z-index: var(--z-cabecera); }

/* Header del PANEL (app mode): solo logo "FC" + avatar. Barra fina, sin
   buscador ni "+ Publicar" — el usuario ya está adentro trabajando. */
.cab--app { background: var(--navy); }
.cab__inner--app { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px 20px; max-width: 1400px; margin: 0 auto; height: 56px; }
.cab__marca-fc { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--acento), #ff7a2e); color: var(--blanco);
  font-family: var(--fuente-titulo, inherit); font-weight: 900; font-size: 18px;
  letter-spacing: -0.5px; text-decoration: none; line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease; }
.cab__marca-fc:hover { transform: scale(1.05); box-shadow: 0 4px 12px rgba(255,149,64,.35); }
@media (max-width: 500px) {
  .cab__inner--app { padding: 8px 14px; height: 52px; }
  .cab__marca-fc { width: 36px; height: 36px; font-size: 16px; }
}
.cab__inner { display: flex; align-items: center; gap: var(--esp-5); height: var(--alto-cabecera); }
.marca { font-size: var(--texto-xl); font-weight: var(--peso-extra); letter-spacing: -.5px; white-space: nowrap; }
.marca__full { color: var(--acento); }
.marca__carro { color: var(--blanco); }
.cab__bandera { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cab__bandera .bandera { width: 30px; height: auto; display: block; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0,0,0,.3); }
.cab__buscar { flex: 1; display: flex; align-items: center; background: var(--blanco);
  border-radius: var(--radio); overflow: hidden; max-width: 620px; }
.cab__lupa { padding: 0 4px 0 12px; color: var(--gris); font-size: var(--texto-sm); }
.cab__buscar input { flex: 1; border: none; padding: 11px 12px; font-size: var(--texto-base); outline: none; }
.cab__buscar button { background: var(--acento); color: var(--blanco); border: none; padding: 11px 20px;
  font-weight: var(--peso-fuerte); cursor: pointer; font-size: var(--texto-base); }
.cab__buscar button:hover { background: var(--acento-oscuro); }
.cab__nav { display: flex; align-items: center; gap: var(--esp-4); margin-left: auto; }
.cab__nav a { color: var(--blanco); font-weight: var(--peso-medio); font-size: var(--texto-base); white-space: nowrap; }
.cab__publicar { background: var(--acento); color: var(--blanco) !important;
  padding: 9px 18px; border-radius: var(--radio);
  display: inline-flex; align-items: center; gap: 4px; line-height: 1; }
.cab__publicar:hover { background: var(--acento-oscuro); }
.cab__publicar-plus { font-weight: 700; }
/* Botón buscar del header: por defecto muestra texto, en mobile pasa a icono */
.cab__buscar-ico { display: none; width: 20px; height: 20px; }
.cab__usuario { color: #cfd6e0 !important; }

/* Bloque de usuario en el header: SÓLO el círculo (avatar). Va justo al
   lado del "+ Publicar" (el buscador con flex:1 los empuja al extremo derecho
   del contenedor juntos).
   - Logueado: foto del perfil o iniciales sobre fondo naranja marca.
   - Anónimo: círculo gris con silueta estándar de "iniciar sesión". */
.cab__user { display: inline-flex; align-items: center; justify-content: center;
  padding: 0; border-radius: 50%; text-decoration: none;
  transition: transform .12s ease, box-shadow .12s ease; line-height: 0; }
.cab__user:hover { transform: scale(1.05); box-shadow: 0 0 0 3px rgba(255,255,255,.14); }
.cab__user-foto { width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
  background: var(--acento); color: var(--blanco); display: inline-flex;
  align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
  border: 2px solid rgba(255,255,255,.14); flex-shrink: 0; }
.cab__user-foto--vacio { background: linear-gradient(135deg, var(--acento), #ff7a2e); }
/* Estado anónimo: círculo gris con silueta blanca. Patrón universal login. */
.cab__user-foto--anonimo { background: rgba(255,255,255,.10); color: #cfd6e0;
  padding: 6px; border: 2px solid rgba(255,255,255,.16); }
.cab__user--login:hover .cab__user-foto--anonimo { background: rgba(255,255,255,.16); color: #fff; }
/* Chevron ▼ al lado del avatar: sugiere que el bloque abre panel/menu.
   El avatar pasa a inline-flex para que chevron y foto vayan alineados. */
.cab__user { gap: 4px; }
.cab__user-flecha { width: 12px; height: 12px; color: #cfd6e0; flex-shrink: 0; }
.cab__user:hover .cab__user-flecha { color: #fff; }
@media (max-width: 500px) {
  .cab__user-foto { width: 32px; height: 32px; font-size: 12px; }
  .cab__user-flecha { display: none; }
}
@media (max-width: 760px) {
  .cab__inner { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 12px; }
  .cab__buscar { order: 3; flex-basis: 100%; max-width: none; }
}
/* Móvil chico (≤500px): compactamos header + Publicar/Buscar como iconos.
   Diseño tipo Mercadolibre/Uber: el "+" naranja compacto + botón lupa. */
@media (max-width: 500px) {
  .cab__inner { padding: 10px 12px; gap: 8px; }
  .cab__nav { gap: 8px; flex-wrap: nowrap; }
  /* "+" Publicar → cuadrado 40x40 solo con el signo + */
  .cab__publicar { padding: 0; width: 40px; height: 40px;
    justify-content: center; font-size: 22px; }
  .cab__publicar-txt { display: none; }
  .cab__buscar { min-width: 0; }
  .cab__buscar input { min-width: 0; padding: 10px 8px; font-size: 14px; }
  /* "Buscar" → cuadrado con icono lupa */
  .cab__buscar button { padding: 0; width: 42px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: 8px; }
  .cab__buscar-txt { display: none; }
  .cab__buscar-ico { display: inline-block; }
  .cab__bandera .bandera { width: 22px; }
}
/* Móvil MUY chico (≤360px): "+ Publicar" un poco más pequeño. */
@media (max-width: 360px) {
  .cab__publicar { width: 36px; height: 36px; font-size: 20px; }
}

/* ── Migas de pan ──────────────────────────────────────────────────────────*/
.miga { background: var(--acento-suave); border-bottom: 1px solid var(--acento-suave-borde); font-size: var(--texto-sm); }
.miga .contenedor { padding: 10px 16px; color: var(--gris); }
.miga a { color: var(--acento); font-weight: var(--peso-medio); }
.miga span { color: var(--gris); }

/* ── Listado público ───────────────────────────────────────────────────────*/
.listado { padding: var(--esp-6) var(--esp-4) var(--esp-12); }
.listado__cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.listado__cab h1 { font-size: var(--texto-xl); margin: 0; }
.listado__total { color: var(--gris); margin: 0; }
.filtros { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; }
.filtros select { padding: 10px 14px; border: 1px solid var(--linea); border-radius: var(--radio-md);
  background: var(--blanco); font-size: var(--texto-base); cursor: pointer; min-width: 160px; }

/* ── Tarjeta de vehículo (listado) ─────────────────────────────────────────*/
.rejilla { display: grid; gap: var(--esp-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tarjeta { background: var(--blanco); border-radius: var(--radio-md); overflow: hidden;
  box-shadow: var(--sombra); transition: transform var(--trans), box-shadow var(--trans); }
.tarjeta:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.tarjeta__foto { position: relative; aspect-ratio: 4 / 3; background: var(--fondo); }
.tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; }
.tarjeta__sinfoto { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--gris); font-size: var(--texto-sm); }
.tarjeta__destacado { position: absolute; top: 10px; left: 10px; background: var(--acento); color: var(--blanco);
  font-size: var(--texto-xs); font-weight: var(--peso-fuerte); padding: 4px 10px; border-radius: var(--radio-full); }
.tarjeta__cuerpo { padding: 14px; }
.tarjeta__precio { font-size: var(--texto-lg); font-weight: var(--peso-extra); color: var(--acento); margin: 0 0 4px; }
.tarjeta__titulo { font-size: var(--texto-base); font-weight: var(--peso-medio); margin: 0 0 8px; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tarjeta__datos { display: flex; gap: 12px; color: var(--gris); font-size: var(--texto-sm); margin: 0 0 4px; }
.tarjeta__lugar { color: var(--gris); font-size: var(--texto-sm); margin: 0; }
.vacio { color: var(--gris); padding: 40px 0; text-align: center; }

/* ── Pie ───────────────────────────────────────────────────────────────────*/
.pie { border-top: 1px solid var(--linea); background: var(--blanco); padding: var(--esp-6) 0; margin-top: var(--esp-10); }
.pie p { color: var(--gris); font-size: var(--texto-sm); margin: 0; text-align: center; }

/* ── Formularios de cuenta (login, registro, recuperar) ────────────────────*/
.contenedor-estrecho { max-width: 460px; margin: var(--esp-10) auto; padding: 0 var(--esp-4); }
.tarjeta-form { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md);
  padding: var(--esp-8); box-shadow: var(--sombra); }
.tarjeta-form h1 { font-size: var(--texto-xl); margin: 0 0 6px; }
.form-intro { color: var(--gris); margin: 0 0 20px; }
.form-pie { margin: 14px 0 0; font-size: var(--texto-sm); color: var(--gris); }

/* ── Registro por pasos (Typeform) ── */
.reg__prog { height: 4px; background: var(--linea); border-radius: 999px; overflow: hidden; margin: 0 0 22px; }
.reg__prog-bar { display: block; height: 100%; width: 25%; background: var(--acento); border-radius: 999px; transition: width .35s ease; }
.reg__paso { animation: reg-in .28s ease; }
@keyframes reg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.reg__volver { background: none; border: none; color: var(--gris); font-size: var(--texto-sm); cursor: pointer; padding: 0; margin: 0 0 10px; }
.reg__volver:hover { color: var(--acento); }
.reg .btn--grande { width: 100%; margin-top: 8px; }
/* Casillas del código de 6 dígitos */
.cod6 { display: flex; gap: 8px; justify-content: space-between; margin: 4px 0 6px; }
.cod6 input { width: 100%; aspect-ratio: 1 / 1; text-align: center; font-size: 26px; font-weight: var(--peso-extra);
  color: var(--slate); border: 1.5px solid var(--linea); border-radius: var(--radio); min-width: 0; }
.cod6 input:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,149,64,.15); }
.reg__reenvio { margin: 14px 0 0; font-size: var(--texto-sm); color: var(--gris); }
.reg__link { background: none; border: none; color: var(--acento); font-weight: var(--peso-medio); cursor: pointer; padding: 0; font-size: inherit; }
.reg__link:disabled { color: var(--gris); cursor: default; }
.reg__timer { color: var(--gris); }
.form-pie a { color: var(--acento); font-weight: var(--peso-medio); }
/* Campo de contraseña con ojo (ver/ocultar) + botón "Generar clave segura". */
.clave-wrap { position: relative; display: block; }
.clave-wrap input { width: 100%; padding-right: 42px; }
.clave-ojo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  background: none; border: 0; padding: 6px; cursor: pointer; color: var(--gris);
  display: flex; align-items: center; }
.clave-ojo:hover { color: var(--acento); }
.clave-ojo svg { width: 20px; height: 20px; }
.clave-generar { margin: 8px 0 0; background: none; border: 1px solid var(--linea);
  border-radius: var(--radio-md); padding: 7px 12px; font-size: var(--texto-sm);
  font-weight: var(--peso-medio); color: var(--acento); cursor: pointer; }
.clave-generar:hover { background: var(--fondo, #f5f6f8); border-color: var(--acento); }

/* Aviso legal al pie del formulario (letra chica, separada por una línea). */
.form-legal { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--linea);
  font-size: var(--texto-xs); line-height: 1.5; color: var(--gris); }
.form-legal a { color: var(--acento); }

/* Sección "Cuenta profesional" (auto-servicio de upgrade en Ajustes). */
.ajustes-pro { margin-top: 28px; padding: 20px; border: 1px solid var(--linea);
  border-radius: var(--radio-md); background: var(--blanco); }
.ajustes-pro h2 { margin: 0 0 6px; font-size: var(--texto-md); }
.ajustes-pro p { margin: 0 0 14px; color: var(--gris); font-size: var(--texto-sm); line-height: 1.5; }

/* Header mínimo de las páginas de cuenta: solo logo + bandera, centrado. */
.cab--auth { border-bottom: 1px solid var(--linea); }
.cab__inner--auth { justify-content: flex-start; gap: var(--esp-3); }

/* Páginas legales (términos, privacidad). */
.legal { margin: var(--esp-10) 0; max-width: 760px; }
.legal h1 { font-size: var(--texto-xl); margin: 0 0 6px; }
.legal h2 { font-size: var(--texto-md); margin: 30px 0 8px; color: var(--slate); }
.legal p, .legal li { color: var(--slate); line-height: 1.7; font-size: var(--texto-base); }
.legal p { margin: 0 0 12px; }
.legal ul, .legal ol { margin: 0 0 12px; padding-left: 22px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--acento); font-weight: var(--peso-medio); }
.legal__fecha { color: var(--gris); font-size: var(--texto-sm); margin: 0 0 24px; }
.legal__intro { color: var(--slate); line-height: 1.7; }
.legal__nota { color: var(--gris); line-height: 1.6; }
.legal a { color: var(--acento); font-weight: var(--peso-medio); }

.formulario .campo { margin-bottom: var(--esp-4); }
.campo label { display: block; font-size: var(--texto-sm); font-weight: var(--peso-medio); margin-bottom: 6px; }
.campo input[type=text], .campo input[type=email], .campo input[type=password],
.campo input[type=number], .campo input[type=url], .campo input[type=tel],
.campo select, .campo textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: var(--texto-base); font-family: inherit; background: var(--blanco); }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,149,64,.15); }
.campo__ayuda { display: block; color: var(--gris); font-size: var(--texto-xs); margin-top: 4px; }
.campo__error { display: block; color: var(--peligro); font-size: var(--texto-sm); margin-top: 4px; }
/* Enlace dentro de un error (p. ej. "Iniciar sesión"): azul y subrayado para que se lea como enlace. */
.campo__error a { color: #1a56db; text-decoration: underline; font-weight: var(--peso-medio); }
.campo__error a:hover { color: #143fa8; }

/* Teléfono con banderita: bandera + indicativo + número en una sola caja. */
.tel-campo { display: flex; align-items: center; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--blanco); overflow: hidden; }
.tel-campo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,149,64,.15); }
.tel-bandera { display: flex; align-items: center; padding: 0 2px 0 10px; }
.tel-bandera img { display: block; border-radius: 2px; }
.tel-campo select.tel-cc, .tel-campo input.tel-num {
  border: 0; border-radius: 0; box-shadow: none; background: transparent;
  width: auto; font-size: var(--texto-base); font-family: inherit; color: inherit; }
.tel-campo select.tel-cc { padding: 10px 4px; cursor: pointer; }
.tel-campo input.tel-num { flex: 1; padding: 10px 12px; min-width: 0; }
.tel-campo select.tel-cc:focus, .tel-campo input.tel-num:focus { outline: none; box-shadow: none; }

/* Checkbox de consentimiento de contacto (premarcado). */
.check-contacto { display: flex; align-items: flex-start; gap: 9px; margin: 16px 0 0;
  font-size: var(--texto-sm); line-height: 1.4; cursor: pointer; }
.check-contacto input[type=checkbox] { width: 18px; height: 18px; margin: 1px 0 0;
  flex: 0 0 auto; accent-color: var(--acento); cursor: pointer; }
/* Aviso que aparece si desmarcan la autorización de contacto (bloquea el registro). */
.check-contacto__aviso { margin: 10px 0 0; padding: 12px 14px;
  border: 1px solid rgba(255,149,64,.45); border-left: 3px solid var(--acento);
  border-radius: var(--radio-md); background: rgba(255,149,64,.08);
  font-size: var(--texto-sm); line-height: 1.5; color: var(--texto, #24303f); }
.check-contacto__aviso[hidden] { display: none; }

/* ── Botones ───────────────────────────────────────────────────────────────*/
.btn { display: inline-block; background: var(--acento); color: var(--blanco); border: none;
  padding: 10px 18px; border-radius: var(--radio); font-size: var(--texto-base);
  font-weight: var(--peso-medio); cursor: pointer; text-align: center; }
.btn:hover { background: var(--acento-oscuro); }
/* Botón deshabilitado (p. ej. registro sin autorización de contacto): gris e inerte. */
.btn:disabled, .btn[disabled] { background: var(--linea, #d5d9e0); color: var(--gris, #8a93a3);
  cursor: not-allowed; pointer-events: none; }
.btn--grande { width: 100%; padding: 12px; font-size: var(--texto-md); }
.btn--texto { background: none; color: var(--gris); }
.btn--texto:hover { background: none; color: var(--tinta); }
.btn--peligro { background: var(--peligro); }
.btn--peligro:hover { background: var(--peligro-oscuro); }

/* ── Avisos ────────────────────────────────────────────────────────────────*/
.aviso { padding: 12px 16px; border-radius: var(--radio); margin-bottom: var(--esp-4); font-size: var(--texto-sm); }
.aviso--error { background: var(--peligro-bg); color: var(--peligro-texto); border: 1px solid var(--peligro-borde); }
.aviso--success { background: var(--exito-bg); color: var(--exito-texto); border: 1px solid var(--exito-borde); }

/* ── Panel del vendedor ────────────────────────────────────────────────────*/
.panel { display: grid; gap: var(--esp-6); max-width: var(--ancho-contenedor); margin: var(--esp-6) auto; padding: 0 var(--esp-4); }
@media (min-width: 800px) { .panel { grid-template-columns: 220px 1fr; } }
.panel__lado { display: flex; flex-direction: column; gap: var(--esp-4); }
.panel__nav { display: flex; flex-direction: column; gap: 2px; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 8px; }
.panel__nav a { padding: 10px 14px; border-radius: var(--radio); font-weight: var(--peso-medio); color: var(--gris); }
.panel__nav a:hover { background: var(--fondo); color: var(--tinta); }
.panel__nav a.activo { background: var(--acento); color: var(--blanco); }
.panel__salir button { width: 100%; background: none; border: 1px solid var(--linea);
  color: var(--gris); padding: 10px; border-radius: var(--radio); cursor: pointer; font-size: var(--texto-sm); }
.panel__salir button:hover { border-color: var(--peligro); color: var(--peligro); }

/* MOBILE (≤ 800px): el sidebar vertical largo empujaba TODO el contenido
   fuera del viewport. Se convierte en tabs horizontales scrolleables sticky
   arriba (patrón GitHub/Vercel/Linear). Cerrar sesión pasa al final del
   contenido, no molesta al scrollear la nav. */
@media (max-width: 799px) {
  .panel { gap: 12px; padding: 0; margin: 0 auto; min-width: 0; }
  /* CRÍTICO: min-width:0 en los grid items evita que el contenido interno
     (nav con 10 tabs = ~894px de contenido) explote la celda del grid y
     desborde el viewport. Sin esto, overflow-x:auto en el nav no funciona. */
  .panel__lado { position: sticky; top: 0; z-index: 20; gap: 0;
    background: var(--blanco); border-bottom: 1px solid var(--linea);
    min-width: 0; width: 100%; max-width: 100%; }
  .panel__cuerpo { min-width: 0; width: 100%; max-width: 100%; padding: 0 12px 20px; }
  /* Fade a la derecha del nav para indicar visualmente que hay más tabs. */
  .panel__nav { flex-direction: row; overflow-x: auto; overflow-y: hidden;
    border: 0; border-radius: 0; padding: 0 8px; gap: 0; width: 100%; max-width: 100%;
    scrollbar-width: none; -ms-overflow-style: none;
    -webkit-mask-image: linear-gradient(to right, black 92%, transparent);
            mask-image: linear-gradient(to right, black 92%, transparent); }
  .panel__nav::-webkit-scrollbar { display: none; }
  .panel__nav a { flex: 0 0 auto; padding: 12px 14px; border-radius: 0;
    border-bottom: 2px solid transparent; white-space: nowrap; font-size: 14px; }
  .panel__nav a.activo { background: transparent; color: var(--acento);
    border-bottom-color: var(--acento); }
  .panel__nav a:hover { background: transparent; color: var(--tinta); }
  .panel__nav .nav-badge { margin-left: 4px; }
  /* Cerrar sesión: se oculta del sticky bar (queda accesible desde "Mi perfil"
     que ya lo tiene). Meterlo en el sticky top hacía que "Cerrar sesión"
     apareciera antes que el contenido, dando presencia visual innecesaria. */
  .panel__salir { display: none; }
  .panel__cuerpo h1 { font-size: 20px; margin: 12px 0 14px; }
  .panel__seccion { padding: 14px; margin-top: 12px; min-width: 0; }
  /* Defensa global: nada dentro del panel debe desbordar horizontalmente */
  .panel * { max-width: 100%; }
  .panel img, .panel video { height: auto; }
}

/* Bottom tab bar del panel (estilo app móvil). Solo visible en ≤799px.
   5 accesos rápidos: Inicio · Inventario · [+ Publicar destacado] · Mensajes · Alertas.
   El del medio es un FAB (floating action button) elevado — patrón Instagram/ML. */
.panel-bottom { display: none; }
@media (max-width: 799px) {
  .panel-bottom { display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 50; background: var(--blanco); border-top: 1px solid var(--linea);
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    justify-content: space-around; align-items: flex-end;
    box-shadow: 0 -2px 12px rgba(15,23,42,.06); }
  .panel-bottom__item { flex: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 2px; padding: 6px 4px;
    color: var(--gris); text-decoration: none; font-size: 10.5px;
    font-weight: 600; min-width: 0; transition: color .15s ease; position: relative; }
  .panel-bottom__item svg { width: 22px; height: 22px; }
  .panel-bottom__item span:last-child { font-size: 10.5px; letter-spacing: .1px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .panel-bottom__item--activo { color: var(--acento); }
  .panel-bottom__item--activo::before { content: ''; position: absolute; top: 0;
    left: 30%; right: 30%; height: 2px; background: var(--acento); border-radius: 2px; }
  /* FAB central: Publicar, elevado y en naranja. Circular. */
  .panel-bottom__item--cta { flex: 0 0 auto; margin-top: -14px; }
  .panel-bottom__cta-btn { display: inline-flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 50%;
    background: linear-gradient(135deg, var(--acento), #ff7a2e); color: #fff;
    box-shadow: 0 6px 16px rgba(255,149,64,.45), 0 2px 4px rgba(0,0,0,.08);
    transition: transform .12s ease; }
  .panel-bottom__item--cta:active .panel-bottom__cta-btn { transform: scale(.94); }
  .panel-bottom__cta-btn svg { width: 24px; height: 24px; }
  /* Badge pequeño sobre el icono (Mensajes / Alertas sin leer) */
  .panel-bottom__icowrap { position: relative; display: inline-flex; }
  .panel-bottom__badge { position: absolute; top: -4px; right: -6px;
    min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
    background: var(--acento); color: #fff; font-size: 10px; font-weight: 700;
    display: inline-flex; align-items: center; justify-content: center;
    border: 2px solid var(--blanco); }

  /* Ocultamos en el top tab bar los items que YA están en el bottom bar
     (Inicio, Inventario, Alertas, Mensajes) para no duplicarlos. Publicar
     nunca vivió en el top nav; solo en el bottom bar y en el header desktop.
     En el top bar quedan: Leads, Favoritos, Analíticas, Mi Equipo, Mis Planes, Mi perfil. */
  .panel__nav-item--mobile-hide { display: none !important; }

  /* Espacio al pie del contenido para que el bottom bar no tape el último
     elemento (altura del bar + safe-area). */
  .panel__cuerpo { padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px)) !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE HOTFIXES (auditoría 2026-07-28)
   ═════════════════════════════════════════════════════════════════════════ */

/* Fix #2: Tabla del dashboard → card view en móvil (evita scroll horizontal
   de tabla con 7 columnas). Requiere data-label en cada <td> del template
   inicio.html; sin data-label, degrada bien al mostrar los valores centrados. */
@media (max-width: 700px) {
  .dash-tabla-wrap { overflow: visible; }
  .dash-tabla, .dash-tabla tbody, .dash-tabla tr { display: block; width: 100%; }
  .dash-tabla thead { display: none; }
  .dash-tabla tr { border: 1px solid var(--linea); border-radius: 12px;
    padding: 12px; margin-bottom: 10px; background: #fff; }
  .dash-tabla td { display: flex; justify-content: space-between; align-items: center;
    padding: 6px 0; border: 0; text-align: right; gap: 12px; }
  .dash-tabla td::before { content: attr(data-label); color: var(--gris);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px; }
  .dash-tabla td:first-child { border-bottom: 1px solid var(--linea);
    padding-bottom: 10px; margin-bottom: 6px; }
  .dash-tabla td:first-child::before { display: none; }
  .dash-veh__titulo { max-width: none; }
}

/* Fix #3: Padding global compacto + cabecera de sección apilada + CTAs full-width.
   El SaaS moderno reduce padding en móvil (Vercel, Linear, Stripe hacen 12-14px). */
@media (max-width: 600px) {
  .panel__cuerpo h1 { font-size: 22px; margin-bottom: 14px; }
  .panel__seccion { padding: 14px; border-radius: 10px; }
  .panel__seccion-cab { flex-direction: column; align-items: stretch; gap: 10px; }
  .panel__seccion-cab .btn { width: 100%; }
}

/* Fix #4: Grids rígidas de 3-col colapsan bien en tablet (761-900px que hoy
   quedaba a medio hacer). Cubre .lead (CRM), .eq-item (Mi Equipo) y .pcard
   (Inventario). */
@media (max-width: 900px) {
  .lead { grid-template-columns: 1fr; gap: 12px; }
  .eq-item { grid-template-columns: 1fr; }
  .pcard { grid-template-columns: 104px 1fr; }
  .pcard__acciones { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap;
    min-width: 0; gap: 6px; }
  .pcard__acciones > * { flex: 1 1 46%; }
}

/* Fix #5: 100dvh en Mensajes (evita que el input quede debajo de las barras
   dinámicas del navegador iOS/Chrome mobile). + KPIs a 2 columnas + campos
   de checkbox a 1 columna. */
.cbox { height: calc(100dvh - 210px); min-height: 440px; }
@media (max-width: 760px) {
  .cbox { height: calc(100dvh - 170px); }
}
@media (max-width: 600px) {
  .metricas { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .metrica { padding: 12px; }
  .metrica__num { font-size: 22px; }
  .campo--ancho .checkboxselectmultiple, .campo--ancho ul { columns: 1; }
  .form-rejilla { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .form-rejilla { grid-template-columns: 1fr; }
}
.panel__cuerpo h1 { font-size: var(--texto-xl); margin: 0 0 20px; }
.panel__seccion { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 20px; margin-top: 20px; }
.panel__seccion-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.panel__seccion-cab h1, .panel__seccion-cab h2 { margin: 0; }

.metricas { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--esp-4); }
.metrica { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 20px; text-align: center; }
.metrica__num { display: block; font-size: 30px; font-weight: var(--peso-extra); color: var(--acento); }
.metrica__lbl { color: var(--gris); font-size: var(--texto-sm); }
/* Leads: se distinguen del resto de KPIs con un borde de acento sutil. */
.metrica--lead { border-color: #FFD9B0; background: #FFFBF6; }

/* Lista de últimos interesados en el dashboard. */
.lista-leads li { display: flex; align-items: center; gap: 10px; }
.lista-leads .lead-fecha { margin-left: auto; color: var(--gris); font-size: var(--texto-sm); white-space: nowrap; }
.lead-canal { flex: 0 0 auto; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; color: #fff; }
.lead-canal--whatsapp { background: #25D366; }
.lead-canal--llamada { background: #374B5C; }
.lead-canal--chat { background: #FF9540; }

/* ── CRM: pipeline de leads (panel/leads.html) ───────────────────────────── */
.leads-cab h1 { margin: 0 0 2px; }
.leads-sub { color: var(--gris); font-size: var(--texto-sm); margin: 0 0 18px; }

.leads-filtros { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.leads-buscar { flex: 1 1 240px; min-width: 0; padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--radio-md); font: inherit; }
.leads-canal { padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--radio-md); font: inherit; background: var(--blanco); }

.leads-tabs { display: flex; gap: 6px; overflow-x: auto; border-bottom: 1px solid var(--linea); margin-bottom: 16px; padding-bottom: 0; }
.leads-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; color: var(--gris); text-decoration: none; font-size: var(--texto-sm); font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; }
.leads-tab:hover { color: var(--tinta, #314352); }
.leads-tab--on { color: var(--acento); border-bottom-color: var(--acento); }
.leads-tab__n { background: #EEF2F6; color: var(--gris); border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 700; }
.leads-tab--on .leads-tab__n { background: #FFF0DD; color: var(--acento); }

.leads-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lead { display: grid; grid-template-columns: 1.3fr 1fr 1.4fr; gap: 16px; align-items: start; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 14px; }

.lead__veh { display: flex; gap: 10px; align-items: center; min-width: 0; }
.lead__foto { width: 64px; height: 48px; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #EEF2F6; }
.lead__foto--vacia { display: inline-block; }
.lead__vehinfo { min-width: 0; }
.lead__titulo { display: block; font-weight: 700; color: var(--tinta, #314352); text-decoration: none; font-size: var(--texto-sm); line-height: 1.3; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lead__titulo:hover { color: var(--acento); }
.lead__precio { color: var(--gris); font-size: 12.5px; }

.lead__quien { display: flex; flex-direction: column; gap: 6px; }
.lead__persona { display: flex; flex-direction: column; gap: 2px; font-size: var(--texto-sm); }
.lead__anon { color: var(--gris); font-weight: 600; }
.lead__tel { color: var(--acento); text-decoration: none; font-size: 12.5px; }
.lead__fecha { color: var(--gris); font-size: 11.5px; }

.lead__gestion { display: flex; flex-direction: column; gap: 8px; }
/* Interesados (particular): estado + WhatsApp en fila, sin notas ni asesor. */
.lead__gestion--simple { flex-direction: row; align-items: flex-end; flex-wrap: wrap; }
.lead__gestion--simple .lead__campo { flex: 1 1 130px; }
.lead__campo { display: flex; flex-direction: column; gap: 3px; }
.lead__campo-lbl { font-size: 11px; font-weight: 700; color: var(--gris); text-transform: uppercase; letter-spacing: .02em; }
.lead__estado { padding: 7px 10px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; background: var(--blanco); }
.lead__notas { padding: 7px 10px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; resize: vertical; }
.lead__acciones { display: flex; gap: 8px; justify-content: flex-end; }
.btn--wa { background: #25D366; color: #fff; }
.btn--sec { background: #EEF2F6; color: var(--tinta, #314352); }

.leads-vacio { text-align: center; padding: 48px 16px; color: var(--gris); }
.leads-vacio p { margin: 0 0 6px; }
.leads-vacio__sub { font-size: var(--texto-sm); }

@media (max-width: 760px) {
  .lead { grid-template-columns: 1fr; gap: 12px; }
  .lead__quien { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px; }
}

/* ── Panel del comprador: insignia del menú, búsquedas guardadas, alertas ── */
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; background: var(--acento); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; vertical-align: middle; }
a.metrica { text-decoration: none; color: inherit; transition: border-color .12s; }
a.metrica:hover { border-color: var(--acento); }

/* Búsquedas guardadas */
.bg-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.bg-item { display: grid; grid-template-columns: 1fr auto auto; gap: 14px; align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 14px; }
.bg-item__info { min-width: 0; }
.bg-item__nombre { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--tinta, #314352); text-decoration: none; }
.bg-item__nombre:hover { color: var(--acento); }
.bg-item__meta { display: block; color: var(--gris); font-size: 12px; margin-top: 2px; }
.bg-item__avisos { display: flex; gap: 14px; }
.bg-chk { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--gris); white-space: nowrap; cursor: pointer; }
.bg-item__del { margin: 0; }

/* Bandeja de alertas */
.al-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.al-item { display: flex; gap: 12px; align-items: center; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 12px; }
.al-item--nueva { border-left: 3px solid var(--acento); background: #FFFBF6; }
.al-item__foto { flex: 0 0 auto; width: 84px; height: 60px; border-radius: 8px; overflow: hidden; background: #EEF2F6; display: block; }
.al-item__foto img { width: 100%; height: 100%; object-fit: cover; }
.al-item__foto--vacia { display: block; width: 100%; height: 100%; }
.al-item__cuerpo { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.al-tipo { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; }
.al-tipo--price_drop { color: #1FA463; }
.al-tipo--new_match { color: var(--acento); }
.al-item__titulo { font-weight: 700; color: var(--tinta, #314352); text-decoration: none; font-size: var(--texto-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.al-item__titulo:hover { color: var(--acento); }
.al-precio-viejo { color: var(--gris); text-decoration: line-through; font-size: 12.5px; margin-right: 6px; }
.al-precio-nuevo { color: #1FA463; font-weight: 700; }
.al-item__fecha { flex: 0 0 auto; color: var(--gris); font-size: 11.5px; white-space: nowrap; }
/* Secciones de la página unificada Alertas (bandeja + búsquedas). */
.al-sec { margin-top: 28px; }
.al-sec:first-of-type { margin-top: 16px; }
.al-sec__titulo { font-size: var(--texto-md); margin: 0 0 12px; color: var(--slate); }
.al-sec__sub { color: var(--gris); font-weight: 400; font-size: var(--texto-sm); }
.al-vacio { background: var(--blanco); border: 1px dashed var(--linea); border-radius: var(--radio-md); padding: 24px; text-align: center; }
.al-vacio p { margin: 0 0 4px; color: var(--slate); }
.al-vacio__sub { color: var(--gris); font-size: var(--texto-sm); margin-bottom: 12px !important; }

/* El "Guardar búsqueda" del buscador pasó de <a> a <button>: reset. */
button.filtros2__guardar { background: none; border: 0; cursor: pointer; font: inherit; }

@media (max-width: 760px) {
  .bg-item { grid-template-columns: 1fr; gap: 10px; }
  .bg-item__avisos { flex-wrap: wrap; }
}

/* ── Chat interno: bandeja ── */
.chat-bandeja { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.chat-conv { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); }
.chat-conv--nueva { border-left: 3px solid var(--acento); background: #FFFBF6; }
.chat-conv__link { display: flex; gap: 12px; align-items: center; padding: 12px; text-decoration: none; color: inherit; }
.chat-conv__foto { flex: 0 0 auto; width: 60px; height: 45px; object-fit: cover; border-radius: 8px; background: #EEF2F6; }
.chat-conv__foto--vacia { display: inline-block; }
.chat-conv__cuerpo { flex: 1 1 auto; min-width: 0; }
.chat-conv__fila { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chat-conv__quien { color: var(--tinta, #314352); font-size: var(--texto-sm); }
.chat-conv__hora { color: var(--gris); font-size: 11.5px; white-space: nowrap; }
.chat-conv__veh { display: block; color: var(--gris); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-conv__preview { display: block; color: var(--tinta, #314352); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.chat-conv__badge { flex: 0 0 auto; min-width: 20px; height: 20px; padding: 0 6px; display: inline-flex; align-items: center; justify-content: center; background: var(--acento); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; }

.chat-conv--activa { border-color: var(--acento); box-shadow: 0 0 0 2px rgba(255,149,64,.15); }
.chat-conv__link { position: relative; }

/* ── Chat interno: dos paneles (lista + hilo) ── */
.cbox__titulo { margin: 0 0 14px; }
.cbox { display: grid; grid-template-columns: 340px 1fr; gap: 16px; height: calc(100vh - 210px); min-height: 440px; }
.cbox__lista { overflow-y: auto; padding-right: 2px; }
.cbox__hilo { border: 1px solid var(--linea); border-radius: var(--radio-md); background: var(--blanco); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
/* Placeholder rico cuando no hay conversación abierta: icono grande + título + descripción */
.cbox__placeholder { margin: auto; color: var(--gris); text-align: center;
  padding: 40px 24px; max-width: 420px;
  display: flex; flex-direction: column; align-items: center; gap: 12px; }
.cbox__placeholder-ico { width: 72px; height: 72px; border-radius: 50%;
  background: rgba(255,149,64,.12); color: var(--acento);
  display: inline-flex; align-items: center; justify-content: center; }
.cbox__placeholder-ico svg { width: 34px; height: 34px; }
.cbox__placeholder-titulo { font-size: 17px; font-weight: 700;
  color: var(--slate); margin: 6px 0 0; }
.cbox__placeholder-desc { font-size: var(--texto-sm); line-height: 1.5;
  color: var(--gris); margin: 0; }

.cthread { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #FAFBFC; }
.cthread__cab { display: flex; gap: 12px; align-items: center; padding: 14px 18px;
  border-bottom: 1px solid var(--linea); flex: 0 0 auto; background: var(--blanco); }
.cthread__volver { display: none; background: none; border: 0; font-size: 22px; line-height: 1; color: var(--tinta, #314352); cursor: pointer; }
.cthread__avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%;
  object-fit: cover; background: #EEF2F6; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; color: var(--slate); font-size: 14px; }
.cthread__quien { min-width: 0; }
.cthread__quien strong { display: flex; align-items: center; gap: 6px;
  color: var(--tinta, #314352); font-size: 15px; }
.cthread__punto { display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 2px rgba(34,197,94,.18); }
.cthread__asesor { display: block; color: var(--gris); font-size: 12px;
  font-style: italic; margin-top: 1px; }
.cthread__veh { color: var(--acento); font-size: 12.5px; text-decoration: none; }
.cthread__msgs { flex: 1 1 auto; overflow-y: auto; padding: 20px 20px 8px;
  display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.cthread__vacio { color: var(--gris); text-align: center; margin: auto; }

/* Separador de fecha estilo píldora ("Hoy", "Ayer", "27 Jul") */
.msg-fecha { display: flex; justify-content: center; margin: 14px 0 8px; }
.msg-fecha span { background: rgba(15,23,42,.06); color: var(--slate);
  font-size: 11px; font-weight: 600; padding: 4px 12px; border-radius: 999px;
  letter-spacing: .3px; text-transform: capitalize; }

/* Burbujas modernas: fila con avatar 32px + burbuja con más aire y sombra sutil */
.msg { display: flex; align-items: flex-end; gap: 8px; max-width: 78%; }
.msg--mio { align-self: flex-end; flex-direction: row-reverse; }
.msg--suyo { align-self: flex-start; }
.msg__avatar { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; background: #EEF2F6; display: inline-flex; align-items: center;
  justify-content: center; font-weight: 700; color: var(--slate); font-size: 12px; }
.msg__avatar--vacio { background: linear-gradient(135deg, #E0E7EF, #C7D2E0); }
.msg__cuerpo { min-width: 0; display: flex; flex-direction: column; }
.msg--mio .msg__cuerpo { align-items: flex-end; }
.msg__burbuja { padding: 11px 15px; border-radius: 18px; font-size: 14.5px;
  line-height: 1.45; word-break: break-word; white-space: pre-wrap;
  box-shadow: 0 1px 1px rgba(15,23,42,.04); }
.msg--mio .msg__burbuja { background: var(--acento); color: #fff;
  border-bottom-right-radius: 6px; }
.msg--suyo .msg__burbuja { background: #fff; color: var(--tinta, #314352);
  border: 1px solid var(--linea); border-bottom-left-radius: 6px; }
.msg__meta { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px;
  padding: 0 4px; opacity: 0; transition: opacity .15s ease; }
.msg:hover .msg__meta { opacity: 1; }
.msg--mio .msg__meta { opacity: .7; }   /* siempre visibles los ticks propios */
.msg__hora { font-size: 10.5px; color: var(--gris); }
.msg__ticks { font-size: 11px; color: var(--gris); line-height: 1; letter-spacing: -1px; }
.msg__ticks--leido { color: #2f8cff; }   /* azul WhatsApp-style */

/* Input moderno: textarea auto-grow + botón enviar circular. Se acota a un
   max-width y se centra dentro del panel del hilo para no quedar absurdamente
   largo en pantallas anchas (coherente con las burbujas que van al 78%). */
.cthread__form { display: flex; gap: 10px; padding: 14px 20px; align-items: flex-end;
  border-top: 1px solid var(--linea); background: var(--blanco); flex: 0 0 auto;
  width: 100%; max-width: 780px; margin-left: auto; margin-right: auto;
  box-sizing: border-box; }
.cthread__form textarea { flex: 1 1 auto; resize: none; padding: 12px 16px;
  border: 1px solid var(--linea); border-radius: 22px; font: inherit; max-height: 120px;
  background: #F5F7FA; transition: border-color .15s ease, background .15s ease; }
.cthread__form textarea:focus { border-color: var(--acento); background: var(--blanco);
  outline: none; box-shadow: 0 0 0 3px rgba(255,149,64,.14); }
.cthread__enviar { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%;
  background: var(--acento); color: #fff; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform .12s ease, filter .12s ease;
  box-shadow: 0 2px 8px rgba(255,149,64,.35); }
.cthread__enviar:hover { transform: scale(1.05); filter: brightness(1.05); }
.cthread__enviar:active { transform: scale(.96); }
.cthread__enviar svg { transform: translateX(1px); }

@media (max-width: 760px) {
  .cbox { grid-template-columns: 1fr; height: calc(100vh - 170px); }
  .cbox__hilo { display: none; }
  .cbox--abierto .cbox__lista { display: none; }
  .cbox--abierto .cbox__hilo { display: flex; }
  .cthread__volver { display: inline-block; }
}

/* Botón de chat en la tarjeta del vendedor (ficha) */
.btn-contacto-form { margin: 0; }
.btn-contacto-form .btn-contacto { width: 100%; cursor: pointer; }
.btn-contacto--chat { background: var(--acento); color: var(--blanco); border: 1px solid var(--acento); }
.btn-contacto--chat:hover { background: var(--acento-oscuro); border-color: var(--acento-oscuro); }
.sticky-cta__chatform { margin: 0; display: contents; }

/* ── Analíticas del vendedor ── */
.an-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.an-cab h1 { margin: 0; }
.an-cab__sub { margin: 2px 0 0; color: var(--gris); font-size: var(--texto-sm); }
.an-cab__acciones { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.an-rango { display: inline-flex; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; position: relative; }
.an-rango__op { padding: 7px 14px; font-size: var(--texto-sm); font-weight: 600; color: var(--gris); text-decoration: none; cursor: pointer; user-select: none; }
.an-rango__op--on { background: var(--acento); color: #fff; }
/* Rango personalizado: <details> abre un mini popover con dos inputs date */
.an-rango__custom { position: relative; }
.an-rango__custom > summary { list-style: none; }
.an-rango__custom > summary::-webkit-details-marker { display: none; }
.an-rango__custom[open] > summary { background: rgba(255,149,64,.10); color: var(--acento); }
.an-rango__custom--on > summary { background: var(--acento); color: #fff; }
.an-rango__form { position: absolute; right: 0; top: calc(100% + 6px); z-index: 10;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 12px;
  padding: 12px; display: flex; flex-direction: column; gap: 8px; min-width: 220px;
  box-shadow: 0 8px 24px rgba(15,23,42,.12); }
.an-rango__form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--gris); font-weight: 600; }
.an-rango__form input { padding: 8px 10px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; }
.an-rango__form .btn { margin-top: 4px; }

/* 7 KPI cards de analíticas — paridad visual con co.fullcarro.com. Cada card
   tiene un icono a la izquierda con fondo tintado (alpha 12%) y color de canal,
   número grande a la derecha y label pequeño abajo. */
.an-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px; margin-bottom: 20px; }
.an-kpi { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px;
  transition: transform .12s ease, box-shadow .12s ease; }
.an-kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(15,23,42,.06); }
.an-kpi__ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center; }
.an-kpi__ico svg { width: 22px; height: 22px; }
.an-kpi__body { display: flex; flex-direction: column; min-width: 0; }
.an-kpi__num { font-size: 22px; font-weight: 800; color: var(--slate); line-height: 1.15;
  font-variant-numeric: tabular-nums; }
.an-kpi__lbl { font-size: 11px; font-weight: 700; color: var(--gris);
  text-transform: uppercase; letter-spacing: .3px; }
/* Colores por card — mismos que co.fullcarro.com */
.an-kpi--leads   .an-kpi__ico { background: rgba(240,153,101,.12); color: #F09965; }
.an-kpi--calls   .an-kpi__ico { background: rgba(39,174,96,.12);   color: #27AE60; }
.an-kpi--wa      .an-kpi__ico { background: rgba(37,211,102,.12);  color: #25D366; }
.an-kpi--chat    .an-kpi__ico { background: rgba(156,106,222,.12); color: #9C6ADE; }
.an-kpi--views   .an-kpi__ico { background: rgba(79,118,223,.12);  color: #4F76DF; }
.an-kpi--conv    .an-kpi__ico { background: rgba(242,153,74,.12);  color: #F2994A; }
.an-kpi--pending .an-kpi__ico { background: rgba(148,163,184,.14); color: #64748b; }
.an-kpi--alerta  .an-kpi__ico { background: rgba(239,68,68,.14);   color: #dc2626; }
.an-kpi--alerta  .an-kpi__num { color: #dc2626; }
@media (max-width: 600px) {
  .an-kpis { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .an-kpi { padding: 12px; gap: 10px; }
  .an-kpi__ico { width: 36px; height: 36px; border-radius: 10px; }
  .an-kpi__ico svg { width: 18px; height: 18px; }
  .an-kpi__num { font-size: 18px; }
  .an-kpi__lbl { font-size: 10px; }
}
.an-card { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 18px; margin-bottom: 14px; }
.an-card__tit { font-size: 15px; color: var(--tinta, #314352); margin: 0 0 14px; }
.an-card__cab { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.an-card__cab .an-card__tit { margin: 0; }
.an-card__sub { color: var(--gris); font-size: 12.5px; font-weight: 500; }

/* Leyenda horizontal para gráfica multi-serie */
.an-leyenda-h { display: flex; flex-wrap: wrap; gap: 16px; margin-bottom: 8px; font-size: var(--texto-sm); }
.an-leyenda-h__it { display: inline-flex; align-items: center; gap: 6px; color: var(--tinta, #314352); }
.an-leyenda-h__it b { color: var(--slate); font-weight: 700; }
.an-leyenda-h__pt { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }

.an-linea--multi { height: 200px; }

/* Tabla Top 10 con desglose por canal y CTR */
.an-top-wrap { overflow-x: auto; margin: 0 -18px; padding: 0 18px; }
.an-top-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.an-top-tabla th { text-align: left; padding: 10px 8px; border-bottom: 1px solid var(--linea);
  font-size: 11px; font-weight: 700; color: var(--gris); text-transform: uppercase;
  letter-spacing: .3px; white-space: nowrap; }
.an-top-tabla td { padding: 12px 8px; border-bottom: 1px solid var(--linea);
  vertical-align: middle; color: var(--slate); }
.an-top-tabla tbody tr:hover { background: rgba(255,149,64,.04); }
.an-top-tabla tbody tr:last-child td { border-bottom: 0; }
.an-top-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.an-top-tabla__pos { width: 44px; text-align: center; }
.an-top-tabla__medalla { display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%; background: #EEF2F6;
  color: var(--gris); font-weight: 700; font-size: 12px; }
.an-top-tabla__medalla--1 { background: linear-gradient(135deg, #FFD770, #F4A100); color: #fff; }
.an-top-tabla__medalla--2 { background: linear-gradient(135deg, #D6DEE7, #A7B4C4); color: #fff; }
.an-top-tabla__medalla--3 { background: linear-gradient(135deg, #E9A87C, #C97644); color: #fff; }
.an-top-tabla__id a { color: var(--acento); text-decoration: none; font-weight: 700;
  font-variant-numeric: tabular-nums; }
.an-top-tabla__id a:hover { text-decoration: underline; }
.an-top-tabla__veh a { color: var(--slate); text-decoration: none; font-weight: 600; }
.an-top-tabla__veh a:hover { color: var(--acento); }
.an-top-tabla__val--call { color: #27AE60; font-weight: 600; }
.an-top-tabla__val--wa   { color: #25D366; font-weight: 600; }
.an-top-tabla__val--chat { color: #9C6ADE; font-weight: 600; }
.an-top-tabla__total { font-weight: 800; color: var(--slate); }
.an-top-tabla__ctr   { color: var(--acento); font-weight: 700; }

@media (max-width: 600px) {
  .an-top-tabla { font-size: 12.5px; }
  .an-top-tabla th, .an-top-tabla td { padding: 8px 6px; }
  .an-top-tabla__medalla { width: 22px; height: 22px; font-size: 11px; }
}

/* CTA "Ver todos los leads →" en la cabecera de la card */
.an-vertodos { color: var(--acento); text-decoration: none; font-weight: 600;
  font-size: var(--texto-sm); white-space: nowrap; }
.an-vertodos:hover { text-decoration: underline; }

/* Chip de canal en tabla de leads recientes (paridad con lead-canal del dashboard) */
.an-canal-chip { display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; color: #fff; text-transform: uppercase;
  letter-spacing: .3px; white-space: nowrap; }
.an-canal-chip--whatsapp { background: #25D366; }
.an-canal-chip--llamada  { background: #27AE60; }
.an-canal-chip--chat     { background: #9C6ADE; }

/* Chip de estado del lead */
.an-estado-chip { display: inline-block; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; white-space: nowrap; }
.an-estado-chip--nuevo      { background: rgba(59,130,246,.14); color: #2563eb; }
.an-estado-chip--contactado { background: rgba(255,149,64,.14); color: var(--acento); }
.an-estado-chip--visito     { background: rgba(156,106,222,.14); color: #9C6ADE; }
.an-estado-chip--cerrado    { background: rgba(34,197,94,.14); color: #16a34a; }
.an-estado-chip--perdido    { background: rgba(148,163,184,.14); color: #64748b; }

/* Fecha relativa en la tabla — más suave visualmente */
.an-fecha { color: var(--gris); font-size: 12.5px; white-space: nowrap; }

/* Score badge (0-100) con color por rango: alto=verde, medio=naranja, bajo=gris */
.an-score { display: inline-block; min-width: 32px; padding: 3px 8px;
  border-radius: 8px; font-weight: 800; font-size: 12.5px; text-align: center;
  font-variant-numeric: tabular-nums; }
.an-score--alto  { background: rgba(34,197,94,.14);  color: #16a34a; }
.an-score--medio { background: rgba(255,149,64,.14); color: var(--acento); }
.an-score--bajo  { background: rgba(148,163,184,.14); color: #64748b; }
.an-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.an-linea { width: 100%; height: 150px; display: block; }
.an-linea__ejes { position: relative; height: 16px; margin-top: 2px; }
.an-linea__x { position: absolute; transform: translateX(-50%); font-size: 10.5px; color: var(--gris); white-space: nowrap; }
.an-linea__pico { color: var(--gris); font-size: 12px; margin-top: 8px; }

.an-dona-wrap { display: flex; gap: 18px; align-items: center; }
.an-dona { width: 130px; height: 130px; flex: 0 0 auto; }
.an-dona__n { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 20px; fill: var(--tinta, #314352); }
.an-dona__lbl { font-size: 9px; fill: var(--gris); text-transform: uppercase; letter-spacing: .05em; }
.an-leyenda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: var(--texto-sm); }
.an-leyenda li { display: flex; align-items: center; gap: 8px; color: var(--tinta, #314352); }
.an-leyenda__pt { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.an-leyenda__pct { color: var(--gris); margin-left: auto; }

.an-embudo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.an-embudo__fila { display: flex; justify-content: space-between; font-size: var(--texto-sm); margin-bottom: 4px; color: var(--tinta, #314352); }
.an-barra { height: 8px; background: #EEF2F6; border-radius: 8px; overflow: hidden; }
.an-barra__fill { display: block; height: 100%; background: var(--acento); border-radius: 8px; }
.an-barra--top { flex: 1 1 auto; }

.an-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.an-top li { display: flex; align-items: center; gap: 12px; }
.an-top__nombre { flex: 0 0 40%; color: var(--tinta, #314352); text-decoration: none; font-size: var(--texto-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.an-top__nombre:hover { color: var(--acento); }
.an-top__n { flex: 0 0 auto; font-weight: 700; color: var(--acento); min-width: 24px; text-align: right; }

@media (max-width: 760px) {
  .an-grid2 { grid-template-columns: 1fr; }
  .an-dona-wrap { flex-direction: column; align-items: flex-start; }
  .an-top__nombre { flex-basis: 45%; }
}

/* ── Mi Equipo (asesores) ── */
.eq-barra { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 0 16px; }
.eq-auto { margin: 0; }
.eq-sinasignar { color: var(--acento); font-weight: 700; font-size: var(--texto-sm); text-decoration: none; white-space: nowrap; }
.eq-form { display: flex; gap: 8px; flex-wrap: wrap; }
.eq-form input { padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; font: inherit; }
.eq-form input[name="name"] { flex: 1 1 180px; }
.eq-form input[name="monthly_goal"] { width: 90px; }

.eq-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.eq-item { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 14px; display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 14px; align-items: center; }
.eq-item--off { opacity: .6; }
.eq-item__edit { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0; }
.eq-item__edit input[type="text"], .eq-item__edit input[type="email"] { padding: 7px 10px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; min-width: 0; }
.eq-item__edit input[name="name"] { flex: 1 1 130px; font-weight: 700; }
.eq-meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--gris); }
.eq-meta input { width: 64px; padding: 6px 8px; border: 1px solid var(--linea); border-radius: 8px; font: inherit; }
.eq-item__stats { display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; color: var(--gris); }
.eq-item__stats b { color: var(--tinta, #314352); }
.eq-metapct { color: var(--acento); font-weight: 700; }
.eq-metapct--ok { color: #1FA463; }
.eq-item__acc { display: flex; flex-direction: column; gap: 6px; align-items: flex-end; }
.eq-item__acc form { margin: 0; }
.eq-verleads { font-size: 12px; color: var(--acento); text-decoration: none; }

@media (max-width: 760px) {
  .eq-item { grid-template-columns: 1fr; }
  .eq-item__acc { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

/* ── Dashboard del vendedor: tabla de vehículos + health ── */
.lista-leads .dash-asesor { color: var(--gris); font-size: 12px; background: #EEF2F6; padding: 1px 8px; border-radius: 999px; }
.dash-tabla-wrap { overflow-x: auto; }
.dash-tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); }
.dash-tabla th { text-align: left; color: var(--gris); font-weight: 600; font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--linea); white-space: nowrap; }
.dash-tabla td { padding: 10px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.dash-num { text-align: right; white-space: nowrap; }
.dash-veh { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta, #314352); min-width: 180px; }
.dash-veh__foto { width: 44px; height: 33px; object-fit: cover; border-radius: 6px; background: #EEF2F6; flex: 0 0 auto; }
.dash-veh__titulo { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.dash-veh:hover .dash-veh__titulo { color: var(--acento); }
.dash-health { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.dash-health__bar { width: 46px; height: 6px; background: #EEF2F6; border-radius: 6px; overflow: hidden; }
.dash-health__bar span { display: block; height: 100%; border-radius: 6px; }
.dash-health--ok { color: #1FA463; } .dash-health--ok .dash-health__bar span { background: #1FA463; }
.dash-health--mid { color: #E0A106; } .dash-health--mid .dash-health__bar span { background: #E0A106; }
.dash-health--low { color: #D14343; } .dash-health--low .dash-health__bar span { background: #D14343; }
.dash-vertodos { display: inline-block; margin-top: 12px; color: var(--acento); text-decoration: none; font-weight: 600; font-size: var(--texto-sm); }

/* ── Mis Planes ── */
.pl-actual { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--navy, #374B5C); color: #fff; border-radius: var(--radio-md); padding: 16px 20px; margin: 6px 0 20px; }
.pl-actual__lbl { display: block; font-size: 12px; color: #C9D4DE; }
.pl-actual__nombre { font-family: 'Comfortaa', sans-serif; font-size: 20px; }
.pl-actual__uso { font-size: var(--texto-sm); color: #C9D4DE; }
.pl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.pl-card { position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 20px; display: flex; flex-direction: column; }
.pl-card--hl { border-color: var(--acento); box-shadow: 0 0 0 3px rgba(255,149,64,.12); }
.pl-card--actual { border-color: var(--navy, #374B5C); }
.pl-card__badge { position: absolute; top: -10px; left: 20px; background: var(--acento); color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.pl-card__nombre { font-family: 'Comfortaa', sans-serif; font-size: 18px; color: var(--navy, #374B5C); margin: 0 0 6px; }
.pl-card__precio { font-family: 'Comfortaa', sans-serif; font-weight: 700; font-size: 24px; color: var(--tinta, #314352); margin-bottom: 8px; }
.pl-card__precio small { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--gris); font-weight: 500; }
.pl-card__desc { color: var(--gris); font-size: 13px; margin: 0 0 12px; }
.pl-feats { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; font-size: var(--texto-sm); color: var(--tinta, #314352); }
.pl-feats li { padding-left: 20px; position: relative; }
.pl-feats li::before { content: "✓"; position: absolute; left: 0; color: #1FA463; font-weight: 700; }
.pl-card form { margin: 0 0 0 0; margin-top: auto; }
.pl-card .btn { width: 100%; }
.pl-nota { color: var(--gris); font-size: 12.5px; margin-top: 16px; text-align: center; }

.lista-simple { list-style: none; padding: 0; margin: 0; }
.lista-simple li { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--linea); }
.lista-simple li:last-child { border-bottom: none; }

.etiqueta { font-size: var(--texto-xs); font-weight: var(--peso-fuerte); padding: 3px 10px; border-radius: var(--radio-full); }
.etiqueta--publicado { background: var(--estado-publicado-bg); color: var(--estado-publicado-texto); }
.etiqueta--borrador { background: var(--estado-borrador-bg); color: var(--estado-borrador-texto); }
.etiqueta--revision { background: var(--estado-revision-bg); color: var(--estado-revision-texto); }
.etiqueta--pausado, .etiqueta--vendido { background: var(--estado-alerta-bg); color: var(--estado-alerta-texto); }

.tabla { width: 100%; border-collapse: collapse; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio-md); overflow: hidden; }
.tabla th { text-align: left; font-size: var(--texto-xs); text-transform: uppercase; color: var(--gris); padding: 12px; border-bottom: 1px solid var(--linea); }
.tabla td { padding: 12px; border-bottom: 1px solid var(--linea); vertical-align: middle; }
.tabla tr:last-child td { border-bottom: none; }
.tabla__foto img, .tabla__sinfoto { width: 56px; height: 42px; object-fit: cover; border-radius: var(--radio-sm); background: var(--fondo); display: block; }
.tabla__acciones a { color: var(--acento); font-weight: var(--peso-medio); margin-right: 10px; font-size: var(--texto-sm); }

/* ── Tarjetas "Mis anuncios" (panel del vendedor) ── */
.pcards { display: grid; gap: 14px; }
.pcard { display: grid; grid-template-columns: 150px 1fr auto; gap: 16px; align-items: center;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 14px; }
.pcard__foto { position: relative; display: block; width: 150px; height: 100px; border-radius: var(--radio);
  overflow: hidden; background: var(--gris-suave, #eef0f3); }
.pcard__foto img { width: 100%; height: 100%; object-fit: cover; }
.pcard__sinfoto { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
  color: var(--gris); font-size: var(--texto-xs); }
.pcard__tag { position: absolute; top: 8px; left: 8px; padding: 3px 10px; border-radius: var(--radio-full);
  font-size: 11px; font-weight: var(--peso-fuerte); color: #fff; text-transform: uppercase; letter-spacing: .3px; }
.pcard__tag--publicado { background: #16a34a; }
.pcard__tag--borrador { background: var(--navy); }
.pcard__tag--vendido { background: var(--peligro, #d92d20); }
.pcard__tag--pausado { background: #d97706; }
.pcard--vendido { opacity: .9; }
.pcard__title { font-size: var(--texto-md); font-weight: var(--peso-fuerte); color: var(--navy); margin: 0; }
.pcard__title a { color: inherit; }
.pcard__title a:hover { color: var(--acento); }
.pcard__fechas { font-size: var(--texto-xs); color: var(--gris); display: flex; gap: 6px; flex-wrap: wrap; margin: 5px 0; }
.pcard__precio { font-size: var(--texto-lg); font-weight: var(--peso-extra); color: var(--navy); }
.pcard__stats { display: flex; gap: 14px; align-items: center; font-size: var(--texto-sm); color: var(--tinta); margin-top: 6px; flex-wrap: wrap; }
.pcard__fav svg, .pcard__wa svg { width: 14px; height: 14px; vertical-align: -2px; }
.pcard__wa { display: inline-flex; align-items: center; gap: 5px; background: #e7f8ee; color: #128c4a;
  padding: 3px 10px; border-radius: var(--radio-full); font-weight: var(--peso-medio); }
.pcard__acciones { display: flex; flex-direction: column; gap: 8px; min-width: 156px; }
.pcard__asesor { display: flex; flex-direction: column; gap: 3px; }
.pcard__asesor label { font-size: var(--texto-xs); color: var(--gris); }
.pcard__asesor select { padding: 6px 8px; border: 1px solid var(--linea); border-radius: var(--radio); font-size: var(--texto-sm); width: 100%; }
.pbtn { display: block; text-align: center; padding: 8px 12px; border-radius: var(--radio);
  font-size: var(--texto-sm); font-weight: var(--peso-medio); cursor: pointer; border: 1px solid transparent; width: 100%; }
.pbtn--sold { background: #ecfdf3; color: #067647; }
.pbtn--sold:hover { background: #d1fadf; }
.pbtn--edit { background: #eef2ff; color: #4f46e5; }
.pbtn--edit:hover { background: #e0e7ff; }
.pbtn--del { background: #fef3f2; color: var(--peligro, #d92d20); }
.pbtn--del:hover { background: #fee4e2; }
@media (max-width: 720px) {
  .pcard { grid-template-columns: 104px 1fr; }
  .pcard__foto { width: 104px; height: 78px; }
  .pcard__acciones { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; min-width: 0; }
  .pcard__acciones > * { flex: 1 1 46%; }
}

/* ── Formulario de vehículo / perfil ───────────────────────────────────────*/
.form-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--esp-4); }
@media (max-width: 600px) { .form-rejilla { grid-template-columns: 1fr; } }
.campo--ancho { grid-column: 1 / -1; }
.form-acciones { display: flex; gap: 12px; align-items: center; margin-top: var(--esp-6); }
.form-fotos, .form-fotos img { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.form-fotos img { width: 90px; height: 68px; object-fit: cover; border-radius: var(--radio); }
.campo--ancho .checkboxselectmultiple, .campo--ancho ul { list-style: none; padding: 0; columns: 3; font-size: var(--texto-sm); }
.ajustes-cuenta { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md);
  padding: 16px 20px; margin-bottom: 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.ajustes-cuenta p { margin: 0; }
.ajustes-cuenta a { color: var(--acento); font-weight: var(--peso-medio); }
.ajustes-foto img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radio-full); margin-bottom: 16px; border: 2px solid var(--linea); }
.campo--ancho .radioselect, .campo--ancho ul.radioselect { list-style: none; padding: 0; display: flex; gap: 20px; }
.campo--ancho input[type=checkbox], .campo input[type=checkbox] { width: auto; margin-right: 8px; }
.campo__error { display: block; color: var(--peligro, #d92d20); font-size: var(--texto-xs); margin-top: 4px; }

/* Banner "Activa avisos al instante" (Web Push) — solo aparece si el navegador
   soporta y el usuario no ha decidido. Ver panel/mensajes.html. */
.push-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--acento-suave); border: 1px solid var(--acento-suave-borde);
  border-radius: var(--radio-md); padding: 14px 18px; margin: 0 0 16px; }
.push-banner__cuerpo { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.push-banner__cuerpo strong { color: var(--acento); font-weight: var(--peso-fuerte); }
.push-banner__cuerpo span { color: var(--slate); font-size: var(--texto-sm); }
.push-banner__acciones { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.push-banner__acciones .pbtn--sec { background: transparent; color: var(--gris); border: 0; cursor: pointer; padding: 6px 10px; }

/* ── Ajustes / Mi perfil: tarjetas por sección (paridad con co.) ── */
.ajustes { display: flex; flex-direction: column; gap: 20px; }
.ajustes-card { padding: 0; overflow: hidden; }
.ajustes-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--linea); flex-wrap: wrap; }
.ajustes-card__head h2 { margin: 0; font-size: var(--texto-md); color: var(--slate); }
.ajustes-card__head p { margin: 4px 0 0; color: var(--gris); font-size: var(--texto-sm); }
.ajustes-card__ver { color: var(--acento); font-weight: var(--peso-medio); font-size: var(--texto-sm); white-space: nowrap; }
.ajustes-card__ver:hover { text-decoration: underline; }
.ajustes-card__body { padding: 20px; }
.ajustes-opcional { color: var(--gris); font-weight: var(--peso-normal); font-size: var(--texto-sm); }
.ajustes-avatar { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.ajustes-avatar img, .ajustes-avatar__vacio { width: 72px; height: 72px; border-radius: var(--radio-full);
  object-fit: cover; border: 2px solid var(--linea); flex: 0 0 auto; }
.ajustes-avatar__vacio { background: var(--navy); color: var(--blanco); display: flex; align-items: center;
  justify-content: center; font-weight: var(--peso-extra); font-size: 26px; letter-spacing: .5px; text-transform: uppercase; }
.ajustes-avatar .campo { flex: 1; margin: 0; }
.ajustes-sub { margin: 22px 0 14px; padding-top: 18px; border-top: 1px solid var(--linea); }
.ajustes-sub h3 { margin: 0; font-size: var(--texto-base); color: var(--slate); }
.ajustes-sub p { margin: 3px 0 0; color: var(--gris); font-size: var(--texto-sm); }
.ajustes-seg { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ajustes-seg strong { display: block; color: var(--slate); }
.ajustes-seg small { color: var(--gris); font-size: var(--texto-xs); }

/* ══ Ficha de vehículo (paridad con Listivo) ══════════════════════════════ */
.ficha2 { display: grid; gap: var(--esp-5); padding: var(--esp-5) var(--esp-4) var(--esp-12); align-items: start; }
@media (min-width: 900px) { .ficha2 { grid-template-columns: 1fr 340px; } }
.ficha2__principal { display: flex; flex-direction: column; gap: var(--esp-5); min-width: 0; }
.bloque { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-lg); box-shadow: var(--sombra); }

.galeria { display: flex; flex-direction: column; gap: 10px; }
.galeria__grande { position: relative; aspect-ratio: 16/11; background: var(--negro-galeria); border-radius: var(--radio-lg); overflow: hidden; }
.galeria__grande img { width: 100%; height: 100%; object-fit: contain; }
.galeria__sinfoto { display: flex; align-items: center; justify-content: center; color: #888; }
/* Estado VENDIDO: cinta roja sobre la galería + imagen atenuada (paridad con co.). */
.galeria__grande--vendido img { opacity: .78; filter: grayscale(.15); }
.galeria__sold-ribbon { position: absolute; top: 14px; left: 14px; z-index: 4; background: #DC2626; color: #FFF;
  padding: 8px 18px; border-radius: 8px; font-size: 14px; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; }
/* Bloque que reemplaza los botones de contacto cuando el vehículo ya se vendió. */
.fc-sold { text-align: center; padding: 8px 0 4px; }
.fc-sold__badge { display: inline-block; background: #DC2626; color: #FFF; font-weight: 800; letter-spacing: 1.5px;
  text-transform: uppercase; font-size: 15px; padding: 8px 22px; border-radius: 8px; }
.fc-sold__texto { margin: 16px 0 14px; color: var(--gris); font-size: 15px; }
.fc-sold__otros { display: block; background: var(--acento); color: #FFF; font-weight: 700; text-decoration: none;
  padding: 12px 16px; border-radius: var(--radio-lg); transition: background .15s; }
.fc-sold__otros:hover { background: var(--acento-oscuro); }
.galeria__fav-form { position: absolute; top: 14px; right: 14px; margin: 0; z-index: 2; }
.galeria__fav { position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: var(--radio-full);
  border: none; background: rgba(255,255,255,.92); cursor: pointer; color: var(--gris);
  display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.galeria__fav-form .galeria__fav { position: static; }
.galeria__fav:hover { color: var(--peligro); }
.galeria__fav.activo { color: var(--peligro); }
.galeria__fav.activo .ico { fill: var(--peligro); }
.galeria__fav .ico { width: 20px; height: 20px; }
.galeria__tira { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.galeria__mini { flex: 0 0 auto; width: 84px; height: 62px; border: 2px solid transparent; border-radius: var(--radio);
  overflow: hidden; padding: 0; cursor: pointer; background: #000; }
.galeria__mini.activa { border-color: var(--acento); }
.galeria__mini img { width: 100%; height: 100%; object-fit: cover; }

.ficha2__cabecera { padding: 20px 22px; }
.chips { display: flex; gap: 8px; margin-bottom: 12px; }
.chip { background: var(--gris-suave); color: var(--slate); font-size: var(--texto-xs); font-weight: var(--peso-fuerte); padding: 4px 12px; border-radius: var(--radio-sm); }
.chip--anio { background: var(--acento); color: var(--blanco); }
.ficha2__title { font-size: var(--texto-2xl); font-weight: var(--peso-extra); color: var(--slate); margin: 0 0 12px; line-height: 1.2; }
.ficha2__rapidos { display: flex; flex-wrap: wrap; gap: 18px; color: var(--gris); font-size: var(--texto-sm); padding-bottom: 16px; border-bottom: 1px solid var(--linea); }
/* Fila del precio: dos columnas alineadas al TOP para que los pill (Código a
   la izquierda + Compartir a la derecha) queden en la MISMA línea horizontal. */
.ficha2__price-fila { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-top: 16px; }
.ficha2__price-fila > div:first-child { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ficha2__price { font-size: var(--texto-3xl); font-weight: var(--peso-extra); color: var(--acento); margin: 0; display: flex; align-items: center; gap: 12px; }
.ficha2__negociable { font-size: var(--texto-xs); font-weight: var(--peso-fuerte); color: var(--exito); background: var(--exito-bg); padding: 4px 10px; border-radius: var(--radio-full); }
.ficha2__vistas { color: var(--gris); font-size: var(--texto-sm); }

/* Tarjetas destacadas de la ficha (Año · Combustible · Transmisión). */
/* Cada tarjeta destacada es una CARD INDIVIDUAL fuera del bloque de cabecera
   (paridad con co.): fondo blanco, borde suave, ícono con fondo pastel del acento. */
.ficha2__destacados { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; }  /* el spacing arriba/abajo lo maneja el gap de .ficha2__principal (uniforme) */
.destacado { display: flex; align-items: center; gap: 12px; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio-lg); padding: 14px 16px;
  box-shadow: var(--sombra); }
.destacado__ico { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
  border-radius: var(--radio); background: var(--slate-suave); color: var(--slate); flex: 0 0 auto; }
/* Colores por tipo de card (usan la paleta de acompañamiento de tokens.css). */
.destacado--navy    .destacado__ico { background: var(--slate-suave);      color: var(--slate); }
.destacado--primary .destacado__ico { background: var(--acento-tenue);     color: var(--acento); }
.destacado--success .destacado__ico { background: var(--verde-info-suave); color: var(--verde-info); }
.destacado--purple  .destacado__ico { background: var(--morado-suave);     color: var(--morado); }
.destacado__ico .ico { width: 20px; height: 20px; }
.destacado__lbl { display: block; font-size: 11px; letter-spacing: .4px; text-transform: uppercase; color: var(--gris); }
.destacado b { font-size: var(--texto-md); color: var(--slate); font-weight: var(--peso-fuerte); }
@media (max-width: 900px) { .ficha2__destacados { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Compartir: botón compacto arriba de las vistas + menú desplegable estilo popover. */
.ficha2__acciones { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.compartir-wrap { position: relative; }
.compartir-menu { position: absolute; top: calc(100% + 6px); right: 0; z-index: 20; min-width: 200px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md);
  box-shadow: 0 8px 24px rgba(15,31,61,.12); padding: 6px; display: flex; flex-direction: column; }
.compartir-menu[hidden] { display: none; }  /* el CSS display:flex tapaba el atributo hidden */
.compartir-menu__item { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: var(--radio); color: var(--slate); text-decoration: none; background: transparent;
  border: 0; cursor: pointer; font-size: var(--texto-sm); text-align: left; }
.compartir-menu__item:hover { background: var(--gris-suave, #f5f6f8); }
.compartir-menu__ico { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
  border-radius: var(--radio-full); background: var(--gris-suave, #f5f6f8); color: var(--slate); flex: 0 0 auto; }
.compartir-menu__ico .ico { width: 14px; height: 14px; }
.compartir-menu__ico--wa { background: rgba(37,211,102,.12); color: #25D366; }
.compartir-menu__ico--fb { background: rgba(24,119,242,.12); color: #1877F2; }
.compartir-menu__ico--x  { background: rgba(0,0,0,.06); color: #000; }

.specs { padding: 22px 24px; }
.specs h2 { font-size: var(--texto-lg); font-weight: var(--peso-extra); color: var(--slate); margin: 0 0 4px; }
.specs__grupo { font-size: var(--texto-xs); font-weight: var(--peso-fuerte); letter-spacing: .08em; text-transform: uppercase;
  color: var(--acento); margin: 20px 0 6px; padding-bottom: 8px; border-bottom: 1px solid var(--acento-suave-borde); }
.specs__rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
@media (max-width: 640px) { .specs__rejilla { grid-template-columns: 1fr; } }
.specs__fila { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; border-bottom: 1px dotted var(--linea-punto); }
.specs__fila span { color: var(--gris); font-size: var(--texto-sm); }
.specs__fila b { color: var(--slate); font-weight: var(--peso-fuerte); font-size: var(--texto-sm); text-align: right; }

.caracteristicas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 20px; margin-top: 8px; }
@media (max-width: 700px) { .caracteristicas { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 440px) { .caracteristicas { grid-template-columns: 1fr; } }
.caracteristica { display: flex; align-items: center; gap: 8px; color: var(--slate); font-size: var(--texto-sm); }
.caracteristica .ico { color: var(--acento); width: 15px; height: 15px; }

/* Acordeón de grupos de características (Seguridad / Confort / …). Nativo con <details>. */
.acc { border-bottom: 1px solid var(--linea); }
.acc:last-of-type { border-bottom: none; }
.acc__head { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none; padding: 14px 2px; user-select: none; }
.acc__head::-webkit-details-marker { display: none; }
.acc__titulo { font-size: var(--texto-xs); font-weight: var(--peso-fuerte); letter-spacing: .08em;
  text-transform: uppercase; color: var(--acento); }
.acc__head::after { content: ''; flex: 0 0 auto; width: 8px; height: 8px;
  border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris);
  transform: rotate(45deg); transition: transform .2s ease; }
.acc[open] .acc__head::after { transform: rotate(-135deg); }
.acc__body { margin-top: 0; padding-bottom: 16px; }
.descripcion { color: var(--slate); line-height: 1.7; }

/* Video de la ficha: iframe (YouTube/Vimeo/Facebook) responsive 16:9; los
   embeds sociales (TikTok/Instagram/X) traen su propio ancho, solo se centran. */
.fc-video__wrap { margin-top: 4px; }
.fc-video__frame { position: relative; width: 100%; max-width: 720px; aspect-ratio: 16 / 9;
  border-radius: var(--radio); overflow: hidden; background: #000; }
.fc-video__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.fc-video__social { margin: 0 auto; }

.ficha2__lado { position: sticky; top: 84px; }
.vendedor { padding: 20px; }
.seller__cab { display: flex; gap: 12px; align-items: center; padding-bottom: 16px; border-bottom: 1px solid var(--linea); margin-bottom: 16px; }
.seller__avatar-wrap { position: relative; flex: 0 0 auto; display: inline-block; line-height: 0; }
.seller__avatar { width: 52px; height: 52px; border-radius: var(--radio-full); object-fit: cover; display: block; }
.seller__avatar--vacio { background: var(--navy); color: var(--blanco); display: flex; align-items: center;
  justify-content: center; font-weight: var(--peso-extra); font-size: 20px; text-transform: uppercase; }
/* Punto de presencia sobre el avatar: gris (offline) / verde pulsante (online). */
.seller__dot { position: absolute; bottom: 0; right: 0; width: 15px; height: 15px; border-radius: 50%;
  background: #9CA3AF; border: 2.5px solid var(--blanco); box-shadow: 0 0 0 1px rgba(0,0,0,.04); }
.seller__avatar-wrap.is-online .seller__dot { background: #10B981;
  box-shadow: 0 0 0 1px rgba(16,185,129,.30), 0 0 16px rgba(16,185,129,.55);
  animation: seller-pulse 2s ease-in-out infinite; }
/* Halo más amplio (0 → 10px de expansión) para que el titileo llame más la atención. */
@keyframes seller-pulse {
  0%,100% { box-shadow: 0 0 0 0    rgba(16,185,129,.55), 0 0 0 1px rgba(16,185,129,.30); }
  50%     { box-shadow: 0 0 0 10px rgba(16,185,129,0),   0 0 0 1px rgba(16,185,129,.30); } }
.seller__name { color: var(--slate); font-size: var(--texto-md); font-weight: var(--peso-fuerte); display: block; }
/* Texto de estado bajo el nombre, con su propio punto de color. */
.seller__estado { font-size: 11px; font-weight: 600; margin: 3px 0; display: inline-flex; align-items: center; gap: 5px; }
.seller__estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.seller__estado--online          { color: #059669; }
.seller__estado--online::before  { background: #10B981; box-shadow: 0 0 6px rgba(16,185,129,.50); }
.seller__estado--offline         { color: #6B7280; }
.seller__estado--offline::before { background: #9CA3AF; }
.seller__meta { color: var(--gris); font-size: var(--texto-sm); margin: 2px 0 0; }
.seller__ver-todos { display: inline-block; margin-top: 4px; font-size: var(--texto-sm);
  color: var(--acento); font-weight: var(--peso-medio); text-decoration: none; }
.seller__ver-todos:hover { text-decoration: underline; }
.btn-contacto { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 13px;
  border-radius: var(--radio); font-weight: var(--peso-fuerte); font-size: var(--texto-base); color: var(--blanco); margin-bottom: 10px; }
.btn-contacto--wa { background: var(--marca-verde-wa); }
.btn-contacto--wa:hover { background: var(--marca-verde-wa-oscuro); }
.btn-contacto--llamar { background: var(--slate); }
.btn-contacto--llamar:hover { background: #2c3d4a; }
.seller__aviso { background: var(--aviso-bg); color: var(--aviso-texto); font-size: var(--texto-xs); padding: 10px 12px;
  border-radius: var(--radio); margin: 12px 0 0; display: flex; gap: 6px; align-items: flex-start; line-height: 1.45; }
.seller__aviso .ico { flex-shrink: 0; width: 1.1em; height: 1.1em; margin-top: 1px; }

.relacionados2 { padding: 8px var(--esp-4) var(--esp-12); }
.relacionados2 h2 { font-size: var(--texto-lg); font-weight: var(--peso-extra); color: var(--slate); margin: 0 0 16px; }

/* ══ Iconografía ══════════════════════════════════════════════════════════
   Iconos SVG heredados del plugin fullcarro-app. Heredan color con
   currentColor y se dimensionan en em para escalar con el texto. Se generan
   con {% icono "nombre" %} (ver catalogo/templatetags/iconos.py). */
.ico { width: 1.05em; height: 1.05em; display: inline-block; vertical-align: -.15em; flex: 0 0 auto; }
.ico--lg { width: 1.4em; height: 1.4em; }

/* Buscador de la cabecera */
.cab__lupa { display: inline-flex; align-items: center; }
.cab__lupa .ico { width: 18px; height: 18px; color: var(--gris); }

/* Datos rápidos de la ficha (km · combustible · transmisión · ubicación) */
.ficha2__rapidos span { display: inline-flex; align-items: center; gap: 6px; }
.ficha2__rapidos .ico { width: 18px; height: 18px; color: var(--acento); }

/* Código y vistas */
.ficha2__codigo { display: inline-flex; align-items: center; gap: 6px; }
.ficha2__codigo .ico { width: 14px; height: 14px; }
.ficha2__vistas { display: inline-flex; align-items: center; gap: 6px; }
.ficha2__vistas .ico { width: 16px; height: 16px; }

/* Botones de contacto */
.btn-contacto .ico { width: 20px; height: 20px; }

/* Corazón de favorito */
.galeria__fav { display: flex; align-items: center; justify-content: center; }
.galeria__fav .ico { width: 20px; height: 20px; }

/* ══ Buscador de vehículos (listado) ══════════════════════════════════════ */
.buscador { padding: var(--esp-6) var(--esp-4) var(--esp-12); }
.buscador__cab h1 { font-size: var(--texto-2xl); font-weight: var(--peso-extra); color: var(--slate); margin: 0 0 6px; }
.buscador__cab p { color: var(--gris); margin: 0 0 24px; }
.buscador__grid { display: grid; gap: var(--esp-6); align-items: start; }
@media (min-width: 900px) { .buscador__grid { grid-template-columns: 270px 1fr; } }
/* Un grid item no baja de su ancho de contenido (min-width:auto): sin esto, la
   fila de burbujas con textos largos ensancha la columna y desborda en móvil
   en vez de hacer su propio scroll horizontal. */
.buscador__resultados { min-width: 0; }

/* Sidebar de filtros: layout de app — cabecera + scroll + footer fijo abajo */
.filtros2 { display: flex; flex-direction: column; background: transparent;
  position: sticky; top: 84px; max-height: calc(100vh - 100px); }
.filtros2 > * { flex-shrink: 0; }
/* El contenido (tarjetas) es lo único que hace scroll; sus hijos no se encogen
   (si no, el flex-shrink recorta cada tarjeta con overflow:hidden). */
.filtros2__scroll { flex: 1 1 auto; overflow-y: auto; overflow-x: hidden; display: flex;
  flex-direction: column; gap: 12px; padding: 0 2px 2px 0; }
.filtros2__scroll > * { flex-shrink: 0; }
.filtros2__cab { display: flex; align-items: center; justify-content: space-between;
  background: var(--navy); color: var(--blanco); padding: 14px 18px; font-weight: var(--peso-fuerte);
  border-radius: var(--radio-lg); margin-bottom: 12px; }
/* Footer con "Guardar búsqueda" + "Ver resultados" */
.filtros2__pie { display: flex; gap: 10px; margin-top: 12px; }
.filtros2__guardar { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--navy); color: var(--blanco); border-radius: var(--radio); padding: 13px 12px;
  font-size: var(--texto-sm); font-weight: var(--peso-fuerte); }
.filtros2__guardar .ico { width: 16px; height: 16px; }
.filtros2__guardar:hover { background: #16345c; }
.filtros2__aplicar { flex: 1; }
@media (min-width: 900px) { .filtros2__aplicar { display: none; } }   /* en desktop auto-aplica */
/* Aplicando filtros en vivo: los resultados se atenúan mientras llega la
   respuesta, sin bloquear ni mover nada (el cajón sigue usable). */
body.filtrando .buscador__resultados { opacity: .55; transition: opacity .15s; pointer-events: none; }
/* Opción que ya no da resultados con los filtros puestos: se atenúa (no se
   oculta, porque ocultar pelearía con el buscador de la lista). */
.opcion-vacia { opacity: .4; }

/* Tus filtros aplicados dentro del cajón (el panel tapa la fila de burbujas).
   Van en UNA fila con scroll lateral: apilados en varias líneas se comían media
   pantalla del cajón cuando había 4-5 filtros. */
.filtros2__aplicados { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
.filtros2__aplicados::-webkit-scrollbar { display: none; }
.filtros2__aplicados .burbuja { flex-shrink: 0; }
.burbuja--panel { border: 1px solid transparent; font-family: inherit; cursor: pointer; }

/* Selector Nuevo/Usado: segmento siempre visible arriba del panel (CarGurus lo
   usa para "Used cars / New cars"). Es un modo, no un filtro más, por eso va en
   navy y no en el naranja de las opciones marcadas. */
.segmentado { display: flex; gap: 4px; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-full); padding: 4px; }
/* position:relative ancla el input oculto a su etiqueta: sin esto, al tocarlo el
   navegador hace scroll-into-view usando el cajón como referencia y lo descuadra. */
.segmentado__op { position: relative; flex: 1; text-align: center; padding: 10px 6px; border-radius: var(--radio-full);
  font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--slate); cursor: pointer;
  white-space: nowrap; transition: background var(--trans), color var(--trans); }
.segmentado__op:hover { background: var(--fondo); }
.segmentado__op input { position: absolute; opacity: 0; pointer-events: none; }
.segmentado__op.activa { background: var(--navy); color: var(--blanco); font-weight: var(--peso-fuerte); }
.segmentado__op:has(input:checked) { background: var(--navy); color: var(--blanco); font-weight: var(--peso-fuerte); }

/* Tarjeta de sección (Básicos, Vehículo, Desempeño, Más) — estilo CarGurus */
.fcard { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-lg); overflow: hidden; }
.fcard__titulo { margin: 0; padding: 14px 18px 2px; font-size: var(--texto-xs); font-weight: var(--peso-fuerte);
  text-transform: uppercase; letter-spacing: .07em; color: var(--gris); }
.fcard .fgrupo:last-child { border-bottom: none; }
/* Barra móvil y cajón: ocultos en escritorio (se activan en el media query) */
.fmovil { display: none; }
.filtros2__cerrar, .filtros2__backdrop { display: none; }
.filtros2__cab > span { display: inline-flex; align-items: center; gap: 8px; }
.filtros2__cab .ico { width: 16px; height: 16px; }
.filtros2__limpiar { color: #cfd6e0 !important; font-size: var(--texto-sm); font-weight: var(--peso-medio); }
/* Filtros que fija la página (marca/ciudad/tipo): chip bloqueado con "quitar" */
.filtros2__fijos { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px 4px; }
.chip-fijo { display: inline-flex; align-items: center; gap: 8px; background: var(--acento);
  color: var(--blanco); font-size: var(--texto-sm); font-weight: var(--peso-fuerte);
  padding: 6px 8px 6px 14px; border-radius: var(--radio-full); }
.chip-fijo a { color: var(--blanco); font-size: 18px; line-height: 1; text-decoration: none;
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--radio-full); background: rgba(255,255,255,.22); }
.chip-fijo a:hover { background: rgba(255,255,255,.4); }

/* Grupo de filtro colapsable */
.fgrupo { border-bottom: 1px solid var(--linea); }
.fgrupo__cab { display: flex; align-items: center; justify-content: space-between; cursor: pointer;
  margin: 0; padding: 15px 18px; font-size: var(--texto-sm); font-weight: var(--peso-fuerte); color: var(--slate); user-select: none; }
.fgrupo__flecha { width: 8px; height: 8px; border-right: 2px solid var(--gris); border-bottom: 2px solid var(--gris);
  transform: rotate(-135deg); transition: transform var(--trans); }
.fgrupo--cerrado .fgrupo__flecha { transform: rotate(45deg); }
.fgrupo__cuerpo { padding: 0 18px 16px; }
.fgrupo--cerrado .fgrupo__cuerpo { display: none; }
.fgrupo select { width: 100%; padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--blanco); font-size: var(--texto-sm); cursor: pointer; }

/* Encabezado de sección del sidebar (Básicos, Vehículo, Desempeño, Más) */
.fseccion { margin: 0; padding: 18px 18px 6px; font-size: var(--texto-xs); font-weight: var(--peso-fuerte);
  text-transform: uppercase; letter-spacing: .07em; color: var(--gris); background: var(--fondo); }

/* Toggles (switches) para Negociable / Único dueño / Permuta */
.toggle { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: var(--texto-sm);
  color: var(--tinta); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; pointer-events: none; }
.toggle__sw { flex-shrink: 0; width: 38px; height: 22px; border-radius: var(--radio-full); background: #cdd3dd;
  position: relative; transition: background var(--trans); }
.toggle__sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px;
  border-radius: var(--radio-full); background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform var(--trans); }
.toggle input:checked + .toggle__sw { background: var(--acento); }
.toggle input:checked + .toggle__sw::after { transform: translateX(16px); }

/* Chips (Estado, Tipo, Servicio) */
.chips-grupo { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-radio { position: relative; flex: 1 1 calc(50% - 4px); text-align: center; padding: 10px 8px; border: 1px solid var(--linea);
  border-radius: var(--radio); font-size: var(--texto-sm); font-weight: var(--peso-medio);
  color: var(--tinta); cursor: pointer; transition: all var(--trans); }
.chip-radio:hover { border-color: var(--acento); background: var(--acento-suave); color: var(--acento); }
.chip-radio.activa { background: var(--acento); border-color: var(--acento);
  color: var(--blanco); font-weight: var(--peso-fuerte); box-shadow: 0 2px 6px rgba(255, 149, 64, .35); }
.chip-radio:has(input:checked) { background: var(--acento); border-color: var(--acento);
  color: var(--blanco); font-weight: var(--peso-fuerte); box-shadow: 0 2px 6px rgba(255, 149, 64, .35); }
.chip-radio input { position: absolute; opacity: 0; pointer-events: none; }
.chip-radio__n { opacity: .55; font-weight: var(--peso-medio); font-size: var(--texto-xs); }
.chip-radio.activa .chip-radio__n { opacity: .85; }

/* Lista con buscador (Marca, Modelo, Carrocería, Ciudad) */
.buscalista__buscar { width: 100%; padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: var(--texto-sm); margin-bottom: 8px; transition: border-color var(--trans), box-shadow var(--trans); }
.buscalista__lista { max-height: 200px; overflow-y: auto; border: 1px solid var(--linea); border-radius: var(--radio);
  scrollbar-width: thin; scrollbar-color: var(--linea) transparent; }
.buscalista__lista::-webkit-scrollbar { width: 8px; }
.buscalista__lista::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 8px; }
.buscalista__op { display: flex; align-items: center; gap: 10px; padding: 9px 12px; font-size: var(--texto-sm);
  color: var(--tinta); cursor: pointer; border-bottom: 1px solid var(--linea); transition: background var(--trans); }
.buscalista__op:last-child { border-bottom: none; }
.buscalista__op:hover { background: var(--fondo); }
/* La casilla ES el propio input (appearance:none). Antes el input se ocultaba con
   position:absolute y la cajita se pintaba con un ::before: al tocar la opcion,
   ese input invisible recibia el foco y el navegador hacia scroll-into-view hacia
   el. Sin ancestro con position:relative, su bloque contenedor era el cajon
   entero y lo desplazaba de golpe -> el sidebar se rompia AL SELECCIONAR, peor en
   las ultimas secciones (Ciudad). Ocurre en Chrome/Android y en Safari/iOS. */
.buscalista__op input[type="checkbox"] {
  appearance: none; -webkit-appearance: none; margin: 0; cursor: pointer;
  width: 18px; height: 18px; flex-shrink: 0; background-color: transparent;
  border: 1.5px solid #cdd3dd; border-radius: 5px;
  background-position: center; background-repeat: no-repeat; background-size: 12px;
  transition: background-color var(--trans), border-color var(--trans); }
.buscalista__op input[type="checkbox"]:checked {
  background-color: var(--acento); border-color: var(--acento);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 10l3.5 3.5L15 6'/%3E%3C/svg%3E"); }
.buscalista__op.activa { color: var(--acento); font-weight: var(--peso-fuerte); }
.buscalista__nom { flex: 1; }
.buscalista__n { color: var(--gris); font-size: var(--texto-xs); font-weight: var(--peso-medio); }

/* Rangos (Año, Precio) y campo único (Kilometraje) */
.rango { display: flex; gap: 8px; }
.rango input, .rango__solo { width: 100%; padding: 9px 10px; border: 1px solid var(--linea);
  border-radius: var(--radio); font-size: var(--texto-sm); transition: border-color var(--trans), box-shadow var(--trans); }

/* Foco naranja en todos los campos del buscador */
.buscalista__buscar:focus, .fgrupo select:focus, .rango input:focus, .rango__solo:focus {
  border-color: var(--acento); outline: none; box-shadow: 0 0 0 3px var(--acento-suave); }

/* Burbujas de filtros activos (quitables) sobre los resultados */
.filtros-activos { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; }
.burbuja { display: inline-flex; align-items: center; gap: 8px; background: var(--acento-suave); color: var(--acento);
  border: 1px solid transparent; border-radius: var(--radio-full); padding: 6px 8px 6px 14px;
  font-size: var(--texto-sm); font-weight: var(--peso-medio); transition: all var(--trans); }
.burbuja:hover { border-color: var(--acento); }
.burbuja__x { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
  border-radius: var(--radio-full); background: var(--acento); color: var(--blanco); font-size: 15px; line-height: 1; }
.burbuja:hover .burbuja__x { background: var(--acento-oscuro); }
.filtros-activos__limpiar { font-size: var(--texto-sm); color: var(--gris); text-decoration: underline;
  margin-left: 4px; white-space: nowrap; }
.filtros-activos__limpiar:hover { color: var(--acento); }
/* Atajos a secciones (píldora outline, sin ×). Solo móvil/tablet: en escritorio
   el sidebar ya está a la vista y sobrarían. */
.atajo { display: none; }
/* Sin filtros, en escritorio la fila quedaría vacía (los atajos están ocultos). */
@media (min-width: 900px) { .filtros-activos--solo-atajos { display: none; } }
@media (max-width: 899px) {
  .atajo { display: inline-flex; align-items: center; white-space: nowrap; cursor: pointer;
    background: transparent; border: 1px solid var(--linea); border-radius: var(--radio-full);
    padding: 7px 14px; font-size: var(--texto-sm); color: var(--slate); font-family: inherit;
    transition: border-color var(--trans), color var(--trans); }
  .atajo:hover, .atajo:focus-visible { border-color: var(--acento); color: var(--acento); }
  /* Si no hay filtros puestos, la fila queda solo con atajos: sigue siendo útil. */
  .filtros-activos--solo-atajos { margin-bottom: 14px; }
}

/* ── Filtros en móvil (patrón CarGurus): barra + cajón deslizante ─────────── */
@media (max-width: 899px) {
  .fmovil { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
  .fmovil__btn { display: inline-flex; align-items: center; gap: 8px; background: var(--navy); color: var(--blanco);
    border: none; border-radius: var(--radio-full); padding: 10px 18px; font-size: var(--texto-sm);
    font-weight: var(--peso-fuerte); cursor: pointer; }
  .fmovil__btn .ico { width: 16px; height: 16px; }
  .fmovil__n { background: var(--acento); color: var(--blanco); border-radius: var(--radio-full); min-width: 20px;
    height: 20px; display: inline-flex; align-items: center; justify-content: center; font-size: var(--texto-xs); padding: 0 5px; }
  .fmovil__orden { margin-left: auto; }
  .fmovil__orden select { padding: 9px 12px; border: 1px solid var(--linea); border-radius: var(--radio);
    background: var(--blanco); font-size: var(--texto-sm); }
  .buscador__barra .buscador__order { display: none; }   /* el orden vive en la barra móvil */

  /* Sidebar → cajón deslizante (app: cabecera + scroll + footer fijo abajo) */
  /* Alto: 100dvh (dynamic viewport) — en Chrome/Android 100vh incluye la barra de
     direcciones y la de navegación, y el footer quedaba FUERA de la pantalla. */
  .filtros2 { position: fixed; top: 0; left: 0; width: 90%; max-width: 380px; z-index: 200;
    transform: translateX(-100%); transition: transform .28s ease;
    height: 100vh; height: 100dvh; max-height: 100dvh;
    overflow: hidden; background: var(--fondo); box-shadow: 0 0 40px rgba(0,0,0,.3); }
  .filtros2--abierto { transform: translateX(0); }
  .filtros2__cab { margin: 0; border-radius: 0; }
  .filtros2__scroll { padding: 12px; gap: 14px; }
  .filtros2__cerrar { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
    background: rgba(255,255,255,.15); color: var(--blanco); border: none; border-radius: var(--radio-full);
    font-size: 22px; line-height: 1; cursor: pointer; }
  .filtros2__pie { margin: 0; background: var(--blanco); border-top: 1px solid var(--linea);
    box-shadow: 0 -4px 12px rgba(0, 0, 0, .06);
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); }   /* barra de gestos Android */

  .filtros2__backdrop { display: block; position: fixed; inset: 0; background: rgba(15, 23, 42, .5); z-index: 150;
    opacity: 0; visibility: hidden; transition: opacity .28s; }
  body.filtros-abiertos .filtros2__backdrop { opacity: 1; visibility: visible; }
  /* Igual que CarGurus: overflow:hidden plano. Fijar el body (position:fixed)
     es más agresivo y en iOS descoloca los elementos fixed al enfocar campos. */
  body.filtros-abiertos { overflow: hidden; }

  /* Burbujas de filtros activos: fila con scroll horizontal */
  .filtros-activos { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px; }
  .filtros-activos::-webkit-scrollbar { display: none; }
  .burbuja, .filtros-activos__limpiar { flex-shrink: 0; }

  /* En el cajón hay espacio de sobra: listas más altas y grupos con más aire,
     para que no se vean apretados/cortos verticalmente. */
  .buscalista__lista { max-height: 44vh; max-height: 44dvh; }
  .buscalista__op { padding: 12px; }
  .fgrupo__cab { padding: 16px 18px; }
  .fgrupo__cuerpo { padding: 0 18px 18px; }
  .chip-radio { padding: 12px 8px; }
  .toggle { padding: 10px 0; }
}

/* Aviso de rescate: cuando la búsqueda dio 0 y se amplió algún filtro */
.rescate { background: var(--acento-suave); border: 1px solid var(--acento); border-radius: var(--radio);
  padding: 10px 14px; margin-bottom: 16px; font-size: var(--texto-sm); color: var(--slate); line-height: 1.5; }
.rescate b { color: var(--acento-oscuro); font-weight: var(--peso-fuerte); }
/* Burbuja de un filtro que se relajó en el rescate: apagada y tachada */
.burbuja--relajada { opacity: .5; text-decoration: line-through; }

/* Barra de resultados */
.buscador__barra { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.buscador__total { color: var(--gris); font-size: var(--texto-sm); }
.buscador__orden select { padding: 9px 14px; border: 1px solid var(--linea); border-radius: var(--radio);
  background: var(--blanco); font-size: var(--texto-sm); cursor: pointer; }

/* ── Tarjeta de vehículo (paridad con Listivo) ─────────────────────────────*/
.vcard { position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-lg);
  overflow: hidden; transition: transform var(--trans), box-shadow var(--trans);
  display: flex; flex-direction: column; height: 100%; }
.vcard:hover { transform: translateY(-2px); box-shadow: var(--sombra-md); }
.vcard__fav-form { position: absolute; top: 12px; right: 12px; margin: 0; z-index: 2; }
.vcard__foto { position: relative; display: block; aspect-ratio: 3 / 2; background: var(--fondo); flex-shrink: 0; }
.vcard__foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vcard__sinfoto { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--gris); font-size: var(--texto-sm); }
.vcard__fav { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: var(--radio-full);
  background: rgba(255,255,255,.92); display: flex; align-items: center; justify-content: center;
  color: var(--gris); border: none; cursor: pointer; padding: 0; box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.vcard__fav-form .vcard__fav { position: static; }
.vcard__fav:hover { color: var(--peligro); }
.vcard__fav.activo { color: var(--peligro); }
.vcard__fav.activo .ico { fill: var(--peligro); }
.vcard__fav .ico { width: 18px; height: 18px; }
.vcard__destacado { position: absolute; top: 12px; left: 12px; background: var(--acento); color: var(--blanco);
  font-size: var(--texto-xs); font-weight: var(--peso-fuerte); padding: 4px 10px; border-radius: var(--radio-full); }
.vcard__cuerpo { padding: 14px 16px 16px; flex: 1 1 auto; display: flex; flex-direction: column; }
.vcard__titulo { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  font-size: var(--texto-base); font-weight: var(--peso-fuerte); color: var(--slate); line-height: 1.35; margin-bottom: 12px; min-height: 2.7em; }
.vcard__specs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.vcard__specs span { display: inline-flex; align-items: center; gap: 5px; font-size: var(--texto-xs);
  color: var(--gris); border: 1px solid var(--linea); border-radius: var(--radio-sm); padding: 4px 8px; }
.vcard__specs .ico { width: 13px; height: 13px; color: var(--acento); }
.vcard__pie { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding-top: 12px; border-top: 1px solid var(--linea); margin-top: auto; }
.vcard__lugar { display: inline-flex; align-items: center; gap: 5px; color: var(--gris); font-size: var(--texto-sm); }
.vcard__lugar .ico { width: 15px; height: 15px; color: var(--acento); }
.vcard__precio { font-size: var(--texto-md); font-weight: var(--peso-extra); color: var(--acento); }
.vcard__meta { margin-top: 10px; }
.vcard__meta span { display: inline-flex; align-items: center; gap: 5px; color: var(--gris); font-size: var(--texto-xs); }
.vcard__meta .ico { width: 14px; height: 14px; }

/* ── Panel: iconos en la navegación y dashboard comprador ──────────────────*/
.panel__nav a { display: flex; align-items: center; gap: 10px; }
.panel__nav a .ico { width: 17px; height: 17px; }
.phola { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  background: linear-gradient(135deg, var(--navy), #1c3a63); color: var(--blanco);
  border-radius: var(--radio-lg); padding: 24px 28px; margin-bottom: 20px; }
.phola h1 { color: var(--blanco); margin: 0 0 4px; font-size: var(--texto-xl); }
.phola p { margin: 0; color: #cfd6e0; }
.phola .btn { background: rgba(255,255,255,.14); }
.phola .btn:hover { background: rgba(255,255,255,.24); }
.phola .btn .ico { width: 15px; height: 15px; vertical-align: -2px; }
.metricas--2 { grid-template-columns: repeat(2, 1fr); }
.metrica__ico { display: inline-flex; color: var(--acento); margin-bottom: 6px; }
.metrica__ico .ico { width: 22px; height: 22px; }
.panel__seccion-cab h2 .ico { width: 18px; height: 18px; vertical-align: -3px; color: var(--acento); }
.panel__seccion-cab a { color: var(--acento); font-weight: var(--peso-medio); font-size: var(--texto-sm); }
/* Un botón dentro del encabezado NO debe tomar el naranja de los enlaces "Ver todos". */
.panel__seccion-cab a.btn { color: var(--blanco); }
.vacio .ico { width: 40px; height: 40px; color: var(--linea); }

/* Corazón de favoritos en la cabecera */
.cab__nav-fav { display: inline-flex; align-items: center; color: var(--blanco); }
.cab__nav-fav .ico { width: 20px; height: 20px; }
.cab__nav-fav:hover { color: var(--acento); }

/* ══ Landing pública del vendedor ═════════════════════════════════════════ */
.vhero { background: linear-gradient(135deg, var(--navy), #24456f); color: var(--blanco); }
.vhero__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 28px var(--esp-4); flex-wrap: wrap; }
.vhero__perfil { display: flex; align-items: center; gap: 20px; min-width: 0; }
.vhero__avatar { width: 96px; height: 96px; border-radius: var(--radio-full); object-fit: cover;
  border: 3px solid rgba(255,255,255,.25); flex: 0 0 auto; background: #0b1c33; }
.vhero__avatar--vacio { display: flex; align-items: center; justify-content: center;
  font-size: 30px; font-weight: var(--peso-extra); color: var(--acento); }
.vhero__badges { display: flex; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.vhero__badge { font-size: var(--texto-xs); font-weight: var(--peso-fuerte); padding: 4px 12px;
  border-radius: var(--radio-sm); letter-spacing: .03em; }
.vhero__badge--dealer { background: var(--acento); color: var(--blanco); }
.vhero__badge--off { background: rgba(255,255,255,.15); color: #cfd6e0; }
.vhero__nombre { font-size: var(--texto-3xl); font-weight: var(--peso-extra); color: var(--blanco);
  margin: 0 0 8px; line-height: 1.1; }
.vhero__meta { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; color: #cfd6e0; font-size: var(--texto-sm); }
.vhero__meta span { display: inline-flex; align-items: center; gap: 6px; }
.vhero__meta .ico { width: 15px; height: 15px; }
.vhero__ctas { display: flex; flex-direction: column; gap: 10px; width: 280px; max-width: 100%; }
.vhero__cta { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 14px;
  border-radius: var(--radio); font-weight: var(--peso-fuerte); font-size: var(--texto-base); color: var(--blanco); }
.vhero__cta .ico { width: 18px; height: 18px; }
.vhero__cta--wa { background: var(--marca-verde-wa); }
.vhero__cta--wa:hover { background: var(--marca-verde-wa-oscuro); }
.vhero__cta--tel { background: #2563eb; }
.vhero__cta--tel:hover { background: #1d4ed8; }
.vhero__cta--chat { background: var(--acento); cursor: default; }
@media (max-width: 720px) { .vhero__ctas { width: 100%; flex-direction: row; } .vhero__cta { flex: 1; padding: 12px 8px; } }

.vstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: -34px 0 28px; position: relative; z-index: 1; }
@media (max-width: 700px) { .vstats { grid-template-columns: repeat(2, 1fr); } }
.vstat { background: var(--blanco); border: 1px solid var(--linea); border-top: 3px solid var(--acento);
  border-radius: var(--radio-md); padding: 20px; text-align: center; box-shadow: var(--sombra); }
.vstat__num { display: block; font-size: var(--texto-2xl); font-weight: var(--peso-extra); color: var(--slate); }
.vstat__lbl { color: var(--gris); font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: .04em; }

/* ══ Home ═════════════════════════════════════════════════════════════════ */
.hhero { background: linear-gradient(135deg, var(--navy) 0%, #16345c 60%, #1c3f6b 100%); color: var(--blanco); }
.hhero__inner { padding: 64px var(--esp-4) 60px; max-width: 1000px; }
.hhero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--texto-xs);
  letter-spacing: .12em; text-transform: uppercase; color: #cfd6e0; margin-bottom: 18px; font-weight: var(--peso-fuerte); }
.hhero__eyebrow .bandera { width: 22px; height: auto; border-radius: 2px; }
.hhero__titulo { font-size: clamp(34px, 5vw, 56px); font-weight: var(--peso-extra); line-height: 1.05;
  margin: 0 0 16px; color: var(--blanco); }
.hhero__titulo em { color: var(--acento); font-style: normal; }
.hhero__sub { font-size: var(--texto-md); color: #cfd6e0; max-width: 560px; margin: 0 0 28px; line-height: 1.55; }
.hhero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 26px; }
.hhero__cta { padding: 14px 24px; font-size: var(--texto-md); }
.hhero__cta .ico { width: 16px; height: 16px; vertical-align: -3px; margin-right: 4px; }
.hhero__cta--ghost { background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); }
.hhero__cta--ghost:hover { background: rgba(255,255,255,.18); }
.hhero__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hhero__chip { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: var(--blanco);
  padding: 7px 15px; border-radius: var(--radio-full); font-size: var(--texto-sm); }
.hhero__chip:hover { background: rgba(255,255,255,.16); }

.home { padding-bottom: var(--esp-12); }

/* Combo cifras + categorías */
.combo { display: grid; gap: 24px; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-lg); padding: 28px; margin: 28px 0; box-shadow: var(--sombra); }
@media (min-width: 860px) { .combo { grid-template-columns: 320px 1fr; } }
.combo__kicker { font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: .1em;
  color: var(--gris); font-weight: var(--peso-fuerte); margin: 0 0 16px; }
.cifras { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cifra__num { display: block; font-size: var(--texto-2xl); font-weight: var(--peso-extra); color: var(--acento); }
.cifra__lbl { color: var(--gris); font-size: var(--texto-sm); }
.combo__cats h2 { font-size: var(--texto-xl); margin: 0 0 4px; color: var(--slate); }
.combo__sub { color: var(--gris); margin: 0 0 18px; font-size: var(--texto-sm); }
.cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px;
  border: 1px solid var(--linea); border-radius: var(--radio-md); text-align: center; transition: all var(--trans); }
.cat:hover { border-color: var(--acento); background: var(--acento-suave); transform: translateY(-2px); }
.cat__ico { color: var(--slate); }
.cat__ico .ico { width: 30px; height: 30px; }
.cat__nom { font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--slate); }

/* Secciones de la home */
.section { margin: 40px 0; }
.section__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 18px; gap: 12px; flex-wrap: wrap; }
.section__title { font-size: var(--texto-xl); font-weight: var(--peso-extra); color: var(--slate); margin: 0; }
.section__title em { color: var(--acento); font-style: normal; }
.section__ver { color: var(--acento); font-weight: var(--peso-medio); font-size: var(--texto-sm); }

/* Pastillas de marcas / ciudades */
.pastillas { display: flex; flex-wrap: wrap; gap: 10px; }
.pastilla { display: inline-flex; align-items: center; gap: 8px; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio-full); padding: 9px 16px; transition: all var(--trans); }
.pastilla:hover { border-color: var(--acento); box-shadow: var(--sombra); }
.pastilla__nom { font-weight: var(--peso-medio); color: var(--slate); font-size: var(--texto-sm); }
.pastilla__n { background: var(--fondo); color: var(--gris); font-size: var(--texto-xs); font-weight: var(--peso-fuerte);
  padding: 2px 8px; border-radius: var(--radio-full); }
.pastilla__ico .ico { width: 15px; height: 15px; color: var(--acento); }
.pastilla--marca { padding-left: 9px; }
.pastilla__logo { width: 28px; height: 28px; object-fit: contain; flex-shrink: 0; }

/* ══ CTA de cierre de la home ═════════════════════════════════════════════ */
.hcta { background: linear-gradient(120deg, var(--acento) 0%, var(--acento-oscuro) 100%); color: var(--blanco); }
.hcta__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 40px var(--esp-4); flex-wrap: wrap; }
.hcta h2 { font-size: var(--texto-xl); margin: 0 0 6px; color: var(--blanco); }
.hcta p { margin: 0; color: rgba(255,255,255,.92); max-width: 560px; }
.hcta__btn { width: auto; background: var(--blanco); color: var(--acento-oscuro); white-space: nowrap; }
.hcta__btn:hover { background: #fff; color: var(--navy); }

/* ══ Footer de la home ════════════════════════════════════════════════════ */
.foot { background: var(--navy); color: #cfd6e0; }
.foot__grid { display: grid; gap: 32px; padding: 48px var(--esp-4) 36px;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr 1fr; }
@media (max-width: 900px) { .foot__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .foot__grid { grid-template-columns: 1fr; } }
.foot__marca .marca { font-size: var(--texto-xl); }
.foot__lema { color: #97a3b4; font-size: var(--texto-sm); line-height: 1.6; margin: 14px 0 0; max-width: 320px; }
.foot__col h3 { color: var(--acento); font-size: var(--texto-xs); text-transform: uppercase;
  letter-spacing: .08em; font-weight: var(--peso-fuerte); margin: 0 0 14px; }
.foot__col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot__col a { color: #cfd6e0; font-size: var(--texto-sm); }
.foot__col a:hover { color: var(--blanco); }
.foot__legal { border-top: 1px solid rgba(255,255,255,.08); }
.foot__legal .contenedor { padding: 18px 16px; }
.foot__legal p { color: #7a8794; font-size: var(--texto-xs); line-height: 1.6; margin: 0; }
.foot__copy { margin-top: 8px !important; color: #97a3b4 !important; }
.foot__legal a { color: #c7d0da; text-decoration: underline; }
.foot__legal a:hover { color: #fff; }

/* Banderas en la lista de países del footer */
.foot__paises a { display: inline-flex; align-items: center; gap: 8px; }
.foot__paises .bandera { width: 20px; height: auto; border-radius: 2px; flex: 0 0 auto; }

/* ══ Carrusel "Otras ciudades para buscar carros" ═════════════════════════ */
.cercanas { margin: 40px 0; }
.cercanas__sub { color: var(--gris); font-size: var(--texto-sm); margin: 4px 0 0; }
.carrusel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 260px);
  gap: var(--esp-4); overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x proximity; }
.carrusel > * { scroll-snap-align: start; }
.carrusel::-webkit-scrollbar { height: 8px; }
.carrusel::-webkit-scrollbar-thumb { background: var(--linea); border-radius: 20px; }
.cercanas__enlaces { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.cercanas__enlaces a { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-full);
  padding: 7px 14px; font-size: var(--texto-sm); color: var(--slate); font-weight: var(--peso-medio); }
.cercanas__enlaces a:hover { border-color: var(--acento); color: var(--acento); }

/* Cabecera de la landing de marca (logo + título) */
.marca-cab { display: flex; align-items: center; gap: 18px; }
.marca-cab__logo { width: 72px; height: 72px; object-fit: contain; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 8px; flex: 0 0 auto; }

/* ── Ficha: código copiable + compartir ─────────────────────────────────── */
/* Pill botones de la fila del precio (Código + Compartir): mismo estilo, mismo
   tamaño, alineados en la misma línea horizontal. Sin margin porque el gap del
   contenedor padre maneja la separación con el precio/vistas. */
.ficha2__code, .compartir-btn { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font: inherit;
  background: var(--acento-suave); color: var(--acento);
  border: 1px solid var(--acento-suave-borde, #ffe6cf);
  padding: 5px 12px; margin: 0; border-radius: var(--radio-full);
  font-size: var(--texto-xs); font-weight: var(--peso-fuerte); line-height: 1.2; }
.ficha2__code:hover, .compartir-btn:hover,
.compartir-btn[aria-expanded="true"] { background: var(--acento); color: var(--blanco); border-color: var(--acento); }
.ficha2__code .ico, .compartir-btn .ico { width: 14px; height: 14px; }

.compartir { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #eee; }
.compartir__lbl { display: inline-flex; align-items: center; gap: 5px; margin-right: 2px;
  color: var(--gris); font-size: var(--texto-sm); font-weight: var(--peso-medio); }
.compartir__lbl .ico { width: 16px; height: 16px; }
.compartir__btn { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: var(--radio-full); border: none; cursor: pointer;
  color: var(--blanco); background: var(--slate); transition: transform .15s, filter .15s; }
.compartir__btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.compartir__btn .ico { width: 18px; height: 18px; }
.compartir__btn--wa { background: var(--marca-verde-wa); }
.compartir__btn--fb { background: #1877f2; }
.compartir__btn--x  { background: #000; }
.compartir__btn--link { background: var(--slate); }

.toast-copia { position: fixed; left: 50%; bottom: 28px;
  transform: translateX(-50%) translateY(10px); background: var(--slate); color: var(--blanco);
  padding: 10px 18px; border-radius: var(--radio-full); font-size: var(--texto-sm);
  font-weight: var(--peso-medio); opacity: 0; transition: .25s; z-index: 9999; pointer-events: none; }
.toast-copia.visible { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Ficha: galería con zoom/lightbox y navegación ──────────────────────── */
#fotoGrande { cursor: zoom-in; }
.galeria__zoom { position: absolute; top: 14px; left: 14px; width: 40px; height: 40px;
  border-radius: var(--radio-full); background: rgba(0,0,0,.45); color: #fff; border: none;
  cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .15s; }
.galeria__zoom:hover { background: rgba(0,0,0,.65); }
.galeria__zoom .ico { width: 18px; height: 18px; }
.galeria__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 42px; height: 42px;
  border-radius: var(--radio-full); background: rgba(0,0,0,.4); color: #fff; border: none; cursor: pointer;
  font-size: 26px; line-height: 1; display: flex; align-items: center; justify-content: center; z-index: 2; transition: background .15s; }
.galeria__nav:hover { background: rgba(0,0,0,.65); }
.galeria__nav--prev { left: 12px; }
.galeria__nav--next { right: 12px; }
.galeria__contador { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
  background: rgba(0,0,0,.55); color: #fff; padding: 4px 12px; border-radius: var(--radio-full);
  font-size: var(--texto-sm); z-index: 2; }

.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.92); z-index: 10000;
  display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox__img { max-width: 92vw; max-height: 88vh; object-fit: contain; user-select: none; }
.lightbox__cerrar { position: absolute; top: 18px; right: 22px; width: 44px; height: 44px;
  border-radius: var(--radio-full); background: rgba(255,255,255,.12); color: #fff; border: none;
  font-size: 28px; line-height: 1; cursor: pointer; z-index: 2; }
.lightbox__cerrar:hover { background: rgba(255,255,255,.25); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 52px; height: 52px;
  border-radius: var(--radio-full); background: rgba(255,255,255,.12); color: #fff; border: none;
  font-size: 32px; line-height: 1; cursor: pointer; z-index: 2; display: flex; align-items: center; justify-content: center; }
.lightbox__nav:hover { background: rgba(255,255,255,.25); }
.lightbox__nav--prev { left: 18px; }
.lightbox__nav--next { right: 18px; }
.lightbox__contador { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); color: #fff;
  font-size: var(--texto-base); background: rgba(255,255,255,.12); padding: 5px 14px; border-radius: var(--radio-full); z-index: 2; }
@media (max-width: 640px) {
  .galeria__nav { width: 36px; height: 36px; font-size: 22px; }
  .lightbox__nav { width: 42px; height: 42px; font-size: 26px; }
  .lightbox__img { max-width: 98vw; }
}

/* ── Ficha: descripción colapsable ──────────────────────────────────────── */
.descripcion__texto { max-height: 8.5em; overflow: hidden; position: relative; transition: max-height .2s ease; }
.descripcion.abierta .descripcion__texto { max-height: none; }
.descripcion:not(.abierta) .descripcion__texto::after { content: ''; position: absolute; left: 0; right: 0;
  bottom: 0; height: 3.5em; background: linear-gradient(rgba(255,255,255,0), var(--blanco)); pointer-events: none; }
.descripcion__mas { display: inline-block; margin-top: 10px; background: none; border: none; padding: 0;
  color: var(--acento); font: inherit; font-weight: var(--peso-medio); cursor: pointer; }
.descripcion__mas:hover { text-decoration: underline; }

/* ── Ficha: bloque de publicidad ────────────────────────────────────────── */
.fcads { margin: 16px 0; text-align: center; }
.fcads__label { display: block; margin-bottom: 6px; color: var(--gris);
  font-size: 10px; font-weight: var(--peso-medio); letter-spacing: .06em; text-transform: uppercase; }
.fcads__ins { display: block; }
.fcads__ph { display: flex; align-items: center; justify-content: center; min-height: 90px;
  background: repeating-linear-gradient(45deg, #f6f7f8, #f6f7f8 10px, #f0f1f3 10px, #f0f1f3 20px);
  border: 1px dashed var(--linea); border-radius: var(--radio-lg); color: var(--gris);
  font-size: var(--texto-sm); }

/* ── Carrusel de tarjetas de vehículo (home, ficha) ─────────────────────────
   Prefijo propio `vcarrusel` para NO chocar con el `.carrusel` de "ciudades
   cercanas" (grid) que usan las landings. */
.vcarrusel-sec { margin: 34px 0; }
.vcarrusel-sec__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.vcarrusel-sec__head h2 { font-size: var(--texto-xl); margin: 0; }
.vcarrusel-sec__all { color: var(--acento); font-weight: var(--peso-medio); white-space: nowrap; }
.vcarrusel-sec__all:hover { text-decoration: underline; }
.vcarrusel { position: relative; }
.vcarrusel__track { display: flex; gap: 16px; list-style: none; margin: 0; padding: 4px 2px 8px;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: thin; }
.vcarrusel__item { flex: 0 0 clamp(240px, 78vw, 278px); scroll-snap-align: start; }
.vcarrusel__nav { position: absolute; top: 42%; transform: translateY(-50%); width: 40px; height: 40px;
  border-radius: var(--radio-full); background: var(--blanco); border: 1px solid var(--linea);
  box-shadow: var(--sombra); color: var(--slate); cursor: pointer; font-size: 24px; line-height: 1;
  display: flex; align-items: center; justify-content: center; z-index: 3; transition: background .15s, color .15s; }
.vcarrusel__nav:hover { background: var(--acento); color: var(--blanco); }
.vcarrusel__nav--prev { left: -8px; }
.vcarrusel__nav--next { right: -8px; }
@media (max-width: 640px) { .vcarrusel__nav { display: none; } }  /* móvil: swipe/scroll nativo */

/* ── Ficha: barra de contacto fija en móvil (tipo app) ──────────────────── */
.sticky-cta { display: none; }
.sticky-cta__btn { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center;
  justify-content: center; border: 1px solid; border-radius: var(--radio); background: var(--blanco);
  cursor: pointer; text-decoration: none; transition: background .15s, transform .12s; }
.sticky-cta__btn .ico { width: 20px; height: 20px; }
.sticky-cta__btn:active { transform: scale(.94); }
.sticky-cta__btn--phone { border-color: var(--acento); color: var(--acento); }
.sticky-cta__btn--phone:hover { background: rgba(255,149,64,.08); }
.sticky-cta__btn--chat { border-color: #7c3aed; color: #7c3aed; }
.sticky-cta__btn--chat:hover { background: rgba(124,58,237,.06); }
.sticky-cta__primary { flex: 1 1 auto; min-width: 0; height: 44px; display: flex; align-items: center;
  justify-content: center; gap: 8px; background: var(--marca-verde-wa); color: var(--blanco) !important;
  border-radius: var(--radio); padding: 0 14px; text-decoration: none; font-weight: var(--peso-fuerte);
  font-size: var(--texto-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: filter .15s, transform .12s; }
.sticky-cta__primary .ico { width: 20px; height: 20px; flex-shrink: 0; }
.sticky-cta__primary:hover { filter: brightness(1.05); }
.sticky-cta__primary:active { transform: scale(.98); }
@media (max-width: 1023px) {
  .sticky-cta { position: fixed; bottom: 0; left: 0; right: 0; z-index: 100; display: flex;
    gap: 8px; align-items: stretch; background: var(--blanco); border-top: 1px solid var(--linea);
    box-shadow: 0 -2px 12px rgba(0,0,0,.08); padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); }
  body:has(.sticky-cta) { padding-bottom: 76px; }
}

/* ── Home: vender — beneficios + pasos ──────────────────────────────────── */
.vender-band { background: var(--navy); color: var(--blanco); margin-top: 48px; }
.vender-band__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 48px;
  padding: 56px var(--esp-4); align-items: center; }
.vender-band h2 { font-size: clamp(28px, 3.4vw, 42px); margin: 0 0 14px; line-height: 1.15; font-weight: var(--peso-extra); }
.vender-band h2 em { color: var(--acento); font-style: normal; }
.vender-band__col > p { opacity: .85; margin: 0 0 22px; max-width: 460px; line-height: 1.6; }
.vender-band__benes { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.vender-band__benes li { display: flex; align-items: center; gap: 10px; font-weight: var(--peso-medio); }
.vender-band__benes .ico { width: 18px; height: 18px; color: var(--acento); flex-shrink: 0; }
.vender-band__cta { background: var(--acento); }
.vender-band__cta:hover { background: var(--acento-oscuro); }
.vender-band__pasos { display: grid; gap: 14px; }
.paso { display: flex; gap: 14px; align-items: flex-start; background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10); border-radius: var(--radio-lg); padding: 16px 18px; }
.paso__num { flex-shrink: 0; width: 32px; height: 32px; border-radius: var(--radio-full); background: var(--acento);
  color: var(--blanco); display: flex; align-items: center; justify-content: center; font-weight: var(--peso-extra); }
.paso__txt { display: flex; flex-direction: column; gap: 3px; }
.paso__txt strong { font-weight: var(--peso-fuerte); }
.paso__txt span { opacity: .8; font-size: var(--texto-sm); }

/* ── Home: preview del panel del vendedor ───────────────────────────────── */
.panel-preview { padding: 56px var(--esp-4); text-align: center; }
.panel-preview__head h2 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 12px; font-weight: var(--peso-extra); }
.panel-preview__head h2 em { color: var(--acento); font-style: normal; }
.panel-preview__head p { color: var(--gris); max-width: 620px; margin: 0 auto 34px; line-height: 1.6; }
.panel-mock { position: relative; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-lg);
  box-shadow: var(--sombra-md); padding: 28px 24px; max-width: 860px; margin: 0 auto; text-align: left; }
.panel-mock__vivo { position: absolute; top: 16px; right: 18px; display: inline-flex; align-items: center; gap: 5px;
  color: var(--marca-verde-wa); font-size: var(--texto-xs); font-weight: var(--peso-fuerte); }
.panel-mock__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 24px; }
.ptile { background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; }
.ptile__lbl { display: flex; align-items: center; gap: 6px; color: var(--gris); font-size: var(--texto-xs); margin-bottom: 6px; }
.ptile__lbl .ico { width: 13px; height: 13px; color: var(--acento); }
.ptile b { font-size: var(--texto-xl); font-weight: var(--peso-extra); color: var(--slate); }
.panel-mock__chart { display: flex; align-items: flex-end; gap: 10px; height: 120px; padding: 0 4px; }
.panel-mock__chart span { flex: 1; background: linear-gradient(var(--acento), var(--acento-suave));
  border-radius: 6px 6px 0 0; min-height: 8px; }
.panel-preview__cta { margin-top: 30px; }
@media (max-width: 860px) {
  .vender-band__inner { grid-template-columns: 1fr; gap: 32px; }
  .panel-mock__tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ── Simulador de crédito ───────────────────────────────────────────────── */
.simulador { padding: 40px var(--esp-4) 64px; }
.simulador__head { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.simulador__head h1 { font-size: clamp(26px, 3vw, 36px); margin: 0 0 10px; }
.simulador__head p { color: var(--gris); margin: 0; }
.simulador__grid { display: grid; grid-template-columns: 1fr 370px; gap: 28px; align-items: start; max-width: 900px; margin: 0 auto; }
.simulador__form { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-lg);
  padding: 24px; display: grid; gap: 18px; box-shadow: var(--sombra); }
.simcampo { display: grid; gap: 6px; }
.simcampo label { font-weight: var(--peso-medio); font-size: var(--texto-sm); }
.simcampo label b { color: var(--acento); }
.simcampo__money { display: flex; align-items: center; border: 1px solid var(--linea); border-radius: var(--radio); overflow: hidden; }
.simcampo__money span { padding: 0 10px; color: var(--gris); }
.simcampo__money input { flex: 1; min-width: 0; border: none; padding: 11px 12px 11px 0; font-size: var(--texto-md); outline: none; font-weight: var(--peso-fuerte); }
.simcampo select, .simcampo > input[type=text] { padding: 11px 12px; border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: var(--texto-base); font-family: inherit; background: var(--blanco); }
.simcampo__range { width: 100%; accent-color: var(--acento); margin-top: 2px; }
.simcampo__ayuda { color: var(--gris); font-size: var(--texto-xs); }
.simulador__result { background: var(--navy); color: var(--blanco); border-radius: var(--radio-lg); padding: 28px 24px; position: sticky; top: 90px; }
.simulador__result-lbl { opacity: .8; font-size: var(--texto-sm); }
.simulador__cuota { font-size: clamp(32px, 5vw, 44px); font-weight: var(--peso-extra); color: var(--acento); margin: 6px 0 20px; }
.simulador__desglose { display: grid; gap: 10px; padding: 16px 0; border-top: 1px solid rgba(255,255,255,.12); border-bottom: 1px solid rgba(255,255,255,.12); }
.simulador__desglose div { display: flex; justify-content: space-between; align-items: center; }
.simulador__desglose span { opacity: .8; font-size: var(--texto-sm); }
.simulador__desglose b { font-weight: var(--peso-fuerte); }
.simulador__nota { opacity: .75; font-size: var(--texto-xs); line-height: 1.5; margin: 16px 0 18px; }
@media (max-width: 760px) {
  .simulador__grid { grid-template-columns: 1fr; }
  .simulador__result { position: static; }
}

/* ── Home: teaser de crédito ────────────────────────────────────────────── */
.credito-band { background: linear-gradient(160deg, var(--navy), #1f2d3a); color: var(--blanco); }
.credito-band__inner { max-width: 720px; margin: 0 auto; padding: 64px var(--esp-4); text-align: center; }
.credito-band__badge { display: inline-block; border: 1px solid rgba(255,149,64,.5); color: var(--acento);
  border-radius: var(--radio-full); padding: 5px 14px; font-size: var(--texto-xs); font-weight: var(--peso-fuerte);
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 20px; }
.credito-band h2 { font-size: clamp(30px, 4.4vw, 52px); line-height: 1.1; margin: 0 0 16px; font-weight: var(--peso-extra); }
.credito-band h2 em { color: var(--acento); font-style: normal; }
.credito-band__inner > p { opacity: .85; font-size: var(--texto-md); max-width: 540px; margin: 0 auto 28px; line-height: 1.55; }
.credito-band__cta { background: var(--acento); box-shadow: 0 8px 30px rgba(255,149,64,.35); }
.credito-band__cta:hover { background: var(--acento-oscuro); }
.credito-band__nota { display: block; margin-top: 18px; opacity: .6; font-size: var(--texto-sm); }

/* ── Home: mockup del panel del vendedor ────────────────────────────────── */
.dashmock { max-width: 940px; margin: 0 auto; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-md); overflow: hidden; text-align: left; }
.dashmock__bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--linea); background: var(--fondo); }
.dashmock__dots { display: inline-flex; gap: 6px; }
.dashmock__dots i { width: 10px; height: 10px; border-radius: 50%; background: #ddd; }
.dashmock__dots i:nth-child(1){ background:#ff5f57 } .dashmock__dots i:nth-child(2){ background:#febc2e } .dashmock__dots i:nth-child(3){ background:#28c840 }
.dashmock__urlbar { flex: 1; text-align: center; color: var(--gris); font-size: var(--texto-xs); }
.dashmock__vivo { display: inline-flex; align-items: center; gap: 5px; color: var(--marca-verde-wa);
  font-size: var(--texto-xs); font-weight: var(--peso-fuerte); background: rgba(37,211,102,.12); padding: 4px 10px; border-radius: var(--radio-full); }
.dashmock__body { padding: 20px; display: grid; gap: 16px; }
.dashmock__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dtile { background: var(--fondo); border: 1px solid var(--linea); border-radius: var(--radio); padding: 14px; }
.dtile__lbl { display: flex; align-items: center; gap: 6px; color: var(--gris); font-size: var(--texto-xs); margin-bottom: 8px; }
.dtile__lbl .ico { width: 13px; height: 13px; color: var(--acento); }
.dtile b { display: block; font-size: var(--texto-xl); font-weight: var(--peso-extra); color: var(--slate); }
.dtile__delta { display: block; margin-top: 6px; font-size: 11px; font-weight: var(--peso-fuerte); color: var(--marca-verde-wa); }
.dtile__delta--gris { color: var(--gris); font-weight: var(--peso-medio); }
.dashmock__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.dpanel { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-lg); padding: 16px; }
.dpanel__head { display: flex; align-items: center; justify-content: space-between; }
.dpanel__head h4, .dpanel__h { margin: 0 0 2px; font-size: var(--texto-base); }
.dpanel__h { margin-bottom: 12px; }
.dpanel__tag { background: var(--fondo); color: var(--gris); border-radius: var(--radio-full); padding: 2px 9px; font-size: 11px; font-weight: var(--peso-fuerte); }
.dpanel__sub { color: var(--gris); font-size: var(--texto-xs); margin: 0 0 14px; }
.dchart { display: flex; align-items: flex-end; gap: 8px; height: 120px; }
.dchart span { flex: 1; position: relative; background: var(--acento); border-radius: 5px 5px 0 0; min-height: 6px;
  height: 0; transition: height .9s cubic-bezier(.34,1.05,.5,1); }
.dchart.animado span { height: var(--h); }
.dchart span:nth-child(2) { transition-delay: .05s } .dchart span:nth-child(3) { transition-delay: .1s }
.dchart span:nth-child(4) { transition-delay: .15s } .dchart span:nth-child(5) { transition-delay: .2s }
.dchart span:nth-child(6) { transition-delay: .25s } .dchart span:nth-child(7) { transition-delay: .3s }
.dchart span:nth-child(odd) { background: var(--slate); }
@media (prefers-reduced-motion: reduce) {
  .dchart span { transition: none; height: var(--h); }
  .ddonut__seg { transition: none; stroke-dasharray: var(--len) 352; }
}
.dchart span i { position: absolute; bottom: -18px; left: 0; right: 0; text-align: center; font-size: 10px; color: var(--gris); font-style: normal; }
.dchart { margin-bottom: 18px; }
.ddonut { display: flex; align-items: center; gap: 18px; }
.ddonut__grafico { flex-shrink: 0; position: relative; width: 128px; height: 128px; }
.ddonut__grafico svg { transform: rotate(-90deg); }
.ddonut__bg { fill: none; stroke: var(--fondo); stroke-width: 18; }
.ddonut__seg { fill: none; stroke-width: 18; stroke-linecap: round; stroke-dasharray: 0 352;
  transition: stroke-dasharray .95s cubic-bezier(.4,0,.2,1); }
.ddonut.animado .ddonut__seg { stroke-dasharray: var(--len) 352; }
.ddonut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ddonut__num { font-size: var(--texto-xl); font-weight: var(--peso-extra); color: var(--slate); line-height: 1; }
.ddonut__lbl { font-size: 10px; color: var(--gris); text-transform: uppercase; letter-spacing: .05em; margin-top: 2px; }
.ddonut__legend { list-style: none; margin: 0; padding: 0; flex: 1; display: grid; gap: 9px; }
.ddonut__legend li { display: flex; align-items: center; gap: 8px; font-size: var(--texto-sm); color: var(--slate); }
.ddonut__legend b { margin-left: auto; font-weight: var(--peso-fuerte); }
.ddonut__legend i { width: 10px; height: 10px; border-radius: 3px; flex-shrink: 0; }
.c-wa{ background: var(--marca-verde-wa) } .c-chat{ background: var(--acento) } .c-call{ background: var(--slate) } .c-email{ background:#b8c0c9 }
.dfeed { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.dfeed li { display: flex; align-items: center; gap: 11px; padding: 9px 0; border-bottom: 1px solid var(--linea); }
.dfeed li:last-child { border-bottom: none; }
.dfeed__ico { flex-shrink: 0; font-size: 16px; }
.dfeed__txt { flex: 1; display: flex; flex-direction: column; }
.dfeed__txt strong { font-size: var(--texto-sm); font-weight: var(--peso-fuerte); color: var(--slate); }
.dfeed__txt span { font-size: var(--texto-xs); color: var(--gris); }
.dfeed time { flex-shrink: 0; font-size: 11px; color: var(--gris); white-space: nowrap; }
.dfeed time.ok { color: var(--marca-verde-wa); font-weight: var(--peso-fuerte); }
@media (max-width: 760px) {
  .dashmock__tiles { grid-template-columns: repeat(2, 1fr); }
  .dashmock__row { grid-template-columns: 1fr; }
  .dashmock__urlbar { display: none; }
}

/* ── Home: tipos de vendedor ────────────────────────────────────────────── */
.vendedores { padding: 56px var(--esp-4); }
.vendedores__head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.vendedores__head h2 { font-size: clamp(26px, 3vw, 38px); margin: 0 0 12px; font-weight: var(--peso-extra); }
.vendedores__head h2 em { color: var(--acento); font-style: normal; }
.vendedores__head p { color: var(--gris); margin: 0; line-height: 1.6; }
.vendedores__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; max-width: 760px; margin: 0 auto; }
.vcard-tipo { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-lg); padding: 28px 24px;
  display: flex; flex-direction: column; align-items: flex-start; box-shadow: var(--sombra);
  transition: transform var(--trans), box-shadow var(--trans); }
.vcard-tipo:hover { transform: translateY(-3px); box-shadow: var(--sombra-md); }
.vcard-tipo--destacada { border-color: var(--acento); box-shadow: 0 10px 30px rgba(255,149,64,.18); }
.vcard-tipo__ico { width: 52px; height: 52px; border-radius: var(--radio); background: var(--acento-suave);
  color: var(--acento); display: flex; align-items: center; justify-content: center; margin-bottom: 16px; }
.vcard-tipo__ico .ico { width: 26px; height: 26px; }
.vcard-tipo h3 { font-size: var(--texto-lg); margin: 0 0 10px; font-weight: var(--peso-extra); color: var(--slate); }
.vcard-tipo p { color: var(--gris); margin: 0 0 20px; line-height: 1.6; flex: 1; }
.vcard-tipo__cta { color: var(--acento); font-weight: var(--peso-fuerte); }
.vcard-tipo__cta:hover { text-decoration: underline; }
@media (max-width: 820px) { .vendedores__grid { grid-template-columns: 1fr; max-width: 460px; } }

/* ── Home: hero carrusel ────────────────────────────────────────────────── */
.hcaru { position: relative; overflow: hidden; background: var(--navy); }
.hcaru__slides { position: relative; min-height: 440px; }
.hcaru__slide { position: absolute; inset: 0; display: flex; align-items: center;
  opacity: 0; visibility: hidden; transition: opacity .6s ease; }
.hcaru__slide.activo { opacity: 1; visibility: visible; }
.hcaru__inner { position: relative; z-index: 1; color: var(--blanco); padding: 60px var(--esp-4); max-width: 760px; }
.hcaru__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--texto-sm);
  font-weight: var(--peso-fuerte); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); margin-bottom: 14px; }
.hcaru__eyebrow .bandera { width: 22px; height: auto; border-radius: 2px; }
.hcaru__tag { position: absolute; top: 26px; right: 26px; z-index: 2; background: rgba(255,255,255,.12);
  color: var(--blanco); border-radius: var(--radio-full); padding: 6px 14px; font-size: var(--texto-xs);
  font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: .05em; }
.hcaru__title { font-size: clamp(34px, 5vw, 56px); line-height: 1.08; margin: 0 0 16px; font-weight: var(--peso-extra); }
.hcaru__title em { color: var(--acento); font-style: normal; }
.hcaru__sub { font-size: var(--texto-md); opacity: .85; max-width: 540px; line-height: 1.55; margin: 0 0 26px; }
.hcaru__cta { background: var(--acento); display: inline-flex; align-items: center; gap: 8px; }
.hcaru__cta:hover { background: var(--acento-oscuro); }
.hcaru__cta .ico { width: 18px; height: 18px; }
.hcaru__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 44px; height: 44px;
  border-radius: var(--radio-full); background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  color: var(--blanco); font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .15s; }
.hcaru__nav:hover { background: rgba(255,255,255,.22); }
.hcaru__nav--prev { left: 16px; } .hcaru__nav--next { right: 16px; }
.hcaru__dots { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3; display: flex; gap: 8px; }
.hcaru__dot { width: 8px; height: 8px; border-radius: var(--radio-full); background: rgba(255,255,255,.35);
  border: none; cursor: pointer; padding: 0; transition: width .25s, background .25s; }
.hcaru__dot.activo { width: 26px; background: var(--acento); }
@media (max-width: 720px) {
  .hcaru__slides { min-height: 400px; }
  .hcaru__nav { display: none; }
  .hcaru__tag { top: 16px; right: 16px; }
  .hcaru__inner { padding: 48px var(--esp-4) 56px; }
}

/* ── Home: ticker de actividad ──────────────────────────────────────────── */
.ticker { display: flex; align-items: stretch; background: var(--slate); color: var(--blanco); overflow: hidden; }
.ticker__lbl { flex-shrink: 0; display: flex; align-items: center; background: var(--acento); color: var(--blanco);
  font-weight: var(--peso-fuerte); font-size: var(--texto-xs); text-transform: uppercase; letter-spacing: .08em; padding: 0 16px; }
.ticker__viewport { flex: 1; overflow: hidden; }
.ticker__track { display: inline-flex; align-items: center; white-space: nowrap; animation: ticker-scroll 70s linear infinite; }
.ticker__item { font-size: var(--texto-sm); padding: 11px 0; opacity: .92; }
.ticker__item strong { color: var(--acento); font-weight: var(--peso-fuerte); }
.ticker__sep { margin: 0 18px; opacity: .4; }
.ticker:hover .ticker__track { animation-play-state: paused; }
@keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker__track { animation: none; } }

/* ─────────── Distribuidor del dominio raíz (fullcarro.com) ─────────── */
.cab--root { border-bottom: 1px solid var(--linea); }
.dist-hero { background: var(--fondo); text-align: center; padding: 64px 0 56px; }
.dist-hero__ojo { color: var(--acento); font-weight: var(--peso-fuerte); text-transform: uppercase;
  letter-spacing: .06em; font-size: var(--texto-sm); margin: 0 0 12px; }
.dist-hero__tit { font-size: clamp(30px, 5vw, 46px); line-height: 1.1; margin: 0 0 16px; color: var(--slate); }
.dist-hero__tit span { color: var(--acento); }
.dist-hero__sub { max-width: 620px; margin: 0 auto 24px; color: var(--gris); font-size: var(--texto-md); line-height: 1.6; }
.dist-hero__chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; padding: 0; margin: 22px 0 0; }
.dist-hero__chips li { background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px;
  padding: 7px 16px; font-size: var(--texto-sm); font-weight: var(--peso-medio); color: var(--slate); }

.dist-sec__tit { text-align: center; font-size: var(--texto-xl); margin: 0 0 6px; color: var(--slate); }
.dist-sec__sub { text-align: center; color: var(--gris); margin: 0 0 32px; }

.dist-paises { padding: 56px 0; }
.dist-rejilla { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px; padding: 0; margin: 0 auto; max-width: 760px; }
.dist-pais { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center;
  padding: 28px 18px; background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md);
  text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.dist-pais:hover { border-color: var(--acento); transform: translateY(-3px); box-shadow: var(--sombra); }
.dist-pais__bandera img { width: 46px; height: auto; border-radius: 4px; }
.dist-pais__nombre { font-weight: var(--peso-fuerte); color: var(--slate); font-size: var(--texto-md); }
.dist-pais__url { color: var(--gris); font-size: var(--texto-sm); }

.dist-ventajas { padding: 56px 0; background: var(--fondo); }
.dist-rejilla3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; max-width: 900px; margin: 0 auto; }
.dist-ventaja { background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio-md); padding: 24px; }
.dist-ventaja h3 { margin: 0 0 8px; color: var(--slate); font-size: var(--texto-md); }
.dist-ventaja p { margin: 0; color: var(--gris); line-height: 1.6; }

.dist-cta { text-align: center; padding: 64px 0; }
.dist-cta h2 { font-size: var(--texto-xl); margin: 0 0 8px; color: var(--slate); }
.dist-cta p { color: var(--gris); margin: 0 0 22px; }

/* Honeypot anti-bots (invisible para personas) */
.hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; }

/* Acordeón de FAQ (details/summary nativo) */
.faq { margin-top: 8px; }
.faq details { border: 1px solid var(--linea); border-radius: var(--radio-md); margin-bottom: 10px; background: var(--blanco); }
.faq summary { cursor: pointer; padding: 14px 16px; font-weight: var(--peso-medio); color: var(--slate); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; float: right; color: var(--acento); font-weight: var(--peso-fuerte); }
.faq details[open] summary::after { content: '−'; }
.faq details > p { margin: 0; padding: 0 16px 16px; color: var(--gris); line-height: 1.6; }
.faq details > p a { color: var(--acento); }

/* Widget Turnstile en los formularios */
.turnstile-campo { margin: 16px 0; }

/* Asterisco de campo obligatorio */
.req { color: var(--peligro); font-weight: var(--peso-fuerte); }

/* Footer del dominio raíz: solo banderas de países, centradas */
.foot--root { padding: 26px 0; }
.foot--root .foot__paises--centro { display: flex; flex-wrap: wrap; justify-content: center;
  gap: 14px 24px; list-style: none; margin: 0; padding: 0; }

/* Tabs "Mis mensajes / Bandeja del equipo" del panel de mensajes del dealer */
.mensajes-tabs { display: inline-flex; gap: 2px; border-bottom: 2px solid var(--linea);
  margin: 8px 0 14px; }
.mensajes-tabs__t { padding: 8px 16px; color: var(--gris); text-decoration: none;
  font-weight: var(--peso-fuerte); font-size: var(--texto-sm);
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  transition: color .15s ease, border-color .15s ease; }
.mensajes-tabs__t:hover { color: var(--slate); }
.mensajes-tabs__t--activa { color: var(--acento); border-bottom-color: var(--acento); }

/* Filtros de la bandeja del equipo (asesor + estado) */
.mensajes-filtros { display: flex; gap: 14px; align-items: flex-end;
  flex-wrap: wrap; margin-bottom: 14px; }
.mensajes-filtros__campo { display: flex; flex-direction: column; gap: 4px; }
.mensajes-filtros__campo span { font-size: var(--texto-xs); color: var(--gris);
  font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: .5px; }
.mensajes-filtros__campo select { padding: 8px 12px; border: 1px solid var(--linea);
  border-radius: var(--radio); background: var(--blanco); font: inherit; cursor: pointer; }
.mensajes-filtros__conteo { margin-left: auto; color: var(--gris);
  font-size: var(--texto-sm); font-style: italic; }

/* Chips (asesor, estado). Píldoras pequeñas para la lista y el header. */
.chat-conv__meta { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.chip { display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 10.5px; font-weight: var(--peso-fuerte); letter-spacing: .2px;
  background: #EEF2F6; color: var(--slate); }
.chip--asesor { background: rgba(255,149,64,.12); color: var(--acento); }
.chip--sin { background: rgba(148,163,184,.14); color: #64748b; font-style: italic; }
.chip--pendiente { background: rgba(59,130,246,.14); color: #2563eb; }
.chip--atrasada { background: rgba(239,68,68,.14); color: #dc2626; }

/* Selector de asignación en el header del hilo (bandeja del equipo) */
.cthread__cab { position: relative; flex-wrap: wrap; row-gap: 8px; }
.cthread__asignar { margin-left: auto; display: inline-flex; align-items: center;
  gap: 6px; flex-shrink: 0; }
.cthread__asignar-lbl { font-size: var(--texto-xs); color: var(--gris);
  font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: .5px; }
.cthread__asignar-sel { padding: 6px 10px; border: 1px solid var(--linea);
  border-radius: 999px; background: var(--blanco); font: inherit; font-size: var(--texto-xs);
  cursor: pointer; transition: border-color .15s ease, box-shadow .2s ease; }
.cthread__asignar-sel:hover { border-color: var(--acento); }
.cthread__asignar-sel--ok { border-color: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.18); }

/* Cabecera de /panel/messages/: en DESKTOP los tabs a la izquierda y las
   preferencias (Web Push + sonido) COMPACTAS a la derecha, en una sola fila.
   En MÓVIL vuelven a ser tarjetas apiladas con descripción larga. */
.mensajes-head { margin-bottom: 14px; display: flex; align-items: center;
  justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.mensajes-prefs { display: flex; gap: 8px; margin: 0; align-items: center; }
.mensajes-prefs__item { display: flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 10px; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 999px;
  cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; }
.mensajes-prefs__item:hover { border-color: var(--acento);
  box-shadow: 0 1px 4px rgba(255,149,64,.10); }
.mensajes-prefs__ico { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--acento); }
.mensajes-prefs__ico svg { width: 16px; height: 16px; }
.mensajes-prefs__txt { display: flex; align-items: center; }
.mensajes-prefs__txt strong { color: var(--slate); font-weight: var(--peso-fuerte);
  font-size: 12.5px; white-space: nowrap; }
.mensajes-prefs__txt small { display: none; }
.mensajes-prefs__item .switch { flex-shrink: 0; transform: scale(.8); transform-origin: right center; }
.mensajes-prefs__item input:disabled + .switch__track { opacity: .5; cursor: not-allowed; }
/* Móvil (≤720px): vuelve al layout de tarjetas grandes con descripción */
@media (max-width: 720px) {
  .mensajes-head { flex-direction: column; align-items: stretch; }
  .mensajes-prefs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    width: 100%; margin-top: 6px; }
  .mensajes-prefs__item { border-radius: 10px; padding: 10px 12px; gap: 10px; }
  .mensajes-prefs__ico svg { width: 20px; height: 20px; }
  .mensajes-prefs__txt { flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; }
  .mensajes-prefs__txt strong { white-space: normal; }
  .mensajes-prefs__txt small { display: block; color: var(--gris); font-size: 11px; line-height: 1.3; }
  .mensajes-prefs__item .switch { transform: none; }
}
@media (max-width: 480px) {
  .mensajes-prefs { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .mensajes-tabs__t { padding: 8px 10px; font-size: 13px; }
  .mensajes-filtros { gap: 8px; }
  .mensajes-filtros__conteo { width: 100%; margin-left: 0; text-align: right; }
  /* En mobile el selector "Asesor:" va debajo del avatar+nombre en una fila propia */
  .cthread__asignar { margin-left: 0; width: 100%; justify-content: space-between; }
  /* Chips y meta más compactos en la lista */
  .chat-conv__meta { gap: 3px; }
  .chip { font-size: 10px; padding: 2px 6px; }
}

/* Toast in-app del chat (esquina inferior-derecha). Aparece cuando llega un
   mensaje y NO estás en /panel/messages/. Slack/Intercom-like: card con foto
   del emisor, preview del texto, vehículo, y botón para abrir la conversación. */
.chat-toast {
  position: fixed; right: 20px; bottom: 20px; z-index: 9999;
  width: min(360px, calc(100vw - 40px));
  background: var(--blanco); color: var(--slate);
  border: 1px solid var(--linea); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14), 0 2px 6px rgba(15, 23, 42, .06);
  padding: 14px 16px 12px; font-size: var(--texto-sm); line-height: 1.45;
  transform: translateY(20px); opacity: 0;
  transition: transform .24s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
}
.chat-toast--visible { transform: translateY(0); opacity: 1; }
.chat-toast__cab { display: flex; justify-content: space-between; align-items: center;
  gap: 8px; margin-bottom: 4px; }
.chat-toast__cab strong { color: var(--slate); font-weight: var(--peso-fuerte);
  font-size: var(--texto-base); }
.chat-toast__x { background: none; border: 0; color: var(--gris); font-size: 22px;
  line-height: 1; cursor: pointer; padding: 0 4px; border-radius: 6px; }
.chat-toast__x:hover { background: rgba(0,0,0,.06); color: var(--slate); }
.chat-toast__cuerpo { color: var(--slate); word-wrap: break-word; }
.chat-toast__meta { color: var(--gris); font-size: var(--texto-xs);
  margin-top: 4px; font-style: italic; }
.chat-toast__abrir { display: inline-block; margin-top: 10px; padding: 6px 14px;
  background: var(--acento); color: var(--blanco); text-decoration: none;
  border-radius: var(--radio); font-weight: var(--peso-fuerte);
  font-size: var(--texto-xs); }
.chat-toast__abrir:hover { filter: brightness(.94); }

/* Toggle switch tipo iOS/SaaS (checkbox oculto + track + thumb) */
.switch { position: relative; display: inline-block; cursor: pointer; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch__track { display: inline-block; width: 44px; height: 24px; background: #d0d5dd;
  border-radius: 999px; transition: background .18s ease; position: relative; }
.switch__thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px;
  background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,.18);
  transition: transform .18s ease; }
.switch input:checked + .switch__track { background: var(--acento); }
.switch input:checked + .switch__track .switch__thumb { transform: translateX(20px); }
.switch input:focus-visible + .switch__track { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Página 404 */
.error404 { text-align: center; padding: 80px 0 90px; }
.error404__code { font-size: clamp(64px, 13vw, 120px); font-weight: var(--peso-extra); color: var(--acento); line-height: 1; margin: 0; }
.error404__tit { font-size: var(--texto-xl); margin: 6px 0 12px; color: var(--slate); }
.error404__sub { color: var(--gris); max-width: 460px; margin: 0 auto 26px; line-height: 1.6; }