/* ============================================================================
   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); }

/* Banner del workspace activo (aparece cuando estás como asesor viendo el
   panel de un dealer). Se ve arriba del contenido del panel, sutil pero
   visible. Un click en "Volver a mi cuenta" cambia el workspace de una. */
.ws-banner { display: flex; align-items: center; gap: 12px; padding: 10px 20px;
  background: linear-gradient(90deg, rgba(255,149,64,.10), rgba(255,149,64,.04));
  border-bottom: 1px solid var(--acento-suave-borde);
  color: var(--slate); font-size: var(--texto-sm); }
.ws-banner__ico { font-size: 16px; line-height: 1; flex-shrink: 0; }
.ws-banner__txt { flex: 1; min-width: 0; }
.ws-banner__txt b { color: var(--acento); font-weight: 700; }
.ws-banner__form { margin: 0; flex-shrink: 0; }
.ws-banner__btn { background: none; border: 0; color: var(--acento);
  font-weight: 700; font-size: var(--texto-sm); cursor: pointer; padding: 4px 8px;
  border-radius: 6px; }
.ws-banner__btn:hover { background: rgba(255,149,64,.14); }
@media (max-width: 500px) {
  .ws-banner { padding: 8px 12px; font-size: 12.5px; }
  .ws-banner__btn { font-size: 12.5px; }
}

/* Switcher de workspace (entre "Mi cuenta" y los dealers donde soy asesor).
   Vive en el header del panel. Usa <details> nativo para el dropdown, sin JS. */
.ws-switch { position: relative; margin-right: auto; margin-left: 12px; }
.ws-switch > summary { list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 12px;
  background: rgba(255,255,255,.08); color: var(--blanco); border-radius: 999px;
  font-size: 13px; font-weight: 600; user-select: none;
  transition: background .12s ease; }
.ws-switch > summary::-webkit-details-marker { display: none; }
.ws-switch > summary:hover { background: rgba(255,255,255,.14); }
.ws-switch[open] > summary { background: rgba(255,255,255,.16); }
.ws-switch__ico { font-size: 15px; line-height: 1; }
.ws-switch__ico--dealer { filter: hue-rotate(0deg); }
.ws-switch__nombre { max-width: 180px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.ws-switch__chev { width: 12px; height: 12px; color: rgba(255,255,255,.7); flex-shrink: 0; }
/* Menú dropdown */
.ws-switch__menu { position: absolute; left: 0; top: calc(100% + 6px); z-index: 30;
  min-width: 280px; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 12px; padding: 6px; margin: 0;
  box-shadow: 0 12px 32px rgba(15,23,42,.14), 0 2px 6px rgba(15,23,42,.06);
  display: flex; flex-direction: column; gap: 2px; }
.ws-switch__item { display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  background: none; border: 0; border-radius: 8px; cursor: pointer; width: 100%;
  text-align: left; color: var(--slate); font: inherit;
  transition: background .12s ease; }
.ws-switch__item:hover { background: rgba(255,149,64,.08); }
.ws-switch__item--activo { background: rgba(255,149,64,.12); }
.ws-switch__item--activo::after { content: '✓'; margin-left: auto;
  color: var(--acento); font-weight: 800; }
.ws-switch__item .ws-switch__ico { font-size: 20px; }
.ws-switch__txt { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ws-switch__txt strong { color: var(--slate); font-size: 13.5px; font-weight: 700; }
.ws-switch__txt small { color: var(--gris); font-size: 11.5px; }
@media (max-width: 500px) {
  .ws-switch__nombre { max-width: 90px; font-size: 12.5px; }
  .ws-switch > summary { padding: 6px 8px 6px 10px; gap: 6px; }
  .ws-switch__menu { min-width: 240px; }
}

/* Header del PANEL (app mode): logo "FC" + Publicar + avatar. Barra fina,
   alineada al MISMO ancho del contenido del panel (logo con el sidebar,
   avatar con el borde derecho de las cards). */
.cab--app { background: var(--navy); }
.cab__inner--app { display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 10px var(--esp-4); max-width: var(--ancho-contenedor);
  margin: 0 auto; height: 56px; }
.cab__acciones-app { display: flex; align-items: center; gap: 14px; }
.cab__publicar-app { padding: 8px 16px; font-size: var(--texto-sm); }
.cab__marca-grupo { display: flex; align-items: center; gap: 12px; }
.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; min-width: 0; gap: 6px; }
}

/* 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; }
/* Toggle de granularidad (Día/Semana/Mes) en la tarjeta de Evolución */
.an-gran { display: inline-flex; border: 1px solid var(--linea); border-radius: 999px; overflow: hidden; flex: 0 0 auto; }
.an-gran__op { padding: 4px 12px; font-size: 12px; font-weight: var(--peso-fuerte); color: var(--gris);
  text-decoration: none; cursor: pointer; user-select: none; }
.an-gran__op--on { background: var(--acento); color: #fff; }
.an-leyenda-h__it small { color: var(--gris); font-weight: 500; }
/* 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: center; 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; }
/* Pill de rango en el header (mismo look que el .dpanel__tag del home) */
.an-card__pill { flex: 0 0 auto; background: var(--fondo); color: var(--gris);
  border-radius: var(--radio-full); padding: 2px 10px; font-size: 11px; font-weight: var(--peso-fuerte); }

/* 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; }
/* Capa de burbujas de leads superpuesta al SVG (círculos perfectos) */
.an-linea-wrap { position: relative; }
.an-burbujas { position: absolute; inset: 0; pointer-events: none; }
.an-burbuja { position: absolute; transform: translate(-50%, -50%); border-radius: 50%;
  display: flex; align-items: center; justify-content: center; color: #fff;
  font-size: 11px; font-weight: var(--peso-fuerte); opacity: .8;
  box-shadow: 0 1px 4px rgba(15, 31, 61, .18); pointer-events: auto;
  transition: opacity .12s, transform .12s; }
.an-burbuja:hover { opacity: 1; transform: translate(-50%, -50%) scale(1.08); z-index: 2; }

/* ── Animación de carga estilo SaaS (al abrir Analíticas) ─────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* KPI cards: suben con leve escalonado */
  .an-kpi { animation: an-rise .5s cubic-bezier(.2,.7,.3,1) backwards; }
  .an-kpi:nth-child(2){ animation-delay:.05s } .an-kpi:nth-child(3){ animation-delay:.10s }
  .an-kpi:nth-child(4){ animation-delay:.15s } .an-kpi:nth-child(5){ animation-delay:.20s }
  .an-kpi:nth-child(6){ animation-delay:.25s } .an-kpi:nth-child(7){ animation-delay:.30s }
  @keyframes an-rise { from { opacity:0; transform: translateY(12px); } to { opacity:1; transform:none; } }

  /* Donut: el ANILLO se dibuja — cada segmento crece a lo largo de su arco
     (stroke-dasharray 0 → dash), igual que el del home. La leyenda sube. */
  .an-dona { animation: an-fade .4s ease backwards; }
  @keyframes an-fade { from { opacity:0; } to { opacity:1; } }
  .an-dona__seg { animation: an-dona-draw 1s cubic-bezier(.4,0,.2,1) backwards; }
  @keyframes an-dona-draw { from { stroke-dasharray: 0 var(--circ); }
                            to { stroke-dasharray: var(--dash) var(--gap); } }
  .an-leyenda li { animation: an-rise .5s ease backwards; animation-delay:.35s; }
  .an-leyenda li:nth-child(1){ animation-delay:.35s } .an-leyenda li:nth-child(2){ animation-delay:.44s }
  .an-leyenda li:nth-child(3){ animation-delay:.53s } .an-leyenda li:nth-child(4){ animation-delay:.62s }

  /* Embudo: barras crecen desde la izquierda, escalonadas */
  .an-barra__fill { transform-origin: left center; animation: an-bar .9s cubic-bezier(.2,.7,.3,1) backwards; }
  @keyframes an-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  .an-embudo li:nth-child(2) .an-barra__fill{ animation-delay:.07s }
  .an-embudo li:nth-child(3) .an-barra__fill{ animation-delay:.14s }
  .an-embudo li:nth-child(4) .an-barra__fill{ animation-delay:.21s }
  .an-embudo li:nth-child(5) .an-barra__fill{ animation-delay:.28s }

  /* Burbujas de lead: pop-in con rebote, escalonado */
  .an-burbuja { animation: an-bub .55s cubic-bezier(.34,1.56,.64,1) backwards; }
  .an-burbuja:nth-child(2){ animation-delay:.06s } .an-burbuja:nth-child(3){ animation-delay:.12s }
  .an-burbuja:nth-child(4){ animation-delay:.18s } .an-burbuja:nth-child(5){ animation-delay:.24s }
  .an-burbuja:nth-child(6){ animation-delay:.30s } .an-burbuja:nth-child(7){ animation-delay:.36s }
  @keyframes an-bub { from { opacity:0; transform: translate(-50%,-50%) scale(0); }
                      to { opacity:.8; transform: translate(-50%,-50%) scale(1); } }
}

/* 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__val { margin-left: auto; display: inline-flex; align-items: baseline; gap: 6px; }
.an-leyenda__val b { color: var(--slate); font-weight: 700; }
.an-leyenda__pct { color: var(--gris); font-size: 12px; }

.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; }
/* Asignador de vehículos por asesor (accordion nativo dentro de eq-item) */
.eq-asignar { grid-column: 1 / -1; margin-top: 8px; }
.eq-asignar > summary { list-style: none; cursor: pointer; user-select: none;
  padding: 8px 12px; background: rgba(255,149,64,.08); color: var(--acento);
  border-radius: 8px; font-weight: 700; font-size: var(--texto-sm);
  display: inline-flex; align-items: center; gap: 6px;
  transition: background .12s ease; }
.eq-asignar > summary::-webkit-details-marker { display: none; }
.eq-asignar > summary::before { content: '▸'; font-size: 12px; transition: transform .12s ease; }
.eq-asignar[open] > summary::before { transform: rotate(90deg); }
.eq-asignar > summary:hover { background: rgba(255,149,64,.14); }
.eq-asignar__form { margin-top: 10px; padding: 14px; background: #F5F7FA;
  border-radius: 10px; }
.eq-asignar__intro { margin: 0 0 12px; font-size: 12.5px; color: var(--gris); }
.eq-asignar__lista { display: flex; flex-direction: column; gap: 6px;
  max-height: 340px; overflow-y: auto; padding-right: 4px; }
.eq-asignar__op { display: flex; align-items: flex-start; gap: 10px;
  padding: 8px 10px; background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 8px; cursor: pointer; font-size: 13px; transition: border-color .12s ease; }
.eq-asignar__op:hover { border-color: var(--acento); }
.eq-asignar__op input[type=checkbox] { margin-top: 2px; flex-shrink: 0; }
.eq-asignar__op input[type=checkbox]:checked ~ .eq-asignar__txt strong { color: var(--acento); }
.eq-asignar__txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eq-asignar__txt strong { color: var(--slate); font-weight: 600; }
.eq-asignar__otro { font-size: 11px; color: var(--gris); font-style: italic; }
.eq-asignar__pie { margin-top: 12px; text-align: right; }

/* Filas simples (invitación pendiente + membership con cuenta propia) */
.eq-item--inv { border-color: var(--acento-suave-borde); background: rgba(255,149,64,.04); }
.eq-item__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eq-item__info strong { color: var(--slate); font-size: var(--texto-base); }
.eq-item__meta { color: var(--gris); font-size: 12.5px; }

/* Caja centrada para pantallas de invitación/aceptar en /account/join/ */
.cuenta-caja { max-width: 480px; margin: 40px auto; padding: 32px;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: 16px; text-align: center; }
.cuenta-caja--ancha { max-width: 540px; }
.cuenta-caja__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; margin-bottom: 14px; }
.cuenta-caja__ico--error { background: rgba(239,68,68,.12); color: #dc2626; }
.cuenta-caja h1 { font-size: 22px; font-weight: 700; margin: 0 0 10px;
  color: var(--slate); }
.cuenta-caja__intro { color: var(--gris); font-size: var(--texto-sm);
  line-height: 1.55; margin: 0 0 20px; }
.cuenta-caja__resumen { background: #F5F7FA; border-radius: 10px;
  padding: 14px; margin-bottom: 20px; text-align: left; font-size: 13.5px; }
.cuenta-caja__resumen > div { padding: 3px 0; }
.cuenta-caja__acciones { display: flex; gap: 10px; justify-content: center;
  flex-wrap: wrap; margin-top: 18px; }
.cuenta-caja__acciones .btn { flex: 1 1 auto; }
.cuenta-caja__nota { color: var(--gris); font-size: 12px;
  line-height: 1.5; margin-top: 14px; }
.cuenta-form { text-align: left; }
.cuenta-form .campo { margin-bottom: 12px; }
.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: 6px; left: 6px; z-index: 1; padding: 2px 7px;
  border-radius: var(--radio-full); font-size: 9px; font-weight: var(--peso-fuerte);
  color: #fff; text-transform: uppercase; letter-spacing: .3px; line-height: 1.4; white-space: nowrap; }
.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__code { margin-left: 8px; font-size: 12px; font-weight: var(--peso-medio); color: var(--gris);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums;
  white-space: nowrap; vertical-align: middle; }
.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, .pcard__chat svg, .pcard__call 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__chat { display: inline-flex; align-items: center; gap: 5px; background: #f0ebfb; color: #6d3fc4;
  padding: 3px 10px; border-radius: var(--radio-full); font-weight: var(--peso-medio); }
.pcard__call { display: inline-flex; align-items: center; gap: 5px; background: #e8f0fe; color: #1a56c4;
  padding: 3px 10px; border-radius: var(--radio-full); font-weight: var(--peso-medio); }
.pcard__acciones { display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
  min-width: 300px; align-content: start; }
.pcard__acciones .pcard-adv { grid-column: 1 / -1; }
.pcard__acciones form { display: block; }
.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%; }

/* Chip clickable de asesor asignado al vehículo (reemplaza el select).
   Diseño: chip con avatar + nombre → dropdown con avatares de todo el equipo. */
.pcard-adv { position: relative; display: flex; flex-direction: column; gap: 3px; }
.pcard-adv__lbl { font-size: var(--texto-xs); color: var(--gris); }
.pcard-adv__chip { display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 8px 5px 5px; background: var(--blanco);
  border: 1px solid var(--linea); border-radius: 999px;
  cursor: pointer; font: inherit; color: var(--slate);
  transition: border-color var(--trans), background var(--trans); }
.pcard-adv__chip:hover:not(:disabled) { border-color: var(--acento); }
.pcard-adv__chip:disabled { opacity: .5; cursor: wait; }
.pcard-adv__avatar { display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%; color: #fff;
  font-weight: var(--peso-fuerte); font-size: 10px; flex-shrink: 0;
  overflow: hidden; }
.pcard-adv__avatar img { width: 100%; height: 100%; object-fit: cover; }
.pcard-adv__avatar--nada { background: var(--gris-suave); color: var(--gris);
  border: 1px dashed var(--linea-punto); }
.pcard-adv__nombre { font-size: 12.5px; font-weight: var(--peso-medio);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 110px; }
.pcard-adv__nombre--nada { color: var(--gris); font-weight: var(--peso-normal); }
.pcard-adv__caret { width: 10px; height: 7px; color: var(--gris); flex-shrink: 0; }

.pcard-adv__pop { position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio); box-shadow: var(--sombra-md);
  min-width: 220px; max-width: 280px; max-height: 260px; overflow-y: auto;
  padding: 6px; z-index: 30; }
.pcard-adv__op { display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 7px 8px; background: transparent; border: 0; border-radius: 6px;
  cursor: pointer; font: inherit; text-align: left; color: var(--slate);
  transition: background var(--trans); }
.pcard-adv__op:hover { background: var(--gris-suave); }
.pcard-adv__op[data-actual] { background: var(--acento-suave); color: var(--acento-oscuro); }
.pcard-adv__op[data-actual]:hover { background: var(--acento-suave); }
.pcard-adv__op > span:nth-child(2) { flex: 1; font-size: 13px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pcard-adv__badge { font-size: 10px; padding: 1px 6px;
  background: var(--exito-bg); color: var(--exito-texto);
  border-radius: 999px; font-weight: var(--peso-medio); }

/* Selector de asesor en el edit del vehículo (mismo diseño que el chip pero
   dentro del formulario, con label del form-rejilla) */
.form-asesor { display: flex; flex-direction: column; gap: 8px;
  position: relative; }
.form-asesor > label { font-weight: var(--peso-medio); color: var(--slate);
  font-size: var(--texto-sm); }

/* ── Destacar (Nitro) — botón en la card del inventario + modal de compra ── */
.pbtn--boost { background: var(--acento-suave); color: var(--acento-oscuro);
  border: 1px solid var(--acento-suave-borde); font-weight: var(--peso-fuerte); }
.pbtn--boost:hover { background: var(--acento-tenue); border-color: var(--acento); }
.pbtn--boost-on { background: var(--exito-bg); color: var(--exito-texto);
  border-color: var(--exito-borde); }
.pbtn--boost-on:hover { background: #d9f3e4; border-color: var(--exito); }
/* Botón "Modificar destacado": gris neutro (ya está destacado; no es un CTA de compra) */
.pbtn--boost-mod { background: #f2f4f7; color: #475467; border-color: #e4e7ec; }
.pbtn--boost-mod:hover { background: #e8ebf0; border-color: #d0d5dd; }

.boost-modal__veh { margin: 0 0 4px; font-weight: var(--peso-fuerte);
  color: var(--slate); font-size: var(--texto-base); }
.boost-modal__ayuda { margin: 0 0 16px; color: var(--gris);
  font-size: 13px; line-height: 1.5; }
.boost-modal__ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.boost-op { margin: 0; }
.boost-op__btn { position: relative; width: 100%; display: flex; flex-direction: column;
  align-items: center; gap: 4px; padding: 16px 8px 14px;
  background: var(--blanco); border: 1.5px solid var(--linea);
  border-radius: var(--radio-md); cursor: pointer; font: inherit;
  transition: border-color var(--trans), transform var(--trans); }
.boost-op__btn:hover { border-color: var(--acento); transform: translateY(-2px); }
.boost-op__btn--pop { border-color: var(--acento); background: var(--acento-suave); }
.boost-op__dias { font-weight: var(--peso-extra); color: var(--slate);
  font-size: var(--texto-md); }
.boost-op__precio { color: var(--acento-oscuro); font-weight: var(--peso-fuerte);
  font-size: 13px; }
.boost-op__tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  background: var(--acento); color: #fff; font-size: 10px; font-weight: var(--peso-fuerte);
  padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.boost-modal__nota { margin: 14px 0 0; color: var(--gris); font-size: 12px;
  text-align: center; }

/* Usar cupo de suscripción (gratis) dentro del modal Destacar */
.boost-cupo { margin-bottom: 4px; }
.boost-cupo form { margin: 0; }
.boost-cupo__btn { width: 100%; display: flex; flex-direction: column; gap: 3px;
  align-items: flex-start; padding: 14px 16px; cursor: pointer; font: inherit;
  background: var(--exito-bg); border: 1.5px solid var(--exito-borde);
  border-radius: var(--radio-md); transition: border-color var(--trans); }
.boost-cupo__btn:hover { border-color: var(--exito); }
.boost-cupo__tit { font-weight: var(--peso-fuerte); color: var(--exito-texto); }
.boost-cupo__sub { font-size: 12px; color: var(--exito-texto); opacity: .8; }
.boost-modal__o { display: flex; align-items: center; gap: 12px; margin: 14px 0;
  color: var(--gris); font-size: 12px; text-transform: uppercase; letter-spacing: .4px; }
.boost-modal__o::before, .boost-modal__o::after { content: ''; flex: 1;
  border-top: 1px solid var(--linea); }

/* Cross-sell de suscripciones (GT / Showroom) dentro del modal Destacar */
.boost-modal__subs { display: flex; flex-direction: column; gap: 8px; }
.boost-sub { display: flex; align-items: center; gap: 12px; margin: 0;
  padding: 12px 14px; background: var(--blanco); border: 1.5px solid var(--linea);
  border-radius: var(--radio); }
.boost-sub__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.boost-sub__nom { font-weight: var(--peso-extra); color: var(--slate);
  font-size: var(--texto-sm); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.boost-sub__pill { font-size: 10px; font-weight: var(--peso-fuerte); text-transform: uppercase;
  letter-spacing: .3px; padding: 2px 8px; border-radius: 999px; }
.boost-sub__pill--gt { background: var(--exito-bg); color: var(--exito-texto); }
.boost-sub__pill--show { background: var(--acento-suave); color: var(--acento-oscuro); }
.boost-sub__desc { font-size: 12px; color: var(--gris); line-height: 1.4; }
.boost-sub__accion { flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: flex-end; gap: 6px; }
.boost-sub__precio { font-weight: var(--peso-fuerte); color: var(--slate);
  font-size: 13px; white-space: nowrap; }
.boost-sub__precio small { font-weight: var(--peso-medio); color: var(--gris); font-size: 11px; }
.boost-sub__btn { border: none; border-radius: 999px; padding: 7px 16px; cursor: pointer;
  font-weight: var(--peso-fuerte); font-size: 12.5px; color: #fff; }
.boost-sub__btn--gt { background: var(--exito, #1FA463); }
.boost-sub__btn--show { background: var(--acento); }
.boost-sub__btn:hover { filter: brightness(1.06); }
.boost-sub__actual { font-size: 12px; font-weight: var(--peso-fuerte);
  color: var(--exito-texto); white-space: nowrap; }

/* Liberar cupo (vehículo destacado por suscripción) */
.boost-liberar { padding: 4px 0 8px; }
.boost-liberar__txt { margin: 0 0 12px; color: var(--gris); font-size: 13px;
  line-height: 1.5; }
.boost-liberar form { margin: 0; text-align: center; }

/* Cupos de destacado en la página de planes */
.pl-cupos { background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-md); padding: 16px 18px; margin: 14px 0 20px; }
.pl-cupos__tit { font-size: 13px; color: var(--slate); margin: 0 0 10px;
  font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: .4px; }
.pl-cupos__lista { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 8px; }
.pl-cupo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--linea); border-radius: var(--radio);
  font-size: var(--texto-sm); }
.pl-cupo--libre { border-style: dashed; background: var(--exito-bg);
  border-color: var(--exito-borde); }
.pl-cupo__fuente { font-weight: var(--peso-extra); color: var(--acento-oscuro);
  text-transform: uppercase; font-size: 11px; letter-spacing: .5px; }
.pl-cupo__veh { flex: 1; color: var(--slate); font-weight: var(--peso-medio);
  min-width: 140px; }
.pl-cupo__veh--libre { color: var(--exito-texto); font-weight: var(--peso-normal); }
.pl-cupo__vence { color: var(--gris); font-size: 12px; white-space: nowrap; }
.pl-cupo__ir { color: var(--acento); font-weight: var(--peso-fuerte);
  text-decoration: none; white-space: nowrap; }

/* Franja de "pago recibido" con el botón de WhatsApp (Opción A) */
.pl-pagook { background: var(--exito-bg); border: 1px solid var(--exito-borde);
  border-radius: var(--radio-md); padding: 14px 16px; margin: 4px 0 20px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; }
.pl-pagook__txt { color: var(--exito-texto); font-size: var(--texto-sm); }
.pl-pagook__txt strong { display: block; font-size: 15px; margin-bottom: 2px; }
.pl-pagook .wa-destacado { margin-top: 0; }

/* Botón "Gestiona tu destacado por WhatsApp" (abre la ventana de 24h) */
.wa-destacado { display: inline-flex; align-items: center; gap: 8px;
  margin-top: 12px; padding: 10px 16px; border-radius: 999px;
  background: #25d366; color: #05331b; font-weight: var(--peso-fuerte);
  font-size: var(--texto-sm); text-decoration: none;
  transition: filter .12s ease; }
.wa-destacado:hover { filter: brightness(1.05); }
.wa-destacado svg { width: 18px; height: 18px; flex: none; }

/* Crédito de upgrade en la card del plan */
.pl-card__credito { margin: 0 0 10px; padding: 8px 10px; font-size: 12.5px;
  background: var(--exito-bg); color: var(--exito-texto);
  border: 1px solid var(--exito-borde); border-radius: var(--radio); }

/* ── Badges públicos de la card (AUDITORIA §4.4: máx 2, con significado) ── */
.vcard__badges { position: absolute; top: 12px; left: 12px; z-index: 3;
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* El Destacado existente pasa a vivir dentro del contenedor apilado */
.vcard__badges .vcard__destacado { position: static; top: auto; left: auto; }
.vcard__badge { display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-size: 11.5px; font-weight: var(--peso-fuerte); line-height: 1.4;
  color: var(--blanco); }
.vcard__badge--baja { background: var(--verde-vendido); }
.vcard__badge--nuevo { background: var(--marca-navy); }

/* Chip de vendedor verificado en la meta de la card */
.vcard__verificado { display: inline-flex; align-items: center; gap: 4px;
  margin-left: auto; color: #1d9bf0; font-size: 12px;
  font-weight: var(--peso-medio); }
.vcard__verificado svg { width: 14px; height: 14px; }

/* Uplift del destacado en la card del inventario del panel */
.pcard__uplift { display: inline-block; font-size: 11.5px; color: var(--exito-texto);
  background: var(--exito-bg); border-radius: 6px; padding: 4px 8px;
  margin-top: 8px; text-align: left; }

/* Chip "★ Destacado" junto al precio (solo panel; despeja la foto) */
.pcard__precio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pcard__dchip { display: inline-flex; align-items: center; gap: 4px;
  background: var(--acento-suave); color: var(--acento-oscuro);
  font-size: 11px; font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: .3px;
  padding: 3px 9px; border-radius: var(--radio-full); }
.pcard__dchip svg { width: 11px; height: 11px; }

/* ── Modal Cambiar destacado ─────────────────────────────────────────────── */
.swap__actual { margin: 0 0 4px; color: var(--slate); font-size: var(--texto-base); }
.swap__nota { margin: 0 0 14px; color: var(--gris); font-size: 13px; line-height: 1.5; }
.swap__buscar { margin-bottom: 12px; }
.swap__buscar-inp { width: 100%; padding: 9px 12px; border: 1px solid var(--linea);
  border-radius: var(--radio); font-size: var(--texto-sm); background: var(--fondo); }
.swap__buscar-inp:focus { outline: none; border-color: var(--acento);
  box-shadow: 0 0 0 3px var(--acento-tenue); }
.swap__lista { display: flex; flex-direction: column; gap: 8px;
  max-height: 46vh; overflow-y: auto; }
.swap-item { display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 10px; background: var(--fondo); border: 1px solid var(--linea);
  border-radius: var(--radio); cursor: pointer; text-align: left;
  transition: border-color .12s, background .12s; }
.swap-item:hover { border-color: var(--acento); background: var(--acento-tenue); }
.swap-item__foto { flex: 0 0 auto; width: 56px; height: 42px; border-radius: 6px;
  overflow: hidden; background: var(--gris-suave, #eef0f3); }
.swap-item__foto img { width: 100%; height: 100%; object-fit: cover; }
.swap-item__info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.swap-item__tit { font-weight: var(--peso-fuerte); color: var(--navy);
  font-size: var(--texto-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.swap-item__precio { font-size: 12.5px; color: var(--gris); }
.swap-item__pick { flex: 0 0 auto; color: var(--acento); font-size: 22px;
  line-height: 1; font-weight: var(--peso-extra); }
.swap__vacio { margin: 8px 0; color: var(--gris); font-size: 13px;
  text-align: center; line-height: 1.5; }
.swap__liberar { margin-top: 14px; padding-top: 12px;
  border-top: 1px solid var(--linea); text-align: center; }
.swap__liberar-o { display: block; color: var(--gris); font-size: 12px; margin-bottom: 6px; }
.swap__liberar-btn { background: none; border: none; color: var(--peligro, #d92d20);
  font-size: 13px; font-weight: var(--peso-fuerte); cursor: pointer; padding: 4px; }
.swap__liberar-btn:hover { text-decoration: underline; }
.swap__confirmar-txt { margin: 0 0 18px; color: var(--slate);
  font-size: var(--texto-base); line-height: 1.55; }
.swap__confirmar-form { display: flex; gap: 10px; justify-content: flex-end; }

/* ── Página pública /planes/ ─────────────────────────────────────────────── */
.pp { padding: 32px 0 56px; }
.pp__hero { text-align: center; max-width: 720px; margin: 0 auto 34px; }
.pp__tit { font-size: clamp(26px, 4.5vw, 38px); color: var(--navy);
  font-weight: var(--peso-extra); margin: 0 0 12px; line-height: 1.2; }
.pp__sub { color: var(--gris); font-size: var(--texto-md); line-height: 1.6;
  margin: 0; }
.pp__grid { align-items: stretch; }
.pl-card--ent { background: var(--navy); border-color: var(--navy); }
.pl-card--ent .pl-card__nombre, .pl-card--ent .pl-feats li { color: var(--blanco); }
.pl-card--ent .pl-card__desc { color: rgba(255,255,255,.75); }
.pl-card__precio--ent { color: var(--acento); }

.pp-nitro { margin: 44px auto 0; max-width: 680px; text-align: center;
  background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-lg); padding: 30px 26px; }
.pp-nitro__tit { font-size: var(--texto-lg); color: var(--slate); margin: 0 0 8px; }
.pp-nitro__sub { color: var(--gris); font-size: var(--texto-sm); line-height: 1.6;
  margin: 0 0 20px; }
.pp-nitro__ops { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin-bottom: 22px; }
.pp-nitro__op { position: relative; display: flex; flex-direction: column; gap: 4px;
  padding: 16px 8px 14px; border: 1.5px solid var(--linea);
  border-radius: var(--radio-md); }
.pp-nitro__op--pop { border-color: var(--acento); background: var(--acento-suave); }
@media (max-width: 560px){
  .pp-nitro__ops { grid-template-columns: 1fr; }
}

/* ── /planes/ v2: cards con borde de color (diseño de co.) ─────────────── */
.ppx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
  align-items: start; --c-nitro: #8b5cf6; --c-gt: #2ecc71; --c-show: var(--acento); }
.ppx-card { background: var(--blanco); border: 2px solid var(--linea);
  border-radius: 18px; padding: 24px 24px 20px; display: flex;
  flex-direction: column; gap: 12px; }
.ppx-card--nitro { border-color: var(--c-nitro); }
.ppx-card--gt { border-color: var(--c-gt); }
.ppx-card--show { border-color: var(--c-show); }

.ppx-pill { align-self: flex-start; padding: 5px 14px; border-radius: 8px;
  font-size: 11.5px; font-weight: var(--peso-extra); letter-spacing: .6px;
  text-transform: uppercase; }
.ppx-pill--gris { background: var(--gris-suave); color: var(--gris); }
.ppx-pill--nitro { background: var(--c-nitro); color: #fff; }
.ppx-pill--gt { background: var(--c-gt); color: #fff; }
.ppx-pill--show { background: var(--c-show); color: #fff; }

.ppx-card__nombre { margin: 2px 0 0; font-size: 26px; letter-spacing: .5px;
  color: var(--slate); font-weight: var(--peso-extra); }
.ppx-card__precio { font-size: 32px; font-weight: var(--peso-extra);
  color: var(--slate); }
.ppx-card__precio small { font-size: 15px; color: var(--gris);
  font-weight: var(--peso-medio); }

.ppx-toggle { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
  background: var(--gris-suave); border-radius: 12px; padding: 5px; }
.ppx-toggle__op { border: 0; background: transparent; padding: 10px 0;
  border-radius: 9px; font: inherit; font-weight: var(--peso-extra);
  color: var(--gris); cursor: pointer; transition: all var(--trans); }
.ppx-toggle__op--on { background: var(--acento); color: #fff; }

.ppx-card__nota { margin: 0; background: #f7f9fb; border-radius: var(--radio);
  padding: 13px 14px; color: var(--tinta); font-size: 13px; line-height: 1.6; }
.ppx-card__nota--check { }

.ppx-cta { display: block; width: 100%; text-align: center; padding: 13px 16px;
  border: 0; border-radius: 12px; font: inherit; font-size: var(--texto-base);
  font-weight: var(--peso-extra); color: #fff; cursor: pointer;
  text-decoration: none; transition: filter var(--trans); }
.ppx-cta:hover { filter: brightness(1.07); }
.ppx-cta--nitro { background: var(--c-nitro); }
.ppx-cta--gt { background: var(--c-gt); }
.ppx-cta--show { background: var(--c-show); }
.ppx-card form { margin: 0; }

.ppx-incluye { border-top: 1px solid var(--linea); padding-top: 12px; }
.ppx-incluye__tit { display: block; color: var(--gris); font-size: 11px;
  font-weight: var(--peso-extra); letter-spacing: .8px; text-transform: uppercase;
  margin-bottom: 8px; }
.ppx-incluye ul { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: 8px; }
.ppx-incluye li { color: var(--tinta); font-size: 13.5px; line-height: 1.5; }
.ppx-feat--top { font-weight: var(--peso-extra); color: var(--slate); }
.ppx-feat--nitro { color: var(--c-nitro); }
.ppx-feat--gt { color: #1da75b; }
.ppx-feat--show { color: var(--acento-oscuro); }

.ppx-ent { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--navy); border-radius: 18px; padding: 24px 28px;
  margin-top: 26px; }
.ppx-ent__txt { flex: 1; min-width: 260px; }
.ppx-ent__txt h2 { color: #fff; margin: 0 0 4px; font-size: var(--texto-lg); }
.ppx-ent__txt p { color: rgba(255,255,255,.75); margin: 0;
  font-size: var(--texto-sm); line-height: 1.6; }

/* Sello de pago seguro (escudo verde + texto) */
.pago-seguro { display: flex; align-items: center; justify-content: center;
  gap: 9px; margin: 26px auto 0; padding: 11px 20px; width: fit-content;
  background: var(--exito-bg); border: 1px solid var(--exito-borde);
  border-radius: 999px; color: var(--exito-texto);
  font-size: var(--texto-sm); font-weight: var(--peso-fuerte); }
.pago-seguro__escudo { width: 20px; height: 20px; flex-shrink: 0; }
.pago-seguro__cuerpo { fill: var(--marca-verde-wa); }
.pago-seguro__check { stroke: #fff; }

.pp__gratis { margin: 14px 0 0; color: var(--gris); font-size: var(--texto-sm); }
.pp__gratis a { color: var(--acento); font-weight: var(--peso-fuerte);
  text-decoration: none; }

/* Dentro del panel el ancho útil es menor (hay sidebar): cards más compactas
   y quiebre a 1 columna antes. */
.ppx--panel { gap: 16px; }
.ppx--panel .ppx-card { padding: 20px 20px 18px; border-radius: 16px; }
.ppx--panel .ppx-card__nombre { font-size: 22px; }
.ppx--panel .ppx-card__precio { font-size: 26px; }
.ppx-card--actual { box-shadow: 0 0 0 3px rgba(46,204,113,.12); }
.ppx-cta--actual { background: var(--gris-suave); color: var(--gris);
  cursor: default; }
.ppx-cta--actual:hover { filter: none; }
.ppx--panel + .ppx-ent { margin-top: 18px; padding: 20px 22px; }

@media (max-width: 1100px){
  .ppx--panel { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}
@media (max-width: 900px){
  .ppx { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
}

/* Paquetes de Nitro (créditos prepago) en /planes/ */
.pp-packs { margin-top: 28px; padding-top: 24px; border-top: 1px dashed var(--linea-punto); }
.pp-packs__tit { font-size: var(--texto-md); color: var(--slate); margin: 0 0 6px; }
.pp-packs__sub { color: var(--gris); font-size: 12.5px; line-height: 1.6; margin: 0 0 18px; }
.pp-packs__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.pp-pack { display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 18px 12px 16px; border: 1.5px solid var(--linea);
  border-radius: var(--radio-md); }
.pp-pack__n { font-size: 26px; font-weight: var(--peso-extra); color: var(--acento); }
.pp-pack__nombre { color: var(--slate); font-weight: var(--peso-fuerte); }
.pp-pack__precio { color: var(--slate); font-size: var(--texto-md);
  font-weight: var(--peso-extra); }
.pp-pack__ahorro { color: var(--exito-texto); font-size: 12px; margin-bottom: 8px; }
@media (max-width: 560px){
  .pp-packs__grid { grid-template-columns: 1fr; }
}

/* Saldo de créditos Nitro en Mis Planes */
.pl-cupo--credito { border-style: dashed; background: var(--acento-suave);
  border-color: var(--acento-suave-borde); }

/* ── Contenido SEO de landings (migrado de co. + datos reales) ─────────── */
.ls { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; }
.ls__sep { display: flex; align-items: center; gap: 14px; color: var(--acento-oscuro);
  font-size: 12px; font-weight: var(--peso-fuerte); letter-spacing: 1.2px;
  text-transform: uppercase; }
.ls__sep::before, .ls__sep::after { content: ''; flex: 1;
  border-top: 1px solid var(--acento-suave-borde); }

.ls-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  background: linear-gradient(120deg, #fff8ef, #fff2e2);
  border: 1px solid var(--acento-suave-borde); border-radius: var(--radio-md);
  padding: 18px 20px; }
.ls-stat { display: flex; flex-direction: column; gap: 2px; }
.ls-stat strong { font-size: var(--texto-lg); color: var(--slate);
  font-weight: var(--peso-extra); }
.ls-stat span { color: var(--gris); font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; font-weight: var(--peso-medio); }

.ls-card { background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-md); padding: 24px 26px; }
.ls-card__h2 { font-size: var(--texto-lg); color: var(--slate); margin: 0 0 8px;
  font-weight: var(--peso-extra); }
.ls-card__intro { color: var(--gris); font-size: var(--texto-sm);
  line-height: 1.65; margin: 0 0 14px; }
.ls-sub { background: #f7f9fb; border-radius: var(--radio); padding: 14px 16px;
  margin-bottom: 10px; }
.ls-sub h3 { margin: 0 0 6px; font-size: var(--texto-base); color: var(--slate); }
.ls-sub p { margin: 0; color: var(--tinta); font-size: var(--texto-sm);
  line-height: 1.7; }

.ls-marcas { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.ls-marca { display: flex; align-items: center; gap: 8px; padding: 12px;
  border: 1px solid var(--linea); border-radius: var(--radio);
  text-decoration: none; transition: border-color var(--trans); flex-wrap: wrap; }
.ls-marca:hover { border-color: var(--acento); }
.ls-marca__pos { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 6px; background: var(--gris-suave);
  color: var(--gris); font-size: 11px; font-weight: var(--peso-extra); flex-shrink: 0; }
.ls-marca__pos--top { background: var(--acento); color: #fff; }
.ls-marca__nombre { color: var(--slate); font-weight: var(--peso-fuerte);
  font-size: var(--texto-sm); }
.ls-marca__n { flex-basis: 100%; color: var(--gris); font-size: 12px;
  padding-left: 30px; }

.ls-buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ls-bucket { border: 1px solid var(--linea); border-radius: var(--radio-md);
  padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.ls-bucket__tag { align-self: flex-start; background: var(--navy); color: #fff;
  padding: 3px 12px; border-radius: 999px; font-size: 11px;
  font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: .5px; }
.ls-bucket__mediana { color: var(--gris); font-size: var(--texto-sm); }
.ls-bucket__mediana strong { color: var(--slate); font-size: var(--texto-xl);
  font-weight: var(--peso-extra); margin-left: 4px; }
.ls-bucket__rango { color: var(--tinta); font-size: 13px; }
.ls-bucket__modelos { border-top: 1px dashed var(--linea-punto); padding-top: 8px;
  margin-top: 4px; color: var(--slate); font-weight: var(--peso-medio);
  font-size: 13px; }
.ls-bucket__modelos small { display: block; color: var(--gris); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 3px; }
.ls-bucket__ir { color: var(--acento); font-weight: var(--peso-fuerte);
  font-size: 13px; text-decoration: none; margin-top: 2px; }

.ls-cta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: linear-gradient(120deg, #232e3f, var(--navy));
  border-radius: var(--radio-md); padding: 26px 28px; }
.ls-cta__txt { flex: 1; min-width: 260px; }
.ls-cta__txt h2 { color: #fff; margin: 0 0 4px; font-size: var(--texto-lg); }
.ls-cta__txt p { color: rgba(255,255,255,.75); margin: 0 0 14px;
  font-size: var(--texto-sm); }
.ls-cta__stats { display: flex; gap: 28px; flex-wrap: wrap; }
.ls-cta__stats strong { display: block; color: #fff; font-size: var(--texto-lg);
  font-weight: var(--peso-extra); }
.ls-cta__stats span { color: rgba(255,255,255,.65); font-size: 11.5px; }

.ls-faqs { display: flex; flex-direction: column; gap: 8px; }
.ls-faq { border: 1px solid var(--linea); border-radius: var(--radio);
  padding: 0 16px; }
.ls-faq summary { cursor: pointer; padding: 13px 0; color: var(--slate);
  font-weight: var(--peso-medio); font-size: var(--texto-sm); list-style: none;
  display: flex; justify-content: space-between; align-items: center; }
.ls-faq summary::-webkit-details-marker { display: none; }
.ls-faq summary::after { content: '+'; color: var(--acento); font-size: 18px;
  font-weight: var(--peso-fuerte); }
.ls-faq[open] summary::after { content: '–'; }
.ls-faq p { margin: 0 0 14px; color: var(--tinta); font-size: var(--texto-sm);
  line-height: 1.7; }

.ls-nearby { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  color: var(--gris); font-size: var(--texto-sm); padding: 4px 2px 20px; }
.ls-nearby a { color: var(--acento); text-decoration: none;
  font-weight: var(--peso-medio); }

/* Gráficas de mercado (barras CSS con datos reales) */
.ls-charts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ls-chart { border: 1px solid var(--linea); border-radius: var(--radio-md);
  padding: 16px 18px; }
.ls-chart__h3 { margin: 0 0 6px; font-size: var(--texto-base); color: var(--slate); }
.ls-chart__insight { margin: 0 0 14px; padding: 9px 12px; background: #f7f9fb;
  border-radius: var(--radio); color: var(--tinta); font-size: 12.5px;
  line-height: 1.6; }
.ls-chart__barras { display: flex; flex-direction: column; gap: 7px; }
.ls-chart__fila { display: grid; grid-template-columns: 88px 1fr; gap: 10px;
  align-items: center; }
.ls-chart__label { color: var(--gris); font-size: 12px; text-align: right;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ls-chart__pista { background: var(--gris-suave); border-radius: 999px;
  height: 22px; overflow: hidden; display: block; }
.ls-chart__barra { display: flex; align-items: center; justify-content: flex-end;
  height: 100%; min-width: 46px; background: var(--slate); border-radius: 999px;
  padding: 0 8px; }
.ls-chart__barra--top { background: var(--acento); }
.ls-chart__barra em { color: #fff; font-style: normal; font-size: 11px;
  font-weight: var(--peso-fuerte); white-space: nowrap; }
@media (max-width: 760px){
  .ls-charts { grid-template-columns: 1fr; }
}

@media (max-width: 860px){
  .ls-stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .ls-marcas { grid-template-columns: repeat(2, 1fr); }
  .ls-buckets { grid-template-columns: 1fr; }
}

/* ── Inteligencia de Mercado (/panel/market/) ──────────────────────────── */
.mk-gate { display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--acento-suave); border: 1px solid var(--acento-suave-borde);
  border-radius: var(--radio-md); padding: 16px 18px; margin-bottom: 18px; }
.mk-gate__txt { flex: 1; min-width: 240px; color: var(--slate);
  font-size: var(--texto-sm); line-height: 1.6; }
.mk-gate__txt strong { display: block; margin-bottom: 2px; }
/* Teaser: los números reales existen pero borrosos — el dato es el gancho */
.mk-borroso { filter: blur(5px); pointer-events: none; user-select: none; }

.mk-vs { color: var(--gris); font-weight: var(--peso-normal); }
.mk-tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-sm); }
.mk-tabla th { text-align: left; color: var(--gris); font-size: 11.5px;
  text-transform: uppercase; letter-spacing: .4px; padding: 8px 10px;
  border-bottom: 1px solid var(--linea); }
.mk-tabla td { padding: 10px; border-bottom: 1px solid var(--gris-suave);
  color: var(--slate); vertical-align: middle; }
.mk-tabla__veh { font-weight: var(--peso-medio); }
.mk-tabla__base { color: var(--gris); font-size: 12px; }
.mk-tabla__nd { color: var(--gris); font-style: italic; font-size: 12.5px; }
.mk-pos { display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: var(--peso-fuerte); white-space: nowrap; }
.mk-pos--alto { background: var(--peligro-bg); color: var(--peligro-texto); }
.mk-pos--bajo { background: #e8f2fd; color: #1d6fb8; }
.mk-pos--ok { background: var(--exito-bg); color: var(--exito-texto); }

.mk-tiempos { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; }
.mk-tiempo { display: grid; grid-template-columns: 1fr 2fr auto; gap: 12px;
  align-items: center; font-size: var(--texto-sm); }
.mk-tiempo__nombre { color: var(--slate); font-weight: var(--peso-medio); }
.mk-tiempo__nombre small { color: var(--gris); font-weight: var(--peso-normal); }
.mk-tiempo__barra { height: 8px; background: var(--gris-suave);
  border-radius: 999px; overflow: hidden; }
.mk-tiempo__barra > span { display: block; height: 100%; max-width: 100%;
  background: linear-gradient(90deg, var(--acento), var(--acento-oscuro));
  border-radius: 999px; }
.mk-tiempo__dias { color: var(--slate); font-weight: var(--peso-fuerte);
  white-space: nowrap; }
@media (max-width: 700px){
  .mk-tabla__base { display: none; }
  .mk-tiempo { grid-template-columns: 1fr auto; }
  .mk-tiempo__barra { display: none; }
}
@media (max-width: 560px){
  .boost-modal__ops { grid-template-columns: 1fr; }
  .boost-op__btn { flex-direction: row; justify-content: space-between; padding: 13px 14px; }
}
.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; }
/* Badge EN LÍNEA con dot titilante. Verde saturado (visible sobre navy),
   dot con animación pulse — halo que se expande y desvanece cada 1.6s.
   Fuente de verdad: Usuario.is_online (ventana 10 min, ver models.py). */
.vhero__badge--online { background: rgba(34,197,94,.2); color: #86efac;
  border: 1px solid rgba(34,197,94,.5); display: inline-flex; align-items: center; gap: 7px; }
.vhero__dot { width: 8px; height: 8px; border-radius: 50%; background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34,197,94,.7); animation: vhero-pulse 1.6s ease-out infinite; }
@keyframes vhero-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34,197,94,.7); }
  70%  { box-shadow: 0 0 0 8px rgba(34,197,94,0); }
  100% { box-shadow: 0 0 0 0 rgba(34,197,94,0); }
}
@media (prefers-reduced-motion: reduce) {
  .vhero__dot { animation: none; box-shadow: 0 0 0 3px rgba(34,197,94,.35); }
}
/* ── Sección "Vendedores de <dealer>" (asesores activos) ──────────────────
   Card informativa (foto+nombre+cargo), sin CTA. Layout condicional:
   - ≥4 asesores → .vasesores--carrusel: scroll horizontal con scroll-snap +
     flechas (solo en desktop). Cada card mantiene ancho fijo para que el
     "paso" del scroll sea predecible.
   - <4 asesores → .vasesores--grid: cards centradas al mismo tamaño, sin
     scroll ni flechas. Consistencia visual con el carrusel: nunca infla las
     cards cuando hay pocas — así "somos 2" no miente con protagonismo falso. */
.vasesores-wrap { margin: 32px auto 8px; }
.vasesores-tit { font-size: var(--texto-xl); font-weight: var(--peso-extra);
  color: var(--tinta); margin: 0 0 20px; }

.vasesores { position: relative; }
.vasesores__pista { display: flex; gap: 16px; scroll-behavior: smooth; }
.vasesores--grid .vasesores__pista { justify-content: center; flex-wrap: wrap; }
.vasesores--carrusel .vasesores__pista {
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 6px;                 /* aire para la barra de scroll */
  scrollbar-width: thin;
}
.vasesores--carrusel .vasesores__pista::-webkit-scrollbar { height: 6px; }
.vasesores--carrusel .vasesores__pista::-webkit-scrollbar-thumb {
  background: #CBD5E1; border-radius: 3px; }

/* Card del asesor. Ancho fijo para que el "paso" del carrusel sea limpio y
   el grid centrado no estire las cards. Foto grande, nombre 1 línea, cargo
   pequeño. Sin hover elevado — es informativa, no clickeable. */
.vasesor { flex: 0 0 180px; scroll-snap-align: start;
  background: var(--blanco); border-radius: var(--radio);
  padding: 20px 14px 18px; text-align: center;
  box-shadow: var(--sombra-suave); }
.vasesor__foto { width: 88px; height: 88px; border-radius: 50%;
  margin: 0 auto 12px; object-fit: cover; display: block; }
.vasesor__foto--vacia { display: flex; align-items: center; justify-content: center;
  background: #E2E8F0; color: #475569;
  font-size: 26px; font-weight: var(--peso-extra); letter-spacing: .02em; }
.vasesor__nom { font-size: var(--texto-base); font-weight: var(--peso-fuerte);
  color: var(--tinta); margin: 0 0 4px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vasesor__cargo { font-size: 12px; color: #64748B; margin: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Flechas del carrusel. Círculos flotantes a los lados de la pista.
   Se ocultan con `hidden` cuando estás en el extremo (lo controla el JS). */
.vasesores__nav { position: absolute; top: 50%; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blanco); color: var(--tinta);
  border: 1px solid #E2E8F0; box-shadow: var(--sombra-suave);
  font-size: 22px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-50%); transition: background .15s ease; }
.vasesores__nav:hover { background: #F1F5F9; }
.vasesores__nav--prev { left: -14px; }
.vasesores__nav--next { right: -14px; }
/* En mobile no hay flechas: el usuario hace swipe. Y ocultar también en
   pantallas medianas si estorban al layout de la pista. */
@media (max-width: 720px) {
  .vasesores__nav { display: none; }
  .vasesor { flex-basis: 160px; }
  .vasesor__foto { width: 76px; height: 76px; }
}
/* ── Bloque "Sobre <vendedor>" al final de la landing pública ──────────────
   Paridad con fc-landing-seller del plugin de co.: card blanca redondeada,
   descripción con line-breaks del textarea, chips de datos (dirección, tel,
   sitio, horario) y línea de botones redondos de redes sociales. Solo se
   pinta si el vendedor tiene al menos uno de estos datos llenos. */
.vsobre { background: var(--blanco); border-radius: var(--radio-lg);
  padding: 28px 32px; margin: 24px 0 40px; box-shadow: var(--sombra-suave); }
.vsobre__tit { font-size: var(--texto-xl); font-weight: var(--peso-extra);
  color: var(--tinta); margin: 0 0 16px; }
.vsobre__bio { color: #475569; font-size: var(--texto-base); line-height: 1.65;
  margin: 0 0 20px; white-space: pre-line; }
.vsobre__datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px 24px; padding: 18px 0; border-top: 1px solid #E2E8F0;
  border-bottom: 1px solid #E2E8F0; }
.vsobre__dato { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.vsobre__lbl { display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: var(--peso-fuerte); letter-spacing: .08em;
  text-transform: uppercase; color: #64748B; }
.vsobre__lbl .ico { width: 13px; height: 13px; }
.vsobre__val { color: var(--tinta); font-size: var(--texto-base); font-weight: 600;
  word-break: break-word; }
.vsobre__val--link { color: var(--acento); text-decoration: none; }
.vsobre__val--link:hover { text-decoration: underline; }
/* Botón "Ver teléfono / Ver sitio web" cuando el visitante NO está logueado.
   Outline naranja con candado; al click lleva a /account/login/?next=X. Anti-
   scraping y captura de leads — mismo patrón que co.fullcarro.com. */
.vsobre__gated { display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start; padding: 6px 14px;
  background: transparent; color: var(--acento);
  border: 1px solid var(--acento); border-radius: 999px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  transition: background .15s ease, color .15s ease; }
.vsobre__gated:hover { background: var(--acento); color: var(--blanco); }
.vsobre__gated .ico { width: 13px; height: 13px; }
/* Redes: botones redondos, tamaño único, color de marca al hover. Grises
   neutros por defecto para no competir con los CTA principales del hero. */
.vsobre__redes { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 20px; }
.vsobre__red { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: #F1F5F9; color: #475569; transition: background .18s ease, color .18s ease; }
.vsobre__red .ico { width: 20px; height: 20px; }
.vsobre__red--fb:hover { background: #1877F2; color: #fff; }
.vsobre__red--ig:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: #fff; }
.vsobre__red--tt:hover { background: #000; color: #fff; }
.vsobre__red--yt:hover { background: #FF0000; color: #fff; }
@media (max-width: 640px) {
  .vsobre { padding: 22px 20px; border-radius: var(--radio); }
  .vsobre__datos { grid-template-columns: 1fr; gap: 14px; }
}
.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; }
/* Badges de verificación de canal (correo / WhatsApp). Píldora verde discreta,
   look "verified check" tipo Twitter pero con silueta de escudo. Solo se pintan
   los canales verificados — no mostramos "no verificado" para no dar señal
   negativa al comprador (los flags `email_verified`/`phone_verified` viven en
   el modelo Usuario y se marcan en el registro OTP paso 1/2). */
.vhero__meta--verif { gap: 10px; align-items: center; margin-top: 2px; }
.vhero__verif { display: inline-flex !important; align-items: center; gap: 6px;
  padding: 5px 12px; background: rgba(34,197,94,.14); color: #4ade80;
  border: 1px solid rgba(34,197,94,.32); border-radius: 999px;
  font-size: var(--texto-xs); font-weight: var(--peso-fuerte); letter-spacing: .01em; }
.vhero__verif .ico { width: 14px; height: 14px; }
/* Chip "Verificado" para el panel del usuario (fondo claro). Se usa al lado de
   los labels "Correo electrónico" y "WhatsApp" en /panel/settings/. Verde más
   saturado que el de la landing porque acá el fondo es blanco y el pastel se
   perdía. Componente en el label vía .campo__label-row (row entre nombre del
   campo y chip). */
.campo__label-row { display: inline-flex !important; align-items: center; gap: 8px; flex-wrap: wrap; }
.verif-chip { display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; background: rgba(34,197,94,.14); color: #15803d;
  border: 1px solid rgba(34,197,94,.4); border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1; }
.verif-chip .ico { width: 12px; height: 12px; }
/* Variante "pro" para chips que gatéan una feature del plan Concesionario.
   Dorado ámbar en vez del verde de verificado — distinto significado visual:
   verde = "ya lo tienes", ámbar = "función premium que puedes activar". */
.verif-chip--pro { background: rgba(245,158,11,.14); color: #B45309;
  border-color: rgba(245,158,11,.4); }
/* CTA inline dentro del texto de ayuda del campo (ej. "Ver planes →"). */
.campo__cta { color: var(--acento); text-decoration: none; font-weight: 600;
  margin-left: 6px; }
.campo__cta:hover { text-decoration: underline; }
/* El atributo HTML `hidden` = display:none del user-agent (especificidad 0);
   mi `display: inline-flex` de la clase gana y hace visible lo que deberia
   estar oculto. Estas reglas devuelven la prioridad al atributo hidden para
   los 3 componentes que se alternan dinamicamente sin recarga. */
.verif-chip[hidden], .verif-btn[hidden], .vhero__verif[hidden] { display: none; }
/* Botón "Verificar por WhatsApp" al lado del label — versión no verificada del
   chip (mismo tamaño/píldora, pero color de acento naranja para invitar a la
   acción). Sale solo si phone_verified=False y hay whatsapp guardado. */
.verif-btn { display: inline-flex; align-items: center; padding: 3px 10px;
  background: rgba(245,158,11,.12); color: #b45309;
  border: 1px solid rgba(245,158,11,.5); border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em; line-height: 1;
  cursor: pointer; transition: background .15s ease; }
.verif-btn:hover { background: rgba(245,158,11,.22); }
/* Panel inline del flujo de re-verificación por OTP: mensaje + input + botones.
   Aparece bajo el campo de WhatsApp cuando el usuario da clic en "Verificar". */
.verif-panel { margin-top: 8px; padding: 12px 14px;
  background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 10px; }
.verif-panel__intro { margin: 0 0 10px; color: #475569; font-size: 13px; }
.verif-panel__intro--err { color: #b91c1c; }
.verif-panel__row { display: flex; gap: 8px; margin-bottom: 8px; }
.verif-panel__code { flex: 0 0 130px; padding: 7px 10px; text-align: center;
  font-size: 18px; font-weight: 700; letter-spacing: .3em;
  border: 1px solid #CBD5E1; border-radius: 8px; }
.verif-panel__acc { display: flex; gap: 8px; flex-wrap: wrap; }
/* Variante compacta del .btn para las acciones del panel de verificación. */
.btn--sm { padding: 7px 14px; font-size: 13px; }
/* Contador de palabras del textarea "Sobre tu negocio" (máx 500). Solo UX;
   la validación real vive en PerfilForm.clean_description. Cambia de color
   al 90% del límite (ámbar) y al pasarlo (rojo). Insertado por JS bajo el
   textarea — sin markup en el template para no atarlo a un layout específico. */
.palabras-cnt { margin-top: 6px; font-size: 12px; color: #64748B; text-align: right; }
.palabras-cnt--warn { color: #B45309; font-weight: 600; }
.palabras-cnt--err  { color: #B91C1C; font-weight: 700; }
.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); }
/* min-width:0 para que la celda del grid no se estire al contenido del riel
   (así el viewport del carrusel capa al ancho de la columna y hace scroll) */
.combo__cats { min-width: 0; }
.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); }
/* Carrusel de tipos de vehículo: riel con scroll-snap + flechas */
.catcar { position: relative; }
.catcar__viewport { overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scroll-padding-left: 2px; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; -ms-overflow-style: none; padding: 6px 2px 16px; margin: -6px -2px -6px; }
.catcar__viewport::-webkit-scrollbar { display: none; }
.cats { display: flex; gap: 12px; width: max-content; }
.catcar .cat { flex: 0 0 clamp(140px, 42vw, 158px); scroll-snap-align: start; }
/* Flechas de navegación (botón circular flotante) */
.catcar__nav { position: absolute; top: calc(50% - 12px); transform: translateY(-50%); z-index: 3;
  width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--linea);
  background: var(--blanco); color: var(--slate); cursor: pointer; display: none;
  align-items: center; justify-content: center; padding: 0;
  box-shadow: 0 6px 20px rgba(15, 31, 61, .16);
  transition: transform var(--trans), box-shadow var(--trans), opacity var(--trans); }
.catcar__nav:hover { color: var(--acento); border-color: var(--acento); box-shadow: 0 10px 26px rgba(15, 31, 61, .22); }
.catcar__nav:active { transform: translateY(-50%) scale(.94); }
.catcar__nav[hidden] { display: none !important; }
.catcar__nav--prev { left: -18px; }
.catcar__nav--next { right: -18px; }
@media (hover: hover) and (min-width: 700px) { .catcar__nav { display: flex; } }
/* Tiles claros con la foto (carro naranja transparente flotando) */
.cat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px 10px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 14px; text-align: center;
  text-decoration: none; overflow: hidden;
  transition: border-color var(--trans), transform var(--trans), box-shadow var(--trans); }
.cat:hover { border-color: var(--acento); transform: translateY(-3px); box-shadow: 0 10px 22px rgba(15, 31, 61, .10); }
.cat__foto { width: 100%; height: 74px; display: flex; align-items: center; justify-content: center; }
.cat__foto img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.cat__nom { font-size: var(--texto-sm); font-weight: var(--peso-fuerte); color: var(--slate); }

/* Accesos Carros usados / nuevos (home) */
.condsel { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 640px) { .condsel { grid-template-columns: 1fr 1fr; } }
.condsel__op { display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 22px; border-radius: 16px; text-decoration: none; border: 1px solid var(--linea);
  background: var(--blanco); transition: transform var(--trans), box-shadow var(--trans), border-color var(--trans); }
.condsel__op:hover { transform: translateY(-3px); box-shadow: 0 12px 26px rgba(15, 31, 61, .12); border-color: var(--acento); }
.condsel__op--usados { border-left: 4px solid var(--acento); }
.condsel__op--nuevos { border-left: 4px solid var(--slate); }
.condsel__tx { display: flex; flex-direction: column; gap: 3px; }
.condsel__tx strong { font-size: var(--texto-lg); color: var(--slate); font-weight: var(--peso-extra); }
.condsel__tx small { font-size: var(--texto-sm); color: var(--gris); }
.condsel__go { font-size: 22px; color: var(--acento); flex: none; }

/* 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); }

/* Campo teléfono en modo "espejo" (solo lectura, refleja al WhatsApp) */
.tel-campo--espejo { opacity: .8; background: #F5F7FA; }
.tel-campo--espejo select[disabled], .tel-campo--espejo input[readonly] {
  cursor: not-allowed; background: transparent; }

/* 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; }

/* ============================================================================
   Mi Equipo (/panel/team/) — rediseño 2026-07-30
   Lista fusionada de asesores (con acceso + sin acceso + invitaciones) en
   filas compactas con avatar, chip de estado, workload bar y menú kebab.
   ============================================================================ */

/* Header de la sección Equipo */
.eq-cab { display: flex; justify-content: space-between; align-items: center;
  gap: 12px; flex-wrap: wrap; margin: 22px 0 12px; }
.eq-cab__tit { font-size: var(--texto-lg); color: var(--slate); margin: 0;
  font-weight: var(--peso-fuerte); }
.eq-cab__count { color: var(--gris); font-weight: var(--peso-normal); font-size: var(--texto-base); }
.eq-cab__acc { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Búsqueda */
.eq-buscar { display: inline-flex; align-items: center; gap: 6px;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: 999px;
  padding: 6px 12px; color: var(--gris); transition: border-color var(--trans); }
.eq-buscar:focus-within { border-color: var(--acento); }
.eq-buscar__ico { width: 16px; height: 16px; flex-shrink: 0; }
.eq-buscar input { border: 0; outline: 0; background: transparent; font: inherit;
  color: var(--slate); width: 180px; padding: 2px 0; }

/* Fila de asesor (unidad principal).
   overflow: visible es intencional — el dropdown del menú kebab sale de la
   fila y se cortaría si fuera hidden. El panel expandido tiene su propio
   border-radius abajo con overflow local. */
.eq-fila { background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-md); transition: border-color var(--trans);
  position: relative; }
.eq-fila:hover { border-color: var(--linea-punto); }
.eq-fila--abierta { border-color: var(--acento); box-shadow: var(--sombra); }
.eq-fila--off { opacity: .55; }
.eq-fila--off .eq-avatar { filter: grayscale(.6); }

/* Cabecera clickable */
.eq-fila__cab { display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 14px; align-items: center; padding: 12px 14px; }
.eq-fila__cab--clic { cursor: pointer; }
.eq-fila__cab--clic:hover { background: rgba(255,149,64,.03); }

/* Avatar circular con iniciales o foto */
.eq-avatar { position: relative; width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: var(--peso-fuerte); font-size: 14px;
  letter-spacing: .3px; flex-shrink: 0; overflow: hidden; }
.eq-avatar img { width: 100%; height: 100%; object-fit: cover; }
.eq-avatar__dot { position: absolute; bottom: -1px; right: -1px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--marca-verde-wa); border: 2px solid var(--blanco);
  animation: eq-pulse 2s infinite; }
@keyframes eq-pulse { 0%,100%{ opacity:1 } 50%{ opacity:.6 } }

/* Info del asesor (2 líneas) */
.eq-fila__info { min-width: 0; }
.eq-fila__linea1 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.eq-fila__nombre { color: var(--slate); font-size: var(--texto-base);
  font-weight: var(--peso-fuerte); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-fila__linea2 { color: var(--gris); font-size: 12.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eq-fila__meta { }

/* Chip de estado (con acceso / sin acceso / pendiente) */
.eq-chip { display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: var(--peso-medio); padding: 2px 8px;
  border-radius: 999px; text-transform: none; letter-spacing: .1px;
  border: 1px solid transparent; white-space: nowrap; }
.eq-chip--con-acceso { background: var(--exito-bg); color: var(--exito-texto);
  border-color: var(--exito-borde); }
.eq-chip--sin-acceso { background: var(--gris-suave); color: var(--gris);
  border-color: var(--linea); }
.eq-chip--pendiente { background: var(--estado-revision-bg);
  color: var(--estado-revision-texto); border-color: #fde68a; }
/* Chip de tipo de usuario (rol): Admin · Gerente · Asesor */
.eq-rol { display: inline-flex; align-items: center; font-size: 11px;
  font-weight: var(--peso-fuerte); padding: 2px 9px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: .3px; white-space: nowrap; }
.eq-rol--owner   { background: #f0ebfb; color: #6d3fc4; }   /* Admin */
.eq-rol--manager { background: #e8f0fe; color: #1a56c4; }   /* Gerente */
.eq-rol--agent   { background: var(--gris-suave); color: var(--gris); }  /* Asesor */

/* Workload + stats */
.eq-fila__work { min-width: 160px; text-align: right; }
.eq-workload { position: relative; width: 140px; height: 6px;
  background: var(--gris-suave); border-radius: 999px; overflow: hidden;
  margin-left: auto; }
.eq-workload__barra { height: 100%; background: linear-gradient(90deg, var(--acento), var(--acento-oscuro));
  border-radius: 999px; transition: width .3s ease; min-width: 2px; }
.eq-fila__stats { color: var(--gris); font-size: 12px; margin-top: 6px;
  white-space: nowrap; }
.eq-fila__stats b { color: var(--slate); font-weight: var(--peso-fuerte); }

/* Acciones inline (solo invitaciones) */
.eq-fila__acc-inline { display: flex; gap: 6px; }
.eq-fila__acc-inline form { margin: 0; }
.btn--peligro { color: var(--peligro); border-color: var(--peligro-borde-panel); }
.btn--peligro:hover { background: var(--peligro-bg); color: var(--peligro-oscuro); }

/* Menú kebab */
.eq-menu { position: relative; }
.eq-menu__btn { background: transparent; border: 1px solid transparent;
  color: var(--gris); width: 34px; height: 34px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background var(--trans), color var(--trans); }
.eq-menu__btn:hover { background: var(--gris-suave); color: var(--slate); }
.eq-menu__btn svg { width: 18px; height: 18px; }
.eq-menu__pop { position: absolute; top: calc(100% + 4px); right: 0;
  background: var(--blanco); border: 1px solid var(--linea); border-radius: var(--radio);
  box-shadow: var(--sombra-md); min-width: 220px; padding: 6px; z-index: 20;
  display: none; }
.eq-menu__pop--abierto { display: block; }
.eq-menu__op { display: block; width: 100%; text-align: left;
  padding: 9px 12px; background: transparent; border: 0; border-radius: 6px;
  font: inherit; color: var(--slate); cursor: pointer; text-decoration: none;
  transition: background var(--trans); }
.eq-menu__op:hover { background: var(--gris-suave); }
.eq-menu__op--peligro { color: var(--peligro); }
.eq-menu__op--peligro:hover { background: var(--peligro-bg); }
.eq-menu__pop form { margin: 0; }
.eq-menu__sep { margin: 6px 4px; border: 0; border-top: 1px solid var(--linea); }

/* Panel expandido (editar + asignar vehículos) */
.eq-panel { border-top: 1px solid var(--linea); background: #FAFBFC;
  padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 20px; }
.eq-panel__seccion { }
.eq-panel__tit { font-size: 13px; color: var(--slate); margin: 0 0 10px;
  font-weight: var(--peso-fuerte); text-transform: uppercase; letter-spacing: .4px; }
.eq-panel__form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; align-items: end; }
.eq-panel__pie { margin-top: 10px; text-align: right; grid-column: 1 / -1; }

/* Campo (label vertical) */
.eq-campo { display: flex; flex-direction: column; gap: 4px; }
.eq-campo > span { font-size: 12px; color: var(--gris); font-weight: var(--peso-medio); }
.eq-campo input, .eq-campo select { padding: 9px 12px; border: 1px solid var(--linea);
  border-radius: 8px; font: inherit; color: var(--slate); background: var(--blanco);
  transition: border-color var(--trans); }
.eq-campo input:focus, .eq-campo select:focus { outline: 0; border-color: var(--acento); }

/* Mensaje vacío búsqueda */
.eq-vacio-buscar { text-align: center; padding: 28px 12px; color: var(--gris);
  font-size: var(--texto-sm); margin: 12px 0 0; }

/* Empty state (0 asesores) */
.eq-vacio { background: var(--blanco); border: 1px solid var(--linea);
  border-radius: var(--radio-md); padding: 40px 24px; text-align: center;
  max-width: 640px; margin: 24px auto; }
.eq-vacio__ilu { color: var(--acento); opacity: .7; margin-bottom: 12px; }
.eq-vacio__ilu svg { width: 64px; height: 64px; }
.eq-vacio__tit { font-size: var(--texto-lg); color: var(--slate); margin: 0 0 6px;
  font-weight: var(--peso-fuerte); }
.eq-vacio__sub { color: var(--gris); font-size: var(--texto-sm); margin: 0 0 22px;
  line-height: 1.5; }
.eq-vacio__forms { text-align: left; margin-top: 18px; }
.eq-vacio__forms .eq-form-nuevo { padding: 0; border: 0; background: transparent; }

/* Toggle "Con acceso / Sin acceso" */
.eq-toggle { display: inline-flex; background: var(--gris-suave); border-radius: 999px;
  padding: 3px; gap: 2px; margin-bottom: 16px; }
.eq-toggle__op { padding: 8px 16px; border: 0; background: transparent;
  color: var(--gris); font: inherit; font-size: 13px; font-weight: var(--peso-medio);
  border-radius: 999px; cursor: pointer; transition: all var(--trans); white-space: nowrap; }
.eq-toggle__op--on { background: var(--blanco); color: var(--slate);
  box-shadow: 0 1px 3px rgba(15,31,61,.08); }

/* Formulario Agregar (empty state + modal) */
.eq-form-nuevo { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px; }
.eq-form-nuevo__ayuda { grid-column: 1 / -1; margin: 0 0 4px; color: var(--gris);
  font-size: 12.5px; line-height: 1.5; }

/* Modal */
.eq-modal { position: fixed; inset: 0; z-index: 100; display: flex;
  align-items: center; justify-content: center; padding: 20px;
  animation: eq-fadein .18s ease; }
/* El atributo hidden se pierde ante display:flex/grid — restaurarlo explícito */
.eq-modal[hidden], .eq-form-nuevo[hidden], .eq-panel[hidden],
.boost-modal__ops[hidden], .boost-cupo[hidden], .boost-liberar[hidden],
.boost-modal__o[hidden] { display: none; }
.eq-modal__fondo { position: absolute; inset: 0; background: rgba(15,31,61,.45);
  backdrop-filter: blur(2px); cursor: pointer; }
.eq-modal__caja { position: relative; background: var(--blanco);
  border-radius: var(--radio-lg); box-shadow: var(--sombra-md);
  width: 100%; max-width: 520px; max-height: calc(100vh - 40px);
  overflow-y: auto; padding: 24px; }
.eq-modal__cab { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 16px; gap: 12px; }
.eq-modal__tit { font-size: var(--texto-lg); color: var(--slate); margin: 0;
  font-weight: var(--peso-fuerte); }
.eq-modal__x { background: transparent; border: 0; font-size: 28px; color: var(--gris);
  cursor: pointer; width: 36px; height: 36px; border-radius: 8px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--trans); padding: 0; }
.eq-modal__x:hover { background: var(--gris-suave); color: var(--slate); }
@keyframes eq-fadein { from { opacity: 0 } to { opacity: 1 } }

/* Lista compacta (override para las filas nuevas) */
.eq-lista { list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 10px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */
/* Tablet: apilar workload debajo de la info */
@media (max-width: 900px){
  .eq-fila__cab { grid-template-columns: auto 1fr auto; }
  .eq-fila__work { grid-column: 1 / -1; text-align: left;
    padding-top: 8px; margin-top: 4px; border-top: 1px dashed var(--linea); }
  .eq-workload { margin-left: 0; width: 100%; max-width: 240px; }
  .eq-fila__stats { text-align: left; }
}
/* Mobile: chip debajo, tamaños menores, botones inline en columna */
@media (max-width: 560px){
  .eq-fila__cab { padding: 12px; gap: 10px; }
  .eq-avatar { width: 36px; height: 36px; font-size: 13px; }
  .eq-fila__nombre { font-size: 14px; }
  .eq-fila__acc-inline { flex-direction: column; align-items: stretch; }
  .eq-fila__acc-inline .btn { padding: 8px 12px; font-size: 12.5px; }
  .eq-buscar input { width: 130px; }
  .eq-modal { padding: 0; align-items: stretch; }
  .eq-modal__caja { max-width: 100%; max-height: 100vh; border-radius: 0;
    padding: 20px 16px; }
  .eq-menu__pop { min-width: 180px; }
  .eq-panel { padding: 14px 14px 16px; }
  .eq-panel__form { grid-template-columns: 1fr; }
}