@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

/* ----- ESTILOS PAGINA PRINCIPAL LOGIN ----- */
            #subBoxLogoTexto {
                position : relative;
                text-align : center;
                width : 95%;
                height : auto; /* 190px*/
                margin-top : 40px;
                margin-left : auto;
                margin-right : auto;
                border-radius : 10px;
                align-items : center;
                font-family: "Roboto", sans-serif;
                font-weight : bold;
                font-size: 42px;
            }
            .ETDH {
                font-family: "Roboto", sans-serif;
                font-weight : normal;
                text-align : center;
                font-size : 24px;
                width : 95%;
                height : auto;
                margin-left : auto;
                margin-right : auto;
                left: 0;
                right: 0;
                margin-top : -40px;
            }
            .SII{
            	width: 100%;
            	margin-left: auto;
            	margin-right: auto;
            	margin-top: 5px;
            	font-size: 27px;
            	/*color: #807E7E;*/
               
            }
            
            
            body{
                width: 100%;
                height: 99vh;
            	margin:0;
                left: 0;
                right: 0;
                display: flex;
                flex-wrap: wrap;
                background-color: #f3f4f6;
                padding: 0;
                overflow-x: hidden; /* Evita el scroll horizontal */
               
            }
            .cerrar{
                /*border: solid #FCFB01 1px;*/
            	font-weight: bold;
            	font-family: Arial;
                color: #FFFFFF;
            	text-align: center;
            	padding-top: 0px;
            	position: absolute;
            	top: 10px;
                right: 8px;
            	width: 15px;
            	height: 15px;
            	background-color: red;
            	border-radius: 4px;
            	
            	
            }
            .cerrar a{
            	color:#FFFFFF;
            	text-decoration: underline;
            }
            
            .header{
                /*border: solid blue 1px;*/    /* este atributo se utiliza solo como linea guia*/
            	width: 100%; /* Igualamos al ancho del footer */
            	height:45px;
                padding-left: 20px;
                padding-right: 20px;
                border-top-left-radius: 7px;
                border-top-right-radius: 7px;
                margin: 0 auto;         /* Centrado perfecto */
                box-sizing: border-box; /* Para que el padding no sume ancho */
                display: flex;
                align-items: center;
                justify-content: space-between;
            
            }
            .header img {
                width: 150px;
                height: 25px;
            }
            .header #fechaS {
                display: none;
            }
            .principal {
                /*border: solid blue 1px;*/    /* este atributo se utiliza solo como linea guia*/
            	text-align: center;
            	width: 100%;	
            	height: 90vh;
            	margin-left: auto;
            	margin-right: auto;
                padding-top:0px;
                
            }
            #Box{
                width: 97%; /* Un poco menos ancho que el header y el footer, evitando todo el ancho de la pantalla*/
            	height: 80vh; /* Este alto para vista en pantalla PC*/
            	padding: 5px;
            	position: relative; /* Cambiar de absolute a relative para que el flujo sea natural */
                margin: 20px auto 0 auto; /* Centrado y separado del header */
                left: 0;
                right: 0;
            	border-radius: 10px;
            	box-shadow: 0 4px 20px rgba(36,35,35,0.40);
                /*box-shadow: 0 0 10px rgba(98,96,96,0.31);*/
            	background: #FFFFFF;
                display: flex;
                flex-direction: row; /* Por defecto en PC es horizontal */
                align-items: center; /* Centrado vertical */
            
            }
            #BoxLogin{
                /*border: solid #83F80B 1px;*/
                width: 450px;
            	height: 98%;
            	padding: 2px;
                display: flex;
                justify-content: center; /* Centrado horizontal */
                align-items: center; /* Centrado vertical */
                
            }
            .lineaVertical {
                width: 2px;           
                height: 90%;           
                background-color: #EFE5E5;         
                /*margin: 0 auto;   */     
            }
            #BoxElements{
                /*border: solid #0BB9F8 1px;*/
                width: 80%;
            	height: 98%;
            	padding: 5px;
                display: grid;            
                place-items: center; /* Centrado vertical y horizontal */
                background-image: url("../Images/Institucional/LOGO-MARCA-AGUA.png");
                background-repeat: no-repeat;
                background-size: 460px 485px;
                background-position: center;
                
            }
            .subBox{
                /*border: solid #F83E0B 1px;*/
                width: 90%;
            	height: auto;
            	padding: 5px;
                display: flex;
                justify-content: space-between;
            }
            .form-container {   
                opacity: 1; /* Visible por defecto */   
                transition: opacity 0.4s ease; /* Transición suave para la opacidad */
            }
            .hidden {    
                opacity: 0; /* Oculto */    
                pointer-events: none; /* Desactiva los eventos de puntero */    
                transition: opacity 0.4s ease; /* Transición suave al ocultar */
            }
            
            /*----- SECCIÓN FORMULARIO LOGIN -----*/
            
            .frmlog{
                /*border: solid blue 1px;*/
            	width: 295px;    
                height: 400px;    
                position: relative;
                border-radius: 10px;
            }
            table a {
                color: #024CF9;
                font-family: "Roboto", sans-serif ;
                font-size: 15px;
                text-decoration: none;
            }
            .imglogo-login{
                /*border: solid #586FAF 1px;*/
            	width: 95px;
            	height: 95px;
            	position: absolute;
                margin-top: -8px;
                left: 33%; /* Coloca el elemento a la mitad del contenedor */
            	z-index: 5;
            }
            .shadow{
                border-radius: 10px;
                box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25); /* Sombra más intensa y difusa */    
                transition: box-shadow 0.3s ease; /* Añadir una transición suave al cambiar la sombra */
            }
            .shadow:hover {    
                box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35); /* Aumentar la sombra al pasar el mouse */
            }
            
            #form1 {
                /*border: solid blue 1px;*/    /* este atributo se utiliza solo como linea guia*/
                width: 295px;
                height: 400px;
                border-radius: 10px;
            }
            
            #form1 .cabeceraTd{
                height: 45px;
                border-top-left-radius: 10px;
                border-top-right-radius: 10px;
                color: #fff;
            
            }
            #form1 .pieTd{
                height: 30px;
                border-bottom-left-radius: 10px;
                border-bottom-right-radius: 10px;
            }
            
            #IngresaCuenta {
            	font-size: 26px;
            	color: #4D4C4C;
                margin-top: 43px;
            }
            hr{
                margin-top:-20px;
                border-style:solid;
                border-width: 1px;
            }
            
            #txtUsuario, #txtPass, #txtUsuarioRecPass {
                border: thin solid #999;
                width: 85%;
                height: 40px;       /* Aumentado de 30px a 45px */
                font-size: 16px;    /* Aumentado de 16px para mejor lectura */
                border-radius: 8px; /* Bordes un poco más redondeados */
                padding-left: 12px; /* Más espacio a la izquierda del texto */
                box-sizing: border-box; 
                outline: none;
                transition: border-color 0.3s; /* Efecto suave al hacer clic */
            }
            
            /* Efecto cuando el usuario hace clic para escribir */
            #txtUsuario:focus, #txtPass:focus {
                /* Resalta el campo activo */
                border: 2px solid #8B8B8B; 
                box-shadow: 0 0 10px #D4CFCF;
            }
            
            #txtUsuario {
                margin-left: 3px;
            }
            #txtPass {
                margin-left: 3px;
                padding-right: 22px;
            }
            
            .password-container {    
                position: relative;    
            }
            .eye-icon {    
                position: absolute;    
                right: 45px; 
                top: 50%;    
                transform: translateY(-50%);    
                cursor: pointer;
                width: 25px;
                height: 18px;
            }
            
            /*Para quitar el icono de ver contraseña que pone el navegador Microsoft Edge*/
            #frmLogin input[type="password"]::-ms-reveal {
            	display: none !important;
             }
             
            #btnIngresar, #btnBuscarUsuario, #btnEnviarCorreo {
                height: 40px;     /* Ligeramente más alto que los inputs */
                width: 83%;
                font-size: 16px;
                cursor: pointer;
                border-radius: 6px;
                background-color: #024CF9; /* Color institucional */
                color: white;
                border: none;
            } 
            
            #btnIngresar:hover {
                box-shadow: 0 0 12px rgba(155,153,153,0.74);
            }
            
            /*----- SECCIÓN FORMULARIO RECUPERAR CONTRASEÑA -----*/
            .frmRecuperarPass{
            	width: 295px;
            	height: auto;
                position: relative;
            	padding: 5px 2px;
            	border-radius: 10px;
                display: none;
            }
            #RecuperarPass {         /* propiedades para un parrafo*/
            	font-size: 22px;
            	color: #4D4C4C;
                margin-top: 43px;
            }
            
            #btnBuscarUsuario:hover {
                box-shadow: 0 0 12px rgba(155,153,153,0.74);
            }
            
            /*----- SECCIÓN FORMULARIO ENVIAR CORREO CONTRASEÑA -----*/
            .frmEnviarCorreo{
            	width: 295px;
            	height: auto;
                position: relative;
            	padding: 5px 2px;
            	border-radius: 10px;
                display: none;
            }
            
            #btnEnviarCorreo:hover {
                box-shadow: 0 0 12px rgba(155,153,153,0.74);
            }
            
            #mensaje {
                width: 50vw;
                height: 25px;
                display: none; 
                background-color: #F0FBCA; 
                color: #4CAF50;
                font-family: "Roboto", sans-serif;
                text-align: center;
                position: absolute;
                padding: 15px; 
                /*position: fixed; */
                margin-top: 65px; 
                left: 50%; 
                transform: translateX(-50%);
                border-radius: 5px;
                z-index: 1000; /* Asegúrarse de que esté por encima de otros elementos */
            }
            #mensajeLoginError {
                width: 320px;
                height: 20px;
                margin: auto;
                left:-20px;
                top: -46px;
                color: red;
                padding: 5px;
                border: 1px solid #f5c6cb; 
                /*display: none; */
                background-color: #F0FBCA; 
                font-family: "Roboto", sans-serif;
                text-align: center;
                position: absolute;
                border-radius: 5px;
                z-index: 1000; /* Asegúrarse de que esté por encima de otros elementos */
            }
            
            .pTitulo{
                margin-left: 20px;
            }
            .Dinamic{
                /*border:solid #7997F7 1px;*/
            	width: 300px;
            	height: auto;
            	float: left;
            	color:#807E7E;
            	
            }
            #icondinamico{
            	width: 50px;
            	height: 50px;
                float: left;
                bottom: 15px;
            	/*margin-left: 0px;
            	left: -8px;*/
            	
            }
            #prfDinamico {
            	font-size: 14px;
            	color: #333;
            	text-align: left;
            }
            
            
            .Productive{
                /*border:solid #7997F7 1px;*/
            	width: 350px;
            	height: auto;
                color: #807E7E;
            }
            #iconproductive{
            	width: 50px;
            	height: 50px;
                float:left;
            	/*margin-left: 0px;
            	left: -8px;*/
            	
            }
            #prfProductivo {
            	font-size: 14px;
            	color: #333;
            	text-align: left;
            	
            }
            
            .footer{
            	width: 100%; /* Igualamos con el ancho del header */
            	height: 25px;
            	position: fixed; /* Si se quiere fijo abajo, el margen auto no basta, se usa left/right */
                padding-right: 25px;
                padding-top: 0px;
                bottom: 0px;
                margin: 0 auto;
                margin-bottom: 0;
                margin-left: auto;
                margin-right: auto;
            	left: 0;
            	right: 0;
                color: #F7D707;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: flex-end;
                border-bottom-left-radius: 7px;
                border-bottom-right-radius: 7px;
            	font-size: 14px;
                
            }
            
            
            
            /* ----- elementos ocultos incialmente para luego mostrar en responsive ---- */
            #nombreInstitucionResponsive {
                display: none;
            }
            #subBoxSIIResponsive {
                display: none;
            }
            
            
            /*----- REGLAS MEDIA QUERY PARA CAMBIOS DE PANTALLA MOVILES Y TABLETS ----- */

            /* ==========================================================================
               1. REGLAS PARA CELULARES (VERTICAL) - Minimalista
               ========================================================================== */
            @media screen and (max-width: 480px) and (orientation: portrait) {
                body {
                    display: block; /* Permite scroll natural */
                    margin: 0;
                    padding: 0;
                    display: flex;
                    flex-direction: column;
                    height: 100vh; /* Ocupa el 100% de la altura de la pantalla */
                }
                 .principal {
                    height: 100%;
                }
                .header {
                    width: 100%;
                }
                .principal {
                    flex: 1; /* Esto expande el contenido central y empuja el footer al fondo */
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    height: 100%;
                }
                .header #fechaL {
                    display: none;
                }
                .header #fechaS {
                    display: block;
                }
        
                #Box {
                    flex-direction: column; /* Apila logo/texto arriba y login abajo */
                    width: 90%;
                    height: auto;
                    margin-top: 20px;
                    position: relative; /* Evita problemas de posicionamiento absolute */
                    padding-bottom: 0px;
                }
                
                /* Mostrar elementos diseñados para responsive */
                #nombreInstitucionResponsive, #subBoxSIIResponsive {
                    display: block;
                    width: 100%;
                    text-align: center;
                }
        
                #nombreInstitucionResponsive #subBoxLogoTexto {
                    font-size: 1.8rem;
                    margin-top: 10px;
                }
        
                .ETDH {
                    margin-top: 5px;
                    font-size: 1.2rem;
                }
                
                #BoxElements {
                    display: none; /* Ocultamos la marca de agua y textos laterales en móvil */
                }
        
                .lineaVertical {
                    display: none;
                }
        
                #BoxLogin {
                    width: 100%;
                    height: auto;
                    padding: 20px 0;
                }
                 #IngresaCuenta {
                    font-size: 28px;
                }
                
                .frmlog, #form1 {
                    width: 90vw; /* El formulario se adapta al ancho del celular */
                }
                
                #mensajeLoginError {
                    width: 80%;
                    left: 50%;
                    transform: translateX(-50%);
                    top: -55px;
                }
        

                .footer {
                    position: relative; /* En móvil es mejor que no sea fijo para no tapar el botón */
                    width: 100%;
                    justify-content: right;
                    padding: 10px 0;
                    padding-right: 20px;
                }
            }
        
            
            /* ==========================================================================
               2. REGLAS PARA MOVILES (HORIZONTAL) Y TABLETS (VERTICAL) - iPad Mini, iPad Air, etc. (768px - 991px)
               Aquí es donde recuperamos el contenido para ocupar espacio hacia abajo.
               ========================================================================== */
            @media screen and (min-width: 481px) and (max-width: 991px) {
                body {
                    height: auto;
                }
                .header {
                    width: 100%;
                }
                .principal {
                    height: 100%; /* Tambien se puede definir en auto si se prefiere*/
                    padding-bottom: 40px;
                }
        
                #Box {
                    margin-top: 10px;
                    width: 85%;
                    height: auto;
                    min-height: 85vh; /* Limitamos el alto*/
                    display: flex;
                    flex-direction: column; /* Mostramos los eementos internos uno debajo del otro */
                    align-items: flex-start;
                    padding: 20px;
                }
                /* Mostrar elementos diseñados para responsive */
                #nombreInstitucionResponsive {
                    display: block;
                    width: 100%;
                    text-align: center;
                }
        
                #BoxElements {
                    display: block; /* Mostramos estos elementos nuevamente */
                    width: 95%;
                    margin: 0 auto; /* Centrado del elemento*/
                    background-image: none;
                }
                #BoxElements #subBoxLogoTexto, .ETDH {
                    display: none;
                }
                #subBoxCaracteristicas .Dinamic {
                    padding-right: 10px;
                }
                #subBoxCaracteristicas .Productive {
                    padding-left: 10px;
                }
        
                #BoxLogin {
                    width: 100%;
                    margin-top: 20px;
                }
        
                #subBoxLogoTexto {
                    font-size: 27px;
                    margin-top: 0;
                }
                
                .footer {
                    width: 100%;
                }
                
            }
            
            /* ==========================================================================
               3. REGLAS PARA TABLETS (HORIZONTAL) - PANTALLAS. (992px - 1024px)
               ========================================================================== */
            @media screen and (min-width: 992px) and (max-width: 1024px) {
                .header {
                    width: 100%;
                }
                #Box {
                    width: 95%;
                }
                
                .ETDH {
                    margin-top: 5px;
                    font-size: 1.3rem;
                }
               
                #BoxLogin {
                    width: 310px;
                }
                
                #BoxElements {
                    width: 60%;
                }
                
            
            }