/*
    VARIABLES
*/

* {
    --color-primario: #68B6D4;
    --color-secundario: #8FCBB2;
    --color-oscuro: #3E4E67;
    --color-claro: #5b7297;
    --color-vibrante: #8FCBB2;
    --color-complementario: #88C9BC;
    --color-opaco: #A1CBCF;
    --color-gris-claro: #f5f5f5;
}

/*
    GENERALES
*/

body {
    height: 100vh;
    overflow: hidden;
}

    body .container-fluid .row.flex-nowrap {
        height: calc(100vh - 100px);
    }

    body .container-fluid .contenedor-seccion-principal {
        overflow: auto;
    }

    body .contenedor-menu-lateral {
        height: calc(100vh - 100px);
    }

        body .contenedor-menu-lateral #menu {
            margin-bottom: 0 !important;
        }

.color-primario {
    color: var(--color-primario);
}

.color-opaco {
    color: var(--color-opaco);
}

.color-vibrante {
    color: var(--color-vibrante);
}

.color-oscuro {
    color: var(--color-oscuro);
}

.color-claro {
    color: var(--color-claro);
}

.fondo-primario {
    background-color: var(--color-primario);
}

.fondo-oscuro {
    background-color: var(--color-oscuro);
}

.boton-primario {
    color: #FFF;
    background-color: var(--color-oscuro);
    border: 2px solid var(--color-oscuro);
    background-image: none;
}

    .boton-primario:hover {
        color: var(--color-oscuro);
        background-color: #FFF;
        background-image: none;
    }

.boton-primario-inverso {
    color: var(--color-vibrante);
    background-color: white;
    border: 2px solid var(--color-vibrante);
    background-image: none;
}

    .boton-primario-inverso:hover {
        color: var(--color-vibrante);
        background-color: #FFF;
        background-image: none;
    }

.boton-secundario {
    color: #FFF;
    background-color: var(--color-claro);
    border: 2px solid var(--color-claro);
    background-image: none;
}

    .boton-secundario:hover {
        color: var(--color-claro);
        background-color: #FFF;
        background-image: none;
    }

.boton-oscuro {
    color: #FFF;
    background-color: var(--color-oscuro);
    border: 2px solid var(--color-oscuro);
    background-image: none;
}

    .boton-oscuro:hover {
        color: var(--color-oscuro);
        background-color: #FFF;
        background-image: none;
    }

.boton-vibrante {
    color: #FFF;
    background-color: var(--color-complementario);
    border: 2px solid var(--color-complementario);
    background-image: none;
}

    .boton-vibrante:hover {
        color: var(--color-complementario);
        background-color: #FFF;
        background-image: none;
    }

.sub-titulo {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 1.375;
}

.texto-normal {
    font-weight: 600 !important;
    font-size: .875rem !important;
    line-height: 1.5;
}

.card {
    border: none !important;
    height: fit-content !important;
    box-shadow: rgb(0 0 0 / 16%) 0px 1px 4px;
    border-radius: 0 !important;
    padding: 0 !important;
}

    .card .card-header {
        background-color: #fff;
        border-bottom: 0 solid rgba(0,0,0,.125);
    }

        .card .card-header h6 {
            font-weight: 600;
            font-size: 1.2rem;
            line-height: 1.625;
            color: var(--color-oscuro);
        }

[readonly]:not(.datepicker) {
    background-color: var(--color-gris-claro) !important;
}

.contenedor-seccion-principal {
    position: relative;
}

#loading .div_alert {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    display: flex !important;
    flex-direction: column;
}

.dataTables_filter {
    padding-right: 10px;
}

    .dataTables_filter input[type="search"] {
        background-color: white;
        border: 1px solid #ced4da;
    }

        .dataTables_filter input[type="search"]:focus {
            color: #212529;
            background-color: #fff;
            border-color: #86b7fe;
            outline: 0;
            box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
        }

.dataTables_length {
    padding-left: 10px !important;
}

    .dataTables_length select {
        background-color: white;
    }

.flex-divider {
    width: 2px;
    margin: 6px 0;
    background: blue;
}

.form_title {
    border-radius: 0 !important;
    padding-left: 5px;
}

.valor-incorrecto, .campo-obligatorio {
    border: 1px solid red !important;
}

/*
    TOOLTIP
*/

.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

    .tooltip .tooltiptext {
        visibility: hidden;
        width: 120px;
        background-color: black;
        color: #fff;
        text-align: center;
        border-radius: 6px;
        padding: 5px 0;
        /* Position the tooltip */
        position: absolute;
        z-index: 1;
        left: 0;
        right: 0;
        top: calc(100% + 5px);
    }

    .tooltip:hover .tooltiptext {
        visibility: visible;
    }

/*
    ASIGNACIÓN
*/
#divbarra {
    border: none;
    height: fit-content;
}

#modal-asignacion #loading {
    left: 0px;
    top: 0px;
}

/*
    ORDEN DE COMPRA
*/

#btnEditarOC {
    border-radius: 8px;
    margin-right: 12px;
}

.cabecera-oc {
    display: flex;
    justify-content: start;
}

    .cabecera-oc .seccion-cabecera-oc {
        display: flex;
        flex-direction: column;
        width: fit-content;
        min-width: 30%;
        margin-right: 1rem;
    }

        .cabecera-oc .seccion-cabecera-oc label {
            display: flex;
            width: 100%;
        }

            .cabecera-oc .seccion-cabecera-oc label span {
                width: 30%;
                text-align: left;
                color: var(--color-oscuro);
            }

                .cabecera-oc .seccion-cabecera-oc label span:first-child {
                    font-weight: bold;
                }

                .cabecera-oc .seccion-cabecera-oc label span:last-child {
                    width: 75%;
                }

.table_producto {
    margin: 0 !important;
    border: none !important;
    width: 100% !important;
    max-width: 100% !important;
}

    .table_producto thead tr th {
        background-color: var(--color-secundario);
        padding: 5px;
    }

    .table_producto tbody tr.even {
        background-color: var(--color-gris-claro);
    }

    .table_producto tbody tr td {
        color: var(--color-oscuro);
        padding: 5px;
    }

        .table_producto tbody tr td a {
            color: var(--color-oscuro);
            text-decoration: none;
            font-weight: bold;
        }

.dataTables_info {
    padding-left: 10px;
}

.dataTables_paginate {
    padding-right: 10px;
}

    .dataTables_paginate .paginate_button {
        color: var(--color-primario) !important;
    }

#contenido_productos {
    background-color: #FFF !important;
}

    #contenido_productos .table_producto {
        width: 100% !important;
        margin: 0 !important;
    }

#flCargaArchivo {
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
}

.tabla-prod-crea tbody tr:nth-child(even) {
    background-color: var(--color-gris-claro) !important;
}

.tabla-prod-crea tbody tr:nth-child(odd) {
    background-color: white !important;
}

/* PEDIDO */


.pedidoresumen label {
    font-size: 12px;
}

.pedidoresumen input:disabled {
    width: 50px;
}

.tableresumen {
    width: 100%;
    border: 1px solid #CCC;
    font-size: 11px;
    padding: 3px;
}

    .tableresumen td {
        border-bottom: 1px solid #CCC;
    }

.fila-producto-error {
    background-color: #F9E3E3 !important;
}


.table_producto tbody tr:nth-child(even) {
    background-color: var(--color-gris-claro);
}

.camiones-resumen li {
    font-weight: 500;
    font-size: small;
}

/* EDITAR PEDIDO */

.contenedor-comentarios {
    position: relative;
}

    .contenedor-comentarios::before {
        content: "";
        position: absolute;
        top: 0;
        left: 1rem;
        height: 100%;
        border-right: 2px solid #e5e5e5;
    }

    .contenedor-comentarios .comentario {
        position: relative;
        display: block;
    }

        .contenedor-comentarios .comentario .contenedor-icono {
            position: absolute;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            left: 1rem;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: #fff;
            text-align: center;
            transform: translateX(-50%);
            font-size: 1rem;
            font-weight: 600;
            z-index: 1;
            background-color: #3E4E67;
        }

            .contenedor-comentarios .comentario .contenedor-icono i {
                color: #FFFFFF;
            }

        .contenedor-comentarios .comentario .contenedor-contenido {
            display: block;
            max-width: 30rem;
            width: auto;
            margin-left: 45px;
            position: relative;
            top: -6px;
        }

            .contenedor-comentarios .comentario .contenedor-contenido .usuario-comentario {
                color: #3E4E67;
                font-weight: 600;
                font-size: .875rem;
                line-height: 1.5;
            }

            .contenedor-comentarios .comentario .contenedor-contenido .fecha-comentario {
                color: #7b809a;
                font-weight: 300;
                font-size: .75rem;
                line-height: 1.25;
            }

            .contenedor-comentarios .comentario .contenedor-contenido .detalle-comentario {
                color: #3E4E67;
                font-weight: 300;
                font-size: .875rem;
                line-height: 1.5;
            }

.datos-generales {
    display: flex;
    flex-direction: row;
}

    .datos-generales .contenedor-foto {
        width: 5rem;
    }

        .datos-generales .contenedor-foto img {
            width: 100%;
            padding: 0;
            margin: auto;
        }

.contenedor-datos-personales {
    min-height: 465px;
}

    .contenedor-datos-personales .contenedor .datos {
        text-align: center;
        padding: 10px;
    }

        .contenedor-datos-personales .contenedor .datos .empresas {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }

            .contenedor-datos-personales .contenedor .datos .empresas .empresa {
                display: flex;
                padding: 10px;
                background: linear-gradient(90deg, rgba(140,145,157,1) 0%, rgba(186,217,202,1) 100%);
                color: white;
                border-radius: 5px;
                margin: 5px;
                width: 100%;
                align-items: center;
            }

                .contenedor-datos-personales .contenedor .datos .empresas .empresa .empresa-icono {
                    width: 32px;
                }

                .contenedor-datos-personales .contenedor .datos .empresas .empresa .empresa-nombre {
                    margin-left: 10px;
                    font-weight: 500;
                }


/* RESULTADO CARGADOR ASIGNACIONES */

.resumen-carga {
    display: flex;
    margin: 20px;
    padding: 20px;
    background: #f0f0f0;
    border-radius: 10px;
}

    .resumen-carga > div {
        display: flex;
        align-items: center;
        flex-grow: 1;
    }

        .resumen-carga > div span {
            padding: 5px;
            border-radius: 5px;
        }

    .resumen-carga .icono-resumen {
        justify-content: center;
    }

        .resumen-carga .icono-resumen i {
            font-size: 2rem;
        }

        .resumen-carga .icono-resumen.peligro i {
            color: #FAB005;
        }

        .resumen-carga .icono-resumen.correcto i {
            color: #82C91E;
        }

    .resumen-carga .total-resumen span {
        background-color: #CCCCCC;
    }

    .resumen-carga .correctos-resumen span {
        background-color: #82C91E;
        color: #FFFFFF;
    }


    .resumen-carga .error-resumen span {
        background-color: #FAB005;
        color: #FFFFFF;
    }