html {
    font-size: 14px;
}

body {
    background-color: #efefef !important;
}

    body #content-wrapper {
        margin-left: 14rem !important;
        /*transition: all .25s ease-in;*/
    }

    body.sidebar-toggled #content-wrapper {
        margin-left: 6.5rem !important;
        /*transition: all .25s ease-out;*/
    }

@media (max-width: 576px) {
    body #content-wrapper {
        margin-left: 0 !important;
    }

    body.sidebar-toggled #content-wrapper {
        margin-left: 0 !important;
    }
}

.contenedor-body {
    margin-top: 75px;
}

.tamanioFuente {
    font-size: 12px !important;
}


/* ==========================================================================
Variables
========================================================================== */
* {
    box-sizing: border-box;
}


    *::selection {
        background: #e1e1e8;
        color: #555;
        font-weight: bold;
    }

:root {
    --sombra-botones: 0 0 6px 2px #ffffff;
    --bordes-redondeados: .8em;
    --rojo: #b00b0b;
    --rojo2: #c70c0c;
    --gris: #272a2c;
    --gris2: #343a40;
    --gris3: #DBDBDB;
   /* --rojo: #668b36;
    --rojo2: #48662a;*/
}


input[type="checkbox"][readonly] {
    pointer-events: none !important;
}
/* ==========================================================================
Clase para cambiar de color el seleccion de empresa y los planes de usuario.
========================================================================== */
.cuadro-plan {
    background-color: #fff;
    border: 1.3px #48662a solid;
    /*border-radius: 3px 3px 3px 3px;
    -moz-border-radius: 3px 3px 3px 3px;
    -webkit-border-radius: 3px 3px 3px 3px;*/
    -moz-border-radius: var(--bordes-redondeados);
    -webkit-border-radius: var(--bordes-redondeados);
    border-radius: var(--bordes-redondeados);
    color: #333333;
}

    .cuadro-plan:hover {
        background: rgba(102,139,54, 0.2);
        border: 1.3px solid transparent;
    }


.NoSubrayar:link {
    cursor: pointer;
    text-decoration: none;
}
/*Fin codigo del modulo de usuario*/

.card-grupo-trabajo {
    flex: 1 1 auto;
    padding: 1.25rem;
    font-size: 16px;
    background: rgba(102,139,54, 0.2);
    border: 1.3px #48662a solid;
    border-radius: 10px !important;
}
.p-grupo-trabajo {
    color: #48662a;
    font-weight: bold;
}
/* ==========================================================================
Para los BOTONES DENTRO DE LAS TABLAS
========================================================================== */
.tdBotones {
    width: 50px;
    min-width: 40px !important;
    /*min-width: 60px !important;*/
    /*padding: 5px !important*/
    /*padding: 1px 10px !important;*/
    padding: 0 !important;
}

/* ==========================================================================
Centrar contenido dentro de los td 
========================================================================== */
table {
    background-color: white !important
}

    table td {
        vertical-align: middle !important;
    }

/*table thead {
    border:none
}
table thead th {
    background-color: #151515;
    color: #f5f5f5;
}*/


.margenInferionIndex {
    margin-bottom: auto
}

.margenInferionIndex-stock {
    margin-bottom: 150px !important
}

.btn-tabla {
    cursor: pointer;
    margin: 0;
    border: 0;
    display: inline-flex;
    position: relative;
    user-select: none;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    color: rgba(191, 4, 17, 0.85);
    font-size: 1rem !important;
    text-align: center;
    border-radius: 50%;
    width: 30px !important;
    height: 30px !important;
    padding: 0px 0px;
}

    .btn-tabla:hover,
    .btn-tabla:focus,
    .btn-tabla:active,
    .btn-tabla.active,
    .open .dropdown-toggle.btn-tabla {
        background-color: rgba(0,0,0, 0.08);
        color: rgba(0, 0, 0, 0.54);
        text-decoration: none;
    }

.btn-tablaFlechas {
    color: rgba(87,22,125, 0.7);
    font-size: 1rem;
}

.grafico-lluvia {
    margin-bottom: 20px;
    margin-top: 10px;
    width: 100%;
    max-width: 100vw;
    height: 500px;
}

.btn-verde {
    border-color: #48662a !important;
    color: #48662a !important;
    transition: all .2s cubic-bezier(.79,.14,.15,.86);
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    /*line-height: 1.35 !important;*/
}

    .btn-verde:hover {
        background: rgba(102,139,54, 0.2) !important;
        color: #48662a !important;
    }

.btn-verde:active {
    background-color: transparent;
    color: #f5f5f5 !important;
}

.btn-rojo1 {
    border-color: #b00b0b !important;
    color: #b00b0b !important;
    transition: all .2s cubic-bezier(.79,.14,.15,.86);
    font-weight: 700 !important;
    font-size: 12px !important;
    text-transform: uppercase;
    /*line-height: 1.35 !important;*/
}

    .btn-rojo1:hover {
        background: rgba(139, 54, 54, 0.2) !important;
        color: #c70c0c !important;
    }

    .btn-rojo1:active {
        background-color: transparent;
        color: #f5f5f5 !important;
    }

.btn-rojo2 {
    background-color: var(--rojo) !important;
    border: none !important;
    color: white !important;
    transition: all .2s ease-in;
    font-weight: 500 !important;
    /*line-height: 1.35 !important;*/
}

    .btn-rojo2:hover {
        background-color: var(--rojo2) !important;
    }

.btn-verde2 {
    background-color: #668b36 !important;
    border: none !important;
    color: white !important;
    transition: all .2s ease-in;
    font-weight: 500 !important;
}
/* ==========================================================================
Clase para eliminar COLUMNAS de las TABLAS.
========================================================================== */
@media (max-width: 1023px) {
    .descarto {
        display: none;
    }
}

@media (max-width: 550px) {
    .descarto550 {
        display: none;
    }
}

@media (max-width: 1423px) {
    .descarto1423 {
        display: none;
    }
}

.puntosSuspensivos {
}

@media (max-width: 480px) {
    .puntosSuspensivos {
        width: 250px;
        overflow: hidden; /* Escondemos la parte sobrante */
        white-space: nowrap; /* Indicamos que no realice salto de linea si no cabe en la anchura indicada */
        text-overflow: ellipsis; /* Ponemos los dos puntos */
    }
}

@media (max-width: 320px) {
    .puntosSuspensivos {
        width: 160px;
        overflow: hidden; /* Escondemos la parte sobrante */
        white-space: nowrap; /* Indicamos que no realice salto de linea si no cabe en la anchura indicada */
        text-overflow: ellipsis; /* Ponemos los dos puntos */
    }
}

@media (max-width: 991px) {
    .espacioCol {
        margin-top: 10px;
    }
}

@media (max-width: 1400px) {
    .margenInferionIndex {
        margin-bottom: 150px
    }
}



.aRojo {
    color: #bf1919;
    text-decoration: none;
}

    .aRojo:hover,
    .aRojo:focus {
        color: #872d2d;
        text-decoration: underline;
    }

.negrita {
    font-weight: bold !important;
    color: var(--gris) !important;
}


/* ==========================================================================
Botones flotantes
========================================================================== */
button.btnPosicion1,
.btnPosicion1 {
    display: flex;
    flex-direction: row;
    width: 50px;
    height: 50px;
    /*padding: 11px;*/
    border-radius: 50%;
    position: fixed;
    overflow: hidden;
    text-align: center;
    bottom: 15px;
    right: 15px;
    font-size: 1.25rem;
    z-index: 1001;
    border: 0px;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    /*background-color: #d40413;*/
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #48662a), color-stop(1, #668b36)) !important;
    /*<<============================================== GRADIENTE Y SOMBRA ==============================================>>*/
    background-image: linear-gradient(#a1000c, #d40413);
    box-shadow: var(--sombra-botones);
    cursor: pointer;
}

    .btnPosicion1:focus,
    .btnPosicion1:active {
        outline-color: #668b36;
    }

    .btnPosicion1:hover,
    /*.btnPosicion1:focus,
    .btnPosicion1:active,*/
    .btnPosicion1.active,
    .open .dropdown-toggle.btnPosicion1 {
        color: #ffffff;
        background-color: #bf0411;
        border-color: #ac2925;
        opacity: 0.9;
        /*border: none;*/
    }


button.btnPosicion2,
.btnPosicion2 {
    display: flex;
    cursor: pointer;
    width: 50px;
    height: 50px;
    /*padding: 11px;*/
    border-radius: 50%;
    position: fixed;
    overflow: hidden;
    text-align: center;
    bottom: 80px;
    right: 15px;
    font-size: 1.25rem;
    z-index: 1001;
    border: 0px;
    justify-content: center !important;
    align-items: center !important;
    color: #ffffff;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #48662a), color-stop(1, #668b36)) !important;
    border-color: #d43f3a;
    /*<<============================================== GRADIENTE Y SOMBRA ==============================================>>*/
    background-image: linear-gradient(#a1000c, #d40413);
    box-shadow: var(--sombra-botones);
    cursor: pointer;
}

    .btnPosicion2:focus,
    .btnPosicion2:active {
        outline-color: #668b36;
    }

    .btnPosicion2:hover,
    /*.btnPosicion2:focus,
    .btnPosicion2:active,*/
    .btnPosicion2.active,
    .open .dropdown-toggle.btnPosicion2 {
        color: #ffffff;
        background-color: #bf0411;
        border-color: #ac2925;
        opacity: 0.9;
        /*border: none;*/
    }

button.btnPosicion3,
.btnPosicion3 {
    display: flex;
    cursor: pointer;
    width: 50px;
    height: 50px;
    /*padding: 11px;*/
    border-radius: 50%;
    position: fixed;
    overflow: hidden;
    text-align: center;
    bottom: 145px;
    right: 15px;
    font-size: 1.25rem;
    z-index: 950;
    border: 0px;
    justify-content: center !important;
    align-items: center !important;
    color: #ffffff;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #48662a), color-stop(1, #668b36)) !important;
    border-color: #d43f3a;
    /*<<============================================== GRADIENTE Y SOMBRA ==============================================>>*/
    background-image: linear-gradient(#a1000c, #d40413);
    box-shadow: var(--sombra-botones);
    cursor: pointer;
}

    .btnPosicion3:focus,
    .btnPosicion3:active {
        outline-color: #668b36;
    }

    .btnPosicion3:hover,
    /*.btnPosicion3:focus,
    .btnPosicion3:active*/
    .btnPosicion3.active,
    .open .dropdown-toggle.btnPosicion3 {
        color: #ffffff;
        background-color: #bf0411;
        border-color: #668b36;
        opacity: 0.9;
        /*border: none;*/
    }

    .btnPosicion1 i,
    .btnPosicion2 i,
    .btnPosicion3 i {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center
    }

    .btnPosicion1:hover,
    .btnPosicion2:hover,
    .btnPosicion3:hover {
        text-decoration: none;
    }


.btnVolver {
    width: 50px;
    height: 50px;
    padding: 10px;
    border-radius: 50px;
    position: fixed;
    overflow: hidden;
    text-align: center;
    bottom: 15px;
    right: 15px;
    font-size: 20px;
    z-index: 100;
    border: none;
}

.btnNuevo {
    width: 50px;
    height: 50px;
    padding: 11px;
    border-radius: 50px;
    position: fixed;
    overflow: hidden;
    text-align: center;
    bottom: 80px;
    right: 15px;
    font-size: 20px;
    z-index: 100;
    border: none;
}

.btnNuevoBajo {
    width: 50px;
    height: 50px;
    padding: 11px;
    border-radius: 50px;
    position: fixed;
    overflow: hidden;
    text-align: center;
    bottom: 15px;
    right: 15px;
    font-size: 20px;
    z-index: 100;
}


.logologuimenu {
    width: 10%;
    min-width: 80px;
    margin-top: -10px;
    margin-bottom: -15px;
    margin-left: -5px;
    margin-right: -5px;
    margin-right: -5px;
}

.sidebar.toggled .sidebar-brand img {
    width: 25%;
}

.sidebar .sidebar-brand img {
    width: 80%;
}


.sidebar-brand img:hover {
    transform: scale(1.05);
    transition: all .05s ease-in
}

nav .logologuimenu {
    filter: drop-shadow(1px 1px 2px #000)
}


.barrainferior {
    z-index: 1000;
    min-height: 40px;
    /*position: fixed;*/
    z-index: 800;
    right: 0;
    left: 0;
    top: 60px;
    border: 1px solid transparent;
    background-color: var(--gris3);
}

.distancia {
    padding-bottom: 50px;
}

.distancia3 {
    padding-bottom: 3%;
}

.titulobarrainferior {
    float: left;
    padding-top: 10px;
    font-size: 16px;
    font-weight: bold;
    line-height: 20px;
    color: #fff;
}


@font-face {
    font-family: '20thbold';
    src: url('../fonts/20thbold.ttf') format('truetype');
}

.centuryfont {
    text-align: left !important;
    /*font-family: '20thbold';*/
    font-size: 2em;
    font-weight: 700;
    color: var(--gris2);
}

.centrarloguin {
    padding-left: 2%;
    padding-right: 2%;
    cursor: pointer;
    width: 100%;
    text-align: left;
}


/*color del texto descripcion que sirve como boton de detalle*/
.detalletituloindex {
    color: #48662a !important;
    font-weight: 700 !important;
    cursor: pointer;
}

    .detalletituloindex:hover,
    .detalletituloindex:focus {
        color: #48662a !important;
        text-decoration: none !important;
    }


/*color y estilo del texto que sirve para volver al listado*/
.volverbarraindex {
    color: #d20816;
    font-size: larger;
}
/*color y tipo de texto de la barra final de pagina*/
.tipoletrabarraabajo {
    color: #5c5b5b;
    font-weight: bold;
    font-family: Arial;
    /*font-family:'20th Century Font';*/
}

    .tipoletrabarraabajo:hover {
        color: #668b36;
    }
/*color de barra de titulos del index*/
.barratitulosindex {
    background-color: #DBDBDB;
}

.btnRedondo {
    width: 42px;
    height: 40px;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    color: white;
    border: none;
    background-color: var(--rojo) !important;
    transition: all .2s ease-in;
}

    .btnRedondo:hover {
        opacity: .8
    }

    .btnRedondo:focus {
        outline-color: red;
    }

.btn-redondo-numero {
    background: rgba(217, 83, 79, 0.35) !important;
    border: none;
    color: #d9534f;
    font-size: 16px;
    font-weight: 700;
}

/*color y estilo del boton usado para realizar un nuevo registro*/
.btn-confirmar {
    color: #ffffff;
    background-color: #d40413;
    border-color: #48662a;
}

    .btn-confirmar:hover,
    .btn-confirmar:focus,
    .btn-confirmar:active,
    .btn-confirmar.active,
    .open .dropdown-toggle.btn-rojo {
        color: #ffffff;
        background-color: #bf0411;
        border-color: #48662a;
    }


.lupa {
    color: #bf0411;
}

.rojo {
    color: #ff3e3f;
}

.verde {
    color: #269f3a;
}

.naranja {
    color: #ffa701;
}


/*.btn-transparente {
    display: inline-flex;
    padding: 0px 0px !important;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.428571429;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    /*-o-user-select: none;*/
/*user-select: none;
}

    .btn-transparente:hover {
        background-color: rgba(0,0,0, 0.08);
        color: rgba(0, 0, 0, 0.54);
        text-decoration: none;
        border-radius: 50%;
    }*/
.btn-transparente {
    cursor: pointer;
    margin: 0;
    border: 0;
    display: inline-flex;
    position: relative;
    user-select: none;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    color: #668b36 !important;
    font-size: 1.6rem;
    text-align: center;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0px 0px !important;
}

    .btn-transparente:hover,
    .btn-transparente:focus,
    .btn-transparente:active,
    .btn-transparente.active,
    .open .dropdown-toggle.btn-transparente {
        background-color: rgba(0,0,0, 0.08);
        color: rgba(102,139,54) !important;
        text-decoration: none;
    }

/* ==========================================================================
Para los BOTONES de opciones del Sistema.
========================================================================== */
.btn-tabla {
    cursor: pointer;
    margin: 0;
    border: 0;
    display: inline-flex;
    position: relative;
    user-select: none;
    align-items: center;
    vertical-align: middle;
    justify-content: center;
    text-decoration: none;
    background-color: transparent;
    -webkit-appearance: none;
    -webkit-tap-highlight-color: transparent;
    color: rgba(0, 0, 0, 0.54) !important;
    font-size: 1.6rem;
    text-align: center;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 0px 0px !important;
}

    .btn-tabla:hover,
    .btn-tabla:focus,
    .btn-tabla:active,
    .btn-tabla.active,
    .open .dropdown-toggle.btn-tabla {
        background-color: rgba(0,0,0, 0.08);
        /*color: rgba(0, 0, 0, 0.54);*/
        text-decoration: none;
    }

.btn-tablaFlechas {
    color: rgba(87,22,125, 0.7);
    font-size: 1.5rem;
}

/* ==========================================================================
Para los BOTONES OVALADOS del Sistema.
========================================================================== */
.btn-ovalo {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    background-color: transparent;
    border: 2px solid #48662a;
    border-radius: 30px;
    color: #48662a !important;
    padding: 5px 18px 4px 18px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important;
}

    .btn-ovalo:hover,
    .btn-ovalo:focus,
    .btn-ovalo:active,
    .btn-ovalo.active,
    .open .dropdown-toggle.btn-ovalo {
        background-color: rgba(87,22,125, 0.08);
        color: #48662a !important;
    }

.ocultar {
    display: none !important;
}

.btn-ovalo-rojo {
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    background-color: transparent;
    border: 2px solid #b00b0b;
    border-radius: 30px;
    color: #b00b0b !important;
    padding: 5px 18px 4px 18px;
    font-size: 12px;
    font-weight: bold;
    text-transform: uppercase;
    text-decoration: none !important;
}

    .btn-ovalo-rojo:hover,
    .btn-ovalo-rojo:focus,
    .btn-ovalo-rojo:active,
    .btn-ovalo-rojo.active,
    .open .dropdown-toggle.btn-ovalo-rojo {
        background-color: rgba(245,218,213, 0.08);
        color: #b00b0b !important;
        border: 2px solid #b00b0b !important;
    }

/* ==========================================================================
Definimos el alto de las filas quew no tienen botones de eliminar o consultar.
========================================================================== */
.altoBotonesTabla {
    height: 31px;
}


/* ==========================================================================
Cambiamos las propiedad del hover del index.
========================================================================== */
.hoverindex:hover, .hoverindex:active, .hoverindex:focus {
    outline: none;
    text-decoration: none;
    color: rgba(15,15,15,.8);
}


/* ==========================================================================
Cambiamos el teto a negrita.
========================================================================== */
.text-bold, .text-bold.table td, .text-bold.table th {
    font-weight: 700;
}


/* ==========================================================================
Fondo en rojo para clientes deshabilitados
========================================================================== */
.fondoRojo {
    background-color: #ffdbdb;
}


/* ==========================================================================
Margen check crear personas
========================================================================== */
.margencheck {
    margin-top: 9.4%;
}


/* ==========================================================================
input con fondo rojo y borde en rojo. Cuando se desvincula el usuario.
========================================================================== */
.importeRojo {
    background-color: rgba(255, 0, 0, 0.05) !important;
}

.bordeRojoImporte {
    border: 1px solid var(--rojo2) !important;
}

.espaciadoEnForm {
    margin-bottom: 10px;
}

.bordeImporteVerdeLoguiAgro {
    border: 1px solid #48662a !important;
}

.importeVerdeLoguiAgro {
    background-color: rgba(102, 139, 54, 0.05) !important;
}
/* ==========================================================================
botones responsivos al lado de la barra de búsqueda.
========================================================================== */
/*@media (max-width: 767px) {
    .moverbotonencelular {
        float: right;
        margin-top: 10px;
        margin-bottom: -10px;
    }
}*/


/* ==========================================================================
maximo de alto para la tabla que esta al lado de el grafico de lluvias.
========================================================================== */
.maximotabla {
    max-height: 385px !important;
    overflow-y: scroll !important;
}


/* ==========================================================================
============================== MAYUSCULAS ===================================
========================================================================== */
.mayusculas {
    text-transform: uppercase
}

.no-mayusculas {
    text-transform: none
}
/*Barra de busqueda*/
.row div #buscar {
    text-transform: uppercase
}


/* ==========================================================================
                 Scroll personalizado sólo para Chorme
========================================================================== */
.scroll-bar-personalizado {
    scrollbar-width: thin;
}
        /*Tamaño del scroll*/
    .scroll-bar-personalizado::-webkit-scrollbar {
        width: 8px;
        height: 8px;
    }

    /* Ponemos un color de fondo y redondeamos las esquinas del thumb */
    .scroll-bar-personalizado::-webkit-scrollbar-thumb {
        background: rgba(230, 0, 17, .5);
        border-radius: 4px;
    }

        /* Cambiamos el fondo y agregamos una sombra cuando esté en hover */
        .scroll-bar-personalizado::-webkit-scrollbar-thumb:hover {
            background: rgba(230, 0, 17, .8);
            box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
        }

        /* Cambiamos el fondo cuando esté en active */
        .scroll-bar-personalizado::-webkit-scrollbar-thumb:active {
            background-color: rgba(230, 0, 17, .8);
        }
    /* Ponemos un color de fondo y redondeamos las esquinas del track */
    .scroll-bar-personalizado::-webkit-scrollbar-track {
        background: #ccc;
        border-radius: 4px;
    }

        /* Cambiamos el fondo cuando esté en active o hover */
        .scroll-bar-personalizado::-webkit-scrollbar-track:hover,
        .scroll-bar-personalizado::-webkit-scrollbar-track:active {
            background: #d4d4d4;
        }


/* ==========================================================================
                              Tarjetas Home
========================================================================== */
.tarjeta {
    border-radius: var(--bordes-redondeados) !important;
    /*border: none !important;*/
    position: relative;
    box-shadow: 0 0px 6px 2px rgba(0,0,0, .4);
    transition: all .2s ease-in-out;
}

    .tarjeta:hover,
    .tarjeta:focus {
        box-shadow: 0 3px 6px 3px rgba(0,0,0, .3);
    }

.tarjeta-body {
    padding: .3rem !important
}

.nombre-empresa-manage {
    font-size: 1.8em;
    height: 60px;
    display: block;
    display: -webkit-box;
    max-width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ==========================================================================
                              Colores LoguiAgro
========================================================================== */

.gris-navbar {
    background-color: var(--gris);
}

.rojo-navbar {
    background-color: var(--rojo);
}

.verde-navbar {
    background-color: #668b36;
}

.gris2-navbar {
    background-color: var(--gris2);
}

.rojo2-navbar {
    background-color: var(--rojo2);
}

/*.thead-gris th {
    background-color: var(--gris2) !important;
}*/

.bg-gris {
    background-color: var(--gris3) !important;
    color: #6f6f6f;
    font-weight: 600;
}

.bg-gris-footer {
    background-color: #DBDBDB !important;
    border: 1px solid #c4c4c4 !important;
}

.centuryfont ~ hr {
    margin-top: 1rem !important;
    margin-bottom: 1.2rem !important;
    border: 1px !important;
    border-top: 2px solid #48662a !important;
    opacity: 0.8 !important;
}

.indicadores {
    font-size: .85rem;
}

.hidden {
    display: none !important;
    visibility: hidden !important;
}

.nav-link-sin-padding {
    padding-bottom: .3rem !important;
    padding-top: .3rem !important;
}

    .nav-link-sin-padding a {
        padding: .3rem 1rem !important;
    }

.nav-link-sin-padding-titulo {
    padding: .65rem 1rem !important;
}

.item-menu-usuario {
    font-size: 1rem !important
}

.texto-rojo {
    color: var(--rojo) !important;
}

.texto-verde {
    color: #48662a !important;
}

/*Alto del scroll en sidebar-----------------------------------------------------*/
.slim-scroll {
    max-height: 100%;
    overflow-y: auto;
}

/************************************************************************************************/
/***************************************MENU DE NAVEGACIÓN***************************************/
/************************************************************************************************/
/*Esconder ellipse sidebar cuando label pantalla tiene un ancho maximo defs 350px ya que cuando no se oculta, el espacio que ocupa hace que se vean mal las tablas*/
.sidebar {
    width: 15rem;
    min-height: 100vh;
    max-height: 100vh;
    position: relative;   
}

    .sidebar.toggled {
        width: 6.5rem;
    }

    .sidebar .nav-item {
        position: relative;
    }

        .sidebar .nav-item:last-child {
            margin-bottom: 1rem;
        }

    .sidebar .slimScrollDiv .nav-item:last-child {
        margin-bottom: 2rem
    }

    .sidebar .nav-item.active .nav-link {
        font-weight: 700;
    }


    .sidebar .nav-item .collapse {
        position: relative;
        left: 0;
        z-index: 1;
        top: 0;
        -webkit-animation: none;
        animation: none;
    }

    .sidebar .nav-item .collapsing {
        display: block;
        transition: height 0.15s ease;
    }

    .sidebar .nav-item .collapse,
    .sidebar .nav-item .collapsing {
        margin: 0 1rem;
    }

    .sidebar .nav-item .nav-link {
        display: block;
        width: 100%;
        text-align: left;
        padding: 1rem;
        width: 14rem;
    }

        .sidebar .nav-item .nav-link i {
            font-size: 0.85rem;
            margin-right: 0.25rem;
        }

        .sidebar .nav-item .nav-link span {
            font-size: 0.9rem;
            display: inline;
            transition: all .05s ease-out;
        }

        .sidebar .nav-item .nav-link[data-toggle="collapse"]::after {
            width: 1rem;
            text-align: center;
            float: right;
            vertical-align: 0;
            border: 0;
            font-weight: 900;
            content: '\f107';
            font-family: 'Font Awesome 5 Pro';
        }

        .sidebar .nav-item .nav-link[data-toggle="collapse"].collapsed::after {
            content: '\f105';
        }

    .sidebar .sidebar-brand .sidebar-brand-icon i {
        font-size: 2rem;
    }

    .sidebar .sidebar-brand .sidebar-brand-text {
        display: inline;
    }

    .sidebar .sidebar-heading {
        text-align: left;
    }

    .sidebar.toggled {
        overflow: visible;
    }

        .sidebar.toggled .nav-item .nav-link {
            text-align: center;
            padding: 0.75rem 1rem;
            width: 6.5rem;
        }

            .sidebar.toggled .nav-item .nav-link span {
                font-size: 0.65rem;
                display: block;
                transition: all .20s ease;
            }

            .sidebar.toggled .nav-item .nav-link i {
                margin-right: 0;
            }

            .sidebar.toggled .nav-item .nav-link[data-toggle="collapse"]::after {
                display: none;
            }

        .sidebar.toggled .sidebar-brand .sidebar-brand-icon i {
            font-size: 2rem;
        }

        .sidebar.toggled .sidebar-brand .sidebar-brand-text {
            display: none;
        }

        .sidebar.toggled .sidebar-heading {
            text-align: center;
        }

    .sidebar .nav-item .collapse .collapse-inner,
    .sidebar .nav-item .collapsing .collapse-inner {
        padding: .5rem 0;
        min-width: 10rem;
        font-size: 0.85rem;
        margin: 0 0 1rem 0;
    }

        .sidebar .nav-item .collapse .collapse-inner .collapse-header,
        .sidebar .nav-item .collapsing .collapse-inner .collapse-header {
            margin: 0;
            white-space: nowrap;
            padding: .5rem 1.5rem;
            text-transform: uppercase;
            font-weight: 800;
            font-size: 0.65rem;
            color: #b7b9cc;
        }

        .sidebar .nav-item .collapse .collapse-inner .collapse-item,
        .sidebar .nav-item .collapsing .collapse-inner .collapse-item {
            padding: 0.5rem 1rem;
            margin: 0 0.5rem;
            display: block;
            color: #f8f9fc;
            text-decoration: none;
            border-radius: 0.35rem;
            white-space: nowrap;
        }

            .sidebar .nav-item .collapse .collapse-inner .collapse-item:hover,
            .sidebar .nav-item .collapsing .collapse-inner .collapse-item:hover {
                background-color: #272a2c;
            }

            .sidebar .nav-item .collapse .collapse-inner .collapse-item:active,
            .sidebar .nav-item .collapsing .collapse-inner .collapse-item:active {
                background-color: #272a2c;
            }

            .sidebar .nav-item .collapse .collapse-inner .collapse-item.active,
            .sidebar .nav-item .collapsing .collapse-inner .collapse-item.active {
                color: #f8f9fc;
                font-weight: 700;
            }

    .sidebar #sidebarToggle {
        width: 2.5rem;
        height: 2.5rem;
        text-align: center;
        margin-bottom: 1rem;
        position: absolute;
        top: 15px;
        left: 107%;
        z-index: 1000;
        cursor: pointer;
    }

        .sidebar #sidebarToggle::after {
            font-weight: 900;
            content: '\f104';
            font-family: 'Font Awesome 5 Pro';
        }

        .sidebar #sidebarToggle:hover {
            text-decoration: none;
        }

        .sidebar #sidebarToggle:focus {
            outline: none;
        }

    .sidebar.toggled #sidebarToggle::after {
        content: '\f105';
        font-family: 'Font Awesome 5 Pro';
    }

    .sidebar .sidebar-brand {
        height: 4.375rem;
        text-decoration: none;
        font-size: 1rem;
        font-weight: 800;
        padding: 1.5rem 1rem;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 0.05rem;
        z-index: 1;
    }

        .sidebar .sidebar-brand .sidebar-brand-icon i {
            font-size: 2rem;
        }

        .sidebar .sidebar-brand .sidebar-brand-text {
            display: none;
        }

    .sidebar hr.sidebar-divider {
        margin: 0 1rem 1rem;
    }

    .sidebar .sidebar-heading {
        text-align: center;
        padding: 0 1rem;
        font-weight: 800;
        font-size: 0.65rem;
    }

@media (max-width: 768px) {
}

@media (min-width: 768px) {
    .sidebar.toggled .nombreEmpresa-flotante {
        left: 155%;
    }

    .sidebar .nombreEmpresa-flotante {
        left: 130%;
    }
}


@media (max-width: 576px) {
    .sidebar {
        visibility: hidden
    }

        .sidebar.toggled {
            width: 16rem !important;
            height: auto !important;
            left: -16rem
        }

    .sidebar {
        transition: all .25s cubic-bezier(0.4, 0, 1, 1);
        left: 0
    }


        .sidebar button {
            background-color: #272a2cb8 !important;
        }


        .sidebar .sidebar-brand {
            z-index: 3 !important;
        }

    .nombre-empresa {
        font-size: .9rem;
        visibility: hidden
    }

    .empresa {
        display: none
    }

    .sidebar.toggled .nombreEmpresa-flotante {
        left: calc(16rem + 2.5rem + 25px) !important;
        top: 15px;
        z-index: 2;
        visibility: visible;
    }

    .sidebar .nombreEmpresa-flotante {
        left: calc(2.5rem + 20px) !important;
        top: 15px;
        z-index: 2;
        visibility: hidden
    }

    /*=========================================*/

    nav .logologuimenu {
        width: 40%;
        filter: drop-shadow(1px 1px 2px #000)
    }
}



@media (max-width: 370px) {
    .nombre-empresa {
        font-size: .8rem !important;
    }
}

/*===========================================================================================*/
.nombreEmpresa-flotante {
    position: absolute;
    top: 15px;
    z-index: 1000;
    cursor: pointer;
    width: 350px;
    max-width: 50vw;
    height: 2.5rem;
    display: flex;
    align-items: center;
}

    .nombreEmpresa-flotante .nombre-empresa {
        font-size: 1rem;
        color: rgba(255,255,255, .8) !important;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis
    }

        .nombreEmpresa-flotante .nombre-empresa:hover {
            color: rgba(255,255,255, .9) !important;
            text-decoration: none;
        }

.sidebar.toggled .nombreEmpresa-flotante {
    left: 155%;
}

.sidebar .nombreEmpresa-flotante {
    left: 130%;
}

/*Clase que resalta el item seleccionado en el sidebar-----------------------------*/
.activo {
    font-weight: 700;
    background-color: var(--gris);
    width: 100%;
}

    .activo::before {
        content: '\f111';
        font-family: 'Font Awesome 5 Pro';
        margin-right: 5px;
        /*margin-bottom: 5px;*/
        font-size: .3rem;
        vertical-align: middle
    }



/*Restablecer color por defecto del form-control------------------------------------*/
.form-control:focus {
    color: #48662a !important;
    background-color: #fff !important;
    border-color: #668b36 !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0.2rem rgba(102,139,54, 0.25) !important;
}

/*Fondo medio oscuro cuando se hace hover en el dropdown del usuario----------------*/
.nav-link-usuario {
    transition: all .18s ease-in-out;
}

    .nav-link-usuario:hover {
        background-color: rgba(72, 102, 42) !important;
    }


.alerta p {
    font-size: 1rem !important
}

.btn-crear-nuevo-flotante {
    position: absolute;
    right: 1em;
}


/* ==========================================================================
Clases para los SWEET ALERT
========================================================================== */
/* Botones */
.botonVerdeSweetAlert {
    background-color: #378A60;
    border-color: #0B7541;
}

    .botonVerdeSweetAlert:active {
        background-color: #378A60 !important;
        border-color: #0B7541 !important;
    }

    .botonVerdeSweetAlert:hover {
        background-color: #378A60 !important;
        border-color: #0B7541 !important;
        /*box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(55 138 96 / 29%);*/
    }

  /*  .botonVerdeSweetAlert:focus {
        box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(55 138 96 / 29%);
    }*/

.swal-footer {
    background-color: rgb(245, 248, 250);
    margin-top: 32px;
    border-top: 1px solid #E9EEF1;
    overflow: hidden;
}


.botonRojoSweetAlert {
    background-color: #e36b6b;
    border-color: red;
    color: white;
}

    .botonRojoSweetAlert:active {
        background-color: #e36b6b !important;
        border-color: red !important;
    }

    .botonRojoSweetAlert:hover {
        background-color: #e36b6b !important;
        border-color: red !important;
        /*box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(55 138 96 / 29%);*/
    }

/*.botonRojoSweetAlert:focus {
    box-shadow: 0 0 0 1px #fff, 0 0 0 3px rgb(55 138 96 / 29%);
}*/

.swal-footer {
    background-color: rgb(245, 248, 250);
    margin-top: 32px;
    border-top: 1px solid #E9EEF1;
    overflow: hidden;
}

/* ==========================================================================
Ponemos en negro un tachado para los comprobantes anulados.
========================================================================== */
.tachadoNegro {
    text-decoration: line-through;
    color: #000;
}

.sinTachado {
    text-decoration: none;
}


/* ==========================================================================
Clase para modificar el color de fondo de los Registros de las Tablas.
========================================================================== */
.fondoRojoTabla {
    background-color: rgba(255, 0, 0, 0.15) !important;
}

    .fondoRojoTabla:first-child {
        box-shadow: inset 3px 0 #ff0000;
    }

.fondoNaranjaTabla {
    background-color: rgba(183, 78, 0, 0.15) !important;
}

    .fondoNaranjaTabla:first-child {
        box-shadow: inset 3px 0 #ff851b;
    }

.fondoCelesteTabla {
    background-color: rgba(0, 123, 255, 0.15) !important; /* Un tono celeste con opacidad */
}

    .fondoCelesteTabla:first-child {
        box-shadow: inset 3px 0 #007bff; /* Color celeste sólido para el borde */
    }


/* ==========================================================================
Estilo para Vista Consulta Movimiento Stock.
========================================================================== */
.BordeRojo {
    border: 2px solid #ff6e6c;
}

.labelRed {
    font-weight: bold !important;
    color: #c70c0c;
}

.text-red{
    color: red;
    font-weight: 500 !important;
    font-size: 13px;
}

.text-orange {
    color: #ca6f1e;
    font-weight: 500;
    font-size: 13px;
}

.text-blue {
    color: #1e90ff; /* Azul vibrante */
    font-weight: 700;
    font-size: 13px;
}

.text-negro {
    color: rgba(0, 0, 0); /* Azul vibrante */
    font-weight: 500;
    font-size: 13px;
}

.mensajeError {
    color: #c70c0c;
    font-weight: bold;
}
/* ==========================================================================
Estilo para Vista Panel Home
========================================================================== */
.tarjeta {
    /* border-radius: 15px; */
    background-color: #fff;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, .10);
    margin-bottom: 2em;
    padding: .8em;
    border: 1px solid #ccc;
    border-top: 3px solid;
    border-radius: 5px;
}

.box {
    margin-top: 80px;
    position: relative;
    border-radius: 3px;
    /*background: #ffffff;*/
    border-top: 3px solid #d2d6de;
    /*margin-bottom: 20px;*/
    width: 100%;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}

.tarjeta h3 {
    /* font-style: oblique; */
    font-weight: 200;
}

.box.box-primary {
    border-top-color: #3c8dbc !important;
}

.box.box-info {
    border-top-color: #00c0ef !important;
}

.box.box-danger {
    border-top-color: #dd4b39 !important;
}

.box.box-warning {
    border-top-color: #f39c12 !important;
}

.box.box-success {
    border-top-color: #00a65a !important;
}

.box.box-default {
    border-top-color: #d2d6de !important;
}

.box-header {
    color: #444;
    display: block;
    padding: 10px;
    position: relative;
}

    .box-header.with-border {
        border-bottom: 1px solid #f4f4f4;
    }

    .box-header > .fa,
    .box-header > .glyphicon,
    .box-header > .ion,
    .box-header .box-title {
        display: inline-block;
        font-size: 18px;
        margin: 0;
        line-height: 1;
    }

    .box-header > .fa,
    .box-header > .glyphicon,
    .box-header > .ion {
        margin-right: 5px;
    }

    .box-header > .box-tools {
        position: absolute;
        right: 10px;
        top: 5px;
    }

.box-body {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 3px;
    border-bottom-left-radius: 3px;
    padding: 10px;
}

.no-padding {
    padding: 0 !important;
}

.ListadosTabla > tr th,
.ListadosTabla > tr td {
    padding-top: .5em !important;
    padding-bottom: .5em !important;
    font-size: 1em !important;
}

.ListadosTabla > tr th {
    text-transform: uppercase !important;
}

.accesos-directos div {
    margin-top: 10px;
    margin-bottom: 10px
}

.consulta-rapida div {
    margin-top: 5px;
    margin-bottom: 5px
}

.btn-app {
    height: auto;
    background-color: #fff !important;
    transition: all .15s ease-in;
    border-radius: .5em;
    margin: 0;
    position: relative
}
    .btn-app.consulta-rapida.link::after {
        font-size: 1.3rem;
    }

    .btn-app:hover {
        box-shadow: 0 1px 3px #55555575;
    }

    .btn-app.link:hover::after {
        opacity: 1
    }

    .btn-app.accesos-directos,
    .btn-app.consulta-rapida {
        width: 100%;
    }

        .btn-app.accesos-directos i {
            font-size: 3.8em !important;
            padding: 0.15em 0
        }

        .btn-app.accesos-directos:hover {
            color: #48662a;
        }

        .btn-app.consulta-rapida i {
            padding: 0.15em 0;
            display: inline-block;
            margin-right: 1rem;
            margin-left: 1rem;
        }

        .btn-app.consulta-rapida:hover {
            color: #48662a;
        }

    .btn-app.accesos-directos,
    .btn-app.consulta-rapida {
        font-size: 12px;
        font-weight: 700;
        height: 100%;
        border: 1px solid #d5dbdb;
    }

        .btn-app.accesos-directos:active,
        .btn-app.consulta-rapida:active {
            outline: none;
        }

    .btn-app.consulta-rapida {
        display: flex;
        justify-content: start;
        align-items: center;
        padding: .75rem .5rem
    }

    .btn-app.accesos-directos > p {
        width: 85%;
        margin-right: auto;
        margin-left: auto;
        margin-bottom: 0;
        white-space: break-spaces;
    }

    .btn-app.consulta-rapida > p {
        white-space: break-spaces;
        margin-bottom: 0;
        display: inline-block;
        text-align: start
    }

.box.box-primary {
    border-top-color: #3c8dbc;
}

.box.box-info {
    border-top-color: #00c0ef;
}

.box.box-danger {
    border-top-color: #dd4b39;
}

.box.box-warning {
    border-top-color: #f39c12;
}

.box.box-success {
    border-top-color: #00a65a;
}

.box.box-default {
    border-top-color: #d2d6de;
}

.grafico-lluvia-home {
    width: 100%;
    height: 400px;
}

/* Altura adaptable para el gráfico */
#grafico-lluvia-responsive {
    height: 240px;
}

@media (max-width: 768px) {
    #grafico-lluvia-responsive {
        height: 35vw; /* proporcional al ancho de pantalla */
        min-height: 150px;
    }
}

.box-widget {
    border: none;
    position: relative;
}

.widget-user .widget-user-header {
    padding: 20px;
    height: 120px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.widget-user .widget-user-username {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 25px;
    font-weight: 300;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}

.widget-user .widget-user-desc {
    margin-top: 0;
}

.widget-user .widget-user-image {
    position: absolute;
    top: 65px;
    left: 50%;
    margin-left: -45px;
}

    .widget-user .widget-user-image > img {
        width: 90px;
        height: auto;
        border: 3px solid #fff;
    }

.widget-user .box-footer {
    padding-top: 30px;
}

.widget-user-2 .widget-user-header {
    padding: 20px;
    border-top-right-radius: 3px;
    border-top-left-radius: 3px;
}

.widget-user-2 .widget-user-username {
    margin-top: 5px;
    margin-bottom: 5px;
    font-size: 25px;
    font-weight: 300;
}

.widget-user-2 .widget-user-desc {
    margin-top: 0;
}

.widget-user-2 .widget-user-username,
.widget-user-2 .widget-user-desc {
    margin-left: 75px;
}

.widget-user-2 .widget-user-image > img {
    width: 85px;
    height: auto;
    float: left;
}

.widget-user-image .img-circle {
    filter: drop-shadow(2px 2px 2px #131313);
}

.bg-red-gradient {
    background: #668b36 !important;
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #48662a), color-stop(1, #668b36)) !important;
    background: -ms-linear-gradient(bottom, #dd4b39, #e47365) !important;
    background: -moz-linear-gradient(center bottom, #dd4b39 0%, #e47365 100%) !important;
    background: -o-linear-gradient(#e47365, #dd4b39) !important;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e47365', endColorstr='#dd4b39', GradientType=0) !important;
    color: #fff;
}

.tarjeta-parrafo {
    cursor: pointer;
    font-size: 1.3em;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    padding: .5em;
    position: absolute;
    top: 0;
    right: 0;
}

    .tarjeta-parrafo a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color: #444 !important;
        background-color: #fff;
        padding: .2em;
        width: 6em;
        height: 100px;
        border-radius: 5px;
        opacity: .45;
        transition: all .2s ease-in-out;
    }

        .tarjeta-parrafo a:hover {
            opacity: 1;
            box-shadow: 0 0 5px #00000080;
        }

        .tarjeta-parrafo a:nth-child(1):hover {
            color: #48662a !important;
        }

        .tarjeta-parrafo a:nth-child(2):hover {
            color: #dd4b39 !important;
        }

        .tarjeta-parrafo a:nth-child(3):hover {
            color: #605ca8 !important;
        }

        .tarjeta-parrafo a i {
            font-size: 2em;
        }

        .tarjeta-parrafo a span {
            font-size: .8em
        }

.cabeceraAcercaDe {
    height: 100%;
    min-height: 90px;
    /*background-color: #b00b0b;*/
    background: -webkit-gradient(linear, left bottom, left top, color-stop(0, #48662a), color-stop(1, #668b36)) !important;
}

.modalImagen {
    margin-top: -5px;
}

.hr-verde {
    margin-top: 15px;
    margin-bottom: 15px;
    background-color: #668b36 !important;
    height: 100%;
    min-height: 1px;
}

#tablaContratos thead th {
    position: sticky;
    top: 0;
    background-color: #dee2e6; /* gris clarito de Bootstrap */
    z-index: 2;
}

.btn-agregarEmpleado-trabajo {
    border-color: var(--rojo);
    color: var(--rojo);
    background-color: white;
}
    .btn-agregarEmpleado-trabajo:hover {
        background-color: var(--rojo);
        border-color: white;
        color: white;
    }
.final-input-empleado{
    border-end-end-radius:0px;
}

.requerido{
    color: var(--rojo);
    font-weight: 600;
}

.posicionFija-hectareas {
    position: sticky;
    top: 0; /* Fijalo arriba */
    background: #fff; /* Fondo para que no se superponga con la tabla */
    z-index: 10; /* Que quede por encima */
}

/*// --------------------------------------------
// COLORES EN CABECERAS DE TABLAS
// --------------------------------------------*/
.cabeceraPrimerNivel {
    padding: 5px 10px;
    background-color: rgba(87, 87, 87, 0.12);
    border: 1px solid rgba(87, 87, 87, 0.10);
    font-size: 15px;
    font-weight: 700;
    color: black;
}

.cabeceraSegundoNivel {
    background-color: rgb(222, 222, 222);
}

.cabeceraTercerNivel {
    background-color: rgb(245, 245, 245);
}

.cabeceraCuartoNivel {
    background-color: rgb(250, 250, 250);
}

/* Oculta el checkbox real */
.switch-input {
    display: none;
}

/* Contenedor visual */
.switch {
    position: relative;
    display: inline-block;
    width: 42px;
    height: 22px;
    background-color: #ccc;
    border-radius: 22px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

    /* Círculo interno */
    .switch::after {
        content: "";
        position: absolute;
        width: 18px;
        height: 18px;
        left: 2px;
        top: 2px;
        background-color: white;
        border-radius: 50%;
        transition: transform 0.3s ease;
    }

/* Cuando está activo */
.switch-input:checked + .switch {
    background-color: #2E9E2E;
}

    .switch-input:checked + .switch::after {
        transform: translateX(20px);
    }

.card-lote {
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
    min-height: 230px;
    border-radius: 10px;
    z-index: 1;
    border: 2px solid #668b36;
    /*background: rgba(102,139,54);
    color: white;*/
}

    /* capa roja */
    .card-lote::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: #48662a;
        border: 1px solid #48662a;
        transform: scaleY(0);
        transform-origin: bottom;
        transition: transform 0.4s ease;
        z-index: 0;
    }

    /* animación hover */
    .card-lote:hover::before {
        transform: scaleY(1);
    }

    /* contenido por encima */
    .card-lote .card-body {
        position: relative;
        z-index: 2;
        transition: color 0.3s ease;
    }

    /* texto en blanco cuando está hover */
    .card-lote:hover {
        color: #fff;
        cursor:pointer;
    }