/* ===================================================================
   CTH MyDay · Visto, la caricatura del asistente con IA (IA2)
   El visto bueno verde del logo con carita: colores sólidos, sin degradados, como los iconos
   ilustrados del sistema. Vive por defecto abajo a la izquierda del área de trabajo (a la
   derecha están las ventanas del chat, los avisos y el botón de acción del teléfono), sobre un
   disco blanco con aro verde y su nombre, para que no se confunda con la página. La persona lo
   puede arrastrar a otro lugar (js/asistente.js) y la página deja aire abajo para que nada
   quede tapado de forma fija.
   =================================================================== */

/* ---------------- El dibujo ---------------- */

.visto { display: block; overflow: visible; }
.visto .v-sombra { fill: #0b2440; opacity: .12; }
.visto .v-cara { fill: #17a34a; }
.visto .v-borde { fill: #0f7d37; }
.visto .v-brazo { fill: #12913f; }
.visto .v-brillo { fill: #ffffff; opacity: .3; }
.visto .v-mejilla { fill: #ff9db5; }
.visto .v-pupila { fill: #10233d; }
.visto .v-reflejo { fill: #ffffff; }
.visto .v-trazo { fill: none; stroke: #10233d; stroke-width: 2.6; stroke-linecap: round; }
.visto .v-visto { fill: none; stroke: #ffffff; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.visto .v-boca-o { fill: #0b5a28; }
.visto .v-nube { fill: #ffffff; stroke: #b9d3ee; stroke-width: 1; }
.visto .v-punto { fill: #1899ef; }
.visto .v-chispa { fill: #ffc02e; }
.visto .v-z { fill: none; stroke: #1899ef; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Lo que no es del estado actual no se ve. */
.visto .v-ojos-felices, .visto .v-ojos-dormidos, .visto .v-boca-o,
.visto .v-piensa, .visto .v-chispas, .visto .v-zz { display: none; }

/* Las piezas giran o se encogen sobre sí mismas. */
.visto .v-cuerpo, .visto .v-ojos-abiertos, .visto .v-ojo, .visto .v-chispa, .visto .v-z { transform-box: fill-box; transform-origin: center; }
.visto .v-cuerpo { transform-origin: center bottom; }
/* El brazo derecho gira sobre el hombro (en las coordenadas del dibujo). */
.visto .v-brazo-der { transform-box: view-box; transform-origin: 59.5px 43px; }

/* Quieto: respira y parpadea de vez en cuando. */
.visto .v-cuerpo { animation: v-respira 3.6s ease-in-out infinite; }
.visto .v-ojos-abiertos { animation: v-parpadeo 5.2s ease-in-out infinite; }

/* Saludando: levanta la mano y la mueve. */
.visto[data-estado="saludando"] .v-brazo-der { transform: rotate(-140deg); animation: v-saluda 1.6s ease-in-out both; }

/* Pensando: mira hacia arriba, se ladea un poco y le salen tres puntos. */
.visto[data-estado="pensando"] .v-piensa { display: inline; }
.visto[data-estado="pensando"] .v-ojo { transform: translate(1.4px, -1.8px); }
.visto[data-estado="pensando"] .v-cuerpo { animation: v-ladea 2.4s ease-in-out infinite; }
.visto[data-estado="pensando"] .v-punto { animation: v-punto 1.2s ease-in-out infinite; }
.visto[data-estado="pensando"] .v-punto-2 { animation-delay: .2s; }
.visto[data-estado="pensando"] .v-punto-3 { animation-delay: .4s; }

/* Contento: ojos felices, un saltito y dos chispas. */
.visto[data-estado="contento"] .v-ojos-abiertos { display: none; }
.visto[data-estado="contento"] .v-ojos-felices, .visto[data-estado="contento"] .v-chispas { display: inline; }
.visto[data-estado="contento"] .v-cuerpo { animation: v-salta .9s var(--ease-out, ease-out) both; }
.visto[data-estado="contento"] .v-chispa { animation: v-chispa 1.2s ease-in-out both; }
.visto[data-estado="contento"] .v-chispa-2 { animation-delay: .15s; }

/* No puedo (un tope, un apagado): duerme, con sus zetas, y el verde se apaga un poco. */
.visto[data-estado="nopuedo"] .v-ojos-abiertos, .visto[data-estado="nopuedo"] .v-visto { display: none; }
.visto[data-estado="nopuedo"] .v-ojos-dormidos, .visto[data-estado="nopuedo"] .v-boca-o, .visto[data-estado="nopuedo"] .v-zz { display: inline; }
.visto[data-estado="nopuedo"] .v-cara { fill: #74b98c; }
.visto[data-estado="nopuedo"] .v-borde { fill: #4f9268; }
.visto[data-estado="nopuedo"] .v-brazo { fill: #5fa77a; }
.visto[data-estado="nopuedo"] .v-mejilla { fill: #f3b8c7; }
.visto[data-estado="nopuedo"] .v-cuerpo { animation-duration: 5.5s; }
.visto[data-estado="nopuedo"] .v-z { animation: v-zeta 2.8s ease-in-out infinite; }
.visto[data-estado="nopuedo"] .v-z-2 { animation-delay: .7s; }

@keyframes v-respira { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.4px); } }
@keyframes v-parpadeo { 0%, 93%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.12); } }
@keyframes v-saluda {
  0% { transform: rotate(0); }
  22% { transform: rotate(-150deg); }
  38% { transform: rotate(-122deg); }
  54% { transform: rotate(-152deg); }
  70% { transform: rotate(-124deg); }
  86% { transform: rotate(-145deg); }
  100% { transform: rotate(-140deg); }
}
@keyframes v-ladea { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(-3deg); } }
@keyframes v-punto { 0%, 100% { opacity: .25; } 40% { opacity: 1; } }
@keyframes v-salta { 0% { transform: translateY(0); } 30% { transform: translateY(-5px); } 55% { transform: translateY(0); } 72% { transform: translateY(-1.5px); } 100% { transform: translateY(0); } }
@keyframes v-chispa { 0% { transform: scale(0); opacity: 0; } 40% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
@keyframes v-zeta { 0% { transform: translate(0, 0); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(2px, -4px); opacity: 0; } }

/* Con «reducir movimiento», quieto: el saludo deja la mano en alto, sin moverla. */
@media (prefers-reduced-motion: reduce) {
  .visto *, .asis-capa, .asis-capa * { animation: none !important; transition: none !important; }
  .visto[data-estado="nopuedo"] .v-z { opacity: 1; }
}

/* ---------------- Dónde vive ----------------
   Por defecto, abajo a la izquierda del área de trabajo, despegado del menú lateral azul. Si la
   persona lo arrastró, js/asistente.js pone data-posicion y las coordenadas en --asis-x/--asis-y;
   data-lado y data-abre dicen hacia dónde se abren el panel y la burbuja. */

.asis-capa {
  --asis-izq: calc(var(--sidebar-width) + 24px);
  --asis-abajo: 20px;
  --asis-hueco: 14px; /* entre el botón y el panel o la burbuja */
  position: fixed; left: var(--asis-izq); bottom: var(--asis-abajo);
  z-index: 65; /* sobre la página; bajo el chat (70), los diálogos (100) y los avisos */
  pointer-events: none;
}
.app-shell.menu-oculto .asis-capa { --asis-izq: 20px; }
.asis-capa[data-posicion] { left: var(--asis-x); top: var(--asis-y); bottom: auto; }
.asis-capa[data-acomodando] { transition: left 280ms var(--ease-drawer), top 280ms var(--ease-drawer); }
.asis-capa > * { pointer-events: auto; }

/* La página deja aire abajo: lo último (un QR, un botón) siempre puede quedar a la vista. */
.app-shell:has(> .asis-capa) > .main-area > .content { padding-bottom: 7rem; }

/* El botón: un disco blanco con aro verde y sombra, para que se despegue de cualquier fondo, con
   la carita dentro y su nombre en una pastilla. Se arrastra: touch-action none para que el dedo
   lo mueva en vez de desplazar la página. */
.asis-boton {
  position: relative;
  display: grid; place-items: center;
  width: 72px; height: 72px; padding: 0;
  border: 3px solid var(--color-success);
  border-radius: 50%;
  background: var(--color-surface);
  box-shadow: 0 0 0 4px rgba(23, 163, 74, .16), 0 6px 14px rgba(11, 36, 64, .18), 0 14px 30px rgba(11, 36, 64, .16);
  cursor: grab;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform var(--dur-2) var(--ease-out), translate 320ms var(--ease-drawer), opacity var(--dur-2) var(--ease-out), box-shadow var(--dur-2) var(--ease-out);
}
.asis-boton .visto { width: 58px; height: 58px; margin-top: -4px; pointer-events: none; }
.asis-nombre {
  position: absolute; left: 50%; bottom: -11px; translate: -50% 0;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  padding: 1px 9px 2px;
  border-radius: 999px;
  background: var(--color-success); color: #fff;
  border: 2px solid var(--color-surface);
  font-size: .72rem; font-weight: 800; line-height: 1.25; letter-spacing: .01em;
  pointer-events: none;
}
@media (hover: hover) and (pointer: fine) {
  .asis-boton:hover { transform: translateY(-2px); box-shadow: 0 0 0 5px rgba(23, 163, 74, .22), 0 8px 18px rgba(11, 36, 64, .2), 0 18px 36px rgba(11, 36, 64, .18); }
}
.asis-boton:active { transform: scale(.95); }
.asis-boton:focus-visible { outline: 3px solid var(--color-primary-ring); outline-offset: 4px; }
.asis-boton.asis-dormido { border-color: #74b98c; }
.asis-boton.asis-dormido .asis-nombre { background: #5fa77a; }

/* Mientras se arrastra: un poco más grande, más sombra y sin transiciones que lo retrasen. */
.asis-capa[data-arrastrando] .asis-boton {
  cursor: grabbing; transform: scale(1.06); transition: none;
  box-shadow: 0 0 0 6px rgba(23, 163, 74, .22), 0 14px 28px rgba(11, 36, 64, .26), 0 24px 48px rgba(11, 36, 64, .2);
}
.asis-capa[data-arrastrando] .asis-burbuja { display: none; }

/* ---------------- La burbuja: pequeña, se va sola ---------------- */

.asis-burbuja {
  position: absolute; left: 6px; bottom: calc(100% + var(--asis-hueco) + 4px);
  width: max-content; max-width: min(280px, calc(100vw - 32px));
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 18px 18px 18px 6px;
  box-shadow: var(--elev-3);
  padding: .8rem .9rem .55rem;
  font-size: .92rem; line-height: 1.4;
  animation: asis-burbuja-llega 260ms var(--ease-out) both;
}
.asis-burbuja::after {
  content: ""; position: absolute; left: 18px; bottom: -8px;
  width: 14px; height: 14px; background: var(--color-surface);
  border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  transform: rotate(45deg); border-bottom-right-radius: 3px;
}
/* A la derecha de la pantalla, la burbuja crece hacia la izquierda; arriba, se abre hacia abajo. */
.asis-capa[data-lado="der"] .asis-burbuja { left: auto; right: 6px; border-radius: 18px 18px 6px 18px; }
.asis-capa[data-lado="der"] .asis-burbuja::after { left: auto; right: 18px; }
.asis-capa[data-abre="abajo"] .asis-burbuja { bottom: auto; top: calc(100% + var(--asis-hueco) + 4px); }
.asis-capa[data-abre="abajo"] .asis-burbuja::after { bottom: auto; top: -8px; transform: rotate(225deg); }
.asis-burbuja p { margin: 0 0 .6rem; font-weight: 600; }
.asis-burbuja-botones { display: flex; flex-wrap: wrap; gap: .4rem; }
.asis-no-ofrecer {
  display: block; margin-top: .45rem; padding: .2rem 0;
  background: none; border: none; font: inherit; font-size: .8rem;
  color: var(--color-text-soft); text-decoration: underline; cursor: pointer;
}
@keyframes asis-burbuja-llega { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------------- El panel de conversación ---------------- */

.asis-velo { display: none; }

.asis-panel {
  position: absolute; left: 0; bottom: calc(100% + var(--asis-hueco));
  width: 372px; max-width: calc(100vw - 32px);
  height: min(560px, calc(100vh - 120px), var(--asis-espacio, 100vh));
  display: flex; flex-direction: column;
  background: var(--color-surface); color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 22px;
  box-shadow: var(--elev-4);
  overflow: hidden;
  transform-origin: bottom left;
  animation: asis-panel-llega 240ms var(--ease-out) both;
}
@keyframes asis-panel-llega { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }
/* El panel se abre hacia el lado que tiene sitio (solo en escritorio: en el teléfono es una hoja). */
@media (min-width: 901px) {
  .asis-capa[data-lado="der"] .asis-panel { left: auto; right: 0; transform-origin: bottom right; }
  .asis-capa[data-abre="abajo"] .asis-panel { bottom: auto; top: calc(100% + var(--asis-hueco)); transform-origin: top left; }
  .asis-capa[data-abre="abajo"][data-lado="der"] .asis-panel { transform-origin: top right; }
}

.asis-cabecera {
  display: flex; align-items: center; gap: .65rem;
  padding: .7rem .75rem .7rem .9rem;
  background: var(--color-success-bg);
  border-bottom: 1px solid var(--color-border);
}
.asis-quien { flex: 1; min-width: 0; }
.asis-quien h2 { margin: 0; font-size: 1.1rem; font-weight: 800; line-height: 1.2; }
.asis-quien small { color: var(--color-text-muted); font-size: .8rem; }
.asis-cerrar { flex: none; }

.asis-conversacion {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column-reverse; /* siempre abajo, en lo último */
  padding: .9rem .9rem .4rem;
  background: var(--color-surface-2);
  overscroll-behavior: contain;
}
.asis-mensajes { display: flex; flex-direction: column; gap: .55rem; }

.asis-mensaje {
  max-width: 88%;
  padding: .6rem .8rem;
  border-radius: 16px;
  font-size: .92rem; line-height: 1.45;
  overflow-wrap: anywhere;
}
.asis-mensaje p { margin: 0; }
.asis-mensaje p + p { margin-top: .35rem; }
.asis-suyo { align-self: flex-start; background: var(--color-surface); border: 1px solid var(--color-border); border-bottom-left-radius: 6px; }
.asis-mio { align-self: flex-end; background: var(--color-primary); color: var(--color-sobre-relleno); border-bottom-right-radius: 6px; }
.asis-aviso { background: var(--nota); border-color: var(--nota-borde); color: var(--color-text); }
.asis-vineta { position: relative; padding-left: 1.05rem; }
.asis-vineta::before { content: "•"; position: absolute; left: .2rem; font-weight: 800; color: var(--color-success-tinta); }
.asis-vineta[data-numero]::before { content: attr(data-numero) "."; left: 0; font-size: .85em; }
.asis-gratis { display: block; margin-top: .35rem; font-size: .74rem; color: var(--color-text-soft); }

/* La guía de la pantalla, la misma de la página, más compacta. */
.asis-guia-titulo { font-weight: 700; margin-bottom: .35rem !important; }
.asis-guia { font-size: .88rem; }
.asis-guia p { margin: 0 0 .35rem; }
.asis-guia ul, .asis-guia ol { margin: .2rem 0 0; padding-left: 1.1rem; }
.asis-guia li { margin: .2rem 0; }
.asis-enlace {
  display: inline-block; margin-top: .4rem; padding: 0;
  background: none; border: none; font: inherit; font-size: .84rem; font-weight: 600;
  color: var(--color-primary); text-decoration: underline; cursor: pointer;
}

/* «Está pensando»: tres puntos. */
.asis-escribiendo { display: inline-flex; gap: 4px; padding: .75rem .9rem; }
.asis-escribiendo span { width: 7px; height: 7px; border-radius: 50%; background: var(--color-text-soft); animation: v-punto 1.2s ease-in-out infinite; }
.asis-escribiendo span:nth-child(2) { animation-delay: .2s; }
.asis-escribiendo span:nth-child(3) { animation-delay: .4s; }

.asis-sugerencias { display: flex; flex-wrap: wrap; gap: .4rem; padding: .55rem .9rem 0; background: var(--color-surface); }
.asis-sugerencias .chip { cursor: pointer; border: 1px solid var(--color-border); background: var(--color-surface-2); font: inherit; font-size: .84rem; padding: .3rem .7rem; }

.asis-pie { display: flex; gap: .45rem; padding: .6rem .9rem .2rem; background: var(--color-surface); }
.asis-pie .form-control { flex: 1; min-width: 0; }
.asis-enviar { flex: none; min-width: 44px; padding: 0 .8rem; }
.asis-cuota, .asis-privacidad { margin: 0; padding: .15rem .9rem 0; font-size: .78rem; color: var(--color-text-soft); background: var(--color-surface); }
.asis-privacidad { display: flex; align-items: center; gap: .3rem; padding-bottom: .7rem; }
.asis-acciones {
  display: flex; flex-wrap: wrap; gap: .2rem 1rem; justify-content: space-between;
  margin-top: -.35rem; padding: 0 .9rem .7rem; background: var(--color-surface);
}
.asis-acciones .asis-enlace { margin-top: 0; font-size: .8rem; color: var(--color-text-soft); }
.asis-acciones .asis-enlace:disabled { opacity: .5; cursor: default; }

/* El nombre del asistente en Configuración de la plataforma. */
.ia-nombre { display: flex; gap: 1rem; align-items: flex-start; padding: .2rem 0 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
.ia-nombre .visto { flex: none; }
.ia-nombre-campos { flex: 1; min-width: 0; }
.ia-nombre-campos h4 { margin: 0 0 .2rem; }
.ia-nombre-fila { flex-wrap: wrap; margin: .3rem 0 .35rem; }
.ia-nombre-fila .form-control { flex: 1 1 200px; max-width: 280px; }

/* ---------------- Las ayudas de cada pantalla (IA3) ----------------
   Un botón «✨» verde claro (el verde de Visto, sólido) y la propuesta en una tarjeta con borde
   verde: se distingue de lo que escribió una persona, y siempre dice que hay que revisarla. */

.ayuda-ia { margin: .5rem 0 .75rem; }
.ayuda-ia-fila { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; }
/* Va sobre btn-secondary (no sobre el botón principal azul): así el verde no compite con los
   botones de caramelo de la pantalla y se sabe que es una ayuda, no la acción principal. */
.btn-secondary.ayuda-ia-boton {
  background: var(--color-success-bg); color: var(--color-success-tinta);
  border: 1px solid var(--color-success); font-weight: 700;
  box-shadow: 0 2px 0 var(--color-success);
}
.btn-secondary.ayuda-ia-boton:hover:not(:disabled) { background: var(--color-success); color: #fff; }
.btn-secondary.ayuda-ia-boton:disabled { opacity: .6; cursor: not-allowed; box-shadow: none; }
.ayuda-ia-nota { margin: 0; font-size: .8rem; color: var(--color-text-soft); }
.ayuda-ia-pensando { display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; color: var(--color-text-muted); }
.ayuda-ia-aviso {
  margin: .45rem 0 0; padding: .45rem .7rem; font-size: .86rem;
  background: var(--nota); border: 1px solid var(--nota-borde); border-radius: var(--radius-sm, 8px); color: var(--color-text);
}
.ayuda-ia-hecho { margin: .4rem 0 0; font-size: .86rem; color: var(--color-success-tinta); font-weight: 600; }

.ayuda-ia-propuesta {
  border: 2px solid var(--color-success); border-radius: var(--radius, 14px);
  background: var(--color-surface); padding: .7rem .85rem .6rem;
}
.ayuda-ia-cabecera { display: flex; align-items: center; gap: .55rem; margin-bottom: .45rem; }
.ayuda-ia-cabecera > div { display: flex; flex-direction: column; line-height: 1.25; }
.ayuda-ia-cabecera small { color: var(--color-text-soft); font-size: .78rem; }
.ayuda-ia-texto { font-size: .92rem; overflow-wrap: anywhere; }
.ayuda-ia-texto p { margin: 0 0 .35rem; }
.ayuda-ia-acciones { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .55rem; }
.ayuda-ia-propuesta .ayuda-ia-nota { margin-top: .4rem; }

/* La clasificación propuesta: dos datos con su porqué. */
.ayuda-ia-datos { display: grid; grid-template-columns: max-content 1fr; gap: .2rem .7rem; margin: .45rem 0 .2rem; font-size: .88rem; }
.ayuda-ia-datos dt { color: var(--color-text-soft); font-weight: 600; }
.ayuda-ia-datos dd { margin: 0; }

/* Lo que la persona le indica al borrador. */
.ayuda-ia-indicaciones { margin-top: .45rem; }
.ayuda-ia-indicaciones textarea { font-size: .9rem; }

/* ---------------- El teléfono ---------------- */

@media (max-width: 900px) {
  /* Sobre la barra de pestañas, pegado al borde izquierdo y un poco más chico: a la derecha va el
     botón de acción de la pantalla. Al bajar por la página se esconde hacia su borde, como ese
     botón. Arrastrado, js/asistente.js lo deja siempre por encima de las pestañas. */
  .asis-capa { --asis-izq: 12px; --asis-abajo: calc(var(--nav-inferior) + env(safe-area-inset-bottom) + 16px); --asis-hueco: 12px; }
  .app-shell.menu-oculto .asis-capa { --asis-izq: 12px; }
  .app-shell:has(> .asis-capa) > .main-area > .content { padding-bottom: calc(var(--nav-inferior) + 1.5rem + env(safe-area-inset-bottom) + 72px); }
  .asis-boton { width: 60px; height: 60px; border-width: 2.5px; }
  .asis-boton .visto { width: 48px; height: 48px; margin-top: -3px; }
  .asis-nombre { font-size: .66rem; bottom: -10px; padding: 0 7px 1px; }
  .bajando .asis-capa:not(.asis-con-panel) .asis-boton { translate: calc(-100% - 20px) 0; opacity: 0; }
  .bajando .asis-capa[data-lado="der"]:not(.asis-con-panel) .asis-boton { translate: calc(100% + 20px) 0; }
  .bajando .asis-capa[data-arrastrando] .asis-boton { translate: none; opacity: 1; }

  /* La conversación es una hoja que sube desde abajo, como los demás paneles del teléfono. */
  .asis-con-panel { z-index: 140; }
  .asis-velo { display: block; position: fixed; inset: 0; background: var(--velo, rgba(10, 25, 45, .35)); animation: desvanecer var(--dur-2) var(--ease-out) both; }
  .asis-panel {
    position: fixed; left: 0; right: 0; bottom: 0; top: auto;
    width: auto; max-width: none;
    height: min(78dvh, 640px);
    border: none; border-radius: 26px 26px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: var(--sombra-hoja, var(--elev-4));
    transform-origin: bottom center;
    animation: hoja-sube var(--dur-hoja, 320ms) var(--ease-drawer) both;
  }
  .asis-con-panel .asis-boton { opacity: 0; pointer-events: none; }
  .asis-pie .form-control { font-size: 16px; } /* iPhone no hace zoom al escribir */
  .ayuda-ia-indicaciones textarea { font-size: 16px; }
}