/* Estilo general del cuerpo */

body {

    font-family: 'Roboto', sans-serif;

    background-color: #f0f0f0; /* Fondo del cuerpo de la página */

    margin: 0;
    
    display: flex;
    
    flex-direction: column;
        
    min-height: 100vh;
        
    margin: 0;
}

.content {
    flex: 1;
}

/* Estilo para el contenedor blanco */

.text-inform { 

    max-width: 1000px; 

    margin: 20px auto;

}

/* Quitar subrayado y comportarse como botón */
a {
    text-decoration: none; /* Elimina el subrayado */
    color: inherit; /* Usa el color definido del padre */
  }
  
  /* Opcional: asegurar que tampoco tenga subrayado en hover */
  a:hover {
    text-decoration: none;
  }

/* Estilo para los contenedores blancos */

.bg-white {

    background-color: white;

    border-radius: 10px;

    box-shadow: 0 2px 10px rgba(0,0,0,0.1);

    padding: 20px;

    margin: 20px auto;

    max-width: 1200px;

}

.bg-white:hover {

    background-color: white !important;

}

.bg-white p {

    font-weight: normal;

}



/* Estilo para los botones */

.btn-primary {

    background-color: #007bff;

    color: white;

    border: none;

    padding: 10px 20px;

    border-radius: 5px;

}



.btn-custom {

    background-color: #1165A0;

    color: white;

    border: none;

    padding: 15px 15px;

    border-radius: 5px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.btn-custom:hover,
.btn-primary:hover {
    background-color: #135a87;
    color: white; /* Asegura que el texto sea blanco */

}

.btn-custom:hover .icon {
    fill: white !important; /* Cambia a blanco en hover */
}

/* Estilos de los inputs */

.input-celeste {

    border-color: #2F96E2; /* Borde celeste */

}



/* Estilos para drag and drop */

.drag-drop-area {

    border: 2px dotted #4380e3;  /* Línea punteada en lugar de guiones */

    transition: border 0.3s ease, background-color 0.3s ease; 

}



/* Efecto hover */

.drag-drop-area:hover {

    border-color: #88d4e9;  

    background-color: #f1f4f6;  

}



/* Estilo mientras se está arrastrando un archivo */

.dragging {

    border: 2px solid #4c8eaf;  

    background-color: #f1f1f1;  /* Fondo gris claro */

}



/* Estilo imagen de drag and drop */

.example-image img {

    width: 100%; 

    height: auto; 

    display: block; /* asegurar visibilidad por defecto */

}



/* Estilo específico para la imagen del reverso */

#dragDropAreaReverso .example-image img {

    width: 100%;

    height: 200px; 

    object-fit: cover; 

}



/*Encabezado de vista inicial*/

.header{

    display: flex;

    justify-content: space-between;

    padding-top: 5rem;

}



/*Boton acceso administrativo*/

.custom-button {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 8px; /* Espacio entre el icono y el texto */

    padding: 2px 2px; /* Espaciado interno */

    font-size: 16px;

    color: #1165A0; 

    background-color: white; /* Fondo blanco */

    border: 1px solid #1165A0; /* Borde azul */

    border-radius: 5px; /* Bordes redondeados */

    width: 282px;

    transition: background-color 0.3s, color 0.3s;

  }

  

  .custom-button:hover {

    background-color: #1165A0; /* Fondo azul al pasar el cursor */

    color: white; /* Texto blanco */

  }
  .custom-button .icon {
    fill: #1165A0; /* Color inicial */
    transition: fill 0.3s ease; /* Transición suave */
}

.custom-button:hover .icon {
    fill: white !important; /* Cambia a blanco en hover */
}
.custom-btn .arrow {
    margin-left: auto; /* Empuja la flecha al extremo derecho */
    padding-right: 15px; /* Ajusta la separación desde el borde derecho */
}

  .icon-user {

    font-family: "Font Awesome 5 Free"; /* Asegúrate de usar la fuente adecuada */

    font-weight: 900;

    content: "\f007"; /* Unicode del icono de usuario */

  }

  

/*contenido de página de inicio*/



/* Login */

    /* Estilo para la imagen de fondo */

    .bg-image {

        background-size: cover; /* Asegura que la imagen cubra todo el espacio */

        background-position: center; 

        min-height: 100vh; /* Ocupa toda la altura del contenedor */

    }

    

    /* Altura ajustada en pantallas pequeñas */

    @media (max-width: 767px) {

        .bg-image {

        height: 50vh; /* Ajusta la altura para dispositivos móviles */

        }
        #paginacion {
            display: none !important;
        }

    }

    



    /* Imagen de fondo para pantallas grandes */

    @media (min-width: 768px) {

        .bg-image {

        height: 100%; /* Imagen ocupará toda la altura del contenedor */
        min-width: 100%;
        }

    }





    /* Estilo para la sección del formulario */

    .bg-light {

        display: flex;

        justify-content: center;

        align-items: center;

        height: 100%; /* Ocupa toda la altura */

        padding: 20px;

    }



.welcome-txt {

    color:#696969;

}



.txt-login {

    color:#333333;

}

    

.recuperar-password {

    color: #265590; /* Cambia el color del enlace al código de color que desees */

  }

  

/* Tamaño inputs de login */

.login-input {

    height: 45px;     /* Altura ajustada */

    padding: 10px;    /* Padding ajustado */

  }

  







/* Vista login */

/* Estilo general para la imagen de fondo */

.bg-image {

    background-size: cover; /* La imagen cubre toda el área sin perder la proporción */

    background-position: center center; 

    background-repeat: no-repeat; 

    height: 50vh; /* Ocupa la mitad de la pantalla en altura */

    width: 100%; 

}



/* Ajustes específicos para pantallas grandes */

@media (min-width: 1440px) {

    .bg-image {

        background-position: right center; /* La imagen se mueve al costado derecho */

        background-size: cover; /* Asegura que el largo total de la imagen se vea */

        height: 50vh; /* Mantiene la mitad de la altura */

    }

}



/* Asegura que el contenedor ocupe el 100% de la pantalla */

.container-fluid {

    min-height: 100vh;

    padding: 0;

}



/* Asegurar que solo la página de login tenga el fondo blanco */

#login-page {

    background-color: #ffffff !important;

}



/* Estilo para la sección del formulario */

.bg-light {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100%; /* Ocupa toda la altura */

    padding: 20px;

}







/* <<<<<<< HEAD */

/*clases de admin*/

.navbar {
    padding: 10px 15px;
  }

.navbar-brand img {

    margin-right: 40px;

  }

  

  .card {

    border: none;

    border-radius: 10px;

  }

  

  .card-footer {

    background: rgba(0, 0, 0, 0.1);

    border-top: none;

  }

  

  footer p {

    font-size: 0.9rem;

    color: #333333;

  }

/* Estilo para que el footer se quede fijo en la parte inferior */


.footer {
  margin-top: auto;
  width: 100%;
  background-color: #f8f9fa; /* Color de fondo del footer */
  position: sticky;
  bottom: 0;
}


/* ======= */



.separador {border: 1px solid #9f9f9f;

    margin-top: 1.5rem;

}



/* Estilo por defecto para los iconos (color azul #1165A0) */

.icon {

    fill: #1165A0 !important; /* Color azul por defecto */

    transition: fill 0.3s ease !important; /* Transición suave para el hover */

  }

  .icon:hover {

    fill: #ffffff !important; 

  }


  /* Estilo para los iconos al hacer hover (color blanco) */

  .nav-link:hover .icon {

    fill: white !important; /* Color blanco al hacer hover */

  }

  

  .icon-home {

    transition: all 0.3s ease; /* Añade una transición suave */

  }

  

  .icon-home:hover {

    fill: #ffffff !important; /* Cambia el color del icono a blanco */

    z-index: 10; 

  }

  





//* Tabla */

/* Fuente Roboto a toda la tabla */
table th, table td {
    font-family: 'Roboto', sans-serif;
    font-size: 0.9rem; 
    word-break: break-word; /* Asegura que las palabras largas se dividan */
    white-space: normal; /* Permite que las celdas se ajusten */
}

/* Encabezados */
table th {
    font-family: 'Roboto', sans-serif;
    font-weight: 600; 
    font-size: 0.8rem; 
    text-align: center;
    white-space: nowrap; /* Evita que el texto de los encabezados se divida */
}

/* Estilo adicional para la tabla */
table {
    width: 100%;
    font-family: 'Roboto', sans-serif;
}

/* Scroll horizontal en tabla */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* Mejora la experiencia en dispositivos móviles */
}

/* Contenedor principal */
.content {
    overflow-x: auto; /* Permite el scroll horizontal si es necesario */
}








/* botón "Limpiar */

.btn-limpiar {

    background-color: white; 

    color: #1165A0; 

    border: 2px solid #1165A0; 

    font-weight: 500; 

    padding: 15px 15px;

    height: 60px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}

    white-space: nowrap;
.btn-limpiar:hover .icon {
    fill: white !important; /* Cambia a blanco en hover */
}

/* botón "buscar*/

.btn-buscar {

    background-color: #1674B8; 

    color: #ffffff; 

    border: 2px solid #1674B8; 

    font-weight: 500; 

}



/* Estilo cuando el botón es hover */


.btn-claro:hover {

    background-color: #f0f0f0; 

    border-color: #1e1385; 

    color: #1e1385; 

}


/* botón white */

.btn-claro {

    background-color: white; 

    color: #1674B8; 

    border: 2px solid #1674B8; 

    font-weight: 500; 

}



/* Estilo white cuando el botón es hover */

.btn-claro:hover {

    background-color: #f0f0f0; 

    border-color: #1e1385; 

    color: #1e1385; 

}





/* Estilo para el fondo celeste claro del acordeón */

.acordeon-fondo {

    background-color: #ecf3f7; /* Celeste claro */

    padding: 20px;

    border-radius: 5px;

}







/*Estilos nav */

.navbar-nav .nav-item .nav-link {

    color: #1165A0;  

    padding: 10px 20px;

    font-size: 1rem;

    border: none;

    border-radius: 5px;

  }

  

  .navbar-nav .nav-item .nav-link:hover {

    background-color: #e8eef3;

    color: #1165A0;

  }

  

  .navbar-nav .nav-item .nav-link.active {

    background-color: #1165A0; 

    color: rgb(255, 255, 255); 

    border-radius: 5px; 

  }

  

/* Contenedor general */

.contenedor {

    width: 1370px;

    height: 656px;

    border-radius: 12px;

    background-color: white;

    display: flex;

    flex-direction: column;

    justify-content: center;

    padding: 20px;

    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);

}



/* Botones generales */

.custom-btn {

    width: 100%;

    height: 135px;

    border-radius: 15px;

    color: white;

    font-size: 24px;

    font-weight: bold;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 20px;

    position: relative;

    overflow: hidden;


}



/* Colores y estilos específicos de botones - Vista Admin */

.btn-contratos {

    background-color: #3498db;

    color: white; /* Color de texto blanco */

    transition: background-color 0.3s ease;
    

}



.btn-contratos:hover {

    background-color: #2980b9; /* Color más oscuro al pasar el mouse */

    color: white; /* Asegurarse que el color del texto se mantenga blanco */

}



.btn-formularios {

    background-color: #e67e22;

    color: white; /* Color de texto blanco */

    transition: background-color 0.3s ease;

}



.btn-formularios:hover {

    background-color: #d35400;

    color: white; /* Asegurarse que el color del texto se mantenga blanco */

}



.btn-configuracion {

    background-color: #48B60F;

    color: white; /* Color de texto blanco */

    transition: background-color 0.3s ease;

}



.btn-configuracion:hover {

    background-color: #48B60F;

    color: white; /* Asegurarse que el color del texto se mantenga blanco */

}


.custom-btn, .btn-contratos, .btn-formularios, .btn-configuracion {
    width: 100%; /* Ajustar al contenedor */
    height: 135px; /* Altura consistente */
    border-radius: 15px;
    font-size: 24px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    position: relative;
    overflow: hidden;
}




/* Estilo para el número o ícono al inicio */
.badge-number {
    background-color: white; /* Fondo blanco */
    color: #3498db; /* Azul (mismo color que el botón) */
    border-radius: 50%; /* Redondear */
    padding: 30px !important; /* Espaciado interno consistente */
    font-size: 24px !important; /* Tamaño de la fuente */
    width: 40px; /* Ancho fijo */
    height: 40px; /* Altura fija */
    margin-right: 10px; /* Separación con el texto */
    display: flex; /* Para centrar */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
}
.badge-number, .badge-cards {
    background-color: white;
    color: #3498db; /* Ajustar el color según el diseño */
    border-radius: 50%;
    padding: 10px; /* Tamaño interno */
    font-size: 16px; /* Tamaño de la fuente */
    margin-right: 10px; /* Separación con el texto */
    display: flex; /* Para centrar el contenido */
    align-items: center; /* Centrar verticalmente */
    justify-content: center; /* Centrar horizontalmente */
}



.icon-pencil,

.icon-user {

    font-size: 24px;

    margin-right: 10px;

    color: white;

}



/* Flecha al final del botón */

.arrow {

    font-size: 30px;

    font-weight: bold;

    margin-left: auto;

    color: white;

}



/* Responsividad */

@media (max-width: 1920px) {

    .contenedor {

        width: 100%;

        height: auto;

        padding: 10px;

    }



    .custom-btn {

        flex-direction: row;

        height: auto;

        padding: 20px;

        text-align: left;

    }



    .arrow {

        margin-left: 0;

        margin-top: 10px;

    }

}
/* Estilo para las áreas de Drag and Drop */
.drag-drop-area {
    border: 2px dashed #007bff;
    background-color: #f9f9f9;
    padding: 20px;
    cursor: pointer;
    text-align: center;
    position: relative;
}

/* Estilo para las vistas previas de la imagen */
.preview-img {
    max-width: 100%;
    max-height: 200px;
    margin-top: 10px;
}

/* Cambiar el color del fondo cuando se arrastra un archivo sobre el área */
.drag-drop-area:hover {
    background-color: #e9e9e9;
}

/* Texto del nombre del archivo */
.file-name {
    font-size: 14px;
    color: #6c757d;
}


/*boton de edicion de detallesContrato*/
.btn-round { 
    border-radius: 50%; /* Hacer el botón redondo */
    width: 50px; /* Ancho del botón */
    height: 50px; /* Altura del botón */
    display: flex; /* Flex para centrar el contenido */
    justify-content: center; /* Centrar horizontalmente */
    align-items: center; /* Centrar verticalmente */ 
    background-color: rgb(151, 207, 246);
}
/*colores de contenedores*/
.container-color {
    background-color: rgba(240, 245, 252, 1);
}
.fuentes{
   color: rgba(17, 101, 160, 1);
   font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
   font-weight: 600px;
   font-size: 24px;
   line-height: 38px;
}