/* ==========================================================================
   YCOS - Asistente "Luke" (chat de preguntas y respuestas predefinidas, sin IA)
   Índice: 1 Luke (rostro dibujado en CSS) · 2 Avatares · 3 Botón y panel
           4 Mensajes · 5 Formulario · 6 Adaptación a móvil · 7 Movimiento
   Los estilos de Luke vienen del diseño original; todos los selectores van
   dentro de .Luke-scene para no chocar con el resto del sitio.
   ========================================================================== */

/* El asistente necesita JavaScript: sin él no se muestra nada */
.assistant { display: none; }
.js .assistant { display: block; }

/* 1. LUKE ------------------------------------------------------------------ */
.Luke-scene { display: block; outline: none; }
.Luke-scene :where(span) { display: block; }

.Luke-scene .Luke-art {
  position: absolute;
  width: 330px;
  height: 310px;
  isolation: isolate;
  /* Textura de pelaje reutilizable (Shih Tzu de pelo largo) */
  --fur: repeating-linear-gradient(97deg, transparent 0 4px, rgba(255, 255, 255, .045) 5px 6px, transparent 7px 11px);
}

.Luke-art .oreja {
  position: absolute;
  top: 58px;
  width: 96px;
  height: 150px;
  border-radius: 46% 40% 55% 60%;
  background: var(--fur), linear-gradient(105deg, #0f0f12, #3a383d 45%, #18171b 80%);
  clip-path: polygon(12% 0, 88% 0, 100% 22%, 95% 45%, 100% 66%, 92% 84%, 84% 100%, 72% 90%, 60% 100%, 47% 88%, 34% 100%, 20% 89%, 8% 96%, 0 70%, 5% 42%, 0 20%);
  z-index: 1;
  transition: transform .3s;
}
.Luke-art .oreja.izq { left: 4px; transform: rotate(7deg); }
.Luke-art .oreja.der { right: 4px; transform: rotate(-7deg); }

.Luke-art .cabeza {
  position: relative;
  width: 225px;
  height: 225px;
  margin: 12px auto 0;
  border-radius: 47% 47% 43% 43%;
  background: var(--fur), linear-gradient(120deg, #151418, #36343a 45%, #0f0f12 85%);
  border: 1px solid #3b393d;
  box-shadow: inset 5px 4px 10px #aaa6a418, inset -12px -12px 15px #09090c99, 0 18px 30px #0006;
  z-index: 2;
  transform-origin: center 75%;
}

/* Mancha blanca del pecho, debajo del mentón */
.Luke-art .cabeza::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 204px;
  width: 36px;
  height: 32px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at 50% 35%, #fff 0, #e8e4e0 50%, #b9b3b0 100%);
  clip-path: polygon(8% 10%, 92% 10%, 100% 50%, 82% 78%, 68% 100%, 50% 82%, 32% 100%, 18% 78%, 0 50%);
  z-index: 0;
  pointer-events: none;
}

.Luke-art .pelo {
  position: absolute;
  inset: -14px;
  z-index: -1;
  border-radius: 47% 47% 43% 43%;
  background: var(--fur), radial-gradient(ellipse at 50% 64%, #7b7679 0, #4d494d 24%, transparent 42%), radial-gradient(ellipse at 20% 22%, #5d585b 0, transparent 30%), radial-gradient(ellipse at 74% 12%, #4f4b50 0, transparent 28%), linear-gradient(110deg, #141317, #3a373c 45%, #121115);
  clip-path: polygon(100% 50%, 92.8% 63.9%, 90.5% 79.4%, 76.5% 86.4%, 65.5% 97.6%, 50% 95%, 34.5% 97.6%, 23.5% 86.4%, 9.5% 79.4%, 7.2% 63.9%, 0 50%, 7.2% 36.1%, 9.5% 20.6%, 23.5% 13.6%, 34.5% 2.4%, 50% 5%, 65.5% 2.4%, 76.5% 13.6%, 90.5% 20.6%, 92.8% 36.1%);
}

.Luke-art .mecha {
  position: absolute;
  z-index: 5;
  width: 17px;
  height: 40px;
  border-radius: 80% 20% 75% 25%;
  background: linear-gradient(90deg, #121115, #4a464c 48%, #19181c);
  pointer-events: none;
}
.Luke-art .m1 { top: -3px; left: 30px; transform: rotate(-30deg); }
.Luke-art .m2 { top: -7px; left: 61px; transform: rotate(-17deg); height: 37px; }
.Luke-art .m3 { top: -8px; left: 95px; transform: rotate(3deg); height: 35px; }
.Luke-art .m4 { top: -4px; right: 66px; transform: rotate(15deg); }
.Luke-art .m5 { top: 5px; right: 35px; transform: rotate(30deg); height: 38px; }

.Luke-art .ceja {
  position: absolute;
  top: 68px;
  width: 37px;
  height: 15px;
  border-top: 7px solid #5a565c;
  border-radius: 50%;
  z-index: 6;
}
.Luke-art .ceja.izq { left: 45px; transform: rotate(-10deg); }
.Luke-art .ceja.der { right: 43px; transform: rotate(10deg); }

.Luke-art .ojo {
  position: absolute;
  top: 82px;
  width: 29px;
  height: 29px;
  border: 3px solid #2a2326;
  border-radius: 50%;
  background: #dbd1d8;
  overflow: hidden;
  z-index: 7;
  box-shadow: 0 1px 5px #0009;
  transition: transform .18s;
  transform-origin: center;
}
/* Flequillo que cae sobre los ojos */
.Luke-art .ojo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10, 8, 10, .8) 0, transparent 28%);
  pointer-events: none;
}
.Luke-art .ojo.izq { left: 49px; }
.Luke-art .ojo.der { right: 49px; }

.Luke-art .pupila {
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #8a5a34 0, #4b2c18 38%, #1b0e08 78%, #0b0605 100%);
  transition: transform .12s ease;
}
.Luke-art .brillo {
  position: absolute;
  width: 7px;
  height: 7px;
  left: 3px;
  top: 3px;
  border-radius: 50%;
  background: #fff9ec;
  box-shadow: 0 0 3px white;
}
.Luke-art .brillo2 {
  position: absolute;
  width: 3px;
  height: 3px;
  right: 3px;
  bottom: 5px;
  border-radius: 50%;
  background: white;
}

.Luke-art .hocico {
  position: absolute;
  top: 106px;
  left: 50%;
  transform: translateX(-50%);
  width: 124px;
  height: 82px;
  border-radius: 50% 50% 55% 55%;
  background: var(--fur), radial-gradient(ellipse at 50% 30%, #bdb8b4 0%, #968f8e 40%, #5b575c 80%, #3a383d 100%);
  box-shadow: inset 0 4px 8px #e6e1dd30, 0 3px 6px #0005;
  z-index: 6;
}
/* Barba clara de pelos largos bajo la boca */
.Luke-art .hocico::after {
  content: "";
  position: absolute;
  left: 14%;
  right: 14%;
  top: 62%;
  height: 46px;
  background: var(--fur), linear-gradient(180deg, #8f8987, #cfcac6 70%, #e9e5e1);
  clip-path: polygon(0 0, 100% 0, 96% 40%, 100% 70%, 84% 100%, 70% 80%, 58% 100%, 44% 78%, 30% 100%, 16% 76%, 4% 88%, 0 52%);
  z-index: -1;
}

.Luke-art .nariz {
  position: absolute;
  top: 108px;
  left: 50%;
  transform: translateX(-50%);
  width: 34px;
  height: 24px;
  border-radius: 45% 45% 55% 55%;
  background: radial-gradient(circle at 35% 25%, #6b5f64, #151215 68%);
  box-shadow: 0 2px 3px #0008;
  z-index: 9;
}
.Luke-art .nariz::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 4px;
  width: 8px;
  height: 4px;
  border-radius: 50%;
  background: #b2a5a4;
}

.Luke-art .linea {
  position: absolute;
  top: 131px;
  left: 50%;
  width: 2px;
  height: 17px;
  transform: translateX(-50%);
  background: #39343a;
  z-index: 9;
}

.Luke-art .boca {
  position: absolute;
  top: 143px;
  left: 50%;
  transform: translateX(-50%);
  width: 42px;
  height: 17px;
  border-radius: 5px 5px 45% 45%;
  background: #211015;
  overflow: hidden;
  z-index: 8;
}
.Luke-art .lengua {
  position: absolute;
  bottom: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 21px;
  height: 15px;
  border-radius: 45% 45% 50% 50%;
  background: linear-gradient(90deg, #b64f67, #f09aaa, #b84f67);
  transform-origin: center top;
  transition: height .15s, bottom .15s;
}

.Luke-art .patita {
  position: absolute;
  top: 105px;
  width: 67px;
  height: 142px;
  border-radius: 45% 45% 48% 48%;
  background: var(--fur), linear-gradient(110deg, #0f0f12, #3d3b41 48%, #18171b);
  border: 1px solid #4a474b;
  box-shadow: inset 3px 2px 5px #aaa2, 0 5px 9px #0007;
  z-index: 12;
  opacity: 0;
  transition: top .58s cubic-bezier(.2, .8, .2, 1), transform .58s cubic-bezier(.2, .8, .2, 1), opacity .2s;
}
.Luke-art .patita.izq { left: 15px; transform: translate(-35px, 28px) rotate(79deg); }
.Luke-art .patita.der { right: 15px; transform: translate(35px, 28px) rotate(-79deg); }
.Luke-art .patita i {
  position: relative;
  display: inline-block;
  top: 8px;
  left: 15px;
  width: 7px;
  height: 10px;
  margin: 0 1px;
  border-radius: 50%;
  background: #858187;
  opacity: .8;
}

/* Estados (los activa js/assistant.js solo si la persona no pidió menos movimiento) */
.Luke-scene.tapado .patita { top: 72px; opacity: 1; }
.Luke-scene.tapado .patita.izq { transform: translate(3px, 0) rotate(15deg); }
.Luke-scene.tapado .patita.der { transform: translate(-3px, 0) rotate(-15deg); }
.Luke-scene.lengua-larga .boca { height: 23px; overflow: visible; }
.Luke-scene.lengua-larga .lengua { height: 42px; bottom: -27px; }
.Luke-scene.sorprendido .ojo { transform: scale(1.15); }
.Luke-scene.sorprendido .boca { height: 30px; }
.Luke-scene.durmiendo .ojo,
.Luke-scene.parpadeando .ojo { transform: scaleY(.08); }

@media (prefers-reduced-motion: no-preference) {
  .Luke-art .cabeza { animation: luke-respirar 3s ease-in-out infinite; }
  .Luke-scene.hablando .boca { animation: luke-hablar .19s infinite alternate; }
  .Luke-scene.hablando .lengua { animation: luke-lengua-habla .25s infinite alternate; }
  .Luke-scene.lengua-larga .lengua { animation: luke-lamer .4s infinite alternate; }
  .Luke-scene.jadeando .boca { animation: luke-jadear .28s infinite alternate; }
  .Luke-scene.jadeando .lengua { height: 29px; bottom: -12px; animation: luke-lengua-habla .3s infinite alternate; }
  .Luke-scene.feliz .cabeza { animation: luke-saltar-feliz .45s ease-in-out 3; }
  .Luke-scene.feliz .oreja.izq { animation: luke-oreja-feliz .3s ease-in-out 5 alternate; }
  .Luke-scene.feliz .oreja.der { animation: luke-oreja-feliz .3s ease-in-out 5 alternate-reverse; }
  .Luke-scene.inclinado .cabeza { animation: luke-inclinar .7s ease-in-out 2 alternate; }
  .Luke-scene.durmiendo .cabeza { animation: luke-dormir 2s ease-in-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
  .Luke-art * { transition: none !important; }
}

@keyframes luke-respirar { 0%, 100% { translate: 0 0; } 50% { translate: 0 -3px; } }
@keyframes luke-hablar { from { height: 9px; width: 34px; } to { height: 33px; width: 47px; } }
@keyframes luke-lengua-habla { from { height: 8px; } to { height: 23px; } }
@keyframes luke-lamer { from { rotate: -12deg; } to { rotate: 12deg; } }
@keyframes luke-jadear { from { height: 14px; } to { height: 35px; } }
@keyframes luke-saltar-feliz { 0%, 100% { translate: 0 0; rotate: 0deg; } 35% { translate: 0 -23px; rotate: -5deg; } 70% { translate: 0 -9px; rotate: 5deg; } }
@keyframes luke-oreja-feliz { from { rotate: -8deg; } to { rotate: 12deg; } }
@keyframes luke-inclinar { from { rotate: -2deg; } to { rotate: 13deg; } }
@keyframes luke-dormir { 0%, 100% { translate: 0 0; } 50% { translate: 0 3px; } }

/* 2. AVATARES -------------------------------------------------------------- */
/* Recorte circular del rostro. --size es el diámetro y --s la escala del dibujo (330 px de ancho original). */
.luke-avatar {
  position: relative;
  display: block;
  flex: none;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 28%, #46538a 0%, #1b2547 62%, #121a36 100%);
}
.luke-avatar .Luke-scene { position: absolute; inset: 0; }
.luke-avatar .Luke-art {
  left: calc(var(--size) / 2 - 165px * var(--s));
  top: calc(var(--size) / 2 - 126px * var(--s));
  transform: scale(var(--s));
  transform-origin: top left;
}
.luke-avatar--launcher { --size: 60px; --s: .24; }
.luke-avatar--head { --size: 52px; --s: .21; }

/* 3. BOTÓN Y PANEL --------------------------------------------------------- */
.assistant {
  --assistant-launcher: 4rem;
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 150;
  view-transition-name: assistant;
}

.assistant__launcher {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--assistant-launcher);
  height: var(--assistant-launcher);
  margin-left: auto;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background:
    linear-gradient(var(--color-bg-elevated), var(--color-bg-elevated)) padding-box,
    linear-gradient(135deg, var(--color-accent), #8b5cf6 55%, var(--color-teal)) border-box;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.5), 0 0 0 4px rgb(59 107 255 / 0.12);
  cursor: pointer;
}
.assistant__launcher:focus-visible,
.assistant__close:focus-visible,
.assistant__send:focus-visible,
.assistant__chip:focus-visible,
.assistant__link:focus-visible {
  outline: 2px solid var(--color-accent-text);
  outline-offset: 3px;
}

.assistant__badge {
  position: absolute;
  top: -0.35rem;
  right: -0.45rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: var(--color-accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.4;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.4);
  pointer-events: none;
}
.assistant__online {
  position: absolute;
  right: 0.1rem;
  bottom: 0.1rem;
  width: 0.8rem;
  height: 0.8rem;
  border: 2px solid var(--color-bg-elevated);
  border-radius: 50%;
  background: #22c55e;
  pointer-events: none;
}

.assistant__panel {
  position: absolute;
  right: 0;
  bottom: calc(var(--assistant-launcher) + 0.9rem);
  display: flex;
  flex-direction: column;
  width: min(23.5rem, calc(100vw - 2rem));
  max-height: min(37rem, calc(100dvh - var(--assistant-launcher) - 2.5rem));
  border: 1px solid rgb(59 107 255 / 0.55);
  border-radius: 1.25rem;
  background: var(--color-bg-elevated);
  box-shadow: 0 24px 70px rgb(0 0 0 / 0.55), 0 0 0 1px rgb(255 255 255 / 0.03) inset;
  overflow: hidden;
  transform-origin: bottom right;
}
.assistant__panel:focus { outline: none; }

.assistant__head {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 1rem 1rem 0.5rem 1.1rem;
}
.assistant__heading { flex: 1; min-width: 0; }
.assistant__title { margin: 0; font-size: 1rem; font-weight: 800; line-height: 1.3; }
.assistant__subtitle { margin: 0.1rem 0 0; color: var(--color-text-muted); font-size: 0.8rem; }
.assistant__close {
  display: grid;
  place-items: center;
  align-self: flex-start;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.assistant__close:hover { background: rgb(255 255 255 / 0.08); color: var(--color-text); }
.assistant__close svg, .assistant__send svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 4. MENSAJES -------------------------------------------------------------- */
.assistant__log {
  flex: 1 1 auto;
  min-height: 10rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 1.1rem 0.75rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgb(255 255 255 / 0.2) transparent;
}
.assistant__log:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: -2px; }

.assistant__msg {
  max-width: 88%;
  padding: 0.75rem 0.95rem;
  border-radius: 1rem;
  font-size: 0.95rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.assistant__msg p { margin: 0; }
.assistant__msg--bot { align-self: flex-start; border-bottom-left-radius: 0.3rem; background: rgb(255 255 255 / 0.07); }
.assistant__msg--user { align-self: flex-end; border-bottom-right-radius: 0.3rem; background: var(--color-accent); color: #fff; }

.assistant__links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.65rem; }
.assistant__link {
  display: inline-flex;
  align-items: center;
  padding: 0.35rem 0.8rem;
  border: 1px solid rgb(107 147 255 / 0.5);
  border-radius: 999px;
  color: var(--color-accent-text);
  font-size: 0.85rem;
  font-weight: 700;
  transition: background-color 0.2s, border-color 0.2s;
}
.assistant__link:hover { background: rgb(59 107 255 / 0.15); border-color: var(--color-accent-text); }

.assistant__chips { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.assistant__more { margin: 0.25rem 0 0; color: var(--color-text-muted); font-size: 0.82rem; }
.assistant__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 100%;
  padding: 0.55rem 0.95rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.assistant__chip:hover { background: rgb(59 107 255 / 0.16); border-color: rgb(107 147 255 / 0.55); }
.assistant__chip svg {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: var(--color-accent-text);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.assistant__typing { display: flex; gap: 0.3rem; align-items: center; padding-block: 0.95rem; }
.assistant__typing i { width: 0.42rem; height: 0.42rem; border-radius: 50%; background: var(--color-text-muted); opacity: 0.6; }

.assistant__note { margin: 0; padding: 0 1.1rem 0.5rem; color: var(--color-text-muted); font-size: 0.74rem; line-height: 1.4; }

/* 5. FORMULARIO ------------------------------------------------------------ */
.assistant__form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.9rem 0.9rem;
  padding: 0.35rem 0.4rem 0.35rem 1rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: #0a1128;
  transition: border-color 0.2s;
}
.assistant__form:focus-within { border-color: rgb(107 147 255 / 0.7); }
.assistant__input {
  flex: 1;
  min-width: 0;
  padding: 0.45rem 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--color-text);
  font: inherit;
  font-size: 1rem;           /* 16 px: evita el zoom automático de iOS al enfocar */
}
.assistant__input::placeholder { color: #7f8aa8; }
.assistant__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-accent);
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s;
}
.assistant__send:hover { background: var(--color-accent-hover); }

/* 6. MÓVIL ----------------------------------------------------------------- */
@media (max-width: 30rem) {
  .assistant { --assistant-launcher: 3.6rem; right: max(0.75rem, env(safe-area-inset-right)); bottom: max(0.75rem, env(safe-area-inset-bottom)); }
  .luke-avatar--launcher { --size: 54px; --s: .215; }
  .assistant__panel { width: calc(100vw - 1.5rem); }
  .assistant__msg { max-width: 94%; }
}

/* 7. MOVIMIENTO ------------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .assistant__panel { opacity: 0; transform: translateY(0.75rem) scale(0.97); transition: opacity 0.22s var(--ease), transform 0.22s var(--ease); }
  .assistant__panel.is-open { opacity: 1; transform: none; }
  .assistant__msg, .assistant__chips { animation: rise 0.35s var(--ease) both; }
  .assistant__typing i { animation: assistant-dot 1s ease-in-out infinite; }
  .assistant__typing i:nth-child(2) { animation-delay: 0.15s; }
  .assistant__typing i:nth-child(3) { animation-delay: 0.3s; }
  .assistant__launcher { transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease); }
  .assistant__launcher:hover { transform: translateY(-2px) scale(1.04); }
}
@keyframes assistant-dot { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-0.2rem); } }