/* PegasusChat - panel de administracion (staff Pegasus).
   Mismo juego de fichas que el backoffice del operador, con un acento distinto a
   proposito: el que entra aca edita connection strings de todos los clientes y
   conviene que vea de un vistazo que no esta en la bandeja. */

:root{
  --bg:#eef1f6; --surface:#fff; --surface-2:#f5f7fb; --surface-3:#e5e9f2;
  --ink:#141a26; --ink-2:#4b5468; --ink-3:#7b8497;
  --line:#dce1ec; --line-2:#c2c9d9;
  --accent:#3b3f8f; --accent-soft:#e4e5f6;
  --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);
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#101420; --surface:#191e2b; --surface-2:#202636; --surface-3:#2a3143;
    --ink:#e9ecf5; --ink-2:#aab3c5; --ink-3:#7d8699;
    --line:#293043; --line-2:#3b445a;
    --accent:#9aa2f5; --accent-soft:#1d2144;
    --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}
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}
a{color:var(--accent)}

/* ---------- marca ---------- */
.marca{display:flex; align-items:center; gap:11px}
.marca svg{width:32px; height:32px; color:var(--accent); flex:none}
.marca .n{font-size:18px; font-weight:600; letter-spacing:-.2px}
.marca .n span{font-weight:400; color:var(--ink-3)}

/* ---------- login / setup ---------- */
.centro{min-height:100vh; min-height:100dvh; display:grid; place-items:center; padding:22px}
.tarjeta{
  width:100%; max-width:400px; background:var(--surface); border:1px solid var(--line);
  border-radius:16px; padding:28px 26px; box-shadow:var(--shadow); display:grid; gap:14px;
}
.tarjeta .sub{margin:-6px 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, .field textarea{
  padding:10px 12px; border:1px solid var(--line-2); border-radius:9px;
  background:var(--bg); min-height:42px; width:100%;
}
.field textarea{min-height:76px; resize:vertical; line-height:1.5}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:2px solid var(--accent); outline-offset:-1px
}
.field .ayuda{font-size:12px; color:var(--ink-3)}
.field.mono input, .field.mono textarea{font-family:var(--mono); font-size:12.5px}
.chk{display:flex; gap:9px; align-items:center; font-size:13.5px; color:var(--ink-2)}
.chk input{width:16px; height:16px; min-height:0}

.msg-error{
  background:var(--danger-soft); border:1px solid var(--danger); color:var(--danger);
  border-radius:9px; padding:9px 12px; font-size:13px;
}
.msg-ok{
  background:var(--ok-soft); border:1px solid var(--ok); color:var(--ok);
  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: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 ---------- */
.top{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:12px 20px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.top .sep{flex:1}
.top .quien{font-size:13px; color:var(--ink-3)}
.hoja{max-width:1040px; margin:0 auto; padding:22px 20px 60px; display:grid; gap:18px}
.cab{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap}
.cab h1{margin:0; font-size:20px; font-weight:600; letter-spacing:-.2px}
.cab p{margin:0; font-size:13px; color:var(--ink-3)}
.cab .sep{flex:1}

.caja{
  background:var(--surface); border:1px solid var(--line); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden;
}
.caja > h2{
  margin:0; padding:13px 18px; font-size:13px; font-weight:600; color:var(--ink-2);
  letter-spacing:.03em; text-transform:uppercase; border-bottom:1px solid var(--line);
  background:var(--surface-2);
}
.caja .cuerpo{padding:18px; display:grid; gap:14px}
.dos{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width:640px){ .dos{grid-template-columns:1fr} }

/* ---------- grilla de clientes ---------- */
.tabla-scroll{overflow-x:auto}
table.grilla{border-collapse:collapse; width:100%; min-width:620px}
table.grilla th{
  text-align:left; font-size:11.5px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--ink-3); padding:10px 14px;
  border-bottom:1px solid var(--line); background:var(--surface-2); white-space:nowrap;
}
table.grilla td{padding:12px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
table.grilla tr:last-child td{border-bottom:0}
table.grilla tbody tr:hover td{background:var(--surface-2)}
table.grilla a{font-weight:500; text-decoration:none}
table.grilla a:hover{text-decoration:underline}
/* El codigo de cliente se guarda y se tipea en mayusculas; el usuario del panel no.
   Mostrarlo en mayusculas haria dudar de con que se entra. */
.cod{font-family:var(--mono); font-size:12.5px; text-transform:uppercase}
.usr{font-family:var(--mono); font-size:12.5px}
.tenue{color:var(--ink-3); font-size:12.5px}

.pill{
  display:inline-block; padding:2px 9px; border-radius:999px; font-size:11.5px;
  font-weight:600; letter-spacing:.02em; white-space:nowrap;
}
.pill.si{background:var(--ok-soft); color:var(--ok)}
.pill.no{background:var(--surface-3); color:var(--ink-3)}
.pill.mal{background:var(--danger-soft); color:var(--danger)}

/* ---------- salida del script ---------- */
.salida{
  margin:0; padding:13px 15px; background:var(--surface-2); border:1px solid var(--line);
  border-radius:10px; font-family:var(--mono); font-size:12px; line-height:1.6;
  white-space:pre-wrap; word-break:break-word; max-height:320px; overflow:auto;
}
.salida.mal{background:var(--danger-soft); border-color:var(--danger); color:var(--danger)}

.acciones{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.vacio{padding:30px 18px; text-align:center; color:var(--ink-3); font-size:13.5px}