/* ── CSS VARIABLES ─────────────────────────────────────────────────────── */
:root {
  --c-bg:#0a0c0f;--c-panel:#12161b;--c-panel2:#0e1216;--c-panel-b:#0f1318;
  --c-bd-header:#171c22;--c-bd-table:#1a1f26;--c-bd-card:#1c222a;--c-bd-input:#1e242c;
  --c-chip:#181d24;--c-chip-bd:#232a33;--c-toggle-bd:#2b333d;--c-avatar-bd:#2a323c;
  --c-row-bd:#14181d;--c-avatar1:#2a3038;--c-avatar2:#191d23;
  --c-tx:#e7ebf0;--c-tx2:#c5ccd6;--c-tx3:#aeb6c0;--c-dim:#9aa3b0;--c-dim2:#8a93a0;
  --c-faint:#7c8593;--c-faint2:#6b7482;--c-faint3:#5b6470;--c-placeholder:#59626e;
  --c-hover:rgba(255,255,255,.025);--c-radial:rgba(242,106,27,.06);--c-surface:rgba(11,14,18,.7);
  --bg-page:var(--c-bg);--bg-nav:var(--c-surface);--bg-surface:var(--c-panel);
  --bg-surface-2:var(--c-panel2);--bg-surface-3:var(--c-chip);--border:var(--c-bd-card);
  --text-1:var(--c-tx);--text-2:var(--c-dim);--text-3:var(--c-faint3);
  --tab-active:rgba(242,106,27,.16);--hermes-color:var(--c-tx);--scrollbar:var(--c-chip-bd);
}
.hb-light {
  --c-bg:#e8ecf2;--c-panel:#ffffff;--c-panel2:#ffffff;--c-panel-b:#f2f5f9;
  --c-bd-header:#d3dae3;--c-bd-table:#d9dfe8;--c-bd-card:#d9dfe8;--c-bd-input:#c3ccd8;
  --c-chip:#eaeef4;--c-chip-bd:#d0d8e2;--c-toggle-bd:#c3ccd8;--c-avatar-bd:#d0d8e2;
  --c-row-bd:#e7ebf1;--c-avatar1:#e2e8f0;--c-avatar2:#d3dbe6;
  --c-tx:#141a22;--c-tx2:#2c3641;--c-tx3:#3d4753;--c-dim:#4f5a67;--c-dim2:#5a6572;
  --c-faint:#68727f;--c-faint2:#6f7986;--c-faint3:#828d9a;--c-placeholder:#8b95a2;
  --c-hover:rgba(15,23,42,.035);--c-radial:rgba(242,106,27,.09);--c-surface:rgba(255,255,255,.75);
  color:var(--c-tx);
}

/* ── BASE ──────────────────────────────────────────────────────────────── */
* { box-sizing:border-box;transition:background-color .2s,border-color .2s,color .2s; }
html,body { min-height:100%; }
body { margin:0;background:radial-gradient(1000px 600px at 20% -8%,var(--c-radial),transparent 60%),var(--c-bg) !important;color:var(--c-tx);font-family:'Manrope',system-ui,sans-serif;-webkit-font-smoothing:antialiased; }
h1,h2,h3,.h-hermes { font-family:'Space Grotesk',system-ui,sans-serif; }
.font-mono,code,pre,#servers-tbody td:first-child,#audit-tbody td:first-child { font-family:'JetBrains Mono',monospace !important; }
button,input,select,textarea { font-family:inherit; }
::selection { background:rgba(242,106,27,.3); }

/* Login de la maqueta conectado al auth real */
.hb-login-screen{min-height:100vh;position:relative;display:flex;align-items:center;justify-content:center;padding:24px}.hb-login-theme{position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:11px;border:1px solid var(--c-bd-input);background:transparent;color:var(--c-dim2);cursor:pointer;display:grid;place-items:center}.hb-login-theme:hover{color:var(--c-tx);border-color:var(--c-toggle-bd)}.hb-light .hb-theme-moon{display:none!important}.hb-light .hb-theme-sun{display:block!important}.hb-login-wrap{width:100%;max-width:400px}.hb-login-brand{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:28px}.hb-login-brand img{width:220px;height:170px;object-fit:contain;margin-bottom:-24px}.hb-login-brand h1{font-size:30px;font-weight:700;letter-spacing:-.02em}.hb-login-brand p{font-size:13.5px;color:var(--c-faint);margin-top:4px}.hb-login-card{background:linear-gradient(180deg,var(--c-panel),var(--c-panel-b));border:1px solid var(--c-bd-card);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:16px;box-shadow:0 28px 90px rgba(0,0,0,.18)}.hb-login-label{display:block;margin-bottom:8px;color:var(--c-tx2);font-size:13px;font-weight:600}.hb-login-card .h-input{height:46px}.hb-login-submit{width:100%;height:48px;margin-top:6px;border:0;border-radius:12px;background:#f26a1b;color:#fff;font-size:15px;font-weight:700;cursor:pointer}.hb-login-submit:hover{background:#ff7a2b}.hb-login-restricted{text-align:center;font-size:12.5px;color:var(--c-faint3);margin-top:18px}

/* ── SEMANTIC CLASSES ──────────────────────────────────────────────────── */
.h-bg-page    { background: var(--bg-page); }
.h-bg-nav     { background: var(--bg-nav); border-color: var(--border); }
.h-bg-surface { background: var(--bg-surface); }
.h-bg-s2      { background: var(--bg-surface-2); }
.h-bg-s3      { background: var(--bg-surface-3); }
.h-border     { border-color: var(--border) !important; }
.h-text-1     { color: var(--text-1); }
.h-text-2     { color: var(--text-2); }
.h-text-3     { color: var(--text-3); }
.h-divide > * + * { border-top: 1px solid var(--border); }
.h-tab-active { background:var(--tab-active) !important;color:#f26a1b !important;border-color:rgba(242,106,27,.42) !important; }
.h-row:hover  { background: var(--bg-surface-2); }
.h-hermes     { color: var(--hermes-color); }

/* ── INPUTS / SELECTS ──────────────────────────────────────────────────── */
.h-input {
  background: var(--bg-surface-2);
  border: 1px solid var(--border);
  color: var(--text-1);
  border-radius: 0.75rem;
  padding: 0.625rem 1rem;
  width: 100%;
  outline: none;
  transition: border-color 0.2s;
}
.h-input:focus { border-color: rgba(234,88,12,0.5); }
.h-input::placeholder { color: var(--text-3); }

/* ── SCROLLBAR ─────────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }

/* ── LOGO ──────────────────────────────────────────────────────────────── */
#login-logo,#nav-logo { filter:brightness(0) invert(1); }
.hb-light #login-logo,.hb-light #nav-logo { filter:brightness(0) saturate(100%) opacity(.82); }

/* Layout de la maqueta */
.hb-shell{min-height:100vh;display:flex}.hb-sidebar{position:sticky;top:0;height:100vh;width:246px;flex:0 0 246px;display:flex;flex-direction:column;padding:18px 14px;background:var(--c-surface);border-right:1px solid var(--c-bd-header);backdrop-filter:blur(14px);z-index:40;transition:width .22s ease,flex-basis .22s ease,transform .22s ease}.hb-sidebar-toggle{position:absolute;top:26px;right:-14px;width:28px;height:28px;border-radius:50%;background:var(--c-panel);border:1px solid var(--c-toggle-bd);color:var(--c-tx2);cursor:pointer;display:grid;place-items:center;z-index:45;box-shadow:0 2px 8px rgba(0,0,0,.35)}.hb-collapse-icon{transition:transform .22s ease}.hb-brand{height:58px;display:flex;align-items:center;gap:10px;padding:2px 6px 16px;background:transparent;border:0;cursor:pointer;color:var(--c-tx)}.hb-brand-logo{width:52px;height:40px;object-fit:contain;flex-shrink:0}.hb-brand .h-hermes{font-size:20px;font-weight:700;letter-spacing:-.01em}.hb-nav-list{display:flex;flex-direction:column;gap:3px;flex:1;overflow-y:auto;overflow-x:hidden}.hb-nav-item{min-height:43px;display:flex;align-items:center;gap:12px;width:100%;padding:10px 13px;border-radius:11px;border:1px solid transparent;background:transparent;color:var(--c-dim);font-size:14px;font-weight:500;white-space:nowrap;text-align:left;cursor:pointer}.hb-nav-item:hover{color:var(--c-tx);background:var(--c-hover)}.hb-nav-icon{width:18px;flex:0 0 18px;text-align:center;font-family:'JetBrains Mono',monospace;font-size:17px;line-height:1}.hb-sidebar-footer{margin-top:12px;padding-top:14px;border-top:1px solid var(--c-bd-header);display:flex;flex-direction:column;gap:8px}.hb-user-summary{width:100%;display:flex;align-items:center;gap:10px;padding:7px 6px;border:0;border-radius:11px;background:transparent;color:var(--c-tx2);cursor:pointer;text-align:left}.hb-user-summary:hover{background:var(--c-hover)}.hb-avatar{width:30px;height:30px;flex:0 0 30px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--c-avatar1),var(--c-avatar2));border:1px solid var(--c-avatar-bd);color:#f5915b;font-size:13px;font-weight:700;text-transform:uppercase}.hb-user-copy{flex:1;min-width:0;display:flex;flex-direction:column}.hb-user-copy strong{overflow:hidden;text-overflow:ellipsis;font-size:13.5px;font-weight:600}.hb-user-copy small{color:var(--c-faint3);font-size:11.5px}.hb-user-chevron{color:var(--c-faint3)}.hb-footer-actions{display:flex;gap:6px}.hb-footer-btn{flex:1;height:38px;border-radius:10px;border:1px solid var(--c-bd-input);background:transparent;color:var(--c-dim2);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;font-size:13px;font-weight:600}.hb-footer-btn:hover{color:var(--c-tx);border-color:var(--c-toggle-bd)}.hb-main{flex:1;min-width:0}.hb-mobile-header{display:none}.tab-content{max-width:1560px;margin:0 auto;animation:hb-fade .22s ease}.tab-content.p-6{padding:34px 40px!important}.tab-content>.min-h-\[70vh\]{min-height:100vh}
.hb-sidebar.is-collapsed{width:76px;flex-basis:76px}.hb-sidebar.is-collapsed .hb-sidebar-label{display:none}.hb-sidebar.is-collapsed .hb-brand,.hb-sidebar.is-collapsed .hb-nav-item{justify-content:center}.hb-sidebar.is-collapsed .hb-collapse-icon{transform:rotate(180deg)}.hb-sidebar.is-collapsed .hb-footer-actions{flex-direction:column}.hb-sidebar.is-collapsed #user-menu{left:54px;bottom:0}
.hb-nav-icon{width:18px!important;height:18px;flex:0 0 18px!important;display:grid!important;place-items:center;font-size:0!important}.hb-nav-icon svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Componentes reutilizables */
.hb-stat-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-bottom:22px}.hb-stat-card{background:linear-gradient(180deg,var(--c-panel),var(--c-panel-b));border:1px solid var(--c-bd-card);border-radius:16px;padding:18px 20px}.hb-stat-card span{display:block;margin-bottom:10px;color:var(--c-faint2);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}.hb-stat-card strong{font-family:'Space Grotesk';font-size:30px;line-height:1;font-weight:700}.hb-stat-warn strong{color:#f5c542}.hb-stat-bad strong{color:#f87171}table{border-collapse:collapse;min-width:760px}thead{background:var(--c-panel)!important}thead th{color:var(--c-faint2)!important;font-size:11.5px!important;font-weight:700!important;letter-spacing:.075em}tbody tr{border-color:var(--c-row-bd)!important}tbody tr:hover{background:var(--c-hover)!important}.overflow-x-auto.rounded-xl.border{background:var(--c-panel2);border-color:var(--c-bd-table)!important;border-radius:16px!important}.h-bg-surface.border{border-color:var(--c-bd-card)!important}.bg-orange-600{background:#f26a1b!important}.hover\:bg-orange-500:hover{background:#ff7a2b!important}.rounded-2xl{border-radius:16px!important}.rounded-xl{border-radius:11px!important}@keyframes hb-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}@keyframes hb-spin{to{transform:rotate(360deg)}}.hb-spin{animation:hb-spin .7s linear infinite}
.hb-compact-table{min-width:0;table-layout:fixed}.hb-compact-table th:first-child,.hb-compact-table td:first-child{width:72%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.hb-compact-table th:last-child,.hb-compact-table td:last-child{width:28%;text-align:right;white-space:nowrap}

@media(max-width:1000px){.hb-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.tab-content.p-6{padding:26px 24px!important}}
@media(max-width:720px){.hb-sidebar{position:fixed;left:0;transform:translateX(-110%);width:246px!important;z-index:70;box-shadow:18px 0 60px rgba(0,0,0,.45)}.hb-sidebar.is-mobile-open{transform:translateX(0)}.hb-sidebar-toggle{display:none}.hb-sidebar .hb-sidebar-label{display:initial!important}.hb-sidebar .hb-user-copy{display:flex!important}.hb-sidebar .hb-brand,.hb-sidebar .hb-nav-item{justify-content:flex-start!important}.hb-main{width:100%;max-width:100vw;overflow-x:hidden}.hb-mobile-header{position:sticky;top:0;z-index:35;height:58px;display:flex;align-items:center;gap:14px;padding:0 18px;background:var(--c-surface);border-bottom:1px solid var(--c-bd-header);backdrop-filter:blur(14px);font-family:'Space Grotesk';font-weight:700}.hb-mobile-menu{width:34px;height:34px;border:1px solid var(--c-bd-input);border-radius:9px;background:var(--c-panel);color:var(--c-tx)}.tab-content.p-6{padding:22px 16px!important}.tab-content>.min-h-\[70vh\]{min-height:auto;padding:22px 16px!important;align-items:flex-start}.hb-stat-grid{grid-template-columns:1fr 1fr;gap:10px}.hb-stat-card{padding:15px}.hb-stat-card strong{font-size:24px}#tab-dashboard>div:first-child{align-items:stretch;flex-direction:column;gap:14px}#tab-dashboard>div:first-child>div:last-child{width:100%}#tab-dashboard #server-filter{width:100%}#tab-dashboard>div:first-child>div:last-child>div{flex:1;min-width:0}.hb-refresh-btn{flex:0 0 auto}}

/* ── HERMES LOADER ─────────────────────────────────────────────────────── */
.hermes-loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: rgba(5, 8, 13, 0.58);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 180ms ease, visibility 180ms ease;
}
.hermes-loader.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.hermes-loader-card {
  min-width: 240px;
  padding: 1.6rem 2rem 1.35rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--border) 70%, #f97316 30%);
  border-radius: 1.25rem;
  background: color-mix(in srgb, var(--bg-surface) 92%, transparent);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.38), 0 0 45px rgba(249, 115, 22, 0.08);
}
.hermes-loader-mark {
  position: relative;
  width: 94px;
  height: 94px;
  display: grid;
  place-items: center;
}
.hermes-loader-logo {
  position: relative;
  z-index: 2;
  width: 66px;
  height: 66px;
  object-fit: contain;
  filter: brightness(0) invert(1);
  animation: hermes-wing-pulse 1.65s ease-in-out infinite;
}
.hb-light .hermes-loader-logo { filter: brightness(0); }
.hermes-loader-orbit {
  position: absolute;
  inset: 5px;
  border-radius: 50%;
  border: 1px solid transparent;
}
.orbit-one {
  border-top-color: #f97316;
  border-right-color: rgba(249, 115, 22, 0.22);
  animation: hermes-orbit 1.25s linear infinite;
}
.orbit-two {
  inset: 13px;
  border-bottom-color: rgba(251, 146, 60, 0.72);
  border-left-color: rgba(251, 146, 60, 0.16);
  animation: hermes-orbit-reverse 1.8s linear infinite;
}
.hermes-loader-spark {
  position: absolute;
  z-index: 3;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fb923c;
  box-shadow: 0 0 12px #f97316;
}
.spark-one { top: 8px; animation: hermes-spark 1.25s ease-in-out infinite; }
.spark-two { bottom: 13px; animation: hermes-spark 1.25s 0.45s ease-in-out infinite; }
.hermes-loader-text {
  margin-top: 0.55rem;
  color: var(--text-1);
  font-size: 0.875rem;
  font-weight: 650;
  letter-spacing: 0.01em;
}
.hermes-loader-dots {
  display: flex;
  gap: 5px;
  margin-top: 0.7rem;
}
.hermes-loader-dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f97316;
  animation: hermes-dot 1.1s ease-in-out infinite;
}
.hermes-loader-dots span:nth-child(2) { animation-delay: 0.14s; }
.hermes-loader-dots span:nth-child(3) { animation-delay: 0.28s; }

@keyframes hermes-orbit { to { transform: rotate(360deg); } }
@keyframes hermes-orbit-reverse { to { transform: rotate(-360deg); } }
@keyframes hermes-wing-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.74; }
  50% { transform: scale(1.04); opacity: 1; }
}
@keyframes hermes-spark {
  0%, 100% { opacity: 0.25; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.25); }
}
@keyframes hermes-dot {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .hermes-loader-logo,
  .hermes-loader-orbit,
  .hermes-loader-spark,
  .hermes-loader-dots span {
    animation: none !important;
  }
}