/**
 * "Mi lana" y el ranking del rebaño.
 *
 * El cliente pidió el 17/10/2026 que la parte del perfil donde se ven los
 * puntos fuera "bien visual". Sin esto, la pantalla sale como una lista de
 * párrafos: el saldo con el mismo tamaño que el resto, la barra de progreso
 * invisible y el enlace de invitación cortado a la mitad.
 *
 * Los colores salen de la propia tienda: el azul de la cabecera y el amarillo
 * de la marca. No se inventa una paleta nueva.
 */

:root {
	--sb-lana-azul: #0b1f4b;
	--sb-lana-amarillo: #ffd200;
	--sb-lana-gris: #f4f6f9;
	--sb-lana-borde: #e3e8ef;
	--sb-lana-verde: #1e8e3e;
	--sb-lana-rojo: #c0392b;
}

/* La cabecera: el número primero y grande, el nivel al lado. Así se decidió
   con el cliente el 20/10. */
.sb-lana__cabecera {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 24px 28px;
	margin-bottom: 18px;
	background: var(--sb-lana-azul);
	border-radius: 14px;
	color: #fff;
}

.sb-lana__saldo {
	margin: 0;
	line-height: 1;
}

.sb-lana__saldo strong {
	display: block;
	font-size: 54px;
	font-weight: 800;
	color: var(--sb-lana-amarillo);
	letter-spacing: -1px;
}

.sb-lana__saldo span {
	display: block;
	margin-top: 4px;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: 1px;
	opacity: .85;
}

/* La insignia del nivel. `flex: 0 0 auto` y el radio pequeño porque con
   `border-radius: 999px` y el texto en mayúsculas que pone el tema, el nombre
   largo ("Maestro pastor") desbordaba la pastilla y salía cortado contra el
   borde del panel. */
.sb-lana__nivel {
	flex: 0 0 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 100%;
	/* `margin: 0` y `line-height` explícitos: el tema le pone a los <p> una
	   altura de línea alta y un margen superior que empujaban "Eres" fuera de
	   la pastilla, de modo que salía cortado contra el borde. */
	margin: 0 !important;
	/* `!important` también en el padding: el tema lo pone a 0 para todos los
	   <p> de la cuenta con más especificidad, y sin esto el texto queda
	   pegado al borde redondeado y parece cortado. */
	padding: 14px 22px !important;
	font-size: 13px;
	line-height: 1.35;
	text-align: left;
	background: rgba( 255, 255, 255, .12 );
	border-radius: 12px;
	border-left: 5px solid var( --sb-nivel-color, var( --sb-lana-amarillo ) );
}

.sb-lana__nivel strong {
	display: block;
	margin-top: 2px;
	font-size: 19px;
	line-height: 1.3;
	white-space: nowrap;
}

/* La barra hacia el siguiente nivel. Es lo que más hace volver, así que
   tiene que verse, no intuirse. */
.sb-lana__barra {
	height: 14px;
	background: var(--sb-lana-gris);
	border: 1px solid var(--sb-lana-borde);
	border-radius: 999px;
	overflow: hidden;
}

.sb-lana__barra-llena {
	height: 100%;
	background: linear-gradient( 90deg, var(--sb-lana-amarillo), #ffb300 );
	border-radius: 999px;
	transition: width .4s ease;
	min-width: 2px;
}

.sb-lana__falta {
	margin: 10px 0 4px;
	font-weight: 600;
}

.sb-lana__aclaracion,
.sb-lana__deuda {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.5;
	color: #5a6678;
}

.sb-lana__deuda {
	padding: 12px 16px;
	background: #fff6f5;
	border-left: 4px solid var(--sb-lana-rojo);
	border-radius: 8px;
	color: #7a2e26;
}

.sb-lana__titulo {
	margin: 28px 0 14px;
}

/* Los cupones: una ficha por cada uno, y se ve de un golpe cuál ya puede. */
.sb-lana__cupones {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
	gap: 12px;
	margin: 0 0 8px;
	padding: 0;
	list-style: none;
}

.sb-lana__cupon {
	padding: 14px 16px;
	background: #fff;
	border: 1px solid var(--sb-lana-borde);
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.5;
}

.sb-lana__cupon strong {
	display: block;
	font-size: 17px;
	margin-bottom: 2px;
}

.sb-lana__cupon span {
	color: #7b8695;
}

.sb-lana__cupon--listo {
	border-color: var(--sb-lana-verde);
	background: #f3fbf5;
}

.sb-lana__cupon--listo em {
	display: inline-block;
	margin-top: 4px;
	font-style: normal;
	font-weight: 700;
	color: var(--sb-lana-verde);
}

.sb-lana__puesto {
	font-weight: 600;
}

/* El historial. La columna de la lana, a la derecha y con color según
   sume o reste. */
.sb-lana__historial {
	width: 100%;
	margin-bottom: 8px;
}

.sb-lana__historial th:last-child,
.sb-lana__historial td:last-child {
	text-align: right;
	white-space: nowrap;
	font-weight: 700;
}

.sb-lana__mas {
	color: var(--sb-lana-verde);
}

.sb-lana__menos {
	color: var(--sb-lana-rojo);
}

/* El enlace de invitación salía cortado: el input traía el ancho por
   defecto del navegador. */
.sb-lana__enlace {
	width: 100%;
	max-width: 520px;
	padding: 12px 14px;
	font-size: 14px;
	background: var(--sb-lana-gris);
	border: 1px dashed var(--sb-lana-borde);
	border-radius: 10px;
}

/* El ranking del rebaño: que las dos tablas se distingan y respiren. */
.page .gameengine-leaderboard,
.page .gameengine-leaderboard-wrapper {
	margin-bottom: 36px;
}

/* ---------------------------------------------------------------------
   Celular. El cliente mira su tienda desde el teléfono, así que esto no
   es un extra.
   ------------------------------------------------------------------ */
@media ( max-width: 767px ) {

	.sb-lana__cabecera {
		flex-direction: column;
		align-items: flex-start;
		padding: 20px;
	}

	.sb-lana__saldo strong {
		font-size: 44px;
	}

	.sb-lana__nivel {
		width: 100%;
	}

	.sb-lana__cupones {
		grid-template-columns: 1fr;
	}

	/* Una tabla de tres columnas no cabe en 390 px: se vuelve una ficha por
	   movimiento, con la etiqueta delante del dato. */
	.sb-lana__historial,
	.sb-lana__historial tbody,
	.sb-lana__historial tr,
	.sb-lana__historial td {
		display: block;
		width: 100%;
	}

	.sb-lana__historial thead {
		display: none;
	}

	.sb-lana__historial tr {
		margin-bottom: 10px;
		padding: 12px 14px;
		border: 1px solid var(--sb-lana-borde);
		border-radius: 10px;
	}

	.sb-lana__historial td {
		border: 0;
		padding: 2px 0;
	}

	.sb-lana__historial td:last-child {
		text-align: left;
		font-size: 18px;
	}
}


/* =========================================================================
   El dibujo del nivel (anadido el 26/10/2026)
   =========================================================================
   Va aqui y no en lana-global.css porque tiene que pisar al
   `flex-direction: column` de la pastilla, y esta hoja se carga despues.
   Puesto en la otra, la regla perdia por orden de carga y el dibujo salia
   encima del texto en vez de a su lado.
   ========================================================================= */

/* --- el dibujo dentro de la pastilla de "Mi lana" ---------------------- */

.sb-lana__nivel {
	/* Sobrescribe el `flex-direction: column` de arriba: ahora la pastilla
	   lleva dibujo y texto, uno al lado del otro. */
	flex-direction: row;
	align-items: center;
	gap: 12px;
}

.sb-lana__icono {
	flex: 0 0 auto;
	width: 54px;
	height: 54px;
	display: block;
	/* Las imágenes del tema llevan `max-width: 100%` y `height: auto`, que
	   aquí deforma el círculo. */
	max-width: none;
}

.sb-lana__nivel-texto {
	display: block;
	min-width: 0;
}


/* ===========================================================================
   La foto de perfil, en "Detalles de la cuenta" (27/10/2026)
   ===========================================================================

   Va en esta hoja y no en una nueva porque se carga exactamente donde hace
   falta: `is_account_page()`, que es la condición que ya usa functions.php
   para la lana. Una hoja más por tres reglas sería una petición HTTP de más
   en cada página de la cuenta.

   El formulario lo pinta sheepbuster-core/includes/avatar.php dentro del
   hueco que deja WooCommerce (`woocommerce_edit_account_form`). */

.sb-avatar {
	margin: 0 0 22px;
	padding: 0;
	border: 0;
}

.sb-avatar legend {
	display: block;
	width: auto;
	margin-bottom: 10px;
	padding: 0;
	border: 0;
	font-family: var(--sb-titulo, inherit);
	font-size: 17px;
	color: var(--sb-navy, #1b1f3b);
}

.sb-avatar__fila {
	display: flex;
	align-items: flex-start;
	gap: 18px;
}

/* La foto de ahora. El borde redondo es el mismo que usa el avatar en el
   resto del sitio, para que lo que se ve aquí sea lo que se va a ver. */
.sb-avatar__actual img,
.sb-avatar__img {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	border: 2px solid var(--sb-borde, #e3e6f0);
	background: #f2f3f8;
}

.sb-avatar__campos {
	flex: 1 1 auto;
	min-width: 0;
}

.sb-avatar__ayuda {
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--sb-gris, #6b7280);
}

/* El selector de archivo nativo es feo y, sobre todo, DESBORDA en el celular:
   el nombre del archivo no se parte y empuja la caja fuera de la pantalla. */
.sb-avatar input[type="file"] {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 9px 10px;
	border: 1px solid var(--sb-borde, #e3e6f0);
	border-radius: 8px;
	background: #fff;
	font-size: 13px;
	line-height: 1.4;
}

.sb-avatar__quitar {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 10px 0 0;
	font-size: 13px;
	color: var(--sb-gris, #6b7280);
	cursor: pointer;
}

/* El !important no es pereza: el tema esconde TODAS las casillas de la zona
   de la cuenta --

     .woocommerce-account input[type="checkbox"] { display: none; }

   -- y pone encima una suya con JavaScript. Resultado: "Quitar foto" existía
   en el HTML y no se veía, así que nadie podía quitarse la foto. Lo cazó la
   prueba automática al no poder pulsarla; mirando el formulario en pantalla
   no se nota, porque lo que falta es justamente lo que no se dibuja.

   Se fuerza la casilla de verdad en lugar de imitar la del tema: la suya
   depende de un JS que no controlamos y que un día puede no correr. */
.sb-avatar__quitar input[type="checkbox"] {
	display: inline-block !important;
	/* El tema le pone 46 px de alto a todos los inputs del formulario, y una
	   casilla de 16x46 queda ridicula. */
	width: 16px !important;
	height: 16px !important;
	min-height: 0;
	padding: 0;
	margin: 0;
	flex: 0 0 auto;
	accent-color: var(--sb-rojo, #d12d2a);
}

@media (max-width: 600px) {
	/* En el celular la foto encima y el resto debajo: en fila, con 96 px de
	   foto más el selector, no queda ancho para leer el nombre del archivo. */
	.sb-avatar__fila {
		flex-direction: column;
		gap: 12px;
	}
}

/* La foto, redonda tambien en el ranking (27/10/2026).
 *
 * GameEngine pinta el avatar del ranking con sus propias clases y lo deja
 * cuadrado, asi que la misma foto salia redonda en los comentarios y cuadrada
 * en el muro de la fama. Es la misma persona en la misma tienda: que se vea
 * igual en los dos sitios.
 *
 * object-fit: cover hace falta porque, aunque nosotros guardamos la foto ya
 * cuadrada, el avatar de Gravatar y el de quien subio una foto antes de este
 * cambio pueden no serlo, y sin esto saldrian aplastados. */
.gameengine-leaderboard img.avatar,
.gameengine-leaderboard .gameengine-avatar,
img.avatar.gameengine-avatar,
.gameengine-avatar {
	border-radius: 50%;
	object-fit: cover;
}