/*-----------------------------Cestructura-----------------------------*/
.gridContainer {
    height: 100%;
    display: grid;
    grid-template-areas:
        "atras   nombre    configuracion"
        "contenido contenido conf "
        "contenido contenido categorias"
        "contenido   contenido   enviar"
        "hojas   hojas   enviar";



    grid-template-columns: 350px auto 350px;
    grid-template-rows:    max-content 1fr 2fr max-content max-content;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    background-color: #ddd;
}



body{
    font-family:"Segoe UI";
    margin:0;
}
.conf-extra{

    grid-area: conf;
    background-color: #ddd;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    margin-bottom:10px;
}
.divExcel {
    grid-area: contenido;
}
#divExcel{
    background-color: white;
}
#traducirCategorias{
    grid-area:categorias;
    overflow-y:auto;
    padding-left:10px;
    background-color: #ddd;
    margin-bottom:10px;
    position:relative

}
#traducirCategorias div{
    width: calc(100% - 10px);
    padding:5px;
}
#traducirCategorias div.titulocategorias{

    text-align: center;
    position:sticky;
    top:0;
    background-color:#bbb;

}

#traducirCategorias div span{
    display:inline-block;
    width:50%;
    font-size:0.9em;
}
#traducirCategorias div input{
    width:40%;
    display:inline-block;
    font-size:0.9em;
}

#traducirCategorias div.par{

}
#traducirCategorias div.impar{
    background-color: rgba(255,255,255,0.25);
}
.div-botones {
    grid-area: atras;
    position: relative;
    background-color:#f54242;
}
.boton-ok{
    grid-area: ok;

}
.div-nombre{
    grid-area: nombre;

}
.div-configuracion {
    grid-area: configuracion;
    display: flex;
    justify-content: center;
    align-items: center;
    color:white;
    background-color:#f54242;
}

.div-grid-hojas {
    grid-area: hojas;
    background-color: #ddd;
}




.div-row-nombre{
    min-height:70px;
    grid-area: nombre;
    text-align:center;
    background-color:#f54242;
    color:white;
}

/*--------------------------------------------------------------------------------*/

/*--------------------------CConfiguracion-----------------------------------------*/

label {
    font-weight: bold;
    display: inline-block;
}

.label-conf{
    text-align: center;
}





.conf-defecto .div-input-conf{
    width: 100%;
    height: 60%;
    display: flex;
    justify-content: center;
}
.div-input-conf select{
    width: max-content;
    background-color: black;
    color:white;
}

.nuevaConf .div-input-conf{
    width: 100%;
    height: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

}



.boton-guardar-configuracion{
    border-radius:10px;
    font-size: 1em;
    background-color:black;
    cursor:pointer;
    color:white;
    font-size:15px;
    font-weight:bold;
    border:0;
    padding:10px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ded17c;
}

.boton-guardar-configuracion:hover{
    border:0;
    box-shadow:inset 0px 0px 1px 1px #000;
    background-color:#a5a5a5;
}





/*-----------------------------------------------------------------------------*/




/*------------------------Ccontrol hojas----------------------------------------*/

.div-grid-hojas {
    overflow-y: auto;
    padding-bottom:20px;
}


.botonCambiarHoja{

    width: max-content;
    background-color: #eee !important;
    border-top: none !important;
    border-bottom: 3px solid #bbb !important;
    border-right: 2px solid #ddd !important;
    border-left: none;
    font-weight: bold;
    color: green;
    padding:5px 10px 3px 15px;
}
.controlHojas *{
    background-color: rgb(199, 199, 199);

}

.controlHojas{
    display:inline-block;
}
.controlHojas *:hover{
    background-color: rgb(180, 179, 179) !important;
}

.hojaActual{
    background-color: #666;
}

.botonCambiarHoja{
    width: max-content;
    background-color: #f6f6f6;

}
.controlHojaActual .botonCambiarHoja{
    border-bottom-color: green !important;
    background-color: white !important;
}

.botonBorrarHoja{
    width: max-content;
    height:15px;
    border-right: 1px solid gray !important;
    border-left: 1px solid gray !important;
    background-color: #f6f6f6;
    vertical-align: middle;
    margin-top: -1px;
    margin-left: 10px;

}

.botonDeshacerEliminaHoja{
    border-radius:10px;
    font-size: 1em;
    width: 100%;
    height: 100%;
    background-color:black;
    cursor:pointer;
    color:white;
    font-size:15px;
    font-weight:bold;
    padding:10px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ded17c;
}
.botonDeshacerEliminaHoja:hover{
    border:0;
    box-shadow:inset 0px 0px 1px 1px #000;
    background-color:#a5a5a5;
}


/*-------------------------------------------------------------------------------*/

/*------------------------------------CExcel--------------------------------------*/

.divExcel p{
    font-size:0.9em;
}
.divExcel{
    overflow-x: auto;

}


.cabezera{
    border: 1px solid #999;
    border-top:none;
    line-height:18px;
    border-left:none;
    padding: 5px;
    background-color: #ddd;
}


select{
    width: 100%;
}
.div-boton-extra p{
    text-align:left;
    font-size:0.8em;
    margin-top:10px;
    margin-left:15px;
}

p{
    text-align: center;
    margin: 0;

    font-size: 1em;
}


.datos{
    border: 1px solid gray;
    padding: 15px;
    white-space: nowrap;
    overflow: hidden;

}


.noDato{
    background-color: antiquewhite;
    text-decoration: line-through;
}






.div-botones-radius{
    flex-direction: column;
    align-items: end;
    justify-content: space-between;
}

.indCol{
    text-align: center;
}




.faded{
    opacity: 0.3;
}

.eliminada{
    display: none;
}

.ocultar{
    display: none !important;
}

.modificada{
    color: red

}

#extraConfContainer p:not(:only-child){
    display:none;
}

/*-------------------------------------------------------------------------------*/



/*------------------------------CBoton atrás---------------------------------------*/



#boton-aniadir-dato-extra{
    font-size: 1em;
    background-color:black;
    cursor:pointer;
    border-radius:10px;
    color:white;
    font-size:15px;
    font-weight:bold;
    padding:8px 20px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ded17c;
    border:0;
}

#boton-aniadir-dato-extra:hover{
    border:0;
    box-shadow:inset 0px 0px 1px 1px #000;
    background-color:#a5a5a5;
}

.atras{
    margin: 0;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    margin:auto;
    text-align:center;
    left:20px;
}

.atras button {
    border-radius:10px;
    font-size: 1em;
    width: 100%;
    height: 100%;
    background-color:black;
    cursor:pointer;
    color:white;
    font-size:15px;
    font-weight:bold;
    border:0;
    padding:10px 24px;
    text-decoration:none;
    text-shadow:0px 1px 0px #ded17c;
}





.atras button:hover{
    border:0;
    box-shadow:inset 0px 0px 1px 1px #000;
    background-color:#a5a5a5;
}





/*--------------------------------------------------------------------------------*/


/*------------------------CTituloExcel--------------------------------------------*/

h1{
    padding-left: 5px;
    font-size:1.5em;
}

/*--------------------------------------------------------------------------------*/

/*----------------------CBoton convertir-------------------------------------------*/

.boton-ok{
    grid-area:enviar;
    background-color: #ddd;
    padding:10px;

    text-align:center;

}

#boton-convertir{
    border-radius:10px;
    background-color:black;
    cursor:pointer;
    color:white;
    font-size:15px;
    font-weight:bold;
    border:0;
    padding:10px 24px;
    text-decoration:none;
}

#boton-convertir:hover{
    border:0;
    box-shadow:inset 0px 0px 1px 1px #000;
    background-color:#a5a5a5;
}


/*--------------------------------------------------------------------------------*/









/*--------------------------COcultar----------------------------------------------*/

.convertir-excel-ocultar {
    display: none;
}

.ocultar-formulario {
    display: none !important;
}


.descargando-oculto{
    display: none !important;
}
/*--------------------------------------------------------------------------------*/













/*----------------------CAnimaciones----------------------------------------------*/
.preloader{
    width: 70px;
    height: 70px;
    border: 10px solid #eee;
    border-top: 10PX solid #666;
    border-radius: 50%;
    animation-name: girar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    margin: auto;
}



@keyframes girar{
    from{
        transform: rotate(0deg);
    }
    to{
        transform: rotate(360deg);
    }
}

#div-descargando{
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(128, 128, 128, 0.562);
}



.descargando{
    width: 70px;
    height: 70px;
    border: 10px solid #eee;
    border-top: 10PX solid rgb(40, 148, 236);
    border-radius: 50%;
    animation-name: girar;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;

}
/*--------------------------------------------------------------------------------*/











body{
    height: 100vh;
}


.input-datos-extra, .select-datos-extra{
    text-align: center;
}
.input-datos-extra{
    grid-area:valor;
}
.select-datos-extra{

    grid-area:select;
}
.desplegable-datos-extra{
    display: grid;
    grid-template-areas:
        "select boton"
        "valor boton";
    grid-template-columns: auto 25px;
    grid-template-rows:    max-content max-content;
    grid-column-gap: 0px;
    grid-row-gap: 0px;
    margin-left: 10px;
    margin-bottom: 10px;
}
.configuraciones-extras{
    display: flex;
    background-color: #ddd;
    margin-bottom: 100px;
}
h4{
    font-size: 1.2em;
    margin-bottom: 0.3em;
}
.alerta{
    color: rgb(206, 20, 20);
}
#boton-aniadir-dato-extra{
    margin-left: 1em;
}


#boton-borrar-conf{
    display:none;
    background-color: #f90;  
    font-size:0.9em;
    border-left:none;
    
}


.btnConf{
    border:1px solid #767676;
    border-radius:1px;
}
.div-boton-extra{
    position:sticky;
    top:0;
    padding:10px;
    margin-bottom: 1em;
    text-align:center;
    background-color: #ddd;
}