/* Estilos del Star Map (extraídos del tema, encapsulados en plugin) */

.starMapSection { background-color: transparent; position: relative; width: 100%; padding: 60px 24px; overflow: hidden; }
.starMapContainer { max-width: none; width: 100%; margin: 0; position: relative; z-index: 1; }
.starMapTitle { color: #ffffff; font-size: 48px; font-weight: 700; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; text-align: center; margin: 0 0 40px; }
.progressSection { margin-bottom: 60px; }
.progressInfo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.progressText, .progressGoal { color: #ffffff; font-size: 18px; font-weight: 400; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; }
.progressBarContainer { width: 100%; height: 12px; background-color: rgba(255, 255, 255, 0.1); border-radius: 6px; overflow: hidden; position: relative; }
.progressBar { height: 100%; background-color: #FFC229; border-radius: 6px; transition: width 0.1s ease-out; box-shadow: 0 0 10px rgba(255, 194, 41, 0.5); }
.mainContent { display: block; margin-bottom: 60px; }
.latestStarsOverlay { position: absolute; top: 20px; left: 20px; width: 300px; background-color: rgba(6, 10, 22, 0.66); border-radius: 12px; padding: 20px; backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: 0 12px 30px rgba(0,0,0,0.35); z-index: 12; transition: height 0.2s ease, padding-bottom 0.2s ease; }
.latestStarsOverlay:not(.open) { padding-bottom: 12px; }
.latestStarsOverlay:not(.open) .latestStarsList,
.latestStarsOverlay:not(.open) .emptyState { display: none; }
.latestStarsOverlayHeader { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.toggleOverlayBtn { border: 1px solid rgba(255, 255, 255, 0.18); background: rgba(12, 18, 34, 0.8); color: #fff; border-radius: 999px; padding: 6px 10px; font-size: 12px; font-weight: 700; cursor: pointer; transition: background-color 0.2s ease; }
.toggleOverlayBtn:hover { background: rgba(12, 18, 34, 0.95); }
.latestStarsTitle { color: #ffffff; font-size: 20px; font-weight: 700; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; margin: 0 0 20px; }
.latestStarsList { list-style: none; padding: 0; margin: 0; }
.emptyState { color: #ffffff; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; }
.latestStarItem { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.latestStarItem:last-child { border-bottom: none; }
.starName { color: #ffffff; font-size: 16px; font-weight: 400; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; }
.starCount.highlighted { color: #FFC229; }
.starCount { color: #FFC229; font-size: 16px; font-weight: 700; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; min-width: 24px; text-align: right; }
.starMap { position: relative; width: 100%; min-height: 640px; background: radial-gradient(1200px 700px at 75% 20%, rgba(30, 45, 85, 0.15), rgba(4, 6, 16, 0.85)) , rgba(4, 6, 16, 0.85); border-radius: 14px; border: 1px solid rgba(255, 255, 255, 0.08); overflow: hidden; cursor: grab; user-select: none; -webkit-user-drag: none; -webkit-user-select: none; -ms-user-select: none; touch-action: none; }
.mapControls { position: absolute; left: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 15; pointer-events: none; }
.mapControls > * { pointer-events: auto; }
.zoomButton { width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(12, 18, 34, 0.8); color: #ffffff; font-size: 20px; font-weight: 700; cursor: pointer; backdrop-filter: blur(4px); transition: background-color 0.2s ease, transform 0.1s ease; touch-action: manipulation; }
.zoomButton:hover { background: rgba(12, 18, 34, 0.95); }
.zoomButton:active { transform: translateY(1px); }
.fullscreenButton { width: 40px; height: 40px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(12, 18, 34, 0.8); color: #ffffff; font-size: 18px; font-weight: 700; cursor: pointer; backdrop-filter: blur(4px); transition: background-color 0.2s ease, transform 0.1s ease; pointer-events: auto; touch-action: manipulation; display: flex; align-items: center; justify-content: center; z-index: 12; position: relative; -webkit-tap-highlight-color: rgba(255, 194, 41, 0.3); }
.fullscreenButton:hover { background: rgba(12, 18, 34, 0.95); }
.fullscreenButton:active { transform: translateY(1px); background: rgba(12, 18, 34, 1); }
.fullscreenButton .fullscreenIcon { 
	line-height: 1; 
	pointer-events: none; 
	user-select: none; 
	-webkit-user-select: none;
	display: inline-block;
	width: 14px;
	height: 14px;
	position: relative;
}
/* Crear icono de pantalla completa con CSS (cuadrados superpuestos) */
.fullscreenButton .fullscreenIcon::before,
.fullscreenButton .fullscreenIcon::after {
	content: '';
	position: absolute;
	border: 2px solid currentColor;
	width: 6px;
	height: 6px;
}
/* Cuadrado superior izquierdo (esquinas externas) */
.fullscreenButton .fullscreenIcon::before {
	top: 0;
	left: 0;
	border-right: none;
	border-bottom: none;
}
/* Cuadrado inferior derecho (esquinas externas) */
.fullscreenButton .fullscreenIcon::after {
	bottom: 0;
	right: 0;
	border-left: none;
	border-top: none;
}
/* Cuando está en pantalla completa, mostrar icono de salir (cuadrados internos) */
.fullscreenButton.is-fullscreen .fullscreenIcon::before {
	top: 3px;
	left: 3px;
	border: 2px solid currentColor;
	border-right: none;
	border-bottom: none;
}
.fullscreenButton.is-fullscreen .fullscreenIcon::after {
	bottom: 3px;
	right: 3px;
	border: 2px solid currentColor;
	border-left: none;
	border-top: none;
}
.fullscreenButton.is-fullscreen { background: rgba(12, 18, 34, 0.8); border-color: rgba(255, 255, 255, 0.2); }
.fullscreenButton.is-fullscreen:hover { background: rgba(12, 18, 34, 0.95); }
.fullscreenButton.is-fullscreen:active { background: rgba(12, 18, 34, 1); }
.starMapInner { position: absolute; top: 0; left: 0; }
.star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #ffffff; box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.5), 0 0 2px 1px #ffffff; }
.star.filled { background: #fff; box-shadow: 0 0 12px 6px rgba(255, 255, 255, 0.65), 0 0 3px 1px #ffffff; }
.baseStar { position: absolute; width: 2px; height: 2px; background: #fff; border-radius: 50%; box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.5), 0 0 2px 1px #fff; opacity: 0.8; transform: translate(-50%, -50%); animation: twinkle 2.5s ease-in-out infinite; }
.baseStar.big { width: 6px; height: 6px; box-shadow: 0 0 14px 6px rgba(255, 255, 255, 0.53), 0 0 4px 1px #fff; }
.starPoint { position: absolute; display: flex; flex-direction: column; align-items: center; transform: translate(-50%, -50%); cursor: pointer; transition: transform 0.3s ease; z-index: 1; }
.starPoint:hover { transform: translate(-50%, -50%) scale(1.2); }
.starDot { width: 2px; height: 2px; border-radius: 50%; background-color: #ffffff; margin-bottom: 4px; box-shadow: 0 0 8px 2px rgba(255, 255, 255, 0.5), 0 0 2px 1px #fff; position: relative; z-index: 1; }
.starPoint.big .starDot { width: 6px; height: 6px; box-shadow: 0 0 14px 6px rgba(255, 255, 255, 0.53), 0 0 4px 1px #fff; }
.starPoint.gold .starDot { background-color: #FFC229; box-shadow: 0 0 16px 8px rgba(255, 194, 41, 0.53), 0 0 3px 1px #FFC229; }
.starPoint.colored { color: var(--star-color); }
.starPoint.colored .starDot { background-color: currentColor; box-shadow: 0 0 16px 8px currentColor, 0 0 3px 1px currentColor; }
.starPoint.ignite .starDot { animation: pulseGlow 1.6s ease-out 1; }
.starLabel { position: absolute; top: -16px; left: 10px; white-space: nowrap; font-size: 12px; background: rgba(26, 35, 56, 0.95); border: 1px solid rgba(255, 255, 255, 0.3); padding: 4px 8px; border-radius: 999px; color: #fff; backdrop-filter: blur(6px); font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; font-weight: 600; z-index: 100; pointer-events: auto; transition: font-size 0.3s ease, padding 0.3s ease, transform 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; }
/* En constelaciones de 20 estrellas, poner el label más abajo en Y, fuera del área de la espiral */
.starPoint.constellation20 .starLabel { top: 70px; bottom: auto; left: 50%; transform: translateX(-50%); }
/* Solo hacer clickeable y agrandar si la estrella tiene mensaje */
.starPoint[data-star-message] .starLabel { cursor: pointer; }
.starPoint[data-star-message]:hover .starLabel,
.starPoint[data-star-message] .starLabel:hover { font-size: 14px; padding: 6px 10px; transform: translateY(-2px); background: rgba(26, 35, 56, 1); border-color: rgba(255, 255, 255, 0.5); }
/* Ajustar hover para constelaciones de 20 estrellas */
.starPoint.constellation20[data-star-message]:hover .starLabel,
.starPoint.constellation20[data-star-message] .starLabel:hover { 
	font-size: 14px; 
	padding: 6px 10px; 
	transform: translateX(-50%) translateY(-2px); 
	background: rgba(26, 35, 56, 1); 
	border-color: rgba(255, 255, 255, 0.5); 
}
/* Asegurar que el brillo no tape el título */
.starMapButton { position: absolute; bottom: 20px; right: 20px; background-color: #FFC229; color: #0b0b0b; border: none; border-radius: 999px; padding: 14px 28px; font-size: 14px; font-weight: 800; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; text-transform: uppercase; cursor: pointer; box-shadow: 0 8px 22px rgba(255, 194, 41, 0.25); transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; z-index: 10; pointer-events: auto; touch-action: auto; }
.starMapButton:hover { background-color: #ffd24f; transform: translateY(-2px); box-shadow: 0 12px 28px rgba(255, 210, 79, 0.35); }
.starMapButton:active { transform: translateY(0); }
.starMapDescription { color: #ffffff; font-size: 18px; font-weight: 400; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; text-align: center; margin: 0 0 40px; }
.interactionHint { color: rgba(255, 255, 255, 0.75); font-size: 14px; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; margin: -8px 0 24px; text-align: center; }
.starMapCTA { display: block; margin: 0 auto; background-color: #FFC229; color: #000000; border: none; border-radius: 8px; padding: 18px 48px; font-size: 18px; font-weight: 700; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; text-transform: uppercase; cursor: pointer; transition: background-color 0.3s ease, transform 0.2s ease; pointer-events: auto; touch-action: auto; }
.starMapCTA:hover { background-color: #FFC229; transform: translateY(-2px); }
.starMapCTA:active { transform: translateY(0); }
@keyframes twinkle { 0% { opacity: 0.5; filter: saturate(100%); } 50% { opacity: 1; filter: saturate(130%); } 100% { opacity: 0.6; filter: saturate(100%); } }
@keyframes pulseGlow { 0% { box-shadow: 0 0 14px 6px rgba(255, 194, 41, 0.5), 0 0 4px 1px #FFC229; } 50% { box-shadow: 0 0 22px 10px rgba(255, 194, 41, 0.75), 0 0 7px 2px #FFC229; } 100% { box-shadow: 0 0 14px 6px rgba(255, 194, 41, 0.5), 0 0 4px 1px #FFC229; } }
@media (max-width: 1024px) {
	.starMapSection { padding: 56px 24px; }
	.starMap { min-height: 540px; }
	.progressInfo { gap: 12px; }
}
@media (max-width: 768px) {
	.starMapSection { padding: 60px 24px; }
	.starMapTitle { font-size: 32px; margin-bottom: 30px; }
	.progressText, .progressGoal { font-size: 14px; }
	.starMap { min-height: 460px; }
	.starMapDescription { font-size: 16px; }
	.starMapCTA { padding: 16px 36px; font-size: 16px; }
	.latestStarsOverlay { width: 240px; padding: 16px; }
	.latestStarsTitle { font-size: 18px; margin-bottom: 16px; }
	/* Mantener el mismo icono y tamaño en tablet que en desktop */
	.fullscreenButton .fullscreenIcon { font-size: 18px; }
}
@media (max-width: 480px) {
	.starMapTitle { font-size: 28px; }
	.progressInfo { flex-direction: column; gap: 10px; align-items: flex-start; }
	.starMap { min-height: 360px; }
	.starMapButton { bottom: 10px; right: 10px; padding: 10px 18px; font-size: 12px; }
	.latestStarsOverlay { left: auto; right: 10px; top: 10px; width: 200px; max-width: calc(100% - 20px); padding: 12px; }
	.latestStarsTitle { font-size: 16px; margin-bottom: 12px; }
	.latestStarItem { padding: 8px 0; }
	.starName { font-size: 13px; }
	.starCount { font-size: 13px; }
	.toggleOverlayBtn { padding: 5px 8px; font-size: 11px; }
	.mapControls { left: 10px; bottom: 10px; }
	.zoomButton { width: 44px; height: 44px; font-size: 18px; min-width: 44px; min-height: 44px; }
	.fullscreenButton { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
	.fullscreenButton .fullscreenIcon { font-size: 18px; }
	.starMapCTA { padding: 14px 28px; font-size: 14px; }
}

/* Estilos del modal (integrados para aislar del tema) */
dialog.donationModal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	z-index: 1000;
	overflow: hidden;
}
dialog.donationModal:not([open]) { display: none; }
dialog.donationModal::backdrop { background: rgba(4, 7, 18, 0.55); backdrop-filter: blur(6px); }
dialog.donationModal[open] { display: flex; animation: dm-fadeIn 0.2s ease-out; }
@keyframes dm-fadeIn { from { opacity: 0; } to { opacity: 1; } }
.donationModalContent {
	width: min(520px, 92vw);
	border-radius: 20px;
	background: linear-gradient(165deg, #050817 0%, #070c1d 60%, #050714 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	padding: 24px;
	animation: dm-slideUp 0.3s ease-out;
	max-height: 90vh;
	overflow-y: auto;
	margin: auto;
	position: relative;
}
.donationModalContent::-webkit-scrollbar { width: 8px; }
.donationModalContent::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.05); border-radius: 4px; }
.donationModalContent::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 4px; }
.donationModalContent::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }
@keyframes dm-slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.donationModalHeader { display: flex; align-items: flex-start; justify-content: space-between; padding-bottom: 16px; border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 20px; }
.donationModalTitleSection { flex: 1; }
.donationModalHeader h2 { color: #ffffff; font-size: 24px; font-weight: 700; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; margin: 0 0 8px 0; }
.donationModalSubtitle { color: rgba(255, 255, 255, 0.8); font-size: 14px; font-weight: 400; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; margin: 0; }
.modalCloseButton { border: none; background: rgba(255, 255, 255, 0.1); color: #fff; border-radius: 10px; padding: 8px 12px; cursor: pointer; font-size: 20px; line-height: 1; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; transition: background-color 0.2s ease; pointer-events: auto; touch-action: auto; }
.modalCloseButton:hover { background: rgba(255, 255, 255, 0.2); }
.donationModalBody { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.donationFormGroup { display: flex; flex-direction: column; gap: 8px; }
.donationFormGroup.full { grid-column: 1 / -1; }
.donationFormGroup label { color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 400; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; }
.donationNameLabel, .donationNameLabelConstellation { color: rgba(255, 255, 255, 0.7); font-size: 14px; font-weight: 400; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; }
.donationFormGroup input, .donationFormGroup select, .donationFormGroup textarea {
	width: 100%;
	padding: 12px 16px;
	border-radius: 12px;
	border: 1px solid rgba(42, 53, 82, 1);
	background: rgba(16, 24, 43, 0.8);
	color: #fff;
	font-size: 16px;
	font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif;
	transition: border-color 0.2s ease;
	resize: vertical;
}
.donationFormGroup input:focus, .donationFormGroup select:focus, .donationFormGroup textarea:focus { outline: none; border-color: #FFC229; }
.donationFormGroup input::placeholder, .donationFormGroup textarea::placeholder { color: rgba(142, 162, 207, 1); }
.donationNote { grid-column: 1 / -1; font-size: 14px; color: rgba(207, 215, 255, 0.56); font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; margin-top: 8px; }
.donationNoteFinal { margin-top: 16px; margin-bottom: 0; }
.donationModalActions {
	display: flex;
	gap: 16px;
	justify-content: flex-end;
	margin-top: 24px;
	padding-top: 0;
	border-top: none;
}
.donationButtonSecondary, .donationButtonPrimary {
	padding: 12px 24px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s ease;
	pointer-events: auto;
	touch-action: auto;
}
.donationButtonSecondary {
	background: #1f1f24;
	border-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}
.donationButtonSecondary:hover {
	background: #2a2a31;
	border-color: rgba(255, 255, 255, 0.16);
	transform: translateY(-1px);
}
.donationButtonPrimary {
	background: #ffc229;
	border-color: #ffc229;
	color: #0b0b0b;
	box-shadow: 0 8px 18px rgba(255, 194, 41, 0.3);
}
.donationButtonPrimary:hover { background: #ffcf4d; border-color: #ffcf4d; transform: translateY(-1px); }
.donationButtonPrimary:active { transform: translateY(0); }
@media (max-width: 728px) {
	dialog.donationModal {
		position: fixed !important;
		inset: 0 !important;
		width: 100vw !important;
		height: 100vh !important;
		max-width: 100vw !important;
		max-height: 100vh !important;
		align-items: stretch !important;
		justify-content: stretch !important;
		padding: 0 !important;
		margin: 0 !important;
		border: none !important;
	}

	.donationModalContent {
		width: 100vw !important;
		height: 100vh !important;
		max-width: 100vw !important;
		max-height: 100vh !important;
		min-width: 100vw !important;
		min-height: 100vh !important;
		border-radius: 0 !important;
		margin: 0 !important;
		padding: 20px;
		display: flex !important;
		flex-direction: column;
		box-sizing: border-box;
		position: relative !important;
		animation: none !important; /* Desactivar animación que puede interferir */
	}

	.donationModalHeader {
		flex-shrink: 0; /* Que no se aplaste */
	}

	.donationModalBody {
		grid-template-columns: 1fr;
		overflow-y: auto;
		flex-grow: 1;
		padding-right: 4px; /* Espacio para scrollbar si aparece */
	}

	.donationModalActions {
		flex-direction: column;
		flex-shrink: 0; /* Que no se aplaste */
		padding-bottom: 20px; /* Espacio extra abajo seguro */
	}

	.donationButtonSecondary, .donationButtonPrimary { width: 100%; }
	
	/* Asegurar que los inputs sean editables en móvil */
	.donationFormGroup input,
	.donationFormGroup select,
	.donationFormGroup textarea {
		font-size: 16px !important; /* Evita zoom automático en iOS */
		-webkit-appearance: none;
		appearance: none;
		touch-action: manipulation;
		user-select: text;
		-webkit-user-select: text;
		pointer-events: auto;
		-webkit-tap-highlight-color: rgba(255, 194, 41, 0.3);
	}
	
	/* Asegurar que el modal y su contenido sean interactivos */
	dialog.donationModal {
		touch-action: auto;
		pointer-events: auto;
	}
	
	/* Mejorar la interacción táctil de los botones */
	.optionButton,
	.colorBubble,
	.donorTypeButton {
		touch-action: manipulation;
		-webkit-tap-highlight-color: rgba(255, 194, 41, 0.3);
		min-height: 44px; /* Tamaño mínimo recomendado para toques */
	}
}

/* UI personalizada del modal */
.donorTypeToggle { display: inline-flex; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 4px; gap: 4px; }
.donorTypeButton { background: transparent; color: #fff; border: none; padding: 10px 14px; border-radius: 10px; cursor: pointer; font-weight: 700; font-size: 14px; font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif; transition: background-color .2s ease, transform .06s ease; pointer-events: auto; touch-action: auto; }
.donorTypeButton:active { transform: translateY(1px); }
.donorTypeButton.active { background: rgba(255,255,255,0.14); }

.amountOptions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.optionButton {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 24px 12px 18px;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.12);
	background: #0c132c;
	color: #ffffff;
	font-weight: 400;
	font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif;
	cursor: pointer;
	transition: transform .06s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
	pointer-events: auto;
	touch-action: auto;
	position: relative;
	min-height: 110px;
}
.optionButton:hover { border-color: rgba(255,255,255,0.3); }
.optionButton:active { transform: translateY(1px) scale(0.99); }
.optionButton.active {
	border-color: #ffc229;
	background: #ffc229;
	color: #0b0b0b;
	box-shadow: 0 8px 20px rgba(255, 194, 41, 0.35);
}
.optionTitle {
	font-size: 13px;
	font-weight: 500;
	text-align: center;
	line-height: 1.4;
	color: inherit;
}
.optionAmount {
	font-size: 24px;
	font-weight: 700;
	text-align: center;
	color: inherit;
}
.optionStars {
	font-size: 12px;
	font-weight: 500;
	text-align: center;
	color: rgba(255,255,255,0.7);
	margin-top: 2px;
}
.optionButton.active .optionStars { color: rgba(11, 11, 11, 0.7); }
.optionCheckmark {
	position: absolute;
	top: -10px;
	left: 50%;
	transform: translate(-50%, 0);
	width: 26px;
	height: 26px;
	background: #0c132c;
	border: 2px solid #ffc229;
	border-radius: 999px;
	display: none;
	align-items: center;
	justify-content: center;
	color: #ffc229;
	font-size: 14px;
	font-weight: 700;
}
.optionButton.active .optionCheckmark {
	display: flex;
	background: #0b0b0b;
	color: #ffc229;
}

.colorOptions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-start; }
.colorBubble { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 999px; border: 2px solid rgba(255,255,255,0.18); background: rgba(16,24,43,0.6); cursor: pointer; transition: transform .06s ease, border-color .2s ease, box-shadow .2s ease; pointer-events: auto; touch-action: auto; }
.colorBubble:active { transform: translateY(1px) scale(0.98); }
.colorBubble .bubble { display: block; width: 28px; height: 28px; border-radius: 999px; background: var(--bubble-color, #fff); }
.colorBubble.active { border-color: #FFC229; box-shadow: 0 0 0 3px rgba(255,194,41,0.18) inset; }

/* Tooltip para mensajes de estrellas */
.starTooltip {
	position: absolute;
	background: rgba(26, 35, 56, 0.98);
	border: 1px solid rgba(255, 255, 255, 0.3);
	border-radius: 12px;
	padding: 16px 20px;
	color: #ffffff;
	font-size: 14px;
	font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif;
	font-weight: 400;
	line-height: 1.5;
	max-width: 300px;
	word-wrap: break-word;
	backdrop-filter: blur(8px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
	z-index: 1000;
	pointer-events: auto;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.starTooltip.visible {
	opacity: 1;
	transform: translateY(0);
}

.starTooltip::before {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid rgba(26, 35, 56, 0.98);
}

.starTooltip.below::before {
	bottom: auto;
	top: -8px;
	border-top: none;
	border-bottom: 8px solid rgba(26, 35, 56, 0.98);
}

/* Estilos para overlay de pantalla completa en móvil */
.fullscreenPrompt {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: rgba(4, 6, 16, 0.95);
	backdrop-filter: blur(8px);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 1000;
	animation: fadeIn 0.3s ease-out;
	pointer-events: auto;
}


@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

.fullscreenPromptContent {
	background: linear-gradient(165deg, #050817 0%, #070c1d 60%, #050714 100%);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 20px;
	padding: 32px 24px;
	max-width: 90%;
	width: 400px;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
	text-align: center;
}

.fullscreenPromptTitle {
	color: #ffffff;
	font-size: 24px;
	font-weight: 700;
	font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif;
	margin: 0 0 16px;
}

.fullscreenPromptText {
	color: rgba(255, 255, 255, 0.8);
	font-size: 16px;
	font-weight: 400;
	font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif;
	line-height: 1.5;
	margin: 0 0 24px;
}

.fullscreenPromptActions {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.fullscreenPromptButton {
	padding: 14px 24px;
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.13);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	font-family: 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', sans-serif;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.2s ease;
	pointer-events: auto;
	touch-action: auto;
	width: 100%;
}

.fullscreenPromptButtonPrimary {
	background: #ffc229;
	border-color: #ffc229;
	color: #0b0b0b;
	box-shadow: 0 8px 18px rgba(255, 194, 41, 0.3);
}

.fullscreenPromptButtonPrimary:hover {
	background: #ffcf4d;
	border-color: #ffcf4d;
	transform: translateY(-1px);
}

.fullscreenPromptButtonPrimary:active {
	transform: translateY(0);
}

.fullscreenPromptButtonSecondary {
	background: #1f1f24;
	border-color: rgba(255, 255, 255, 0.08);
	color: #ffffff;
}

.fullscreenPromptButtonSecondary:hover {
	background: #2a2a31;
	border-color: rgba(255, 255, 255, 0.16);
	transform: translateY(-1px);
}

.fullscreenPromptButtonSecondary:active {
	transform: translateY(0);
}

/* Estilos responsive para pantalla completa */
@media (max-width: 768px) {
	.fullscreenPromptContent {
		padding: 24px 20px;
		width: 85%;
		max-width: 350px;
	}
	
	.fullscreenPromptTitle {
		font-size: 20px;
		margin-bottom: 12px;
	}
	
	.fullscreenPromptText {
		font-size: 14px;
		margin-bottom: 20px;
	}
	
	.fullscreenPromptButton {
		padding: 12px 20px;
		font-size: 13px;
	}
}

@media (max-width: 480px) {
	.fullscreenPromptContent {
		padding: 20px 16px;
		width: 90%;
	}
	
	.fullscreenPromptTitle {
		font-size: 18px;
	}
	
	.fullscreenPromptText {
		font-size: 13px;
	}
}