/**
 * El asistente de la web de Vinyo — la parte que se ve.
 *
 * Va en un fichero aparte de `estilos.css`, y no dentro, por una razón
 * práctica: el asistente es una pieza que hoy está a medias (ver
 * `docs/sitio/asistente/LEEME.md`) y que puede acabar quitándose o reescribiéndose
 * entera. Separado, quitarlo es borrar dos líneas de `index.html`; mezclado,
 * es ir a pescar reglas dentro de un fichero que ya funciona.
 *
 * Hereda los tokens de `estilos.css`, que se carga antes. No define ni un color
 * propio: si esta hoja tuviera su propio índigo, el día que la marca cambie
 * quedaría un índigo viejo flotando en una esquina de la pantalla.
 *
 * ## El magenta no aparece aquí
 *
 * La cabecera de `estilos.css` fija la regla: el magenta relleno señala LA
 * acción que la página existe para provocar —pedir la cita— y sale una sola vez
 * por pantalla. Ya la gasta el botón «Pedir una cita» de la portada. Un
 * asistente magenta competiría con ella por la mirada, así que va en índigo.
 *
 * ## Es el único botón flotante
 *
 * Hasta el 14 de septiembre de 2026 había también uno verde de WhatsApp en la
 * esquina, y éste se apilaba encima. El usuario pidió quitarlo: WhatsApp sigue en
 * la sección de contacto («Escríbenos por WhatsApp»). Si algún día vuelve otro
 * flotante, que no pise a éste: en la web de Animal Medical Center el botón verde
 * tapaba el campo de texto del chat al abrirlo, y sólo se vio con el móvil en la
 * mano.
 */

.asistente-llamada {
  position: fixed;
  right: 1.15rem;
  bottom: 1.15rem;
  z-index: 51;

  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-height: 48px;
  padding: .55rem .95rem .55rem .8rem;
  border: 1px solid rgba(245, 158, 11, .45);
  border-radius: 999px;
  cursor: pointer;

  background: var(--indigo);
  color: var(--texto-sobre-indigo);
  font-family: var(--tipo-titulos);
  font-size: .92rem;
  font-weight: 700;
  box-shadow: var(--sombra-alta);
  transition: transform .15s ease, background-color .15s ease;
}
.asistente-llamada:hover { background: var(--indigo-claro); transform: translateY(-2px); }
.asistente-llamada svg { width: 22px; height: 22px; flex-shrink: 0; }

/**
 * La etiqueta «pronto» va en el propio botón, no dentro del panel.
 *
 * Si sólo estuviera dentro, el visitante se enteraría de que no hay asistente
 * DESPUÉS de haberlo abierto esperando uno. Decirlo antes del clic cuesta una
 * palabra y evita la decepción entera.
 */
.asistente-llamada__pronto {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--indigo-oscuro);
  background: var(--dorado);
  padding: .12rem .45rem;
  border-radius: 999px;
}

/**
 * El telón cumple dos funciones, y la segunda es la que importa: el panel se
 * anuncia como `aria-modal`, y un modal sin telón es una promesa que la página
 * no cumple —el resto sigue ahí, clicable, detrás—. Además tapa el botón de
 * WhatsApp y el de llamada mientras el panel está abierto, que si no asomarían
 * por debajo.
 */
.asistente-telon {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(26, 35, 64, .5);
  backdrop-filter: blur(2px);
}
.asistente-telon[hidden] { display: none; }

.asistente-panel {
  position: fixed;
  z-index: 61;
  right: 1.15rem;
  bottom: 1.15rem;
  width: min(380px, calc(100vw - 2.3rem));
  max-height: min(560px, calc(100dvh - 2.3rem));
  overflow-y: auto;

  display: flex;
  flex-direction: column;
  background: var(--blanco);
  border: 1px solid var(--borde);
  border-radius: var(--radio-grande);
  box-shadow: var(--sombra-alta);
}
/* Sin esto, el `display:flex` de arriba gana al `hidden` del navegador y el panel
   se ve siempre. */
.asistente-panel[hidden] { display: none; }

/**
 * El panel recibe el foco al abrirse para que el lector de pantalla lea su
 * nombre y su descripción. No lleva anillo de foco porque no es un control: es
 * el sitio donde aterriza el foco, y un recuadro alrededor de una tarjeta
 * entera se lee como un error de pintado. Los controles de dentro sí lo llevan,
 * heredado de `:focus-visible` en `estilos.css`.
 */
.asistente-panel:focus { outline: none; }

.asistente-panel__cabeza {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1.15rem 1.15rem .9rem;
  border-bottom: 1px solid var(--borde);
  background: var(--indigo);
  color: var(--texto-sobre-indigo);
  border-radius: var(--radio-grande) var(--radio-grande) 0 0;
}
.asistente-panel__cabeza h2 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--texto-sobre-indigo);
}
.asistente-panel__cabeza p {
  margin: .15rem 0 0;
  font-size: .82rem;
  color: var(--texto-tenue-sobre-indigo);
}
.asistente-panel__titulos { margin-right: auto; }

.asistente-panel__cerrar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  margin: -.35rem -.35rem 0 0;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--texto-sobre-indigo);
  cursor: pointer;
}
.asistente-panel__cerrar:hover { background: rgba(255, 255, 255, .14); }
.asistente-panel__cerrar svg { width: 20px; height: 20px; }

.asistente-panel__cuerpo { padding: 1.15rem; }
.asistente-panel__cuerpo p { font-size: .95rem; color: var(--texto-tenue); }
.asistente-panel__cuerpo p:last-of-type { margin-bottom: 0; }
.asistente-panel__cuerpo strong { color: var(--texto); }

/**
 * La lista de lo que el asistente NO hará. Va en el panel, y no escondida en un
 * documento, porque el visitante que abre un asistente de una clínica lo abre
 * casi siempre para preguntar por su animal. Enterarse ahí mismo de que ésa es
 * justo la pregunta que no se responde le ahorra escribirla.
 */
.asistente-panel__limites {
  list-style: none;
  margin: 0 0 1rem;
  padding: .85rem 1rem;
  background: var(--crema);
  border-left: 4px solid var(--dorado);
  border-radius: 0 var(--radio) var(--radio) 0;
  display: grid;
  gap: .4rem;
  font-size: .88rem;
  color: var(--texto-tenue);
}

.asistente-panel__salida {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .6rem 1.15rem;
  border: 2px solid currentColor;
  border-radius: 999px;
  color: var(--indigo);
  background: transparent;
  font-family: var(--tipo-titulos);
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
}
.asistente-panel__salida:hover { background: var(--indigo-tenue); }

/**
 * Por debajo de 480 px el panel ocupa el ancho entero y se pega al borde
 * inferior: a esa anchura, un panel flotante con márgenes deja tiras de fondo
 * a los lados y parece un anuncio.
 */
@media (max-width: 480px) {
  .asistente-panel {
    right: 0;
    left: 0;
    bottom: 0;
    width: auto;
    max-height: 88dvh;
    border-radius: var(--radio-grande) var(--radio-grande) 0 0;
  }
  .asistente-panel__cabeza { border-radius: var(--radio-grande) var(--radio-grande) 0 0; }
}