/* =========================================================
   Rifa Diaria Pro — Visor público [rdp_viewer] (v1.6)

   COLORES Y CARTÓN: idénticos a la v1.2. Desde la v2.6 usa los colores del panel:
   libres en negro con número dorado, ocupadas con el color elegido, botones y encabezados en
   dorado, y los mismos cortes responsive (10 / 5 / 3 columnas).
   Lo que cambia es la organización: buscador fijo, leyenda, barra de
   progreso en su sitio y la tabla en tarjetas cuando la pantalla es
   pequeña.
   ========================================================= */

.rdp-viewer-container {
	font-family: Arial, Helvetica, sans-serif;
	max-width: 980px;
	margin: 16px auto;
	padding: 8px;
	box-sizing: border-box;
}
.rdp-viewer-container * { box-sizing: border-box; }

/* ---------- Buscador (se queda arriba al hacer scroll) ---------- */
.rdp-viewer-controls {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	gap: 8px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	padding: 10px 0;
	margin-bottom: 12px;
	background: #0f0f0f;
}
.rdp-viewer-controls input {
	padding: 8px 12px;
	min-height: 44px;          /* cómodo de tocar con el dedo */
	font-size: 16px;           /* evita que iOS haga zoom al enfocar */
	width: 320px;
	max-width: 70%;
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 6px;
	background: #0f0f0f;
	color: #eee;
}
.rdp-viewer-controls button {
	padding: 8px 16px;
	min-height: 44px;
	border-radius: 6px;
	border: 1px solid rgba(255,255,255,.06);
	cursor: pointer;
	background: linear-gradient(180deg, #d4af37, #b8860b);
	color: #06100b;
	font-weight: 700;
	box-shadow: 0 2px 6px rgba(0,0,0,.5);
}

/* ---------- Leyenda ---------- */
.rdp-viewer-legend {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
	font-size: 13px;
	color: #ccc;
	margin-bottom: 10px;
	justify-content: center;
}
.rdp-viewer-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rdp-viewer-container .rdp-dot { width: 13px; height: 13px; border-radius: 3px; display: inline-block; }
.rdp-viewer-container .rdp-dot-free     { background: #000; border: 1px solid #d0af4d; }
.rdp-viewer-container .rdp-dot-reserved { background: var(--rdp-cell-grad, linear-gradient(180deg, rgba(74,250,133,.95), rgba(46,231,108,.95))); }

/* =========================================================
   CARTÓN — mismos colores y mismos cortes que la v1.2
   ========================================================= */
.rdp-viewer-grid {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	gap: 10px;
	margin-bottom: 16px;
}
.rdp-viewer-grid .cell {
	padding: 10px;
	border-radius: 6px;
	text-align: center;
	font-weight: 700;
	background: #000;
	color: #d0af4d;
	border: 1px solid rgba(208,175,77,.3);
	min-height: 56px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	touch-action: manipulation;
	transition: opacity .15s ease, box-shadow .15s ease;
}
.rdp-viewer-grid .cell .num { display: block; font-size: 14px; }
.rdp-viewer-grid .cell .wa {
	display: block;
	font-size: 12px;
	color: #f1dccc;
	margin-top: 6px;
	word-break: break-all;
}
.rdp-viewer-grid .cell.reserved {
	/* Color configurable desde el panel; el respaldo es el verde original */
	background: var(--rdp-cell-grad, linear-gradient(180deg, rgba(74,250,133,.95), rgba(46,231,108,.95)));
	border: 1px solid rgba(0,0,0,.2);
	color: var(--rdp-cell-text, #fff);
}
.rdp-viewer-grid .cell.reserved .wa { color: var(--rdp-cell-text-soft, #f1dccc); }
/* Resultado de búsqueda: el que coincide se resalta, el resto se apaga.
   Antes las coincidencias saltaban al principio del cartón, lo que
   desordenaba los números; ahora se quedan en su lugar. */
.rdp-viewer-grid .cell.rdp-hit { box-shadow: 0 0 0 3px #ffd54f; }
.rdp-viewer-grid .cell.rdp-dim { opacity: .3; }

@media (max-width: 900px) {
	.rdp-viewer-grid { grid-template-columns: repeat(5, 1fr); }
	.rdp-viewer-controls input { max-width: 60%; }
}
@media (max-width: 480px) {
	.rdp-viewer-grid { grid-template-columns: repeat(3, 1fr); }
	.rdp-viewer-controls input { width: 100%; max-width: 100%; }
	.rdp-viewer-controls { gap: 6px; }
	.rdp-viewer-controls button { flex: 1; }
}
@media (prefers-reduced-motion: reduce) {
	.rdp-viewer-grid .cell { transition: none; }
}
/* ================= FIN DEL CARTÓN ================= */

/* ---------- Participantes ---------- */
.rdp-viewer-participants {
	width: 100%;
	border-collapse: collapse;
	background: transparent;
	color: #e9e6e0;
	margin-top: 12px;
}
.rdp-viewer-participants th,
.rdp-viewer-participants td {
	padding: 10px;
	border: 1px solid rgba(255,255,255,.06);
	text-align: left;
	color: #e9e6e0;
}
.rdp-viewer-participants thead th {
	background: transparent;
	color: #ffd54f;
	font-weight: 700;
}
.rdp-viewer-participants tbody tr { background: transparent; }
.rdp-viewer-participants tbody tr.rdp-found {
	outline: 3px solid rgba(255,213,79,.18);
	background: rgba(255,213,79,.04);
}

.rdp-no-results { padding: 12px; text-align: center; color: #ccc; }

/* La tabla se vuelve tarjetas en el celular: se acabó el scroll lateral */
@media (max-width: 640px) {
	.rdp-viewer-participants,
	.rdp-viewer-participants tbody,
	.rdp-viewer-participants tr,
	.rdp-viewer-participants td { display: block; width: 100%; }
	.rdp-viewer-participants thead { display: none; }
	.rdp-viewer-participants tr {
		border: 1px solid rgba(255,255,255,.08);
		border-left: 4px solid var(--rdp-cell-solid, rgba(46,231,108,.95));
		border-radius: 8px;
		margin-bottom: 10px;
		padding: 4px 12px 8px;
	}
	.rdp-viewer-participants td {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		border: 0 !important;
		border-bottom: 1px solid rgba(255,255,255,.06) !important;
		padding: 8px 0 !important;
	}
	.rdp-viewer-participants td:last-child { border-bottom: 0 !important; }
	.rdp-viewer-participants td::before {
		content: attr(data-label);
		font-size: 11px;
		text-transform: uppercase;
		letter-spacing: .04em;
		color: #ccc;
		font-weight: 700;
	}
	.rdp-viewer-participants { font-size: 13px; }
}
@media (max-width: 900px) and (min-width: 641px) {
	.rdp-viewer-participants th,
	.rdp-viewer-participants td { font-size: 13px; }
}

/* ---------- Modal "sin reservas" ---------- */
.rdp-vmodal {
	position: fixed;
	left: 0; top: 0;
	width: 100%; height: 100%;
	align-items: center;
	justify-content: center;
	background: rgba(0,0,0,.6);
	z-index: 999999;
	padding: 16px;
}
.rdp-vmodal-box {
	background: #111;
	padding: 16px;
	border-radius: 8px;
	max-width: 420px;
	width: 100%;
	box-shadow: 0 6px 20px rgba(0,0,0,.6);
	border: 1px solid rgba(255,255,255,.04);
	color: #f2e9dd;
}
.rdp-vmodal-box h3 { margin: 0 0 8px; font-size: 18px; color: #ffd54f; }
.rdp-vmodal-box p { margin: 0 0 12px; color: #ddd; }
.rdp-vmodal-box .rdp-vmodal-actions { display: flex; gap: 8px; justify-content: flex-end; }
.rdp-vmodal-box button {
	padding: 8px 16px;
	min-height: 44px;
	border-radius: 6px;
	background: linear-gradient(180deg, #d4af37, #b8860b);
	border: none;
	color: #06100b;
	font-weight: 700;
	cursor: pointer;
}
@media (max-width: 480px) {
	.rdp-vmodal-box button { width: 100%; }
}

/* =========================================================
   NÚMEROS EN SOCIEDAD (v2.5)
   Con las dos mitades vendidas la casilla se ve igual que cualquier
   ocupada. Con media libre se pinta partida en diagonal y dice
   "½ libre", para que el participante sepa que aún puede comprarla.
   ========================================================= */
.rdp-viewer-grid .cell.reserved.rdp-half-open {
	background: linear-gradient(135deg, var(--rdp-cell-solid, rgba(46,231,108,.95)) 50%, #000 50%);
	color: #d0af4d;
	text-shadow: 0 1px 2px rgba(0,0,0,.7);
}
.rdp-viewer-grid .cell.reserved.rdp-half-open .wa { color: #f3e9e0; }
.rdp-viewer-grid .cell .wa + .wa { margin-top: 2px; }
.rdp-viewer-grid .cell .rdp-half-free {
	margin-top: 4px; padding: 1px 6px; border-radius: 999px;
	background: #ffd54f; color: #241c00 !important; font-weight: 800; text-shadow: none;
}
.rdp-viewer-container .rdp-dot-half {
	background: linear-gradient(135deg, var(--rdp-cell-solid, rgba(46,231,108,.95)) 50%, #000 50%);
	border: 1px solid #d0af4d;
}


/* =========================================================
   IMAGEN PROMOCIONAL (v2.6) — se elige en el panel
   ========================================================= */
.rdp-promo { margin: 0 0 14px; text-align: center; }
.rdp-promo img { display: inline-block; max-width: 100%; height: auto; border-radius: 14px; }