/* ============================================================ shell.css — CSS CANÓNICO del shell NEXORZ (TopBar + SideBar) Fuente ÚNICA. Ninguna página debe traer su propio top/side bar. Acento por universo: empresas (navy) · profesionales (verde). ============================================================ */ :root{ --nx-navy:#1B2B5E; --nx-gold:#B8962E; --nx-green:#1D9E75; --nx-border:#E4E4DF; --nx-muted:#6b6b66; --nx-bg:#F5F5F2; --nx-topbar:46px; --nx-sidebar:56px; --nx-fit:1100px; --nx-accent:#1B2B5E; --nx-accent-soft:#eef0f7; } *{box-sizing:border-box} /* Desactivar el "font boosting" (inflado automático de texto) de Chrome/Samsung Internet en Android: sin esto el motor agranda solo el texto tras un reflow (al navegar o al redibujar el shell), rompiendo los tamaños definidos en CSS. Es invisible en desktop, por eso solo se ve en el teléfono real. */ html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%} html,body{margin:0} body{ background:var(--nx-bg); color:#1a1a18; font-family:'Inter',system-ui,-apple-system,sans-serif; } /* alto reservado por el topbar (alta especificidad para vencer al CSS viejo de páginas migradas) */ html body{padding-top:var(--nx-topbar)!important} /* Acentos por universo (clase en ) */ /* Mismo look para todos los universos (empresa y profesional idénticos) */ body.nx-empresas,body.nx-profesionales{--nx-accent:#1B2B5E;--nx-accent-soft:#eef0f7} /* ===================== TOPBAR ===================== */ #nx-topbar{ position:fixed!important;top:0!important;left:0!important;right:0!important; height:var(--nx-topbar)!important;min-height:var(--nx-topbar)!important;max-height:var(--nx-topbar)!important; width:auto!important;background:#fff!important;border:0!important;border-bottom:1px solid var(--nx-border)!important; display:flex!important;align-items:center!important;justify-content:space-between!important;flex-wrap:nowrap!important; padding:0 16px!important;margin:0!important;z-index:9999!important;box-shadow:none!important;transform:none!important; } #nx-topbar .nx-left{display:flex;align-items:center;gap:8px;min-width:0} #nx-logo{display:flex;align-items:center;gap:8px;text-decoration:none;flex-shrink:0} #nx-logo .nx-logo-text{font-family:'Syne','Inter',sans-serif;font-size:17px;font-weight:700;letter-spacing:-.3px;white-space:nowrap} #nx-logo .nx-logo-text .a{color:var(--nx-navy)} #nx-logo .nx-logo-text .b{color:var(--nx-gold)} #nx-sb-toggle{display:inline-flex;align-items:center;justify-content:center;background:none;border:none;cursor:pointer;color:var(--nx-muted);padding:6px;border-radius:8px;margin-right:2px} #nx-sb-toggle:hover{background:#f0f0eb} /* Nav central del topbar (Inicio · Ver licitaciones) — centrado real, independiente de los anchos laterales */ #nx-topnav{position:absolute!important;left:50%!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;display:flex!important;align-items:center!important;gap:2px!important;height:34px!important;line-height:normal!important;overflow:hidden!important;border:0!important;background:transparent!important;box-shadow:none!important} .nx-topnav-link{display:inline-flex!important;align-items:center!important;height:30px!important;line-height:1!important;font-size:13.5px;font-weight:600;color:var(--nx-muted);text-decoration:none;padding:0 14px;border-radius:8px;white-space:nowrap;transition:background .15s,color .15s} .nx-topnav-link:hover{background:#f4f4f1;color:var(--nx-navy)} .nx-topnav-link.active{color:var(--nx-navy);background:var(--nx-accent-soft)} #nx-topbar-right{display:flex;align-items:center;gap:12px;margin-left:auto} .nx-bell{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:9px;color:var(--nx-navy);border:1px solid var(--nx-border);background:#fff;text-decoration:none} .nx-bell:hover{background:#f4f4f1} .nx-avatar{width:32px;height:32px;border-radius:50%;background:var(--nx-navy);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0} .nx-btn-login{border:1px solid var(--nx-border);padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:600;color:var(--nx-navy);text-decoration:none} .nx-btn-reg{background:var(--nx-navy);color:#fff;padding:6px 14px;border-radius:8px;font-size:12.5px;font-weight:600;text-decoration:none} /* mostrar bloque auth / noauth según sesión (clase nx-auth en ) */ body:not(.nx-auth) .nx-only-auth{display:none!important} body.nx-auth .nx-only-noauth{display:none!important} /* dropdown del avatar */ .nx-avatar-wrap{position:relative} .nx-dd{display:none;position:absolute;right:0;top:calc(100% + 8px);min-width:230px;background:#fff;border:1px solid var(--nx-border);border-radius:12px;padding:7px;box-shadow:0 16px 42px rgba(0,0,0,.14);z-index:10001} .nx-avatar-wrap.open .nx-dd{display:block} .nx-dd .nx-dd-head{padding:10px 12px 9px;border-bottom:1px solid #F0F0EC;margin-bottom:5px} .nx-dd .nx-dd-nom{font-size:13px;font-weight:700;color:var(--nx-navy)} .nx-dd .nx-dd-mail{font-size:11px;color:#9E9E9A;margin-top:2px;word-break:break-all} .nx-dd a,.nx-dd button{display:flex;align-items:center;gap:10px;width:100%;padding:9px 12px;border-radius:8px;font-size:13px;color:#111;text-decoration:none;border:none;background:none;cursor:pointer;font-family:inherit;text-align:left} .nx-dd a:hover,.nx-dd button:hover{background:#f5f5f2;color:var(--nx-navy)} .nx-dd .nx-logout{color:#B23B30} .nx-dd svg{width:16px;height:16px;flex-shrink:0} /* ===================== SIDEBAR (colapsado; se EXPANDE al pasar el mouse) ===================== */ /* Blindaje: el shell resetea sus contenedores con !important para que NINGÚN CSS de página los toque. */ #nx-sidebar{ position:fixed!important;top:var(--nx-topbar)!important;left:0!important;right:auto!important; width:var(--nx-sidebar)!important;min-width:var(--nx-sidebar)!important; height:calc(100vh - var(--nx-topbar))!important;background:#fff!important;border:0!important;border-right:1px solid var(--nx-border)!important; display:flex!important;flex-direction:column!important;align-items:stretch!important; padding:10px 0!important;margin:0!important;gap:0!important;z-index:90!important;overflow:hidden!important;box-shadow:none!important;transform:none!important; transition:width .18s ease, box-shadow .18s ease!important; } /* EXPANDIDO al hover — overlay, NO empuja el contenido */ #nx-sidebar:hover{width:220px!important;min-width:220px!important;box-shadow:8px 0 30px rgba(27,43,94,.10)!important} #nx-sidebar .nx-nav{ display:flex!important;flex-direction:column!important;height:auto!important;width:100%!important; align-items:stretch!important;justify-content:flex-start!important;flex:0 0 auto!important; padding:0!important;margin:0!important;gap:0!important;border:0!important;box-shadow:none!important;background:transparent!important; } /* Encabezado de sección (Mi actividad) — visible solo al expandir */ #nx-sidebar .nx-section{ display:none!important;font-size:10px!important;font-weight:700!important;letter-spacing:1px!important;text-transform:uppercase!important; color:var(--nx-muted)!important;opacity:.7!important;padding:8px 18px 6px!important;white-space:nowrap!important;overflow:hidden!important; } #nx-sidebar:hover .nx-section{display:block!important} #nx-sidebar .nx-item{ position:relative!important;width:100%!important;height:46px!important;min-height:46px!important;max-height:46px!important;flex:0 0 46px!important; display:flex!important;align-items:center!important;justify-content:center!important;gap:0!important;padding:0!important;margin:0!important; color:var(--nx-muted)!important;text-decoration:none!important;border-left:2px solid transparent!important; white-space:nowrap!important;overflow:hidden!important;transition:background .15s!important; } #nx-sidebar .nx-item svg{width:20px!important;height:20px!important;min-width:20px!important;opacity:.72!important;flex:0 0 auto!important} #nx-sidebar .nx-item:hover{background:#f6f6f3!important} #nx-sidebar .nx-item:hover svg{opacity:1!important;color:var(--nx-accent)!important} #nx-sidebar .nx-item.active{border-left-color:var(--nx-accent)!important;background:var(--nx-accent-soft)!important} #nx-sidebar .nx-item.active svg{opacity:1!important;color:var(--nx-accent)!important} /* Label del ítem — oculto colapsado; visible al expandir */ #nx-sidebar .nx-label{display:none!important;font-size:13.5px!important;font-weight:500!important;color:var(--nx-navy)!important} /* Badge de notificaciones (preparado para Alertas y Mis postulaciones) */ #nx-sidebar .nx-item .nx-badge{position:absolute!important;top:7px!important;left:30px!important;min-width:16px!important;height:16px!important;padding:0 4px!important;border-radius:8px!important;background:#B23B30!important;color:#fff!important;font-size:10px!important;font-weight:700!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:1!important;z-index:2!important} #nx-sidebar:hover .nx-item .nx-badge,body.nx-pinned #nx-sidebar .nx-item .nx-badge{position:static!important;margin-left:auto!important;left:auto!important;top:auto!important} #nx-sidebar:hover .nx-item{justify-content:flex-start!important;padding:0 18px!important;gap:12px!important} #nx-sidebar:hover .nx-label{display:inline!important} #nx-sidebar:hover .nx-item.active .nx-label{font-weight:700!important} /* FIJADO: mismo estado expandido, pero permanente y sin sombra (el contenido ya se corrió) */ body.nx-pinned #nx-sidebar{width:220px!important;min-width:220px!important;box-shadow:none!important} body.nx-pinned #nx-sidebar .nx-section{display:block!important} body.nx-pinned #nx-sidebar .nx-item{justify-content:flex-start!important;padding:0 18px!important;gap:12px!important} body.nx-pinned #nx-sidebar .nx-label{display:inline!important} body.nx-pinned #nx-sidebar .nx-item.active .nx-label{font-weight:700!important} /* ===================== NEUTRALIZAR SHELL VIEJO (shared.js) ===================== */ /* Páginas híbridas migradas: conservan shared.js por sus utilidades (rubros, sesión), pero su topbar/sidebar viejo se oculta para que SOLO exista el shell canónico. OJO: esto va atado al UNIVERSO (nx-empresas/nx-profesionales, siempre presente en páginas del shell), NO a nx-has-sidebar (que ahora solo existe con sesión) — si no, un visitante SIN sesión vería el topbar/sidebar viejo (con enlaces rotos) sin ocultar. */ html body.nx-empresas #nexorz-topbar, html body.nx-profesionales #nexorz-topbar, html body.nx-empresas #nexorz-sidebar, html body.nx-profesionales #nexorz-sidebar, html body.nx-empresas .nexorz-sidebar, html body.nx-profesionales .nexorz-sidebar, html body.nx-empresas header.topbar, html body.nx-profesionales header.topbar{display:none!important} /* flecha de retroceso vieja (shared.js) — el shell canonico pone la suya, esta se oculta */ html body.nx-empresas #nexorz-back, html body.nx-profesionales #nexorz-back, html body.nx-empresas .nx-back-inline, html body.nx-profesionales .nx-back-inline{display:none!important} /* El contenido se OFFSETea del sidebar y se centra vía margin-left calculado, CON TRANSICIÓN suave: al expandir el sidebar (--nx-sbw pasa de 56 a 220) el contenido se DESLIZA solo y se re-centra. margin-left SÍ transiciona (el padding-left del body NO, por eso no se usa). */ /* Centrado PERFECTO en el área a la derecha del sidebar (margin auto = no adivina anchos). */ html body.nx-has-sidebar #nx-main, html body.nx-has-sidebar main, html body.nx-has-sidebar main#main-content, html body.nx-has-sidebar .main-content, html body.nx-has-sidebar #main-content{ margin-left:auto!important;margin-right:auto!important;left:auto!important; transform:translateX(10px)!important; /* compensa el ancho de la barra de scroll -> centrado visual */ transition:transform .22s ease!important; } /* Al expandir (hover o pin) el contenido se DESLIZA para RE-CENTRARSE en el área más angosta (10px de compensación + 82px del delta del sidebar). transform SÍ anima suave (por compositor). */ html body.nx-hover.nx-has-sidebar #nx-main, html body.nx-hover.nx-has-sidebar main, html body.nx-hover.nx-has-sidebar main#main-content, html body.nx-hover.nx-has-sidebar .main-content, html body.nx-hover.nx-has-sidebar #main-content, html body.nx-pinned.nx-has-sidebar #nx-main, html body.nx-pinned.nx-has-sidebar main, html body.nx-pinned.nx-has-sidebar main#main-content, html body.nx-pinned.nx-has-sidebar .main-content, html body.nx-pinned.nx-has-sidebar #main-content{ transform:translateX(92px)!important; } /* ===================== CONTENIDO ===================== */ /* El sidebar (fixed) reserva su ancho con padding en el body; el contenido fluye a su derecha y se centra solo (sirve para páginas construidas Y migradas). */ #nx-main{padding:24px 22px 60px} /* El body reserva el ancho del sidebar COLAPSADO (56) con padding; dentro, el contenido se centra con margin auto. Al expandir, el desliz de re-centrado lo hace el transform del main. */ html body.nx-has-sidebar{padding-left:var(--nx-sidebar)!important} /* contenedor centrado con tope (opcional; las páginas lo usan para su ancho) */ .nx-container{max-width:var(--nx-fit);margin:0 auto} /* flecha de retroceder: SIEMPRE inline, pegada al título (nunca salta ni se despega) */ .nx-back{ display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:50%; background:#fff;border:1px solid var(--nx-border);color:var(--nx-navy);text-decoration:none; margin-right:10px;vertical-align:middle;flex:0 0 auto;box-shadow:0 1px 4px rgba(0,0,0,.08) } .nx-back:hover{background:#f0f0eb} /* ===================== MÓVIL ===================== */ @media(max-width:960px){ html body.nx-has-sidebar{padding-left:0!important} html body.nx-has-sidebar #nx-main, html body.nx-has-sidebar main, html body.nx-has-sidebar #main-content{margin-left:auto!important} /* En móvil NO se esconde el nav entero: queda SOLO el primer enlace, que siempre es "Inicio". Antes se ocultaba completo, y como la barra inferior únicamente aparece con sesión (body.nx-has-sidebar), un visitante nuevo en celular se quedaba sin ninguna forma de volver a la portada salvo adivinar que el logo es un enlace. Los enlaces de sección sí se ocultan: no caben junto al logo y el avatar, y se alcanzan desde la propia portada. */ #nx-topnav .nx-topnav-link:not(:first-child){display:none!important} /* El hamburger no aplica en móvil: el sidebar (si existe, o sea con sesión) es una barra inferior SIEMPRE visible, como estaba antes — no hay nada que abrir/cerrar. */ #nx-sb-toggle{display:none!important} /* Sidebar móvil = barra inferior fija, ancho completo, solo iconos (como el patrón anterior). */ html body.nx-has-sidebar{padding-bottom:64px!important} #nx-sidebar{ display:flex!important;position:fixed!important;top:auto!important;bottom:0!important;left:0!important;right:0!important; width:100%!important;min-width:0!important;max-width:100%!important;height:58px!important;min-height:58px!important; padding:0!important;background:#fff!important;border-top:1px solid var(--nx-border)!important;border-right:0!important; box-shadow:0 -6px 22px rgba(27,43,94,.08)!important;z-index:9997!important;overflow:hidden!important;transform:none!important;transition:none!important; } #nx-sidebar .nx-nav{flex-direction:row!important;width:100%!important;height:58px!important;align-items:stretch!important;justify-content:space-around!important} #nx-sidebar .nx-section{display:none!important} #nx-sidebar .nx-item{ width:auto!important;flex:1 1 0!important;height:58px!important;min-height:58px!important;max-height:58px!important; padding:0 4px!important;justify-content:center!important;border-left:0!important;border-top:3px solid transparent!important; } #nx-sidebar .nx-item.active{border-left-color:transparent!important;border-top-color:var(--nx-accent)!important;background:transparent!important} #nx-sidebar .nx-label{display:none!important} #nx-sidebar .nx-item .nx-badge{position:absolute!important;top:8px!important;left:50%!important;margin-left:4px!important} }