/* ==========================================================================
   Solera - ajustes sobre el template tibiacom de MyAAC (clon de tibia.com).
   ==========================================================================

   Se carga DESPUES de basic.css y no modifica ni una linea de el: para
   revertir basta quitar el <link> de index.php. El aspecto es el clasico de
   tibia.com (pergamino claro, texto oscuro, Verdana); este archivo solo trae
   arreglos de estructura y las cajas propias de Solera.
   -------------------------------------------------------------------------- */

/* Tipografia de los titulos de pagina clasicos (los gif de headline.php usaban martel.ttf). */
@font-face {
	font-family: Martel;
	src: url(martel.ttf) format("truetype");
	font-display: swap;
	/* martel.ttf solo dibuja letras: digitos y signos (U+0021-0040) son glifos vacios. Con el rango acotado caen a la fuente de reserva. */
	unicode-range: U+0020, U+0041-005A, U+0061-007A;
}

:root {
	--sol-tinta: #2e2008;
	--sol-titular: #f0d1a4;      /* color de los titulos de pagina (240,209,164) */
	--sol-texto-fuente: Verdana, Arial, sans-serif;
	--sol-fondo: #0a121c;        /* azul noche de los bordes bajos de fondo.webp (muestreados) */
	--sol-fondo-img: url(/templates/solera/images/fondo-tibiacom.webp);
}

/* De dia (index.php pone sol-dia en <body> solo si existe fondo-tibiacom-dia.webp): mismo encuadre, otra imagen.
   Si esa imagen no termina en el azul noche, ajustar aqui --sol-fondo a su color de borde bajo. */
body.sol-dia {
	--sol-fondo-img: url(/templates/solera/images/fondo-tibiacom-dia.webp);
}

body {
	background-color: var(--sol-fondo);
}

/* --- titulos de pagina --------------------------------------------------- */

.Content .Title {
	padding: 0 4px;
	white-space: nowrap;
}

/* Titulo en texto (index.php lo imprime cuando no hay gif de headline): igualado a los titulos en imagen. */
.Content div.Title {
	font-family: Martel, Georgia, serif;
	font-size: 24px;
	font-weight: 400;
	line-height: 28px;
	color: var(--sol-titular);
}

/* Las imagenes de noticias traen width="1032" fijo y desbordan en pantallas angostas. */
.Content img {
	max-width: 100%;
	height: auto;
}

/* basic.css lo corre 135px a la derecha con ancho completo y se sale de su barra:
   el margen mantiene su borde derecho dentro. */
.Content .NewsHeadlineText {
	margin-right: 135px;
}

/* Como tibia.com: line-height de 26px para que el titular quede centrado en la banda roja de 28px
   (con line-height normal el texto caia 1px por debajo del centro). */
.Content #News .NewsHeadlineText,
.Content #NewsArchive .NewsHeadlineText {
	top: 1px;
	line-height: 26px;
}

/* --- menu lateral -------------------------------------------------------- */

/* Sin objetivo tactil de 44px aqui: el menu son imagenes de fondo de 32px y la capa hover (.Button) va absoluta; forzar alto o flex la desalinea. */

/* --- accesibilidad ------------------------------------------------------- */

/* Anillo de foco visible en todo lo enfocable, que el template no traia.
   Marron casi negro: se ve sobre el pergamino (#f1e0c5) y sobre el menu oscuro. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid #3a2400;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* --- fondo: el arte de Solera se funde con el color de la pagina ---------- */

/* fondo-tibiacom.webp (1920x1080) es el arte de Solera recompuesto para tibiacom: dragon arriba, mago a la izquierda y torre a la
   derecha, que es lo que queda visible alrededor del contenido. Va a tamano natural, centrado y subido 70px. Tres degradados del color de body lo funden:
   abajo, sin depender del alto de la ventana (opaco desde y=860, pagina corta o ventana de 900), y a los lados para pantallas
   mas anchas que la imagen. Va en un ::before position:fixed detras de todo (z-index:-1), asi el arte y su fundido se quedan quietos y lo
   que se desplaza es el contenido. (background-attachment:fixed no sirve: #ArtworkHelper mide lo que la ventana y su fondo se recorta a esa
   caja al hacer scroll.) El style inline de index.php fija background-image en #ArtworkHelper, por eso se anula con !important. */
#ArtworkHelper {
	background-image: none !important;
}

#ArtworkHelper::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		linear-gradient(to right, var(--sol-fondo), transparent 120px),
		linear-gradient(to left, var(--sol-fondo), transparent 120px),
		linear-gradient(to bottom, transparent 560px, var(--sol-fondo) 860px),
		var(--sol-fondo-img);
	background-position: 50% 0, 50% 0, 0 0, 50% -70px;
	background-size: 1920px 100%, 1920px 100%, 100% 100%, 1920px 1080px;
	background-repeat: no-repeat;
}

/* --- ambiente vivo sobre el fondo (halo de luna, luces, estrellas y niebla) ------ */

/* Misma geometria que el fondo: 1920x1080, centrada en horizontal y subida 70px, asi las coordenadas (pixeles de la imagen) caen en su sitio
   a cualquier ancho. Detras del contenido y de los murcielagos (z-index 0); ambiente.php la pone justo despues del ::before del fondo.
   Todo es opacity/translate, sin JS. De dia (body.sol-dia) se apaga lo nocturno y queda la niebla. */
#SoleraAmbiente {
	position: fixed;
	top: -70px;
	left: 50%;
	z-index: -1;
	width: 1920px;
	height: 1080px;
	margin-left: -960px;
	overflow: hidden;
	pointer-events: none;
}

#SoleraAmbiente i {
	position: absolute;
	left: var(--x);
	top: var(--y);
	translate: -50% -50%;
	border-radius: 50%;
	mix-blend-mode: screen;
	will-change: opacity;
}

/* luna: centro (1558,117) y radio ~28 en la imagen; el halo la rodea y respira */
#SoleraAmbiente .sa-luna {
	--x: 1558px;
	--y: 117px;
	width: 260px;
	height: 260px;
	opacity: .45;
	background: radial-gradient(circle, rgba(215, 230, 255, .55) 0, rgba(175, 205, 255, .3) 20%, rgba(140, 175, 255, .1) 42%, transparent 68%);
	animation: sa-respira 7s ease-in-out infinite alternate;
}

/* ventanas del castillo (x 348-581, y 419-568) y de la torre (1710,325): puntos calidos que titilan */
#SoleraAmbiente .sa-luz {
	width: var(--s);
	height: var(--s);
	opacity: .6;
	background: radial-gradient(circle, rgba(255, 215, 140, .95) 0, rgba(255, 160, 60, .6) 28%, rgba(255, 120, 20, .18) 55%, transparent 72%);
	animation: sa-titila var(--d) ease-in-out var(--w) infinite;
}

/* cielo despejado (y 81-329): 20 estrellas de 1 o 2 px */
#SoleraAmbiente .sa-estrella {
	width: var(--s);
	height: var(--s);
	opacity: .35;
	background: #e4ecff;
	box-shadow: 0 0 3px 1px rgba(190, 210, 255, .55);
	animation: sa-parpadea var(--d) ease-in-out var(--w) infinite;
}

/* niebla del valle y el rio (y 600-770): dos bandas muy tenues que avanzan en sentidos contrarios; cada una repite un mosaico, asi que se
   desplaza un periodo exacto y el bucle no da saltos */
#SoleraAmbiente .sa-niebla {
	left: 0;
	top: 600px;
	width: 1920px;
	height: 170px;
	translate: none;
	border-radius: 0;
	overflow: hidden;
	mix-blend-mode: normal;
	-webkit-mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
	mask-image: linear-gradient(to right, transparent, #000 18%, #000 82%, transparent);
}

#SoleraAmbiente .sa-niebla::before,
#SoleraAmbiente .sa-niebla::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	will-change: transform;
}

#SoleraAmbiente .sa-niebla::before {
	width: 2880px;
	background:
		radial-gradient(ellipse 280px 46px at 30% 38%, rgba(205, 220, 240, .13), transparent) 0 0 / 960px 100% repeat-x,
		radial-gradient(ellipse 220px 34px at 72% 66%, rgba(205, 220, 240, .1), transparent) 0 0 / 960px 100% repeat-x;
	animation: sa-niebla-a 75s linear infinite;
}

#SoleraAmbiente .sa-niebla::after {
	width: 3200px;
	background: radial-gradient(ellipse 320px 40px at 50% 52%, rgba(205, 220, 240, .09), transparent) 0 0 / 1280px 100% repeat-x;
	animation: sa-niebla-b 90s linear infinite;
}

body.sol-dia #SoleraAmbiente .sa-luna,
body.sol-dia #SoleraAmbiente .sa-luz,
body.sol-dia #SoleraAmbiente .sa-estrella {
	display: none;
}

@keyframes sa-respira {
	from { opacity: .35; }
	to { opacity: .6; }
}

@keyframes sa-titila {
	0%, 100% { opacity: .35; }
	18% { opacity: .95; }
	37% { opacity: .55; }
	58% { opacity: 1; }
	80% { opacity: .4; }
}

@keyframes sa-parpadea {
	0%, 100% { opacity: .15; }
	50% { opacity: .95; }
}

@keyframes sa-niebla-a {
	to { transform: translateX(-960px); }
}

@keyframes sa-niebla-b {
	from { transform: translateX(-1280px); }
	to { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
	#SoleraAmbiente *,
	#SoleraAmbiente *::before,
	#SoleraAmbiente *::after {
		animation: none !important;
	}
}

/* --- responsive ---------------------------------------------------------- */

/* Baja logo, columnas y pedestal 40px para que no queden pegados al borde superior. basic.css pone #ContentRow en top:155px y
   #LeftArtwork/#RightArtwork cuelgan de el, asi que todo baja junto. El fondo y el ambiente son fixed y no se mueven.
   Hasta 1024px #ContentRow va en top:0 (abajo) y no hay artwork. */
@media (min-width: 1025px) {
	#ContentRow {
		top: 195px;
	}
}

@media (max-width: 1024px) {
	#LeftArtwork,
	#RightArtwork {
		display: none !important;
	}

	/* #ArtworkHelper envuelve toda la pagina: no se oculta, solo se le quita el fondo y el ancho minimo. */
	#ArtworkHelper {
		background-image: none !important;
		min-width: 0 !important;
	}

	#ArtworkHelper::before,
	#SoleraAmbiente {
		display: none;
	}

	/* Con #Bodycontainer en block, el height:100% de la cabecera de cada caja se resuelve contra la ventana (800px de barra marron). */
	.TableContainer .CaptionContainer,
	.TableContainer .CaptionContainer .CaptionInnerContainer {
		height: auto;
	}

	/* basic.css lo hace display: table y una tabla crece al ancho de su contenido ignorando max-width. */
	#Bodycontainer {
		display: block !important;
	}

	#Bodycontainer,
	#ContentRow {
		width: auto !important;
		min-width: 0 !important;
		max-width: 100%;
		margin: 0 auto;
		padding: 0 12px;
	}

	/* Menu, contenido y cajas una debajo de otra. basic.css deja #ContentRow en top:155px
	   (hueco del artwork de cabecera, oculto aqui) y saca menu y cajas con position:absolute. */
	#ContentRow {
		display: block !important;
		top: 0 !important;
	}

	#MenuColumn,
	#ContentColumn,
	#ThemeboxesColumn {
		position: static !important;
		display: block !important;
		width: auto !important;
		float: none !important;
		margin: 0 0 16px 0 !important;
	}
}

@media (max-width: 768px) {
	.Content .BoxContent {
		/* las tablas anchas (highscores ~600px, hechizos ~380px) se desplazan dentro de su caja en vez de ensanchar toda la pagina en telefonos */
		overflow-x: auto;
	}

	/* Las envolturas de tabla necesitan poder desbordar en movil. */
	.Content .TableContainer,
	.Content .InnerTableContainer {
		overflow-x: auto;
	}
}

/* Table3/Table4 (cabecera de tabla del template) crecen al ancho de su contenido y se salen de la caja:
   con layout fijo toman el ancho de la caja y lo ancho (calendario de /events) se desplaza dentro. */
@media (max-width: 1024px) {
	.Content .TableContainer table.Table3,
	.Content .TableContainer table.Table4 {
		table-layout: fixed;
	}
}

/* basic.css pone width:100% + margin-left:3px: la caja interna desborda 3px a la derecha y las filas tapan el marco derecho. */
.TableContainer .Table3 .InnerTableContainer {
	width: auto;
	margin-right: 3px;
}

/* Formulario de login (account.login.html.twig): la etiqueta no cabe en una linea ni al lado del boton,
   asi que se parte y el boton baja debajo de los campos. */
@media (max-width: 768px) {
	.Content .Table4 .LabelV {
		white-space: normal;
	}

	.Content .Table4 tr:has(> #LoginFormButtonCell),
	.Content .Table4 tr:has(> #LoginFormButtonCell) > td {
		display: block;
	}

	.Content .Table4 #LoginFormButtonCell {
		width: auto;
	}
}

/* --- cajas de la columna derecha ------------------------------------------ */

/* Las cajas clasicas estan hechas para line-height normal, no el 1.6 del body. */
#Themeboxes {
	line-height: normal;
}

/* basic.css fija .Themebox en 154px y el twig pone .top_level en absolute (160px + borde con top inline):
   las entradas se salian. Se deja crecer la caja con su lista; !important solo en top por el inline. */
#Topbar {
	height: auto;
	padding-top: 29px;
}

#Topbar .top_level {
	position: relative;
	top: 0;
	left: 6px;
	height: auto;
}

#Topbar .Bottom {
	position: relative;
	top: 0 !important;
}

/* Cada fila es una linea flex: atuendo a la izquierda y nombre + nivel a su derecha. */
#Topbar .HsFila {
	text-align: left;
}

#Topbar .HsFila a {
	display: flex;
	align-items: center;
	gap: 4px;
	box-sizing: border-box;
	height: 36px;
}

/* El lienzo del atuendo es de 64x64 pero el personaje solo ocupa la esquina inferior derecha (x e y 28 a 64):
   se recorta ese cuadro en vez de dejar el resto de la imagen colgando por la izquierda. */
#Topbar .HsAtuendo {
	flex: none;
	width: 36px;
	height: 36px;
	overflow: hidden;
}

#Topbar .HsAtuendo img {
	display: block;
	margin: -28px 0 0 -28px;
	max-width: none;
}

#Topbar .HsTexto {
	min-width: 0;
	overflow-wrap: anywhere;
	line-height: 1.25;
}

#Topbar .HsRango {
	color: #CCC;
}

#Topbar .HsNombre,
#Topbar .HsNivel {
	display: block;
}

#Topbar .HsNivel {
	color: #fff;
}

/* El twig pone background:url(bg_top.png) inline (166x166): al repetirse deja una costura visible hacia la fila 4. */
#Topbar .top_level {
	background-size: 100% 100% !important;
}

/* El <br> entre cajas solo absorbia el desborde de antes y ahora deja un hueco de 70px. */
#Themeboxes > br {
	display: none;
}

/* --- cajas propias: Boosted, Castle War y Web shop ------------------------- */

/* Cabecera generica (empty.png: 180x143, barra sin titulo en los 32px de arriba), cuerpo de pergamino
   (bg_top.png, como Highscores) y el borde inferior de siempre. La altura la da el contenido: basic.css
   fija .Themebox en 154px. Los selectores llevan #Themeboxes porque basic.css pone `#Themeboxes div`
   (font-size y background-repeat) con mas peso que una clase. */
#Themeboxes .SoleraBox {
	height: auto;
	width: 180px;
}

#Themeboxes .SoleraBoxTitulo {
	position: relative;
	box-sizing: border-box;
	width: 180px;
	height: 32px;
	padding: 0 16px;
	overflow: hidden;
	font-family: Martel, Georgia, serif;
	font-size: 16px;
	font-weight: 600;
	line-height: 34px;
	text-align: center;
	white-space: nowrap;
	color: var(--sol-titular);
	text-shadow: 1px 1px 0 rgba(0, 0, 0, .75), 0 0 3px rgba(0, 0, 0, .6);
}

/* Titulos largos (promociones, y el espanol de varias): un poco mas pequenos para no cortarse. */
#Themeboxes .SoleraBoxTitulo--largo {
	font-size: 13px;
}

/* El texto va por encima de las dos capas de fondo, que quedan a su espalda. */
#Themeboxes .SoleraBoxTitulo > span {
	position: relative;
	z-index: 2;
}

/* Capa 1: la cabecera tal cual, con su marco. Capa 2: la misma imagen, con hue-rotate, recortada a la barra de color
   (8,7 a 172,28), asi el marco dorado y el texto conservan su color. */
.SoleraBoxTitulo::before,
.SoleraBoxTitulo::after {
	content: "";
	position: absolute;
	inset: 0;
	background: url(images/themeboxes/empty.png) no-repeat 0 0;
	z-index: 0;
}

.SoleraBoxTitulo::after {
	z-index: 1;
	filter: var(--sol-caja-filtro, none);
	-webkit-mask: linear-gradient(#000 0 0) 8px 7px / 164px 21px no-repeat;
	mask: linear-gradient(#000 0 0) 8px 7px / 164px 21px no-repeat;
}

/* Colores: la barra original es magenta (matiz ~329 grados). */
.SoleraBox--boosted {
	--sol-caja-filtro: hue-rotate(35deg) brightness(.92);
}

.SoleraBox--castillo {
	--sol-caja-filtro: hue-rotate(151deg);
}

.SoleraBox--tienda {
	--sol-caja-filtro: hue-rotate(80deg) brightness(.85);
}

#Themeboxes .SoleraBoxCuerpo {
	box-sizing: border-box;
	width: 166px;
	margin: -2px 7px 0;
	padding: 12px 8px 14px;
	background: url(images/themeboxes/bg_top.png) no-repeat center / 100% 100%;
	color: var(--sol-tinta);
	font-family: var(--sol-texto-fuente);
	font-size: 13px;
	line-height: 1.35;
	text-align: center;
}

#Themeboxes .SoleraBoxCuerpo p {
	margin: 0 0 10px;
}

#Themeboxes .SoleraBoxCuerpo a:link,
#Themeboxes .SoleraBoxCuerpo a:visited {
	color: #6b2600;       /* 6.2:1 sobre el pergamino (#d1bea7) */
	font-weight: 600;
	text-decoration: underline;
}

#Themeboxes .SoleraBoxCuerpo a:hover,
#Themeboxes .SoleraBoxCuerpo a:focus-visible {
	color: #2e1000;
	text-decoration: none;
}

#Themeboxes .SoleraBoxPie {
	position: relative;
	width: 180px;
	height: 12px;
	margin-top: -4px;
}

/* Boosted: criatura y boss, uno al lado del otro. */
#Themeboxes .SoleraBoxBoost {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 4px;
}

#Themeboxes .SoleraBoxBoost figure {
	margin: 0;
	min-width: 0;
}

#Themeboxes .SoleraBoxBoost img {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 4px;
	image-rendering: pixelated;
}

#Themeboxes .SoleraBoxBoost figcaption {
	overflow-wrap: anywhere;
}

#Themeboxes .SoleraBoxBoost small {
	display: block;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #5a4420;      /* 5.5:1 sobre el pergamino */
}

#Themeboxes .SoleraBoxBoost strong {
	display: block;
	font-weight: 700;
}

/* Web shop: monedas y el boton azul de la plantilla (sbutton.gif, 135x25, sin texto: el texto va encima). */
#Themeboxes .SoleraBoxMonedas {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 10px;
}

#Themeboxes a.SoleraBoxBoton:link,
#Themeboxes a.SoleraBoxBoton:visited {
	display: block;
	box-sizing: border-box;
	width: 135px;
	height: 25px;
	margin: 0 auto;
	background: url(images/global/buttons/sbutton.gif) no-repeat 0 0;
	color: #fff;
	font-family: var(--sol-texto-fuente);
	font-size: 12px;
	font-weight: 700;
	line-height: 25px;
	text-align: center;
	text-decoration: none;
	text-shadow: 1px 1px 0 #000;
	white-space: nowrap;
}

#Themeboxes a.SoleraBoxBoton:hover,
#Themeboxes a.SoleraBoxBoton:focus-visible {
	/* sbutton_over.gif es solo el brillo, sin marco: va encima de sbutton.gif. */
	background-image: url(images/global/buttons/sbutton_over.gif), url(images/global/buttons/sbutton.gif);
	color: #fff;
	text-decoration: none;
}

#Themeboxes a.SoleraBoxBoton:focus-visible {
	outline: 2px solid #3a2400;
	outline-offset: 2px;
}

/* --- caja Networks: cabecera dibujada de networksbox.png y pergamino limpio -- */

/* La cabecera es la franja superior (32px) de networksbox.png, que trae "Networks" dibujado; el cuerpo
   de la imagen (huecos de Facebook y Twitter) no se usa: el cuerpo es el de las otras cajas propias. */
#Themeboxes .SoleraBoxTitulo--imagen {
	background: url(images/themeboxes/networks/networksbox.png) no-repeat 0 0;
}

.SoleraBoxTitulo--imagen::before,
.SoleraBoxTitulo--imagen::after {
	content: none;
}

/* basic.css fija #NetworksBox en 204px (los huecos de Facebook y Twitter): la altura la da el contenido. */
#Themeboxes #NetworksBox {
	height: auto;
	cursor: pointer;
}

#Themeboxes .SoleraBox--networks .SoleraBoxCuerpo {
	padding-top: 14px;
}

#Themeboxes .NetworksLogo {
	display: block;
	margin: 0 auto 6px;
}

#Themeboxes .SoleraBox--networks .NetworksTexto {
	margin: 0 0 8px;
	font-weight: 700;
	font-size: 12px;
	color: #5a2800;
}

#Themeboxes .SoleraBox--networks .NetworksEnLinea {
	margin: -4px 0 10px;
	font-size: 11px;
	color: #5a2800;
}

/* Un solo enlace: el boton se estira sobre toda la caja. */
#Themeboxes .NetworksBoton::after {
	content: "";
	position: absolute;
	inset: 0;
}

#Themeboxes .SoleraBox--networks:hover .NetworksBoton {
	/* sbutton_over.gif es solo el brillo, sin marco: va encima de sbutton.gif. */
	background-image: url(images/global/buttons/sbutton_over.gif), url(images/global/buttons/sbutton.gif);
}

/* --- pedestal: criatura y boss potenciados de hoy (posiciones de tibia.com) -- */

/* pedestal.gif (161x85) apoya su borde inferior donde terminaba pedestal-and-online.gif
   (top -105 + 111 = +6), y las criaturas, sin marco, sobresalen 11px sobre el pedestal. */
#RightArtwork #Pedestal {
	position: absolute;
	top: -79px;
	left: -13px;
	width: 161px;
	height: 85px;
}

#RightArtwork #Monster,
#RightArtwork #Boss {
	position: absolute;
	top: -90px;
	width: 64px;
	height: 64px;
	z-index: 15;
	cursor: pointer;
	image-rendering: pixelated;
}

#RightArtwork #Monster { left: -9px; }
#RightArtwork #Boss { left: 48px; }

#RightArtwork a:focus-visible img {
	outline: 2px solid #f0d1a4;
}

/* --- barra roja sobre el contenido (como la de tibia.com) ------------------ */

#SoleraBar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
	min-height: 28px;
	margin: 5px 5px 8px;
	padding: 0 10px;
	background: #5e0a0a url(images/global/content/newsheadline_background.gif) repeat-x 0 0 / auto 100%;
	border-left: 2px solid #3a3738;
	border-right: 2px solid #3a3738;
	font: 700 11px/28px Verdana, Arial, sans-serif;
	color: #f6e6c4;
	text-shadow: 1px 1px 0 #2a0505;
}

#SoleraBar a:link,
#SoleraBar a:visited {
	color: #f6e6c4;
	text-decoration: none;
}

#SoleraBar a:hover,
#SoleraBar a:focus-visible {
	color: #fff;
	text-decoration: underline;
}

#SoleraBar a:focus-visible {
	outline-color: #f6e6c4;
}

#SoleraBar .SoleraBarLeft,
#SoleraBar .SoleraBarRight {
	display: flex;
	flex-wrap: wrap;
	column-gap: 16px;
	white-space: nowrap;
}

/* iconos delante de cada elemento (como tibia.com): del color del texto y alineados con su linea base */
#SoleraBar .SoleraBarIcon {
	width: 14px;
	height: 14px;
	margin-right: 5px;
	vertical-align: -3px;
	fill: currentColor;
}

/* banderas de idioma (a la derecha, antes del estado del servidor): la actual resaltada y sin enlace, la otra atenuada */
#SoleraBar .SoleraBarLang {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	line-height: 20px;
	border-bottom: 1px solid transparent;
}

#SoleraBar .SoleraBarLang img {
	display: block;
	width: 18px;
	height: 12px;
}

#SoleraBar span.SoleraBarLang {
	border-bottom-color: #e8c36a;
}

#SoleraBar a.SoleraBarLang {
	opacity: 0.7;
}

#SoleraBar a.SoleraBarLang:hover,
#SoleraBar a.SoleraBarLang:focus-visible {
	opacity: 1;
}

#SoleraBar a.SoleraBarLang:focus-visible {
	outline: 2px solid #f6e6c4;
	outline-offset: 2px;
}

/* punto de "en linea" del Discord */
.SoleraBarDot {
	display: inline-block;
	width: 7px;
	height: 7px;
	margin: 0 3px 1px 2px;
	border-radius: 50%;
	background: #5fd35f;
	box-shadow: 0 0 0 1px #1d4d1d;
}

/* rojo sobre rojo no se lee: el aviso de servidor caido va en ambar */
#SoleraBar .SoleraBarOff {
	color: #ffc98a;
}

/* --- caja de descarga bajo el login (como la de tibia.com) ------------------ */

/* Mismo marco que #Loginbox: borde superior e inferior de box-top/box-bottom, cadenas a los lados
   (chain.gif en x 5 y 168) y el fondo del campo de texto (160px, x 10 a 170). El margen negativo de arriba
   se suma al margen inferior del login y deja la caja a la misma distancia que la del menu. */
#DownloadBox {
	position: relative;
	width: 180px;
	margin: -12px 0 22px;
}

#DownloadBox .DownloadTop,
#DownloadBox .DownloadBottom {
	height: 12px;
	background-repeat: no-repeat;
}

#DownloadBox .DownloadTop {
	background-image: url(images/general/box-top.gif);
}

#DownloadBox .DownloadBottom {
	background-image: url(images/general/box-bottom.gif);
}

#DownloadBox .DownloadBody {
	box-sizing: border-box;
	height: 49px;
	padding: 6px 0 0 15px;
	background:
		url(images/general/chain.gif) repeat-y 5px 0,
		url(images/general/chain.gif) repeat-y 168px 0,
		url(images/loginbox/loginbox-textfield-background.gif) repeat-y 10px 0;
}

#DownloadBox .DownloadButton {
	display: block;
	width: 150px;
	height: 37px;
	background: url(images/global/buttons/mediumbutton.gif) no-repeat 0 0;
}

#DownloadBox .DownloadButton:hover,
#DownloadBox .DownloadButton:focus-visible {
	background-image: url(images/global/buttons/mediumbutton-over.gif);
}

#DownloadBox .DownloadButton img {
	display: block;
}

/* --- crear cuenta: una sola columna de rotulos y un solo ancho de campo ----- */

#createaccount .TableContent {
	table-layout: fixed;
}

#createaccount col.OtlRotulo {
	width: 200px;
}

#createaccount .LabelV {
	white-space: normal;
}

#createaccount input:not([type]),
#createaccount input[type="text"],
#createaccount input[type="password"],
#createaccount select {
	box-sizing: border-box;
	width: 260px;
	max-width: 100%;
}

/* Los campos de los plugins (origen, referido) entran como una fila mas, con el rotulo en la misma columna.
   El padding-left de 3px compensa el borde de 1px que las celdas normales de la tabla ya traen. */
#createaccount .TableContent td.OtlCampos {
	padding-left: 3px;
}

#createaccount .OtlCampos .campo {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	margin: 4px 0 8px;
}

#createaccount .OtlCampos .campo__etiqueta {
	box-sizing: border-box;
	flex: 0 0 200px;
	padding-right: 10px;
	font-weight: bold;
}

#createaccount .OtlCampos .campo__caja {
	display: block;
}

#createaccount .OtlCampos .campo__error {
	flex-basis: 100%;
	box-sizing: border-box;
	padding-left: 200px;
	font-size: 8pt;
	color: red;
}

#createaccount .OptionContainer input[type="radio"] {
	margin-left: 0;
}

#createaccount .OptionContainer {
	display: inline-block;
	margin-right: 15px;
	white-space: nowrap;
}

@media (max-width: 600px) {
	#createaccount colgroup,
	#createaccount td:empty {
		display: none;
	}

	#createaccount .TableContent,
	#createaccount .TableContent tbody,
	#createaccount .TableContent tr,
	#createaccount .TableContent td {
		display: block;
	}

	#createaccount input:not([type]),
	#createaccount input[type="text"],
	#createaccount input[type="password"],
	#createaccount select {
		width: 100%;
	}

	#createaccount .OtlCampos .campo {
		display: block;
	}

	#createaccount .OtlCampos .campo__error {
		display: block;
		padding-left: 0;
	}
}

/* --- FAQ -------------------------------------------------------------------- */

.FaqTabla {
	width: 100%;
	border-collapse: collapse;
}

.FaqTodos td {
	padding: 4px 8px;
	text-align: right;
}

.FaqToggleAll {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: 8pt;
	color: #3a2400;
	text-decoration: underline;
	cursor: pointer;
}

.FaqToggleAll:hover {
	color: #000;
}

.FaqCelda {
	padding: 0;
	vertical-align: top;
}

.FaqPregunta {
	display: block;
	box-sizing: border-box;
	width: 100%;
	padding: 7px 10px 7px 26px;
	border: 0;
	background: none;
	font: inherit;
	font-weight: bold;
	text-align: left;
	color: inherit;
	cursor: pointer;
	position: relative;
}

.FaqPregunta::before {
	content: "+";
	position: absolute;
	left: 10px;
}

.FaqPregunta[aria-expanded="true"]::before {
	content: "−";
}

.FaqPregunta:hover {
	background: rgba(255, 255, 255, .25);
}

.FaqRespuesta {
	padding: 2px 14px 10px 26px;
	line-height: 1.5;
}

.FaqOpciones {
	width: 160px;
	padding: 6px 8px;
	vertical-align: top;
}

/* --- tablas dentro de las noticias (nota__tabla), como las de tibia.com ------ */

.NewsContent table.nota__tabla {
	width: auto;
	min-width: 260px;
	max-width: 100%;
	margin: 8px 0 12px;
	border-collapse: collapse;
	border: 1px solid #5f4d41;
}

.NewsContent table.nota__tabla th,
.NewsContent table.nota__tabla td {
	padding: 3px 6px;
	font-size: 9pt;
	text-align: right;
	vertical-align: middle;
	background: none;
}

.NewsContent table.nota__tabla tr:nth-child(odd) {
	background-color: #f1e0c6;
}

.NewsContent table.nota__tabla tr:nth-child(even) {
	background-color: #d4c0a1;
}

/* Rotulo de la fila: negrita marron, sin el gris de `.Content th`. */
.NewsContent table.nota__tabla th {
	font-weight: bold;
	text-align: left;
	color: #5a2800;
	white-space: nowrap;
}

.NewsContent table.nota__tabla td {
	font-weight: bold;
	color: #5a2800;
}

/* Cabecera marron si la tabla trae thead. */
.NewsContent table.nota__tabla thead th {
	background-color: #5f4d41;
	color: #fff;
}

/* Ultima columna en prosa (stances, premios): sin negrita, a la izquierda y con salto de linea. */
.NewsContent table.nota__tabla.nota__tabla--texto {
	width: 100%;
}

.NewsContent table.nota__tabla.nota__tabla--texto th {
	vertical-align: top;
}

.NewsContent table.nota__tabla.nota__tabla--texto td {
	font-weight: normal;
	text-align: left;
	vertical-align: top;
	overflow-wrap: anywhere;
}

.NewsContent table.nota__tabla.nota__tabla--texto td b {
	font-weight: bold;
}

/* En telefono la etiqueta se apila sobre la descripcion para no apretarla. */
@media (max-width: 620px) {
	.NewsContent table.nota__tabla.nota__tabla--texto,
	.NewsContent table.nota__tabla.nota__tabla--texto tbody,
	.NewsContent table.nota__tabla.nota__tabla--texto tr,
	.NewsContent table.nota__tabla.nota__tabla--texto th,
	.NewsContent table.nota__tabla.nota__tabla--texto td {
		display: block;
		width: auto;
	}
}

/* --- Halloween: murcielagos y telaranas hasta el 1/11/2026 (quitar junto con el bloque de index.php) --------------------
   Murcielagos: tiras de 9 cuadros de 48x48 (images/halloween/), aleteo con steps(9). <i> cruza la pantalla en horizontal y <b> ondula en
   vertical y aletea. Van en la capa 0, antes de #ContentRow en el HTML: por encima del fondo y detras de las columnas (se ven en el
   cielo y los laterales). Las tiras miran a la derecha: los que vuelan hacia la izquierda (los pares) se voltean. */
.SoleraMurcielagos i {
	position: fixed;
	left: 0;
	top: var(--t);
	z-index: 0;
	width: var(--s);
	height: var(--s);
	pointer-events: none;
	animation: sol-vuelo var(--d) linear var(--w) infinite;
}

.SoleraMurcielagos b {
	display: block;
	height: 100%;
	background: url(images/halloween/murcielago-violeta.png) 0 0 / calc(var(--s) * 9) var(--s) no-repeat;
	image-rendering: pixelated;
	animation: sol-ondula var(--o) ease-in-out infinite alternate, sol-aleteo .8s steps(9) calc(var(--o) * -1) infinite;
}

.SoleraMurcielagos i:nth-child(even) b {
	background-image: url(images/halloween/murcielago-negro.png);
	scale: -1 1;
}

.SoleraMurcielagos i:nth-child(1) { --s: 48px; --t: 4vh;  --d: 14s; --w: -4s;  --o: 1.6s; }
.SoleraMurcielagos i:nth-child(2) { --s: 96px; --t: 14vh; --d: 30s; --w: -12s; --o: 2.8s; animation-name: sol-vuelo-inv; }
.SoleraMurcielagos i:nth-child(3) { --s: 96px; --t: 30vh; --d: 22s; --w: -2s;  --o: 2.2s; }
.SoleraMurcielagos i:nth-child(4) { --s: 48px; --t: 8vh;  --d: 18s; --w: -9s;  --o: 1.8s; animation-name: sol-vuelo-inv; }
.SoleraMurcielagos i:nth-child(5) { --s: 96px; --t: 50vh; --d: 26s; --w: 6s;   --o: 2.5s; }
.SoleraMurcielagos i:nth-child(6) { --s: 48px; --t: 11vh; --d: 16s; --w: -7s;  --o: 2s;   animation-name: sol-vuelo-inv; }

@keyframes sol-vuelo {
	from { translate: -15vw 0; }
	to { translate: 105vw 0; }
}

@keyframes sol-vuelo-inv {
	from { translate: 105vw 0; }
	to { translate: -15vw 0; }
}

@keyframes sol-ondula {
	from { translate: 0 -22px; }
	to { translate: 0 22px; }
}

@keyframes sol-aleteo {
	to { background-position-x: calc(var(--s) * -9); }
}

@media (max-width: 1024px), (prefers-reduced-motion: reduce) {
	.SoleraMurcielagos {
		display: none;
	}
}

/* Telaranas (128x128, ancladas arriba a la izquierda y con 19 px transparentes en cada borde): esquinas superiores de la columna central, justo
   debajo de #SoleraBar (28 px), y una mas pequena colgando del borde inferior del menu. Encima del contenido, sin cobrar clics. */
.SoleraTelarana {
	position: absolute;
	top: 9px;
	left: -19px;
	z-index: 3;
	width: 128px;
	height: 128px;
	background: url(images/halloween/telarana.png) 0 0 / 100% 100% no-repeat;
	opacity: .92;
	pointer-events: none;
}

.SoleraTelarana--der {
	left: auto;
	right: -19px;
	scale: -1 1;
}

.SoleraTelarana--menu {
	top: calc(100% - 18px);
	left: -6px;
	width: 96px;
	height: 96px;
}

/* Hasta 1024 px la barra superior se parte en dos lineas y la telarana taparia el Discord y la bandera: ninguna. */
@media (max-width: 1024px) {
	.SoleraTelarana {
		display: none;
	}
}

/* --- marca de Solera en el marco de la cabecera ------------------------------ */

/* solera-marco.png es el marco de piedra de la cabecera con el hueco vaciado; encima va la S dorada (marca.png) y, sobre la placa oscura de
   debajo, el nombre en Martel. Todo es un solo enlace a la portada. */
#SoleraMarcaLink {
	text-decoration: none;
}

#LeftArtwork #SoleraMarca {
	position: absolute;
	top: 23px;
	left: 45px;
	width: 76px;
	height: 76px;
	z-index: 6;
	filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
}

#LeftArtwork #LogoLink {
	top: 105px;
	bottom: auto;
	left: 34px;
	width: 103px;
	height: 26px;
	font: 400 20px/26px Martel, Georgia, serif;
	letter-spacing: .04em;
	text-align: center;
	color: #f0d1a4;
	text-shadow: 0 1px 0 #000, 0 0 6px rgba(240, 209, 164, .35);
}

#SoleraMarcaLink:focus-visible {
	outline: none;
}

#SoleraMarcaLink:focus-visible #SoleraMarca {
	outline: 2px solid #f0d1a4;
	border-radius: 50%;
}

/* --- pie: adorno dorado encima ----------------------------------------------- */

#Footer::before {
	content: "";
	display: block;
	width: 180px;
	height: 22px;
	margin: 0 auto 6px;
	background: url(/templates/solera/images/adorno_footer_ornament.png) center / contain no-repeat;
}

/* --- ornamentos dorados -------------------------------------------------------- */

/* separador tras cada noticia (news.html.twig); si cierra el contenido, sobra */
.SoleraDivisor {
	width: 200px;
	height: 13px;
	margin: 4px auto 14px;
	background: url(/templates/solera/images/adorno_divider.png) center / contain no-repeat;
	filter: drop-shadow(0 0 1px rgba(70, 40, 0, .85)) saturate(1.3);
}

.BoxContent > .SoleraDivisor:last-child {
	display: none;
}

/* diamante dorado a cada lado del titulo de las cajas propias de texto (la de Networks lleva la cabecera dibujada).
   Los diamantes salen del flujo para no quitar ancho al titulo. */
#Themeboxes .SoleraBoxTitulo:not(.SoleraBoxTitulo--imagen) {
	padding: 0 24px;
}

#Themeboxes .SoleraBoxTitulo:not(.SoleraBoxTitulo--imagen) > span::before,
#Themeboxes .SoleraBoxTitulo:not(.SoleraBoxTitulo--imagen) > span::after {
	content: "";
	position: absolute;
	top: 50%;
	translate: 0 -50%;
	width: 9px;
	height: 9px;
	background: url(/templates/solera/images/adorno_diamond.png) no-repeat;
}

#Themeboxes .SoleraBoxTitulo:not(.SoleraBoxTitulo--imagen) > span::before {
	left: -17px;
}

#Themeboxes .SoleraBoxTitulo:not(.SoleraBoxTitulo--imagen) > span::after {
	right: -17px;
}

/* capitulares (letters/*.gif, marrones): brillo dorado y un tono mas bronce, sin perder el contorno */
.NewsContent img[src*="/images/letters/"] {
	filter: sepia(.45) saturate(1.7) brightness(1.1) drop-shadow(0 0 2px rgba(222, 168, 52, .75));
}

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

/* Atuendo en su celda, a la derecha de la tabla de datos. El PNG de outfit-images es de 64x64 pero el
   personaje (32x32, mas addons) solo llena el cuadrante inferior derecho: se ve a 2x (128 px) y un marco
   de 112 px con overflow oculto lo recorta, desplazando la imagen -38 px en x e y para centrarlo. */
.ficha-atuendo {
	width: 120px;
	vertical-align: middle;
}

.ficha-atuendo-marco {
	width: 112px;
	height: 112px;
	margin: 0 auto;
	overflow: hidden;
}

/* `.Content img` (max-width:100%) la deja en 0 px dentro de una celda de ancho automatico. */
.ficha-atuendo img,
.ficha-atuendo-movil img {
	display: block;
	width: 128px;
	height: 128px;
	max-width: none;
	margin: -38px 0 0 -38px;
	image-rendering: pixelated;
}

/* Casa: nombre y boton en una linea, que se parte en pantallas angostas. */
.ficha-casa {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 10px;
	margin: 0;
}

/* Skills, quests y equipo lado a lado; a 390 px se apilan. */
.ficha-lado {
	display: flex;
	flex-wrap: wrap;
	gap: 20px 12px;
}

.ficha-lado > .TableContainer {
	flex: 1 1 240px;
	width: auto;
	min-width: 0;
}

/* tibia.com separa las secciones de una pagina ~20 px; solo hijos directos del contenido, no las cajas anidadas. */
.BoxContent > :is(.TableContainer, .ficha-lado) ~ :is(.TableContainer, .ficha-lado) {
	margin-top: 20px;
}

/* La cabecera mide height:100% y, en un hijo estirado del flex, cubriria toda la caja. */
.ficha-lado .TableContainer .CaptionContainer,
.ficha-lado .TableContainer .CaptionContainer .CaptionInnerContainer {
	height: auto;
}

/* El muneco de Tibia: tres columnas de ranuras de 32 px sobre fondo oscuro. */
.ficha-equipo {
	display: flex;
	justify-content: center;
	gap: 0;
	padding: 4px 0;
}

.ficha-equipo > div {
	background: #292929;
}

.ficha-equipo span {
	display: block;
	border: 1px solid #808080;
	line-height: 0;
}

.ficha-equipo img {
	display: block;
}

.ficha-firma {
	margin: 4px auto 0;
	max-width: 100%;
}

.ficha-firma input {
	width: 100%;
	max-width: 400px;
	box-sizing: border-box;
}

.ficha-fecha {
	white-space: nowrap;
}

@media (max-width: 768px) {
	/* Lista de personajes de la cuenta: sin columna de vocacion y con el boton «Ver» compacto (la imagen de 135 px se estira a 60). */
	.ficha-voc {
		display: none;
	}

	.ficha-boton :is(.BigButton, .BigButtonOver, .BigButtonText) {
		width: 60px;
		background-size: 100% 100%;
	}

	/* Etiquetas y fechas de la ficha pueden partirse: en 390 px no cabe etiqueta + valor + atuendo en una linea. */
	.ficha-etiqueta {
		white-space: normal;
	}

	.ficha-fecha {
		white-space: normal;
		width: auto;
	}
}

.ficha-atuendo-movil,
.ficha-solo-movil {
	display: none;
}

.ficha-nombre {
	white-space: nowrap;
}

/* Lista de personajes de la cuenta: nombre con su atuendo en miniatura; la columna del boton mide lo que el boton. */
.ficha-pj {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* Misma tecnica que .ficha-atuendo a 1x: el personaje ocupa el cuadrante inferior derecho del PNG de 64 px. */
.ficha-mini {
	flex: none;
	width: 36px;
	height: 36px;
	overflow: hidden;
}

.ficha-mini img {
	display: block;
	width: 64px;
	height: 64px;
	max-width: none;
	margin: -30px 0 0 -30px;
	image-rendering: pixelated;
}

.ficha-fuera {
	color: #7a7a7a;
}

.ficha-voc,
.ficha-estado {
	white-space: nowrap;
}

.ficha-boton {
	width: 1%;
	white-space: nowrap;
}

.ficha-boton form {
	display: flex;
	justify-content: flex-end;
}

/* Buscador de personajes (core): el campo ocupa todo el hueco entre el rotulo y el boton. */
.Content .TableContent tr:has(> td > input[size="29"]) {
	display: flex;
	align-items: center;
	gap: 8px;
}

.Content .TableContent tr:has(> td > input[size="29"]) > td:has(> input) {
	flex: 1 1 140px;
	width: auto !important;
}

.Content .TableContent tr:has(> td > input[size="29"]) > td:last-child {
	margin-left: auto;
}

.Content .TableContent tr:has(> td > input[size="29"]) input {
	width: 100% !important;
	height: 24px;
	box-sizing: border-box;
}

/* No cabe una columna mas para el atuendo: se usa la copia de la fila del nombre. */
@media (max-width: 520px) {
	.ficha-atuendo {
		display: none;
	}

	/* Marco de 96 px: misma imagen a 2x, desplazada -46 px para centrar al personaje. */
	.ficha-atuendo-movil {
		display: block;
		float: right;
		width: 96px;
		height: 96px;
		overflow: hidden;
	}

	.ficha-atuendo-movil img {
		margin: -46px 0 0 -46px;
	}

	/* Lista de personajes de la cuenta: sin columna de estado (el «Online» va junto al nombre) y con el nombre partible. */
	.ficha-estado {
		display: none;
	}

	.ficha-solo-movil {
		display: inline;
	}

	.ficha-nombre {
		white-space: normal;
	}

	/* Buscador de personajes (core): etiqueta, campo y boton se reparten en lineas. */
	.Content .TableContent tr:has(> td > input[size="29"]) {
		flex-wrap: wrap;
	}

	.Content .TableContent tr:has(> td > input[size="29"]) > td:first-child {
		flex-basis: 100%;
	}
}

/* --- caja de login: «You are not logged in!» en español (el gif lo trae en ingles) ---------------------------------- */
/* Mismo hueco (124x11) y color (#9f8f7d) que el gif; el JS de index.php le vuelve a poner el gif como fondo inline. */
#Loginbox .LoginstatusText.SolLoginTexto {
	background: #252524 !important;
	box-shadow: inset 0 0 0 1px #3b3835;
	color: #9f8f7d;
	font: 10px/11px Verdana, Arial, sans-serif;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
}

/* --- bazar: tarjetas de oferta y ficha de oferta (/bazar, /bazar?oferta=N) -------------------------------------------------
   Las clases .Auction*, .CVIcon y .ShortAuctionData son las de tibia.com; su CSS no esta guardado y se recreo de las capturas
   (tarjeta tostada con marco marron fino y sombra, bloques claros dentro). Todo lo de Solera lleva el prefijo bz-. */
.bz-lista {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.Auction {
	box-sizing: border-box;
	padding: 6px 8px 8px;
	background: #d4c0a1;
	border: 1px solid #5f4d41;
	box-shadow: 2px 2px 0 rgba(95, 77, 65, .45);
	color: #5f4d41;
}

.AuctionHeader {
	margin-bottom: 7px;
	padding-bottom: 5px;
	border-bottom: 1px dotted #5f4d41;
	line-height: 1.5;
}

.AuctionCharacterName {
	font-size: 14px;
	font-weight: bold;
}

.AuctionLinks {
	float: right;
	font-size: 11px;
}

.AuctionBody {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
}

.AuctionBodyBlock {
	box-sizing: border-box;
	background: #f1e0c6;
	border: 1px solid #5f4d41;
	box-shadow: 2px 2px 0 rgba(95, 77, 65, .4);
}

/* Atuendo y las cuatro casillas: bloques de 80 px. */
.AuctionDisplay {
	position: relative;
	flex: none;
	width: 80px;
	height: 80px;
}

.AuctionOutfit {
	display: flex;
	align-items: center;
	justify-content: center;
}

/* El PNG del servicio es de 64 px con el personaje en el cuadrante inferior derecho: a 2x y recortado llena el marco de 64. */
.bz-atuendo {
	position: relative;
	width: 64px;
	height: 64px;
	overflow: hidden;
}

.bz-atuendo img {
	position: absolute;
	top: -59px;
	left: -59px;
	width: 128px;
	height: 128px;
	max-width: none;
	image-rendering: pixelated;
}

/* Cinta «NUEVO» en la esquina superior izquierda, como la de tibia.com. */
.AuctionNewIcon {
	position: absolute;
	top: 0;
	left: 0;
	width: 56px;
	height: 56px;
	overflow: hidden;
	pointer-events: none;
	z-index: 2;
}

.AuctionNewIcon span {
	position: absolute;
	top: 11px;
	left: -20px;
	width: 84px;
	transform: rotate(-45deg);
	background: #b8481a;
	border-top: 1px solid #e58a4a;
	border-bottom: 1px solid #6b2108;
	color: #fff;
	font: bold 10px/13px Verdana, Arial, sans-serif;
	letter-spacing: .5px;
	text-align: center;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

.AuctionItemsViewBox {
	display: grid;
	grid-template-columns: repeat(2, 34px);
	grid-template-rows: repeat(2, 34px);
	gap: 2px;
	padding: 3px;
	justify-content: center;
	align-content: center;
}

.CVIcon {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	background: #e6d1b3;
	border: 1px solid #a89577;
}

/* `.Content img` (max-width:100%) dejaria el icono en 0 px dentro de una casilla flex. */
.CVIcon img {
	max-width: none;
}

.ShortAuctionData {
	display: grid;
	flex: 1 1 200px;
	grid-template-columns: auto 1fr;
	align-content: start;
	gap: 3px 12px;
	min-width: 0;
	min-height: 80px;
	padding: 7px 10px;
}

.ShortAuctionDataBidRow {
	display: contents;
}

.ShortAuctionDataLabel {
	font-weight: bold;
	color: #5a3410;
}

.ShortAuctionDataValue {
	text-align: right;
}

.bz-coin {
	vertical-align: -1px;
}

.CurrentBid {
	display: flex;
	flex: 0 0 150px;
	align-items: center;
	justify-content: center;
	padding: 6px;
	text-align: center;
}

.CurrentBid form {
	display: flex;
	justify-content: center;
	margin: 0;
}

.bz-nota {
	margin: 4px 0 0;
	font-size: 11px;
}

.SpecialCharacterFeatures {
	flex: 1 1 100%;
	padding: 5px 9px;
}

.SpecialCharacterFeatures .Entry {
	line-height: 1.55;
}

/* Iconos de los rasgos: cuadritos de color como los de tibia.com, cada rasgo con su forma. */
.bz-ico {
	display: inline-block;
	box-sizing: border-box;
	width: 9px;
	height: 9px;
	margin-right: 6px;
	border: 1px solid rgba(0, 0, 0, .55);
}

.bz-ico-skill { background: #2fa02f; }
.bz-ico-charm { background: #5b9a3c; transform: rotate(45deg) scale(.85); }
.bz-ico-oro { background: #e0b020; border-radius: 50%; }
.bz-ico-hireling { background: #7a5ab8; border-radius: 50% 50% 0 0; }
.bz-ico-outfit { background: #c0503c; }

/* Ficha de la oferta */
.bz-ancla {
	scroll-margin-top: 10px;
}

.bz-valor {
	float: right;
	text-align: right;
}

.bz-volver {
	display: flex;
	justify-content: center;
	margin: 12px 0;
}

.bz-indice {
	text-align: center;
	line-height: 1.9;
}

.bz-skill-nombre {
	width: 1%;
	padding-right: 12px;
	white-space: nowrap;
}

.bz-skill-nivel {
	width: 1%;
	padding-right: 12px;
	text-align: right;
}

.bz-barra {
	position: relative;
	height: 14px;
	min-width: 80px;
	background: #fbf4e6;
	border: 1px solid #5f4d41;
}

.bz-barra span {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background: #8d7a63;
}

.bz-barra em {
	position: relative;
	display: block;
	color: #2e2008;
	font: normal 10px/14px Verdana, Arial, sans-serif;
	text-align: center;
	text-shadow: 0 0 2px #fbf4e6, 0 0 2px #fbf4e6;
}

.bz-equipo {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 110px));
	gap: 8px 6px;
	justify-content: center;
	padding: 6px 0;
}

.bz-casilla {
	min-width: 0;
	text-align: center;
}

.bz-casilla .CVIcon {
	margin: 0 auto;
}

.bz-casilla small {
	display: block;
	margin-top: 2px;
	line-height: 1.25;
	overflow-wrap: anywhere;
}

@media (max-width: 640px) {
	/* Atuendo y casillas quedan juntos; los datos y el boton ocupan su propia linea. */
	.ShortAuctionData,
	.CurrentBid {
		flex: 1 1 100%;
	}

	.ShortAuctionData {
		min-height: 0;
	}
}

/* bazar: filtros, paginacion, historial, ficha completa */
.bz-filtros {
	margin: 0;
}

.bz-filtros-fila {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 6px;
	margin-bottom: 4px;
}

.bz-rango {
	display: inline-flex;
	align-items: center;
	gap: 4px;
}

.bz-num {
	box-sizing: border-box;
	width: 92px;
}

.bz-texto {
	box-sizing: border-box;
	width: 100%;
	max-width: 280px;
}

.bz-filtros-boton {
	display: flex;
	justify-content: flex-end;
	margin-top: 8px;
}

.bz-paginacion {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 2px 12px;
	margin-bottom: 8px;
	font-size: 11px;
}

.bz-paginacion + .bz-lista {
	margin-bottom: 8px;
}

.bz-lista + .bz-paginacion {
	margin: 8px 0 0;
}

.bz-pag-n,
.bz-pag-total {
	font-weight: bold;
}

.bz-vendida {
	color: #1c7a1c;
	font-weight: bold;
}

.bz-sub {
	margin: 10px 0 4px;
	font-size: 12px;
}

.bz-sub:first-child {
	margin-top: 0;
}

.bz-items {
	display: flex;
	flex-wrap: wrap;
	gap: 2px;
}

.bz-items .CVIcon {
	position: relative;
}

.bz-cant {
	position: absolute;
	right: 1px;
	bottom: 0;
	color: #fff;
	font: bold 9px/10px Verdana, Arial, sans-serif;
	text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;
}

@media (max-width: 640px) {
	/* Filtros: la etiqueta se pone encima de los campos, que ya caben en una columna. */
	.bz-filtros table,
	.bz-filtros tbody,
	.bz-filtros tr,
	.bz-filtros td {
		display: block;
		width: auto;
	}

	.bz-filtros .LabelV {
		padding-bottom: 0;
	}

	.bz-rango {
		flex: 1 1 100%;
	}

	/* Ancho dado (no el intrinseco de los campos) para que la tabla de la caja no se ensanche mas que la columna. */
	.bz-num {
		flex: 1 1 0;
		width: 0;
		min-width: 0;
	}

	.bz-filtros select,
	.bz-texto {
		width: 100%;
		max-width: 100%;
	}

	.bz-filtros-boton {
		justify-content: center;
	}

	/* Fichas: etiquetas largas (en español) y barras de skill que se parten en vez de ensanchar la caja. */
	.bz-filas .LabelV,
	.bz-skill-nombre {
		white-space: normal;
	}

	.bz-barra {
		min-width: 40px;
	}
}

/* Mismo motivo que las cabeceras de caja (arriba): con la pagina en block, el height:100% de los avisos (.SmallBox) se resuelve contra la ventana. */
@media (max-width: 768px) {
	.SmallBox .MessageContainer,
	.SmallBox .Message,
	.SmallBox .ErrorMessage {
		height: auto;
	}
}

/* --- movil (hasta 1024px): barra superior, cabecera con arte, menu en cajon, contenido primero -------------------------------
   Desde 1025px lo nuevo va con display:none y nada cambia. El marcado esta en index.php (#SolMovil*) y movil.js abre el cajon
   (#MenuColumn) poniendo sm-js y sm-abierto en <html>; sin JS el menu queda al final de la pagina, como un bloque mas. */
#SolMovilBarra,
#SolMovilCabecera,
#SolMovilCapa,
#SolMovilCerrar,
#SolMovilMenuBtn,
#SolMovilChips,
#SolMovilAcceso {
	display: none;
}

@media (max-width: 1024px) {
	:root {
		--sm-barra: calc(52px + env(safe-area-inset-top, 0px));
	}

	html {
		-webkit-tap-highlight-color: transparent;
		-webkit-text-size-adjust: 100%;
		scroll-padding-top: var(--sm-barra);
	}

	/* Sin el retardo de doble toque, pero con el zoom de pellizco. */
	a,
	button,
	input,
	select,
	textarea,
	label,
	summary,
	[onclick],
	[role="button"] {
		touch-action: manipulation;
	}

	body {
		padding-top: var(--sm-barra);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

	html.sm-abierto,
	html.sm-abierto body {
		overflow: hidden;
	}

	/* barra superior fija */
	#SolMovilBarra {
		position: fixed;
		inset: 0 0 auto 0;
		z-index: 1000;
		display: flex;
		align-items: center;
		gap: 4px;
		box-sizing: border-box;
		height: var(--sm-barra);
		padding: env(safe-area-inset-top, 0px) max(8px, env(safe-area-inset-right, 0px)) 0 max(8px, env(safe-area-inset-left, 0px));
		background: linear-gradient(#17243a, #0a121c);
		border-bottom: 1px solid #2c3d55;
		box-shadow: 0 3px 10px rgba(0, 0, 0, .55);
	}

	.SolMovilBtn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		flex: none;
		box-sizing: border-box;
		width: 44px;
		height: 44px;
		padding: 0;
		border: 0;
		border-radius: 10px;
		background: transparent;
		color: #f0d1a4;
		cursor: pointer;
		-webkit-appearance: none;
		appearance: none;
	}

	.SolMovilBtn svg {
		width: 26px;
		height: 26px;
		fill: currentColor;
	}

	.SolMovilBtn:active,
	#SolMovilMarca:active,
	#SolMovilLang a:active,
	.SolMovilPot a:active {
		background-color: rgba(240, 209, 164, .22);
		transform: scale(.95);
	}

	@media (hover: hover) {
		.SolMovilBtn:hover,
		#SolMovilLang a:hover {
			background-color: rgba(240, 209, 164, .12);
		}
	}

	#SolMovilBarra :focus-visible,
	#SolMovilCerrar:focus-visible,
	.SolMovilPot a:focus-visible {
		outline: 2px solid #f0d1a4;
		outline-offset: -2px;
	}

	.sm-js #SolMovilMenuBtn {
		display: inline-flex;
	}

	#SolMovilMarca {
		display: flex;
		align-items: center;
		gap: 6px;
		flex: 1 1 auto;
		min-width: 0;
		min-height: 44px;
		border-radius: 10px;
		color: #f0d1a4;
		text-decoration: none;
		font: 400 20px/1 Martel, Georgia, serif;
		letter-spacing: .04em;
		text-shadow: 0 1px 0 #000, 0 0 6px rgba(240, 209, 164, .35);
	}

	#SolMovilMarca img {
		width: 36px;
		height: 36px;
		filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6));
	}

	#SolMovilLang {
		display: flex;
		flex: none;
	}

	#SolMovilLang .SoleraBarLang {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 4px;
		box-sizing: border-box;
		min-width: 44px;
		min-height: 44px;
		padding: 0 5px;
		border-bottom: 2px solid transparent;
		border-radius: 10px;
		color: #f6e6c4;
		font: 700 11px/1 Verdana, Arial, sans-serif;
		text-decoration: none;
	}

	#SolMovilLang span.SoleraBarLang {
		border-bottom-color: #e8c36a;
		border-radius: 10px 10px 0 0;
	}

	#SolMovilLang a.SoleraBarLang {
		opacity: .7;
	}

	#SolMovilLang img {
		display: block;
		width: 18px;
		height: 12px;
	}

	/* La barra roja ya no repite las banderas: estan arriba. */
	#SoleraBar .SoleraBarLang {
		display: none;
	}

	/* franja con el arte del momento (de dia o de noche, como el fondo de escritorio): dragon y luna o sol, con fundido a --sol-fondo */
	#SolMovilCabecera {
		display: block;
		position: relative;
		height: clamp(160px, 38vw, 240px);
		background:
			linear-gradient(to bottom, transparent 50%, var(--sol-fondo) 100%),
			var(--sol-fondo-img) 71% 0 / 170% auto no-repeat var(--sol-fondo);
	}

	/* criatura y boss potenciados de hoy (los de la columna derecha de escritorio) */
	.SolMovilPot {
		position: absolute;
		right: max(12px, env(safe-area-inset-right, 0px));
		bottom: 8px;
		display: flex;
		gap: 6px;
	}

	.SolMovilPot a {
		display: block;
		box-sizing: border-box;
		width: 48px;
		height: 48px;
		border: 1px solid rgba(240, 209, 164, .45);
		border-radius: 10px;
		background: rgba(10, 18, 28, .6);
	}

	.SolMovilPot img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	/* contenido primero, luego las cajas y, sin JS, el menu al final */
	#ContentRow {
		display: flex !important;
		flex-direction: column;
	}

	#ContentRow #ContentColumn {
		order: 1;
	}

	#ContentRow #ThemeboxesColumn {
		order: 2;
	}

	#ContentRow #MenuColumn {
		order: 3;
	}

	/* Las cajas clasicas son de 180px: se agrandan juntas (zoom) y se reparten en 1 columna, o en 2 o mas si caben. */
	#Themeboxes {
		display: grid;
		grid-template-columns: repeat(auto-fit, 180px);
		justify-content: center;
		align-items: start;
		column-gap: 16px;
		zoom: 1.5;
	}

	/* menu: login, descarga y categorias en su columna de 180px, centrados y agrandados (botones de ~48px) */
	#MenuColumn #Loginbox,
	#MenuColumn #DownloadBox,
	#MenuColumn #Menu {
		width: 180px;
		margin-left: auto;
		margin-right: auto;
		zoom: 1.5;
	}

	.SubmenuitemLabel {
		padding-top: 7px;
		padding-bottom: 7px;
	}

	.ActiveSubmenuItemIcon {
		top: 10px;
	}

	.LeftChain,
	.RightChain {
		height: 100%;
	}

	/* cajon lateral */
	.sm-js #ContentRow #MenuColumn {
		position: fixed !important;
		top: 0;
		left: 0;
		z-index: 1200;
		box-sizing: border-box;
		width: min(85vw, 320px) !important;
		height: 100vh;
		height: 100dvh;
		margin: 0 !important;
		padding: env(safe-area-inset-top, 0px) 12px calc(24px + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
		background: linear-gradient(#111d2c, #0a121c);
		border-right: 1px solid #2c3d55;
		box-shadow: 4px 0 18px rgba(0, 0, 0, .6);
		transform: translateX(-105%);
		visibility: hidden;
		transition: transform .22s ease-out, visibility 0s linear .22s;
	}

	html.sm-abierto #ContentRow #MenuColumn {
		transform: none;
		visibility: visible;
		transition-delay: 0s;
	}

	#ContentRow #MenuColumn:focus {
		outline: none;
	}

	.sm-js #SolMovilCerrar {
		display: flex;
		position: sticky;
		top: env(safe-area-inset-top, 0px);
		z-index: 5;
		margin: 0 -4px 14px auto;
		background: rgba(10, 18, 28, .85);
	}

	#SolMovilCapa {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 1100;
		background: rgba(3, 8, 14, .65);
		opacity: 0;
		visibility: hidden;
		transition: opacity .22s ease-out, visibility 0s linear .22s;
	}

	html.sm-abierto #SolMovilCapa {
		opacity: 1;
		visibility: visible;
		transition-delay: 0s;
	}

	/* El titular de las noticias envuelve dentro de su banda roja y la banda crece con el (la imagen se estira solo a lo alto). */
	.Content #News .NewsHeadlineBackground,
	.Content #NewsArchive .NewsHeadlineBackground,
	.Content #FeaturedArticle .NewsHeadlineBackground {
		height: auto;
		min-height: 28px;
		background-size: 83px 100%;
	}

	.Content #News .NewsHeadlineText,
	.Content #NewsArchive .NewsHeadlineText,
	.Content #FeaturedArticle .NewsHeadlineText {
		position: static;
		margin: 0 8px 0 135px;
		padding: 6px 0;
		line-height: 1.25;
	}
}

/* En 320px el cajon (85vw) no da para el menu a 1.5x. */
@media (max-width: 340px) {
	#MenuColumn #Loginbox,
	#MenuColumn #DownloadBox,
	#MenuColumn #Menu {
		zoom: 1.25;
	}
}

/* iOS amplia la pagina al enfocar un campo de menos de 16px. */
@media (max-width: 1024px) and (pointer: coarse) {
	input:not([type="checkbox"]):not([type="radio"]):not([type="image"]):not([type="submit"]):not([type="button"]):not([type="hidden"]),
	select,
	textarea {
		font-size: 16px;
	}
}

@media (max-width: 1024px) and (prefers-reduced-motion: reduce) {
	.sm-js #ContentRow #MenuColumn,
	#SolMovilCapa {
		transition: none;
	}
}

/* --- movil: chips de informacion bajo el arte y acceso compacto en el cajon ----------------------------------------------------
   Marcado en chips.php (incluido desde index.php) y en #SolMovilAcceso (index.php, dentro de #MenuColumn). */
@media (max-width: 1024px) {
	/* fila deslizable de tarjetas: el scroll es de la fila, no de la pagina */
	#SolMovilChips {
		display: flex;
		gap: 8px;
		box-sizing: border-box;
		padding: 10px max(12px, env(safe-area-inset-right, 0px)) 10px max(12px, env(safe-area-inset-left, 0px));
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: 12px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	#SolMovilChips::-webkit-scrollbar {
		display: none;
	}

	.SolChip {
		flex: none;
		display: flex;
		flex-direction: column;
		justify-content: center;
		gap: 3px;
		box-sizing: border-box;
		width: 152px;
		min-height: 72px;
		padding: 8px 9px;
		scroll-snap-align: start;
		background: #efe2c8;
		border: 1px solid #b89a6a;
		border-radius: 10px;
		color: #5a2800;
		font: 400 10px/1.25 Verdana, Arial, sans-serif;
		text-decoration: none;
	}

	/* la ultima deja aire a la derecha: se nota que no es el final */
	.SolChip:last-child {
		margin-right: 24px;
	}

	.SolChip:active {
		background: #e3d1ae;
	}

	.SolChip:focus-visible {
		outline: 2px solid #5a2800;
		outline-offset: 2px;
	}

	.SolChipTitulo {
		color: #8a5a2c;
		letter-spacing: .02em;
	}

	.SolChipValor {
		display: flex;
		align-items: center;
		gap: 5px;
		min-width: 0;
		font-size: 13px;
		line-height: 1.2;
		white-space: nowrap;
	}

	.SolChipValor > span {
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.SolChipValor img {
		flex: none;
		image-rendering: pixelated;
	}

	.SolChipDato {
		white-space: nowrap;
	}

	.SolChipPunto {
		flex: none;
		width: 9px;
		height: 9px;
		border-radius: 50%;
		background: #2e7d32;
	}

	.SolChipPunto--no {
		background: #b3261e;
	}

	/* Al saltar a la caja de un chip, la barra fija ya se descuenta con el scroll-padding-top de html; esto solo da un respiro
	   (las cajas van con zoom 1.5, asi que 6px pesan 9). */
	#WorldStatusBox,
	#NextEventBox,
	#PvpBox,
	#Topbar {
		scroll-margin-top: 6px;
	}

	/* cajon: dos botones y una linea de sesion en lugar de las cajas de piedra de login y descarga */
	#MenuColumn #Loginbox,
	#MenuColumn #DownloadBox {
		display: none;
	}

	#SolMovilAcceso {
		display: block;
		margin: 0 0 28px;
	}

	.SolMovilAccesoBotones {
		display: flex;
		gap: 8px;
	}

	.SolMovilBoton {
		flex: 1 1 0;
		display: flex;
		align-items: center;
		justify-content: center;
		box-sizing: border-box;
		min-height: 44px;
		padding: 0 8px;
		background: linear-gradient(#4f89ca, #1f5493 55%, #17427a);
		border: 1px solid #0a2447;
		border-radius: 6px;
		box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 1px 3px rgba(0, 0, 0, .6);
		color: #ffd18c;
		font: 700 13px/1.2 Verdana, Arial, sans-serif;
		text-align: center;
		text-decoration: none;
		text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	}

	.SolMovilBoton:active {
		background: linear-gradient(#3c74b5, #174a85 55%, #10366a);
		transform: scale(.97);
	}

	.SolMovilBoton:focus-visible,
	.SolMovilSesion a:focus-visible {
		outline: 2px solid #f0d1a4;
		outline-offset: 2px;
	}

	.SolMovilSesion {
		margin: 4px 0 0;
		color: #b9a583;
		font: 400 11px/1.4 Verdana, Arial, sans-serif;
		text-align: center;
	}

	.SolMovilSesion a {
		display: inline-block;
		padding: 12px 4px;
		margin: -12px 0;
		color: #f0d1a4;
	}
}