@charset "utf-8";
/*El contenido del CSS esta por defecto para dispositivos largos de más de 1399px*/
.Tabla{
    clear:both;
    display:table;
    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI", Roboto,"Helvetica Neue",Arial;
    color: #495057;
}
.Celda{
    display: table-cell;
    border: solid 1px #e9ecef;
    vertical-align: middle;
    box-sizing: border-box;
}
.CeldaSinBorde{
    display:table-cell;
    border: none !important;
    vertical-align:middle;
    box-sizing: border-box; /*Obliga al sistema a calcular en base a las medidas dadas*/
}
.CeldaA{
    display:table-cell;
    border: solid;
    border-width: thin;
    cursor:pointer;
    vertical-align:middle;
    text-decoration:none;
    user-select: none;
    border: solid 1px #e9ecef;
}
.CeldaA:hover{
    background-color:#000 !important;
    color:#FFF;

}
.CeldaA:hover *{
    background-color:#000;
    color:#FFF;
}
.CeldaA:active{
    background-color:#2201A7;
    color:#FFF;
    font-size:larger;
}
.CeldaA:active *{
    background-color:#2201A7;
    color:#FFF;
}
.Fila{
    display:table-row;
}
.Cabecera{
    display:table-row;
    font-weight:bold;
    background-color: #e3e3e3;
}
.Fila .Celda{
    background-color: transparent;
}
.Cabecera .Celda{
    padding:2px;
    color: #333;
    font-size: 0.85rem;
    padding: 5px;
    border: 1px solid #dee2e6;
    position: relative;
    border-bottom: solid #4b4343 2px;

}
.Cabecera .Celda:not(:last-child):after{
    content: "";
    position: absolute;
    border-right: solid #a7a7a7 thin;
    right: -1px;
    top: 4px;
    bottom: 4px;

}
.Cabecera .Celda:first-child{
    border-top-left-radius: 5px;
}
.Cabecera .Celda:last-child{
    border-top-right-radius: 5px;
}
.Cabecera th{
    padding:2px;
    background-color: #F0F0F0;
}
.Cabecera th:first-child{
    border-top-left-radius: 5px;
}
.Cabecera th:last-child{
    border-top-right-radius: 5px;
}
/* Nuevos estilos de tablas*/

.contenedorTablas{
    overflow-y: scroll;
    position: relative;
    font-family: system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI", Roboto,"Helvetica Neue",Arial;

    /* Las siguientes dos propiedades solo funcionan en Firefox */
    /**/
}
@-moz-document url-prefix() {
    .contenedorTablas{
        scrollbar-color: rgb(149,149,149) #ccc;
        scrollbar-width: thin;
    }
}

/*  */
.contenedorTablas::-webkit-scrollbar{
    /* No funciona en Firefox */
    width: 9px;
}
.contenedorTablas::-webkit-scrollbar-thumb{
    /* No funciona en Firefox */
    border-radius: 5px;
    background-color: #cccccc;
    border: 2px solid rgba(0,0,0,0);
    background-clip: padding-box;
}
.contenedorTablas::-webkit-scrollbar-thumb:hover{
    /* No funciona en Firefox */
    border: 1px solid rgba(0,0,0,0);
    background-color: rgb(149, 149, 149);
}
.contenedorTablas::-webkit-scrollbar-thumb:active{
    /* No funciona en Firefox */
    border: 1px solid rgba(0,0,0,0);
    background-color: rgb(102, 102, 102);
}
.inputTablaInfo{
    box-sizing: border-box;
    width: 100%;
    font: inherit;
    border:none;
    background: none;
    text-align: inherit;
    cursor: inherit;
    color: inherit;
    letter-spacing: inherit;
}
.inputTablaInfo:focus-visible{
    outline: none !important;
}
.filaElementoActiva .inputTablaInfo:not([readonly]):focus {
    background-color: white;
    color: black;
}

.colapsarBordes{
    border-collapse: collapse;
}
/*Tabla con cabecera negra y filas blancas y grises*/
.Cabecerat1{
    background-color: black;
    color: white;
    text-align: left;
    font-size: 1.1em;
}
.Cabecerat1 div{
    padding: .6em;
    border-bottom: solid #999999 thick;
}
.Cabecerat1 .Cedla:first-child, .Cabecerat1 .CeldaSinBorde:first-child{
    border-top-left-radius: 5px;
}
.Cabecerat1 .Cedla:last-child, .Cabecerat1 .CeldaSinBorde:last-child{
    border-top-right-radius: 5px;
}

.Filat1:nth-child(even){
    background-color: #ddd;
    border: solid #ddd thin;
}
.Filat1:nth-child(odd){
    background-color: white;
    border: solid white thin;
}
.Filat1 div{
    padding: .7em;
}
.CeldaComoBoton{
    font-size: 1em;
    line-height: 1em;
}
.CeldaComoBoton:hover{
    cursor: pointer;
    color: white;
    font-size: 110%;
    background-color: black;
    padding: 0;
}
.CeldaComoBoton:active{
    color: white;
    cursor: pointer;
    font-size: 1em;
    background-color: black;
    border: solid #3366ff thin;
}
.borde-derecho-gris {
    border-right: solid thin #e9dbdb;
}
/*Tabla con cabecera negra y filas verdes y grises*/
.Cabecerat2{
    background-color: rgba(100, 100, 100, 0.8);
    color: black;
    text-align: left;
    /*font-size: 1.25em;*/
}
.Cabecerat2 div{
    padding: .4em;
    border-bottom: solid #ddd thick;
}
.Filat2:nth-child(even){
    background-color: #d6e6ef;
    border: solid thin #d6e6ef;
}
.Filat2:nth-child(odd){
    background-color: rgb(235, 255, 205);
    border: solid white thin;
}
.Tabla:not(.noRellenar) .Fila:nth-child(even):not(.filaElemento:hover) {
    background-color: #efefef;
}
.Filat2 div{
    padding: 2px 5px;
}

.filaConFoco{
    border-top: solid black thick;
    border-bottom: solid black thick;
}
.filaElementoActiva:not(.simularDisabled *) *{ /* selecciona todo lo que este dentro de filaElementoActiva a menos que tenga un acenstro con simularDisabled */
    color: #FFF !important;
    background-color: #00f !important;
    overflow: hidden;
}
.filaelementoActiva .Celda:first-child{
    border-left: solid 2px #FFF;
}
.filaElementoActiva .CeldaA:hover, .filaElementoActiva .CeldaComoBoton:hover{
    background-color: #000 !important;
}
.CeldaA:hover *, .CeldaComoBoton:hover *{
    background-color: #000 !important;
}
.filaElemento:hover {
    background-color: #E0F2F1;
    color: #004D40;

}
.filaElemento:hover:not(.filaElementoActiva) .amarillo{
    color: black !important;
}
.filaElementoActiva-2>div{
    border-bottom: solid 3px black;
    border-top: solid 3px black;

}
.filaElementoActiva-2>div:nth-child(1){
    border-left: solid 3px black;
}
.filaElementoActiva-2>div:last-child{
    border-right: solid 3px black;
}


.filaElemento-2:hover{
    background-color: rgb(202, 202, 149);
}

/*DISEÑOS MAS MODERNOS*/
.modSeparador{
    display:table-cell;
    height:5px;
    background-color:#FFF;
}
.modCeldaFilled{

    height:40px;
    display:table-cell;
    border-style:solid;
    border-width:2px;
    background-color:#999;
    color:#000;
    vertical-align:middle;
    font-size:25px;


}
.modCeldaEmpty{
    /*width:400px;*/
    height:40px;
    display:table-cell;
    border-style:solid;
    border-width:2px;
    vertical-align:middle;



}
.inputMod{
    height:40px;
    vertical-align:middle;
    width: 400px;
    box-sizing: border-box;
    font-size: 1.1em;
}
[class^="boton"]{
    /*Para que no se pueda seleccionar el texto dentro del boton*/
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
[class^="boton"]:not([class^="boton-celular"]):not(.botonArchivo):not(.boton-venta-pendiente), .ventanaBoton{
    /*    display: inline-block;
        box-sizing: border-box;
        font-size:1.15em;
        padding: 10px 20px;
        cursor: pointer;
        border: solid 2px #575656;
        border-radius: 5px;*/
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 22px;

    /* Tipografía y Estética */
    font-family: inherit;
    font-size: 0.95rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;

    /* Animación fluida */
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease, box-shadow 0.2s ease;

    /* Reseteo de estilos nativos */
    /*border: 1px solid transparent;*/
    outline: none;
    user-select: none;
}


[class^="boton"]:disabled{
    cursor: default;
}
[class^="botonIcono"]{
    display: inline-block;
    border: solid 2px black;
    border-radius: 50%;
    background-color: #2201A7;
    padding: 3px 4px;
    color: white;
}
.botonVerde:not(:disabled){
    color: rgba(247, 249, 246, 1);
    background-color: green;
}
.botonPrincipal:not(:disabled), .ventanaBotonAzul:not(:disabled){
    /*    background-color:#2201A7;
        color:#FFF;*/
    background-color: #4285F4;
    color: #ffffff;
    box-shadow: 0 2px 4px rgba(66, 133, 244, 0.2);
}
.botonSecundario:not(:disabled), .ventanaBotonBlanco:not(:disabled){
    /*    background-color:#999;
        color:#FFF;
        border-color:#000;*/
    background-color: #f8f9fa;
    color: #495057;
    border-color: #dce1e6;
}
.botonEliminar:not(:disabled), .ventanaBotonRojo:not(:disabled){
    background-color:#F00;
    color: white;
}
.botonEliminar:hover:not(:disabled){
    /*font-size:1.25em;*/
    background-color:black;
    color: white;
}
.botonPrincipal:active:not(:disabled), .botonSecundario:active:not(:disabled), .botonVerde:active:not(:disabled){
    /*    background-color: rgba(181, 1, 46, 0.5);
        opacity: 0.7;*/
    transform: translateY(1px);

}
.botonPrincipal:hover:not(:disabled), .botonVerde:hover:not(:disabled){
    /*background-color:#C03;*/
    background-color: #3367D6;
    box-shadow: 0 4px 10px rgba(66, 133, 244, 0.3);
}
.botonSecundario:hover:not(:disabled){
    background-color: #f1f3f5;
    border-color: #adb5bd;
    color: #212529;
}

.botonPrincipal:focus:not(:disabled), .botonSecundario:focus:not(:disabled), .botonVerde:focus:not(:disabled){
    /*    background-color: rgba(181, 1, 46, 0.5);
        opacity: 0.7;*/
    /* Quitamos el borde azul feo del navegador */
    outline: none;

    /* Creamos un anillo exterior sutil */
    /* El primer valor (0 0 0 2px) es un espacio blanco de separación */
    /* El segundo valor (0 0 0 4px) es el color del anillo */
    box-shadow: 0 0 0 2px #FFF, 0 0 0 4px rgba(66, 133, 244, 0.4);

    /* Un pequeño levantamiento visual */
    transform: translateY(-1px);
}
.botonEliminar:active:not(:disabled){
    border-color: #F00;
    opacity: 0.7;
}
.selectColumna{
    background-color: #00f;
    color: white;
}
.imagenEnTabla {
    max-height: 40px;
    max-width: 125px;
}

/* Extra small devices (phones, 600px and down) */
/*@media only screen and (max-width: 600px) {}*/

/* Small devices (portrait tablets and large phones, 600px and up) */
/*@media only screen and (min-width: 600px) {}*/

/* Medium devices (landscape tablets, 768px and up) */
/*@media only screen and (min-width: 768px) {}*/

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (max-width: 1500px), only screen and (max-height: 800px) {
    .modCeldaFilled{
        height: 30px;
        font-size: 17px;
    }
    .inputMod{
        height:30px;
        width:300px;
    }
    .modCeldaEmpty{
        height:30px;
    }
    [class^="boton"]:not([class^="boton-celular"]){
        padding: 7.5px 15px;
    }
    [class^="botonIcono"]{
        padding: 2px 3px;
    }
    .Celda, .CeldaA, .CeldaSinBorde{
        font-size: 1rem;
    }
    .Cabecerat1{
        font-size: 1em;
    }
    .Cabecerat1 div{
        padding: .6em;
    }
    .Filat1 div{
        padding: .53em;
    }
    /*.CeldaComoBoton:hover{
        font-size: .87em;
    }*/
    .CeldaComoBoton:active{
        font-size: 13px;
    }
    .CeldaImagenEnTabla{
        width: 135px;
    }
    .imagenEnTabla{
        max-height: 30px;
        max-width: 94px;
    }
}
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1400px) {
}