/* El panel de charla. Se parece a un chat de mensajeria porque esa forma ya la
   sabe usar todo el mundo, pero vive adentro del portal: sin instalar nada,
   sin dar el telefono y sin perder lo hablado. */

/* ---------- cabecera ---------- */
.lshd{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding-bottom:14px;border-bottom:1px solid var(--line)}

.lsid{display:flex;align-items:center;gap:13px;flex:1;min-width:230px}
.lsid .av{flex:none;width:52px;height:52px;border-radius:14px;overflow:hidden;
  background:linear-gradient(160deg,#F3F5F9 0%,#E7EBF2 100%);
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center}
.lsid .av img{width:100%;height:100%;object-fit:cover;display:block}
.lsid .tt{min-width:0}
.lsid h1{font-family:"Days One";font-size:23px;line-height:1.1;margin:0}
.lsid .sub{display:block;margin-top:3px;font-size:12.4px;color:var(--mut)}
.lsid .sub #chattag{font-family:"IBM Plex Mono";font-size:11.5px;color:var(--red)}

.lsmaq{flex:none;max-width:340px}
.lsmaq .mq{display:flex;align-items:center;gap:11px;padding:9px 13px;
  border:1px solid var(--line2);border-radius:14px;background:var(--paper)}
.lsmaq .mq .i{flex:none;width:22px;height:22px;color:var(--red);display:flex;align-items:center;justify-content:center}
.lsmaq .mq .i svg{width:21px;height:21px}
.lsmaq .mq .d{display:flex;flex-direction:column;gap:1px;min-width:0}
.lsmaq .mq .d b{font-size:12.8px;font-weight:600;line-height:1.3;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}
.lsmaq .mq .d .l{font-family:"IBM Plex Mono";font-size:11px;color:var(--mut);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lsmaq .mq .d em{font-style:normal}
.lsmaq .mq .d em.ok{color:#1F7A43}
.lsmaq .mq .d em.no{color:var(--red)}
.lsmaq .mq .ch{flex:none;border:none;background:none;cursor:pointer;font-family:inherit;
  font-size:12px;font-weight:600;color:var(--red);padding:0 2px}
.lsmaq .mq .ch:hover{text-decoration:underline}

/* ---------- la charla ---------- */
.chat{border:1px solid var(--line);border-radius:20px;background:var(--paper);
  overflow:hidden;display:flex;flex-direction:column;margin-top:16px}

.chatbody{height:min(56vh,500px);overflow-y:auto;padding:20px 18px;
  display:flex;flex-direction:column;gap:14px;
  background:linear-gradient(170deg,#FBFCFE 0%,#F5F7FA 100%)}

.chatvacio{margin:auto;text-align:center;max-width:380px;display:flex;flex-direction:column;gap:8px}
.chatvacio b{font-family:"Days One";font-size:16px}
.chatvacio span{font-size:13.2px;color:var(--mut);line-height:1.5}

.maqsel{margin:auto;width:100%;max-width:460px;display:flex;flex-direction:column;gap:12px;text-align:center}
.maqsel>b{font-family:"Days One";font-size:15.5px}
.maqops{display:flex;flex-direction:column;gap:9px}
.maqop{display:flex;align-items:center;gap:12px;width:100%;padding:12px 15px;text-align:left;
  border:1px solid var(--line2);border-radius:14px;background:var(--paper);cursor:pointer;
  font-family:inherit;color:var(--ink);transition:.18s}
.maqop:hover{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 6px 18px rgba(217,28,38,.12);transform:translateY(-1px)}
.maqop .i{flex:none;width:26px;height:26px;color:var(--red);display:flex;align-items:center;justify-content:center}
.maqop .i svg{width:24px;height:24px}
.maqop .d{display:flex;flex-direction:column;gap:2px;min-width:0}
.maqop .d b{font-size:13.6px;font-weight:600;line-height:1.3}
.maqop .d em{font-style:normal;font-family:"IBM Plex Mono";font-size:11.5px;color:var(--mut)}

.bur{max-width:78%;display:flex;flex-direction:column;gap:4px}
.bur.ls{align-self:flex-start}
.bur.yo{align-self:flex-end;align-items:flex-end}

.bur .qn{font-family:"IBM Plex Mono";font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--red);padding-left:2px}

.bur .tx{padding:11px 15px;border-radius:16px;font-size:14px;line-height:1.55;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);
  box-shadow:0 1px 3px rgba(17,17,19,.05)}
.bur .tx b{font-weight:600}
.bur .tx code{font-family:"IBM Plex Mono";font-size:12.6px;background:#F1F3F7;
  padding:1px 5px;border-radius:5px}
.bur.ls .tx{border-bottom-left-radius:5px}
.bur.yo .tx{border-bottom-right-radius:5px;background:var(--ink);color:#fff;border-color:transparent}
.bur.yo .tx code{background:rgba(255,255,255,.16)}

.sysmsg{align-self:center;max-width:80%;text-align:center;font-size:12.4px;
  color:var(--mut);line-height:1.5;padding:6px 14px;border-radius:10px;background:#EEF1F6}

.bur .tx.esc{display:flex;gap:5px;align-items:center;padding:15px}
.bur .tx.esc i{width:6px;height:6px;border-radius:50%;background:var(--mut2);
  animation:chatpunto 1.25s infinite ease-in-out}
.bur .tx.esc i:nth-child(2){animation-delay:.18s}
.bur .tx.esc i:nth-child(3){animation-delay:.36s}
@keyframes chatpunto{0%,60%,100%{opacity:.28;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}
@media(prefers-reduced-motion:reduce){.bur .tx.esc i{animation:none;opacity:.5}}
.bur .lento{font-size:11.8px;color:var(--mut);padding-left:4px}

.chatpie{display:flex;gap:10px;align-items:flex-end;padding:12px;border-top:1px solid var(--line);background:var(--paper)}
.chatpie textarea{flex:1;resize:none;border:1px solid var(--line2);border-radius:14px;
  padding:11px 14px;font-family:inherit;font-size:14px;line-height:1.45;color:var(--ink);
  background:var(--paper);max-height:150px;outline:none;transition:.18s}
.chatpie textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(217,28,38,.10)}
.chatpie textarea:disabled{background:#F5F7FA;color:var(--mut2);cursor:not-allowed}

.chatsend{flex:none;width:42px;height:42px;border-radius:13px;border:none;cursor:pointer;
  background:var(--red);color:#fff;display:flex;align-items:center;justify-content:center;transition:.18s}
.chatsend svg{width:20px;height:20px}
.chatsend:hover{filter:brightness(1.08)}
.chatsend:disabled{background:var(--line2);cursor:default;filter:none}

.chatcerrada{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-top:1px solid var(--line);background:#F7F8FB}
.chatcerrada .t{flex:1;min-width:220px;display:flex;flex-direction:column;gap:2px}
.chatcerrada .t b{font-size:13.6px}
.chatcerrada .t span{font-size:12.4px;color:var(--mut);line-height:1.45}

.chatacts{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.chatact{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:12px;
  border:1px solid var(--line2);background:var(--paper);cursor:pointer;
  font-family:inherit;font-size:13.2px;font-weight:600;color:var(--ink);transition:.18s}
.chatact svg{width:17px;height:17px;color:var(--red)}
.chatact:hover{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}

.linkbtn{border:none;background:none;padding:0;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:var(--red);text-decoration:underline}

/* ---------- encuesta al finalizar ---------- */
.chatovl{position:fixed;inset:0;z-index:120;background:rgba(17,17,19,.42);
  display:flex;align-items:center;justify-content:center;padding:20px}
.chatcard{width:100%;max-width:400px;background:var(--paper);border-radius:20px;
  padding:26px 24px;display:flex;flex-direction:column;gap:12px;text-align:center;
  box-shadow:0 24px 60px rgba(17,17,19,.28)}
.chatcard>b{font-family:"Days One";font-size:17px;line-height:1.25}
.chatcard .eayuda{font-size:12.6px;color:var(--mut);margin-top:-6px}
.chatcard textarea{resize:none;border:1px solid var(--line2);border-radius:13px;padding:10px 13px;
  font-family:inherit;font-size:13.6px;line-height:1.45;color:var(--ink);outline:none}
.chatcard textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(217,28,38,.10)}

.ebtns{display:flex;gap:10px;justify-content:center}
.ebtns.col{flex-direction:column}
.ebtn{flex:1;padding:11px 18px;border-radius:13px;border:1px solid var(--line2);
  background:var(--paper);cursor:pointer;font-family:inherit;font-size:14px;
  font-weight:600;color:var(--ink);transition:.18s}
.ebtn:hover{border-color:var(--red);box-shadow:0 0 0 1px var(--red)}
.ebtn.si{background:#1F7A43;border-color:transparent;color:#fff}
.ebtn.si:hover{filter:brightness(1.08);box-shadow:none}
.ebtn.no{background:var(--ink);border-color:transparent;color:#fff}
.ebtn.no:hover{filter:brightness(1.3);box-shadow:none}
.ebtn.alt{background:transparent}

/* ---------- la lista de charlas en Historial de servicio ----------
   Cuatro columnas propias: numero, consulta, estado y si se resolvio.
   Se define la grilla aca en vez de usar la de .list generica, que tiene tres. */
.list.charlas .cols.charlacols,
.list.charlas .r.charla{display:grid;align-items:center;gap:14px;
  grid-template-columns:104px 1fr 104px 116px}
.list.charlas .r.charla{cursor:pointer;transition:.15s;user-select:none}
.list.charlas .r.charla:hover{background:#F5F7FA}
.list.charlas .r.charla em{display:block;font-style:normal;font-size:12px;color:var(--mut);margin-top:2px}
.list.charlas .cols.charlacols .st,
.list.charlas .cols.charlacols .rs,
.list.charlas .r.charla .st,
.list.charlas .r.charla .rs{text-align:center}

/* Verde sigue vivo, rojo ya termino. De un vistazo se ve que quedo abierto. */
.pill{display:inline-block;padding:4px 11px;border-radius:999px;
  font-family:"IBM Plex Mono";font-size:11px;letter-spacing:.04em;white-space:nowrap;
  border:1px solid transparent}
.pill.abi{background:#E4F4EA;color:#1F7A43;border-color:#BFE4CD}
.pill.cer{background:#FBE9EA;color:#A31F27;border-color:#F1C7CA}
.pill.der{background:#FCF0DC;color:#8A5A11;border-color:#F0DBB4}
.pill.si{background:#E4F4EA;color:#1F7A43;border-color:#BFE4CD}
.pill.no{background:#FBE9EA;color:#A31F27;border-color:#F1C7CA}
.pill.gris{background:#F0F2F6;color:var(--mut);border-color:#E1E5EC}
.pill.hueco{background:none;color:var(--mut2);border-color:transparent}

.chatpista{font-size:12.4px;color:var(--mut);margin-top:8px}

@media(max-width:820px){
  .lsmaq{max-width:none;width:100%}
  .lsmaq .mq .d b{max-width:none}
}
@media(max-width:700px){
  .bur{max-width:88%}
  .chatbody{height:min(56vh,420px);padding:16px 14px}
  .lsid h1{font-size:20px}
  .lsid .av{width:44px;height:44px}
  .chatacts .chatact{flex:1;justify-content:center}
  .list.charlas .cols.charlacols,
  .list.charlas .r.charla{grid-template-columns:76px 1fr 92px;gap:10px}
  .list.charlas .cols.charlacols .rs,
  .list.charlas .r.charla .rs{display:none}
}