/* PaGana Bingo — frontend */

.pgb {
	--pg-verde: #234a3d;
	--pg-verde-osc: #16332a;
	--pg-lima: #eeff6b;
	--pg-lima-osc: #cfe23f;
	--pg-linea: rgba(255, 255, 255, .16);
	--pg-rojo: #e05a4c;

	font-family: inherit;
	color: #fff;
	max-width: 1000px;
	margin: 0 auto 28px;
}

.pgb *, .pgb *::before, .pgb *::after { box-sizing: border-box; }

.pgb h3 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
	color: #fff;
}

.pgb-ayuda {
	font-size: 13px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .72);
	margin: 4px 0 14px;
}

.pgb-cargando {
	background: var(--pg-verde);
	border-radius: 14px;
	padding: 40px 20px;
	text-align: center;
	color: rgba(255, 255, 255, .8);
	font-size: 14px;
}

/* ---------- Botones ---------- */

.pgb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 12px 22px;
	border: 1px solid var(--pg-lima);
	border-radius: 10px;
	background: var(--pg-lima);
	color: var(--pg-verde-osc);
	font-size: 15px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	line-height: 1.2;
	transition: background .12s ease;
}

.pgb-btn:hover:not(:disabled) { background: var(--pg-lima-osc); }
.pgb-btn:disabled { opacity: .45; cursor: not-allowed; }
.pgb-btn:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.pgb-btn--linea { background: transparent; color: #fff; border-color: var(--pg-linea); }
.pgb-btn--linea:hover:not(:disabled) { background: rgba(255, 255, 255, .1); }
.pgb-btn--mini { padding: 6px 14px; font-size: 13px; }

/* ---------- Acceso ---------- */

.pgb-acceso {
	background: var(--pg-verde);
	border-radius: 14px;
	padding: 30px 26px;
	text-align: center;
	max-width: 460px;
	margin: 0 auto;
}

.pgb-acceso .pgb-ayuda { max-width: 34ch; margin-left: auto; margin-right: auto; }

.pgb-fila { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

.pgb-acceso input[type="text"] {
	flex: 1;
	min-width: 170px;
	padding: 12px 16px;
	border: 1px solid var(--pg-linea);
	border-radius: 10px;
	background: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .18em;
	text-align: center;
	text-transform: uppercase;
	font-family: ui-monospace, Menlo, Consolas, monospace;
}

.pgb-acceso input::placeholder { color: rgba(255, 255, 255, .35); letter-spacing: .1em; }
.pgb-acceso input:focus { outline: 2px solid var(--pg-lima); background: rgba(255, 255, 255, .16); }

.pgb-msg { font-size: 13.5px; margin-top: 12px; min-height: 20px; }
.pgb-msg--error { color: #ffc9c1; }

/* ---------- Cabecera del jugador ---------- */

.pgb-jugador-cab {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	background: var(--pg-verde);
	border-radius: 14px;
	padding: 16px 22px;
	margin-bottom: 18px;
}

.pgb-jugador-cab strong { display: block; font-size: 16px; }
.pgb-jugador-meta { display: block; font-size: 12.5px; color: rgba(255, 255, 255, .68); margin-top: 2px; }

/* ---------- Tablero ---------- */

.pgb-tablero, .pgb-seleccion, .pgb-mis-cartones {
	background: var(--pg-verde);
	border-radius: 14px;
	padding: 22px;
	margin-bottom: 18px;
}

.pgb-marcador { text-align: center; margin-bottom: 20px; }

.pgb-bola {
	width: 132px;
	height: 132px;
	margin: 0 auto;
	border-radius: 50%;
	background: #fff;
	border: 6px solid var(--pg-lima);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.pgb-bola-letra {
	font-size: 13px;
	font-weight: 800;
	letter-spacing: .18em;
	color: #2f6151;
	min-height: 16px;
}

.pgb-bola-num {
	font-size: 50px;
	font-weight: 800;
	color: var(--pg-verde-osc);
	font-variant-numeric: tabular-nums;
}

.pgb-bola.is-nueva { animation: pgb-salta .45s ease; }
@keyframes pgb-salta {
	0% { transform: scale(.86); }
	55% { transform: scale(1.06); }
	100% { transform: scale(1); }
}

.pgb-contador { font-size: 13px; color: rgba(255, 255, 255, .75); margin: 12px 0; }
.pgb-contador span { color: var(--pg-lima); font-weight: 700; }

.pgb-ultimas { display: flex; justify-content: center; gap: 7px; min-height: 38px; }
.pgb-ultimas span {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .12);
	border: 1px solid var(--pg-linea);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.pgb-ultimas span:last-child { background: var(--pg-lima); color: var(--pg-verde-osc); border-color: var(--pg-lima); }

.pgb-tabla75 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.pgb-col { display: flex; flex-direction: column; gap: 5px; }

.pgb-col-cab {
	text-align: center;
	font-size: 18px;
	font-weight: 800;
	padding: 5px 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, .1);
	color: var(--pg-lima);
}

.pgb-num {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background: rgba(255, 255, 255, .07);
	border: 1px solid var(--pg-linea);
	font-size: 13.5px;
	font-weight: 600;
	color: rgba(255, 255, 255, .5);
	font-variant-numeric: tabular-nums;
	transition: background .18s ease, color .18s ease;
}

.pgb-num.is-salido {
	background: var(--pg-lima);
	border-color: var(--pg-lima);
	color: var(--pg-verde-osc);
	font-weight: 800;
}

.pgb-num.is-ultima { box-shadow: 0 0 0 3px rgba(238, 255, 107, .4); }

/* ---------- Seleccion tipo cine ---------- */

.pgb-mapa {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
	gap: 7px;
	margin: 16px 0;
	max-height: 340px;
	overflow-y: auto;
	padding-right: 4px;
}

.pgb-asiento {
	aspect-ratio: 1 / 1;
	border: 1px solid var(--pg-linea);
	border-radius: 8px;
	background: rgba(255, 255, 255, .08);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	font-family: inherit;
	cursor: pointer;
	font-variant-numeric: tabular-nums;
	transition: background .1s ease;
}

.pgb-asiento:hover:not(:disabled) { background: rgba(238, 255, 107, .28); }
.pgb-asiento:focus-visible { outline: 2px solid var(--pg-lima); outline-offset: 1px; }
.pgb-asiento.is-mio { background: var(--pg-lima); border-color: var(--pg-lima); color: var(--pg-verde-osc); }
.pgb-asiento.is-vendido { background: rgba(255, 255, 255, .04); color: rgba(255, 255, 255, .22); cursor: not-allowed; }
.pgb-asiento.is-apartado { background: rgba(224, 90, 76, .3); border-color: rgba(224, 90, 76, .5); color: rgba(255, 255, 255, .5); cursor: not-allowed; }

.pgb-seleccion-pie {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	border-top: 1px solid var(--pg-linea);
	padding-top: 16px;
}

.pgb-seleccion-pie span { font-size: 14px; font-weight: 600; }

/* ---------- Cartones del jugador ---------- */

.pgb-mis-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
	gap: 14px;
	margin: 14px 0;
}

.pgb-carton-jugador { background: #fff; border-radius: 10px; overflow: hidden; }

.pgb-carton-cab {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	background: var(--pg-verde-osc);
	color: var(--pg-lima);
	font-weight: 800;
	font-size: 14px;
	text-align: center;
	padding: 6px 0;
}

.pgb-carton-celdas {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: #dfe3da;
}

.pgb-carton-celdas span {
	background: #fff;
	text-align: center;
	padding: 10px 2px;
	font-size: 14px;
	font-weight: 700;
	color: #33413b;
	font-variant-numeric: tabular-nums;
	transition: background .2s ease, color .2s ease;
}

.pgb-carton-celdas .is-marcado { background: var(--pg-verde); color: var(--pg-lima); }
.pgb-carton-celdas .is-libre { background: var(--pg-lima); color: var(--pg-verde-osc); }

.pgb-carton-pie {
	text-align: center;
	padding: 6px;
	font-size: 12px;
	font-weight: 700;
	color: var(--pg-verde);
	background: #f0f3e8;
}

/* ---------- Ganadores ---------- */

.pgb-ganadores {
	background: var(--pg-verde);
	border-radius: 14px;
	padding: 22px;
}

.pgb-lista-premios { list-style: none; margin: 12px 0 0; padding: 0; }

.pgb-premio {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 4px 12px;
	padding: 12px 0;
	border-bottom: 1px solid var(--pg-linea);
	font-size: 14.5px;
}

.pgb-premio-monto { color: var(--pg-lima); font-weight: 700; }
.pgb-premio-ganador { grid-column: 1 / -1; font-size: 13px; color: rgba(255, 255, 255, .7); }
.pgb-premio--ganada .pgb-premio-nombre { opacity: .7; }

@media (max-width: 560px) {
	.pgb-tabla75 { gap: 5px; }
	.pgb-num { font-size: 11.5px; }
	.pgb-col-cab { font-size: 15px; }
	.pgb-bola { width: 108px; height: 108px; }
	.pgb-bola-num { font-size: 40px; }
	.pgb-mapa { grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); }
	.pgb-tablero, .pgb-seleccion, .pgb-mis-cartones, .pgb-ganadores { padding: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.pgb-bola.is-nueva { animation: none; }
	.pgb-num, .pgb-carton-celdas span { transition: none; }
}