/*@import url('https://fonts.googleapis.com/css?family=Poppins:20');*/
/* @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap"); */
@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@300;400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Figtree:ital,wght@0,300..900;1,300..900&family=PT+Serif+Caption:ital@0;1&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&display=swap');

        
        :root {
            --boton-color: #035525;  /* Verde Principal  */
            --background-navbar: #035525;
            --hover-color: #4BA771; /* Verde */
            --text-color: #ffffff;      /* Blanco */
            --textcolor-hover: #035525;
            --background-body: #fff;
            --background-amarillofuerte: #febf03;
            --hover--amarillofuerte: #f5e367;            
            --header-height: 2rem;
            --background-header: #f9fdefa9;
            --nav-width: 68px;
            --hover-nav: #ffffffd8;
            --first-color: #4723D9;
            --first-color-light: #fff;
            --white-color: #F7F6FB;
            --body-font: 'Nunito', sans-serif;
            --normal-font-size: 1rem;
            --z-fixed: 100;
            --verde-fondo: #67a48040;
        }
        body{
            padding:5px;
            margin-left:auto;
            margin-top: 40px!important;
            margin-right:auto; 
            font-size:14px;
            background-color: var(--text-color);
            background: var(--background-body);
            font-family: var(--body-font); 
            padding-bottom: 130px;         
        }
        
        .imglogo{
         max-width:80px;
         max-height:80px;
        }
        /*tr:hover{
           -ms-transform:scale(1.01,1.01);
        -webkit-transform:scale(1.01,1.01);
        transform:escale(1.01,1.01);
        border-radius:4px;
        /*transition:all 0s ease-out;
           
        }*/
        
        .titulo:hover{
         /*  -ms-transform:scale(1.04,1.04);
        -webkit-transform:scale(1.04,1.04);
        transform:escale(1.04,1.04);
        border-radius:4px;
        transition:all 0s ease-out;*/
        color:var(--boton-color)!important;
        
        }
        
        td:hover{
           background:#F1F4F4;
           border-radius:4px;
        }
    
        
        .logo{
            color:#069370;
            width:100px;
            height:110px;
            font-size:28px;
            line-height:60px;
            text-align:center;
            box-sizing:border-box;
            float:left;
            margin-left:-35px;
            margin-top:-10px;
            margin-right:0px;
            font-weight:700;
            text-decoration:none;
            box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
            border-radius:50% 50%;
        }

        .cards{
            color:var(--boton-color); 
            background-color: var(--verde-fondo);
            border-radius: 10px!important;
            
        }
        
        nav{
            margin-left:auto;
            margin-right:auto;
            font-size:14px;
        }
        .mar15{
            margin-top:15px;
            margin-bottom:15px;
            margin-left:15px;
            margin-right:15px;
        }
        
        .pad15{
            padding-top:15px;
            padding-bottom:15px;
            padding-left:15px;
            padding-right:15px;
        }
        
        .clearfix{
            clear:both;
        }
        
        nav ul{
            margin:0;
            padding:0;
            display:flex;
            
        }
        
        nav ul li{
            list-style:none;
            
        }
        
        nav ul li a{
            display:block;
            margin:5px;
            padding:5px 5px;
            text-decoration:none;
            color:var(--boton-color);
        }
        
        nav ul li a img{
            width:50px;
            height:50px;
            margin-left:5px;
            margin-right:5px;
            text-align:center;
        }
        
        nav ul li a.active, nav ul li a:hover{
            background:#E8F3DB;
            color:#000;
            transition:0s;
            border-radius:5px;
        }
        
        @media (max-width:750px){
        /*
            header{
                margin:32px;
                width:60%;
                height:50px;
                margin-left:5px;
                padding-top:10px;
                margin-bottom:30px;
            }*/
            .logo{
                color:#069370;
                width:70px;
                height:75px;
                font-size:28px;
                line-height:60px;
                text-align:center;
                box-sizing:border-box;
                float:right;
                margin-top:-15px;
                margin-right:-15px;
                font-weight:700;
                text-decoration:none;
                box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
                border-radius:50% 50%;
            }
            .imgfacturacion{
                width:20px;
                height:20px;
                margin-top:5px;
                margin-bottom:5px;
                margin-left:4px;
                margin-right:4px;
                padding:1px;
                box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
                border-radius:5px 5PX 5PX 5PX;
                font-size: 0.6em;
            }
            
 
          
            
        }
        @media (max-width:750px){
            .menu-toggle{
                display:block!important;
                width:100px;
                height:40px;
                margin:-5px;
                background:#FAFAFA;
                float:left;
                cursor:pointer;
                text-align:center;
                font-size:15px;
                color:#2f4713!important;
                border-radius:5px;
                box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
            }
            .menu-toggle:before{
                content:'\f0c9';
                /*background-image: url("../img/editar.png");*/
                font-family:fontAwesome;
                line-height:40px;               
                
            }
            
            .menu-toggle.active:before{
                content:'\f00d';
                /*background-image: url("../img/editar.png");*/
                width:40px;
                height:40px;
            }
            nav{
                display:none;
                
            }
            nav.active{
                display:block;
                width:100%;
                background:#2f4713;
            }
            nav.active ul{
                display:block;
                background:#FAFAFA;
                border-radius:5px;
                box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
            }
            nav.active ul li a{
                margin:0;
            }
            .paginador ul{
            	padding:15px;
            	list-style:none;
            	background:#fff;
            	/*margin-top:15px;*/
            	display: -webkit- flex;
            	display: -moz- flex;
            	display: -ms- flex;
            	display: -o- flex;
            	display: flex;
                 justify-content:center;
                 align-items:flex-start;
                 flex-wrap:wrap;
                 border-radius:15px;
            }
            
            .paginado li{
                text-decoration:none;
            }
            
            .paginador input .paginaSelect{
            	color:#428bca;
            	border: 1px solid #ddd;
            	padding:5px;
            	display:inline-block;
            	font-size:3em;
            	text-align:center;
            	width:50px;
            	background:#000;
            	border-radius:15px;
            }
            .paginador a:hover{
            	background:#ddd;
            } 
            .imgico{
                margin:5px;
                width:12px;
                height:auto;
            }
            .inline{
                display:inline-block;
                background-color: var(--verde-fondo);
                margin-top:5px !important;
                margin-bottom:5px !important;
                margin-left:5px !important;
                margin-right:5px !important;
            }
            .ocDes{
                display:none;
            }

        }
        
        table:not(.ignorar){            
                border:1px solid #ddd;
                width:100%!important;
                margin-left:auto;
                margin-right:auto;
                margin-top:5px;
                margin-bottom:5px;
                padding:0;
                border-collapse:collapse;
                border-radius:10px 10px 10px 10px;                
            }    
            
            table:not(.ignorar) tr{
                border:1px solid #ddd;
                padding:3px;
                border-radius:10px 10px 10px 10px;
                font-size:0.8em;
                color:var(--boton-color);
            }
            table:not(.ignorar) td, table:not(.ignorar) th{
                padding:3px;
                text-align:left;
                border-radius:4px 4px 4px 4px;
                
            }
            table:not(.ignorar) th .opor {
                color:#FFF;
            }
            
            table:not(.ignorar) th{
                text-transform:uppercase;
                font-size:14px;
                letter-spacing:1px;
                color:#fff;
                background-color:var(--boton-color);
                border-radius:4px 4px 4px 4px;
                text-align:center;
                border-right: 1px solid #FFFFFF;
            }
            
            table:not(.ignorar) tr:nth-child(even){
                background-color:#FAFAFA;
                color:#006633;
                border-radius:4px 4px 4px 4px;
            }
            
            table:not(.ignorar) td:last:child{
                    background-color:#FAFAFA;
                    border-radius:4px 4px 4px 4px;
            }
            table:not(.ignorar) td{
                 border-radius:4px 4px 4px 4px;
            }
            
            @media screen and (max-width: 900px) {
                table:not(.ignorar) {
                    width: 100%;
                    border-collapse: collapse;
                    border-radius: 10px;
                    overflow: hidden;
                    display: table;
                    /*display: block;*/
                }

                table:not(.ignorar) thead {
                    display: none;
                }

                table:not(.ignorar) tr {
                    display: block;
                    margin-bottom: 15px;
                    border: 1px solid #ddd;
                    border-radius: 10px;
                    box-shadow: 0px 2px 5px rgba(0, 0, 0, .2);
                    padding: 10px;
                    background-color: #fff;
                }

                table:not(.ignorar) td {
                    display: block;
                    text-align: right;
                    font-size: 1rem;
                    border-bottom: 1px dotted #ccc;
                    padding: 8px 10px;
                    box-sizing: border-box;
                }

                /* Eliminar borde en el último TD */
                table:not(.ignorar) td:last-child {
                    border-bottom: none;
                }

                /* Mostrar el encabezado simulado */
                table:not(.ignorar) td:before {
                    content: attr(data-label);
                    float: left;
                    font-weight: 600;
                    text-align: left;
                    color: #333;
                }
            }
            
    .btnguardar{background-color:transparent;background-image: url("../img/guardar.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;color:White;border-style:none;height:64px;width:64px;background-repeat:no-repeat;}        
    .btnguardar:hover{
        -ms-transform:scale(1.3,1.3);
        -webkit-transform:scale(1.3,1.3);
        transform:escale(1.3,1.3);
        border-radius:4px;
        transition:all 0s ease-out;
        
    } 
    
    .btneliminar{background-color:transparent;background-image: url("../img/cerrar.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;color:White;border-style:none;height:64px;width:64px;background-repeat:no-repeat;}        
    .btneliminar:hover{
        -ms-transform:scale(1.3,1.3);
        -webkit-transform:scale(1.3,1.3);
        transform:escale(1.3,1.3);
        border-radius:4px;
        transition:all 0s ease-out;
        
    } 
    .btnpago{background-color:transparent;background-image: url("../img/banca-por-internet.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;color:White;border-style:none;height:64px;width:64px;background-repeat:no-repeat;}   
    .btuno{background-color:transparent;background-image: url("../public/img/iniciaroperacion.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;color:White;border-style:none;height:64px;width:64px;background-repeat:no-repeat;}        
    .btnOK{background-color:transparent;background-image: url("../public/img/tocar.png");margin:3px 3px 3px 3px;border-radius:100px;color:White;border-style:none;height:64px;width:64px;background-repeat:no-repeat;}        
    .salvar{background-color:transparent;background-image: url("../public/img/salvar-1.png");margin:3px 3px 3px 3px;color:White;border-style:none;height:64px;width:64px;background-repeat:no-repeat;}        
    .btnpago:hover{
        -ms-transform:scale(1.3,1.3);
        -webkit-transform:scale(1.3,1.3);
        transform:escale(1.3,1.3);
        border-radius:4px;
        transition:all 0s ease-out;
        
    } 
   
    .btndomina{background-color:transparent;background-image: url("../img/logodomina.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;color:White;border-style:none;height:50px;width:160px;background-repeat:no-repeat;}        
    .btndomina:hover{
        -ms-transform:scale(1.3,1.3);
        -webkit-transform:scale(1.3,1.3);
        transform:escale(1.3,1.3);
        border-radius:4px;
        transition:all 0s ease-out;
        
    }
    .btnpass{background-color:transparent;background-image: url("../img/password3.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;color:White;border-style:none;height:64px;width:64px;background-repeat:no-repeat;}        
    .btnpass:hover{
        -ms-transform:scale(1.3,1.3);
        -webkit-transform:scale(1.3,1.3);
        transform:escale(1.3,1.3);
        border-radius:4px;
        transition:all 0s ease-out;
        
    }
    .btneliminar{background-color:transparent;background-image: url("../img/basura.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;color:White;border-style:none;height:64px;width:64px;background-repeat:no-repeat;}        
    .btneliminar:hover{
        -ms-transform:scale(1.3,1.3);
        -webkit-transform:scale(1.3,1.3);
        transform:escale(1.3,1.3);
        border-radius:4px;
        transition:all 0s ease-out;
        
    }
    .btnvolver{background-color:transparent;background-image: url("../img/regreso.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;color:White;border-style:none;height:64px;width:64px;background-repeat:no-repeat;}        
    .btnvolver:hover{
        -ms-transform:scale(1.3,1.3);
        -webkit-transform:scale(1.3,1.3);
        transform:escale(1.3,1.3);
        border-radius:4px;
        transition:all 0s ease-out;
        
    }
    .add{background-color:transparent;background-image: url("../img/anadir.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;color:White;border-style:none;height:32px;width:32px;background-repeat:no-repeat;}
    .gra{box-shadow:3px 3px 3px ; background-color:#DEE3E2;background-image: url("../img/anadir.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;color:White;border-style:none;height:100%;width:30%;background-repeat:no-repeat;color:#000;}
    .excel{background-color:transparent;background-image: url("../img/sobresalir.png");margin:3px 3px 3px 3px;color:White;border-style:none;height:32px;width:32px;background-repeat:no-repeat;}
    .excel:hover{
        -ms-transform:scale(1.3,1.3);
        -webkit-transform:scale(1.3,1.3);
        transform:escale(1.3,1.3);
        border-radius:4px;
        transition:all 0s ease-out;
        
    }
    .work{background-color:transparent;background-image: url("../img/iconowork.png");margin:3px 3px 3px 3px;color:White;border-style:none;height:32px;width:32px;background-repeat:no-repeat;}
    .work:hover{
        -ms-transform:scale(1.3,1.3);
        -webkit-transform:scale(1.3,1.3);
        transform:escale(1.3,1.3);
        border-radius:4px;
        transition:all 0s ease-out;
        
    }
    .xml{background-color:#fff;background-image: url("../img/xml-1.png");margin:3px 3px 3px 3px;border-style:none;height:32px;width:28px;background-repeat:no-repeat;}
    .devol{background-color:#fff;background-image: url("../img/devolfac.png");margin:3px 3px 3px 3px;border-style:none;height:32px;width:28px;background-repeat:no-repeat;}
    .edit{background-color:transparent;color:transparent;background-image: url("../img/editar.png");margin:3px 3px 3px 3px;border-style:none;height:38px;width:38px;background-repeat:no-repeat;}
    .edit:hover{
        -ms-transform:scale(1.3,1.3);
        -webkit-transform:scale(1.3,1.3);
        transform:escale(1.3,1.3);
        border-radius:4px;
        transition:all 0s ease-out;
        
    }
    img:hover{
        -ms-transform:scale(1.1,1.1);
        -webkit-transform:scale(1.1,1.1);
        transform:escale(1.1,1.1);
        border-radius:4px;
        transition:all 0s ease-out;
        
    }
    a:hover{
        -ms-transform:scale(1.1,1.1);
        -webkit-transform:scale(1.1,1.1);
        transform:escale(1.1,1.1);
        border-radius:4px;
        transition:all 0s ease-out;
        
    }
    .edita{background-color:transparent;margin:3px 3px 3px 3px;border-style:none;height:32px;width:32px;background-repeat:no-repeat;}
    .editb{box-shadow:3px 3px 3px ;background-color:#DEE3E2;background-image: url("../img/editar.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;border-style:none;height:100%;width:30%;background-repeat:no-repeat;}
    .delb{box-shadow:3px 3px 3px ;background-color:#DEE3E2;background-image: url("../img/borrar.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;border-style:none;height:32px;width:32px;background-repeat:no-repeat;}
    .del{background-color:transparent;background-image: url("../img/borrar.png");margin:3px 3px 3px 3px;color:White;border-style:none;height:32px;width:32px;background-repeat:no-repeat;}
    .udpbot{background-color:transparent;background-image: url("../img/actualizar_icon.png");margin:3px 3px 3px 3px;color:White;border-style:none;height:32px;width:32px;background-repeat:no-repeat;}
    .del:hover{
        -ms-transform:scale(1.3,1.3);
        -webkit-transform:scale(1.3,1.3);
        transform:escale(1.3,1.3);
        border-radius:4px;
        transition:all 0s ease-out;
        
    }
    .error{background-color:transparent;background-image: url("../img/cancelar.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;border-style:none;height:100%;width:150%;background-repeat:no-repeat;}
    .permi{background-color:#fff;background-image: url("../img/bloquear.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;border-style:none;height:32px;width:32px;background-repeat:no-repeat;}
    .det{background-color:transparent;background-image: url("../img/ver.png");margin:3px 3px 3px 3px;border-style:none;height:32px;width:32px;background-repeat:no-repeat;}
    .det:hover{
        -ms-transform:scale(1.3,1.3);
        -webkit-transform:scale(1.3,1.3);
        transform:escale(1.3,1.3);
        border-radius:4px;
        transition:all 0s ease-out;
        
    }
    .back{box-shadow:3px 3px 3px ;background-color:#DEE3E2;background-image: url("../img/volver.png");margin:3px 3px 3px 3px;border-radius:10px 10px 10px 10px;color:White;border-style:none;height:100%;width:30%;background-repeat:no-repeat;color:#000}
    .loginimg{background-color:#fff;margin-left:auto;margin-right:auto;border-radius:10px 10px 10px 10px;border-style:none;height:3%;width:3%;background-repeat:no-repeat;}
    .loginbot{background-image: url("../img/login.png");margin-left:auto;margin-right:auto;border-radius:50%,50%;border-style:none;width:130px;height:35px;background-repeat:no-repeat;}
	.intercambiar{background-image: url("../img/intercambiar.png");margin-left:auto;margin-right:auto;border-radius:50%,50%;border-style:none;width:130px;height:35px;background-repeat:no-repeat;}
    .centrar{text-align:center !important; margin-left:auto !important; margin-right:auto !important;}    
    .iconos { width: 100%; height: 100; }
    .iconosbarra {width: 24px; height: 24px; margin-top: 0%; }
    .pdf{background-color:#fff;background-image: url("../img/pdf-1.png");margin:3px 3px 3px 3px;color:White;border-style:none;height:64px;width:64px;background-repeat:no-repeat;}
    
     .txtdatos{
         color:#fff;
         font-size:0.00001em;
    }
 
    .datos{
        margin-top:15px;
        margin-bottom:15px;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
        
    }
    
    .borde-cir{
        border-radius:3px;
    }
    .buscar-dato
    {
        width:98%;
        margin-top:15px;
        margin-bottom:15px;
        margin-left:auto;
        margin-right:auto;
        text-align:center;
        box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
        border-radius:3px;
        padding:10px 10px 10px 10px;
    }
    .left{
        float:left !important;
    }
    .titulo{
        padding:0px;
        margin:4px;
        font-size:1.5em;
        color: var(--boton-color) ;
        font-weight: bold;
    }
   
    .letras{
        color:var(--boton-color) !important;
        text-decoration:none;
        font-size:1em;
        margin-top:1px;
        margin-bottom:1px;
    }
    
    .letrasn{
        color:#ff8000 !important;
        text-decoration:none;
        margin-top:5px;
        margin-bottom:5px;
    }
    .company-info{
        padding-top:-30px;
        margin-top:-20px;
        margin-bottom:30px;
        margin-left:10px;
    }
    .pie{
        width:80%;
        box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
        border-radius:3px;
        padding-left:10px;
        padding-top:2px;
        padding-bottom:-10px;
        margin-left:auto;
        margin-right:auto;
        margin-top:5px;
        margin-bottom:5px;
        
    }
    .decoraciones{
        list-style: none;
        padding: 0;
    }
    .inline{
        display:inline-block;
        color:var(--verde-fondo);
        background-color: var(--verde-fondo);
        margin-top:15px !important;
        margin-bottom:10px !important;
        margin-left:10px !important;
        margin-right:10px !important;
    }
    /*========= Stylos Menu Pedidos ========*/
    .mesa-card {
        display: inline-block;
        width: 150px;
        height: 150px;
        background: white;
        border-radius: 24px!important;
        margin: 12px;
        padding: 12px;
        text-align: center;
        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }   
    .mesa-card:hover {
        transform: scale(1.07);
        box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    }
    .card-pedido {
        border: 3px solid #ff1a1a;
        box-shadow: 0 0 12px rgba(255, 0, 0, 0.4);
        border-radius: 24px!important;
    }
    .mesa-link {
        text-decoration: none;
        color: #333;
    }
    .mesa-icon {
        width: 40px;
        margin-bottom: 10px;
    }
    .imgicoMenu {
        filter: invert(42%) sepia(95%) saturate(1664%) hue-rotate(85deg) brightness(92%) contrast(92%);
    }
    .img-roja {
        filter: invert(23%) sepia(93%) saturate(7458%) hue-rotate(359deg) brightness(96%) contrast(115%);
    }
    .mesa-info {
        margin-top: 5px;
    }
    .mesa-title {
        display: block;
        font-size: 16px;
        font-weight: 700;
    }
    .mesa-sub {
        display: block;
        font-size: 13px;
        color: #666;
    }
    .art-detalles {
        display: none;
        text-align: left;
        margin-top: 15px;
        padding: 10px;
        background: #f8f9fa;
        border-left: 4px solid #007bff;
        border-radius: 6px;
    }
    .contentCant{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }
    .viewDet {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 35px;
        height: 35px;
        background-color: #e63946;
        border-radius: 50%;
        text-decoration: none;
        transition: 0.3s ease;
        cursor: pointer;
    }

    .viewDet:hover {
        background-color: #ff5c5c;
        transform: scale(1.1);
    }
    .contenObs{
        display:flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
    }

    .contenDet {
        background: #f5f5ed;
        border: 1px solid #333;
        border-radius: 10px;
        padding: 15px;
        margin-top: 10px;
        display: none; /* puedes mostrarlo dinámicamente con jQuery */
        color: #f1f1f1;
        font-family: 'Poppins', sans-serif;
        font-size: 14px;
    }

    .detalle {
        margin-bottom: 10px;
        display: flex;
        flex-direction: column;
    }

    .detalle .etiqueta {
        font-weight: 600;
        color: var(--boton-color);
        margin-bottom: 3px;
    }

    .detalle span {
        font-size: 15px;
    }

    .observacion {
        background-color: #2b2b2b;
        border-left: 4px solid #ff5c5c;
        padding: 8px 10px;
        border-radius: 5px;
        font-style: italic;
        color: #ddd;
        word-wrap: break-word;
    }

    .observacion:empty::after {
        content: "Sin observaciones";
        color: #777;
        font-style: italic;
    }

    .pedido-card {
        background: #121212;
        padding: 15px;
        margin-bottom: 15px;
        border-radius: 12px;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.05);
    }

    .cajaIconos{
        width:100px;
        height:100px;
        display:-webkit-flex;
         display:-moz-flex;
         display:-ms-flex;
         display:-o-flex;
         display:flex;
         align-items:flex-start;
         flex-wrap:wrap;
    }
    .imgico{
        margin:15px;
        width:60px;
        height:auto;
    }
    .imgiArtTienda{
        margin:15px;
        max-width:60px;
        max-height:60px;
        height:auto;
    }
    
    .imgherramientas{
        margin:15px;
        width:30px;
        box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
        border-radius:3px;
    }
    .sombra{
        box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
        border-radius:3px;
        margin-top:2px;
        margin-bottom:2px;
    }
    
    .linea{
        background:#1976D2 ;
        height:2px;
        margin-bottom:-35px;
        margin-top:30px;
        
    }
    .lineapie{
        background:#1976D2 ;
        height:2px;
        margin-bottom:2px;
        margin-top:2px;
        
    }
    .cajaconte{
        width:300px;
        background:#FAFAFA; 
        border-radius:5px; 
        margin:10px; 
        box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
        text-align:justify; 
        padding:20px 20px 20px 20px;
        font-family: var(--body-font); 
        margin-left:auto;
        margin-right:auto;
    }
    .cajaherramientas{
        width:40%;
        height:40px;
        background:#fff; 
        border-radius:5px; 
        margin:10px; 
        box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
        text-align:justify; 
        padding:3px 3px 3px 3px;
        font-family: var(--body-font); 
        margin-left:auto;
        margin-right:auto;
        margin-top:15px;
        margin-bottom:15px;
    }
    .cajaresumen{
        width:60%;
        background:#fff; 
        border-radius:5px; 
        margin:10px; 
        box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
        text-align:center; 
        padding:20px 20px 20px 20px;
        font-family: var(--body-font) ;
        margin-left:auto;
        margin-right:auto;
    }
    
    .margen{
        margin-top:5px;
        margin-bottom:5px;
        margin-left:0;
        margin-right:0;
        padding-top:5px;
        padding-bottom:5px;
        padding-left:0;
        padding-right:0;
    }
    
    .contencentral{
        width:75%;
        border:1px solid #FFF;
        box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
        border-radius:5px 5PX 5PX 10PX; 
        padding-top:15px;
        padding-bottom:15px;
        margin-top:5px;
    }
    .contenadd{
        
    }
    .fieldset{
        box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
        padding:20px 20px 20px 20px;
        margin-top:10px;
        margin-bottom:10px;
        border-radius:5px 5PX 5PX 5PX; 
    }
     
    .input{
        -webkit-appearance: none;
        appearance: none;
        width: 170px;
        font-family: var(--body-font);
        padding: 0px 0px 0px 0px; /* Espacio para el ícono */
        height: 23px;
        font-size: 1em;
        font-weight: 400;
        outline: none;
        box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
        color: var(--boton-color);
        transition: all 0.15s ease;
        border: none;   
        border-radius: 3px; 
        background-color: var(--verde-fondo);         
    }

  
    .input:focus {
        background-color: #EFF3F6;
        border-bottom: 2px solid var(--boton-color);
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
        border-radius: 3px;
        transform: scaleX(1.1);
        transition: all .1s ease;  
    }

    .inputselect{
        
        appearance: none;
        width: 170px;
        font-family: var(--body-font);
        padding: 0px 0px 0px 0px; /* Espacio para el ícono */
        height: 23px;
        font-size: 0.95em;
        font-weight: 400;
        outline: none;
        box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
        color: var(--boton-color);
        transition: all 0.15s ease;
        border: none;   
        border-radius: 3px; 
        background-color: var(--verde-fondo);   
	    /*margin:15px 15px 15px 0;*/
    }
   
    
    .inputselect:focus {
        background-color: #EFF3F6;
        border-bottom: 2px solid var(--boton-color);
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
        border-radius: 3px;
        transform: scaleX(1.1);
        transition: all .1s ease; 
    }       
    
   
    .inputcorto{
        -webkit-appearance: none;
        appearance: none;
        width: 60px;
        font-family: var(--body-font);
        padding: 0px 0px 0px 0px; /* Espacio para el ícono */
        height: 23px;
        font-size: 0.95rem;
        text-align: center;
        background-color: var(--verde-fondo);
        font-weight: 400;
        outline: none;
        box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
        color: var(--boton-color);
        transition: all 0.15s ease;
        border: none;    
        border-radius: 6px;
        /*margin:15px 15px 15px 0;   */
    }
      
    .inputcorto:focus {
        background-color: #EFF3F6;
        border-bottom: 2px solid var(--boton-color);
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
        border-radius: 3px;
        transform: scaleX(1.1);
        transition: all .1s ease;      
    }  

    .controlpagina{
        -webkit-appearance: none;
        appearance: none;
        width: 40px;
        font-family: var(--body-font);
        padding: 0px 0px 0px 0px; /* Espacio para el ícono */
        height: 24px;
        font-size: 0.95rem;
        text-align: center;
        background-color: var(--verde-fondo);
        font-weight: 400;
        outline: none;
        box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
        color: var(--boton-color);
        transition: all 0.15s ease;
        border: none;    
        border-radius: 6px;
        margin-right: 3px;
    }  
    .controlpagina.focus{
        background-color: #EFF3F6;
        border-bottom: 2px solid var(--boton-color);
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
        border-radius: 3px;
        transform: scaleX(1.1);
        transition: all .1s ease;  
    }

    .enviarpagina{
        -webkit-appearance: none;
        appearance: none;
        width: 25px;
        font-family: var(--body-font);
        padding: 0px 0px 0px 0px; /* Espacio para el ícono */
        height: 24px;
        font-size: 0.95rem;
        text-align: center;
        background-color: var(--verde-fondo);
        font-weight: 400;
        outline: none;
        box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
        color: var(--boton-color);
        transition: all 0.15s ease;
        border: none;    
        border-radius: 6px;
        margin-right: 2px;
    }

    .enviarpagina-focus{
        background-color: #EFF3F6;
        border-bottom: 2px solid var(--boton-color);
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
        border-radius: 3px;
        transform: scaleX(1.1);
        transition: all .1s ease; 
    }

    .inputnumerico{
        -webkit-appearance: none;
        appearance: none;
        width: 80px;
        font-family: var(--body-font);
        padding: 0px 0px 0px 0px; /* Espacio para el ícono */
        height: 23px;
        font-size: 0.95em;
        text-align: center;
        background-color: #fff;
        font-weight: 400;
        outline: none;
        box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
        color: var(--boton-color);
        transition: all 0.15s ease;
        border: none;    
        border-radius: 6px;
    }

    .inputnumerico:focus {
        background-color: #EFF3F6;
        border-bottom: 2px solid var(--boton-color);
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
        border-radius: 3px;
        transform: scaleX(1.1);
        transition: all .1s ease; 
    }    
  
    
    #respuestas{
        margin:1em;
        /*padding:1em;*/
        display:none;
    }
    
     table.grand-total {
      margin-bottom: 25px;
      margin-top:25px;
      text-align: right;
      width:80%;
      border-radius:5px 5px 5px 5px;
      box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
     }
      table.grand-total td {
      padding: 5px 10px;
      border: none;
      font-weight: 400;
      font-size: 1em;
      text-align: center;
     }
      table.grand-total .desc {
      background-color: transparent;
     }
     
     .resaltarcolor{
        color:var(--boton-color) ;
        font-size: 0.95rem;      
        margin-bottom:5px;
     }
     
     .resaltaralerta{
        color:red !important;
        font-size:1.1em;
     }
     
     .resaltarletras{
        color:var(--boton-color);
        font-size:1em;
        margin-top:1px;
        margin-bottom:1px;
     }
   
    
    .inputbuscar{
        -webkit-appearance: none;
        appearance: none;
        width: 210px;
        font-family: var(--body-font);
        padding: 2px 2px 2px 35px; /* Espacio para el ícono */
        height: 23px;
        font-size: 0.95em;
        font-weight: 400;
        outline: none;
        box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
        color: var(--boton-color);
        transition: all 0.15s ease;
        border: none;    
        border-radius: 6px;
        margin: 15px 15px 5px 0;                
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAzNTUyNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkuMDIzIDE2Ljk3N2EzNS4xMyAzNS4xMyAwIDAgMS0xLjM2Ny0xLjM4NGMtLjM3Mi0uMzc4LS41OTYtLjY1My0uNTk2LS42NTNsLTIuOC0xLjMzN0E2Ljk2MiA2Ljk2MiAwIDAgMCAxNiA5YzAtMy44NTktMy4xNC03LTctN1MyIDUuMTQxIDIgOXMzLjE0IDcgNyA3YzEuNzYzIDAgMy4zNy0uNjYgNC42MDMtMS43MzlsMS4zMzcgMi44cy4yNzUuMjI0LjY1My41OTZjLjM4Ny4zNjMuODk2Ljg1NCAxLjM4NCAxLjM2N2wxLjM1OCAxLjM5Mi42MDQuNjQ2IDIuMTIxLTIuMTIxLS42NDYtLjYwNGMtLjM3OS0uMzcyLS44ODUtLjg2Ni0xLjM5MS0xLjM2ek05IDE0Yy0yLjc1NyAwLTUtMi4yNDMtNS01czIuMjQzLTUgNS01IDUgMi4yNDMgNSA1LTIuMjQzIDUtNSA1eiIvPjwvc3ZnPg==);
        background-repeat: no-repeat;
        background-position: 5px center;
        background-size: 20px 20px;               
    }

    
    .inputbuscar:focus {
        background-color: #EFF3F6;
        border-bottom: 2px solid var(--boton-color);
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
        border-radius: 3px;
        transform: scaleX(1.1);
        transition: all .1s ease;  
    }    

    
    .inputbuscarfecha{
        -webkit-appearance: none;
        appearance: none;
        width: 210px;
        font-family: var(--body-font);
        padding: 0px 0px 0px 35px; /* Espacio para el ícono */
        height: 23px;
        font-size: 0.95em;
        font-weight: 400;
        outline: none;
        background-color: var(--verde-fondo);
        box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
        color: var(--boton-color);
        transition: all 0.15s ease;
        border: none;    
        border-radius: 6px;
        /*margin: 15px 15px 5px 0;*/
        background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAzNTUyNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNyAxMWgydjJIN3ptMCA0aDJ2Mkg3em00LTRoMnYyaC0yem0wIDRoMnYyaC0yem00LTRoMnYyaC0yem0wIDRoMnYyaC0yeiIvPjxwYXRoIGQ9Ik01IDIyaDE0YzEuMTAzIDAgMi0uODk3IDItMlY2YzAtMS4xMDMtLjg5Ny0yLTItMmgtMlYyaC0ydjJIOVYySDd2Mkg1Yy0xLjEwMyAwLTIgLjg5Ny0yIDJ2MTRjMCAxLjEwMy44OTcgMiAyIDJ6TTE5IDhsLjAwMSAxMkg1VjhoMTR6Ii8+PC9zdmc+);
        background-repeat: no-repeat;
        background-position: 5px center;
        background-size: 20px 20px;                 
    }
    
    .inputbuscarfecha:focus {
        background-color: #EFF3F6;
        border-bottom: 2px solid var(--boton-color);
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
        border-radius: 3px;
        transform: scaleX(1.1);
        transition: all .1s ease;
    }         
    
   

.inputdocumento{
    -webkit-appearance: none;
    appearance: none;
    width: 210px;
    font-family: var(--body-font);
    padding: 0px 0px 0px 35px; /* Espacio para el ícono */
    height: 23px;
    font-size: 0.95em;
    font-weight: 400;
    outline: none;
    box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
    color: var(--boton-color);
    transition: all 0.15s ease;
    border: none;    
    border-radius: 6px;
    /*margin: 15px 15px 5px 0;*/
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAzNTUyNSIgIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE2LjAxOCAzLjgxNSAxNS4yMzIgOGgtNC45NjZsLjcxNi0zLjgxNS0xLjk2NC0uMzdMOC4yMzIgOEg0djJoMy44NTdsLS43NTEgNEgzdjJoMy43MzFsLS43MTQgMy44MDUgMS45NjUuMzY5TDguNzY2IDE2aDQuOTY2bC0uNzE0IDMuODA1IDEuOTY1LjM2OS43ODMtNC4xNzRIMjB2LTJoLTMuODU5bC43NTEtNEgyMVY4aC0zLjczM2wuNzE2LTMuODE1LTEuOTY1LS4zN3pNMTQuMTA2IDE0SDkuMTQxbC43NTEtNGg0Ljk2NmwtLjc1MiA0eiIvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 20px 20px;                 
}

.inputdocumento:focus {
    background-color: #EFF3F6;
    border-bottom: 2px solid var(--boton-color);
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-radius: 3px;
    transform: scaleX(1.1);
    transition: all .1s ease;  
}          
    

 .inputdocumentoa{
    -webkit-appearance: none;
    appearance: none;
    width: 210px;
    font-family: var(--body-font);
    padding: 0px 0px 0px 35px; /* Espacio para el ícono */
    height: 26px;
    font-size: 0.95em;
    font-weight: 400;
    outline: none;
    box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
    color: var(--boton-color);
    transition: all 0.15s ease;
    border: none;    
    border-radius: 6px;
    /*margin: 15px 15px 5px 0;*/
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAzNTUyNSIgIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTE2LjAxOCAzLjgxNSAxNS4yMzIgOGgtNC45NjZsLjcxNi0zLjgxNS0xLjk2NC0uMzdMOC4yMzIgOEg0djJoMy44NTdsLS43NTEgNEgzdjJoMy43MzFsLS43MTQgMy44MDUgMS45NjUuMzY5TDguNzY2IDE2aDQuOTY2bC0uNzE0IDMuODA1IDEuOTY1LjM2OS43ODMtNC4xNzRIMjB2LTJoLTMuODU5bC43NTEtNEgyMVY4aC0zLjczM2wuNzE2LTMuODE1LTEuOTY1LS4zN3pNMTQuMTA2IDE0SDkuMTQxbC43NTEtNGg0Ljk2NmwtLjc1MiA0eiIvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 20px 20px;
 }

 
 .inputcalendario{
    -webkit-appearance: none;
    appearance: none;
    width: 210px;
    font-family: var(--body-font);
    padding: 0px 0px 0px 35px; /* Espacio para el ícono */
    height: 23px;
    font-size: 1em;
    font-weight: 400;
    outline: none;
    background-color: var(--verde-fondo);
    box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
    color: var(--boton-color);
    transition: all 0.15s ease;
    border: none;    
    border-radius: 6px;
    /*margin: 15px 15px 5px 0;*/
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAzNTUyNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNNyAxMWgydjJIN3ptMCA0aDJ2Mkg3em00LTRoMnYyaC0yem0wIDRoMnYyaC0yem00LTRoMnYyaC0yem0wIDRoMnYyaC0yeiIvPjxwYXRoIGQ9Ik01IDIyaDE0YzEuMTAzIDAgMi0uODk3IDItMlY2YzAtMS4xMDMtLjg5Ny0yLTItMmgtMlYyaC0ydjJIOVYySDd2Mkg1Yy0xLjEwMyAwLTIgLjg5Ny0yIDJ2MTRjMCAxLjEwMy44OTcgMiAyIDJ6TTE5IDhsLjAwMSAxMkg1VjhoMTR6Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 20px 20px;   
 }


.inputcalendario:focus {
    background-color: #EFF3F6;
    border-bottom: 2px solid var(--boton-color);
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-radius: 3px;
    transform: scaleX(1.1);
    transition: all .1s ease;
}
 .infoPrincipal{
     display:-webkit-flex;
     display:-moz-flex;
     display:-ms-flex;
     display:-o-flex;
     display:flex;
     justify-content:space-around;
     align-items:flex-start;
     flex-wrap:wrap;
     margin:4px;
     min-height:340px;
 }
 
 .divFlex{
     display:-webkit-flex;
     display:-moz-flex;
     display:-ms-flex;
     display:-o-flex;
     display:flex;
     justify-content:center;
     align-items:flex-start;
     flex-wrap:wrap;
     margin:5px;
 }
 
 .centrarImagen{
     display:-webkit-flex;
     display:-moz-flex;
     display:-ms-flex;
     display:-o-flex;
     display:flex;
     align-items:flex-start;
     flex-wrap:wrap;
     margin:8px;
 }
 
 .infoEmpresa, .infoSistema{
    width:420px;
    background-color:#fff;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    padding-right:20px;
    margin:8px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
 } 
 .infoArqueo{
    width:200px!important;
    background-color:#fff;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:0px;
    padding-right:0px;
    margin:0px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
 }
 .infoHistoria{
    width:420px;
    max-height:420px;
    overflow-y: scroll;
    background-color:#fff;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    padding-right:20px;
    margin:8px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
 }
 .infoEmpresac, .infoSistemac{
    width:80%;
    background-color:#fff;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    padding-right:20px;
    margin:8px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
 }
 .superiorDocumento{
    width:80%;
    height:auto;
    min-height:40px;
    background-color:#fff;
    padding-top:5px;
    padding-bottom:2px;
    padding-left:20px;
    padding-right:20px;
    margin:8px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
    font-size:0.9em;
 } 
 
 .cabeceraDocumento{
    width:400px;
    height:auto;
    min-height:210px;
    background-color:#fff;
    padding-top:10px;
    padding-bottom:15px;
    padding-left:10px;
    padding-right:10px;
    margin:8px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
 }
 .datoscliente{
    display:-webkit-flex;
     display:-moz-flex;
     display:-ms-flex;
     display:-o-flex;
     display:flex;
     align-items:flex-start;
     flex-wrap:wrap;
     margin:8px;
     width:45%;
 }
 .cabeceraDocumentoCliente{
    width:80%;
    height:auto;
    background-color:#fff;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
    display:-webkit-flex;
     display:-moz-flex;
     display:-ms-flex;
     display:-o-flex;
     display:flex;
     align-items:flex-start;
     flex-wrap:wrap;
     margin:4px;
     font-size:0.9em;
 }
 .pieDocumento{
    width:420px;
    height:auto;
    min-height:240px;
    background-color:#fff;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    padding-right:20px;
    margin:8px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
    font-size:0.8em;
 }
 
 .pieHerramientas{
    min-width:310px;
    height:auto;
    background-color:#fff;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:10px;
    padding-right:10px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
    font-size:0.8em;
    display:-webkit-flex;
     display:-moz-flex;
     display:-ms-flex;
     display:-o-flex;
     display:flex;
     align-items:flex-start;
     flex-wrap:wrap;
 }
 
 .infoInterior{
    padding:20px;
    margin-top:15px;
    margin-bottom:15px;
    margin-left:4px;
    margin-right:4px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
    font-size:0.8em;
 }
 
 .infoSoporte{
    width:280px;
    height:240px;
    padding-top:20px;
    padding-bottom:20px;
    padding-left:20px;
    padding-right:20px;
    margin:15px;
    border-radius:6px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
    font-size:1em;
    
 }
 
 .infoPieInt{
    width:100px;
    height:124px;
    padding-top:1px;
    padding-bottom:5px;
    padding-left:5px;
    padding-right:5px;
    margin:4px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
    font-size:0.8em;
 }
 .infoPieherra{
    width:85%;
    min-width:280px;
    height:auto;
    min-height:120px;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:3px;
    padding-right:3px;
    margin-left:auto;
    margin-right:auto;
    margin-top:5px;
    margin-bottom:5px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
    font-size:0.8em;
 }
 
.infoPrincipal p{
    background:var(--boton-color);
    padding-left:5px;
    padding-right:5px;
    padding-top:1px;
    padding-bottom:5px;
    color:#FFF;
    border-radius:5px;
    text-align:center;
    margin-top:1px;
    margin-bottom:10px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
    text-transform:uppercase;
    
} 

.titulosResaltados{
    background:var(--boton-color);
    padding:5px 5px;
    color:#FFF;
    border-radius:5px;
    text-align:center;
    margin-bottom:10px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
    text-transform:uppercase;
}

.pagacon{
     min-width:300px;
     max-width:700px;
     height:auto;
     border-radius:5px 5PX 5PX 5PX;
     box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
     padding:5px 5px 5px 5px;
     margin-left:auto;
     margin-right:auto;
     margin-bottom:10px;
 }
 .imgfacturacion{
        width:30px;
        height:30px;
        margin-top:5px;
        margin-bottom:5px;
        margin-left:4px;
        margin-right:4px;
        padding:1px;
        box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
        border-radius:3px 3PX 3PX 3PX;
    }
    
.imgPiePagina{
    width:35px !important;
    height:35px !important;
    margin-top:4px;
    margin-bottom:4px;
    margin-left:4px;
    margin-right:4px;
    padding:1px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2); 
    border-radius:3px 3PX 3PX 3PX;
}

.inputobservacion{
    -webkit-appearance: none;
    appearance: none;
    width: 280px;
    font-family: var(--body-font);
    padding: 0px 0px 0px 35px; /* Espacio para el ícono */
    height: 23px;
    font-size: 0.95em;
    font-weight: 400;
    outline: none;
    box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
    color: var(--boton-color);
    transition: all 0.15s ease;
    border: none;    
    border-radius: 6px;
    /*margin: 15px 15px 5px 0;*/
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAzNTUyNSIgIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZD0iTTcgN2gxMHYySDd6bTAgNGg3djJIN3oiLz48cGF0aCBkPSJNMjAgMkg0Yy0xLjEwMyAwLTIgLjg5Ny0yIDJ2MThsNS4zMzMtNEgyMGMxLjEwMyAwIDItLjg5NyAyLTJWNGMwLTEuMTAzLS44OTctMi0yLTJ6bTAgMTRINi42NjdMNCAxOFY0aDE2djEyeiIvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 20px 20px;  
 } 
 .totalesdocumento{
     min-width:90%;
 } 
 .caja_buscar{
    -webkit-appearance: none;
    appearance: none;
    width: 210px;
    font-family: var(--body-font);
    padding: 0px 0px 0px 35px; /* Espacio para el ícono */
    height: 23px;
    font-size: 0.95em;
    font-weight: 400;
    outline: none;
    box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
    color: var(--boton-color);
    transition: all 0.15s ease;
    border: none;    
    border-radius: 6px;
    /*margin: 0px 0px px 30px;*/
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAzNTUyNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMTkuMDIzIDE2Ljk3N2EzNS4xMyAzNS4xMyAwIDAgMS0xLjM2Ny0xLjM4NGMtLjM3Mi0uMzc4LS41OTYtLjY1My0uNTk2LS42NTNsLTIuOC0xLjMzN0E2Ljk2MiA2Ljk2MiAwIDAgMCAxNiA5YzAtMy44NTktMy4xNC03LTctN1MyIDUuMTQxIDIgOXMzLjE0IDcgNyA3YzEuNzYzIDAgMy4zNy0uNjYgNC42MDMtMS43MzlsMS4zMzcgMi44cy4yNzUuMjI0LjY1My41OTZjLjM4Ny4zNjMuODk2Ljg1NCAxLjM4NCAxLjM2N2wxLjM1OCAxLjM5Mi42MDQuNjQ2IDIuMTIxLTIuMTIxLS42NDYtLjYwNGMtLjM3OS0uMzcyLS44ODUtLjg2Ni0xLjM5MS0xLjM2ek05IDE0Yy0yLjc1NyAwLTUtMi4yNDMtNS01czIuMjQzLTUgNS01IDUgMi4yNDMgNSA1LTIuMjQzIDUtNSA1eiIvPjwvc3ZnPg==);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 20px 20px;               
}


.caja_buscar:focus {
    background-color: #EFF3F6;
    border-bottom: 2px solid var(--boton-color);
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-radius: 3px;
    transform: scaleX(1.1);
    transition: all .1s ease;        
}
 


.inputefectivo{
    -webkit-appearance: none;
    appearance: none;
    width: 150px;
    font-family: var(--body-font);
    padding: 0px 0px 0px 30px; /* Espacio para el ícono */
    height: 23px;
    font-size: 1.2em;
    font-weight: 400;
    outline: none;
    box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
    color: var(--boton-color);
    background-color: var(--verde-fondo);
    transition: all 0.15s ease;
    border: none;    
    border-radius: 6px;
    /*margin: 15px 15px 5px 0;*/
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgZmlsbD0iIzAzNTUyNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjEgNEgzYTEgMSAwIDAgMC0xIDF2MTRhMSAxIDAgMCAwIDEgMWgxOGExIDEgMCAwIDAgMS0xVjVhMSAxIDAgMCAwLTEtMXptLTEgMTFhMyAzIDAgMCAwLTMgM0g3YTMgMyAwIDAgMC0zLTNWOWEzIDMgMCAwIDAgMy0zaDEwYTMgMyAwIDAgMCAzIDN2NnoiLz48cGF0aCBkPSJNMTIgOGMtMi4yMDYgMC00IDEuNzk0LTQgNHMxLjc5NCA0IDQgNCA0LTEuNzk0IDQtNC0xLjc5NC00LTQtNHptMCA2Yy0xLjEwMyAwLTItLjg5Ny0yLTJzLjg5Ny0yIDItMiAyIC44OTcgMiAyLS44OTcgMi0yIDJ6Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 20px 20px;    
}

.inputefectivo:focus {
    background-color: #EFF3F6;
    border-bottom: 2px solid var(--boton-color);
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-radius: 3px;
    transform: scaleX(1.1);
    transition: all .1s ease;  
}

 
 .inputporc{
     width:65px;
     height:23px;
     box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
     padding-top:1px;
     /*padding-bottom:4px;*/
     padding-left:15px;
     /*padding-right:1px;*/
     /*margin-right:2px;*/
     font-size:1em;
     font-weight: bold;
     /*margin-top:1px;*/
     /*margin-bottom:4px;*/
     border-radius:4px;
     background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiMwMzU1MjUiIHZpZXdCb3g9IjAgMCAzODQgNTEyIj48IS0tIUZvbnQgQXdlc29tZSBGcmVlIDYuNy4yIGJ5IEBmb250YXdlc29tZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tIExpY2Vuc2UgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbS9saWNlbnNlL2ZyZWUgQ29weXJpZ2h0IDIwMjUgRm9udGljb25zLCBJbmMuLS0+PHBhdGggZD0iTTM3NC42IDExOC42YzEyLjUtMTIuNSAxMi41LTMyLjggMC00NS4zcy0zMi44LTEyLjUtNDUuMyAwbC0zMjAgMzIwYy0xMi41IDEyLjUtMTIuNSAzMi44IDAgNDUuM3MzMi44IDEyLjUgNDUuMyAwbDMyMC0zMjB6TTEyOCAxMjhBNjQgNjQgMCAxIDAgMCAxMjhhNjQgNjQgMCAxIDAgMTI4IDB6TTM4NCAzODRhNjQgNjQgMCAxIDAgLTEyOCAwIDY0IDY0IDAgMSAwIDEyOCAweiIvPjwvc3ZnPg==);
     background-repeat:no-repeat;
     color:#2f4713;
 } 

 .codigoarticulo {
    -webkit-appearance: none;
    appearance: none;
    width: 230px;
    font-family: var(--body-font);
    padding: 0px 0px 0px 35px; /* Espacio para el ícono */
    height: 23px;
    font-size: 0.95em;
    font-weight: 400;
    outline: none;
    box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
    color: var(--boton-color);
    transition: all 0.15s ease;
    border: none;    
    border-radius: 6px;
    margin: 0px 0px 0px 0px;                
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSIjMDM1NTI1Ij48cGF0aCBkPSJNNSA3aDJ2MTBINXptOSAwaDF2MTBoLTF6bS00IDBoM3YxMGgtM3pNOCA3aDF2MTBIOHptOCAwaDN2MTBoLTN6Ii8+PHBhdGggZD0iTTQgNWg0VjNINGMtMS4xMDMgMC0yIC44OTctMiAydjRoMlY1em0wIDE2aDR2LTJINHYtNEgydjRjMCAxLjEwMy44OTcgMiAyIDJ6TTIwIDNoLTR2Mmg0djRoMlY1YzAtMS4xMDMtLjg5Ny0yLTItMnptMCAxNmgtNHYyaDRjMS4xMDMgMCAyLS44OTcgMi0ydi00aC0ydjR6Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-position: 5px center;
    background-size: 20px 20px;
}


.codigoarticulo:focus {
    background-color: #EFF3F6;
    border-bottom: 2px solid var(--boton-color);
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-radius: 3px;
    transform: scaleX(1.1);
    transition: all .1s ease;
}

.inputcrear{
    -webkit-appearance: none;
    appearance: none;
    width: 230px;
    font-family: var(--body-font);
    padding: 0px 0px 0px 0px; /* Espacio para el ícono */
    height: 23px;
    font-size: 0.95em;
    font-weight: 400;
    background-color: #fff;
    outline: none;
    box-shadow:0px 2px 5px 3px rgba(0,0,0,.2);    
    color: var(--boton-color);
    transition: all 0.15s ease;
    border: none;    
    border-radius: 6px;
    margin: 3px 3px 3px 0;                
   
}

.inputcrear:focus{
    background-color: #EFF3F6;
    border-bottom: 2px solid var(--boton-color);
    border-left: 0px;
    border-right: 0px;
    border-top: 0px;
    border-radius: 3px;
    transform: scaleX(1.1);
    transition: all .1s ease;
}

table tfoot td.total {
    color: red!important;
    font-weight: bold!important;
    font-size: 1rem!important;
  }
  

table.grand-total {
  margin-bottom: 25px;
  text-align: center;
  width:100%;
 }
table.grand-total td {
  padding: 5px 10px;
  border: none;
  font-weight: 300;
  color: #013ADF;
  font-size: 1em;
  text-align: center;
  margin-bottom:10px;
 }
 table.grand-total .desc {
  background-color: transparent;
 }
 table.grand-total tr:last-child td {
  font-weight: 300;
  color: #2f4713;
  font-size: 1.3em;
  margin:15px;
 }
 
.margendies{
    margin:10px !important;
}    

.tamanodiv{
    width:40px;
    height:40px;
}
.fotos{
    width:150px;
    height:150px;
    border-radius:100%;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
}
.fotosdetalles{
    width:90px;
    height:90px;
    border-radius:100%;
}
.limite{
    width:300px;
}

.barra_estado{
    background-color:#f3f3f3;
    border-radius:inset 0px 0px 0px 5px rgba(0,0,0,.2);
    height:15px;
    margin-top:10px;
    margin-bottom:10px;
}

.cancelenvio{
    background-color:#ed1f3c !important;
}

.barra_zaul{
    background-color:#247CC0;
    border-radius:10px;
    display:block;
    height:15px;
    line-height:center;
    width:0%;
}

.barraverde{
    background-color:#2EA265 !important;
}

.barraroja{
    background-color:#DE3152 !important;
}

#barraestado span{
    color:#fff;
    font-weight:bold;
    line-height:15px;
}

textarea{
   
}


section{
    padding:5px;
}

.fijarcaja{
    justify-content:space-around;
    margin-left:auto;
    margin-right:auto;
    padding:0;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:-o-flex;
    display:flex;
    align-items:flex-start;
    flex-wrap:wrap;
    margin:4px;
    
}
.contenido-principal {
    padding-bottom: 140px; /* Espacio inferior para que el contenido no quede oculto */
}
.menuNavegacion ul{
    
    justify-content:space-around;
    margin-left:auto;
    margin-right:auto;
    padding:0;
    display:flex;
    display:-webkit-flex;
    display:-moz-flex;
    display:-ms-flex;
    display:-o-flex;
    display:flex;
    align-items:flex-start;
    flex-wrap:wrap;
    margin:4px;
    
}

.menuNavegacion ul li{
    list-style:none;
    padding-top:15px;
}

.menuNavegacion ul li a{
    
    margin-left:auto;
    margin-right:auto;
    padding:5px 5px;
    text-decoration:none;
    color:#013ADF;
}

.menuNavegacion ul li a img{
    width:50px;
    height:50px;
}

.menuNavegacion ul li a.active, nav ul li a:hover{
    background:#E8F3DB;
    color:#000;
    transition:0s;
    border-radius:5px;
}



.menuPagarCotizar {
    position: fixed;
    bottom: 0; 
    width: 60%;
    height: 70px;
    background-color: none;   
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: auto;    
    margin-right: auto;
    margin-left: auto;
}


.menuPagarCotizar ul {
    display: flex;
    justify-content: space-around;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}


.menuPagarCotizar li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}


.menuPagarCotizar button {
    background-color: var(--background-amarillofuerte);
    position: absolute;
    width: 130px;
    height: 40px;
    outline: none;
    text-decoration: none;
    font-family: var(--body-font);
    color: var(--text-color);
    font-weight: bold;
    font-size: 1.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;      
    bottom:12px;
    border: none;
    border-radius: 10px;
}
.menuPagarCotizar li select{
    background-color: var(--background-amarillofuerte);
    position: absolute;
    width: 130px;
    height: 40px;
    outline: none;
    text-decoration: none;
    font-family: var(--body-font);
    color: var(--text-color);
    font-weight: bold;
    font-size: 1em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;      
    bottom:12px;
    border: none;
    border-radius: 10px;
}


.menuPagarCotizar i {
    margin-bottom: 0;
    color: var(--text-color);
}


.menuPagarCotizar button:hover {
    background: var(--hover--amarillofuerte); /* Cambio de color al pasar el cursor */
    color: var(--boton-color);
}
@media (max-width: 768px) { 
    .menuPagarCotizar {        
        width: 100%;
        display: flex !important;
        justify-content: flex-end; /* Alinea a la derecha */
        align-items: flex-end; /* Mantiene los elementos en la parte inferior */
        padding: 10px;
    }

    .menuPagarCotizar ul {
        display: flex;
        flex-direction: column; /* Apila los elementos en vertical */
        align-items: flex-end; /* Alinea los elementos a la derecha */
        gap: 15px; /* Espaciado entre cada botón */
        width: auto;
    }

    .menuPagarCotizar li {
        display: flex;
        justify-content: flex-end; /* Alinea los botones dentro del `li` a la derecha */
        width: 100%;
    }

    .menuPagarCotizar button {
        position: static; /* Elimina `absolute` para que no se superpongan */
        width: auto; /* Ajusta al contenido */
        min-width: 130px; /* Tamaño adecuado */
        height: 40px;
        font-size: 0.8em;
        text-align: center;
        border-radius: 10px;
    }
    
    .menuPagarCotizar li select {
        position: static; /* Elimina `absolute` para que no se superpongan */
        width: auto; /* Ajusta al contenido */
        min-width: 130px; /* Tamaño adecuado */
        height: 40px;
        font-size: 14px;
        text-align: center;
        border-radius: 10px;
    }
}

.btnmail{
    width: 100px;  /* Ancho del botón */
    height: 80px; /* Alto del botón */  
    background-color: var(--background-amarillofuerte); /* Color de fondo */
    color: var(--text-color); /* Color del texto e icono */
    border: var(--boton-color);
    border-radius: 10px; /* Bordes redondeados */
    font-size: 50px; /* Tamaño del texto */
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNMjAgNEg2Yy0xLjEwMyAwLTIgLjg5Ny0yIDJ2NWgyVjhsNi40IDQuOGExLjAwMSAxLjAwMSAwIDAgMCAxLjIgMEwyMCA4djloLTh2Mmg4YzEuMTAzIDAgMi0uODk3IDItMlY2YzAtMS4xMDMtLjg5Ny0yLTItMnptLTcgNi43NUw2LjY2NiA2aDEyLjY2OEwxMyAxMC43NXoiLz48cGF0aCBkPSJNMiAxMmg3djJIMnptMiAzaDZ2Mkg0em0zIDNoNHYySDd6Ii8+PC9zdmc+);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: 20px;

}        
.btnmail:hover{
    background-color: var(--hover--amarillofuerte); /* Cambio de color al pasar el cursor */
    color: var(--boton-color);
    
} 





.btnPagar {
    width: 100px;  /* Ancho del botón */
    height: 80px; /* Alto del botón */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--background-amarillofuerte); /* Color de fondo */
    color: var(--text-color); /* Color del texto e icono */
    border: var(--boton-color);
    border-radius: 10px; /* Bordes redondeados */
    font-size: 14px; /* Tamaño del texto */
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

.btnPagar i {
    font-size: 35px; /* Tamaño del icono */
    margin-bottom: 5px; /* Espaciado entre icono y texto */
}

.btnPagar:hover {
    background-color: var(--hover--amarillofuerte); /* Cambio de color al pasar el cursor */
    color: var(--boton-color);
}


.btnPendiente{
    width: 34px;  /* Ancho del botón */
    height: 34px; /* Alto del botón */    
    background-color: var(--background-amarillofuerte); /* Color de fondo */
    color: var(--text-color); /* Color del texto e icono */
    border: var(--boton-color);
    border-radius: 4px; /* Bordes redondeados */    
    cursor: pointer;
    transition: all 0.3s ease-in-out;    
}

.btnPendiente:hover {
    background-color: var(--hover--amarillofuerte); /* Cambio de color al pasar el cursor */
    color: var(--boton-color);
}
a{
    text-decoration:none;
}

.none{
    display:none;
}
.letramenor{
    font-size:0.9em;
   
}
.trinicial{
    color:#ff8000 !important;
    text-align:center;
}
.imgmen{
    width:45px;
    height:auto;
}

.divMenu{
    min-height:320px;
    padding-left:auto;
    padding-right:auto;
    margin-left:-20px;
}





.bodymodal table {
    width:100%;
    border-radius:10px 10px 10px 10px;
}
.imgclientenuevo{
    width:100px;
    height:100px;
}

.trasition:hover{
    -ms-transform:rotateZ(360deg);
    -webkit-transform:rotateZ(360deg);
    transform:rotateZ(360deg);
}
.trasitionf:hover{
    -ms-transform:rotateZ(-170deg);
    -webkit-transform:rotateZ(-170deg);
    transform:rotateZ(-170deg);
    -ms-transform:scale(1.3,1.3);
    -webkit-transform:scale(1.3,1.3);
    transform:escale(1.3,1.3);
    border-radius:50%;
}
.cambio{
    transition:all 0s ease-out;
}

.cambioc{
    transition:all 1s ease-out;
     border-radius:50%;
}
label{
    color: var(--boton-color) ;
    font-size:1.3em;
    font-family: var(--body-font); 
}

.cambiod{
    transition:all 0s ease-out;
}

.sombradiv:hover{
    -ms-transform:scale(1.3,1.3);
    -webkit-transform:scale(1.3,1.3);
    transform:escale(1.3,1.3);
    border-radius:4px;
}

.paginador ul{
	padding:15px;
	list-style:none;
	background:#fff;
	/*margin-top:15px;*/
	display: -webkit- flex;
	display: -moz- flex;
	display: -ms- flex;
	display: -o- flex;
	display: flex;
     justify-content:center;
     align-items:flex-start;
     flex-wrap:wrap;
     border-radius:15px;
}

.paginador input .paginaSelect{
	color:#428bca;
	border: 1px solid #ddd;
	padding:5px;
	display:inline-block;
	font-size:3em;
	text-align:center;
	width:50px;
	background:#000;
	border-radius:15px;
}
.paginador a:hover{
	background:#ddd;
}

.btninicio{
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
    background-color:transparent;
    background-image: url("../img/inicio.png");
    margin:3px 3px 3px 3px;
    border-radius:100%;
    color:White;
    border-style:none;
    height:24px;
    width:24px;
    background-repeat:no-repeat;}        
    
    
.btnultimo{
    background-color:transparent;
    background-image: url("../img/ultimo.png");
    margin:3px 3px 3px 3px;
    border-radius:100%;
    color:White;
    border-style:none;
    height:24px;
    width:24px;
    background-repeat:no-repeat;}        
    
.btnatras{
    background-color:transparent;
    background-image: url("../img/atras.png");
    margin:3px 3px 3px 3px;
    border-radius:100%;
    color:White;
    border-style:none;
    height:24px;
    width:24px;
    background-repeat:no-repeat;}        
.btnadelante{
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
    background-color:transparent;
    background-image: url("../img/proximo.png");
    margin:3px 3px 3px 3px;
    border-radius:100%;
    color:White;
    border-style:none;
    height:24px;
    width:24px;
    background-repeat:no-repeat;}        
            
.paginaSelect{
	color:#FFF;
	background:#428bca;
	border:1px solid #428bca;

}
.izquierda{
    text-align:right;
}
.botenviowh{
    width:100px;
    background:#409F25;
    color:#F3F3F3;
} 
.cienxcien{
    width:100%
}

.achatwh{
    border: none; margin: 10px 0; font-size: 16px;color:#FFFFFF;
}
.achatfc{
    border: none; margin: 10px 0; font-size: 16px;
}
.estyleFooter{
    padding:5px 5px; 
    clear:both;
}
/* style.css */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #000000;
  color: white;
  padding: 8px;
  z-index: 100;
}

.skip-link:focus {
  top: 0;
}
.px32{
    width:32px !important;
    height:32px !important;
    border:0px !important;
}
.btn-noti-activadas {
  background-color: #3498db;
  padding:1rem;
  border-radius:5px;
  color: #fff;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
	border:none;
}

.btn-noti-desactivadas {
  background-color: red;
  padding:1rem;
  border-radius:5px;
  color: #fff;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
	border:none;
}
.oculto {
  display: none !important;
}

.descMo{
    font: size 0.7em!important;
    color: var(--boton-color);
    font-family: var(--body-font); 
}
@media (max-width:600px){
   
	.ocu{
		display:none!important;
	}
	.tablaPrincipalF{
		font-size:0.4em!important;
	}
	.classVer{
		display:block!important;
	}
	.icoMenu{
	    width:24px!important;
        margin-right: 1px;
	}	
        .imgico{
                margin:5px;
                width:36px!important;
        	height:auto;
     	}
    	.descMo{
		font-size:0.5em!important
	}
    .infoLibros{
        width:90%!important;
    }
}
.tablaPrincipalF{
	font-size:0.9em!important;
}
.classVer{
	display:none;
}
.estyloPrecio{
	color:#fff;
	border-radius:15px;
}

.icoMenu{
    width:24px!important;
    margin-right: 10px;

}

.icoDetalles{
    width:24px!important;
}




::before,
::after {
    box-sizing: border-box
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed; 
    left: 0;   
    padding: 0 1rem;
    background-color: var(--background-header);
    top: 0;
    width: 100%!important;
    height: var();
    z-index: var(--z-fixed);
    transition: 0.5s;
}

.header_menu {
    display: flex;
    gap: 6px;
}

/* Botón de menú para móviles */
.header_menu_toggle {
    display: none !important; 
    font-size: 24px;
    cursor: pointer;
}

@media (max-width: 768px) {

    .header_menu_toggle {
        display: block!important;                      /* Mostrar el botón del menú en móviles */
        margin-left: auto;                   /* Empujar el botón a la derecha */
        padding: 10px;
    }

    .header_menu {
        display: flex;    
        position: absolute;
        top: 60px;
        right: 0;
        background-color: #fff;
        flex-direction: column;
        gap: 8px;
        padding: 10px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        border-radius: 8px 0 0 8px;          /* Bordes redondeados solo del lado izquierdo */
        min-width: 60px;                     /* Ancho mínimo basado en el tamaño de los íconos */
        max-width: 80px;                     /* Límite máximo del ancho */
        transform: translateX(100%);         /* Ocultar fuera de la pantalla por defecto */
        transition: transform 0.3s ease-in-out;
        align-items: center;                 /* Centrar los íconos dentro del menú */
    }

    .header_menu.active {
        transform: translateX(0);            /* Mostrar el menú deslizándolo desde la derecha */
    }
}


.header_toggle {
    color: var(--boton-color);
    font-size: 1.5rem;
    cursor: pointer;
    margin-right: 30px;
}

.header_img {
    width: 35px;
    height: 35px;
    display: flex;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden;
    margin-left: auto;     
   
}

.header_img img {
    width: 40px
}

.l-navbar {
    position: fixed;
    top: 0;
    left: -30%;
    width: var(--nav-width);
    height: 100vh;
    background-color: var(--background-navbar);
    padding: .5rem 1rem 0 0;
    transition: .5s;
    z-index: 200;
    font-family: var(--body-font);
}

.l-navbar:hover {
    width: 200px;
     /* Ancho expandido mostrando el texto */
}


.nav {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow: hidden;

}

.nav_logo,
.nav_link {
    display: grid;
    grid-template-columns: max-content max-content;
    align-items: center;
    column-gap: 1rem;    
    padding: .5rem 0 .5rem 1.5rem
}



.nav_logo {
    margin-bottom: 2rem;
    margin-left:-5px;
    
}

.nav_logo-icon {
    font-size: 1.25rem;
    color: var(--white-color)
}

.nav_logo-name {
    color: var(--first-color-light);
    font-weight: 700
}

.nav_link {
    position: relative;
    color: var(--first-color-light);
    margin-bottom: 1.5rem;
    transition: .3s
}

.nav_link:hover {
    color: var(--textcolor-hover);
    background: var(--hover-nav);
}

.nav_icon {
    font-size: 1.25rem
}


.show {
    left: 0
}   

.body-pd {
    padding-left: calc(var(--nav-width) + 1rem);
}

.active {
    font-weight: bold;
    background-color: #ffffffd8;
    color: var(--boton-color);
    width:100%;
}

.active::before {
    content: '';
    position: absolute;
    left: 0;
    width: 2px;
    height: 32px;
    background-color: var(--white-color)
}

.height-100 {
    height: 100vh
}

@media screen and (min-width: 768px) {
    body {
        margin: calc(var() + 1rem) 0 0 0;
        padding-left: calc(var(--nav-width) + 2rem)
    }

    .header {
        height: calc(var() + 1rem);
        padding: 0 2rem 0 calc(var(--nav-width) + 2rem)
    }
    

    .header_img {
        width: 40px;
        height: 40px
    }

    .header_img img {
        width: 45px
    }

    .l-navbar {
        left: 0;
        padding: 1rem 1rem 0 0
    }

    .show {
        width: calc(var(--nav-width) + 156px)
    }

    .body-pd {
        padding-left: calc(var(--nav-width) + 188px)
    }
}

.body-loginform {
    background-color: rgb(245, 244, 237);   
    margin-left: 0;
    margin-bottom: 0px!important;         
}

.link-loginform {
    color: var(--boton-color);
    display: inline-block;
    text-decoration: none;
    font-weight: 400;    
}
.img-container {
    flex: 1; /* Ocupa la mitad del espacio */
    display: flex;
    align-items: center;
    max-width: 80%;
    width: 80%;
    justify-content: center;
    background-color: #f6f6f6;
    padding: 20px;
}

@media screen and (max-width: 1100px) {
    
    .container-loginform {
        display: flex;
        flex-direction: column-reverse !important; /* Imagen debajo del formulario */
        width: 100vw !important; 
        max-width: 100vw !important; 
        height: 100vh; /* Ocupa toda la pantalla */
        min-height: 100vh; /* Evita que el contenido se recorte */
        border-radius: 0;
        box-shadow: none;
        margin: 0;
        padding: 0;
        
    }
    
    .form-container {
        width: 100%;   
        max-height: 50%!important;    
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Mantiene el formulario en la parte superior */
        align-items: center;
        flex-grow: 1; /* Permite que el formulario crezca */
        align-self: stretch; /* Asegura que ocupe todo el ancho disponible */
        margin: 0 !important;
        z-index: 500;
    }
    
    .img-container {
        display: flex;              
        width: 100%;
        margin-top: -90px!important;
        max-width: 100%;
        justify-content: center;
        align-items: center;
        padding: 10px; /* Reducir padding */
        background-color: #f6f6f6;
    }
    
    .img-container img {
        max-width: 80%;
        height: auto;
    }
    
    .wrapper-loginform {
        display: flex;
        flex-direction: column;
    }
    .footer-loginform {
        background-color: #f6f6f6;
        border-top: 1px solid #dce8f1;
        height: 5px!important;
        max-height: 5px!important;
        width: 100vw !important; 
        max-width: 100vw !important; 
        border-radius: 0 0 10px 10px;
        box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
        margin-bottom: 0px;
    } 
}



.title-loginform {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    display: inline-block;
    margin: 40px 8px 10px 8px; 
    color: var(--boton-color);
}

.wrapper-loginform {
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-height: 80vh;
  
}
.form-container {    
    display: flex;
    flex-direction: column;
    justify-content: center;    
}

.container-loginform {
    display: flex; /* Activa Flexbox */
    flex-direction: row;
    align-items: stretch; /* Asegura que ambos elementos tengan la misma altura */
    justify-content: center;
    border-radius: 10px;
    background: #fff;
    padding: 0;
    width: 90%;
    height: 70vh; /* Usa toda la altura */
    max-height: 70vh;   
    margin: 0 auto; 
    max-width: 70%;
    box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
    text-align: center;
    animation: fadeInDown 1s ease-in-out;
    overflow: hidden; 
}
.logo-login {
    width: 500px;
}

.footer-loginform {
    background-color: #f6f6f6;
    border-top: 1px solid #dce8f1;
    padding: 40px;
    border-radius: 0 0 10px 10px;
    box-shadow: 0 30px 60px 0 rgba(0, 0, 0, 0.3);
}      

.btn-loginform {
    background-color: var(--boton-color);
    border: none;
    color: var(--first-color-light);
    padding: 15px 80px;
    text-align: center;
    text-transform: uppercase;
    font-size: 13px;
    box-shadow: 0 10px 30px 0 rgba(95,186,233,0.4);
    border-radius: 5px;
    margin: 5px 20px 40px 20px;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.btn-loginform:hover {
    background-color: var(--hover-color);
    color: var(--textcolor-hover);
}

.btn-loginform:active {
    transform: scale(0.95);
}

.input-loginform {
    background-color: #f6f6f6;
    border: none;
    text-align:center;
    color: var(--boton-color);
    font-weight: bold;
    font-size: 1rem;
    padding: 15px;
    margin: 5px;
    width: 85%;
    border-radius: 5px;
    transition: all 0.3s ease-in-out;
    outline: none;
    border-bottom: 2px solid transparent;
}

.input-loginform:hover{   
    font-size: 1.3rem;         
    border-bottom: 2px solid var(--boton-color);
}

.input-loginform:focus {
    outline: none;
    background-color: #fff;
    border-bottom: 2px solid var(--boton-color);            
}

@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
} 
.nav-item .nav-link{
    font-size: 0.8rem;
    color: var(--boton-color)!important;
    font-weight: bold;
    margin-left:50px;                
    padding: 12px;
    outline: none;
    border-bottom: 1px solid transparent;
    
    
}

.nav-item .nav-link:hover{
    background-color:rgba(246, 246, 246, 0.82);
    font-size: 1.2rem;
    color: var(--textcolor-hover)!important;
    outline: none;
    border-bottom: 3px solid var(--boton-color);
}

.navbar-toggler {
    color: var(--boton-color)!important;
    border: 2px solid var(--boton-color)!important;
}

.navbar-toggler-icon{
    color: var(--boton-color)!important;
}  

#divSoporte {
    display: flex;
    justify-content: center;
    align-items: center;
  }
   

  .modal {
    animation: fadeIn 0.5s ease both;
    background: rgba(0, 0, 0, 0.5);
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: auto; 
    overflow-y: auto!important; /* Permite el desplazamiento si el contenido es largo */
    display: flex; 
    align-items: flex-start; /* Para que el modal crezca hacia abajo */
    justify-content: center;
    padding: 1rem; /* Espacio para evitar que toque el borde */
}

.modal-dialog {
    width: 100%;
    max-width: 1140px; 
    margin: 0 auto;
}

.modal-content {
    width: 100% !important;      /* Asegura que el modal ocupe todo el espacio disponible */
    max-width: 100% !important;  /* Evita que desborde en pantallas grandes */
    box-sizing: border-box;      /* Incluye el padding en el ancho total */
    overflow-x: auto;            /* Permite el scroll horizontal si es necesario */
}

.modal-body {
    overflow: visible!important; /* Sin scroll interno */
    padding: 1rem;
    width: auto!important;
}

.modal-backdrop.show {
    background-color: rgba(0, 0, 0, 0.6) !important;
    backdrop-filter: blur(5px);
}

/* Animación */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive */
@media (max-width: 768px) {
    .modal-dialog {
        width: 90%;
    }
}

.search-container {
    position: relative;
    width:80px;
    margin: 0px auto;
}
#searchInput {
    width: 100%;
    padding: 5px;
    font-size: 14px;
}
.resultsList {
    list-style-type: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    border-top: none;
    max-height: auto;
    overflow-y: auto;
    position: absolute;
    width: 150px;
    background-color: white;
    display: none;
    z-index:999999;
    font-size:0.8em;
}
.resultsList li {
    padding: 5px;
    cursor: pointer;
}

.resultsList li:hover {
    background-color: #f0f0f0;
} 
.botonPagar {
    background-color: var(--background-amarillofuerte);
    width: 130px;
    height: 40px;
    outline: none;
    text-decoration: none;
    font-family: var(--body-font);
    color: var(--text-color);
    font-weight: bold;
    font-size: 1.2em;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;      
    bottom:12px;
    border: none;
    border-radius: 10px;
}
.botonPagar:hover {
    background: var(--hover--amarillofuerte); /* Cambio de color al pasar el cursor */
    color: var(--boton-color);
}

.infoLibros{
    width:30%;
    background-color:#fff;
    padding-top:5px;
    padding-bottom:5px;
    padding-left:20px;
    padding-right:20px;
    margin:8px;
    border-radius:4px;
    box-shadow:0px 2px 5px 1px rgba(0,0,0,.2);
}
/*===== Loader FCI =====*/

.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  z-index: 9999;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: Arial, sans-serif;
  font-size: 24px;
  text-align: center;
}

.loader img {
  width: 120px;
  margin-bottom: 20px;
}

.glitch {
  position: relative;
  font-size: 28px;
  font-weight: bold;
  color: #fff;
  letter-spacing: 2px;
  z-index: 1;
  animation: shift 1s ease-in-out infinite alternate;
}

.glitch:before,
.glitch:after {
  content: attr(data-glitch);
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0.8;
}

.glitch:before {
  animation: glitch 0.4s ease-in-out infinite;
  color: #8b00ff;
  z-index: -1;
}

.glitch:after {
  animation: glitch 0.4s ease-in-out reverse infinite;
  color: #00e571;
  z-index: -2;
}

.loader .brand {
  margin-top: 10px;
  font-size: 20px;
  color: #fee80a;
  letter-spacing: 1px;
}

@keyframes glitch {
  0% { transform: translate(0); }
  20% { transform: translate(-3px, 3px); }
  40% { transform: translate(-3px, -3px); }
  60% { transform: translate(3px, 3px); }
  80% { transform: translate(3px, -3px); }
  100% { transform: translate(0); }
}

@keyframes shift {
  0%, 40%, 44%, 58%, 61%, 65%, 69%, 73%, 100% { transform: skewX(0deg); }
  41% { transform: skewX(10deg); }
  42% { transform: skewX(-10deg); }
  59% { transform: skewX(40deg) skewY(10deg); }
  60% { transform: skewX(-40deg) skewY(-10deg); }
  63% { transform: skewX(10deg) skewY(-5deg); }
  70% { transform: skewX(-50deg) skewY(-20deg); }
  71% { transform: skewX(10deg) skewY(-10deg); }
}
.respuestabus{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    background:#fff;
    border:1px solid #ddd;
    border-top:none;
    max-height:350px;
    overflow-y:auto;
    z-index:9999;
    display:none;
}