*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:#060a13;color:#e2e8f0;min-height:100vh}
input,select,textarea{color-scheme:dark;font-family:inherit}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes glowPulse{0%,100%{opacity:0.4}50%{opacity:0.8}}
@keyframes shimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes drift1{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(60px,-40px) scale(1.05)}50%{transform:translate(-30px,60px) scale(0.97)}75%{transform:translate(40px,30px) scale(1.03)}}
@keyframes drift2{0%,100%{transform:translate(0,0)}33%{transform:translate(-80px,40px) scale(1.1)}66%{transform:translate(50px,-50px) scale(0.95)}}
@keyframes scanline{0%{top:-5%}100%{top:105%}}
.fadeUp{animation:fadeUp 0.6s ease-out forwards;opacity:0}
.d1{animation-delay:0.1s}.d2{animation-delay:0.2s}.d3{animation-delay:0.3s}.d4{animation-delay:0.4s}
/* CAUSA REAL DEL PARPADEO: las ~19 tarjetas del contenido llevan .fadeUp (opacity:0
   -> 1). En cada refresco automatico se reconstruye el DOM y la animacion se REINICIA
   desde transparente -> toda la pagina "parpadea". Con #app.no-fade (que pone
   buildAndRender en refrescos) las dejamos fijas en opacity:1 sin animar. La carga
   inicial y el cambio de pestania NO llevan no-fade, asi que ahi si se anima.
   El opacity:1 !important es OBLIGATORIO: sin el, quitar la animacion las dejaria
   en el opacity:0 base = invisibles. */
#app.no-fade .fadeUp{animation:none !important;opacity:1 !important}
.glass{background:rgba(12,18,32,0.7);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,0.04);border-radius:16px}
.glass-bright{background:rgba(12,18,32,0.85);backdrop-filter:blur(24px);border:1px solid rgba(16,185,129,0.08);border-radius:20px}
.btn{padding:8px 16px;border-radius:10px;font-size:12px;font-weight:600;border:none;cursor:pointer;transition:all 0.2s}
.btn-primary{background:linear-gradient(135deg,#059669,#10b981);color:#fff}
.btn-primary:hover{box-shadow:0 4px 20px rgba(16,185,129,0.3);transform:translateY(-1px)}
.btn-danger{background:linear-gradient(135deg,#dc2626,#ef4444);color:#fff}
.btn-danger:hover{box-shadow:0 4px 20px rgba(239,68,68,0.3);transform:translateY(-1px)}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,0.06);color:#94a3b8}
.btn-ghost:hover{border-color:rgba(255,255,255,0.15);color:#fff;background:rgba(255,255,255,0.03)}
.inp{width:100%;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:12px;padding:10px 14px;font-size:13px;color:#fff;outline:none;transition:all 0.3s}
.inp:focus{border-color:rgba(16,185,129,0.4);box-shadow:0 0 0 3px rgba(16,185,129,0.08)}
.inp::placeholder{color:#475569}
select.inp{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:32px}
option{background:#0f172a;color:#e2e8f0;padding:8px}
option:hover,option:checked{background:#10b981;color:#fff}
table{width:100%;border-collapse:collapse}
th{text-align:left;padding:12px 16px;font-size:10px;font-weight:600;color:#475569;text-transform:uppercase;letter-spacing:0.1em;border-bottom:1px solid rgba(255,255,255,0.04)}
td{padding:12px 16px;font-size:13px;border-bottom:1px solid rgba(255,255,255,0.02)}
tr:hover td{background:rgba(255,255,255,0.01)}
.badge{display:inline-block;padding:3px 10px;border-radius:8px;font-size:10px;font-weight:700;letter-spacing:0.02em}
.badge-ok{background:rgba(16,185,129,0.12);color:#34d399}
.badge-warn{background:rgba(245,158,11,0.12);color:#fbbf24}
.badge-err{background:rgba(239,68,68,0.12);color:#f87171}
.badge-suc{display:inline-block;padding:2px 8px;border-radius:6px;font-size:10px;font-weight:600}
.tab{padding:10px 20px;font-size:13px;font-weight:600;border:none;background:none;cursor:pointer;border-bottom:2px solid transparent;color:#475569;transition:all 0.2s}
.tab:hover{color:#94a3b8}
.tab.active{color:#10b981;border-bottom-color:#10b981}
.kpi{text-align:center;padding:16px}
.kpi-val{font-size:20px;font-weight:900;font-family:'SF Mono',SFMono-Regular,Consolas,monospace}
.kpi-label{font-size:9px;text-transform:uppercase;letter-spacing:0.15em;color:#475569;margin-top:4px}
.scroll-area{overflow:auto;max-height:65vh}

/* ─── RESPONSIVE MOBILE ─── */
@media (max-width: 768px) {
  .scroll-area { max-height: 50vh; }
  .tab { padding: 8px 12px; font-size: 11px; }
  .kpi-val { font-size: 16px; }
  .kpi-label { font-size: 8px; }
  th, td { padding: 8px 10px; font-size: 11px; }
  th { font-size: 9px; }
  .btn { padding: 7px 12px; font-size: 11px; }
  .inp { padding: 9px 12px; font-size: 12px; }
  /* Permitir scroll horizontal en tablas */
  .scroll-area table { min-width: 600px; }
  /* Header de tabs scrolleable horizontalmente */
  .tabs-row { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap !important; white-space: nowrap; scrollbar-width: none; }
  .tabs-row::-webkit-scrollbar { display: none; }
}
@media (max-width: 480px) {
  .tab { padding: 8px 10px; font-size: 10px; }
  .kpi { padding: 10px 6px; }
  .kpi-val { font-size: 14px; }
  th, td { padding: 6px 8px; font-size: 10px; }
  .main-container { padding: 8px !important; }
}
@media (max-width: 768px) {
  .main-container { padding: 12px !important; }
}
.scroll-area::-webkit-scrollbar{width:4px}
.scroll-area::-webkit-scrollbar-track{background:transparent}
.scroll-area::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:4px}

@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(80px,-50px) scale(1.15)}50%{transform:translate(-40px,70px) scale(0.95)}75%{transform:translate(50px,40px) scale(1.08)}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(-90px,50px) scale(1.2)}66%{transform:translate(60px,-60px) scale(0.9)}}
@keyframes orbFloat3{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-80px) scale(1.1)}}
@keyframes ringRotate{0%{transform:translate(-50%,-50%) rotate(0deg)}100%{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes ringRotateR{0%{transform:translate(-50%,-50%) rotate(360deg)}100%{transform:translate(-50%,-50%) rotate(0deg)}}
@keyframes titleShimmer{0%{background-position:-200% center}100%{background-position:200% center}}
@keyframes loginCardAppear{from{opacity:0;transform:translateY(40px) scale(0.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes inputGlow{0%,100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}50%{box-shadow:0 0 20px rgba(16,185,129,0.1)}}
@keyframes pulseRing{0%{transform:translate(-50%,-50%) scale(0.8);opacity:0.6}50%{transform:translate(-50%,-50%) scale(1.2);opacity:0}100%{transform:translate(-50%,-50%) scale(0.8);opacity:0.6}}
@keyframes particleDrift{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(-120px) translateX(30px);opacity:0}}
@keyframes borderFlow{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.login-inp{width:100%;background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.06);border-radius:14px;padding:14px 16px 14px 48px;font-size:14px;color:#fff;outline:none;transition:all 0.4s cubic-bezier(0.4,0,0.2,1);font-family:inherit}
.login-inp:focus{border-color:rgba(16,185,129,0.5);background:rgba(16,185,129,0.03);box-shadow:0 0 30px rgba(16,185,129,0.08),inset 0 0 20px rgba(16,185,129,0.02)}
.login-inp::placeholder{color:#334155;transition:all 0.3s}
.login-inp:focus::placeholder{color:#475569;transform:translateX(4px)}
.login-btn{width:100%;padding:14px;border-radius:14px;font-size:14px;font-weight:700;border:none;cursor:pointer;position:relative;overflow:hidden;letter-spacing:0.02em;transition:all 0.3s;color:#fff;background:linear-gradient(135deg,#059669 0%,#10b981 50%,#34d399 100%);background-size:200% 200%;animation:borderFlow 3s ease infinite}
.login-btn:hover{transform:translateY(-2px);box-shadow:0 8px 32px rgba(16,185,129,0.35),0 0 60px rgba(16,185,129,0.1)}
.login-btn:active{transform:translateY(0);box-shadow:0 4px 16px rgba(16,185,129,0.2)}


/* El refresco de polling ahora es un swap directo de #app (ver silentRefresh):
   sin _softRefresh ni ::view-transition para que sea imperceptible, no un flash. */