@charset "UTF-8";
/* ==========================================================================
   beniautospremium.es · los dos bots

   El panel por dentro es de la casa: penumbra, tipografía y medidas heredadas
   de app.css. Los BOTONES no, y es a propósito (pedido del cliente el
   10/09/2026): verde el de preguntas frecuentes, rosa el del asistente, con
   halo y latido. Son lo único de la página que tiene que verse desde la otra
   punta, y con el latón de la casa se perdían contra el fondo oscuro.

   Cada panel se ata al color de su botón —filete de arriba e icono— para que
   al abrirlo se vea de dónde ha salido.

   Todo cuelga de .bot-zona, una columna fija anclada abajo a la derecha que
   crece hacia arriba: los paneles se apilan encima de los botones sin que haya
   que calcular a mano cuánto miden los botones.
   ========================================================================== */

.bot-zona {
  position: fixed;
  right: var(--aire);
  bottom: calc(1rem + env(safe-area-inset-bottom));
  z-index: 130;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
  max-height: calc(100dvh - 2rem);
  /* El hueco entre los botones no debe robarle los clics a la página */
  pointer-events: none;
}
.bot-zona > * { pointer-events: auto; }

/* --------------------------------------------------------------------------
   1 · Botones flotantes
   -------------------------------------------------------------------------- */
.bot-lanzadores {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
  /* El ancho lo pone el rótulo más largo y los tres botones lo llenan: así
     miden todos igual sin fijar una cifra que se quedaría corta al traducir. */
  width: max-content;
  margin-left: auto;
}
.bot-lanzadores.es-esperando { display: none; }

/* Los dos botones se salen del gris de la casa a propósito: son lo único de la
   página que tiene que verse desde la otra punta. Cada uno con su color, su
   halo y un latido lento que llama sin dar la lata. */
.bot-lanzador {
  --halo: rgba(0, 0, 0, 0.4);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.7rem;
  padding: 0.85rem 1.3rem 0.85rem 1.1rem;
  text-decoration: none;
  font-family: var(--fuente-display);
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #fff;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  box-shadow:
    0 8px 24px -4px var(--halo),
    0 2px 6px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.35);
  transition: transform 200ms cubic-bezier(0.34, 1.4, 0.64, 1),
              box-shadow var(--transicion), filter var(--transicion);
}

.bot-lanzador:hover {
  transform: translateY(-3px) scale(1.03);
  filter: saturate(1.15);
  box-shadow:
    0 14px 34px -4px var(--halo),
    0 3px 8px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}
.bot-lanzador:active { transform: translateY(-1px) scale(0.99); }
.bot-lanzador:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* Preguntas frecuentes: turquesa. Empezó siendo verde esmeralda, pero al
   entrar el botón de WhatsApp —que tiene su verde de marca y no se toca— los
   dos se parecían demasiado apilados. El turquesa sigue en la familia del
   verde y se distingue de un vistazo. */
.bot-lanzador--faq {
  --halo: rgba(6, 182, 212, 0.65);
  background: linear-gradient(135deg, #06B6D4 0%, #0891B2 55%, #0E7490 100%);
}

/* Asistente: rosa. Es el que queremos que se pulse, así que se lleva el color
   más fuerte de los dos. */
.bot-lanzador--chat {
  --halo: rgba(236, 72, 153, 0.65);
  background: linear-gradient(135deg, #EC4899 0%, #DB2777 55%, #BE185D 100%);
}

/* WhatsApp: su verde de siempre. Se distingue del esmeralda de arriba porque
   baja al verde-azulado oscuro de la propia marca, y porque el icono no engaña. */
.bot-lanzador--wa {
  --halo: rgba(37, 211, 102, 0.6);
  background: linear-gradient(135deg, #25D366 0%, #12A150 55%, #0B7A3C 100%);
}

/* El halo que late. Va en un ::before para no tocar la sombra del botón. */
.bot-lanzador::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 var(--halo);
  animation: bot-latido-halo 2.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}
.bot-lanzador--chat::before { animation-delay: 0.95s; }
.bot-lanzador--wa::before   { animation-delay: 1.9s; }
.bot-lanzador:hover::before { animation-play-state: paused; }

@keyframes bot-latido-halo {
  0%       { box-shadow: 0 0 0 0 var(--halo); }
  55%, 100% { box-shadow: 0 0 0 16px rgba(0, 0, 0, 0); }
}

/* Mientras su panel está abierto, el botón deja de reclamar atención */
.bot-lanzador[aria-expanded="true"] { filter: saturate(0.75) brightness(0.92); }
.bot-lanzador[aria-expanded="true"]::before { animation: none; }

.bot-lanzador__icono {
  display: inline-flex;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}
.bot-lanzador__icono svg { width: 22px; height: 22px; }

@media (prefers-reduced-motion: reduce) {
  .bot-lanzador::before { animation: none; }
  .bot-lanzador:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   2 · El panel
   -------------------------------------------------------------------------- */
.bot-panel[hidden] { display: none; }

.bot-panel {
  display: flex;
  flex-direction: column;
  width: min(384px, calc(100vw - var(--aire) * 2));
  max-height: min(72vh, 580px);
  background: var(--grafito-alto);
  border: 2px solid var(--acento, var(--laton));
  border-radius: 18px;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 0 40px -8px var(--acento-halo, transparent);
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--transicion), transform var(--transicion);
}
.bot-panel.es-abierto { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .bot-panel { transition: none; }
  .bot-lanzador { transition: none; }
  .bot-lanzador:hover { transform: none; }
}

/* El acento de cada panel es el color de su botón */
#bot-faq {
  --acento: #06B6D4;
  --acento-claro: #67E8F9;
  --acento-tenue: rgba(6, 182, 212, 0.16);
  --acento-halo: rgba(6, 182, 212, 0.55);
  --acento-degradado: linear-gradient(135deg, #06B6D4 0%, #0891B2 55%, #0E7490 100%);
}
#bot-chat {
  --acento: #EC4899;
  --acento-claro: #F9A8D4;
  --acento-tenue: rgba(236, 72, 153, 0.16);
  --acento-halo: rgba(236, 72, 153, 0.55);
  --acento-degradado: linear-gradient(135deg, #EC4899 0%, #DB2777 55%, #BE185D 100%);
}

/* Cabecera */
.bot-panel__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.85rem 1rem;
  background: var(--acento-degradado, var(--negro-suave));
  color: #fff;
}
.bot-panel__marca { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.bot-panel__marca strong {
  display: block;
  font-family: var(--fuente-display);
  font-size: 0.98rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.bot-panel__marca span {
  display: block;
  font-family: var(--fuente-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.88);
}
.bot-panel__icono {
  display: grid;
  place-items: center;
  width: 36px; height: 36px;
  flex: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
}
.bot-panel__icono svg { width: 19px; height: 19px; }

.bot-panel__cerrar {
  flex: none;
  width: 32px; height: 32px;
  background: rgba(0, 0, 0, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #fff;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transicion);
}
.bot-panel__cerrar:hover { background: rgba(0, 0, 0, 0.38); }
.bot-panel__cerrar:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Cuerpo */
.bot-panel__cuerpo {
  flex: 1;
  min-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  scrollbar-width: thin;
  scrollbar-color: var(--grafito-borde) transparent;
}

/* --------------------------------------------------------------------------
   3 · Mensajes
   -------------------------------------------------------------------------- */
.bot-msg {
  max-width: 88%;
  padding: 0.65rem 0.85rem;
  border-radius: var(--radio);
  font-size: 0.87rem;
  line-height: 1.55;
  overflow-wrap: anywhere;
}
.bot-msg p { margin: 0 0 0.6rem; }
.bot-msg p:last-child { margin-bottom: 0; }
.bot-msg strong { color: var(--hueso); font-weight: 600; }

/* Lo que dice el bot: filete de color a la izquierda, como una cita. */
.bot-msg--bot {
  align-self: flex-start;
  background: var(--grafito);
  border: 1px solid var(--grafito-borde);
  border-left: 3px solid var(--acento, var(--laton));
  border-radius: 4px 14px 14px 4px;
  color: var(--hueso);
}
.bot-msg--bot a { color: var(--acento-claro, var(--laton-claro)); }

/* Lo que dice el visitante: burbuja del color del panel, en blanco. */
.bot-msg--yo {
  align-self: flex-end;
  background: var(--acento-degradado, var(--laton-tenue));
  border: 0;
  border-radius: 14px 14px 4px 14px;
  color: #fff;
  box-shadow: 0 2px 10px -2px var(--acento-halo, transparent);
}
.bot-msg--yo strong { color: #fff; }

/* Enlace suelto en su línea: se pinta como botón */
.bot-cta {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 88%;
  margin-top: -0.2rem;
  padding: 0.62rem 1.05rem;
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: 999px;
  border: 0;
  background: var(--acento-degradado, var(--laton));
  color: #fff;
  box-shadow: 0 4px 14px -4px var(--acento-halo, transparent);
  transition: filter var(--transicion), transform var(--transicion);
}
.bot-cta:hover { filter: brightness(1.12); transform: translateY(-1px); }
.bot-cta svg { width: 17px; height: 17px; flex: none; }

.bot-cta--wa {
  background: linear-gradient(135deg, #25D366 0%, #12A150 55%, #0B7A3C 100%);
  box-shadow: 0 4px 14px -4px rgba(37, 211, 102, 0.6);
  color: #fff;
}

/* Puntos de «está escribiendo» */
.bot-escribiendo {
  display: inline-flex;
  gap: 5px;
  align-items: center;
  padding: 0.8rem 0.9rem;
}
.bot-escribiendo span {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--acento-claro, var(--gris-humo));
  animation: bot-latido 1.2s infinite ease-in-out;
}
.bot-escribiendo span:nth-child(2) { animation-delay: 0.15s; }
.bot-escribiendo span:nth-child(3) { animation-delay: 0.3s; }
@keyframes bot-latido {
  0%, 60%, 100% { opacity: 0.25; transform: translateY(0); }
  30%           { opacity: 1;    transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) {
  .bot-escribiendo span { animation: none; opacity: 0.6; }
}

.bot-cargando {
  align-self: center;
  padding: 1rem;
  font-family: var(--fuente-mono);
  color: var(--gris-tenue);
  letter-spacing: 0.3em;
}

/* --------------------------------------------------------------------------
   4 · Botonera del bot de preguntas frecuentes
   -------------------------------------------------------------------------- */
.bot-opciones {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-self: stretch;
}
.bot-opcion {
  text-align: left;
  padding: 0.7rem 0.9rem;
  border-left-width: 3px;
  border-left-color: var(--acento, var(--grafito-borde));
  font-family: var(--fuente-texto);
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--hueso);
  background: transparent;
  border: 1px solid var(--grafito-borde);
  border-radius: var(--radio);
  cursor: pointer;
  transition: border-color var(--transicion), background var(--transicion), color var(--transicion);
}
.bot-opcion:hover {
  border-color: var(--acento, var(--laton));
  background: var(--acento-tenue, var(--laton-tenue));
}
.bot-opcion:focus-visible { outline: 2px solid var(--laton-claro); outline-offset: 2px; }

.bot-opcion--volver {
  color: var(--gris-humo);
  font-family: var(--fuente-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border-style: dashed;
}

/* --------------------------------------------------------------------------
   5 · Formulario del asistente
   -------------------------------------------------------------------------- */
.bot-panel__pie {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.7rem 0.8rem;
  border-top: 1px solid var(--grafito-borde);
  background: var(--negro-suave);
}
.bot-campo {
  flex: 1;
  min-height: 40px;
  max-height: 96px;
  padding: 0.6rem 0.7rem;
  font-family: var(--fuente-texto);
  font-size: 0.87rem;
  line-height: 1.4;
  color: var(--hueso);
  background: var(--grafito);
  border: 1px solid var(--grafito-borde);
  border-radius: var(--radio);
  resize: none;
}
.bot-campo::placeholder { color: var(--gris-tenue); }
.bot-campo:focus { outline: none; border-color: var(--acento, var(--laton)); }
.bot-campo:disabled { opacity: 0.55; }

.bot-enviar {
  flex: none;
  width: 40px; height: 40px;
  display: grid;
  place-items: center;
  background: var(--acento, var(--laton));
  border: 0;
  border-radius: 999px;
  color: #fff;
  cursor: pointer;
  transition: filter var(--transicion), transform var(--transicion);
}
.bot-enviar:hover:not(:disabled) { filter: brightness(1.12); transform: scale(1.05); }
.bot-enviar:disabled { opacity: 0.45; cursor: default; }
.bot-enviar:focus-visible { outline: 2px solid var(--laton-claro); outline-offset: 2px; }
.bot-enviar svg { width: 17px; height: 17px; }

/* Aviso del art. 13 RGPD, en el momento de la recogida */
.bot-panel__aviso {
  margin: 0;
  padding: 0 0.8rem 0.75rem;
  background: var(--negro-suave);
  font-size: 0.68rem;
  line-height: 1.45;
  color: var(--gris-tenue);
}
.bot-panel__aviso a { color: var(--gris-humo); }

/* --------------------------------------------------------------------------
   6 · Pantallas pequeñas
   -------------------------------------------------------------------------- */
@media (max-width: 560px) {
  .bot-zona { left: var(--aire); }
  .bot-panel { width: 100%; max-height: min(76vh, 620px); }

  /* Con dos botones y el rótulo entero no queda sitio: se quedan los iconos,
     que es lo que se reconoce de un vistazo. El nombre sigue en el title y en
     el aria-label, así que el lector de pantalla no pierde nada. */
  .bot-lanzadores { flex-direction: row; gap: 0.6rem; width: auto; }
  .bot-lanzador { padding: 0.9rem; }
  .bot-lanzador__icono svg { width: 24px; height: 24px; }
  .bot-lanzador__texto {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* La ficha de vehículo tiene su propia barra fija al pie en móvil: los botones
   se suben por encima para no montarse sobre ella. */
@media (max-width: 1000px) {
  body.tiene-barra-movil .bot-zona { bottom: calc(96px + 0.6rem + env(safe-area-inset-bottom)); }
}

@media print {
  .bot-zona { display: none !important; }
}