/* ==========================================================================
   Solera — hoja de estilo de la plantilla de MyAAC.

   Fondo casi negro, oro como unico acento, filetes de 1 px en vez de marcos,
   Cormorant Garamond para titulares e Inter para interfaz.

   ═══ COMO ESTA ORGANIZADA ═══

     1. Tokens          el unico sitio donde hay un color o una medida escrita
     2. Tema oscuro     redefine los tokens del apartado 1, y nada mas
     3. Base            reset y tipografia
     4. Armazon         cabecera, hero de pagina, rejilla, pie
     5. Componentes     tarjeta, fila de datos, boton, campo, acordeon, cifra…
     6. Contenido MyAAC re-vestido del markup heredado de tibiacom
     7. Paginas propias solo lo que es de una pagina y de ninguna otra
     8. Portada         el unico hero grande del sitio

   La regla que manda: **si una pieza aparece en mas de una pagina, va en
   Componentes**. Antes .tarjeta, .datos, .pila, .rotulo y .seccion__cabeza
   estaban definidas dos veces con medidas distintas, y como la segunda copia
   iba despues, la primera no llegaba a pintar nunca.

   ═══ DE DONDE SALE EL MARKUP ═══

   Tres origenes, y conviene saber cual es cual al leer un selector:

     - templates/solera/           armazon y paginas propias. Clases nuestras.
     - templates/solera/twig/      vistas del nucleo que sobreescribimos
                                   (cuenta, alta, FAQ, noticias). Clases
                                   nuestras, datos y formularios del nucleo.
     - system/pages + system/templates   el resto: highscores, casas, guildas,
                                   personajes, bans... markup heredado de
                                   tibia.com que no se puede tocar sin
                                   parchear MyAAC. Se re-viste en la seccion 5,
                                   y por eso alli los selectores parecen
                                   ajenos al diseño: lo son.
   ========================================================================== */

:root {
	/* Los controles nativos -barras de scroll, la lista que despliega un
	   <select>, el calendario de un input date- no salen de esta hoja: los
	   pinta el sistema con el esquema que se le declare. */
	color-scheme: light;

	/* ── superficies ────────────────────────────────────────────────────────
	   Marfil templado, no blanco. Un blanco puro rompe la familia calida del
	   oro y deja el sitio con dos temperaturas peleandose.

	   La profundidad la dan el contraste entre superficies, los filetes y el
	   espaciado. No hay sombras en ninguno de los dos temas. */
	--bg: #f4efe4;
	--bg-elevated: #faf6ed;
	--surface: #fffdf8;
	/* El hover baja de luminosidad en vez de subirla: partiendo de casi blanco
	   no queda sitio por arriba. Cambia la direccion, no el mensaje. */
	--surface-hover: #eee7d9;

	/* ── filetes ──────────────────────────────────────────────────────────── */
	--border: #dccfb8;
	--border-soft: #e9e0cf;
	--border-gold: #bd9145;

	/* ── texto ──────────────────────────────────────────────────────────────
	   Tres niveles y no mas. Antes habia nueve tintas distintas y la jerarquia
	   no se leia: entre --tinta-tenue y --tinta-debil no hay diferencia que un
	   lector pueda notar, solo ruido a la hora de elegir.

	   Al lado de cada tinta va su peor contraste sobre las cuatro superficies
	   de arriba. Medido, no elegido a ojo. AA pide 4,5:1 para texto normal. */
	--text-primary: #1a1611;    /* 14,6:1 */
	--text-secondary: #57503f;  /*  6,5:1 */
	--text-muted: #6e6656;      /*  4,6:1 */

	/* ── oro: el unico acento ───────────────────────────────────────────────
	   Va en llamadas a la accion, enlaces activos, ornamentos y estados
	   seleccionados. Nunca en superficies grandes.

	   Los tres nombres son papeles, no descripciones literales: la escala esta
	   ordenada por enfasis y no por luminosidad. --gold-dark es el papel mas
	   discreto y por tanto el de menos contraste, --gold-light el mas enfatico.
	   Sobre marfil eso se consigue oscureciendo; en el tema oscuro, aclarando.
	   Que cada papel se mantenga es lo que permite que hovers, estados activos
	   y textos sobre oro funcionen en los dos sin tocar ni un selector.

	   El oro de marca (#d6a044) sobre marfil da 1,9:1: vale de adorno, no de
	   texto, y aqui los tres papeles son casi siempre texto. Estos son ese
	   mismo oro llevado a bronce hasta pasar AA con margen. El suelo lo puso el
	   kicker del hero de portada, que es --gold sobre el arte veteado por el
	   velo: con el oro apurado justo hasta 4,5 cualquier cosa que asomara por
	   debajo del velo lo tumbaba. */
	--gold: #7a5410;            /*  5,5:1 */
	--gold-light: #62430b;      /*  7,3:1 */
	--gold-dark: #875f13;       /*  4,6:1 */
	/* Mas cuerpo que el .08 del tema oscuro, y a proposito: sobre marfil un
	   tinte tan fino no se ve, y la llamada a la accion dejaba de leerse como
	   primaria al lado del boton secundario. */
	--gold-tint: rgba(122, 84, 16, .13);

	/* ── semaforo ───────────────────────────────────────────────────────────
	   Apagados a proposito: un verde o un rojo saturados chillan al lado de una
	   paleta que no tiene mas acento que el oro. */
	--success: #3d6b3b;         /*  5,1:1 */
	--danger: #a83a30;          /*  5,2:1 */
	/* Ancho maximo de un campo de formulario. Lo comparten el input y la caja
	   que lo envuelve con su icono; si se separan, el icono deja de caer sobre
	   el campo y se va al borde de la columna. */
	--campo-max: 460px;
	/* Para los nombres de criatura de las noticias. Desaturado como los otros
	   dos, por el mismo motivo. */
	--purpura: #6a4aa3;         /*  5,5:1 */

	/* ── tipografia ─────────────────────────────────────────────────────────
	   Serif para titulares, sans para interfaz. El contraste entre las dos es
	   lo que separa "editorial" de "plantilla generica".

	   El cuerpo pasa de Lora a Inter: a 15 px una serif con contraste alto se
	   lee peor en pantalla, y la mayor parte del texto del sitio son datos,
	   etiquetas y tablas, no prosa. Lora se queda solo donde si hay prosa
	   seguida (noticias y entradillas). */
	--font-display: "Cormorant Garamond", Georgia, serif;
	--font-prose: "Lora", Georgia, serif;
	--font-ui: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

	/* ── espaciado, en multiplos de 8 (con el 4 y el 12 de escalon) ───────── */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 48px;
	--sp-8: 64px;

	/* ── medidas del armazon ──────────────────────────────────────────────── */
	--radius: 6px;
	--radius-sm: 4px;
	--max: 1360px;
	--gutter: 32px;
	--rail: 280px;
	--rail-gap: 44px;
	--header-h: 72px;
	--prose: 900px;

	/* Transiciones: solo color, borde y fondo. Nada que mueva ni escale. */
	--t: .15s ease;

	/* La sombra del titular de la portada no es decoracion: separa el titular
	   del arte que asoma por la derecha. Aqui el velo ya es marfil casi opaco
	   donde cae el texto, asi que en vez de una sombra es un halo del mismo
	   marfil; en el tema oscuro vuelve a ser negra. */
	--sombra-titular: 0 0 60px rgba(244, 239, 228, .9);

	/* El velo lateral del hero de portada.
	
	   Es un token y no un valor escrito en .hero__velo porque sus opacidades no
	   sirven para los dos temas. En oscuro el velo y el arte son los dos
	   oscuros y el texto es claro: con un 28 % a la derecha basta, y de hecho
	   es lo que deja lucir el paisaje. Aqui el texto es oscuro y el arte
	   tambien, y el velo es lo unico que los separa.

	   El suelo lo pone el kicker, que es oro sobre el arte: por debajo del 92 %
	   se cae de 4,5:1. Por eso los dos primeros topes van altos, y los dos
	   ultimos caen a plomo: pasado el texto no hay nada que proteger y el velo
	   solo tapa el paisaje.

	   Los topes del medio **no van en porcentaje**, y esa es la parte que
	   importa. El texto mide mas o menos lo mismo en pixeles a cualquier
	   anchura —el titular esta topado a 14ch y la entradilla a 48ch—, asi que
	   la fraccion del ancho que ocupa crece segun se estrecha la ventana. Con
	   un 40 % fijo el velo caia a tiempo a 1440 px y tarde a 950, donde la
	   entradilla llega al 54 %: medido, daba 3,35:1. Anclados a la columna, el
	   corte va siempre unos 60 px detras del texto mas largo, de 900 px de
	   ancho en adelante.

	   --hero-col es el margen que la columna deja a su izquierda: cero mientras
	   la ventana sea mas estrecha que --max, y la mitad del sobrante cuando es
	   mas ancha. Sin el, en un monitor muy ancho el texto empezaria mas a la
	   derecha que el corte.

	   Por debajo de 900 px manda el override del breakpoint de movil, porque
	   alli el texto llega hasta el borde y ya no hay nada que descubrir.

	   Medido sobre los pixeles de la portada ya pintada, no sobre el token. */
	--hero-col: max(0px, (100% - var(--max)) / 2);

	/* ═══ POR QUE EL VELO CLARO USA TINTA OSCURA Y NO --bg ═══
	   (corregido el 31/08/2026)

	   Antes este velo era crema al 97-93 % sobre los primeros 720 px y el arte
	   solo respiraba en el tercio derecho. Y el arte tiene el mago y el castillo
	   **a la izquierda**, o sea justo debajo del titular: se tapaba la mitad
	   buena y quedaba a la vista el cielo vacio.

	   El arte es nocturno y el texto del tema claro es oscuro, asi que aclarar
	   ese velo sin mas dejaba el titular ilegible. La salida es tratar el hero
	   como una **isla oscura tambien en tema claro**: velo con tinta propia y
	   texto claro encima (ver `.hero`). Asi el velo puede bajar al 30 % y se ve
	   el cuadro entero.

	   No se usa `--bg` porque en tema claro es crema; aqui hace falta un color
	   que sea oscuro en los dos temas. */
	--tinta-hero: 14 16 20;
	--velo-hero: linear-gradient(90deg,
		rgb(var(--tinta-hero) / .86) 0,
		rgb(var(--tinta-hero) / .70) calc(var(--hero-col) + 520px),
		rgb(var(--tinta-hero) / .34) calc(var(--hero-col) + 900px),
		rgb(var(--tinta-hero) / .24) 100%);

	/* ── alias de la nomenclatura anterior ──────────────────────────────────
	   El resto de la hoja, las siete paginas propias y las plantillas twig
	   siguen nombrando los colores en castellano. En vez de pasar cientos de
	   selectores a los nombres nuevos —y arriesgarse a dejar uno sin cambiar—
	   los viejos apuntan aqui. Un solo sitio manda, que es lo que se pedia.

	   Apuntan al token, no a su valor, asi que el cambio de tema los arrastra
	   sin que haya que repetirlos en el bloque de abajo. */
	--fondo: var(--bg);
	--fondo-alt: var(--bg-elevated);
	--fondo-suave: var(--surface);
	--tinta: var(--text-primary);
	--tinta-fuerte: var(--text-primary);
	--tinta-titulo: var(--text-primary);
	--tinta-dato: var(--text-primary);
	--tinta-suave: var(--text-secondary);
	--tinta-media: var(--text-secondary);
	--tinta-apagada: var(--text-secondary);
	--tinta-tenue: var(--text-muted);
	--tinta-debil: var(--text-muted);
	--tinta-fantasma: var(--text-muted);
	--oro: var(--gold);
	--oro-claro: var(--gold-light);
	--oro-oscuro: var(--gold-dark);
	--rojo: var(--danger);
	--verde: var(--success);
	--filete: var(--border);
	--filete-tenue: var(--border-soft);
	--filete-oro: var(--border-gold);
	--titular: var(--font-display);
	--cuerpo: var(--font-ui);
	--radio: var(--radius);
	--ancho: var(--max);
}

/* ══════════════════════════════════════════════════════════════════════════
   Tema oscuro

   El claro es el defecto y este se aplica solo si el visitante lo pidio y
   quedo guardado. Por eso el atributo marca el oscuro y no el claro: sin
   JavaScript, sin localStorage o antes de que corra nada, lo que se ve es
   :root, que es lo que el sitio quiere ensenar de entrada.

   Aqui **no** hay `@media (prefers-color-scheme: dark)` a proposito. Quien
   tenga el sistema en oscuro veria el sitio en oscuro sin haberlo elegido, y
   eso deja de ser una decision del sitio. Cambiar de idea es una linea.

   Este bloque **solo redefine tokens**. Si alguna vez hace falta escribir un
   selector aqui es que un color se colo fuera del apartado 1: lo que toca
   entonces es sacarlo de alli, no pintarlo dos veces. Las medidas, la
   tipografia y los alias no se repiten: no cambian con el tema.

   [data-tema] y :root tienen la misma especificidad, asi que **este bloque
   tiene que ir despues**. Movido arriba, no pinta nada.
   ══════════════════════════════════════════════════════════════════════════ */

[data-tema="oscuro"] {
	color-scheme: dark;

	/* Casi negro y calido, en la misma familia que el marfil de arriba. */
	--bg: #0b0a08;
	--bg-elevated: #11100d;
	--surface: #15120e;
	--surface-hover: #19150f;

	--border: #30281d;
	--border-soft: #221c15;
	--border-gold: #5a4323;

	--text-primary: #f1ebdf;
	--text-secondary: #a89e8e;
	/* #766e61 en el encargo, subido a #847c6f: sobre --surface daba 3,71:1 y
	   AA pide 4,5 para texto normal. Asi da 4,53. Medido, no a ojo. */
	--text-muted: #847c6f;

	/* Sobre casi negro el oro si puede ser texto sin retocarlo, asi que aqui
	   los tres papeles son el oro de marca y sus dos vecinos. */
	--gold: #d6a044;
	--gold-light: #ebc372;
	--gold-dark: #9d7436;
	--gold-tint: rgba(214, 160, 68, .08);

	--success: #71976f;
	--danger: #c85c52;
	--purpura: #a98ad4;

	--sombra-titular: 0 0 60px rgba(0, 0, 0, .75);

	/* Ver la nota del token en :root: aqui el velo puede adelgazar hasta el
	   28 % sin comprometer nada, porque el texto es claro sobre un arte oscuro
	   y no necesita que el velo lo separe. */
	--velo-hero: linear-gradient(90deg,
		color-mix(in srgb, var(--bg) 95%, transparent) 0%,
		color-mix(in srgb, var(--bg) 80%, transparent) 42%,
		color-mix(in srgb, var(--bg) 28%, transparent) 72%,
		color-mix(in srgb, var(--bg) 58%, transparent) 100%);
}

/* — el revelado circular al cambiar de tema —
 *
 * El navegador saca una foto de la pagina antes del cambio y otra despues, y
 * las cruza con un fundido. Aqui no queremos fundido: queremos que el tema
 * nuevo entre por un circulo que crece desde el boton. Asi que se apagan las
 * dos animaciones de fabrica y campos.js anima el recorte a mano.
 *
 * El orden importa: la foto nueva va encima de la vieja **en los dos
 * sentidos** del cambio. Si se invirtiera al volver a oscuro, el circulo se
 * veria como un agujero abriendose en vez de como una capa extendiendose, y
 * las dos direcciones dejarian de parecer el mismo gesto.
 *
 * El `mix-blend-mode: normal` no es redundante: el valor de fabrica hace que
 * las dos capas se mezclen mientras se solapan, y con una encima de la otra
 * eso solo produce un destello lechoso a mitad de camino. */
::view-transition-old(root),
::view-transition-new(root) {
	animation: none;
	mix-blend-mode: normal;
}
::view-transition-old(root) { z-index: 1; }
::view-transition-new(root) { z-index: 2; }

/* — reset y base — */
*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text-primary);
	font-family: var(--font-ui);
	font-size: 15px;
	line-height: 1.65;
	-webkit-font-smoothing: antialiased;
}

/* Aqui **no** va `overflow-x: hidden`.
 *
 * Estuvo puesto como red de seguridad contra el desbordamiento horizontal, y
 * el efecto secundario era grave: cuando un eje es `hidden` el otro pasa a
 * `auto`, o sea que el <body> se convierte en el contenedor de scroll y
 * **`position: sticky` deja de funcionar en toda la pagina**. Comprobado:
 * window.scrollTo(0, 900) dejaba scrollY en 0 y el panel lateral no pegaba.
 *
 * Ya no hace falta. El desbordamiento esta atajado donde se produce: las
 * tablas de MyAAC se desplazan dentro de si mismas, las rejillas usan
 * minmax(min(x, 100%), 1fr) y las filas de datos parten las palabras largas.
 * Medido: ninguna de las 27 rutas se sale a 320 px. */

img { display: block; max-width: 100%; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 500;
	line-height: 1.15;
	color: var(--text-primary);
	margin: 0;
}

h1 { font-size: clamp(34px, 4.4vw, 52px); letter-spacing: -.01em; }
h2 { font-size: clamp(24px, 2.6vw, 31px); }
h3 { font-size: 21px; }
h4 { font-size: 17px; font-family: var(--font-ui); font-weight: 600; }

p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
	color: var(--gold);
	text-decoration: none;
	transition: color var(--t);
}
a:hover { color: var(--gold-light); }

small { font-size: 13px; }

/* El foco se ve siempre, tambien sobre oro. */
:focus-visible {
	outline: 2px solid var(--gold);
	outline-offset: 2px;
	border-radius: 2px;
}

::selection { background: color-mix(in srgb, var(--gold) 30%, transparent); }

/* La cabecera es fija, asi que un elemento al que se navegue —por un anclaje,
   o porque el tabulador lo trae a la vista— aterriza **debajo de ella** y no se
   ve. scroll-margin-top le dice al navegador cuanto aire dejar por encima.
   Se pone en todo lo que puede ser destino: los `id` y lo que recibe el foco. */
[id],
a[href], button, input, select, textarea, summary {
	scroll-margin-top: calc(var(--header-h) + var(--sp-4));
}

/* Prosa: solo donde hay texto seguido de verdad. */
.entradilla, .noticia__cuerpo, .NewsText, .prosa { font-family: var(--font-prose); }

/* Enlace de salto: invisible hasta que el tabulador lo enfoca. */
.salto {
	position: absolute;
	left: -9999px;
	z-index: 100;
}
.salto:focus {
	left: 16px;
	top: 12px;
	padding: 10px 18px;
	background: var(--fondo-alt);
	border: 1px solid var(--oro);
	border-radius: var(--radio);
	color: var(--oro-claro);
}

/* ══════════════════════════════════════════════════════════════════════════
   Cabecera
   ══════════════════════════════════════════════════════════════════════════ */

.cabecera {
	position: sticky;
	top: 0;
	z-index: 40;
	background: color-mix(in srgb, var(--bg) 92%, transparent);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--border);
}

.cabecera__fila {
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
	min-height: var(--header-h);
	display: flex;
	align-items: center;
	gap: var(--sp-5);
}

/* — marca — */

.marca {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	color: var(--text-primary);
	flex-shrink: 0;
}
.marca:hover { color: var(--text-primary); }

.marca__emblema { width: 32px; height: 32px; }

.marca__texto { display: flex; flex-direction: column; line-height: 1.1; }

.marca__nombre {
	font-family: var(--font-display);
	font-size: 23px;
	font-weight: 600;
	letter-spacing: .04em;
}

.marca__lema {
	font-size: 10px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* — pestañas — */

.pestanas {
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	margin-right: auto;
}

.pestana {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
	white-space: nowrap;
	transition: color var(--t), background-color var(--t);
}
.pestana:hover { color: var(--text-primary); background: var(--surface); }

/* El activo no se distingue solo por el color: lleva su filete debajo. */
.pestana--activa,
.pestana--activa:hover {
	color: var(--gold-light);
	background: transparent;
	position: relative;
}
.pestana--activa::after {
	content: "";
	position: absolute;
	left: var(--sp-3);
	right: var(--sp-3);
	bottom: -1px;
	height: 2px;
	background: var(--gold);
}

/* — desplegable "Browse": lo que antes era la columna izquierda — */

.mas { position: relative; }

.mas__boton {
	cursor: pointer;
	list-style: none;
}
.mas__boton::-webkit-details-marker { display: none; }

.mas__flecha { width: 14px; height: 14px; transition: transform var(--t); }
.mas[open] .mas__boton { color: var(--text-primary); background: var(--surface); }
.mas[open] .mas__flecha { transform: rotate(180deg); }

.mas__panel {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: repeat(3, minmax(150px, 1fr));
	gap: var(--sp-5) var(--sp-6);
	min-width: 560px;
	padding: var(--sp-5) var(--sp-6);
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.mas__rotulo,
.cajon__rotulo {
	margin: 0 0 var(--sp-3);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold-dark);
}

.mas__lista,
.cajon__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.mas__lista a {
	display: block;
	padding: 5px 0;
	font-size: 14px;
	color: var(--text-secondary);
}
.mas__lista a:hover,
.mas__lista a.activo { color: var(--gold-light); }

/* — pastilla de estado — */

.estado {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0;
	padding: 5px var(--sp-3);
	border: 1px solid var(--border);
	border-radius: 100px;
	background: var(--surface);
	font-size: 12.5px;
	color: var(--text-secondary);
	white-space: nowrap;
}

.estado__punto {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--text-muted);
	flex-shrink: 0;
}
.estado--activo .estado__punto { background: var(--success); }
.estado--caido .estado__punto { background: var(--danger); }

.estado__dato { color: var(--text-primary); }
.estado__sep { margin-inline: 6px; color: var(--text-muted); }

/* El save baja de jerarquia: pesa menos que el recuento de jugadores. */
.estado__save {
	padding-left: var(--sp-2);
	border-left: 1px solid var(--border);
	color: var(--text-muted);
	font-size: 12px;
}

/* — acciones — */

.cabecera__acciones {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex-shrink: 0;
}

/* — interruptor de tema — */

.tema {
	display: grid;
	place-items: center;
	/* 44 px, como el resto de botones de la cabecera y como la hamburguesa. */
	width: 44px;
	height: 44px;
	padding: 0;
	flex-shrink: 0;
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	color: var(--text-secondary);
	cursor: pointer;
	transition: color var(--t), border-color var(--t), background-color var(--t);
}
.tema:hover {
	color: var(--gold-light);
	border-color: var(--border-gold);
	background: var(--surface);
}
.tema svg { width: 18px; height: 18px; }

/* El boton ensena el icono del tema al que se VA, no el del que se esta: lo
   que se pulsa es el destino.
 *
 * Los dos iconos y las dos etiquetas van los cuatro en el HTML y es el CSS
 * quien tapa la mitad que sobra. Podria hacerlo campos.js, pero campos.js va
 * al final del <body> y hasta entonces el boton estaria diciendo lo que no
 * es. Asi el nombre accesible ya sale bien en el primer pintado. */
html:not([data-tema="oscuro"]) .tema__sol,
html:not([data-tema="oscuro"]) .tema__dice--claro,
[data-tema="oscuro"] .tema__luna,
[data-tema="oscuro"] .tema__dice--oscuro { display: none; }

/* — hamburguesa: solo en movil — */

.hamburguesa {
	display: none;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	cursor: pointer;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
}
.hamburguesa span {
	display: block;
	width: 17px;
	height: 1.5px;
	background: var(--text-secondary);
	transition: transform var(--t), opacity var(--t);
}
.hamburguesa[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.hamburguesa[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.hamburguesa[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* — cajon de movil — */

.cajon {
	position: fixed;
	top: var(--header-h);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 39;
	overflow-y: auto;
	padding: var(--sp-5) var(--sp-4) var(--sp-8);
	background: var(--bg);
	border-top: 1px solid var(--border);
}
.cajon[hidden] { display: none; }

.cajon__nav {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.cajon__rotulo { margin-bottom: var(--sp-2); }

.cajon__lista a {
	display: block;
	/* 44 px de alto util: el minimo comodo para un dedo. */
	padding: 11px var(--sp-2);
	font-size: 15px;
	color: var(--text-secondary);
	border-bottom: 1px solid var(--border-soft);
}
.cajon__lista a.activo { color: var(--gold-light); }

.cajon__acciones {
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	margin-top: var(--sp-6);
}

/* ══════════════════════════════════════════════════════════════════════════
   Hero de pagina

   Todas las interiores empiezan igual: donde estoy (miga), que es esto (H1) y
   una linea de que se hace aqui. Compacto a proposito — el hero grande es
   cosa de la portada, y repetirlo en cada pagina solo empuja el contenido
   fuera de la primera pantalla.
   ══════════════════════════════════════════════════════════════════════════ */

.hero-pagina {
	border-bottom: 1px solid var(--border);
	background:
		radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--gold) 5%, transparent), transparent 55%),
		var(--bg-elevated);
}

.hero-pagina__fila {
	max-width: var(--max);
	margin-inline: auto;
	padding: var(--sp-7) var(--gutter);
}

.miga {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin: 0 0 var(--sp-3);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.miga a { color: var(--gold-dark); }
.miga a:hover { color: var(--gold); }
.miga__sep { color: var(--border-gold); }

.hero-pagina__titulo { margin: 0; }

.hero-pagina__nota {
	max-width: 60ch;
	margin: var(--sp-3) 0 0;
	font-family: var(--font-prose);
	font-size: 15.5px;
	color: var(--text-secondary);
}

/* ══════════════════════════════════════════════════════════════════════════
   Rejilla

   Contenido y panel de contexto. Sin columna izquierda: esa navegacion vive
   en el desplegable de la cabecera y en el cajon de movil.
   ══════════════════════════════════════════════════════════════════════════ */

.disposicion {
	max-width: var(--max);
	margin-inline: auto;
	padding: var(--sp-7) var(--gutter) var(--sp-8);
	display: grid;
	/* minmax(0, 1fr) y no 1fr: con 1fr una tabla ancha estira la columna y
	   saca la pagina de cuadro. Asi se queda dentro y se desplaza ella. */
	grid-template-columns: minmax(0, 1fr) var(--rail);
	gap: var(--rail-gap);
	align-items: start;
}

/* Sin panel: una sola columna, estrecha y centrada, que es como se lee. */
.disposicion--sola {
	grid-template-columns: minmax(0, var(--prose));
	justify-content: center;
}

/* A toda anchura: el mapa y poco mas. */
.disposicion--ancha {
	grid-template-columns: minmax(0, 1fr);
	max-width: none;
}

.principal { min-width: 0; }

/* ══════════════════════════════════════════════════════════════════════════
   Panel de contexto (SidebarCard)

   Compacto a proposito: 280 px y ninguna caja que llene la pantalla. Lo de
   aqui es contexto, no contenido — si una tarjeta crece hasta competir con la
   columna principal, esta mal.
   ══════════════════════════════════════════════════════════════════════════ */

.cajas {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
	min-width: 0;
	position: sticky;
	top: calc(var(--header-h) + var(--sp-5));
}

.caja,
.panel {
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

/* El oro va en el filete, nunca en el relleno: una caja dorada entera se come
   la pagina. */
.caja--destacada,
.panel--oro {
	border-color: var(--border-gold);
	background: linear-gradient(var(--gold-tint), var(--gold-tint)), var(--surface);
}

.caja__titulo,
.panel__titulo {
	margin: 0 0 var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--border);
	font-family: var(--font-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	text-align: left;
}
.caja--destacada .caja__titulo,
.panel--oro .panel__titulo { border-bottom-color: var(--border-gold); }

/* El adorno del template anterior ya no pinta nada: el filete del titulo hace
   ese trabajo. Se deja neutralizado para no tocar secciones.php. */
.adorno { display: none; }

/* — criatura y jefe potenciados — */

.boost {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-4);
}

.boost__pieza { margin: 0; text-align: center; }

.boost__marco {
	height: 76px;
	margin-bottom: var(--sp-2);
	display: grid;
	place-items: center;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
/* Tamaño fijo, no `auto`: con auto la imagen mide 0x0 hasta que carga, y una
   caja de 0x0 nunca entra en pantalla, asi que el cargador diferido no
   disparaba y el sprite no salia nunca. */
.boost__marco img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.boost__tipo {
	display: block;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
	margin-bottom: 2px;
}

.boost figcaption strong {
	font-size: 13.5px;
	font-weight: 500;
	color: var(--text-primary);
	line-height: 1.3;
	display: block;
}

/* — tienda — */

.tienda__texto {
	margin: 0 0 var(--sp-4);
	font-size: 14px;
	color: var(--text-secondary);
}

/* — top de niveles — */

.top {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.top__fila {
	display: grid;
	grid-template-columns: 22px 1fr;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--border-soft);
}
.top__fila:last-child { border-bottom: 0; }

.top__puesto {
	font-size: 12px;
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
	text-align: right;
}
/* Solo el primero lleva oro. Tres puestos dorados no destacan a ninguno. */
.top__fila--1 .top__puesto { color: var(--gold); }

/* El retrato se va: a 280 px de panel, cinco retratos de 40 px hacen la
   tarjeta el doble de alta sin aportar nada que el nombre no diga. */
.top__retrato { display: none; }

.top__datos { display: flex; flex-direction: column; min-width: 0; }

.top__nombre {
	font-size: 14px;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.top__nombre:hover { color: var(--gold-light); }

.top__meta {
	font-size: 12px;
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.top__nivel::after { content: " · "; }

.top__mas, .caja__mas {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--sp-4);
	font-size: 13px;
	font-weight: 500;
	color: var(--gold);
}
.top__mas::after, .caja__mas::after { content: "→"; }

/* ══════════════════════════════════════════════════════════════════════════
   Componentes compartidos

   Todo lo de aqui lo usan a la vez las siete paginas propias, las plantillas
   twig sobreescritas y el panel de contexto. Es lo que evita que cada pagina
   traiga su propio CSS para dibujar la misma fila de etiqueta y valor.
   ══════════════════════════════════════════════════════════════════════════ */

/* — pila: separacion vertical uniforme entre secciones — */

.pila {
	display: flex;
	flex-direction: column;
	gap: var(--sp-7);
}

.pila--corta { gap: var(--sp-5); }

/* — SectionHeader — */

.seccion__cabeza {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-4);
	margin-bottom: var(--sp-4);
}

.seccion__cabeza h2,
.seccion__cabeza h3 {
	margin: 0;
	flex-shrink: 0;
}

/* El filete sale del titulo y llega al borde: ata el titulo a su seccion en
   vez de dejarlo flotando encima. */
.seccion__linea {
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, var(--border), transparent);
}

.seccion__nota {
	margin: calc(var(--sp-4) * -1) 0 var(--sp-4);
	font-size: 14px;
	color: var(--text-secondary);
}

/* — rotulo pequeño en versalitas — */

.rotulo {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold-dark);
}

/* — Card — */

.tarjeta {
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.tarjeta--oro {
	border-color: var(--border-gold);
	background: linear-gradient(var(--gold-tint), var(--gold-tint)), var(--surface);
}

.tarjeta__titulo {
	margin: 0 0 var(--sp-2);
	font-size: 19px;
}

.tarjeta__texto,
.panel__texto {
	margin: 0 0 var(--sp-4);
	font-size: 14px;
	color: var(--text-secondary);
	max-width: 56ch;
}
.tarjeta__texto:last-child { margin-bottom: 0; }

.tarjeta__cabeza {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--border);
}
.tarjeta__cabeza > :first-child { margin: 0; }

/* — DataRow: etiqueta a la izquierda, valor a la derecha — */

.datos {
	display: flex;
	flex-direction: column;
}

.datos__fila {
	display: grid;
	grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
	gap: var(--sp-4);
	align-items: baseline;
	padding: 11px 0;
	border-bottom: 1px solid var(--border-soft);
}
.datos__fila:last-child { border-bottom: 0; }

/* min-width: 0 y break-word en las dos celdas.
   La columna de la etiqueta tiene un minimo de 120 px; una etiqueta con una
   palabra mas larga que eso —"!deposit <amount>" en /commands, la direccion
   del servidor en /downloads— no ensancha la columna, se sale de ella y
   arrastra la pagina entera. Medido a 320 px. */
.datos__etiqueta {
	min-width: 0;
	overflow-wrap: break-word;
	font-size: 13.5px;
	color: var(--text-secondary);
}

.datos__valor {
	min-width: 0;
	overflow-wrap: break-word;
	font-size: 14.5px;
	color: var(--text-primary);
	font-variant-numeric: tabular-nums;
}

.datos__valor--oro { color: var(--gold-light); }
/* Acento de PvP: apagado, no rojo de alarma. */
.datos__valor--rojo { color: var(--danger); }
.datos__valor--vacio { color: var(--text-muted); font-style: italic; }

.datos__nota {
	display: block;
	font-size: 12.5px;
	color: var(--text-muted);
}

/* Variante para listas de comandos: la etiqueta es la orden que se teclea, no
   un rotulo, asi que va en oro y con la serif. La columna tiene tope pero no
   suelo (minmax(0, 200px)): una orden larga no puede empujar la pagina. */
.datos--clave .datos__fila { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
.datos--clave .datos__etiqueta {
	font-family: var(--font-display);
	font-size: 17px;
	color: var(--gold-light);
}
.datos--clave .datos__valor {
	font-size: 14px;
	color: var(--text-secondary);
}

/* A dos columnas cuando la ficha es larga. */
.datos--doble {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: var(--sp-7);
}
.datos--doble .datos__fila { grid-template-columns: minmax(110px, 45%) minmax(0, 1fr); }

/* — Stat: cifra grande con rotulo — */

.cifras {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
	gap: var(--sp-5);
}

.cifra__dato {
	margin: 0;
	font-family: var(--font-display);
	font-size: 30px;
	line-height: 1.1;
	color: var(--text-primary);
}
.cifra__dato--oro { color: var(--gold-light); }
.cifra__dato--rojo { color: var(--danger); }

/* Dentro de `.contenido` los dos modificadores perdian: `.contenido p` tiene
   especificidad (0,1,1) y ellos (0,1,0), asi que la cifra salia en gris. Se
   notaba en «My account», donde el saldo de coins llevaba tiempo sin verse en
   oro sin que nadie lo notara. */
.contenido .cifra__dato--oro { color: var(--gold-light); }
.contenido .cifra__dato--rojo { color: var(--danger); }

.cifra__extra {
	font-family: var(--font-ui);
	font-size: 12px;
	color: var(--text-muted);
	margin-left: 6px;
}

.cifra__rotulo {
	margin: var(--sp-1) 0 0;
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* — StatusBadge — */

.marca-estado {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border: 1px solid var(--border);
	border-radius: 100px;
	background: var(--bg-elevated);
	font-size: 12px;
	font-weight: 500;
	color: var(--text-secondary);
	white-space: nowrap;
}
.marca-estado::before {
	content: "";
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: currentColor;
}
.marca-estado--ok      { color: var(--success); border-color: color-mix(in srgb, var(--success) 35%, transparent); }
.marca-estado--aviso   { color: var(--gold); border-color: var(--border-gold); }
.marca-estado--peligro { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 35%, transparent); }

/* — Accordion — */

.acordeon {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	overflow: hidden;
}

.acordeon + .acordeon { margin-top: var(--sp-3); }

.acordeon__boton {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	/* 44 px de alto util, tambien con el dedo. */
	padding: var(--sp-4) var(--sp-5);
	background: none;
	border: 0;
	font-family: var(--font-ui);
	font-size: 15px;
	font-weight: 500;
	color: var(--text-primary);
	text-align: left;
	cursor: pointer;
	transition: color var(--t), background-color var(--t);
}
.acordeon__boton:hover { background: var(--surface-hover); color: var(--gold-light); }

/* El signo cambia con aria-expanded: el estado no depende solo de la forma. */
.acordeon__signo {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	position: relative;
	color: var(--gold-dark);
}
.acordeon__signo::before,
.acordeon__signo::after {
	content: "";
	position: absolute;
	inset: 50% 0 auto 0;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--t), opacity var(--t);
}
.acordeon__signo::after { transform: rotate(90deg); }
.acordeon__boton[aria-expanded="true"] .acordeon__signo { color: var(--gold); }
.acordeon__boton[aria-expanded="true"] .acordeon__signo::after { transform: rotate(0deg); }

.acordeon__cuerpo {
	padding: 0 var(--sp-5) var(--sp-5);
	font-size: 14.5px;
	color: var(--text-secondary);
	max-width: 72ch;
}
.acordeon__cuerpo[hidden] { display: none; }

/* — buscador — */

.buscador {
	position: relative;
	max-width: 420px;
}
.buscador input {
	width: 100%;
	padding-left: 40px;
}
.buscador svg {
	position: absolute;
	left: var(--sp-3);
	top: 50%;
	transform: translateY(-50%);
	width: 17px;
	height: 17px;
	color: var(--text-muted);
	pointer-events: none;
}

/* — filtros en fila — */

.filtros {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
}

.filtro {
	padding: 7px var(--sp-4);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 100px;
	font-family: var(--font-ui);
	font-size: 13px;
	color: var(--text-secondary);
	cursor: pointer;
	transition: color var(--t), border-color var(--t), background-color var(--t);
}
.filtro:hover { color: var(--text-primary); border-color: var(--border-gold); }
.filtro[aria-pressed="true"] {
	color: var(--gold-light);
	border-color: var(--border-gold);
	background: var(--gold-tint);
}

/* — estado vacio — */

.vacio {
	padding: var(--sp-7) var(--sp-5);
	text-align: center;
	color: var(--text-muted);
	border: 1px dashed var(--border);
	border-radius: var(--radius);
	font-size: 14px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Contenido de MyAAC

   A partir de aqui los selectores son del markup que genera MyAAC, no del
   diseño. Se re-viste sin tocar el PHP de las paginas.
   ══════════════════════════════════════════════════════════════════════════ */

.contenido { min-width: 0; }
.contenido > :first-child { margin-top: 0; }
.contenido > :last-child { margin-bottom: 0; }

.contenido h1,
.contenido h2 {
	font-size: 34px;
	color: var(--tinta-titulo);
	margin: 44px 0 20px;
}
.contenido h3 { font-size: 25px; color: var(--tinta-dato); margin: 32px 0 14px; }
.contenido h4 { font-size: 20px; color: var(--tinta-dato); margin: 26px 0 12px; }

.contenido p { margin: 0 0 16px; color: var(--tinta-suave); }

.contenido a:hover { color: var(--oro-claro); }


/* — tablas —
   Todas las paginas de comunidad (highscores, online, casas, guildas, bans,
   personajes) salen como .TableContainer > table. */
.contenido .TableContainer,
.contenido .InnerTableContainer {
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 28px;
}

.contenido table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	background: none;
}

.contenido table th,
.contenido thead th {
	text-align: left;
	font-family: var(--cuerpo);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tinta-tenue);
	background: none;
	padding: 11px 12px;
	border-bottom: 1px solid color-mix(in srgb, var(--gold-light) 32%, transparent);
}
/* MyAAC mete <b> y <font> dentro de las cabeceras. */
.contenido thead th * {
	font-weight: inherit;
	font-size: inherit;
	color: inherit;
}

.contenido table td {
	padding: 13px 12px;
	background: none;
	border: 0;
	border-bottom: 1px solid color-mix(in srgb, var(--text-primary) 9%, transparent);
	color: var(--tinta-apagada);
	vertical-align: middle;
}
.contenido table tr:last-child td { border-bottom: 0; }
.contenido table tr:hover td { background: var(--fondo-suave); }

/* La primera columna suele ser el puesto o el nombre. */
.contenido table td:first-child { color: var(--tinta-dato); }

/* Los formularios de MyAAC tambien usan tablas; ahi el rayado molesta. */
.contenido form table tr:hover td,
.contenido form table tr:nth-child(even):hover td { background: none; }

/* — formularios del nucleo: etiqueta encima, no al lado —
   El markup heredado es una tabla de dos columnas:

       <tr><td class="LabelV"><label>Real Name:</label></td>
           <td><input ...></td></tr>

   Con la etiqueta a la izquierda el ojo tiene que ir y volver en horizontal en
   cada campo, y la columna de etiquetas fija un ancho que en movil no cabe. El
   resto del sitio pone la etiqueta encima, asi que estas tablas se aplanan a
   bloques para que sigan el mismo patron.

   Se acota con :has(td.LabelV) para no tocar las tablas de datos —highscores,
   casas, guildas—, que si deben seguir siendo tablas. #}
   ------------------------------------------------------------------------- */
.contenido table:has(td.LabelV),
.contenido table:has(td.LabelV) > tbody,
.contenido table:has(td.LabelV) > tbody > tr,
.contenido table:has(td.LabelV) > tr {
	display: block;
	width: 100%;
}

.contenido table:has(td.LabelV) > tbody > tr,
.contenido table:has(td.LabelV) > tr { margin-bottom: var(--sp-4); }

.contenido table:has(td.LabelV) td {
	display: block;
	width: auto !important;
	padding: 0;
	border: 0;
	background: none;
}

.contenido table:has(td.LabelV) td.LabelV { padding-bottom: 7px; }

/* Ya no es una celda de ancho fijo, asi que el nowrap sobra y el ancho manda
   la etiqueta, no la tabla. */
.contenido table:has(td.LabelV) td.LabelV label,
.contenido table:has(td.LabelV) td.LabelV span {
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
	white-space: normal;
}

/* — etiquetas de formulario de MyAAC (LabelV / LabelH) —
   Son <td> con ancho fijo que llevan el rotulo del campo. Sin nowrap
   colapsan a min-content y el texto sale en vertical, una letra por linea. */
.contenido .LabelV,
.contenido [class^="LabelV"],
.contenido [class*=" LabelV"] {
	white-space: nowrap;
	width: 1%;
	padding-right: 20px;
	color: var(--tinta-tenue);
	font-size: 13px;
}
.contenido .LabelH span { color: var(--tinta-tenue); }

/* — cabeceras ornamentadas de MyAAC (CaptionContainer) —
   Son ocho divs de esquinas y bordes con imagenes de CipSoft. Se apagan las
   piezas y se deja solo el texto, convertido en el titulo de seccion. */
.contenido .CaptionContainer,
.contenido .CaptionInnerContainer {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}
.contenido .CaptionEdgeLeftTop,
.contenido .CaptionEdgeRightTop,
.contenido .CaptionEdgeLeftBottom,
.contenido .CaptionEdgeRightBottom,
.contenido .CaptionBorderTop,
.contenido .CaptionBorderBottom,
.contenido .CaptionVerticalLeft,
.contenido .CaptionVerticalRight {
	display: none;
}
.contenido .Text {
	background: none;
	font-family: var(--titular);
	font-size: 12px;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--oro);
	padding: 0 0 14px;
	margin: 32px 0 16px;
	border-bottom: 1px solid var(--filete);
}

/* — noticias — */
.contenido .NewsHeadline,
.contenido .NewsHeadlineBackground {
	background: none;
	border: 0;
}
.contenido .NewsHeadline {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 0 12px;
	margin: 36px 0 14px;
	border-bottom: 1px solid var(--filete);
}
.contenido .NewsHeadlineDate {
	font-size: 11px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--tinta-tenue);
	font-feature-settings: 'tnum';
}
.contenido .NewsHeadlineText {
	font-family: var(--titular);
	font-size: 26px;
	color: var(--tinta-titulo);
}
.contenido .NewsHeadlineText b,
.contenido .NewsHeadlineText strong { font-weight: 400; }
.contenido .NewsHeadlineIcon { flex: none; }

/* — menu vertical de las paginas de cuenta — */
.contenido .vertical-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 0;
	margin: 0 0 28px;
	list-style: none;
	border: 0;
}
.contenido .vertical-menu a {
	display: block;
	font-family: var(--titular);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 9px 16px;
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	color: var(--tinta-media);
	background: none;
}
.contenido .vertical-menu a:hover {
	border-color: var(--oro);
	color: var(--oro-claro);
	background: color-mix(in srgb, var(--gold-light) 10%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Formularios y botones

   El campo es label encima e input debajo, nunca la etiqueta a la izquierda:
   con la etiqueta al lado el ojo tiene que ir y volver en horizontal en cada
   campo, y la columna de etiquetas obliga a un ancho fijo que en movil no
   cabe. Es tambien lo que MyAAC hacia con <td class="LabelV">, y por eso esa
   clase se re-viste aqui abajo en vez de dejarla como estaba.
   ══════════════════════════════════════════════════════════════════════════ */

/* — FormField — */

.campo {
	display: flex;
	flex-direction: column;
	gap: 7px;
	margin-bottom: var(--sp-4);
}

.campo__etiqueta,
label {
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 500;
	color: var(--text-secondary);
}

.campo__pista {
	font-size: 12.5px;
	color: var(--text-muted);
}

/* El error va debajo del campo, en rojo apagado y con texto: el color no es
   el unico aviso. */
.campo__error,
.FormFieldError {
	display: block;
	font-size: 12.5px;
	color: var(--danger);
}
.FormFieldError:empty { display: none; }

.campo--invalido input,
.campo--invalido select { border-color: var(--danger); }

/* `input:not([type])` es imprescindible, no un extra.
   Muchos campos del nucleo de MyAAC se escriben sin atributo `type`
   —info_rlname, info_location, new_email, delete_name, character_name...— y
   `input[type=text]` **no los alcanza**, aunque el navegador los trate como
   texto. Sin esta linea salian con el estilo por defecto de Windows: caja
   gris, borde biselado y nada del sistema de diseño. */
input:not([type]),
input[type=text],
input[type=email],
input[type=password],
input[type=number],
input[type=url],
input[type=tel],
input[type=date],
input[type=search],
select,
textarea {
	width: 100%;
	/* Un campo de texto de 900 px no se lee mejor que uno de 460. */
	max-width: var(--campo-max);
	min-height: 46px;
	padding: 11px 14px;
	font-family: var(--font-ui);
	font-size: 15px;
	color: var(--text-primary);
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	caret-color: var(--gold);
	transition: border-color var(--t), background-color var(--t);
}

/* El desplegable nativo pinta la lista con el fondo del elemento: si es
   translucido, Windows la resuelve a blanco sobre blanco. Opaco a la fuerza. */
select {
	background-color: var(--bg-elevated);
	/* Flecha propia: la nativa se pinta con los colores del sistema y en un
	   tema oscuro sale negra sobre negro. */
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23766e61' stroke-width='2' stroke-linecap='round' stroke-linejoin='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: 17px;
	padding-right: 38px;
}
.contenido select option,
.contenido select optgroup { background: var(--bg-elevated); color: var(--text-primary); }
.contenido select option:checked { background: var(--gold-dark); color: var(--bg); }

textarea { min-height: 120px; resize: vertical; }

input:hover, select:hover, textarea:hover { border-color: var(--border-gold); }
input:focus, select:focus, textarea:focus {
	border-color: var(--gold);
	background: var(--surface);
	outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-muted); }

/* — Radio y Checkbox — */

input[type=checkbox], input[type=radio] {
	width: 16px;
	height: 16px;
	min-height: 0;
	accent-color: var(--gold-dark);
	flex-shrink: 0;
}

/* La fila entera es zona de pulsado, no solo el cuadrito de 16 px. */
.opcion,
.OptionContainer {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	min-height: 40px;
	margin-right: var(--sp-5);
}
.opcion label,
.OptionContainer label {
	cursor: pointer;
	color: var(--text-primary);
	font-weight: 400;
	text-transform: capitalize;
}

.opciones {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2) var(--sp-5);
}

/* Casilla de conformidad: caja propia, porque es una decision, no un dato. */
.conforme {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	padding: var(--sp-4);
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}
.conforme input { margin-top: 3px; }
.conforme label { color: var(--text-primary); font-weight: 400; }

/* — separador dentro de un formulario — */

.campo-grupo {
	margin-top: var(--sp-6);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--border);
}
.campo-grupo:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

.campo-grupo__titulo {
	margin: 0 0 var(--sp-4);
	font-family: var(--font-ui);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold-dark);
}

/* Dos campos por fila cuando caben. */
.campo-par {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--sp-4);
}

/* — Button —
   Tres pesos: oro (accion principal), liso (secundaria) y texto (terciaria).
   El borde grueso en todo era lo que hacia que ningun boton destacara. */

.boton,
.Button,
input[type=submit],
input[type=button],
input[type=reset],
button.boton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	/* 44 px: el minimo comodo para un dedo. */
	min-height: 44px;
	padding: 10px var(--sp-5);
	font-family: var(--font-ui);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .01em;
	text-transform: none;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--text-primary);
	cursor: pointer;
	width: auto;
	max-width: none;
	transition: color var(--t), border-color var(--t), background-color var(--t);
}

.boton:hover,
.Button:hover,
input[type=submit]:hover,
input[type=button]:hover,
input[type=reset]:hover,
button.boton:hover {
	background: var(--surface-hover);
	border-color: var(--border-gold);
	color: var(--text-primary);
}

/* Primario: filete de oro y un tinte apenas perceptible detras. */
.boton--oro,
.Button,
input[type=submit] {
	border-color: var(--border-gold);
	background: var(--gold-tint);
	color: var(--gold-light);
}
.boton--oro:hover,
.Button:hover,
input[type=submit]:hover {
	border-color: var(--gold);
	background: color-mix(in srgb, var(--gold) 16%, transparent);
	color: var(--gold-light);
}

/* Secundario. */
.boton--liso {
	border-color: var(--border);
	background: transparent;
	color: var(--text-secondary);
}
.boton--liso:hover { color: var(--text-primary); background: var(--surface); }

/* Terciario: solo texto. */
.boton--texto {
	min-height: 0;
	padding: 4px 0;
	border: 0;
	background: none;
	color: var(--gold);
}
.boton--texto:hover { background: none; border: 0; color: var(--gold-light); }

.boton--grande { min-height: 50px; padding: 13px var(--sp-6); font-size: 15px; }
.boton--bloque,
.tarjeta__boton { display: flex; width: 100%; }

/* Las paginas propias llaman .tarjeta__boton al boton principal de su
   tarjeta: es el primario del sistema, no un boton aparte. */
.tarjeta__boton {
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin-top: var(--sp-4);
	padding: 10px var(--sp-5);
	font-family: var(--font-ui);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0;
	text-transform: none;
	border: 1px solid var(--border-gold);
	border-radius: var(--radius-sm);
	background: var(--gold-tint);
	color: var(--gold-light);
	transition: color var(--t), border-color var(--t), background-color var(--t);
}
.tarjeta__boton:hover { border-color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); color: var(--gold-light); }
.tarjeta__boton--apagado {
	border-color: var(--border);
	background: none;
	color: var(--text-muted);
	pointer-events: none;
}

.boton[aria-disabled=true],
.Button[aria-disabled=true],
input[type=submit]:disabled,
button:disabled {
	opacity: .45;
	cursor: not-allowed;
}

/* Fila de acciones al pie de un formulario o una tarjeta. */
.acciones {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}
.acciones--separadas {
	padding-top: var(--sp-5);
	border-top: 1px solid var(--border);
}
/* Los formularios de una sola accion de MyAAC no deben romper la fila. */
.acciones form { display: contents; }

/* — ver/ocultar contraseña (campos.js) — */

.campo-clave {
	position: relative;
	display: block;
	width: 100%;
}
.campo-clave input { padding-right: 48px; }

.ojo {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY(-50%);
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: var(--radius-sm);
	background: none;
	color: var(--text-muted);
	cursor: pointer;
}
.ojo:hover { background: var(--surface-hover); color: var(--gold-light); border: 0; }
.ojo[aria-pressed="true"] { color: var(--gold); }
.ojo svg { width: 18px; height: 18px; }

/* ══════════════════════════════════════════════════════════════════════════
   Colores que MyAAC usa como clase suelta
   ══════════════════════════════════════════════════════════════════════════ */

.contenido .red, .contenido .redb { color: var(--rojo); }
.contenido .green, .contenido .greenb { color: var(--verde); }
.contenido .orange { color: var(--oro-claro); }
.contenido .yellow { color: var(--oro); }
.contenido .grey { color: var(--tinta-debil); }
.contenido .white, .contenido .whites { color: var(--tinta-dato); }

/* ══════════════════════════════════════════════════════════════════════════
   Pie
   ══════════════════════════════════════════════════════════════════════════ */

.pie {
	border-top: 1px solid color-mix(in srgb, var(--gold-light) 18%, transparent);
	padding: 44px;
}

.pie__fila {
	max-width: var(--ancho);
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.marca--pie { margin-right: auto; }
.marca--pie .marca__emblema { width: 26px; height: 26px; opacity: .8; }
.marca--pie .marca__nombre {
	font-size: 15px;
	letter-spacing: .16em;
	color: var(--tinta-apagada);
}

.pie__enlaces {
	display: flex;
	gap: 22px;
	font-size: 12px;
	letter-spacing: .08em;
	flex-wrap: wrap;
}
.pie__enlaces a { color: var(--tinta-tenue); }
.pie__enlaces a:hover { color: var(--oro-claro); }

.pie__nota {
	margin: 0;
	font-size: 11px;
	color: var(--tinta-fantasma);
}
.pie__nota a { color: var(--tinta-debil); }

.pie__template {
	max-width: var(--ancho);
	margin: 22px auto 0;
	font-size: 12px;
}

/* ══════════════════════════════════════════════════════════════════════════
   Adaptacion a pantallas menores

   Tres saltos y no mas:

     1100   el panel de contexto baja debajo del contenido, en fila
      900   la cabecera se convierte en marca + hamburguesa, y sale el cajon
      560   todo a una columna; las tablas de MyAAC pasan a filas

   Probado hasta 320 px de ancho. En ningun tramo la pagina se desplaza en
   horizontal: lo que no cabe se desplaza dentro de su propia caja.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1240px) {
	:root { --gutter: 24px; --rail-gap: 32px; --rail: 260px; }
}

/* — tablet: el panel pasa a ser una franja debajo — */

@media (max-width: 1100px) {
	.disposicion,
	.disposicion--sola {
		grid-template-columns: minmax(0, 1fr);
		justify-content: stretch;
	}

	.cajas {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--sp-4);
	}
	.cajas > .caja { flex: 1 1 260px; }

	/* Con el desplegable a tres columnas se sale de la pantalla. */
	.mas__panel { grid-template-columns: repeat(2, minmax(140px, 1fr)); min-width: 420px; }
}

/* — movil: cabecera reducida y cajon — */

@media (max-width: 900px) {
	.pestanas,
	.cabecera__acciones { display: none; }

	.hamburguesa { display: flex; }

	.cabecera__fila { justify-content: space-between; gap: var(--sp-4); }

	/* El interruptor no se esconde con las acciones ni se va al cajon: el
	   revelado necesita que su punto de origen este en pantalla, y meterlo
	   dentro del menu obligaria a abrirlo para cambiar de tema. El margen
	   automatico se come el hueco libre antes que el space-between, asi que
	   queda pegado a la hamburguesa en vez de suelto en medio. */
	.tema { margin-left: auto; }

	/* Aqui el texto del hero ocupa el ancho entero, asi que el velo no puede
	   adelgazar por la derecha: tiene que separar en toda la banda.

	   Sube parejo en los dos temas, y con la misma tinta oscura que el resto
	   del hero. Antes esto era crema y solo para el tema claro; desde que el
	   hero es oscuro siempre (ver --velo-hero), crema aqui dejaria texto claro
	   sobre fondo claro. */
	:root {
		--velo-hero: linear-gradient(90deg,
			rgb(var(--tinta-hero) / .82) 0%,
			rgb(var(--tinta-hero) / .74) 50%,
			rgb(var(--tinta-hero) / .70) 100%);
	}

	/* El cajon abierto congela el fondo: sin esto la pagina de detras sigue
	   desplazandose bajo el dedo. */
	body.cajon-abierto { overflow: hidden; }

	.hero-pagina__fila { padding-block: var(--sp-6); }

	.datos--doble { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
	.campo-par { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 560px) {
	:root { --gutter: 16px; --header-h: 64px; }

	.marca__lema { display: none; }
	.marca__nombre { font-size: 21px; }

	.hero-pagina__fila { padding-block: var(--sp-5); }
	.hero-pagina__nota { font-size: 14.5px; }

	.cajas { flex-direction: column; }
	.cajas > .caja { flex: 1 1 auto; }

	.boost { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

	/* Los botones importantes ocupan la fila entera: a esta anchura un boton
	   de 120 px en medio de la nada es mas dificil de acertar. */
	.acciones .boton,
	.acciones .Button,
	.acciones input[type=submit] { width: 100%; }

	.filtros { gap: 6px; }
	.filtro { padding: 7px var(--sp-3); }

	.pie__fila { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
	.marca--pie { margin-right: 0; }
}

/* — tablas de MyAAC a filas —
   Por debajo de 560 una tabla de siete columnas no cabe de ninguna manera. En
   vez de encogerla hasta lo ilegible, cada fila se apila y cada celda lleva
   su rotulo delante, sacado de `data-rotulo` cuando lo hay. Las que no lo
   tienen se desplazan dentro de su caja, que sigue siendo mejor que sacar la
   pagina de cuadro. */

@media (max-width: 560px) {
	.contenido table { font-size: 13px; }
	.contenido table th,
	.contenido table td { padding: 8px 6px; }

	.tabla-envoltura {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
}

/* Las tablas de MyAAC se desplazan dentro de si mismas.
   Comprobado en /highscores a 375 px: la tabla mide 516 px y sacaba la pagina
   de cuadro (scrollWidth 532 sobre 375). No se pueden envolver en un div —el
   markup lo genera el nucleo—, asi que la tabla **es** su propio contenedor:
   `display: block` la convierte en caja de bloque y las filas siguen
   maquetandose como tabla dentro de una tabla anonima.
   Solo la de fuera: las anidadas vuelven a ser tablas normales, que si no
   cada nivel se convierte en otro carril de desplazamiento. */
@media (max-width: 900px) {
	.contenido table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.contenido table table {
		display: table;
		overflow-x: visible;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   Resacas del markup de tibiacom

   MyAAC arrastra HTML de presentacion de los tiempos de tibia.com. Tres
   cosas que hay que desactivar a mano porque no salen de ninguna hoja de
   estilo, sino de atributos y de estilos en linea del propio PHP.
   ══════════════════════════════════════════════════════════════════════════ */

/* 1. bgcolor en las filas.
      Cada <tr> lleva bgcolor="#271e14" (cabecera) o #241d16/#2a2119 (rayado).
      Es un atributo de presentacion: pierde contra cualquier regla CSS, pero
      hay que escribirla, y sobre el <tr>, no sobre el <td>. Sin esto vuelven
      las bandas marrones. */
.contenido table tr { background: none; }

/* 2. Cabeceras de tabla sin <th>.
      MyAAC marca la fila de titulos poniendo class="white" en sus celdas, no
      con <th>. :has() permite reconocer esa fila y darle el mismo trato que a
      un thead: versalitas, filete de oro y nada de rayado al pasar. */
.contenido table tr:has(> td.white) > td,
.contenido table tr:has(> td.whites) > td {
	font-family: var(--cuerpo);
	font-weight: 400;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--tinta-tenue);
	padding: 11px 12px;
	border-bottom: 1px solid color-mix(in srgb, var(--gold-light) 32%, transparent);
}
.contenido table tr:has(> td.white) > td b,
.contenido table tr:has(> td.whites) > td b {
	font-weight: 400;
	font-size: inherit;
	letter-spacing: inherit;
}
.contenido table tr:has(> td.white):hover > td,
.contenido table tr:has(> td.whites):hover > td { background: none; }

/* 3. Retratos de outfit posicionados en absoluto.
      El PHP los emite con style="position:absolute;margin-top:-50px;
      margin-left:-30px" para recortarlos dentro de la tabla estrecha de
      tibiacom. Aqui las filas son mas altas y el recorte deja la figura fuera
      de su celda, 18 px a la izquierda. Como el estilo viene en linea, la
      unica forma de ganarle es !important. */
.contenido table img[src*="outfit"] {
	position: static !important;
	margin: 0 auto !important;
	max-height: 48px;
	width: auto;
}

/* ══════════════════════════════════════════════════════════════════════════
   4. Los envoltorios de sombra de tibia.com

   MyAAC envuelve cada tabla en una torre de divs que dibujaban la sombra
   biselada del tibia.com de 2007:

       TableShadowContainerRightTop > TableShadowRightTop
       TableContentAndRightShadow   > TableContentContainer > table.TableContent
       TableShadowContainer         > TableBottomShadow
                                    > TableBottomLeftShadow
                                    > TableBottomRightShadow

   Cada uno lleva su gif repetido en un `style="background-image:url(...)"`
   **en linea**, asi que no basta con `background:none`: hay que ganarle a un
   estilo en linea y eso solo se hace con !important. Sin esto el gif se
   repite a lo ancho y la tabla sale a rayas verticales con el texto encima.

   Ojo con el nombre: la regla anterior era `[class*="shadow"]` en minusculas
   y los selectores de atributo distinguen mayusculas, asi que no casaba ni
   una sola de estas clases.
   ══════════════════════════════════════════════════════════════════════════ */

.contenido [class*="Shadow"] { background-image: none !important; }

/* Las piezas de 0 px de alto solo existian para colocar el bisel. */
.contenido .TableShadowContainer,
.contenido .TableShadowContainerRightTop,
.contenido .TableShadowRightTop,
.contenido .TableShadowLeftTop,
.contenido .TableBottomShadow,
.contenido .TableBottomLeftShadow,
.contenido .TableBottomRightShadow { display: none !important; }

/* Estas dos si llevan el contenido dentro: se quedan, sin fondo ni relleno. */
.contenido .TableContentAndRightShadow,
.contenido .TableContentContainer {
	background: none !important;
	padding: 0;
	margin: 0;
	width: 100%;
}

/* 5. Fondos en linea en las filas.
      Ademas del atributo bgcolor, algunas filas traen
      style="background-color:#1a150e". Otra vez estilo en linea, otra vez
      !important. */
.contenido table tr { background: none !important; }

/* 6. Tablas anidadas.
      MyAAC mete tablas dentro de tablas para maquetar. Una celda que contiene
      otra tabla es andamiaje, no un dato: sin esto hereda relleno y filete y
      se ven marcos dobles alrededor de cada bloque. */
.contenido table td:has(table),
.contenido table td:has(> div) {
	padding: 0;
	border-bottom: 0;
}

/* La tabla interior es la que de verdad lleva los datos. */
.contenido table.TableContent { width: 100%; }
.contenido .centralizeContent { text-align: center; }

/* 7. Marcos y cintillos que MyAAC pinta con `style="background-image:..."`.
      Mismo caso que las sombras: estilo en linea, hace falta !important. El
      de noticias era el unico que quedaba visible (262x63 con el gif
      repetido); los ocho de Caption ya estaban ocultos, pero se les quita el
      fondo igual para que no dependa del display. */
.contenido .NewsHeadlineBackground,
.contenido .NewsHeadline,
.contenido [class^="Caption"] { background-image: none !important; }

/* ══════════════════════════════════════════════════════════════════════════
   Paginas propias

   Las siete paginas que el diseño trae y MyAAC no: guerras de guilda,
   descargas, tienda, mapa, informacion del servidor, tramos de experiencia y
   comandos. El markup es nuestro (templates/solera/pages/*.php).

   **Aqui solo va lo que es de estas paginas y de ninguna otra.** Todo lo
   compartido —pila, tarjeta, panel, datos, rotulo, seccion, aviso— esta
   arriba, en "Componentes compartidos", y estas paginas lo usan tal cual.

   Antes esta seccion redefinia .pila, .tarjeta, .datos, .rotulo y
   .seccion__cabeza por segunda vez, con otras medidas. Como iba despues,
   ganaba: los componentes de arriba no llegaban a pintar nunca y cada cambio
   habia que hacerlo en dos sitios. Eso es lo que se ha quitado.
   ══════════════════════════════════════════════════════════════════════════ */

/* — rejillas de estas paginas — */

.rejilla {
	display: grid;
	/* min(x, 100%) y no x a secas: con minmax(280px, 1fr) la columna se queda
	   en 280 px fijos, y en una pantalla de 320 con margen de 16 a cada lado
	   no cabe y saca la pagina de cuadro. Comprobado en /guild-wars. */
	grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
	gap: var(--sp-6);
	align-items: start;
}
.rejilla--tarjetas { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--sp-4); }
.rejilla--ancha { grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

/* Marca a la derecha del titulo de seccion ("LIVE", "3 ACTIVE"...). */
.seccion__marca {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--gold);
	flex-shrink: 0;
}
.seccion__marca--vivo { color: var(--danger); }

/* Piezas sueltas de tarjeta que solo usan estas paginas. */
.tarjeta__nota {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.tarjeta__filete {
	height: 1px;
	background: var(--border);
	margin: var(--sp-3) 0;
	border: 0;
}

/* — barra de progreso (tramos de experiencia) — */

.barra {
	display: block;
	height: 6px;
	background: var(--bg-elevated);
	border: 1px solid var(--border-soft);
	border-radius: 3px;
	overflow: hidden;
}
/* Degradado de oro muy contenido: la barra informa, no decora. */
.barra__relleno {
	display: block;
	height: 100%;
	background: linear-gradient(90deg, var(--gold-dark), var(--gold));
}

/* — tramo de experiencia —
   Rango, barra y multiplicador. Lo usan /exp-stages y /ots-info: estaba
   escrito dos veces en linea, con columnas de 170/80 en una y 150/70 en la
   otra, o sea que las mismas barras salian de distinto tamaño segun la
   pagina. Ahora es una sola definicion.

   Las columnas laterales van con minmax(0, x): con anchura fija, un rango
   como "Level 130 and above" empujaba la fila fuera de la pantalla. */
.tramos { display: flex; flex-direction: column; }

.tramo {
	display: grid;
	grid-template-columns: minmax(0, 150px) minmax(0, 1fr) minmax(0, 70px);
	align-items: center;
	gap: var(--sp-5);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--border-soft);
}
.tramo:last-child { border-bottom: 0; }

.tramo__rango {
	font-size: 14px;
	color: var(--text-secondary);
	font-variant-numeric: tabular-nums;
}

.tramo__mult {
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--gold-light);
	text-align: right;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
	/* A esta anchura la barra no dice nada util: fuera, y los dos datos en fila. */
	.tramo { grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-3); }
	.tramo .barra { display: none; }
}

/* — marcador de guerra — */

.guerra {
	padding: var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}

.guerra__fila {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: var(--sp-5);
}
.guerra__lado { min-width: 0; }
.guerra__lado--izq { text-align: right; }
.guerra__nombre {
	display: block;
	font-family: var(--font-display);
	font-size: 22px;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.guerra__miembros {
	display: block;
	margin-top: 3px;
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.guerra__tanteo {
	display: flex;
	align-items: baseline;
	gap: var(--sp-3);
	font-family: var(--font-display);
	font-variant-numeric: tabular-nums;
}
.guerra__punto { font-size: 32px; }
.guerra__punto--a { color: var(--gold-light); }
.guerra__punto--b { color: var(--danger); }
.guerra__guion { font-size: 15px; color: var(--text-muted); }

/* La barra de la guerra son dos trozos, no un relleno sobre un carril. */
.guerra__barra {
	display: flex;
	height: 6px;
	margin: var(--sp-4) 0 var(--sp-3);
	border-radius: 3px;
	overflow: hidden;
	background: var(--bg-elevated);
}
.guerra__barra span:first-child { background: var(--gold); }
.guerra__barra span:last-child { background: var(--danger); flex: 1; }

.guerra__pie {
	display: flex;
	justify-content: space-between;
	gap: var(--sp-3);
	flex-wrap: wrap;
	font-size: 10.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);
}

/* — lista de posiciones (top killers) — */

.puesto {
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-3) var(--sp-1);
	border-bottom: 1px solid var(--border-soft);
}
.puesto:last-child { border-bottom: 0; }
.puesto:hover { background: var(--surface-hover); }
.puesto__n {
	font-family: var(--font-display);
	font-size: 18px;
	font-variant-numeric: tabular-nums;
	color: var(--text-muted);
}
/* Solo el primero. Tres puestos dorados no destacan a ninguno. */
.puesto:nth-child(1) .puesto__n { color: var(--gold); }
.puesto__datos { min-width: 0; }
.puesto__nombre {
	display: block;
	font-size: 14px;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.puesto__sub {
	display: block;
	margin-top: 2px;
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--text-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.puesto__cifra {
	font-family: var(--font-display);
	font-size: 19px;
	font-variant-numeric: tabular-nums;
	color: var(--danger);
}

/* — pasos numerados (como conectar) — */

.paso {
	display: flex;
	gap: var(--sp-4);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--border-soft);
}
.paso:last-child { border-bottom: 0; }
.paso__n {
	flex: none;
	width: 20px;
	font-family: var(--font-display);
	font-size: 19px;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
}
.paso__texto {
	font-size: 14px;
	color: var(--text-secondary);
}

/* — lamina: hueco para arte — */

.lamina {
	border: 1px solid var(--border);
	border-radius: var(--radius);
	overflow: hidden;
	display: grid;
	place-items: center;
	min-height: 240px;
	background: var(--bg-elevated);
}
.lamina img { width: 100%; height: 100%; object-fit: contain; }
.lamina__vacia {
	padding: var(--sp-7);
	text-align: center;
	font-size: 13.5px;
	color: var(--text-muted);
	max-width: 46ch;
}

/* — entradilla de pagina —
   Va en serif porque es prosa seguida, y limitada en anchura porque una linea
   de 120 caracteres no se lee. */
.entradilla {
	max-width: 68ch;
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--text-secondary);
	margin: 0 0 var(--sp-6);
}

@media (max-width: 620px) {
	.guerra__fila { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
	.guerra__lado--izq { text-align: left; }
	.guerra__tanteo { justify-content: flex-start; }
	.guerra__punto { font-size: 26px; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Paginas de cuenta y FAQ

   Estilos de las plantillas twig que sobreescribimos (templates/solera/twig/).
   El menu vertical de 150 px del nucleo ya no existe, asi que las mañas que
   habia aqui para meterlo en cinta —`#account-manage #one { float: none }` y
   compañia— se han ido con el.
   ══════════════════════════════════════════════════════════════════════════ */

/* — highscores: la columna de filtros, arriba y pegada —
 *
 * El markup es una tabla de maquetacion de cuatro columnas y los filtros van
 * en la ultima (`<td width="15%" valign="top">`). Dos cosas fallaban:
 *
 *   1. `valign="top"` no servia de nada porque la regla general de
 *      `.contenido table td` pone `vertical-align: middle`. La caja quedaba
 *      flotando a media altura de una columna larguisima.
 *   2. Al bajar por una lista de cientos de filas, los filtros se perdian de
 *      vista y habia que volver arriba del todo para cambiar de habilidad.
 *
 * La tabla de dentro es la que se pega, no el <td>: `position: sticky` sobre
 * una celda de tabla no es fiable entre navegadores; sobre un bloque dentro de
 * la celda, si.
 *
 * Se acota con la clase de ruta del <body> para no tocar ninguna otra pagina. */
.ruta-highscores .contenido td[width="15%"] {
	vertical-align: top;
	/* 15% de la columna son 132 px y "Choose a vocation" partia en dos lineas.
	   La tabla de al lado tiene sitio de sobra. */
	width: 168px !important;
}

/* Lo pegajoso es la envoltura que crea campos.js, **no cada tabla**.
   Pegar las dos por separado las manda a la misma altura y la segunda tapa a
   la primera: al desplazar desaparecian siete de las nueve habilidades. */
.filtros-hs {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-5));
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: var(--sp-4);
	/* El panel mide 635 px con las nueve habilidades y las siete vocaciones.
	   En una pantalla de portatil (720 px de alto util) no cabe entre la
	   cabecera y el borde inferior, y el final quedaria cortado sin forma de
	   llegar a el. Que se desplace por dentro cuando no quepa. */
	max-height: calc(100vh - var(--header-h) - var(--sp-6));
	overflow-y: auto;
	scrollbar-width: thin;
}

/* El <br> que el nucleo pone entre las dos tablas sobra: ahora las separa el
   filete de la cabecera de la segunda. */
.filtros-hs > br { display: none; }

.filtros-hs table { margin: 0; }
.filtros-hs table + table { margin-top: var(--sp-4); }

/* Las filas de enlaces no necesitan el relleno de una tabla de datos. */
.filtros-hs td { padding: 2px 0 !important; border: 0 !important; }
.filtros-hs tr:hover td { background: none !important; }

.filtros-hs td.white b {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--gold-dark);
}
.filtros-hs td.white {
	padding-bottom: var(--sp-2) !important;
	border-bottom: 1px solid var(--border) !important;
}

.filtros-hs a {
	display: block;
	padding: 5px 0;
	font-size: 13.5px;
	color: var(--text-secondary);
}
.filtros-hs a:hover { color: var(--gold-light); }
.filtros-hs br { display: none; }

/* — noticias (twig/news.html.twig) —
   Tarjeta editorial: fecha y autor arriba en pequeño, titular, cuerpo en
   serif y el enlace al hilo al pie. Sin marco de gif ni tabla alrededor. */

.noticia {
	padding-bottom: var(--sp-6);
	margin-bottom: var(--sp-6);
	border-bottom: 1px solid var(--border);
}
.noticia:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }

.noticia__cabeza {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-2);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
}
.noticia__icono { width: 16px; height: 16px; flex-shrink: 0; }
.noticia__autor::before { content: "· "; }

.noticia__titulo {
	margin: 0 0 var(--sp-3);
	font-size: clamp(24px, 3vw, 32px);
}

.noticia__cuerpo {
	max-width: 70ch;
	font-size: 15.5px;
	line-height: 1.8;
	color: var(--text-secondary);
}
.noticia__cuerpo a { text-decoration: underline; text-underline-offset: 2px; }

.noticia__mas {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: var(--sp-4);
	font-size: 13px;
	font-weight: 500;
	color: var(--gold);
}
.noticia__mas::after { content: "→"; }

/* Un token largo dentro de <code> no puede empujar la pagina. */
.contenido code, .contenido kbd, .contenido pre {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* — util — */

.visualmente-oculto {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Los indicadores de ok/error que enseña el JavaScript de MyAAC. Salen con
   `display: none` y ese script los muestra: aqui solo se les da tamaño. */
/* Caja que envuelve un input junto a su icono de validacion.
   Mismo patron que el selector de pais con su bandera: el icono va posicionado
   sobre el campo, no en el flujo. Antes el <img> vivia dentro del <label>, que
   en `.campo` (flex en columna) queda ENCIMA del input, asi que el visto bueno
   aparecia suelto sobre la etiqueta en vez de dentro del campo. */
.campo__caja {
	position: relative;
	display: block;
	max-width: var(--campo-max);
}

.indicador {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	width: 13px;
	height: 13px;
	margin: 0;
	pointer-events: none;
}

/* Hueco a la derecha para que el texto no pase por debajo del icono. */
.campo__caja input { padding-right: 36px; }

/* — aviso — */

.aviso {
	padding: var(--sp-4) var(--sp-5);
	background: var(--surface);
	border: 1px solid var(--border);
	border-left: 2px solid var(--gold);
	border-radius: var(--radius-sm);
	font-size: 14.5px;
	color: var(--text-secondary);
}
.aviso--peligro { border-left-color: var(--danger); }
.aviso--oro { border-color: var(--border-gold); background: linear-gradient(var(--gold-tint), var(--gold-tint)), var(--surface); }
.aviso strong { color: var(--text-primary); font-weight: 500; }
.aviso__nota { color: var(--text-muted); font-size: 13.5px; }
.aviso .boton { margin-top: var(--sp-3); }

/* — cajas de error y de exito (twig/error_box, twig/success) — */

.caja-error { margin-bottom: var(--sp-5); }
.caja-error__titulo {
	margin: 0 0 var(--sp-2);
	font-weight: 600;
	color: var(--danger);
}
.caja-error__lista {
	margin: 0;
	padding-left: var(--sp-4);
	color: var(--text-secondary);
}
.caja-error__lista li + li { margin-top: var(--sp-1); }

.exito { max-width: 680px; margin-bottom: var(--sp-4); }
.exito .tarjeta__texto { color: var(--text-secondary); }

/* — alta y entrada — */

.alta, .entrada { display: block; }

.alta__tarjeta, .entrada__tarjeta {
	max-width: 680px;
	padding: var(--sp-6);
}
.entrada__tarjeta { max-width: 520px; }

.entrada__pie {
	max-width: 520px;
	margin-top: var(--sp-4);
	font-size: 14px;
	color: var(--text-secondary);
}

/* Bandera del pais **dentro** del campo, antes del nombre.
 *
 * No se puede meter de verdad en las <option>: un <select> nativo no pinta
 * imagenes dentro de la lista de forma portable. Lo que si se puede es
 * colocarla sobre el campo cerrado, que es donde el ojo la busca. Antes
 * colgaba suelta debajo del desplegable.
 *
 * Vale para los dos sitios donde aparece: nuestra plantilla de alta
 * (.campo__conbandera) y la de cambiar informacion, que es del nucleo y no
 * trae envoltura — de ahi el :has sobre el <td>. */
.campo__conbandera,
.contenido td:has(> #account_country) { position: relative; }

#account_country { padding-left: 40px; }

#account_country_img {
	position: absolute;
	left: 13px;
	top: 50%;
	transform: translateY(-50%);
	width: 18px;
	height: auto;
	pointer-events: none;
}

/* — gestion de cuenta — */

.cuenta {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

/* Se queda pegada al desplazar, a la misma altura que la primera tarjeta del
   panel derecho: 72 de cabecera + 24 de aire, igual que `.cajas`.
   El fondo opaco no es decoracion — sin el, el contenido se ve pasar por
   debajo de la barra. Y el margen negativo compensa el relleno de arriba, para
   que en reposo siga alineada con «Boosted Today» en vez de bajar 24 px.

   Esto no funcionaba mientras `body` llevaba `overflow-x: hidden`: eso
   convierte al body en contenedor de scroll y anula `position: sticky` en toda
   la pagina. Ver la nota junto a `body`. */
.nav-cuenta {
	position: sticky;
	top: var(--header-h);
	z-index: 20;
	display: flex;
	align-items: center;
	gap: var(--sp-1);
	padding-top: var(--sp-5);
	margin-top: calc(var(--sp-5) * -1);
	padding-bottom: var(--sp-2);
	background: var(--bg);
	border-bottom: 1px solid var(--border);
	overflow-x: auto;
	scrollbar-width: none;
}
.nav-cuenta::-webkit-scrollbar { display: none; }

.nav-cuenta__enlace {
	padding: var(--sp-2) var(--sp-3);
	border-radius: var(--radius-sm);
	font-size: 14px;
	font-weight: 500;
	color: var(--text-secondary);
	white-space: nowrap;
	transition: color var(--t), background-color var(--t);
}
.nav-cuenta__enlace:hover { color: var(--text-primary); background: var(--surface); }
/* :target marca la seccion a la que apuntas sin necesidad de JavaScript. */
.nav-cuenta__enlace:focus-visible { color: var(--gold-light); }

/* Al pulsar una seccion del menu, el navegador la lleva al borde de arriba de
   la ventana — que aqui esta **tapado por la cabecera fija (72 px) y por el
   propio menu pegajoso (72 px mas)**. Medido: el titulo aterrizaba en y=6, o
   sea escondido detras de los dos.

   scroll-margin-top le dice al navegador cuanto aire dejar por encima al
   llevar el elemento a su sitio. Es lo unico que hace falta; no requiere
   JavaScript. */
/* En la pagina de cuenta hay dos barras pegajosas, no una: la cabecera (72) y
   el menu de secciones (72 mas). Comprobado: sin esto el titulo de "Security"
   aterrizaba en y=6, tapado por las dos. */
.cuenta [id],
.cuenta a[href], .cuenta button, .cuenta input, .cuenta select {
	scroll-margin-top: calc(var(--header-h) + 72px + var(--sp-4));
}

.nav-cuenta__salir {
	margin-left: auto;
	padding-left: var(--sp-4);
	white-space: nowrap;
}

/* — resumen de la cuenta —
 *
 * Lo primero que se ve al entrar: la bienvenida con las dos acciones que
 * alguien viene a hacer, y debajo una franja con las tres cifras de la cuenta.
 *
 * La bienvenida **no** lleva filete de oro aunque sea la cabecera de la
 * pagina. Justo debajo puede salir la tarjeta de "Protect your account", que
 * si lo lleva porque hay algo que hacer; con las dos doradas y pegadas, la
 * que pide accion deja de distinguirse de la que solo saluda. Aqui el oro lo
 * pone el boton y basta.
 *
 * Las cifras reutilizan la tipografia del componente Stat (.cifra__dato,
 * .cifra__rotulo, .cifra__extra) y solo anaden su colocacion, igual que hace
 * la franja de la portada. Definir aqui un segundo tamano de cifra es lo que
 * haria que cambiar el componente no se notara en esta pagina. */

/* — estado de la cuenta —

   Se llama `estado-cuenta` y no `estado` porque `.estado` ya existe: es el
   widget de estado del servidor de la cabecera (template.php). Al llamarse
   igual, este bloque, que va despues en el archivo, le pisaba el layout.

   Sustituye a la tarjeta de bienvenida y a la rejilla de tres cifras que habia
   antes. Una sola fila: a la izquierda el estado de VIP con su fecha de fin, a
   la derecha el saldo con su boton. */
.estado-cuenta {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-5);
	flex-wrap: wrap;
}

.estado-cuenta__vip {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	min-width: 0;
}

/* Es un sprite de 64 px: sin `pixelated` el navegador lo interpola y se ve
   sucio al lado del resto del arte del juego. */
.estado-cuenta__icono {
	flex: none;
	image-rendering: pixelated;
	padding: var(--sp-2);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--bg-elevated);
}

.estado-cuenta__titular {
	margin: var(--sp-1) 0 0;
	font-size: 20px;
	font-weight: 600;
}

/* Van con `.contenido` delante por la misma razon que las cifras: `.contenido p`
   tiene especificidad (0,1,1) y le gana a cualquier modificador de una clase
   suelta sobre un <p>. Todo modificador de color que se ponga en un parrafo
   dentro del contenido necesita este prefijo o sale en gris. */
.contenido .estado-cuenta__titular--ok { color: var(--success); }
.contenido .estado-cuenta__titular--no { color: var(--danger); }

.estado-cuenta__nota {
	margin: var(--sp-1) 0 0;
	font-size: 14px;
	color: var(--text-muted);
}

.estado-cuenta__coins {
	flex: none;
	text-align: right;
	padding: var(--sp-3) var(--sp-4);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg-elevated);
}

.estado-cuenta__coins .cifra__dato { margin: var(--sp-1) 0 var(--sp-3); }

/* — lista de personajes — */

.personajes {
	list-style: none;
	margin: 0;
	padding: 0;
}

.personaje {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-4);
	padding: var(--sp-4) 0;
	border-bottom: 1px solid var(--border-soft);
}
.personaje:first-child { padding-top: 0; }
.personaje:last-child { border-bottom: 0; padding-bottom: 0; }
.personaje--borrado { opacity: .55; }

.personaje__ficha { min-width: 0; }

.personaje__nombre {
	font-family: var(--font-display);
	font-size: 20px;
	color: var(--text-primary);
}
.personaje__nombre:hover { color: var(--gold-light); }

.personaje__meta {
	margin: 2px 0 0;
	font-size: 13px;
	color: var(--text-secondary);
}
.personaje__meta--tenue { color: var(--text-muted); font-size: 12.5px; }

.personaje__lado {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	flex-shrink: 0;
}

/* — tabla limpia (registro de acciones) — */

.tabla-limpia {
	width: 100%;
	border-collapse: collapse;
	font-size: 13.5px;
}
.tabla-limpia th {
	text-align: left;
	padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
	border-bottom: 1px solid var(--border);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text-muted);
	white-space: nowrap;
}
.tabla-limpia td {
	padding: var(--sp-2) var(--sp-3) var(--sp-2) 0;
	border-bottom: 1px solid var(--border-soft);
	color: var(--text-secondary);
	vertical-align: top;
}
.tabla-limpia tr:last-child td { border-bottom: 0; }

/* — ficha de personaje (twig/characters.html.twig) — */

.ficha { display: flex; flex-direction: column; gap: var(--sp-5); }

.ficha__admin { margin: 0; font-size: 13px; }

/* Identidad: retrato a la izquierda, nombre y marcas a la derecha.
   El nucleo lo tenia en posicion absoluta con margenes escritos a mano, y el
   <div> colgaba dentro de una <table> fuera de toda <tr> — HTML invalido que
   el navegador resuelve sacandolo de la tabla. Por eso flotaba. */
.ficha__cabecera {
	display: flex;
	align-items: center;
	gap: var(--sp-5);
}

/* El servicio de outfits (outfit-images.ots.me) devuelve **siempre un lienzo
   de 64x64 con el sprite metido en el cuadrante de abajo a la derecha**. Sin
   recortar, el personaje sale pequeño y descentrado dentro del circulo.

   Medido con los seis looktypes que de verdad tienen los jugadores de este
   servidor (75, 128, 129, 139, 974, 1460): la caja del contenido va de
   (29..33, 31..32) a (63..64, 64). O sea el cuadrante (32,32)-(64,64).

   Para centrar ese cuadrante de 32x32 en un circulo de 84:

       escala    x2            ->  imagen a 128 px
       el cuadrante cae en     (64,64)-(128,128)
       origen    (84-64)/2 - 64 = -54 px   ->  10 px de aire por lado

   El nucleo usaba -60 y por eso el personaje salia pegado al borde.

   Ojo si algun dia se enseñan criaturas aqui: un monstruo grande (el demonio,
   looktype 35) llena el lienzo entero y este recorte le cortaria media figura.
   Para eso haria falta otro encuadre. */
.ficha__retrato {
	position: relative;
	flex: none;
	width: 84px;
	height: 84px;
	overflow: hidden;
	background: var(--bg-elevated);
	border: 1px solid var(--border-gold);
	border-radius: 50%;
}
.ficha__retrato img {
	position: absolute;
	left: -54px;
	top: -54px;
	width: 128px;
	height: 128px;
	max-width: none;
	image-rendering: pixelated;
}

.ficha__identidad { min-width: 0; }

.ficha__nombre {
	margin: 0;
	font-size: clamp(26px, 3.4vw, 36px);
	line-height: 1.1;
}
.ficha__nombre img { display: inline; vertical-align: middle; margin-right: 6px; }

.ficha__resumen {
	margin: var(--sp-1) 0 0;
	font-size: 14px;
	color: var(--text-secondary);
}

.ficha__marcas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	margin: var(--sp-3) 0 0;
}
.ficha__calavera { display: inline; width: 11px; height: 11px; }

/* El comentario del jugador puede ser una parrafada sin espacios. */
.datos__fila--ancha { grid-template-columns: minmax(0, 1fr); }
.ficha__comentario { overflow-wrap: anywhere; }

.ficha__casa { font-size: 14px; color: var(--text-primary); margin-right: auto; }

.ficha__rejilla {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
	gap: var(--sp-5);
	align-items: start;
}

/* — el muñeco del equipo —
   Tres columnas, las mismas ranuras que montaba el nucleo con tablas
   anidadas: collar/mano izq/anillo, cabeza/armadura/piernas/pies,
   mochila/mano der/municion. */
.equipo {
	display: flex;
	justify-content: center;
	align-items: flex-start;
	gap: var(--sp-2);
}
.equipo__columna { display: flex; flex-direction: column; gap: var(--sp-2); }

/* Las columnas de los lados bajan una ranura.
   Asi queda el muñeco de Tibia de verdad —la cabeza sola arriba, en el centro—
   en vez de las tres columnas empezando a la misma altura, que es como lo
   dejaba el nucleo:

          [cabeza]                     [collar] [cabeza]  [mochila]
   [collar][armadura][mochila]   vs    [mano i][armadura][mano d]
   [mano i][piernas ][mano d]          [anillo][piernas ][municion]
   [anillo][pies    ][municion]                [pies    ]
*/
.equipo__columna:first-child,
.equipo__columna:last-child { margin-top: calc(44px + var(--sp-2)); }

.equipo__ranura {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--bg-elevated);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
}
/* Las imagenes de objeto las pinta MyAAC con la clase .item_image, que es de
   donde Tipped saca el emergente: no se toca el markup, solo se encuadra. */
.equipo__ranura img { width: 32px; height: 32px; object-fit: contain; image-rendering: pixelated; }

/* — muertes y victimas — */

.sucesos { list-style: none; margin: 0; padding: 0; }

.suceso {
	display: grid;
	grid-template-columns: minmax(0, 140px) minmax(0, 1fr);
	gap: var(--sp-4);
	padding: var(--sp-3) 0;
	border-bottom: 1px solid var(--border-soft);
	font-size: 14px;
}
.suceso:last-child { border-bottom: 0; }
.suceso__fecha { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.suceso__texto { color: var(--text-secondary); overflow-wrap: break-word; }
.suceso__texto a { color: var(--text-primary); }

.ficha__firma { margin-bottom: var(--sp-4); }

.ficha__buscador { margin-top: var(--sp-3); }

@media (max-width: 560px) {
	.ficha__cabecera { flex-direction: column; align-items: flex-start; }
	.suceso { grid-template-columns: minmax(0, 1fr); gap: var(--sp-1); }
}

/* — FAQ — */

.faq {
	display: flex;
	flex-direction: column;
	gap: var(--sp-5);
}

.faq__controles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--sp-4);
}
.faq__todos { margin-left: auto; }

.faq__lista { display: flex; flex-direction: column; gap: var(--sp-3); }

/* El titulo es un <h2> por jerarquia, pero no debe pintar como un <h2>: lo
   que se ve es el boton. */
.faq__pregunta {
	margin: 0;
	font-family: var(--font-ui);
	font-size: inherit;
	font-weight: 400;
}

.faq__admin {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	margin-top: var(--sp-4);
	padding-top: var(--sp-3);
	border-top: 1px solid var(--border-soft);
}
.faq__accion { display: inline; }
.faq__borrar { color: var(--danger); }
.faq__borrar:hover { color: var(--danger); }

.faq__ayuda { margin-top: var(--sp-3); }

@media (max-width: 560px) {
	.alta__tarjeta, .entrada__tarjeta { padding: var(--sp-5) var(--sp-4); }

	.personaje { flex-direction: column; align-items: flex-start; gap: var(--sp-3); }
	.personaje__lado { width: 100%; justify-content: space-between; }

	.faq__controles { flex-direction: column; align-items: stretch; }
	.faq__todos { margin-left: 0; text-align: left; }
	.buscador { max-width: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   Portada

   El unico sitio del sitio con hero grande y con arte. Es lo que marca la
   identidad, asi que se conserva: lo que cambia respecto a antes son las
   medidas, que ahora salen de los mismos tokens que el resto.

   Las cifras de la franja usan el componente Stat de arriba (.cifra__dato,
   .cifra__rotulo, .cifra__extra). Aqui solo va la franja que las coloca, no
   una segunda definicion de la cifra: eso era lo que hacia que cambiar el
   componente no se notara en la portada.
   ══════════════════════════════════════════════════════════════════════════ */

/* El hero es oscuro en los DOS temas: el arte es nocturno y en claro no hay
   forma de enseñarlo entero con texto oscuro encima. Ver la nota de
   --velo-hero. Por eso los colores del texto se fijan aqui y no se heredan del
   tema. */
.hero {
	position: relative;
	min-height: 540px;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
	background: rgb(var(--tinta-hero));
	color: #f2ece0;
}
.hero .hero__titular { color: #f7f2e8; }
.hero .hero__entradilla { color: rgb(242 236 224 / .84); }
/* Los dos tokens de oro son oscuros en tema claro, porque estan pensados para
   fondo crema: sobre el hero ya oscuro el kicker salia en bronce casi negro
   (rgb 122 84 16 sobre rgb 14 16 20). Aqui lleva su propio oro. */
.hero .hero__kicker { color: #d9b271; }
.hero .hero__guion { background: rgb(217 178 113 / .55); }

/* Los botones tienen el mismo problema que el kicker: en tema claro su texto
   es oscuro porque van sobre crema. Sobre el hero se quedaban en gris o bronce
   casi ilegibles, y en movil —donde ocupan todo el ancho sobre el arte— se
   notaba mucho mas. */
.hero .boton {
	border-color: rgb(242 236 224 / .32);
	background: rgb(14 16 20 / .34);
	color: #f2ece0;
}
.hero .boton:hover {
	border-color: rgb(217 178 113 / .7);
	background: rgb(14 16 20 / .55);
	color: #fff;
}
.hero .boton--oro {
	border-color: rgb(217 178 113 / .75);
	background: rgb(217 178 113 / .16);
	color: #e8c489;
}
.hero .boton--oro:hover {
	border-color: #d9b271;
	background: rgb(217 178 113 / .28);
	color: #f5dcae;
}

.hero__arte {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center 35%;
}

/* Dos degradados: uno lateral para que el texto caiga sobre lo oscuro, y otro
   que funde el borde inferior con el fondo de la pagina. */
.hero__velo {
	position: absolute;
	inset: 0;
	background:
		var(--velo-hero),
		/* El fundido inferior mete el color de la pagina para que el hero no
		   corte en seco. Llegaba al 38 %, unos 205 px, y con el hero ya oscuro
		   eso lavaba la fila de botones. Basta con el borde. */
		linear-gradient(0deg, var(--bg) 0%, transparent 13%);
}

/* — brasas del hero —

   Las motas ambar que flotan sobre el arte, como en la pantalla de seleccion
   de personaje del cliente. Los valores de cada una los reparte portada.php.

   Va con el mismo z-index que `.hero__fila` y ANTES en el DOM, asi que el
   texto queda por encima sin necesidad de subirle la capa: dos hermanos con la
   misma capa se ordenan por posicion. Las brasas si tapan el velo, que es lo
   que se busca. */
.hero__brasas {
	position: absolute;
	inset: 0;
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
}

.brasa {
	position: absolute;
	bottom: -8px;
	left: var(--x);
	width: var(--s);
	height: var(--s);
	border-radius: 50%;
	background: #ffc06a;
	/* El halo es lo que las hace parecer ascuas y no puntos. */
	box-shadow: 0 0 9px 2px rgb(255 150 55 / .55);
	opacity: 0;
	/* Solo transform y opacity: las dos las compone la GPU y no obligan al
	   navegador a recalcular el diseño en cada fotograma. */
	animation: brasa-sube var(--t) linear var(--d) infinite;
	will-change: transform, opacity;
}

@keyframes brasa-sube {
	0% { transform: translate3d(0, 0, 0) scale(.75); opacity: 0; }
	14% { opacity: var(--o); }
	78% { opacity: var(--o); }
	100% { transform: translate3d(var(--dx), calc(-1 * var(--sube)), 0) scale(1.1); opacity: 0; }
}

/* Quietas para quien pide menos movimiento, pero no invisibles: repartidas por
   el hero siguen leyendose como ascuas suspendidas. */
@media (prefers-reduced-motion: reduce) {
	.brasa {
		animation: none;
		opacity: calc(var(--o) * .55);
		transform: translate3d(var(--dx), calc(-1 * var(--sube)), 0);
	}
}

.hero__fila {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--max);
	margin: 0 auto;
	padding-inline: var(--gutter);
}

.hero__kicker {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin: 0 0 var(--sp-5);
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
}
.hero__guion {
	width: 36px;
	height: 1px;
	background: var(--border-gold);
}

.hero__titular {
	font-size: clamp(42px, 6.6vw, 92px);
	font-weight: 500;
	line-height: .98;
	letter-spacing: -.02em;
	margin: 0 0 var(--sp-5);
	max-width: 14ch;
	/* La sombra no es decoracion: el arte tiene zonas claras y sin ella el
	   titular pierde contraste justo encima de la niebla. */
	text-shadow: var(--sombra-titular);
}

.hero__entradilla {
	max-width: 48ch;
	margin: 0 0 var(--sp-6);
	font-family: var(--font-prose);
	font-size: 16.5px;
	line-height: 1.75;
	color: var(--text-secondary);
}

.hero__botones {
	display: flex;
	gap: var(--sp-3);
	flex-wrap: wrap;
}

/* — franja de cifras — */

.franja {
	background: var(--bg-elevated);
	border-bottom: 1px solid var(--border);
}

.franja__fila {
	max-width: var(--max);
	margin: 0 auto;
	padding-inline: var(--gutter);
	display: flex;
	flex-wrap: wrap;
}

.cifra {
	flex: 1 1 170px;
	padding: var(--sp-5);
	border-right: 1px solid var(--border);
}
.cifra:first-child { padding-left: 0; }
.cifra:last-child { border-right: 0; padding-right: 0; }

@media (max-width: 1100px) {
	.hero { min-height: 440px; }
}

@media (max-width: 560px) {
	.hero { min-height: 360px; }
	.hero__titular { max-width: none; }
	.hero__entradilla { font-size: 15px; }
	.hero__botones .boton { width: 100%; }
	.cifra {
		flex: 1 1 45%;
		padding: var(--sp-4) var(--sp-3);
		border-bottom: 1px solid var(--border);
	}
	.cifra:first-child, .cifra:last-child { padding-inline: var(--sp-3); }
	.cifra__dato { font-size: 25px; }
}

/* El sprite del potenciado: un APNG de 64 px generado desde los assets. Se
   pinta a tamaño nativo y con el escalado a bloques, que es como se ve en el
   juego; suavizarlo lo dejaria borroso. */
.boost__sprite--anim {
	image-rendering: pixelated;
	image-rendering: crisp-edges;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NOTA LARGA
   Una noticia con secciones, sprites y tablas — el formato de los posts de
   tibia.com, en la paleta de Solera.

   `.noticia__cuerpo` limita a 70ch, que es lo correcto para una nota de tres
   lineas y demasiado estrecho para una tabla de rates. `.nota` cancela ese
   limite; las noticias normales no se enteran.
   ═══════════════════════════════════════════════════════════════════════════ */

.noticia__cuerpo:has(.nota) { max-width: none; }

.nota { font-size: 15px; line-height: 1.75; }
.nota > p { margin: 0 0 var(--sp-3); max-width: 72ch; }

/* Capitular, como el saludo de los posts de Tibia. */
.nota__inicial::first-letter {
	float: left;
	margin: 4px 10px 0 0;
	font-family: var(--titular);
	font-size: 3.4em;
	line-height: .78;
	color: var(--oro-claro);
}

.nota__seccion {
	margin: var(--sp-5) 0 var(--sp-2);
	padding-bottom: 6px;
	border-bottom: 1px solid var(--filete-tenue);
	font-family: var(--titular);
	font-size: 19px;
	font-weight: 600;
	color: var(--tinta-titulo);
}

.nota ul { margin: 0 0 var(--sp-3); padding-left: 1.15em; max-width: 72ch; }
.nota li { margin-bottom: 5px; }
.nota li::marker { color: var(--oro-oscuro); }

/* Fila de criaturas con su nombre debajo. Los sprites son PNG de 64px con
   fondo transparente; `image-rendering: pixelated` evita que el navegador los
   suavice y los convierta en una mancha. */
.nota__criaturas {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--sp-3);
	margin: var(--sp-3) 0 var(--sp-4);
}
.nota__criatura {
	flex: 0 0 118px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	padding: var(--sp-2) 6px;
	background: var(--fondo-alt);
	border: 1px solid var(--filete);
	border-radius: var(--radio);
	text-align: center;
}
.nota__criatura img {
	width: 64px;
	height: 64px;
	object-fit: contain;
	image-rendering: pixelated;
}
/* Dos lineas reservadas para el nombre, ocupe una o dos.
   Sin esto, «Radiant Acolyte» (una linea) y «Devoted Radiant Zealot» (dos)
   dejan el hp a distinta altura y la fila entera se ve desigual. */
.nota__criatura b {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.6em;
	font-size: 11.5px;
	font-weight: 600;
	color: var(--purpura);
	line-height: 1.3;
}
/* Empujado al fondo de la tarjeta, para que todos los hp queden en linea. */
.nota__criatura span {
	margin-top: auto;
	font-size: 10.5px;
	color: var(--tinta-debil);
	font-feature-settings: 'tnum';
}

/* Sprite suelto flotando a la derecha, como la ilustracion de tibia.com. */
.nota__figura {
	float: right;
	width: 128px;
	margin: 0 0 var(--sp-3) var(--sp-4);
	text-align: center;
}
.nota__figura img {
	width: 128px;
	height: 128px;
	object-fit: contain;
	image-rendering: pixelated;
}
.nota__figura figcaption {
	margin-top: 4px;
	font-size: 11px;
	color: var(--tinta-debil);
}

/* Tabla compacta de dos columnas para rates y datos del servidor. */
.nota__tabla {
	width: 100%;
	margin: 0 0 var(--sp-4);
	border-collapse: collapse;
	font-size: 13.5px;
}
/* El filete va en la FILA, no en las celdas.
   Puesto en `th` y `td` por separado se dibujan dos segmentos, y a todo lo
   ancho se nota el corte entre ellos. En la fila sale una sola linea. */
.nota__tabla tr { border-bottom: 1px solid var(--filete-tenue); }
.nota__tabla tr:last-child { border-bottom: 0; }

.nota__tabla th,
.nota__tabla td {
	padding: 7px 10px;
	text-align: left;
}
.nota__tabla th {
	font-family: var(--titular);
	font-weight: 600;
	color: var(--tinta-media);
}
/* La columna del valor se encoge a su contenido; el resto del ancho se lo
   queda la etiqueta, y los numeros quedan alineados a la derecha. */
.nota__tabla td:last-child {
	width: 1%;
	white-space: nowrap;
	text-align: right;
	color: var(--oro-claro);
	font-feature-settings: 'tnum';
}
.nota__tabla tr:hover { background: var(--fondo-alt); }

@media (max-width: 620px) {
	.nota__figura { float: none; width: 100%; margin: 0 0 var(--sp-3); }

	/* Rejilla y no flex: con flex, la ultima tarjeta de una fila incompleta se
	   estira a todo el ancho y desentona. La rejilla la deja en su columna. */
	.nota__criaturas {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}
	.nota__criatura { flex: none; }
}

@media (max-width: 380px) {
	.nota__criaturas { grid-template-columns: repeat(2, 1fr); }
}

/* Aviso de cabecera dentro de una nota: mas aire y sin el ancho de parrafo,
   para que no se pueda pasar por alto. */
.nota__alerta {
	max-width: none;
	margin: 0 0 var(--sp-5);
	font-size: 14.5px;
	line-height: 1.7;
}

/* Bloque que ilustra una mecanica con el sprite del objeto implicado.
   A diferencia de `.nota__figura`, no flota: va centrado y con su explicacion
   al lado, porque el sprite ES la explicacion. */
.nota__mecanica {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin: var(--sp-3) 0 var(--sp-4);
	padding: var(--sp-3) var(--sp-4);
	background: var(--fondo-alt);
	border: 1px solid var(--filete);
	border-radius: var(--radio);
}
.nota__mecanica img {
	flex: 0 0 auto;
	width: 96px;
	height: 96px;
	object-fit: contain;
	image-rendering: pixelated;
}
.nota__mecanica p { margin: 0; max-width: none; }

@media (max-width: 620px) {
	.nota__mecanica { flex-direction: column; text-align: center; }
}