@charset "utf-8";

/* ============================================================================
   NOXERA — hoja de estilos del sitio
   ----------------------------------------------------------------------------
   Direccion: medieval, pero moderno.

   "Medieval" aca no significa pergamino, biselados ni texturas de piedra: eso
   es lo que hace ver viejo a un sitio de OT. Significa la tipografia romana de
   los titulos (Cinzel, la misma familia de trazo del logo), el oro usado como
   filete y no como relleno, y las esquinas achaflanadas que repiten la forma de
   escudo de los iconos de sistemas.

   "Moderno" es todo lo demas: superficies planas, jerarquia por espacio en vez
   de por marco, lineas de 1px, y color aplicado con cuentagotas.

   PALETA — sacada del logo, tres familias y nada mas:
     oro          el metal de las letras, del claro al bronce quemado
     verde acido  el fuego detras del logo; es el acento vivo, se usa poco
     casi negro   el fondo; cinco escalones para separar planos sin bordes

   Lo que NO esta mas: la capa "futurista" en cian (#35e0ff) y violeta (#a86bff)
   que habia encima de todo (linea de escaneo bajo el header, halos pulsantes en
   las cajas del sidebar, barra de scroll bicolor). Eran un cuarto y un quinto
   color que no salen del logo y peleaban con el oro. El movimiento que aportaban
   ya lo dan las cenizas y el fuego del logo, que si son del mundo del juego.

   ORDEN DEL ARCHIVO
     1. Tokens
     2. Base y tipografia
     3. Encabezado
     4. Estructura
     5. Menu lateral izquierdo
     6. Widgets del lateral derecho
     7. Portada: hero y grilla de sistemas
     8. Paginas internas: tablas, formularios, botones
     9. DataTables
    10. Ambiente (cenizas)
    11. Responsive
    12. prefers-reduced-motion
   ========================================================================== */


/* ============================================================================
   1. TOKENS
   ========================================================================== */

:root
{
	/* --- oro -------------------------------------------------------------
	   Cinco pasos. El claro es para texto sobre fondo oscuro, el medio para
	   filetes y el hondo para rellenos donde encima va texto negro. */
	--oro-luz:    #ffeab4;
	--oro-claro:  #f2d68b;
	--oro:        #d9b24c;
	--oro-hondo:  #a8801f;
	--oro-humo:   #6b5416;   /* filetes casi apagados, bordes en reposo */

	/* --- verde -----------------------------------------------------------
	   El fuego del logo. Es el color mas saturado de la paleta, asi que se
	   reserva para una sola cosa por pantalla: el estado vivo, la accion
	   principal, el dato que importa. Si aparece en todos lados deja de
	   significar algo.

	   Bajado de tono respecto de la primera version (#a8e63c). Ese lima puro
	   era mas brillante que el oro que tiene al lado, asi que se adelantaba y
	   el ojo iba primero al boton verde y no al logo. Este verde es el mismo
	   matiz pero con menos saturacion y algo mas oscuro: sigue leyendose como
	   el fuego del logo, sin competir con el dorado ni verse de neon.
	   Cambiando estos cuatro valores se mueve todo el verde del sitio. */
	--verde-luz:   #c2dd93;
	--verde:       #8cb84e;
	--verde-hondo: #5b7d2c;

	/* --- verde de boton --------------------------------------------------
	   Un verde aparte, mas oscuro, SOLO para los rellenos de boton. La razon
	   es de contraste y va en los dos sentidos:

	     texto verde sobre fondo negro  -> conviene el verde CLARO (--verde-luz)
	     texto blanco sobre relleno verde -> conviene el verde OSCURO (este)

	   Sobre el --verde normal (centro del degradado #749b3d) el blanco da 3.23
	   de contraste y no llega al minimo de 4.5; sobre este da 7.85. Por eso los
	   botones no pueden usar el mismo verde que los titulos y el numero de
	   jugadores online, aunque sean "el mismo color" a simple vista. */
	--verde-btn:       #4e6b26;
	--verde-btn-hondo: #33471a;
	--verde-btn-alto:  #5f8130;   /* hover: sube un paso, no cambia de matiz */

	/* --- casi negro ------------------------------------------------------
	   Cinco superficies. La separacion entre planos se hace subiendo un
	   escalon de fondo, no dibujando un borde: por eso hay tantos. */
	--fondo:    #08090b;   /* el lienzo, detras de todo */
	--sup-0:    #0d0f12;   /* pie de pagina, canaletas */
	--sup-1:    #12141a;   /* cajas: nav, widgets, tarjetas */
	--sup-2:    #191c23;   /* cabeceras de caja, filas impares */
	--sup-3:    #21252e;   /* hover, campos con foco */

	/* --- lineas ----------------------------------------------------------
	   Un solo gris de borde para todo el sitio, y su version dorada para
	   cuando algo esta activo o con el mouse encima. */
	--linea:      #23262f;
	--linea-viva: #2f3440;

	/* --- texto -----------------------------------------------------------
	   Tres niveles: lo que se lee, lo que acompana y lo que casi no importa. */
	--txt:        #dfe2e8;
	--txt-suave:  #9aa0ad;
	--txt-tenue:  #666c78;

	/* --- rojo ------------------------------------------------------------
	   Unico color fuera de la paleta. Solo errores y "server offline": son
	   los dos casos donde el usuario tiene que frenar y leer. */
	--alerta: #e0574f;

	/* --- tipografia ------------------------------------------------------
	   Titulos en Cinzel (romana, con serifas marcadas: acompana al logo sin
	   volverse ilegible como las goticas cerradas).
	   Cuerpo en la fuente del sistema. En Windows eso es Segoe UI, que se lee
	   mucho mejor que Verdana en parrafos y no cuesta un pedido de red. */
	--display: 'Cinzel', 'Trajan Pro', 'Times New Roman', serif;
	--cuerpo:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
	           'Helvetica Neue', Arial, sans-serif;

	/* --- espaciado -------------------------------------------------------
	   Escala de 4px. Todo margen y todo relleno del sitio sale de aca; es lo
	   que hace que el ritmo vertical se sienta parejo entre paginas que no
	   tienen nada que ver entre si. */
	--e1: 4px;
	--e2: 8px;
	--e3: 12px;
	--e4: 16px;
	--e5: 24px;
	--e6: 32px;
	--e7: 48px;

	--radio: 3px;      /* casi recto: el chaflan lo aportan los ::before */
	--transicion: .18s cubic-bezier(.4, 0, .2, 1);
}


/* ============================================================================
   2. BASE Y TIPOGRAFIA
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

body
{
	margin: 0;
	padding: 0;
	background: var(--fondo) url('images/noxera_bg.jpg') no-repeat center center fixed;
	background-size: cover;
	font-family: var(--cuerpo);
	font-size: 12px;
	line-height: 1.6;
	color: var(--txt);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Velo oscuro sobre la foto de fondo. Sin esto el contenido tiene que pelear
   contra las zonas claras de la imagen y el contraste cambia segun donde caiga
   el scroll. Con el velo, el texto siempre se apoya en el mismo negro. */
body::before
{
	content: '';
	position: fixed;
	inset: 0;
	background:
		radial-gradient(ellipse at 50% 0%, rgba(140, 184, 78, .05), transparent 55%),
		linear-gradient(180deg, rgba(8, 9, 11, .82) 0%, rgba(8, 9, 11, .93) 100%);
	pointer-events: none;
	z-index: 0;
}

#page
{
	position: relative;
	z-index: 1;
	width: 96%;
	max-width: 1240px;
	margin: 0 auto;
	padding-bottom: var(--e6);
}

a
{
	color: var(--oro-claro);
	text-decoration: none;
	font-weight: 500;
	transition: color var(--transicion);
}
a:hover { color: var(--oro-luz); }

.white, .whites { color: #fff; }

h1, h2, h3, h4
{
	font-family: var(--display);
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--oro-claro);
	margin: 0 0 var(--e3);
	line-height: 1.25;
}

/* Etiqueta chica en versalitas. Se repite en toda la interfaz: cabeceras de
   caja, titulos de menu, botones. Es lo que le da voz uniforme al sitio. */
.nox-etiqueta,
.nav-section-title,
.widget-title
{
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}


/* ============================================================================
   3. ENCABEZADO
   ----------------------------------------------------------------------------
   El logo va en dos capas apiladas que calzan pixel a pixel (los dos PNG miden
   1099x620, mismo background-size y misma posicion):

     logo.png        el logo entero, quieto
     logo_verde.png  solo el fuego verde recortado, animado encima

   La capa verde lleva DOS animaciones a la vez sobre propiedades distintas: una
   late (opacidad y brillo, 5.2s) y otra la desplaza un par de pixeles
   (transform, 7.9s). Como las duraciones no son multiplos, nunca vuelven a
   coincidir en el mismo punto del ciclo y el fuego parece vivo en lugar de
   parpadear a compas. Va en 'screen' para que sume luz sin tapar el dorado.
   ========================================================================== */

#header
{
	position: relative;
	width: 100%;
	height: 280px;
	background: url('images/logo.png') no-repeat top center;
	background-size: auto 268px;
}

#header::before
{
	content: '';
	position: absolute;
	inset: 0;
	background: url('images/logo_verde.png') no-repeat top center;
	background-size: auto 268px;
	mix-blend-mode: screen;
	pointer-events: none;
	animation: nox-fuego-brillo 5.2s ease-in-out infinite,
	           nox-fuego-mov    7.9s ease-in-out infinite;
}

@keyframes nox-fuego-brillo
{
	0%, 100% { opacity: .35; filter: brightness(1); }
	45%      { opacity: .95; filter: brightness(1.3); }
}

@keyframes nox-fuego-mov
{
	0%, 100% { transform: translate(0, 0) scale(1); }
	33%      { transform: translate(-2px, -3px) scale(1.012); }
	66%      { transform: translate(2px, 1px) scale(.994); }
}

/* Linea del pie del encabezado. Antes era una franja animada que recorria
   oro -> cian -> violeta cada 7 segundos. Ahora es un filete quieto que nace y
   muere en transparente: cierra el bloque sin llamar la atencion, que es lo que
   tiene que hacer una linea divisoria. */
#header::after
{
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 1px;
	background: linear-gradient(90deg,
		transparent, var(--oro-humo) 22%, var(--oro) 50%, var(--oro-humo) 78%, transparent);
	opacity: .75;
}

/* --- saludo, arriba a la izquierda -------------------------------------- */

.nox-saludo
{
	position: absolute;
	left: 0;
	top: var(--e4);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1;
	pointer-events: none;
}

.nox-saludo-chico
{
	font-family: var(--display);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .42em;
	text-transform: uppercase;
	color: var(--txt-tenue);
	margin-bottom: var(--e2);
}

/* Degradado dorado recortado al glifo: el mismo oro del logo, de claro arriba a
   bronce abajo. El color plano queda de reserva para navegadores que no
   recortan el fondo al texto. */
.nox-saludo-grande
{
	font-family: var(--display);
	font-size: 40px;
	font-weight: 900;
	letter-spacing: .01em;
	color: var(--oro-claro);
	background: linear-gradient(180deg, var(--oro-luz) 0%, var(--oro) 50%, var(--oro-hondo) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .8));
}

.nox-saludo-signo
{
	-webkit-text-fill-color: var(--verde);
	color: var(--verde);
}

.nox-saludo-filete
{
	width: 150px;
	height: 1px;
	margin-top: var(--e3);
	background: linear-gradient(90deg, var(--oro), transparent);
}

/* Las rates cuelgan del saludo, asi se ven en todas las paginas y no solo en la
   portada. Se les quita el borde superior que tenian en la home: aca el
   separador ya es el filete de arriba. */
.nox-rates-cabecera
{
	margin-top: var(--e3);
	padding-top: 0;
	border-top: 0;
	text-align: left;
}
.nox-rates-cabecera .nox-rates-big   { font-size: 14px; letter-spacing: .1em; }
.nox-rates-cabecera .nox-rates-big b { font-size: 28px; }
.nox-rates-cabecera .nox-equis       { font-size: 13px; vertical-align: 4px; }

/* --- botones, abajo a la izquierda --------------------------------------
   Anclados al pie del encabezado, en espejo con el login que esta abajo a la
   derecha: las dos esquinas se leen como una sola fila. El prefijo #header es
   necesario porque la regla base .nox-hero-cta (position: relative) esta mas
   abajo en el archivo y le ganaria por orden. */
#header .nox-cta-cabecera
{
	position: absolute;
	bottom: var(--e4);
	left: 0;
	z-index: 2;
	margin: 0;
	display: flex;
	gap: var(--e2);
}
#header .nox-cta-cabecera .nox-btn
{
	margin: 0;
	padding: 0 var(--e4);
	height: 34px;
	display: inline-flex;
	align-items: center;
}

/* --- aviso de apertura, centrado bajo el logo ---------------------------- */

.nox-kicker
{
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--e2);
	margin: 0 0 var(--e4);
	padding: 7px var(--e4);
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--verde-luz);
	background: rgba(140, 184, 78, .07);
	border: 1px solid rgba(140, 184, 78, .28);
	border-radius: var(--radio);
}

#header .nox-kicker-cabecera
{
	position: absolute;
	bottom: var(--e4);
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	margin: 0;
	white-space: nowrap;
	height: 34px;
}

/* El punto late para que se lea como "esto esta pasando ahora", que es lo que
   hace que un anuncio de apertura funcione. */
.nox-punto-vivo
{
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--verde);
	flex-shrink: 0;
	animation: nox-latido 2.2s ease-in-out infinite;
}

@keyframes nox-latido
{
	0%   { opacity: 1;  box-shadow: 0 0 0 0 rgba(140, 184, 78, .5); }
	70%  { opacity: .5; box-shadow: 0 0 0 7px rgba(140, 184, 78, 0); }
	100% { opacity: 1;  box-shadow: 0 0 0 0 rgba(140, 184, 78, 0); }
}

/* --- redes, arriba a la derecha -----------------------------------------
   Van con z-index 2 porque la capa de fuego cubre todo el encabezado; sin esto
   los enlaces quedan debajo y no se pueden clickear.
   El contenedor .nox-cabecera-der no se posiciona: es solo un agrupador del
   HTML. Cada bloque se ancla por su cuenta al #header, porque van a alturas
   distintas (redes arriba, cuenta abajo). */
.nox-social
{
	position: absolute;
	top: var(--e4);
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--e2);
}

.nox-red
{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	color: var(--txt-suave);
	background: rgba(18, 20, 26, .8);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	backdrop-filter: blur(4px);
	transition: color var(--transicion), border-color var(--transicion),
	            background var(--transicion), transform var(--transicion);
}

/* Al pasar el mouse cada icono toma el color de su marca. Es lo que hace que se
   reconozcan de un vistazo sin tener que pintarlos todo el tiempo, que
   competiria con el oro del logo. */
.nox-red:hover           { transform: translateY(-2px); background: var(--sup-2); }
.nox-red.discord:hover   { color: #a3b4ff; border-color: #5865f2; }
.nox-red.facebook:hover  { color: #7cb0f7; border-color: #1877f2; }
.nox-red.instagram:hover { color: #f291bb; border-color: #d6249f; }

/* Boton de donacion: el unico relleno dorado macizo del encabezado. Halo que
   respira, para que se note sin moverse de lugar. */
.nox-donate
{
	display: inline-flex;
	align-items: center;
	gap: var(--e2);
	height: 34px;
	padding: 0 var(--e4);
	margin-left: var(--e1);
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #16120a;
	background: linear-gradient(180deg, var(--oro-claro) 0%, var(--oro-hondo) 100%);
	border: 1px solid var(--oro-luz);
	border-radius: var(--radio);
	animation: nox-respirar 3.6s ease-in-out infinite;
	transition: transform var(--transicion), background var(--transicion);
}
.nox-donate:hover
{
	background: linear-gradient(180deg, var(--oro-luz) 0%, var(--oro) 100%);
	color: #16120a;
	transform: translateY(-2px);
	animation: none;
}

@keyframes nox-respirar
{
	0%, 100% { box-shadow: 0 0 0 0 rgba(217, 178, 76, .4); }
	55%      { box-shadow: 0 0 16px 2px rgba(217, 178, 76, .28); }
}

/* --- login, abajo a la derecha ------------------------------------------
   Campos angostos a proposito: es un atajo, no la pagina de cuenta. Mismo alto
   (34px) que los botones de la izquierda. */
.nox-login
{
	position: absolute;
	bottom: var(--e4);
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--e2);
	margin: 0;
}

.nox-login-campo
{
	width: 132px;
	height: 34px;
	padding: 0 var(--e3);
	font-family: var(--cuerpo);
	font-size: 12px;
	color: var(--txt);
	background: rgba(18, 20, 26, .85);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	backdrop-filter: blur(4px);
	transition: border-color var(--transicion), background var(--transicion);
}
.nox-login-campo::placeholder { color: var(--txt-tenue); }
.nox-login-campo:focus
{
	outline: none;
	border-color: var(--oro);
	background: var(--sup-2);
}

.nox-login-btn
{
	height: 34px;
	padding: 0 var(--e4);
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #fff;
	background: linear-gradient(180deg, var(--verde-btn) 0%, var(--verde-btn-hondo) 100%);
	border: 1px solid var(--verde);
	border-radius: var(--radio);
	cursor: pointer;
	transition: background var(--transicion), transform var(--transicion);
}
.nox-login-btn:hover
{
	background: linear-gradient(180deg, var(--verde-btn-alto) 0%, var(--verde-btn) 100%);
	color: #fff;
	transform: translateY(-1px);
}

/* Ya logueado: en vez del formulario, quien sos y los dos enlaces utiles. */
.nox-cuenta
{
	position: absolute;
	bottom: var(--e4);
	right: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var(--e2);
	height: 34px;
	padding: 0 var(--e3);
	font-size: 11px;
	color: var(--txt-suave);
	background: rgba(18, 20, 26, .8);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	backdrop-filter: blur(4px);
}
.nox-cuenta-hola      { color: var(--txt-tenue); }
.nox-cuenta-nombre    { color: var(--oro-claro); font-weight: 700; }
.nox-cuenta-acciones  { display: flex; align-items: center; gap: var(--e2); }
.nox-cuenta-acciones a { color: var(--txt-suave); font-weight: 400; }
.nox-cuenta-acciones a:hover { color: var(--oro-claro); }
.nox-cuenta-sep       { color: var(--linea-viva); }


/* ============================================================================
   4. ESTRUCTURA
   ========================================================================== */

#layout
{
	display: flex;
	align-items: flex-start;
	gap: var(--e4);
	width: 100%;
	margin-top: var(--e5);
}

#sidebar-left  { width: 205px; flex-shrink: 0; }
#sidebar-right { width: 232px; flex-shrink: 0; }
#content-main  { flex: 1 1 auto; min-width: 0; }

#content
{
	width: 100%;
	background: var(--sup-1);
	border: 1px solid var(--linea);
	border-top: 2px solid var(--oro-hondo);
	border-radius: var(--radio) var(--radio) 0 0;
}

#margins
{
	margin: 0;
	padding: var(--e5);
	text-align: left;   /* el justificado abria rios de espacio en columnas angostas */
}

/* La miga de pan que MyAAC dibuja arriba del contenido */
#margins > table:first-child td
{
	font-size: 11px;
	color: var(--txt-tenue);
	letter-spacing: .04em;
	padding: 0 0 var(--e3);
}
#margins > table:first-child a { color: var(--txt-suave); font-weight: 400; }
#margins > table:first-child a:hover { color: var(--oro-claro); }

#margins > hr
{
	border: 0;
	border-top: 1px solid var(--linea);
	margin: 0 0 var(--e5);
}

#content-bot
{
	width: 100%;
	height: 3px;
	background: linear-gradient(90deg, transparent, var(--oro-humo), transparent);
	opacity: .6;
}

#copyrights
{
	width: 100%;
	padding: var(--e5) var(--e3);
	text-align: center;
	font-size: 11px;
	color: var(--txt-tenue);
}
#copyrights a { color: var(--txt-suave); font-weight: 400; }
#copyrights a:hover { color: var(--oro-claro); }


/* --- caja generica -------------------------------------------------------
   La comparten el menu lateral, los widgets y las tarjetas de sistemas: mismo
   fondo, mismo borde, mismo chaflan. Un solo lugar donde tocar. */
.nav-section,
.widget-box
{
	position: relative;
	margin-bottom: var(--e3);
	background: var(--sup-1);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	overflow: hidden;
}

/* Chaflan dorado en la esquina superior izquierda de cada caja. Es la cita
   medieval del diseno: repite el corte de los escudos de los iconos de
   sistemas, dibujado con dos lineas de 1px en vez de una imagen. */
.nav-section::before,
.widget-box::before
{
	content: '';
	position: absolute;
	top: -1px; left: -1px;
	width: 9px; height: 9px;
	border-top: 1px solid var(--oro);
	border-left: 1px solid var(--oro);
	opacity: .55;
	pointer-events: none;
	z-index: 2;
}


/* ============================================================================
   5. MENU LATERAL IZQUIERDO
   ========================================================================== */

.nav-section-title
{
	display: flex;
	align-items: center;
	gap: var(--e2);
	padding: 10px var(--e3);
	background: var(--sup-2);
	border-bottom: 1px solid var(--linea);
	color: var(--oro-claro);
	cursor: pointer;
	user-select: none;
	-webkit-user-select: none;
	transition: background var(--transicion), color var(--transicion);
}
.nav-section-title:hover { background: var(--sup-3); color: var(--oro-luz); }
.nav-section-title:focus-visible { outline: 1px solid var(--oro); outline-offset: -3px; }

/* Franja lateral de color. Alterna oro / verde por seccion para dar ritmo a una
   columna que si no serian ocho barras identicas seguidas. Va como pseudo y no
   como border-left para no correr el contenido del titulo. */
.nav-section-title::before
{
	content: '';
	position: absolute;
	left: 0; top: 0;
	width: 2px; height: 41px;
	background: var(--oro);
}
#sidebar-left .nav-section:nth-of-type(even) .nav-section-title
{
	color: var(--verde-luz);
}
#sidebar-left .nav-section:nth-of-type(even) .nav-section-title::before
{
	background: var(--verde);
}
#sidebar-left .nav-section:nth-of-type(even)::before
{
	border-top-color: var(--verde);
	border-left-color: var(--verde);
}

.nav-section-title img
{
	width: 15px;
	height: 15px;
	flex-shrink: 0;
	opacity: .85;
}

/* Flecha indicadora, empujada al extremo derecho. Se dibuja con bordes en vez
   de una imagen para que herede el color de cada seccion. */
.nav-flecha
{
	margin-left: auto;
	width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	opacity: .5;
	transition: transform .3s var(--transicion), opacity var(--transicion);
}
.nav-section.cerrada .nav-flecha        { transform: rotate(-90deg); }
.nav-section.cerrada:hover .nav-flecha  { transform: rotate(0deg); }
.nav-section-title:hover .nav-flecha    { opacity: 1; }

/* Se pliega con max-height, porque height:auto no se puede animar. El valor
   concreto lo pone el javascript midiendo el alto real de cada lista, en vez de
   un numero inventado "suficientemente grande": asi la animacion dura lo mismo
   en una seccion de 3 enlaces que en una de 9. Aca queda solo lo que no cambia. */
.nav-section-links
{
	list-style: none;
	margin: 0;
	padding: var(--e1) 0;
	overflow: hidden;
	transition: max-height .3s var(--transicion), padding .3s var(--transicion);
}

.nav-section-links li a
{
	display: block;
	position: relative;
	padding: 6px var(--e3) 6px var(--e4);
	color: var(--txt-suave);
	font-weight: 400;
	font-size: 12px;
	transition: color var(--transicion), background var(--transicion),
	            padding-left var(--transicion);
}

/* El acento del hover es dorado, no cian. Antes entraba un cuarto color por la
   puerta de atras en el elemento que mas se repite del sitio. */
.nav-section-links li a::before
{
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 2px;
	background: var(--oro);
	transform: scaleY(0);
	transition: transform var(--transicion);
}
.nav-section-links li a:hover
{
	color: var(--oro-claro);
	background: var(--sup-2);
	padding-left: 20px;
}
.nav-section-links li a:hover::before { transform: scaleY(1); }


/* ============================================================================
   6. WIDGETS DEL LATERAL DERECHO
   ========================================================================== */

.widget-title
{
	position: relative;
	padding: 10px var(--e3);
	background: var(--sup-2);
	border-bottom: 1px solid var(--linea);
	color: var(--oro-claro);
}
.widget-title::before
{
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 2px;
	background: var(--oro);
}

/* Server Status y el rotativo van en verde; Top Players queda dorado. Asi
   ningun par de cajas vecinas repite color. */
.widget-title.verde { color: var(--verde-luz); }
.widget-title.verde::before { background: var(--verde); }

.widget-body { padding: var(--e3); }

/* El numero de conectados es el dato mas consultado del sitio: se lleva el
   verde acido, el tamano y la tipografia de titulo. */
.widget-highlight
{
	margin: 0 0 var(--e1);
	font-family: var(--display);
	font-size: 26px;
	font-weight: 700;
	line-height: 1;
	color: var(--verde);
	text-align: center;
}
.widget-highlight.offline
{
	font-size: 15px;
	color: var(--alerta);
}

.widget-sub
{
	margin: 0 0 var(--e1);
	font-size: 11px;
	color: var(--txt-tenue);
	text-align: center;
	letter-spacing: .03em;
}

.widget-row
{
	display: flex;
	align-items: center;
	gap: var(--e2);
	padding: 6px 0;
	border-bottom: 1px solid var(--linea);
	font-size: 11px;
}
.widget-row:last-child { border-bottom: none; }

.widget-row .rank
{
	width: 20px;
	flex-shrink: 0;
	font-family: var(--display);
	font-weight: 700;
	color: var(--oro-hondo);
	font-size: 10px;
}
/* El primer puesto en oro pleno; del segundo para abajo, apagado. La jerarquia
   del ranking se lee sola, sin tener que agrandar la fila. */
.widget-row:first-child .rank { color: var(--oro); }

.widget-row a
{
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--txt);
	font-weight: 400;
}
.widget-row a:hover { color: var(--oro-claro); }

.widget-row .lvl
{
	flex-shrink: 0;
	color: var(--txt-tenue);
	font-size: 10px;
}

/* --- rotativo "What makes Noxera" ---------------------------------------
   Los seis mensajes se turnan en una sola caja. La altura la fija el javascript
   al texto mas largo, para que el sidebar no salte al cambiar de mensaje. */
.nox-rota { position: relative; }
.nox-rota-item
{
	position: absolute;
	top: 0; left: 0; right: 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .5s ease, transform .5s ease;
}
.nox-rota-item.visible { opacity: 1; visibility: visible; transform: none; }

.nox-rota-t
{
	margin-bottom: var(--e2);
	font-family: var(--display);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	color: var(--verde-luz);
}
.nox-rota p
{
	margin: 0;
	font-size: 11px;
	line-height: 1.7;
	color: var(--txt-suave);
}

.nox-rota-puntos
{
	padding: var(--e2) var(--e3) var(--e3);
	text-align: center;
	background: var(--sup-1);
	border-top: 1px solid var(--linea);
}
.nox-punto
{
	display: inline-block;
	width: 5px; height: 5px;
	margin: 0 3px;
	border-radius: 50%;
	background: var(--linea-viva);
	cursor: pointer;
	transition: background var(--transicion), transform var(--transicion);
}
.nox-punto:hover  { background: var(--txt-tenue); }
.nox-punto.activo { background: var(--verde); transform: scale(1.25); }

/* --- streams en vivo ----------------------------------------------------- */

.nox-stream-tabs
{
	display: flex;
	background: var(--sup-1);
	border-bottom: 1px solid var(--linea);
}
.nox-stream-tab
{
	flex: 1 1 0;
	appearance: none;
	-webkit-appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	padding: var(--e2) var(--e1);
	font-family: var(--display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--txt-tenue);
	cursor: pointer;
	transition: color var(--transicion), background var(--transicion),
	            border-color var(--transicion);
}
.nox-stream-tab:hover { color: var(--txt); background: var(--sup-2); }

/* Cada plataforma se pinta con su color solo cuando esta activa, asi se
   distingue de un vistazo cual se esta viendo. */
.nox-stream-tab.twitch.activo
{
	color: #c79bff;
	border-bottom-color: #9147ff;
	background: rgba(145, 71, 255, .08);
}
.nox-stream-tab.kick.activo
{
	color: var(--verde-luz);
	border-bottom-color: var(--verde);
	background: rgba(140, 184, 78, .08);
}

.nox-stream-panel { display: none; }
.nox-stream-panel.activo { display: block; }

/* Caja 16:9 por relleno porcentual: el iframe se estira solo y el widget no
   salta de alto mientras carga el reproductor. */
.nox-stream-video
{
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	background: #000;
	overflow: hidden;
}
.nox-stream-video iframe
{
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	border: 0;
}

.nox-stream-lista
{
	padding: var(--e2) var(--e2) var(--e1);
	background: var(--sup-1);
}
.nox-stream-canal
{
	display: inline-block;
	appearance: none;
	-webkit-appearance: none;
	margin: 0 var(--e1) var(--e1) 0;
	padding: 3px var(--e2);
	font-family: var(--cuerpo);
	font-size: 10px;
	color: var(--txt-suave);
	background: var(--sup-2);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	cursor: pointer;
	transition: background var(--transicion), color var(--transicion),
	            border-color var(--transicion);
}
.nox-stream-canal:hover { background: var(--sup-3); color: var(--txt); }
.nox-stream-canal.activo
{
	color: var(--oro-claro);
	border-color: var(--oro-hondo);
	background: rgba(217, 178, 76, .1);
}
/* Si hay un solo canal la lista no aporta nada: queda el reproductor y el
   enlace de abajo. */
.nox-stream-lista .nox-stream-canal:only-child { display: none; }

.nox-stream-link
{
	display: block;
	padding: var(--e2) var(--e3);
	background: var(--sup-1);
	border-top: 1px solid var(--linea);
	color: var(--oro-claro);
	font-size: 11px;
	text-align: center;
}
.nox-stream-link:hover { color: var(--oro-luz); background: var(--sup-2); }


/* ============================================================================
   7. PORTADA: HERO Y GRILLA DE SISTEMAS
   ========================================================================== */

.nox-hero
{
	position: relative;
	margin: 0 0 var(--e5);
	padding: var(--e6) var(--e5) var(--e5);
	background:
		radial-gradient(ellipse at 50% 0%, rgba(140, 184, 78, .07), transparent 60%),
		var(--sup-1);
	border: 1px solid var(--linea);
	border-top: 2px solid var(--oro-hondo);
	border-radius: var(--radio);
	text-align: center;
	overflow: hidden;
}

/* Resplandor dorado detras del titular, desenfocado. Da profundidad sin meter
   una textura ni una imagen de fondo. */
.nox-hero::before
{
	content: '';
	position: absolute;
	top: -70px; left: 50%;
	width: 380px; height: 140px;
	margin-left: -190px;
	background: var(--oro);
	opacity: .1;
	filter: blur(45px);
	pointer-events: none;
}

.nox-hero h1
{
	position: relative;
	margin: 0;
	font-size: 34px;
	font-weight: 900;
	line-height: 1.2;
	letter-spacing: .01em;
	color: var(--oro-claro);
	text-shadow: 0 2px 12px rgba(0, 0, 0, .6);
}

/* El remate en verde cierra la frase y ata el titular con el fuego del logo y
   con el boton de descarga, que tambien son verdes. */
.nox-hero h1 .verde
{
	color: var(--verde);
	/* El halo se deja apenas insinuado: con el verde anterior hacia falta para
	   separarlo del fondo, con este ya contrasta solo y un resplandor fuerte lo
	   devolvia al terreno del neon. */
	text-shadow: 0 0 22px rgba(140, 184, 78, .15), 0 2px 12px rgba(0, 0, 0, .6);
}

.nox-filete
{
	position: relative;
	width: 80px; height: 1px;
	margin: var(--e5) auto var(--e4);
	background: linear-gradient(90deg, transparent, var(--oro), transparent);
}

.nox-hero-sub
{
	position: relative;
	max-width: 580px;
	margin: 0 auto var(--e5);
	font-size: 13px;
	line-height: 1.75;
	color: var(--txt-suave);
}

.nox-hero-cta { position: relative; margin-bottom: var(--e4); }

.nox-btn
{
	display: inline-block;
	margin: 0 var(--e1);
	padding: 10px var(--e5);
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--txt);
	background: var(--sup-2);
	border: 1px solid var(--linea-viva);
	border-radius: var(--radio);
	transition: color var(--transicion), border-color var(--transicion),
	            background var(--transicion), transform var(--transicion);
}
.nox-btn:hover
{
	color: var(--oro-luz);
	border-color: var(--oro-hondo);
	background: var(--sup-3);
	transform: translateY(-1px);
}

/* El boton de descarga va en verde: es la accion principal de la portada, y asi
   no se confunde con los titulos, que son todos dorados. El filete claro del
   borde es lo que lo separa del fondo, ahora que el relleno es oscuro. */
.nox-btn-main
{
	color: #fff;
	background: linear-gradient(180deg, var(--verde-btn) 0%, var(--verde-btn-hondo) 100%);
	border-color: var(--verde);
	box-shadow: 0 0 14px rgba(140, 184, 78, .10);
}
.nox-btn-main:hover
{
	color: #fff;
	background: linear-gradient(180deg, var(--verde-btn-alto) 0%, var(--verde-btn) 100%);
	border-color: var(--verde-luz);
	box-shadow: 0 0 20px rgba(140, 184, 78, .18);
}

/* --- rates --------------------------------------------------------------- */

.nox-rates
{
	position: relative;
	padding-top: var(--e4);
	border-top: 1px solid var(--linea);
	font-size: 11px;
	color: var(--txt-tenue);
}
.nox-rates span { display: block; letter-spacing: .04em; }
.nox-rates b { color: var(--oro-claro); margin-right: var(--e1); }

.nox-rates-big
{
	font-family: var(--display);
	font-weight: 700;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .14em;
	color: var(--txt-suave);
}

/* El "1" es el dato que importa, asi que se lleva el tamano y el oro. La "x"
   queda como un multiplicador chico y apagado al lado, que es como se leen
   estas cifras. Van en dos elementos separados para poder tratarlos distinto. */
.nox-rates-big b
{
	font-size: 30px;
	color: var(--oro-claro);
	background: linear-gradient(180deg, var(--oro-luz) 0%, var(--oro) 55%, var(--oro-hondo) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .7));
	letter-spacing: 0;
	vertical-align: -2px;
}

.nox-rates-big .nox-equis
{
	/* display inline explicito: la regla ".nox-rates span { display: block }" de
	   arriba le caia encima y mandaba la x sola a un renglon. */
	display: inline;
	font-size: 14px;
	font-weight: 500;
	/* hay que repetir el color: el <b> deja el relleno transparente para que se
	   vea el degradado, y el hijo lo hereda, asi que la x saldria invisible. */
	-webkit-text-fill-color: var(--txt-tenue);
	color: var(--txt-tenue);
	filter: none;
	margin-right: 2px;
	vertical-align: 4px;
}

.nox-rates-note
{
	margin-top: var(--e1);
	font-size: 10px;
	color: var(--txt-tenue);
	letter-spacing: .06em;
}

/* --- grilla de los seis sistemas ----------------------------------------
   Los iconos de templates/noxera/images/features/ son escudos de 220px con
   filete dorado sobre casi negro: ya traen puesta la paleta del sitio. La
   tarjeta no los enmarca de nuevo, solo les da aire; enmarcar un escudo dentro
   de otro marco es lo que hace ver recargados a estos bloques.

   Para agregar, sacar o reordenar sistemas se edita el array $noxSistemas al
   principio de template.php. Aca no hay nada por sistema. */

.nox-sistemas { margin: 0 0 var(--e5); }

.nox-sistemas-cab
{
	display: flex;
	align-items: center;
	gap: var(--e4);
	margin-bottom: var(--e5);
}
.nox-sistemas-cab h2
{
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--oro-claro);
	white-space: nowrap;
}
/* Los filetes a los lados del titulo crecen para llenar el ancho sobrante: el
   titulo queda centrado sin importar cuanto mida el texto. */
.nox-sistemas-cab::before,
.nox-sistemas-cab::after
{
	content: '';
	flex: 1;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--oro-humo));
}
.nox-sistemas-cab::after { background: linear-gradient(90deg, var(--oro-humo), transparent); }

.nox-sistemas-grilla
{
	display: grid;
	/* auto-fit + minmax: tres columnas en escritorio, dos en tablet y una en
	   telefono, sin un solo media query. */
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--e3);
}

.nox-sistema
{
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--e5) var(--e4) var(--e4);
	background: var(--sup-1);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	text-align: center;
	overflow: hidden;
	transition: border-color var(--transicion), transform var(--transicion),
	            background var(--transicion);
}

/* Resplandor detras del icono, apagado en reposo. Al pasar el mouse sube, y con
   el la tarjeta entera: es toda la animacion que necesita. */
.nox-sistema::before
{
	content: '';
	position: absolute;
	top: -30px; left: 50%;
	width: 150px; height: 150px;
	margin-left: -75px;
	border-radius: 50%;
	background: var(--verde);
	opacity: 0;
	filter: blur(40px);
	pointer-events: none;
	transition: opacity .3s ease;
}
.nox-sistema:hover
{
	transform: translateY(-3px);
	border-color: var(--oro-humo);
	background: var(--sup-2);
}
.nox-sistema:hover::before { opacity: .14; }

.nox-sistema img
{
	position: relative;
	width: 74px;
	height: 74px;
	margin-bottom: var(--e3);
	transition: transform var(--transicion);
}
.nox-sistema:hover img { transform: scale(1.06); }

.nox-sistema-t
{
	position: relative;
	margin: 0 0 var(--e2);
	font-family: var(--display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--oro-claro);
}

.nox-sistema p
{
	position: relative;
	margin: 0;
	font-size: 11px;
	line-height: 1.7;
	color: var(--txt-suave);
}


/* ============================================================================
   8. PAGINAS INTERNAS
   ----------------------------------------------------------------------------
   Account, Characters, Who is Online, Highscores, Houses, Guilds, Downloads.
   Vienen con el look original de Tibia: barras doradas macizas, campos blancos
   del sistema y botones grises. Aca se pasan a la misma linea que el resto del
   sitio: cajas oscuras, el oro solo como acento, y los mismos campos y botones
   del encabezado.
   ========================================================================== */

/* --- cabecera de cada caja ----------------------------------------------- */

.TableContainer
{
	position: relative;
	width: 100%;
	margin-bottom: var(--e4);
	font-size: 12px;
	background: var(--sup-1);
	border: 1px solid var(--linea);
	border-radius: var(--radio);
	overflow: hidden;
}

.TableContainer .CaptionContainer,
.TableContainer .CaptionContainer .CaptionInnerContainer
{
	/* !important porque el HTML de MyAAC trae el dorado macizo cableado */
	background: var(--sup-2) !important;
	border: 0 !important;
	position: relative;
	width: 100%;
	height: auto;
	padding: 0;
	text-align: left;
}
.TableContainer .CaptionContainer
{
	border-bottom: 1px solid var(--linea) !important;
}
.TableContainer .CaptionContainer::before
{
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 2px;
	background: var(--oro);
	z-index: 2;
}
.TableContainer .CaptionContainer .Text
{
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--oro-claro);
	padding: 10px var(--e3);
	text-align: left;
}

/* Las esquinas y bordes decorativos eran .gif del diseno viejo: sobre el fondo
   plano nuevo solo ensucian. */
.TableContainer .CaptionContainer .CaptionEdgeLeftTop,
.TableContainer .CaptionContainer .CaptionEdgeRightTop,
.TableContainer .CaptionContainer .CaptionEdgeLeftBottom,
.TableContainer .CaptionContainer .CaptionEdgeRightBottom,
.TableContainer .CaptionContainer .CaptionBorderTop,
.TableContainer .CaptionContainer .CaptionBorderBottom,
.TableContainer .CaptionContainer .CaptionVerticalLeft,
.TableContainer .CaptionContainer .CaptionVerticalRight,
.TableShadowContainerRightTop,
.TableShadowRightTop,
.TableBottomShadow,
.TableBottomLeftShadow,
.TableBottomRightShadow
{
	display: none !important;
}

/* --- cuerpo -------------------------------------------------------------- */

.TableContainer .Table1,
.TableContainer .Table2,
.TableContainer .Table3,
.TableContainer .Table4,
.TableContainer .Table5,
.TableContentContainer
{
	width: 100%;
	border: 0;
	background: var(--sup-1);
	margin: 0;
}
.TableContainer .Table1 .InnerTableContainer { padding: var(--e4); }
.TableContainer .Table2 .InnerTableContainer,
.TableContainer .Table3 .InnerTableContainer,
.TableContainer .Table4 .InnerTableContainer,
.TableContainer .Table5 .InnerTableContainer { margin: 0; width: 100%; }

.TableContentAndRightShadow { margin: 0; background: none; }

.TableContent { width: 100%; border-collapse: collapse; }
.TableContent td { padding: 8px var(--e3); }

/* Filas alternadas suaves y realce al pasar el mouse: es lo que hace legible
   una tabla larga de personajes o de highscores. */
.TableContainer .Odd  { background: var(--sup-2); }
.TableContainer .Even { background: var(--sup-1); }
.TableContainer tr:hover > td { background: var(--sup-3); }
.TableContainer .Table2 .InnerTableContainer td { border: 0; }

/* Cabeceras de tabla. Las paginas las traen con bgcolor cableado en el HTML,
   que cualquier regla CSS puede pisar. */
table > thead > tr[bgcolor],
table > thead > tr > td,
table > thead > tr > th,
tr[bgcolor="#c9a227"] > td,
tr[bgcolor="#c9a227"] > th
{
	background: var(--sup-2) !important;
	color: var(--oro-claro) !important;
	font-family: var(--display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--linea);
	padding: 9px var(--e3);
	text-align: left;
}

.LabelV, .LabelV120, .LabelV150, .LabelV200
{
	font-weight: 600;
	color: var(--txt-suave);
	padding: 7px var(--e4) 7px 0;
	white-space: nowrap;
	vertical-align: top;
}
.LabelV120 { width: 120px; }
.LabelV150 { width: 150px; }
.LabelV200 { width: 200px; }

.LabelH, .LabelH td
{
	position: relative;
	background: var(--sup-2);
	color: var(--oro-claro);
	font-family: var(--display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	padding: 9px var(--e3);
	white-space: nowrap;
}

/* --- campos -------------------------------------------------------------- */

/* El :not([type]) no es un adorno: varias paginas de MyAAC emiten el campo sin
   atributo type (el buscador de Who is online es <input name="name">), y el
   navegador lo trata como texto igual. Sin este selector esos campos se quedan
   con el blanco del sistema en medio de una pagina negra. */
#content input:not([type]),
#content input[type="text"],
#content input[type="password"],
#content input[type="email"],
#content input[type="number"],
#content input[type="search"],
#content select,
#content textarea
{
	height: 34px;
	padding: 0 var(--e3);
	font-family: var(--cuerpo);
	font-size: 12px;
	color: var(--txt);
	background: var(--sup-2);
	border: 1px solid var(--linea-viva);
	border-radius: var(--radio);
	transition: border-color var(--transicion), background var(--transicion);
}
#content textarea { height: auto; padding: var(--e2) var(--e3); line-height: 1.6; }
#content select   { padding: 0 var(--e2); }

#content input:not([type]):focus,
#content input[type="text"]:focus,
#content input[type="password"]:focus,
#content input[type="email"]:focus,
#content input[type="number"]:focus,
#content input[type="search"]:focus,
#content select:focus,
#content textarea:focus
{
	outline: none;
	border-color: var(--oro);
	background: var(--sup-3);
}
#content input::placeholder,
#content textarea::placeholder { color: var(--txt-tenue); }

/* El checkbox nativo es blanco y rompe el conjunto; accent-color lo tine sin
   tener que reemplazarlo por un div falso. */
#content input[type="checkbox"],
#content input[type="radio"]
{
	accent-color: var(--verde);
	width: 15px;
	height: 15px;
	vertical-align: -3px;
}

/* --- botones ------------------------------------------------------------- */

#content input[type="submit"],
#content input[type="button"],
#content input[type="reset"],
#content button
{
	height: 34px;
	padding: 0 var(--e4);
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--txt);
	background: var(--sup-2);
	border: 1px solid var(--linea-viva);
	border-radius: var(--radio);
	cursor: pointer;
	transition: color var(--transicion), border-color var(--transicion),
	            background var(--transicion);
}
#content input[type="submit"]:hover,
#content input[type="button"]:hover,
#content input[type="reset"]:hover,
#content button:hover
{
	color: var(--oro-luz);
	border-color: var(--oro-hondo);
	background: var(--sup-3);
}

/* El submit es la accion principal de cada formulario, asi que se lleva el
   verde, igual que el "Log in" y el "Download client" del encabezado. */
#content input[type="submit"],
#content button[type="submit"]
{
	color: #fff;
	background: linear-gradient(180deg, var(--verde-btn) 0%, var(--verde-btn-hondo) 100%);
	border-color: var(--verde);
}
#content input[type="submit"]:hover,
#content button[type="submit"]:hover
{
	color: #fff;
	background: linear-gradient(180deg, var(--verde-btn-alto) 0%, var(--verde-btn) 100%);
	border-color: var(--verde-luz);
}

/* Salvo los que MyAAC mete dentro de un enlace ("Account lost?", "Back"...):
   esos no envian nada, solo navegan, y en verde competian con el submit de
   verdad. Vuelven al estilo neutro. */
#content a input[type="submit"],
#content a button
{
	color: var(--txt);
	background: var(--sup-2);
	border-color: var(--linea-viva);
}
#content a input[type="submit"]:hover,
#content a button:hover
{
	color: var(--oro-luz);
	background: var(--sup-3);
	border-color: var(--oro-hondo);
}

/* Los botones de imagen del tema viejo (BigButton y compania) no se usan mas,
   pero algunas paginas todavia los emiten. */
.BigButton, .BigButtonOver, .ButtonText { display: none !important; }
.InnerTableButtonRow { width: 100%; border: 0; padding: var(--e2) 0 0; }
.InnerTableButtonRow td { padding-right: var(--e2); }

#content hr { border: 0; border-top: 1px solid var(--linea); margin: var(--e4) 0; }

/* --- mensajes de error y aviso ------------------------------------------- */

.FormFieldError { font-size: 11px; color: var(--alerta); }

.SmallBox { position: relative; margin-bottom: var(--e4); }
.SmallBox .ErrorMessage,
.SmallBox .Message
{
	position: relative;
	font-size: 12px;
	padding: var(--e3) var(--e4);
	background: var(--sup-1);
	border: 1px solid var(--linea);
	border-left: 2px solid var(--oro);
	border-radius: var(--radio);
	color: var(--txt);
}
.SmallBox .ErrorMessage
{
	border-left-color: var(--alerta);
	color: var(--alerta);
	padding-left: var(--e5);
}
.SmallBox .ErrorMessage ul { padding-left: var(--e4); margin: var(--e1) 0 0; }

/* El marco de estas cajas eran nueve .gif (esquinas, bordes, sombras). El borde
   de 1px de arriba los reemplaza a todos. */
.SmallBox .BoxFrameHorizontal,
.SmallBox .BoxFrameVerticalRight,
.SmallBox .BoxFrameVerticalLeft,
.SmallBox .BoxFrameEdgeLeftTop,
.SmallBox .BoxFrameEdgeLeftBottom,
.SmallBox .BoxFrameEdgeRightTop,
.SmallBox .BoxFrameEdgeRightBottom,
.SmallBox .AttentionSign
{
	display: none !important;
}

/* --- noticias ------------------------------------------------------------ */

.Content .BoxContent .Odd  { background: var(--sup-2); padding: var(--e2); }
.Content .BoxContent .Even { background: var(--sup-1); padding: var(--e2); }

.Content #News .BoxContent,
.Content #FeaturedArticle .BoxContent,
.Content #NewsTicker .BoxContent
{
	height: auto !important;
	min-height: 0;
	padding: 0 0 var(--e4);
	line-height: 1.7;
	color: var(--txt);
}

/* La barra de titulo de cada noticia era una imagen repetida en x. Ahora es una
   franja plana con el filete dorado a la izquierda, igual que las cabeceras de
   caja del resto del sitio. */
.Content #News .NewsHeadlineBackground,
.Content #FeaturedArticle .NewsHeadlineBackground,
.Content #NewsArchive .NewsHeadlineBackground
{
	position: relative;
	height: auto;
	min-height: 36px;
	margin: 0 0 var(--e3);
	/* 46px de sangria a la izquierda: los iconos de categoria de MyAAC miden
	   hasta 32px de ancho y se apoyan en los 12px del borde. Con menos, el
	   icono se monta sobre la fecha. */
	padding: var(--e2) var(--e3) var(--e2) 46px;
	background: var(--sup-2) !important;
	border: 0;
	border-left: 2px solid var(--oro);
	border-radius: var(--radio);
}

.Content #News .NewsHeadlineIcon,
.Content #FeaturedArticle .NewsHeadlineIcon,
.Content #NewsArchive .NewsHeadlineIcon
{
	/* Centrado vertical con translateY en vez de un margen negativo fijo: los
	   iconos de las distintas categorias no miden todos lo mismo. */
	position: absolute;
	top: 50%; left: var(--e3);
	margin: 0;
	transform: translateY(-50%);
}

/* La fecha y el titulo venian posicionados en absoluto con left fijo (50px y
   135px), asi que un titulo largo se montaba sobre el autor. Pasan a fluir en
   linea: la fecha primero, apagada, el titulo despues. */
.Content #News .NewsHeadlineDate,
.Content #FeaturedArticle .NewsHeadlineDate,
.Content #NewsArchive .NewsHeadlineDate
{
	position: static;
	display: inline-block;
	width: auto;
	margin-right: var(--e3);
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--txt-tenue);
}

.Content #News .NewsHeadlineText,
.Content #FeaturedArticle .NewsHeadlineText,
.Content #NewsArchive .NewsHeadlineText
{
	position: static;
	display: inline;
	top: auto; left: auto;
	font-family: var(--display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
	color: var(--oro-claro);
}

.Content #News .NewsHeadlineAuthor
{
	position: absolute;
	top: 50%; right: var(--e3);
	transform: translateY(-50%);
	font-size: 10px;
	font-weight: 400;
	color: var(--txt-tenue);
}

.Content .NewsCategoryIconSmall
{
	position: absolute;
	top: 1px; left: 1px;
	width: 16px; height: 16px;
	background-repeat: no-repeat;
}

/* Ticker */
.Content #NewsTicker .Row { position: relative; width: 100%; padding: var(--e1) 0; }
.Content #NewsTicker .NewsTickerIcon
{
	position: absolute;
	top: 3px; left: 0;
	width: 16px; height: 16px;
	background-repeat: no-repeat;
}
.Content #NewsTicker .NewsTickerText { position: relative; margin-left: 24px; font-size: 12px; }
.Content #NewsTicker .NewsTickerDate
{
	position: absolute;
	top: 0;
	font-size: 10px;
	color: var(--txt-tenue);
}
.Content #NewsTicker .NewsTickerShortText { margin-left: 90px; }
.Content #NewsTicker .NewsTickerFullText  { margin-left: 90px; margin-right: 24px; display: none; }
.Content #NewsTicker .NewsTickerExtend
{
	position: relative;
	float: right;
	width: 12px; height: 12px;
	background-repeat: no-repeat;
	cursor: pointer;
	z-index: 10;
}

.Content #FeaturedArticle #TeaserThumbnail
{
	float: right;
	width: 150px; height: 100px;
	margin-left: var(--e4);
	background: #000;
	border: 1px solid var(--linea);
	border-radius: var(--radio);
}
.Content #FeaturedArticle #TeaserText { height: auto; overflow: hidden; }
.Content #FeaturedArticle #Link { position: static; margin: var(--e2) 0 0; }

/* --- contenido escrito desde el panel ------------------------------------
   Downloads, Server Rules, FAQ, Server Info. Es texto plano con h2/h3,
   parrafos y listas: aca se le da ritmo tipografico para que no quede como un
   bloque corrido. */

#ContentHelper h1, #ContentHelper h2, #ContentHelper h3
{
	font-family: var(--display);
	color: var(--oro-claro);
	letter-spacing: .04em;
}
#ContentHelper h2 { font-size: 19px; margin: var(--e6) 0 var(--e3); }
#ContentHelper h2:first-child { margin-top: 0; }

#ContentHelper h3
{
	position: relative;
	font-size: 15px;
	margin: var(--e5) 0 var(--e3);
	padding-bottom: var(--e2);
}
/* Filete que arranca dorado y se desvanece, igual que el del saludo del
   encabezado: repite el mismo gesto en otra escala. */
#ContentHelper h3::after
{
	content: '';
	position: absolute;
	left: 0; bottom: 0;
	width: 110px; height: 1px;
	background: linear-gradient(90deg, var(--oro), transparent);
}

#ContentHelper p { margin: 0 0 var(--e3); line-height: 1.8; color: var(--txt); }
#ContentHelper em, #ContentHelper i { color: var(--txt-suave); }
#ContentHelper strong, #ContentHelper b { color: var(--oro-claro); font-weight: 600; }
#ContentHelper small { color: var(--txt-tenue); }
#ContentHelper a { color: var(--oro-claro); }
#ContentHelper a:hover { color: var(--oro-luz); text-decoration: underline; }

/* Rombo dorado en lugar del punto del navegador */
#ContentHelper ul { list-style: none; padding-left: 0; margin: 0 0 var(--e4); }
#ContentHelper ul > li
{
	position: relative;
	padding: var(--e1) 0 var(--e1) var(--e5);
	line-height: 1.75;
	color: var(--txt);
}
#ContentHelper ul > li::before
{
	content: '';
	position: absolute;
	left: var(--e2); top: 11px;
	width: 5px; height: 5px;
	background: var(--oro);
	transform: rotate(45deg);
}

/* Las listas numeradas son pasos ("How to connect"), asi que el numero se
   dibuja como ficha en vez de dejarlo suelto al margen. */
#ContentHelper ol { list-style: none; counter-reset: nox-paso; padding-left: 0; margin: 0 0 var(--e4); }
#ContentHelper ol > li
{
	position: relative;
	counter-increment: nox-paso;
	padding: var(--e2) 0 var(--e2) var(--e6);
	line-height: 1.75;
	color: var(--txt);
}
#ContentHelper ol > li::before
{
	content: counter(nox-paso);
	position: absolute;
	left: 0; top: var(--e2);
	width: 22px; height: 22px;
	line-height: 22px;
	text-align: center;
	font-family: var(--display);
	font-size: 11px;
	font-weight: 700;
	color: #16120a;
	background: linear-gradient(180deg, var(--oro-claro) 0%, var(--oro-hondo) 100%);
	border-radius: 50%;
}

/* --- filas de datos sin clase -------------------------------------------
   Highscores, Characters, Houses, Guilds no llevan clases CSS: pintan las filas
   con el atributo bgcolor del HTML, asi que se enganchan por ahi. */

#ContentHelper tr[bgcolor="#202128"] > td,
#ContentHelper tr[bgcolor="#26272f"] > td
{
	padding: 8px var(--e3);
	border-top: 1px solid var(--linea);
	transition: background var(--transicion);
}
#ContentHelper tr[bgcolor="#202128"] > td { background: var(--sup-2) !important; }
#ContentHelper tr[bgcolor="#26272f"] > td { background: var(--sup-1) !important; }
#ContentHelper tr[bgcolor="#202128"]:hover > td,
#ContentHelper tr[bgcolor="#26272f"]:hover > td { background: var(--sup-3) !important; }

/* La primera columna de estas tablas es el puesto: en oro y a la derecha, que
   es como se leen los rankings. */
#ContentHelper tr[bgcolor="#202128"] > td:first-child,
#ContentHelper tr[bgcolor="#26272f"] > td:first-child
{
	font-family: var(--display);
	font-weight: 700;
	color: var(--oro-hondo);
	text-align: right;
	white-space: nowrap;
}

/* Cajas laterales de Highscores (elegir skill / vocacion). Los enlaces venian
   sueltos separados a <br/> y quedaban apretados: pasan a ser filas de lista,
   con area de click completa. */
#ContentHelper tr[bgcolor="#26272f"] > td > a[class^="size_"],
#ContentHelper tr[bgcolor="#202128"] > td > a[class^="size_"]
{
	display: block;
	position: relative;
	padding: 6px var(--e3);
	margin: 0 calc(var(--e3) * -1);
	color: var(--txt-suave);
	font-weight: 400;
	/* el td que las contiene trae align="right" en el HTML y arrastraba los
	   enlaces contra el borde, del lado contrario al acento del hover */
	text-align: left;
	border-left: 2px solid transparent;
	transition: color var(--transicion), background var(--transicion),
	            border-color var(--transicion);
}
#ContentHelper tr[bgcolor="#26272f"] > td > a[class^="size_"]:hover,
#ContentHelper tr[bgcolor="#202128"] > td > a[class^="size_"]:hover
{
	color: var(--oro-claro);
	background: var(--sup-3);
	border-left-color: var(--oro);
	text-decoration: none;
}
/* el <br/> que separaba cada enlace ya no hace falta */
#ContentHelper tr > td > a[class^="size_"] + br { display: none; }

#ContentHelper label { color: var(--txt-suave); margin-right: var(--e2); }

/* Highscores, Guilds y Houses arman sus dos columnas (el listado a la izquierda,
   la caja de filtros a la derecha) con una tabla de maquetacion de una sola
   fila. Sin esto las celdas quedan con el vertical-align: middle de fabrica y
   la columna mas corta flota en el medio de la mas larga, dejando un hueco de
   200px arriba del ranking. Se ataca solo la tabla exterior (hijo directo de
   #ContentHelper), no las tablas de datos que van adentro. */
#ContentHelper > table > tbody > tr > td { vertical-align: top; }

/* --- boton de descarga --------------------------------------------------
   Va con estilo inline desde el panel, asi que hay que pisarlo con !important.
   Es la accion principal de la pagina: se agranda y se le suma una flecha
   dibujada con bordes. */
#ContentHelper a[href$=".zip"],
#ContentHelper a[href$=".exe"],
#ContentHelper a[href$=".rar"]
{
	display: inline-flex !important;
	align-items: center;
	gap: var(--e3);
	padding: var(--e3) var(--e5) !important;
	font-family: var(--display) !important;
	font-size: 13px !important;
	font-weight: 700 !important;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: #fff !important;
	background: linear-gradient(180deg, var(--verde-btn) 0%, var(--verde-btn-hondo) 100%) !important;
	border: 1px solid var(--verde) !important;
	border-radius: var(--radio) !important;
	text-decoration: none !important;
	box-shadow: 0 0 0 0 rgba(140, 184, 78, .4);
	animation: nox-respirar-verde 3.6s ease-in-out infinite;
	transition: transform var(--transicion), background var(--transicion);
}
#ContentHelper a[href$=".zip"]:hover,
#ContentHelper a[href$=".exe"]:hover,
#ContentHelper a[href$=".rar"]:hover
{
	background: linear-gradient(180deg, var(--verde-btn-alto) 0%, var(--verde-btn) 100%) !important;
	border-color: var(--verde-luz) !important;
	transform: translateY(-2px);
	animation: none;
}
/* La flecha acompana al texto: era casi negra cuando el texto lo era. */
#ContentHelper a[href$=".zip"]::before,
#ContentHelper a[href$=".exe"]::before,
#ContentHelper a[href$=".rar"]::before
{
	content: '';
	width: 0; height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 8px solid #fff;
}

@keyframes nox-respirar-verde
{
	0%, 100% { box-shadow: 0 0 0 0 rgba(140, 184, 78, .3); }
	55%      { box-shadow: 0 0 16px 2px rgba(140, 184, 78, .16); }
}


/* ============================================================================
   9. DATATABLES
   ----------------------------------------------------------------------------
   Monsters, Spells, Commands. datatables.min.css se carga DESPUES de este
   archivo, asi que sus reglas ganan por orden y hay que marcarlas !important.
   Viene con el tema claro de fabrica: filas blancas, cabeceras grises y
   paginacion azul.
   ========================================================================== */

.dataTables_wrapper { color: var(--txt-suave); font-size: 12px; }

table.dataTable thead th,
table.dataTable thead td
{
	background: var(--sup-2) !important;
	color: var(--oro-claro) !important;
	font-family: var(--display);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--linea) !important;
	padding: 10px var(--e3) !important;
}

/* La flecha de orden viene como imagen de fondo clara; se reemplaza por un
   triangulo dibujado con bordes, que hereda el oro. */
table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc
{
	background-image: none !important;
	position: relative;
	cursor: pointer;
}
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after
{
	content: '';
	position: absolute;
	right: var(--e2); top: 50%;
	margin-top: -2px;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}
table.dataTable thead .sorting_asc::after  { border-bottom: 5px solid var(--oro); }
table.dataTable thead .sorting_desc::after { border-top: 5px solid var(--oro); }

table.dataTable tbody tr,
table.dataTable tbody tr.even,
table.dataTable.stripe tbody tr.even,
table.dataTable.display tbody tr.even
{
	background: var(--sup-1) !important;
}
table.dataTable tbody tr.odd,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd
{
	background: var(--sup-2) !important;
}
table.dataTable tbody tr:hover,
table.dataTable.hover tbody tr:hover,
table.dataTable.display tbody tr:hover
{
	background: var(--sup-3) !important;
}

/* La columna por la que esta ordenada la tabla se tinta distinto en el tema de
   fabrica; se iguala al resto para que no aparezca una banda vertical. */
table.dataTable tbody tr > .sorting_1,
table.dataTable tbody tr.odd > .sorting_1,
table.dataTable tbody tr.even > .sorting_1,
table.dataTable tbody tr:hover > .sorting_1
{
	background-color: inherit !important;
}

table.dataTable tbody td
{
	color: var(--txt);
	border-top: 1px solid var(--linea) !important;
	padding: 8px var(--e3) !important;
}
table.dataTable tbody td a { color: var(--oro-claro); }
table.dataTable tbody td a:hover { color: var(--oro-luz); text-decoration: underline; }

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info
{
	color: var(--txt-tenue) !important;
	padding: var(--e2) 0;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input
{
	height: 32px;
	padding: 0 var(--e2);
	color: var(--txt);
	background: var(--sup-2);
	border: 1px solid var(--linea-viva);
	border-radius: var(--radio);
}
.dataTables_wrapper .dataTables_filter input { width: 190px; margin-left: var(--e2); }
.dataTables_wrapper .dataTables_length select:focus,
.dataTables_wrapper .dataTables_filter input:focus
{
	outline: none;
	border-color: var(--oro);
}

.dataTables_wrapper .dataTables_paginate .paginate_button
{
	color: var(--txt-suave) !important;
	background: var(--sup-2) !important;
	border: 1px solid var(--linea-viva) !important;
	border-radius: var(--radio);
	padding: 5px var(--e3) !important;
	margin: 0 2px;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover
{
	color: var(--oro-luz) !important;
	background: var(--sup-3) !important;
	border-color: var(--oro-hondo) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover
{
	color: #16120a !important;
	background: linear-gradient(180deg, var(--oro-claro) 0%, var(--oro-hondo) 100%) !important;
	border-color: var(--oro-luz) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover
{
	color: var(--txt-tenue) !important;
	background: var(--sup-1) !important;
	border-color: var(--linea) !important;
	cursor: default;
}


/* ============================================================================
   10. AMBIENTE
   ----------------------------------------------------------------------------
   El canvas de cenizas va detras de todo el contenido y no intercepta clicks.
   Lo dibuja el script que esta en template.php.
   ========================================================================== */

#nox-ashes
{
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
	pointer-events: none;
}

/* Barra de scroll. Antes era un degradado cian -> violeta, el resto visible mas
   grande de la capa futurista. Ahora es casi negro con el pulgar en bronce. */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--fondo); }
::-webkit-scrollbar-thumb
{
	background: var(--linea-viva);
	border: 2px solid var(--fondo);
	border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--oro-humo); }

/* Firefox */
* { scrollbar-width: thin; scrollbar-color: var(--linea-viva) var(--fondo); }

::selection { background: rgba(140, 184, 78, .28); color: var(--txt); }


/* ============================================================================
   11. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px)
{
	.nox-saludo-grande { font-size: 32px; }
	.nox-login-campo   { width: 108px; }
}

/* Abajo de 950px las tres columnas se apilan. Con flex y anchos fluidos el
   layout se banca achicarse solo: no hace falta ningun hack de zoom. */
@media (max-width: 950px)
{
	#page { width: 100%; padding: 0 var(--e3) var(--e5); }
	#layout { flex-direction: column; gap: var(--e3); }
	#sidebar-left, #sidebar-right, #content-main { width: 100%; }
	#margins { padding: var(--e4); }
	.nox-hero { padding: var(--e5) var(--e4); }
	.nox-hero h1 { font-size: 25px; }
	.nox-sistemas-cab h2 { font-size: 13px; letter-spacing: .1em; }
}

/* En pantallas chicas el logo ocupa todo el ancho y el saludo se le encimaria,
   asi que el saludo se esconde y los controles se compactan. */
@media (max-width: 780px)
{
	#header { height: 205px; background-size: auto 190px; }
	#header::before { background-size: auto 190px; }
	.nox-saludo { display: none; }
	.nox-social { top: var(--e2); gap: var(--e1); }
	.nox-red { width: 30px; height: 30px; }
	.nox-donate { height: 30px; padding: 0 var(--e3); font-size: 10px; }
	.nox-login, .nox-cuenta { bottom: var(--e2); }
	.nox-login-campo { width: 96px; height: 30px; }
	.nox-login-btn { height: 30px; padding: 0 var(--e3); }
	#header .nox-cta-cabecera { bottom: var(--e2); }
	#header .nox-cta-cabecera .nox-btn { height: 30px; padding: 0 var(--e3); font-size: 10px; }
	/* el aviso de apertura ya no entra entre los botones y el login */
	#header .nox-kicker-cabecera { display: none; }
}

/* Abajo de 660px las cuatro esquinas del encabezado (botones a la izquierda,
   aviso al centro, redes y login a la derecha) no entran en una sola fila y se
   pisan entre si. El anclado en absoluto se abandona y todo pasa a fluir en
   columna, centrado, debajo del logo.

   El logo es el fondo del propio #header, asi que no puede "empujar" a nadie:
   el hueco se lo reserva un padding-top del alto del logo, y los controles
   arrancan justo debajo. */
@media (max-width: 660px)
{
	#header
	{
		height: auto;
		padding: 150px 0 var(--e4);
		background-size: auto 140px;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--e2);
	}
	#header::before { background-size: auto 140px; }

	#header .nox-cta-cabecera,
	#header .nox-kicker-cabecera,
	.nox-cabecera-der,
	.nox-social,
	.nox-login,
	.nox-cuenta
	{
		position: static;
		transform: none;
		margin: 0;
		bottom: auto; right: auto; left: auto; top: auto;
	}

	/* el aviso de apertura vuelve, ahora arriba de todo el grupo */
	#header .nox-kicker-cabecera { display: inline-flex; order: -1; height: auto; }

	.nox-cabecera-der
	{
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--e2);
		width: 100%;
	}
	.nox-social { justify-content: center; flex-wrap: wrap; }
	#header .nox-cta-cabecera { justify-content: center; flex-wrap: wrap; }
	.nox-login { width: 100%; max-width: 380px; }
	/* los campos se reparten el ancho disponible en vez de medir fijo */
	.nox-login-campo { flex: 1 1 0; width: auto; min-width: 0; }
}

@media (max-width: 520px)
{
	#header { padding-top: 132px; background-size: auto 122px; }
	#header::before { background-size: auto 122px; }
	.nox-hero h1 { font-size: 21px; }
	.nox-hero-sub { font-size: 12px; }
	.nox-btn { display: block; margin: 0 0 var(--e2); }
	#header .nox-cta-cabecera .nox-btn { display: inline-flex; margin: 0; }
	.nox-sistemas-grilla { grid-template-columns: 1fr; }

	/* Con una sola columna la tarjeta se acuesta: icono a la izquierda, texto a
	   la derecha. Va con grid y no con flex-direction: row porque los tres
	   hijos (icono, titulo, parrafo) son hermanos directos: en una fila flex
	   quedarian como tres columnas, con el titulo y el parrafo uno al lado del
	   otro. Con grid, el icono ocupa las dos filas de la primera columna y el
	   texto se apila solo en la segunda. */
	.nox-sistema
	{
		display: grid;
		grid-template-columns: 56px 1fr;
		grid-template-rows: auto auto;
		column-gap: var(--e4);
		align-content: center;
		text-align: left;
		padding: var(--e4);
	}
	.nox-sistema img
	{
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
		width: 56px; height: 56px;
		margin: 0;
	}
	.nox-sistema-t { grid-column: 2; grid-row: 1; margin-bottom: var(--e1); }
	.nox-sistema p { grid-column: 2; grid-row: 2; }
	#margins { padding: var(--e3); }
}


/* ============================================================================
   12. prefers-reduced-motion
   ----------------------------------------------------------------------------
   Quien pidio menos movimiento en su sistema no ve el fuego, ni el latido, ni
   los halos que respiran. Las cenizas se apagan aparte, desde el javascript.
   Las transiciones de hover se dejan: son respuesta a una accion del usuario,
   no movimiento de fondo.
   ========================================================================== */

@media (prefers-reduced-motion: reduce)
{
	#header::before,
	.nox-punto-vivo,
	.nox-donate,
	#ContentHelper a[href$=".zip"],
	#ContentHelper a[href$=".exe"],
	#ContentHelper a[href$=".rar"]
	{
		animation: none !important;
	}
	.nox-rota-item { transition: opacity .01s; transform: none; }
}