/* ════════════════════════════════════════════════════════════
   TecXPaneL — Estilos del panel
   - Primero un "reset" que quita márgenes/paddings por defecto del
     navegador para partir de una base uniforme.
   - Luego las variables de color y medidas en :root (con var(--x)
     se reutilizan en todo el archivo; cambiar el tema es cambiarlas aquí).
   - El resto son los estilos de cada componente (sidebar, tarjetas,
     tablas, botones, modales...).
   ════════════════════════════════════════════════════════════ */

/* ── Reset & Variables ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg-app:#0C0D0F;
  --bg-sidebar:#111318;
  --bg-card:#16181D;
  --bg-card2:#1C1E25;
  --bg-hover:#1E2028;
  --border:#252830;
  --border2:#2E3240;
  --accent:#E8A020;
  --accent2:#C88010;
  --accent-glow:rgba(232,160,32,0.07);
  --text-primary:#EEEEF0;
  --text-secondary:#8B8FA8;
  --text-muted:#52566A;
  --green:#34C759;
  --red:#FF453A;
  --yellow:#FFD60A;
  --blue:#64ACFF;
  --cyan:#5AC8FA;
  --font:'Inter',system-ui,sans-serif;
  --mono:'JetBrains Mono',monospace;
  --display:'Space Grotesk',sans-serif;
  --sidebar-w:220px;
  --radius:6px;
  --radius-sm:4px;
  --radius-lg:10px;
  --transition:0.15s ease;
}

html,body{height:100%;overflow:hidden}
body{font-family:var(--font);background:var(--bg-app);color:var(--text-primary);font-size:14px;line-height:1.5}

/* ── Login Screen ── */
#login-screen{
  position:fixed;inset:0;background:var(--bg-app);
  display:flex;align-items:center;justify-content:center;z-index:1000;
}
.login-box{
  background:var(--bg-card);border:1px solid var(--border2);
  border-radius:var(--radius-lg);padding:2.5rem 2rem;width:360px;
  box-shadow:0 24px 64px rgba(0,0,0,0.6);
}
.login-logo{text-align:center;margin-bottom:2rem}
.login-logo .txpl-mark{
  font-size:2.5rem;font-weight:800;letter-spacing:-2px;
  color:var(--accent);
}
.login-logo p{color:var(--text-muted);font-size:12px;margin-top:4px}
.login-field{margin-bottom:1rem}
.login-field label{display:block;font-size:12px;color:var(--text-secondary);margin-bottom:6px;font-weight:500}
.login-field input{
  width:100%;background:var(--bg-app);border:1px solid var(--border2);
  color:var(--text-primary);padding:10px 14px;border-radius:var(--radius-sm);
  font-family:var(--font);font-size:14px;outline:none;transition:border var(--transition);
}
.login-field input:focus{border-color:var(--accent)}
.login-btn{
  width:100%;background:var(--accent);color:#0C0D0F;border:none;
  padding:11px;border-radius:var(--radius-sm);font-size:14px;font-weight:700;
  cursor:pointer;transition:background var(--transition);margin-top:0.5rem;
  letter-spacing:0.01em;
}
.login-btn:hover{background:var(--accent2)}
.login-error{color:var(--red);font-size:12px;text-align:center;margin-top:0.75rem;display:none}

/* ── Layout ── */
#app{display:flex;height:100vh;display:none}
.sidebar{
  width:var(--sidebar-w);min-width:var(--sidebar-w);
  background:var(--bg-sidebar);border-right:1px solid var(--border);
  display:flex;flex-direction:column;overflow-y:auto;
}
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{
  height:52px;min-height:52px;background:var(--bg-sidebar);border-bottom:1px solid var(--border);
  display:flex;align-items:center;padding:0 1.5rem;gap:1rem;
}
.content{flex:1;overflow-y:auto;padding:1.5rem;background:var(--bg-app)}

/* ── Sidebar ── */
.sidebar-logo{
  padding:1.25rem 1.25rem 1rem;
  border-bottom:1px solid var(--border);
}
.logo-txpl{
  font-size:1.6rem;font-family:var(--display);font-weight:700;letter-spacing:-1px;
  color:var(--text-primary);
}
.logo-txpl span{color:var(--accent)}
.logo-sub{font-size:10px;font-family:var(--mono);color:var(--accent);font-weight:600;letter-spacing:1px;text-transform:uppercase;margin-top:1px}

.sidebar-section{
  padding:1rem 0.75rem 0.25rem;
  font-size:10px;font-weight:600;letter-spacing:1.5px;
  text-transform:uppercase;color:var(--text-muted);
}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 1.25rem;
  color:var(--text-secondary);cursor:pointer;transition:all var(--transition);
  border-radius:0;font-size:13.5px;font-weight:500;position:relative;
}
.nav-item:hover{color:var(--text-primary);background:var(--bg-hover)}
.nav-item.active{
  color:var(--accent);background:transparent;
}
.nav-item.active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:60%;background:var(--accent);border-radius:0 3px 3px 0;
}
.nav-item i{font-size:18px;min-width:20px}
.nav-badge{
  margin-left:auto;background:var(--accent);color:#0C0D0F;
  font-size:10px;font-weight:600;padding:1px 6px;border-radius:10px;
}

.sidebar-bottom{padding:1rem;border-top:1px solid var(--border);margin-top:auto}
.user-chip{
  display:flex;align-items:center;gap:10px;
  background:var(--bg-hover);border-radius:var(--radius-sm);padding:8px 10px;cursor:pointer;
}
.user-avatar{
  width:30px;height:30px;border-radius:6px;
  background:var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:#0C0D0F;flex-shrink:0;
}
.user-name{font-size:12.5px;font-weight:600;color:var(--text-primary)}
.user-role{font-size:11px;color:var(--text-muted)}

/* ── Topbar ── */
.topbar-title{font-size:16px;font-family:var(--display);font-weight:700;letter-spacing:-0.5px;color:var(--text-primary)}
.topbar-subtitle{font-size:12px;font-family:var(--mono);color:var(--text-muted);margin-left:auto}
.btn{
  display:inline-flex;align-items:center;gap:6px;padding:7px 14px;
  border-radius:var(--radius-sm);font-size:13px;font-weight:500;
  cursor:pointer;transition:all var(--transition);border:1px solid var(--border2);
  background:var(--bg-card2);color:var(--text-primary);font-family:var(--font);
}
.btn:hover{background:var(--bg-hover);border-color:var(--accent)}
.btn-primary{background:var(--accent);border-color:var(--accent);color:#0C0D0F;font-weight:600}
.btn-primary:hover{background:var(--accent2);border-color:var(--accent2)}
.btn-danger{background:rgba(239,68,68,0.15);border-color:rgba(239,68,68,0.3);color:var(--red)}
.btn-success{background:rgba(34,197,94,0.15);border-color:rgba(34,197,94,0.3);color:var(--green)}
.btn-sm{padding:5px 10px;font-size:12px}

/* ── Cards ── */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:1.25rem}
.card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem}
.card-title{font-size:14px;font-family:var(--display);font-weight:700;color:var(--text-primary);display:flex;align-items:center;gap:8px}
.card-title i{color:var(--accent);font-size:17px}

/* ── Stat Cards ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;margin-bottom:1.5rem}
.stat-card{
  background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:1.25rem;position:relative;overflow:hidden;
}
.stat-card::before{
  content:'';position:absolute;top:0;right:0;width:80px;height:80px;
  border-radius:50%;opacity:0.05;transform:translate(30%,-30%);
}
.stat-card.cpu::before{background:var(--accent)}
.stat-card.mem::before{background:var(--cyan)}
.stat-card.disk::before{background:var(--green)}
.stat-card.net::before{background:var(--yellow)}
.stat-label{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.5rem;display:flex;align-items:center;gap:6px}
.stat-label i{font-size:14px}
.stat-value{font-size:2.2rem;font-weight:700;line-height:1;color:var(--text-primary);margin-bottom:0.5rem}
.stat-value span{font-size:1rem;font-weight:400;color:var(--text-muted)}
.stat-bar{height:4px;background:var(--border2);border-radius:2px;overflow:hidden}
.stat-bar-fill{height:100%;border-radius:2px;transition:width 0.5s ease}
.stat-bar-fill.cpu{background:var(--accent)}
.stat-bar-fill.mem{background:var(--cyan)}
.stat-bar-fill.disk{background:var(--green)}

/* ── Tables ── */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;padding:10px 12px;font-size:11px;font-weight:600;letter-spacing:0.5px;text-transform:uppercase;color:var(--text-muted);border-bottom:1px solid var(--border)}
td{padding:11px 12px;border-bottom:1px solid var(--border);color:var(--text-secondary);transition:background var(--transition)}
tr:hover td{background:var(--bg-hover);color:var(--text-primary)}
tr:last-child td{border-bottom:none}

/* ── Badges ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;border-radius:20px;font-size:11px;font-weight:600;
}
.badge-green{background:rgba(52,199,89,0.12);color:var(--green)}
.badge-red{background:rgba(255,69,58,0.12);color:var(--red)}
.badge-yellow{background:rgba(255,214,10,0.12);color:var(--yellow)}
.badge-blue{background:rgba(100,172,255,0.12);color:var(--blue)}
.badge-purple{background:rgba(100,172,255,0.12);color:var(--blue)}
.badge-amber{background:rgba(232,160,32,0.15);color:var(--accent)}
.badge::before{content:'•';font-size:8px}

/* ── Gauge ── */
.gauge-wrap{position:relative;width:120px;height:70px;margin:0 auto}
.gauge-svg{width:120px;height:70px}
.gauge-text{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  font-size:1.4rem;font-weight:700;color:var(--text-primary);text-align:center;
}

/* ── Forms & Modals ── */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:500;
  display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity var(--transition);
}
.modal-overlay.open{opacity:1;pointer-events:all}
.modal{
  background:var(--bg-card);border:1px solid var(--border2);border-radius:var(--radius-lg);
  width:100%;max-width:500px;max-height:90vh;overflow-y:auto;
  box-shadow:0 20px 60px rgba(0,0,0,0.5);transform:translateY(10px);transition:transform var(--transition);
}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-header{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:15px;font-weight:600}
.modal-body{padding:1.5rem}
.modal-footer{padding:1rem 1.5rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:0.75rem}
.form-group{margin-bottom:1rem}
.form-group label{display:block;font-size:12px;color:var(--text-secondary);margin-bottom:6px;font-weight:500}
.form-group input,.form-group select,.form-group textarea{
  width:100%;background:var(--bg-app);border:1px solid var(--border2);
  color:var(--text-primary);padding:9px 12px;border-radius:var(--radius-sm);
  font-family:var(--font);font-size:13px;outline:none;transition:border var(--transition);
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--accent)}
.form-group select option{background:var(--bg-card)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.deploy-drop{border:2px dashed var(--border);border-radius:var(--radius);padding:1.1rem;text-align:center;
  color:var(--text-muted);background:var(--bg-app);cursor:pointer;transition:all var(--transition);font-size:13px}
.deploy-drop:hover{border-color:var(--accent);color:var(--text-secondary)}
.deploy-drop.dragover{border-color:var(--accent);background:var(--accent-glow);color:var(--text-primary)}
.deploy-drop.has-file{border-color:var(--green);border-style:solid;color:var(--green)}
.deploy-step{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;color:var(--text-secondary)}
.deploy-step .ti{font-size:16px}
.deploy-step.pending{opacity:0.5}
.deploy-step.active{color:var(--accent)}
.deploy-step.ok{color:var(--green)}
.deploy-step.err{color:var(--red)}

/* ── Terminal ── */
#terminal-container{
  background:#0a0a0a;border-radius:var(--radius);padding:0;
  height:400px;overflow:hidden;border:1px solid var(--border);
  display:flex;flex-direction:column;
}
.terminal-toolbar{
  background:var(--bg-card2);padding:8px 12px;display:flex;align-items:center;gap:8px;
  border-bottom:1px solid var(--border);flex-shrink:0;
}
.term-dot{width:12px;height:12px;border-radius:50%}
.term-dot.r{background:#ef4444}.term-dot.y{background:#f59e0b}.term-dot.g{background:#22c55e}
#xterm-mount{
  flex:1;padding:6px 8px;background:#0a0a0a;overflow:hidden;
}
#xterm-mount .xterm{height:100%}
.terminal-footer{
  background:var(--bg-card2);padding:6px 12px;display:flex;align-items:center;gap:8px;
  border-top:1px solid var(--border);flex-shrink:0;
}

/* ── Real-time chart ── */
.chart-wrap{height:60px;position:relative}
canvas.sparkline{width:100%;height:60px}

/* ── Tabs ── */
.tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:1.5rem}
.tab{
  padding:10px 16px;font-size:13px;font-weight:500;color:var(--text-muted);
  cursor:pointer;border-bottom:2px solid transparent;transition:all var(--transition);
}
.tab:hover{color:var(--text-primary)}
.tab.active{color:var(--accent);border-bottom-color:var(--accent)}

/* ── Notifications ── */
.toast{
  position:fixed;bottom:1.5rem;right:1.5rem;
  background:var(--bg-card2);border:1px solid var(--border2);border-radius:var(--radius);
  padding:12px 16px;font-size:13px;color:var(--text-primary);z-index:900;
  transform:translateX(120%);transition:transform 0.3s ease;
  display:flex;align-items:center;gap:10px;max-width:320px;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
}
.toast.show{transform:translateX(0)}
.toast.success{border-left:3px solid var(--green)}
.toast.error{border-left:3px solid var(--red)}
.toast.info{border-left:3px solid var(--accent)}

/* ── Section Pages ── */
.page{display:none}
.page.active{display:block}

/* ── Overview grid ── */
.overview-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1rem}
.services-list{display:flex;flex-direction:column;gap:8px}
.service-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;background:var(--bg-card2);border-radius:var(--radius-sm);
  border:1px solid var(--border);
}
.service-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500}
.service-actions{display:flex;gap:6px}

/* ── Scrollbar ── */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}

/* ── Misc ── */
.text-muted{color:var(--text-muted)}
.text-accent{color:var(--accent)}
.mt-1{margin-top:0.5rem}.mt-2{margin-top:1rem}.mt-3{margin-top:1.5rem}
.flex{display:flex}.items-center{align-items:center}.gap-2{gap:0.5rem}.gap-3{gap:0.75rem}
.ml-auto{margin-left:auto}
.empty-state{text-align:center;padding:3rem;color:var(--text-muted)}
.empty-state i{font-size:3rem;opacity:0.3;display:block;margin-bottom:1rem}
.domain-pill{
  font-family:var(--mono);font-size:11.5px;
  background:var(--bg-hover);padding:3px 8px;border-radius:var(--radius-sm);color:var(--cyan);
}