/* =============================================================================
   KortiQ personal — mismo lenguaje que el sitio y el panel (Inter 800, pastillas, Q chispa),
   en versión de noche: tinta violácea, acento violeta y la chispa verde agua.
   La conversación es el centro; a la derecha, lo que hay para confirmar,
   la memoria y las conexiones.
   ============================================================================= */

/* Paleta de noche: KortiQ personal es tu espacio, no el panel de trabajo. Misma estructura y
   tipografía que el resto de KortiQ; base tinta violácea, acento violeta y la chispa verde agua. */
:root {
  color-scheme: dark;
  --kq-azul: #7C5CFF; --kq-azul-hover: #8F73FF; --kq-azul-suave: rgb(124 92 255 / .16); --kq-azul-borde: rgb(124 92 255 / .5);
  --kq-sinapsis: #2EE6C5; --kq-sinapsis-suave: rgb(46 230 197 / .12);
  --kq-tinta: #F4F1FF; --kq-texto: #DAD6EE; --kq-gris: #A6A1C4; --kq-gris-claro: #7A7598;
  --kq-borde: rgb(255 255 255 / .08); --kq-borde-fuerte: rgb(255 255 255 / .16);
  --kq-fondo: #1A1731; --kq-fondo-suave: #100E1E; --kq-fondo-hundido: #26224A;
  --kq-ok: #3DDC97; --kq-ok-suave: rgb(61 220 151 / .14);
  --kq-alerta: #FFC266; --kq-alerta-suave: rgb(255 194 102 / .14);
  --kq-error: #FF7A88; --kq-error-suave: rgb(255 122 136 / .14);
  --kq-prisma: linear-gradient(135deg, #3B2AA8 0%, #7C5CFF 55%, #2EE6C5 100%);
  --kq-sombra: 0 16px 40px -20px rgb(0 0 0 / .6);
  --kq-sombra-l: 0 30px 80px -20px rgb(0 0 0 / .7);
  --per-noche: radial-gradient(120% 80% at 85% 0%, rgb(124 92 255 / .55) 0%, transparent 60%), radial-gradient(90% 70% at 0% 100%, rgb(46 230 197 / .22) 0%, transparent 60%), linear-gradient(165deg, #15122B 0%, #221B52 55%, #0E2A35 100%);
}

html, body { height: 100%; }
body { background: var(--kq-fondo-suave); color: var(--kq-texto); overflow: hidden; }
::selection { background: rgb(124 92 255 / .45); color: #fff; }
.kq-toast { background: #2C2756; color: var(--kq-tinta); box-shadow: 0 0 0 1px var(--kq-borde-fuerte), var(--kq-sombra-l); }
.kq-input, .kq-textarea, .kq-select { background: var(--kq-fondo-suave); }
.kq-btn:hover { background: var(--kq-fondo-hundido); }
.kq-btn--prim:hover { background: var(--kq-azul-hover); }
.kq-chip--ok { color: var(--kq-ok); }
#raiz { height: 100dvh; }

/* ── Estructura ──────────────────────────────────────────────────────────── */
.per { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
.per-cab { display: flex; align-items: center; gap: 14px; padding: 14px 22px; }
.per-marca { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--kq-tinta); font-weight: 800; font-size: 19px; letter-spacing: -0.03em; }
.per-marca img { width: 34px; height: 34px; border-radius: 10px; box-shadow: 0 6px 18px rgb(124 92 255 / .45); }
.per-marca small { font-weight: 600; font-size: 14px; color: var(--kq-gris); letter-spacing: 0; }
.per-cab-der { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.per-yo { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--kq-gris); }
.per-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 12px; padding: 0 12px 12px; min-height: 0; }

/* ── Conversación ─────────────────────────────────────────────────────────── */
.charla { display: flex; flex-direction: column; min-height: 0; background: var(--kq-fondo); border-radius: 24px; box-shadow: 0 0 0 1px var(--kq-borde); overflow: hidden; }
.mensajes { flex: 1; overflow-y: auto; padding: 28px 24px 12px; }
.mensajes-col { max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 18px; }

.bienvenida { max-width: 720px; margin: 8vh auto 0; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding: 0 4px; }
.bienvenida-q { width: 64px; height: 64px; }
.bienvenida h1 { font-size: clamp(34px, 4.4vw, 52px); line-height: 1.02; letter-spacing: -0.045em; max-width: 14ch; }
.bienvenida p { color: var(--kq-gris); font-size: 17px; max-width: 52ch; }
.sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.sugerencias button { border: 1px solid var(--kq-borde); background: var(--kq-fondo); color: var(--kq-tinta); border-radius: 99px; padding: 9px 15px; font-size: 14px; font-weight: 500; cursor: pointer; transition: border-color .15s, background .15s; }
.sugerencias button:hover { border-color: var(--kq-azul-borde); background: var(--kq-azul-suave); }

.msg { display: flex; gap: 12px; align-items: flex-start; }
.msg.yo { justify-content: flex-end; }
.msg.yo .texto { background: linear-gradient(135deg, #6A48F5, #7C5CFF); color: #fff; padding: 11px 16px; border-radius: 18px; border-bottom-right-radius: 5px; max-width: min(560px, 85%); }
.msg.ia .ava { width: 30px; height: 30px; flex: none; border-radius: 9px; margin-top: 2px; }
.msg.ia .cuerpo { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.msg .texto { font-size: 15.5px; line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; color: var(--kq-texto); }
.msg.yo .texto { color: #fff; }
.msg .texto a { color: var(--kq-chispa); }
.pasos { display: flex; flex-wrap: wrap; gap: 6px; }
.paso { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--kq-sinapsis); background: var(--kq-sinapsis-suave); border-radius: 99px; padding: 3px 10px 3px 8px; }
.paso svg { width: 12px; height: 12px; }
.msg-accion { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; border: 1px dashed var(--kq-azul-borde); background: var(--kq-azul-suave); color: #C9BBFF; border-radius: 12px; padding: 8px 12px; font-size: 13.5px; font-weight: 600; cursor: pointer; }
.pensando { display: inline-flex; gap: 5px; padding: 10px 0; }
.pensando i { width: 7px; height: 7px; border-radius: 50%; background: var(--kq-chispa); opacity: .35; animation: pensar 1.2s ease-in-out infinite; }
.pensando i:nth-child(2) { animation-delay: .15s; } .pensando i:nth-child(3) { animation-delay: .3s; }
@keyframes pensar { 50% { opacity: 1; transform: translateY(-3px); } }

.redactar { padding: 10px 24px 18px; }
.redactar form { max-width: 720px; margin: 0 auto; display: flex; gap: 8px; align-items: flex-end; border: 1px solid var(--kq-borde-fuerte); border-radius: 24px; padding: 8px 8px 8px 18px; background: var(--kq-fondo-suave); transition: border-color .15s, box-shadow .15s; }
.redactar form:focus-within { border-color: var(--kq-azul); box-shadow: 0 0 0 4px var(--kq-azul-suave); }
.redactar textarea { color: var(--kq-tinta); flex: 1; border: 0; outline: 0; resize: none; background: transparent; min-height: 26px; max-height: 200px; padding: 8px 0; line-height: 1.45; font-size: 15.5px; }
.enviar { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: var(--kq-prisma); color: #fff; display: grid; place-items: center; cursor: pointer; }
.enviar:disabled { opacity: .45; cursor: default; }
.enviar svg { width: 20px; height: 20px; }
.redactar .pie { max-width: 720px; margin: 8px auto 0; font-size: 12px; color: var(--kq-gris-claro); text-align: center; }

/* ── Panel lateral ───────────────────────────────────────────────────────── */
.lado { display: flex; flex-direction: column; min-height: 0; background: var(--kq-fondo); border-radius: 24px; box-shadow: 0 0 0 1px var(--kq-borde); overflow: hidden; }
.pestanas { display: flex; gap: 4px; padding: 10px; border-bottom: 1px solid var(--kq-borde); }
.pestanas button { flex: 1; border: 0; background: transparent; padding: 8px 6px; border-radius: 99px; font-size: 13px; font-weight: 600; color: var(--kq-gris); cursor: pointer; display: inline-flex; gap: 6px; justify-content: center; align-items: center; }
.pestanas button[aria-selected="true"] { background: var(--kq-fondo-hundido); color: var(--kq-tinta); box-shadow: inset 0 0 0 1px var(--kq-azul-borde); }
.pestanas .n { font-size: 11px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 99px; background: var(--kq-azul); color: #fff; display: inline-grid; place-items: center; }
.panel { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.panel > p.ayuda { color: var(--kq-gris); font-size: 13.5px; }
.vacio { text-align: center; color: var(--kq-gris); font-size: 14px; padding: 28px 12px; display: flex; flex-direction: column; gap: 6px; align-items: center; }
.vacio b { color: var(--kq-tinta); font-size: 15px; }

.accion { border: 1px solid var(--kq-borde); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.accion.resaltada { border-color: var(--kq-azul); box-shadow: 0 0 0 4px var(--kq-azul-suave); }
.accion-cab { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--kq-tinta); font-size: 14.5px; }
.accion-cab svg { width: 18px; height: 18px; color: var(--kq-azul); }
.accion label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--kq-gris); }
.accion .kq-input, .accion .kq-textarea { font-size: 14px; }
.accion .kq-textarea { min-height: 120px; }
.accion-pie { display: flex; gap: 8px; justify-content: flex-end; }
.accion.historia { padding: 10px 14px; flex-direction: row; align-items: center; gap: 10px; font-size: 13px; color: var(--kq-gris); }
.accion.historia b { color: var(--kq-tinta); font-weight: 600; }

.memorias { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.memorias li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--kq-fondo-suave); font-size: 14px; color: var(--kq-texto); }
.memorias li span { flex: 1; }
.memorias li small { display: block; color: var(--kq-gris-claro); font-size: 11.5px; margin-top: 2px; }
.memorias button { border: 0; background: none; color: var(--kq-gris-claro); cursor: pointer; padding: 2px; border-radius: 6px; font-size: 16px; line-height: 1; }
.memorias button:hover { color: var(--kq-error); }
.nueva-memoria { display: flex; gap: 8px; }

.conexion { border: 1px solid var(--kq-borde); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.conexion-cab { display: flex; align-items: center; gap: 12px; }
.conexion-cab .logo-g { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: #fff; font-weight: 800; font-size: 18px; color: #4285F4; }
.conexion-cab b { display: block; font-size: 16px; color: var(--kq-tinta); font-weight: 800; letter-spacing: -0.02em; }
.conexion-cab small { color: var(--kq-gris); font-size: 13px; }
.servicios { display: flex; flex-wrap: wrap; gap: 6px; }

/* ── Activación ──────────────────────────────────────────────────────────── */
.activar { position: relative; overflow: hidden; height: 100%; display: grid; place-items: center; padding: 24px; background: var(--per-noche); color: #fff; }
.activar canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.activar-caja { position: relative; max-width: 620px; display: flex; flex-direction: column; gap: 18px; }
.activar-caja img { width: 64px; height: 64px; border-radius: 18px; box-shadow: 0 0 0 2px rgb(255 255 255 / .6); }
.activar h1 { color: #fff; font-size: clamp(40px, 6vw, 72px); line-height: .98; letter-spacing: -0.045em; max-width: 12ch; }
.activar p { font-size: 18px; color: rgb(255 255 255 / .9); max-width: 46ch; }
.activar ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 16px; }
.activar li { display: flex; gap: 10px; align-items: flex-start; }
.activar li::before { content: ""; flex: none; width: 12px; height: 12px; margin-top: 6px; background: var(--kq-chispa);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
.activar-acc { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.btn-blanco { background: #fff; color: #3B2AA8; border-color: #fff; }
.btn-blanco:hover { background: #EFEAFF; }
.btn-linea { background: transparent; color: #fff; border-color: rgb(255 255 255 / .7); }
.btn-linea:hover { background: rgb(255 255 255 / .1); }
.activar :focus-visible { outline-color: var(--kq-chispa); }

/* ── Pantallas chicas: la conversación primero, el panel en pestañas ──────── */
.solo-movil { display: none; }
@media (max-width: 980px) {
  .per-cuerpo { grid-template-columns: 1fr; padding: 0 0 0; }
  .charla, .lado { border-radius: 0; box-shadow: none; }
  .per[data-vista="charla"] .lado { display: none; }
  .per:not([data-vista="charla"]) .charla { display: none; }
  .solo-movil { display: inline-flex; }
  .per-cab { padding: 10px 14px; border-bottom: 1px solid var(--kq-borde); background: var(--kq-fondo-suave); }
  .per-yo span { display: none; }
  .mensajes { padding: 20px 14px 8px; }
  .redactar { padding: 8px 10px calc(10px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) { .pensando i { animation: none; opacity: .7; } }

/* Íconos dentro de botones y del historial de acciones */
.msg-accion svg { width: 14px; height: 14px; flex: none; }
.accion.historia svg { width: 16px; height: 16px; flex: none; color: var(--kq-gris); }
.pestanas button { white-space: nowrap; }
@media (max-width: 980px) {
  .per-cab { gap: 8px; }
  .per-cab-der { gap: 6px; min-width: 0; }
  .per-yo, .per-cab-der .kq-btn--fantasma { display: none; }
  .per-marca small { display: none; }
  .per-cuerpo, .charla, .lado { min-width: 0; }
}

/* Saldo */
.saldo-caja { padding: 18px; border-radius: 18px; background: var(--kq-prisma); color: #fff; display: flex; flex-direction: column; gap: 4px; box-shadow: 0 18px 40px -22px rgb(124 92 255 / .8); }
.saldo-caja span { font-size: 13px; font-weight: 600; opacity: .85; }
.saldo-caja b { font-size: 34px; font-weight: 800; letter-spacing: -0.045em; line-height: 1.05; }
.saldo-caja small { font-size: 12.5px; opacity: .85; }
.saldo-caja.agotado { background: linear-gradient(135deg, #5A1E3A, #8A2B4F); }
.montos { display: flex; flex-wrap: wrap; gap: 8px; }
.movs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.movs li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--kq-borde); font-size: 13.5px; }
.movs li small { display: block; color: var(--kq-gris-claro); font-size: 11.5px; }
.movs li b { font-weight: 700; color: var(--kq-tinta); white-space: nowrap; } .movs li b.mas { color: var(--kq-ok); }
.pestanas button { font-size: 12.5px; padding: 8px 4px; }

/* Ajustes: tu asistente, conexiones y saldo */
.ajuste { display: flex; flex-direction: column; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--kq-borde); }
.ajuste:last-child { border-bottom: 0; }
.ajuste h2 { font-size: 18px; letter-spacing: -0.03em; }
.campo { display: flex; flex-direction: column; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--kq-gris); }
.campo .kq-textarea { min-height: 0; font-size: 14px; }
.tonos { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.tono { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 11px; border-radius: 12px; border: 1px solid var(--kq-borde-fuerte); background: var(--kq-fondo-suave); color: var(--kq-tinta); cursor: pointer; text-align: left; }
.tono b { font-size: 13.5px; } .tono small { font-size: 11.5px; color: var(--kq-gris); font-weight: 500; }
.tono[aria-checked="true"] { border-color: var(--kq-azul); background: var(--kq-azul-suave); box-shadow: inset 0 0 0 1px var(--kq-azul); }
.bienvenida-soy { font-size: 15px !important; color: var(--kq-sinapsis) !important; font-weight: 600; }
.bienvenida-ajustar { border: 1px dashed var(--kq-azul-borde); background: var(--kq-azul-suave); color: #C9BBFF; border-radius: 99px; padding: 8px 14px; font-size: 13.5px; font-weight: 600; cursor: pointer; }

/* App instalada (pantalla completa en el teléfono): respeta la barra de estado */
@media (display-mode: standalone) {
  .per-cab { padding-top: calc(10px + env(safe-area-inset-top)); }
}
.instalar-ios ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; color: var(--kq-texto); }
.kq-dialog { background: var(--kq-fondo); color: var(--kq-texto); }


.pensando-fila { display: flex; align-items: center; gap: 10px; }
.pensando-fila span { font-size: 13.5px; color: var(--kq-gris); }

/* ── Voz ──────────────────────────────────────────────────────────────────── */
.mic { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: transparent; color: var(--kq-gris); transition: background .2s, color .2s; position: relative; }
.mic:hover { background: var(--kq-fondo-hundido); color: var(--kq-tinta); }
.mic svg { width: 21px; height: 21px; position: relative; }
.redactar form.dictando { border-color: #FF7A88; box-shadow: 0 0 0 4px rgb(255 122 136 / .15); }
.redactar form.dictando .mic { background: #FF5C6E; color: #fff; }
.redactar form.dictando .mic::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; background: rgb(255 92 110 / .35);
  transform: scale(calc(.85 + var(--nivel, 0) * .9)); transition: transform .08s linear; }
.redactar form.dictando textarea { color: var(--kq-tinta); font-style: italic; }
.escuchar { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 0; cursor: pointer;
  color: var(--kq-gris-claro); font-size: 12.5px; font-weight: 600; }
.escuchar svg { width: 15px; height: 15px; }
.escuchar:hover, .escuchar.leyendo { color: var(--kq-sinapsis); }
.escuchar.leyendo span::after { content: " · tocá para parar"; font-weight: 500; }
.btn-conversar svg { width: 16px; height: 16px; }

/* Modo conversación */
.conversa { position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 22px calc(28px + env(safe-area-inset-bottom)); text-align: center;
  background: radial-gradient(90% 60% at 50% 30%, rgb(124 92 255 / .35), transparent 70%), linear-gradient(170deg, #15122B, #1B1640 60%, #0E2A35); color: var(--kq-texto); animation: conv-entra .3s ease-out both; }
@keyframes conv-entra { from { opacity: 0; } }
.conv-centro { position: relative; display: grid; place-items: center; width: 240px; height: 240px; }
.conv-aura { position: absolute; inset: 22px; border-radius: 50%; background: radial-gradient(circle, rgb(124 92 255 / .45), rgb(46 230 197 / .12) 60%, transparent 72%);
  transform: scale(calc(.9 + var(--nivel, 0) * .7)); transition: transform .08s linear; }
.conv-centro .pj { position: relative; }
.conversa h2 { font-size: 24px; letter-spacing: -0.03em; color: #fff; }
.conv-dicho { min-height: 1.5em; max-width: 34ch; font-size: 18px; color: #fff; font-style: italic; }
.conv-respuesta { max-width: 46ch; font-size: 15px; line-height: 1.55; color: var(--kq-gris); max-height: 30vh; overflow-y: auto; }
.conv-acciones { display: flex; gap: 10px; margin-top: 10px; }
@media (max-width: 980px) { .btn-conversar span { display: none; } .btn-conversar { padding: 0 10px; } }
@media (prefers-reduced-motion: reduce) { .conv-aura, .redactar form.dictando .mic::before { transition: none; transform: none; } }
@media (max-width: 980px) { .btn-salir { display: none; } } /* en el celular, "Cerrar sesión" está en Ajustes → Tu cuenta */

/* ── El personaje del asistente (marca/personaje.js): Kurt, Orbe, Emoji o Ninguno ─────────────────────────────────── */
.pj { position: relative; display: inline-grid; place-items: center; width: var(--tam); height: var(--tam); flex: none; cursor: pointer; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.pj-cuerpo { overflow: visible; display: block; }
.pj-cuerpo .ku-aro { fill: none; stroke-width: 11; stroke-linecap: round; transition: stroke .3s; }
.pj-cuerpo .ku-ojo { fill: #fff; transform-box: fill-box; transform-origin: center; transition: transform .12s ease-out, opacity .15s; }
.pj-cuerpo .ku-sonrisa, .pj-cuerpo .ku-dormido, .pj-cuerpo .ku-mareo { fill: none; stroke: #fff; stroke-width: 4; stroke-linecap: round; opacity: 0; transition: opacity .15s; }
.pj-cuerpo .ku-mareo { stroke-width: 3; }
.pj-cuerpo .ku-boca { fill: #fff; opacity: 0; transform-box: fill-box; transform-origin: center; }
.pj-cuerpo .ku-cachete { fill: #FF8FB1; opacity: 0; transition: opacity .25s; }
.pj-cuerpo .ku-brillo { fill: #fff; transform-box: fill-box; transform-origin: center; filter: drop-shadow(0 0 calc(4px + var(--nivel, 0) * 10px) #2EE6C5); transition: filter .1s; }
.pj-cuerpo .ku-antena { transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + var(--nivel, 0) * .45)); transition: transform .08s linear; }
.pj-cuerpo .ku-cuerpo { transform-box: fill-box; transform-origin: center bottom; }
/* la mirada: la cara se corre hacia donde está el puntero o el dedo */
.pj-cuerpo .ku-cara { transform: translate(calc(var(--mx, 0) * 1px), calc(var(--my, 0) * 1px)); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.pj-cuerpo .ku-ojos { transform-box: fill-box; transform-origin: center; }
.pj-cuerpo .ku-zzz text { font: 800 14px Inter, system-ui, sans-serif; fill: #B9A6FF; opacity: 0; }
.pj-cuerpo .ku-idea circle { fill: #B9A6FF; opacity: 0; }

/* reposo: respira y la antena titila (el parpadeo lo maneja personaje.js) */
.pj-cuerpo.reposo .ku-cuerpo { animation: ku-respira 3.6s ease-in-out infinite; }
.pj-cuerpo.reposo .ku-brillo { animation: ku-titila 2.6s ease-in-out infinite; }
.pj-cuerpo.parpadea .ku-ojo { transform: scaleY(.08); }
.pj-cuerpo.guina .ku-der { transform: scaleY(.08); }
.pj-cuerpo.atento .ku-ojo { transform: scale(1.12); }
/* escucha: se inclina, atento; la antena late con tu voz */
.pj-cuerpo.escucha .ku-cuerpo { animation: ku-inclina 2.2s ease-in-out infinite; }
.pj-cuerpo.escucha .ku-ojo { transform: scale(1.1); }
/* piensa: mira para arriba, la antena gira y aparecen puntitos */
.pj-cuerpo.piensa .ku-cara { transform: translate(2.5px, -3px); }
.pj-cuerpo.piensa .ku-ojos { animation: ku-mira 1.6s ease-in-out infinite; }
.pj-cuerpo.piensa .ku-brillo { animation: ku-gira 1.2s linear infinite; }
.pj-cuerpo.piensa .ku-cuerpo { animation: ku-respira 1.8s ease-in-out infinite; }
.pj-cuerpo.piensa .ku-idea circle { animation: ku-idea 1.2s ease-in-out infinite; }
.pj-cuerpo.piensa .ku-idea circle:nth-child(2) { animation-delay: .2s; } .pj-cuerpo.piensa .ku-idea circle:nth-child(3) { animation-delay: .4s; }
/* habla: la boca se mueve sola y además se abre en cada palabra */
.pj-cuerpo.habla .ku-boca { opacity: 1; animation: ku-boca .3s ease-in-out infinite alternate; }
.pj-cuerpo.habla.silaba .ku-boca { animation: ku-silaba .18s ease-out; }
.pj-cuerpo.habla .ku-cuerpo { animation: ku-respira 1.6s ease-in-out infinite; }
.pj-cuerpo.habla .ku-brillo { animation: ku-titila 1s ease-in-out infinite; }
/* feliz y mimo (cuando lo tocás): ojos sonrientes y cachetes */
.pj-cuerpo.feliz .ku-ojo, .pj-cuerpo.mimo .ku-ojo { opacity: 0; }
.pj-cuerpo.feliz .ku-sonrisa, .pj-cuerpo.mimo .ku-sonrisa { opacity: 1; }
.pj-cuerpo.feliz .ku-cachete, .pj-cuerpo.mimo .ku-cachete { opacity: .75; }
.pj-cuerpo.feliz .ku-cuerpo { animation: ku-salta .8s ease-in-out infinite; }
.pj-cuerpo.feliz .ku-brillo { animation: ku-titila .8s ease-in-out infinite; }
.pj-cuerpo.toque .ku-cuerpo { animation: ku-aplasta .6s cubic-bezier(.3, 1.6, .5, 1); }
/* alerta: naranja, ojos grandes y un temblor */
.pj-cuerpo.alerta .ku-aro { stroke: url(#pj-alerta); }
.pj-cuerpo.alerta .ku-brillo { fill: #FFC266; filter: drop-shadow(0 0 6px #FFB547); animation: ku-titila .5s infinite; }
.pj-cuerpo.alerta .ku-ojo { transform: scale(1.18); }
.pj-cuerpo.alerta .ku-cuerpo { animation: ku-tiembla .5s ease-in-out 3; }
/* mareado: después de muchos toques */
.pj-cuerpo.mareado .ku-ojo { opacity: 0; } .pj-cuerpo.mareado .ku-mareo { opacity: 1; }
.pj-cuerpo.mareado .ku-cuerpo { animation: ku-vuelta 1s ease-in-out; }
/* dormido: ojos cerrados, respira lento y salen las z */
.pj-cuerpo.dormido .ku-ojo { opacity: 0; } .pj-cuerpo.dormido .ku-dormido { opacity: 1; }
.pj-cuerpo.dormido .ku-cuerpo { animation: ku-respira 4.8s ease-in-out infinite; }
.pj-cuerpo.dormido .ku-brillo { opacity: .45; animation: none; filter: none; }
.pj-cuerpo.dormido .ku-zzz text { animation: ku-zzz 3s ease-in-out infinite; }
.pj-cuerpo.dormido .ku-zzz text:nth-child(2) { animation-delay: 1s; } .pj-cuerpo.dormido .ku-zzz text:nth-child(3) { animation-delay: 2s; }
.pj-cuerpo.despierta .ku-cuerpo { animation: ku-estira .8s cubic-bezier(.3, 1.5, .5, 1); }

/* Globo con lo que dice y chispitas cuando festeja o lo tocás */
.pj-globo { position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: #fff; color: #1A1250; font: 700 13px/1 Inter, system-ui, sans-serif; padding: 8px 12px; border-radius: 14px; box-shadow: 0 10px 24px -8px rgb(0 0 0 / .5);
  animation: ku-globo .25s cubic-bezier(.2, 1.4, .4, 1) both; z-index: 2; }
.pj-globo::after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px; border: 6px solid transparent; border-top-color: #fff; }
.pj-globo.sale { animation: ku-globo-sale .25s ease-in forwards; }
.pj-chispita { position: absolute; left: 50%; top: 45%; width: 9px; height: 9px; margin: -4.5px; pointer-events: none; background: #7FF5E3;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: ku-chispita .85s cubic-bezier(.2, .8, .3, 1) forwards; }
.pj-chispita:nth-of-type(2n) { background: #B9A6FF; } .pj-chispita:nth-of-type(3n) { background: #fff; }

@keyframes ku-respira { 50% { transform: scale(1.04) translateY(-2px); } }
@keyframes ku-titila { 50% { transform: scale(1.25) rotate(12deg); } }
@keyframes ku-gira { to { transform: rotate(360deg); } }
@keyframes ku-mira { 0%, 100% { transform: translateX(-2px); } 50% { transform: translateX(2.5px); } }
@keyframes ku-inclina { 50% { transform: rotate(-6deg); } }
@keyframes ku-salta { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-10px) scale(1.04, .97); } 60% { transform: translateY(0) scale(1.03, .96); } }
@keyframes ku-aplasta { 0% { transform: scale(1); } 25% { transform: scale(1.14, .82); } 55% { transform: scale(.93, 1.08); } 100% { transform: scale(1); } }
@keyframes ku-tiembla { 25% { transform: translateX(-2px) rotate(-2deg); } 75% { transform: translateX(2px) rotate(2deg); } }
@keyframes ku-vuelta { 0% { transform: rotate(0); } 70% { transform: rotate(380deg); } 100% { transform: rotate(360deg); } }
@keyframes ku-estira { 0% { transform: scale(1, .9); } 40% { transform: scale(.94, 1.12) translateY(-4px); } 100% { transform: scale(1); } }
@keyframes ku-boca { from { transform: scaleY(.25) scaleX(.9); } to { transform: scaleY(1.1) scaleX(1); } }
@keyframes ku-silaba { from { transform: scaleY(1.35) scaleX(1.05); } to { transform: scaleY(.4) scaleX(.92); } }
@keyframes ku-idea { 0%, 100% { opacity: 0; transform: translateY(2px); } 50% { opacity: .9; transform: none; } }
@keyframes ku-zzz { 0% { opacity: 0; transform: translate(0, 4px); } 30% { opacity: .9; } 100% { opacity: 0; transform: translate(6px, -10px); } }
@keyframes ku-globo { from { opacity: 0; transform: translate(-50%, 6px) scale(.85); } }
@keyframes ku-globo-sale { to { opacity: 0; transform: translate(-50%, -4px) scale(.95); } }
@keyframes ku-chispita { 0% { opacity: 1; transform: translate(0, 0) scale(.4) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1) rotate(160deg); } }
@media (prefers-reduced-motion: reduce) { .pj *, .pj-cuerpo, .pj-cuerpo * { animation: none !important; transition: none !important; } }

/* Dónde aparece */
.bienvenida-pj { margin-left: -6px; }
.msg.ia .pj { margin-top: 1px; }
.pj-cuerpo.quieto .ku-cara { transform: none; }
.msg.ia .pj { cursor: default; }

/* Orbe: esfera de luz con carita (ojos y boca oscuros) */
.pj-orbe .ku-ojo, .pj-orbe .ku-boca { fill: #1A1250; }
.pj-orbe .ku-sonrisa, .pj-orbe .ku-dormido, .pj-orbe .ku-mareo { stroke: #1A1250; }
.pj-orbe .ku-reflejo { fill: #fff; opacity: .5; }
.pj-orbe .ku-halo { transform-box: fill-box; transform-origin: center; transform: scale(calc(1 + var(--nivel, 0) * .25)); transition: transform .08s linear; }
.pj-orbe .pj-cuerpo.reposo .ku-halo { animation: pj-late 3.4s ease-in-out infinite; }
.pj-orbe .pj-cuerpo.alerta .ku-bola { fill: url(#pj-alerta); }
.pj-orbe .ku-brillo { filter: drop-shadow(0 0 calc(3px + var(--nivel, 0) * 8px) #fff); }
@keyframes pj-late { 50% { transform: scale(1.1); opacity: .7; } }

/* Emoji: el que elija cada persona, con los mismos gestos */
.pj-emoji .pj-cuerpo { display: inline-block; font-size: calc(var(--tam) * .8); line-height: 1; user-select: none; transform-origin: 50% 85%;
  translate: calc(var(--mx, 0) * .7px) calc(var(--my, 0) * .7px); transition: translate .35s cubic-bezier(.2, .8, .2, 1), filter .3s, opacity .3s; }
.pj-emoji .pj-cuerpo.reposo { animation: ku-respira 3.6s ease-in-out infinite; }
.pj-emoji .pj-cuerpo.escucha { animation: ku-inclina 2.2s ease-in-out infinite; scale: calc(1 + var(--nivel, 0) * .15); }
.pj-emoji .pj-cuerpo.piensa { animation: pj-flota 1.4s ease-in-out infinite; }
.pj-emoji .pj-cuerpo.habla { animation: pj-charla .32s ease-in-out infinite alternate; }
.pj-emoji .pj-cuerpo.feliz { animation: ku-salta .8s ease-in-out infinite; }
.pj-emoji .pj-cuerpo.mimo, .pj-emoji .pj-cuerpo.toque { animation: ku-aplasta .6s cubic-bezier(.3, 1.6, .5, 1); }
.pj-emoji .pj-cuerpo.alerta { animation: ku-tiembla .5s ease-in-out 3; filter: drop-shadow(0 0 8px #FFB547); }
.pj-emoji .pj-cuerpo.mareado { animation: ku-vuelta 1s ease-in-out; }
.pj-emoji .pj-cuerpo.dormido { opacity: .6; filter: grayscale(.4); animation: ku-respira 4.8s ease-in-out infinite; }
.pj-emoji .pj-cuerpo.parpadea { scale: 1 .9; }
.pj-emoji:has(.pj-cuerpo.dormido)::after { content: "💤"; position: absolute; right: -6%; top: -8%; font-size: calc(var(--tam) * .32); animation: pj-flota 2s ease-in-out infinite; }
.pj-emoji:has(.pj-cuerpo.piensa)::after { content: "💭"; position: absolute; right: -10%; top: -12%; font-size: calc(var(--tam) * .34); animation: pj-flota 1.4s ease-in-out infinite; }
@keyframes pj-flota { 50% { transform: translateY(-5px); } }
@keyframes pj-charla { from { transform: scale(1) rotate(-2deg); } to { transform: scale(1.06, .96) rotate(2deg); } }

/* Ninguno: solo el logo (sin animación, salvo un pulso suave mientras piensa) */
.pj-ninguno .pj-cuerpo { border-radius: 26%; display: block; }
.pj-ninguno .pj-cuerpo.piensa { animation: pj-late 1.4s ease-in-out infinite; }
.pj-ninguno { cursor: default; }

/* Ajustes → Personaje y voz */
.pj-vista { display: grid; place-items: center; height: 128px; border-radius: 18px; background: radial-gradient(60% 70% at 50% 45%, rgb(124 92 255 / .2), transparent 70%), var(--kq-fondo-suave); }
.pj-tipos .tono { flex-direction: row; align-items: center; gap: 8px; flex-wrap: wrap; }
.pj-tipos .tono small { flex-basis: 100%; }
.pj-mini { display: inline-grid; width: 34px; height: 34px; place-items: center; }
.pj-mini .pj { pointer-events: none; }
.campo-tit { font-size: 12.5px; font-weight: 600; color: var(--kq-gris); }
.pj-opciones { display: flex; flex-direction: column; gap: 6px; }
.pj-opciones:empty { display: none; }
.pj-emojis { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.pj-emoji-op { aspect-ratio: 1; border: 1px solid var(--kq-borde); border-radius: 10px; background: var(--kq-fondo-suave); font-size: 20px; cursor: pointer; display: grid; place-items: center; padding: 0; }
.pj-emoji-op[aria-checked="true"] { border-color: var(--kq-azul); box-shadow: inset 0 0 0 1px var(--kq-azul); background: var(--kq-azul-suave); }
.pj-colores { display: flex; gap: 10px; }
.pj-color { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; box-shadow: 0 0 0 2px var(--kq-fondo); }
.pj-color[aria-checked="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--kq-azul); }
.tonos-3 { grid-template-columns: repeat(3, 1fr); }
.tonos-3 .tono { align-items: center; }
.pj-rango > span { display: flex; justify-content: space-between; }
.pj-rango output { color: var(--kq-tinta); font-variant-numeric: tabular-nums; }
.pj-rango input { accent-color: var(--kq-azul); width: 100%; }