/* Kallpi en el sitio público (js/kallpi-publico.js). Solo index.html.
   Usa los colores de la portada (--panel, --ink, --acc…, en su <style>).

   TAMAÑO (2026-10-20, pedido del usuario: «al abrir está muy grande»): 360 px
   de ancho y como mucho 540 de alto, y crece con la charla en vez de abrirse
   ya alto: al empezar mide lo que mide el saludo y las sugerencias.

   EL CLARO, SUAVE («el blanco está muy fuerte a la vista»): el panel ya no es
   todo blanco puro. El cuerpo va en un verde-gris muy tenue (--kp-fondo), y
   solo lo que se lee encima —burbujas, tarjetas, la caja de escribir— va en
   blanco, con bordes de baja opacidad. En oscuro, tres escalones del azul
   noche de la portada. Todo vive en las variables --kp-*, así que un tema
   nuevo es cambiar cinco valores. */

.kp{
  --kp-fondo:#F2F6F3;          /* el cuerpo: verde-gris muy tenue, no blanco */
  --kp-cab:#F8FAF8;            /* cabecera y pie, apenas más claros que el cuerpo */
  --kp-superficie:#FFFFFF;     /* lo que se lee: burbujas, tarjetas, caja */
  --kp-borde:rgba(8,20,14,.08);
  --kp-borde-fuerte:rgba(8,20,14,.14);
  position:fixed;right:24px;bottom:100px;z-index:90;width:min(360px,calc(100vw - 32px));
  max-height:min(540px,calc(100vh - 136px));display:flex;flex-direction:column;
  background:var(--kp-fondo);color:var(--ink);border:1px solid var(--kp-borde);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 48px -24px rgba(4,21,14,.32),0 2px 6px rgba(4,21,14,.05);
  font-family:'IBM Plex Sans',system-ui,sans-serif;
  /* Se abre CRECIENDO DESDE LA BURBUJA: el origen es la esquina de abajo a la
     derecha, donde está el botón que lo abrió. */
  transform-origin:calc(100% - 32px) calc(100% + 40px);
}
[data-tema="dark"] .kp{
  --kp-fondo:#0B121C;--kp-cab:#0E1622;--kp-superficie:#14202F;
  --kp-borde:rgba(234,240,246,.08);--kp-borde-fuerte:rgba(234,240,246,.14);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.55);
}
.kp[hidden]{display:none}
.kp:not([hidden]){animation:kp-entrar .24s cubic-bezier(.2,.8,.2,1)}
@keyframes kp-entrar{from{opacity:0;transform:translateY(10px) scale(.94)}to{opacity:1;transform:none}}

/* ── Cabecera ── */
.kp-cab{display:flex;align-items:center;gap:10px;padding:10px 10px 10px 14px;background:var(--kp-cab);
  border-bottom:1px solid var(--kp-borde);flex:none}
.kp-cab img{width:32px;height:32px;border-radius:50%;object-fit:cover;flex:none;background:var(--kp-superficie)}
.kp-cab-txt{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.kp-cab-txt strong{font-family:'Space Grotesk',sans-serif;font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.kp-cab-txt span{font-size:11.5px;color:var(--ink3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-cerrar{width:32px;height:32px;border:0;border-radius:9px;background:transparent;color:var(--ink3);cursor:pointer;display:grid;place-items:center;flex:none}
.kp-cerrar:hover{background:var(--kp-fondo);color:var(--ink)}
.kp-cerrar svg{width:17px;height:17px}

/* ── La conversación ── */
.kp-mensajes{flex:1 1 auto;overflow-y:auto;padding:14px 14px 12px;display:flex;flex-direction:column;gap:10px;
  scroll-behavior:smooth;overscroll-behavior:contain}
/* En una columna flexible que se desplaza, un hijo con overflow:hidden se
   encoge hasta cortarse (pasó en el widget del panel): nada se encoge. */
.kp-mensajes > *{flex-shrink:0}
.kp-msg{font-size:14px;line-height:1.5;padding:9px 12px;border-radius:14px;max-width:88%;white-space:pre-wrap;overflow-wrap:break-word}
.kp-bot{background:var(--kp-superficie);border:1px solid var(--kp-borde);align-self:flex-start;border-bottom-left-radius:5px}
.kp-yo{background:var(--accSoft);border:1px solid var(--accLine);align-self:flex-end;border-bottom-right-radius:5px}
.kp-error{background:rgba(232,106,90,.10);border:1px solid rgba(232,106,90,.28);color:#B4382A;align-self:flex-start}
[data-tema="dark"] .kp-error{color:#F0907F}
.kp-estado{font-size:12px;color:var(--ink3);margin:0;align-self:flex-start}

.kp-saludo{display:flex;gap:8px;align-items:flex-end}
.kp-saludo img{width:44px;height:auto;flex:none;margin-bottom:-3px}

/* Las sugerencias: en fila y que se acomoden, no una columna alta. */
.kp-sugerencias{display:flex;flex-direction:column;gap:8px}
.kp-donde{display:flex;align-items:center;gap:7px;margin:2px 0 0;font-size:12px;color:var(--ink3)}
.kp-donde-punto{width:7px;height:7px;border-radius:50%;background:var(--acc);flex:none;
  box-shadow:0 0 0 3px rgba(61,191,140,.18)}
.kp-chips{display:flex;flex-wrap:wrap;gap:6px}
.kp-chip{font:500 13px/1.3 'IBM Plex Sans',sans-serif;text-align:left;color:var(--ink);background:var(--kp-superficie);
  border:1px solid var(--kp-borde-fuerte);border-radius:100px;padding:7px 12px;cursor:pointer;
  transition:border-color .15s,background .15s,transform .15s}
.kp-chip:hover{border-color:var(--acc);background:var(--accSoft)}
.kp-chip:active{transform:scale(.98)}
.kp-chip[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.kp-chip-persona{border-style:dashed;color:var(--ink2)}
.kp-chip:focus-visible,.kp-opcion:focus-visible,.kp-ninguna:focus-visible,.kp-boton:focus-visible,
.kp-canal:focus-visible,.kp-cerrar:focus-visible,.kp-enviar:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

/* ── Respuesta escrita, con su procedencia ── */
.kp-escrita{background:var(--kp-superficie);border:1px solid var(--kp-borde);border-radius:14px;overflow:hidden}
.kp-escrita-cab{display:flex;align-items:center;gap:7px;padding:10px 13px 0;font:500 10px 'IBM Plex Mono',monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--accText)}
.kp-escrita-cab::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--acc);flex:none}
.kp-escrita-texto{padding:6px 13px 11px;font-size:14px;line-height:1.55;white-space:pre-wrap}
.kp-nota{margin:0;padding:0 13px 10px;font-size:12.5px;color:var(--ink2)}
.kp-procedencia{padding:8px 13px;border-top:1px solid var(--kp-borde);background:var(--kp-cab);font-size:11.5px;color:var(--ink3)}

.kp-opciones{display:flex;flex-direction:column;gap:6px}
.kp-opcion{display:flex;align-items:center;gap:10px;text-align:left;font:400 13.5px 'IBM Plex Sans',sans-serif;color:var(--ink);
  background:var(--kp-superficie);border:1px solid var(--kp-borde-fuerte);border-radius:12px;padding:9px 11px;cursor:pointer}
.kp-opcion:hover{border-color:var(--acc)}
.kp-opcion span{flex:1}
.kp-opcion svg{width:15px;height:15px;color:var(--ink3);flex:none}
.kp-ninguna{align-self:flex-start;font:600 13px 'IBM Plex Sans',sans-serif;color:var(--accText);background:transparent;border:0;
  padding:4px 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.kp-flojas .kp-opcion{border-style:dashed;background:var(--kp-superficie);color:var(--ink2)}
.kp-flojas .kp-ninguna{align-self:stretch;text-decoration:none;text-align:left;background:var(--accSoft);
  border:1px solid var(--accLine);border-radius:12px;padding:9px 11px;color:var(--ink)}

.kp-invita{border:1px solid var(--accLine);background:var(--accSoft);border-radius:14px;padding:11px 13px}
.kp-invita p{margin:0 0 9px;font-size:13.5px;line-height:1.5}
.kp-boton{display:inline-flex;align-items:center;height:36px;padding:0 15px;border-radius:10px;background:var(--acc);color:#04150E;
  font:600 13.5px 'IBM Plex Sans',sans-serif;text-decoration:none}
.kp-boton:hover{background:#2FA875}

.kp-persona{display:flex;flex-wrap:wrap;gap:7px}
.kp-canal{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 13px;border-radius:18px;border:1px solid var(--kp-borde-fuerte);
  background:var(--kp-superficie);color:var(--ink);font:600 13px 'IBM Plex Sans',sans-serif;text-decoration:none}
.kp-canal:hover{border-color:var(--acc);color:var(--accText)}
.kp-canal svg{width:16px;height:16px;flex:none}

/* ── El cálculo de la fecha, dentro de la respuesta escrita ── */
.kp-calc{border-top:1px solid var(--kp-borde);background:var(--kp-cab);padding:11px 13px 13px;display:flex;flex-direction:column;gap:7px}
.kp-calc-tit{margin:0;font:600 14.5px 'Space Grotesk',sans-serif}
.kp-calc-etq{margin:4px 0 0;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);
  display:flex;align-items:center;gap:10px}
.kp-digito{width:42px;height:38px;text-align:center;font:600 19px 'IBM Plex Mono',monospace;color:var(--ink);background:var(--kp-superficie);
  border:1px solid var(--kp-borde-fuerte);border-radius:10px}
.kp-digito:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px rgba(61,191,140,.18)}
.kp-calc-ayuda{margin:0;font-size:12px;color:var(--ink3)}
.kp-calc-chips{display:flex;flex-wrap:wrap;gap:5px}
.kp-calc-chips .kp-chip{padding:5px 10px;font-size:12.5px}
.kp-calc-res:empty{display:none}
.kp-calc-res{border-left:2px solid var(--acc);padding:3px 0 2px 11px;margin-top:4px}
.kp-fecha{margin:0 0 4px;font:600 19px/1.2 'Space Grotesk',sans-serif;letter-spacing:-.02em}
.kp-sin-fecha{font-size:15px}
.kp-supuestos{margin:4px 0 0;padding-left:16px;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.kp-supuestos li{margin:0 0 4px}
.kp-falta{margin:4px 0 0;font-size:13px;line-height:1.5;color:var(--ink2)}

.kp-pensando{display:inline-flex;gap:4px;align-self:flex-start;padding:11px 13px;background:var(--kp-superficie);
  border:1px solid var(--kp-borde);border-radius:14px;border-bottom-left-radius:5px}
.kp-pensando i{width:6px;height:6px;border-radius:50%;background:var(--ink3);animation:kp-punto 1.2s infinite}
.kp-pensando i:nth-child(2){animation-delay:.15s}
.kp-pensando i:nth-child(3){animation-delay:.3s}
@keyframes kp-punto{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ── La caja de escribir, con el aviso de no poner datos personales ── */
.kp-form{flex:none;padding:9px 11px 11px;background:var(--kp-cab);border-top:1px solid var(--kp-borde)}
.kp-privado{display:flex;align-items:center;gap:6px;margin:0 2px 7px;font-size:11.5px;line-height:1.35;color:var(--ink3)}
.kp-privado svg{width:13px;height:13px;flex:none;color:var(--accText)}
.kp-caja{display:flex;align-items:center;gap:6px;background:var(--kp-superficie);border:1px solid var(--kp-borde-fuerte);
  border-radius:13px;padding:4px 4px 4px 12px;transition:border-color .15s,box-shadow .15s}
.kp-caja:focus-within{border-color:var(--acc);box-shadow:0 0 0 3px rgba(61,191,140,.16)}
.kp-input{flex:1;min-width:0;height:34px;padding:0;font:400 14px 'IBM Plex Sans',sans-serif;color:var(--ink);background:transparent;border:0}
.kp-input:focus{outline:none}
.kp-input::placeholder{color:var(--ink3)}
.kp-enviar{width:34px;height:34px;flex:none;border:0;border-radius:10px;background:var(--acc);color:#04150E;cursor:pointer;display:grid;place-items:center;
  transition:background .15s,transform .15s}
.kp-enviar:hover{background:#2FA875}
.kp-enviar:active{transform:scale(.94)}
.kp-enviar:disabled{opacity:.45;cursor:default}
.kp-enviar svg{width:17px;height:17px}

/* ── Que se vea lo que hace (camino B, 2026-10-20) ─────────────────────────
   COPIA DE LA MAQUETA APROBADA (docs/diseno/kallpi/maqueta-se-ve.html,
   columna B «Tablero», sitio público): cada regla es la de la maqueta, con el
   nombre de clase de este archivo. Si algo cambia, se cambia primero allá. */
/* El fondo: la luz verde de la marca arriba, que se apaga hacia la conversación,
   y el filo de color. */
.kp{background:linear-gradient(180deg,var(--accSoft) 0,var(--kp-fondo) 160px)}
.kp::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--acc);z-index:1}
/* La cabecera con color (decisión del usuario, 2026-10-20: transparente, como en la
   maqueta, no quedaba estética). El verde suave va SOBRE --kp-cab, que es opaco:
   en oscuro --accSoft es translúcido y solo no taparía nada. */
.kp-cab{background:linear-gradient(var(--accSoft),var(--accSoft)),var(--kp-cab);border-bottom-color:var(--accLine)}
.kp-mensajes{padding:14px}
/* La letra de la maqueta B: 15 px / 1,6 en toda la conversación. */
.kp-msg{font-size:15px;line-height:1.6}
/* La respuesta escrita: la «.ficha» de la maqueta. */
.kp-escrita{border:1px solid var(--kp-borde-fuerte);border-radius:16px}
.kp-escrita-cab{gap:8px;padding:10px 13px;border-bottom:1px solid var(--kp-borde);letter-spacing:.1em;color:var(--ink3);background:var(--kp-cab)}
.kp-escrita-cab::before{display:none}
.kp-escrita-cab > span:first-child{flex:1;white-space:nowrap}
.kp-revisada{display:inline-flex;align-items:center;gap:5px;font:500 10px 'IBM Plex Mono',monospace;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accText);background:var(--accSoft);border:1px solid var(--accLine);border-radius:999px;padding:3px 8px}
.kp-revisada svg{width:11px;height:11px;flex:none}
.kp-escrita-titulo{margin:10px 13px 2px;font:600 16px 'Space Grotesk',sans-serif;color:var(--ink)}
.kp-escrita-texto{padding:6px 13px 11px;font-size:14px;line-height:1.55}
.kp-bloques{white-space:normal}
/* Con :is() pesa más que el «margin:0» de cada bloque, que si no lo anulaba. */
.kp-bloques > * + :is(.kp-p,.kp-lista,.kp-sangrado){margin-top:8px}
.kp-p{margin:0;white-space:pre-wrap}
.kp-lista{margin:0;padding:0;list-style:none}
.kp-lista li{position:relative;padding-left:16px;margin:0 0 4px}
.kp-lista li::before{content:"–";position:absolute;left:0;color:var(--acc)}
.kp-sangrado{margin:0;padding:8px 11px;border-radius:10px;background:var(--kp-cab);white-space:pre-wrap;font-size:13.5px;overflow-x:auto}
/* Los pasos: la «.linea-t» de la maqueta. */
/* Con el número dentro del punto (decisión del usuario, 2026-10-20): la línea da el
   aspecto, el número dice por cuál paso va. */
.kp-pasos{list-style:none;margin:6px 13px 4px;padding:0 0 0 16px;border-left:2px solid var(--line2);counter-reset:kp-paso}
.kp-pasos li{position:relative;padding:4px 0 8px 8px;font-size:14px;line-height:1.5;counter-increment:kp-paso}
.kp-pasos li::before{content:counter(kp-paso);box-sizing:content-box;position:absolute;left:-28px;top:4px;width:18px;height:18px;border-radius:50%;background:var(--kp-superficie);border:2px solid var(--acc);
  font:600 10.5px/18px 'IBM Plex Mono',monospace;text-align:center;color:var(--accText)}
/* Nada transparente (decisión del usuario, 2026-10-20): el pie lleva el mismo color
   que la cabecera, y la procedencia el tono de la cabecera dentro de la ficha. */
.kp-escrita .kp-procedencia{background:var(--kp-cab)}
.kp-form{background:linear-gradient(var(--accSoft),var(--accSoft)),var(--kp-cab);border-top-color:var(--accLine)}

/* JUNTO A LA BURBUJA (solo escritorio): la «.fab-b» de la maqueta. El círculo
   lleva el icono de conversar en vez de la cara, Kallpi asomado encima y, a la
   izquierda, el globo con una pregunta escrita. El aro respira tres veces. */
@media (min-width:721px){
  [data-kallpi-burbuja]{overflow:visible!important}
  [data-kallpi-burbuja] img{display:none!important}
  [data-kallpi-burbuja]::before{content:"";width:26px;height:26px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304150E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20l1-4.6A8 8 0 1 1 21 12z'/%3E%3C/svg%3E") center/contain no-repeat}
  [data-kallpi-burbuja]::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--acc);opacity:.35;pointer-events:none;animation:kp-respira 2.8s ease-in-out 3}
}
@keyframes kp-respira{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.08);opacity:.1}}
.kp-junto{position:fixed;z-index:89}
.kp-junto[hidden]{display:none}
.kp-globo{display:block;max-width:190px;text-align:center;background:var(--panel);border:1px solid var(--line2);border-radius:14px 14px 4px 14px;
  padding:8px 12px;font:400 13px/1.35 'IBM Plex Sans',sans-serif;color:var(--ink);cursor:pointer;
  box-shadow:0 14px 30px -18px rgba(4,21,14,.45);transition:opacity .4s}
.kp-globo small{display:block;font:500 9.5px 'IBM Plex Mono',monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--accText);margin:0 0 2px}
.kp-globo:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.kp-globo.kp-cambiando{opacity:0}
.kp-asoma-fab{position:fixed;width:58px;height:auto;pointer-events:none;z-index:89}
@media (prefers-reduced-motion:reduce){[data-kallpi-burbuja]::after{animation:none}.kp-globo{transition:none}}
@media (max-width:720px){.kp-junto,.kp-asoma-fab{display:none}}
@media (prefers-reduced-motion:reduce){
  .kp:not([hidden]){animation:none}
  .kp-pensando i{animation:none;opacity:.6}
  .kp-mensajes{scroll-behavior:auto}
}

/* En el teléfono la burbuja vive en la franja de abajo (css/kallpa-barra-movil.css):
   el panel ocupa el ancho y se queda por encima de esa franja. */
@media (max-width:720px){
  .kp{left:12px;right:12px;width:auto;bottom:calc(78px + env(safe-area-inset-bottom,0px));
    max-height:calc(100vh - 168px);border-radius:18px;transform-origin:calc(100% - 22px) calc(100% + 34px)}
}