/* =====================================================================================================================
   Shiron - hoja de estilo unica.
   Tema oscuro con dorado, el mismo acento que usa la interfaz del cliente (#c9a659).
   Sin fuentes externas a proposito: cargan mas rapido y no obligan a abrir la politica de seguridad.
   ===================================================================================================================== */

:root {
	--fondo:        #0d0b0a;
	--fondo-2:      #16110f;
	--panel:        #1c1512;
	--panel-alto:   #241a16;
	--borde:        #36241d;
	--texto:        #e8ddd2;
	--texto-suave:  #a6968a;
	--oro:          #c9a659;
	--oro-claro:    #e3c987;
	--oro-oscuro:   #9c7a33;
	--rojo:         #8c2f28;
	--verde:        #3f6d3a;
	--radio:        14px;
	--ancho:        1520px;
	--sombra:       0 18px 40px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* El fondo de toda la web es el wallpaper del login del cliente.
   Encima lleva un velo oscuro en degradado: sin el, el texto claro se pierde sobre las zonas claras
   de la imagen (el cielo, la niebla) y la web deja de leerse. El velo va MAS opaco abajo, donde esta
   el contenido denso -- tablas y formularios -- y mas fino arriba, para que se vea la escena. */
body {
	margin: 0;
	background-color: var(--fondo);
	/* JPG primero: lo entiende cualquier navegador. El WebP se pide mas abajo con @supports, porque
	   si un navegador no entiende image-set() descarta la declaracion ENTERA y se queda sin fondo. */
	background-image:
		linear-gradient(180deg, rgba(13, 11, 10, .35) 0%, rgba(13, 11, 10, .62) 45%, rgba(13, 11, 10, .88) 100%),
		url("/assets/img/fondo.jpg");
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
	color: var(--texto);
	font-family: "Segoe UI", Roboto, -apple-system, "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

@supports (background-image: image-set(url("x.webp") type("image/webp"))) {
	body {
		background-image:
			linear-gradient(180deg, rgba(13, 11, 10, .35) 0%, rgba(13, 11, 10, .62) 45%, rgba(13, 11, 10, .88) 100%),
			image-set(url("/assets/img/fondo.webp") type("image/webp"), url("/assets/img/fondo.jpg") type("image/jpeg"));
	}

	/* Pantallas grandes o de alta densidad: el original mide 1672 px de ancho y en un monitor de
	   2560 el navegador lo estira, que es lo que se ve como falta de nitidez. Ahi se sirve la
	   version al doble. Solo la piden esas pantallas, asi que nadie mas carga los 479 KB. */
	@media (min-width: 1500px), (min-resolution: 1.5dppx) {
		body {
			background-image:
				linear-gradient(180deg, rgba(13, 11, 10, .35) 0%, rgba(13, 11, 10, .62) 45%, rgba(13, 11, 10, .88) 100%),
				image-set(url("/assets/img/fondo-2x.webp") type("image/webp"), url("/assets/img/fondo.jpg") type("image/jpeg"));
		}
	}
}

/* Trama diagonal sobre el wallpaper, como la textura de referencia.
   Se hace con CSS (lineas repetidas) en vez de con una imagen: no pesa nada, no se pixela nunca y
   se puede afinar cambiando un numero.
   - z-index -1 la deja DETRAS del contenido y DELANTE del fondo del body.
   - position fixed: la trama no se mueve al hacer scroll, igual que el wallpaper.
   - pointer-events none: no intercepta clics. */
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		/* Trama principal a 45 grados. Sin cortes secos: el color sube y baja poco a poco, asi que
		   la linea sale DIFUMINADA en vez de plana, que es lo que se pidio. Ciclo de 4 px (2 de
		   linea, 2 de hueco), la mitad que antes. */
		repeating-linear-gradient(
			45deg,
			rgba(0, 0, 0, .11) 0px,
			rgba(0, 0, 0, 0) 2px,
			rgba(0, 0, 0, .11) 4px
		),
		/* Segunda trama cruzada, en claro y mucho mas floja: al cruzarse con la de arriba deja un
		   tejido en vez de rayas, y da algo de relieve. */
		repeating-linear-gradient(
			135deg,
			rgba(255, 255, 255, .028) 0px,
			rgba(255, 255, 255, 0) 2px,
			rgba(255, 255, 255, .028) 4px
		);
}

a { color: var(--oro-claro); text-decoration: none; }
a:hover { color: var(--oro); text-decoration: underline; }

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6em; font-weight: 700; letter-spacing: .01em; }

code {
	background: var(--panel-alto);
	border: 1px solid var(--borde);
	border-radius: 6px;
	padding: .1em .4em;
	font-size: .92em;
}

.contenedor { width: min(100% - 32px, var(--ancho)); margin-inline: auto; }

/* Enlace de accesibilidad: solo aparece al tabular. */
.saltar {
	position: absolute; left: -9999px;
	background: var(--oro); color: #1a1207; padding: .6rem 1rem; border-radius: 0 0 8px 0; z-index: 100;
}
.saltar:focus { left: 0; top: 0; }

/* ------------------------------------------------------------------------------------------- cabecera */
.cabecera {
	position: sticky; top: 0; z-index: 50;
	background: rgba(13, 11, 10, .88);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--borde);
}

.cabecera__fila { display: flex; align-items: center; gap: 24px; padding: 14px 0; }

/* Cabecera al estilo de la referencia: icono redondo a la izquierda, menu CENTRADO y las acciones
   de cuenta a la derecha. El menu va centrado de verdad (no "casi"): las dos columnas de los lados
   tienen el mismo ancho minimo, asi no se descoloca cuando el boton cambia de "Entrar" a "Mi
   cuenta", que es mas largo. */
.marca { display: flex; align-items: center; min-width: 120px; }
.marca:hover { text-decoration: none; }
.marca__icono {
	display: block; width: 48px; height: 48px; border-radius: 50%;
	box-shadow: 0 0 0 1px var(--borde), 0 6px 18px rgba(0, 0, 0, .5);
	transition: box-shadow .15s ease;
}
.marca:hover .marca__icono { box-shadow: 0 0 0 1px var(--oro-oscuro), 0 6px 22px rgba(201, 166, 89, .25); }

.menu { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 18px); margin: 0 auto; }
.menu__enlace {
	display: flex; align-items: center; height: 44px; padding: 0 clamp(8px, 1vw, 16px);
	border-radius: 10px;
	color: var(--texto); font-weight: 700; font-size: .95rem; letter-spacing: .06em; text-transform: uppercase;
	border: 1px solid transparent; white-space: nowrap;
	transition: color .12s ease, background .12s ease;
}
.menu__enlace:hover { color: var(--oro-claro); background: rgba(201, 166, 89, .08); text-decoration: none; }
.menu__enlace.es-activo { color: var(--oro-claro); border-color: var(--borde); background: var(--panel); }

.cabecera__acciones { display: flex; gap: 10px; min-width: 120px; justify-content: flex-end; }

/* ------------------------------------------------------------------------------------------- idiomas */
/* Es un <details>: se abre y cierra sin JavaScript. */
.idiomas { position: relative; min-width: 120px; display: flex; justify-content: flex-end; }
.idiomas__actual {
	display: flex; align-items: center; gap: 8px;
	height: 40px; padding: 0 12px; border-radius: 10px; cursor: pointer;
	background: var(--panel); border: 1px solid var(--borde);
	font-weight: 700; font-size: .86rem; letter-spacing: .06em;
	list-style: none;		/* quita el triangulito del navegador */
	user-select: none;
}
.idiomas__actual::-webkit-details-marker { display: none; }
.idiomas__actual:hover { border-color: var(--oro-oscuro); color: var(--oro-claro); }
.idiomas__flecha { font-size: .7rem; opacity: .7; transition: transform .15s ease; }
.idiomas[open] .idiomas__flecha { transform: rotate(180deg); }

.idiomas__lista {
	position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
	margin: 0; padding: 6px; list-style: none; min-width: 200px;
	background: rgba(22, 17, 15, .97); backdrop-filter: blur(10px);
	border: 1px solid var(--borde); border-radius: 12px;
	box-shadow: var(--sombra);
	max-height: 70vh; overflow-y: auto;
}
.idiomas__opcion {
	display: flex; align-items: center; gap: 10px;
	padding: 9px 10px; border-radius: 8px; color: var(--texto); font-size: .92rem;
}
.idiomas__opcion:hover { background: rgba(201, 166, 89, .1); color: var(--oro-claro); text-decoration: none; }
.idiomas__opcion.es-activo { color: var(--oro-claro); background: rgba(201, 166, 89, .08); }

.bandera {
	display: block; width: 24px; height: 16px; border-radius: 2px; flex: none;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .5);
}

.menu-movil { display: none; background: none; border: 0; cursor: pointer; padding: 8px; }
.menu-movil span { display: block; width: 22px; height: 2px; background: var(--texto); margin: 4px 0; }

/* ------------------------------------------------------------------------------------------- botones */
.boton {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 11px 22px; border-radius: 10px; border: 1px solid transparent;
	font-weight: 700; font-size: .95rem; cursor: pointer; transition: transform .12s ease, filter .12s ease;
}
.boton:hover { text-decoration: none; transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

.boton--oro {
	background: linear-gradient(180deg, var(--oro-claro), var(--oro-oscuro));
	color: #241803; border-color: var(--oro-oscuro);
	box-shadow: 0 6px 18px rgba(201, 166, 89, .22);
}
.boton--oro:hover { filter: brightness(1.07); color: #241803; }

.boton--linea { background: var(--panel); color: var(--texto); border-color: var(--borde); }
.boton--linea:hover { border-color: var(--oro-oscuro); color: var(--oro-claro); }

.boton--grande { padding: 14px 30px; font-size: 1.02rem; }

/* ------------------------------------------------------------------------------------------- portada */
/* La portada ya no pinta fondo propio: deja ver el wallpaper del body y solo anade un halo dorado
   muy suave detras del logo. */
.portada {
	padding: 104px 0 84px;
	border-bottom: 1px solid var(--borde);
	background: radial-gradient(760px 340px at 50% 22%, rgba(201, 166, 89, .13), transparent 70%);
	text-align: center;
}
.portada__titulo { margin: 0 0 .35em; }
.portada__logo {
	display: block; margin: 0 auto;
	width: min(420px, 78vw); height: auto;
	/* Un halo calido detras del logo, del mismo dorado de la marca. */
	filter: drop-shadow(0 12px 32px rgba(201, 166, 89, .28));
}
.portada__lema { color: var(--texto-suave); font-size: 1.12rem; margin: 0 auto 32px; max-width: 46ch; }
.portada__botones { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }


/* ------------------------------------------------------------------------------------------- portada */
/* Dos columnas: la estrecha lleva descarga, cuenta y clasificacion; la ancha, noticias y eventos.
   En movil se apilan y la columna estrecha va DEBAJO: en un telefono lo primero que interesa son
   las noticias, no el panel de la cuenta. */
.inicio {
	display: grid;
	grid-template-columns: 340px minmax(0, 1fr) 280px;
	gap: 20px;
	padding: 56px 0 56px;
	align-items: start;
}
.inicio__lado { display: flex; flex-direction: column; gap: 16px; }
.inicio__principal { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

/* Boton de descarga, la pieza mas llamativa de la portada. */
.descarga-grande {
	display: flex; align-items: center; justify-content: center; gap: 12px;
	padding: 22px; border-radius: var(--radio);
	background: linear-gradient(180deg, #f0dba6 0%, var(--oro) 45%, var(--oro-oscuro) 100%);
	color: #2a1c06; border: 1px solid var(--oro-oscuro);
	font-size: 1.28rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
	box-shadow: 0 10px 26px rgba(201, 166, 89, .22);
	transition: filter .12s ease, transform .12s ease;
}
.descarga-grande:hover { filter: brightness(1.06); transform: translateY(-1px); text-decoration: none; color: #2a1c06; }

/* Panel: la caja de la izquierda y tambien las cajas de la derecha. */
.panel {
	background: rgba(24, 18, 15, .88); backdrop-filter: blur(8px);
	border: 1px solid var(--borde); border-radius: var(--radio);
	padding: 18px 18px 16px;
}
.panel--alto { min-height: 240px; }
.panel__cabecera {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	margin-bottom: 14px; padding-bottom: 12px;
	border-bottom: 1px solid var(--borde);
}

/* DESPUES de .panel__cabecera a proposito: las dos reglas pesan lo mismo, asi que si esta fuera
   antes (como estaba) el space-between de arriba se la comia y el titulo no se centraba. */
.panel__cabecera--centrada { justify-content: center; }
.panel__cabecera--centrada .panel__titulo { text-align: center; }

/* Un titulo con sello ocupa la cabecera entera: es el que se centra a si mismo. */
.panel__cabecera > .panel__titulo--centrado { flex: 1; }

/*
 * Pie del panel: el sitio del boton de "ver mas".
 *
 * Estuvo en la cabecera, al lado del titulo, y ahi era IMPOSIBLE centrar el titulo de verdad. Las
 * cuentas de la columna de la clasificacion, que mide 340 y deja 302 de contenido:
 *
 *     sello 排行 ~35 + titulo ~105 + boton "Ver Clasificacion" ~132 + los dos huecos 16 = 288
 *
 * Cabe en la linea, si; pero para que el titulo quede CENTRADO los dos lados tienen que medir lo
 * mismo, o sea 132 cada uno: 132 + 105 + 132 + 16 = 385, y solo hay 302. El titulo se corria a la
 * izquierda y quedaba pegado al boton. Para que cupiera centrado, el boton no podia pasar de 90,
 * que con ese texto obliga a una letra de 9 pixeles: ilegible.
 *
 * Asi que el boton baja al pie, a lo ancho: el titulo se centra sin estorbos y el boton se lee.
 */
.panel__pie { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde); }

.boton-mini--pie {
	display: block; width: 100%; text-align: center;
	padding: 8px 10px; font-size: .74rem; letter-spacing: .02em;
}
.panel__titulo { font-size: 1.12rem; margin: 0; }
.panel__texto { color: var(--texto-suave); font-size: .94rem; margin: 0; }
.panel__botones { display: flex; gap: 10px; margin-top: 14px; }
.panel--acceso .panel__titulo {
	display: flex; align-items: center; gap: 9px;
	margin: 0 0 16px; padding-bottom: 13px;
	border-bottom: 1px solid var(--borde);
}

/* Formulario del panel: mas apretado que el de la pagina de acceso, que aqui hay poco sitio. */
.formulario--compacto { gap: 12px; margin-top: 0; }
.formulario--compacto .campo__control { padding: 10px 12px; font-size: .95rem; }
.formulario--compacto .captcha { padding: 10px 12px; gap: 10px; }
.formulario--compacto .captcha__texto { font-size: .82rem; }
.formulario--compacto .captcha__marca { width: 22px; height: 22px; }
.formulario--compacto .captcha__casilla:checked + .captcha__marca::after { left: 7px; top: 3px; width: 5px; height: 10px; }
.formulario--compacto .captcha__logo { width: 20px; height: 20px; }

.panel__pie {
	display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
	margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--borde);
	font-size: .8rem;
}
.panel__pie span { color: var(--texto-suave); }
.panel__pie a { color: var(--oro-claro); font-weight: 600; }
.panel__pie a:hover { color: var(--oro-claro); }

.boton-mini {
	padding: 7px 12px; border-radius: 8px; font-size: .78rem; font-weight: 600; white-space: nowrap;
	background: var(--panel-alto); border: 1px solid var(--borde); color: var(--texto-suave);
}
.boton-mini:hover { border-color: var(--oro-oscuro); color: var(--oro-claro); text-decoration: none; }

/* Un boton por linea, del mismo ancho que la fila de monedas. La separacion la pone el margen de
   .fila, asi que aqui no hace falta gap. */
.panel__menu { display: flex; flex-direction: column; }
/* (el estilo de las filas lo pone .fila; .panel__opcion ya no se usa) */
.panel__icono { color: var(--oro); font-size: 1.15rem; }

/* Clasificacion resumida */
.clasi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.clasi__fila {
	display: grid; grid-template-columns: 30px 58px 1fr 38px; align-items: center; gap: 10px;
	padding: 10px 6px; border-bottom: 1px solid rgba(54, 36, 29, .5); font-size: .92rem;
}
.clasi__fila:first-child { padding-top: 2px; }
.clasi__fila:last-child { border-bottom: 0; padding-bottom: 2px; }
.clasi__puesto { font-weight: 800; color: var(--texto-suave); }
.clasi__puesto--1 { color: #f2d27a; }
.clasi__puesto--2 { color: #cfd3d8; }
.clasi__puesto--3 { color: #d09a6a; }
.clasi__nivel { font-size: .78rem; color: var(--texto-suave); white-space: nowrap; }
.clasi__nombre { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Bandera del reino: la del propio juego, no un cuadradito de color ni el nombre escrito.
   Se sirve a 128x79 y se pinta a 34x21, asi que se ve nitida tambien en pantallas densas. */
.clasi__bandera { display: block; width: 34px; height: auto; border-radius: 2px; }
.clasi__bandera--vacia { width: 34px; height: 21px; }
.clasi__nombre { text-align: center; }

/* Noticias: tres tarjetas grandes y, al lado, la lista de las ultimas. */
.noticias-zona {
	display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 16px;
	background: rgba(24, 18, 15, .78); backdrop-filter: blur(8px);
	border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px;
}
.noticias { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }

.ultimas {
	background: rgba(36, 26, 22, .5); border: 1px solid var(--borde); border-radius: 12px; padding: 14px;
}
.ultimas__titulo { font-size: .95rem; color: var(--oro-claro); margin: 0 0 12px; }
.ultimas__lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ultima {
	display: flex; flex-direction: column; gap: 2px;
	padding: 10px 12px; border-radius: 9px;
	background: rgba(24, 18, 15, .7); border: 1px solid transparent; color: var(--texto);
}
.ultima:hover { border-color: var(--borde); color: var(--oro-claro); text-decoration: none; }
.ultima__titulo { font-weight: 700; font-size: .88rem; }
.ultima__fecha { font-size: .76rem; color: var(--texto-suave); }
.noticia {
	position: relative; overflow: hidden; border-radius: var(--radio);
	border: 1px solid var(--borde); background: var(--panel); min-height: 220px;
	display: flex; flex-direction: column; justify-content: flex-end;
}
.noticia__imagen { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.noticia__pie {
	position: relative; padding: 14px 16px;
	background: linear-gradient(180deg, transparent, rgba(13, 11, 10, .92) 45%);
}
.noticia__fecha {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .78rem; color: var(--oro-claro);
}
.noticia__titulo { font-size: 1.02rem; margin: 2px 0 0; }
.noticia__enlace { position: absolute; inset: 0; }	/* toda la tarjeta es el enlace */
.noticia:hover { border-color: var(--oro-oscuro); }

/* Eventos */
.eventos {
	background: rgba(24, 18, 15, .88); backdrop-filter: blur(8px);
	border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px;
	margin-top: 16px;
}
.eventos__titulo { padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.eventos__titulo { font-size: 1.02rem; margin: 0 0 12px; }
.eventos__lista { display: flex; flex-direction: column; gap: 8px; }
.evento {
	display: flex; flex-direction: column; gap: 2px;
	background: var(--panel-alto); border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px;
}
.evento__nombre { font-weight: 600; font-size: .9rem; }
.evento__cuando { font-size: .8rem; color: var(--oro-claro); }

@media (max-width: 1500px) {
	.fila { min-height: 50px; font-size: .9rem; padding: 9px 11px; }
	.panel__icono { width: 34px; height: 34px; }
	.panel__icono svg { width: 18px; height: 18px; }
	.descarga-grande { padding: 18px; font-size: 1.14rem; }
}

@media (max-width: 1400px) {
	/* Sin sitio para tres columnas: las estadisticas se van debajo del panel de la izquierda. */
	.inicio { grid-template-columns: 340px minmax(0, 1fr); }
	.inicio__lado--derecha { grid-column: 1; grid-row: 2; }
}

@media (max-width: 1000px) {
	.inicio { grid-template-columns: 1fr; }
	.inicio__lado { order: 2; }
	.inicio__principal { order: 1; }
	.noticias-zona { grid-template-columns: 1fr; }
	.noticias { grid-template-columns: 1fr; }
}

/* Fila del panel: la usan las monedas, los botones de seccion y los datos del servidor, para que
   todo tenga el mismo alto, el mismo icono redondo y el mismo tamano de letra. */
.fila {
	display: flex; align-items: center; gap: 12px;
	min-height: 56px;			/* todas iguales: monedas y botones */
	padding: 10px 13px; border-radius: 11px; margin-top: 8px;
	background: rgba(36, 26, 22, .55); border: 1px solid transparent;
	font-size: .95rem; color: var(--texto);
}
.fila__texto { color: var(--oro-claro); font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fila__valor { margin-left: auto; flex: none; font-weight: 700; font-size: 1rem; white-space: nowrap; color: var(--texto); }
.fila__flecha { margin-left: auto; color: var(--texto-suave); font-size: 1.05rem; }

.fila--moneda { background: rgba(201, 166, 89, .1); border-color: rgba(201, 166, 89, .25); }
.fila--streamer { background: rgba(140, 47, 40, .14); border-color: rgba(140, 47, 40, .4); }
.fila--streamer .fila__texto { color: #e8b4ad; }

.fila--boton:hover { background: var(--panel-alto); border-color: var(--borde); text-decoration: none; }
.fila--boton.es-activa { border-color: var(--oro-oscuro); background: rgba(201, 166, 89, .1); }
.fila--boton:hover .fila__flecha { color: var(--oro-claro); }

/* Datos del servidor: sin icono, el numero manda. */
/* Datos del servidor. El texto se acorta con puntos suspensivos si hace falta y el numero NUNCA
   se comprime: con 1.000.000 de personajes la etiqueta cede, no la cifra. */
.fila--dato { min-height: 48px; padding: 8px 11px; margin-top: 7px; gap: 9px; }
.fila--dato .fila__texto {
	font-size: .8rem; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fila--dato .fila__valor { flex: none; font-size: .92rem; white-space: nowrap; }
.fila--dato .panel__icono { width: 30px; height: 30px; }
.fila--dato .panel__icono svg { width: 16px; height: 16px; }
.fila--dato .fila__texto { color: var(--texto-suave); font-weight: 500; }
.fila--dato .fila__valor { color: var(--oro-claro); font-size: .98rem; }

/* (sin punto verde: el icono de la fila ya identifica la linea) */

/* Cuando un numero cambia solo (el panel se refresca cada pocos segundos), un destello dorado muy
   breve: se ve que esta vivo sin que moleste a quien esta leyendo otra cosa. */
.fila__valor--cambia { animation: valor-cambia .9s ease-out; }
@keyframes valor-cambia {
	0%   { color: #fff; text-shadow: 0 0 10px rgba(201, 166, 89, .75); }
	100% { color: var(--oro-claro); text-shadow: none; }
}

.panel--seccion { margin-bottom: 4px; }
.seccion__sub { font-size: .95rem; color: var(--oro-claro); margin: 16px 0 8px; }

/* ------------------------------------------------------------------------------------------- panel del jugador */
.monedas {
	display: flex; align-items: center; gap: 10px;
	background: linear-gradient(180deg, rgba(201, 166, 89, .16), rgba(201, 166, 89, .06));
	border: 1px solid var(--oro-oscuro); border-radius: 12px;
	padding: 11px 14px; margin-bottom: 8px;
}
.monedas__icono { color: var(--oro-claro); font-size: 1.15rem; }
.monedas__texto { font-size: .85rem; color: var(--texto-suave); }
.monedas__cifra { font-size: 1.16rem; font-weight: 800; color: var(--oro-claro); margin-left: auto; }
.monedas--streamer { background: linear-gradient(180deg, rgba(140, 47, 40, .22), rgba(140, 47, 40, .08)); border-color: #8c2f28; }
.monedas--streamer .monedas__icono, .monedas--streamer .monedas__cifra { color: #e8b4ad; }

/* Icono de seccion: siempre dentro de su circulo. */
.panel__icono {
	width: 38px; height: 38px; flex: none;
	display: grid; place-items: center; border-radius: 50%;
	background: rgba(201, 166, 89, .12); border: 1px solid var(--borde); color: var(--oro);
}
.panel__icono svg { width: 20px; height: 20px; }

/* Secciones que se abren en la MISMA pagina (son <details>: funcionan sin JavaScript). */
.desplegable { border: 1px solid var(--borde); border-radius: 12px; margin-top: 8px; overflow: hidden; }
.desplegable__titulo {
	display: flex; align-items: center; gap: 12px;
	padding: 10px 12px; cursor: pointer; list-style: none;
	background: rgba(36, 26, 22, .6); font-weight: 600; font-size: .92rem;
}
.desplegable__titulo::-webkit-details-marker { display: none; }
.desplegable__titulo:hover { background: var(--panel-alto); color: var(--oro-claro); }
.desplegable__flecha { margin-left: auto; opacity: .6; font-size: .8rem; transition: transform .15s ease; }
.desplegable[open] .desplegable__flecha { transform: rotate(180deg); }
.desplegable[open] .desplegable__titulo { border-bottom: 1px solid var(--borde); color: var(--oro-claro); }
.desplegable__cuerpo { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.desplegable__sub { font-size: .88rem; color: var(--oro-claro); margin: 4px 0 0; }

.datos { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .88rem; }
.datos dt { color: var(--texto-suave); }
.datos dd { margin: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }

.personajes { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.personaje {
	display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px;
	background: rgba(13, 11, 10, .5); border: 1px solid var(--borde); border-radius: 9px; padding: 8px 10px;
}
.personaje__bandera { display: block; width: 26px; height: auto; border-radius: 2px; }
.personaje__nombre { font-weight: 600; font-size: .9rem; }
.personaje__datos { font-size: .78rem; color: var(--texto-suave); white-space: nowrap; }

/* ------------------------------------------------------------------------------------------- cifras */
.cifras {
	display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
	margin-top: -34px; position: relative; z-index: 2;
}
.cifra {
	background: linear-gradient(180deg, rgba(36, 26, 22, .88), rgba(28, 21, 18, .84));
	backdrop-filter: blur(6px);
	border: 1px solid var(--borde); border-radius: var(--radio);
	padding: 20px 16px; text-align: center; box-shadow: var(--sombra);
}
.cifra__numero { display: block; font-size: 1.9rem; font-weight: 800; color: var(--oro-claro); }
.cifra__texto { display: block; font-size: .85rem; color: var(--texto-suave); margin-top: 2px; }

/* ------------------------------------------------------------------------------------------- bloques */
.bloque { padding: 64px 0; }
.bloque--estrecho { max-width: 880px; margin-inline: auto; }
.bloque__titulo { font-size: clamp(1.6rem, 3.4vw, 2.2rem); }
.bloque__encabezado { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.enlace-mas { font-weight: 600; font-size: .95rem; white-space: nowrap; }
.centrado { text-align: center; }
.sub { font-size: 1.25rem; margin-top: 2em; color: var(--oro-claro); }
.entradilla { font-size: 1.1rem; color: var(--texto-suave); }

.rejilla-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

/* Los paneles van semitransparentes con desenfoque: asi se intuye el wallpaper por detras sin que
   el texto pierda contraste. El color de reserva (sin backdrop-filter) es el panel opaco de antes. */
.tarjeta {
	background: rgba(28, 21, 18, .82); border: 1px solid var(--borde); border-radius: var(--radio); padding: 22px;
	backdrop-filter: blur(6px);
}
.tarjeta h3 { color: var(--oro-claro); font-size: 1.08rem; margin-bottom: .4em; }
.tarjeta p { margin: 0; color: var(--texto-suave); }

.lista, .pasos { color: var(--texto-suave); padding-left: 1.2em; }
.lista li, .pasos li { margin: .5em 0; }
.pasos strong, .lista strong { color: var(--texto); }

.cta-final { text-align: center; margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--borde); }
.cta-final p { color: var(--texto-suave); margin-bottom: 14px; }

/* ------------------------------------------------------------------------------------------- tablas */
.tabla-caja {
	background: rgba(28, 21, 18, .86); backdrop-filter: blur(6px);
	border: 1px solid var(--borde); border-radius: var(--radio);
	overflow-x: hidden; margin-top: 18px;
}
.tabla { width: 100%; border-collapse: collapse; font-size: .95rem; }
.tabla th {
	text-align: left; padding: 13px 16px; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
	color: var(--texto-suave); background: var(--panel-alto); border-bottom: 1px solid var(--borde);
}
.tabla td { padding: 12px 16px; border-bottom: 1px solid rgba(54, 36, 29, .55); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: rgba(201, 166, 89, .05); }
.tabla .der { text-align: right; }
.tabla .nombre { font-weight: 600; color: var(--texto); text-align: center; }
.tabla th.nombre-cab { text-align: center; }

.puesto { width: 54px; font-weight: 800; color: var(--texto-suave); }
.puesto--1 { color: #f2d27a; }
.puesto--2 { color: #cfd3d8; }
.puesto--3 { color: #d09a6a; }

.pestanas { display: flex; gap: 8px; margin: 18px 0 4px; }
.pestana {
	padding: 9px 18px; border-radius: 10px; border: 1px solid var(--borde);
	background: var(--panel); color: var(--texto); font-weight: 600; font-size: .95rem;
}
.pestana:hover { text-decoration: none; border-color: var(--oro-oscuro); }
.pestana.es-activa { background: linear-gradient(180deg, var(--oro-claro), var(--oro-oscuro)); color: #241803; border-color: var(--oro-oscuro); }

.paginas { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 24px; }
.paginas__actual { color: var(--texto-suave); font-size: .92rem; }

/* ------------------------------------------------------------------------------------------- formularios */
.formulario { margin-top: 22px; display: flex; flex-direction: column; gap: 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo__etiqueta { font-weight: 600; font-size: .92rem; }
.campo__control {
	background: var(--fondo-2); border: 1px solid var(--borde); border-radius: 10px;
	color: var(--texto); padding: 12px 14px; font-size: 1rem; font-family: inherit;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.campo__control:focus {
	outline: none; border-color: var(--oro-oscuro);
	box-shadow: 0 0 0 3px rgba(201, 166, 89, .16);
}
.campo__ayuda { font-size: .84rem; color: var(--texto-suave); }
.campo__area { resize: vertical; min-height: 140px; line-height: 1.55; font-family: inherit; }
.tarjeta-form--ancha { max-width: 640px; }


/* ------------------------------------------------------------------------------------------- formulario en tarjeta */
.tarjeta-form {
	background: rgba(24, 18, 15, .92); backdrop-filter: blur(10px);
	border: 1px solid var(--borde); border-radius: 16px;
	padding: 26px 28px 24px; box-shadow: var(--sombra);
	max-width: 440px; margin: 0 auto;
}
.tarjeta-form__titulo {
	display: flex; align-items: center; gap: 10px;
	font-size: 1.25rem; margin: 0 0 20px; padding-bottom: 16px;
	border-bottom: 1px solid var(--borde);
}
/* El sello en rojo de la referencia: solo decoracion, por eso aria-hidden en el HTML. */
.sello { color: #c0392b; font-size: 1.05rem; font-weight: 700; letter-spacing: .04em; flex: none; }

/* Titulo centrado con el sello a la izquierda.
   El truco del ::after: repite el sello en invisible al otro lado, asi el texto queda centrado
   respecto al PANEL entero y no respecto al hueco que deja el sello (que es lo que pasa si solo
   se usa flex: 1). */
.panel__titulo--centrado,
.tarjeta-form__titulo--centrado { display: flex; align-items: center; gap: 9px; }
.panel__titulo--centrado .titulo__texto,
.tarjeta-form__titulo--centrado .titulo__texto { flex: 1; text-align: center; }
.panel__titulo--centrado::after,
.tarjeta-form__titulo--centrado::after {
	content: "杰勒";
	visibility: hidden;
	font-size: 1.05rem; font-weight: 700; letter-spacing: .04em;
	flex: none;
}

.campo__fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.campo__olvido { font-size: .76rem; color: var(--texto-suave); white-space: nowrap; }
.campo__olvido:hover { color: var(--oro-claro); }

/* En la pagina de acceso, donde hay sitio de sobra, si van en cajita. */
.tarjeta-form .campo__olvido {
	background: var(--panel-alto); border: 1px solid var(--borde);
	padding: 5px 10px; border-radius: 7px;
}
.campo__olvido:hover { color: var(--oro-claro); border-color: var(--oro-oscuro); text-decoration: none; }

.boton--ancho { width: 100%; }

/* ------------------------------------------------------------------------------------------- captcha */
.captcha {
	display: flex; align-items: center; gap: 12px;
	background: rgba(13, 11, 10, .75); border: 1px solid var(--borde); border-radius: 12px;
	padding: 14px 16px; cursor: pointer; user-select: none;
}
.captcha__casilla { position: absolute; opacity: 0; width: 0; height: 0; }
.captcha__marca {
	width: 26px; height: 26px; border-radius: 6px; flex: none;
	background: var(--panel-alto); border: 1px solid var(--borde);
	transition: background .12s ease, border-color .12s ease;
	position: relative;
}
.captcha__casilla:checked + .captcha__marca {
	background: linear-gradient(180deg, var(--oro-claro), var(--oro-oscuro)); border-color: var(--oro-oscuro);
}
.captcha__casilla:checked + .captcha__marca::after {
	content: ""; position: absolute; left: 9px; top: 4px; width: 6px; height: 12px;
	border: solid #2a1c06; border-width: 0 2.5px 2.5px 0; transform: rotate(42deg);
}
.captcha__casilla:focus-visible + .captcha__marca { box-shadow: 0 0 0 3px rgba(201, 166, 89, .3); }
.captcha__texto { font-weight: 700; font-size: .92rem; }
.captcha__logo { width: 26px; height: 26px; margin-left: auto; color: var(--texto-suave); opacity: .6; }

/* Campo trampa: las personas no lo ven, los bots lo rellenan. No se usa display:none porque hay
   bots que precisamente buscan eso. */
.trampa {
	position: absolute !important; left: -9999px !important;
	width: 1px; height: 1px; opacity: 0;
}

/* ------------------------------------------------------------------------------------------- avisos */
.aviso {
	background: var(--panel); border: 1px solid var(--borde); border-left-width: 3px;
	border-radius: 10px; padding: 14px 18px; margin: 18px 0; color: var(--texto-suave);
}
.aviso p { margin: .3em 0; }
.aviso--bien { border-left-color: var(--verde); }
.aviso--mal { border-left-color: var(--rojo); color: #e8c9c4; }
.aviso--atencion { border-left-color: var(--oro); }

/* ------------------------------------------------------------------------------------------- descargas */
.descargas { display: flex; flex-direction: column; gap: 12px; margin: 24px 0; }
.descarga {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
	padding: 18px 22px; color: var(--texto); font-weight: 600;
}
.descarga:hover { border-color: var(--oro-oscuro); text-decoration: none; }
.descarga--principal {
	background: linear-gradient(180deg, var(--oro-claro), var(--oro-oscuro));
	color: #241803; border-color: var(--oro-oscuro);
}
.descarga__peso { font-size: .88rem; opacity: .75; font-weight: 500; }

/* ------------------------------------------------------------------------------------------- pie */
.pie { border-top: 1px solid var(--borde); background: rgba(0, 0, 0, .25); padding: 34px 0; margin-top: 40px; }
.pie__fila { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.pie__marca { font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); margin: 0 0 6px; }
.pie__nota { color: var(--texto-suave); font-size: .86rem; margin: 0; max-width: 52ch; }
.pie__enlaces { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.pie__enlaces a { color: var(--texto-suave); font-size: .92rem; }

/* ------------------------------------------------------------------------------------------- movil */
@media (max-width: 900px) {
	.cifras { grid-template-columns: repeat(2, 1fr); }
	.rejilla-3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
	body {
		background-attachment: scroll;
		background-image:
			linear-gradient(180deg, rgba(13, 11, 10, .4) 0%, rgba(13, 11, 10, .68) 45%, rgba(13, 11, 10, .9) 100%),
			url("/assets/img/fondo-movil.webp");
	}

	.menu {
		display: none; position: absolute; top: 100%; left: 0; right: 0;
		flex-direction: column; padding: 10px 16px 16px;
		background: var(--fondo-2); border-bottom: 1px solid var(--borde);
	}
	.menu.es-abierto { display: flex; }
	.menu-movil { display: block; }
	.marca, .cabecera__acciones { min-width: 0; }
	.cabecera__acciones { margin-left: auto; }
	.rejilla-2, .rejilla-3 { grid-template-columns: 1fr; }
	.bloque { padding: 44px 0; }
	.portada { padding: 62px 0 54px; }
	/* En movil la tabla se desplaza en horizontal en vez de aplastarse. */
	.tabla-caja { overflow-x: auto; }
	.tabla { min-width: 560px; }
}

/* ------------------------------------------------------------------------------------------- avisos flotantes */
/*
 * La "volandera" es el aviso que asoma arriba a la derecha y se va solo. Lleva su propia cuenta
 * atras dibujada: una barra que se vacia de izquierda a derecha durante --volandera-duracion.
 *
 * Todo el ciclo (entrar, esperar, irse) es CSS. El JavaScript solo lo retira del documento cuando
 * termina y atiende el aspa; sin JavaScript el aviso desaparece igual, solo que se queda ocupando
 * su sitio en un rincon invisible.
 */
.volanderas {
	position: fixed; top: 84px; right: 18px; z-index: 60;
	display: flex; flex-direction: column; gap: 10px;
	max-width: min(340px, calc(100vw - 36px));
	pointer-events: none;
}

.volandera {
	pointer-events: auto;
	border-radius: 12px; overflow: hidden;
	background: linear-gradient(180deg, rgba(30, 24, 20, .97), rgba(20, 16, 14, .97));
	border: 1px solid var(--borde);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .55);
	animation:
		volandera-entra .32s cubic-bezier(.2, .9, .3, 1.3),
		volandera-sale .45s ease-in forwards var(--volandera-duracion, 5s);
}

.volandera__cuerpo { display: flex; align-items: center; gap: 11px; padding: 13px 13px 12px; }

.volandera__marca {
	flex: none; width: 26px; height: 26px; border-radius: 50%;
	display: grid; place-items: center;
	background: rgba(74, 168, 88, .16); border: 1px solid rgba(74, 168, 88, .5); color: #6fce7f;
}
.volandera__marca svg { width: 15px; height: 15px; }

.volandera__texto { margin: 0; font-size: .92rem; font-weight: 600; color: var(--texto); }

.volandera__cerrar {
	margin-left: auto; flex: none;
	background: none; border: 0; cursor: pointer;
	color: var(--texto-suave); font-size: 1.3rem; line-height: 1; padding: 0 2px;
}
.volandera__cerrar:hover { color: var(--oro-claro); }

/* La cuenta atras. Se encoge desde el ancho completo hasta nada; al llegar a cero el aviso ya se
   esta yendo. */
.volandera__barra {
	display: block; height: 3px; width: 100%;
	background: linear-gradient(90deg, #4aa858, #6fce7f);
	transform-origin: left center;
	animation: volandera-cuenta var(--volandera-duracion, 5s) linear forwards;
}

/* Un aviso de error usa el mismo armazon, en rojo. */
.volandera--mal .volandera__marca { background: rgba(192, 57, 43, .16); border-color: rgba(192, 57, 43, .5); color: #e8776a; }
.volandera--mal .volandera__barra { background: linear-gradient(90deg, #c0392b, #e8776a); }

@keyframes volandera-entra { from { opacity: 0; transform: translateX(26px); } }
@keyframes volandera-sale  { to { opacity: 0; transform: translateX(26px); visibility: hidden; } }
@keyframes volandera-cuenta { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* Con el raton encima se para la cuenta atras: da tiempo a leerlo con calma. */
.volandera:hover { animation-play-state: paused; }
.volandera:hover .volandera__barra { animation-play-state: paused; }

/* A quien pide menos movimiento se le quita el deslizamiento, pero el aviso sigue yendose solo. */
@media (prefers-reduced-motion: reduce) {
	@keyframes volandera-entra { from { opacity: 0; } }
	@keyframes volandera-sale  { to { opacity: 0; visibility: hidden; } }
}

@media (max-width: 640px) {
	.volanderas { top: 74px; right: 12px; left: 12px; max-width: none; }
}

/* ------------------------------------------------------------------------------------------- buscador de la clasificacion */
.barra-clasi {
	display: flex; align-items: center; justify-content: space-between; gap: 14px;
	flex-wrap: wrap; margin-bottom: 14px;
}

.buscador {
	display: flex; align-items: center; gap: 0;
	background: var(--panel-alto); border: 1px solid var(--borde); border-radius: 9px;
	padding: 0 4px 0 10px; min-width: 260px;
}
.buscador:focus-within { border-color: var(--oro-oscuro); }

.buscador__lupa { display: grid; place-items: center; color: var(--texto-suave); flex: none; }
.buscador__lupa svg { width: 15px; height: 15px; }

.buscador__campo {
	flex: 1; min-width: 0;
	background: none; border: 0; outline: none;
	color: var(--texto); font-size: .86rem; padding: 8px 9px;
}
.buscador__campo::placeholder { color: var(--texto-suave); }
/* La cruz que pinta el navegador en los type=search sobra: ya hay una propia, y en cada navegador
   se ve de una forma. */
.buscador__campo::-webkit-search-cancel-button { display: none; }

/* Solo lo ve quien no tenga JavaScript: con JavaScript se quita del documento al arrancar. */
.buscador__boton {
	flex: none; cursor: pointer;
	background: rgba(201, 166, 89, .14); border: 1px solid rgba(201, 166, 89, .3); border-radius: 7px;
	color: var(--oro-claro); font-size: .78rem; font-weight: 600; padding: 6px 12px; margin: 3px;
}
.buscador__boton:hover { background: rgba(201, 166, 89, .24); }

.buscador__limpiar {
	flex: none; color: var(--texto-suave); font-size: 1.15rem; line-height: 1; padding: 0 10px 2px 6px;
}
.esta-oculto { display: none; }

/* Mientras llega el resultado, la tabla se atenua un poco: se nota que esta trabajando sin que
   nada salte de sitio. */
.esta-cargando { opacity: .55; transition: opacity .15s; }
.buscador__limpiar:hover { color: var(--oro-claro); text-decoration: none; }

.buscador__resultado { color: var(--texto-suave); font-size: .85rem; margin: 0 0 12px; }

/* Columna del nivel: centrada, que es un numero corto y a la derecha se pierde. */
.tabla th.cen, .tabla td.cen { text-align: center; }
.tabla td.vacia, .tabla .vacia { color: var(--texto-suave); }

.tabla__bandera { display: inline-block; width: 34px; height: 21px; border-radius: 3px; vertical-align: middle; }

/* El reino cierra la fila, asi que se arrima a la derecha dejando un margen parecido al que hay
   entre las demas columnas; antes se quedaba pegado al gremio con un hueco enorme detras. */
.tabla .reino { text-align: right; padding-right: 40px; }

/*
 * Quince filas y a partir de ahi se desliza DENTRO de la tabla, en vez de estirar la pagina hasta
 * el infinito. Las cuentas: cada fila son 12 + 12 de margen, la linea de texto y el filete de
 * abajo, o sea unos 46; la cabecera, 43. Si el alto real baila un pixel se vera media fila
 * asomando, que tampoco esta mal: se nota que hay mas debajo.
 */
.tabla-caja {
	--fila: 50px;
	--cabecera: 48px;
	max-height: calc(var(--fila) * 15 + var(--cabecera));
	overflow-y: auto;
}

/* La cabecera se queda fija arriba al deslizar, con fondo opaco: si no, el contenido se le ve
   por debajo. */
.tabla thead th { position: sticky; top: 0; z-index: 2; background: #241a16; }

/* Barra de deslizar a juego con la web: una barra lisa, sin los botones de flecha.
   OJO al orden de estas dos formas de pintarla: si se declara `scrollbar-color`, los navegadores
   de Chrome usan SU barra (con flechas) y se saltan todo lo `::-webkit-*`. Por eso lo estandar se
   deja solo para quien no entiende ::-webkit-scrollbar, que en la practica es Firefox. */
@supports not selector(::-webkit-scrollbar) {
	.tabla-caja { scrollbar-width: thin; scrollbar-color: var(--oro-oscuro) rgba(28, 21, 18, .6); }
}
.tabla-caja::-webkit-scrollbar { width: 10px; }
.tabla-caja::-webkit-scrollbar-button,
.tabla-caja::-webkit-scrollbar-button:start,
.tabla-caja::-webkit-scrollbar-button:end,
.tabla-caja::-webkit-scrollbar-corner { display: none; height: 0; width: 0; background: transparent; }
.tabla-caja::-webkit-scrollbar-track { background: rgba(28, 21, 18, .6); border-radius: 0 var(--radio) var(--radio) 0; }
.tabla-caja::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--oro-oscuro), #6b4f26);
	border-radius: 6px; border: 2px solid rgba(28, 21, 18, .9);
}
.tabla-caja::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--oro-claro), var(--oro-oscuro)); }

@media (max-width: 720px) {
	.barra-clasi { flex-direction: column; align-items: stretch; }
	.buscador { min-width: 0; }
}

/* El nombre de la cuenta en el saludo, en el mismo rojo que los sellos. */
.nombre-usuario { color: #c0392b; font-weight: 700; }

/* La carita de la clase en la clasificacion. Las imagenes vienen del cliente en cuadrado, de 43;
   el circulo lo hace el borde redondeado, con un filete dorado tenue para que no floten sueltas. */
.cara {
	display: inline-block; width: 30px; height: 30px; border-radius: 50%;
	object-fit: cover; vertical-align: middle;
	border: 1px solid rgba(201, 166, 89, .35);
	background: rgba(0, 0, 0, .25);
}

/* Los tres primeros llevan halo con el color de su puesto, el mismo del numero de la izquierda:
   oro, plata y bronce. Va con box-shadow y no con borde para que el anillo quede FUERA y todas las
   caras sigan midiendo igual; con borde, las tres de arriba saldrian mas gordas y la columna
   bailaria. */
.cara--1, .cara--2, .cara--3 { border-color: transparent; }
.cara--1 { box-shadow: 0 0 0 2px #f2d27a, 0 0 9px 1px rgba(242, 210, 122, .55); }
.cara--2 { box-shadow: 0 0 0 2px #cfd3d8, 0 0 9px 1px rgba(207, 211, 216, .45); }
.cara--3 { box-shadow: 0 0 0 2px #d09a6a, 0 0 9px 1px rgba(208, 154, 106, .45); }

/* Para quien navega con lector de pantalla: el texto esta, pero no ocupa sitio. */
.visualmente-oculto {
	position: absolute; width: 1px; height: 1px; overflow: hidden;
	clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------------------------------------------- descarga */
.reqs {
	background: rgba(20, 15, 12, .5); border: 1px solid var(--borde); border-radius: var(--radio);
	padding: 15px 16px 16px; margin-top: 14px;
}

.reqs__titulo {
	display: flex; align-items: center; gap: 10px;
	font-size: .98rem; margin: 0 0 6px; color: var(--texto);
}
.reqs__nota { color: var(--texto-suave); font-size: .86rem; margin: 0 0 13px; }
.reqs__pie { color: var(--texto-suave); font-size: .82rem; margin: 12px 2px 0; text-align: center; }

/* Seis columnas de rejilla para poder repartir 3 + 2: las tarjetas cortas (sistema, procesador y
   memoria) ocupan dos columnas cada una y salen tres por fila; la grafica y el almacenamiento,
   que llevan mas texto, ocupan tres y comparten la fila de abajo. */
.reqs__rejilla { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }

.req {
	background: rgba(36, 26, 22, .55); border: 1px solid var(--borde); border-radius: 10px;
	padding: 12px 13px;
}

.req { grid-column: span 2; }
.req--ancha { grid-column: span 3; }

/* Estrecho: cada tarjeta en su linea, que a 260 de ancho no cabe ni una al lado de otra. */
@media (max-width: 820px) {
	.req, .req--ancha { grid-column: 1 / -1; }
}
.req__cabeza { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.req__nombre {
	font-size: .74rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
	color: var(--oro-claro);
}
.req__valor { margin: 0; font-size: .88rem; color: var(--texto); line-height: 1.45; }

/* --------------------------------------------------------- espejos de descarga */
.espejos { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }

.espejo {
	display: flex; flex-direction: column; gap: 9px;
	background: rgba(36, 26, 22, .55); border: 1px solid var(--borde); border-radius: 10px;
	padding: 13px;
}
.espejo--principal { border-color: rgba(201, 166, 89, .4); background: rgba(201, 166, 89, .08); }

.espejo__cabeza { display: flex; align-items: center; gap: 9px; }
.espejo__nombre { font-weight: 700; font-size: .95rem; color: var(--texto); }

.espejo__pie { display: flex; align-items: center; gap: 8px; }
.espejo__dominio {
	font-size: .74rem; letter-spacing: .05em; text-transform: uppercase; color: var(--texto-suave);
}
.espejo__peso {
	margin-left: auto; font-size: .74rem; color: var(--oro-claro);
	background: rgba(201, 166, 89, .12); border-radius: 20px; padding: 2px 9px;
}

.espejo__boton {
	margin-top: auto; text-align: center; padding: 9px 12px; border-radius: 8px;
	font-size: .84rem; font-weight: 700; letter-spacing: .02em;
	background: linear-gradient(180deg, #a5392f, #7e2a22); border: 1px solid #b7463a; color: #fff;
}
.espejo__boton:hover { background: linear-gradient(180deg, #bd4438, #90312a); text-decoration: none; }

/* --------------------------------------------------------- desplegables del final */
.desplegable {
	border-top: 1px solid var(--borde); margin-top: 14px; padding-top: 12px;
}
.desplegable summary {
	cursor: pointer; font-weight: 600; font-size: .92rem; color: var(--oro-claro); list-style: none;
}
.desplegable summary::-webkit-details-marker { display: none; }
.desplegable summary::before { content: "+ "; color: var(--texto-suave); }
.desplegable[open] summary::before { content: "− "; }
.desplegable .pasos, .desplegable .lista { margin: 10px 0 2px; padding-left: 20px; color: var(--texto-suave); font-size: .88rem; }
.desplegable li { margin-bottom: 6px; }

/* ------------------------------------------------------------------------------------------- registro */
/* Etiqueta con icono delante, como las filas del panel. */
.campo__etiqueta { display: flex; align-items: center; gap: 8px; }
.campo__etiqueta .panel__icono { width: 22px; height: 22px; }
.campo__etiqueta .panel__icono svg { width: 13px; height: 13px; }

/* Campo con boton al lado (el codigo de seguridad y su "generar"). */
.campo__fila-boton { display: flex; gap: 8px; align-items: stretch; }
.campo__fila-boton .campo__control { flex: 1; min-width: 0; }

/* El campo del codigo lleva un margen abajo para cuando va solo. Dentro de esta fila ese margen
   cuenta como altura, y el boton se estiraba 12px mas que la caja visible del campo. */
.campo__fila-boton .promo-campo { margin-bottom: 0; }

/* La misma altura exacta para los dos. Con stretch a secas quedaban un par de pixeles bailando,
   porque el campo y el boton no tienen ni el mismo padding ni el mismo tamano de letra. */
.campo__fila-boton .campo__control,
.campo__fila-boton .boton { height: 48px; }
.campo__fila-boton .boton { flex: none; white-space: nowrap; padding: 0 16px; }

/* Condiciones de la contrasena. */
.reglas {
	background: rgba(20, 15, 12, .5); border: 1px solid var(--borde); border-radius: 10px;
	padding: 11px 13px; margin: -4px 0 14px;
}
.reglas__titulo {
	display: flex; align-items: center; gap: 8px;
	margin: 0 0 9px; font-size: .74rem; font-weight: 700; letter-spacing: .07em;
	text-transform: uppercase; color: var(--oro-claro);
}
/* El candado, del tamano de los iconos de las etiquetas de los campos. */
.reglas__titulo .panel__icono { width: 22px; height: 22px; }
.reglas__titulo .panel__icono svg { width: 13px; height: 13px; }
/* Las cinco condiciones, en una sola linea y repartidas a lo ancho. Se permite que salten de
   linea porque hay idiomas de palabras largas (el aleman dice "Einen Grossbuchstaben"): antes que
   cortar el texto, que baje lo que no quepa. */
.reglas__lista { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 7px 10px; }

.regla { display: flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--texto-suave); white-space: nowrap; }

/* La marca: un circulo que empieza vacio, se pone verde al cumplirse y rojo si no. */
.regla__marca {
	flex: none; width: 15px; height: 15px; border-radius: 50%;
	border: 1.5px solid var(--borde); position: relative;
}
.regla.es-bien { color: #7fd18d; }
.regla.es-bien .regla__marca { border-color: #4aa858; background: rgba(74, 168, 88, .22); }
.regla.es-bien .regla__marca::after {
	content: ""; position: absolute; left: 4px; top: 1px; width: 4px; height: 8px;
	border: solid #7fd18d; border-width: 0 1.8px 1.8px 0; transform: rotate(42deg);
}
.regla.es-mal .regla__marca { border-color: rgba(192, 57, 43, .55); }

/* El captcha, centrado en el formulario. */
.captcha-centro { display: flex; justify-content: center; margin: 4px 0 14px; }
.captcha-centro .cf-turnstile { display: inline-block; }

/* Pantalla de "ya esta, ahora mira el correo". Ocupa el panel entero porque en ese momento no hay
   nada mas que hacer. */
.remate { text-align: center; padding: 18px 10px 10px; }

.remate__icono {
	display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 16px;
	border-radius: 50%; color: var(--oro-claro);
	background: rgba(201, 166, 89, .12); border: 1px solid rgba(201, 166, 89, .35);
}
.remate__icono svg { width: 30px; height: 30px; }

.remate__titulo { margin: 0 0 10px; font-size: 1.15rem; color: var(--texto); }
.remate__texto { margin: 0 auto 10px; max-width: 46ch; color: var(--texto); font-size: .95rem; line-height: 1.55; }
.remate__nota { margin: 0 auto; max-width: 46ch; color: var(--texto-suave); font-size: .85rem; }

/* ------------------------------------------------------------------------------------------- encuesta */
/* El boton vive pegado a la esquina de la ventana y por encima de todo, pero por debajo de los
   avisos flotantes (60), que son mas urgentes. */
.encuesta-flota {
	position: fixed; left: 20px; bottom: 20px; z-index: 55;
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
}

.encuesta-boton {
	position: relative; width: 58px; height: 58px; border-radius: 50%;
	display: grid; place-items: center; flex: none;
	background: linear-gradient(180deg, #2a1f19, #1a1310);
	border: 1px solid var(--oro-oscuro); color: var(--oro-claro);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
	transition: transform .18s, border-color .18s;
}
.encuesta-boton:hover {
	transform: translateY(-2px) scale(1.04); border-color: var(--oro-claro); text-decoration: none;
}
.encuesta-boton svg { width: 27px; height: 27px; }

/* El globito rojo del numero. Late un poco para que se vea, pero solo tres veces: un parpadeo
   eterno en una esquina acaba cansando. */
.encuesta-boton__aviso {
	position: absolute; top: -3px; right: -3px;
	min-width: 21px; height: 21px; padding: 0 5px; border-radius: 11px;
	display: grid; place-items: center;
	background: #c0392b; color: #fff; font-size: .72rem; font-weight: 700;
	border: 2px solid #1a1310;
	animation: enc-late 1.6s ease-out 3;
}
@keyframes enc-late {
	0%, 100% { transform: scale(1); }
	12% { transform: scale(1.22); }
	24% { transform: scale(1); }
}

/* El globo de aviso. */
.encuesta-globo {
	position: relative; width: min(320px, calc(100vw - 40px));
	background: linear-gradient(180deg, rgba(32, 24, 20, .98), rgba(20, 15, 13, .98));
	border: 1px solid var(--borde); border-radius: 14px; padding: 16px 16px 15px;
	box-shadow: 0 16px 38px rgba(0, 0, 0, .6);
	animation: enc-entra .26s cubic-bezier(.2, .9, .3, 1.25);
}
@keyframes enc-entra { from { opacity: 0; transform: translateY(12px) scale(.97); } }

.encuesta-globo__cerrar {
	position: absolute; top: 9px; right: 9px; width: 28px; height: 28px; border-radius: 50%;
	display: grid; place-items: center; cursor: pointer;
	background: rgba(0, 0, 0, .35); border: 1px solid var(--borde);
	color: var(--texto-suave); font-size: 1.15rem; line-height: 1;
}
.encuesta-globo__cerrar:hover { color: var(--oro-claro); border-color: var(--oro-oscuro); }

.encuesta-globo__etiqueta {
	margin: 0 0 5px; font-size: .8rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--oro-claro);
}
.encuesta-globo__titulo { margin: 0 0 6px; font-size: 1.05rem; font-weight: 700; color: var(--texto); }
.encuesta-globo__texto { margin: 0 0 13px; font-size: .8rem; color: var(--texto-suave); line-height: 1.5; }

.encuesta-globo__boton {
	display: block; text-align: center; padding: 10px; border-radius: 9px;
	font-size: .88rem; font-weight: 700;
	background: linear-gradient(180deg, var(--oro-claro), var(--oro-oscuro));
	color: #241a10; border: 1px solid var(--oro-claro);
}
.encuesta-globo__boton:hover { filter: brightness(1.08); text-decoration: none; }

@media (max-width: 640px) {
	.encuesta-flota { left: 14px; bottom: 14px; }
	.encuesta-boton { width: 52px; height: 52px; }
}

/* --------------------------------------------------------- el formulario de la encuesta */
.enc-cabeza { margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--borde); }
.enc-cabeza__etiqueta {
	margin: 0 0 5px; font-size: .84rem; font-weight: 700; letter-spacing: .08em;
	text-transform: uppercase; color: var(--oro-claro);
}
.enc-cabeza__titulo { margin: 0 0 6px; font-size: 1.5rem; color: var(--texto); }
.enc-cabeza__texto { margin: 0; color: var(--texto-suave); font-size: .86rem; }

.enc-pregunta {
	background: rgba(20, 15, 12, .5); border: 1px solid var(--borde); border-radius: 12px;
	padding: 14px 15px 15px; margin: 0 0 12px;
}
.enc-pregunta__texto { padding: 0; margin: 0 0 12px; font-size: .95rem; font-weight: 600; color: var(--texto); }
.enc-pregunta__ob { color: #c0392b; margin-left: 4px; }

/* Opciones: radios de verdad, escondidos, y la etiqueta hace de boton. Asi funciona sin
   JavaScript y el teclado sigue sirviendo. */
.enc-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 9px; }
.enc-opcion__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.enc-opcion {
	display: block; text-align: center; cursor: pointer;
	padding: 12px 10px; border-radius: 9px; font-size: .9rem;
	background: rgba(36, 26, 22, .55); border: 1px solid var(--borde); color: var(--texto);
	transition: border-color .15s, background .15s;
}
.enc-opcion:hover { border-color: var(--oro-oscuro); }
.enc-opcion__radio:checked + .enc-opcion {
	background: rgba(201, 166, 89, .16); border-color: var(--oro-claro); color: var(--oro-claro); font-weight: 600;
}
.enc-opcion__radio:focus-visible + .enc-opcion { outline: 2px solid var(--oro-claro); outline-offset: 2px; }

/* Estrellas: van del 5 al 1 en el HTML para poder pintar "esta y las de su izquierda" con el
   selector de hermanos, que solo mira hacia delante. */
.estrellas { display: flex; flex-direction: row-reverse; justify-content: center; gap: 6px; }
.estrellas__radio { position: absolute; opacity: 0; width: 0; height: 0; }
.estrellas__estrella { cursor: pointer; color: #4a3a2c; transition: color .12s, transform .12s; }
.estrellas__estrella svg { width: 30px; height: 30px; fill: currentColor; display: block; }
.estrellas__estrella:hover { transform: scale(1.12); }

.estrellas__radio:checked ~ .estrellas__estrella,
.estrellas__estrella:hover,
.estrellas__estrella:hover ~ .estrellas__estrella { color: var(--oro-claro); }
.estrellas__radio:focus-visible + .estrellas__estrella { outline: 2px solid var(--oro-claro); outline-offset: 3px; }

/* El recuadro de texto libre: todo el ancho de su tarjeta y el doble de alto. A partir de ahi,
   quien escriba puede estirarlo hacia abajo tanto como quiera (resize: vertical).
   box-sizing: border-box para que el 100% cuente el relleno y el borde, y no se salga. */
.enc-texto {
	display: block; width: 100%; box-sizing: border-box;
	min-height: 220px; resize: vertical; font-family: inherit; line-height: 1.5;
}

/* El codigo de promocion: grande, legible y de una pieza, que se va a leer en voz alta y a
   teclear en otro sitio. */
.codigo-caja {
	display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
	background: rgba(201, 166, 89, .1); border: 1px solid rgba(201, 166, 89, .3);
	border-radius: 10px; padding: 12px 14px; margin: 12px 0;
}
.codigo-caja__valor {
	flex: 1; min-width: 0;
	font-size: 1.25rem; font-weight: 700; letter-spacing: .06em; color: var(--oro-claro);
	word-break: break-all;
}
.panel__texto--nota { color: var(--texto-suave); font-size: .85rem; margin-top: 12px; }

/* ------------------------------------------------------------------------------------------- panel de usuario */
.pu-bienvenida {
	display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
	background: rgba(20, 15, 12, .5); border: 1px solid var(--borde); border-radius: 12px;
	padding: 16px 18px; margin-bottom: 14px;
}
.pu-bienvenida__titulo { margin: 0 0 4px; font-size: 1.3rem; color: var(--texto); }
.pu-bienvenida__sub { margin: 0; color: var(--texto-suave); font-size: .88rem; }

.pu-monedas {
	display: flex; align-items: center; gap: 10px; flex: none;
	background: rgba(201, 166, 89, .12); border: 1px solid rgba(201, 166, 89, .35);
	border-radius: 30px; padding: 7px 16px 7px 8px;
}
.pu-monedas__valor { font-size: 1.15rem; font-weight: 700; color: var(--oro-claro); }

/* Pestanas: enlaces de verdad (?t=), no JavaScript. */
.pu-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.pu-tab {
	display: flex; align-items: center; gap: 8px;
	padding: 9px 14px; border-radius: 9px; font-size: .88rem; font-weight: 600;
	background: rgba(36, 26, 22, .55); border: 1px solid var(--borde); color: var(--texto-suave);
}
.pu-tab svg { width: 16px; height: 16px; }
.pu-tab:hover { border-color: var(--oro-oscuro); color: var(--texto); text-decoration: none; }
.pu-tab.es-activa {
	background: rgba(201, 166, 89, .14); border-color: var(--oro-claro); color: var(--oro-claro);
}

.pu-titulo { margin: 0 0 12px; font-size: 1.05rem; color: var(--texto); }
/* Los ajustes van debajo del resumen, en la misma pestana: un filete para que se vea donde
   empieza una cosa y acaba la otra. */
.pu-titulo--sep { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--borde); }

.pu-dato {
	background: rgba(36, 26, 22, .5); border: 1px solid var(--borde); border-radius: 10px;
	padding: 12px 14px; margin-bottom: 10px;
}
.pu-dato--fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.pu-dato--mitades { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; }
.pu-dato__nombre {
	display: block; font-size: .7rem; font-weight: 700; letter-spacing: .09em;
	text-transform: uppercase; color: var(--texto-suave); margin-bottom: 3px;
}
.pu-dato__valor { font-size: 1rem; font-weight: 600; color: var(--texto); word-break: break-all; }

/* Las dos cajas de seguridad, una al lado de otra mientras quepan. */
/* Las cajas de ajustes, una debajo de otra y a todo lo ancho: son formularios, y un formulario a
   media columna obliga a escribir en una rendija. */
.pu-rejilla { display: flex; flex-direction: column; gap: 12px; }

/*
 * Dentro de cada caja los campos van de dos en dos mientras quepan.
 *
 * El gap es de fila Y de columna: con gap solo horizontal, los campos de la segunda fila se subian
 * encima de los de la primera y el boton acababa pisando el texto. Y todo lo que NO sea un campo
 * (la nota de ayuda, el boton) ocupa la fila entera, que si no se cuela en un hueco de media
 * columna.
 */
.pu-caja .formulario {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px; align-items: start;
}
.pu-caja .formulario > *:not(.campo) { grid-column: 1 / -1; }
.pu-caja .formulario .campo { margin: 0; }
.pu-caja {
	background: rgba(20, 15, 12, .5); border: 1px solid var(--borde); border-radius: 12px;
	padding: 15px 16px 16px;
}
.pu-caja__titulo { display: flex; align-items: center; gap: 9px; margin: 0 0 12px; font-size: .98rem; color: var(--texto); }
.pu-caja__titulo .panel__icono { width: 24px; height: 24px; }
.pu-caja__titulo .panel__icono svg { width: 14px; height: 14px; }
.pu-caja__nota { margin: -4px 0 12px; font-size: .84rem; color: var(--texto-suave); line-height: 1.5; }
.pu-caja__actual {
	margin: -4px 0 10px; font-size: .86rem; color: var(--texto-suave);
	background: rgba(36, 26, 22, .5); border: 1px solid var(--borde); border-radius: 8px; padding: 9px 11px;
}
.pu-caja__actual strong { color: var(--texto); word-break: break-all; }

/* --------------------------------------------------------- tarjetas de personaje */
.pu-cabeza-lista {
	display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
	flex-wrap: wrap; margin-bottom: 14px;
}
.pu-sub { margin: 0; color: var(--texto-suave); font-size: .86rem; }
.pu-cuenta {
	flex: none; font-size: .78rem; font-weight: 600; color: var(--oro-claro);
	background: rgba(201, 166, 89, .12); border: 1px solid rgba(201, 166, 89, .3);
	border-radius: 20px; padding: 5px 13px;
}

/* Tarjetas de ancho FIJO: con auto-fit se estiraban hasta ocupar media pantalla cuando habia
   pocos personajes, y una ficha de cuatro datos no necesita tanto sitio. */
.pjs {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 330px));
	justify-content: start; gap: 12px;
}

.pj {
	background: rgba(36, 26, 22, .5); border: 1px solid var(--borde); border-radius: 12px;
	padding: 14px 15px 15px;
}
/* Nivel, cara y nombre en la misma linea. El nombre se queda con el sitio que sobre y, si es muy
   largo, se parte en vez de empujar a los otros dos fuera de la tarjeta. */
.pj__alto {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 13px; padding-bottom: 11px; border-bottom: 1px solid var(--borde);
}
.pj__nivel {
	flex: none; font-size: .72rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
	color: var(--oro-claro);
	background: rgba(201, 166, 89, .12); border: 1px solid rgba(201, 166, 89, .28);
	border-radius: 20px; padding: 4px 10px;
}
/* La cara cierra la linea, pegada a la derecha. */
.pj__alto .cara { width: 30px; height: 30px; flex: none; margin-left: auto; }

.pj__nombre { margin: 0; font-size: 1.15rem; color: var(--texto); word-break: break-word; min-width: 0; }

/*
 * Los datos, cada uno en su propia pastilla y centrado dentro de ella.
 *
 * Antes iban sueltos, uno detras de otro, y con siete datos la ficha parecia un parrafo apretado:
 * no se sabia donde acababa un dato y empezaba el siguiente. Con su recuadro, se leen de un
 * vistazo.
 */
.pj__datos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 0 0 4px; }
.pj__dato--ancho { grid-column: 1 / -1; }

.pj__dato {
	background: rgba(20, 15, 12, .45); border: 1px solid var(--borde); border-radius: 9px;
	padding: 9px 10px; text-align: center; min-width: 0;
}
.pj__dato dt {
	font-size: .64rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
	color: var(--texto-suave); margin-bottom: 4px;
}
.pj__dato dd {
	margin: 0; font-size: .9rem; font-weight: 600; color: var(--texto);
	word-break: break-word; line-height: 1.35;
}
.pj__dato dd.vacia { color: var(--texto-suave); font-weight: 400; }
.pj__pct { color: var(--oro-claro); font-weight: 700; margin-left: 4px; }

/* El dialogo del teletransporte: un <details>, sin JavaScript. */
.warp { margin-top: 12px; }
.warp__boton {
	display: block; text-align: center; cursor: pointer; list-style: none;
	padding: 10px; border-radius: 9px; font-size: .86rem; font-weight: 600;
	background: rgba(140, 47, 40, .18); border: 1px solid rgba(160, 60, 50, .55); color: #e8a79f;
}
.warp__boton::-webkit-details-marker { display: none; }
.warp__boton:hover { background: rgba(160, 60, 50, .28); color: #fff; }

.warp__caja {
	margin-top: 10px; padding: 13px;
	background: rgba(20, 15, 12, .6); border: 1px solid var(--borde); border-radius: 10px;
}
.warp__aviso {
	margin: 0 0 10px; font-size: .84rem; color: var(--texto); line-height: 1.55;
	border-left: 3px solid #c0392b; padding-left: 11px;
}
.warp__nota { margin: 0 0 10px; font-size: .82rem; color: var(--texto-suave); }
.warp__nota--mal { color: #e8776a; }

/*
 * El contenido del panel de usuario, en una caja que se desliza.
 *
 * Sin esto el panel crecia hacia abajo y dejaba la columna de la izquierda muy por encima; el
 * limite esta puesto para que acabe mas o menos donde acaba la clasificacion. Si el contenido cabe,
 * no aparece ninguna barra.
 */
/*
 * El panel se estira hasta donde llega la columna de la izquierda, y SOLO entonces aparece la
 * barra. Antes habia un alto fijo de 760 y la barra salia aunque quedara sitio de sobra.
 *
 * Como funciona: la rejilla estira sus columnas a la misma altura (lo hace de serie), asi que el
 * panel puede ocupar toda la de su fila. El truco esta en los min-height: 0, porque un elemento
 * flexible no se encoge por debajo de su contenido salvo que se le diga, y sin eso el panel
 * crecia y la barra no aparecia nunca.
 */
.inicio__principal--alto { min-height: 0; }
.inicio__principal--alto > .panel {
	flex: 1 1 auto; min-height: 0;
	display: flex; flex-direction: column;
}
.pu-zona {
	flex: 1 1 auto; min-height: 0; overflow-y: auto;
	padding-right: 4px;   /* que la barra no se coma el borde de las tarjetas */
}

/* Misma barra dorada y sin flechas que la tabla de la clasificacion. Lo estandar
   (scrollbar-color) se reserva a quien no entiende ::-webkit-scrollbar, o los navegadores de
   Chrome pintan la suya con botones y se saltan todo lo demas. */
@supports not selector(::-webkit-scrollbar) {
	.pu-zona { scrollbar-width: thin; scrollbar-color: var(--oro-oscuro) rgba(28, 21, 18, .6); }
}
.pu-zona::-webkit-scrollbar { width: 10px; }
.pu-zona::-webkit-scrollbar-button,
.pu-zona::-webkit-scrollbar-corner { display: none; height: 0; width: 0; background: transparent; }
.pu-zona::-webkit-scrollbar-track { background: rgba(28, 21, 18, .6); border-radius: 6px; }
.pu-zona::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, var(--oro-oscuro), #6b4f26);
	border-radius: 6px; border: 2px solid rgba(28, 21, 18, .9);
}
.pu-zona::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, var(--oro-claro), var(--oro-oscuro)); }

/* Tiempo de juego: dias, horas y minutos, cada uno con su palabra y su hueco. */
.pj__tiempo { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 14px; }
.pj__tiempo span { font-weight: 400; color: var(--texto-suave); font-size: .82rem; }
.pj__tiempo strong { color: var(--texto); font-size: .95rem; }

/* --------------------------------------------------------- canje de codigos de promocion */
.promo-form { max-width: 420px; margin: 12px auto 0; }

/* El codigo, grande y espaciado: se dicta en voz alta y se teclea a mano. */
.promo-campo {
	width: 100%; box-sizing: border-box; text-align: center;
	font-size: 1.15rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
	margin-bottom: 12px;
}
.promo-campo::placeholder { letter-spacing: .06em; font-weight: 400; text-transform: none; }

.promo-premios { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.promo-premios li {
	display: flex; align-items: center; gap: 10px;
	background: rgba(36, 26, 22, .55); border: 1px solid var(--borde); border-radius: 9px;
	padding: 9px 12px; font-size: .9rem;
}
.promo-premios__cant {
	flex: none; font-weight: 700; color: var(--oro-claro);
	background: rgba(201, 166, 89, .12); border-radius: 20px; padding: 2px 10px; font-size: .82rem;
}

/* ------------------------------------------------------------------------------------------- soporte */
/* Personaje e idioma comparten linea mientras quepan. */
.sop-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }

.sop-area { min-height: 170px; resize: vertical; }

/* Los adjuntos: uno debajo de otro, y el boton anade el siguiente. */
.sop-adjuntos { display: grid; gap: 8px; }
.sop-mas { margin-top: 9px; align-self: start; }

.sop-botones { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; margin-top: 6px; }

/* Los desplegables, con el mismo aspecto que los campos de texto: el navegador les pone su propio
   estilo si no se le dice lo contrario. */
select.campo__control {
	appearance: none; cursor: pointer; padding-right: 36px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a659' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 12px center; background-size: 15px;
}
select.campo__control option { background: #1a1310; color: var(--texto); }

/* ------------------------------------------------------------------------------------- donadores */
.obj-bloque { margin-top: 22px; }
.obj-bloque__titulo {
	margin: 0 0 10px; font-size: 1.02rem; letter-spacing: .04em; color: var(--oro-claro);
	text-align: center; text-transform: none;
}
.obj-bloque__vacia { text-align: center; }

/* Las tablas del donador son de columnas cortas: estrechas, centradas y con todo el contenido
   centrado. A ancho completo las cifras quedaban en la otra punta de la pantalla.
   El fondo va en .tabla-caja, asi que se estrecha ahi: si solo se estrechara la tabla, quedaria
   una caja ancha con una tabla pequena flotando en medio. */
.obj-bloque .tabla-caja { max-width: 460px; margin-left: auto; margin-right: auto; }

/* Las tres reglas llevan la clase de la tabla para ganarle a .tabla .der y .tabla .nombre, que
   alinean a derecha y centro por su cuenta. */
.tabla--donador th,
.tabla--donador td,
.tabla--donador .der { text-align: center; }
.tabla--donador .puesto { vertical-align: middle; }

/* Titulo de cada tabla de recompensas, del color de su puesto. */
.obj-bloque__titulo--1 { color: #f2d27a; }
.obj-bloque__titulo--2 { color: #cfd3d8; }
.obj-bloque__titulo--3 { color: #d09a6a; }

/* Caja con fondo pero SIN recortar: la usan las tablas de recompensas, donde lo que se sale por
   arriba es la descripcion del objeto. */
.tabla-caja--libre { overflow: visible; max-height: none; }

/* Sin el recorte de la caja, la cabecera asomaba por encima del fondo con las esquinas en pico:
   las redondea ella misma. Y aqui no hace falta que se quede fija arriba, que no hay que deslizar. */
.tabla-caja--libre .tabla thead th { position: static; }
.tabla-caja--libre .tabla thead th:first-child { border-top-left-radius: var(--radio); }
.tabla-caja--libre .tabla thead th:last-child { border-top-right-radius: var(--radio); }

/* La ultima fila redondea sus esquinas de abajo por el mismo motivo: sin el recorte de la caja,
   el resaltado del raton es un rectangulo y asomaba por fuera del fondo. */
.tabla-caja--libre .tabla tbody tr:last-child td:first-child { border-bottom-left-radius: var(--radio); }
.tabla-caja--libre .tabla tbody tr:last-child td:last-child { border-bottom-right-radius: var(--radio); }

/* Recompensas: el icono a la izquierda, el nombre en medio y la cantidad a la derecha.
   Los anchos son fijos para que el nombre EMPIECE siempre en el mismo sitio: con el texto
   centrado, dos objetos de nombre distinto arrancaban cada uno en un punto y bailaban. */
/* Estas llevan nombres largos ("Caja del Tesoro Plateada"), asi que se les da algo mas de sitio
   que a las listas del top y el nombre no se parte en dos lineas. */
.obj-bloque .tabla-caja--objetos { max-width: 520px; }
.tabla--objetos td.nombre { white-space: nowrap; }

/* En pantallas estrechas .tabla tiene min-width: 560px para poder deslizarla en horizontal. Estas
   son de columnas cortas y caben: sin esto se salian de su caja por la derecha. */
.tabla--donador,
.tabla--objetos { min-width: 0; }
.tabla--objetos td.obj-celda-icono { width: 58px; padding: 8px 0 8px 14px; }
/* El mismo hueco por la izquierda en las dos, que asi el titulo cae justo encima del nombre. */
.tabla--objetos td.nombre,
.tabla--objetos th.nombre-cab { text-align: left; padding-left: 10px; }
.tabla--objetos .der { text-align: right; width: 104px; }

/* Las cabeceras de estas tablas van con menos espaciado y menos hueco a los lados: "CANTIDAD" y
   "MONEDAS DRAGON" son largas y en una columna estrecha se salian por el borde. */
.tabla--donador th,
.tabla--objetos th { padding-left: 10px; padding-right: 12px; letter-spacing: .04em; }

/* El icono del objeto, con su descripcion al pasar el raton (o al llegar con el tabulador). */
.obj-icono { position: relative; display: inline-block; }
.obj-icono__marco {
	width: 40px; height: 40px; display: grid; place-items: center;
	border: 1px solid rgba(201, 166, 89, .35); border-radius: 6px; background: rgba(20, 15, 12, .55);
}
.obj-icono__marco img { max-width: 32px; max-height: 32px; }

.obj-tip {
	position: absolute; left: 50%; bottom: calc(100% + 9px); transform: translateX(-50%);
	z-index: 40; width: max-content; max-width: 280px; display: grid; gap: 5px;
	padding: 10px 12px; text-align: left;
	background: rgba(16, 12, 10, .97); border: 1px solid var(--oro-oscuro); border-radius: 8px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
	opacity: 0; visibility: hidden; transition: opacity .13s ease;
}
/* El pico de abajo, para que se vea de que icono cuelga. */
.obj-tip::after {
	content: ''; position: absolute; top: 100%; left: 50%; margin-left: -6px;
	border: 6px solid transparent; border-top-color: var(--oro-oscuro);
}
.obj-icono:hover .obj-tip,
.obj-icono:focus-visible .obj-tip { opacity: 1; visibility: visible; }

.obj-tip__nombre { color: var(--oro-claro); font-weight: 700; font-size: .88rem; }
.obj-tip__desc { color: var(--texto-suave); font-size: .82rem; line-height: 1.4; }

/* El texto informativo: parrafos cortos, el primero en cursiva porque es el que da el tono. */
.don-info { display: grid; gap: 9px; margin-bottom: 4px; }
.don-info p { margin: 0; color: var(--texto-suave); font-size: .88rem; line-height: 1.55; }
.don-info__gracias { font-style: italic; color: var(--texto) !important; }

.don-tuyo { margin-top: 24px; border-top: 1px solid rgba(201, 166, 89, .22); padding-top: 16px; }
.don-tuyo__total { margin: 0 0 12px; text-align: center; color: var(--oro-claro); font-weight: 700; }

.don-anon { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* Interruptor: una casilla de siempre, vestida. Sin JavaScript, para que funcione igual sin el. */
.interruptor { display: flex; align-items: center; gap: 12px; cursor: pointer; flex: 1 1 320px; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor__palanca {
	flex: 0 0 auto; width: 44px; height: 24px; border-radius: 12px; position: relative;
	background: rgba(70, 52, 42, .9); border: 1px solid rgba(201, 166, 89, .3);
	transition: background .18s ease;
}
.interruptor__palanca::after {
	content: ''; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%;
	background: var(--texto-suave); transition: transform .18s ease, background .18s ease;
}
.interruptor input:checked + .interruptor__palanca { background: rgba(201, 166, 89, .45); }
.interruptor input:checked + .interruptor__palanca::after {
	transform: translateX(20px); background: var(--oro-claro);
}
.interruptor input:focus-visible + .interruptor__palanca { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
.interruptor__texto { display: grid; gap: 2px; }
.interruptor__texto small { color: var(--texto-suave); font-size: .82rem; line-height: 1.35; }

/* Cabecera de las secciones del centro (promocion, soporte, top donador, recarga).
   El titulo se centra respecto al PANEL, no respecto al hueco que deja el boton de cerrar: el
   boton sale del flujo y el titulo reserva su sitio a los DOS lados, asi que el centro es el
   centro de verdad. El sello lo compensa el ::after de .panel__titulo--centrado. */
.panel__cabecera--seccion { position: relative; justify-content: center; }
.panel__cabecera--seccion .panel__titulo { flex: 1; }
/* El sello se queda donde estaba, pegado al borde. El hueco para que el texto no llegue a
   tocar la X va en el TEXTO y a los dos lados, asi que el centro no se mueve. */
.panel__cabecera--seccion .titulo__texto { padding: 0 34px; }
.panel__cabecera--seccion .boton-mini {
	position: absolute; right: 0; top: 50%; transform: translateY(-50%);
}

/* --------------------------------------------------------------------------------------- recarga */
.rec-aviso { margin-bottom: 18px; }

/* El bloque del codigo de socio, con su cinta arriba a la derecha. */
.rec-socio {
	position: relative; margin-bottom: 26px; padding: 16px 18px 14px;
	border: 1px solid rgba(192, 57, 43, .55); border-radius: var(--radio);
	background: rgba(40, 22, 18, .55);
}
.rec-socio--puesto { border-color: rgba(201, 166, 89, .45); }

.rec-socio__cinta {
	position: absolute; top: -12px; right: 14px; padding: 5px 12px; border-radius: 6px;
	background: linear-gradient(180deg, #c0392b, #96291d); color: #fff;
	font-size: .72rem; font-weight: 700; letter-spacing: .04em;
}

.rec-socio__cabecera { display: flex; align-items: flex-start; gap: 12px; }
.rec-socio__icono {
	flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 8px;
	background: rgba(192, 57, 43, .22); color: #e07a6a;
}
.rec-socio__icono svg { width: 21px; height: 21px; }
.rec-socio__titulo { margin: 0; font-size: 1.02rem; display: flex; align-items: center; gap: 7px; }
.rec-socio__texto { margin: 2px 0 0; color: var(--texto-suave); font-size: .84rem; }

.rec-socio__fila { display: flex; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.rec-socio__fila .campo__control { flex: 1 1 240px; }

.rec-socio__no {
	display: flex; align-items: center; gap: 8px; margin-top: 11px;
	color: var(--texto-suave); font-size: .84rem;
}
.rec-socio__tuyo { margin: 12px 0 0; color: var(--oro-claro); font-weight: 600; }

/* La (?) de ayuda: reutiliza el globo de los objetos, que ya sabe colocarse y esconderse. */
.rec-ayuda { vertical-align: middle; }
.rec-ayuda__marca {
	display: grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
	background: rgba(201, 166, 89, .25); color: var(--oro-claro);
	font-size: .7rem; font-weight: 800; cursor: help;
}

/* Cada paso, con su numero en un circulo. */
.rec-paso { margin-top: 26px; }
.rec-paso__titulo {
	display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 1.05rem;
}
.rec-paso__numero {
	flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%;
	background: linear-gradient(180deg, #c0392b, #8e2a1e); color: #fff;
	font-size: .8rem; font-weight: 800;
}

/* Los cuatro niveles de la racha. */
.rec-niveles { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
.rec-nivel {
	display: grid; justify-items: center; gap: 4px; padding: 14px 10px;
	border: 1px solid var(--borde); border-radius: var(--radio); background: rgba(28, 21, 18, .7);
}
.rec-nivel--logrado { border-color: var(--oro-oscuro); background: rgba(201, 166, 89, .09); }
.rec-nivel__numero {
	width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%;
	border: 1px solid var(--borde); color: var(--texto-suave); font-size: .72rem; font-weight: 700;
}
.rec-nivel--logrado .rec-nivel__numero { border-color: var(--oro-oscuro); color: var(--oro-claro); }
.rec-nivel__bono { font-size: 1.5rem; font-weight: 800; color: var(--texto); }
.rec-nivel--logrado .rec-nivel__bono { color: var(--oro-claro); }
.rec-nivel__desde { color: var(--texto-suave); font-size: .78rem; }

/* La barra de lo que llevas. */
.rec-barra {
	margin-top: 14px; padding: 13px 16px 15px;
	border: 1px solid rgba(201, 166, 89, .3); border-radius: var(--radio);
	background: rgba(201, 166, 89, .06);
}
.rec-barra__cabecera {
	display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
	font-size: .85rem; color: var(--texto-suave);
}
.rec-barra__cabecera strong { color: var(--oro-claro); }
.rec-barra__proximo { color: var(--oro-claro); font-weight: 700; letter-spacing: .03em; }

.rec-barra__riel {
	height: 8px; margin: 10px 0; border-radius: 4px; overflow: hidden;
	background: rgba(12, 9, 8, .8);
}
.rec-barra__relleno {
	height: 100%; border-radius: 4px;
	background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro));
}
.rec-barra__pie { margin: 0; text-align: center; font-size: .85rem; color: var(--texto-suave); }
.rec-barra__pie strong { color: var(--oro-claro); }

/* Los paquetes. */
.rec-paquetes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.rec-paquete {
	position: relative; display: grid; justify-items: center; gap: 3px; padding: 16px 12px 13px;
	border: 1px solid var(--borde); border-radius: var(--radio); background: rgba(28, 21, 18, .7);
	color: inherit; font: inherit; text-align: center; cursor: pointer;
	transition: border-color .15s ease, transform .15s ease;
}
.rec-paquete:hover:not(:disabled) { border-color: var(--oro-oscuro); transform: translateY(-2px); }
.rec-paquete:disabled { cursor: not-allowed; opacity: .92; }

.rec-paquete__extra {
	position: absolute; top: -9px; right: -6px; padding: 3px 8px; border-radius: 5px;
	background: #c0392b; color: #fff; font-size: .68rem; font-weight: 800;
}
/* Paquete todavia no disponible: se ensena, pero se ve que no se puede comprar. */
.rec-paquete--cerrado { opacity: .5; border-style: dashed; }
.rec-paquete__cerrado {
	position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
	padding: 3px 9px; border-radius: 5px; white-space: nowrap;
	background: rgba(70, 52, 42, .95); border: 1px solid var(--borde);
	color: var(--texto-suave); font-size: .66rem; font-weight: 700;
}

.rec-paquete__monedas {
	display: flex; align-items: center; gap: 7px;
	font-size: 1.45rem; font-weight: 800; color: var(--oro-claro);
}
.rec-paquete__moneda svg { width: 20px; height: 20px; }
.rec-paquete__precio { font-size: 1rem; font-weight: 700; color: var(--texto); }
.rec-paquete__desglose { color: var(--texto-suave); font-size: .74rem; }

/* Las formas de pago. */
.rec-pagos { display: flex; flex-wrap: wrap; gap: 12px; }
.rec-pago {
	flex: 0 1 190px; display: grid; justify-items: center; gap: 7px; padding: 16px 12px;
	border: 1px solid var(--borde); border-radius: var(--radio); background: rgba(28, 21, 18, .7);
	color: inherit; font: inherit; cursor: pointer;
}
.rec-pago:disabled { cursor: not-allowed; }
.rec-pago { position: relative; }
.rec-pago--cerrado { opacity: .5; border-style: dashed; }

/* Los logotipos vienen como SVG de una sola ruta, asi que se pintan con el color del texto. */
.rec-pago__marca { display: flex; align-items: center; justify-content: center; gap: 9px; height: 28px; }
.rec-pago__marca svg { width: auto; height: 100%; fill: currentColor; }
.rec-pago__marca--paypal { color: #009cde; }
.rec-pago__marca--paypal svg { height: 24px; }
.rec-pago__marca--tarjeta { color: var(--texto); }
.rec-pago__marca--tarjeta svg { height: 17px; }
.rec-pago__marca--cripto { color: #f7931a; }
.rec-pago__marca--cripto svg { height: 25px; }

.rec-pago__nombre { color: var(--texto-suave); font-size: .84rem; }

.rec-pie { text-align: center; margin-top: 12px; }

/* ------------------------------------------------------------------------- panel de administracion */
/* La clave del segundo factor: se lee en voz alta y se teclea, asi que va grande y espaciada. */
.adm-totp {
	margin: 18px 0; padding: 16px; text-align: center;
	border: 1px solid rgba(201, 166, 89, .35); border-radius: var(--radio);
	background: rgba(201, 166, 89, .06);
}
.adm-totp__titulo { margin: 0 0 10px; font-weight: 600; }
.adm-totp__secreto {
	display: block; margin: 0 auto 10px; padding: 10px 14px; max-width: 420px;
	border-radius: 8px; background: rgba(12, 9, 8, .7);
	color: var(--oro-claro); font-size: 1.1rem; letter-spacing: .12em; word-break: break-all;
}

/* Los modulos del panel, con lo que ya esta y lo que falta. */
.adm-modulos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin: 20px 0; }
.adm-modulo {
	display: flex; align-items: center; justify-content: space-between; gap: 10px;
	padding: 13px 15px; border: 1px solid var(--borde); border-radius: var(--radio);
	background: rgba(28, 21, 18, .7);
}
.adm-modulo--pronto { opacity: .55; border-style: dashed; }
.adm-modulo__nombre { font-weight: 600; color: var(--texto); }
.adm-modulo__estado { font-size: .74rem; color: var(--texto-suave); }
.adm-modulo:not(.adm-modulo--pronto) .adm-modulo__estado { color: var(--oro-claro); }

/* El registro: mucha fila y poca altura, que se lee en diagonal. */
.tabla--auditoria { font-size: .84rem; }
.tabla--auditoria td { padding: 8px 12px; }
.tabla--auditoria code { color: var(--oro-claro); font-size: .82rem; }
.tabla--auditoria small { display: block; color: var(--texto-suave); }
.adm-fecha { white-space: nowrap; color: var(--texto-suave); }
.adm-mal { color: #e8776a; font-weight: 600; }

.adm-salir { margin-top: 20px; text-align: center; }

/* --------------------------------------------------------------------------- panel: modulo de soporte */
.adm-modulo { text-decoration: none; }
a.adm-modulo:hover { border-color: var(--oro-oscuro); }
.adm-modulo--activo { border-color: var(--oro-oscuro); background: rgba(201, 166, 89, .1); }

.adm-filtros { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.adm-filtros .campo__control { flex: 1 1 160px; }

.tabla--tickets { font-size: .88rem; }
.tabla--tickets .adm-fila { cursor: pointer; }
.tabla--tickets .nombre { text-align: left; }
.tabla--tickets .nombre a { color: var(--texto); text-decoration: none; font-weight: 600; }
.tabla--tickets .nombre a:hover { color: var(--oro-claro); }
.tabla--tickets small { display: block; color: var(--texto-suave); font-size: .76rem; }

/* El estado, con su color: se distingue de un vistazo sin tener que leer. */
.adm-estado { padding: 3px 9px; border-radius: 99px; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.adm-estado--abierto  { background: rgba(192, 57, 43, .18); color: #e8776a; }
.adm-estado--en_curso { background: rgba(201, 166, 89, .18); color: var(--oro-claro); }
.adm-estado--esperando { background: rgba(120, 120, 130, .2); color: var(--texto-suave); }
.adm-estado--cerrado  { background: rgba(63, 109, 58, .22); color: #8fc48a; }

/* La ficha del ticket. */
.adm-ficha__titulo { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 6px; font-size: 1.1rem; }
.adm-ficha__num { color: var(--oro-claro); font-weight: 800; }
.adm-ficha__datos {
	display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 18px;
	color: var(--texto-suave); font-size: .84rem;
}
.adm-ficha__datos strong { color: var(--texto); }

/* La conversacion. El jugador a la izquierda, el equipo a la derecha. */
.adm-charla { display: grid; gap: 12px; margin-bottom: 22px; }
.adm-msg {
	padding: 12px 14px; border: 1px solid var(--borde); border-radius: var(--radio);
	background: rgba(28, 21, 18, .7); max-width: 85%;
}
.adm-msg--equipo { margin-left: auto; border-color: rgba(201, 166, 89, .35); background: rgba(201, 166, 89, .07); }
.adm-msg--nota { border-style: dashed; background: rgba(120, 120, 130, .08); }
.adm-msg__cabecera { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; font-size: .82rem; }
.adm-msg__fecha { margin-left: auto; color: var(--texto-suave); font-size: .76rem; }
.adm-msg__etiqueta {
	padding: 2px 7px; border-radius: 99px; background: rgba(120, 120, 130, .25);
	color: var(--texto-suave); font-size: .68rem; font-weight: 700;
}
.adm-msg__texto { margin: 0; line-height: 1.55; word-break: break-word; }

/* Los adjuntos: se ensena el dominio y la direccion, pero NO se pinta nada de fuera. */
.adm-msg__enlaces { margin: 10px 0 0; padding-left: 18px; font-size: .82rem; }
.adm-msg__enlaces a { color: var(--oro-claro); }
.adm-msg__enlaces code { display: block; color: var(--texto-suave); font-size: .74rem; word-break: break-all; }

.adm-charla__hito { margin: 0; text-align: center; color: var(--texto-suave); font-size: .78rem; }
.adm-estados { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; }
.boton--mini { padding: 6px 12px; font-size: .78rem; }

/* ----------------------------------------------------------------------- panel: pantalla propia */
/* El panel no comparte la portada: los paneles del jugador (cuenta, clasificacion, conectados,
   eventos) aqui solo quitan sitio a las tablas y a las conversaciones. */
/* El mismo aire por arriba y por abajo que la portada: si no, el panel queda pegado a la barra. */
.adm-vista {
	display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px;
	padding: 56px 0; align-items: start;
}
.adm-centro { min-width: 0; }

.adm-lateral {
	position: sticky; top: 88px; display: grid; gap: 14px; padding: 16px;
	background: rgba(24, 18, 15, .92); border: 1px solid var(--borde); border-radius: var(--radio);
}
.adm-yo { display: grid; gap: 6px; justify-items: start; }
.adm-yo__nombre { color: var(--oro-claro); font-weight: 700; word-break: break-all; }

.adm-menu { display: grid; gap: 4px; }
.adm-menu__item {
	display: flex; align-items: center; justify-content: space-between; gap: 8px;
	padding: 9px 11px; border-radius: 8px; color: var(--texto); text-decoration: none; font-size: .9rem;
}
a.adm-menu__item:hover { background: rgba(201, 166, 89, .09); color: var(--oro-claro); }
.adm-menu__item.es-activa { background: rgba(201, 166, 89, .16); color: var(--oro-claro); font-weight: 600; }
.adm-menu__item--pronto { color: var(--texto-suave); cursor: default; }
.adm-menu__item small { font-size: .68rem; opacity: .8; }

.adm-lateral__salir { margin: 0; }
.adm-lateral__web { color: var(--texto-suave); font-size: .82rem; text-align: center; }
.adm-lateral__web:hover { color: var(--oro-claro); }

@media (max-width: 900px) {
	.adm-vista { grid-template-columns: 1fr; }
	.adm-lateral { position: static; }
}

/* ----------------------------------------------------------------------- panel: promociones */
.adm-paso { margin-bottom: 26px; }
.adm-paso__titulo {
	display: flex; align-items: center; gap: 10px;
	margin: 0 0 14px; padding-bottom: 9px; font-size: 1rem;
	border-bottom: 1px solid var(--borde);
}

/* Titulo con sello: el texto se centra respecto a la SECCION entera, no respecto al hueco que
   deja el sello. El ::after repite el sello en invisible al otro lado para compensarlo, que es
   el mismo truco que en las cabeceras de los paneles del centro. */
.adm-paso__titulo--sello { gap: 9px; font-size: 1.12rem; }		/* el mismo que el titulo del panel */
.adm-paso__titulo--sello .titulo__texto { flex: 1; text-align: center; }
.adm-paso__titulo--sello::after {
	content: "对比";
	visibility: hidden;
	font-size: 1.05rem; font-weight: 700; letter-spacing: .04em;
	flex: none;
}

/* La cantidad va al lado del boton de anadir: es un numero corto. */
.adm-cantidad { width: 68px; display: inline-block; padding: 6px 8px; text-align: center; }
.tabla--objetos form { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.tabla--objetos small { display: block; color: var(--texto-suave); font-size: .74rem; }

/* Los estados de un codigo, con los mismos colores que los del soporte. */
.adm-estado--vivo     { background: rgba(63, 109, 58, .22); color: #8fc48a; }
.adm-estado--apagado  { background: rgba(120, 120, 130, .2); color: var(--texto-suave); }
.adm-estado--pronto   { background: rgba(201, 166, 89, .18); color: var(--oro-claro); }
.adm-estado--caducado { background: rgba(192, 57, 43, .18); color: #e8776a; }
.adm-estado--agotado  { background: rgba(192, 57, 43, .12); color: #c98b82; }

/* ------------------------------------------------------- campos de fecha y numero, a nuestro tono */
/* color-scheme es lo que hace que el CALENDARIO y las flechas que dibuja el navegador salgan
   oscuros. Sin esto aparece el desplegable blanco de Windows en medio de una web negra. */
.campo__control[type="datetime-local"],
.campo__control[type="date"],
.campo__control[type="time"],
.campo__control[type="number"] { color-scheme: dark; font-family: inherit; }

/* El iconito del calendario viene negro: se le da la vuelta para que se vea, y del color del oro. */
.campo__control[type="datetime-local"]::-webkit-calendar-picker-indicator,
.campo__control[type="date"]::-webkit-calendar-picker-indicator,
.campo__control[type="time"]::-webkit-calendar-picker-indicator {
	filter: invert(72%) sepia(35%) saturate(480%) hue-rotate(2deg) brightness(95%);
	cursor: pointer; opacity: .9;
}
.campo__control[type="datetime-local"]::-webkit-calendar-picker-indicator:hover,
.campo__control[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Los trozos de la fecha (dia, mes, hora) al pasar por encima y al escribir. */
.campo__control::-webkit-datetime-edit-fields-wrapper { padding: 0; }
.campo__control::-webkit-datetime-edit-text { color: var(--texto-suave); padding: 0 2px; }
.campo__control::-webkit-datetime-edit-day-field:focus,
.campo__control::-webkit-datetime-edit-month-field:focus,
.campo__control::-webkit-datetime-edit-year-field:focus,
.campo__control::-webkit-datetime-edit-hour-field:focus,
.campo__control::-webkit-datetime-edit-minute-field:focus {
	background: rgba(201, 166, 89, .25); color: var(--texto); border-radius: 3px; outline: none;
}

/* --------------------------------------------------------------- panel: el recuadro de "como va" */
/* Las explicaciones, juntas y arriba, en vez de colgando de cada campo: se leen una vez y ya. */
.adm-ayuda {
	margin-bottom: 22px; padding: 14px 16px;
	border: 1px solid var(--borde); border-radius: var(--radio);
	background: rgba(20, 15, 12, .5);
}
.adm-ayuda__titulo {
	margin: 0 0 10px; padding-bottom: 9px; border-bottom: 1px solid var(--borde);
	color: var(--oro-claro); font-weight: 700; font-size: .92rem;
}
.adm-ayuda__lista { margin: 0; padding-left: 18px; display: grid; gap: 6px; }
.adm-ayuda__lista li { color: var(--texto-suave); font-size: .84rem; line-height: 1.5; }

/* ------------------------------------------------ panel: el buscador de objetos y sus casillas */
/* El icono, centrado en su casilla: es una rejilla de una sola celda. */
.obj-celda-icono .obj-icono { display: block; }
.obj-celda-icono .obj-icono__marco { margin: 0 auto; }

/* Sin cabecera, el resaltado del raton asomaba por las esquinas de arriba del fondo. */
.tabla-caja--libre .tabla tbody tr:first-child td:first-child { border-top-left-radius: var(--radio); }
.tabla-caja--libre .tabla tbody tr:first-child td:last-child { border-top-right-radius: var(--radio); }
.tabla-caja--libre .tabla thead + tbody tr:first-child td:first-child,
.tabla-caja--libre .tabla thead + tbody tr:first-child td:last-child { border-radius: 0; }

/* Las flechitas de los campos numericos: fuera. En un numero que se escribe una vez no sirven de
   nada, y encima cada navegador las dibuja a su manera. */
.campo__control[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.campo__control[type="number"]::-webkit-outer-spin-button,
.campo__control[type="number"]::-webkit-inner-spin-button { appearance: none; margin: 0; }

/* ------------------------------------------ panel: la casilla de info de cada codigo */
/* Las columnas: el codigo a la izquierda, porque es lo que se lee, y el resto centradas. La
   cabecera y la celda van SIEMPRE igual; antes la cabecera iba centrada y el dato no, y por eso
   parecia que la tabla bailaba. */
.tabla--promo th,
.tabla--promo td { text-align: center; }
.tabla--promo th.nombre-cab,
.tabla--promo .nombre { text-align: left; }
.tabla--promo td form { margin: 0; }

.promo-slot .obj-icono__marco { position: relative; }
.promo-slot__vacio { color: var(--texto-suave); font-size: 1.05rem; font-weight: 700; }

/* El contenido del globo se guarda junto a la casilla, pero no se pinta ahi. */
.promo-slot__datos { display: none; }

/* Cuantos objetos mas lleva el codigo, en la esquina de la casilla. */
.promo-slot__mas {
	position: absolute; right: -6px; bottom: -6px;
	min-width: 19px; padding: 0 4px; border-radius: 10px;
	background: var(--oro-oscuro); color: #1a120d;
	font-size: .68rem; font-weight: 700; line-height: 19px; text-align: center;
}

/* El globo de verdad: uno solo, colgado del <body>, con coordenadas de pantalla. Dentro de la
   tabla no valia: la caja se desliza y el recorte del deslizador se lo comia. */
.obj-tip--globo {
	position: fixed; left: 0; top: 0; bottom: auto;
	transform: translate(-50%, -100%);
	z-index: 90; pointer-events: none;
}
.obj-tip--globo.esta { opacity: 1; visibility: visible; }

/* Cada objeto del globo: icono, nombre y cantidad, con el nombre libre de crecer. */
.promo-tip__fila { display: grid; grid-template-columns: 24px 1fr auto; gap: 9px; align-items: center; }
.promo-tip__fila img { width: 24px; height: 24px; }
.promo-tip__nombre { color: var(--texto); font-size: .82rem; text-align: left; }
.promo-tip__cant { color: var(--oro-claro); font-size: .82rem; font-weight: 700; }

/* ================================================== panel: recargas y finanzas */

/* Las tarjetas de totales. auto-fit para que se repartan solas: cinco en pantalla ancha, dos o
   tres en una estrecha, sin tener que escribir un salto por cada tamano. */
.fin-tarjetas {
	display: grid; gap: 12px; margin-bottom: 14px;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.fin-tarjeta {
	display: grid; gap: 4px; padding: 14px 16px;
	background: var(--panel-alto); border: 1px solid var(--borde); border-radius: var(--radio);
}
.fin-tarjeta__titulo {
	color: var(--texto-suave); font-size: .74rem; text-transform: uppercase; letter-spacing: .08em;
}
.fin-tarjeta__cifra { color: var(--oro-claro); font-size: 1.32rem; font-weight: 800; }
.fin-tarjeta__pie { color: var(--texto-suave); font-size: .76rem; }

/* ------------------------------------------------- la grafica de lineas */
/* Se dibuja en SVG a mano: son dos polilineas y un punado de circulos. Una libreria de graficas
   serian cien kilobytes y una peticion mas para esto. */
.fin-grafica {
	padding: 16px 10px 10px;
	background: var(--panel-alto); border: 1px solid var(--borde); border-radius: var(--radio);
}

/* El viewBox del SVG hace el trabajo: el dibujo se escala solo al ancho que haya. */
.fin-svg { display: block; width: 100%; height: auto; overflow: visible; }

/* Las rayas de fondo, lo justo para leer la altura sin robar atencion a las lineas. */
.fin-svg__raya { stroke: rgba(201, 166, 89, .12); stroke-width: 1; }
.fin-svg__base { stroke: var(--borde); stroke-width: 1; }

.fin-svg__eje { fill: var(--texto-suave); font-size: 11px; }
.fin-svg__nombre { fill: var(--texto-suave); font-size: 11px; }

/* Las dos lineas. Las esquinas redondeadas evitan las puntas feas de los picos. */
.fin-svg__linea {
	fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round;
}
.fin-svg__linea--previo { stroke: #5c9ede; }
.fin-svg__linea--actual { stroke: var(--oro-claro); }

/* Los puntos. En cada fecha, el que mas gano va en VERDE y el que menos en ROJO, cada uno en su
   linea; si empatan, cada punto se queda del color de la suya. */
.fin-svg__punto { stroke: var(--panel-alto); stroke-width: 2; }
/* Aqui vivian los puntos verdes y rojos de «quien gano este dia». Se quitaron a proposito: en una
   grafica de dos series el color tiene un trabajo, decir DE QUIEN es cada marca, y no puede tener
   dos. Los colores de serie estan mas abajo, junto al trazo discontinuo.
   (.es-sube y .es-baja siguen vivas para el porcentaje de variacion, que es otra cosa.) */

/* Una linea del globo de un punto: su color, de quien es, cuanto y cuantas recargas. */
.fin-tip__fila { display: flex; align-items: center; gap: 8px; font-size: .82rem; white-space: nowrap; }
.fin-tip__que { color: var(--texto-suave); }
.fin-tip__cifra { color: var(--oro-claro); }

/* La zona sensible: una columna invisible de lado a lado, para que el globo del raton salte sin
   tener que acertarle al circulo, que mide cuatro pixeles. Invisible siempre: no se pinta al
   pasar por encima, que eso no lo pidio nadie y ademas tapa la grafica. */
.fin-svg__zona { fill: transparent; }
.fin-svg__marca { cursor: default; }
.fin-svg__marca:hover .fin-svg__punto { r: 6; }

/* ------------------------------------------------- los dos desgloses, uno al lado del otro */
.fin-columnas { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.fin-columna__titulo {
	margin: 0 0 10px; padding-bottom: 7px; color: var(--texto-suave);
	font-size: .78rem; text-transform: uppercase; letter-spacing: .08em;
	border-bottom: 1px solid var(--borde);
}

/* ------------------------------------------------- la lista de movimientos */
/* El conmutador de pruebas, dentro de la fila de filtros y sin estirarse como los campos. */
.fin-conmutador {
	display: inline-flex; align-items: center; gap: 7px;
	color: var(--texto-suave); font-size: .84rem; white-space: nowrap;
}
.fin-conmutador input { accent-color: var(--oro-oscuro); }

/* La referencia del pago puede ser larga: se corta con puntos en vez de ensanchar la tabla. */
.fin-ref {
	display: inline-block; max-width: 180px; overflow: hidden;
	text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
	color: var(--texto-suave); font-size: .76rem;
}

/* Los colores del estado, los mismos criterios que en soporte: verde lo cerrado en bien, rojo lo
   que salio mal, gris lo que aun no ha pasado. */
.fin-estado--pagada    { background: rgba(63, 109, 58, .22); color: #8fc48a; }
.fin-estado--pendiente { background: rgba(201, 166, 89, .18); color: var(--oro-claro); }
.fin-estado--anulada   { background: rgba(120, 120, 130, .2); color: var(--texto-suave); }
.fin-estado--fallida   { background: rgba(192, 57, 43, .18); color: #e8776a; }
.fin-estado--caducada  { background: rgba(120, 120, 130, .2); color: var(--texto-suave); }

/* Lo que sale del bolsillo va en rojo, y la disputa en ambar: todavia no se ha perdido. */
.fin-estado--reembolsada_parcial { background: rgba(192, 57, 43, .12); color: #e8a89e; }
.fin-estado--reembolsada         { background: rgba(192, 57, 43, .18); color: #e8776a; }
.fin-estado--en_disputa          { background: rgba(201, 166, 89, .18); color: var(--oro-claro); }
.fin-estado--contracargo         { background: rgba(192, 57, 43, .26); color: #f09a8e; }

/* La serie de REFERENCIA va discontinua. El color solo dice de quien es cada linea; el trazo lo
   repite, para quien no distinga bien el azul del dorado. */
.fin-svg__linea--previo { stroke-dasharray: 7 5; }

/* El color del punto va en la clase de la SERIE, no en una tercera clase.
   Antes dependia de `.es-igual`, que se emitia cuando ninguna de las dos ganaba ese dia; al quitar
   el verde y rojo por punto esa clase dejo de escribirse y los circulos se quedaron sin relleno.
   Se nota sobre todo en un periodo de un solo punto, donde no hay linea que mire. */
.fin-svg__punto--actual { fill: var(--oro-claro); }
.fin-svg__punto--previo { fill: #5c9ede; }

/* El punto de HOY esta a medias: hueco, para que no parezca un dia cerrado. */
.fin-svg__punto.es-parcial { fill: var(--panel-alto); stroke: var(--oro-claro); stroke-width: 2; }

/* El selector de periodo manda en toda la pantalla, asi que va arriba y algo mas suelto. */
.fin-periodo { align-items: center; }
.fin-periodo__dias { color: var(--texto-suave); font-size: .82rem; margin-left: auto; }

/* La ENTREGA de las monedas es otra cosa que el cobro, y por eso tiene sus propios colores:
   una venta cobrada con la entrega pendiente se lee de un vistazo. */
.fin-entrega--entregada  { background: rgba(63, 109, 58, .22); color: #8fc48a; }
.fin-entrega--pendiente  { background: rgba(201, 166, 89, .18); color: var(--oro-claro); }
.fin-entrega--error      { background: rgba(192, 57, 43, .18); color: #e8776a; }
.fin-entrega--no_procede { background: rgba(120, 120, 130, .2); color: var(--texto-suave); }

/* La hora a la que se leyeron las cifras y su huso. Discreto, pero siempre visible. */
.fin-sello-hora { text-align: right; font-size: .78rem; opacity: .85; }

/* Las paginas. */
.fin-paginas { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.fin-pagina {
	min-width: 32px; padding: 5px 9px; border-radius: 6px; text-align: center;
	border: 1px solid var(--borde); background: var(--panel-alto);
	color: var(--texto-suave); font-size: .82rem; text-decoration: none;
}
.fin-pagina:hover { color: var(--oro-claro); border-color: var(--oro-oscuro); }
.fin-pagina.es-activa {
	background: var(--oro-oscuro); border-color: var(--oro-oscuro); color: #1a120d; font-weight: 700;
}

/* En pantalla estrecha el eje estorba mas que ayuda: las barras se quedan con todo el ancho. */
@media (max-width: 720px) {
	.fin-comparador { flex-direction: column; align-items: stretch; }

	/* En movil el dibujo encogido deja los numeros ilegibles: se desliza a lo ancho. */
	.fin-grafica { overflow-x: auto; }
	.fin-svg { min-width: 620px; }
}

/* ------------------------------------------------- el comparador de periodos */
.fin-comparador {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px;
}
.fin-comparador__etiqueta {
	color: var(--texto-suave); font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
}

/* Los desplegables, al ancho de su contenido: un ano son cuatro cifras, no media pantalla. */
.fin-comparador .campo__control { width: auto; min-width: 0; }

/* ------------------------------------------------- la leyenda de la grafica */
.fin-leyenda {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 12px;
}
.fin-leyenda__item {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: .86rem; font-weight: 600; line-height: 1;
}
.fin-leyenda__que { color: var(--texto-suave); }
.fin-leyenda__cifra { color: var(--oro-claro); }

/* El punto que separa las tres partes, puesto por CSS: en el HTML solo hay contenido. */
.fin-leyenda__que + .fin-leyenda__cifra::before,
.fin-leyenda__cifra + .fin-leyenda__que::before {
	content: '·'; margin-right: 8px; color: var(--borde);
}

/* La pastilla de color, la misma que la barra a la que representa. */
.fin-marca { width: 14px; height: 4px; border-radius: 2px; }
.fin-marca--previo { background: #5c9ede; }
.fin-marca--actual { background: var(--oro-claro); }

/* La pista de que significa cada color, debajo de la leyenda y sin robar atencion. */
.fin-pista { margin: -4px 0 12px; color: var(--texto-suave); font-size: .78rem; }

/* La diferencia entre los dos periodos: verde si sube, rojo si baja. Nada de flechas: el signo
   ya lo dice y una flecha en un sitio donde no hay mas iconos canta. */
.fin-variacion {
	padding: 4px 10px; border-radius: 99px;
	font-size: .86rem; font-weight: 700; line-height: 1;
}
.fin-variacion.es-sube { background: rgba(63, 109, 58, .22); color: #8fc48a; }
.fin-variacion.es-baja { background: rgba(192, 57, 43, .18); color: #e8776a; }

/* El aviso de que la grafica lleva numeros inventados, y el enlace para entrar y salir. */
.fin-demo { margin-bottom: 14px; }

/* =====================================================================================
   Seguimiento de tickets (el jugador) e informes del cliente (el panel)
   ===================================================================================== */

/* --- El formulario tal como lo rellenó el jugador, arriba de la ficha del panel.
   Lleva marco y fondo propios a propósito: es lo primero que hay que leer, y sin
   separarlo se confundía con un mensaje más de la conversación. */
.adm-formulario {
	border: 1px solid var(--borde); border-left: 3px solid var(--oro);
	border-radius: 10px; padding: 14px 16px; margin-bottom: 18px;
	background: rgba(201, 166, 89, .05);
}
.adm-formulario__titulo {
	margin: 0 0 8px; font-size: .84rem; letter-spacing: .06em;
	text-transform: none; color: var(--oro-claro);
}
.adm-formulario__texto { margin: 0; line-height: 1.6; white-space: normal; overflow-wrap: anywhere; }

/* --- El informe técnico del cliente. */
.adm-informe {
	border: 1px dashed var(--borde); border-radius: 10px;
	padding: 14px 16px; margin-bottom: 18px;
}
.adm-informe__titulo { margin: 0 0 4px; font-size: .84rem; color: var(--oro-claro); }
.adm-informe__lista {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 8px 18px; margin: 10px 0 0;
}
.adm-informe__par { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.adm-informe__par dt { flex: 0 0 auto; font-size: .78rem; color: var(--texto-suave); }
.adm-informe__par dd {
	margin: 0; min-width: 0; font-weight: 600;
	overflow-wrap: anywhere;
}
/* El syserr ocupa la fila entera y se desplaza solo: no puede ensanchar la tabla. */
.adm-informe__par:has(.adm-informe__syserr) { grid-column: 1 / -1; display: block; }
.adm-informe__syserr {
	margin: 4px 0 0; padding: 8px 10px; max-height: 190px;
	overflow: auto; border-radius: 8px;
	background: rgba(0, 0, 0, .3); font-size: .76rem; line-height: 1.5;
	white-space: pre-wrap; overflow-wrap: anywhere;
}

/* --- Atajos de la lista del panel. */
.adm-atajos { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }

/* El principio del mensaje, en la fila: dos líneas y corta. */
.adm-avance {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden; color: var(--texto-suave); line-height: 1.45;
}

/* =========================== la pantalla del jugador =========================== */

.tk-cabecera { margin-bottom: 16px; }
.tk-cabecera__titulo { margin: 0 0 8px; font-size: 1.12rem; line-height: 1.35; overflow-wrap: anywhere; }
.tk-num { color: var(--oro); font-variant-numeric: tabular-nums; margin-right: 6px; }
.tk-cabecera__datos {
	display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
	font-size: .84rem; color: var(--texto-suave);
}

.tk-charla { display: grid; gap: 12px; margin-bottom: 22px; }

/* Los del jugador a un lado y los del equipo al otro: de un vistazo se ve quién habla. */
.tk-msg {
	max-width: 88%; border: 1px solid var(--borde); border-radius: 12px;
	padding: 11px 14px; background: var(--panel);
}
/*
 * LA MISMA REGLA QUE EN EL PANEL: quien abrio el ticket a la izquierda con la barra
 * dorada, quien responde a la derecha. Una sola regla para las dos pantallas, asi que
 * mirando cualquiera de las dos se sabe de quien es cada mensaje sin leer el nombre.
 *
 * Antes estaba al reves aqui y como en el panel alli: la misma conversacion se veia
 * espejada segun quien la abriera.
 */
.tk-msg--mio {
	margin-right: auto;
	border-left: 3px solid var(--oro);
	background: rgba(201, 166, 89, .05);
}

.tk-msg--equipo {
	margin-left: auto;
	border-right: 3px solid var(--oro-oscuro);
	background: rgba(54, 36, 29, .35);
}
.tk-msg__cabecera {
	display: flex; align-items: baseline; gap: 9px; margin-bottom: 6px;
	font-size: .82rem;
}
.tk-msg__fecha { color: var(--texto-suave); font-size: .76rem; }
.tk-msg__texto { margin: 0; line-height: 1.6; overflow-wrap: anywhere; }
.tk-msg__enlaces { margin: 8px 0 0; padding-left: 18px; font-size: .8rem; }
.tk-msg__enlaces code { color: var(--texto-suave); margin-left: 6px; overflow-wrap: anywhere; }

.tk-hito {
	margin: 0; text-align: center; font-size: .78rem; color: var(--texto-suave);
}

/* El aviso de «te han respondido»: lo único que hay que mirar hoy. */
.tk-aviso {
	display: inline-block; margin-left: 8px; padding: 2px 8px;
	border-radius: 99px; background: rgba(201, 166, 89, .2);
	color: var(--oro-claro); font-size: .72rem; font-weight: 700;
}

@media (max-width: 640px) {
	/* En pantalla estrecha no hay sitio para dos columnas de conversación. */
	.tk-msg { max-width: 100%; }
	.adm-informe__lista { grid-template-columns: 1fr; }
}

/* El aviso del menu del jugador: cuantos tickets esperan respuesta suya. */
.fila__aviso {
	margin-left: auto; padding: 1px 8px; border-radius: 99px;
	background: var(--oro); color: #1a1207;
	font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* El aviso de que cerrar un ticket lo borra: va pegado a los botones de estado. */
.adm-aviso-borrar {
	flex-basis: 100%; margin-bottom: 6px;
	font-size: .78rem; color: #e8776a;
}

/* =====================================================================================
   RITMO Y ALINEACION DE LAS BARRAS DE FILTROS DEL PANEL

   El problema que arregla: en la pestana de Recargas todo iba pegado y nada se alineaba
   con nada. Tres causas, las tres de fondo:

     1. `.fin-rapidos` NO TENIA NI UNA REGLA. Los atajos salian con el espaciado por
        defecto de los enlaces en linea: apretados unos contra otros y contra la barra de
        abajo.
     2. Los botones y los campos median distinto. `.boton` tiene 11 px de relleno arriba
        y abajo y `.campo__control` 12: dos pixeles de diferencia que, en una fila donde
        conviven cuatro de cada, se ven como un escalon.
     3. La casilla de «Ver las pruebas» reutilizaba `.rec-socio__no`, que trae
        `margin-top: 11px` de su sitio original. Dentro de una fila flexible eso la
        empuja hacia abajo y la deja flotando entre los desplegables.

   La solucion no es tocar cada caso: es una ALTURA UNICA para todo lo que vive en una
   barra de filtros, y separaciones que digan que cosas van juntas y cuales no.
   ===================================================================================== */

:root {
	/* La altura de cualquier control de una barra de filtros. Sale de lo que ya median
	   los campos, para no cambiar el aspecto de las pantallas que ya estaban bien. */
	--alto-control: 44px;
}

/* --- La barra de filtros: una sola linea de controles, todos de la misma altura. --- */
.adm-filtros {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 10px; margin-bottom: 18px;
}

/* `min-height` y no `height`: un control con texto largo puede crecer, pero nunca
   encogerse por debajo de la raya comun. */
.adm-filtros .campo__control,
.adm-filtros .boton {
	min-height: var(--alto-control);
	margin: 0;
}

.adm-filtros .campo__control { flex: 1 1 160px; padding-top: 0; padding-bottom: 0; }

/* Los <select> necesitan el relleno vertical para centrar su texto; los <input> no, que
   ya lo centran solos con `min-height`. */
.adm-filtros select.campo__control { padding-top: 10px; padding-bottom: 10px; }

/* Los botones no se estiran: miden lo que pide su texto y se quedan a la derecha. */
.adm-filtros .boton { flex: 0 0 auto; }

/* La casilla, alineada con los demas controles y sin el margen que traia prestado. */
.adm-filtros .rec-socio__no,
.adm-filtros .fin-conmutador {
	display: inline-flex; align-items: center; gap: 8px;
	min-height: var(--alto-control); margin: 0;
	padding: 0 4px; flex: 0 0 auto;
	color: var(--texto-suave); font-size: .84rem; white-space: nowrap;
}

/* --- Los atajos: su propia fila, con su etiqueta y separada de la barra de abajo. --- */
.fin-rapidos {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 8px; margin: 0 0 14px;
	padding-bottom: 14px; border-bottom: 1px solid rgba(54, 36, 29, .6);
}

.fin-rapidos__titulo {
	margin-right: 4px;
	font-size: .8rem; font-weight: 700; letter-spacing: .04em;
	color: var(--texto-suave); white-space: nowrap;
}

/* Los atajos son enlaces, no botones: mas bajos a proposito, para que se vea de un
   vistazo que no son la accion principal de la pantalla. */
.fin-rapidos .fin-pagina {
	padding: 7px 13px; font-size: .82rem; line-height: 1.2;
}

/* --- El titulo de cada paso respira por arriba. --- */
.adm-paso { margin-bottom: 30px; }
.adm-paso + .adm-paso { margin-top: 4px; }

.adm-paso__titulo { margin: 0 0 16px; padding-bottom: 10px; }

/* Entre las pestanas y el primer titulo hacia falta aire: se leian como una sola cosa. */
.pu-tabs { margin-bottom: 22px; }

/* --- El «no hay nada» deja de ir pegado a los filtros. --- */
.adm-paso .obj-bloque__vacia,
.adm-paso .panel__texto--nota:only-of-type {
	margin-top: 18px; padding: 18px 0;
}

/* --- Y la barra del periodo, que es la misma idea con otro nombre. --- */
.fin-periodo { align-items: center; }
.fin-periodo .campo__control { flex: 0 1 auto; }
.fin-comparador__etiqueta {
	font-size: .8rem; font-weight: 700; letter-spacing: .04em;
	color: var(--texto-suave); white-space: nowrap;
}
.fin-periodo__dias { font-size: .82rem; color: var(--texto-suave); }

@media (max-width: 720px) {
	/* En estrecho, los controles ocupan la fila entera: media fila cada uno no se lee. */
	.adm-filtros .campo__control { flex: 1 1 100%; }
	.adm-filtros .boton { flex: 1 1 100%; }
}

/* Los botones de accion se separan de los campos: a un lado lo que se filtra, al otro lo
   que se hace con ello. Es lo que convierte una fila de ocho cosas en dos grupos de
   cuatro, que es como se lee. */
.adm-filtros .boton:first-of-type { margin-left: auto; }

@media (max-width: 720px) {
	.adm-filtros .boton:first-of-type { margin-left: 0; }
}

/* =====================================================================================
   Abrir una fila de la lista de tickets

   Antes la fila llevaba un `onclick` y NO funcionaba: la politica de seguridad de la web
   (`script-src 'self'`, sin `'unsafe-inline'`) bloquea el JavaScript escrito dentro de un
   atributo. La fila no respondia al pulsarla y el unico camino era acertar con el enlace
   del titulo.

   Esto lo resuelve con CSS: el enlace del titulo se estira por encima de la fila entera.
   Sigue siendo un enlace de verdad -- se puede abrir en otra pestana, el teclado lo
   alcanza, el navegador ensena a donde va -- y no hace falta una linea de JavaScript.
   ===================================================================================== */
.tabla--tickets tr.adm-fila { position: relative; }

.adm-fila__ir::after {
	content: ""; position: absolute; inset: 0;
	/* Por debajo del boton del final, que tiene su propio z-index. */
	z-index: 1;
}

/*
 * EL ENLACE NO LLEVA `position`, Y ES A PROPOSITO.
 *
 * Tenia `position: relative`, y con eso su `::after` absoluto se medía contra EL PROPIO ENLACE en
 * vez de contra la fila: la capa cubria las tres palabras del titulo y nada mas. El resto de la
 * fila salia con el cursor de mano y no abria nada.
 *
 * Un elemento absoluto se coloca respecto a su ancestro posicionado mas cercano; dejando el
 * enlace sin posicionar, ese ancestro es el <tr>, que si la tiene. Es el precio conocido de este
 * patron: el texto del enlace deja de poder seleccionarse con el raton, porque la capa queda
 * encima. A cambio, la fila entera abre el ticket.
 */

/* El boton explicito de la ultima columna: por encima de la capa del enlace. */
.adm-fila__accion { position: relative; z-index: 3; width: 1%; white-space: nowrap; text-align: right; }

/* Al pasar por encima se ve que la fila entera es pulsable. */
.tabla--tickets tr.adm-fila:hover { background: rgba(201, 166, 89, .06); }

/* Y el foco del teclado se ve en la fila, no solo en el texto del enlace. */
.tabla--tickets tr.adm-fila:focus-within { outline: 1px solid var(--oro-oscuro); outline-offset: -1px; }

/* =====================================================================================
   La fila de acciones de un ticket: enviar, la casilla de nota, y los cuatro estados.

   Eran dos formularios uno debajo del otro y se leian como dos bloques sin relacion,
   cuando son la misma decision: contestas y dejas el ticket en un estado. Ahora es un
   formulario y una fila.
   ===================================================================================== */
.adm-acciones {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: 10px; margin-top: 14px;
}

/* La casilla no es un boton: se ve que es una casilla, y dice lo que hace al enviar. */
.adm-acciones__nota {
	display: inline-flex; align-items: center; gap: 8px;
	margin: 0; padding: 0 2px;
	color: var(--texto-suave); font-size: .84rem; cursor: pointer;
}
.adm-acciones__nota input { accent-color: var(--oro-oscuro); }
.adm-acciones__nota:hover { color: var(--texto); }

/* Un hueco elastico: a la izquierda lo de responder, a la derecha lo de archivar. */
.adm-acciones__sep { flex: 1 1 20px; min-width: 0; }

/* El aviso de que cerrar borra, debajo de su boton y en el color de lo irreversible. */
.adm-aviso-borrar {
	margin: 10px 0 0; text-align: right;
	font-size: .78rem; color: #e8776a;
}

@media (max-width: 720px) {
	/* En estrecho no hay dos lados: el separador desaparece y todo se apila. */
	.adm-acciones__sep { display: none; }
	.adm-acciones { gap: 8px; }
	.adm-aviso-borrar { text-align: left; }
}

/* =====================================================================================
   La conversacion de un ticket en el panel: el jugador a la izquierda, el equipo a la
   derecha, y cada uno con su barra de color.

   Antes el primer mensaje del jugador salia DOS VECES: arriba en un bloque aparte y otra
   vez dentro de la conversacion. La conversacion ya lo dice todo; lo unico que le
   faltaba era que se viera de quien es cada cosa sin leer el nombre.
   ===================================================================================== */
.adm-msg--jugador {
	margin-right: auto;
	border-left: 3px solid var(--oro);
	background: rgba(201, 166, 89, .05);
}

.adm-msg--equipo {
	margin-left: auto;
	border-left: none; border-right: 3px solid var(--oro-oscuro);
	background: rgba(54, 36, 29, .35);
}

/* Las notas internas viejas se siguen distinguiendo: son del equipo pero no salieron. */
.adm-msg--nota { border-style: dashed; background: rgba(120, 120, 130, .08); }

/* Borrar un ticket: abajo del todo, separado de responder y cerrar, y en el color de lo
   que no tiene vuelta atras. Solo lo ve quien puede hacerlo. */
.adm-borrar {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
	gap: 10px; margin-top: 18px; padding-top: 14px;
	border-top: 1px solid rgba(54, 36, 29, .6);
}
.adm-borrar__aviso { flex: 1 1 260px; font-size: .78rem; color: var(--texto-suave); }
.adm-borrar__boton { border-color: rgba(192, 57, 43, .45); color: #e8776a; }
.adm-borrar__boton:hover { border-color: #e8776a; color: #f0968c; }

/* El numero de tickets que esperan respuesta, en el menu del panel. Solo sale si hay. */
.adm-menu__item { display: inline-flex; align-items: center; gap: 8px; }
.adm-menu__aviso {
	padding: 1px 8px; border-radius: 99px;
	background: var(--oro); color: #1a1207;
	font-size: .74rem; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* =====================================================================================
   Fallos del cliente: cada informe de un grupo, uno debajo de otro.
   ===================================================================================== */
.fal-informe {
	border: 1px solid var(--borde); border-radius: 10px;
	padding: 12px 14px; margin-bottom: 12px;
	background: rgba(36, 26, 22, .35);
}
.fal-informe__cabecera {
	display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px;
	margin-bottom: 8px; font-size: .82rem; color: var(--texto-suave);
}
.fal-informe__cabecera strong { color: var(--oro-claro); font-variant-numeric: tabular-nums; }

/* Sin cuenta detras no es un fallo: es lo normal, porque el juego no tiene sesion de la web. */
.fal-anonimo { font-style: italic; opacity: .75; }

/* -------------------------------------------------------------- Fallos del cliente: panel */
/* La portada, al estilo del panel de referencia: tarjetas de cifras y barra «en directo». */
.fal-tarjetas {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}
.fal-tarjeta {
	background: var(--panel-alto);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: 14px 16px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.fal-tarjeta--oro { border-color: var(--oro-oscuro); }
.fal-tarjeta__num { font-size: 1.7rem; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.fal-tarjeta--oro .fal-tarjeta__num { color: var(--oro-claro); }
.fal-tarjeta__et { font-size: .8rem; color: var(--texto-suave); }

.fal-directo {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
	background: var(--panel);
	border: 1px solid var(--borde);
	border-radius: var(--radio);
	padding: 10px 14px;
	margin-bottom: 18px;
}
.fal-directo__et {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--oro);
	white-space: nowrap;
}
.fal-directo__item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: .82rem;
	color: var(--texto);
	text-decoration: none;
	padding: 3px 8px;
	border-radius: 8px;
}
.fal-directo__item:hover { background: var(--panel-alto); }
.fal-directo__item small { color: var(--texto-suave); }

/* El código corto, y la marca de un informe degradado (sin volcado). */
.fal-codigo {
	font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
	background: var(--panel-alto);
	border: 1px solid var(--borde);
	border-radius: 6px;
	padding: 1px 6px;
	font-size: .82em;
	color: var(--oro-claro);
}
.fal-codigo--mini { font-size: .72em; opacity: .85; }
.fal-marca { color: var(--oro); font-size: .7em; }
.fal-degradado { color: var(--oro-claro); border-left: 3px solid var(--oro-oscuro); padding-left: 10px; }

/* El contexto del juego, en rejilla. */
.fal-contexto {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 8px 20px;
	margin: 14px 0;
}
.fal-contexto__par { display: flex; flex-direction: column; }
.fal-contexto__par dt { font-size: .72rem; color: var(--texto-suave); }
.fal-contexto__par dd { margin: 0; color: var(--texto); font-variant-numeric: tabular-nums; }

/* La nota del jugador, en amarillo a la izquierda, como en el ticket. */
.fal-nota {
	border-left: 3px solid var(--oro);
	background: var(--panel-alto);
	border-radius: 0 8px 8px 0;
	padding: 10px 14px;
	margin: 14px 0;
}
.fal-nota__et { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--oro); }
.fal-nota p { margin: 4px 0 0; color: var(--texto); }

/* Fallos: a quién le pasó y el syserr. */
.fal-quien { margin-top: 6px; }
.fal-quien strong { color: var(--oro-claro); }
.fal-syserr { margin: 14px 0; }
.fal-syserr__et { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.fal-syserr pre {
	margin: 6px 0 0;
	max-height: 220px;
	overflow: auto;
	background: #0d0b0a;
	border: 1px solid var(--borde);
	border-radius: 8px;
	padding: 10px 12px;
	font-family: ui-monospace, Consolas, monospace;
	font-size: .78rem;
	color: var(--texto-suave);
	white-space: pre-wrap;
	word-break: break-word;
}

/* Historial de eventos (antes del fallo) */
.fal-eventos { margin: 14px 0; }
.fal-eventos__et { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-suave); }
.fal-eventos__linea { list-style: none; margin: 8px 0 0; padding: 0; border-left: 2px solid var(--borde); }
.fal-eventos__linea li {
	position: relative;
	padding: 4px 0 4px 16px;
	font-size: .82rem;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
}
.fal-eventos__linea li::before {
	content: "";
	position: absolute;
	left: -5px;
	top: 10px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--oro-claro);
}
.fal-eventos__sub {
	font-size: .68rem;
	text-transform: uppercase;
	letter-spacing: .04em;
	color: var(--oro-claro);
	min-width: 74px;
}
.fal-eventos__det { color: var(--texto); font-family: ui-monospace, Consolas, monospace; }
.fal-eventos__t { color: var(--texto-suave); font-size: .74rem; margin-left: auto; }
.fal-eventos__mas { display: block; margin-top: 6px; font-size: .74rem; color: var(--texto-suave); }

/* Estado de investigación del grupo de bug */
.fal-syserr__previo { color: var(--oro-claro); font-style: normal; font-size: .68rem; margin-left: 6px; }
.fal-grupo {
	margin: 14px 0;
	padding: 12px;
	background: #17130f;
	border: 1px solid var(--borde);
	border-radius: 10px;
}
.fal-grupo__fila { display: flex; flex-wrap: wrap; gap: 12px; }
.fal-grupo__campo { display: flex; flex-direction: column; gap: 4px; flex: 1 1 180px; }
.fal-grupo__campo > span { font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-suave); }
.fal-grupo__campo select,
.fal-grupo__campo input {
	background: #0d0b0a;
	border: 1px solid var(--borde);
	border-radius: 7px;
	padding: 7px 9px;
	color: var(--texto);
	font-size: .85rem;
}
.fal-grupo__nota { margin-top: 10px; }
.fal-grupo .boton { margin-top: 12px; }
.fal-grupo__cuando { margin-left: 10px; font-size: .74rem; color: var(--texto-suave); }