:root{ --principal: #6E4F0A; --secundario: #A19B85; --boton_1: #5C4A21; --boton_2: #4e3b0f; } *{ outline:none;} html{ font-family: Arial, Helvetica, sans-serif; background:url(../imgs/fondos/contenedor_jrg.jpg) no-repeat center; background-attachment:fixed; background-size:cover; font-size:0.8rem } body{ position:fixed; width:100%; height:100%; left:0; margin:0;} #fondo_login{ position:fixed; width:100%; height:100%; left:0; margin:0; background:rgba(36,32,23,0.8)} a{ color:#6E4F0A;} h4{ color:#A19B85; text-transform:uppercase} h3{ text-align:center} h3 img{ vertical-align:middle; width:25px; height:25px; margin-right:5px;} h5 > label{ float:right; color:#00AB34; font-weight:bolder} #div_login{ background:url(../imgs/fondos_cont/login.png) #FFF no-repeat; background-size:cover; background-position:right} #div_suc_check{ display:flex; gap:0 20px} #div_suc_check label{ border:1px solid #333; border-radius:5px; padding:10px 20px} #div_suc_check input:checked + label{ background: #A19B85 !important; box-shadow:inset 0 0 5px rgba(0,0,0,0.3)} /*======================== ESTILOS PRINCIPALES ===========================================*/ #comunicado{ background:#ffbd75; z-index: 20; position:fixed; width:15%; height:60%; top:15%; left:5%; padding:20px; border-radius:10px} header{height:10%; top:0; width:100%; display:flex; color:white; background:rgba(0,0,0,0.6)} header > div { height:100%;} header > div a{ color:white} header #div_logo img{ height:70px; width:auto; cursor:pointer; vertical-align:middle} #principal{ overflow:auto; height:90%; padding:1%; width:100%; box-sizing:border-box; background:rgba(0,0,0,0.6)} footer{ position:fixed; width:100%; bottom:0; text-align:center; color:white; padding:20px 0; opacity:0; transition:all 1s ease-in} /* ======================================================== INPUTS =====================================================================*/ input:focus, select:focus, textarea:focus{ border-color:#A19B85; } input[type=radio]:checked + label { background:#A19B85; color:white} .s_remision + label{ border-radius:5px 0px 0 5px; width:100%;} .s_cotizacion + label{ border-radius:0px; width:100%;} .s_consignacion + label{ border-radius: 0 5px 5px 0; width:100% } .s_remision:checked + label{ background:#FF9D1F !important} .s_cotizacion:checked + label{background: linear-gradient(to right, #fc750f 23%,#06d11a 100%) !important} .s_consignacion:checked + label{ background:#4BBC07 !important} .editar, .seleccionar, .detalle_maestro, .devolver, .resetea, .sincronizar{ border:none !important; padding:5px 10px !important;} input[class=guardar_utilidad], input[class=guardar_utilidad]:hover{ width:25px; height:25px; background:url(../imgs/iconos/buttons/save.png) no-repeat center center; background-size:50%; box-shadow:none;} input[class=revisar], input[class=revisar]:hover{ width:25px; height:25px; background:url(../imgs/iconos/comprar.png) no-repeat center center; background-size:50%; box-shadow:none;} input[class=eliminar], input[class=eliminar]:hover{ width:20px; height:20px; background:url(../imgs/iconos/eliminar.png) no-repeat center center; background-size:contain; box-shadow:none;} input[class=resetea], input[class=resetea]:hover{ width:25px; height:25px; background:url(../imgs/iconos/resetear.png) no-repeat center center; background-size:80%; box-shadow:none;} input[class=editar], input[class=editar]:hover{ width:25px; height:25px; background:url(../imgs/iconos/edita.png) no-repeat center center; background-size:70%; box-shadow:none;} input[class=editar], input[class=editar]:hover{ width:25px; height:25px; background:url(../imgs/iconos/edita.png) no-repeat center center; background-size:80%; box-shadow:none;} input[class=seleccionar], input[class=seleccionar]:hover{ width:25px; height:25px; background:url(../imgs/iconos/select.png) no-repeat center center; background-size:80%; box-shadow:none;} input[class=devolver], input[class=devolver]:hover{ width:25px; height:25px; background:url(../imgs/iconos/devolucion.png) no-repeat center center; background-size:80%; box-shadow:none;} input[class=cantidad]{ border:none; width:50px !important; text-align:center; background:none; padding:3px 0px;} input[class=cantidad]:hover{ background:#FFC;} input[class=cantidad]:focus{ background:#FFC; border:1px solid #9C243F; transition:all 0.5s ease-in} input[class=actual]{ background:#A19B85 !important; color:white !important;} input[class=modifica_campo]{ border:none; background:none; text-align:center; font-size:10px; width:100%; box-sizing:border-box} input[class=modifica_campo]:hover{ background:#F7FFB8} input[class=modifica_campo]:focus{ border:1px solid #FF9E04; background:#F7FFB8;} button.nota_credito{ margin:0 !important; background:none !important; padding:0 !important; box-shadow:none !important} button.nota_credito img{ margin:0 !important; height:25px; width:auto;} button.comprar{ margin:0 !important; background:none !important; padding:0 !important; box-shadow:none !important} button.comprar img{ margin:0 !important; height:25px; width:auto;} button.guardar_precios{ margin:0 !important; background:none !important; padding:0 !important; box-shadow:none !important} button.guardar_precios img{ margin:0 !important; height:25px; width:auto;} img[class=agregar]{ float:right; cursor:pointer; height:35px; width:auto;} img[class=agregar_nota_credito]{ float:right; cursor:pointer; height:50px; width:auto;} img[class=boton]{ width:35px; height:35px; padding:5px; border-radius:5px; box-shadow:0 0 5px rgba(0,0,0,0.5); margin-right:5px; background: linear-gradient(to bottom, rgba(226,226,226,1) 0%,rgba(219,219,219,1) 50%,rgba(209,209,209,1) 51%,rgba(254,254,254,1) 100%);} /*====================== TABLAS ================================== */ .fieldset{ box-sizing:border-box; border-radius:5px; background:url(../imgs/fondos_cont/contenedor.jpg) no-repeat #FFF; background-size:100%;} .legend{ text-transform:uppercase; font-weight:bolder; font-size:1.2em; width:100%; color:#222; padding:10px; border-radius:5px 5px 0 0;box-sizing:border-box;} .legend .img_legend{ height:15px; width:auto; margin-right:5px; vertical-align:middle} .contenido{padding:1%; border-radius:0 0 5px 5px; overflow:hidden} .contenedor{ background:#FFF; padding:10px;} .monto_pago{color:#A19B85; } .foco{ background: #A19B85 !important; } .menu_focus { background:#5C4A21 !important; } table th{ background:#5C4A21;} table input, table button{ margin-top:0px} .tabla_dinamica tr td:first-child, .id{ border-bottom:1px solid #A19B85 !important; color:#A19B85 !important;} .paginacion input{ border:1px solid #6E4F0A; color:#6E4F0A; background:none; padding:5px; font-weight:bolder; } .paginate_button{ padding:5px; border:1px solid #6E4F0A; margin:2px; cursor:pointer} .listas_autocomplete li{ color:#6E4F0A; } .listas_autocomplete li:hover{ background:#5C4A21;} .tooltipMenu img{ width:30px; height:30px } .tooltipMenu ul li:hover{ background:rgba(32,171,235,1);} .rounder{ background:#A19B85;} .w_button:hover{ background:#A19B85;} #desgloza_codigo{ text-align:center; padding:10px; } #desgloza_codigo a{ border:1px solid #6E4F0A; border-radius:50%; padding:10px; letter-spacing:2px; font-size:1em} #tabla_precios td:nth-of-type(2){background:#FFF; color: #00C; border:1px solid #00C; font-weight:bold} #tabla_precios td:nth-of-type(3), #tabla_precios td:nth-of-type(4), .precios_1{ background:#AAEE90; border:1px solid #666; text-align:right} #tabla_precios td:nth-of-type(5), #tabla_precios td:nth-of-type(6), .precios_2{ background:#C0DE94; border:1px solid #666; text-align:right} #tabla_precios td:nth-of-type(7), #tabla_precios td:nth-of-type(8), .precios_3{ background:#E9EA72; border:1px solid #666; text-align:right} #tabla_precios td:nth-of-type(9), #tabla_precios td:nth-of-type(10), .precios_4{ background:#EAB73D; border:1px solid #666; text-align:right} #tabla_precios td:nth-of-type(11), #tabla_precios td:nth-of-type(12), .precios_5{ background:#DB805C; border:1px solid #666; text-align:right} #tabla_sucursal_facturas td:nth-of-type(13), #tabla_sucursal_facturas td:nth-of-type(14), #tabla_sucursal_facturas td:nth-of-type(15){ background:#DFDFDF; border:1px solid #666;} #tabla_sucursal_facturas td:nth-of-type(16), #tabla_sucursal_facturas td:nth-of-type(17), #tabla_sucursal_facturas td:nth-of-type(18){ background:#CACACA; border:1px solid #666; white-space:nowrap; text-align:right} #sucursal_inventarios_detalle td:nth-of-type(6){ background:#86CA43;} #sucursal_inventarios_detalle td:nth-of-type(8){ background:#FFF; color: #00C; border:1px solid #00C;} #sucursal_inventarios_detalle td:nth-of-type(9){ background:#DDD;} #sucursal_inventarios_detalle td:nth-of-type(10){ background:#CCC;} #cuentas_pagar tr{ border-bottom: 1px solid rgba(20,20,20,0.4) !important; } #cuentas_pagar i{ font-weight:bolder;} #cuentas_pagar .cabecera_prov{ border:1px solid #039 !important; color:#DFDFDF; background:#4e3b0f; padding:10px;} #cuentas_pagar .cabecera_prov:hover{ background:#4e3b0f !important;} #cuentas_pagar .cabecera_datos td{ font-weight:bolder; background:#CCC;} #cuentas_pagar .precios{ border:none !important; font-weight:bolder;} #cuentas_pagar .por_pagar{ border:none !important; font-weight:bolder; background-image: linear-gradient(to bottom, #ff0000, #d10b32); color:white; font-size:1.2em; padding:10px; text-align:right} #cuentas_pagar .pendientes{ color:red; font-weight:bold; text-align:right} #cuentas_pagar h4{ margin:0}; #sucursal_cortes tr{ background:none !important; border-bottom:1px solid rgba(150,150,150, 0.4); text-align:right} #sucursal_cortes tr td{ border:1px solid rgba(120,120,120,0.3); font-weight:bolder;} #sucursal_cortes tr .precios{ background:#D2FFD7 !important;} #sucursal_cortes tr .existencias{ background:#DFE9FF !important;} #sucursal_cortes tr .deposito{ background:#FDFFC0 !important; color:#CB4A17; cursor:pointer} #sucursal_productos_precios td:nth-of-type(7){background:#FFF; color: #00C; border:1px solid #00C; font-weight:bold} #detalle_de_producto img{ width:15px; height:15px; vertical-align:middle} #resultados_busqueda{overflow:auto; } /*============ OBJETOS CON MISMOS ESTILOS ===============*/ #field_pedidos a{ background:#DDD; padding:3px 10px; margin-right:10px; float:left; border-radius:0 10px 0 0; color:black;} #control_ficha_producto, #control_ficha_proveedor{ overflow:hidden; border-bottom:5px solid #DDD; padding-top:5px} #control_ficha_producto a, #control_ficha_proveedor a{ background:#6E4F0A; color:white; padding:10px 15px; display:inline-block; margin-right:5px; border-radius:3px 3px 0 0; font-weight:bold} #detalle_de_producto .total{background:#EEE;} #detalle_de_producto div input:not([type=button]){ text-align:center;} #detalle_de_producto div h3{ margin:0; } #datos_factura{overflow:hidden; margin-top:10px; text-align:center} #datos_factura h6{ clear:both; margin-top:10px;} #precios_calculados{ height:100%; padding:0 1% 2% 1%;} #precios_calculados h5{text-align:center !important} #precios_calculados h5 input{float:none !important; display:inline !important} #codigos_extras{background:rgba(220,220,220,1); box-shadow:inset 0 0 5px rgba(0,0,0,0.5); border-radius:0 0 5px 5px;} #codigos_extras tr{ border-bottom:1px solid #666} #codigos_extras tr:last-child{ border-bottom:none} #grafica{ border-radius:10px} #grafica legend{ border-radius: 0 0 !important; } #datos_pre h5{font-size:12px; font-family:'Arial Black', Gadget, sans-serif;} #datos_pre h5 label{color:#0A0; float:right; margin-right:5px;} #menu_excel{ border-radius:3px; background:#EDEDED; box-shadow:inset 0px 0 3px rgba(0,0,0,0.5); padding:10px; } #menu_excel .four{ position:relative} #menu_excel .four label{ position:absolute; right:0} #menu_excel h5{ text-align:center; color:#070; margin:2px;} #menu_reportes{ border-radius:10px; margin-bottom:10px; display:flex; padding:10px; background:rgba(0,0,0,0.5)} #menu_reportes div{ display:inline-block; margin:0 2px; text-align:center !important; padding:2px 20px; background:white; border-radius:5px} #menu_reportes input{ width:50px; height:50px !important;} #menu_reportes h5{ text-align:center !important; color:#4e3b0f; margin:2px;} #instrucciones li{ margin-top:5px;} #cargar_logo .imagen{ padding: 10px; border-radius: 5px; box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3); background: rgba(200,200,200,0.2); width:200px; height:200px} #ui-autocomplete-div{position: fixed; top: 204.317px; left: 339.033px; z-index: 1; display: block;} #instrucciones li{ margin-top:5px; font-size:0.9em} #opciones_lr{ margin-top:15px} #opciones_lr > div{ margin-right: 10px;} #opciones_lr a{ display:block; padding:10px 30px; border:1px solid #333; border-radius:5px; box-shadow:0 1px 2px rgba(0,0,0,0.56); color:white} #opciones_lr .boton{ background:#6eabdf; border-color:#6eabdf} #opciones_lr .boton2{ background:#df6e8e; border-color:#df6e8e} #opciones_lr .boton3{ background:#66a765; border-color:#66a765} /*============================================================ CREACION DE CLASES ===============*/ .metas_sucursal{width:80px; text-align:center; font-weight:bold; font-size:1.1em; color:#333; background:none !important; border:none !important} .metas_sucursal:focus{border:1px solid #DEDEDE !important; background:rgba(0,0,0,0.5) !important} .contenedor_sucursales{ overflow:auto; max-height:160px;} .recepcion_padre{ background:#A4A4A4; border:1px solid #777;} .cabecera_recepcion th{ background:none; border-bottom:1px solid #AAA; color:blue; font-size:0.8em; text-align:center;} .cabecera_recepcion:hover{ background:none !important;} #cargar_logo .imagen{ padding: 10px; border-radius: 5px; box-shadow: inset 0px 0px 6px rgba(0,0,0,0.3); background: rgba(200,200,200,0.2); width:200px; height:200px} .solo_detalle h5{ margin:0} .licencia{ font-style:italic; font-size:1.3em; color:#A19B85} .rounder{ background:#A19B85;} .div_sucursales{ margin:20px 0; box-sizing:border-box} .div_sucursales input, .div_sucursales option{ text-align:center !important; font-style:italic;border:none; border-bottom:1px solid #DDD; color:#005A94;} .inputWithIcon input{ padding-left:40px;} .inputWithIcon{ position:relative; } .inputWithIcon.inputIconBg input:focus + i{ color:#fff; background-color:#A19B85;} .inputWithIcon input:focus + i{ color:#A19B85;} .inputWithIcon i{ position:absolute; left:0; top:8px; padding:8px; color:#6E4F0A; transition:.3s;} .inputWithIcon.inputIconBg i{ background-color:#aaa; color:#fff; padding:10px 4px; border-radius:4px 0 0 4px;} .progress { position:relative; width:400px; border: 1px solid #ddd; padding: 1px; border-radius: 3px; } .bar { background-color: #B4F5B4; width:0%; height:20px; border-radius: 3px; } .percent { position:absolute; display:inline-block; top:3px; left:48%; } .contenedor_web{ border-radius:5px; box-shadow: 5px 5px 5px rgba(0,0,0,0.3); background: linear-gradient(to bottom, #EFEFEF 0%, #DEDEDE 100%); width:33%; display:inline-block; box-sizing:border-box; padding:10px; margin:10px 0;} .contenedor_web .rounder{ background:#45d30c; } .contenedor_web .inicio{ background: linear-gradient(to right, #45d30c 1%,#9ae214 100%); padding:10px; margin:0; font-weight:bolder; border-radius:20px 0 0 20px;} .contenedor_web .final{ background: linear-gradient(to right, #9ae214 0%,#ebef0e 100%); padding:10px; margin:0; text-align:right; font-weight:bolder; border-radius:0 20px 20px 0;} #modulo_venta{ width:100%; height:100%} #modulo_venta > div{ height:100%; overflow:auto;} #nav_pedido{ width:99%; height:10%; border-box:box-sizing; align-items:center} #nav_pedido #imagenes_productos img{ height:60px; width:60px; object-fit:cover; margin:0 5px} #detalle_pedido{ width:100%; height:90%;} #tabla_productos{ overflow:auto; height:100%; background:white} #panel_venta{ overflow: auto; position: fixed; right: 0; top: 8%; width:20%; padding-right:1%; box-sizing:border-box; height: 92%;} .table_blue{ } .table_blue tr{ background:white} .table_blue th{ padding:10px; background:#4e3b0f} .table_blue td{ border:1px solid #5C4A21; padding:8px; color:#333; font-weight:bold} .boton_add{ width:100%;} .programado{ background:rgba(235, 255, 180, 0.5); border-right:1px solid #333; border-left:1px solid #333;} .pagado{ background:#169900; color:white; border-right:1px solid #333; border-left:1px solid #333; text-align:right} .fechas{ margin-top:3px;} #impresion_tiket{ text-transform:uppercase; font-weight:bold} #pagos_compras{ display:grid; grid-template-columns:repeat(4,1fr); gap:0 10px} #pagos_compras > div{ border-radius:10px; padding:10px; box-sizing:border-box; text-align:right} #etiqueta{ border:1px solid #333; border-radius:5px; padding:10px; width:500px; height:150px} .precio_etiqueta{ font-size:4em; font-weight:bolder} .white a{ border: 1px solid white; color:white} /*{border:1px dashed #990000;*/}