/* favoritos */

/* Esto agrgarlo aca solo si es una implementacion vieja sin variables. */
:root{
    /* Favorites panel config */
	--fav-cart-select-list-display:none;
    --fav-drawer-width:300px;
    --fav-drawer-height:350px; /*  Use in mobile */
}
.hasNotification {
    position: relative;
}
.badge.notification {
    position: absolute;
    top: -30%;
    right: -56%;
    border-radius: var(--radius-full);
    aspect-ratio: 2 / 2;
    padding: .1em;
    width: 1.25em;
    height: 1.25em;
    background: var(--dark-color);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light-color);
}
.favorites_panel {
  width: var(--fav-drawer-width);
  height: 100%;
  position: fixed;
  top: 0px;
  left: calc(var(--fav-drawer-width) * -1);
  z-index: 2500;
  background-color: var(--cart-base-color);
  color: var(--cart-text-color);
  display: flex;
  flex-direction: column;
}

div#favoritesDrawer * {
  box-sizing: border-box;
  /* width: 100%; */
}

.favorites_lists_panel_title {
  padding: var(--space-2);
  display: flex;
  justify-content: center;
  font-weight: 600;
  gap: var(--space-2);
}

.favorites_lists_panel_content {
  position: relative;
  overflow: hidden;
  height: 100%;
}

.favorites_wrap {
  cursor: pointer;
}

.favorites_list {
  height: 100%;
  overflow-x: auto;
  overflow-y: auto;
  padding: 0;
}
.favorites_list * {
  box-sizing: border-box;
}
/* Carro scrollbar */
.favorites_list::-webkit-scrollbar {
  width: var(--cart-content-scrollbar-width);
}
.favorites_list::-webkit-scrollbar-track {
  background: var(--cart-content-scrollbar-bgcolor);
}
.favorites_list::-webkit-scrollbar-thumb {
  background: var(--cart-content-scrollbar-color);
  border-radius: var(--cart-content-scrollbar-radius);
}

.favorites_list li.fav_list_item:nth-child(1) {
  justify-content: center;
  gap: var(--space-2);
}
.favorites_list li.fav_list_item {
  width: 100%;
  padding: var(--space-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fav_list_item:hover {
  background-color: var(--light-color-tint);
  cursor: pointer;
}
.fav_list_item.used {
  background-color: var(--light-color-shade);
}
.trash-icon {
  display: none;
}

.fav_list_item.used .trash-icon {
  display: flex;
}
.favorites_container {
  margin-inline: 1rem;
}

.new-favlist-form-container {
  display: none;
}
.new-favlist-form {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--space-2) var(--space-1);
  gap: var(--space-2);
}

.new-favlist-form > input {
  border-radius: var(--radius-base);
  font-size: var(--text-sm);
  width: 100%;
  height: 100%;
  padding: var(--space-1);
}
#cancelFavList {
  display: none;
}

.loading.favorites_list_loading {
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background: #35353542;
  backdrop-filter: blur(2px);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1;
}

@media (max-width: 640px) {
  .favorites_panel {
    width: 100%;
    height: var(--fav-drawer-height);
    bottom: calc(var(--fav-drawer-height) * -1);
    color: var(--cart-text-color);
    left: 0;
    top: initial;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }

  .favorites_lists_panel_title {
    padding: var(--space-4) var(--space-2) var(--space-2) var(--space-2);
  }
  .favorites_lists_panel_title::before {
    content: "";
    background: var(--dark-color);
    width: 20%;
    height: var(--space-1);
    border-radius: var(--radius-full);
    position: absolute;
    top: var(--space-s);
  }
}


	.lateral_panel_content{
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--cart-header-height));
	}
	.lateral_panel_content_selector_container{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100%;
		gap: var(--space-1);
		font-size: 1.2rem;
		font-weight: bold;
		letter-spacing: 2px;
	}

	.lateral_panel_content_selector_container > .lateral_panel_content_selector {
		width: 90%;
		height: 100%;
	}
	.close_carro_lateral{
		display: flex;
		justify-content: center;
		align-items: center;
	/* 	background: var(--light-color-shade); */
		border-radius: var(--radius-md);
		/* box-shadow: var(--shadow-sm); */
		cursor: pointer;
		transition: var(--duration-4);
		aspect-ratio: 2 / 2;
		height: 100%;
	}
	.close_carro_lateral:hover{
		background: var(--light-color-shade);
    	cursor: pointer;
	}
	.option_toggle_selector{
		--toggle-switch-selector-bg-color:var(--main-color-shade);
		--toggle-switch-selector-option-bg-color-selected:var(--main-color-tint);
		--toggle-switch-selector-option-bg-color:var(--main-color-contrast);
		--toggle-switch-selector-option-bg-color-hover:var(--main-color);

		display: flex;
		gap: var(--space-1);
		padding: var(--space-s);
		border-radius: var(--radius-base);
		background: var(--toggle-switch-selector-bg-color);
		width: 100%;
	}
	.option_toggle {

		padding: var(--space-s);
		border-radius: .4rem;
		color: var(--toggle-switch-selector-option-bg-color);
		font-weight: 400;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		cursor: pointer;
	}
	.option_toggle.selected {
		background: var(--toggle-switch-selector-option-bg-color-selected);
	}
	.option_toggle:hover{

		background: var(--toggle-switch-selector-option-bg-color-hover);
	}

	.option_toggle_selector.light{
		--toggle-switch-selector-bg-color:var(--light-color-shade);
		--toggle-switch-selector-option-bg-color:var(--light-color-contrast);
		--toggle-switch-selector-option-bg-color-selected:var(--light-color-tint);
		--toggle-switch-selector-option-bg-color-hover:var(--light-color);
	}

    /* SVG SIZE*/
	.svg-xxs svg{
		width: .6rem;
		height: .6rem;
	}

	.svg-xs svg{
		width: .85rem;
		height: .85rem;
	}


	.svg-sm svg{
		width: 1.25rem;
		height: 1.25rem;
	}

	.svg-base svg{
		width: 1.5rem;
		height: 1.5rem;
	}

	.svg-md svg{
		width: 2rem;
		height: 2rem;
	}
	.svg-l svg{
		width: 2.5rem;
		height: 2.5rem;
	}
	.svg-xl svg{
		width: 3rem;
		height: 3rem;
	}

	.svg-center{
		place-content: center;
	}


	.svg-center{
		justify-content: center;
		align-items: center;

	}

		/* SVG FILL COLOR*/
		.svg-white svg{
			fill:#fff!important;
		}
		.svg-light svg{
			fill:var(--light-color) !important;
		}
		.svg-light-darker svg{
			fill:var(--light-color-darker) !important;
		}
		
		.svg-dark svg{
			fill:var(--dark-color) !important;
		}
	
		.svg-medium svg{
			fill:var(--medium-color) !important;
		}
		.svg-main svg{
			fill:var(--main-color) !important;
		}
	
		.svg-secondary svg{
			fill:var(--secondary-color) !important;
		}
	
		.svg-accent svg{
			fill:var(--accent-color) !important;
		}

		/* SVG STROKE COLOR*/
		.svg-stroke-white svg{
			stroke:#fff!important;
		}
		.svg-stroke-light svg{
			stroke:var(--light-color) !important;
		}
		.svg-stroke-light-darker svg{
			stroke:var(--light-color-darker) !important;
		}
		
		.svg-stroke-dark svg{
			stroke:var(--dark-color) !important;
		}
	
		.svg-stroke-medium svg{
			stroke:var(--medium-color) !important;
		}
		.svg-stroke-main svg{
			stroke:var(--main-color) !important;
		}
	
		.svg-stroke-secondary svg{
			stroke:var(--secondary-color) !important;
		}
	
		.svg-stroke-accent svg{
			stroke:var(--accent-color) !important;
		}


		/* SVG Rotate */
		.svg-rotate-45 svg{
			transform: rotate(45deg);
		}
		.svg-rotate-90 svg{
			transform: rotate(90deg);
		}
		.svg-rotate-135 svg{
			transform: rotate(135deg);
		}
		.svg-rotate-180 svg{
			transform: rotate(180deg);
		}
		/* SVG POSITION */
		.svg-center{
            justify-content: center;
            align-items: center;
        }

	.card_wrap  .fav_button{
		top: var(--space-1);
		right: var(--space-1);
		z-index: 100;
		height: var(--space-4);
		position: absolute;
	}

	.content_carro_lat {
		position: initial;
	}


	/* ---------- Clases por paleta (base, darker y contrast) ---------- */
/* MAIN */
.svg-main           { fill: var(--main-color);           stroke: var(--main-color);           color: var(--main-color); }
.svg-main-darker    { fill: var(--main-color-darker);   stroke: var(--main-color-darker);   color: var(--main-color-darker); }
.svg-main-contrast  { fill: var(--main-color-contrast); stroke: var(--main-color-contrast); color: var(--main-color-contrast); }

/* SECONDARY */
.svg-secondary           { fill: var(--secondary-color);           stroke: var(--secondary-color);           color: var(--secondary-color); }
.svg-secondary-darker    { fill: var(--secondary-color-darker);   stroke: var(--secondary-color-darker);   color: var(--secondary-color-darker); }
.svg-secondary-contrast  { fill: var(--secondary-color-contrast); stroke: var(--secondary-color-contrast); color: var(--secondary-color-contrast); }

/* ACCENT */
.svg-accent           { fill: var(--accent-color);           stroke: var(--accent-color);           color: var(--accent-color); }
.svg-accent-darker    { fill: var(--accent-color-darker);   stroke: var(--accent-color-darker);   color: var(--accent-color-darker); }
.svg-accent-contrast  { fill: var(--accent-color-contrast); stroke: var(--accent-color-contrast); color: var(--accent-color-contrast); }

/* SUCCESS */
.svg-success           { fill: var(--success-color);           stroke: var(--success-color);           color: var(--success-color); }
.svg-success-darker    { fill: var(--success-color-darker);   stroke: var(--success-color-darker);   color: var(--success-color-darker); }
.svg-success-contrast  { fill: var(--success-color-contrast); stroke: var(--success-color-contrast); color: var(--success-color-contrast); }

/* WARNING */
.svg-warning           { fill: var(--warning-color);           stroke: var(--warning-color);           color: var(--warning-color); }
.svg-warning-darker    { fill: var(--warning-color-darker);   stroke: var(--warning-color-darker);   color: var(--warning-color-darker); }
.svg-warning-contrast  { fill: var(--warning-color-contrast); stroke: var(--warning-color-contrast); color: var(--warning-color-contrast); }

/* DANGER */
.svg-danger           { fill: var(--danger-color);           stroke: var(--danger-color);           color: var(--danger-color); }
.svg-danger-darker    { fill: var(--danger-color-darker);   stroke: var(--danger-color-darker);   color: var(--danger-color-darker); }
.svg-danger-contrast  { fill: var(--danger-color-contrast); stroke: var(--danger-color-contrast); color: var(--danger-color-contrast); }

/* INFO */
.svg-info           { fill: var(--info-color);           stroke: var(--info-color);           color: var(--info-color); }
.svg-info-darker    { fill: var(--info-color-darker);   stroke: var(--info-color-darker);   color: var(--info-color-darker); }
.svg-info-contrast  { fill: var(--info-color-contrast); stroke: var(--info-color-contrast); color: var(--info-color-contrast); }

/* LIGHT */
.svg-light           { fill: var(--light-color);           stroke: var(--light-color);           color: var(--light-color); }
.svg-light-darker    { fill: var(--light-color-darker);   stroke: var(--light-color-darker);   color: var(--light-color-darker); }
.svg-light-contrast  { fill: var(--light-color-contrast); stroke: var(--light-color-contrast); color: var(--light-color-contrast); }

/* MEDIUM */
.svg-medium           { fill: var(--medium-color);           stroke: var(--medium-color);           color: var(--medium-color); }
.svg-medium-darker    { fill: var(--medium-color-darker);   stroke: var(--medium-color-darker);   color: var(--medium-color-darker); }
.svg-medium-contrast  { fill: var(--medium-color-contrast); stroke: var(--medium-color-contrast); color: var(--medium-color-contrast); }

/* DARK */
.svg-dark           { fill: var(--dark-color);           stroke: var(--dark-color);           color: var(--dark-color); }
.svg-dark-darker    { fill: var(--dark-color-darker);   stroke: var(--dark-color-darker);   color: var(--dark-color-darker); }
.svg-dark-contrast  { fill: var(--dark-color-contrast); stroke: var(--dark-color-contrast); color: var(--dark-color-contrast); }