/* Cajas propias de la columna derecha: World status, Next event y PvP activity.
   Usan el armazon de solera.css (.SoleraBox, .SoleraBoxTitulo, .SoleraBoxCuerpo, .SoleraBoxPie) y solo anaden
   su color de cabecera y el contenido. Los selectores llevan #Themeboxes porque basic.css pone
   `#Themeboxes div` (font-size y background-repeat) con mas peso que una clase. */

/* La barra de la cabecera es magenta (~329 grados): cada caja la gira a su color. */
.SoleraBox--estado {
	--sol-caja-filtro: hue-rotate(251deg);
}

.SoleraBox--evento {
	--sol-caja-filtro: hue-rotate(300deg);
}

.SoleraBox--pvp {
	--sol-caja-filtro: hue-rotate(35deg) brightness(.7);
}

/* Pildora de estado: punto de color y texto. */
#Themeboxes .CajaPildora {
	display: flex;
	align-items: center;
	gap: 5px;
	width: fit-content;
	margin: 0 auto 8px;
	padding: 1px 9px 1px 7px;
	border: 1px solid rgba(90, 68, 32, .45);
	border-radius: 10px;
	background: rgba(241, 224, 198, .7);
	color: #3a2a10;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 11px;
	font-weight: 700;
	line-height: 16px;
}

#Themeboxes .CajaPildora::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--punto);
}

#Themeboxes .CajaPildora--si { --punto: #2e7d32; }
#Themeboxes .CajaPildora--no { --punto: #b3261e; }

/* Icono (o arte) a un lado y una cifra con su rotulo al otro. */
#Themeboxes .CajaHeroe {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 0 0 8px;
}

#Themeboxes .CajaHeroe--columna {
	flex-direction: column;
	gap: 4px;
}

#Themeboxes .CajaHeroeIcono {
	flex: none;
	display: block;
}

#Themeboxes .CajaHeroeIcono--pixel {
	image-rendering: pixelated;
}

#Themeboxes .CajaHeroeIcono--apagado {
	opacity: .5;
	filter: grayscale(1);
}

#Themeboxes .CajaHeroeTexto {
	margin: 0;
	font-size: 11px;
	line-height: 1.25;
	text-align: left;
}

#Themeboxes .CajaHeroe--columna .CajaHeroeTexto {
	text-align: center;
}

#Themeboxes .CajaHeroeTexto span,
#Themeboxes .CajaHeroeTexto strong {
	display: block;
}

#Themeboxes .CajaHeroe--columna .CajaHeroeTexto strong {
	font-size: 14px;
}

/* Rotulo junto a una cifra (jugadores en linea, frags): 10-11px, puede pasar a dos lineas. */
#Themeboxes .CajaRotulo {
	min-width: 0;
	font-size: 10px;
	line-height: 1.15;
	text-align: left;
	color: #4a3510;
}

#Themeboxes .CajaRotulo--ancho {
	font-size: 11px;
}

#Themeboxes .CajaRotulo--ancho strong {
	font-size: 13px;
	color: var(--sol-tinta);
}

/* Georgia y no Martel: la fuente de los titulos no trae cifras. */
#Themeboxes .CajaCifra {
	font-family: Georgia, serif;
	font-size: 22px;
	font-weight: 700;
	line-height: 1;
}

#Themeboxes .CajaCuenta {
	font-family: Georgia, serif;
	font-size: 18px;
	font-weight: 700;
	color: #6b2600;
}

#Themeboxes .CajaNota {
	margin: 0 0 8px;
	font-size: 11px;
	color: #5a4420;       /* 5.5:1 sobre el pergamino */
}

#Themeboxes .CajaNota--ahora {
	font-weight: 700;
	color: #6b2600;
}

/* Mini tabla como las de tibia.com: filas alternas de pergamino, rotulo a la izquierda y valor en negrita a la
   derecha. La usan las tres cajas (dl con un div por fila, o ul con un li por fila). */
#Themeboxes .CajaTabla {
	margin: 0 -4px 8px;   /* 4px mas ancha que el texto de la caja: cabe "Fin de semana | Doble loot" */
	padding: 0;
	list-style: none;
	border: 1px solid rgba(90, 68, 32, .45);
	text-align: left;
}

#Themeboxes .CajaTabla > * {
	padding: 3px 5px;
	font-size: 11px;
	line-height: 1.25;
}

#Themeboxes .CajaTabla > :nth-child(odd) {
	background: rgba(241, 224, 198, .8);
}

#Themeboxes .CajaTabla > :nth-child(even) {
	background: rgba(212, 192, 161, .8);
}

#Themeboxes dl.CajaTabla > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 4px;
}

#Themeboxes .CajaTabla dt {
	flex: 0 1 auto;
	font-size: 10px;
	color: #4a3510;
}

#Themeboxes .CajaTabla dd {
	min-width: 0;
	margin: 0;
	font-weight: 700;
	text-align: right;
	white-space: nowrap;
}

/* Ultimas muertes: nombre (enlace) y nivel; debajo, quien y hace cuanto. */
#Themeboxes ul.CajaTabla a:link,
#Themeboxes ul.CajaTabla a:visited {
	text-decoration: none;
}

#Themeboxes ul.CajaTabla a:hover,
#Themeboxes ul.CajaTabla a:focus-visible {
	text-decoration: underline;
}

#Themeboxes ul.CajaTabla strong {
	font-weight: 700;
}

#Themeboxes ul.CajaTabla small {
	display: block;
	font-size: 10px;
	color: #4a3510;
	overflow-wrap: anywhere;
}

/* "Calendario completo" y "Ultimas muertes" no caben a 12px en los 135px del boton. */
#Themeboxes .SoleraBox--evento a.SoleraBoxBoton:link,
#Themeboxes .SoleraBox--evento a.SoleraBoxBoton:visited,
#Themeboxes .SoleraBox--evento a.SoleraBoxBoton:hover,
#Themeboxes .SoleraBox--pvp a.SoleraBoxBoton:link,
#Themeboxes .SoleraBox--pvp a.SoleraBoxBoton:visited,
#Themeboxes .SoleraBox--pvp a.SoleraBoxBoton:hover {
	font-size: 11px;
}