/* Timi: estilos del asistente-chat. COMPARTIDO entre el panel (panel.css)
   y la tienda publica (publico.css): las dos plantillas base enlazan esta
   hoja. Usa solo var() (--borde, --pill, --rojo, --azul-*, --texto-*...) que
   ambas hojas definen, asi sigue el tema y el modo oscuro en las dos. */

/* ============================================ Timi (asistente-guia)
   Un boton flotante abajo a la derecha abre un panel que guia por el sistema.
   Todo con var(): sigue el tema y el modo oscuro. El zoom 0.8 del body ya lo
   achica en la misma proporcion que el resto. */
.timi {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}

/* el robot TIMI, RECORTADO (sin fondo). En reposo mira despacio a los costados
   (hoja de giro); al responder "habla" (hoja de gestos: base <-> hablando). */
/* Mavis va dentro de un CIRCULO de fondo (disco) en todos lados: boton flotante,
   cabecera y burbujas. El sprite tiene el fondo transparente, asi que el disco se
   ve detras de ella; el circulo recorta solo las esquinas (que estan vacias). */
.timi-avatar {
  display: grid; place-items: end center; flex: 0 0 auto;
  aspect-ratio: 1 / 1; height: 38px; overflow: hidden;
  border-radius: 50%;
  background: var(--azul-suave);                           /* respaldo navegadores viejos */
  background: color-mix(in srgb, var(--azul) 20%, white);  /* disco CLARO siempre (de dia y de noche): Mavis es navy y asi resalta */
  box-shadow: inset 0 0 0 1px var(--borde);
}
.timi-avatar.chica { height: 34px; }
.timi-msg .timi-avatar.chica { height: 30px; }
.timi-avatar .timi-robot { height: 92%; }   /* un margencito para que el circulo la enmarque */
.timi-robot {
  position: relative; display: block; height: 100%;
  aspect-ratio: 282 / 308;            /* la celda del sprite de Mavis */
  transform-origin: bottom center;    /* rebota parada, como apoyada en el piso */
}
/* Dos capas apiladas que se FUNDEN (crossfade): el JS le pone a cada una un
   fotograma y cruza la opacidad, asi pasar de una cara/boca a otra es suave y
   no un salto seco. Idle: caras calladas lentas; hablando: bocas mas agiles. */
.timi-capa {
  position: absolute; inset: 0; opacity: 0; will-change: opacity;
  background-repeat: no-repeat; background-position: 50% 100%;
}
@keyframes timi-mirar { from { background-position-x: 0%; } to { background-position-x: 100%; } }
@keyframes timi-hablar { from { background-position-x: 0%; } to { background-position-x: 100%; } }
/* el rebote/salto que acompaña al hablar: suaviza el cambio de fotograma */
@keyframes timi-bob {
  0%, 100% { transform: translateY(0) scale(1); }
  45% { transform: translateY(-9%) scale(1.03); }
}
/* el rebote de bienvenida cuando aparece el robot */
@keyframes timi-aparece {
  0% { transform: scale(.5); opacity: 0; }
  55% { transform: scale(1.12); opacity: 1; }
  78% { transform: scale(.95); }
  100% { transform: scale(1); }
}
/* el ciclo de caras (idle) y el cambio de bocas (hablar) los maneja el JS por
   crossfade; aca queda solo el rebote de bienvenida y el balanceo al hablar */
.timi-boton.entrando { animation: timi-aparece .55s cubic-bezier(.2, .9, .25, 1.2) 1; }
/* al RESPONDER: un balanceo suave que acompaña el movimiento de la boca */
.timi-robot.hablando { animation: timi-bob .5s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .timi-robot { animation: none !important; } }

/* el boton flotante: Mavis FLOTANDO, sin fondo ni caja (solo una sombra suave) */
.timi-boton {
  position: relative;
  display: grid; place-items: center;
  padding: 0; border: 0; cursor: grab; background: none;
  filter: drop-shadow(0 5px 12px rgba(10, 37, 64, .35));
  transition: transform .16s ease, filter .16s ease;
  touch-action: none;   /* permite arrastrarla con el dedo sin scrollear */
}
.timi-boton:active { cursor: grabbing; }
.timi-boton .timi-avatar { height: 64px; }
.timi-boton:hover {
  transform: translateY(-2px) scale(1.05);
  filter: drop-shadow(0 8px 16px rgba(10, 37, 64, .4));
}
.timi-boton:focus-visible { outline: 3px solid var(--azul); outline-offset: 4px; border-radius: 12px; }
/* punto ROJO en el boton cuando la tienda esta en pausa (avisa aunque este cerrado) */
.timi[data-pausada="true"] .timi-boton::before {
  content: ""; position: absolute; top: -3px; right: -3px; z-index: 3;
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--rojo); border: 2px solid var(--blanco);
}
/* aviso ROJO adentro del panel: tienda en pausa */
.timi-alerta {
  margin: .6rem .8rem 0; padding: .6rem .75rem;
  background: var(--rojo-fondo); border: 1px solid var(--rojo);
  border-radius: var(--radio-s);
}
.timi-alerta > b { color: var(--rojo); font-size: .9rem; }
.timi-alerta p { margin: .35rem 0 0; font-size: .83rem; color: var(--texto-2); }
.timi-alerta p b { color: var(--texto-fuerte); }
.timi-alerta-tip { font-size: .8rem; }
.timi-alerta-btn {
  display: inline-block; margin-top: .55rem; padding: .4rem .85rem;
  background: var(--rojo); color: var(--sobre-oferta); border-radius: var(--pill);
  font-size: .82rem; font-weight: 700; text-decoration: none;
}
.timi-alerta-btn:hover { filter: brightness(.94); color: var(--sobre-oferta); text-decoration: none; }
/* un resplandor suave que late detras del robot al aparecer */
.timi-boton::after {
  content: ""; position: absolute; inset: -6px; z-index: -1; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--acento-rgb), .22), transparent 72%);
  opacity: 0; pointer-events: none;
}
.timi[data-abierto="false"] .timi-boton::after { animation: timi-late 2.6s ease-out 2; }
@keyframes timi-late {
  0% { opacity: .9; transform: scale(.75); }
  70% { opacity: 0; transform: scale(1.5); }
  100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .timi-boton::after { animation: none; }
  .timi-boton { transition: none; }
}

/* el globo de saludo de la primera vez */
.timi-globo {
  position: relative; max-width: 240px;
  background: var(--blanco); color: var(--texto);
  border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra-2); padding: .8rem .9rem; font-size: .88rem;
}
.timi-globo p { margin: 0 0 .6rem; }
.timi-globo::after {          /* la puntita que apunta al boton */
  content: ""; position: absolute; right: 26px; bottom: -7px;
  width: 12px; height: 12px; background: var(--blanco);
  border-right: 1px solid var(--borde); border-bottom: 1px solid var(--borde);
  transform: rotate(45deg);
}
.timi-globo-x {
  position: absolute; top: 4px; right: 6px; border: 0; background: none;
  cursor: pointer; font-size: 1.1rem; line-height: 1; color: var(--texto-3);
}

/* el panel */
.timi-panel {
  position: relative;
  width: 370px; max-width: calc(100vw - 20px);
  height: min(30rem, 68vh); max-height: none; min-height: 16rem;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--blanco); border: 1px solid var(--borde);
  border-radius: var(--radio); box-shadow: var(--sombra-2);
  container: timipanel / inline-size;   /* para acomodar la cabecera segun el ANCHO del panel */
}
/* la esquina para estirar el chat: arriba-izquierda, que es hacia donde crece
   (esta anclado abajo-derecha). Se puede a lo ANCHO y a lo ALTO. */
.timi-resize {
  position: absolute; top: 0; left: 0; width: 24px; height: 24px;
  cursor: nwse-resize; z-index: 5; touch-action: none;
}
.timi-resize::before {
  content: ""; position: absolute; top: 6px; left: 6px; width: 9px; height: 9px;
  border-top: 2px solid var(--texto-3); border-left: 2px solid var(--texto-3);
  border-top-left-radius: 3px; opacity: .6;
}
.timi-resize:hover::before { opacity: 1; border-color: var(--azul); }

/* un icono de la cabecera puede quedar "activo" (ej. el modo dividido) */
.timi-icono.activo { color: var(--azul); background: var(--azul-suave); }

/* -------- MODO DIVIDIR PANTALLA: Timi fijo a la derecha, alto completo -------- */
.timi-fijado .timi-boton, .timi-fijado .timi-globo { display: none; }
.timi-fijado .timi-panel {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: var(--timi-dock, 360px); height: auto;
  max-width: 92vw; max-height: none; min-height: 0; border-radius: 0;
  box-shadow: -12px 0 34px rgba(10, 37, 64, .16);
}
/* en modo dividido el tirador es una franja en el borde IZQUIERDO (mueve el ancho) */
.timi-fijado .timi-resize {
  top: 0; left: 0; width: 11px; height: 100%; cursor: ew-resize;
}
.timi-fijado .timi-resize::before {
  top: 50%; left: 3px; width: 4px; height: 28px; transform: translateY(-50%);
  border: 0; border-left: 2px solid var(--texto-3); border-right: 2px solid var(--texto-3);
  border-radius: 0;
}
.timi-cab {
  display: flex; align-items: center; gap: .35rem; padding: .7rem .8rem;
  border-bottom: 1px solid var(--borde); background: var(--superficie-2);
  cursor: move; touch-action: none;   /* se arrastra para mover todo el widget */
}
.timi-cab .timi-icono { cursor: pointer; }

/* elegir la voz y el tono: ventanita modal (top layer, no la recorta el panel) */
.timi-vozdlg {
  border: 1px solid var(--borde-2); border-radius: var(--radio); padding: 0;
  width: min(280px, 92vw); background: var(--blanco); color: var(--texto);
  box-shadow: var(--sombra-2);
}
.timi-vozdlg::backdrop { background: rgba(10, 37, 64, .35); }
.timi-vozdlg-cab {
  display: flex; align-items: center; justify-content: space-between;
  padding: .55rem .5rem .55rem .85rem; border-bottom: 1px solid var(--borde);
}
.timi-vozdlg-cab b { color: var(--texto-fuerte); font-size: .95rem; }
.timi-vozmenu { padding: .7rem .85rem; max-height: 62vh; overflow-y: auto; }
.timi-vm-tit {
  color: var(--texto-3); font-size: .66rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; margin: .1rem 0 .35rem;
}
.timi-vm-fila { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: .5rem; }
.timi-vm-voces { display: flex; flex-direction: column; gap: .3rem; }
.timi-vm-voz {
  text-align: left; font: inherit; font-size: .8rem; padding: .35rem .55rem;
  border: 1px solid var(--borde-2); background: var(--blanco); color: var(--texto);
  border-radius: 8px; cursor: pointer;
}
.timi-vm-voz:hover { background: var(--superficie-2); }
.timi-chip.sel, .timi-vm-voz.sel {
  background: var(--azul); color: var(--sobre-acento); border-color: var(--azul);
}
.timi-vm-nota { color: var(--texto-2); font-size: .78rem; margin: 0; }
.timi-titulo { flex: 1; min-width: 0; line-height: 1.2; margin-right: .2rem; }
.timi-titulo b { color: var(--texto-fuerte); font-size: .98rem; }
.timi-titulo small { display: block; color: var(--texto-2); font-size: .76rem; }
/* caja de los iconos de la cabecera: en compu es "transparente" (display:contents,
   los iconos se alinean como hijos directos de .timi-cab, igual que antes); en
   celular baja a su propia fila para que el nombre no quede aplastado. */
.timi-cab-tools { display: contents; }
/* cuando el PANEL es angosto (el globo flotante mide ~370px en cualquier pantalla,
   o el panel acoplado si queda chico) la cabecera pasa a 2 FILAS: el nombre + su
   bajada arriba a todo el ancho, y los iconos en su propia fila abajo. Asi el texto
   nunca queda aplastado por los botones. Mide el PANEL (container query), no la
   ventana, por eso arregla igual el celular y el globo del escritorio. */
@container timipanel (max-width: 400px) {
  .timi-cab { flex-wrap: wrap; gap: .1rem .4rem; }
  .timi-titulo { flex: 1 1 auto; margin-right: 0; }
  .timi-cab-tools {
    display: flex; flex: 1 0 100%; order: 3; justify-content: flex-end;
    gap: .25rem; margin-top: .4rem; padding-top: .35rem;
    border-top: 1px solid var(--borde);
  }
}
/* los botones de la cabecera (voz, vaciar, cerrar) */
.timi-icono {
  flex: 0 0 auto; display: grid; place-items: center; width: 30px; height: 30px;
  border: 0; background: none; cursor: pointer; color: var(--texto-3);
  border-radius: 8px; padding: 0;
}
.timi-icono svg { width: 17px; height: 17px; }
.timi-icono:hover { background: var(--fondo); color: var(--texto-fuerte); }
.timi-audio { color: var(--azul); }
.timi-audio.apagado { color: var(--texto-3); }

/* --- accesos directos (arriba del chat) --- */
.timi-accesos { padding: .55rem .8rem; border-bottom: 1px solid var(--borde); }
.timi-accesos-cab {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .4rem;
}
.timi-accesos-cuerpo { display: flex; flex-direction: column; gap: .5rem; }
.timi-accesos.plegado .timi-accesos-cuerpo { display: none; }
.timi-accesos.plegado { padding-bottom: .5rem; }
.timi-accesos.plegado .timi-accesos-cab { margin-bottom: 0; }

/* los encabezados que se pliegan (accesos y sugerencias) */
.timi-sec-tog {
  display: inline-flex; align-items: center; gap: .4rem;
  border: 0; background: none; cursor: pointer; padding: 0;
  color: var(--texto-3); font: inherit; font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em;
}
.timi-sec-tog:hover { color: var(--texto-fuerte); }
.timi-chevron {
  width: 7px; height: 7px; border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .16s ease; margin-bottom: 3px;
}
.plegado .timi-chevron { transform: rotate(-45deg); margin: 3px 0 0; }
@media (prefers-reduced-motion: reduce) { .timi-chevron { transition: none; } }

.timi-sug-caja { border-top: 1px solid var(--borde); }
.timi-sug-cab { padding: .5rem .8rem .15rem; }
.timi-sug-caja.plegado .timi-sugerencias { display: none; }
.timi-sug-caja.plegado .timi-sug-cab { padding-bottom: .5rem; }
.timi-add {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0;
  border: 1px solid var(--azul-borde); background: var(--azul-suave);
  color: var(--azul-hover); border-radius: 7px; cursor: pointer;
}
.timi-add svg { width: 14px; height: 14px; }
.timi-add:hover { background: var(--azul); color: var(--sobre-acento); border-color: var(--azul); }
.timi-accesos-lista, .timi-picker { display: flex; flex-wrap: wrap; gap: .4rem; }
.timi-picker { margin-top: .5rem; }
.timi-accesos-vacio { color: var(--texto-3); font-size: .76rem; }
.timi-acceso {
  display: inline-flex; align-items: center; gap: .15rem;
  background: var(--blanco); border: 1px solid var(--borde-2); border-radius: var(--pill);
  padding: .1rem .2rem .1rem .1rem;
}
.timi-acceso-ir {
  color: var(--texto-fuerte); font-size: .78rem; font-weight: 600;
  padding: .2rem .5rem; border-radius: var(--pill); text-decoration: none;
}
.timi-acceso-ir:hover { background: var(--azul-suave); color: var(--azul-hover); text-decoration: none; }
.timi-acceso-btn {
  display: grid; place-items: center; width: 20px; height: 20px; padding: 0;
  border: 0; background: none; cursor: pointer; color: var(--texto-3); border-radius: 6px;
}
.timi-acceso-btn svg { width: 12px; height: 12px; }
.timi-acceso-btn:hover { background: var(--fondo); color: var(--texto-fuerte); }
.timi-acceso-input {
  font: inherit; font-size: .78rem; font-weight: 600; width: 8.5rem;
  padding: .2rem .5rem; border: 1px solid var(--azul); border-radius: var(--pill);
  background: var(--blanco); color: var(--texto);
}

/* --- botones de opcion dentro de una respuesta --- */
.timi-opciones { display: flex; flex-direction: column; gap: .4rem; margin-top: .6rem; }
.timi-opcion {
  text-align: left; font: inherit; font-size: .84rem; font-weight: 600;
  padding: .5rem .7rem; border: 1px solid var(--azul-borde);
  background: var(--blanco); color: var(--azul-hover);
  border-radius: var(--radio-s); cursor: pointer;
}
.timi-opcion:hover { background: var(--azul); color: var(--sobre-acento); border-color: var(--azul); }

/* el hilo del chat */
.timi-chat {
  flex: 1; min-height: 96px; overflow-y: auto; padding: .9rem;
  display: flex; flex-direction: column; gap: .7rem; background: var(--blanco);
}
.timi-msg { display: flex; gap: .5rem; align-items: flex-end; max-width: 100%; }
.timi-msg.de-vos { justify-content: flex-end; }
.timi-msg .timi-avatar.chica { width: 30px; height: 30px; flex: 0 0 auto; }
.timi-burbuja {
  max-width: 82%; min-width: 0; padding: .6rem .8rem; border-radius: 14px;
  font-size: .92rem; line-height: 1.5;
  /* que una palabra larga (un correo, un enlace) CORTE y no se desborde,
     sobre todo en el celular donde la burbuja es angosta */
  overflow-wrap: anywhere; word-break: break-word;
}
.timi-msg.de-timi .timi-burbuja {
  background: var(--superficie-2); color: var(--texto);
  border: 1px solid var(--borde); border-bottom-left-radius: 5px;
}
.timi-msg.de-timi .timi-burbuja b { color: var(--texto-fuerte); }
.timi-msg.de-vos .timi-burbuja {
  background: var(--azul); color: var(--sobre-acento); border-bottom-right-radius: 5px;
}
/* el boton "Ir a ..." que a veces trae la respuesta: SIEMPRE en su propia
   linea, separado del texto (display:flex = ocupa renglon; fit-content = no
   se estira todo el ancho). Antes era inline-flex y quedaba pegado al punto. */
.timi-ir {
  display: flex; width: fit-content; max-width: 100%;
  align-items: center; gap: .35rem; margin-top: .7rem;
  padding: .4rem .75rem; background: var(--azul); color: var(--sobre-acento);
  border-radius: var(--pill); font-size: .8rem; font-weight: 600; text-decoration: none;
}
.timi-ir:hover { background: var(--azul-hover); color: var(--sobre-acento); text-decoration: none; }
/* "escribiendo..." */
.timi-puntos { display: inline-flex; gap: 4px; padding: .15rem 0; }
.timi-puntos i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--texto-3);
  display: inline-block; animation: timi-puntico 1s infinite ease-in-out;
}
.timi-puntos i:nth-child(2) { animation-delay: .15s; }
.timi-puntos i:nth-child(3) { animation-delay: .3s; }
@keyframes timi-puntico {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40% { transform: translateY(-4px); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .timi-puntos i { animation: none; } }

/* las preguntas sugeridas (chips), AGRUPADAS por tema para que se lea ordenado
   (antes era una sola nube de chips "todo unido"). Ahora es una pila vertical:
   subtitulo de grupo + su fila de chips. */
.timi-sugerencias {
  display: flex; flex-direction: column; gap: .1rem;
  padding: .25rem 0 .6rem; max-height: 15rem; overflow-y: auto;
}
.timi-sug-grupo {
  font-size: .62rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--texto-3);
  padding: .5rem .85rem .25rem;
}
.timi-sug-grupo:first-child { padding-top: .15rem; }
.timi-sug-fila { display: flex; flex-wrap: wrap; gap: .35rem; padding: 0 .85rem .1rem; }
.timi-chip-volver {
  background: var(--superficie-2); color: var(--texto-2); border-color: var(--borde-2);
}
.timi-chip-volver:hover {
  background: var(--fondo); color: var(--texto-fuerte); border-color: var(--borde-2);
}
.timi-chip {
  border: 1px solid var(--azul-borde); background: var(--azul-suave);
  color: var(--azul-hover); font: inherit; font-size: .76rem; font-weight: 600;
  padding: .3rem .6rem; border-radius: var(--pill); cursor: pointer;
  max-width: 100%; overflow-wrap: anywhere;   /* que un nombre largo no desborde */
}
.timi-chip:hover { background: var(--azul); color: var(--sobre-acento); border-color: var(--azul); }

/* la barra para escribir */
.timi-entrada {
  display: flex; gap: .5rem; padding: .6rem .8rem;
  border-top: 1px solid var(--borde); background: var(--superficie-2);
}
.timi-input {
  flex: 1; min-width: 0; padding: .55rem .7rem; font: inherit; font-size: .9rem;
  border: 1px solid var(--borde-2); border-radius: var(--pill);
  background: var(--blanco); color: var(--texto);
}
.timi-input:focus {
  outline: none; border-color: var(--azul);
  box-shadow: 0 0 0 3px rgba(var(--acento-rgb), .14);
}
.timi-enviar {
  flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
  border: 0; border-radius: 50%; background: var(--azul); color: var(--sobre-acento);
  cursor: pointer;
}
.timi-enviar:hover { background: var(--azul-hover); }

@media (max-width: 560px) {
  /* En el celular Timi sigue siendo una ventana MOVIBLE (anclada abajo-derecha,
     se arrastra por la cabecera), pero mas alta y comoda para el dedo. */
  .timi { right: 10px; bottom: 10px; }
  .timi-panel {
    max-width: calc(100vw - 20px);
    height: min(78vh, 640px);   /* casi pantalla completa: mas mensajes a la vista */
  }
  /* dividir la pantalla y estirar arrastrando NO tienen sentido en un telefono:
     se ocultan para dar aire a la cabecera y evitar toques por error */
  .timi-dock, .timi-resize { display: none; }
  /* con el panel abierto el robot flotante estorba y se pisa con el panel: se
     oculta y la cabecera queda como asa para mover y cerrar */
  .timi[data-abierto="true"] .timi-boton { display: none; }
  /* en celular: nombre un poco mas grande e iconos mas grandes para el dedo.
     El acomodo en 2 filas lo hace la "container query" de abajo (mide el panel). */
  .timi-cab { padding: .6rem .65rem; }
  .timi-titulo b { font-size: 1rem; }
  .timi-titulo small { font-size: .78rem; }
  .timi-icono { width: 34px; height: 34px; }
  .timi-globo { max-width: calc(100vw - 84px); }
}