/* ===============================================================================
root GLOBAL
DEFINIMOS LAS CONSTANTES BASICAS PARA TODO EL SISTEMA, SI UN
PROGRAMA OCUPA UN AJUSTE O ALGO MAS LO HACE EN SU .CSS Y SOLO
LO QUE NECESITA.
=============================================================================== */
:root
{
/* ===========================================================================
FUENTE Y TAMAÑO ESTANDAR DE FONT EN EL SISTEMA
Forzar que todos los elementos de control usen la misma fuente
Definimos la variable de la fuente Poppins aquí dentro
=========================================================================== */
--fuente-institucional: 'Poppins', "Century Gothic", AppleGothic, sans-serif;
/* ===========================================================================
COLORES INSTITUCIONALES POR MÓDULO
=========================================================================== */
--color-home: #008000; /* Verde - Home */
--color-panel: #CC0000; /* Rojo - Panel de Control */
--color-reqs: #FFD700; /* Amarillo - Requerimientos */
--color-encu: #800080; /* Morado - Encuestas */
--color-eval: #0078d4; /* Azul - Evaluación */
--color-tools: #606060; /* Gris - Utilidades */
--color-cco: #548C2E; /* Verde Militar - CCO */
/* ===========================================================================
COLORES DE ESTADOS DE REQUERIMIENTOS (reutilizables)
=========================================================================== */
--color-nuevo: #FFCC33; /* Amarillo claro - Nuevos */
--color-sin-asignar: #FADD75; /* Amarillo Crema / Arena */
--color-sin-asignar2: #A9A9A9; /* Gris - Sin Asignar */
--color-x-autorizar: #990066; /* Morado / Magenta Oscuro */
--color-en-proceso: #000000; /* Negro - En Proceso */
--color-por-confirmar: #20B2AA; /* Turquesa - Por Confirmar */
--color-terminado: #228B22; /* Verde bosque - Terminados */
--color-terminado2: #72FA98; /* Verde Menta Brillante */
--color-cancelado: #A9A9A9; /* Gris - Cancelado */
--color-cancelar: #66677A; /* Gris Azulado / Pizarra */
--color-rechazado: #FF8C00; /* Naranja - Rechazado */
--color-rechazar: #FF7C80; /* Coral / Rojo Suave */
--color-requiere: #7581FA; /* Azul Lavanda / Pervinca */
--color-urge: #FF5757; /* Rojo Intenso / Alerta */
/* ===========================================================================
COLORES DE INDICADORES DE TIEMPO (reutilizables)
=========================================================================== */
--tiempo-superior: #800080; /* Morado - Superior (tiempo = 0) */
--tiempo-normal: #4169E1; /* Azul royal - En Tiempo (tiempo = 1) */
--tiempo-tarde: #CC0000; /* Rojo - Tarde (tiempo = 2) */
/* ===========================================================================
COLORES DE LAYOUT Y SUPERFICIES
=========================================================================== */
--color-bg-sidebar: #ffffff; /* Blanco Puro - Fondo de la barra lateral */
--color-bg-body: #ffffff; /* Blanco Puro - Fondo general de la aplicación */
--color-text-primary: #323130; /* Gris Muy Oscuro (Casi Negro) - Color principal de texto, muy legible */
--color-border: #e0e0e0; /* Gris Claro - Para líneas divisorias y bordes sutiles */
--color-hover: #f3f2f1; /* Gris Nube Muy Tenue - Color de fondo al pasar el mouse por botones o menús */
/* ===========================================================================
DIMENSIONES FIJAS DE LA INTERFAZ (nombres de desarrollo web)
=========================================================================== */
--sidebar-width-collapsed: 60px; /* Ancho del menu lateral cuando esta colapsado */
--topbar-height: 50px; /* Altura de la barra superior */
/* ===========================================================================
TIPOGRAFÍA RESPONSIVA (Sistema estándar en REM)
=========================================================================== */
--texto-7pt: 0.58rem; /* 7pt - Sublabels, checkboxes */
--texto-8pt: 0.67rem; /* 8pt - Filtros, botones pequeños */
--texto-9pt: 0.75rem; /* 9pt - Formularios, modales */
--texto-10pt: 0.83rem; /* 10pt - Más Pequeña aún */
--texto-11pt: 0.92rem; /* 11pt - Más PequeñA */
--texto-12pt: 1rem; /* 12pt - Contenido principal */
--texto-14pt: 1.17rem; /* 14pt - Links principales */
--texto-16pt: 1.33rem; /* 16pt - Títulos de página */
/* Line-heights estándar */
--line-height-compacto: 1; /* Para tablas, botones, filtros */
--line-height-normal: 1.3; /* Para texto de lectura */
--line-height-holgado: 1.6; /* Para párrafos largos */
/* ===========================================================================
ESPACIADOS ESTÁNDAR (en rem para responsividad)
=========================================================================== */
--spacing-xs: 0.25rem; /* 4px */
--spacing-sm: 0.5rem; /* 8px */
--spacing-md: 1rem; /* 16px */
--spacing-lg: 1.5rem; /* 24px */
--spacing-xl: 2rem; /* 32px */
/* ===========================================================================
AJUSTES PARA QUE SE VEA TODO BIEN EN DESKTOP, AL FINAL DE ESTE
ARCHIVO VIENEN LOS AJUSTES GLOBALES PARA CELULAR
=========================================================================== */
--padding-page-top: 0.5rem;
--padding-page-right: 0.5rem;
--padding-page-bottom: 1rem;
--margin-page-left: 0.5rem; /* Extra para ver el sombreado del menú */
}
/* ===========================================================================
CONTENEDOR PRINCIPAL ESTÁNDAR (Todas las páginas)
=========================================================================== */
.contenedor-principal-sirei {
padding-top: var(--padding-page-top); /* Aire superior del contenido */
padding-right: var(--padding-page-right); /* Aire derecho del contenido */
padding-bottom: var(--padding-page-bottom); /* Aire inferior del contenido */
margin-left: var(--margin-page-left); /* Separacion del borde izq del menu */
width: calc(100% - var(--margin-page-left)); /* Ancho total menos el margen izquierdo */
}
/* ===========================================================================
FIJADOR DE BARRA
POR EJEMPLO PARA DEJAR FIJA LA BARRA DE FILTRO Y EL PAGINADOR
Los mantiene en su sitio, fijos inmoviles.
=========================================================================== */
.fijador {
position: sticky; /* Se pega al borde cuando haces scroll */
top: 0; /* Se pega hasta arriba del contenedor */
}
/* ===========================================================================
BOTONES, TODOS CON EL MISMO ESTILO. NO DEBE HABER NINGUN OTRO.
Y SOLO HAY TRES TAMAÑOS POSIBLES EN TODO EL SISTEMA,
Y LA "X" PARA CERRAR LOS MODULOS QUE SE ABREN EN UNA VENTANA PEQUEÑA.
=========================================================================== */
.boton-chico {
margin-right: 0.6rem; /* Espacio a la derecha entre botones */
padding: 0.2rem 0.5rem; /* Aire interno: poco vertical, mas horizontal */
border: none; /* Sin borde visible */
border-radius: 0.25rem; /* 4px - Esquinas ligeramente redondeadas */
cursor: pointer; /* Manita al pasar el mouse */
font-size: var(--texto-7pt); /* Texto mas pequeno del sistema */
font-weight: bold; /* Texto en negritas */
display: inline-block; /* Se alinea en linea con otros elementos */
transition: background-color 0.3s ease, transform 0.1s; /* Animacion suave al hover */
background-color: #e0e0e0; /* Gris Claro default, cada pagina lo cambia */
}
.boton-chico:hover {
box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2); /* Sombra crece al flotar */
transform: translateY(-0.0625rem); /* -1px - Se eleva ligeramente */
}
/* Efecto al hacer click */
.boton-chico:active {
transform: translateY(0); /* Regresa a su posicion original */
box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2); /* Sombra minima (efecto "presionado") */
}
.boton {
margin-left: 0.6rem; /* Espacio a la izquierda entre botones */
padding: 0.2rem 1rem; /* Aire interno: poco vertical, mas horizontal */
border: none; /* Sin borde visible */
border-radius: 0.25rem; /* 4px - Esquinas ligeramente redondeadas */
cursor: pointer; /* Manita al pasar el mouse */
font-size: var(--texto-9pt); /* Tamano 9pt - Estandar del sistema */
font-weight: bold; /* Texto en negritas */
text-align: center; /* Texto centrado dentro del boton */
display: inline-block; /* Se alinea en linea con otros elementos */
transition: background-color 0.3s ease, transform 0.1s; /* Animacion suave al hover */
background-color: #e0e0e0; /* Gris Claro default, cada pagina lo cambia */
}
.boton:hover {
box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2); /* Sombra crece al flotar */
transform: translateY(-0.0625rem); /* -1px - Se eleva ligeramente */
}
/* Efecto al hacer click */
.boton:active {
transform: translateY(0); /* Regresa a su posicion original */
box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2); /* Sombra minima (efecto "presionado") */
}
.boton:disabled {
opacity: 0.5; /* Se ve transparente/apagado */
cursor: not-allowed; /* Icono de "prohibido" al pasar mouse */
}
.boton-grande {
margin-left: 0.6rem; /* Espacio a la izquierda entre botones */
padding: 0.36rem 1.4rem; /* Mas aire que .boton para verse prominente */
border: none; /* Sin borde visible */
border-radius: 0.25rem; /* 4px - Esquinas ligeramente redondeadas */
cursor: pointer; /* Manita al pasar el mouse */
font-size: var(--texto-10pt); /* Texto un poco mas grande que .boton */
font-weight: bold; /* Texto en negritas */
text-align: center; /* Texto centrado dentro del boton */
display: inline-block; /* Se alinea en linea con otros elementos */
transition: background-color 0.3s ease, transform 0.1s; /* Animacion suave al hover */
background-color: #e0e0e0; /* Gris Claro default, cada pagina lo cambia */
}
.boton-grande:hover {
box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2); /* Sombra crece al flotar */
transform: translateY(-0.0625rem); /* -1px - Se eleva ligeramente */
}
/* Efecto al hacer click */
.boton-grande:active {
transform: translateY(0); /* Regresa a su posicion original */
box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2); /* Sombra minima (efecto "presionado") */
}
.boton-grande:disabled {
opacity: 0.5; /* Se ve transparente/apagado */
cursor: not-allowed; /* Icono de "prohibido" al pasar mouse */
}
/* "X" PARA CERRAR LOS MODULOS QUE SE ABREN EN UNA VENTANA PEQUEÑA. */
.boton-x {
background: none; /* Sin fondo, solo la X */
border: none; /* Sin borde */
font-size: 1.25rem; /* Tamano de la X */
font-weight: bold; /* X en negritas */
color: #555555; /* Gris Obscuro */
cursor: pointer; /* Manita al pasar el mouse */
padding: 0; /* Sin aire interno */
width: 1.6rem; /* Ancho fijo del area clickeable */
height: 1.6rem; /* Alto fijo del area clickeable */
line-height: 1; /* Centra verticalmente la X */
}
.boton-x:hover {
color: black; /* Se oscurece al pasar el mouse */
}
/* ===========================================================================
BARRA DE FILTROS (Para todas las páginas que la ocupen)
=========================================================================== */
.barra-filtros {
background-color: white; /* Cada pagina le pone su color de modulo */
padding: 0.4rem 0.5rem; /* Aire interno compacto */
display: flex; /* Elementos en fila horizontal */
align-items: center; /* Centrado vertical de todos los hijos */
vertical-align: central;
gap: 0.31rem; /* Espacio uniforme entre cada control */
flex-wrap: wrap; /* Si no caben, bajan a la siguiente linea */
}
.barra-filtros-select {
font-size: var(--texto-8pt); /* Texto pequeno para los dropdowns */
padding: 0.13rem; /* Aire interno minimo */
margin-left: 0.5rem; /* Separacion del elemento anterior */
}
.barra-filtros-checkbox {
font-size: var(--texto-7pt); /* Texto mas pequeno para checkboxes */
display: inline-flex; /* En linea con alineacion flex */
align-items: center; /* Check y texto alineados al centro */
margin-left: 0.5rem; /* Separacion del elemento anterior */
}
.barra-filtros-label {
font-size: var(--texto-8pt); /* Texto pequeno para etiquetas */
margin-left: 0.5rem; /* Separacion del elemento anterior */
}
.barra-filtros-textbox {
font-size: var(--texto-8pt); /* Texto pequeno para campos de texto */
width: 10rem; /* Ancho fijo del campo */
margin-left: 0.5rem; /* Separacion del elemento anterior */
}
.barra-filtros-boton {
font-size: var(--texto-8pt); /* Debe ir DESPUES de .boton para sobreescribir */
margin-left: 0.5rem; /* Separacion del elemento anterior */
}
/* Input pequeno para numero de requerimiento */
.barra-filtros-input-req {
width: 5rem; /* Ancho compacto para numeros cortos */
font-weight: bold; /* Numero en negritas */
font-size: var(--texto-8pt); /* Texto pequeno */
border: 1px solid #808080; /* Borde gris visible */
text-align: center; /* Numero centrado */
margin-left: 0.5rem; /* Separacion del elemento anterior */
}
/* Link "No me se el numero" */
.link-consulta {
color: #0000EE; /* Azul link estandar */
text-decoration: none; /* Sin subrayado por default */
font-size: var(--texto-8pt); /* Texto pequeno */
margin-left: 0.5rem; /* Separacion del elemento anterior */
}
.link-consulta:hover {
color: #551A8B; /* Morado visitado al pasar mouse */
text-decoration: underline; /* Subrayado al hacer hover */
}
/* .btn-filtrar */ /* SE UTILIZA boton QUE ES UN BOTON NORMAL DEL SISTEMA */
/* ===========================================================================
BARRA DE PAGINACIÓN Y CONTADOR (Para todas las páginas que la ocupen)
=========================================================================== */
.barra-paginacion {
display: flex; /* Elementos en fila horizontal */
align-items: center; /* Centrado vertical */
padding: 0.5rem 1rem; /* Aire interno */
background-color: white; /* Fondo blanco */
border-bottom: 1px solid #ddd; /* Linea separadora inferior */
}
/* ===== PAGINACION ===== */
.paginacion-contenedor {
font-size: var(--texto-9pt); /* Texto estandar del sistema */
display: flex; /* Botones en fila */
align-items: center; /* Centrado vertical */
color: #696969; /* Gris medio para los numeros */
}
.btn-paginacion {
color: #696969; /* Gris medio */
background: none; /* Sin fondo */
border: none; /* Sin borde */
cursor: pointer; /* Manita al pasar mouse */
text-decoration: none; /* Sin subrayado */
padding: 0.13rem 0.31rem; /* Area clickeable minima */
}
.btn-paginacion:hover:not(:disabled) {
color: #333; /* Se oscurece al hover */
}
.btn-paginacion:disabled {
opacity: 0.5; /* Se ve apagado */
cursor: not-allowed; /* Icono de prohibido */
text-decoration: none; /* Sin subrayado */
}
.btn-pagina {
color: #696969; /* Gris medio */
background: none; /* Sin fondo */
border: none; /* Sin borde */
cursor: pointer; /* Manita al pasar mouse */
text-decoration: underline; /* Subrayado como link */
min-width: 1.56rem; /* Ancho minimo para que no brinquen */
text-align: center; /* Numero centrado */
}
.btn-pagina:hover {
color: #333; /* Se oscurece al hover */
}
.btn-pagina-activo {
font-weight: bold; /* Negritas = pagina actual */
color: crimson; /* Rojo para destacar la pagina activa */
text-decoration: none; /* Sin subrayado (ya no es link) */
}
/* ===== CONTADOR DE REGISTROS ===== */
.contador-registros {
font-size: var(--texto-9pt); /* Texto estandar del sistema */
text-align: right; /* Pegado a la derecha */
white-space: nowrap; /* No se parte en dos lineas */
flex-grow: 1; /* Ocupa todo el espacio restante */
}
/* ===========================================================================
ETIQUETAS (SON LABELS QUE TIENEN UN FONDO DE COLOR DISTINTO AL BLANCO)
EL TAMAÑO YA LO PUEDE DEFINIR CADA PROGRAMA, PERO SE ESPERAN MÁXIMO DOS TAMAÑOS
POSIBLES EN TODO EL SISTEMA
=========================================================================== */
.etiqueta {
border: none; /* Sin borde */
border-radius: 0.25rem; /* 4px - Esquinas redondeadas */
font-weight: bold; /* Texto en negritas */
text-align: center; /* Texto centrado */
padding: 0.1rem 0.4rem; /* Aire interno — ajustar por pagina */
margin-right: 0.3rem; /* Espacio a la derecha — ajustar por pagina */
background-color: red; /* Color default — ajustar por pagina */
color: white; /* Texto blanco — ajustar por pagina */
}
.etiqueta-solo-texto {
font-weight: bold; /* Negritas sin fondo de color */
margin-right: 0.3rem; /* Espacio a la derecha */
}
/* AQUI VOY ESTO NO LO HE FORMATEADO AQUI Y LO DE ARRIBA NO LO HE APLICADO EN TODOS LADOS AUN */
/* AHORA SIGUEN LOS MODALES, HAY QUE ALINEAR ESOS BOTONES... Y SI TIENEN ALGO PADRE INTEGRARLO AQUI TAMBIEN ;O) */
/* ===========================================================================
DISTRIBUCIÓN DE LA PANTALLA EN TODO EL SISTEMA ES DE 3 ELEMENTOS:
- TIENE EL MENÚ AL LADO IZQ. (SIDEBAR)
- UN TOPBAR ARRIBA.
- EL CUERPO EN DONDE SE MUESTRAN lAS PÁGINAS ACORDE AL MENU.
=========================================================================== */
/* 1. El Grid Principal (marco rígido de 100vh) */
.main-layout {
display: grid;
/* Grid de 2 columnas: Menú ajustado al contenido | Resto flexible */
/* 'max-content' hace que el menú mida solo lo que mide el texto */
grid-template-columns: max-content 1fr;
grid-template-rows: var(--topbar-height) 1fr;
height: 100dvh; /* Usamos 100dvh para que se adapte exactamente al espacio visible real del móvil */
width: 100vw;
overflow: hidden; /* Evita que el grid crezca con los requerimientos */
transition: grid-template-columns 0.3s ease;
}
.main-layout.collapsed {
/* Cuando se colapse, sí respetará los 60px definidos en variables */
grid-template-columns: var(--sidebar-width-collapsed) 1fr;
}
/* 2. Congelamos el cuerpo de la página para que NO haga scroll global */
html, body {
font-family: var(--fuente-institucional);
/* font-size: var(--texto-12pt); * Se maneja por default un texto normal en todos los browser a menos que especifiquen otro
por eso no hay que declararlo aquí a menos que queramos cambiar todas las dimensiones de
todo dado que lo estamos manejando en rem
*/
margin: 0;
height: 100dvh; /* Usamos 100dvh para que se adapte exactamente al espacio visible real del móvil */
overflow: hidden; /* SCROLL BLOQUEADO: Nada se sale de la ventana */
background-color: var(--color-bg-body);
}
/* 2. El Contenido es EL ÚNICO lugar donde permitimos scroll */
.content {
grid-row: 2;
grid-column: 2;
background-color: var(--color-bg-body);
padding: 0; /* NO BORRAR --- Sin padding por defecto - cada página define su espacio */
height: 100%; /* Ocupa el espacio restante exacto */
overflow-y: auto; /* Para poder hacer scroll en paginas como Lelag, Rquerimientos, etc. */
position: relative;
box-shadow: inset 10px 0 15px -8px rgba(0, 0, 0, 0.1);
/* NUEVO: Agregamos un colchón inferior.
Al llegar al final del scroll, habrá un espacio en blanco de 20px
para asegurar que el último texto sea legible y no toque el borde de la pantalla */
padding-bottom: 50px;
}
/* 3. Le decimos a la barra: "Tú solo existes en la fila en el lugar 3" */
.top-row {
grid-row: 1;
background-color: transparent; /* El color vendrá del componente hijo */
}
/* 4. El Sidebar ocupa el 100% de la altura de ese grid rígido */
.sidebar {
grid-row: 1 / -1;
grid-column: 1;
background-color: var(--color-bg-sidebar);
display: flex;
flex-direction: column;
height: 100%; /* Se estira para llenar el hueco del grid */
overflow: hidden; /* El scroll lo manejaremos DENTRO del NavMenu si hace falta */
border-right: 1px solid var(--color-border);
}
/* --- ESTILOS DE NAVEGACION (SUBMENUS Y HOVERS) --- */
.submenu {
background-color: white !important; /* Fondo blanco forzado */
padding-left: 1.3rem !important; /* Indentacion de submenus respecto al padre */
display: flex; /* Los items van en columna */
flex-direction: column; /* Apilados verticalmente */
padding-bottom: 50px; /* Colchon inferior para scroll */
}
.submenu-link {
text-decoration: none !important; /* Sin subrayado forzado */
color: black !important; /* Texto negro forzado */
font-size: var(--texto-10pt); /* Texto un poco mas pequeno */
padding: 0.375rem 0 !important; /* Aire vertical entre cada link */
display: flex; /* Bullet e icono en linea */
align-items: center; /* Centrado vertical bullet+texto */
}
.submenu-link .bullet {
margin-right: 0.5rem; /* Espacio entre bullet y texto */
flex-shrink: 0; /* El bullet nunca se encoge */
}
/* Logica de colores dinamicos mediante color-mix */
.nav-item-row:hover {
background-color: color-mix(in srgb, var(--modulo-color), white 85%) !important; /* Tinte suave del color del modulo */
}
/* Ajustes para estado colapsado (centrado de iconos y suavizado de fondo) */
.nav-menu-container[style*="width: 80px"] .nav-item-row:hover,
.nav-item-wrapper:has(img[title]):hover .nav-item-row,
.nav-item-row.active-item:has(img[title]),
.nav-item-row:has(img[title]):hover,
.submenu-link:hover {
background-color: color-mix(in srgb, var(--modulo-color), white 90%) !important; /* Tinte mas suave (90% blanco) */
}
.submenu-link:hover {
border-radius: 0.25rem; /* Esquinas redondeadas al hover */
text-decoration: none !important; /* Sin subrayado al hover */
}
.nav-item-row img, .nav-item-row span {
opacity: 1 !important; /* Iconos y texto siempre visibles */
visibility: visible !important; /* Forzar visibilidad */
}
.submenu-link.active .sub-label, .submenu-link.active .bullet {
font-weight: bold; /* Negritas = submenu activo actual */
}
/* ===========================================================================
ULTILIDADES DE BLAZOR (ERROR CRITICO)
=========================================================================== */
#blazor-error-ui {
background: #f8d7da; /* Un rojo claro de alerta */
color: #721c24; /* Texto vino oscuro */
bottom: 0;
position: fixed;
width: 100%;
display: none; /* Blazor lo cambia a 'block' automáticamente al fallar */
padding: 1rem;
border-top: 2px solid #f5c6cb;
text-align: center;
font-weight: bold;
}
/* El botón de recargar que aparece dentro del error */
#blazor-error-ui .reload {
margin-left: 0.625rem;
color: #004586;
text-decoration: underline;
}
/* ===========================================================================
DESPLIEGE DE MENSAJE PARA CUANDO NO HAY INFORMACIÓN PARA MOSTRAR
=========================================================================== */
.no-resultados {
text-align: center; /* Mensaje centrado */
padding: 2.5rem; /* Aire generoso alrededor */
background-color: #cccc99; /* Fondo amarillo/verde apagado */
color: #000000; /* Texto negro */
font-weight: normal; /* Peso normal (no negritas) */
margin-top: 1rem; /* Separacion de la tabla de arriba */
}
.no-resultados p {
margin: 0.31rem 0; /* Espacio minimo entre parrafos */
}
/* ===========================================================================
VARIABLES PARA CELULAR
=========================================================================== */
@media (min-width: 768px) {
:root {
--padding-page-top: 1rem;
--padding-page-right: 2rem;
--padding-page-bottom: 2rem;
--margin-page-left: 1rem; /* Más espacio en desktop */
}
}
/* Contenedor condicional para responsive */
/* En PC: display:contents hace que el div "no exista" y sus hijos se comporten */
/* como si estuvieran directamente en el contenedor padre (barra-filtros) */
/* En movil: se convierte en flex con width:100% forzando salto de linea */
.br-movil {
display: contents; /* En PC: invisible, hijos se portan como del padre */
}
.solo-movil {
display: none; /* En PC: oculto, solo se ve en celular */
}
/* Reglas exclusivas para Celular */
@media (max-width: 767px) {
.ocultar-en-celular {
display: none !important; /* Esconde elementos solo en celular */
}
.solo-pc {
display: none !important; /* En celular: oculta textos largos de PC */
}
.solo-movil {
display: inline !important; /* En celular: muestra textos abreviados */
}
/* Contenedor que fuerza nueva linea en movil */
/* Uso: envolver elementos que deben bajar a nueva linea en celular */
.br-movil {
display: flex; /* Contenedor flex visible en movil */
width: 100%; /* Ocupa toda la linea, fuerza salto */
gap: 0.5rem; /* Espacio entre elementos hijos */
}
/* Forzamos que la barra ocupe TODAS las columnas (del 1 al final) */
.top-row {
grid-row: 1; /* Primera fila del grid */
grid-column: 1 / -1; /* Abarca desde col 1 hasta el final */
width: 100vw; /* Ancho completo de la pantalla */
background-color: transparent; /* Permite que el color del hijo se vea */
}
/* Forzamos el comportamiento en vertical */
.main-layout {
/* En lugar de max-content, usamos 1px para "esconder" el sidebar */
grid-template-columns: 1px 1fr !important; /* Sidebar de 1px = invisible en movil */
}
.mobile-overlay {
position: fixed; /* Fijo en toda la pantalla */
top: 0; /* Desde arriba */
left: 0; /* Desde la izquierda */
width: 100vw; /* Ancho completo */
height: 100vh; /* Alto completo */
background-color: rgba(0, 0, 0, 0.3); /* Sombra oscura semi-transparente */
cursor: pointer; /* Manita para indicar que se puede cerrar */
}
}/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ===============================================================================
SIREI SPINNER - Indicador de carga estandar del sistema
Uso:
Color: por defecto usa --color-home (verde). Cada modulo puede sobreescribir
con --spinner-color en su propio CSS.
=============================================================================== */
.sirei-spinner {
display: flex; /* Dots en fila horizontal */
gap: 0.3rem; /* Espacio entre cada dot */
justify-content: center; /* Dots centrados horizontalmente */
align-items: center; /* Dots centrados verticalmente */
padding: 1rem 0; /* Aire vertical arriba y abajo */
margin-top: 4.5rem; /* Igual altura que sirei-overlay (80px) */
--spinner-color: var(--color-home); /* Verde por default, cada modulo lo cambia */
}
.sirei-spinner .dot {
width: 0.8rem; /* Tamano de cada circulo */
height: 0.8rem; /* Circulo cuadrado (mismo ancho y alto) */
background-color: var(--spinner-color); /* Color del modulo actual */
border-radius: 50%; /* Lo hace circulo perfecto */
animation: sirei-bounce 1.8s ease-in-out infinite; /* Rebote continuo de 1.8s */
}
.sirei-spinner .dot:nth-child(1) { animation-delay: 0s; } /* Dot 1: sin delay */
.sirei-spinner .dot:nth-child(2) { animation-delay: 0.15s; } /* Dot 2: 150ms despues */
.sirei-spinner .dot:nth-child(3) { animation-delay: 0.3s; } /* Dot 3: 300ms despues */
.sirei-spinner .dot:nth-child(4) { animation-delay: 0.45s; } /* Dot 4: 450ms despues */
.sirei-spinner .dot:nth-child(5) { animation-delay: 0.6s; } /* Dot 5: 600ms despues */
@keyframes sirei-bounce {
0%, 80%, 100% {
transform: scale(0.6); /* Tamano reducido (estado normal) */
opacity: 0.5; /* Semi-transparente */
}
40% {
transform: scale(1); /* Tamano completo (punto maximo) */
opacity: 1; /* Totalmente visible */
}
}
/* ===============================================================================
SPINNER OVERLAY — se pone encima del contenido sin destruirlo
Para páginas con ChartJS que no toleran ser destruidas/recreadas.
Uso: @if (mostrarOverlay) {
}
=============================================================================== */
.sirei-overlay {
position: fixed; /* Fijo en viewport (no se mueve con scroll) */
top: var(--topbar-height); /* Empieza debajo del TopBar (50px) */
left: var(--sidebar-width-collapsed); /* Empieza a la derecha del menú (60px) */
width: calc(100% - var(--sidebar-width-collapsed)); /* Ancho = viewport menos el menú */
height: calc(100% - var(--topbar-height)); /* Alto = viewport menos el TopBar */
background: radial-gradient( /* Degradado circular desde el spinner hacia afuera */
circle at 50% 5rem, /* Centro del degradado = donde esta el spinner */
rgba(255,255,255, 1.00) 0%, /* Centro: casi opaco (90%) */
rgba(255,255,255, 0.40) 60%, /* Medio: semi-transparente */
rgba(255,255,255, 0.10) 100% /* Bordes: apenas visible (10%) */
);
display: flex;
justify-content: center; /* Spinner centrado horizontalmente */
align-items: flex-start; /* Spinner arriba, no al centro */
padding-top: 5rem; /* Baja el spinner un poco del borde superior */
}
/* Spinner dentro del overlay: anular margin-top (ya tiene padding-top del overlay) */
.sirei-overlay .sirei-spinner {
margin-top: 0;
}
/* Overlay en celular: sin sidebar, cubrir todo el viewport */
@media (max-width: 767px) {
.sirei-overlay {
left: 0; /* Sin sidebar en celular */
width: 100%; /* Ancho completo */
}
}