*{ outline:none;}

:root{ 
	--principal: #f58104;
	--secundario: #ff5f27;
	--boton_1: #ffa13b;
	--boton_2: #f58104;
}

/* ======================================================== ELEMENTOS GENERALES ===========================================================*/

html{ font-family: Arial, sans-serif; width:100%; height:100%; background:url(../imgs/fondos/fondo_limg.jpg) no-repeat center; background-attachment:fixed;  background-size:100% 100%;}
body{ margin:0; font-size:0.8rem; width:100%; height:100%;}

h1, .total{text-align:center; font-size:3.5rem; font-weight:bolder; color:#0B0; margin:0;}

h3{ text-align:center}
h3 img{ width:25px; height:auto; margin-right:10px; vertical-align:middle;}
h4{text-transform:uppercase; clear:both; color:#ff5f27}

a{ text-decoration:none;}
a img{ vertical-align:middle; object-fit:contain}
b{ color:red; margin-right:2px; font-size:10px}
i{ vertical-align:middle;}

#impresion_tiket h2{ border-bottom: 1px dashed #000;}

fieldset{ border:1px solid #CCC; border-radius:5px; margin:10px 0;}
legend{  background:#ff5f27; color:white; font-weight:bolder; padding:8px 20px; border-radius:5px; box-shadow: -2px 1px 1px 0px rgba(0,0,0,0.4)}

/* ======================================================== LOGIN ==========================================================*/
#comunicado{ width:15%; position:fixed; left:5%; height:40%; top:30%; background:#ffbd75; z-index: 20; padding:20px; border-radius:20px; font-size:1.1rem}
#div_login{  background:url(../imgs/fondos_cont/login.png) #FFF no-repeat; background-size:cover; background-position:right}

#div_login2{position:fixed; left:5%; top:2%; width:90%; height:95%; overflow:auto;}

header{ width:100%; height:10%; box-sizing:border-box; display:flex; margin:0; background:rgba(0,0,0,0.6)}
header #logo a{ height:100%; }
header #logo a img{ height:80%; width:auto;  cursor:pointer;}
header strong{ color:white; display:block; font-size:1em}
header strong a{ color:white}
header strong >img{ width:20px !important; height:auto !important; margin-right:5px; vertical-align:middle; padding:2px;}

#menu_cont{ height:10%;}
#menu_cont a{ display:inline-flex}
#menu img, #menu_razones img{ width: 40px; height: 40px; padding: 5px; box-shadow: 0px 1px 1px rgba(0,0,0,0.5); border-radius: 50%; margin: 2px; cursor: pointer; background: rgba(0,0,0,0.5); border:1px solid transparent; transition:0.3s all linear}
#menu img:hover{ border:1px solid #ff5f27}

#principal{ width:100%; overflow:auto; height:90%; padding:0 1%; box-sizing:border-box;    background:rgba(0,0,0,0.6)}
#contenido{ width: 100%; height:100%;}

nav{height:6%;}
#nav{  display:flex;  padding:5px 0}
#nav div{ height:100%;}
#nav .codigo{ width:30%;} 
#nav .descripcion{ width:50%; position:relative;}
#nav .almacen{ width:16%;}
#nav .almacen select{ color:blue; font-weight:bold; border:1px solid #BBB; padding:5px !important }
#nav input{ height:100%; padding:0 0 0 1% !important; width:95%; border-radius:0 !important;}
#nav #buscar{ background:#ff5f27; cursor:pointer;}

#div_tipo_cambio span{ color:white;}
#div_tipo_cambio select{ padding:5px; text-align:center; font-weigth:bolder; color:blue; }
#div_tipo_cambio select option{ padding:5px; color:#444; text-align:center}
#div_tipo_cambio input{ padding:5px}

#tabla_productos{overflow: auto; height:68%; background:#FFF;}

#menu_ventas{ display:flex}
#menu_ventas a{ color:white; padding:10px 20px; font-weight:bolder; border-right:1px solid rgba(80,80,80,0.5);  line-height:2 !important}
#menu_ventas a i{font-size:2rem;}

#paneles{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; height:25%; grid-template-rows:100%; padding:10px 0; box-sizing:border-box}
#paneles > div{ height:100%; overflow:auto; padding:10px; box-sizing:border-box;  background:rgba(50,50,50,0.5)}

footer{ position:fixed; width:100%; bottom:0; text-align:center; color:white; padding:20px 0; opacity:0; transition:all 1s ease-in}


/* ======================================================== ESTILO DEL MENU =====================================================================*/


#pie_tabla{ background:none !important; border:none !important}
#pie_tabla td[class=precios]{ text-align:right; color:#090; font-size:1.2em; border:1px solid #090; border-top:none; white-space:nowrap; padding:5px 10px;}
#pie_tabla:hover{box-shadow:none !important; background:none !important;}

.impresion_ticket{ text-transform:uppercase; font-weight:bold}
.impresion_ticket img{ height:70px; width:auto;}

#datos_venta fieldset{ background:white !important; box-shadow:none;}

#cabecera_ticket{ text-align:center}

#contenedor_inventario{ position:inherit; width:100%; height:100%; background:#DEDEDE; }
#fechas{  width:10%; height:100%; overflow:auto;}
#fechas a{ display:block; padding:10px 5px; background:#f58104; color:white; text-align:center; margin-left:5px; border-radius:5px 0 0 5px}

.fechas{ display:flex; margin-top:3px} 

#acciones_inventario{ width:100%; background:#DEDEDE; padding:10px 0; }
#acciones_inventario a{ padding:5px 20px; color:red; border-left:1px solid #AAA; background:linear-gradient(to bottom, #e2e2e2 0%,#dbdbdb 50%,#d1d1d1 51%,#fefefe 100%);}
#acciones_inventario a img{ height:40px; width:auto; vertical-align:middle; margin-right:20px}

#detalle_inventario{ width:90%; height:100%; overflow:auto; background:white;}

#field_pedidos a{ background:#DDD; padding:10px 20px; margin-right:10px; float:leftr}
#pedidos{ clear:both; overflow:auto; border-top:4px solid #EEE;}

#resultados_terminar{ overflow:hidden; text-align:center; margin-bottom:10px;}
#resultados_terminar figure img{ width:30%; height:auto; vertical-align:middle; }

#control_ficha_producto{ overflow:hidden; border-bottom:2px solid rgba(0,0,0,0.2); margin-bottom:10px}
#control_ficha_producto a{ background:#f58104; color:white; padding:15px 25px; border-radius:5px 5px 0 0; display:inline-block; margin-right:5px;}

img[class=denominacion]{height:25px; width:auto;}



/* ======================================================== ESTILO DE CAPAS ALTERNAS =====================================================================*/
#fondo, #cristal{background:rgba(0,0,0,0.5); top:0; left:0; width:100%; height:100%; z-index:1; cursor:pointer; }
#fondo, #cristal, #contenedor, #contenedor2, #resultados{position:fixed;}

#cristal{ cursor: default;}

#contenedor{z-index:3;}
#contenedor2{z-index:4;}
#contenedor3{z-index:5;}
#contenedor, #contenedor2{  width:90%; left:5%; top:5%; max-height:90%; overflow:auto;  border-radius:10px;}

.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:#444444; padding:10px; border-radius:5px 5px 0 0;box-sizing:border-box;}
.img_legend{ height:15px; width:auto; margin-right:5px; vertical-align:middle}
.contenido{  height:100%; padding:1%; border-radius:0 0 5px 5px; overflow:hidden}

#contenedor .fieldset{ box-shadow:none !important}

#loading{ top:35%; position:fixed; width:10%; left:44%; background:rgba(0,0,0,0.7); z-index:100; box-shadow:0 0 10px rgba(0,0,0,0.7); text-align:center; border-radius:10px; padding:1%}
#loading >img{ width:100%; height:100%}

#resultados{ width:30%; z-index:5; bottom:0; right:1%; transition:all 0.5s linear; color:white; }
#resultados h3{ padding:10px; border-radius:10px; box-shadow:0 0 20px rgba(0,0,0,0.5)}
#resultados h3.ok{ background:#21CA00; color:white}
#resultados h3.error{ background:#F00; color:white}
#resultados h3.advertencia{ background:#FC3; color:white}

/* ======================================================== INPUTS =====================================================================*/
input:focus, select:focus, textarea:focus{ border-color:#ff5f27; }
input[type=radio]:checked + label { background:#ff5f27; color:white}

#tipo_venta input[type=radio] + label img { vertical-align:middle; width:auto; height:20px; margin-right:5px;}

#forma_pago img{ vertical-align:middle; height:20px;}
#forma_pago label{ padding:10px 0; background:none !important }

#remision + label{ border-radius:5px 0 0 5px; padding:8px 5px; box-sizing:border-box;}
#cotizacion + label{ border-radius:0 5px 5px 0;  padding:8px 5px; box-sizing:border-box;}
#pago_meses input + label{ border-radius:5px;}


#tipo_usuario label{ padding:10px !important; box-sizing:border-box;}
#tipo_usuario #remision + label{ border-radius:5px 0 0 5px;}
#tipo_usuario #cotizacion + label{ border-radius: 0 !important}
#tipo_usuario #consignacion + label{ border-radius: 0 5px 5px 0}

/*====================================================== ESTILOS DE BOTONES CON IMAGEN ===============*/


img[class=boton]{ 
	width:35px; height:35px; padding:5px; border-radius:5px; box-shadow:0px 2px 2px 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%);}
img[class=boton]:hover{
	background: linear-gradient(to bottom, #ffa13b 0%, #f58104 50%,#f58104 51%,#ffa13b 100%);}

img[class=revisar]{ height:15px !important; width:auto;}

.detalle_maestro, .devolver, .resetea, .revisar, .recuperar, .adjuntar{ 
	border:none !important; padding:5px 10px !important; background-size:80% !important; box-shadow:none !important; width:30px; height:30px;}

input[class=adjuntar], input[class=adjuntar]:hover{ background:url(../imgs/iconos/adjuntar.png) no-repeat center center;}

input[class=devolver], input[class=devolver]:hover{ background:url(../imgs/iconos/devolucion.png) no-repeat center center;}
input[class=revisar], input[class=revisar]:hover{ background:url(../imgs/iconos/revisar.png) no-repeat center center;}
input[class=resetea], input[class=resetea]:hover{ background:url(../imgs/iconos/resetear.png) no-repeat center center;}
input[class=recuperar], input[class=recuperar]:hover{ background:url(../imgs/iconos/editar.png) no-repeat center center;}
input[class=cantidad]{ border:none; text-align:center; background:none; border-radius:3px; padding:5px;}
input[class=cantidad]:hover{ background:#FFC;}
input[class=cantidad]:focus{ background:#FFC; border:1px solid #9C243F;}
img[class=agregar]{ float:right; cursor:pointer; height:35px; width:auto;}

.cancelar_mov, .cancelar_mov:hover{ color:white; padding:0px !important; font-size:0.8em !important; background:none; box-shadow:none !important}
.cancelar_mov img{ margin:0 !important;}

button.buscar_tienda,
button.membresias,
button.add_adelanto,
button.pagar_venta,
button.remision,
button.back,
button.cargos, 
button.vender, 
button.traspasar, 
button.comprar, 
button.cancelar,
button.cancelar_recepcion,
button.cancelar_detalle,
button.usar_membresia,
button.usar_servicio, 
button.agendar,
.mov_clientes{ background:none !important; padding:0 !important; box-shadow:none !important}

button.buscar_tienda img,
button.membresias img,
button.add_adelanto img,
button.pagar_venta img,
button.remision img,
button.back img,
button.cargos img, 
button.vender img, 
button.traspasar img, 
button.comprar img, 
button.cancelar img,
button.cancelar_recepcion img,
button.cancelar_detalle img,
button.usar_membresia img,
button.usar_servicio img,
button.agendar img,
.mov_clientes img{ margin:0 !important; height:20px; width:auto;}

.menu_focus{ background:#ffa13b !important}
.menu_focus h5{ color:white !important}

.metas_sucursal{ text-align:center;font-weight:bold}

/* ======================================================== CLASES =====================================================================*/
.ok{ color:#0A0;}
.error{ color:#F00;}
.advertencia{ color:#FC3;}

.boton{ cursor:pointer;}
.foco{ background:#ff5f27 !important; box-shadow:inset 1px 1px 10px rgba(0,0,0,0.6) !important; color:white !important;}
.foco2{ background:#ff5f27 !important; box-shadow:1px 1px 3px rgba(0,0,0,0.5); color:white !important;}


.total_registros{ color:#888; text-shadow:none !important;}
.total_registros >span{  margin-left:5px; display:inline; color:#ff5f27; padding:5px; border-radius:2px;}

.total{ background:none; border:none !important;}
.totales{ font-weight:bold;  background:#A2F59F;  white-space: nowrap; text-align:right}
.precios{ font-weight:bold; border:1px solid #060; color:#060;  white-space:nowrap; text-align:right}
.xml{ text-decoration:none; padding:2px 6px; border-radius:3px; color: white; background:#063;}

.m_red,
.m_blue,
.m_yellow,
.m_green{
	padding:5px 10px;color:#333;}

.m_blue{ background:#B6DFFF; border:1px solid #84A4FF;}
.m_yellow{ background:#FFFDCF; border:1px solid #F9DD23;}
.m_green{ background:#A0FFB9; border:1px solid #63DA82;}

.listas_autocomplete{ margin:0; padding:0; position:relative; box-shadow:0px 10px 10px rgba(0,0,0,0.2); z-index:3; width:95%;  border-radius: 0 0 10px 10px}
.listas_autocomplete li{ overflow:hidden; color:#222; background:white; padding:5px 10px; list-style:none; cursor:pointer; border-bottom:1px solid #DDD; font-weight:bolder;}
.listas_autocomplete li:last-child{border-bottom:none; border-radius: 0 0 10px 10px}
.listas_autocomplete li:nth-child(odd){background:white}
.listas_autocomplete li:nth-child(even){background:#F3F3F3}
.listas_autocomplete li:hover{ color:white; background:#ff5f27; box-shadow:inset 0 0 5px rgba(0,0,0,0.5);}
.listas_autocomplete strong{float:right; color:#00C}

.corte td{ padding:10px;}
.corte tr{ border-bottom:1px solid #555; background:white !important;}
.corte h4{margin:0; text-align:left; overflow:hidden}
.corte h4 label{ float:right;}

.blanco{ color:white}

.izquierda{ float:left; width:50%; overflow:hidden;}
.derecha{ float:right; width:50%; overflow:hidden;}

.desgloce{background:none !important; color:#03C; font-weight:initial}
.name_sucursal{color:#06783A !important;  font-size:1.7em !important}
.cabecera{ text-align:center;}
.cabecera td{color:#06783A !important; font-weigth:bolder;}
.dragged { position: absolute; opacity: 0.5; z-index: 2000;}

.existencias{ color:#00C;}
.existencias_av{ border:1px solid #C00; color:#C00;}

.modifica_campo{ border:none; border:1px solid transparent; background:none; font-style:italic; text-align:left}
.modifica_campo:hover{ background:white; border:1px solid #EDF3C4 }
.modifica_campo:focus{ border:1px solid #f58104; background:white;}

.pdf { transition:all 0.2s linear; background-image: linear-gradient(to bottom, #ff0000, #d10b32); border-radius: 5px; font-family: Arial; color: #ffffff !important; font-size: 12px; padding: 10px 20px 10px 20px; text-decoration: none;}	
.pdf:hover { box-shadow:0 5px 3px rgba(0,0,0,0.5); transition:all 0.2s linear }

.xml { transition:all 0.2s linear; background-image: linear-gradient(to bottom, #18d62f, #068915); border-radius: 28px; font-family: Arial; color: #ffffff !important; font-size: 12px; padding: 10px 20px 10px 20px; text-decoration: none;}	
.xml:hover { box-shadow:0 5px 3px rgba(0,0,0,0.5); transition:all 0.2s linear }

.b_button { transition:all 0.2s linear; background-image: linear-gradient(to bottom, #0196FE ,#0188E6); border-radius: 28px; font-family: Arial; color: #ffffff !important; font-size: 12px; padding: 10px 20px 10px 20px; text-decoration: none;}	
.b_button:hover { box-shadow:0 5px 3px rgba(0,0,0,0.5); transition:all 0.2s linear }


.datos_pagos{ background:rgba(220,220,220,0.5); padding:2%; box-shadow:inset 0 0 10px 1px rgba(0,0,0,0.5); overflow:hidden}

.no_result{ background: rgba(220,220,220,0.3); text-align:center !important; display:inline-block; padding:2%; border-top:10px solid #f58104;
box-shadow:0px 0px 3px #999; border-radius:5px; color:#f58104 !important;}

.label2{background:#89D4FF; border-radius:5px; padding: 5px 9px; font-weight:bold; color:#333}
.stock_min{ border:1px solid #999; background:#DDD;}
.stock_max{ border:1px solid #999; background:#CCC;}
.precio_0{ color:red; font-weight:bolder;}
.rojo{ border:1px solid #C00; color:#C00; background: rgba(255,0,0,0.1)}

.notas_interes li{ margin-top:10px;}

#sign_dollar{font-size:5em; color:#0B0 !important; background:none !important; padding:12px 0; background:none}

label img{vertical-align:middle}

/* ======================================================== TABLAS =====================================================================*/

table tr:hover{ background:rgba(255,195,65,0.2);}

tr[class=detalle_kit]{ box-shadow:inset 0 2px 3px rgba(0,0,0,0.3); border:1px solid white; background:rgba(255,195,65,0.2) !important}
tr[class=detalle_kit]:hover{ color:black;}

tr[class=promociones]{ box-shadow:inset 0 2px 3px rgba(0,0,0,0.3); border:1px solid white; background:rgba(85,208,154,0.8) !important}
tr[class=promociones]:hover{ color:black;}

table.denominacion tr{ background:none !important; border-bottom:1px solid rgba(0,0,0,0.3)}
table.denominacion tr:hover{ color:black}
table.denominacion th img{ width:30px; height:30px; margin-right:10px}

table th{ background:#444444;}
.tabla_dinamica tr td:first-child, .id{  text-align:center; color:#ff5f27; font-weight:bolder}

#tabla_tiket tr, #tabla_tiket th{ background:white !important; color:black; border:none}
table.blanco tr, table.blanco tr:hover{ background:none; color:black}
table.blanco td{ border:none;}


/* ======================================================== Recargas =====================================================================*/
#puntos_acumulados{text-align:center; color:yellow; font-size:16px; background:none; border:none}

#paredes{overflow:hidden;}
#paredes div{ width:30%; margin:1.6%; height:210px; overflow:auto; float:left}
#paredes div img{ width:100% !important; height:100%; cursor:pointer; margin:0}

#carousel { width:100%; height:350px; position:relative; clear:both; overflow:hidden;}
#carousel img { display: hidden; cursor: pointer; box-shadow:0 0 12px rgba(0,0,0,0.8); }
#acciones_paredes{ text-align:center; clear:both; margin-top:10px;}
#acciones_paredes button{ border-radius:0px; margin:0 !important}

div.detalle_pared{ margin:20px 0;}
div.detalle_pared h3{ background:#AAA; padding:5px; margin:0; border-radius:0 0 5px 5px; color:#EEE; text-align:left}
div.detalle_pared h3 .eliminar{ margin:0}
#detalle_pared .modifica_campo, #detalle_pared .modifica_campo2{ text-align:left !important}

div.carril{ height:120px; width:100%; background:#DDD; text-align:left; box-shadow:inset 0 2px 9px rgba(0,0,0,0.7); border-radius:5px 5px 0 0;}

div.estiba{ height:100px; width:100px; margin:10px; background:#F45; float:left; cursor:pointer; position:relative; box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:5px;}
div.estiba img{ width:100%; height:100%; border-radius:5px;}
div.estiba h6{ position:absolute; bottom:0; margin:0; text-align:center; width:100%;; background:rgba(0,0,0,0.8); color:white; padding:4px 0; border-radius:0 0 5px 5px}

div.add_estiba{ height:96px; width:96px; margin:10px; background:#CCC; float:left; cursor:pointer; box-shadow:0 0 5px rgba(0,0,0,0.5); border-radius:5px; border:2px dashed #AAA;}
div.add_estiba img{ width:80px; height:80px; margin:7px;}

div.detalle_estiba{ text-align:center; background:#DEDED; padding:10px;}
div.detalle_estiba div{margin:10px 0; display:table}
div.detalle_estiba div > h3{display:table-cell; vertical-align: middle; letter-spacing:1px; font-size:18px;}
div.detalle_estiba div > h3 > label{ font-size:10px;}

div.tam_1{ width:100%; height:120px; background:#DDD; }
div.tam_2{ width:100%; height:80px; background:#AAA;}
div.tam_3{ width:100%; height:40px; background:#666;}

#sucursal_productos_v td:nth-child(10){ background:#AAEE90; border:1px solid #666;}
#sucursal_productos_v td:nth-child(11){ border:1px solid #00C; color:#00C;}
#sucursal_productos_v td:nth-child(11) a{color:#00C;}
#sucursal_productos_v td:nth-child(12){border:1px solid #999; background:#DDD; }
#sucursal_productos_v td:nth-child(13){border:1px solid #999; background:#CCC;}

#sucursal_productos_precios td:nth-child(7){ background:#a3cef6;}

#sucursal_productos_precios2 td:nth-child(6),
#sucursal_productos_precios2 td:nth-child(7),
#sucursal_productos_precios2 td:nth-child(8){ background:#AAEE90; border:1px solid #666; text-align:right}

#sucursal_productos_precios2 td:nth-child(9),
#sucursal_productos_precios2 td:nth-child(10),
#sucursal_productos_precios2 td:nth-child(11){ background:#C0DE94;  border:1px solid #666; text-align:right}

#sucursal_productos_precios2 td:nth-child(12),
#sucursal_productos_precios2 td:nth-child(13),
#sucursal_productos_precios2 td:nth-child(14){ background:#E9EA72;  border:1px solid #666; text-align:right}

#sucursal_productos_precios2 td:nth-child(15),
#sucursal_productos_precios2 td:nth-child(16),
#sucursal_productos_precios2 td:nth-child(17){ background:#EAB73D;  border:1px solid #666; text-align:right}

#sucursal_productos_precios2 td:nth-child(18),
#sucursal_productos_precios2 td:nth-child(19),
#sucursal_productos_precios2 td:nth-child(20){ background:#DB805C; border:1px solid #666; text-align:right}


#resultados_busqueda{ overflow:auto;}
#resultados_busqueda #sucursal_lotes_detalle td:nth-child(9){ color:#090; border:1px solid #666;}
#resultados_busqueda #sucursal_lotes_detalle td:nth-child(10){ color:#555; border:1px solid #666;}
#resultados_busqueda #sucursal_lotes_detalle td:nth-child(11){ color:#00C; border:1px solid #666;}

.dataTables_filter{margin:5px 0}
.dataTables_filter label{ font-weight:bolder;}
.dataTables_filter label input{ width:50%; display:block; background:#FCFFDC; border:1px solid #AAA}
.dataTables_info{ text-align:center; font-weight:bolder; margin:10px;}

.tooltipMenu{ border: 1px solid #DDD; border-radius:5px; background:#FFF; box-shadow:-5px 5px 5px rgba(0,0,0,0.3); padding:5px;}
.tooltipMenu ul{ text-align:left; padding:0; list-style:none;}
.tooltipMenu ul li{ padding:8px 5px;}
.tooltipMenu ul li:hover{ background:rgba(255,195,65,0.2);}
.tooltipMenu ul li:hover a{ color:white}
.tooltipMenu ul li input{ vertical-align: middle; margin-right:5px}
.close_submenu{ position:absolute; right:-10px; top:-10px;}



.utilidad_producto{ width:100px;}
#tabla_productos tr{ font-weight:bolder}
#tabla_productos input, #tabla_productos select{ padding:5px !important}

/* ======================================================== ESTILOS A LA MEDIDA =====================================================================*/

.resaltado{ background:rgba(255,195,65,0.2) !important;}
.figure_almacen{ width:40%; display:inline-block; margin:2% 3%}
.figure_almacen td > img{ width:50%; height:auto}
.figure_almacen tr{ background:none !important; }
.figure_almacen tr:hover{ background:none; color:black;}
.figure_almacen a{ color:white}
.figure_almacen .pie_almacen{ padding:0 5px; text-align:left; background:rgba(20,20,20,0.8); border-radius:10px}
.figure_almacen .pie_almacen img{ vertical-align:middle; height:25px; width:30px; margin-right:5px;}
.figure_almacen textarea{ text-align:center; height:20px}


figure{ cursor:pointer; text-align:center; float:left; position: relative; }
figure img{ width:80%; height:auto; max-width:100%;}

figure.terminales{ cursor:pointer; text-align:center; display:inline-block; height:300px; width:100%; position: relative; padding:0; margin:0; box-sizing:border-box;}
figure.terminales div{ position:absolute; top:15%; width:90%; left:5%;  }
figure.terminales article{ position:absolute; bottom:0; right:0}
figure.terminales img{ height:100%; width:auto;}

figure.servicio{ border-radius:10px;  transition:all 0.3s ease-in; width:98%; float:none; margin:1% 0; background:url(../imgs/iconos/fondo_serv.png) left no-repeat rgba(0,0,0,0.8); background-size:cover;}
figure.servicio img{ height:60px; width:auto;}
figure.servicio h3{ color:white}
figure.servicio:hover{ background:url(../imgs/iconos/fondo_serv.png) left no-repeat rgba(255,0,0,0.9); background-size:cover; transition:all 0.3s ease-out}
figure.servicio .id{ border-radius:10px 0 0 10px}

figure.servicio:before, figure.servicio:after{ content: ''; position: absolute; z-index: -2; }
figure.servicio{box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset}

figure.sel_promo{transition:all 0.3s ease-in; width:30%; height:166px; margin:1% 1.5%; background:url(../imgs/iconos/cerveza.png) left no-repeat rgba(0,0,0,0.3); background-size:cover; display:table;}
figure.sel_promo:hover{ background:url(../imgs/iconos/cerveza.png) left no-repeat rgba(0,0,0,0.3); background-size:cover; transition:all 0.3s ease-out;}
figure.sel_promo .titulo{ background:rgba(0,0,0,0.8); color:#EFEFEF; font-weight:bolder; padding:5px; border-radius:5px 5px 0 0; display:table-row;}
figure.sel_promo .contenido_promo{ vertical-align:middle; display:table-cell; height:100%;}
figure.sel_promo ul{ text-align:left; font-weight:bold; color:#DEDEDE}
figure.sel_promo:before, figure.servicio:after{ content: ''; position: absolute; z-index: -2; }
figure.sel_promo{box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset}

figure.servicio{ border-radius:10px;  transition:all 0.3s ease-in; width:24%; margin:0.5%; background:url(../imgs/iconos/fondo_serv.png) left no-repeat rgba(0,0,0,0.8); background-size:cover;}
figure.servicio img{ height:60px; width:auto;}
figure.servicio h3{ color:white}
figure.servicio:hover{ background:url(../imgs/iconos/fondo_serv.png) left no-repeat rgba(255,0,0,0.9); background-size:cover; transition:all 0.3s ease-out}
figure.servicio .id{ border-radius:10px 0 0 10px}

figure.servicio:before, figure.servicio:after{ content: ''; position: absolute; z-index: -2; }
figure.servicio{box-shadow: 0 15px 10px -10px rgba(0, 0, 0, 0.5), 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset}


.paginate_button{ padding:5px; border:1px solid #f58104; margin:2px; cursor:pointer }
.dataTables_paginate{ padding:10px; text-align:center}
.dataTables_paginate span{ display:inline !important; }


#detalle_proyecto{ padding:0 10px; }

#tabla_taras tr{ background:none}
#tabla_tareas tr td{padding:10px; text-transform:uppercase}
#tabla_tareas tr td i{ font-size:1em}
#tabla_tareas2 .tarea{ background:white; border:1px solid #DDD}
#tabla_tareas2 .incluye{ background:#DDD; border-bottom:1px solid rgba(0,0,0,0.2)}

#panel_sistemas > div{ width:12%; margin:0 10px; position:relative}
#panel_sistemas input[type=radio] + label{ border-radius:10px; padding:10px; box-sizing:border-box}
#panel_sistemas input[type=radio] + label i{ position:absolute; top:-5px; right:-10px; font-size:2em}

#panel_proy{ width:100%; height:600px;}
#panel_proy > div{ height:100%; overflow:auto;}
#panel_proy input[type=radio] + label{ text-align:left; background: linear-gradient(to bottom, #fff9c6 0%, #faf098 100%); box-shadow: 0px 3px 2px rgba(0,0,0,0.2); margin:5px 0; box-sizing:border-box; padding:10px; border-radius:10px; color:#333}
#panel_proy input[type=radio]:checked + label{ background: linear-gradient(to bottom, #ff9f6b 0%, #f97d3a 100%);}
#panel_proy label p{ }
#panel_proy input[type=radio]:checked + label p{ color:#333}




table.formato_celda label{ display:inline-block}
table.formato_celda tr{ background:none; text-align:right}
table.formato_celda th{ background:#f58104; color:#EEE; border:1px solid rgba(0,0,0,0.5); }
table.formato_celda th h5{ text-align:right; color:#ff5f27 !important;}
table.formato_celda td{ border:1px solid rgba(0,0,0,0.3);}
table.formato_celda td a{ color:#333; font-weight:bolder; font-size:14px}
#celda_pie{ background:#F3FCA3}
#celda_pie td{ font-size:16px; padding:10px 3px; font-weight:bold}
table.formato_celda h5{ font-size:10px;margin:0}


.noti_apartadas{ width:15px; height:15px; position:absolute; top:0; right:0}
.rounder{background:#ff5f27}
.active{ color:white; background:#ffa13b !important; box-shadow:inset 0 0 5px rgba(0,0,0,0.5);}


.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:100%; 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:5px 10px; font-size:10px; margin:0; border-radius:20px 0 0 20px;}
.contenedor_web .final{ background: linear-gradient(to right, #9ae214 0%,#ebef0e 100%); padding:5px 10px; font-size:10px; margin:0; text-align:right; border-radius:0 20px 20px 0;}
.contenedor_web h2{ border:none !important; color:#0f2f8a}

#div_graficas .w30{ margin:1% 2%;  }
#div_graficas .w50{ margin:1%;}
#div_graficas .legend{ background:rgba(0,0,0,0.8); }
#div_graficas .contenido{ padding:20px; background:rgba(0,0,0,0.8); box-sizing:border-box;}
#div_graficas .contenido i{ font-size:6em; color:white}
#div_graficas .contenido p{ font-weight:bold; color:#DDD}
#div_graficas .contenido a{ font-weight:bolder; font-size:2em; color:chartreuse}

.totales_green{ font-weight:bolder; font-size:2em; color:chartreuse}


.ficha{ box-shadow:1px 1px 3px rgba(0,0,0,0.2); background: linear-gradient(to bottom, #FDFDFD 0%,#eFeFeF 100%);  border-radius:5px; padding:10px; box-sizing:border-box}
.ficha h3{ margin:0; text-align:left; text-transform:uppercase}
.ficha h3 input{ vertical-align:middle; float:right}
.ficha img{ width:auto; height:50px; margin-top:10px}
.ficha .w60 label{ font-size:3em !important;}

#razones .w60 input{ display:block; margin: 5px 0}
#detalle_razon_social .w20{ text-align:center}
#detalle_razon_social .w20 i{ font-size:4em !important}

.titulo{ color:darkorange; border-bottom:none; display:inline-block; margin:0}
.textarea{text-align:left; height:300px; background:#eaffde}

#sucursal_productos td span{ color:darkorange}
#sucursal_productos td input[name=descripcion_app]{ text-align:left; font-style:italic}

.menu_clientes input{ margin:0 20px !important}

#notificar{ background:#d7a200}
button.read_excel{background:#178c00}

#mod_compras{ width:100%; height:100%}
#mod_compras > div{ height:100%; overflow:auto;}
#tabla_compras{ background:white}


.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}


#pagos_compras > div{ border:1px solid #DDD; border-radius:10px; padding:10px; box-sizing:border-box}
#pagos_compras > div h1{ color:#444; font-size:50px; text-align:right}

textarea[name=comentario], input[name=comentario]{ color:#00A; height:40px}
textarea[name=descripcion]{ height:40px}
input[name=cantidad]{ font-weight:bolder; text-align:center}

.resumen_piezas{}
.resumen_piezas > div{ border:1px solid #DDD; padding:20px; box-sizing:border-box; border-radius:10px; margin:10px 0;}


.row_proyectos{ background:#DFDFDF !important; text-transform:uppercase}
.row_tareas{ text-transform:lowercase; font-style:italic; font-weight:normal !important}


#div_categorias{ padding-bottom:20px; display:grid; grid-template-columns:repeat(10, 1fr); gap:5px}
#div_categorias label{ font-size:unset}

.galeria_imagenes{ display:grid; grid-template-columns:repeat(6, 1fr); gap:20px}
.galeria_imagenes div img{ width:100%; height:200px; object-fit:cover}

.producto{box-shadow:1px 1px 3px rgba(0,0,0,0.2); cursor:pointer; position:relative}
.producto label{ position:absolute; right:2px; top:2px}
.producto__ficha{ box-sizing:border-box; padding:10px; background:white}
.producto__codigo{ position: absolute; 	text-align: left; border: none; width: 100%; background: rgba(0,0,0,0.5); padding: 10px; box-sizing: border-box; color: white; top: -13px; font-weight: bold;}
.producto__precio{ text-align:right; color:green; border:none}
.producto__buttons{ display:grid; grid-template-columns:repeat(2,1fr)}
.producto__buttons__menos{ color:red; width:100%; border:1px solid #EEE; background:none; font-size:1.8rem}
.producto__buttons__mas{ color:green; width:100%; border:1px solid #EEE; background:none; font-size:1.8rem}

.desc_producto{ position:relative}
.desc_producto h4{ margin:3px 0}
.opciones_carrito{ position:absolute; top:0; right:0}
.opciones_carrito input{ display:block }

.white a{ color:#DDD; border:1px solid rgba(200,200,200,0.3)}

.cont_categorias > div{ background:#EEE; border-radius:10px; transition:all 0.3s linear; text-align:center; position:relative }
.cont_categorias > div:hover{ box-shadow:0 0 10px rgba(0,0,0,0.4); transition:all 0.3s linear}
.cont_categorias > div img{ width:50%; height:200px; object-fit:contain}

.cont_categorias__menu{ position:absolute; top:0; right:0}
.cont_categorias__menu input{ display:block; margin:5px 0; padding:3px}


input[type=radio] + label{ padding:8px 15px; box-sizing:border-box}

.form_tarjeta{  box-sizing:border-box; padding:10px; border-radius:10px; border:1px solid #BeBeBe;}
.form_tarjeta input{ background:none; border:none; text-align:center; font-size:1.2rem; font-weight:bold}

.div_tarjetas .circular{ vertical-align:middle}
.div_tarjetas h3{ font-size:1.8rem}
.div_tarjetas > div{ margin:10px 0; border-radius:10px; box-shadow:2px 2px 3px rgba(0,0,0,0.3); color:white; background:#4757f2; padding:20px; box-sizing:border-box }
.div_tarjetas > div p{ text-align:center; color:white}

.menu_ope{ text-align:right; display:flex; justify-content:end; gap:0 15px}

.fa-usd{ font-size:4rem}
.concepto_compra{ text-align:left; font-style:italic; text-transform:uppercase}

.instrucciones{ list-style-type: decimal; background:#feead5; border-radius:5px; padding-top:20px; padding-bottom:20px; font-size:1.1rem}
.instrucciones li{ margin:5px 0}

#bar_busqueda{ width:50%; z-index:2}
.ficha_modulo{ background:rgba(30,30,30,0.7)}
.ficha_modulo img{ height:100px; with:auto}
.ficha_modulo p{ color:white}

.totales_c{ font-size:2rem; color:green}

#agenda label{ font-size:0.6rem !important}

#datos_corte h4 img{ vertical-align:middle; margin-right:5px; width:30px; height:30px }

.round_icons{ margin:20px 0; display:flex; justify-content:center}
.round_icons a{ border:2px solid #AAA; padding:15px; margin:10px; width:auto !important; background:none}
.round_icons a:hover{ box-shadow:0 0 10px rgba(0,0,0,0.4)}

.monto{ font-size:2rem; text-align:center; border-color:green}

.l_orange{ background:#ffab3f; padding:5px; border-radius:5px}
.sticker{ display:block; color:#222}
.num_tarjeta{ margin:10px 0}

.fechac{ width:100%; height:100%; background:white;  border-radius:5px;}
.fechac__mes{padding:5px; color:white; border-radius:5px 5px 0 0; background:var(--secundario); text-transform:uppercase}
.fechac__dia{ font-weight:600; font-size:2rem; padding:5px; color:var(--secundario);}
.fechac__anio{ font-size:0.6rem; border-radius:0 0 5px 5px; padding:3px}

.tot{ color:#060; font-weight:bold}

.lred{ color:#ff6161}
.lgreen{ color:#24ce58} 
.lblue{ color:#618aff}

#div_folios input[type=radio] + label{ padding:8px; box-sizing:border-box; background:none}
#div_folios input[type=radio]:checked + label{ padding:8px; box-shadow:none; background:var(--secundario)}
#div_login2 button{ color:inherit; background:inherit}

.table_crm th{background-color: #00298d !important; color:white !important;}