/* public/css/style.css */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');

.container {
    text-align: center;
    margin: 20px auto;
    overflow: visible; /* Asegura que el contenido no se corte */
    height: auto; /* Ajusta automáticamente la altura del contenedor */
}

.links-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 30px;
}

.link-item {
    text-align: center;
    margin: 0 20px; /* Añade espacio entre las imágenes */
}

.link-item img {
    max-width: 150px;
    margin-bottom: 10px;
}

.link-item p {
    font-family: 'Open Sans', sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin-top: 5px;
}

.header-image img {
    max-width: 40%;
    height: auto;
    margin-top: 20px;
    margin-bottom: 40px;
    align: center;
}

.header-container {
    background-color: #214180;
    font-family: 'Open Sans', sans-serif;
    width: 100%; /* Asegura que el contenedor ocupe todo el ancho */
    padding: 5px 0; /* Añade padding vertical */
}

.header-container .logo {
    width: 75%; /* Ajusta el tamaño del logo al 75% del tamaño original */
    height: auto;
    margin-left: 5px; /* Añade margen a la izquierda del logo */
    margin-right: 5px;
}

.header-container p {
    color: #fff;
    font-size: 12px; /* Aproximado de fs-6 */
    font-weight: bold;
    margin: 0; /* Elimina márgenes (equivalente a mb-0) */
    text-align: justify;
    line-height: 1.5;
    padding-top: 5px;
    margin-right: 20px;
}

.header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px; /* Limita el ancho máximo del contenido */
    margin: 0 auto; /* Centra el contenido horizontalmente */
}

/* Estilo general para el footer */
.footer-container {
    background-color: #214180;
    font-family: 'Open Sans', sans-serif;
    width: 100%;
    padding: 10px 0;
    position: relative;
}

.footer-container .logo {
    width: 75%; /* Tamaño del logo ajustado */
    height: auto;
    margin-left: 5px; /* Margen izquierdo del logo */
    margin-right: 5px; /* Margen derecho del logo */
}

.footer-container p {
    color: #fff;
    font-size: 12px;
    font-weight: bold;
    margin: 0;
    text-align: justify;
    line-height: 1.5;
    padding-top: 5px;
}

.footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 1200px;
    margin: 0 auto;
}

/* Estilo para la capa móvil de cookies */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    text-align: center;
    padding: 10px;
    font-size: 14px;
    z-index: 1000;
}

.cookie-banner button {
    background-color: #214180;
    color: #fff;
    border: none;
    padding: 5px 10px;
    margin-left: 10px;
    cursor: pointer;
    font-family: 'Open Sans', sans-serif;
}

/* General styles */
body {
    font-family: 'Open Sans', sans-serif;
    background-color: #f8f9fa;
    color: #343a40;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 800px;
    margin: 50px auto;
    background-color: #ffffff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Asegura que el padding y el borde se incluyan en el ancho total */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Contenedor para centrar el formulario en la página */
.form-page-container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 90vh;
    padding: 20px;
}

/* Estilo específico para el contenedor del formulario */
.form-container {
    max-width: 600px;
    width: 100%;
    padding: 30px;
    background-color: #f8f9fa;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

/* Título del formulario */
h1 {
    font-size: 28px;
    margin-bottom: 30px;
    color: #343a40;
    text-align: center;
}

/* Estilo de las etiquetas */
.form-label {
    font-weight: 600;
    color: #495057;
    margin-bottom: 10px;
}

/* Estilo de los campos de entrada */
.form-control {
    display: block;
    width: calc(100% - 24px); /* Reduce el ancho ligeramente para acomodar el padding y evitar desbordamiento */
    padding: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ced4da;
    border-radius: 4px;
    margin-bottom: 20px;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

/* Específico para textarea si se requiere ajuste adicional */
textarea.form-control {
    font-family: 'Open Sans', sans-serif;
    font-size: 16px; /* Asegurar el mismo tamaño de fuente que los inputs */
    line-height: 1.5;
}

select.form-control {
    height: auto; /* Ajusta automáticamente la altura según el contenido */
    min-height: 38px; /* Asegura una altura mínima adecuada */
}

/* Estilo del botón */
.btn {
    padding: 12px 20px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 4px;
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.btn-primary {
    background-color: #214180;
    border-color: #214180;
    color: #ffffff;
    width: 100%;
    margin-top: 20px;
}

.btn-primary:hover {
    background-color: #1b356b;
    border-color: #1b356b;
}

/* Estilo personalizado para botones con la clase btn-info */
.btn.btn-info {
    background-color: #17a2b8; /* Color de fondo (similar al de Bootstrap, pero puedes cambiarlo) */
    color: #ffffff; /* Color del texto */
    border: none; /* Eliminar borde */
    border-radius: 4px; /* Borde redondeado */
    padding: 10px 20px; /* Espaciado interno del botón */
    font-size: 16px; /* Tamaño de fuente */
    font-weight: bold; /* Texto en negrita */
    text-transform: uppercase; /* Texto en mayúsculas */
    cursor: pointer; /* Cambiar el cursor cuando se pasa el ratón por encima */
    transition: background-color 0.3s ease; /* Efecto de transición en el color de fondo */
}

/* Estilo del botón al pasar el ratón por encima (hover) */
.btn.btn-info:hover {
    background-color: #138496; /* Color de fondo más oscuro al pasar el ratón */
    color: #ffffff; /* Asegura que el texto sigue siendo blanco */
}

/* Estilo del botón cuando se presiona (active) */
.btn.btn-info:active {
    background-color: #117a8b; /* Color de fondo más oscuro al hacer clic */
    box-shadow: inset 0 0 5px rgba(0,0,0,0.2); /* Sombra interna para un efecto de presión */
}

/* Estilo del botón cuando está enfocado */
.btn.btn-info:focus {
    outline: none; /* Eliminar el borde de enfoque por defecto */
    box-shadow: 0 0 0 3px rgba(23, 162, 184, 0.5); /* Sombra para el enfoque */
}

/* Estilo para mensajes de error */
.is-invalid {
    border-color: #dc3545;
}

.invalid-feedback {
    display: none;
    color: #dc3545;
    font-size: 0.875em;
}

.is-invalid ~ .invalid-feedback {
    display: block;
}

/* Estilo para contenedores de formularios */
.form-group {
    margin-bottom: 25px;
}

/* Breadcrumb */
.breadcrumb {
    display: flex; /* Muestra los elementos en una sola línea */
    flex-wrap: nowrap; /* Asegura que no se envuelvan a la siguiente línea */
    list-style: none; /* Elimina los puntos de la lista por defecto */
    padding: 10px;
    margin: 10px;
    background-color: transparent; /* Opcional, si no quieres un fondo */
    margin-bottom: 20px;
}

.breadcrumb-item {
    display: inline; /* Asegura que los ítems se muestren en línea */
    margin-right: 10px; /* Espaciado entre ítems */
}

.breadcrumb-item a {
    color: #214180;
    text-decoration: none;
}

.breadcrumb-item a:hover {
    color: #1b356b;
    text-decoration: underline;
}

.breadcrumb-item + .breadcrumb-item::before {
    content: '/'; /* Añade el separador entre ítems */
    color: #6c757d; /* Color del separador */
}

.breadcrumb-item.active::before {
    content: '/';
    padding: 0 px;
    color: #6c757d;
}
/* Alerts */
.alert-success {
    color: #155724;
    background-color: #d4edda;
    border-color: #c3e6cb;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
}

/* Tabla general */
.table {
    width: 100%;
    margin-bottom: 1rem;
    color: #212529;
    border-collapse: collapse;
    margin-top: 20px;
}

.table th, .table td {
    padding: 12px;
    vertical-align: middle;
    border-top: 1px solid #dee2e6;
    white-space: normal;
}

.table thead th {
    vertical-align: bottom;
    border-bottom: 2px solid #dee2e6;
    background-color: #f8f9fa;
    font-weight: 600;
}

.table tbody + tbody {
    border-top: 2px solid #dee2e6;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(0, 0, 0, 0.05);
}

.table-hover tbody tr:hover {
    background-color: rgba(0, 0, 0, 0.075);
}

.table thead th.sortable {
    cursor: pointer;
}

.table thead th.sortable:hover {
    background-color: #e9ecef;
}

.table .btn {
    padding: 5px 10px;
    font-size: 14px;
}

.table .btn-warning {
    background-color: #ffc107;
    border-color: #ffc107;
    color: #212529;
}

.table .btn-warning:hover {
    background-color: #e0a800;
    border-color: #d39e00;
}

.table .btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
}

.table .btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

td {
    word-wrap: break-word;
}

.text-left {
    text-align: left !important;
}

.badge {
    white-space: normal;
}