html {
	background-color: #f0f0f0; /* Cambia esto por el color de fondo que prefieras */
    background-image: none  !important;
    background-repeat: no-repeat  !important;
    background-attachment: initial  !important;
    background-size: 0px  !important;
    background-position: top left  !important;
}

/********************** LOGIN **********************/
#secLogin {
    width: 100%;
    top: 30%;
    position: absolute;
    z-index: 150;
}

#secLogin .imgLogo {
    width: 30%;
    margin: 2% 0px 10% 10%;
    position: absolute;
    z-index: 150;
    opacity: 0.9;
    transition: opacity 0.3s;
}

#secLogin .imgLogo:hover {
    opacity: 1;
}

@media (min-width: 1930px) {
    #secLogin .imgLogo {
        margin-bottom: 0px;
        margin-top: 0%;
        margin-right: 0px;
        margin-left: 10%;
        position: absolute;
        z-index: 150;
    }
}

#secLogin table {
    width: 40%;
    position: absolute;
    top: 0px;
    left: 50%;
    margin: 1% 0px;
}

@media (max-width: 768px) {
    #secLogin table {
        width: 90%;
    }
}

@media (min-width: 1930px) {
    #secLogin table {
        width: 50%;
    }
}

#secLogin td h2 {
    color: #000;
    font-size: 1em;
    vertical-align: text-top;
    padding: 10px;
    font-weight: bold;
    transition: color 0.3s;
}

#secLogin td {
    color: #89878C;
    font-size: 1.5em;
    vertical-align: text-top;
    padding: 10px;
    transition: color 0.3s;
}

@media (min-width: 1930px) {
    #secLogin td {
        font-size: 2em;
    }
}

/********************** CAMPOS DE TEXTO DEL LOGIN **********************/
#secLogin .txtLogin {
    background-color: #FFF; /* Color de fondo inicial para los campos de texto */
    border: 2px solid #CCCCCC; /* Borde */
    width: 80%; /* Ancho */
    padding: 6px 12px; /* Espaciado interno */
    border-radius: 4px; /* Bordes */
    font-size: 0.8em; /* Tamaño de fuente */
    transition: border-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Transición, efectos */
}

#secLogin .txtLogin:hover {
    border-color: #F3CA27; /* Cambio de color al pasar ratón */
    transform: scale(1.05); /* Más grande al pasar el mouse */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

#secLogin .txtLogin:focus {
    border-color: #FFCE01; /* Color de borde al enfocar */
    box-shadow: 0 0 0 2px rgba(255, 206, 1, 0.5); /* Sombra, resaltar el enfoque */
    transform: scale(1.05);
}

#secLogin a {
    color: #000;
    font-size: 0.6em;
    font-weight: bold;
    letter-spacing: 0.05em;
    transition: color 0.3s;
}

#secLogin a:hover {
    color: #FFCE01;
    text-decoration: none;
    /* Sensación de elevación */
    transform: translateY(-2px);
}

.imgEncabezado {
    position: fixed;
    top: 0px;
    width: 100%;
    height: 30%;
}

/********************** BOTÓN INICIAR SESIÓN **********************/
#secLogin .btnTexto {
    background-color: #F3CA27; /* Color - fondo */
    color: #000; /* Color de texto */
    padding: 8px 16px; /* Espaciado hacer el botón más pequeño */
    border: none; /* Eliminar el borde */
    border-radius: 4px; /* Bordes redondeados */
    font-weight: bold; /* Negrita */
    text-transform: uppercase; /* Mayúsculas */
    font-size: 0.8em; /* Tamaño de fuente */
    cursor: pointer; /* Cursor en forma de mano al pasar el mouse */
    outline: none; /* Eliminar contorno al hacer clic */
    transition: background-color 0.3s, transform 0.3s, box-shadow 0.3s; /* Transición, efectos */
    /* Añadir width si necesitas que el botón sea más estrecho */
    /* width: 80%; */ /* Ajusta este valor */
}

#secLogin .btnTexto:hover {
    /* Efecto al pasar el mouse */
	background-color: #FFD700; /* Color de fondo más claro al pasar ratón */
    transform: translateY(-2px); /* Mover el botón hacia arriba */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Sensación de elevación */
}

#secLogin .btnTexto:active {
    /* Efecto al hacer clic */
	background-color: #CFAA22; /* Color más oscuro al hacer clic */
    transform: translateY(1px); /* Mover el botón hacia abajo */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Sombra, sensación de pulsación */
}

#secLogin .btnTexto:focus {
    /* Efecto al enfocar */
    box-shadow: 0 0 0 2px rgba(255, 206, 1, 0.5); /* Contorno, resaltar el enfoque */
}