/* IPHub v1 · capa de diseño profesional (carga al final y refina todo el sitio) */
:root{--ease:cubic-bezier(.22,1,.36,1);--glow:0 10px 40px -10px rgba(34,211,238,.35)}
html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:rgba(34,211,238,.28);color:#fff}
*{scrollbar-width:thin;scrollbar-color:rgba(129,140,248,.35) transparent}
::-webkit-scrollbar{width:9px;height:9px}::-webkit-scrollbar-thumb{background:rgba(129,140,248,.3);border-radius:99px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:rgba(34,211,238,.5);background-clip:padding-box;border:2px solid transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

/* Fondo aurora animado */
body::before{content:"";position:fixed;inset:-20%;z-index:-2;pointer-events:none;background:
 radial-gradient(40% 35% at 15% 20%,rgba(129,140,248,.20),transparent 70%),
 radial-gradient(35% 30% at 85% 15%,rgba(34,211,238,.15),transparent 70%),
 radial-gradient(40% 40% at 70% 90%,rgba(244,114,182,.10),transparent 70%);
 animation:aurora 26s ease-in-out infinite alternate;filter:blur(20px)}
body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:linear-gradient(rgba(148,163,184,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(148,163,184,.045) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%);mask-image:radial-gradient(ellipse at 50% 30%,#000 10%,transparent 75%)}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(3%,2%,0) scale(1.08)}100%{transform:translate3d(-3%,4%,0) scale(1.03)}}
.auth-bg{display:none}

/* Barra de progreso de scroll */
#pro-progress{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:9999;background:linear-gradient(90deg,var(--accent),var(--accent2),#f472b6);box-shadow:0 0 12px rgba(34,211,238,.7);transition:width .12s linear}

/* Logo (completo, centrado, sin recortes) */
.logo-icon{background:transparent!important;overflow:visible!important;border-radius:0!important;position:relative}
.logo-icon img{width:100%;height:100%;object-fit:contain!important;display:block;filter:drop-shadow(0 6px 18px rgba(34,211,238,.28))}
.auth-logo .logo-icon{width:76px;height:76px;margin:0 auto .8rem;animation:floaty 5s ease-in-out infinite}
.logo-icon.sm{width:40px;height:40px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.auth-logo h1{background:linear-gradient(120deg,#fff,var(--accent) 55%,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent;font-weight:800;letter-spacing:.4px}

/* Login / registro */
.auth-card{position:relative;border-radius:22px;border:1px solid rgba(148,163,184,.16);background:linear-gradient(160deg,rgba(20,30,56,.82),rgba(10,16,32,.86));backdrop-filter:blur(22px) saturate(140%);-webkit-backdrop-filter:blur(22px) saturate(140%);box-shadow:0 30px 80px -20px rgba(0,0,0,.65),0 0 0 1px rgba(255,255,255,.03) inset;animation:cardIn .7s var(--ease) both}
.auth-card::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(34,211,238,.55),transparent 35%,transparent 65%,rgba(129,140,248,.55));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;opacity:.7}
@keyframes cardIn{from{opacity:0;transform:translateY(26px) scale(.97)}to{opacity:1;transform:none}}
.auth-tabs{position:relative}
.auth-tab{transition:color .25s,background .25s,transform .25s var(--ease)}
.auth-tab.active{box-shadow:0 6px 20px -8px rgba(34,211,238,.5)}
.auth-card form>*{animation:rise .55s var(--ease) both}.auth-card form>*:nth-child(1){animation-delay:.08s}.auth-card form>*:nth-child(2){animation-delay:.14s}.auth-card form>*:nth-child(3){animation-delay:.2s}.auth-card form>*:nth-child(4){animation-delay:.26s}.auth-card form>*:nth-child(5){animation-delay:.32s}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* Inputs */
input,textarea,select{transition:border-color .25s,box-shadow .25s,background .25s;background:rgba(8,13,26,.72)}
input:hover,textarea:hover,select:hover{border-color:rgba(34,211,238,.32)}
input:focus,textarea:focus,select:focus{background:rgba(8,13,26,.9);box-shadow:0 0 0 3px rgba(34,211,238,.16),0 8px 24px -12px rgba(34,211,238,.5)}

/* Botones: brillo + ripple */
.btn{position:relative;overflow:hidden;font-weight:600;letter-spacing:.2px;transition:transform .25s var(--ease),box-shadow .25s,background .25s,border-color .25s,filter .25s}
.btn-primary{box-shadow:var(--glow)}
.btn-primary::after{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);transition:left .7s var(--ease)}
.btn-primary:hover::after{left:140%}
.btn-primary:hover{filter:brightness(1.07);box-shadow:0 14px 44px -10px rgba(34,211,238,.55)}
.btn:hover{transform:translateY(-2px)}.btn:active{transform:translateY(0) scale(.97)}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:rip .6s ease-out forwards;pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* Sidebar y navegación */
.sidebar{background:linear-gradient(180deg,rgba(12,19,38,.92),rgba(7,11,24,.94));backdrop-filter:blur(18px);border-right:1px solid rgba(148,163,184,.1)}
.nav-item{position:relative;transition:background .25s,color .25s,transform .25s var(--ease),padding .25s var(--ease)}
.nav-item:hover{transform:translateX(4px);background:rgba(34,211,238,.07)}
.nav-item::before{content:"";position:absolute;left:0;top:22%;bottom:22%;width:3px;border-radius:3px;background:linear-gradient(var(--accent),var(--accent2));transform:scaleY(0);transition:transform .35s var(--ease)}
.nav-item.active::before{transform:scaleY(1)}
.nav-item.active{background:linear-gradient(90deg,rgba(34,211,238,.14),rgba(129,140,248,.06))}
.nav-icon{transition:transform .35s var(--ease)}.nav-item:hover .nav-icon{transform:scale(1.2) rotate(-6deg)}
.logo-text{font-weight:800;letter-spacing:.5px}

/* Topbar */
.topbar{backdrop-filter:blur(16px) saturate(140%);background:rgba(10,16,32,.66);border:1px solid rgba(148,163,184,.1);box-shadow:0 10px 30px -18px rgba(0,0,0,.7)}

/* Secciones y tarjetas */
.section.active{animation:secIn .55s var(--ease) both}
@keyframes secIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.section-header h2{font-weight:800;letter-spacing:.2px;background:linear-gradient(120deg,#fff 30%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.card,.glass{border:1px solid rgba(148,163,184,.12);box-shadow:0 18px 50px -28px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.02) inset;transition:transform .35s var(--ease),border-color .3s,box-shadow .35s}
.card:hover{border-color:rgba(34,211,238,.28);box-shadow:0 22px 60px -26px rgba(34,211,238,.28),0 0 0 1px rgba(255,255,255,.03) inset}
.rv{opacity:0;transform:translateY(20px);transition:opacity .7s var(--ease),transform .7s var(--ease)}.rv.in{opacity:1;transform:none}
.stat-card,.stats-grid>*{transition:transform .35s var(--ease),box-shadow .35s}.stat-card:hover,.stats-grid>*:hover{transform:translateY(-4px)}

/* Tablas, barras, toasts, menús */
table tr{transition:background .2s}table tbody tr:hover{background:rgba(34,211,238,.05)}
.prog-bar-wrap>*,.bar i,.lb-bar i,.share-bar>*{transition:width 1s var(--ease)}
.toast{animation:toastIn .5s var(--ease) both;backdrop-filter:blur(14px);border:1px solid rgba(148,163,184,.18);box-shadow:0 18px 50px -14px rgba(0,0,0,.7)}
@keyframes toastIn{from{opacity:0;transform:translateY(20px) scale(.94)}to{opacity:1;transform:none}}
.acct-menu,.search-results,.lp-list,.profile-pop,.ipbot-win{animation:popIn .3s var(--ease) both;backdrop-filter:blur(18px);box-shadow:0 24px 70px -18px rgba(0,0,0,.75)}
@keyframes popIn{from{opacity:0;transform:translateY(8px) scale(.97)}to{opacity:1;transform:none}}
.am-item{transition:background .2s,transform .25s var(--ease)}.am-item:hover{transform:translateX(3px)}
.am-av{overflow:hidden;position:relative}.am-av img{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%}
.avatar{transition:transform .35s var(--ease),box-shadow .35s}.avatar:hover{transform:scale(1.08);box-shadow:0 0 0 3px rgba(34,211,238,.35)}
#ipbot-fab{transition:transform .35s var(--ease),box-shadow .35s}#ipbot-fab:hover{transform:scale(1.1) rotate(-6deg)}

/* ===== Topología: scroll correcto + mapa pro ===== */
.lab-ide{display:grid;grid-template-columns:minmax(200px,240px) minmax(0,1fr) minmax(220px,290px);height:auto!important;overflow:hidden!important;min-height:0;align-items:stretch}
.lab-ide>*{min-width:0}
.lab-side,.lab-props{height:0;min-height:100%;overflow:auto!important}
.lab-main{min-height:0!important;padding:0;overflow:visible}
.lab-toolbar{overflow-x:auto;flex-wrap:wrap}
#topology{overflow:visible}
#topology .table-wrap,#topology .data-table,#agent-view{max-width:100%;overflow-x:auto}
.tmap{position:relative;height:clamp(440px,68vh,780px);background:radial-gradient(ellipse at 50% 40%,#0d1830,#060b18 75%);overflow:hidden;border-radius:0}
.tmap canvas{width:100%;height:100%;display:block;touch-action:pan-y pinch-zoom;cursor:grab}
.tmap.full{position:fixed;inset:0;z-index:5000;height:100vh;border-radius:0}.tmap.full canvas{touch-action:none}
body.tmap-lock{overflow:hidden}
.tmap-ctl{position:absolute;right:12px;top:12px;display:flex;flex-direction:column;gap:6px;z-index:2}
.tmap-ctl button{width:36px;height:36px;border-radius:10px;border:1px solid rgba(148,163,184,.22);background:rgba(10,16,32,.8);backdrop-filter:blur(10px);color:var(--text);font-size:1.05rem;cursor:pointer;transition:all .25s var(--ease)}
.tmap-ctl button:hover{border-color:var(--accent);color:var(--accent);transform:scale(1.08);box-shadow:0 0 18px -4px rgba(34,211,238,.6)}
.tmap-count{position:absolute;left:12px;top:12px;z-index:2;padding:7px 12px;border-radius:99px;font-size:.78rem;background:rgba(10,16,32,.8);border:1px solid rgba(148,163,184,.18);backdrop-filter:blur(10px)}
.tmap-hint{position:absolute;left:12px;bottom:10px;font-size:.72rem;color:var(--muted);z-index:2;pointer-events:none;opacity:.85}
.tmap-tip{position:absolute;display:none;z-index:3;pointer-events:none;padding:9px 12px;border-radius:10px;font-size:.78rem;line-height:1.45;background:rgba(8,13,26,.94);border:1px solid rgba(34,211,238,.35);box-shadow:0 14px 40px -10px rgba(0,0,0,.8);max-width:260px}
.tmap-empty{position:absolute;inset:0;display:none;place-items:center;text-align:center;color:var(--muted);padding:20px;z-index:1;pointer-events:none}.tmap.empty .tmap-empty{display:grid}
.mono{font-family:var(--mono)}
.tp-card{display:flex;align-items:center;gap:.6rem;margin-bottom:.7rem}.tp-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;font-size:1.3rem;border:2px solid;background:#0b1220}
.tp-bad{color:#f472b6;font-size:.75rem}.tp-dl{display:grid;grid-template-columns:auto 1fr;gap:.3rem .8rem;font-size:.8rem}.tp-dl dt{color:var(--muted)}.tp-dl dd{word-break:break-all;font-family:var(--mono)}
#topo-info{padding:.5rem .8rem;border-top:1px solid var(--border);font-size:.8rem;color:var(--muted)}
@media(max-width:1000px){.lab-ide{grid-template-columns:1fr}.lab-side,.lab-props{height:auto;min-height:0;max-height:260px}.tmap{height:clamp(380px,60vh,560px)}}

@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.rv{opacity:1;transform:none}}

.tmap:not(.full){overscroll-behavior:auto}.lab-side,.lab-props{overscroll-behavior:auto}
@media(max-width:1000px){.lab-ide{overflow:visible!important}.lab-side,.lab-props{height:auto!important}}