/* ============================================================================
   Kiun Chat Kit — componentes estilo Telegram-bot, alineados al sistema de
   diseño de Stitch "Dess Mobile Approvals" (proyecto 18077595830332067780).

     <link rel="stylesheet" href="/kiun.css">
     <link rel="stylesheet" href="/kiun-chat.css">

   DECISIONES (producción 2026-06-12):

   1) TIPOGRAFÍA EN `rem`, no en `px`. El root del browser hereda el font-size
      del sistema del usuario (Android Settings → Display → Font size; iOS
      Dynamic Type). Don José sube el tamaño en su Moto G y TODO escala
      proporcional; Marta lo baja en su iPhone y el chat se vuelve denso.
      Sin hardcodes — es lo que pidió Alex.

      Escala matchea Stitch:
        label-caps:        0.75rem    (12px @ default 16px root)
        body-md:           0.875rem   (14px)
        body-lg:           1rem       (16px)
        headline-md:       1.25rem    (20px)  ← title de card
        headline-lg-mob:   1.375rem   (22px)
        headline-lg:       1.5rem     (24px)

      Touch targets: 2.75rem (44px @ default — Stitch touch-target-min).

   2) BRAND-BLUE COMO ACCIÓN PRIMARIA (no teal).
      El sistema de marca Stitch usa #3B82F6 para botones "Aprobar". El teal
      queda como signature del logo + estados ok/info. Esto evita que el teal
      pierda emphasis por sobreuso (audit finding).

   3) EYEBROWS COMO TAG COLOREADO.
      No texto mono caps simple — chip de fondo opaco con color de urgencia:
        - FORRESTER en rojo (urgent)
        - FLORESYA en naranja (warn)
        - DECISION en azul (info)

   4) BULK SELECT pattern (.k-bulk-bar) — barra docked arriba del bottom-nav
      con "N seleccionadas · Después · Aprobar todas". Patron Telegram-style
      multi-select que tu cliente PYME ya conoce de WhatsApp.

   5) Light mode: hereda el toggle html.kiun-light de kiun.css; los tokens
      brand-blue se mantienen (el azul funciona en ambos modos).

   Pieces (Stitch-aligned):
     .k-msg / .k-msg-bot / .k-msg-user     — bubble base
     .k-card-rich                          — decision/KPI card
     .k-card-rich--warn/--ok/--alert       — tonos por urgencia
     .k-card-tag                           — eyebrow chip coloreado
     .k-inline-kb                          — fila de botones de acción
     .k-kb-btn / .k-kb-btn--blue/--ghost   — botón Stitch-style
     .k-bulk-bar                           — barra de bulk action (docked)
     .k-typing                             — indicador "revisando..."
     .k-confirm                            — marca ✓ aplicada
     .k-status-strip / .k-status-pill      — header de status
     .k-reply-kb / .k-reply-btn            — reply keyboard persistente
   ============================================================================ */

/* ── Token additions sobre el kit Kiun ───────────────────────────────────
   Se añaden SOLO los tokens nuevos del sistema Stitch que kiun.css no tiene
   todavía. El resto (--bg, --card, --bd, --text, etc) viene del kit base. */
:root{
  --k-brand-blue:#3B82F6;
  --k-brand-blue-hover:#2563EB;
  --k-tag-red:#EF4444;
  --k-tag-orange:#F59E0B;
  --k-tag-blue:#3B82F6;
  --k-touch-min:2.75rem;        /* 44px @ 16px root — Stitch touch-target-min */
  --k-stack-gap:0.75rem;        /* 12px — Stitch stack-gap */
  --k-card-pad:1rem;            /* 16px — Stitch card-inner-padding */
}
html.kiun-light{
  /* Brand blue se atenúa un punto para mejor contraste sobre blanco */
  --k-brand-blue:#2563EB;
  --k-brand-blue-hover:#1D4ED8;
}

/* ── Mensajes (bubbles) ──────────────────────────────────────────────────
   Sizes en rem para respetar el font-size del sistema del usuario. */
.k-msg{
  max-width:88%;
  padding:0.5625rem 0.8125rem;            /* 9/13px @ default */
  border-radius:1rem;
  font-size:0.9rem;                       /* ~14.4px @ default — body-md+ */
  line-height:1.45;
  word-wrap:break-word;
  margin-bottom:0.25rem;
}
.k-msg-bot{
  align-self:flex-start;
  background:var(--card);
  border:1px solid var(--bd);
  color:var(--text);
  border-bottom-left-radius:0.375rem;     /* tail */
}
.k-msg-user{
  align-self:flex-end;
  background:var(--k-brand-blue);
  color:#fff;
  border:0;
  border-bottom-right-radius:0.375rem;
  font-weight:500;
}
.k-msg-time{
  font-size:0.7rem;
  color:var(--dimmer);
  align-self:center;
  margin:0.5rem 0 0.25rem;
  font-family:var(--mono);
  letter-spacing:.03em;
}

/* ── Card rica (KPI / decisión / alerta) ─────────────────────────────────
   Match Stitch "Pending Approvals Dashboard": flex con eyebrow-tag al top,
   title 20px, body 14px sub, 2 botones (POSTPONER · APROBAR) abajo. */
.k-card-rich{
  display:flex;
  flex-direction:column;
  gap:0.5rem;
  /* Stitch "Pulso · Tu Conductor": bg surface-card oscuro + cyber-glow inset teal
     sutil + rounded-2xl. Antes era card translucido con border simple — perdía
     la presencia visual del mockup (feedback Alex 2026-06-12 pm11 "no se ve igual"). */
  background:#0D1117;
  border:1px solid rgba(45,212,191,.18);
  border-radius:1rem;
  box-shadow:inset 0 0 10px rgba(45,212,191,.10);
  padding:var(--k-card-pad);
  max-width:96%;
  margin-bottom:0.25rem;
  align-self:flex-start;
}
html.kiun-light .k-card-rich{
  background:var(--card);
  border-color:rgba(45,212,191,.25);
  box-shadow:inset 0 0 10px rgba(45,212,191,.06);
}
.k-card-rich-row{display:flex;gap:0.6875rem;align-items:flex-start}
.k-card-rich .k-card-icon{
  width:2.375rem;height:2.375rem;
  border-radius:0.6875rem;
  flex-shrink:0;
  background:rgba(59,130,246,.10);        /* azul muy suave por default */
  display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;
}
.k-card-rich .k-card-content{flex:1;min-width:0}

/* Mensaje del sistema/bot tipo "Tienes N decisiones esperando tu OK" — texto
   gris en el flujo del chat, separado de las burbujas conversacionales. Live
   al margen, no compite con la conversación. (2026-06-12 pm12) */
.chat-bubble.chat-bot{
  align-self:flex-start;
  max-width:96%;
  padding:0.625rem 0.875rem;
  font-size:0.875rem;
  color:var(--dim);
  line-height:1.45;
}
.chat-bubble.chat-bot strong{color:var(--text);font-weight:600}
/* Chip "Abrir Decisiones" — pill teal pequeño que abre el tab destino */
.chat-link-chip{
  display:inline-flex;align-items:center;gap:5px;
  background:rgba(45,212,191,.08);
  color:var(--teal);
  border:1px solid rgba(45,212,191,.35);
  border-radius:999px;
  padding:0.3125rem 0.75rem;
  font-size:0.75rem;font-weight:700;
  font-family:var(--mono);letter-spacing:.05em;text-transform:uppercase;
  cursor:pointer;margin-left:6px;vertical-align:middle;
  transition:background .12s,border-color .12s,transform .08s;
  -webkit-tap-highlight-color:transparent;
}
.chat-link-chip:hover{background:rgba(45,212,191,.16);border-color:var(--teal)}
.chat-link-chip:active{transform:scale(.97)}
.chat-link-chip .material-symbols-outlined{font-size:14px}
html.kiun-light .chat-link-chip{color:#0F766E;background:rgba(20,184,166,.10);border-color:rgba(20,184,166,.40)}

/* Eyebrow como TAG coloreado con icono auto_awesome al inicio (Stitch
   mockup "✨ ANÁLISIS COMPLETADO" feedback Alex 2026-06-12 pm11). Inline-flex
   con ligature de Material Symbols al ::before — sin tocar el markup. */
.k-card-tag{
  display:inline-flex;
  align-items:center;
  gap:5px;
  font-family:var(--mono);
  font-size:0.7rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:0.1875rem 0.625rem 0.1875rem 0.4375rem;
  border-radius:999px;                    /* pill, no rectángulo */
  margin-bottom:0.5rem;
  background:rgba(59,130,246,.14);
  color:var(--k-tag-blue);
  border:1px solid rgba(59,130,246,.30);
}
.k-card-tag::before{
  content:"auto_awesome";
  font-family:'Material Symbols Outlined';
  font-size:13px;
  font-weight:400;
  font-variation-settings:'FILL' 1;
  letter-spacing:0;
  line-height:1;
  flex:none;
}
.k-card-tag--red{
  background:rgba(239,68,68,.20);
  color:var(--k-tag-red);
  border-color:rgba(239,68,68,.30);
}
.k-card-tag--orange{
  background:rgba(245,158,11,.20);
  color:var(--k-tag-orange);
  border-color:rgba(245,158,11,.30);
}
html.kiun-light .k-card-tag      {background:rgba(59,130,246,.12);  color:#1D4ED8}
html.kiun-light .k-card-tag--red {background:rgba(239,68,68,.12);   color:#B91C1C}
html.kiun-light .k-card-tag--orange{background:rgba(245,158,11,.14); color:#92400E}

.k-card-rich .k-card-eyebrow{
  font-family:var(--mono);
  font-size:0.6875rem;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--dim);
  font-weight:700;
  margin-bottom:0.125rem;
}
.k-card-rich .k-card-title{
  font-size:1.125rem;                     /* ~18px — Stitch headline-md slightly smaller for chat density */
  font-weight:600;
  color:var(--text);
  line-height:1.3;
  letter-spacing:-.01em;
  margin-bottom:0.375rem;
}
.k-card-rich .k-card-value{
  font-size:1.5rem;                       /* ~24px — KPI big number */
  font-weight:700;
  letter-spacing:-.015em;
  color:var(--text);
  line-height:1.1;
  margin-bottom:0.1875rem;
  font-variant-numeric:tabular-nums;
}
.k-card-rich .k-card-sub{
  font-size:0.875rem;                     /* 14px — Stitch body-md */
  color:var(--dim);
  line-height:1.45;
}
/* Stitch mockup: los números/keywords clave se resaltan en TEAL, no en blanco.
   Coincide con <strong class="text-primary">15%</strong>. */
.k-card-rich .k-card-sub strong{color:var(--teal);font-weight:700}
html.kiun-light .k-card-rich .k-card-sub strong{color:#0F766E}
.k-card-rich .k-card-sub .pos{color:var(--ok)}
.k-card-rich .k-card-sub .neg{color:var(--err)}

/* Variantes de tono (matcha border y bg del icon — Stitch convention) */
.k-card-rich--warn .k-card-icon{background:rgba(245,158,11,.13)}
.k-card-rich--warn{border-color:rgba(245,158,11,.3)}
.k-card-rich--alert .k-card-icon{background:rgba(239,68,68,.13)}
.k-card-rich--alert{border-color:rgba(239,68,68,.3)}
.k-card-rich--ok .k-card-icon{background:rgba(52,211,153,.13)}

/* Card seleccionada (bulk-select activo) */
.k-card-rich.is-selected{
  background:var(--card);
  border-color:var(--k-brand-blue);
  box-shadow:inset 0 0 0 1px rgba(59,130,246,.20);
}

/* Checkbox embebido para bulk-select. Stitch pattern. Opcional por card. */
.k-card-check{
  width:1.5rem;height:1.5rem;
  border:2px solid var(--bd-hi, var(--bd));
  border-radius:0.25rem;
  cursor:pointer;
  flex-shrink:0;
  margin-top:0.125rem;
  position:relative;
  background:transparent;
  transition:background .12s,border-color .12s;
  -webkit-tap-highlight-color:transparent;
}
.k-card-check.is-on,
.k-card-check[aria-checked="true"]{
  background:var(--k-brand-blue);
  border-color:var(--k-brand-blue);
}
.k-card-check.is-on::after,
.k-card-check[aria-checked="true"]::after{
  content:"";
  position:absolute;top:2px;left:6px;
  width:5px;height:10px;
  border:solid #fff;border-width:0 2px 2px 0;
  transform:rotate(45deg);
}

/* Compacto (sin valor grande, solo título + sub) */
.k-card-rich--compact .k-card-value{display:none}
.k-card-rich--compact .k-card-title{font-size:1rem;font-weight:700}

/* ── Inline keyboard (botones bajo card o mensaje) ───────────────────────
   Match Stitch: ghost POSTPONER + brand-blue APROBAR. Tap target 44px. */
.k-inline-kb{
  display:flex;
  gap:0.5rem;
  margin-top:0.25rem;
  margin-bottom:0.625rem;
  flex-wrap:wrap;
  align-self:flex-start;
  max-width:96%;
}
.k-kb-btn{
  flex:0 1 auto;                          /* no estirar — pill compacta del mockup */
  min-height:var(--k-touch-min);          /* 2.75rem = 44px — Stitch min */
  min-width:5.25rem;
  padding:0 1rem;                         /* +un poco para que respire el text-uppercase */
  border-radius:999px;                    /* pill-shape Stitch (era 0.5rem rectangular) */
  background:transparent;
  border:1px solid var(--bd);
  color:var(--dim);
  font-size:0.75rem;
  font-weight:700;
  font-family:var(--mono);
  letter-spacing:.06em;
  text-transform:uppercase;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:0.375rem;
  transition:background .12s,border-color .12s,color .12s,transform .08s;
  -webkit-tap-highlight-color:transparent;
}
.k-kb-btn:hover{background:rgba(255,255,255,.04);color:var(--text);border-color:rgba(255,255,255,.16)}
html.kiun-light .k-kb-btn:hover{background:rgba(15,23,42,.04)}
.k-kb-btn:active{transform:scale(.97)}
/* PRIMARY = pill teal con border + bg sutil (mockup Stitch "Profundizar en categorías"
   con border-primary/30 + text-primary). Antes era brand-blue sólido — muy fuerte
   junto al cyber-glow teal de la card; mejor pill discreta con energía teal. */
.k-kb-btn--blue,
.k-kb-btn--primary{
  background:rgba(45,212,191,.08);
  color:var(--teal);
  border-color:rgba(45,212,191,.45);
}
.k-kb-btn--blue:hover,
.k-kb-btn--primary:hover{
  background:rgba(45,212,191,.16);
  color:var(--teal);
  border-color:var(--teal);
}
html.kiun-light .k-kb-btn--blue,
html.kiun-light .k-kb-btn--primary{color:#0F766E;background:rgba(20,184,166,.10);border-color:rgba(20,184,166,.45)}
.k-kb-btn--danger{color:var(--err)}
.k-kb-btn--danger:hover{border-color:var(--err);color:var(--err);background:rgba(239,68,68,.05)}

/* Estado consumido (tras tap) */
.k-kb-btn.k-kb-done{
  pointer-events:none;
  opacity:.55;
  background:transparent;
}
.k-kb-btn.k-kb-done::before{content:"✓ ";color:var(--ok);font-weight:700}

/* Botón especial "Ver reporte / Ver detalle" — texto normal, icon chico */
.k-kb-btn--report{
  text-transform:none;
  letter-spacing:0;
  font-family:inherit;
  font-size:0.8125rem;
  background:rgba(45,212,191,.08);
  color:var(--teal);
  border-color:transparent;
}
.k-kb-btn--report:hover{background:rgba(45,212,191,.13);color:var(--teal)}

/* ── Bulk action bar (docked arriba del bottom nav) ──────────────────────
   Aparece cuando hay 1+ cards seleccionadas. "N seleccionadas · Después · Aprobar todas" */
.k-bulk-bar{
  position:fixed;
  left:50%;
  transform:translateX(-50%) translateY(110%);
  bottom:calc(5rem + env(safe-area-inset-bottom));
  z-index:40;
  width:calc(100% - 2rem);
  max-width:38rem;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:0.75rem;
  padding:0.625rem 0.75rem;
  box-shadow:0 12px 28px rgba(0,0,0,.35);
  display:flex;
  align-items:center;
  gap:0.75rem;
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
html.kiun-light .k-bulk-bar{box-shadow:0 12px 28px rgba(15,23,42,.10)}
.k-bulk-bar.is-on{transform:translateX(-50%) translateY(0)}
.k-bulk-bar .count{
  flex:1;font-size:0.875rem;color:var(--text);font-weight:600;
  padding-left:0.5rem;
}
.k-bulk-bar .k-kb-btn{flex:0 0 auto;min-width:auto;padding:0 1rem}

/* ── Typing indicator ──────────────────────────────────────────────────── */
.k-typing{
  display:inline-flex;
  align-items:center;
  gap:0.5rem;
  align-self:flex-start;
  padding:0.625rem 0.8125rem;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:1rem;
  border-bottom-left-radius:0.375rem;
  font-size:0.78rem;
  color:var(--dim);
}
.k-typing-dots{display:inline-flex;gap:0.25rem}
.k-typing-dots span{
  width:0.4375rem;height:0.4375rem;
  background:var(--k-brand-blue);
  border-radius:50%;
  animation:k-bounce 1.3s infinite;
}
.k-typing-dots span:nth-child(2){animation-delay:.18s}
.k-typing-dots span:nth-child(3){animation-delay:.36s}
@keyframes k-bounce{
  0%,60%,100%{transform:translateY(0);opacity:.4}
  30%{transform:translateY(-0.3125rem);opacity:1}
}
@media (prefers-reduced-motion:reduce){
  .k-typing-dots span{animation:none;opacity:.8}
}

/* ── Confirm marker (in-place tras tap) ────────────────────────────────── */
.k-confirm{
  display:inline-flex;
  align-items:center;
  gap:0.375rem;
  padding:0.25rem 0.625rem;
  background:rgba(52,211,153,.13);
  color:var(--ok);
  border-radius:99px;
  font-size:0.78rem;
  font-weight:700;
  font-family:var(--mono);
  align-self:flex-start;
  margin:0.125rem 0 0.625rem;
}
.k-confirm::before{content:"✓"}

/* ── Status strip (mini header sobre el chat) ──────────────────────────── */
.k-status-strip{
  display:flex;
  gap:0.5rem;
  padding:0.5rem 0.875rem;
  overflow-x:auto;
  scrollbar-width:none;
  border-bottom:1px solid var(--bd);
  background:var(--bg);
  -webkit-overflow-scrolling:touch;
}
.k-status-strip::-webkit-scrollbar{display:none}
.k-status-pill{
  display:inline-flex;
  align-items:center;
  gap:0.3125rem;
  padding:0.3125rem 0.6875rem;
  background:var(--card);
  border:1px solid var(--bd);
  border-radius:99px;
  font-size:0.78rem;
  color:var(--text);
  font-weight:500;
  white-space:nowrap;
  flex-shrink:0;
}
.k-status-pill strong{font-weight:700;color:var(--text)}
.k-status-pill--alert{
  background:rgba(239,68,68,.10);
  border-color:rgba(239,68,68,.3);
  color:var(--err);
}
.k-status-pill--ok{
  background:rgba(52,211,153,.10);
  border-color:rgba(52,211,153,.3);
  color:var(--ok);
}

/* ── Reply keyboard (atajos persistentes) ──────────────────────────────── */
.k-reply-kb{
  display:flex;
  gap:0.4375rem;
  padding:0.5rem 0.75rem;
  background:var(--bg);
  border-top:1px solid var(--bd);
  overflow-x:auto;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.k-reply-kb::-webkit-scrollbar{display:none}
.k-reply-btn{
  min-height:2.375rem;                    /* 38px @ default */
  padding:0 0.8125rem;
  border-radius:0.625rem;
  background:var(--card);
  border:1px solid var(--bd);
  color:var(--text);
  font-size:0.84rem;
  font-weight:600;
  cursor:pointer;
  font-family:inherit;
  white-space:nowrap;
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  gap:0.3125rem;
  -webkit-tap-highlight-color:transparent;
  transition:background .12s,border-color .12s;
}
.k-reply-btn:hover{border-color:var(--k-brand-blue);color:var(--k-brand-blue)}
.k-reply-btn:active{background:rgba(59,130,246,.06)}
.k-reply-btn--more{
  width:2.375rem;
  padding:0;
  justify-content:center;
}

/* ── Group helpers ───────────────────────────────────────────────────── */
.k-msg.k-attached, .k-card-rich.k-attached, .k-msg-bot.k-attached{
  margin-bottom:0.125rem;
}

/* ── Chat container (scrollable) ────────────────────────────────────────── */
.k-chat{
  display:flex;
  flex-direction:column;
  gap:0.125rem;
  padding:1.125rem 0.875rem 0.875rem;
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  max-width:42.5rem;
  margin:0 auto;
  width:100%;
}
@media (max-width:520px){
  .k-msg, .k-card-rich, .k-inline-kb{max-width:100%}
}