/* PegasusChat - backoffice del operador.
   Dos temas del mismo juego de fichas: lo que cambia son los valores, no las reglas.
   El color se define siempre en :root, nunca solo adentro de un bloque de tema. */

:root{
  --bg:#eef2f6; --surface:#fff; --surface-2:#f4f7fa; --surface-3:#e4eaf1;
  --ink:#111a24; --ink-2:#4a5666; --ink-3:#778393;
  --line:#dde4ec; --line-2:#c3ccd8;
  --accent:#0b6f8c; --accent-soft:#dceef5;
  --ok:#0c6b4f; --ok-soft:#dcefe7;
  --warn:#8a5209; --warn-soft:#fbf0dd;
  --danger:#a32c3c; --danger-soft:#fbe6e8;
  --shadow:0 1px 2px rgba(16,24,34,.05), 0 10px 30px -22px rgba(16,24,34,.5);
}
html[data-theme="dark"]{
  --bg:#11161d; --surface:#1a2029; --surface-2:#212934; --surface-3:#2b3441;
  --ink:#e8edf5; --ink-2:#a9b5c5; --ink-3:#7c8899;
  --line:#2a3140; --line-2:#3c4658;
  --accent:#38bdf8; --accent-soft:#123143;
  --ok:#34d399; --ok-soft:#0f3328;
  --warn:#e9b061; --warn-soft:#382c15;
  --danger:#f87a8b; --danger-soft:#3a1a20;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 28px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
}
button,input,select,textarea{font:inherit; color:inherit}
/* La bandeja maneja su propio scroll adentro: la pagina no se desplaza nunca. Sin esto
   alcanza un rebote para llevarse el encabezado y el campo de escribir fuera de vista. */
body.shell{overflow:hidden; overscroll-behavior:none}

/* ---------- login ---------- */
.login-wrap{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:22px}
.login{
  width:100%; max-width:370px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:28px 26px; box-shadow:var(--shadow); display:grid; gap:14px;
}
.login h1{margin:0; font-size:20px; font-weight:600}
.login .sub{margin:-8px 0 4px; font-size:13px; color:var(--ink-3)}
.field{display:grid; gap:5px}
.field label{font-size:12px; color:var(--ink-2)}
.field input, .field select{
  padding:10px 12px; border:1px solid var(--line-2); border-radius:9px;
  background:var(--bg); min-height:42px;
}
.field input:focus, .field select:focus{outline:2px solid var(--accent); outline-offset:-1px}
.msg-error{
  background:var(--danger-soft); border:1px solid var(--danger); color:var(--danger);
  border-radius:9px; padding:9px 12px; font-size:13px;
}

/* ---------- botones ---------- */
.btn{
  border:1px solid var(--line-2); background:var(--surface); color:var(--ink-2);
  border-radius:9px; padding:8px 14px; cursor:pointer; white-space:nowrap; min-height:38px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
}
.btn:hover:not(:disabled){border-color:var(--accent); color:var(--accent)}
.btn.pri{background:var(--accent); border-color:var(--accent); color:#fff; font-weight:500}
.btn.pri:hover:not(:disabled){opacity:.9; color:#fff}
.btn.dgr{border-color:var(--danger); color:var(--danger)}
.btn:disabled{opacity:.5; cursor:default}
.btn.wide{width:100%}
.spin{
  width:13px; height:13px; border-radius:50%; flex:none;
  border:2px solid currentColor; border-top-color:transparent; animation:sp .7s linear infinite;
}
@keyframes sp{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}

/* ---------- estructura ---------- */
/* Cuatro hijos, cuatro columnas. Con tres, la ficha caia a una segunda fila y
   partia la pantalla al medio. */
/* El orden importa: 100vh es el respaldo y 100dvh la buena, asi que va segunda. Al
   reves gana 100vh, que en el celular mide la pantalla CON las barras del navegador
   escondidas — o sea mas alto que lo que se ve. La app quedaba mas grande que la
   pantalla, la pagina entera se desplazaba, y al bajar se iban el encabezado y el
   campo para escribir. */
.app{height:100vh; height:100dvh; display:grid;
     grid-template-columns:56px 300px minmax(0,1fr) 250px;
     grid-template-rows:100%; overflow:hidden}
.rail{
  background:var(--surface-3); border-right:1px solid var(--line);
  display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 0;
}
.rail .sp{flex:1}
.rico{
  width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  color:var(--ink-3); cursor:pointer; position:relative; border:none; background:none;
}
.rico:hover{background:var(--surface-2); color:var(--ink)}
.rico.on{background:var(--accent); color:#fff}
.rico svg{width:19px; height:19px}
.cnt{
  position:absolute; top:1px; right:1px; min-width:17px; height:17px; padding:0 4px;
  border-radius:99px; font-size:10px; font-weight:600; display:grid; place-items:center;
  background:var(--danger); color:#fff;
}
.cnt.soft{background:var(--surface); color:var(--ink-2); border:1px solid var(--line-2)}
.av{
  width:34px; height:34px; border-radius:50%; background:var(--accent); color:#fff;
  display:grid; place-items:center; font-size:11px; font-weight:600; flex:none;
}
.av.gray{background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line)}

.col{display:flex; flex-direction:column; min-width:0; border-right:1px solid var(--line);
     background:var(--surface); overflow:hidden}
.col:last-child{border-right:none}
.colhead{padding:11px 14px; border-bottom:1px solid var(--line); background:var(--surface-2); flex:none}
.brand{font-weight:600; font-size:14px}
.brand small{display:block; font-weight:400; color:var(--ink-3); font-size:11.5px}
.tabs{display:flex; gap:4px; padding:9px 10px; border-bottom:1px solid var(--line);
      overflow-x:auto; flex:none; scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tab{
  border:none; background:none; color:var(--ink-3); font-size:12.5px; padding:5px 9px;
  border-radius:7px; cursor:pointer; white-space:nowrap;
}
.tab.on{background:var(--accent-soft); color:var(--accent); font-weight:600}

/* Cuando la columna se angosta, las cuatro pestañas dejan de entrar y se leen a medias.
   Ahi pasan a un desplegable, que muestra la cantidad de cada una igual. */
.tabsel{display:none; margin:9px 10px; padding:8px 11px; border:1px solid var(--line-2);
        border-radius:8px; background:var(--bg); width:calc(100% - 20px); font-size:13px}
.tabsel:focus{outline:2px solid var(--accent); outline-offset:-1px}

/* ---------- buscador de operadores ---------- */
.picker{border:1px solid var(--line); border-radius:8px; max-height:190px; overflow-y:auto;
        background:var(--bg); margin-top:6px}
.pick{padding:8px 12px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--line)}
.pick:last-child{border-bottom:none}
.pick:hover{background:var(--surface-2)}
.pick.on{background:var(--accent-soft); color:var(--accent); font-weight:600}
.pick.vacio{color:var(--ink-3); cursor:default; font-style:italic}
.pick.vacio:hover{background:none}

.rows{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch}
.row{
  display:grid; grid-template-columns:34px 1fr auto; gap:10px; padding:11px 14px;
  border-bottom:1px solid var(--line); cursor:pointer; align-items:start;
}
.row:hover{background:var(--surface-2)}
.row.on{background:var(--accent-soft)}
.rname{font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rprev{color:var(--ink-3); font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rmeta{text-align:right; display:grid; gap:4px; justify-items:end}
.rtime{font-size:11px; color:var(--ink-3)}
.rtime.hot{color:var(--danger); font-weight:600}
.chip{
  font-size:10.5px; padding:1px 7px; border-radius:99px; border:1px solid var(--line-2);
  color:var(--ink-3); white-space:nowrap; display:inline-block;
}
.chip.acc{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
.chip.warn{border-color:var(--warn); color:var(--warn); background:var(--warn-soft)}
.chip.dgr{border-color:var(--danger); color:var(--danger); background:var(--danger-soft)}
.unread{background:var(--danger); color:#fff; border-color:var(--danger); font-weight:600}

/* ---------- conversacion ---------- */
.chead{
  padding:10px 15px; border-bottom:1px solid var(--line); background:var(--surface-2);
  display:flex; gap:10px; align-items:center; flex:none;
}
.chead .who{font-weight:600; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.chead .sub{color:var(--ink-3); font-size:11.5px}
.chead .acts{margin-left:auto; display:flex; gap:6px; flex:none}
.back{display:none}

.thread{flex:1; overflow-y:auto; padding:16px; background:var(--bg);
        display:flex; flex-direction:column; gap:8px; -webkit-overflow-scrolling:touch}
.msg{
  max-width:74%; padding:8px 12px; border-radius:13px; font-size:13.5px;
  border:1px solid var(--line); background:var(--surface); word-wrap:break-word;
  overflow-wrap:anywhere; animation:in .16s ease-out;
}
@keyframes in{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){.msg{animation:none}}
.msg .who{display:block; font-size:10.5px; color:var(--ink-3); margin-bottom:2px}
.msg .tm{font-size:10px; color:var(--ink-3); margin-left:8px}
/* El acuse solo existe del lado del operador: el paciente no ve el de nadie, ni el
   propio. Un tilde apagado mientras esta sin leer, dos en color cuando lo abrio — la
   diferencia se ve de un vistazo, sin tener que leer la etiqueta. */
.msg .seen{
  display:flex; align-items:center; justify-content:flex-end; gap:4px;
  font-size:10px; color:var(--ink-3); margin-top:4px;
}
.msg .seen .ck{height:13px; flex:none; fill:none; stroke:currentColor;
               stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.msg .seen .one{width:9px}
.msg .seen .two{width:13px; display:none}
.msg .seen.read{color:var(--accent)}
.msg .seen.read .one{display:none}
.msg .seen.read .two{display:block}
/* Mientras viaja no hay tilde: no hay nada que confirmar todavia. */
.msg.sending .seen .ck, .msg.failed .seen{visibility:hidden}
.msg.them{align-self:flex-start; border-bottom-left-radius:4px}
.msg.mine{align-self:flex-end; background:var(--accent-soft); border-color:var(--accent);
          border-bottom-right-radius:4px}
.msg.mine.sending{opacity:.6}
.msg.mine.failed{border-color:var(--danger); background:var(--danger-soft)}
.msg.note{align-self:flex-end; background:var(--warn-soft); border-color:var(--warn);
          border-style:dashed}
.msg.note .who{color:var(--warn)}
.msg.bot{align-self:flex-start; background:var(--surface-2); border-style:dashed; opacity:.92}
.msg.sys{align-self:center; background:none; border:none; color:var(--ink-3); font-size:11.5px;
         text-align:center; max-width:90%}
.daysep{align-self:center; font-size:11px; color:var(--ink-3)}
.botcap{
  align-self:center; font-size:10.5px; color:var(--ink-3); letter-spacing:.06em;
  text-transform:uppercase; border-top:1px solid var(--line); width:100%;
  text-align:center; padding-top:8px;
}
.retry{color:var(--danger); text-decoration:underline; cursor:pointer; font-size:11px; margin-left:6px}

.quick{display:flex; gap:6px; padding:9px 15px 0; flex-wrap:wrap; background:var(--bg); flex:none}
.qc{
  font-size:11.5px; padding:3px 10px; border-radius:99px; border:1px solid var(--line-2);
  color:var(--ink-2); background:var(--surface); cursor:pointer;
}
.qc:hover{border-color:var(--accent); color:var(--accent)}
.composer{
  display:flex; gap:8px; align-items:flex-end; padding:11px 15px;
  border-top:1px solid var(--line); background:var(--surface); flex:none;
  padding-bottom:calc(11px + env(safe-area-inset-bottom));
}
.composer textarea{
  flex:1; resize:none; font-size:14px; line-height:1.4; padding:9px 12px; min-height:40px;
  max-height:130px; border:1px solid var(--line-2); border-radius:10px; background:var(--bg);
}
.composer textarea:focus{outline:2px solid var(--accent); outline-offset:-1px}
.composer.note textarea{background:var(--warn-soft); border-color:var(--warn)}

.side{padding:14px; display:flex; flex-direction:column; gap:14px; overflow-y:auto;
      background:var(--surface); border-left:1px solid var(--line); min-width:0}
.sidename{font-weight:600; font-size:14px}
.sublab{font-size:10.5px; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-3)}
.kv{display:grid; gap:5px; font-size:12px}
.kv div{display:flex; justify-content:space-between; gap:10px}
.kv span{color:var(--ink-3)}
.kv b{font-weight:500; text-align:right; word-break:break-all}

.empty{flex:1; display:grid; place-items:center; background:var(--bg); color:var(--ink-3);
       font-size:13px; padding:24px; text-align:center}

/* ---------- skeleton ---------- */
.skel{background:var(--surface-3); border-radius:5px; height:10px; animation:pulse 1.2s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1} 50%{opacity:.5}}
@media (prefers-reduced-motion:reduce){.skel{animation:none}}

/* ---------- avisos ---------- */
.toasts{position:fixed; left:50%; bottom:22px; transform:translateX(-50%); display:grid;
        gap:8px; z-index:60; width:max-content; max-width:92vw}
.toast{
  background:var(--surface); border:1px solid var(--line-2); border-left:3px solid var(--accent);
  border-radius:10px; padding:10px 14px; font-size:13px; box-shadow:var(--shadow);
  animation:up .2s ease-out;
}
.toast.err{border-left-color:var(--danger)}
@keyframes up{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

/* ---------- modal ---------- */
.veil{
  position:fixed; inset:0; background:rgba(8,12,18,.45); display:grid; place-items:center;
  z-index:70; padding:18px; animation:fade .15s ease-out;
}
@keyframes fade{from{opacity:0} to{opacity:1}}
.modal{
  width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line-2);
  border-radius:14px; box-shadow:var(--shadow); overflow:hidden;
}
.mhead{padding:14px 17px; border-bottom:1px solid var(--line); font-weight:600; font-size:14px}
.mbody{padding:16px 17px; display:grid; gap:13px; font-size:13px}
.mbody textarea{
  min-height:80px; resize:vertical; padding:9px 12px; border:1px solid var(--line-2);
  border-radius:9px; background:var(--bg); font-size:13.5px;
}
.mfoot{padding:12px 17px; border-top:1px solid var(--line); display:flex; gap:8px;
       justify-content:flex-end; background:var(--surface-2); flex-wrap:wrap}
.menu{position:absolute; left:56px; bottom:56px; width:230px; z-index:65;
      background:var(--surface); border:1px solid var(--line-2); border-radius:11px;
      box-shadow:var(--shadow); overflow:hidden}
.menu .mt{padding:9px 13px; border-bottom:1px solid var(--line); font-size:10.5px;
          letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3)}
.menu .mi{padding:9px 13px; font-size:13px; cursor:pointer; display:flex;
          justify-content:space-between; gap:10px; align-items:center}
.menu .mi:hover{background:var(--surface-2)}
.menu .mi.on{color:var(--accent); font-weight:600}

/* ---------- responsive ----------
   En pantalla angosta no hay tres columnas: hay una vista por vez. */
/* Por debajo de esto las cuatro pestañas no entran en la columna. */
@media (max-width:1320px){
  .tabs{display:none}
  .tabsel{display:block}
}
@media (max-width:1100px){
  .app{grid-template-columns:56px 280px minmax(0,1fr)}
  .side{display:none}
  .side.show{display:flex; position:fixed; right:0; top:0; bottom:0; width:280px; z-index:50;
             box-shadow:var(--shadow)}
}
@media (max-width:760px){
  .app{grid-template-columns:1fr; grid-template-rows:1fr}
  .rail{
    position:fixed; bottom:0; left:0; right:0; top:auto; height:56px; z-index:40;
    flex-direction:row; justify-content:space-around; border-right:none;
    border-top:1px solid var(--line); padding:6px 8px;
    padding-bottom:calc(6px + env(safe-area-inset-bottom));
  }
  .rail .sp{display:none}
  .col{grid-column:1; grid-row:1}
  .col.lista{display:flex; padding-bottom:56px}
  .col.chat{display:none}
  body.viendo .col.lista{display:none}
  /* La barra de abajo es fija y flota sobre la columna. Sin reservarle el alto, el
     campo para escribir queda debajo de los iconos y no se puede tocar. */
  body.viendo .col.chat{display:flex; padding-bottom:calc(56px + env(safe-area-inset-bottom))}
  .back{display:inline-flex}
  .side.show{width:100%}
  /* El area segura ya la reserva la columna: repetirla aca la contaria dos veces. */
  .composer{padding-bottom:11px}
  .msg{max-width:88%}
  .menu{left:8px; right:8px; bottom:66px; width:auto}
}

/* ---------- chat interno ----------
   Vive en las mismas columnas que la bandeja de pacientes y se turna con ella: son
   dos zonas, no dos filtros de lo mismo. */
.ihead{display:flex; gap:8px; padding:10px 12px; border-bottom:1px solid var(--line)}
.ihead input{
  flex:1; min-width:0; padding:8px 11px; border:1px solid var(--line-2); border-radius:9px;
  background:var(--bg); font-size:13px; color:var(--ink);
}
.ihead .btn{padding:8px 10px}

/* Una fila de grupo se distingue de un 1-a-1 sin leer: la inicial es cuadrada. */
.row .av.grp{border-radius:7px}

/* ---------- adjuntos ---------- */
.adjunto{
  display:flex; align-items:center; gap:9px; margin:0 14px 8px; padding:8px 11px;
  border:1px solid var(--line-2); border-radius:10px; background:var(--surface-2); font-size:12.5px;
}
.adjunto svg{width:16px; height:16px; flex:none; color:var(--ink-3)}
.adjunto .nom{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.adjunto .quitar{cursor:pointer; color:var(--ink-3); font-size:16px; line-height:1; padding:0 3px}
.adjunto .quitar:hover{color:var(--danger)}

/* El adjunto dentro de la burbuja: se ve que es un archivo antes de leer el nombre. */
.msg .file{
  display:flex; align-items:center; gap:8px; margin-top:5px; padding:7px 10px;
  border:1px solid var(--line-2); border-radius:9px; background:var(--surface);
  color:inherit; text-decoration:none; font-size:12.5px;
}
.msg .file:hover{border-color:var(--accent)}
.msg .file svg{width:16px; height:16px; flex:none; color:var(--accent)}
.msg .file .nom{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.msg .file .peso{flex:none; font-size:11px; color:var(--ink-3)}

/* Una imagen se ve, no se anuncia. El alto maximo evita que una foto vertical de
   telefono ocupe el hilo entero. */
.msg .foto{display:block; margin-top:5px; border-radius:9px; overflow:hidden; line-height:0}
.msg .foto img{
  display:block; max-width:100%; max-height:280px; width:auto; height:auto;
  background:var(--surface-2);
}

/* ---------- miembros y vistos ---------- */
.mpick{display:grid; gap:8px}
.mpick input[type=search]{
  padding:9px 12px; border:1px solid var(--line-2); border-radius:9px; background:var(--bg);
  font-size:13.5px; color:var(--ink);
}
.mpick .lista2{max-height:210px; overflow:auto; border:1px solid var(--line); border-radius:9px}
.mpick .op{display:flex; align-items:center; gap:9px; padding:8px 11px; cursor:pointer; font-size:13px}
.mpick .op:hover{background:var(--surface-2)}
.mpick .op input{margin:0}
.mpick .cuenta{font-size:11.5px; color:var(--ink-3)}
.mchips{display:flex; flex-wrap:wrap; gap:6px}
.mchip{
  display:inline-flex; align-items:center; gap:6px; padding:4px 9px; font-size:12px;
  border:1px solid var(--line-2); border-radius:999px; background:var(--surface-2);
}
.mchip b{cursor:pointer; color:var(--ink-3); font-weight:400}
.mchip b:hover{color:var(--danger)}

.miembros{display:grid; gap:2px; max-height:300px; overflow:auto}
.miembro{display:flex; align-items:center; gap:9px; padding:8px 4px; font-size:13px}
.miembro .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.miembro .tag{font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent)}
.miembro .tag.out{color:var(--ink-3)}
.miembro .btn{padding:4px 9px; font-size:11.5px}

.vistos{display:grid; gap:1px; font-size:13px}
.vistos .v{display:flex; justify-content:space-between; gap:12px; padding:7px 2px}
.vistos .v span:last-child{color:var(--ink-3); font-size:11.5px; white-space:nowrap}
.vistos .v.no span:last-child{color:var(--warn)}
.msg .seen.link{cursor:pointer}
.msg .seen.link:hover{text-decoration:underline}

/* ---------- filtro de sucursal ----------
   Un desplegable con buscador, no un <select>: con cuarenta sucursales un select
   nativo obliga a scrollear a ciegas. Cruza con las pestañas de estado. */
.sucbar{position:relative; padding:0 10px 9px; flex:none}
.sucsel{
  width:100%; display:flex; align-items:center; gap:8px; justify-content:space-between;
  padding:8px 11px; border:1px solid var(--line-2); border-radius:8px;
  background:var(--bg); color:var(--ink-2); font-size:12.5px; cursor:pointer; min-height:38px;
}
.sucsel:hover{border-color:var(--accent); color:var(--accent)}
.sucsel span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.sucsel svg{width:15px; height:15px; flex:none}
.sucsel.filtrando{border-color:var(--accent); color:var(--accent); font-weight:600}

.sucpop{
  position:absolute; left:10px; right:10px; top:calc(100% - 4px); z-index:60;
  background:var(--surface); border:1px solid var(--line-2); border-radius:10px;
  box-shadow:var(--shadow); overflow:hidden;
}
.sucpop input{
  width:100%; border:none; border-bottom:1px solid var(--line); padding:10px 12px;
  background:var(--surface); font-size:13px; color:var(--ink);
}
.sucpop input:focus{outline:2px solid var(--accent); outline-offset:-2px}
.suclista{max-height:230px; overflow-y:auto}
.sucit{padding:9px 12px; font-size:13px; cursor:pointer; display:flex;
       justify-content:space-between; gap:10px; align-items:center}
.sucit:hover{background:var(--surface-2)}
.sucit.on{color:var(--accent); font-weight:600; background:var(--accent-soft)}
.sucit.sep{border-top:1px solid var(--line)}
.sucit.vacio{color:var(--ink-3); font-style:italic; cursor:default}
.sucit.vacio:hover{background:none}

/* La sucursal en la fila de la bandeja: dato de contexto, no titulo. */
.rsuc{font-size:10.5px; color:var(--ink-3); white-space:nowrap; overflow:hidden;
      text-overflow:ellipsis}