/* Aplicar la fuente a toda la página */
@font-face {
    font-family: 'Poppins';
    src: url("{{ url_for('static', filename='fonts/Poppins-ExtraLight.ttf') }}");
    font-weight: normal;
    font-style: normal;
}

/* Estilo global para todos los textos */
body, label, input, button, h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', sans-serif;
}

/* Estilo para el cuerpo y encabezado */
body {
    margin: 0;
    padding: 0;
}

header {
    background-color: #f8f9fa; /* Color gris claro */
    text-align: center;
    padding: 10px 0;
}

/* Estilo para el área del menú lateral */
.sidebar {
    background-color: #204b84;
    color: white;
    height: 100%;
    width: 250px;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 60px; /* Espacio para el encabezado */
    overflow-y: auto;
}

.sidebar a {
    display: block;
    padding: 15px;
    color: white;
    text-decoration: none;
    transition: background-color 0.3s;
}

.sidebar a:hover {
    background-color: #396fb6;
}

/* Estilo para el área de contenido */
.content {
    margin-left: 250px;
    padding-top: 70px; /* Espacio para el encabezado */
    padding: 20px;
}

.form-container {
    max-width: 800px; /* Ajustar el ancho máximo */
    margin: auto; /* Centrar horizontalmente */
    padding: 20px;
    background: #ffffff;
}

.form-container2 {
    max-width: 800px; /* Ajustar el ancho máximo */
    margin: auto; /* Centrar horizontalmente */
    padding: 20px;
}
/* Estilo para los botones */
.btn-completos, .btn-proceso, .btn-recibe, .btn-enpro, .btn-xenv, .btn-pendientes, .btn-custom, .btn-danger {
    font-family: 'Poppins', sans-serif;
    color: white;
}

.btn-completos {
    background-color: #2a8c4a;
    border-color: #2a8c4a;
}

.btn-completos:hover {
    background-color: #2a8c4a;
    border-color: #2a8c4a;
}

.btn-proceso {
    background-color: #326199;
    border-color: #326199;
}

.btn-proceso:hover {
    background-color: #326199;
    border-color: #326199;
}

.btn-recibe {
    background-color: #70CAEE;
    border-color: #70CAEE;
}

.btn-recibe:hover {
    background-color: #70CAEE;
    border-color: #70CAEE;
}

.btn-enpro {
    background-color: #4FB1A1;
    border-color: #4FB1A1;
}

.btn-enpro:hover {
    background-color: #4FB1A1;
    border-color: #4FB1A1;
}

.btn-xenv {
    background-color: #EB8B50;
    border-color: #EB8B50;
}

.btn-xenv:hover {
    background-color: #EB8B50;
    border-color: #EB8B50;
}

.btn-pendientes {
    background-color: #e2504c;
    border-color: #e2504c;
}

.btn-pendientes:hover {
    background-color: #e2504c;
    border-color: #e2504c;
}

.btn-custom {
    background-color: #204b84;
    border-color: #204b84;
}

.btn-custom:hover {
    background-color: #183c6d;
    border-color: #183c6d;
}

/* Estilo para la tabla */
table {
    border-collapse: collapse;
    width: 100%;
}

th, td {
    border: 1px solid #ccc;
    padding: 8px;
    text-align: center;
}

th {
    background-color: #f2f2f2;
}

/* Estilo para el contador de recibidos */
#received-count {
    font-weight: bold;
    margin-top: 10px;
}

table, td, th {
    border: none; /* Eliminar cualquier borde en las tablas */
}

div {
    margin: 0; /* Eliminar márgenes si los hubiera */
}
.address-field {
    margin-bottom: 15px; /* Espaciado entre campos de dirección */
}

.address-field label {
    font-weight: bold;
}

.address-field input,
.address-field p {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px; /* Tamaño del texto de dirección */
}
.custom-table thead {
    background-color: #326199 !important;
    color: white !important;
}

.custom-table thead th {
    background-color: #326199 !important;
    color: white !important;
    font-weight: normal !important; 
}
.custom-table th,
.custom-table td {
    text-align: left !important;
}
.custom-table td:nth-child(5) { 
    max-width: 350px;  /* Ancho máximo de la columna */
    word-wrap: break-word;  /* Permite saltos de línea dentro del ancho */
    white-space: normal; /* Permite que el texto se divida en varias líneas */
}

.pagination-container {
    max-width: 600px;
    width: 100%;
}

.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.pagination .page-item {
    margin: 2px;
}

.pagination .disabled .page-link {
    background-color: #f8f9fa;
    border-color: #dee2e6;
    color: #6c757d;
}

.trackings {
    /*max-width: 1200px; /* Ajustar el ancho máximo */
    margin: auto; /* Centrar horizontalmente */
    padding: 20px;
    background: #ffffff;
}


.address-field {
    display: flex;
    flex-direction: column; /* Asegura que el label esté arriba del input */
    margin-bottom: 10px; /* Espaciado entre campos */
}

.address-field label {
    text-align: left; /* Asegura que la etiqueta esté alineada a la izquierda */
    font-weight: bold; /* Opcional: destaca la etiqueta */
}

.address-field input {
    width: 100%; /* Ocupar todo el ancho disponible */
    padding: 8px; /* Espaciado interno */
    text-align: left !important; /* Asegura alineación del texto dentro del input */
    border: 1px solid #ccc; /* Opcional: mejorar la apariencia */
    border-radius: 5px; /* Bordes redondeados */
}

/* Si hay reglas generales en Bootstrap que afectan los inputs, puedes forzar la alineación con */
input[type="text"] {
    text-align: left !important; /* Fuerza la alineación del texto dentro del input */
}
.address-field input {
    text-align: left !important;
}
.form-control {
    text-align: left; /* Reemplázalo por left si existe */
}

.btn-verde {
    background-color: #287233;
    border-color: #287233;
    color: white;
    font-weight: bold;
}

 .btn-verde:hover {
     background-color: #287233;
     border-color: #287233;
 }
 .btn-amarillo {
    background-color: #ffd200;
    border-color: #ffd200;
    color: white;
    font-weight: bold;
}

 .btn-amarillo:hover {
     background-color: #ffd200;
     border-color: #ffd200;
 }
 .btn-maritimo {
    background-color: #00aae4;
    border-color: #00aae4;
    color: white;
    font-weight: bold;
}

 .btn-maritimo:hover {
     background-color: #00aae4;
     border-color: #00aae4;
 }

 .navbar{
    background-color: #326199;
    color: white;
 }
 .navbar .nav-link {
    color: white !important;  /* Color de la letra */
}

.navbar .nav-link:hover {
    color: #163e70 !important; /* Color al pasar el mouse */
}

.campofecha{
    width: 50px;
    margin-bottom: 20px;
    margin-top: 20px;
}
#fecha-input {
    width: 120px !important;
    padding: 4px; /* Reduce el espacio interno */
    font-size: 18px; /* Reduce el tamaño de la fuente */
}


    .div-1 {
        background-color: #EBEBEB;
    }

    .btn-proceso {
            background-color: #326199;
            border-color: #326199;
            color: white; 
            font-weight: bold;
        }
         .btn-proceso:hover {
             background-color: #326199;
             border-color: #326199;
    }    

        /* Aplicar la fuente al título de las secciones */
        h1, h2, h3, h4, h5, h6 {
                font-family: 'Poppins', sans-serif; /* Aplicar la fuente Averta a los títulos */
        }
        body, label, input, button {
        font-family: 'Poppins', sans-serif;
    }