/* ============================================================================ Shell del host: raíl de aplicaciones, menú del área y contenido. Todo lo que se abre y se cierra es CSS —casillas ocultas y un atributo en — y no estado de Blazor, porque este mismo shell envuelve las páginas de Identity, que se sirven sin interactividad. ============================================================================ */ :root { --shell-rail-width: 60px; --shell-side-width: 236px; --shell-side-collapsed: 68px; --shell-bottombar-height: 58px; --shell-ground: #0d0d0f; --shell-surface: #111115; --shell-rail-bg: #0f0f14; --shell-border: rgba(255, 255, 255, 0.06); --shell-text: #e0e0e0; --shell-muted: rgba(255, 255, 255, 0.55); --shell-faint: rgba(255, 255, 255, 0.35); --shell-hover: rgba(255, 255, 255, 0.05); } /* Con el shell en pantalla el que se desplaza es el contenido, no el documento: si el body puede crecer —global.css le pone min-height: 100vh—, en móvil la barra inferior se va con él al desplazar. Las páginas de acceso no llevan shell y conservan su desplazamiento. */ body:has(.shell) { height: 100dvh; overflow: hidden; } /* El shell ocupa la ventana y no crece con la página: el raíl y el menú del área quedan siempre a la vista, y es el contenido el que se desplaza dentro. Con la altura siguiendo al contenido, un menú largo empujaba el avatar por debajo del pliegue. */ .shell { display: flex; height: 100dvh; overflow: hidden; background: var(--shell-ground); color: var(--shell-text); } /* Las casillas que gobiernan el cajón y el menú de usuario: fuera de la vista, pero accesibles con el teclado a través de su etiqueta. */ .shell-switch { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } /* ===== Raíl de aplicaciones ============================================== */ .shell-rail { display: flex; flex: none; flex-direction: column; align-items: center; gap: 4px; width: var(--shell-rail-width); padding: 10px 0 12px; background: var(--shell-rail-bg); border-right: 1px solid var(--shell-border); } .shell-rail__brand { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 10px; border-radius: 9px; background: linear-gradient(135deg, #4a9eff, #7c4dff); color: #fff; font-weight: 700; font-size: 0.95rem; text-decoration: none; } .shell-rail__areas { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; } .shell-rail__item { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; color: var(--shell-faint); text-decoration: none; transition: background 0.15s, color 0.15s; } .shell-rail__item:hover { background: var(--shell-hover); color: var(--shell-text); } .shell-rail__item--active { color: var(--area-accent); background: color-mix(in srgb, var(--area-accent) 14%, transparent); } /* La marca del área activa sobresale hacia el borde del raíl: se ve de reojo, sin tener que localizar cuál de los iconos está encendido. */ .shell-rail__item--active::before { content: ""; position: absolute; left: -10px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--area-accent); } .shell-rail__badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #ff6b7a; color: #0d0d0f; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; } .shell-rail__spacer { flex: 1; } .shell-rail svg, .shell-bottombar svg { width: 21px; height: 21px; } /* ===== Menú del área ===================================================== */ .shell-side { display: flex; flex: none; flex-direction: column; width: var(--shell-side-width); min-height: 0; padding: 0 8px 12px; overflow-y: auto; background: var(--shell-surface); border-right: 1px solid var(--shell-border); } .shell-side__head { display: flex; align-items: center; min-height: 56px; padding: 0 4px; margin-bottom: 8px; border-bottom: 1px solid var(--shell-border); } /* El icono del área pliega y despliega el lateral, así que la cabecera entera es el botón. */ .shell-side__identity { display: flex; flex: 1; align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: var(--shell-text); font: inherit; text-align: left; cursor: pointer; } .shell-side__identity:hover { background: var(--shell-hover); } .shell-side__icon { flex: none; width: 22px; height: 22px; color: var(--area-accent); } .shell-side__name { overflow: hidden; font-weight: 700; font-size: 0.95rem; letter-spacing: -0.2px; white-space: nowrap; text-overflow: ellipsis; } .shell-side__chevron { flex: none; width: 18px; height: 18px; margin-left: auto; color: var(--shell-faint); } .shell-nav { display: flex; flex-direction: column; gap: 1px; } .shell-nav__group { padding: 14px 8px 6px; color: var(--shell-faint); font-size: 0.65rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .shell-nav__link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--shell-muted); font-size: 0.85rem; text-decoration: none; transition: background 0.12s, color 0.12s; } .shell-nav__link:hover { background: var(--shell-hover); color: var(--shell-text); } .shell-nav__link.active { background: color-mix(in srgb, var(--area-accent) 13%, transparent); color: var(--area-accent); font-weight: 500; } .shell-nav__icon { flex: none; width: 20px; height: 20px; } .shell-nav__label { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* ===== Lateral plegado (sólo escritorio) ================================= */ html[data-shell-collapsed="1"] .shell-side { width: var(--shell-side-collapsed); padding-right: 10px; padding-left: 10px; } html[data-shell-collapsed="1"] .shell-side__name, html[data-shell-collapsed="1"] .shell-side__chevron, html[data-shell-collapsed="1"] .shell-nav__label, html[data-shell-collapsed="1"] .shell-nav__group { display: none; } html[data-shell-collapsed="1"] .shell-side__head { justify-content: center; padding: 0; } html[data-shell-collapsed="1"] .shell-nav__link, html[data-shell-collapsed="1"] .shell-side__identity { justify-content: center; padding: 9px 0; } /* ===== Contenido ========================================================= */ .shell-main { display: flex; flex: 1; flex-direction: column; min-width: 0; min-height: 0; } /* El desplazamiento vive aquí. Además del vertical, se queda con el horizontal: una tabla o una fila de botones más ancha que la ventana se desplaza dentro del contenido en vez de mover la página entera, que en móvil se lleva por delante la barra inferior. */ .shell-content { flex: 1; min-width: 0; min-height: 0; overflow: auto; padding: 1.5rem 1.75rem; } .shell-appbar, .shell-bottombar, .shell-scrim { display: none; } /* ===== Botones de icono del shell ======================================== */ .shell-iconbtn { display: grid; place-items: center; width: 38px; height: 38px; margin: 0; border: 0; border-radius: 10px; background: transparent; color: var(--shell-faint); cursor: pointer; } .shell-iconbtn:hover { background: var(--shell-hover); color: var(--shell-text); } .shell-iconbtn--on { background: color-mix(in srgb, var(--area-accent) 14%, transparent); color: var(--area-accent); } .shell-iconbtn svg { width: 20px; height: 20px; } /* ===== Menú de usuario =================================================== */ .user-menu { position: relative; } .user-menu__trigger { display: grid; place-items: center; width: 32px; height: 32px; margin: 0; border: 1px solid var(--shell-border); border-radius: 50%; background: #22222b; color: var(--shell-text); font-size: 0.7rem; font-weight: 700; cursor: pointer; user-select: none; } .user-menu__trigger:hover { border-color: rgba(255, 255, 255, 0.2); } .user-menu__avatar--large { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; background: #22222b; font-size: 0.8rem; font-weight: 700; } .user-menu__scrim { display: none; position: fixed; inset: 0; z-index: 1500; } .user-menu__panel { display: none; position: absolute; z-index: 1600; width: 252px; padding: 8px; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 12px; background: #17171d; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); } .shell-switch:checked ~ .user-menu__panel, .shell-switch:checked ~ .user-menu__scrim { display: block; } .user-menu--rail .user-menu__panel { bottom: 0; left: calc(100% + 10px); } .user-menu--appbar .user-menu__panel { top: calc(100% + 8px); right: 0; } .user-menu__identity { display: flex; align-items: center; gap: 10px; padding: 6px 6px 12px; margin-bottom: 6px; border-bottom: 1px solid var(--shell-border); } .user-menu__who { display: flex; flex-direction: column; min-width: 0; } .user-menu__name { overflow: hidden; font-size: 0.82rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; } .user-menu__email { overflow: hidden; color: var(--shell-muted); font-size: 0.72rem; white-space: nowrap; text-overflow: ellipsis; } .user-menu__role { align-self: flex-start; margin-top: 3px; padding: 0 6px; border: 1px solid rgba(255, 183, 77, 0.4); border-radius: 4px; color: #ffb74d; font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .user-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--shell-muted); font: inherit; font-size: 0.82rem; text-align: left; text-decoration: none; cursor: pointer; } .user-menu__item:hover { background: var(--shell-hover); color: var(--shell-text); } .user-menu__item.active { color: var(--shell-text); } .user-menu__item--admin { color: #ffb74d; } .user-menu__item--logout:hover { background: rgba(255, 107, 122, 0.08); color: #ff6b7a; } /* Instalar sólo se ofrece cuando el navegador lo permite —ni en una aplicación ya instalada, ni donde no exista la instalación—, y quien lo sabe es pwa.js. Lo dice con un atributo en , como el plegado del lateral, para que sobreviva a que Blazor repinte el menú. */ .user-menu__item--install { display: none; } html[data-pwa-installable="1"] .user-menu__item--install { display: flex; } .user-menu__item--install:hover { background: rgba(74, 158, 255, 0.08); color: #4a9eff; } .user-menu__separator { height: 1px; margin: 6px 4px; background: var(--shell-border); } .user-menu__logout { margin: 0; } .user-menu svg { flex: none; width: 19px; height: 19px; } /* ===== Móvil ============================================================= */ @media (max-width: 959.98px) { .shell-rail { display: none; } .shell-appbar { display: flex; flex: none; align-items: center; gap: 6px; height: 56px; padding: 0 10px; background: var(--shell-surface); border-bottom: 1px solid var(--shell-border); } .shell-appbar__title { font-weight: 700; font-size: 1rem; letter-spacing: -0.2px; } .shell-appbar__spacer { flex: 1; } .shell--bare .shell-appbar label[for="shell-drawer"] { display: none; } /* El menú del área pasa a ser un cajón: en móvil no hay sitio para una columna fija. */ .shell-side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 1400; width: 272px; padding-top: 8px; transform: translateX(-100%); transition: transform 0.2s ease; } #shell-drawer:checked ~ .shell-side { transform: none; } .shell-scrim { position: fixed; inset: 0; z-index: 1300; background: rgba(0, 0, 0, 0.55); } #shell-drawer:checked ~ .shell-scrim { display: block; } /* El lateral es un cajón que se abre y se cierra desde la barra: el icono del área no pliega nada aquí, así que ni lleva flecha ni se comporta como un botón. */ .shell-side__chevron { display: none; } .shell-side__identity, .shell-side__identity:hover { background: transparent; cursor: default; } /* El plegado es una comodidad de escritorio: dentro del cajón sobra. */ html[data-shell-collapsed="1"] .shell-side { width: 272px; padding-right: 8px; padding-left: 8px; } html[data-shell-collapsed="1"] .shell-side__name, html[data-shell-collapsed="1"] .shell-nav__label, html[data-shell-collapsed="1"] .shell-nav__group { display: revert; } html[data-shell-collapsed="1"] .shell-side__head { justify-content: flex-start; padding: 0 4px; } html[data-shell-collapsed="1"] .shell-nav__link, html[data-shell-collapsed="1"] .shell-side__identity { justify-content: flex-start; padding: 8px 10px; } .shell-bottombar { display: flex; position: fixed; right: 0; bottom: 0; left: 0; z-index: 1200; height: calc(var(--shell-bottombar-height) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--shell-rail-bg); border-top: 1px solid var(--shell-border); } .shell-bottombar__item { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-width: 0; padding: 6px 2px; color: var(--shell-faint); font-size: 0.6rem; text-align: center; text-decoration: none; } .shell-bottombar__item span { max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .shell-bottombar__item--active { color: var(--area-accent); } .shell-content { padding: 1rem; padding-bottom: calc(var(--shell-bottombar-height) + env(safe-area-inset-bottom) + 1rem); } } /* ===== Accesibilidad ===================================================== */ .shell a:focus-visible, .shell button:focus-visible, .shell label:focus-visible { outline: 2px solid var(--area-accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .shell-side, .shell-rail__item, .shell-nav__link { transition: none; } }