/* ============================================================= ceco-rail.css — rail de navegación Command Center para páginas HÍBRIDAS: conservan ceco-ui.css (topbar, botones, modales) y solo suman el rail lateral + fila de KPIs de señal. PLAN_REDISENO_COMMAND_CENTER.md (F2). Sin colisiones con ceco-ui.css: solo se definen .cc-app, .cc-work, .rail*, .rail-scrim y .os-kpi* (verificado: no existen allá). Las páginas totalmente migradas usan ceco-command.css, que trae su propia copia del rail (misma marca visual). El rail es DESKTOP-ONLY aquí (≤1024px se oculta): las páginas híbridas ya tienen su navegación móvil propia (bottom nav/drawer). ============================================================= */ :root{ --cc-rail-w:236px; --cc-rail-mini-w:64px; /* Ancho reservado para la columna del rail. El valor real lo fija en tiempo de parse (js/core/layout.js, síncrono en el ). */ --cc-rail-cur:var(--cc-rail-w); --cc-navy-700:#0F3A5F; --cc-navy-800:#0B2A47; --cc-navy-900:#061829; --cc-navy-950:#03101C; --cc-cyan-400:#43AAEF; --cc-blue-500:#0091D7; } html[data-cc-rail="mini"]{--cc-rail-cur:var(--cc-rail-mini-w)} /* ---- Grid del shell ---- La columna del rail se reserva desde el PRIMER paint: renderRail solo monta el rail cuando resuelve la auth (onAuthStateChanged + lectura de usuarios/{uid}), y si el ancho dependiera de eso la página se pintaría a todo el ancho y saltaría al llegar el rail. El modo mini (solo iconos) se persiste por navegador en localStorage (cc_rail_mini) y se lee en el parse, así tampoco salta 236px→64px. .has-rail / .rail-mini las sigue poniendo layout.js sobre .cc-app; ya no determinan el ancho (lo hace --cc-rail-cur) y se conservan por si algún estilo de página se apoya en ellas. */ .cc-app{display:grid;grid-template-columns:var(--cc-rail-cur) 1fr;min-height:100vh} .cc-work{min-width:0} /* Marcador de posición: pinta la columna reservada con el fondo del rail mientras renderRail no ha reemplazado el nodo (si no, se vería un hueco blanco del ancho del rail durante la auth). */ #rail-mount{ background:var(--cc-navy-900) radial-gradient(circle at 1px 1px,rgba(120,200,255,.10) 1px,transparent 0) 0 64px/22px 22px; border-right:1px solid var(--cc-navy-950); } /* Con rail visible (solo desktop), la marca del topbar viejo es redundante. Scoped a .cc-work: el monograma del rail (BRAND_MARK) comparte la clase .topbar-brand y NO debe ocultarse. */ @media (min-width:1025px){ .cc-work .topbar-brand{display:none} } /* ---- Rail ---- */ .rail{ position:sticky;top:0;height:100vh;background:var(--cc-navy-900);color:#fff; display:flex;flex-direction:column;border-right:1px solid var(--cc-navy-950); background-image:radial-gradient(circle at 1px 1px,rgba(120,200,255,.10) 1px,transparent 0); background-size:22px 22px;background-position:0 64px;z-index:30; /* View transition entre páginas (@view-transition en ceco-ui/ceco-command): el rail viejo y el nuevo se emparejan por este nombre y el navegador lo mantiene visualmente QUIETO mientras el contenido hace cross-fade. Exige que el rail nuevo exista al primer render — de eso se encarga el pintado optimista de Layout.initRail (rol desde sessionStorage, sin esperar Auth). */ view-transition-name:cc-rail; } .rail__brand{display:flex;align-items:center;gap:10px;padding:16px 16px;border-bottom:1px solid rgba(255,255,255,.08)} .rail__brand svg,.rail__brand img{width:34px;height:34px;border-radius:8px;flex:none;display:block} .rail__brand .wm{display:flex;flex-direction:column;line-height:1} .rail__brand .wm b{font:800 16px/1 var(--font-display,"Barlow",sans-serif);letter-spacing:.02em;color:#fff} .rail__brand .wm span{font-size:9px;letter-spacing:.16em;color:rgba(255,255,255,.55);text-transform:uppercase;margin-top:4px} .rail__nav{padding:10px 12px;display:flex;flex-direction:column;gap:2px;overflow-y:auto;flex:1} .rail__group{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.4);padding:14px 12px 6px} .rail__link{ display:flex;align-items:center;gap:11px;padding:8px 12px;border-radius:8px;color:rgba(255,255,255,.75); font:500 13.5px/1.3 var(--font-body,"IBM Plex Sans",sans-serif);text-decoration:none; transition:background .15s,color .15s;position:relative;cursor:pointer; } .rail__link i,.rail__link svg{width:17px;height:17px} .rail__link:hover{background:rgba(255,255,255,.07);color:#fff} .rail__link.is-active{background:linear-gradient(90deg,rgba(0,145,215,.25),rgba(0,145,215,.05));color:#fff} .rail__link.is-active::before{content:"";position:absolute;left:-12px;top:6px;bottom:6px;width:3px;border-radius:0 3px 3px 0;background:var(--cc-cyan-400);box-shadow:0 0 12px rgba(67,170,239,.8)} .rail__link .badge{margin-left:auto;background:rgba(255,255,255,.12);color:#fff;font:600 11px/1 var(--font-mono,"IBM Plex Mono",monospace);padding:3px 7px;border-radius:999px} .rail__link.is-active .badge{background:var(--cc-blue-500)} .rail__foot{padding:12px;border-top:1px solid rgba(255,255,255,.08);display:flex;align-items:center;gap:10px} .rail__avatar{width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,var(--cc-blue-500),var(--cc-navy-700));display:grid;place-items:center;font:700 13px var(--font-display,"Barlow",sans-serif);color:#fff;flex:none} .rail__who{display:flex;flex-direction:column;line-height:1.2;min-width:0} .rail__who b{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff} .rail__who span{font-size:11px;color:rgba(255,255,255,.55)} .rail-scrim{display:none} /* botón contraer/expandir */ .rail__collapse{ display:flex;align-items:center;justify-content:center;gap:8px;width:100%; background:transparent;border:none;border-top:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.55);padding:10px;cursor:pointer; font:600 11px/1 var(--font-body,"IBM Plex Sans",sans-serif);letter-spacing:.08em;text-transform:uppercase; transition:color .15s,background .15s; } .rail__collapse:hover{color:#fff;background:rgba(255,255,255,.06)} .rail__collapse i,.rail__collapse svg{width:16px;height:16px;transition:transform .2s} /* ---- Modo mini (solo iconos) ---- */ .rail--mini .rail__brand{justify-content:center;padding:14px 8px} .rail--mini .rail__brand .wm{display:none} .rail--mini .rail__group{padding:12px 0 4px;text-align:center;overflow:hidden;white-space:nowrap;font-size:0} .rail--mini .rail__group::before{content:"·";font-size:12px;color:rgba(255,255,255,.3)} .rail--mini .rail__txt{display:none} .rail--mini .rail__link{justify-content:center;padding:10px 0} .rail--mini .rail__link .badge{ position:absolute;top:2px;right:6px;margin:0;padding:2px 5px;font-size:9.5px; } .rail--mini .rail__link.is-active::before{left:-12px} .rail--mini .rail__foot{justify-content:center;padding:10px 6px} .rail--mini .rail__who{display:none} .rail--mini .rail__collapse .rail__txt{display:none} .rail--mini .rail__collapse i,.rail--mini .rail__collapse svg{transform:rotate(180deg)} /* ---- Fila de KPIs de señal (bandeja de órdenes) ---- Los