/* ===============================================================================
   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;
    --topbar-height: 50px;

    /* ===========================================================================
       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);
    padding-right: var(--padding-page-right);
    padding-bottom: var(--padding-page-bottom);
    margin-left: var(--margin-page-left);
    width: calc(100% - var(--margin-page-left));
}

/* ===========================================================================
   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;
    top: 0;
}

/* ===========================================================================
   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;
    padding: 0.2rem 0.5rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: var(--texto-7pt);
    font-weight: bold;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.1s;
    background-color: #e0e0e0;   /* Gris Claro, lo deben cambiar en cada programa si ocupan otro color */
}
.boton-chico:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2); /* 0 4px 8px - Crece la sombra al "flotar" */
    transform: translateY(-0.0625rem); /* -1px - Eleva el botón (efecto moderno) */
}
/* Efecto al hacer click */
.boton-chico:active {
    transform: translateY(0);
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}

.boton {
    margin-left: 0.6rem;
    padding: 0.2rem 1rem;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    font-size: var(--texto-9pt);              /* Tamaño 9pt - Estándar del sistema */
    font-weight: bold;
    text-align: center;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.1s;
    background-color: #e0e0e0;   /* Gris Claro por default, lo deben cambiar en cada programa si ocupan otro color */
}
.boton:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2); /* 0 4px 8px - Crece la sombra al "flotar" */
    transform: translateY(-0.0625rem); /* -1px - Eleva el botón (efecto moderno) */
}
/* Efecto al hacer click */
.boton:active {
    transform: translateY(0);
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}
.boton:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.boton-grande {
    margin-left: 0.6rem;
    padding: 0.36rem 1.4rem; /* Un poco más de aire */
    border: none;
    border-radius: 0.25rem; /* 4px - Bordes suavizados, pero no circulares (minimalista) */
    cursor: pointer;
    font-size: var(--texto-10pt);
    font-weight: bold;
    text-align: center;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.1s; /* Animación suave */
    background-color: #e0e0e0;   /* Gris Claro por default, lo deben cambiar en cada programa si ocupan otro color */
}
.boton-grande:hover {
    box-shadow: 0 0.25rem 0.5rem rgba(0,0,0,0.2); /* 0 4px 8px - Crece la sombra al "flotar" */
    transform: translateY(-0.0625rem); /* -1px - Eleva el botón (efecto moderno) */
}
/* Efecto al hacer click */
.boton-grande:active {
    transform: translateY(0);
    box-shadow: 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.2);
}
.boton-grande:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* "X" PARA CERRAR LOS MODULOS QUE SE ABREN EN UNA VENTANA PEQUEÑA. */
.boton-x {
    background: none;
    border: none;
    font-size: 1.25rem;
    font-weight: bold;
    color: #555555;            /* Gris Obscuro */
    cursor: pointer;
    padding: 0;
    width: 1.6rem;
    height: 1.6rem;
    line-height: 1;
}
.boton-x:hover {
    color: black;
}



/* ===========================================================================
   BARRA DE FILTROS (Para todas las páginas que la ocupen)
   =========================================================================== */
.barra-filtros {
    background-color: white;  /* Cada página debe ponerle el color que ocupe */
    padding: 0.4rem 0.5rem;
    display: flex;
    align-items: center;
    vertical-align: central;
    gap: 0.31rem;
    flex-wrap: wrap;
}
.barra-filtros-select {
    font-size: var(--texto-8pt);
    padding: 0.13rem;
    margin-left: 0.5rem;
}
.barra-filtros-checkbox {
    font-size: var(--texto-7pt);
    display: inline-flex;
    align-items: center;
    margin-left: 0.5rem;
}
.barra-filtros-label {
    font-size: var(--texto-8pt);
    margin-left: 0.5rem;
}
.barra-filtros-textbox {
    font-size: var(--texto-8pt);
    width: 10rem;
    margin-left: 0.5rem;
}
.barra-filtros-boton {                  
    font-size: var(--texto-8pt);    /*  Tiene q estar aquí después de boton, pq si no no lo va a cambiar */
    margin-left: 0.5rem;
}
/* Input pequeño para número de requerimiento */
.barra-filtros-input-req {
    width: 5rem;
    font-weight: bold;
    font-size: var(--texto-8pt);
    border: 1px solid #808080;
    text-align: center;
    margin-left: 0.5rem;
}
/* Link "No me sé el número" */
.link-consulta {
    color: #0000EE; /* Azul link */
    text-decoration: none;
    font-size: var(--texto-8pt);
    margin-left: 0.5rem;
    }
    .link-consulta:hover {
        color: #551A8B; /* Morado visitado */
        text-decoration: underline;
    }

/* .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;
    align-items: center;
    padding: 0.5rem 1rem;
    background-color: white;
    border-bottom: 1px solid #ddd;
}
/* ===== PAGINACIÓN ===== */
.paginacion-contenedor {
    font-size: var(--texto-9pt);
    display: flex;
    align-items: center;
    color: #696969;
}
.btn-paginacion {
    color: #696969;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    padding: 0.13rem 0.31rem;
}
    .btn-paginacion:hover:not(:disabled) {
        color: #333;
    }
    .btn-paginacion:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        text-decoration: none;
    }
.btn-pagina {
    color: #696969;
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: underline;
    min-width: 1.56rem;
    text-align: center;
}
    .btn-pagina:hover {
        color: #333;
    }
    .btn-pagina-activo {
        font-weight: bold;
        color: crimson;
        text-decoration: none;
    }
/* ===== CONTADOR DE REGISTROS ===== */
.contador-registros {
    font-size: var(--texto-9pt);
    text-align: right;
    white-space: nowrap;
    flex-grow: 1;
}



/* ===========================================================================
   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;
    border-radius: 0.25rem;
    font-weight: bold;
    text-align: center;
    padding: 0.1rem 0.4rem;        /* Este atributo lo deberá ajustar cada página según lo requiera */
    margin-right: 0.3rem;           /* Este atributo lo deberá ajustar cada página según lo requiera */
    background-color: red;         /* Este atributo lo deberá ajustar cada página según lo requiera */
    color: white;                  /* Este atributo lo deberá ajustar cada página según lo requiera */
}

.etiqueta-solo-texto {
    font-weight: bold;
    margin-right: 0.3rem;
}

/* 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 NAVEGACI�N (SUBMEN�S Y HOVERS) --- */
.submenu {
    background-color: white !important;
    padding-left: 1.3rem !important;
    display: flex;
    flex-direction: column;
    padding-bottom: 50px;
}

.submenu-link {
    text-decoration: none !important;
    color: black !important;
    font-size: var(--texto-10pt);
    padding: 0.375rem 0 !important;
    display: flex;
    align-items: center;
}

    .submenu-link .bullet {
        margin-right: 0.5rem;
        flex-shrink: 0;
    }

/* Logica de colores dinamicos mediante color-mix */
.nav-item-row:hover {
    background-color: color-mix(in srgb, var(--modulo-color), white 85%) !important;
}

/* 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;
}

.submenu-link:hover {
    border-radius: 0.25rem;
    text-decoration: none !important;
}

.nav-item-row img, .nav-item-row span {
    opacity: 1 !important;
    visibility: visible !important;
}

.submenu-link.active .sub-label, .submenu-link.active .bullet {
    font-weight: bold;
}



/* ===========================================================================
   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;
    padding: 2.5rem;
    background-color: #cccc99;
    color: #000000;
    font-weight: normal;
    margin-top: 1rem;
}
    .no-resultados p {
        margin: 0.31rem 0;
    }



/* ===========================================================================
   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 móvil: se convierte en flex con width:100% forzando salto de línea */
.br-movil {
    display: contents;
}

/* Reglas exclusivas para Celular */
@media (max-width: 767px) {
    .ocultar-en-celular {
        display: none !important;
    }
    /* Contenedor que fuerza nueva línea en móvil */
    /* Uso: envolver elementos que deben bajar a nueva línea en celular */
    .br-movil {
        display: flex;                        /* Contenedor flex visible */
        width: 100%;                          /* Ocupa toda la línea, 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;
        grid-column: 1 / -1; /* Esto abarca desde el pixel 1 hasta el final */
        width: 100vw;
        background-color: transparent; /* Permite que el verde del hijo se vea */
    }
    /* Forzamos el comportamiento en vertical */
    .main-layout {
        /* En lugar de max-content, usamos min-content o un valor fijo 
           para que no se "infle" al estar vertical */
        grid-template-columns: 1px 1fr !important;
    }
    .mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.3); /* Sombra suave */
        cursor: pointer;
    }

}/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */