/* ================================================================
   Kapito — mascota oficial de KAPITALIZANDO
   Personaje flotante (imágenes reales, 15 poses) que da la bienvenida,
   habla en burbujas y reacciona a tu situación financiera.
   ================================================================ */
.kapi-wrap{
  position:fixed; right:22px; bottom:22px; z-index:80;
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  pointer-events:none;
  /* Escala global de Kapito. Cada pose se dibuja a su alto real
     multiplicado por esta unidad, así todas conservan el mismo tamaño
     de cuerpo (los recortes vienen de la misma lámina). */
  --kapi-esc:.50px;
}
.kapi-wrap > *{ pointer-events:auto; }

/* Burbuja de diálogo */
.kapi-bubble{
  max-width:300px; background:var(--surface); color:var(--text);
  border:1px solid var(--border); border-radius:16px 16px 4px 16px;
  padding:13px 15px; font-size:13px; line-height:1.5;
  box-shadow:0 12px 34px rgba(0,0,0,.28);
  position:relative; transform-origin:bottom right;
  animation:kapiBubbleIn .35s cubic-bezier(.25,.9,.4,1.2) both;
}
.kapi-bubble b{ color:var(--kap-gold-deep); }
body[data-theme="dark"] .kapi-bubble b{ color:var(--kap-gold-light); }
.kapi-bubble .kapi-close{
  position:absolute; top:6px; right:9px; border:none; background:none;
  color:var(--text-3); font-size:15px; line-height:1; cursor:pointer;
}
.kapi-bubble .kapi-cta{
  display:inline-block; margin-top:9px; font-size:12px; font-weight:800;
  color:var(--kap-gold); cursor:pointer;
}
.kapi-bubble .kapi-cta:hover{ text-decoration:underline; }
@keyframes kapiBubbleIn{ from{ opacity:0; transform:scale(.7) translateY(10px);} to{ opacity:1; transform:none;} }
.kapi-bubble.out{ animation:kapiBubbleOut .25s both; }
@keyframes kapiBubbleOut{ to{ opacity:0; transform:scale(.7) translateY(10px);} }

/* Botón/cuerpo de la mascota. La caja se dimensiona con la pose más
   alta (305 px) y la más ancha se sale a los lados sin recortarse. */
.kapi-body{
  position:relative; border:none; background:none; padding:0; cursor:pointer;
  width:calc(var(--kapi-esc) * 215);
  height:calc(var(--kapi-esc) * 305);
  display:flex; align-items:flex-end; justify-content:center;
  transition:transform .2s;
}
.kapi-body:hover{ transform:scale(1.06) rotate(-2deg); }
.kapi-body:active{ transform:scale(.95); }

/* Flotación (va en el contenedor para no pelear con las poses) */
.kapi-float{ display:block; line-height:0; animation:kapiFloat 4s ease-in-out infinite; }
@keyframes kapiFloat{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

.kapi-img{
  display:block; width:auto; max-width:none;
  height:calc(var(--kapi-esc) * var(--kapi-h-nat, 290));
  filter:drop-shadow(0 10px 14px rgba(27,30,35,.32));
  transform-origin:bottom center;
}

/* Cambio de pose: pequeño "pop" para que se note el gesto */
.kapi-img.cambia{ animation:kapiPop .42s cubic-bezier(.25,.9,.4,1.3) both; }
@keyframes kapiPop{
  0%{ transform:scale(.86) translateY(6px); opacity:.35; }
  60%{ transform:scale(1.05) translateY(-2px); opacity:1; }
  100%{ transform:none; opacity:1; }
}

/* Saludo al abrir una burbuja: el personaje se balancea */
.kapi-wrap.saluda .kapi-img{ animation:kapiSaludo .55s ease-in-out 3; }
@keyframes kapiSaludo{
  0%,100%{ transform:rotate(0);} 25%{ transform:rotate(5deg);} 75%{ transform:rotate(-5deg);}
}

/* Aura de ánimo: resplandor detrás del personaje según tu salud financiera */
.kapi-aura{
  position:absolute; left:50%; top:52%; transform:translate(-50%,-50%);
  width:125%; height:82%; border-radius:50%; pointer-events:none;
  background:radial-gradient(closest-side, var(--kapi-aura, #B08D33) 0%, transparent 72%);
  opacity:.32; filter:blur(6px);
}

/* ================================================================
   Chat de Kapito
   ================================================================ */
.kapi-chat{
  position:fixed; right:22px; bottom:22px; z-index:82;
  width:370px; max-width:calc(100vw - 24px);
  height:min(560px, calc(100vh - 120px));
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface); border:1px solid var(--border);
  border-radius:18px; box-shadow:0 24px 60px rgba(0,0,0,.35);
  opacity:0; visibility:hidden; transform:translateY(18px) scale(.96);
  transform-origin:bottom right; transition:opacity .22s, transform .22s, visibility .22s;
}
.kapi-chat.abierto{ opacity:1; visibility:visible; transform:none; }

.kc-head{
  display:flex; align-items:center; gap:10px; padding:11px 13px;
  background:var(--grad-gold); color:#fff; flex:0 0 auto;
}
.kc-avatar{ width:38px; height:38px; object-fit:contain; object-position:bottom center; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.kc-tit{ display:flex; flex-direction:column; line-height:1.25; flex:1; min-width:0; }
.kc-tit b{ font-size:14px; }
.kc-tit span{ font-size:11px; opacity:.85; }
.kc-x{ border:none; background:rgba(255,255,255,.18); color:#fff; width:26px; height:26px;
  border-radius:50%; font-size:17px; line-height:1; cursor:pointer; }
.kc-x:hover{ background:rgba(255,255,255,.32); }

.kc-lista{ flex:1; overflow-y:auto; padding:14px 13px; display:flex; flex-direction:column; gap:10px; }
.kc-msg{
  max-width:88%; padding:11px 13px; border-radius:14px; font-size:13px; line-height:1.55;
  animation:kapiBubbleIn .25s both;
}
.kc-msg.bot{ background:var(--surface-2); border:1px solid var(--border); color:var(--text);
  border-bottom-left-radius:4px; align-self:flex-start; }
.kc-msg.user{ background:var(--grad-gold); color:#fff; border-bottom-right-radius:4px; align-self:flex-end; }
.kc-msg.bot b{ color:var(--kap-gold-deep); }
body[data-theme="dark"] .kc-msg.bot b{ color:var(--kap-gold-light); }
.kc-msg ul{ margin:6px 0 0 17px; padding:0; }
.kc-msg li{ margin:3px 0; }

.kc-accion{
  display:block; width:100%; margin-top:9px; padding:7px 10px;
  background:var(--kap-gold); color:#fff; border:none; border-radius:9px;
  font-size:12px; font-weight:800; cursor:pointer; text-align:center;
}
.kc-accion:hover{ filter:brightness(1.08); }

/* "escribiendo…" */
.kc-puntos{ display:inline-flex; gap:4px; padding:2px 0; }
.kc-puntos i{ width:6px; height:6px; border-radius:50%; background:var(--text-3); animation:kcPunto 1.1s infinite; }
.kc-puntos i:nth-child(2){ animation-delay:.16s; }
.kc-puntos i:nth-child(3){ animation-delay:.32s; }
@keyframes kcPunto{ 0%,60%,100%{ opacity:.25; transform:translateY(0);} 30%{ opacity:1; transform:translateY(-3px);} }

.kc-chips{ display:flex; gap:6px; overflow-x:auto; padding:0 13px 9px; flex:0 0 auto; }
.kc-chip{
  white-space:nowrap; padding:6px 11px; border-radius:20px; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border); color:var(--text-2);
  font-size:11.5px; font-weight:600;
}
.kc-chip:hover{ border-color:var(--kap-gold); color:var(--kap-gold-deep); }

.kc-input{ display:flex; gap:7px; padding:10px 12px 12px; border-top:1px solid var(--border); flex:0 0 auto; }
.kc-input input{
  flex:1; min-width:0; padding:9px 12px; border-radius:10px; font-size:13px;
  border:1px solid var(--border); background:var(--surface-2); color:var(--text);
}
.kc-input input:focus{ outline:none; border-color:var(--kap-gold); }
.kc-input button{
  border:none; background:var(--kap-gold); color:#fff; width:38px; border-radius:10px;
  font-size:15px; cursor:pointer;
}
.kc-input button:hover{ filter:brightness(1.08); }

/* Con el chat abierto, Kapito se encoge para no estorbar (la clase la
   pone el propio chat en <body>: el panel se inserta después del
   personaje, así que un selector de hermanos no serviría). */
body.kapi-chat-abierto .kapi-wrap{ opacity:.3; transform:scale(.75) translateY(10px); }
.kapi-wrap{ transition:opacity .22s, transform .22s; }

/* Kapito flota sobre el contenido: reservamos ese espacio al final de cada
   página para que nunca tape la última fila de una tabla. */
.page{ padding-bottom:170px; }

/* Burbujita de "nueva pista" */
.kapi-dot{
  position:absolute; top:-2px; right:-2px; width:16px; height:16px;
  background:var(--danger); border:2px solid var(--surface); border-radius:50%;
  animation:pulse 1.6s infinite;
}

/* Respaldo dibujado (si faltaran las imágenes en el despliegue) */
.kapi-wrap.sin-img .kapi-body{ width:74px; height:74px; }
.kapi-wrap.sin-img svg{ width:74px; height:74px; display:block; overflow:visible; }

@media (max-width:560px){
  .kapi-wrap{ right:10px; bottom:76px; --kapi-esc:.34px; }  /* deja espacio a la barra inferior */
  .kapi-bubble{ max-width:220px; font-size:12px; }
  .page{ padding-bottom:140px; }
  .kapi-chat{ right:8px; left:8px; bottom:72px; width:auto; height:min(70vh, calc(100vh - 130px)); }
}
@media (prefers-reduced-motion:reduce){
  .kapi-float, .kapi-img.cambia, .kapi-wrap.saluda .kapi-img{ animation:none; }
}
@media print{ .kapi-wrap{ display:none; } }