/* 
Versión del     05-nov 2020

break points para rel responsive
--breakpoint-xs: 0;
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;

    web fonts: https://fonts2u.com/websymbols-regular.font

*/

/* variables a nivel HTML */
:root {
    --azulprincipal: #2c2926;
    --grisprincipal: #B9B9B9;
    --azuloscuro: #478aa8;
    --grismedio: #c9c9c9;
    --grisclaro: #e6e6e6;
    --grismuyclaro: #f8f8f8;
    --casinegro: #4d4747;
    
  }

/* fuentes 
https://fonts2u.com/websymbols-regular.font
*/
@font-face{
    font-family: "icons";
    src: url("fonts/websymbols-regular-webfont.svg#WebSymbolRegular") format('svg'),
        url("fonts/websymbols-regular-webfont.eot");
    src: url("fonts/websymbols-regular-webfont.eot?#iefix") format("embedded-opentype"),
    url("fonts/websymbols-regular-webfont.woff") format("woff"),
    url("fonts/websymbols-regular-webfont.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

/* estilos generales */
*{
    /* opciones de google
    font-family: "Titillium Web",Tauri, "Sulphur Point", Raleway, Lora, Literata, Kanit, Kadwa, Farro "Francois One";

    font-family: Verdana;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
                "Helvetica Neue",Arial,"Noto Sans",sans-serif,
                "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    */
    font-family: "Titillium Web";
    padding: 0px;
    margin: 0px;
}
html{
    height: 100%;
}

body{
    background-image: url("../img/paven.png");
    max-width: 1400px;
    height: 100%;
}

#div-contenedor{
    min-height: 100%;
    margin-bottom: -70px;
}
.push{
    height: 70px;
}

header{
    margin:0 auto;
    padding:0px;
    height:auto;    
}
#ddiv-contenedor{
    margin: auto auto;
    min-height: 100%;
}

#opciones{
    width: 640px;
    margin-left: calc( ( 100% - 640px ) / 2);
}

img{
    max-width:100%;
    height:auto;
}

a{
    color: var(--azulprincipal);
    text-decoration: none;
    transition: all 350ms;
}
a:visited{
    color: var(--azulprincipal);
}
a:hover{
    color: white;
    background-color: var(--azulprincipal);
    font-size: 18px;
    cursor: pointer;
}

.clearfix{
    float: none;
    clear: both;
}

/* formularios, cae dentro de estilos generales */
input[type="text"],
input[type="email"],
input[type="password"],
select{
    font-size: 16px;
    color: var(--grisprincipal);
    background-color: white;
    padding: 1px 2px 1px 2px;
    border: 1px solid var(--grismedio);
    border-radius: 3px;
    box-shadow: 0px 0px 2px var(--grisclaro);
    transition: all 300ms;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
select:focus{
    outline: none;
    color: var(--casinegro); /*color del texto */
    border: 2px solid var(--azulprincipal);
    box-shadow: 0px 0px 3px var(--grisclaro) inset;
}

input[type="text"]:disabled,
input[type="email"]:disabled,
input[type="password"]:disabled,
select:disabled{
    color: black; /*color del texto */
    box-shadow: 0px 0px 3px #eee inset;
    background-color: var(--grisclaro);
}

input[type="button"],
input[type="submit"],
input[type="reset"],
button{
    display: block;
    border-radius: 2px;
    border: 1px solid var(--grismedio);
    width: 60px;
    padding: 3px;
    color: var(--azulprincipal);    
    background-color: var(--grisclaro);
    cursor: pointer;
}


input[type="button"]:hover,
input[type="submit"]:hover,
input[type="reset"]:hover,
button:hover{
    box-shadow: 0px 0px 2px var(--grismedio);
    cursor: pointer;
}

input[type="button"]:active,
input[type="submit"]:active,
input[type="reset"]:active,
button:active{
    box-shadow: 0px 0px 3px var(--grisprincipal) inset;
    text-shadow: 0px 0px 1px var(--grisclaro);
   
}

input[type="checkbox"]
{
    padding-top: 5px;
    border: 1px solid var(--grismedio);
    border-radius: 3px;
    box-shadow: 0px 0px 2px var(--grisclaro);
    transition: all 300ms;
}

.chico{
    width: 10%;
}
.mediano{
    width: 25%;
}
.grande{
    width: 50%;
}
.xgrande{
    width: 75%;
}
.full-width{
    width: 95%;
    margin-left: 2%;
}

.icon{
    font-family: "icons";
    font-weight: bold;
    color: var(--azulprincipal);    
    text-align: center;
/*    border: 1px solid black;
    background-color: var(--grisclaro);*/
}
.ayuda{
    font-family: "icons";
    color: black;    
    background-color: var(--grisclaro);
    text-align: center;
    font-size:24px;
}

.icon-label{
    font-family: "icons";
    color: black;    
    text-align: center; 
}
.icon:hover,
.ayuda:hover{
    font-family: "icons";
    color: var(--grisclaro);
    cursor: pointer;
    background-color: var(--azulprincipal);
    box-shadow: 0px 0px 4px green inset;
}
.boton-chico{
    width: 30px !important;
}
.boton-chico:hover{
    background-color: var(--grisclaro) !important;
    cursor: pointer !important;

}
.flex{
    display: flex;
    margin: 5px;
    justify-content: space-between;
    align-items: center;
}

#flex > label{
    float: left;
    padding: 8px;
    margin-left: 1%;
    width: 10% !important;
}

#flex > input{
    float: left;
    padding: 5px;
    margin-left: 8%;
    width: 76%;
}


label, span{
    padding-right: 3px;
    padding-left: 7px;
    padding-top: 3px;
}

.izquierda{
    text-align: right;
}

.descarga{
    text-decoration-line: underline;
}

.descarga:hover{
    text-decoration-line: none;
    color: var(--grisclaro);
    cursor: pointer;
    background-color: var(--azulprincipal);
    box-shadow: 0px 0px 4px var(--grisprincipal) inset;
}

/* CABECERA */

#encabezado{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 2fr;
    min-width: 900px;
    width: 100%;
}
#encabezado #logotipo{
    grid-row: 1 ;
    grid-column: 1 ;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: 1;

    margin: 0px auto;
    width: 100%;
    background-color: var(--azulprincipal);
}

#encabezado img{
    grid-column: 1 / 2;
    width: 36%;
    height: auto;
    margin-left: 10%;
}

#encabezado h1{
    grid-column: 2 / 5;
    color: #ffbb13;
	font-size: 30px;
    text-shadow: 0px 0px 2px #ccc;
    letter-spacing: 1.3px;    
    margin-right: -5%;
    margin-top: 5%;
    text-align: center;
}

#encabezado  div > div{
    grid-column: 5 / 6;
    grid-row: 1;
    text-align: center;
    padding-top: 8px;
}
#encabezado  div > div img{
    width: 1.8em;
    margin-top: 40px;
    margin-left: 5px;
    margin-right: 5px;
    padding: 3px;
    border-radius: 5px;
    transition: all 300ms;

}



#encabezado h2{
    grid-row: 2 ;
    grid-column: 1 ;
    text-align: center;
    margin-top: 17px;
    color: var(--casinegro);
    font-size: 22px;
    text-shadow: 0px 0px 2px #ccc;
    letter-spacing: 1.0px;    
}


/* CONTENIDO */

#contenido{
    display: block;
    width: 80%;
    margin-left: 12%;
}

#div-contenedor #nav{
    margin: 0px;
    border: 0px solid #ccc;
    padding: 0px;
    color: var(--azulprincipal);
    font-family: sans-serif, Helvetica, Arial;
    background-color: var(--grismuyclaro);
}

#nav ul{
    height: 35px;
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    align-items: center;        
    background-color: var(--grismuyclaro);
}

#nav .menu-corto{
    width: 60%;
    margin-left: 22%;
}
#nav ul li{
    background-color: var(--grismuyclaro);
}


#nav a{
    font-size: 15px;
    padding: 2px;
    padding: 3px;
    color: var(--azulprincipal);
    background-color: var(--grismuyclaro);
    text-align: center;
    border: 0px solid var(--grismedio); 
    border-radius: 3px;
    transition: all 0.35s

}

#nav a:hover{
    font-size: 17px;
    color: var(--azulprincipal);
    background-color: white;
    cursor: pointer;
}


/* barra lateral */

/* 
#contenido nav{
    height: auto;
    margin: 30px;
    border: 1px solid #ccc;
    padding: 10px;
    background-color: #f8f8f8;
    color: var(--azulprincipal);
    font-family: sans-serif, Helvetica, Arial;
    box-shadow: 0px 0px 3px var(--grismedio);
}


#nav ul{
    list-style: none;
}

#nav ul li{
    padding-bottom: 10px;
}

#nav a{
    display: block;
    font-size: 18px;
    padding: 10px;
    color: var(--azulprincipal);
    background-color: var(--grisclaro);
    text-align: center;
    border: 1px solid var(--grismedio); 
    border-radius: 8px;
    transition: all 0.35s
}

#nav a:hover{
    color: var(--grisclaro);
    background-color: var(--azulprincipal);    
    font-size: 19px;
    font-weight: bold;
    box-shadow: 0px 0px 4px var(--grismedio) inset;

}
*/

/* formulario */ 

#form-acceso{
    display: block;
    width:340px;
    margin-left: calc( ( 100% - 340px ) / 2 );
    padding-top: 1px;
}
#form-facturacion,
#form-consultas{
    display: block;
    width:900px;
    margin-left: calc( ( 100% - 900px ) / 2 );
    padding-top: 1px;
}

#fact-receptor,
#fact-emisor,
#fact-ticket{
    display: block;
    width:700px;
    margin-left: calc( ( 100% - 700px ) / 2 );
    padding-top: 1px;
}


#fact-ticket .icon{
    font-size: 20px;
    margin-left: 3px;
}



#fact-totales{
    display: block;
    width:400px;
    margin-left: calc( ( 100% - 400px ) / 2 );
    padding-top: 1px;
}

#fact-correo{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 8;
    grid-row-end: 9;
    font-size: 13px;
}

#fact-correo2{
    grid-column-start: 3;
    grid-column-end: 4;
    grid-row-start: 9;
    grid-row-end: 10;
    font-size: 13px;
    gap: 5px;
}


#consultas-filtros{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
}

#registroDT{
    font-size: 18px;
    width: 50%;
    margin-left: calc( (100% - 50% ) / 2 );
    height: auto;
}

#fact-FI{
    font-size: 22px;
    width: 10%;
    margin-left: calc( (100% - 10% ) / 2 );
    height: 30px;
}

#aceptarLimpiar{
    width: 70%;
    margin-left: calc( (100% - 50% ) / 2 );
    height: 30px;    
}

/* dos botones */
#descarga-Docto,
#descarga-Docto2,
#ok-Salvar{
    width: 92px;
    margin-left: calc( (100% - 92px ) / 2 );
}

#genera-CFDI,
#acepta-Registro,
#limpiar-Regresar,
#exportar-Regresar{
    width: 138px;
    margin-left: calc( (100% - 138px ) / 2 );
}

#cuatro-botones{
    width: 184px;
    margin-left: calc( (100% - 184px ) / 2 );
}

/* cinco botones */
#limpiar-Regresar2{
    width: 230px;
    margin-left: calc( (100% - 230px ) / 2 );
}


#fact-FI > div > input[type="button"],
#fact-FI > div > input[type="submit"]{
    display: inline;
    float: left;
    width: 25%;
    margin: 10px 12.5% 10px 12.5%;
}


#accesoDT{
    grid-column-start: 2;
    grid-column-end: 5;
    grid-row-start: 1;
    grid-row-end: 2;
    font-size: 22px;
    display: block;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
}


#aaceptarAcceso{
    float: left;
    margin-left: 70px;
    margin-right: 30px;
    margin-top: 13px;
}

#datosIniciales{
    width: 350px;
    margin-left: calc( (100% - 350px ) / 2 );
    margin-top: 30px;
    height: auto;
} 
#datosIniciales > p{
    font-size: 0.7em;
    width: 340px;
    text-align: center;
} 

#aceptarAcceso,
#limpiar{
    float: left;
    margin-top: 13px;
    margin-right: 10px;
}

#ayuda{
    float: left;
    margin-top: 10px;
}


table {
    border-collapse: collapse;
    width: 100%;
  }
  
  th, td {
    padding: 8px;
    text-align: left;
/*    border-bottom: 1px solid var(--grisclaro);*/
    font-size:14px;
  }
  

fieldset{
    padding: 0px 5px 15px 5px;
    margin-bottom: 20px;
    border: 0.5px solid var(--grisclaro);
    border-radius: 5px;
    box-shadow: 0px 0px 3px var(--grismedio);
    background-color: var(--grismuyclaro);

}
fieldset legend
{
    font-size: 14px;
    color: var(--azuloscuro);
    letter-spacing: 1px;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    padding: 5px;
    background-color: var(--grismuyclaro);
    border: 0.5px solid var(--grisclaro);
    box-shadow: 0px 0px 3px var(--grismedio), inset;
    border-radius: 5px;

}
fieldset h5{
    text-align: center;
    font-weight:normal; 
} 

#lnombreReceptor{
    margin-left: 15px;
}

#datosReceptor{
    width: 50%;
    margin-left: calc( (100% - 17% ) / 2 );
    height: auto;    
    font-size: 12px;

}

#dummy{
    padding-bottom: 70px;
}

#footer{
    display: block;
    width: 80%;
    margin-left: 12%;    
    margin: 0px auto;
    background-color: var(--azulprincipal);
    height: 70px;
}
footer{
    min-width: 500px;
    width: 100%;
    height: 70px;

}

#footer > footer > h5,
#footer > footer > p{
    text-align: center;
    margin-top: 0px;
	color: #ffbb13;
    font-size: 12px;
    text-shadow: 0px 0px 2px #ccc;
    letter-spacing: 1.3px;    
}



@media screen and (min-width: 1400px) {
    body{
        margin-left: calc( (100% - 1400px) / 2 ) ;
    }
}


@media screen and (max-width: 900px) {
    body{
        min-width: 640px;
        max-width: 900px;
    }
    #form-facturacion,
    #form-consultas{
        width:640px;
        margin-left: calc( ( 100% - 640px ) / 2 );
    }
    
    #fact-receptor,
    #fact-emisor,
    #fact-ticket{
        display: block;
        width:620px;
        margin-left: calc( ( 100% - 620px ) / 2 );
        padding-top: 1px;
    }
    

    input[type="text"],
    input[type="email"],
    input[type="password"],
    select,
    th, td {
        font-size: 14px;
    }
    #contenido{
        width: calc(100% - 20px);
        margin: 10px;
    }    
        
    #encabezado{
        min-width: 100%;
    }

    #eencabezado img{
        width: 100px;
        padding: 10px;
        margin-left: 10px;
    }

    #encabezado h1{
        font-size: 17px;
    }

    #encabezado h2{
        font-size: 18px;
        text-shadow: 0px 0px 2px #ccc;
        letter-spacing: 1.0px;    
    }

    /* menú superior */
    
    fieldset legend
    {
        font-size: 11px;
    }
    
    #accesoDT{
        font-size: 18px;
    }
    #lnombreReceptor{
        margin-left: 15px;
    }
    
    #registroDT{
        font-size: 18px;
        width: 60%;
        margin-left: calc( (100% - 60% ) / 2 );
        height: auto;
    }  
 

    footer{
        min-width: 600px;
        width: 100%;
        position: relative;
        height: 100%;
    
    }
}

@media screen and (max-width: 640px) {
    body{
        min-width: 360px;
        max-width: 640px;
        width: 100%;
    }

   

    #contenido{
        width: 360px;
        margin-left: calc( ( 100% - 360px ) / 2 );
    }
    #form-facturacion,
    #opciones{
        width:360px;
        margin-left: calc( ( 100% - 360px ) / 2 );
    }
    #form-consultas{
        width:200px;
        margin-left: calc( ( 100% - 200px ) / 2 );
    }
    .ocultar{
        display: none;
    }

    .ssxgrande,
    .ssmxgrande{
        width: 95%;
        margin: 5px;
    }    
    .grid{
        display: grid;
        row-gap: 5px;
    }
    .flex{
        flex-direction: column;
    }


    div > input[type="text"],
    div > input[type="email"],
    div > input[type="password"],
    div > select,
    div > label{
        font-size: 14px;
    }
   
    .ayuda{
        font-size:20px
    }   

    #encabezado h1{
        margin-top: 2%;
        font-size: 16px;
    }
    #encabezado img{
        width: 95%;
        margin-left: 2%;
    }    
 
    #encabezado  div > div img{
        width: 1.8em;
        margin-top: 25px;
        margin-left: 5px;
        margin-right: 5px;
    }
    
    
    #encabezado h2{
        font-size: 18px;
    }
 
    /* MENU */
    
    #contenido #nav{
        width: 100%;
        margin: 5px;
        border: 0px solid #ccc;
        padding: 0px;
        color: var(--azulprincipal);
        font-family: sans-serif, Helvetica, Arial;
        background-color: white;
    }
    
    #nav ul{
        height: auto;
        display: grid;
        grid-template-columns: 1;
        background-color: var(--grismuyclaro);
        width: 100%;
    }
    
    #nav ul li{
        margin: 7px;
    }
    
    #nav a{
        width: 100%;
        font-size: 18px;
        color: white;
        background-color: var(--azulprincipal);
        text-align: center;
        padding: 3px;
        border: 0px solid var(--grismedio); 
        border-radius: 3px;
        transition: all 0.35s
    }
    
    #nav a:hover{
        font-size: 20px;
        color: var(--azulprincipal);
        background-color: white;
    }
    
    #fact-ticket{
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 3;
        grid-row-end: 4;
        font-size: 18px;
    }
    
    .flex > input,
    .flex > label,
    .flex > select{
        width: 100%;
        padding: 5px;
        font-size: 16px;
        margin: 4px;
    }

    #flex > input{
        width: 330px;
        height: 21.3px;
        padding: 5px;
        font-size: 14px;
        margin: 4px;
        border: 1px;
    }



    .flex > label{
        font-size: 22px;
        text-align: left;
    }

    #ffact-totales{
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 7;
        grid-row-end: 8;
    }
    
 
    #fact-correo{
        grid-column-start: 1;
        grid-column-end: 6;
        font-size: 15px;
        gap: 5px;
    }
    #fact-correo2{
        grid-column-start: 1;
        grid-column-end: 6;
        grid-row-start: 9;
        grid-row-end: 10;
        font-size: 15px;
        gap: 5px;
    }

    #registroDT{
        font-size: 18px;
        width: 80%;
        margin-left: calc( (100% - 80% ) / 2 );
        height: auto;
    }    
    #lnombreReceptor{
        margin-left: 11px;
    }


    #opciones > div{
        margin:5px;
    }
    
    #footer{
        height: 70px;
    }
    footer{
        min-width: 290px;
        width: 100%;
        position: relative;
        height: 100%;
    
    }
    
    #footer > footer > h5{
        font-size: 10px;
        letter-spacing: 1.0px;    
    }
    #footer > footer > p{
        font-size: 8px;
        letter-spacing: 1.0px;    
    }
    
    
    #fact-totales{
        width:340px;
        margin-left: calc( ( 100% - 350px ) / 2 );
    }
    
    #fact-receptor,
    #fact-emisor,
    #fact-ticket{
        display: block;
        width:340px;
        margin-left: calc( ( 100% - 350px ) / 2 );
        padding-top: 1px;
    }    

    #fact-FI{
        font-size: 24px;
        width: 50%;
        margin-left: calc( (100% - 50% ) / 2 );
    }
       
}

@media screen and (max-width: 470px) {

    #encabezado h1{
        font-size: 14px;
        margin-top: 2%;
    }

    #encabezado  div > div img{
        width: 1.3em;
        margin-top: 25px;
        margin-left: 2px;
        margin-right: 2px;
    }

}