/* =====================================================================
   Pro Racing Park · asistente del sitio (js/asistente.js)
   Todo con los tokens de tokens.css: negro de pista, carbón, amarillo
   solo en lo que es acción (el botón de reservar, enviar, el filo del
   panel). Esquinas rectas como el resto de la dirección Telemetría; el
   radio queda para lo que se lee como control (el botón redondo, los
   chips).

   Convivencia con el botón de WhatsApp (estilo.css, .wa-flotante): ese
   mide 56 px (52 en celular) y está a clamp(14px,3vw,26px) del borde. El
   botón del asistente va en la misma columna, arriba, con 12 px de aire.
   Si un día cambia el tamaño del de WhatsApp, cambia --asis-wa acá.
   ===================================================================== */

.asis{
  --asis-borde: clamp(14px, 3vw, 26px);   /* el mismo margen que .wa-flotante */
  --asis-wa: 56px;                        /* alto de .wa-flotante */
  --asis-boton: 52px;
  --asis-abajo: calc(var(--asis-borde) + var(--asis-wa) + var(--e-3));
}
@media (max-width: 759px){
  .asis{ --asis-wa: 52px; --asis-boton: 48px; }
}

.asis .solo-lectores{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ------------------------------------------------------ el botón --- */
.asis-lanzador{
  position:fixed;right:calc(var(--asis-borde) + (var(--asis-wa) - var(--asis-boton)) / 2);bottom:var(--asis-abajo);
  z-index:70;
  width:var(--asis-boton);height:var(--asis-boton);border-radius:var(--r-pill);
  display:grid;place-items:center;cursor:pointer;
  background:var(--carbon);color:var(--amarillo);
  border:1px solid var(--amarillo-55);
  box-shadow:0 6px 20px rgba(0,0,0,.45);
  transition:transform var(--d-rapida) var(--ease),background-color var(--d-hover) var(--ease),color var(--d-hover) var(--ease);
}
.asis-lanzador svg{width:24px;height:24px;display:block}
.asis-lanzador:active{transform:scale(.94);transition-duration:var(--d-presion)}
@media (hover: hover){
  .asis-lanzador:hover{background:var(--amarillo);color:var(--negro);border-color:var(--amarillo)}
}
.asis-lanzador:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px}
.asis--abierto .asis-lanzador{visibility:hidden}

/* La etiqueta "Preguntanos": en escritorio, una placa a la izquierda del
   botón; en el celular no entra sin tapar contenido y queda para los
   lectores de pantalla (el botón se anuncia igual). */
.asis-lanzador-txt{
  position:absolute;right:calc(100% + var(--e-2));top:50%;transform:translateY(-50%);
  font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--tr-ancho);
  text-transform:uppercase;white-space:nowrap;
  background:var(--negro);color:var(--blanco);border:1px solid var(--linea-clara);
  padding:6px var(--e-2);pointer-events:none;
}
@media (max-width: 759px){
  .asis-lanzador-txt{width:1px;height:1px;padding:0;border:0;overflow:hidden;clip-path:inset(50%)}
}

/* ------------------------------------------------------- el panel --- */
.asis-panel{
  position:fixed;z-index:var(--z-modal);
  right:var(--asis-borde);bottom:var(--asis-abajo);
  width:min(360px, calc(100vw - 2 * var(--asis-borde)));
  max-height:min(580px, calc(100vh - var(--asis-abajo) - 96px));
  max-height:min(580px, calc(100dvh - var(--asis-abajo) - 96px));
  display:flex;flex-direction:column;
  background:var(--negro);color:var(--texto);
  border:1px solid var(--linea-clara);border-top:3px solid var(--amarillo);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.asis-panel:focus{outline:none}
.asis-panel:focus-visible{outline:2px solid var(--amarillo);outline-offset:3px}

/* Celular: hoja desde abajo, casi de lado a lado. Tapa el botón de
   WhatsApp mientras está abierta; el pie del panel lleva a WhatsApp. */
@media (max-width: 759px){
  .asis-panel{
    left:var(--e-2);right:var(--e-2);bottom:var(--e-2);width:auto;
    max-height:min(640px, 80vh);
    max-height:min(640px, 80dvh);
    padding-bottom:env(safe-area-inset-bottom, 0px);
  }
}

@media (prefers-reduced-motion: no-preference){
  .asis-panel:not([hidden]){animation:asis-entra var(--d-media) var(--ease-out)}
  .asis-msg--nuevo{animation:asis-msg var(--d-rapida) var(--ease-out)}
}
@keyframes asis-entra{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes asis-msg{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ------------------------------------------------------ cabecera --- */
.asis-cab{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--e-3);
  padding:var(--e-4) var(--e-2) var(--e-3) var(--e-4);
  border-bottom:1px solid var(--linea);
}
.asis-kicker{
  font-family:var(--mono);font-size:var(--t-micro);font-weight:600;letter-spacing:var(--tr-ancho);
  text-transform:uppercase;color:var(--amarillo);margin-bottom:var(--e-1);max-width:none;
}
.asis .asis-titulo{
  font-family:var(--cond);font-size:var(--t-h4);font-weight:700;font-style:italic;
  letter-spacing:var(--tr-sub);line-height:1.05;text-transform:uppercase;color:var(--blanco);
}
.asis-cerrar{
  flex:none;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:transparent;border:1px solid transparent;color:var(--humo);
  transition:color var(--d-hover) var(--ease),border-color var(--d-hover) var(--ease);
}
.asis-cerrar svg{width:20px;height:20px}
.asis-cerrar:hover{color:var(--blanco);border-color:var(--linea-clara)}
.asis-cerrar:focus-visible{outline:2px solid var(--amarillo);outline-offset:-2px}

/* ----------------------------------------------------- mensajes --- */
.asis-log{
  flex:1 1 auto;min-height:120px;overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:var(--e-3);
  padding:var(--e-4);
  scrollbar-width:thin;scrollbar-color:var(--linea-clara) transparent;
}
.asis-msg{max-width:88%;font-size:15px;line-height:1.5}
.asis-texto{white-space:pre-line;overflow-wrap:anywhere;max-width:none}
.asis-msg--asis{
  align-self:flex-start;color:var(--texto);
  padding:var(--e-2) 0 var(--e-2) var(--e-3);border-left:2px solid var(--linea-clara);
}
.asis-msg--yo{
  align-self:flex-end;color:var(--blanco);
  background:var(--carbon-alto);padding:var(--e-2) var(--e-3);
}
.asis-enlace{color:var(--amarillo);text-decoration:underline;text-underline-offset:2px}
.asis-enlace:hover{color:var(--amarillo-alto)}

/* El link de reserva: el único amarillo lleno del panel, es la acción. */
.asis-reservar{
  display:flex;align-items:center;justify-content:center;min-height:48px;margin-top:var(--e-3);
  padding:var(--e-2) var(--e-4);
  background:var(--amarillo);color:var(--negro);text-decoration:none;
  font-family:var(--cond);font-weight:900;font-style:italic;font-size:16px;letter-spacing:.05em;text-transform:uppercase;
  transition:background-color var(--d-hover) var(--ease);
}
.asis-reservar:hover{background:var(--amarillo-oscuro)}
.asis-reservar:focus-visible{outline:2px solid var(--blanco);outline-offset:3px}

.asis-wa{
  display:inline-flex;align-items:center;min-height:44px;margin-top:var(--e-2);padding:0 var(--e-4);
  border:1px solid var(--linea-clara);color:var(--blanco);text-decoration:none;
  font-family:var(--cond);font-weight:700;font-size:15px;letter-spacing:.05em;text-transform:uppercase;
}
.asis-wa:hover{border-color:var(--amarillo);color:var(--amarillo)}

/* Respuestas rápidas */
.asis-rapidas{display:flex;flex-wrap:wrap;gap:var(--e-2)}
.asis-chip{
  min-height:44px;padding:0 var(--e-4);cursor:pointer;
  background:transparent;color:var(--blanco);
  border:1px solid var(--linea-clara);border-radius:var(--r-pill);
  font-family:var(--cond);font-weight:700;font-size:16px;letter-spacing:.02em;
  transition:border-color var(--d-hover) var(--ease),color var(--d-hover) var(--ease);
}
.asis-chip:hover{border-color:var(--amarillo);color:var(--amarillo)}
.asis-chip:focus-visible{outline:2px solid var(--amarillo);outline-offset:2px}

/* Escribiendo: tres marcas que se encienden en secuencia, como las luces
   de largada. Sin movimiento, quedan fijas a media luz. */
.asis-puntos{display:inline-flex;gap:6px;padding:var(--e-1) 0}
.asis-puntos i{width:8px;height:8px;background:var(--humo);opacity:.35}
@media (prefers-reduced-motion: no-preference){
  .asis-puntos i{animation:asis-luz 1.2s infinite}
  .asis-puntos i:nth-child(2){animation-delay:.2s}
  .asis-puntos i:nth-child(3){animation-delay:.4s}
}
@keyframes asis-luz{0%,100%{opacity:.25}40%{opacity:1;background:var(--amarillo)}}

/* -------------------------------------------------------- campo --- */
.asis-form{
  display:flex;gap:var(--e-2);padding:var(--e-3) var(--e-4) var(--e-2);
  border-top:1px solid var(--linea);
}
.asis-entrada{
  flex:1 1 auto;min-width:0;min-height:44px;padding:0 var(--e-3);
  background:var(--carbon);color:var(--blanco);
  border:1px solid var(--linea-clara);border-radius:var(--r-0);
  font-family:var(--cuerpo);font-size:16px;   /* 16 o más: iOS no hace zoom al enfocar */
  transition:border-color var(--d-hover) var(--ease);
}
.asis-entrada::placeholder{color:var(--humo-tenue)}
.asis-entrada:focus{outline:none;border-color:var(--amarillo)}
.asis-entrada:focus-visible{outline:2px solid var(--amarillo);outline-offset:1px}
.asis-enviar{
  flex:none;width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
  background:var(--amarillo);color:var(--negro);border:0;
  transition:background-color var(--d-hover) var(--ease);
}
.asis-enviar svg{width:20px;height:20px}
.asis-enviar:hover{background:var(--amarillo-oscuro)}
.asis-enviar:disabled{background:var(--carbon-alto);color:var(--humo);cursor:progress}
.asis-enviar:focus-visible{outline:2px solid var(--blanco);outline-offset:2px}

.asis-pie{
  padding:0 var(--e-4) var(--e-3);max-width:none;
  font-family:var(--mono);font-size:var(--t-micro);letter-spacing:.02em;color:var(--humo);
}
.asis-pie a{color:var(--texto);text-decoration:underline;text-underline-offset:2px;position:relative}
/* El link va dentro de una línea de 11 px: el área de toque se agranda
   por afuera, sin mover el texto, hasta pasar los 44 px de alto. */
.asis-pie a::after{content:"";position:absolute;inset:-16px -8px}
.asis-pie a:hover{color:var(--amarillo)}

@media (prefers-reduced-motion: reduce){
  .asis-lanzador,.asis-cerrar,.asis-reservar,.asis-chip,.asis-entrada,.asis-enviar{transition:none}
}