/* Asistente de preguntas de la web (views/layouts/asistente.php). Colores de app.css :root */
.asis { --asis-navy: #081f37; --asis-azul: #245cf6; --asis-tinta: #101d33; --asis-gris: #52647e;
  --asis-borde: #dbe5f0; --asis-fondo: #f6f9fd; --asis-verde: #0a826c; font-family: 'Inter', sans-serif; }
.asis svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.asis-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Botón «Asistente virtual»: azul eléctrico de marca con borde turquesa (sin degradado: guía de marca),
   resalta sobre fondo oscuro y claro.
   Ocupa la esquina del antiguo botón de WhatsApp (que no se muestra con el asistente activo) */
.asis-lanzador { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 61; display: inline-flex; align-items: center; gap: .7rem;
  min-height: 60px; padding: .45rem 1.25rem .45rem .45rem; border: 2px solid #16d9ad; border-radius: 999px;
  background: var(--asis-azul); color: #fff; text-align: left;
  font-family: 'Inter', sans-serif; box-shadow: 0 12px 32px rgba(36, 92, 246, .45), 0 4px 12px rgba(5, 14, 27, .3);
  cursor: pointer; touch-action: manipulation; transition: transform .15s cubic-bezier(.22, 1, .36, 1), box-shadow .15s;
  animation: asis-llamar 2.4s cubic-bezier(.22, 1, .36, 1) 1.2s 3; }
.asis-lanzador:hover { transform: translateY(-2px); box-shadow: 0 16px 38px rgba(36, 92, 246, .55), 0 4px 12px rgba(5, 14, 27, .3); }
.asis-lanzador:active { transform: scale(.97); }
.asis-lanzador:focus-visible, .asis button:focus-visible, .asis a:focus-visible, .asis textarea:focus-visible { outline: 3px solid #16d9ad; outline-offset: 2px; }
.asis-lanzador[aria-expanded="true"] { display: none; }
.asis-lanzador-texto { display: flex; flex-direction: column; gap: .15rem; }
.asis-lanzador-texto strong { font: 700 1rem/1.15 'Poppins', 'Inter', sans-serif; }
.asis-lanzador-texto small { font-size: .8rem; line-height: 1.2; color: #e8f4ff; }
/* Anillo turquesa que se expande 3 veces al cargar: llama la atención sin quedarse moviendo */
@keyframes asis-llamar {
  0% { box-shadow: 0 12px 32px rgba(36, 92, 246, .45), 0 0 0 0 rgba(22, 217, 173, .65); }
  70%, 100% { box-shadow: 0 12px 32px rgba(36, 92, 246, .45), 0 0 0 14px rgba(22, 217, 173, 0); }
}

/* Avatar del asistente (robot) con punto verde de «en línea» */
.asis-avatar { position: relative; display: grid; place-items: center; width: 46px; height: 46px; flex: none; border-radius: 50%; background: #fff; color: var(--asis-azul); }
/* El personaje trae sus propios colores de marca: sin el trazo heredado de los iconos */
.asis .asis-avatar svg { width: 2.15rem; height: 2.15rem; fill: none; stroke: none; }
.asis-en-linea { position: absolute; right: 0; bottom: 1px; width: 12px; height: 12px; border-radius: 50%; background: #16d9ad; box-shadow: 0 0 0 2px #fff; }
.asis-avatar--cabecera { width: 42px; height: 42px; margin-right: .55rem; }
.asis-avatar--cabecera .asis-en-linea { box-shadow: 0 0 0 2px var(--asis-navy); }

/* Saludo sobre el botón: aparece una vez por visita y se va solo */
.asis-saludo { position: fixed; right: 1.25rem; bottom: calc(1.25rem + 60px + .7rem); z-index: 61; display: flex; align-items: flex-start; gap: .25rem;
  max-width: min(300px, calc(100vw - 2.5rem)); padding: .35rem .35rem .35rem .2rem; border-radius: 16px 16px 4px 16px;
  background: #fff; color: var(--asis-tinta); box-shadow: 0 14px 36px rgba(8, 31, 55, .28); animation: asis-aparecer .25s cubic-bezier(.22, 1, .36, 1); }
.asis-saludo[hidden] { display: none; }
.asis-saludo-texto { flex: 1; min-height: 44px; padding: .5rem .6rem; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer;
  font: .9rem/1.4 'Inter', sans-serif; }
.asis-saludo-texto strong { color: var(--asis-azul); }
.asis-saludo-cerrar { width: 32px; height: 32px; flex: none; border: 0; border-radius: 10px; background: transparent; color: var(--asis-gris); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.asis-saludo-cerrar:hover { background: var(--asis-fondo); }
@keyframes asis-aparecer { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.asis-panel { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 70; display: flex; flex-direction: column;
  width: min(390px, calc(100vw - 2.5rem)); height: min(620px, calc(100vh - 2.5rem)); height: min(620px, calc(100dvh - 2.5rem)); overflow: hidden;
  border-radius: 20px; background: #fff; color: var(--asis-tinta); box-shadow: 0 18px 50px rgba(8, 31, 55, .28); }
.asis-panel[hidden] { display: none; }

.asis-cabecera { display: flex; align-items: center; gap: .25rem; padding: 1rem .75rem .9rem 1.1rem; background: var(--asis-navy); color: #fff; }
.asis-cabecera > div { flex: 1; min-width: 0; }
.asis-cabecera h2 { margin: 0; font: 700 1.05rem/1.3 'Poppins', 'Inter', sans-serif; }
.asis-cabecera p { margin: .2rem 0 0; font-size: .85rem; line-height: 1.4; color: #dbe5f0; }
.asis-icono { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #fff; cursor: pointer; }
.asis-icono:hover { background: rgba(255, 255, 255, .12); }

.asis-mensajes { position: relative; flex: 1; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: .6rem; padding: 1rem; background: var(--asis-fondo); }
.asis-msj { max-width: 88%; margin: 0; padding: .7rem .9rem; border-radius: 16px; font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; }
.asis-msj--bot { align-self: flex-start; background: #fff; border: 1px solid var(--asis-borde); border-bottom-left-radius: 6px; }
.asis-msj--yo { align-self: flex-end; background: var(--asis-azul); color: #fff; border-bottom-right-radius: 6px; white-space: pre-line; }
.asis-msj p { margin: 0; }
.asis-msj p + p, .asis-msj p + .asis-lista, .asis-lista + p { margin-top: .4rem; }
.asis-msj strong { font-weight: 700; color: var(--asis-navy); }
/* Tailwind quita las viñetas de toda la web: aquí se devuelven */
.asis-lista { margin: .3rem 0 0; padding-left: 1.15rem; list-style: disc; }
.asis-lista li { margin: .15rem 0; padding-left: .1rem; }
.asis-lista li::marker { color: var(--asis-azul); }
.asis-msj a { color: var(--asis-azul); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.asis-chip--pantalla { border-color: var(--asis-azul); color: var(--asis-azul); font-weight: 600; }
.asis-contexto { padding: .5rem 1rem 0; background: #fff; border-top: 1px solid var(--asis-borde); }
.asis-contexto[hidden] { display: none; }
.asis-contexto .asis-chip { width: 100%; }
/* En la web, una pantalla del sistema no se puede abrir: se nombra */
.asis-en-sistema { display: inline-flex; align-items: center; min-height: 36px; padding: 0 .9rem; border-radius: 999px; background: var(--asis-fondo); color: var(--asis-tinta); font-weight: 600; font-size: .85rem; }
.asis-chip:disabled { cursor: default; opacity: .55; }
.asis-chip--elegido:disabled { opacity: 1; border-color: var(--asis-azul); color: var(--asis-azul); font-weight: 600; }
.asis-opciones { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; margin-top: .6rem; }
.asis-acciones { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .65rem; }
.asis-msj .asis-boton { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; padding: 0 1rem; border-radius: 999px;
  background: #e8f4ff; color: var(--asis-azul); font-weight: 600; text-decoration: none; }
.asis-msj .asis-boton::after { content: '→'; }
.asis-msj .asis-boton:hover { background: #dbe5f0; }
.asis-msj--escribiendo { color: var(--asis-gris); font-style: italic; }
.asis-msj .asis-persona { margin-top: .6rem; }

.asis-sugerencias { display: flex; flex-wrap: wrap; gap: .45rem; padding: .25rem 1rem .75rem; background: var(--asis-fondo); }
.asis-sugerencias[hidden] { display: none; }
.asis-chip { min-height: 44px; padding: .5rem .85rem; border: 1px solid var(--asis-borde); border-radius: 999px; background: #fff; color: var(--asis-tinta);
  font: 500 .875rem/1.25 'Inter', sans-serif; text-align: left; cursor: pointer; touch-action: manipulation; }
.asis-chip:hover { border-color: var(--asis-azul); color: var(--asis-azul); }

.asis-form { display: flex; align-items: flex-end; gap: .5rem; padding: .75rem; border-top: 1px solid var(--asis-borde); background: #fff; }
.asis-form textarea { flex: 1; min-height: 44px; max-height: 7.5rem; padding: .65rem .85rem; resize: none; border: 1px solid var(--asis-borde); border-radius: 14px;
  font: 1rem/1.4 'Inter', sans-serif; color: var(--asis-tinta); background: #fff; }
.asis-form textarea::placeholder { color: #6b7c93; }
.asis-enviar { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 14px; background: var(--asis-azul); color: #fff; cursor: pointer; touch-action: manipulation; }
.asis-enviar:disabled { opacity: .55; cursor: wait; }

.asis-pie { margin: 0; padding: 0 1rem .75rem; background: #fff; font-size: .75rem; line-height: 1.4; color: var(--asis-gris); }
.asis-persona { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: .55rem 1rem; border-radius: 12px;
  background: var(--asis-verde); color: #fff !important; font: 600 .9rem/1.25 'Inter', sans-serif; text-decoration: none !important; text-align: center; }
.asis-persona:hover { filter: brightness(1.08); }
/* «Crear un reporte del problema» (solo dentro del sistema): botón principal de la marca */
.asis-reportar { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin-top: .6rem; padding: .55rem 1rem;
  border: 0; border-radius: 12px; background: var(--asis-azul); color: #fff; font: 600 .9rem/1.25 'Inter', sans-serif; cursor: pointer; touch-action: manipulation; }
.asis-reportar:hover { filter: brightness(1.08); }
.asis-reportar:focus-visible { outline: 3px solid #16d9ad; outline-offset: 2px; }
.asis-persona--destacado { box-shadow: 0 0 0 3px rgba(10, 130, 108, .3); }

/* Celular: pantalla completa para escribir cómodo con el teclado abierto */
@media (max-width: 640px) {
  .asis-lanzador { right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); }
  .asis-saludo { right: 1rem; }
  .asis-panel { inset: 0; width: 100%; height: 100vh; height: 100dvh; border-radius: 0; }
  .asis-cabecera { padding-top: max(1rem, env(safe-area-inset-top)); }
  .asis-pie { padding-bottom: max(.75rem, env(safe-area-inset-bottom)); }
}

/* Dentro del ERP (iframe): el panel ocupa toda la ventana que abre la aplicación */
.asis--embebido .asis-panel { inset: 0; width: 100%; height: 100vh; height: 100dvh; border-radius: 0; box-shadow: none; }

@media (prefers-reduced-motion: reduce) {
  .asis-lanzador, .asis-saludo { transition: none; animation: none; }
}