/* 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}

/* ---------- login ---------- */
.login-wrap{min-height:100dvh; min-height:100vh; 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. */
.app{height:100dvh; height:100vh; 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}
.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}
  body.viendo .col.chat{display:flex}
  .back{display:inline-flex}
  .side.show{width:100%}
  .composer{padding-bottom:calc(11px + env(safe-area-inset-bottom))}
  .msg{max-width:88%}
  .menu{left:8px; right:8px; bottom:66px; width:auto}
}