/*****
CSS Universal 
*****/

/* @font-face {
    font-family: 'Helvetica Neue, Medium';
    src: url('../font/HelveticaNeue\ Medium.ttf');
} */

/* * {
    font-family: 'Helvetica Neue, Medium';
} */

* {
    font-family: 'SF Pro Display', 'SF Pro Icons', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

* hr {
    color: #F0F0F0;
    margin: 0.75rem 0 1.5rem 0;
}

* p,
* span {
    white-space: pre-line;
}

* a {
    text-decoration: none !important;
}

table a {
    text-decoration: underline;
    color:#4b4949;
}

* li, * ul {
    list-style: none;
}

th:first-child,
td:first-child {
    text-align: center;
    padding: 0 0.75rem 0 1.2rem !important;
}

tr:nth-child(2) th:first-child {
    padding: 0 0.75rem 2rem 1.2rem !important;
}

tr:nth-child(2) th:last-child {
    padding: 0 1.2rem 2rem 0rem !important;
}

* tbody tr:nth-child(odd) {
    background-color: #F4F4F4;
}

* tbody tr:nth-child(even) {
    background-color: #ffffff;
}

tbody tr:last-child td:first-child{
    border-bottom-left-radius: 1rem;
}

tbody tr:last-child td:last-child {
    border-bottom-right-radius: 1rem;
}

* td {
    color: #4b4949;
    font-size: 0.90rem !important;
    padding: 1.5rem 0.75rem;
    word-break: break-all;
    white-space: pre-line;
}

* th {
    font-size: 1rem;
    color: #000;
    padding: 0 0.75rem 0.1rem;
    text-align: start;
}

tr:nth-child(1) th {
    cursor: pointer;
}

tr:nth-child(2) th{
    padding: 0 1.25rem 2rem 0.3rem !important;
}

table p {
    margin: 0 !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}
/*****
placeholder
*****/
::placeholder {
    font-size: 0.85rem;
    font-style: italic;
}

/*****
index.php
*****/
.body-index {
    overflow: hidden;
    margin: 0;
    padding: 0;
}

.login {
    height: 85vh;
    background-color: #FFFFFF;
    background-size: cover;
    
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    
}

.login h1,
.login p {
    font-family: SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-weight: 600;
    margin-top: 200px;
    margin: 0.75rem;
    color: #000000;
    text-align: center;
}

.mantenimiento {
    filter: grayscale(0.65);
    height: 100vh;
    background: url(../img/background.jpg) no-repeat;
    background-size: cover;
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
}


.body-index header,
.body-index footer{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}

.body-index header {
    padding: 0;
}

.logo1{
    width: 5rem;
    margin: 0 0 1rem;
    top: 3rem;
}

.mantenimiento .logo1 {
    opacity: 0.5;
}

.mantenimiento .footer-index {
    opacity: 0.5;
}

.card {
    background-color: #fff; /* Fondo blanco para la tarjeta */
    width: 90%;
    max-width: 525px; /* Tamaño máximo de la tarjeta */
    min-height: 275px; /* Aumentar altura mínima de la tarjeta */
    border-radius: 2px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; /* Centrar contenido horizontalmente */
}

/* Estilo del formulario */
.formulario-index {
    margin-top: 5px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    width: 100%; /* Asegura que el formulario ocupe el 100% del ancho de la tarjeta */
    align-items: center; /* Centrar elementos dentro del formulario */
}

.formulario-index input {
    margin-bottom: 20px;
    padding: 15px;
    border-radius: 14px; /* Bordes más redondeados */
    border: 1px solid #00000061; /* Borde de color más oscuro */
    background-color: #f4f4f4; /* Fondo más oscuro para el input */
    font-size: 18px; /* Aumentar el tamaño de fuente */
    width: 80vw; /* Ajustar el tamaño de los campos, ahora ocupa el 90% */
    max-width: 500px;
    box-sizing: border-box;
}

.titulo-login {
    color:  #000000;
}

.formulario-index .submitlogin {
    background-color: #10519b;
    color: white;
    padding: 15px;
    border: none;
    border-radius: 14px; /* Bordes más redondeados */
    margin-top: 30px;
    cursor: pointer;
    font-size: 18px; /* Aumentar el tamaño del texto */
    width: 80vw; /* Ajustar el tamaño del botón */
    max-width: 500px;
}

.disclaimer {
    text-align: center; /* Centra el texto */
    font-size: 15px; /* Tamaño de fuente más pequeño */
    width: 80vw; /* Ajustar el tamaño del botón */
    max-width: 500px;
}

.disclaimer a {
    text-align: center; /* Centra el texto */
    font-weight: bold;
    margin-top: 25px; /* Añade espacio por encima del disclaimer */
    font-size: 15px; /* Tamaño de fuente más pequeño */
    color: #000000;
}

.passForgot {
    color: #4A90E2;
    text-align: center;
    text-decoration: none;
}

.passForgot img {
    vertical-align: middle;
    margin-left: 5px;
}

.passForgot:hover {
    text-decoration: underline;
}

a.passForgot {
    display: flex;
    flex-direction: row;
    color: white;
    font-size: 0.95rem;
    transition: all .17s ease;
    margin: 0;
    gap: 0.35rem;
    align-items: center;
}

.login a img {
    rotate: 45deg;
    margin: 0.15rem 0 0;
    height: 0.75rem;
    filter: invert(41%) sepia(1%) saturate(4940%) hue-rotate(28deg) brightness(1000%) contrast(100%);
}

.footer-index{
    position: absolute;
    bottom: 2rem;
    align-items: center;
    text-align: center;
}

.footer-index .logo2 {
    width: 12rem;
    
}

/* Animacion botones y link (index)*/
/* .formulario-index input:hover {
    background-color: #ffffff;    
    font-weight: 600;
    box-shadow: 0 0 0.313rem rgba(0,0,0,0.8);
}*/

/* Mantenimiento */

.contenedor-mantenimiento {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.5rem;
    align-items: center;
    width: 44rem;
    height: 24rem;
    border-radius: 1.5rem;
    background: #ffffff;
    color: #6E6E6E;
    margin: 7rem 0 7rem;
}

.contenedor-mantenimiento h2 {
    color: #000 !important;
    width: 21rem;
    text-align: center;
    margin: 0;
}

.contenedor-mantenimiento p {
    width: 35rem;
    margin: 0;
    text-align: center;

}

.contenedor-mantenimiento img {
    width: 3rem;
    height: 3rem;
}

.mant-img {
    width: 5.75rem;
    height: 5.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    background: #EAEAEA;
}

/*****
.body-panel
*****/
.body-panel {
    /*border: 1px solid red; */   
    background: #E5E5E5;
    /*Flexbox*/
    margin: 0;
    display: flex;
    gap: 2rem;
}


/*****
sidebar.php
*****/
.simple {
    font-size: 0.7rem;
    font-weight: 600;
    color: #37568A ;
}

.sidebar {
    /*border: 1px solid red;*/
    display: flex;
    flex-direction: column;
    position: fixed;
    height: 100%;
    top: 0;
    left: 0;
    overflow-y: auto;
    background-color: #fff;
    width: 18rem;
    z-index: 1008;
    transition: all 0.35s ease;
}

.contenedor-logo { 
    padding: 3.5rem 0 3rem; 
    text-align: center;
}

.logo-nuevo{
    width: 10.5rem !important;
    margin: 0 1.1rem 0 0;
}

/*****
* header-contenido
*****/
.header-contenido {
    /*border: 1px solid red;*/
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100vh;
}

/*****
* header - panel.php
*****/
.body-panel header {
    display: flex;
    flex-direction: row;
}

.titulo-boton {
    padding: 3.5rem 2rem 0;
    display: flex;
    flex-direction: row;
    position: sticky;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    z-index: 1002;
    transition: all 0.35s ease;
}

.titulo-boton h1 {
    color: #37568A;
    font-weight: 600;
    margin: 0;
}

.dropdown-toggle-user {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    border: none;
    width: 17.5rem;
    background: #B8C8D0;
    border-radius: 1.75rem;
    height: 3rem;
}

.boton-header.bordear button {
    border-radius: 0;
    border-top-left-radius: 1.5rem;
    border-top-right-radius: 1.5rem;
}

.boton-header .arrow {
    width: 0.8rem;
    margin: 0 0.5rem 0 0;
    transition: transform 0.3s ease;
}

.dropdown-toggle-user img {
    transform: rotate(270deg);
}

.dropdown-toggle-user.rotar img:nth-child(2) {
    transform: rotate(360deg);
}

.user-arrow {
    display: flex;
    flex-direction: row;
}

.boton-header ul{
    position: absolute;
    display: flex;
    flex-direction: column;
    width: 17.5rem;
    justify-content: center;
    align-items: end;
    background: #B8C8D0;
    margin: 0;
    padding: 1.5rem 0;
    border-radius: 0 0 1.5rem 1.5rem;
}

.boton-header li {
    margin: 1rem 0;
    padding: 0 2rem 0 0;
}

.boton-header .item {
    color: #000;
    font-size: 0.9rem;
}

.boton-header .item:hover {
    text-decoration: underline;
}

.boton-header .salto {
    margin: 0 2rem !important;
    width: 10rem;
    border: none;
    border-bottom: 0.1rem solid #000;
}

.imagen-boton {
    /*border: 1px solid red;*/
    height: 2rem;
    width: 2rem;
    justify-content: center;
    display: flex;
    flex-direction: column;
    color: #888888;
    border-color: #888888;
    border-radius: 100%;
    margin: 0 0 0 0.2rem;
    background: #ffffff;
    font-size: small;
    border-width: 0.122rem;
    transform: rotate(90deg);
}

.centro-de-ayuda {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
}

.centro-de-ayuda img {
    rotate: 45deg;
    margin: 0.15rem 0 0;
    height: 0.75rem;
}

.cerrar-sesion {
    /* display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.25rem; */
    color: #C40000 !important;
}

/* .cerrar-sesion img {
    rotate: 45deg;
    margin: 0.15rem 0 0;
    height: 0.75rem;
    filter: invert(25%) sepia(100%) saturate(5000%) hue-rotate(355deg) brightness(65%) contrast(160%);
} */

.imagen-boton img {
    filter: invert(31%) sepia(14%) saturate(4940%) hue-rotate(170deg) brightness(65%) contrast(95%) grayscale(1);
}

.boton-header p {
    margin: 0;
}

.boton-header .usuario {
    margin: 0 0.5rem 0 0;

}

.boton-header-despliegue .item {
    color: #000;
}

/*****
contenedor extension - panel.php
*****/
.extension {
    /*border: 0.1px solid red;*/
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    transition: all 0.35s ease;
    margin: 4rem 0 0;
}

.contenedores {
    background: #ffffff;
    box-shadow: 0 0 0.313rem rgba(0,0,0,0.3);
    color: #717171;
}



h6 {
    font-size: 1rem;
    margin: 0 0 0.25rem;
}

.titulo-h5-h6 h5{
    margin: 0 !important;
}

.titulo-h5-h6 h6{
    color: #4b4949;
    margin: 0 0 2rem !important;
}

.contenedores-botones {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin: 0 0 2.5rem;

}

.boton-guardar,
.boton-guardar-enviar,
.boton-eliminar,
.consultar-movimientos {
    display: flex;
    font-size: 1rem;
    height: 2.75rem;
    width: 26.25rem;
    border: none;
    border-radius: 0.5rem;
    background: #105680;
    color: #ffffff;
    text-align: center;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin: 0;
}

.boton-guardar:hover,
.boton-guardar-enviar:hover,
.boton-eliminar:hover {
    box-shadow: 0 0 0.313rem rgba(0, 0, 0, 0.3);
    text-decoration: underline;
}

.boton-eliminar {
    background: #D50000;
}


.imagen-contacto {
    height: 5rem !important;
    width: 5rem !important;
    border-radius: 1.3rem;
    cursor: pointer;
}

.mensaje-error {
    margin:-1rem 0 1rem 0;
    padding: 0;
    font-size: 0.9rem;
}

/*****
mis-paneles.php
*****/
.seleccionar-buscar-input {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
}

.buscar,
.generar-pdf,
.eliminar {
    width: 12rem;
    height: 2.4rem;
    border: none;
    border-radius: 1.2rem;
    background: #105680;
    color: #ffffff !important;
    margin: 0;
    transition: all .17s ease;
    cursor: pointer;
    font-size: 0.95rem;
}

.buscar:hover,
.generar-pdf:hover,
.eliminar:hover {  
    box-shadow: 0 0 0.313rem rgba(0, 0, 0, 0.3);
    text-decoration: underline;
}

.input-buscar {
    width: 20rem;
    height: 2.4rem;
    border: none;
    border-radius: 1.2rem;
    padding: 0 1rem;
}


/*****
movimientos.php
*****/
.consultar-movimiento-color {
    color: #ffffff;
}

.from-to {
    display: flex;
    flex-direction: row;
}

#from,
#to {
    width: 7rem;
}

.seleccionar-panel {
    width: 20rem;
    height: 2.3rem;
    border-radius: 1.2rem;
    padding: 0 1rem;
    background: #E5E5E5;
    border-color: #707070;
    color: #4b4949;
    margin: 0 0.5rem 0 0;
}

.eliminar {
    background: #D50000;
    margin: 0 0 0 1rem;
}

.hora-movimientos {
    width: 6rem;
}

.columna-movimientos {
    width: 8.5rem;
}

.columna-apartamento {
    width: 8rem;
}
/*****
nuevo-usuario.php
*****/
.titulo-directorio-contacto {
    display: flex;
    flex-direction: column;
    margin: 0 0 0.75rem;
}

.titulo-directorio-contacto  h5{
    margin: 0 !important;
}


/*****
mis-usuarios.php
*****/
table input,
table select {
    width: 100%;
}

table .licencia-usuario {
    width: 7rem;
}

table input[type="checkbox"] {
    width: 0.8rem;
}

.codigo-usuario,
.buscar-codigo-usuario {
    width: 6rem;
}


/*****
* Modals
*****/
.no-scroll {
    overflow: hidden;
}