@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

body {
	padding-top: 40px;
  	font-family: "Poppins", sans-serif;
  	font-optical-sizing: auto;
  	font-weight: <weight>;
  	font-style: normal;
  	font-size: 14px;
}

footer {
	position: fixed;
    bottom: 0px;
    margin-top: 120px;
    width: 100% !important;
    background-color: #333 !important;
    color: white !important;
    padding-top: 12px !important;
    font-size: 12px;
}

footer a {
	color: #7BC299;
}

footer a:hover {
	color: #239955;
}

a {
	color: #239955;
}

a: hover {
	color: #176639;
}

table a {
	color: #666 !important;
	text-decoration: underline !important;
}

tbody, td {
    border-width: 1px;
}

.no-borders tbody, .no-borders tr, .no-borders td {
	border-width: 0;
	outline: 0;
}

.wrap {
	height: 100% !important;
}

.topclass {
	background-color: #333 !important;
}

#containerfooter {
	position: fixed;
	bottom: 0px;
	margin-top: 120px;
	width: 100% !important;
	background-color: #333 !important;
	color: white !important;
	padding-top: 0 !important;
	height: 40px !important;
}

#topbar {
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 1000;
}

.footercredits {
	padding-top: 8px !important;
}

.topbarmenu .sf-menu ul {
	z-index: 100000 !important;
}

.tabla_productos {
	border-collapse: collapse; 
    border: 1px solid rgba(0,0,0,0.3); 
    border-radius: 20px; 
    overflow: hidden; 
    outline: 1px solid rgba(0,0,0,0.3); 
}



.tabla_productos th:first-child,
.tabla_productos td:first-child {
    border-left: none; /* Elimina el borde izquierdo de la primera celda */
}

.tabla_productos th:last-child,
.tabla_productos td:last-child {
    border-right: none; /* Elimina el borde derecho de la última celda */
}

.tabla_productos tr:first-child th {
    border-top: none; /* Elimina el borde superior de la primera fila */
}

.tabla_productos tr:last-child td {
    border-bottom: none; /* Elimina el borde inferior de la última fila */
}

.tabla_productos a {
	text-decoration: underline;
	font-weight: bold;
}

.tabla_descuentos td{
	padding: 2px !important;
	line-height: 12px !important;
	vertical-align: middle !important;
	font-size: 14px;
}

.tabla_precios td{
	padding: 5px 5px !important;
	line-height: 12px !important;
	vertical-align: middle !important;
	font-size: 18px;
}

.precio_header {
	font-size: 14px !important;
}

.tabla_precio_descuento {
/*	background-color: #82E0AA;*/
	font-weight: bold;
}

.tabla_ofertas_color {
	font-weight: bold;
}

.cuadricula_imagen {
	height: 200px;
	padding: 0 10px 10px;

}

.cuadricula_imagen img {
	max-height: 178px;
}

.cuadricula_nombre {
	padding: 0 10px;
	font-weight: bold;
}

.cuadricula_fabricante {
	padding: 0 10px 10px;
}

.cuadricula_precios {
	padding: 0 10px 0 10px;
}

.cuadricula_detalles {
	padding: 10px;
}

.cuadricula_product {
	border: 1px solid rgba(0,0,0,0.3);
	min-height: 490px;
	padding-bottom: 20px;
	position: relative;
	border-radius: 20px;
}

.cuadricula_product_movil {
	border: 1px solid rgba(0,0,0,0.3);
	padding-bottom: 20px;
	position: relative;
	border-radius: 10px;
}

.cuadricula_product a, .cuadricula_product_movil a {
	text-decoration: underline;
	font-weight: bold;
}

.cuadricula_nombre, .cuadricula_fabricante, .cuadricula_principio {
	margin-bottom: 5px;
}

.cuadricula_principio {
	font-size: 12px;
}

.cuadricula_precios, .cuadricula_cantidad, .cuadricula_detalles {
	margin-bottom: 10px;
	padding-left: 5px;
	padding-right: 5px;
}

.cuadricula_cantidad {
	position: absolute;
	width: 100%;
	bottom: 20px;
}

input[disabled].cantidad_pedido {
	color: #333;
	font-size: 18px;
}

.carrito-datos td {
	padding: 0;
}

.pedido-datos td {
	padding: 0 5px;
}

.paginacion-store a, .paginacion-actual {
	margin: 0 6px;
}

.descripcion_credito_tabla {
	background-color: yellow;
	padding: 2px;
}

.cantidad_pedido, .cantidad_carrito, .cantidad_pedido_detalle, .cantidad_pedido_proveedores, .descuento_pedido_proveedores, .descuento_carrito_proveedores, .cantidad_carrito_proveedores, .cantidad_pedido_vendedores, .descuento_pedido_vendedores, .descuento_carrito_vendedores, .cantidad_carrito_vendedores {
	text-align: center;
	width:4em;
	height: 40px;
}

.fwl_button_1 {
	padding: 10px 20px;
	color: white !important;
	background-color: #BF5020;
	border: 1px solid #BF5020 !important;
	display: inline-block;
	text-transform: uppercase;
	font-size: 12px;
	cursor: pointer;
	text-decoration: none !important;
	text-align: center;
	border-radius: 10px;
}

.fwl_button_1:hover {
	color: #BF5020 !important;
	background-color: #fff;
}

.fwl_button_2 {
	padding: 20px;
	color: white !important;
	background-color: #BF5020;
	border: 1px solid #BF5020 !important;
	display: inline-block;
	text-transform: uppercase;
	font-size: 14px;
	cursor: pointer;
	text-decoration: none !important;
	text-align: center;
	margin: 20px;
	border-radius: 10px;
}

.fwl_button_2:hover {
	color: #BF5020 !important;
	background-color: #fff;
}

.fwl_button_3 {
	padding: 0 20px;
	color: #666;
	background-color: #fff;
	border: 2px solid #E8D77D;
	display: inline-block;
	text-transform: uppercase;
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	height: 40px;
	vertical-align: middle;
	line-height: 38px;
	border-radius: 10px;
}

.fwl_button_3:hover {
	background-color: #fff;
	color: #E8D77D;
	
}

.floating-button-1 {
	position: fixed;
	top: 90px;
	right: 20px;
	z-index: 100000;
	padding: 20px 30px;
	color: white;
	background-color: #2d5c88;
	border: 1px solid #2d5c88;
	display: inline-block;
	text-transform: uppercase;
	font-size: 16px;
	box-shadow: #999 2px 2px 10px;
}

.floating-button-1:hover {
	color: #2d5c88;
	background-color: #fff;
}

h2 {
	font-size: 20px !important;
	margin-bottom: 0 !important;
}

h3 {
	font-size: 16px !important;
	margin-bottom: 0 !important;
}

.limite_credito {
	margin-bottom: 10px;
	display: block;
}

#total_carrito_1 {
	font-size: 20px;
	padding: 10px 25px;
	display: inline-block;
	z-index: 1000;
	box-shadow:	5px 5px 5px rgba(0,0,0,0.2);
	font-weight: bold;
	margin-top: 0;
  position: fixed;
  bottom: 0;
	right: 20px;
}

.limite_credito_excedido {
	color: rgba(255, 29, 22, 1);
	text-align: left !important;
	padding-top: 20px;
}

.limite_credito_excedido_2 {
	background-color: rgba(255, 29, 22, 1);
	color: white;
}

#user_login.input {
	font-size: 14px !important;
}

.product_name {
	font-weight: bold;
	font-size: 14px;
}

.borrar_del_carrito {
	font-size: 18px;
}



a.inicio-button {
	width: 250px; 
	border: 4px solid #666; 
	display: inline-block; 
	padding: 10px; 
	border-radius: 10px;
	color: #666;
}

a.inicio-button:hover {
	border: 4px solid #333;
	color: #333;
}


/* MODAL */

#modal_producto {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.8);
	z-index: 1000;
	border: 2px solid #000;
}

#modal-product-box {
	background-color: white;	
	box-shadow:	5px 5px 5px rgba(0,0,0,0.6);
	position: absolute;
      top: 50%;
      left: 50%;
      margin-right: -50%;
      transform: translate(-50%, -50%);
	padding: 30px;
	width: 900px;
}

#modal-close {
	position: absolute;
	top: 10px;
	right: 10px;
	font-size: 26px;
	cursor: pointer;
}

.modal_nombre {
	font-size: 18px;
	font-weight: bold;
	text-align: left;
}

.modal_fabricante {
	font-weight: bold;
	font-size: 16px;
	margin-top: 10px;
}

#total_carrito_2 {
	position: absolute;
	bottom: 50px;
	font-size: 20px;
	padding: 10px 25px;
	display: block;
	z-index: 1000;
	box-shadow:	5px 5px 5px rgba(0,0,0,0.2);
	font-weight: bold;
}

#login #nav {
    display: block !important;
}

nav.pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-top: 20px;
}

nav.pagination ul {
	list-style: none;
	padding: 0;
}

nav.pagination li {
	display: inline-block;
	margin-right: 10px;
}

.pagination a {
	display: inline-block;
	padding: 5px 10px;
	text-decoration: none;
	margin: 0 5px;
	background-color: #ccc;
	border: 1px solid rgba(0,0,0,0.3);
	border-radius: 50%;
}

.pagination a.current, nav.pagination .active a {
	background-color: #ccc;
}

/* REPORTES */

.report_totals td {
	padding: 0 10px 0 0; 
	margin: 0;
}

.form-filters {
	border: 1px solid rgba(0,0,0,0.1); 
	line-height: 1.2; 
	height: 40px; 
	padding: 0 18px 0 8px;
}

.lista-resultados {
	font-size: 12px;
}

.sumar_cantidad, .restar_cantidad {
	border: none;
	background-color: rgba(256,256,256,0);
}

/* MENU  */

.navbar-toggler {
    border: none;
    padding: 10px;
    font-size: 1.25rem;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.nav-link {
    padding: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: background-color 0.3s;
    border-bottom: 1px solid white;
}

.nav-link i {
    font-size: 1.2em;
    width: 20px;
    text-align: center;
}

.nav-link:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Aseguramos que los menús no se superpongan */

#navMenu, #shareMenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: #BF5020;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    color: white;
    text-align: center;
}

.movil-item {
	position: relative;
	color: white;
}

/*  CONTACTOS  */

.fwl-content-row {
	padding: 10px;
	margin-bottom: 80px;
}

@media (min-width: 768px) {
	.fwl-content-row {
		padding: 20px;
	}
}


.lightbox-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.9);
	z-index: 9999;
	cursor: pointer;
}

.lightbox-content {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-width: 90%;
	max-height: 90vh;
}

.lightbox-content img {
	max-width: 100%;
	max-height: 90vh;
	object-fit: contain;
}

.lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	color: white;
	font-size: 30px;
	cursor: pointer;
	background: none;
	border: none;
	padding: 10px;
}

.img-product {
	cursor: pointer;
}

.fwl-form-container {
	margin-top: 20px; 
	margin-bottom: 20px; 
	border: 2px solid #ddd; 
	padding: 15px; 
	border-radius: 20px;
}

.btn-primary {
    background-color: rgba(191, 80, 32, 1); 
    border-color: rgba(191, 80, 32, 1); 
    color: #fff;
}

.btn-primary:hover {
    background-color: rgba(191, 80, 32, 0.5); 
    border-color: rgba(191, 80, 32, 0.5); 
}

.btn, .form-control {
	border-radius: 10px;
}

input, textarea {
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.3);
}

#busqueda_tabla_pedido input {
	padding-left: 10px;
}

.scroll-to-top {
	position: fixed;
	bottom: 40px;
	right: 20px;
	background-color: #fff; /* Color de fondo */
	color: #2a6496; /* Color del texto */
	border: none;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	font-size: 24px;
	cursor: pointer;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); /* Sombra */
	opacity: 0; /* Inicialmente invisible */
	visibility: hidden; /* Inicialmente oculto */
	transition: opacity 0.3s ease, visibility 0.3s ease;
	z-index: 10000;
}

.scroll-to-top.show {
	opacity: 0.6; /* Visible */
	visibility: visible; /* Mostrar */
}

.scroll-to-top:hover {
	background-color: #2a6496; 
	color: #fff;
}

/* Estilos para el botón flotante */
.floating-cart-button {
	position: fixed;
	top: 60px;
	right: 20px;
	background-color: rgba(42, 100, 150, 0.5);
	border-radius: 50%;
	width: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-decoration: none;
	font-size: 20px;
	z-index: 1000;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

/* Estilos para el círculo de la cantidad */
.cart-count {
	position: absolute;
	top: -2px;
	right: -2px;
	background-color: red;
	border-radius: 50%;
	width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 10px;
	color: white;
}




