:root {
	--primary: rgb(var(--blue) / 1);
	--secondary: rgb(var(--skyblue) / 1);

	--paleta--bg1: #e4263f;
	--paleta--bg2: #51b9a5;
	--paleta--bg3: #ffda07;
	--paleta--bg4: #c8d644;

	--opacity-1: 10%;
	--opacity-2: 20%;
	--text-color: rgb(var(--primary) / 1);

	/* Colors */
	--sky: 2 132 199;
	--red: 236 28 36;
	--blue: 0 100 170;
	--skyblue: 55 170 222;

	--green: 0 95 40;
	--green-dark: 20 140 50;
	--lime: 220 218 65;
	--orange: 237 140 53;
	--white: 255 255 255;
	--slate: 100 116 139;
	--dark: 20 30 50;
	--dark-2: 30 40 60;
	--yellow: 255 230 0;
	--yellow-dark: 255 215 0;
	--violet: 139 92 246;
	--brown: 102 55 38;
	--seal-brown: 91 31 7;
	--neutral: 241 245 249;
	--font-size-mobile: 4vw;
	--font-size-desktop: 2vw;
	--font-size-tv: 1.5vw;
	--button-size-mobile: 5vw;
	--button-size-desktop: 3vw;
	--button-size-tv: 2.5vw;
	--linear-gradient: (rgba(20, 25, 33, 0) 0%, rgba(20, 25, 33, 0.56) 100%), rgb(0, 125, 125);
	--font-system: "Inter var", ui-sans-serif, system-ui, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
	--opacity: 1;
}

/* Import fonts */
@font-face {
    font-family: "Gotham-Black";
    font-weight: bold;
    src: url("../fonts/Gotham-Black.otf") format("opentype");
}

*,
*:after,
*:before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	min-width: 0;
	-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

* {
	scrollbar-width: 0;
}

*::-webkit-scrollbar {
	background-color: transparent;
	width: 10px;
}

*::-webkit-scrollbar-thumb {
	border-radius: 99px;
	background-color: #ddd;
	border: 4px solid #fff;
}

html, body {
	height: 100%;
	font-family: 'Gotham-Black';
	overflow: hidden;

}

/* */
body {
	font-family: sans-serif;
	width: 100%;
	min-height: 100dvh;
	/* font-size: var(--font-size-mobile); */
	font-family: 'Gotham-Black';
	line-height: 1.25;
	color: var(--text-color);
	background-color: rgb(var(--dark) / 10%);

	/* background-image: url("../imagen/main_bg.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	overflow: hidden; */


}

h1, h2, h3, h4 {
	text-wrap: balance;
}

p {
	text-wrap: pretty;
	font-size: .8em;
}

a {
	text-decoration: none;
}

svg {
	color: var(--text-color);
}

/* Evitamos problemas con los SVG */
svg {
	width: 100%;
	display: block;
	fill: currentColor;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	list-style: none;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*  */
button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	outline: none;
	cursor: pointer;
	color: rgb(var(--white) / 1);
	font-family: var(--font);
	font-weight: bold;
	line-height: 2;
	padding: 1vh 2vw;
	border: none;
	/* border: 0.15rem dashed rgb(var(--primary) / 1); */
	border-radius: 1rem;
	/* background-color: rgb(var(--primary) / 20%); */
	box-shadow: 0 0 0 5px rgb(var(--primary) / 10%), 2px 2px 5px 2px rgb(var(--dark) / 10%);
	background-image: linear-gradient(rgb(var(--primary) / 60%), rgb(var(--primary) / 1), rgb(var(--primary) / 60%));
	transition: .1s ease-in-out, .4s color;
	opacity: 1;
}


.btn__group {
	display: flex;
	gap: 1rem;
}

/* Botón de retroceso */
.btn__header {
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: rgb(var(--primary) / var(--opacity-1));
	;
	padding: 0.5rem;
	border-radius: 50%;
	cursor: pointer;
	color: var(--text-color);
	transition: background-color 0.3s ease;
}

.btn__header:hover {
	background-color: rgb(var(--primary) / var(--opacity-2));
	;
}

/* .hidden {
	display: none;
} */
/* icons svg */
[class^=icon-] {
	display: inline-block;
	vertical-align: middle;
	line-height: 1;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: 50%;
}

.full__icons {
	border: 0;
	clip: rect(0 0 0 0);
	width: 0;
	height: 0;
	margin: -1px;
	padding: 0;
	position: absolute;
	overflow: hidden;
}

.icon {
	display: inline-block;
	color: inherit;
	fill: currentColor;
	height: 1.5rem;
	width: 1.5rem;
	line-height: 1;
	-ms-flex-negative: 0;
	flex-shrink: 0;
	max-width: initial;
}

.icon--circle {
	border-radius: 50%;
}

/* Estilos globales */
.wrapper {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.header, .footer {
	width: 100%;
	background-color: rgb(var(--primary) / var(--opacity-1));
}

/* el main y las secciones ocupan toda la altura disponible */
.main {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 100vh;
	/* Altura completa de la ventana */
}

.container {
	width: 100%;
	height: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 1rem;
}

.section {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	/* Altura completa de la sección */
	gap: 1rem;
}

.section.active {
	display: flex;
}

.header__content,
.footer__content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
}

.header__title {
	text-align: center;
	width: 60%;
	& img {
		width: 100%;
	}
}

/* Para ocultar el espacio del back-button cuando no está visible */
.btn__header.hidden {
	visibility: hidden;
}

.header__btn {
	height: 2rem;
	width: auto;
	position: absolute;
	top: 2%;
	border-radius: 50%;
	background: rgb(var(--white) / 1%) !important;
	z-index: 99999;
	padding: 0;
	& img {
		height: 100%;
	}
}
.btn--logo {
	left: 2%;
}
.btn--modal {
    right: 2%;
}
/* Modal */
.modal {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: rgb(var(--dark)/ 50%);
	justify-content: center;
	align-items: center;
	z-index: 15;
}

.modal__header, .modal__footer {
	display: flex;
	justify-content: space-between;
	gap: 2rem;
	align-items: center;
}

.modal-container {
	max-height: 100vh;
	max-width: 600px;
	min-width: 50vw;
	margin-left: auto;
	margin-right: auto;
	background-color: rgb(var(--white)/1);
	border-radius: 1rem;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1rem 2rem 0 rgb(var(--dark)/ 50%);

	@media (max-width: 600px) {
		width: 95%;
	}
}

.modal-container-footer,
.modal-container-header {
	padding: 1rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.modal-container-header {
	border-bottom: 1px solid rgb(var(--dark)/ 10%);
}
.modal-container-footer {
	border-top: 1px solid rgb(var(--dark)/ 10%);
}

.modal-container-title {
	display: flex;
	align-items: center;
	gap: 8px;
	line-height: 1;
	font-weight: 700;
	font-size: 1.125;

	svg {
		width: 2rem;
		height: 2rem;
		color: var(--text-color);
	}
}
.btn {
	background: rgb(var(--green)/ 1);
}

.modal-container-body {
	padding: 1.5rem;
	overflow-y: auto;
}
.premios__list-title {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}
.premios__list-title span {
	color: rgb(var(--green) / 1);
	font-size: 1.5rem;
}
.close {
	position: absolute;
	top: 10px;
	right: 10px;
	cursor: pointer;
}

@media (max-width: 768px) {
	.container {
		padding: 1rem;
	}
}

.modal.active {
	display: flex; /* Asegúrate de usar "flex" para centrarlo */
}

/* pre-carga */
/* Loader Styles */
.loader {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgb(var(--dark)/ 1);
	z-index: 10;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.3s ease;
}

.loader.active {
	opacity: 1;
	visibility: visible;
}

.loader .spinner {
	border: 4px solid rgba(0, 0, 0, 0.1);
	border-top: 4px solid #000;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	animation: spin 1s linear infinite;
}

@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/* Estilos del menú de ajustes */
.menu {
	position: relative;
}

.menu .menu__nav {
	width: max-content;
	list-style: none;
	overflow: hidden;
	display: flex;
	flex-flow: column;
	margin: 0;
	gap: 1rem;
	padding: 1rem;
	border-radius: 1rem;
	transform: scale(0);
	transform-origin: top right;
	transition: transform 0.3s, visibility 0s 0s;
	background-color: rgb(var(--dark) / 1);
	color: rgb(var(--white) / 1);
	box-shadow: 0 0 20px 0 rgb(var(--dark)/ 30%);
	font-family: var(--font-system);
	z-index: 15;
}

.menu--fixed {
	position: absolute;
	right: 1rem;
	top: 1rem;
	text-align: left;
}

.menu--top-right.active .menu__nav {
	transform: scale(1);
}

.menu--top-right .menu__nav {
	position: absolute;
	top: 0;
	right: 0;
}

/* menu setting */
.settings {
	position: relative;
	height: auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem
}

.field-title {
	position: absolute;
	top: -10px;
	left: 8px;
	transform: translateY(-50%);
	font-weight: 800;
	color: rgb(var(--dark)/ 50%);
	text-transform: uppercase;
	font-size: 0.65rem;
	pointer-events: none;
	user-select: none;
}

.setting__list {
	position: relative;
	width: 100%;
	height: calc(65px - 10px);
	background: rgb(var(--white) / 10%);
	border-radius: 8px;
	display: flex;
	font-weight: bold;
	align-items: center;
	padding: 1rem;
	color: rgb(var(--white) / 80%);
	justify-content: space-between;
	cursor: pointer;

	&:hover {
		background: rgb(var(--white) / 30%);
		color: rgb(var(--white) / 1);
	}
}

.setting__list--delete {
	background: rgb(var(--red) / 80%);
	color: rgb(var(--red) / 80%);
}

.setting__list--delete:hover {
	background: rgb(var(--red) / 1);
	color: rgb(var(--red) / 1);
}

.setting__list a {
	display: flex;
	color: rgb(var(--white) / 1);
	justify-content: space-between;
	align-items: center;
	width: 100%;
	gap: 15vw;
}

hr {
	height: 1px;
	background: rgb(var(--white) / 20%);
	border: none;
	outline: none;
	margin: 0;
	position: relative;
	margin-block: 1rem;
}

.setting__list svg {
	flex-shrink: 0;
	width: 1.5rem;
	height: 1.5rem;
	color: var(--white);
}

.disabled {
	pointer-events: none;
	opacity: 0.2;
}

.setting__list input {
	opacity: 0;
	position: absolute;
}

.setting__list input+label {
	user-select: none;
}

.setting__list input+label::before,
.setting__list input+label::after {
	content: "";
	position: absolute;
	transition: 150ms cubic-bezier(0.24, 0, 0.5, 1);
	transform: translateY(-50%);
	top: 50%;
	right: 10px;
	cursor: pointer;
}

.setting__list input+label::before {
	height: 30px;
	width: 50px;
	border-radius: 30px;
	background: rgb(var(--white) / 30%);
}

.setting__list input+label::after {
	height: 24px;
	width: 24px;
	border-radius: 60px;
	right: 32px;
	background: rgb(var(--white) / 1);
}

.setting__list input:checked+label:before {
	background: rgb(var(--green) / 1);
	transition: all 150ms cubic-bezier(0, 0, 0, 0.1);
}

.setting__list input:checked+label:after {
	right: 14px;
}

.setting__list input:focus+label:before {
	box-shadow: 0 0 0 2px rgb(var(--green) / 10%);
}

.setting__list input:disabled+label:before, .setting__list input:disabled+label:after {
	cursor: not-allowed;
}

.setting__list input:disabled+label:before {
	background: #4f4f6a;
}

.setting__list input:disabled+label:after {
	background: #909090;
}

.fullscreen-icon {
	display: none;
}

.fullscreen-icon.hidden {
	display: none;
}

.fullscreen-icon:not(.hidden) {
	display: inline;
}

/* -------------------------------- */
form {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

label {}

.field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.field input {
	font-size: 1rem;
	line-height: 2;
	padding: 0.5rem 1rem;
	width: 100%;
	border: unset;
	border-radius: 0.25rem;
	outline-color: rgb(84 105 212 / 0.5);
	background-color: rgb(255, 255, 255);
	box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(60, 66, 87, 0.16) 0px 0px 0px 1px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px,
		rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

.field-checkbox input {
	width: 20px;
	height: 15px;
	margin-right: 5px;
	box-shadow: unset;
	min-height: unset;
}

.field-checkbox label {
	display: flex;
	align-items: center;
	margin: 0;
}

/* Ruleta ------------------------------------------------- */
.ruleta__content {
	position: relative;
	background: white;
	border-radius: 50%;
	margin: 0;
}

.ruleta__content:before {
	position: absolute;
	content: '';
	left: -20px;
	top: -20px;
	bottom: -20px;
	right: -20px;
	background: linear-gradient(180deg, rgb(255 45 76) 0%, rgb(182 0 27) 50%, rgb(255 45 76) 80%, rgb(255 45 76) 100%);

	border-radius: 50%;
	z-index: -2;
	box-shadow: 0px 0 20px 0px rgba(0, 0, 0, .30);
}

.ruleta__content:after {
	position: absolute;
	left: -10px;
	top: -10px;
	bottom: -10px;
	right: -10px;
	background: linear-gradient(90deg, rgb(255 45 76) 0%, rgb(182 0 27) 50%, rgb(255 45 76) 100%);
	content: '';
	border-radius: 50%;
	z-index: -1;
}

.ruleta__wrapper {
  --size: calc(min(var(--device-width), var(--device-height)) * 0.85);
  --lg-hs: 0 3%;
  --lg-stop: 50%;
  --lg: linear-gradient(hsl(var(--lg-hs) 0%) 0 var(--lg-stop), hsl(var(--lg-hs) 20%) var(--lg-stop) 100%);

  position: relative;
  display: grid;
  grid-gap: calc(var(--size) / 20);
  align-items: center;
  grid-template-areas:
    "spinner"
    "trigger";
  font-size: calc(var(--size) / 26);
  line-height: 1;
}

.ruleta__wrapper>* {
	grid-area: spinner;
}

/* .ruleta__wrapper .btn-spin {
	grid-area: trigger;
	justify-self: center;
} */
.ruleta__spinner {
	position: relative;
	display: grid;
	align-items: center;
	grid-template-areas: "spinner";
	width: var(--size);
	height: var(--size);
	transform: rotate(calc(var(--rotate, 25) * 1deg));
	border-radius: 50%;
	padding: 0;
	margin: 0;
	box-shadow: inset 0 0 0 calc(var(--size) / 40) rgb(var(--dark) / 10%);
	border: 5px solid rgb(var(--white) / 1);
	/* background-image: repeating-conic-gradient(var(--primary) 0deg, var(--primary) 30deg, var(--secondary) 30deg, var(--secondary) 60deg); */
}

.ruleta__spinner * {
	grid-area: spinner;
}

.ruleta__spinner li::after {
	position: absolute;
	width: 0.75rem;
	height: 0.75rem;
	background: rgb(var(--white) / 1);
	background: linear-gradient(rgb(var(--white) / 1), rgb(var(--yellow) / 1));
	left: -1.5vh;
	top: 50%;
	content: "";
	border: 1px solid rgb(var(--white) / 1);
	border-radius: 50%;
	margin: -6px 0 0 -6px;
	box-shadow: 0px 0px 20px rgb(var(--yellow) / 90%);
	animation: piscapisca 0.1s infinite;
}

@keyframes piscapisca {
	0% {
		box-shadow: 0px 0px 3px 3px rgb(var(--yellow) / 1), 0 0 5px 0px rgb(var(--yellow) / 1);
	}

	45% {
		box-shadow: 0 0 6px 3px rgb(var(--white) / 1), 0 0 20px 6px rgb(var(--yellow) / 1), 0 0 5px 2px rgb(var(--dark) / 1);
	}

	55% {
		box-shadow: 0 0 6px 3px rgb(var(--white) / 1), 0 0 20px 6px rgb(var(--yellow) / 1), 0 0 5px 2px rgb(var(--dark) / 1);
	}

	100% {
		box-shadow: 0px 0px 3px 3px rgb(var(--yellow) / 1), 0 0 5px 0px rgb(var(--yellow) / 1);
	}
}

.paleta__item {
	position: relative;
	display: flex;
	align-items: center;
	text-align: center;
	padding: 0 calc(var(--size) / 30) 0 0;
	text-shadow: 1px 0 10px rgb(var(--dark) / 20%);
	font-weight: bold;
	width: 50%;
	height: 50%;
	transform-origin: center right;
	transform: rotate(var(--rotate));
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	justify-content: flex-start;
}

.paleta__item .text {
	/*transform: rotate(-90deg);*/
	width: 70%;
	text-transform: initial;
	text-align: center;
}
/* Color para los elementos impares */
.paleta__item:nth-child(odd) {
	color: rgb(var(--white) / 1);
}

/* Color para los elementos pares */
.paleta__item:nth-child(even) {
		color: #e4263f;
}
.paleta__item .text::first-letter {
	text-transform: uppercase;
}

.paleta__item img {
	width: 50%;
	transform: rotate(-90deg);
	-webkit-filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));
}

.ruleta__pin {
	position: relative;
	left: calc(var(--size) / -15);
	width: calc(var(--size) / 10);
	height: calc(var(--size) / 20);
	background: var(--lg);
	z-index: 1;
	-webkit-clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
	clip-path: polygon(20% 0, 100% 50%, 20% 100%, 0% 50%);
	transform-origin: center left;
}

.button__play {
	--cap-size: calc(var(--size) / 4);
	width: var(--cap-size);
	height: var(--cap-size);
	margin: 0px auto;
	border-radius: 50%;
	background: rgb(180,150,65);
	background: white;
	position: relative;
	padding: 3px;
	box-shadow:
		inset 0 2px 3px rgb(var(--white) / 30%),
		0 5px 8px rgb(var(--dark) / 50%),
		0 10px 10px 4px rgb(var(--dark) / 30%);
	justify-self: center;
	z-index: 10;
	transition: opacity 200ms ease-out;
}

.button__play:after {
	content: "";
	position: absolute;
	top: -20px;
	left: -20px;
	right: -20px;
	bottom: -20px;
	z-index: -2;
	border-radius: inherit;
	box-shadow:
		inset 0 1px 0 rgb(var(--white) / 10%),
		0 1px 2px rgb(var(--dark) / 30%),
		0 0 10px rgb(var(--dark) / 10%);
}

.button__play:before {
	content: "";
	position: absolute;
	top: -10px;
	left: -10px;
	right: -10px;
	bottom: -10px;
	z-index: -1;
	border-radius: inherit;
	box-shadow: inset 0 10px 10px rgb(var(--dark) / 10%);
	-webkit-filter: blur(1px);
	filter: blur(1px);
}

.button__inner {
	display: flex;
	justify-content: center;
	align-items: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 0px solid transparent;
	color: rgb(var(--white) / 1);
	font-weight: 800;
	text-transform: uppercase;
	cursor: pointer;
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background: rgb(180,150,65);
background: #e4263f;
}

.button__inner {
	color: rgb(var(--dark) / 1);
	font-weight: 800;
	opacity: 1;
	z-index: 5;
	font-size: 1.25rem;
	text-shadow: 0px 0px 6px rgba(255,255,255,0.8);
}

.button__inner img {
	width: 100%;
}

.button__play {
	transition: opacity 200ms ease-out;
}

.button__play:focus {
	outline-offset: 2px;
}

.button__play:active {
	transform: translateY(1px);
}

.button__play:disabled {
	cursor: progress;
	opacity: 0.25;
}

/* Spinning animation */
.is-spinning .ruleta__spinner {
	transition: transform 8s cubic-bezier(0.1, -0.01, 0, 1);
}

.is-spinning .ticker {
	-webkit-animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
	animation: tick 700ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

@-webkit-keyframes tick {
	40% {
		transform: rotate(-12deg);
	}
}

@keyframes tick {
	40% {
		transform: rotate(-12deg);
	}
}

/* agregar lista de premios */
/* ------ */
.controls {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

.controls__footer {
	display: grid;
	grid-template-columns: 5fr 5fr;
	gap: 1rem;
}

.premios {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.premios__add {
	position: relative;
	display: grid;
	grid-template-columns: 8fr 2fr;
	gap: 1rem;
}

.premios__add input {
	width: 100%;
	background-color: transparent;
	color: rgb(var(--dark) / 1);
	font-size: 1rem;
	border: none;
	border: 2px solid rgb(var(--dark) / 10%);
	padding: 1rem;
	border-radius: 0.5rem;
}

.premios__add input:focus {
	outline: none;
	border-color: rgb(var(--green) / 1);
}

button {
	position: relative;
	background-color: transparent;
	border: none;
	outline: none;
	color: rgb(var(--white) / 1);
	cursor: pointer;
}
.intro {
	width: 90%;
	display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
	& form {
		align-items: center;
	}
}

/* Estilo para el input */
.input {
	width: 60%;
	padding: 1rem;
    border: 2px solid rgb(var(--white) / 1);
    border-radius: 5px;
	font-size: 1rem;
}

/* Estilo para los botones */
.btn__sprite {
	background-image: url('../imagen/btn_bg.svg'); /* Ruta de la imagen de fondo */
	background-size: 90%;
	background-position: center;
    background-repeat: no-repeat;
	height: 180px;
	-webkit-filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));
	filter: drop-shadow(0px 5px 5px rgba(0, 0, 0, 0.3));

	& svg {
		width: 50%;
	}
}
.btn__group div {
		display: flex;
	    flex-direction: column;
	    align-items: center;
		& span {
			color: white;
		}
	}
}

/* Cambiar el color del texto al pasar el mouse */
.btn__sprite:hover {
}

.list__entregados {
	border-radius: 0.5rem;
	padding: 1rem;
	background-color: rgb(var(--dark) / 5%);
	& h4 {
		display: flex;
		margin-block-end: 0.5rem;
		justify-content: space-between;
	}
}

.premios__list {
	width: 100%;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.premios__item {
	background-color: rgb(var(--white) / 1);
	padding: 0.5rem;
	display: flex;
	gap: 1rem;
	align-items: center;
	justify-items: center;
	border-bottom: 1px solid rgb(var(--neutral) / 1);
}
.premios__item:last-child {
    border: 0;
}

.premios__item input[type="checkbox"] {
	position: relative;
	appearance: none;
	height: 20px;
	width: 20px;
	border-radius: 50%;
	border: 2px solid rgb(var(--dark) / 20%);
}

.premios__item input[type="checkbox"]::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

.premios__item input[type="checkbox"]:checked {
	background-color: rgb(var(--red) / 10%);
	border-color: rgb(var(--red) / 80%);
}

.premios__item input[type="checkbox"]:checked::before {
	content: "✓";
	position: absolute;
	font-size: 1rem;
	color: rgb(var(--red) / 80%);
	font-weight: bold;
}

.premios__item span {
	font-size: 1rem;
	font-weight: 400;
	word-break: break-all;
	flex: 1;
}

.premios__item button {
	color: rgb(var(--white) / 1);
	width: 100%;
	padding: 0.5rem 0;
	border-radius: 0.5rem;
	border: none;
	cursor: pointer;
	outline: none;
}

.btn--edit {
	background-color: rgb(var(--green) / 1);
}

.btn--delete {
	background-color: rgb(var(--red) / 1);
}

.btn--success {
	background-color: rgb(var(--green) / 1);
}
.btn--dark {
	background-color: rgb(var(--dark) / 1);
}
.btn--neutral {
	color: rgb(var(--dark) / 1);
	background-color: rgb(var(--neutral) / 1);
}

.edit-input {
	width: 100%;
	background-color: transparent;
	color: rgb(var(--dark) / 1);
	font-size: 1rem;
	border: none;
	border: 2px solid rgb(var(--dark) / 10%);
	padding: 0.5rem 1rem;
	border-radius: 0.5rem;
}

.completed {
	text-decoration: line-through !important;
	color: rgb(var(--dark) / 1) !important;
}

#premioError {
	text-align: center;
	background-color: rgb(var(--white) / 1);
	margin-top: 24px;
	padding: 1rem 0;
	border-radius: 0.5rem;
	display: none;
}

.premios__img input[type="file"] {
	display: none;
}

.premios__img-upload {
	width: 2.5rem;
	height: 2.5rem;
	background-color: rgb(var(--neutral) / 50%);
	border: 2px dotted rgb(var(--dark) / 30%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 0.5rem;
}

.premios__img-upload:hover {
	background-color: rgb(var(--neutral) / 1);
	border-color: rgb(var(--dark) / 80%);
}

.premios__img-upload img {
	width: 90%;
	height: auto;
	cursor: pointer;
}

.premios__img-upload.has-img {
	border: none;
}

.premios__img-upload.has-img img {
	width: 90%;
	height: auto;
}

/*  */
.premio-ganado {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-color: rgb(var(--white) / 1);
	border: 5px solid #E7243F;

	padding: 20px;
	text-align: center;
	z-index: 1000;
	box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
	display: flex;
	flex-direction: column;
	align-items: center;
	border-radius: 1rem;
}

.premio-imagen {
	width: 60%;
	/* margin-bottom: 15px; */
}

.premio-texto {
	font-size: 2.25rem;
	font-weight: bold;
	color: rgb(var(--dark) / 1);
}

.oculto {
	display: none;
}

/* ========== */
.main--bg {
	animation: main--bg 3s ease-in-out infinite alternate;
	background-image: linear-gradient(-60deg, rgb(var(--blue)/1) 50%, rgb(var(--skyblue)/1) 50%);
	bottom: 0;
	left: -50%;
	opacity: .5;
	position: fixed;
	right: -50%;
	top: 0;
	z-index: -3;
}

.main--bg2 {
	animation-direction: alternate-reverse;
	animation-duration: 4s;
}

.main--bg3 {
	animation-duration: 5s;
}

@keyframes main--bg {
	0% {
		transform: translateX(-25%);
	}

	100% {
		transform: translateX(25%);
	}
}

@-webkit-keyframes rotating {
	from {
		-webkit-transform: rotate(0deg);
	}

	to {
		-webkit-transform: rotate(360deg);
	}
}
.premios__list ul {
    list-style: none;
    padding: 0;
}

.premio-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-block: 5px;
    border-bottom: 1px solid #ccc;
    padding: 10px 0;
	gap: 1rem;
}
.premio-item:last-child {
    border: 0;
}

.premio-info {
    display: flex;
    align-items: center;
    gap: 10px;
	flex: 1
}

.premio-img {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 5px;
    padding: 5px;
    background-color: rgb(var(--dark)/ 20%)
}

.premio-text {
    font-size: 16px;
    font-weight: bold;
}

.premio-stock {
    display: flex;
    align-items: center;
    gap: 5px;
}

.stock-input {
    width: 50px;
    padding: 5px;
    text-align: center;
	border: 2px solid rgb(var(--dark) / 10%);
	border-radius: 0.5rem;
}