/* ============================================================ site.css — FNN.Monitor Estilos propios del área de monitores. Todos los valores de diseño vienen de _tema.css (cargar _tema.css y _componentes.css ANTES que este fichero en _Layout.cshtml). No declarar aquí ningún :root ni valor hardcodeado — ver docs/CONVENIOS.md. Estado actual: FNN.Monitor todavía usa Bootstrap 5 (CDN) para la estructura de _Layout.cshtml (navbar, container, alert, btn-close). Este fichero NO sustituye Bootstrap todavía (eso implicaría tocar vistas, fuera de alcance de esta pasada de infraestructura). Se limita a retintar los elementos de marca visibles en el layout compartido para que usen los tokens nuevos, y queda preparado para recibir los estilos de la pantalla piloto (Pasar lista / Evaluación) cuando se implemente. ============================================================ */ .navbar-brand { font-family: var(--fuente-principal); font-weight: var(--peso-bold); } /* Sustituye bg-success de Bootstrap por el acento de marca del Figma en cuanto se retire la clase de Bootstrap de _Layout.cshtml (paso a dar junto con la pantalla piloto). Mientras tanto, se dejan ambas reglas conviviendo sin conflicto: esta no tiene efecto hasta que se quite bg-success del navbar en la vista. */ .navbar.navbar-marca { background: var(--color-primario); } .navbar.navbar-marca .navbar-brand, .navbar.navbar-marca .nav-link { color: var(--color-sobre-primario); } /* Portado de FNN.Public/site.css (2026-07-04, Login al Design System): estilo de errores de validación de formulario, con token de color en vez del hex fijo que arrastra FNN.Public/public.css (legacy pendiente de limpieza allí, ver docs/AUDITORIA_TRANSVERSAL.md — no se replica aquí ese hardcode). Primer consumidor: Auth/Login.cshtml. */ .validation-summary, .field-error { color: var(--color-peligro); font-weight: var(--peso-bold); } /* Composición de pantalla completa para Login (corrección 2026-07-04, Fermín: el formulario quedaba pegado arriba y el pie demasiado cerca). Body en columna a pantalla completa;
reparte el espacio sobrante y centra .tarjeta-acceso verticalmente entre cabecera y pie, dejando el pie como cierre real de la pantalla en vez de pegado al formulario. Clase específica de esta pantalla (no toca el del resto de Monitor, que sigue usando _Layout.cshtml con navbar de Bootstrap). */ body.pagina-login { display: flex; flex-direction: column; min-height: 100vh; } body.pagina-login main { flex: 1 0 auto; display: flex; align-items: center; justify-content: center; padding-block: var(--espaciado-xxl); } /* Home Monitor (pág. 5-6 del PDF): menú de categorías en acordeón. Mismo esqueleto de página completa que Login (columna a 100vh para que el pie quede al fondo), pero aquí el contenido NO se centra verticalmente — es una lista que arranca justo bajo la cabecera, no un formulario pequeño. */ body.pagina-inicio { display: flex; flex-direction: column; min-height: 100vh; } body.pagina-inicio main { flex: 1 0 auto; width: 100%; max-width: 640px; margin: 0 auto; padding: var(--espaciado-xl) var(--espaciado-lg); } .menu-inicio { display: flex; flex-direction: column; gap: var(--espaciado-md); } /* Pasar lista (pág. 7-8 del PDF): pantalla con más contenido que Home (filtros de contexto + calendario + alumnado), por eso usa --ancho-contenido (960px) en vez del ancho de menú de Home (640px). */ body.pagina-asistencia { display: flex; flex-direction: column; min-height: 100vh; } body.pagina-asistencia main { flex: 1 0 auto; width: 100%; max-width: var(--ancho-contenido); margin-block: 0; margin-inline: auto; padding-block: var(--espaciado-xl); /* Corrección de composición (2026-07-13, ronda maqueta): padding lateral responsive en vez de un token fijo, mismo patrón que .contenedor en _componentes.css — evita que el contenido se perciba "pegado" a un borde en anchos intermedios. */ padding-inline: clamp(1rem, 4vw, 2rem); } /* Evaluación (pág. 9-10 del PDF): mismo esqueleto de página completa que Pasar lista (acordeón de alumnado + fases, contenido denso) — sin este ancho máximo,
no tenía ningún tope y la lista de alumnado se estiraba borde a borde en escritorio ancho (detectado en la ronda visual 2026-07-14 al revisar 1920/1366px). Faltaba por completo: la clase se usaba en Curso.cshtml pero nunca se había definido aquí. */ body.pagina-evaluacion { display: flex; flex-direction: column; min-height: 100vh; } body.pagina-evaluacion main { flex: 1 0 auto; width: 100%; max-width: var(--ancho-contenido); margin-block: 0; margin-inline: auto; padding-block: var(--espaciado-xl); padding-inline: clamp(1rem, 4vw, 2rem); }