/* ============================================================
   OSDiag — Portal Usuario (Fase 2)
   Diseño limpio, enfocado en la acción principal
   ============================================================ */

/* ── TOKENS ─────────────────────────────────────────────── */
:root {
  --bg:          #07090E;
  --bg-surface:  #0C1018;
  --bg-card:     #111620;
  --bg-elevated: #161D28;
  --bg-hover:    #1A2230;
  --bg-input:    #090D14;

  --border:      #1A2538;
  --border-up:   #243348;

  --blue:        #2F6BE0;
  --blue-l:      #5090FF;
  --blue-dim:    rgba(47,107,224,0.12);
  --cyan:        #00C0DE;
  --cyan-dim:    rgba(0,192,222,0.10);
  --green:       #1DBF5C;
  --green-dim:   rgba(29,191,92,0.11);
  --amber:       #E8980A;
  --amber-dim:   rgba(232,152,10,0.12);
  --red:         #E53E3E;
  --red-dim:     rgba(229,62,62,0.12);
  --purple:      #9B59F7;

  --txt:         #E2EAF6;
  --txt-2:       #8EA5BE;
  --txt-3:       #3E5570;
  --txt-dim:     #253040;

  --sidebar-w:   260px;
  --topbar-h:    58px;

  --r:    8px;
  --r-lg: 12px;
  --r-sm: 6px;

  --font:  'Inter', system-ui, sans-serif;
  --mono:  'JetBrains Mono', monospace;

  --shadow: 0 2px 16px rgba(0,0,0,0.45);
  --glow:   0 0 32px rgba(47,107,224,0.12);
  --t:      140ms ease;
}

/* ── RESET ──────────────────────────────────────────────── */
*,*::before,*::after { box-sizing: border-box; margin:0; padding:0; }
html { font-size:14px; }
body { font-family:var(--font); background:var(--bg); color:var(--txt); line-height:1.5; -webkit-font-smoothing:antialiased; }
a { text-decoration:none; color:inherit; }
button { cursor:pointer; border:none; background:none; font-family:inherit; font-size:inherit; }
ul,ol { list-style:none; }
input,select { font-family:inherit; }
::-webkit-scrollbar { width:4px; height:4px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--border-up); border-radius:99px; }

/* ── UTILS ──────────────────────────────────────────────── */
.mono      { font-family:var(--mono); }
.hidden    { display:none !important; }
.tc        { color:var(--cyan); }
.tb        { color:var(--blue-l); }
.tg        { color:var(--green); }
.tm        { color:var(--txt-2); }
.ta        { color:var(--amber); }

/* ═══════════════════════════════════════════════════════════
   LOGIN — USUARIO
   ═══════════════════════════════════════════════════════════ */
.login-page {
  min-height:100vh;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg);
  position:relative; overflow:hidden;
}

/* Background scan-line effect */
.login-bg {
  position:fixed; inset:0; pointer-events:none; z-index:0;
}
.scan-grid {
  position:absolute; inset:0;
  background-image:
    linear-gradient(var(--bg-elevated) 1px, transparent 1px),
    linear-gradient(90deg, var(--bg-elevated) 1px, transparent 1px);
  background-size:40px 40px;
  opacity:0.4;
  mask-image:radial-gradient(ellipse 65% 65% at 50% 50%, black 30%, transparent 100%);
}
.glow-ball {
  position:absolute; border-radius:50%;
  filter:blur(90px); opacity:0.14;
}
.glow-ball-1 { width:600px;height:600px; background:var(--blue); top:-200px;left:-150px; animation:gb 9s ease-in-out infinite; }
.glow-ball-2 { width:400px;height:400px; background:var(--cyan); bottom:-100px;right:-100px; animation:gb 12s ease-in-out infinite reverse; }
@keyframes gb { 0%,100%{transform:translate(0,0)} 50%{transform:translate(25px,35px)} }

/* Login card */
.login-wrap { position:relative; z-index:1; width:100%; max-width:400px; padding:16px; }
.login-card {
  background:var(--bg-card);
  border:1px solid var(--border);
  border-radius:var(--r-lg);
  padding:36px 32px;
  box-shadow:var(--shadow), var(--glow);
}

/* Logo area */
.login-logo {
  display:flex; flex-direction:column; align-items:center;
  margin-bottom:28px; gap:12px;
}
.login-logo img {
  height:208px; width:auto;
}
.login-badge {
  font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--txt-3); font-weight:500;
  padding:3px 10px;
  border:1px solid var(--border);
  border-radius:99px;
}

/* Input */
.field { margin-bottom:14px; }
.field label { display:block; font-size:0.75rem; font-weight:500; color:var(--txt-2); margin-bottom:5px; }
.input-wrap { position:relative; }
.input-ico { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--txt-3); pointer-events:none; }
.input-wrap input {
  width:100%;
  background:var(--bg-input);
  border:1px solid var(--border);
  border-radius:var(--r-sm);
  padding:9px 38px;
  font-size:0.85rem;
  color:var(--txt);
  outline:none;
  transition:border-color var(--t), box-shadow var(--t);
}
.input-wrap input::placeholder { color:var(--txt-dim); }
.input-wrap input:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(47,107,224,0.14); }
.pw-toggle { position:absolute; right:11px; top:50%; transform:translateY(-50%); color:var(--txt-3); transition:color var(--t); }
.pw-toggle:hover { color:var(--txt); }

/* Form row */
.form-row { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.chk-label { display:flex; align-items:center; gap:7px; font-size:0.78rem; color:var(--txt-2); cursor:pointer; }
.chk-label input { accent-color:var(--blue); }
.link-s { font-size:0.78rem; color:var(--blue-l); transition:color var(--t); }
.link-s:hover { color:var(--cyan); }

/* Divider */
.div-or { display:flex; align-items:center; gap:10px; margin:18px 0; font-size:0.72rem; color:var(--txt-3); }
.div-or::before,.div-or::after { content:''; flex:1; height:1px; background:var(--border); }

/* Social row */
.social-row { display:flex; justify-content:center; margin-bottom:18px; }
.btn-social {
  display:flex; align-items:center; justify-content:center; gap:8px;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--r-sm);
  padding:11px 32px; font-size:0.88rem; color:var(--txt-2);
  transition:all var(--t); width:100%;
}
.btn-social:hover { border-color:var(--border-up); color:var(--txt); background:var(--bg-hover); }

/* Footer */
.login-foot { text-align:center; font-size:0.74rem; color:var(--txt-3); margin-top:14px; }
.login-foot a { color:var(--blue-l); }

/* Alert */
.alert-err {
  background:var(--red-dim);
  border:1px solid rgba(229,62,62,0.2);
  border-radius:var(--r-sm);
  padding:9px 12px;
  font-size:0.78rem; color:var(--red);
  margin-bottom:14px;
}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  border-radius:var(--r-sm); padding:9px 18px;
  font-size:0.84rem; font-weight:500;
  transition:all var(--t); border:1px solid transparent;
}
.btn-full { width:100%; }
.btn-sm   { padding:6px 14px; font-size:0.76rem; }
.btn-xs   { padding:4px 10px; font-size:0.70rem; }
.btn-blue { background:var(--blue); color:#fff; }
.btn-blue:hover { background:var(--blue-l); box-shadow:0 0 20px rgba(47,107,224,0.3); transform:translateY(-1px); }
.btn-ghost { background:var(--bg-elevated); color:var(--txt); border-color:var(--border-up); }
.btn-ghost:hover { border-color:var(--blue); color:var(--blue-l); background:var(--bg-hover); }
.btn-cyan  { background:var(--cyan-dim); color:var(--cyan); border-color:rgba(0,192,222,0.2); }
.btn-cyan:hover { background:rgba(0,192,222,0.18); }
.btn-green { background:var(--green-dim); color:var(--green); border-color:rgba(29,191,92,0.2); }
.btn-amber { background:var(--amber-dim); color:var(--amber); border-color:rgba(232,152,10,0.2); }
.btn-icon  {
  display:inline-flex; align-items:center; justify-content:center;
  width:30px; height:30px;
  background:var(--bg-elevated); border:1px solid var(--border);
  border-radius:var(--r-sm); color:var(--txt-2);
  transition:all var(--t);
}
.btn-icon:hover { border-color:var(--blue-l); color:var(--blue-l); }

/* ═══════════════════════════════════════════════════════════
   APP LAYOUT — USUARIO
   ═══════════════════════════════════════════════════════════ */
.app { display:flex; min-height:100vh; }

/* ── SIDEBAR — estilo unificado ─────────────────────────── */
.sidebar {
  width:var(--sidebar-w);
  background:linear-gradient(180deg,#08101E 0%,#0A1320 100%);
  border-right:1px solid rgba(47,107,224,.15);
  display:flex; flex-direction:column;
  position:fixed; inset:0 auto 0 0;
  z-index:100;
  overflow-y:auto; overflow-x:hidden;
  transition:transform 300ms ease;
}

/* Cabecera del sidebar (logo) */
.sb-head {
  padding:20px 18px 16px;
  border-bottom:1px solid rgba(47,107,224,.12);
  display:flex; align-items:center; gap:10px;
  flex-shrink:0;
}
.sb-logo { height:38px; object-fit:contain; }
.sb-head-text { line-height:1.2; }
.sb-head-name { font-size:.88rem; font-weight:700; color:var(--txt); }
.sb-head-sub  { font-size:.58rem; color:var(--txt-3); letter-spacing:.07em; text-transform:uppercase; }

/* Tarjeta de usuario */
.sb-user {
  margin:14px 12px 0;
  background:rgba(47,107,224,.07);
  border:1px solid rgba(47,107,224,.15);
  border-radius:var(--r-lg);
  padding:12px;
  display:flex; align-items:center; gap:10px;
}
.sb-avatar {
  width:36px; height:36px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(135deg,var(--blue),var(--blue-l));
  display:flex; align-items:center; justify-content:center;
  font-size:.72rem; font-weight:700; color:#fff; overflow:hidden;
}
.sb-avatar img { width:100%; height:100%; object-fit:cover; }
.sb-user-info { flex:1; overflow:hidden; }
.sb-user-name { font-size:.78rem; font-weight:600; color:var(--txt); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sb-user-role { font-size:.62rem; color:var(--txt-3); margin-top:1px; }
.sb-plan-badge { font-size:.56rem; font-weight:800; padding:2px 7px; border-radius:99px; flex-shrink:0; letter-spacing:.06em; }
.plan-free    { background:rgba(100,100,100,.2); color:#999; border:1px solid rgba(100,100,100,.2); }
.plan-premium { background:var(--blue-dim); color:var(--blue-l); border:1px solid rgba(47,107,224,.3); }

/* Navegación */
.sb-nav { flex:1; padding:10px 10px 6px; display:flex; flex-direction:column; gap:1px; }
.sb-sec {
  font-size:.58rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--txt-3); padding:12px 10px 5px;
}
.sb-sep { height:1px; background:rgba(47,107,224,.1); margin:6px 8px; }

/* Items de navegación nuevos (.nl) */
.nl {
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:var(--r-sm);
  font-size:.8rem; color:var(--txt-2);
  transition:all var(--t); position:relative;
}
.nl:hover { background:rgba(255,255,255,.05); color:var(--txt); }
.nl.active { background:rgba(47,107,224,.14); color:var(--blue-l); font-weight:600; }
.nl.active::before {
  content:''; position:absolute; left:0; top:18%; bottom:18%;
  width:3px; background:var(--blue-l); border-radius:0 3px 3px 0;
}
.nl.locked { opacity:.4; cursor:not-allowed; }
.nl.locked:hover { background:transparent; color:var(--txt-3); }
.nl-badge {
  margin-left:auto; font-size:.6rem; font-weight:700;
  background:var(--blue-dim); color:var(--blue-l);
  padding:1px 7px; border-radius:99px; flex-shrink:0;
}

/* Items destacados — Tienda y Manuales */
.nl-store {
  background:rgba(47,107,224,.1); border:1px solid rgba(47,107,224,.2);
  color:var(--blue-l); font-weight:600; margin:2px 0;
}
.nl-store:hover { background:rgba(47,107,224,.2); border-color:rgba(80,144,255,.4); color:#fff; }
.nl-manuals {
  background:rgba(232,152,10,.08); border:1px solid rgba(232,152,10,.2);
  color:var(--amber); font-weight:600; margin:2px 0;
}
.nl-manuals:hover { background:rgba(232,152,10,.16); border-color:rgba(232,152,10,.4); color:#fff; }

/* Carrito — botón prominente */
.sb-cart {
  margin:6px 10px 2px;
  display:flex; align-items:center; gap:10px;
  padding:11px 14px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,rgba(0,192,222,.1),rgba(47,107,224,.1));
  border:1px solid rgba(0,192,222,.25);
  color:var(--cyan); font-size:.82rem; font-weight:700;
  transition:all var(--t); position:relative;
}
.sb-cart:hover {
  background:linear-gradient(135deg,rgba(0,192,222,.2),rgba(47,107,224,.2));
  border-color:rgba(0,192,222,.5);
  transform:translateX(2px);
}
.sb-cart-badge {
  margin-left:auto;
  background:var(--cyan); color:#000;
  font-size:.6rem; font-weight:800;
  width:20px; height:20px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
}
.sb-cart-badge.empty { background:rgba(60,80,110,.5); color:var(--txt-3); }

/* Footer del sidebar */
.sb-foot { padding:12px; border-top:1px solid rgba(47,107,224,.1); flex-shrink:0; }

/* Botón cerrar sesión */
.sb-logout {
  display:flex; align-items:center; gap:8px;
  padding:9px 12px; border-radius:var(--r-sm);
  color:var(--txt-3); font-size:.76rem;
  transition:all var(--t); width:100%;
}
.sb-logout:hover { background:rgba(229,62,62,.08); color:var(--red); }

/* Botones login/register (no autenticado) */
.sb-auth-btns { display:flex; flex-direction:column; gap:8px; }
.btn-sb-login {
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:10px; border-radius:var(--r-sm);
  background:var(--blue); color:#fff;
  font-size:.8rem; font-weight:700; transition:all var(--t);
}
.btn-sb-login:hover { background:var(--blue-l); }
.btn-sb-register {
  display:flex; align-items:center; justify-content:center; gap:7px;
  padding:10px; border-radius:var(--r-sm);
  background:transparent; border:1px solid var(--border-up);
  color:var(--txt-2); font-size:.8rem; font-weight:600;
  transition:all var(--t);
}
.btn-sb-register:hover { border-color:var(--blue); color:var(--txt); }

/* Clases legacy (compatibilidad hacia atrás) */
.sb-brand { padding:16px 16px 14px; border-bottom:1px solid var(--border); flex-shrink:0; }
.sb-tagline { font-size:0.62rem; color:var(--txt-3); margin-top:4px; letter-spacing:0.05em; }
.sb-section { font-size:0.6rem; font-weight:600; color:var(--txt-dim); text-transform:uppercase; letter-spacing:0.1em; padding:8px 8px 4px; }
.nav-link {
  display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:var(--r-sm);
  font-size:0.82rem; color:var(--txt-3);
  transition:all var(--t); cursor:pointer; position:relative;
}
.nav-link:hover { background:var(--bg-hover); color:var(--txt); }
.nav-link.active { background:var(--blue-dim); color:var(--blue-l); border:1px solid rgba(47,107,224,0.14); }
.nav-link.active::before {
  content:''; position:absolute; left:-8px; top:50%;
  transform:translateY(-50%);
  width:3px; height:16px; background:var(--blue); border-radius:0 3px 3px 0;
}
.nav-badge { margin-left:auto; font-size:0.6rem; font-weight:600; background:var(--blue-dim); color:var(--blue-l); border-radius:99px; padding:1px 6px; }
.sep { height:1px; background:var(--border); margin:6px 0; }
.avatar { width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--blue) 0%,var(--cyan) 100%); display:flex; align-items:center; justify-content:center; font-size:0.72rem; font-weight:700; color:#fff; flex-shrink:0; }
.avatar-info { flex:1; min-width:0; }
.avatar-name { display:block; font-size:0.78rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.avatar-role { display:block; font-size:0.64rem; color:var(--txt-3); }
.logout-btn { color:var(--txt-3); padding:4px; transition:color var(--t); border-radius:4px; }
.logout-btn:hover { color:var(--red); }

/* ── MAIN ───────────────────────────────────────────────── */
.main { margin-left:var(--sidebar-w); flex:1; display:flex; flex-direction:column; min-height:100vh; }

/* ── TOPBAR ─────────────────────────────────────────────── */
.topbar {
  height:var(--topbar-h);
  background:var(--bg-surface); border-bottom:1px solid var(--border);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 20px;
  position:sticky; top:0; z-index:50; flex-shrink:0;
}
.topbar-l { display:flex; align-items:center; gap:12px; }
.page-title { font-size:0.92rem; font-weight:600; }
.page-sub   { font-size:0.7rem; color:var(--txt-3); margin-top:1px; }
.topbar-r   { display:flex; align-items:center; gap:10px; }
.menu-btn   { display:none; color:var(--txt-2); padding:4px; }

/* ── STATUS PILLS ───────────────────────────────────────── */
.pill {
  display:inline-flex; align-items:center; gap:5px;
  font-size:0.7rem; font-weight:500; padding:3px 9px; border-radius:99px;
}
.pill-green  { background:var(--green-dim); color:var(--green); border:1px solid rgba(29,191,92,0.18); }
.pill-amber  { background:var(--amber-dim); color:var(--amber); border:1px solid rgba(232,152,10,0.18); }
.pill-red    { background:var(--red-dim); color:var(--red); border:1px solid rgba(229,62,62,0.18); }
.pill-blue   { background:var(--blue-dim); color:var(--blue-l); border:1px solid rgba(47,107,224,0.18); }
.dot { width:5px; height:5px; border-radius:50%; background:currentColor; animation:pulse 2s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.35} }

/* ── LICENSE BADGES ─────────────────────────────────────── */
.badge {
  display:inline-flex; align-items:center;
  font-size:0.66rem; font-weight:700; padding:2px 8px;
  border-radius:99px; text-transform:uppercase; letter-spacing:0.04em;
}
.badge-free    { background:var(--bg-elevated); color:var(--txt-3); border:1px solid var(--border); }
.badge-lite    { background:var(--blue-dim); color:var(--blue-l); border:1px solid rgba(47,107,224,0.2); }
.badge-pro     { background:var(--cyan-dim); color:var(--cyan); border:1px solid rgba(0,192,222,0.2); }
.badge-expert  { background:rgba(155,89,247,0.12); color:var(--purple); border:1px solid rgba(155,89,247,0.2); }
.badge-factory { background:var(--amber-dim); color:var(--amber); border:1px solid rgba(232,152,10,0.2); }

/* ── PAGE BODY ──────────────────────────────────────────── */
.page-body { padding:20px; flex:1; }

/* ── HERO ACTION (botón principal del usuario) ──────────── */
.hero-action {
  background:linear-gradient(135deg, rgba(47,107,224,0.14) 0%, rgba(0,192,222,0.07) 100%);
  border:1px solid rgba(47,107,224,0.25);
  border-radius:var(--r-lg);
  padding:24px 28px;
  display:flex; align-items:center; gap:20px;
  margin-bottom:18px;
  cursor:pointer;
  transition:all var(--t);
}
.hero-action:hover { border-color:rgba(47,107,224,0.45); transform:translateY(-2px); box-shadow:0 8px 32px rgba(0,0,0,0.3); }
.hero-icon {
  width:52px; height:52px; flex-shrink:0;
  background:var(--blue-dim); color:var(--blue-l);
  border:1px solid rgba(47,107,224,0.2);
  border-radius:var(--r);
  display:flex; align-items:center; justify-content:center;
}
.hero-text h2 { font-size:1rem; font-weight:600; margin-bottom:4px; }
.hero-text p  { font-size:0.78rem; color:var(--txt-2); line-height:1.5; }
.hero-arrow   { margin-left:auto; color:var(--blue-l); flex-shrink:0; }

/* ── QUICK STATS ROW ────────────────────────────────────── */
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.stat {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); padding:14px 16px;
  display:flex; align-items:center; gap:12px;
  transition:all var(--t);
}
.stat:hover { border-color:var(--border-up); }
.stat-ico { width:34px; height:34px; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.ico-blue   { background:var(--blue-dim); color:var(--blue-l); }
.ico-green  { background:var(--green-dim); color:var(--green); }
.ico-amber  { background:var(--amber-dim); color:var(--amber); }
.ico-cyan   { background:var(--cyan-dim); color:var(--cyan); }
.stat-val { font-family:var(--mono); font-size:1.2rem; font-weight:600; line-height:1; }
.stat-lbl { font-size:0.68rem; color:var(--txt-3); margin-top:3px; }

/* ── BANNER CAROUSEL ────────────────────────────────────── */
.banners-section { margin-bottom:18px; }
.banners-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.banners-header h3 { font-size:0.82rem; font-weight:600; }
.banners-track { display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; scroll-snap-type:x mandatory; }
.banners-track::-webkit-scrollbar { height:0; }

.banner-card {
  flex-shrink:0; width:280px;
  border-radius:var(--r); padding:16px;
  border:1px solid;
  scroll-snap-align:start;
  transition:transform var(--t);
}
.banner-card:hover { transform:translateY(-2px); }
.banner-blue   { background:linear-gradient(135deg, rgba(47,107,224,0.14), rgba(47,107,224,0.06)); border-color:rgba(47,107,224,0.22); }
.banner-cyan   { background:linear-gradient(135deg, rgba(0,192,222,0.12), rgba(0,192,222,0.05)); border-color:rgba(0,192,222,0.2); }
.banner-amber  { background:linear-gradient(135deg, rgba(232,152,10,0.12), rgba(232,152,10,0.05)); border-color:rgba(232,152,10,0.2); }
.banner-green  { background:linear-gradient(135deg, rgba(29,191,92,0.12), rgba(29,191,92,0.05)); border-color:rgba(29,191,92,0.2); }

.banner-card h4 { font-size:0.84rem; font-weight:600; margin-bottom:6px; }
.banner-card p  { font-size:0.73rem; color:var(--txt-2); line-height:1.5; margin-bottom:10px; }
.banner-cta { font-size:0.72rem; font-weight:600; display:flex; align-items:center; gap:5px; }
.banner-blue  .banner-cta { color:var(--blue-l); }
.banner-cyan  .banner-cta { color:var(--cyan); }
.banner-amber .banner-cta { color:var(--amber); }
.banner-green .banner-cta { color:var(--green); }

/* ── TWO-COL LAYOUT ─────────────────────────────────────── */
.two-col { display:grid; grid-template-columns:1fr 280px; gap:16px; }

/* ── PANEL ──────────────────────────────────────────────── */
.panel {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--r); padding:16px;
  margin-bottom:16px;
}
.panel:last-child { margin-bottom:0; }
.panel-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.panel-hdr h2 { font-size:0.86rem; font-weight:600; }

/* ── DEVICE LIST (simple) ───────────────────────────────── */
.device-item {
  display:flex; align-items:center; gap:12px;
  padding:10px 0;
  border-bottom:1px solid var(--border);
}
.device-item:last-child { border:none; padding-bottom:0; }
.device-dot { width:8px; height:8px; border-radius:50%; background:var(--green); flex-shrink:0; animation:pulse 2s ease-in-out infinite; }
.device-dot.offline { background:var(--txt-3); animation:none; }
.device-info { flex:1; min-width:0; }
.device-isn { font-family:var(--mono); font-size:0.76rem; color:var(--cyan); }
.device-meta { font-size:0.7rem; color:var(--txt-3); margin-top:2px; }
.device-fw { font-size:0.7rem; font-family:var(--mono); }

/* ── HISTORY ITEMS ──────────────────────────────────────── */
.hist-item {
  display:flex; align-items:flex-start; gap:10px;
  padding:8px 0; border-bottom:1px solid var(--border);
  font-size:0.76rem;
}
.hist-item:last-child { border:none; }
.hist-time { font-family:var(--mono); font-size:0.68rem; color:var(--txt-3); flex-shrink:0; width:100px; }
.hist-msg  { color:var(--txt-2); line-height:1.4; }
.hist-badge {
  font-size:0.62rem; font-weight:600; text-transform:uppercase;
  padding:1px 6px; border-radius:3px; flex-shrink:0;
}
.hb-ok   { background:var(--green-dim); color:var(--green); }
.hb-info { background:var(--blue-dim); color:var(--blue-l); }
.hb-warn { background:var(--amber-dim); color:var(--amber); }

/* ── SUBSCRIPTION CARD ──────────────────────────────────── */
.sub-card {
  display:flex; flex-direction:column; gap:10px;
}
.sub-row { display:flex; justify-content:space-between; align-items:center; font-size:0.78rem; }
.sub-row .lbl { color:var(--txt-3); }
.sub-bar-wrap { height:3px; background:var(--bg-elevated); border-radius:99px; overflow:hidden; }
.sub-bar { height:100%; border-radius:99px; background:linear-gradient(90deg, var(--blue), var(--cyan)); transition:width 1s ease; }
.sub-note { font-size:0.68rem; display:flex; justify-content:space-between; color:var(--txt-3); margin-top:2px; }

/* ── EMPTY STATE ────────────────────────────────────────── */
.empty {
  display:flex; flex-direction:column; align-items:center;
  padding:32px 16px; gap:8px; text-align:center;
  color:var(--txt-3);
}
.empty svg { color:var(--txt-dim); }
.empty p { font-size:0.76rem; max-width:200px; line-height:1.5; }

/* ── DEVICES TABLE ──────────────────────────────────────── */
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:0.78rem; }
thead tr { border-bottom:1px solid var(--border); }
th { text-align:left; padding:8px 10px; font-size:0.64rem; font-weight:600; color:var(--txt-3); text-transform:uppercase; letter-spacing:0.07em; white-space:nowrap; }
td { padding:10px 10px; color:var(--txt-2); border-bottom:1px solid var(--border); white-space:nowrap; }
tr:last-child td { border:none; }
tbody tr { transition:background var(--t); }
tbody tr:hover { background:var(--bg-hover); }
.td-mono { font-family:var(--mono); font-size:0.74rem; color:var(--cyan); }

/* ── INSTALL PAGE ───────────────────────────────────────── */
.install-layout { display:grid; grid-template-columns:1fr 260px; gap:16px; padding:20px; }
.install-main { min-width:0; }
.install-aside { display:flex; flex-direction:column; gap:14px; }

/* Connect zone */
.connect-zone {
  border:1px dashed var(--border-up); border-radius:var(--r);
  padding:40px 20px;
  display:flex; flex-direction:column; align-items:center; gap:10px;
  cursor:pointer; transition:all var(--t); text-align:center;
}
.connect-zone:hover { border-color:var(--blue); background:var(--blue-dim); }
.connect-title { font-size:0.9rem; font-weight:500; }
.connect-hint  { font-size:0.74rem; color:var(--txt-3); max-width:280px; line-height:1.5; }

.pulse-ring {
  position:relative; width:60px; height:60px;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg-elevated); border:1px solid var(--border); border-radius:50%;
}
.pulse-ring::after {
  content:''; position:absolute; inset:-8px;
  border-radius:50%; border:1px solid var(--blue);
  opacity:0; animation:ring 2.5s ease-out infinite;
}
@keyframes ring { 0%{transform:scale(0.9);opacity:0.5} 100%{transform:scale(1.4);opacity:0} }

/* Chip info grid */
.chip-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--border); border-radius:var(--r-sm); overflow:hidden; margin-bottom:14px; }
.chip-field { background:var(--bg-elevated); padding:10px 12px; }
.chip-label { font-size:0.62rem; color:var(--txt-3); text-transform:uppercase; letter-spacing:0.06em; margin-bottom:3px; display:block; }
.chip-val   { font-size:0.82rem; color:var(--txt); }
.chip-mono  { font-family:var(--mono); font-size:0.74rem; color:var(--cyan); }

/* Stage bars */
.stages { margin-bottom:14px; }
.stage { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); opacity:0.4; transition:opacity 300ms; }
.stage.active,.stage.done { opacity:1; }
.stage-dot { width:9px; height:9px; border-radius:50%; background:var(--border-up); margin-top:3px; flex-shrink:0; transition:all 300ms; }
.stage.active .stage-dot { background:var(--blue); box-shadow:0 0 6px var(--blue); animation:pulse 1s ease-in-out infinite; }
.stage.done   .stage-dot { background:var(--green); }
.stage-lbl { font-size:0.78rem; color:var(--txt-2); display:block; margin-bottom:5px; }
.bar-wrap { height:3px; background:var(--bg-elevated); border-radius:99px; overflow:hidden; }
.bar { height:100%; width:0%; border-radius:99px; background:linear-gradient(90deg, var(--blue), var(--cyan)); transition:width 300ms ease; position:relative; overflow:hidden; }
.bar::after { content:''; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent); animation:shimmer 1.5s ease-in-out infinite; }
@keyframes shimmer { 0%{transform:translateX(-100%)} 100%{transform:translateX(100%)} }
.stage-body { flex:1; }

/* Terminal */
.terminal {
  background:#050810; border:1px solid var(--border); border-radius:var(--r-sm); overflow:hidden;
}
.term-hdr {
  display:flex; align-items:center; gap:5px;
  padding:7px 12px; background:var(--bg-surface); border-bottom:1px solid var(--border);
}
.td { width:9px; height:9px; border-radius:50%; }
.td-r{background:#FF5F57} .td-y{background:#FEBC2E} .td-g{background:#28C840}
.term-title { font-family:var(--mono); font-size:0.65rem; color:var(--txt-3); margin-left:6px; }
.term-body {
  padding:10px 14px; font-family:var(--mono); font-size:0.7rem;
  color:var(--txt-2); line-height:1.8; min-height:90px; max-height:160px; overflow-y:auto;
}
.tl { display:block; }
.tl.ok   { color:var(--green); }
.tl.warn { color:var(--amber); }
.tl.err  { color:var(--red); }
.tl.info { color:var(--cyan); }

/* Steps bar */
.steps { display:flex; align-items:center; padding:14px 20px 0; }
.step { display:flex; flex-direction:column; align-items:center; gap:3px; flex-shrink:0; }
.step-n {
  width:26px; height:26px; border-radius:50%;
  background:var(--bg-elevated); border:1px solid var(--border);
  display:flex; align-items:center; justify-content:center;
  font-size:0.68rem; font-weight:600; color:var(--txt-3); transition:all 300ms;
}
.step span { font-size:0.62rem; color:var(--txt-3); white-space:nowrap; }
.step.done   .step-n { background:var(--green-dim); border-color:var(--green); color:var(--green); }
.step.done   span    { color:var(--green); }
.step.active .step-n { background:var(--blue-dim); border-color:var(--blue); color:var(--blue-l); }
.step.active span    { color:var(--blue-l); }
.step-line { flex:1; height:1px; background:var(--border); margin-bottom:14px; }

/* Success */
.success-box { display:flex; flex-direction:column; align-items:center; padding:32px 20px; gap:8px; text-align:center; }
.success-box h2 { font-size:1rem; font-weight:600; color:var(--green); }
.success-box p  { font-size:0.76rem; color:var(--txt-2); }
@keyframes pop { 0%{transform:scale(0.6);opacity:0} 70%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
.success-anim { animation:pop 0.4s ease both; }

/* Instructions */
.instr-list { counter-reset:s; }
.instr-list li { counter-increment:s; display:flex; align-items:flex-start; gap:8px; font-size:0.74rem; color:var(--txt-2); padding:5px 0; border-bottom:1px solid var(--border); }
.instr-list li:last-child { border:none; }
.instr-list li::before { content:counter(s); font-family:var(--mono); font-size:0.6rem; background:var(--bg-elevated); border:1px solid var(--border); color:var(--txt-3); width:18px; height:18px; display:flex; align-items:center; justify-content:center; border-radius:50%; flex-shrink:0; margin-top:1px; }

/* Mode buttons */
.modes { display:flex; gap:6px; flex-wrap:wrap; padding:10px 20px 0; }
.mode-btn { background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--r-sm); padding:5px 12px; font-size:0.72rem; color:var(--txt-2); transition:all var(--t); }
.mode-btn:hover { border-color:var(--border-up); color:var(--txt); }
.mode-btn.active { border-color:var(--blue); color:var(--blue-l); background:var(--blue-dim); }

/* Firmware card small */
.fw-mini { display:flex; align-items:center; gap:10px; background:var(--bg-elevated); border:1px solid var(--border); border-radius:var(--r-sm); padding:10px 12px; margin-bottom:10px; }
.fw-ver { background:var(--blue-dim); color:var(--blue-l); border:1px solid rgba(47,107,224,0.2); padding:3px 8px; border-radius:var(--r-sm); font-size:0.72rem; font-weight:600; white-space:nowrap; font-family:var(--mono); }
.fw-name { font-size:0.78rem; font-weight:500; }
.fw-date { font-size:0.66rem; color:var(--txt-3); }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width:900px) {
  .two-col { grid-template-columns:1fr; }
  .install-layout { grid-template-columns:1fr; padding:14px; }
  .stats-row { grid-template-columns:1fr 1fr; }
}
@media (max-width:768px) {
  .sidebar { transform:translateX(-100%); }
  .sidebar.open { transform:translateX(0); box-shadow:4px 0 30px rgba(0,0,0,0.6); }
  .main { margin-left:0; }
  .menu-btn { display:flex; }
  .stats-row { grid-template-columns:1fr 1fr; }
  .chip-grid { grid-template-columns:1fr 1fr; }
  .page-body { padding:14px; }
}
@media (max-width:480px) {
  .stats-row { grid-template-columns:1fr; }
  .login-card { padding:24px 20px; }
}

/* Sidebar overlay */
.sb-overlay { display:none; position:fixed; inset:0; z-index:99; background:rgba(0,0,0,0.65); }
.sb-overlay.on { display:block; }

/* ── COMPAT ALIASES & MISSING CLASSES ──────────────────── */
/* Variables alias para compatibilidad */
:root {
  --border:    var(--brd);
  --bg-input:  var(--bg-in);
}

/* Sidebar alias — asegura que .sidebar apunte a las mismas reglas que .sidebar */
/* (user.css usa .sidebar para mantener compatibilidad) */

/* Badges adicionales */
.badge-expert {
  background:rgba(139,79,232,0.12);
  color:#9B59F7;
  border:1px solid rgba(139,79,232,0.2);
}
.badge-factory {
  background:rgba(212,135,10,0.13);
  color:var(--amber);
  border:1px solid rgba(212,135,10,0.22);
}
.badge-pro {
  background:var(--cyan-dim);
  color:var(--cyan);
  border:1px solid rgba(0,192,222,0.2);
}
.badge-lite {
  background:var(--blue-dim);
  color:var(--blue-l);
  border:1px solid rgba(47,107,224,0.2);
}
.badge-free {
  background:var(--bg-elevated,#161D28);
  color:var(--txt-3);
  border:1px solid var(--brd);
}

/* btn-cyan */
.btn-cyan {
  background:var(--cyan-dim);
  color:var(--cyan);
  border:1px solid rgba(0,192,222,0.2);
}
.btn-cyan:hover { background:rgba(0,192,222,0.18); }

/* Main content alias */
.main-content { margin-left:var(--sidebar-w,220px); flex:1; display:flex; flex-direction:column; }

/* Sidebar must match both .sidebar and the user.css .sidebar rules */
/* The sidebar in user pages uses class="sidebar" mapped to user.css .sidebar rules */

/* fsel alias para filtros */
.fsel {
  background:var(--bg-in,#090D14);
  border:1px solid var(--brd);
  border-radius:var(--r-sm,6px);
  padding:7px 10px;
  font-size:0.76rem;
  color:var(--txt-2);
  outline:none;
  cursor:pointer;
  transition:border-color var(--t,140ms ease);
  font-family:var(--font);
}
.fsel:focus { border-color:var(--blue); }

/* btn-icon */
.btn-icon {
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;
  background:var(--bg-el);border:1px solid var(--brd);
  border-radius:var(--r-sm);color:var(--txt-2);
  transition:all var(--t);cursor:pointer;
}
.btn-icon:hover { border-color:var(--blue-l);color:var(--blue-l); }

/* Stat-row 4-col override */
.stats-row[style*="4"] { grid-template-columns:repeat(4,1fr) !important; }
@media(max-width:768px) {
  .stats-row[style*="4"] { grid-template-columns:1fr 1fr !important; }
}

/* Table wrapper */
.tbl-wrap { overflow-x:auto; }
table { width:100%; border-collapse:collapse; font-size:0.78rem; }
thead tr { border-bottom:1px solid var(--brd); }
th { text-align:left; padding:8px 10px; font-size:0.62rem; font-weight:600; color:var(--txt-3); text-transform:uppercase; letter-spacing:0.07em; white-space:nowrap; }
td { padding:10px 10px; color:var(--txt-2); border-bottom:1px solid var(--brd); white-space:nowrap; }
tr:last-child td { border:none; }
tbody tr { transition:background var(--t); }
tbody tr:hover { background:var(--bg-hv,#172030); }
.td-mono { font-family:var(--mono); font-size:0.72rem; color:var(--cyan); }