/* ============================================================
   KORE-I · Alma · Estilos del chat flotante
   /shared/alma_chat.css · v1.0 · 1 mayo 2026
   ============================================================
   Estilos del chat de soporte de Alma. Se carga en todos los
   módulos (cliente y onboarding) desde la raíz del repo.
   
   Variables:
   --alma-verde: #2D6A4F (color principal, botón flotante)
   --alma-ladrillo: #8B4513 (botón cuando está abierto)
   --alma-bg: #F5F0E8 (fondo del chat)
   --alma-texto: #1A1A1A
   --alma-muted: #8C7A62
   --alma-border: #E0D5C5
   ============================================================ */

.alma-fab{
  position:fixed;
  bottom:20px;
  right:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:#2D6A4F;
  color:#fff;
  border:none;
  font-size:24px;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(45,106,79,0.35);
  transition:all 0.25s ease;
  z-index:9998;
  display:flex;
  align-items:center;
  justify-content:center;
}
.alma-fab:hover{transform:scale(1.08);box-shadow:0 6px 20px rgba(45,106,79,0.45)}
.alma-fab.open{background:#8B4513}

.alma-wrap{
  position:fixed;
  bottom:90px;
  right:20px;
  width:360px;
  max-width:calc(100vw - 40px);
  height:520px;
  max-height:calc(100vh - 120px);
  background:#fff;
  border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.15);
  display:none;
  flex-direction:column;
  overflow:hidden;
  z-index:9997;
  font-family:'Inter','Helvetica Neue',Arial,sans-serif;
}
.alma-wrap.open{display:flex}

.alma-header{
  background:#2D6A4F;
  padding:14px 16px;
  display:flex;
  align-items:center;
  gap:12px;
}
.alma-avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(245,240,232,0.2);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:18px;
}
.alma-header-info{flex:1}
.alma-header-nombre{font-family:'Space Mono',monospace;font-size:13px;font-weight:700;color:#F5F0E8;letter-spacing:0.5px}
.alma-header-sub{font-size:10px;color:rgba(245,240,232,0.7);margin-top:1px}
.alma-header-close{background:none;border:none;color:rgba(245,240,232,0.7);font-size:18px;cursor:pointer;padding:4px;line-height:1}
.alma-header-close:hover{color:#F5F0E8}

.alma-msgs{
  flex:1;
  overflow-y:auto;
  padding:16px;
  background:#F5F0E8;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.alma-msgs::-webkit-scrollbar{width:4px}
.alma-msgs::-webkit-scrollbar-thumb{background:#E0D5C5;border-radius:2px}

.alma-msg{
  padding:10px 14px;
  border-radius:14px;
  font-size:13px;
  line-height:1.5;
  max-width:85%;
  word-wrap:break-word;
}
.alma-msg.alma{
  background:#fff;
  color:#1A1A1A;
  align-self:flex-start;
  border:1px solid #E0D5C5;
}
.alma-msg.user{
  background:#2D6A4F;
  color:#fff;
  align-self:flex-end;
}
.alma-msg.thinking{padding:8px 14px}
.alma-msg.cap{
  background:#FFF4E6;
  color:#8B4513;
  border:1px solid #E0D5C5;
  align-self:stretch;
  max-width:100%;
  font-size:12px;
}

.alma-typing{display:flex;gap:4px;align-items:center;padding:4px 0}
.alma-typing span{width:6px;height:6px;border-radius:50%;background:#8C7A62;animation:almaBounce 1.2s infinite}
.alma-typing span:nth-child(2){animation-delay:0.2s}
.alma-typing span:nth-child(3){animation-delay:0.4s}
@keyframes almaBounce{0%,80%,100%{transform:translateY(0)}40%{transform:translateY(-5px)}}

.alma-sugerencias{
  padding:0 16px 8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  background:#F5F0E8;
}
.alma-sug{
  background:#fff;
  border:1px solid #E0D5C5;
  border-radius:14px;
  padding:6px 12px;
  font-size:11px;
  color:#1A1A1A;
  cursor:pointer;
  transition:all 0.15s ease;
}
.alma-sug:hover{border-color:#2D6A4F;color:#2D6A4F}

.alma-input-row{
  border-top:1px solid #E0D5C5;
  padding:10px;
  display:flex;
  gap:8px;
  background:#fff;
}
.alma-input{
  flex:1;
  border:1px solid #E0D5C5;
  border-radius:18px;
  padding:8px 14px;
  font-size:13px;
  font-family:inherit;
  resize:none;
  max-height:80px;
  outline:none;
}
.alma-input:focus{border-color:#2D6A4F}
.alma-input:disabled{background:#F5F0E8;cursor:not-allowed}
.alma-send{
  background:#2D6A4F;
  color:#fff;
  border:none;
  border-radius:50%;
  width:36px;
  height:36px;
  cursor:pointer;
  font-size:16px;
  flex-shrink:0;
}
.alma-send:hover{opacity:0.85}
.alma-send:disabled{opacity:0.4;cursor:not-allowed}

.alma-powered{
  text-align:center;
  font-size:9px;
  color:#8C7A62;
  padding:6px;
  letter-spacing:1px;
  background:#fff;
  border-top:1px solid #E0D5C5;
}