/* =========================
   Chat Widget (Pro)
   ========================= */

#chatFab{
  position:fixed;
  right:20px;
  bottom:20px;
  width:56px;
  height:56px;
  border-radius:16px;              /* antes círculo, ahora más “app” */
  background:#111;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 12px 34px rgba(0,0,0,.22);
  z-index:9999;
  user-select:none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
#chatFab:hover{
  transform: translateY(-2px);
  box-shadow:0 16px 44px rgba(0,0,0,.26);
}
#chatFab:active{
  transform: translateY(0);
  box-shadow:0 10px 30px rgba(0,0,0,.2);
}

/* Ventana */
#chatWin{
  position:fixed;
  right:20px;
  bottom:90px;
  width:360px;
  max-width:calc(100vw - 40px);
  height:530px;
  background:#fff;
  border:1px solid #e6e6e6;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 16px 54px rgba(0,0,0,.20);
  display:flex;                 /* 👈 CLAVE */
  flex-direction:column;        /* 👈 CLAVE */
  z-index:9999;
  font-family:system-ui,Segoe UI,Arial;
  transform: translateY(10px) scale(.98);
  opacity:0;
  transition: transform .18s ease, opacity .18s ease;
}

/* Cuando lo muestras con JS (display:block), se verá más suave */
#chatWin[style*="display: block"],
#chatWin[style*="display:block"]{
  transform: translateY(0) scale(1);
  opacity:1;
}

/* Header */
#chatHead{
  background:#111;
  color:#fff;
  padding:12px 3px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
#chatHead .small{opacity:.85}

/* Log */
#chatLog{
  height:360px;
  overflow:auto;
  background: linear-gradient(180deg, #fafafa, #f6f6f6);
  padding:12px;
}

/* Scroll bonito */
#chatLog::-webkit-scrollbar{ width:10px; }
#chatLog::-webkit-scrollbar-track{ background:transparent; }
#chatLog::-webkit-scrollbar-thumb{
  background: rgba(0,0,0,.12);
  border-radius:999px;
  border:3px solid transparent;
  background-clip: padding-box;
}
#chatLog::-webkit-scrollbar-thumb:hover{ background: rgba(0,0,0,.18); }

/* Burbujas */
.msg{
  margin:10px 0;
  max-width:85%;
  padding:10px 12px;
  border-radius:14px;
  font-size:14px;
  line-height:1.25;
  box-shadow: 0 10px 18px rgba(0,0,0,.06);
  word-wrap:break-word;
  white-space:pre-wrap;
}

/* Usuario */
.me{
  background:#111;
  color:#fff;
  margin-left:auto;
  border-top-right-radius:8px;
}

/* Bot */
.bot{
  background:#fff;
  border:1px solid #e7e7e7;
  border-top-left-radius:8px;
}

/* Footer */
#chatFoot{
  display:flex;
  gap:8px;
  padding:12px;
  border-top:1px solid #eee;
  background:#fff;
}
#chatInput{
  flex:1;
  border:1px solid #ddd;
  border-radius:12px;
  padding:10px 12px;
  outline:none;
}
#chatInput:focus{
  border-color: rgba(0,0,0,.35);
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}
#chatSend{
  border:0;
  background:#111;
  color:#fff;
  border-radius:12px;
  padding:10px 14px;
  cursor:pointer;
  transition: transform .12s ease, opacity .12s ease;
}
#chatSend:hover{ transform: translateY(-1px); }
#chatSend:active{ transform: translateY(0); opacity:.9; }

.small{font-size:12px;opacity:.8}

/* =========================
   Mobile: bottom-sheet
   ========================= */
@media (max-width: 520px){
  #chatWin{
    right:12px;
    left:12px;
    bottom:12px;
    width:auto;
    max-width:none;
    height:78vh;
    border-radius:18px;
  }
  #chatFab{
    right:14px;
    bottom:14px;
    width:54px;
    height:54px;
  }
  #chatLog{
    height: calc(78vh - 56px - 58px); /* head + foot aprox */
  }
}
#chatTyping{
  opacity:.85;
  font-style: italic;
}
/* ===== Header del chat: fix definitivo para tu HTML ===== */
#chatHead{
  background:#111;
  color:#fff;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:64px;             /* más alto para 2 líneas */
  box-sizing:border-box;
}

/* Bloque izquierdo (título + subtítulo) */
#chatHead > div:first-child{
  flex:1 1 auto;               /* CLAVE: que tome espacio */
  min-width:0;                 /* permite encoger sin romper layout */
}

/* Fila del título + badge */
#chatHead > div:first-child > div:first-child{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

/* Título */
#chatHead b{
  display:block;
  font-size:16px;
  line-height:1.2;
  margin:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;      /* si se alarga, pone "..." */
  max-width:100%;
}

/* Badge “En línea” */
#chatStatus.badge{
  display:inline-flex;
  align-items:center;
  height:18px;
  padding:0 8px;
  border-radius:999px;
  font-size:11px;
  line-height:18px;
  background:rgba(255,255,255,.18);
  color:#fff;
  flex:0 0 auto;
}

/* Segunda línea: Ventas & Soporte + hora */
#chatHead .small{
  font-size:12px;
  line-height:1.2;
  opacity:.9;
  margin-top:4px;
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
}

/* Hora */
#chatTime.tinyHead{
  font-size:11px;
  opacity:.8;
  white-space:nowrap;
}

/* Bloque de botones (derecha) */
#chatHead > div:last-child{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  align-items:center;
}

/* Botones del header */
.headBtn{
  width:34px;
  height:34px;
  border:0;
  border-radius:10px;
  background:rgba(255,255,255,.10);
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.headBtn:hover{
  background:rgba(255,255,255,.18);
}
#chatHead{
  flex:0 0 auto;
}

#chatLog{
  flex:1 1 auto;                /* ocupa el espacio sobrante */
  overflow-y:auto;
}

#chatFoot{
  flex:0 0 auto;
}
/* ===== Mini-mejora: icono "activo" en sección abierta ===== */
.accordion-button:not(.collapsed) .accIcon{
  background: rgba(22,163,74,.10);          /* fallback (verde suave) */
  border-color: rgba(22,163,74,.35);
}
.accordion-button:not(.collapsed) .accIcon i{
  color: var(--accentColor, #16a34a);
}

/* Si quieres que el header también se sienta más “seleccionado” */
.accordion-button:not(.collapsed){
  border-bottom: 1px solid #eee;
}

/* Opcional: el icono en el título grande se vea un poquito distinto */
h3 .accIcon{
  width:36px;height:36px;border-radius:14px;
}