@import url(../css/footer.css);     /* pie */

*{
    margin: 0;
    padding: 0px;
    box-sizing: border-box;
}

/* Body, representa el contenido principal del documento. solo hay un body en un documento*/
body {
    font-family: 'Pridi', serif;    /* define una lista o familia de fuente */
    background: #BDBDBD;            /* define valores individuales de fondo */
    background-size: cover;         /* especifica el tamaño de las imagenes de fondo. Container, escala imagen al mayor tamaño sin recortar ni estirarla y Cover, escala la imagen al mayor tamaño sin estirala */
    font-size: 14px;                /* espeficica la dimensión de la letra */

    /*habilitar para ver donde abarca en la pantalla*/
    /*padding: 10px 10px 10px 10px;*/
}

/***********/
/* DESKTOP */
/***********/
/*elemento div cfdi_menusup_container...header contenedor desktop*/
#prod_menusup_container{
    width: 100%;                 /*ancho de la cabezera*/
    height: 92px;                /*altura de la cabezera*/
    background-color: #f78181;   /*define el color de fondo de un elemento que puede ser valor de un color o palabra "transparent e". en este caso el color de fondo es para la cabezera*/
    background-image: linear-gradient(#f78181, #df0101);
    box-shadow: 0px 5px 5px #000;
    position: fixed;             /*especifica como un elemento es posicionado en el documento. en este casp fixed, es posicionado con relación al bloque contenedor inicial establecido por el viewport.*/ 
    font-size: 16px;             /*especifica la dimensión de la letra, en este caso el tamaño del titulo del menu*/
    display: flex;               /*especifica el tipo de cuadro de representación utilizado para un elemento, en este caso flex, que se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo flexbox*/
    justify-content: center;     /*define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor, en este caso center, los items flex son colocados hacia el centro de la línea. los items flex se alinean al ras entre sí y entorno al centro de la linea*/
    align-items: center;        /*indica la alineación de un elemento dentro del bloque que lo contiene, en este caso center, los márgenes del elemento flexible son centrados dentro de la línea sobre su eje transversal. Si el tamaño transversal del elemento es mayor al del contenedor, se excederá por igual hacia ambas direcciones*/
    z-index: 999;               /*indica el z-order de un elemento y sus descendientes. cuando varios elementos se superponen, z-order determina cuales cubren a otros. un elemento con mayor z-index generalmente cubre a otro menor. el slider se pone abajo del menu al subir la pagina*/
}

/*elemento div cfdi_container que se encuentra dentro del elemento div cfdi_menusup_container*/
.prod_container{
    width: 1024px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/*elemento div desktoplogos que se encuentra dentro del elemento cfdi_container y esta dentro del div cfdi_menusup_container*/
.prod_desktoplogos{
    width: 256px;     /*ancho del div*/
    /*margin: auto;    /*establece el margen para los cuatro lados, en este caso auto, 0px de margen vertical y centrado horizontalmente*/
    padding: 5px;    /*establece el espacio de relleno requerido por todos los lados de un elemento, en este caso le damos 5px*/
    display: flex;   /*especifica el tipo de cuadro de representación utilizado para un elemento, en este caso flex, que se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo flexbox*/
    cursor: pointer;
    box-shadow: 0px 3px 3px #000;
    border-radius: 5px;
}

/*elemento img cfdi_suplogo que se encuentra dentro del div cfdi_desktoplogos y este dentro del div cfdi_container y cfdi_menusup_conatiner*/
.prod_suplogo{
    width: 100%;    /*ancho del logo*/
    height: 100%;   /*altura del logo*/
}

.prod_titulo{
    font-size: 30px;
    padding: 5px 5px 5px 5px;
    text-shadow: 1px 1px 1px rgba(255,255,255,2.9);
    justify-content: center;
}

/* boton salir */
.boton_logout{
    width: 60px;
    height: 60px;
    border-bottom: 2px solid #a5dbfa;
    background: linear-gradient(to bottom, #A9BCF5, #2E64FE);
    overflow: hidden;
    /*margin: 0px auto;*/
    /*margin-top: 50px;*/
    /*margin-bottom: 50px;*/
    border-radius: 50%;
}

.boton_logout a {
    font-size: 16px;
    color: white;
    text-align: center;
    padding-top: 16px;
    padding-bottom: 19px;
    text-decoration: none;
    /*text-transform: uppercase;*/
    font-weight: 100;
    /*font-family: "Arial Narrow";*/
    display: block;
    position: absolute;
    width: 60px;
}

.capa_logout{
    transition: all 0.5s ease;
    height: 0px;
    position: absolute;
    width: 60px;
    /*background-color: rgba(76,80,81,1);*/
    background: linear-gradient(#BDBDBD, #000000);
    color: #fff;
    border-radius: 50%;
}

.boton_logout:hover .capa_logout{
    height: 60px;
}

[data-title]:hover:after{
    opacity: 1;
    transition: all 0.1s ease 0.4s;
    visibility: visible;
}

[data-title]:after {
    content: attr(data-title);
    /*background-color: #333;*/
    background: linear-gradient(#BDBDBD, #000000);
    /*color: #fff;*/
    font-size: 15px;
    /*font-family: Raleway;*/
    position: absolute;
    padding: 0px 4px 0px 4px;
    bottom: -1.6em;
    right: 1%;
    white-space: nowrap;
    /*box-shadow: 1px 1px 3px #222222;*/
    opacity: 0;
    /*border: 1px solid #111111;*/
    z-index: 99999;
    visibility: hidden;
    border-radius: 2px;
}

[data-title] {
    position: relative;
}

/*si la pantalla es menor a 769px*/
@media screen and (max-width:769px){
    #prod_menusup_container{
        display: none;   /*especifica el tipo de cuadro de representación utilizado para un elemento, en este caso none, que permite desactivar la visualización de un elemento*/
    }
}

/*si la pantalla es menor a 920px*/
@media screen and (max-width:920px){
    .prod_suplogo{
        margin: 0px;
    }
}

/*********/
/* MOVIL */
/*********/
/*elemento div cfdi_mobilemenu_container...header contenedor movil*/
#prod_mobilemenu_container{
    width: 100%;                 /*ancho de la cabezera*/
    height: 52px;                /*altura de la cabezera*/
    background-color: #f78181;   /*define el color de fondo de un elemento que puede ser valor de un color o palabra "transparent e". en este caso el color de fondo es para la cabezera*/
    background-image: linear-gradient(#f78181, #df0101);
    box-shadow: 0px 5px 5px #000;
    font-size: 16px;             /*especifica la dimensión de la letra, en este caso el tamaño del titulo del menu*/
    display: flex;               /*especifica el tipo de cuadro de representación utilizado para un elemento, en este caso flex, que se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo flexbox*/
    justify-content: center;   /*define cómo el navegador distribuye el espacio entre y alrededor de los items flex, a lo largo del eje principal de su contenedor, en este caso flex-end, se colocan comenzando desde el final principal. El margen del último item es alineado al ras con el borde del final principal de la línea y cada item precedente es alineado al ras con el siguiente*/
    align-items: center;         /*indica la alineación de un elemento dentro del bloque que lo contiene, en este caso center, los márgenes del elemento flexible son centrados dentro de la línea sobre su eje transversal. Si el tamaño transversal del elemento es mayor al del contenedor, se excederá por igual hacia ambas direcciones*/
    color: #ddd;                /*el icono-logo del menu las rayas seran blancas*/
    position: fixed;    
    z-index: 999;
}

/*elemento div cfdi_mobilelogos principal que contendrá el elemento div de cfdi_mobilelogo_fel*/
.prod_mobilelogos{
    width: 100%;     /*ancho del elemento div de movilelogos*/
    display: flex;   /*especifica el tipo de cuadro de representación utilizado para un elemento, en este caso flex, que se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo flexbox*/
    align-items: center;
    justify-content: space-around;
}

/*elemento div cfdi_mobilelogo_fel que se encuetra dentro del elemento div cfdi_mobilelogos*/
.prod_mobilelogo_fel{
    width: auto;     /*ancho del elemento div del logo*/
    padding: 5px;    /*establece el espacio de relleno requerido por todos los lados de un elemento, en este caso le damos 5px*/
    display: flex;   /*especifica el tipo de cuadro de representación utilizado para un elemento, en este caso flex, que se comporta como un elemento de bloque y establece su contenido de acuerdo con el modelo flexbox*/
}

/*elemento img cfdi_mobilelogo que se encuentra dentro del div cfdi_mobilelogo_fel y este dentro del div cfdi_mobilelogos y cfdi_mobilemenu_container*/
.prod_mobilelogo{
    width: 100%;        /*ancho del logo*/
    height: 100%;       /*altura del logo*/
    max-width: 150px;    /*define o limita la anchura máxima de un elemento, en este caso el logotipo*/
    cursor: pointer;
    box-shadow: 0px 3px 3px #000;
    border-radius: 5px;
}

/*Logo y menu*/
/*Tipos de medio que describen la categoria general de un dispositivo: "all" apto para todos los dispositivos, "print" destinado a material impreso y visualización de documentos en una pantalla en el modo de vista previa de impresion, "screen" destinado principalmente a las pantallas, "speech" destinado a sintetizadores de voz*/
/*si la pantalla es mayor a los 770px*/
@media screen and (min-width:770px){
    #prod_mobilemenu_container{
        display: none;   /*especifica el tipo de cuadro de representación utilizado para un elemento, en este caso none, que permite desactivar la visualización de un elemento*/
    }
}

/*si la pantalla es menor a 920px*/
@media screen and (max-width:920px){
    .prod_suplogo{
        margin: 0px;
    }
}

/* boto salir */
/*si la pantalla es menor a 769px*/
@media screen and (max-width:769px){
    .prod_titulo{
        font-size: 16px;
        color: black;
    }
    .boton_logout{
        width: 40px;
        height: 40px;
    }
    .boton_logout a {
        font-size: 12px;
        width: 40px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .capa_logout{
        width: 40px;
    }
    .boton_logout:hover .capa_logout{
        height: 40px;
    }
    [data-title]:after {
        font-size: 11px;
    }
}

/********************/
/*contenedor general*/
/********************/
#prod_main_container{
    /*padding-top: 82px;   se pasa a media en bienvenido.css*/
    width: 100%;
    display: flex;
    /*habilitar para ver donde abarca en la pantalla*/
    /*padding: 10px 10px 10px 10px;*/
/*border: red 2px solid; /*rojo */
}

/*si la pantalla es mayor a los 770px*/
@media screen and (min-width:770px){
    #prod_main_container{
        padding-top: 99px;
    }
}
/*si la pantalla es menor a 769px*/
@media screen and (max-width:769px){
    #prod_main_container{
        padding-top: 60px;
    }
}

/***********************/
/*contenedor secundario*/
#admon_prod{
    width: 100%;
    max-width: 1024px;
    margin: auto;
/*border: black 2px solid; /*negro */
}

.admon_cuerpo{
    width: 100%;
    max-width: 1024px;
    display: flex;
    flex-direction: column;
/*border: yellow 2px solid; /*amarillo */
    /*Una unidad vh (viewport height) equivale a un 1% de la altura del
    viewport (el total de la pantalla del dispositivo que muestre
    nuestra web). 1vh = 1% del total de la pantalla, 100vh = 100%.
    Como os habréis imaginado, la unidad vw es el equivalente para
    el ancho.*/
    height: 100vh;
}

.datos_container{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    border-bottom: 1px dashed #6E6E6E;
/*border: blue 2px solid; /*verde */
}

.user_informacion{
    font-size: 15px;
    text-align: center;
    padding: 0px 0px 5px 0px;
/*border: green 2px solid; /*verde */
}

.titulo_precio_BD{
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    font-size: 15px;
    padding: 15px 0px 5px 0px;
/*border: rgb(128,0,0) 2px solid; /*marrón */
}

.actualizar_container{
    display: flex;
    justify-content:space-around;
    flex-wrap: wrap;
    align-items: center;
/*border: rgb(255,0,255) 2px solid; /*magenta */
}

.input_submit{    
    font-size: 15px;
    padding: 5px;
    margin: 15px;
/*border: green 2px solid; /*verde */
}

/* Formato para el botón seleccionar archivo */
input[type=file]::file-selector-button {
    margin-right: 4px;
    
    width: 115px;
    height: 30px;
    padding: 5px;
    background: linear-gradient(#A9BCF5, #2E64FE);
    color: #fff;
    cursor: pointer;
    transition: background .2s ease-in-out;
    border: none;
/*border: red 2px solid; /*rojo */
}

input[type=file]::file-selector-button:hover {
    background: linear-gradient(#BDBDBD, #000000);
}

input{
    font-size: 12px;
}

/* Formato para el botón actualizar precios */
#boton_actualizar{
    width: 120px;
    height: 30px;
    background: linear-gradient(#BDBDBD, #000000);
    cursor: pointer;
    color: #fff;
    padding: 5px;
    font-size: 13px;
    border: none;
/*border: yellow 2px solid; /*amarillo*/
}

/* formato para el mensaje de error*/
.status-msg {
    text-align: center;
    padding: 4px 4px 4px 4px;
    color: red;
    font-size: 15px;
    font-family: inherit;
/*border: yellow 2px solid; /*amarillo*/
}


/*si la pantalla es mayor a los 770px*/
@media screen and (min-width:770px){
    .input_submit{
        display: inline-flex;
    }
}

/*si la pantalla es menor a 769px*/
@media screen and (max-width:769px){
    .user_informacion{
        font-size: 14px;
    }
    .datos_container{
        font-size: 14px;
    }
    #boton_actualizar{
        font-size: 12px;
    }
    .status-msg {
        font-size: 14px;
    }
}

/**********/
/* footer */
#footer1{
    background: rgba(0,0,0,0.9);
    color: #999;
/*border: red 2px solid; /* rojo */
}

.footer1_container {
    width: 100%;
max-width: 1024px;
margin: auto;
/*border: green 2px solid; /*verde */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 0;
font-size: 13px;
}

.footer1_container .footer_container {
    width: 100%;
    max-width: 1024px;
    font-weight: lighter;
/*border: orange 2px solid; /* naranja */
}

.footer1_container #copyright {
    padding-left: 10px;
    padding-right: 10px;
    bottom: 0px;
    display: flex;
/*border: blue 2px solid; /* naranja */
justify-content: space-between;
align-items: center;
}

.footer1_container .copy {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer1_container .jk_studio {
    display: flex;
    justify-content: center;
    align-items: center;
}

.footer1_container p {
    display: flex;
    justify-content: center;
    align-items: center;
/*border: white 2px solid; /* naranja */
}

.footer1_container .separador{
    padding: 0px 5px 0px 5px;
}

.footer1_container p img{
    width: 60px;
    padding-left: 5px;
    margin-bottom: 2px;
    /*opacity: 0.5;*/
    transition: all 0.3s;
/*border: yellow 2px solid; /* naranja */
}

.footer1_container p img:hover{
    opacity: 1;
}

/*si la pantalla es menor a los 770px*/
@media screen and (max-width:769px){
    .footer1_container #copyright{
        flex-direction: column;
        padding: 15px;
    }
    
    .footer1_container p{
        padding: 3px;
        font-size: 12px;
    }
    
    .footer1_container .separador{
        display: none;
    }
    
    .footer1_container .copy{
        flex-direction: column;
        line-height: 1;
    }
    
    .footer1_container .jk_studio{
        flex-direction: column;
        line-height: 1;
    }
}