* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: Arial, sans-serif;
	background: #ffffff;
	min-height: 100vh;
	padding: 20px;
}

body.no-scroll {
	overflow: hidden;
}

/* Loading Spinner */
.loading-spinner {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.95);
	z-index: 999;
	backdrop-filter: blur(4px);
}

.spinner {
	width: 50px;
	height: 50px;
	border: 4px solid #e5e7eb;
	border-top-color: var(--color-principal, #b91c1c);
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	margin-bottom: 20px;
}

@keyframes spin {
	to {
		transform: rotate(360deg);
	}
}

.loading-spinner p {
	color: #6b7280;
	font-size: 16px;
	font-weight: 500;
}

.container {
	max-width: 900px;
	margin: 0 auto;
}

.header {
	text-align: center;
	margin-bottom: 40px;
}

.titulo-rifa {
	font-size: clamp(45px, 8vw, 70px);
	font-weight: bold;
	color: #b91c1c;
	font-family: cursive;
	margin-bottom: 10px;
}

.titulo-navidena {
	font-size: 50px;
	font-weight: bold;
	color: #dc2626;
	margin-bottom: 20px;
}

.premios {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 20px;
	font-size: clamp(16px, 2.5vw, 20px);
	color: #374151;
	font-weight: 600;
}

.premios-titulo {
	margin-right: 5px;
	color: var(--color-principal, #b91c1c);
	font-weight: 700;
}

.premio-item {
	display: inline;
	color: #4b5563;
}

.premio-ordinal {
	font-weight: 700;
	color: var(--color-principal, #b91c1c);
}

.valor-box {
	margin-bottom: 20px;
}

.valor-box .precio {
	font-size: clamp(30px, 6vw, 45px);
	font-weight: bold;
	color: #b91c1c;
	margin-bottom: 8px;
}

.valor-box .fecha {
	font-size: clamp(20px, 4vw, 36px);
	color: #b91c1c;
	font-weight: 500;
}

.controles {
	display: flex;
	flex-direction: column;
	gap: 15px;
	align-items: center;
	margin-bottom: 30px;
}

.contador-text {
	font-size: 18px;
	font-weight: 500;
	color: #6b7280;
}

/* Botón de configuración */
.config-btn {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	background: none;
	border: none;
	cursor: pointer;
	transition: all 0.3s;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 8px;
}

.config-btn::before,
.config-btn::after,
.config-btn span {
	content: '';
	width: 5px;
	height: 5px;
	background: #6b7280;
	border-radius: 50%;
	transition: background 0.3s;
}

.config-btn span {
	display: block;
}

.config-btn:hover::before,
.config-btn:hover::after,
.config-btn:hover span {
	background: #374151;
}

.boton-sorteo {
	margin-top: 50px;
	background: linear-gradient(90deg, #fbbf24, #ef4444, #ec4899);
	color: white;
	font-weight: bold;
	padding: 15px 40px;
	border-radius: 50px;
	font-size: 20px;
	border: none;
	cursor: pointer;
	box-shadow: 0 10px 15px rgba(0,0,0,0.2);
	transition: all 0.3s;
	animation: pulso 2s infinite;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.boton-sorteo:hover {
	transform: scale(1.05);
	box-shadow: 0 15px 20px rgba(0,0,0,0.3);
}

.boton-sorteo:active {
	transform: scale(0.95);
}

.boton-sorteo:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	animation: none;
}

@keyframes pulso {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.05); }
}

.grilla {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 5px;
	margin-bottom: 40px;
}

.numero-btn {
	position: relative;
	aspect-ratio: 1;
	border: none;
	box-shadow: inset 0 0 0 2px var(--color-principal, #b91c1c);
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(5px);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: clamp(14px, 3vw, 24px);
	font-weight: bold;
	transition: background 0.2s;
}

.numero-btn:hover {
	background: rgba(254, 242, 242, 0.9);
}

.check-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	color: #059669;
	font-size: clamp(20px, 4vw, 40px);
	font-weight: bold;
	width: 100%;
	height: 100%;
}

.leyenda {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 30px;
	font-size: 14px;
	color: #6b7280;
}

.leyenda-item {
	display: flex;
	align-items: center;
	gap: 10px;
}

.leyenda-box {
	width: 32px;
	height: 32px;
	border: 2px solid #dc2626;
	background: white;
	position: relative;
}

.leyenda-box.vendido {
	position: relative;
}

.leyenda-box.vendido::after {
	content: '✓';
	position: absolute;
	top: -2px;
	right: -2px;
	background: #059669;
	border-radius: 50%;
	width: 14px;
	height: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 10px;
}

/* Modal */
.modal {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,0.5);
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 100;
}

.modal.activo {
	display: flex;
}

.modal-contenido {
	background: white;
	border-radius: 10px;
	box-shadow: 0 20px 25px rgba(0,0,0,0.3);
	max-width: 500px;
	width: 100%;
	padding: 30px;
}

.modal-contenido.config-modal {
	max-width: 600px;
	max-height: 90vh;
	overflow-y: auto;
}

.config-grid {
	display: grid;
	gap: 20px;
}

.config-field {
	display: flex;
	flex-direction: column;
}

.config-field label {
	margin-bottom: 8px;
	color: #374151;
	font-weight: 600;
}

.config-field input,
.config-field select {
	padding: 10px 15px;
	border: 2px solid #d1d5db;
	border-radius: 8px;
	font-size: 16px;
}

.config-field input:focus,
.config-field select:focus {
	outline: none;
	border-color: #dc2626;
}

.config-field input[type="color"] {
	height: 50px;
	cursor: pointer;
}

.config-field input[type="number"] {
	max-width: 150px;
}

.config-field-inline {
	display: flex;
	align-items: center;
	gap: 10px;
}

.config-field-inline label {
	margin: 0;
	min-width: 140px;
}

.config-field-inline input[type="color"] {
	width: 120px;
	height: 50px;
	border: 1px solid #d1d5db;
	border-radius: 8px;
	cursor: pointer;
	padding: 4px;
}

.font-preview {
	margin-top: 5px;
	margin-bottom: 10px;
	padding: 15px;
	background: #f3f4f6;
	border-radius: 8px;
	text-align: center;
	font-size: 32px;
	font-weight: bold;
	color: #b91c1c;
	border: 2px dashed #d1d5db;
}

.modal-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.modal-titulo {
	font-size: 24px;
	font-weight: bold;
}

.btn-cerrar {
	background: none;
	border: none;
	font-size: 24px;
	cursor: pointer;
	color: #6b7280;
}

.modal-body label {
	display: block;
	color: #374151;
	font-weight: 600;
	margin-bottom: 10px;
}

.modal-body input {
    width: 100%;
	padding: 10px 15px;
	border: 2px solid #d1d5db;
	border-radius: 8px;
	font-size: 16px;
	margin-bottom: 5px;
}

.modal-body input:focus {
	outline: none;
	border-color: #dc2626;
}

/* Chips de números disponibles en compra múltiple */
.multi-num-btn {
	border: 2px solid #d1d5db;
	background: #f9fafb;
	color: #111827;
	border-radius: 10px;
	padding: 10px 12px;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	transition: all 0.15s;
}

.multi-num-btn:hover {
	border-color: var(--color-principal, #b91c1c);
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.multi-num-btn.seleccionado {
	background: var(--color-principal, #b91c1c);
	color: #fff;
	border-color: var(--color-principal, #b91c1c);
	box-shadow: 0 8px 14px rgba(0,0,0,0.16);
}

.modal-hint {
	font-size: 12px;
	color: #6b7280;
	margin-bottom: 20px;
}

.modal-botones {
	display: flex;
	gap: 15px;
}

.btn {
	flex: 1;
	padding: 12px 20px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
}

.btn-cancelar {
	border: 2px solid #d1d5db;
	background: white;
	color: #374151;
}

.btn-cancelar:hover {
	background: #f3f4f6;
}

.btn-guardar {
	border: none;
	background: #10b981;
	color: white;
}

.btn-guardar:hover {
	background: #0ea673;
}

.btn-reset {
	width: 100%;
	padding: 12px 20px;
	border-radius: 8px;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s;
	border: 2px solid #dc2626;
	background: white;
	color: #dc2626;
	margin-top: 15px;
}

.btn-reset:hover {
	background: #dc2626;
	color: white;
}

/* Pantalla de sorteo */
.pantalla-sorteo {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 200;
	align-items: center;
	justify-content: center;
}

.pantalla-sorteo.activo {
	display: flex;
}

.fondo-animado {
	position: absolute;
	inset: 0;
	background: linear-gradient(45deg, #1a1a1a, #2d2d2d, #1a1a1a);
	background-size: 400% 400%;
	animation: gradiente 3s ease infinite;
}

.fondo-animado.ganador {
	background: linear-gradient(45deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #8b00ff);
	background-size: 400% 400%;
}

@keyframes gradiente {
	0% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

.sorteo-contenido {
	position: relative;
	z-index: 10;
	text-align: center;
	padding: 20px;
}

.sorteo-titulo {
	font-size: 50px;
	font-weight: bold;
	color: var(--color-principal, #b91c1c);
	margin-bottom: 40px;
	animation: parpadeo 1.5s infinite;
}

@keyframes parpadeo {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

.numero-display {
	background: white;
	border-radius: 30px;
	padding: 60px 80px;
	box-shadow: 0 20px 25px rgba(0,0,0,0.5);
	transition: transform 0.3s;
}

.numero-display:hover {
	transform: scale(1.05);
}

.numero-sorteando {
	font-size: 120px;
	font-weight: bold;
	color: var(--color-principal, #b91c1c);
}

.ganador-contenido {
	animation: rebote 1s;
}

@keyframes rebote {
	0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
	40% { transform: translateY(-30px); }
	60% { transform: translateY(-15px); }
}

.ganador-titulo {
	font-size: 40px;
	font-weight: bold;
	color: white;
	margin-bottom: 40px;
}

.ganador-box {
	background: white;
	border-radius: 30px;
	padding: 40px;
	box-shadow: 0 20px 25px rgba(0,0,0,0.5);
	max-width: 700px;
	margin: 0 auto;
}

.ganador-label {
	font-size: 30px;
	font-weight: bold;
	color: #dc2626;
	margin-bottom: 20px;
}

.ganador-numero {
	font-size: 100px;
	font-weight: bold;
	background: linear-gradient(90deg, #fbbf24, #ef4444, #ec4899);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin-bottom: 30px;
}

.ganador-nombre {
	font-size: 35px;
	font-weight: bold;
	color: #1f2937;
	margin-bottom: 30px;
	word-break: break-word;
}

.ganador-emojis {
	font-size: 50px;
	margin-bottom: 30px;
}

.btn-cerrar-sorteo {
	background: linear-gradient(90deg, #dc2626, #b91c1c);
	color: white;
	font-weight: bold;
	padding: 15px 50px;
	border-radius: 50px;
	font-size: 20px;
	border: none;
	cursor: pointer;
	box-shadow: 0 10px 15px rgba(0,0,0,0.2);
	transition: all 0.3s;
}

.btn-cerrar-sorteo:hover {
	transform: scale(1.05);
	box-shadow: 0 15px 20px rgba(0,0,0,0.3);
}

.btn-cerrar-sorteo:active {
	transform: scale(0.95);
}

/* Confeti */
.confeti {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.confeti-particula {
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	animation: caer 4s linear infinite;
}

@keyframes caer {
	to {
		transform: translateY(100vh) rotate(360deg);
	}
}

/* Responsive */
@media (max-width: 768px) {
	.container { padding: 10px; }
	.titulo-navidena { font-size: 30px; }
	.premios { font-size: 15px; flex-direction: column; gap: 6px; }
	.premio-subtitle { font-size: 15px; }
	.boton-sorteo { font-size: 16px; padding: 12px 30px; }
	.grilla { gap: 2px; }
	.numero-btn { font-size: 14px; }
	.contador-text { font-size: 15px; }
	.sorteo-titulo { font-size: 30px; }
	.numero-display { padding: 30px 40px; }
	.numero-sorteando { font-size: 80px; }
	.ganador-titulo { font-size: 25px; }
	.ganador-box { padding: 25px; }
	.ganador-label { font-size: 20px; }
	.ganador-numero { font-size: 60px; }
	.ganador-nombre { font-size: 25px; }
	.ganador-emojis { font-size: 35px; }
	.controles { flex-direction: column; }
}

@media (max-width: 480px) {
	.titulo-navidena { font-size: 26px; }
	.premios { font-size: 14px; }
	.premio-subtitle { font-size: 13px; }
	.boton-sorteo { font-size: 15px; padding: 11px 22px; }
	.grilla { gap: 1px; padding: 1px; }
	.numero-btn { font-size: 13px; box-shadow: inset 0 0 0 1px var(--color-principal, #b91c1c); border: none; background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(5px); }
	.contador-text { font-size: 14px; }
}