/** * Estilos del shell de aplicación — Gestionarte Plataforma * * Layout: sidebar colapsable (solo iconos) + header + contenido principal. * El estado de colapso se gestiona con la clase `.sidebar-colapsado` * en el elemento raíz y se persiste en localStorage. */ /* ═══════════════════════════════════════════════════════════ SHELL — contenedor principal ═══════════════════════════════════════════════════════════ */ .shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: auto 1fr; grid-template-areas: "sidebar header" "sidebar main"; min-height: 100vh; transition: grid-template-columns var(--transition-base); } body.sidebar-colapsado .shell { grid-template-columns: var(--sidebar-width-collapsed) 1fr; } /* ═══════════════════════════════════════════════════════════ SIDEBAR ═══════════════════════════════════════════════════════════ */ .sidebar { grid-area: sidebar; background: var(--color-sidebar-bg); color: var(--color-sidebar-text); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; z-index: var(--z-sidebar); } .sidebar-header { height: var(--header-height); padding: 0 var(--space-4); display: flex; align-items: center; gap: var(--space-3); border-bottom: 1px solid rgba(255, 255, 255, 0.08); flex-shrink: 0; } .sidebar-brand { color: var(--color-text-inverse); font-size: var(--font-size-lg); font-weight: var(--font-weight-bold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* Si el contenido es un logo, se centra verticalmente */ display: flex; align-items: center; min-width: 0; flex: 1; } .sidebar-brand-logo { max-height: 32px; max-width: 100%; width: auto; object-fit: contain; /* Chip clara fija detrás del logo: soluciona logos con fondo blanco sólido (se funden con la chip, en vez de verse como una caja rota) y logos transparentes con trazos oscuros (quedan legibles contra un fondo claro en vez de casi desaparecer sobre el sidebar oscuro). No requiere que el colegio suba una segunda versión del logo. */ background: #ffffff; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: var(--radius-md); padding: 4px 8px; box-sizing: border-box; } body.sidebar-colapsado .sidebar-brand { display: none; } .sidebar-toggle { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: var(--color-sidebar-text); border-radius: var(--radius-md); background: transparent; cursor: pointer; transition: background var(--transition-fast); flex-shrink: 0; margin-left: auto; } .sidebar-toggle:hover { background: var(--color-sidebar-bg-hover); color: var(--color-sidebar-text-hover); } body.sidebar-colapsado .sidebar-toggle { margin: 0 auto; } /* ─── Navegación ───────────────────────────────────────── */ .sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: var(--space-3) 0; } /* En modo colapsado, dejar que los tooltips salgan a la derecha */ body.sidebar-colapsado .sidebar-nav { overflow-x: visible; overflow-y: visible; } body.sidebar-colapsado .sidebar { overflow: visible; } /* Scrollbar sutil del sidebar */ .sidebar-nav::-webkit-scrollbar { width: 6px; } .sidebar-nav::-webkit-scrollbar-track { background: transparent; } .sidebar-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: var(--radius-full); } .sidebar-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); } /* ─── Separador de módulo ──────────────────────────────── */ .sidebar-separador { padding: var(--space-4) var(--space-5) var(--space-2) var(--space-5); font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold); color: var(--color-sidebar-separator); text-transform: uppercase; letter-spacing: 0.08em; user-select: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Cuando está colapsado, el separador se reduce a una línea divisoria */ body.sidebar-colapsado .sidebar-separador { padding: var(--space-2) 0; margin: var(--space-2) var(--space-3); border-top: 1px solid rgba(255, 255, 255, 0.1); font-size: 0; /* oculta el texto */ height: 1px; } /* ─── Item del menú ────────────────────────────────────── */ .sidebar-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); color: var(--color-sidebar-text); text-decoration: none; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); line-height: 1.4; transition: background var(--transition-fast), color var(--transition-fast); white-space: nowrap; position: relative; overflow: hidden; } .sidebar-item:hover { background: var(--color-sidebar-bg-hover); color: var(--color-sidebar-text-hover); text-decoration: none; } .sidebar-item.activo { background: var(--color-brand-primary); color: var(--color-sidebar-text-active); } .sidebar-item.activo:hover { background: var(--color-brand-primary-hover); } .sidebar-item-icono { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.125rem; /* 18px — tamaño del icono Bootstrap Icons */ } .sidebar-item-titulo { overflow: hidden; text-overflow: ellipsis; } body.sidebar-colapsado .sidebar-item { justify-content: center; padding: var(--space-2) var(--space-3); } body.sidebar-colapsado .sidebar-item-titulo { display: none; } /* Tooltip cuando está colapsado (aparece al hacer hover en un item) */ body.sidebar-colapsado .sidebar-item { position: relative; } body.sidebar-colapsado .sidebar-item { overflow: visible; } body.sidebar-colapsado .sidebar-item::after { content: attr(data-titulo); position: absolute; left: calc(100% + var(--space-2)); top: 50%; transform: translateY(-50%); background: var(--color-gray-900); color: var(--color-text-inverse); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); font-size: var(--font-size-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); z-index: var(--z-tooltip); box-shadow: var(--shadow-lg); } body.sidebar-colapsado .sidebar-item:hover::after { opacity: 1; } /* ═══════════════════════════════════════════════════════════ HEADER (barra superior del contenido) ═══════════════════════════════════════════════════════════ */ .shell-header { grid-area: header; height: var(--header-height); background: var(--color-bg); border-bottom: 1px solid var(--color-border); padding: 0 var(--space-6); display: flex; align-items: center; justify-content: space-between; box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: var(--z-header); } .shell-header-title { font-size: var(--font-size-md); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); } .shell-header-user { display: flex; align-items: center; gap: var(--space-4); } .shell-header-user-info { text-align: right; line-height: 1.3; } .shell-header-user-name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); } .shell-header-user-email { font-size: var(--font-size-xs); color: var(--color-text-muted); } /* ═══════════════════════════════════════════════════════════ CONTENIDO PRINCIPAL ═══════════════════════════════════════════════════════════ */ .shell-main { grid-area: main; padding: var(--space-8); overflow-y: auto; min-width: 0; /* crítico: evita que el contenido desborde el grid */ } .shell-main-container { max-width: var(--container-max-width); margin: 0 auto; } /* ═══════════════════════════════════════════════════════════ BANNER DE AMBIENTE DE DESARROLLO ═══════════════════════════════════════════════════════════ */ .dev-banner { background: var(--color-warning-light); color: var(--color-warning-dark); padding: var(--space-2) var(--space-6); text-align: center; font-size: var(--font-size-xs); font-weight: var(--font-weight-medium); border-bottom: 1px solid var(--color-warning); } /* Cuando hay dev-banner, el shell arranca debajo de él */ body.con-dev-banner .shell { min-height: calc(100vh - 28px); } /* ═══════════════════════════════════════════════════════════ BOTÓN "MANUAL" (ícono ? en el header) Inyectado por /assets/js/manual.js ═══════════════════════════════════════════════════════════ */ .btn-manual { width: 36px; height: 36px; padding: 0; margin-right: var(--space-3); display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; font-size: 18px; transition: all var(--transition-fast); } .btn-manual:hover { background: var(--color-brand-primary-light); color: var(--color-brand-primary); border-color: var(--color-brand-primary); } .btn-manual:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; } /* ═══════════════════════════════════════════════════════════ SIDEBAR — GRUPOS (acordeón) ═══════════════════════════════════════════════════════════ */ /* Botón del grupo (encabezado del acordeón) */ .sidebar-grupo-btn { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-5); width: 100%; background: transparent; border: none; color: var(--color-sidebar-text); font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; text-align: left; white-space: nowrap; transition: background var(--transition-fast), color var(--transition-fast); } .sidebar-grupo-btn:hover { background: var(--color-sidebar-bg-hover); color: var(--color-sidebar-text-hover); } .sidebar-grupo-icono { width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-size: 1.125rem; } .sidebar-grupo-titulo { flex: 1; overflow: hidden; text-overflow: ellipsis; } .sidebar-grupo-chevron { flex-shrink: 0; font-size: 0.7rem; color: var(--color-sidebar-separator); transition: transform var(--transition-fast); } .sidebar-grupo-btn[aria-expanded="true"] .sidebar-grupo-chevron { transform: rotate(90deg); } /* Panel de hijos (colapsable) */ .sidebar-grupo-hijos { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; } .sidebar-grupo-hijos.abierto { /* max-height se fija por JS al abrir */ } /* Ítem hijo: indentado respecto al grupo */ .sidebar-item.sidebar-hijo { padding-left: calc(var(--space-5) + 20px + var(--space-3)); } /* Línea vertical sutil que conecta los hijos */ .sidebar-item.sidebar-hijo::before { content: ''; position: absolute; left: calc(var(--space-5) + 10px); top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.08); } /* ─── Modo colapsado: grupos ─────────────────────────────── */ /* En modo colapsado, mostrar solo el ícono del grupo */ body.sidebar-colapsado .sidebar-grupo-btn { justify-content: center; padding: var(--space-2) var(--space-3); } body.sidebar-colapsado .sidebar-grupo-titulo, body.sidebar-colapsado .sidebar-grupo-chevron { display: none; } /* En modo colapsado, ocultar los hijos del acordeón */ body.sidebar-colapsado .sidebar-grupo-hijos { display: none; } /* Tooltip del grupo en modo colapsado */ body.sidebar-colapsado .sidebar-grupo-btn { position: relative; overflow: visible; } body.sidebar-colapsado .sidebar-grupo-btn::after { content: attr(data-titulo); position: absolute; left: calc(100% + var(--space-2)); top: 50%; transform: translateY(-50%); background: var(--color-gray-900); color: var(--color-text-inverse); padding: var(--space-1) var(--space-2); border-radius: var(--radius-md); font-size: var(--font-size-xs); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity var(--transition-fast); z-index: var(--z-tooltip); box-shadow: var(--shadow-lg); } body.sidebar-colapsado .sidebar-grupo-btn:hover::after { opacity: 1; }