/* ==========================================================================
   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. Base            reset y tipografia
     3. Armazon         cabecera, hero de pagina, rejilla, pie
     4. Componentes     tarjeta, fila de datos, boton, campo, acordeon, cifra…
     5. Contenido MyAAC re-vestido del markup heredado de tibiacom
     6. Paginas propias solo lo que es de una pagina y de ninguna otra
     7. 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 {
	/* ── superficies ───────────────────────────────────────────────────────
	   La profundidad la dan el contraste entre superficies, los filetes y el
	   espaciado. No hay sombras: en un fondo casi negro no se ven, y lo unico
	   que consiguen es ensuciar los bordes. */
	--bg: #0b0a08;
	--bg-elevated: #11100d;
	--surface: #15120e;
	--surface-hover: #19150f;

	/* ── filetes ──────────────────────────────────────────────────────── */
	--border: #30281d;
	--border-soft: #221c15;
	--border-gold: #5a4323;

	/* ── 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. */
	--text-primary: #f1ebdf;
	--text-secondary: #a89e8e;
	/* #766e61 en el encargo, subido a #847c6f: sobre --surface daba 3,71:1 de
	   contraste y AA pide 4,5 para texto normal. Asi da 4,53. Medido, no a
	   ojo. Mismo motivo en --danger y --gold-dark. */
	--text-muted: #847c6f;

	/* ── oro: el unico acento ─────────────────────────────────────────────
	   Va en llamadas a la accion, enlaces activos, ornamentos y estados
	   seleccionados. Nunca en superficies grandes. */
	--gold: #d6a044;
	--gold-light: #ebc372;
	--gold-dark: #9d7436;
	--gold-tint: rgba(214, 160, 68, .08);

	/* ── semaforo ─────────────────────────────────────────────────────────
	   Apagados a proposito: un rojo saturado sobre este fondo grita. */
	--success: #71976f;
	--danger: #c85c52;

	/* ── 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;

	/* ── 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. */
	--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);
}

/* — 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: rgba(214, 160, 68, .3); }

/* 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: rgba(11, 10, 8, .92);
	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;
}

/* — 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%, rgba(214, 160, 68, .05), 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); }

.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: rgba(113, 151, 111, .35); }
.marca-estado--aviso   { color: var(--gold); border-color: var(--border-gold); }
.marca-estado--peligro { color: var(--danger); border-color: rgba(184, 76, 66, .35); }

/* — 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 rgba(225, 173, 102, .32);
}
/* 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 rgba(239, 231, 218, .09);
	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: rgba(225, 173, 102, .1);
}

/* ══════════════════════════════════════════════════════════════════════════
   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: 460px;
	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: #11100d; color: var(--text-primary); }
.contenido select option:checked { background: var(--gold-dark); color: var(--gold-light); }

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: rgba(214, 160, 68, .16);
	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: rgba(214, 160, 68, .16); 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 rgba(225, 173, 102, .18);
	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 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 rgba(225, 173, 102, .32);
}
.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. */
.indicador {
	display: none;
	width: 13px;
	height: 13px;
	vertical-align: middle;
	margin-left: 4px;
}

/* — 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;
}

/* — 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.
   ══════════════════════════════════════════════════════════════════════════ */

.hero {
	position: relative;
	min-height: 540px;
	display: flex;
	align-items: center;
	overflow: hidden;
	border-bottom: 1px solid var(--border);
	background: var(--bg-elevated);
}

.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:
		linear-gradient(90deg, rgba(11, 10, 8, .95) 0%, rgba(11, 10, 8, .8) 42%, rgba(11, 10, 8, .28) 72%, rgba(11, 10, 8, .58) 100%),
		linear-gradient(0deg, var(--bg) 0%, rgba(11, 10, 8, 0) 38%);
}

.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: 0 0 60px rgba(0, 0, 0, .75);
}

.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;
}