/* ============================================================
   Football Pool Ranking Score Breakdown - Responsive Styles
   ============================================================ */

/* --- Referencias --- */
tr.referencias p.referencias {
	margin: 4px 0;
	font-size: 11px;
	line-height: 1.6;
	padding: 4px 8px;
	background: #f7f7f7;
	border-radius: 4px;
}

/* --- Contenedor de la tabla --- */
.footballpool .ranking-table-wrapper,
.footballpool table {
	width: 100%;
}

/* Columna posición: fija y estrecha */
th.pos,
td.rank {
	width: 22px;
	min-width: 22px;
	max-width: 28px;
	text-align: center;
	padding-left: 4px;
	padding-right: 4px;
	white-space: nowrap;
}

/* Columna nombre: ancha, ocupa el espacio disponible */
th.nombre-user {
	width: 35%;
	min-width: 160px;
	text-align: left;
	padding-left: 10px;
}

td.nombre-col {
	width: 35%;
	min-width: 160px;
	text-align: left;
	padding-left: 10px;
}

/* Columnas de score: ancho fijo compacto */
th.re, th.ra, th.ga, th.pb, th.puntos {
	width: 40px;
	min-width: 36px;
	max-width: 52px;
	text-align: center;
	padding-left: 3px;
	padding-right: 3px;
	white-space: nowrap;
}

td.score-breakdown,
td.ranking.score {
	width: 40px;
	min-width: 36px;
	max-width: 52px;
	text-align: center;
	padding-left: 3px;
	padding-right: 3px;
}

/* Avatar en línea con el nombre */
td.nombre-col img {
	vertical-align: middle;
	margin-right: 5px;
}

/* Nombre de usuario */
td.nombre-col p.user_name {
	display: inline;
	white-space: normal;
	word-break: break-word;
}

/* Puntos con estilo destacado */
td.ranking.score {
	font-weight: bold;
}

/* ============================================================
   RESPONSIVE - Tabletas y móviles (< 900px)
   ============================================================ */
@media screen and (max-width: 900px) {

	/* Wrapper con scroll horizontal */
	.footballpool-ranking,
	.fp-ranking-wrapper,
	.entry-content .ranking,
	div[class*="footballpool"] {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.footballpool table,
	table.fp-ranking {
		min-width: 520px;
		font-size: 13px;
	}

	tr.referencias p.referencias {
		font-size: 10px;
		white-space: normal;
	}

	th, td {
		padding: 5px 6px;
	}
}

/* ============================================================
   RESPONSIVE - Móviles pequeños (< 600px)
   ============================================================ */
@media screen and (max-width: 600px) {

	.footballpool table,
	table.fp-ranking {
		min-width: 480px;
		font-size: 11px;
		border-collapse: collapse;
	}

	th, td {
		padding: 4px 4px;
	}

	/* Columna de posición: muy estrecha */
	th.pos,
	td.rank {
		width: 18px;
		min-width: 18px;
		max-width: 22px;
		font-size: 11px;
		padding: 4px 2px;
		white-space: nowrap;
	}

	/* Columna nombre: ocupa el mayor espacio disponible */
	th.nombre-user {
		width: 35%;
		min-width: 120px;
	}

	td.nombre-col {
		width: 35%;
		min-width: 120px;
	}

	/* Nombre: permitir wrap */
	td.nombre-col p.user_name {
		display: inline;
		font-size: 11px;
		white-space: normal;
		word-break: break-word;
	}

	/* Columnas de score: muy compactas */
	td.score-breakdown,
	th.re, th.ra, th.ga, th.pb, th.puntos,
	td.ranking.score {
		width: 34px;
		min-width: 30px;
		max-width: 44px;
		padding-left: 2px;
		padding-right: 2px;
		font-size: 11px;
		text-align: center;
	}

	/* Referencias más pequeñas */
	tr.referencias p.referencias {
		font-size: 9px;
		line-height: 1.5;
	}
}

/* ============================================================
   RESPONSIVE - Móviles muy pequeños (< 400px)
   ============================================================ */
@media screen and (max-width: 400px) {

	.footballpool table,
	table.fp-ranking {
		font-size: 10px;
	}

	th, td {
		padding: 3px 2px;
	}

	th.pos,
	td.rank {
		width: 16px;
		min-width: 16px;
		padding: 3px 1px;
	}

	td.nombre-col {
		width: 35%;
		min-width: 100px;
	}

	td.score-breakdown,
	th.re, th.ra, th.ga, th.pb, th.puntos,
	td.ranking.score {
		width: 28px;
		min-width: 24px;
		padding-left: 1px;
		padding-right: 1px;
	}
}