/* ============================================================
   Desktop Shell — sistema visual del panel de gestión (admin/área/login)
   Estética: aplicación de escritorio (ventana, sidebar, taskbar),
   fondo "aurora" azul/índigo sobre navy oscuro, superficies de vidrio.
   Distinto del tema industrial del kiosco (ese usa assets/styles.css).
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

:root{
  --ds-bg-1:#0a0f1e; --ds-bg-2:#0d1424; --ds-bg-3:#090d18;
  --ds-blob-1:#15264d; --ds-blob-2:#1a1340;

  --ds-surface-weak:rgba(255,255,255,.03);
  --ds-surface:rgba(255,255,255,.05);
  --ds-surface-strong:rgba(255,255,255,.08);
  --ds-card:linear-gradient(160deg, rgba(22,29,50,.88), rgba(12,17,32,.92));
  --ds-solid:#161d32;

  --ds-border:rgba(148,163,255,.16);
  --ds-border-strong:rgba(148,163,255,.3);

  --ds-text:#e6ecf7;
  --ds-text-2:#9fb0cc;
  --ds-text-3:#6f82a3;

  --ds-accent:#3b82f6;
  --ds-accent-2:#6366f1;
  --ds-accent-bg:rgba(59,130,246,.14);
  --ds-accent-bg-strong:rgba(59,130,246,.22);
  --ds-accent-text:#93c5fd;

  --ds-ok:#34d399; --ds-ok-bg:rgba(52,211,153,.16); --ds-ok-border:rgba(52,211,153,.3);
  --ds-warn:#fbbf24; --ds-warn-bg:rgba(251,191,36,.16); --ds-warn-border:rgba(251,191,36,.3);
  --ds-err:#f87171; --ds-err-bg:rgba(248,113,113,.15); --ds-err-border:rgba(248,113,113,.32);

  --ds-shadow:rgba(2,6,18,.45);
  --ds-font:'IBM Plex Sans',-apple-system,'Segoe UI',system-ui,sans-serif;
  --ds-mono:'IBM Plex Mono',ui-monospace,monospace;

  --s1:2px; --s2:4px; --s3:6px; --s4:8px; --s5:10px; --s6:14px; --s7:18px; --s8:24px;
  --radius:8px; --radius-sm:6px;
}

*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;font-family:var(--ds-font);font-size:12px;color:var(--ds-text);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font-family:inherit;color:inherit}
a{color:inherit;text-decoration:none}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--ds-border-strong);border-radius:4px}

/* ---------- shell raíz con fondo aurora ---------- */
.ds-app{
  height:100vh;display:flex;flex-direction:column;
  background:
    radial-gradient(900px 560px at 85% -10%, var(--ds-blob-1) 0%, transparent 55%),
    radial-gradient(700px 480px at 5% 100%, var(--ds-blob-2) 0%, transparent 50%),
    linear-gradient(180deg, var(--ds-bg-1) 0%, var(--ds-bg-2) 55%, var(--ds-bg-3) 100%);
}

/* ---------- ventana (titlebar + body + footer) ---------- */
.ds-window{flex:1;display:flex;flex-direction:column;min-height:0}
.ds-titlebar{
  height:32px;flex-shrink:0;display:flex;align-items:center;
  background:linear-gradient(160deg, rgba(19,26,45,.98), rgba(10,14,26,.98));
  border-bottom:1px solid var(--ds-border);
}
.ds-dots{display:flex;gap:6px;padding:0 12px;flex-shrink:0}
.ds-dot{width:10px;height:10px;border-radius:50%}
.ds-dot--r{background:#e36058}.ds-dot--y{background:#e6b340}.ds-dot--g{background:#5cc04d}
.ds-title{flex:1;text-align:center;font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--ds-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 8px}
.ds-title-right{width:120px;display:flex;justify-content:flex-end;gap:6px;padding-right:12px;flex-shrink:0}

.ds-body{flex:1;display:flex;min-height:0}

/* ---------- sidebar ---------- */
.ds-sidebar{
  width:200px;flex-shrink:0;display:flex;flex-direction:column;
  border-right:1px solid var(--ds-border);
  background:linear-gradient(180deg, rgba(17,23,42,.98), rgba(10,14,26,.98));
}
.ds-sidebar__brand{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--ds-border)}
.ds-sidebar__brand .dot{width:8px;height:8px;border-radius:50%;background:var(--ds-accent);box-shadow:0 0 0 3px var(--ds-accent-bg)}
.ds-sidebar__brand-name{font-size:12.5px;font-weight:700;letter-spacing:.01em}
.ds-sidebar__brand-sub{font-size:9px;color:var(--ds-text-3);text-transform:uppercase;letter-spacing:.05em}
.ds-nav{flex:1;overflow-y:auto;padding:8px 0}
.ds-nav__group{padding:12px 14px 4px;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ds-text-3)}
.ds-nav a{
  display:flex;align-items:center;gap:9px;padding:8px 12px;margin:1px 8px;border-radius:7px;
  color:var(--ds-text-2);font-size:12px;font-weight:500;position:relative;
}
.ds-nav a:hover{background:var(--ds-surface);color:var(--ds-text)}
.ds-nav a.active{background:linear-gradient(135deg, rgba(59,130,246,.22), rgba(99,102,241,.14));color:var(--ds-accent-text);font-weight:600}
.ds-nav a.active::before{content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:3px;height:16px;border-radius:2px;background:linear-gradient(180deg,#3b82f6,#6366f1);box-shadow:0 0 8px rgba(59,130,246,.6)}
.ds-nav__dot{width:5px;height:5px;border-radius:50%;background:var(--ds-text-3);flex-shrink:0}
.ds-nav a.active .ds-nav__dot{background:var(--ds-accent-text);box-shadow:0 0 6px rgba(96,165,250,.7)}
.ds-nav__icon{width:14px;text-align:center;flex-shrink:0;opacity:.75;font-size:12px}

.ds-sidebar__foot{border-top:1px solid var(--ds-border);padding:8px;display:flex;flex-direction:column;gap:6px}
.ds-user{display:flex;align-items:center;gap:8px;padding:6px 8px}
.ds-user__avatar{width:26px;height:26px;border-radius:50%;background:var(--ds-accent-bg);color:var(--ds-accent-text);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.ds-user__name{font-size:11px;font-weight:600;line-height:1.2}
.ds-user__role{font-size:9.5px;color:var(--ds-text-3);text-transform:uppercase;letter-spacing:.03em}
.ds-logout{display:flex;align-items:center;justify-content:center;gap:7px;width:100%;padding:7px 10px;background:var(--ds-err-bg);border:1px solid var(--ds-err-border);border-radius:7px;color:#fca5a5;font-size:11px;font-weight:600;cursor:pointer}
.ds-logout:hover{background:linear-gradient(135deg,#f87171,#ef4444);color:#fff;border-color:transparent}

/* ---------- main / toolbar / content ---------- */
.ds-main{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.ds-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:var(--s4) var(--s6);border-bottom:1px solid var(--ds-border);background:var(--ds-card);flex-shrink:0;
}
.ds-toolbar__left{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap}
.ds-toolbar__title{font-size:14px;font-weight:700}
.ds-toolbar__badge{padding:2px 9px;border-radius:20px;background:var(--ds-surface-strong);border:1px solid var(--ds-border);font-size:10px;font-weight:600;color:var(--ds-text-2)}
.ds-toolbar__actions{display:flex;gap:var(--s3);align-items:center}

.ds-content{flex:1;overflow:auto;padding:var(--s6);display:flex;flex-direction:column;gap:var(--s5)}

/* ---------- kpi ---------- */
.ds-kpi-row{display:flex;gap:var(--s4);flex-wrap:wrap}
.ds-kpi{flex:1;min-width:150px;display:flex;align-items:center;gap:var(--s4);padding:var(--s4) var(--s5);border-radius:var(--radius);border:1px solid var(--ds-border);background:var(--ds-card);box-shadow:0 2px 8px var(--ds-shadow)}
.ds-kpi__icon{width:34px;height:34px;border-radius:8px;background:var(--ds-accent-bg);color:var(--ds-accent-text);display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.ds-kpi__label{font-size:10px;font-weight:600;color:var(--ds-text-2);text-transform:uppercase;letter-spacing:.03em}
.ds-kpi__value{font-size:21px;font-weight:700;color:var(--ds-text);line-height:1.1}
.ds-kpi__sub{font-size:10px;color:var(--ds-text-3);font-weight:600}
.ds-kpi--ok .ds-kpi__icon{background:var(--ds-ok-bg);color:var(--ds-ok)}
.ds-kpi--warn .ds-kpi__icon{background:var(--ds-warn-bg);color:var(--ds-warn)}
.ds-kpi--err .ds-kpi__icon{background:var(--ds-err-bg);color:var(--ds-err)}
.ds-kpi--info .ds-kpi__icon{background:var(--ds-accent-bg);color:var(--ds-accent-text)}

/* ---------- paneles / tarjetas ---------- */
.ds-card{border:1px solid var(--ds-border);border-radius:var(--radius);background:var(--ds-card);padding:var(--s5);box-shadow:0 2px 8px var(--ds-shadow)}
.ds-card__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4);gap:var(--s3)}
.ds-card__title{font-size:12.5px;font-weight:700}
.ds-card__title small{display:block;font-size:10px;font-weight:500;color:var(--ds-text-3);margin-top:2px}

.ds-grid{display:grid;gap:var(--s4)}
.ds-grid--cards{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.ds-grid--2{grid-template-columns:1fr 1fr}
.ds-grid--3{grid-template-columns:1fr 1fr 1fr}

/* tarjeta de entidad (empleado / item de almacén, etc) — reemplaza filas de tabla */
.ds-entity{
  display:flex;flex-direction:column;gap:var(--s3);
  border:1px solid var(--ds-border);border-radius:var(--radius);background:var(--ds-surface-weak);
  padding:var(--s4);transition:border-color .12s,transform .1s;
}
.ds-entity:hover{border-color:var(--ds-border-strong);transform:translateY(-2px)}
.ds-entity__top{display:flex;align-items:center;gap:var(--s4)}
.ds-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px;color:#04101f;flex-shrink:0}
.ds-entity__name{font-size:12.5px;font-weight:700;line-height:1.25}
.ds-entity__meta{font-size:10.5px;color:var(--ds-text-2)}
.ds-entity__body{display:flex;flex-direction:column;gap:3px}
.ds-entity__row{display:flex;justify-content:space-between;font-size:10.5px;color:var(--ds-text-2)}
.ds-entity__row b{color:var(--ds-text);font-weight:600}
.ds-entity__actions{display:flex;gap:var(--s2);margin-top:auto;padding-top:var(--s3);border-top:1px solid var(--ds-border)}

/* ---------- listas tipo actividad (reemplazo de tablas simples) ---------- */
.ds-list{display:flex;flex-direction:column;gap:var(--s3)}
.ds-list__row{display:flex;align-items:center;gap:var(--s4);padding:var(--s4);border-radius:var(--radius-sm);background:var(--ds-surface-weak);border:1px solid var(--ds-border)}
.ds-list__row .ds-avatar{width:28px;height:28px;font-size:10px}
.ds-list__main{flex:1;min-width:0}
.ds-list__title{font-size:11.5px;font-weight:600}
.ds-list__sub{font-size:10px;color:var(--ds-text-3)}
.ds-list__meta{font-size:10.5px;color:var(--ds-text-2);text-align:right;flex-shrink:0}

/* ---------- mini barra comparativa horizontal ---------- */
.ds-hbars{display:flex;flex-direction:column;gap:var(--s4)}
.ds-hbar__row{display:grid;grid-template-columns:100px 1fr 42px;align-items:center;gap:var(--s3);font-size:11px}
.ds-hbar__label{color:var(--ds-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ds-hbar__track{height:8px;border-radius:4px;background:var(--ds-surface-strong);overflow:hidden}
.ds-hbar__fill{height:100%;border-radius:4px;background:linear-gradient(90deg,var(--ds-accent),var(--ds-accent-2))}
.ds-hbar__val{text-align:right;font-family:var(--ds-mono);color:var(--ds-text-2)}

.ds-bar{height:7px;border-radius:4px;background:var(--ds-surface-strong);overflow:hidden;border:1px solid var(--ds-border)}
.ds-bar__fill{height:100%;background:linear-gradient(90deg,var(--ds-accent),var(--ds-accent-2))}
.ds-bar--ok .ds-bar__fill{background:var(--ds-ok)}
.ds-bar--warn .ds-bar__fill{background:var(--ds-warn)}
.ds-bar--err .ds-bar__fill{background:var(--ds-err)}

/* ---------- tabla densa (solo para grillas de datos reales, ej. checkboxes de programación) ---------- */
.ds-table-wrap{overflow:auto;border:1px solid var(--ds-border);border-radius:var(--radius);flex:1 1 auto;min-height:0;background:var(--ds-surface-weak)}
.ds-table-wrap table{width:100%;border-collapse:collapse;font-size:11.5px}
.ds-table-wrap thead th{position:sticky;top:0;background:var(--ds-card);text-align:left;padding:var(--s3) var(--s4);font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--ds-text-3);border-bottom:1px solid var(--ds-border-strong);white-space:nowrap}
.ds-table-wrap tbody td{padding:var(--s2) var(--s4);border-bottom:1px solid var(--ds-border);white-space:nowrap;color:var(--ds-text-2)}
.ds-table-wrap tbody tr:hover{background:var(--ds-surface)}
.ds-table-wrap tbody tr:last-child td{border-bottom:none}
.ds-table-wrap th.center,.ds-table-wrap td.center{text-align:center}
.ds-checkbox{width:15px;height:15px;accent-color:var(--ds-accent);cursor:pointer}

/* ---------- inputs / botones ---------- */
.ds-field{display:flex;flex-direction:column;gap:3px}
.ds-field label{font-size:10px;font-weight:600;color:var(--ds-text-2)}
.ds-input,.ds-select,textarea.ds-input{
  height:28px;padding:0 var(--s4);border-radius:var(--radius-sm);border:1px solid var(--ds-border);
  background:var(--ds-surface-weak);color:var(--ds-text);font-size:11.5px;font-family:inherit;
}
textarea.ds-input{height:auto;padding:var(--s3) var(--s4);resize:vertical}
.ds-input:focus,.ds-select:focus{outline:none;border-color:var(--ds-accent)}
.ds-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ds-text-3) 50%),linear-gradient(135deg,var(--ds-text-3) 50%,transparent 50%);background-position:calc(100% - 12px) 12px,calc(100% - 8px) 12px;background-size:4px 4px;background-repeat:no-repeat;padding-right:var(--s7)}

.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:28px;padding:0 var(--s5);font-size:11px;font-weight:600;border-radius:var(--radius-sm);border:1px solid var(--ds-border);background:var(--ds-surface);color:var(--ds-text);cursor:pointer;white-space:nowrap;transition:filter .1s,background .1s}
.ds-btn:hover{background:var(--ds-surface-strong)}
.ds-btn:active{filter:brightness(.95)}
.ds-btn--primary{background:linear-gradient(135deg,var(--ds-accent),var(--ds-accent-2));border-color:transparent;color:#fff}
.ds-btn--primary:hover{filter:brightness(1.1)}
.ds-btn--danger{background:var(--ds-err-bg);border-color:var(--ds-err-border);color:#fca5a5}
.ds-btn--danger:hover{background:linear-gradient(135deg,#f87171,#ef4444);color:#fff;border-color:transparent}
.ds-btn--ghost{background:transparent}
.ds-btn--sm{height:24px;padding:0 var(--s4);font-size:10.5px}
.ds-btn--block{width:100%}
.ds-btn--icon{width:28px;padding:0}
.ds-btn:disabled{opacity:.45;cursor:not-allowed}

.ds-badge{display:inline-flex;align-items:center;height:18px;padding:0 var(--s3);border-radius:20px;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.02em}
.ds-badge--ok{background:var(--ds-ok-bg);color:var(--ds-ok)}
.ds-badge--warn{background:var(--ds-warn-bg);color:var(--ds-warn)}
.ds-badge--err{background:var(--ds-err-bg);color:var(--ds-err)}
.ds-badge--info{background:var(--ds-accent-bg);color:var(--ds-accent-text)}
.ds-badge--neutral{background:var(--ds-surface-strong);color:var(--ds-text-2)}

/* ---------- modal ---------- */
.ds-modal-overlay{position:fixed;inset:0;background:rgba(3,6,16,.6);display:flex;align-items:center;justify-content:center;z-index:999;animation:ds-fade .12s ease-out}
.ds-modal{width:460px;max-width:calc(100vw - 32px);max-height:calc(100vh - 60px);background:var(--ds-solid);border:1px solid var(--ds-border-strong);border-radius:10px;box-shadow:0 20px 48px -12px var(--ds-shadow);display:flex;flex-direction:column;overflow:hidden;animation:ds-pop .14s ease-out}
.ds-modal__head{display:flex;align-items:center;justify-content:space-between;padding:var(--s5) var(--s6);border-bottom:1px solid var(--ds-border);background:var(--ds-card)}
.ds-modal__title{font-size:13px;font-weight:700}
.ds-modal__close{width:24px;height:24px;border-radius:6px;border:1px solid var(--ds-border);background:var(--ds-surface);color:var(--ds-text-2);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:13px}
.ds-modal__close:hover{background:var(--ds-err-bg);color:#fca5a5;border-color:var(--ds-err-border)}
.ds-modal__body{padding:var(--s6);overflow-y:auto;display:flex;flex-direction:column;gap:var(--s4)}
.ds-modal__foot{display:flex;justify-content:flex-end;gap:var(--s3);padding:var(--s4) var(--s6);border-top:1px solid var(--ds-border);background:var(--ds-card)}
@keyframes ds-fade{from{opacity:0}to{opacity:1}}
@keyframes ds-pop{from{opacity:0;transform:scale(.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}

/* ---------- taskbar ---------- */
.ds-taskbar{height:32px;flex-shrink:0;border-top:1px solid var(--ds-border);background:linear-gradient(160deg, rgba(16,21,38,.97), rgba(9,13,24,.98));display:flex;align-items:stretch;font-size:11px}
.ds-taskbar__home{display:flex;align-items:center;gap:8px;padding:0 var(--s6);border-right:1px solid var(--ds-border);background:var(--ds-surface);font-weight:600;font-size:11.5px}
.ds-taskbar__spacer{flex:1}
.ds-taskbar__status{display:flex;align-items:center;gap:var(--s5);border-left:1px solid var(--ds-border);padding:0 var(--s6);color:var(--ds-text-2);font-family:var(--ds-mono)}
.ds-online{display:inline-flex;align-items:center;gap:6px}
.ds-online__dot{width:6px;height:6px;border-radius:50%;background:#34d399;box-shadow:0 0 0 2px rgba(52,211,153,.2)}

/* ---------- toast (mismo contrato JS que app.js: toast(msg, tipo)) ---------- */
.toast-wrap{position:fixed;top:14px;right:14px;display:flex;flex-direction:column;gap:8px;z-index:1000}
.toast{background:var(--ds-solid);border:1px solid var(--ds-border-strong);border-left:3px solid var(--ds-accent);border-radius:8px;padding:10px 14px;font-size:11.5px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.4);min-width:220px;color:var(--ds-text);animation:ds-toast-in .15s ease-out}
.toast--ok{border-left-color:var(--ds-ok)}
.toast--err{border-left-color:var(--ds-err)}
@keyframes ds-toast-in{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:translateX(0)}}

/* ---------- utilidades ---------- */
.row{display:flex;align-items:center;gap:var(--s4)}
.row--wrap{flex-wrap:wrap}
.between{justify-content:space-between}
.gap-sm{gap:var(--s2)}
.muted{color:var(--ds-text-2)}
.faint{color:var(--ds-text-3)}
.mono{font-family:var(--ds-mono)}
.bold{font-weight:700}
.flex-1{flex:1 1 auto}
.hidden{display:none!important}
.center{text-align:center}

/* ---------- login / registro (pantalla standalone, sin sidebar) ---------- */
.ds-auth{flex:1;display:flex;align-items:center;justify-content:center;padding:var(--s6)}
.ds-auth__card{width:360px;max-width:100%;background:var(--ds-card);border:1px solid var(--ds-border);border-radius:12px;padding:var(--s7);box-shadow:0 20px 60px -20px var(--ds-shadow);display:flex;flex-direction:column;gap:var(--s5)}
.ds-auth__logo{
  width:56px;height:56px;border-radius:50%;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--ds-accent),var(--ds-accent-2));
  box-shadow:0 0 0 6px var(--ds-accent-bg),0 8px 20px -6px rgba(59,130,246,.5);
}
.ds-auth__logo svg{width:32px;height:32px}
.ds-auth__brand{display:flex;align-items:center;gap:8px;justify-content:center}
.ds-auth__brand .dot{width:8px;height:8px;border-radius:50%;background:var(--ds-accent);box-shadow:0 0 0 3px var(--ds-accent-bg)}
.ds-auth__title{font-size:15px;font-weight:700;text-align:center}
.ds-auth__sub{font-size:11px;color:var(--ds-text-3);text-align:center;margin-top:4px}
.ds-auth__divider{display:flex;align-items:center;gap:8px;color:var(--ds-text-3);font-size:10px;text-transform:uppercase;letter-spacing:.05em}
.ds-auth__divider::before,.ds-auth__divider::after{content:'';flex:1;height:1px;background:var(--ds-border)}
.ds-auth__demo{display:flex;flex-direction:column;gap:var(--s3)}
.ds-auth__demo-btn{display:flex;align-items:center;gap:var(--s3);padding:var(--s4);border-radius:var(--radius-sm);border:1px solid var(--ds-border);background:var(--ds-surface-weak);cursor:pointer;text-align:left}
.ds-auth__demo-btn:hover{border-color:var(--ds-border-strong);background:var(--ds-surface)}
.ds-auth__demo-btn b{display:block;font-size:11.5px}
.ds-auth__demo-btn span{display:block;font-size:10px;color:var(--ds-text-3)}
.ds-auth__foot{text-align:center;font-size:11px;color:var(--ds-text-3)}
.ds-auth__foot a{color:var(--ds-accent-text);font-weight:600;cursor:pointer}