/* Asistente de Tresa (P4): boton, aviso proactivo y panel del chat.
   Diseño: docs/reservas/maqueta/reservas-maqueta.html, estados chat-*. Usa los tokens y
   componentes de reservas.css (btn, enlace, entrada, tel, casilla, otp, estado, alerta).
   Todas las clases llevan el prefijo «chat» para no chocar con P2 (p. ej. .puntos es de
   privacidad). CSP estricta: nada en linea; aqui van todos los estilos del chat. */

/* ===================================================================== Boton flotante */
.chat-fab {
  position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom)); z-index: 40;
  width: 60px; height: 60px; border-radius: 50%; border: 0; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-size: 28px; cursor: pointer;
  box-shadow: 0 10px 28px -6px rgb(58 32 18 / .5);
  transition: transform .2s var(--ease), background-color .2s var(--ease);
}
@media (hover: hover) { .chat-fab:hover { background: var(--accent-hover); transform: translateY(-2px); } }
.chat-fab:focus-visible { outline-offset: 4px; }

/* ===================================================================== Aviso proactivo (globo) */
.chat-globo {
  position: fixed; right: 92px; bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 40;
  max-width: min(270px, calc(100% - 112px)); display: flex; align-items: center; gap: 2px;
  padding: 4px 4px 4px 16px; background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-md) var(--r-md) var(--r-xs) var(--r-md); box-shadow: var(--shadow);
}
.chat-globo__texto {
  flex: 1; min-width: 0; min-height: 44px; padding: 6px 0; border: 0; background: none; text-align: left;
  font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--text); cursor: pointer;
}
@media (hover: hover) { .chat-globo__texto:hover { color: var(--accent); } }
.chat-globo .btn-icono { font-size: 20px; }

/* ===================================================================== Panel */
.chat {
  position: fixed; inset: auto 20px 92px auto; margin: 0; width: 380px; height: min(600px, calc(100dvh - 112px));
  border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; overflow: hidden;
}
.chat:not([open]) { display: none; }
.chat::backdrop { background: transparent; }
.chat__cab { display: flex; align-items: flex-start; gap: 12px; padding: 14px 10px 10px 16px; border-bottom: 1px solid var(--line); }
.chat__avatar {
  flex: none; width: 42px; height: 42px; margin-top: 2px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent); color: var(--on-accent); font-size: 22px;
}
.chat__id { flex: 1; min-width: 0; }
.chat__id h2 { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 18px; font-weight: 700; line-height: 1.3; }
.chat-tag-ia {
  display: inline-grid; place-items: center; padding: 2px 8px; border-radius: var(--r-pill); border: 1.5px solid var(--accent);
  color: var(--accent); font: 700 12px/1.2 var(--font-body); letter-spacing: .04em;
}
.chat__persona { min-height: 44px; margin-top: 2px; gap: 6px; font-size: 14px; text-decoration: none; }
.chat__persona .ic { font-size: 18px; }
.chat__log {
  flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 14px 12px;
  display: flex; flex-direction: column; gap: 10px;
}
.chat__log:focus-visible { outline-offset: -3px; }

/* ---- Aviso de IA y modo de prueba */
.chat-aviso {
  display: flex; gap: 8px; padding: 10px 12px; border-radius: var(--r-sm); background: var(--surface-2);
  font-size: 13.5px; color: var(--muted); line-height: 1.45;
}
.chat-aviso .ic { font-size: 17px; margin-top: 1px; color: var(--accent); }
.chat-aviso a { font-weight: 600; }
.chat-modo {
  align-self: flex-start; display: inline-flex; gap: 6px; align-items: center; padding: 4px 10px; border-radius: var(--r-pill);
  border: 1px dashed var(--line-strong); font-size: 12.5px; font-weight: 600; color: var(--muted);
}

/* ---- Mensajes */
.chat-grupo { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.chat-msg { max-width: 86%; padding: 10px 14px; border-radius: var(--r-md); font-size: 15px; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; }
.chat-msg--ia { align-self: flex-start; background: var(--surface-2); border-bottom-left-radius: var(--r-xs); }
.chat-msg--yo { align-self: flex-end; background: var(--accent); color: var(--on-accent); border-bottom-right-radius: var(--r-xs); }
.chat-msg .estado { display: flex; width: max-content; max-width: 100%; margin: 8px 0; font-size: 13px; white-space: normal; }
.chat-nota { align-self: center; max-width: 92%; font-size: 13px; color: var(--muted); text-align: center; }

/* ---- Respuestas rapidas y pastillas */
.chat-rapidas { display: flex; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.chat-rapida {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: var(--r-pill);
  border: 1.5px solid var(--accent); background: var(--surface); color: var(--accent);
  font: 600 14.5px/1.2 var(--font-body); text-decoration: none; cursor: pointer; transition: background-color .2s var(--ease);
}
@media (hover: hover) { .chat-rapida:hover:not(:disabled) { background: var(--accent-soft); } }
.chat-rapida[aria-pressed="true"] { background: var(--accent-soft); }
.chat-rapida:disabled { cursor: default; opacity: .55; }

/* ---- Horas (opciones de buscar_horas) */
.chat-horas { display: grid; gap: 8px; width: 86%; }
.chat-hora {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0 10px; min-height: 60px; padding: 10px 14px;
  text-align: left; border: 1.5px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); color: var(--text); cursor: pointer;
  transition: border-color .2s var(--ease), background-color .2s var(--ease);
}
.chat-hora__hora { font: 700 17px/1.2 var(--font-display); font-variant-numeric: tabular-nums; }
.chat-hora__meta { grid-column: 1; font-size: 13.5px; color: var(--muted); }
.chat-hora__meta:empty { display: none; }
.chat-hora .ic { grid-row: 1 / span 2; grid-column: 2; font-size: 18px; color: var(--accent); }
@media (hover: hover) { .chat-hora:hover:not(:disabled) { border-color: var(--accent); } }
.chat-hora[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); }
.chat-hora:disabled { cursor: default; }
.chat-hora:disabled:not([aria-pressed="true"]) { opacity: .55; }

/* ---- Tarjeta de propuesta («Revisa y confirma tu») */
.chat-prop { width: 92%; padding: 14px; border: 1.5px solid var(--accent); border-radius: var(--r-md); background: var(--surface); }
.chat-prop__aviso {
  display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; margin-bottom: 8px; border-radius: var(--r-sm);
  background: var(--accent-soft); color: var(--accent); font-size: 13.5px; font-weight: 600; line-height: 1.4;
}
.chat-prop__aviso .ic { font-size: 18px; }
.chat-prop dl { margin: 0 0 12px; display: grid; }
.chat-prop dl div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 2px; font-size: 14px; }
.chat-prop dl div + div { border-top: 1px solid var(--line); }
.chat-prop dt { color: var(--muted); }
.chat-prop dd { margin: 0; font-weight: 600; text-align: right; }
.chat-prop__botones { display: grid; gap: 6px; }
.chat-prop__hecho, .chat-prop__fallo { display: flex; gap: 8px; align-items: center; min-height: 44px; font-weight: 600; line-height: 1.35; }
.chat-prop__hecho { color: var(--accent); }
.chat-prop__hecho .ic, .chat-prop__fallo .ic { font-size: 20px; }
.chat-prop__fallo { align-items: flex-start; padding-top: 4px; color: var(--text); }
.chat-prop__fallo .ic { color: var(--danger); margin-top: 1px; }
.chat-prop .alerta { margin: 0 0 10px; }
.chat-prop__contacto { margin-top: 8px; }
.chat-prop__fallo + .chat-prop__botones { margin-top: 10px; }

/* ---- Reservar sin codigo dentro del chat (29/09): el formulario de «Tus datos» en la tarjeta (mismos
   componentes que el panel de la web, en compacto) y la confirmacion con el enlace de la cita. El campo
   trampa usa .trampa de reservas.css (fuera de la vista; el panel recorta su desbordamiento). */
.chat-prop__form { margin-top: 2px; }
.chat-prop__intro { margin-bottom: 12px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.chat-prop .campo { margin-bottom: 14px; }
.chat-prop .entrada { min-height: 48px; }
.chat-prop .casilla { font-size: 14px; }
.chat-prop .permisos { margin-bottom: 12px; }
.chat-prop__titulo { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 700 18px/1.25 var(--font-display); }
.chat-prop__titulo .ic { flex: none; font-size: 22px; color: var(--accent); }
.chat-prop--hecha > .estado { margin-bottom: 10px; }
.chat-prop__nota { display: flex; gap: 8px; align-items: flex-start; margin-bottom: 12px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.chat-prop__nota .ic { flex: none; margin-top: 1px; font-size: 18px; color: var(--accent); }
.chat-prop .enlace-cita { padding: 12px; }
.chat-prop .enlace-cita .mcp-dato__fila { flex-direction: column; align-items: stretch; }
.chat-prop .enlace-cita .mcp-copiar { width: 100%; }
.chat-prop .enlace-cita__url { font-size: 13.5px; }

/* ---- Verificacion del telefono dentro del chat (mismos campos que el panel, en compacto) */
.chat-verif { width: 100%; padding: 14px; border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); }
.chat-verif__titulo { font: 700 17px/1.25 var(--font-display); margin-bottom: 4px; }
.chat-verif__intro { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.chat-verif__error { display: flex; gap: 6px; align-items: flex-start; margin: 6px 0 12px; font-size: 14px; font-weight: 600; color: var(--danger); }
.chat-verif__error .ic { font-size: 17px; margin-top: 1px; }
.chat-verif .campo { margin-bottom: 14px; }
.chat-verif .entrada { min-height: 48px; }
.chat-verif .casilla { font-size: 14px; }
.chat-verif .permisos { margin-bottom: 12px; }
.chat-verif .enviado-a { margin-bottom: 14px; font-size: 14px; }
.chat-verif .otp__celdas { grid-template-columns: repeat(6, 38px); gap: 6px; }
.chat-verif .otp__celda { height: 50px; font-size: 21px; }
.chat-verif .reenviar { font-size: 14px; }
.chat-verif__hecho { display: flex; gap: 8px; align-items: center; min-height: 44px; font-weight: 600; color: var(--accent); }
.chat-verif__hecho .ic { font-size: 20px; }
.chat-verif--hecho { padding: 6px 14px; }
.chat-ts:empty { display: none; }

/* ---- Errores y alternativas */
.chat__log .alerta { margin: 0; width: 92%; }
.chat-acciones { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---- «Escribiendo…» */
.chat-escribe {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md);
  border-bottom-left-radius: var(--r-xs); background: var(--surface-2); color: var(--muted); font-size: 14px;
}
.chat-puntos { display: inline-flex; gap: 4px; }
.chat-puntos span { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); opacity: .5; }

/* ---- Pie: consentimiento o caja de texto */
.chat__consent { display: grid; gap: 10px; padding: 12px 14px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.chat__consent p { font-size: 13.5px; line-height: 1.45; color: var(--muted); }
.chat__form { display: flex; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.chat__form .entrada { flex: 1; min-width: 0; min-height: 48px; border-radius: var(--r-pill); padding: 0 18px; }
.chat-enviar {
  flex: none; width: 48px; height: 48px; border-radius: 50%; border: 0; background: var(--accent); color: var(--on-accent);
  font-size: 21px; display: grid; place-items: center; cursor: pointer; transition: background-color .2s var(--ease);
}
@media (hover: hover) { .chat-enviar:hover:not(:disabled) { background: var(--accent-hover); } }
.chat-enviar:disabled { opacity: .45; cursor: not-allowed; }

/* ===================================================================== Movil: hoja inferior */
@media (max-width: 599px) {
  .chat { inset: auto 0 0 0; width: 100%; height: calc(100dvh - 14px); border-radius: var(--r-md) var(--r-md) 0 0; border-bottom: 0; }
  .chat::backdrop { background: var(--backdrop); }
  .chat-fab { right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); }
  .chat-globo { right: 86px; bottom: calc(20px + env(safe-area-inset-bottom)); }
  /* Que el boton no tape para siempre el final del pie. */
  .pie { padding-bottom: 88px; }
  /* Con el chat abierto, el aviso breve de la pagina baja de la cabecera del panel (arriba la taparia). */
  body:has(#chat[open]) .aviso { inset: calc(118px + env(safe-area-inset-top)) auto auto 50%; }
}

/* ===================================================================== Movimiento */
@media (prefers-reduced-motion: no-preference) {
  .chat-globo:not([hidden]) { animation: chat-globo-entra .4s var(--ease); }
  .chat[open] { animation: chat-entra .28s var(--ease); transform-origin: bottom right; }
  .chat__log > * { animation: chat-msg-entra .3s var(--ease) both; }
  .chat__log.sin-anim > * { animation: none; }
  .chat-puntos span { animation: chat-punto 1s ease-in-out infinite; }
  .chat-puntos span:nth-child(2) { animation-delay: .15s; }
  .chat-puntos span:nth-child(3) { animation-delay: .3s; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 599px) {
  .chat[open] { animation: hoja-entra .34s var(--ease); }
}
@keyframes chat-entra { from { transform: translateY(12px) scale(.96); opacity: 0; } }
@keyframes chat-msg-entra { from { transform: translateY(6px); opacity: 0; } }
@keyframes chat-globo-entra { from { transform: translateX(10px); opacity: 0; } }
@keyframes chat-punto { 50% { opacity: 1; transform: translateY(-2px); } }