/* GENERAL USE*/
.section-title h1 {
    text-align: center;
    position: relative;
    font-size: 22px;
    color: #000000;
    font-weight: bold;
    margin-top: 30px;
    margin-bottom: 10px;
}

.section-title img {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    height: 35px; /* Adjust the size of the logo */
    font-size: 12px;
}

.box-principal-title {
    padding-bottom: 0px;
    padding-top: 10px;
    padding-left: 20px;
    margin: 0 -15px; /* Extend beyond container padding */
    border-radius: 5px; /* Rounded corners */
}

.box-principal-title h2 {
    margin: 0;
    color: #0F4D63;
    font-size: 17px;
    font-weight: bold;
}

.container-fluid {
    padding-left: 40px;
    padding-right: 40px;
}

.box {
    background-color: rgba(255, 255, 255, 0.8); /* Same background color */
    padding: 20px;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 20px;
    display: flex; /* Use flexbox */
    flex-direction: column; /* Stack items vertically */
    justify-content: space-between; /* Distribute items evenly */
    height: 100%; /* Occupy full height of parent */
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1)
}

.box-title {
    margin-bottom: 15px;
    font-size: 18px;
}

.centered-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%; /* Ensure the button takes full height of the box */
}

.form-group {
    display: flex;
    align-items: center;
    justify-content: center;
}

.form-group select{
    margin-right: 15px;
}

.box-principal-content {
    background-color: #EAEAEA;
    padding: 10px 20px;
    margin: 0 -15px; /* Extend beyond container padding */
    border-radius: 5px; /* Rounded corners */
}

.box button {
    background-color: #415996;
    color: white; /* Color del texto */
    border-color: #415996; /* Color del borde */
    margin-top: 0px;
}

.box button:hover {
    background-color: #1387CE;
    border-color: #1387CE; /* Color del borde al pasar el cursor */
}

.box a {
    background-color: #415996;
    color: white; /* Color del texto */
    border-color: #415996; /* Color del borde */
    margin-top: 10px;
}

.table-small thead th {
    background-color: #156082; /* Color verde para los encabezados */
    color: white; /* Color de texto blanco para contraste */
}

.table-small tbody tr:nth-child(odd) {
    background-color: #D3E8EF; /* Color verde claro para filas impares */
}

.table-small tbody tr:nth-child(even) {
    background-color: white; /* Color blanco para filas pares */
}

.flex-container {
    display: flex;
    align-items: center;
}

.decimal-value {
    flex: 1;
    text-align: left;
}

.created-user-container {
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}

/* GENERAL CODE */


/* LOGIN */

.login-container {
    background: rgba(255, 255, 255, 0.8);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
}

.login-logo {
    display: block;
    margin: 0 auto 20px;
    width: 200px;
    height: auto;
}

.login-form-group {
    text-align: left;
    margin-bottom: 15px;
}

.login-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: regular;
    font-size: 14px;
}

.login-form-group input {
    width: 100%;
    padding: 8px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.password-reset-link {
    font-size: 12px;
    color: #007bff;
    text-decoration: none;
}

.password-reset-link:hover {
    color: #0056b3;
}

.input-group {
    position: relative;
    width: 100%;
}

.input-group-append {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.input-group-text {
    background: transparent;
    border: none;
}

.password-toggle {
    cursor: pointer;
    color: #6c757d;
}

/* CSS adicional para la tabla */
.table-container {
    background: rgba(255, 255, 255, 0.8);
    overflow-y: auto;   /* Desplazamiento vertical */
    overflow-x: auto;   /* Desplazamiento horizontal */
    height: 100%;
    border-radius: 5px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    margin: 0 auto;     /* Centrar la tabla horizontalmente */
    min-width: 100%;        /* Ajustar el ancho de la tabla automáticamente */
}

.spece-between{
    margin-bottom: 20px;
}




.form-inline {
    padding-left: 20px;
}

.alert-container {
    max-width: 200px;
    font-size: 12px;
    padding-top: 10px;
}

.alert.alert-danger {
    color: #C63926; /* Color de texto */
    background-color: transparent; /* Fondo transparente */
    border-color: transparent; /* Color del borde */
    padding: 0; /* Espaciado interno */
    border-radius: 0.25rem; /* Bordes redondeados */
}

.process_files {
    background: rgba(255, 255, 255, 0.8);
    padding: 10px 20px;
    border-radius: 10px;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    width: 400px;
}

.detail-user-container {
    max-width: 500px;
    margin: 10px auto;
    padding: 20px;
    background-color: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.input-field label {
    display: block;
    margin-bottom: 5px;
    margin-top: 10px;
    font-weight: 200;
    text-align: left;
}

.input-field input, .input-field select, .input-field textarea {
    width: 100%;
    padding: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background: white;
}

.text-field {
    margin-top: 10px;
    margin-bottom: -10px;
}

.detail-user-container button {
    background-color: #054759;
    color: white; /* Color del texto */
    border-color: #004085; /* Color del borde */
    margin-top: 10px;
}

.detail-user-container button:hover {
    background-color: #052A33;
    border-color: #002752; /* Color del borde al pasar el cursor */
}

.centered-box {
    max-width: 600px;
    margin: 50px auto;
    padding: 20px;
    background-color: white !important;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.1);
    border-radius: 8px;
}

.centered-box h3 {
    margin-top: 0; /* Elimina el margen superior del título */
    color: #333; /* Color del texto del título */
    text-align: center; /* Centra el título */
    font-weight: 600;

}

.centered-box p {
    color: #555; /* Color del texto de los párrafos */
    text-align: justify; /* Justifica el texto de los párrafos */
}

.centered-box ul {
    list-style-type: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina el padding de la lista */
}

.centered-box ul li {
    margin-bottom: 10px; /* Espacio entre los elementos de la lista */
    color: #661; /* Color del texto de los elementos de la lista */
}

/* codigo tabla grande con desplazamiento */

        .table-responsive {
            overflow-x: auto;
            overflow-y: auto;
            height: 100%;
            max-height: calc(100vh - 100px);
            box-sizing: border-box;
            min-width: 100%;
        }

        .excel-like-table {
            min-width: 100%;

        }

        .excel-like-table table {
            width: 100%;
            table-layout: auto;
            border-collapse: collapse;
            margin-bottom: 0;
            padding-bottom: 0;
        }

        .excel-like-table th,
        .excel-like-table td {
            padding: 10px;
            text-align: left;
            vertical-align: top;
            white-space: nowrap;
            border: 1px solid #ddd;
            position: relative;
        }

        .excel-like-table th {
            background-color: #237e9e;
            color: white;
            text-align: center;
            position: sticky;
            top: 0;
            z-index: 10;
        }

        .excel-like-table tr:nth-child(even) {
            background-color: #f2f2f2;
        }

        .excel-like-table tr:hover {
            background-color: #ddd;
        }


        .button_table {
            padding: 1px;
            padding-left: 3px;
            padding-right: 3px;
            background-color: #edb043;
            border-color: #edb043;
        }

/* SECCION 1 ICONOS Y TITULO */

        .icon-customer, .icon-customer-right {
            font-size: 22px;
            color: #4e6eab; /* Cambia esto al color que prefieras */
            margin-left: 10px; /* Espacio entre los iconos */
            padding-top: 20px;
        }

        .section .row-icons {
            text-align: right; /* Alinea el texto a la derecha */
            padding-top: 20px;
        }
        .section-title-1 h1 {
            font-family: 'Arial';
            text-align: left;
            font-size: 27px;
            color: #000000;
            font-weight: 500;
            margin-left: 5px;
            margin-top: -25px;
        }
        .quotes-section {
            margin-top: 40px;

        }
        .row3 {
            margin: 0px;
        }

        .btn-azul-petroleo {
            background-color: #054759;
            color: white;
            border-color: #004085;
        }
        .btn-azul-petroleo:hover {
            background-color: #052A33;
            border-color: #002752;
            color: white;
        }
        .column-select {
            width: auto;
            background-color: rgba(255, 255, 255, 0.30);
        }

       .tabla-translucida {
            --bs-table-bg: rgba(255, 255, 255, 0.20);
            background-color: rgba(255, 255, 255, 0.20);
            outline: 15px solid rgba(255, 255, 255, 0.30);


       }
       .card-translucida {
            --bs-card-bg: rgba(255, 255, 255, 0.35);
            background-color: rgba(255, 255, 255, 0.35);

       }
       .card-translucida .card-header,
       .card-translucida .card-body
       { background-color: transparent !important;
       }

       .tabla-sin-copia {
            user-select: none;
            -webkit-user-select: none;
            -moz-user-select: none;
       }


        @media (max-width: 576px) {
            /* styles.css fija 40px de relleno lateral en .container-fluid
               y 27px en el título — ambos son demasiado en pantallas chicas */
            .container-fluid {
                padding-left: 16px;
                padding-right: 16px;
            }
            .section-title-1 h1 {
                font-size: 18px;
            }
            .table-container {
                padding: 14px 12px;
            }
            .toolbar {
                flex-direction: column;
                align-items: stretch;
            }
            .toolbar-filter input[type="text"] {
                max-width: none;
                flex: 1;
            }
        }