/*
 * Porra - CSS del frontend.
 *
 * Principio de diseno: heredar el aspecto del tema activo, no imponer uno
 * propio. Por eso:
 * - No se fija font-family ni tamanos de fuente base: se hereda del tema.
 * - No hay colores de fondo solidos ni "marca" propia: los bordes usan
 *   currentColor (garantiza contraste en temas claros y oscuros sin tener
 *   que detectar cual es), y las unicas excepciones son los colores de
 *   error/exito, que son una convencion universal de UI, no una identidad
 *   visual.
 * - Los elementos semanticos (table, form, button, input, a) no se
 *   reestilizan mas alla de espaciado/estructura: sus colores, tipografia
 *   y estados (hover, focus) los sigue controlando el tema.
 * - Los "design tokens" son variables CSS (custom properties), no valores
 *   sueltos repetidos, para que sean faciles de ajustar en el futuro
 *   (incluido por un tema hijo, si alguien quiere sobreescribirlas).
 */

:root {
	--porra-space-2xs: 0.25rem;
	--porra-space-xs: 0.5rem;
	--porra-space-sm: 0.75rem;
	--porra-space-md: 1rem;
	--porra-space-lg: 1.5rem;
	--porra-space-xl: 2rem;

	--porra-radius: 0.375rem;
	--porra-border-width: 1px;

	--porra-avatar-size-sm: 2rem;
	--porra-avatar-size-md: 2.5rem;
	--porra-avatar-size-lg: 6rem;

	--porra-color-border: currentColor;
	--porra-color-error: #b3261e;
	--porra-color-success: #1e6b3c;
}

/* ---------- Accesibilidad: texto oculto visualmente pero legible por lectores de pantalla ---------- */
/* No se asume que el tema activo ya defina esta clase (aunque es muy comun en el ecosistema WP). */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	border: 0;
	padding: 0;
	margin: -1px;
}

/*
 * ---------- Avatares de participante: siempre redondos, tamano segun contexto ----------
 * Con !important: muchos temas traen su propio reset generico de imagenes
 * (algo como ".entry-content img { height: auto; max-width: 100%; }"), con
 * la MISMA especificidad que estas reglas (una clase + un elemento). Sin
 * !important, quien gane el empate depende del orden de carga de las hojas
 * de estilo (tema vs. plugin), lo que dejaba los avatares alargados (sin
 * recortar a cuadrado) y sin redondear en cuanto el tema cargaba despues.
 * Forzando estas reglas se garantiza el aspecto circular pase lo que pase
 * en el tema activo.
 */

.porra-clasificacion img,
.porra-apuestas-partido img,
.porra-historial img,
.porra-perfil__avatar img {
	display: block !important;
	object-fit: cover !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 50% !important;
	max-width: none !important;
}

.porra-clasificacion img,
.porra-historial img {
	width: var(--porra-avatar-size-md) !important;
	height: var(--porra-avatar-size-md) !important;
}

/* ---------- Escudos de equipo: tambien redondos, para que combinen con el avatar de participante ---------- */

.porra-equipo {
	display: inline-flex;
	align-items: center;
	gap: var(--porra-space-2xs);
}

.porra-equipo__separador {
	margin-inline: var(--porra-space-2xs);
	opacity: 0.7;
}

.porra-escudo {
	display: inline-block !important;
	width: var(--porra-avatar-size-sm) !important;
	height: var(--porra-avatar-size-sm) !important;
	object-fit: cover !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 50% !important;
	max-width: none !important;
	vertical-align: middle;
}

.porra-apuestas-partido img {
	width: var(--porra-avatar-size-sm) !important;
	height: var(--porra-avatar-size-sm) !important;
}

.porra-perfil__avatar img {
	width: var(--porra-avatar-size-lg) !important;
	height: var(--porra-avatar-size-lg) !important;
}

/* ---------- Tablas: clasificacion e historial de apuestas por partido ---------- */

.porra-clasificacion,
.porra-apuestas-partido,
.porra-historial {
	width: 100%;
	border-collapse: collapse;
	margin-block-end: var(--porra-space-lg);
}

.porra-clasificacion__avatar,
.porra-clasificacion__puesto,
.porra-historial__avatar {
	text-align: center;
}

/*
 * Trofeos del top 3 de Clasificacion: oro/plata/bronce son una convencion
 * universal de rankings (como los colores de error/exito de mas arriba),
 * no una identidad visual del tema, por eso son la unica otra excepcion a
 * "sin colores propios" de este fichero. El SVG no lleva "fill" fijo para
 * poder colorearlo aqui con currentColor.
 */
.porra-trofeo svg {
	width: 1.25rem;
	height: 1.25rem;
	display: inline-block;
	vertical-align: middle;
	fill: currentColor;
}

.porra-trofeo--oro {
	color: #c9a227;
}

.porra-trofeo--plata {
	color: #a3a3a3;
}

.porra-trofeo--bronce {
	color: #b3702e;
}

.porra-clasificacion caption,
.porra-apuestas-partido caption {
	text-align: left;
	font-weight: 700;
	padding-block-end: var(--porra-space-xs);
}

.porra-clasificacion th,
.porra-clasificacion td,
.porra-apuestas-partido th,
.porra-apuestas-partido td,
.porra-historial th,
.porra-historial td {
	padding: var(--porra-space-xs) var(--porra-space-sm);
	border-bottom: var(--porra-border-width) solid var(--porra-color-border);
	text-align: left;
	vertical-align: middle;
}

.porra-clasificacion thead th,
.porra-apuestas-partido thead th,
.porra-historial thead th {
	border-bottom-width: 2px;
}

.porra-clasificacion tbody tr:nth-child(even),
.porra-apuestas-partido tbody tr:nth-child(even),
.porra-historial tbody tr:nth-child(even) {
	background-color: rgba(127, 127, 127, 0.06);
}

/*
 * Fila del participante que esta consultando la Clasificacion (ver
 * BlockHelpers::renderTablaClasificacion()): mismo criterio de "sin
 * colores propios" que el resto del fichero, con currentColor a baja
 * opacidad en vez de un color de marca, para que destaque igual en
 * temas claros y oscuros. Va despues de la regla de las filas pares (y
 * con la misma especificidad) para ganarle el empate incluso si a esta
 * fila en concreto le toca ser una fila par.
 */
.porra-clasificacion tbody tr.porra-clasificacion__fila--propia {
	background-color: rgba(127, 127, 127, 0.18);
	font-weight: 700;
}

/*
 * Ultimas 3 posiciones de la Clasificacion (ver BlockHelpers::renderTablaClasificacion()):
 * color fijo pedido por el negocio (unica excepcion deliberada a "sin
 * colores propios" de este fichero, junto con error/exito y los trofeos
 * oro/plata/bronce). Va DESPUES de la regla de "fila propia" para que,
 * si coinciden en la misma fila, gane el fondo naranja (misma
 * especificidad, empate por orden); la fila sigue en negrita gracias a
 * esa otra regla, que no toca el fondo.
 */
.porra-clasificacion tbody tr.porra-clasificacion__fila--ultimas {
	background-color: #ffcc66;
}

@media (max-width: 40rem) {
	.porra-clasificacion,
	.porra-apuestas-partido,
	.porra-historial {
		display: block;
		overflow-x: auto;
	}
}

/* ---------- Historial: selector de jornada y resumen de resultados oficiales ---------- */

.porra-historial__selector {
	margin-block-end: var(--porra-space-lg);
}

.porra-historial__selector label {
	display: flex;
	flex-direction: column;
	gap: var(--porra-space-2xs);
	max-width: 24rem;
	font-size: 0.875em;
}

.porra-historial__resultados {
	display: flex;
	flex-wrap: wrap;
	gap: var(--porra-space-xs) var(--porra-space-lg);
	padding: var(--porra-space-md);
	border: var(--porra-border-width) solid var(--porra-color-border);
	border-radius: var(--porra-radius);
	margin-block-end: var(--porra-space-lg);
}

.porra-historial__resultado-partido {
	font-weight: 600;
}

/* ---------- Secciones "Pronostico" / "Historial" (ver JornadaBlock) ---------- */

.porra-seccion {
	margin-block-end: var(--porra-space-xl);
}

.porra-seccion h2 {
	margin-block-end: var(--porra-space-sm);
}

.porra-jornada__titulo {
	margin-block-end: var(--porra-space-md);
}

.porra-jornada__plazo {
	margin-block-end: var(--porra-space-md);
	font-size: 0.9em;
	opacity: 0.85;
}

.porra-jornada__guardar-cita {
	margin-inline-start: var(--porra-space-sm);
}

/* ---------- Formularios: apuesta, perfil, completar alta ---------- */

.porra-apuesta-form,
.porra-apuesta-bloque,
.porra-completar-alta,
.porra-login,
.porra-gestion__form,
.porra-perfil form {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--porra-space-sm) var(--porra-space-md);
	padding: var(--porra-space-md);
	border: var(--porra-border-width) solid var(--porra-color-border);
	border-radius: var(--porra-radius);
	margin-block-end: var(--porra-space-md);
}

.porra-apuesta-form label,
.porra-apuesta-bloque label,
.porra-completar-alta label,
.porra-login label,
.porra-gestion__form label,
.porra-perfil form label {
	display: flex;
	flex-direction: column;
	gap: var(--porra-space-2xs);
	font-size: 0.875em;
}

.porra-apuesta-form input[type="number"],
.porra-apuesta-bloque input[type="number"] {
	width: 5rem;
}

.porra-apuesta-form__equipos {
	flex-basis: 100%;
	font-weight: 600;
}

.porra-apuesta-form__tipo {
	font-weight: 400;
	opacity: 0.75;
}

.porra-apuesta-bloque__fecha {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.875em;
	opacity: 0.75;
}

.porra-jornada-form button[type="submit"] {
	margin-block-start: var(--porra-space-xs);
}

.porra-perfil__avatar {
	margin-block-end: var(--porra-space-sm);
}

label.porra-login__recordarme {
	flex-direction: row;
	align-items: center;
	gap: var(--porra-space-2xs);
}

.porra-login label {
	flex-basis: 100%;
	font-size: 1em;
	font-weight: 700;
}

label.porra-login__recordarme {
	font-weight: 400;
}

.porra-login input[type="text"],
.porra-login input[type="password"] {
	min-width: 16rem;
	padding: var(--porra-space-sm);
	background-color: rgba(66, 133, 244, 0.08);
	border: var(--porra-border-width) solid rgba(127, 127, 127, 0.3);
	border-radius: var(--porra-radius);
}

.porra-login__pista {
	flex-basis: 100%;
	margin: 0;
	font-size: 0.85em;
	opacity: 0.75;
}

.porra-login__acciones {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--porra-space-md);
	margin-block-start: var(--porra-space-xs);
}

.porra-login__olvidada {
	font-size: 0.875em;
}

/*
 * ---------- Campo de contraseña con icono de "ojo" DENTRO del campo (ver BlockHelpers::botonMostrarPassword()) ----------
 * El icono se superpone al input (position: absolute dentro de un
 * contenedor position: relative), al estilo del autorrelleno nativo de
 * los navegadores; el input necesita hueco a la derecha
 * (padding-inline-end) para que el texto escrito no quede debajo.
 *
 * Con !important en casi todo: el tema activo estiliza sus propios
 * <button> con fondo solido, padding y tamano minimo (los mismos rosas
 * de "Entrar"/"Guardar cita"), con la misma especificidad que estas
 * reglas (una clase). Sin !important, si el CSS del tema carga despues
 * del nuestro gana el empate, y este boton salia como un cuadrado rosa
 * solido fuera del campo en vez de un icono superpuesto dentro (mismo
 * motivo que los avatares de mas arriba en este fichero).
 */

.porra-campo-password {
	position: relative !important;
	display: inline-flex !important;
}

.porra-campo-password input {
	padding-inline-end: 2.25rem !important;
}

.porra-campo-password__boton {
	position: absolute !important;
	inset-inline-end: var(--porra-space-2xs) !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 1.5rem !important;
	height: 1.5rem !important;
	min-width: 0 !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: none !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	color: inherit !important;
	line-height: 1 !important;
	opacity: 0.6;
	cursor: pointer;
}

.porra-campo-password__boton:hover,
.porra-campo-password__boton:focus-visible {
	opacity: 1;
}

.porra-icono-ojo {
	display: block !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
	fill: currentColor !important;
}

.porra-campo-password__boton .porra-icono-ojo--cerrado {
	display: none !important;
}

.porra-campo-password__boton[aria-pressed="true"] .porra-icono-ojo--abierto {
	display: none !important;
}

.porra-campo-password__boton[aria-pressed="true"] .porra-icono-ojo--cerrado {
	display: block !important;
}

.porra-perfil__salir {
	margin-block-start: var(--porra-space-md);
}

/* ---------- Tarjeta-resumen del participante ---------- */

.porra-resumen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--porra-space-sm) var(--porra-space-md);
	padding: var(--porra-space-md);
	border: var(--porra-border-width) solid var(--porra-color-border);
	border-radius: var(--porra-radius);
	margin-block-end: var(--porra-space-lg);
}

.porra-resumen img {
	display: block !important;
	width: var(--porra-avatar-size-lg) !important;
	height: var(--porra-avatar-size-lg) !important;
	object-fit: cover !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 50% !important;
	max-width: none !important;
}

.porra-resumen__datos p {
	margin: 0 0 var(--porra-space-2xs);
}

.porra-resumen__nombre {
	font-weight: 700;
}

.porra-resumen__estado--anotada {
	color: var(--porra-color-success);
}

.porra-resumen__estado--pendiente {
	color: var(--porra-color-error);
}

.porra-resumen__contador {
	font-variant-numeric: tabular-nums;
}

/* ---------- Avisos y mensajes de estado ---------- */

.porra-aviso {
	padding: var(--porra-space-sm) var(--porra-space-md);
	border: var(--porra-border-width) solid var(--porra-color-border);
	border-radius: var(--porra-radius);
	margin-block-end: var(--porra-space-md);
}

.porra-aviso--error {
	border-color: var(--porra-color-error);
	color: var(--porra-color-error);
}

[role="status"] {
	display: inline-block;
	margin-inline-start: var(--porra-space-xs);
	font-size: 0.875em;
}

.porra-mensaje--error {
	color: var(--porra-color-error);
}

/* ---------- Confirmacion antes de cerrar una jornada (ver JornadasTab / porra-frontend.js) ---------- */

.porra-confirmacion-cierre .porra-gestion__lista {
	margin-block-start: var(--porra-space-xs);
}

.porra-confirmacion-cierre button {
	margin-inline-end: var(--porra-space-sm);
}

/* ---------- Panel de gestion del master: navegacion de pestanas ---------- */

.porra-gestion__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: var(--porra-space-xs);
	list-style: none;
	margin: 0 0 var(--porra-space-lg);
	padding: 0;
	border-bottom: var(--porra-border-width) solid var(--porra-color-border);
}

.porra-gestion__nav a {
	display: inline-block;
	padding: var(--porra-space-xs) var(--porra-space-sm);
	border-bottom: 2px solid transparent;
	margin-block-end: -1px;
	text-decoration: none;
}

.porra-gestion__nav a.is-active {
	border-bottom-color: currentColor;
	font-weight: 700;
}

.porra-gestion__selector {
	margin-block-end: var(--porra-space-lg);
}

.porra-gestion__selector label {
	display: flex;
	flex-direction: column;
	gap: var(--porra-space-2xs);
	max-width: 24rem;
	font-size: 0.875em;
}

/* ---------- Cabecera y filas de accion de una jornada (ver JornadasTab::renderJornada()) ---------- */

.porra-gestion__titulo-jornada {
	margin-block-end: var(--porra-space-2xs);
	font-size: 1.75rem;
}

.porra-gestion__estado-jornada {
	margin: 0 0 var(--porra-space-md);
	opacity: 0.7;
}

.porra-gestion__form-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--porra-space-sm) var(--porra-space-md);
	margin-block-end: var(--porra-space-md);
}

.porra-gestion__eliminar-fila {
	text-align: right;
}

/* ---------- Panel de gestion del master ---------- */

.porra-gestion__lista {
	margin: 0 0 var(--porra-space-md);
	padding-inline-start: var(--porra-space-md);
}

.porra-gestion__lista li {
	margin-block-end: var(--porra-space-2xs);
}

/*
 * Lista de resultados de una jornada bloqueada (ver JornadasTab::renderJornadaBloqueada()):
 * grid con 3 columnas (equipo local / marcador / equipo visitante) para
 * que los marcadores queden alineados en vertical de un partido a otro,
 * sin importar la longitud del nombre de cada equipo. "li { display:
 * contents }" hace que cada <li> "desaparezca" como caja y sus hijos
 * pasen a ser celdas de la misma cuadricula del <ul>, en vez de que cada
 * partido tenga su propia cuadricula de 3 columnas independiente (que no
 * se alinearia con las demas filas).
 */
.porra-gestion__resultados {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--porra-space-sm) var(--porra-space-md);
	margin: 0 0 var(--porra-space-md);
	padding: 0;
	list-style: none;
}

.porra-gestion__resultados li {
	display: contents;
}

.porra-gestion__resultado-equipo--local {
	justify-self: end;
}

.porra-gestion__resultado-equipo--visitante {
	justify-self: start;
}

.porra-gestion__resultado-marcador {
	justify-self: center;
}

.porra-gestion__tipos-ayuda {
	margin-block-end: var(--porra-space-xs);
	font-size: 0.9em;
	opacity: 0.85;
}

.porra-gestion__tipos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--porra-space-sm) var(--porra-space-md);
	margin-block-end: var(--porra-space-md);
}

.porra-gestion__tipo-partido {
	display: flex;
	flex-direction: column;
	gap: var(--porra-space-2xs);
	font-size: 0.875em;
}

.porra-gestion__tipo-fijado {
	flex-basis: 100%;
	font-size: 0.9em;
	opacity: 0.85;
}

.porra-gestion__control-apuestas {
	width: 100%;
	border-collapse: collapse;
	margin-block-end: var(--porra-space-lg);
}

.porra-gestion__control-apuestas th,
.porra-gestion__control-apuestas td {
	padding: var(--porra-space-xs) var(--porra-space-sm);
	border-bottom: var(--porra-border-width) solid var(--porra-color-border);
	text-align: left;
}

.porra-gestion__control-apuestas thead th {
	border-bottom-width: 2px;
}

.porra-gestion__control-apuestas td a {
	margin-inline-end: var(--porra-space-sm);
}

/* ---------- Cabeceras de tabla ordenables (ver assets/js/porra-frontend.js, ordenarTabla()) ---------- */

[data-porra-orden-col] {
	cursor: pointer;
	user-select: none;
}

[data-porra-orden-col]:hover,
[data-porra-orden-col]:focus-visible {
	text-decoration: underline;
}

.porra-orden-icono {
	display: inline-block;
	margin-inline-start: var(--porra-space-2xs);
	font-size: 0.75em;
}

.porra-gestion__equipos {
	width: 100%;
	border-collapse: collapse;
	margin-block-end: var(--porra-space-lg);
}

.porra-gestion__equipos th,
.porra-gestion__equipos td {
	padding: var(--porra-space-xs) var(--porra-space-sm);
	border-bottom: var(--porra-border-width) solid var(--porra-color-border);
	text-align: left;
	vertical-align: middle;
}

.porra-gestion__equipos thead th {
	border-bottom-width: 2px;
}

.porra-gestion__equipos td form {
	display: flex;
	align-items: center;
	gap: var(--porra-space-xs);
	flex-wrap: wrap;
}

.porra-gestion__equipos td input[type="text"] {
	min-width: 10rem;
}

.porra-gestion__equipos td input[type="file"] {
	max-width: 11rem;
}

.porra-gestion__participantes {
	width: 100%;
	border-collapse: collapse;
	margin-block-end: var(--porra-space-lg);
}

.porra-gestion__participantes th,
.porra-gestion__participantes td {
	padding: var(--porra-space-xs) var(--porra-space-sm);
	border-bottom: var(--porra-border-width) solid var(--porra-color-border);
	text-align: left;
	vertical-align: middle;
}

.porra-gestion__participantes td form {
	display: inline-block;
	margin-inline-end: var(--porra-space-xs);
}

.porra-gestion__enlace-solicitud {
	width: 100%;
	max-width: 32rem;
}

.porra-gestion__participantes thead th {
	border-bottom-width: 2px;
}

.porra-gestion__participantes-avatar {
	width: var(--porra-avatar-size-md);
}

.porra-gestion__participantes img {
	display: block !important;
	width: var(--porra-avatar-size-md) !important;
	height: var(--porra-avatar-size-md) !important;
	object-fit: cover !important;
	aspect-ratio: 1 / 1 !important;
	border-radius: 50% !important;
	max-width: none !important;
}

.porra-estado {
	display: inline-block;
	font-weight: 700;
	margin-inline-end: var(--porra-space-2xs);
}

.porra-estado--ok {
	color: var(--porra-color-success);
}

.porra-estado--ko {
	color: var(--porra-color-error);
}

/* ---------- Filas de temporadas/jornadas con accion de eliminar ---------- */

.porra-gestion__fila {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--porra-space-sm);
}

.porra-gestion__eliminar {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--porra-color-error);
	text-decoration: underline;
	cursor: pointer;
}

.porra-gestion__restaurar {
	background: none;
	border: none;
	padding: 0;
	font: inherit;
	color: var(--porra-color-success);
	text-decoration: underline;
	cursor: pointer;
}