@charset "UTF-8";
/*
Theme Name: ColorMag DeVuego
Theme URI: https://devuego.es
Description: Child theme del ColorMag gratuito (sin licencia) para que el blog comparta la estetica visual del resto de la red DeVuego (bd, escor, codice...).
Author: DeVuego
Template: colormag
Version: 1.0.0
Text Domain: colormag-devuego
*/

/* Las variables de color (--dvgo-*), las fuentes (@font-face) y los assets
   compartidos se cargan desde /css/_colores.css, /fonts.css, etc. via
   wp_enqueue_style en functions.php (misma raiz de dominio que /bd).
   Aqui van los overrides visuales de este child theme. */

/* Sin sidebar en las entradas individuales. */
body.single .cm-secondary {
	display: none !important;
}

body.single .cm-primary {
	width: 100% !important;
}

/* Mas aire lateral en pantallas grandes, para que el texto no se
   estire de borde a borde (mismos cortes que el tamano de fuente del
   cuerpo, ver .cm-entry-summary). */
@media screen and (min-width: 1400px) {
	body.single .cm-primary {
		padding-left: 8rem !important;
		padding-right: 8rem !important;
	}
}

@media screen and (min-width: 768px) and (max-width: 1399px) {
	body.single .cm-primary {
		padding-left: 3rem !important;
		padding-right: 3rem !important;
	}
}

/* --------------------------------------------------------------
   Base de tamanos: ColorMag pone html{font-size:62.5%} (truco "10px=1rem").
   /bd nunca toca el font-size raiz (usa el estandar de 16px=1rem), asi
   que todos los "rem" de este archivo estaban calculandose sobre una
   base de 10px en vez de 16px. Con esto se corrigen de golpe.
   -------------------------------------------------------------- */

html {
	font-size: 100% !important;
}

/* --------------------------------------------------------------
   Fondo y tipografia de todo el sitio (no solo del contenido)
   -------------------------------------------------------------- */

html body {
	font-family: "IBMPlexSans", sans-serif !important;
	background-color: var(--dvgo-color-muy-oscuro) !important;
}

/* #page es display:flex (regla del propio ColorMag); con solo "max-width"
   y sin "width" explicito, el navegador lo encogia y centraba mal
   (margenes asimetricos). Fijando width:100% + los mismos max-width por
   breakpoint que usa #cajaprincipal en /bd (ver css/devstilos.css) se
   soluciona el bug Y queda con las mismas proporciones que /bd. */
body #page {
	width: 100% !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

@media screen and (min-width: 1200px) {
	body #page {
		width: 96% !important;
		max-width: 1600px !important;
	}
}

@media screen and (min-width: 970px) and (max-width: 1199px) {
	body #page {
		max-width: 940px !important;
	}
}

@media screen and (max-width: 969px) {
	body #page {
		max-width: 95% !important;
	}
}

/* #page como caja blanca unica continua (igual que #cajaprincipal en
   /bd) en vez de secciones blanco/oscuro/blanco separadas: la cabecera
   y el contenido pasan a transparentes (comparten este fondo blanco),
   y el menu oscuro queda como una franja insertada dentro de la caja. */
body #page {
	background-color: #fff !important;
	padding: 0.6rem !important;
	border-radius: 1rem !important;
	box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, .5) !important;
	margin-top: 0 !important;
}

a {
	color: var(--dvgo-color-principal) !important;
}

a:hover {
	color: var(--dvgo-color-oscuro) !important;
}

/* --------------------------------------------------------------
   Cabecera (fila de logo) y menu principal, con el builder de
   ColorMag desactivado (ver functions.php): #cm-header-1 es la fila
   del logo, #cm-header-2/.cm-primary-nav es la barra de menu.
   -------------------------------------------------------------- */

#cm-header-1 {
	background-color: transparent !important;
	padding: 1rem 0 !important;
}

.cm-site-branding img,
.custom-logo {
	max-height: 100px !important;
	width: auto !important;
}

/* Buscador junto al logo (widget "Busqueda" en Apariencia > Widgets >
   Cabecera - Sidebar): con el layout "Clasico" (.cm-layout-2) ColorMag
   oculta esta columna y apila todo en vertical por defecto. La
   mostramos y ponemos logo a la izquierda / buscador a la derecha,
   como en /bd. */
.cm-layout-2 #cm-header-1 .cm-row {
	flex-direction: row !important;
	align-items: center !important;
	justify-content: space-between !important;
	flex-wrap: wrap;
}

.cm-layout-2 .cm-header-col-1 {
	flex-basis: auto !important;
	text-align: left !important;
	align-items: flex-start !important;
}

.cm-layout-2 .cm-row .cm-header-col-2 {
	display: flex !important;
	align-items: center;
}

#header-right-sidebar {
	width: 100%;
	max-width: 320px;
}

#header-right-sidebar .widget {
	margin: 0;
}

#header-right-sidebar .widget-title {
	display: none;
}

/* Boton hamburguesa (menu movil): evitar el tono gris por defecto de
   ColorMag y dar contraste con la barra superior. */
@media screen and (max-width: 969px) {
	.cm-menu-toggle,
	.cm-header-builder .cm-mobile-row .cm-menu-toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0.35rem 0.45rem !important;
		border-radius: 0.55rem;
		border: 1px solid var(--dvgo-color-claro) !important;
		background-color: var(--dvgo-color-principal) !important;
		color: #fff !important;
		box-shadow: 0 1px 4px rgba(0, 0, 0, 0.28);
	}

	.cm-menu-toggle svg,
	.cm-menu-toggle .cm-icon,
	.cm-menu-toggle .cm-icon svg {
		width: 24px;
		height: 24px;
		fill: #fff !important;
		color: #fff !important;
	}

	.cm-mobile-nav-container.cm-toggle-open .cm-menu-toggle,
	.cm-primary-nav.cm-mobile-nav .cm-menu-toggle[aria-expanded="true"] {
		background-color: var(--dvgo-color-oscuro) !important;
	}
}

@media screen and (max-width: 767px) {
	.cm-layout-2 #cm-header-1 .cm-row {
		flex-direction: column !important;
		align-items: center !important;
	}

	.cm-layout-2 .cm-header-col-1 {
		text-align: center !important;
		align-items: center !important;
	}

	#header-right-sidebar {
		max-width: 100%;
		margin-top: 0.8rem;
	}
}

/* Igual que #bloquesindex (menu principal real de /bd, dentro de
   navegacion.php): fondo muy oscuro, sin bordes redondeados, ocupa el
   100% del ancho de su contenedor (a diferencia de #bloquestop, que si
   es una pastilla redondeada e inset). */
#cm-header-2,
.cm-primary-nav,
.cm-mobile-nav,
.cm-primary-nav .cm-row,
.cm-primary-nav .cm-container,
.cm-header-builder .cm-header-bottom-row,
#cm-primary-menu,
.cm-primary-menu,
.cm-primary-nav li,
.cm-mobile-nav li,
.cm-primary-nav .sub-menu,
.cm-primary-nav .children,
.cm-mobile-nav .sub-menu,
.cm-mobile-nav .children {
	background-color: var(--dvgo-color-muy-oscuro) !important;
	background-image: none !important;
	border-top: 0 !important;
	border-radius: 0 !important;
	min-height: unset !important;
}

/* La fila de la cabecera/logo debe quedar transparente (comparte el
   fondo blanco de #page), no oscura como la del menu. */
.cm-header-builder .cm-header-top-row,
.cm-header-builder .cm-header-main-row {
	background-color: transparent !important;
}

#cm-header-2 {
	margin: 0.4rem 0 !important;
	width: 100% !important;
}

/* .cm-container es un wrapper generico de ColorMag con max-width:1140px
   fijo (independiente del ancho real de #page), usado tanto en la
   cabecera/menu como envolviendo #cm-primary+sidebar (via
   colormag_main_section_inner_start()). Lo anulamos en todos lados para
   que el contenido use el 100% real de la caja, como en /bd. */
#page .cm-container {
	max-width: 100% !important;
	padding-left: 1rem !important;
	padding-right: 1rem !important;
}

.cm-primary-nav {
	text-align: center !important;
}

/* Ancladas a ".cm-primary-nav" (confirmado presente en el HTML real),
   no a ".cm-menu-primary-container": esa clase solo la pone wp_nav_menu()
   cuando hay un menu asignado a la ubicacion "Primary" en Apariencia >
   Menus. Si no hay ninguno asignado, WordPress usa wp_page_menu() de
   respaldo (lista de paginas), que no lleva esa clase — parece ser el
   caso aqui, asi que nos apoyamos solo en .cm-primary-nav/li/a, validos
   en ambos casos. */
.cm-primary-nav ul,
.cm-mobile-nav ul {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	gap: 0.2rem;
	padding: 0.2rem 0;
	margin: 0;
}

.cm-primary-nav li,
.cm-mobile-nav li {
	padding: 0 !important;
	display: inline-block !important;
	float: none !important;
	font-family: inherit !important;
}

.cm-primary-nav li > a,
.cm-mobile-nav li > a,
.cm-mobile-nav a {
	display: inline-flex !important;
	align-items: center;
	gap: 0.4rem;
	flex: none !important;
	font-family: "KodeMono-Medium", "IBMPlexSans", sans-serif !important;
	color: #fff !important;
	font-size: 1.1rem !important;
	font-weight: normal !important;
	text-transform: none !important;
	line-height: 1.4 !important;
	padding: 0.2rem 1rem !important;
	border-radius: 0.5rem !important;
	background-color: transparent !important;
}

.cm-primary-nav li > a:hover,
.cm-primary-nav li.current-menu-item > a,
.cm-primary-nav li.current_page_item > a,
.cm-mobile-nav a:hover,
.cm-mobile-nav li.current-menu-item > a,
.cm-mobile-nav li.current_page_item > a,
.cm-mobile-nav li:hover > a {
	background-color: #fff !important;
	color: var(--dvgo-color-principal) !important;
}

.cm-primary-nav li li,
.cm-mobile-nav li li {
	display: block !important;
}

.cm-primary-nav li li > a,
.cm-mobile-nav li li > a,
.cm-mobile-nav ul li ul li a {
	text-transform: none !important;
	font-family: "IBMPlexSans", sans-serif !important;
	font-size: 0.9rem !important;
}

/* Iconos del plugin de menu (clases "_mi _before"): algunos items los
   traian con una caja de fondo azul propia del plugin y otros no.
   Normalizado para que todos hereden el color del texto sin fondo. */
.cm-primary-nav i._mi {
	background: none !important;
	background-color: transparent !important;
	color: inherit !important;
	box-shadow: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin-right: 0.4rem;
	font-size: 1em;
	/* El plugin de iconos del menu mete "vertical-align/align-self" en
	   linea en algunos items y no en otros, descuadrando la alineacion
	   entre botones. Se fuerza igual en todos (!important gana sobre
	   estilos en linea). */
	vertical-align: middle !important;
	align-self: center !important;
	line-height: 1 !important;
}

.cm-top-search .search-icon,
.cm-header-actions .search-top {
	color: var(--dvgo-color-claro) !important;
}

.search-form .search-wrap {
	position: relative;
}

.search-form .search-wrap input.s.field {
	font-family: "IBMPlexSerif", serif !important;
	color: var(--dvgo-color-principal) !important;
	background-color: #fff !important;
	border: 1px dashed var(--dvgo-color-principal) !important;
	border-radius: 1.5rem !important;
	width: 100%;
	padding: 0.5rem 2.2rem 0.5rem 1rem !important;
}

.search-form .search-wrap .search-icon {
	position: absolute;
	top: 50%;
	right: 0.6rem;
	transform: translateY(-50%);
	background: none;
	border: 0;
	color: var(--dvgo-color-principal);
}

/* --------------------------------------------------------------
   Contenido: ya no es su propia tarjeta, comparte el fondo blanco
   unico de #page (ver arriba, "#page como caja blanca unica")
   -------------------------------------------------------------- */

.cm-content {
	background-color: transparent !important;
	margin-top: 0.4rem;
	padding: 0.4rem 0;
	box-shadow: none !important;
	border-radius: 0;
}

/* --------------------------------------------------------------
   Cabecera: titulo y descripcion del sitio, estilo ".sublogo" de /bd
   (barra centrada con borde arriba/abajo, ver css/basico.css)
   -------------------------------------------------------------- */

/* Ocultamos el titulo/descripcion de texto junto al logo (pendiente:
   poner ahi el buscador, como en /bd, en un siguiente ajuste). */
#cm-site-info {
	display: none;
}

/* --------------------------------------------------------------
   Titulos de entradas/paginas y widgets
   -------------------------------------------------------------- */

.entry-title,
.widget-title,
.page-title {
	font-family: "KodeMono-Medium", "IBMPlexSans", sans-serif !important;
	color: var(--dvgo-color-oscuro) !important;
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.cm-entry-summary h1,
.cm-entry-summary h2,
.cm-entry-summary h3,
.cm-entry-summary h4,
.cm-entry-summary h5,
.secciontitulo h1,
.secciontitulo h2 {
	font-family: "KodeMono-Medium", "IBMPlexSans", sans-serif !important;
	color: var(--dvgo-color-oscuro) !important;
	border-bottom: 1px dashed var(--dvgo-color-oscuro);
	margin: 2rem 0.5rem 1rem 0.5rem;
}

/* Tamanos reales de css/devstilos.css (h1/h2/h3 globales de /bd) */
.entry-content h1,
.cm-entry-summary h1,
.secciontitulo h1 {
	font-size: 2.5em;
	padding: 0.5em 1.5em;
}

/* En movil, 2.5em + el padding lateral no deja hueco y "Destacados"
   se parte a mitad de palabra. Mas pequeno y con menos padding. */
@media screen and (max-width: 480px) {
	.secciontitulo h1 {
		font-size: 1.5em;
		padding: 0.4em 0.6em;
	}
}

.entry-content h2,
.cm-entry-summary h2,
.secciontitulo h2 {
	font-size: 1.8em;
	padding: 0.5em 1em;
}

.entry-content h3,
.cm-entry-summary h3 {
	font-size: 1.5em;
	padding: 0.3em 1em;
}

@media screen and (min-width: 970px) {
	.entry-content h1,
	.cm-entry-summary h1,
	.secciontitulo h1 {
		font-size: 30px;
		padding: 6px 20px;
	}

	.entry-content h2,
	.cm-entry-summary h2,
	.secciontitulo h2 {
		font-size: 22px;
		padding: 6px 15px;
	}

	.entry-content h3,
	.cm-entry-summary h3 {
		font-size: 18px;
		padding: 4px 12px;
	}
}

/* --------------------------------------------------------------
   Pagina de entrada individual: titulo azul, imagen destacada a
   ancho completo, meta con el estilo .cuadrodatos (muy usado en la
   red DeVuego), y cuerpo del texto en IBMPlexSerif y mas grande.
   -------------------------------------------------------------- */

.cm-entry-title {
	color: var(--dvgo-color-principal) !important;
	font-family: "KodeMono-Medium", "IBMPlexSans", sans-serif !important;
	font-size: 2.5rem !important;
	font-weight: bold !important;
	border-left: 3px dashed var(--dvgo-color-principal);
	border-radius: 0.7rem;
	padding: 0.8rem 1.2rem !important;
	display: block;
}

@media screen and (max-width: 767px) {
	/* ColorMag pone .single .cm-entry-header .cm-entry-title a 3.2rem */
	.single .cm-entry-header .cm-entry-title {
		font-size: 1.6rem !important;
	}
}

article .cm-featured-image {
	width: 100%;
}

article .cm-featured-image img {
	width: 100%;
	height: auto;
	border-radius: 0.7rem;
}

.cm-below-entry-meta {
	display: inline-block;
	font-size: 1.1rem;
	font-family: "IBMPlexSans", sans-serif;
	color: var(--dvgo-color-principal) !important;
	background-color: var(--dvgo-gris-fondo-claro) !important;
	margin: 0.4rem 0;
	padding: 0.5rem 0.8rem;
	border-radius: 0.5rem;
}

/* En single, fecha y autor siempre en una misma linea. */
body.single .cm-below-entry-meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	column-gap: 0.6rem;
	row-gap: 0.35rem;
}

body.single .cm-below-entry-meta .cm-post-date,
body.single .cm-below-entry-meta .cm-author {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

body.single .cm-below-entry-meta .cm-post-date a,
body.single .cm-below-entry-meta .cm-author a {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	white-space: nowrap;
}

/* Si hay tags, pueden ir en una nueva linea sin romper fecha+autor. */
body.single .cm-below-entry-meta .cm-tag-links {
	flex-basis: 100%;
}

.cm-below-entry-meta a {
	color: var(--dvgo-color-principal) !important;
}

/* Etiquetas de la entrada, estilo .filtro de /bd (pastilla discontinua). */
.cm-tag-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.3rem;
	margin-top: 0.5rem;
}

.cm-tag-links svg,
.cm-tag-links .cm-icon {
	display: inline-block;
	width: 1rem;
	height: 1rem;
	vertical-align: middle;
	color: var(--dvgo-color-principal);
	fill: currentColor;
}

.cm-tag-links a {
	display: inline-block;
	font-family: "KodeMono-Medium", "IBMPlexSans", sans-serif !important;
	font-size: 0.8rem !important;
	color: var(--dvgo-color-principal) !important;
	border: 1px dashed var(--dvgo-color-principal) !important;
	border-radius: 1rem !important;
	padding: 0.1rem 0.7rem !important;
	margin: 0.2rem 0.2rem 0.2rem 0 !important;
	text-decoration: none !important;
}

.cm-tag-links a:hover {
	background-color: var(--dvgo-color-principal) !important;
	color: #fff !important;
}

.cm-entry-summary,
.cm-entry-summary p,
.cm-entry-summary li {
	font-family: "IBMPlexSerif", serif;
	font-size: 1.5rem;
	line-height: 1.5;
}

@media screen and (max-width: 1400px) {
	.cm-entry-summary,
	.cm-entry-summary p,
	.cm-entry-summary li {
		font-size: 1.3rem;
		line-height: 1.3;
	}
}

@media screen and (max-width: 767px) {
	.cm-entry-summary,
	.cm-entry-summary p,
	.cm-entry-summary li {
		font-size: 1.2rem;
	}
}

.cm-entry-summary img {
	display: block;
	border-radius: 0.7rem;
	margin: 1.5rem auto;
}

.wp-block-quote {
	padding-left: 3em !important;
	border-radius: 0.5rem !important;
}

/* ColorMag pone el icono de comillas en cada <p> de la cita (una vez
   por parrafo); lo dejamos solo en el primero. */
.wp-block-quote p:not(:first-of-type)::before {
	display: none !important;
}

/* --------------------------------------------------------------
   Seccion de comentarios: mas compacta que el cuerpo del post (que
   usa IBMPlexSerif a 1.35rem) y con fondo suave gris, tipo .cuadrodatos.
   -------------------------------------------------------------- */

#comments {
	background-color: var(--dvgo-gris-fondo-claro);
	border-radius: 1rem;
	padding: 1.2rem 1.5rem;
	margin-top: 2rem;
	font-family: "IBMPlexSans", sans-serif;
	font-size: 0.9rem;
}

#comments .comments-title {
	font-family: "KodeMono-Medium", "IBMPlexSans", sans-serif !important;
	font-size: 1.2rem !important;
	color: var(--dvgo-color-oscuro) !important;
	border-bottom: 1px dashed var(--dvgo-color-oscuro);
	padding: 0 0 0.5rem 0 !important;
	margin: 0 0 1rem 0 !important;
}

#comments .comment-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#comments .comment {
	background-color: #fff;
	border-radius: 0.7rem;
	padding: 0.8rem 1rem;
	margin-bottom: 0.8rem;
}

#comments .comment-author.vcard img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	vertical-align: middle;
	margin-right: 0.5rem;
}

#comments .comment-author .fn {
	font-family: "IBMPlexSans", sans-serif;
	font-style: normal;
	font-size: 0.95rem;
	color: var(--dvgo-color-principal);
}

#comments .comment-metadata,
#comments .comment-date-time {
	font-size: 0.75rem;
	color: #888;
}

#comments .comment-content {
	font-size: 0.9rem;
	line-height: 1.5;
	margin-top: 0.4rem;
}

#comments .comment-respond,
#respond {
	margin-top: 1rem;
}

#comments input[type="text"],
#comments input[type="email"],
#comments input[type="url"],
#comments textarea {
	font-family: "IBMPlexSans", sans-serif;
	font-size: 0.9rem;
	border: 1px dashed var(--dvgo-color-principal);
	border-radius: 0.5rem;
	padding: 0.5rem 0.7rem;
	background-color: #fff;
}

#comments .form-submit input[type="submit"],
#comments #submit {
	font-family: "IBMPlexMono", monospace;
	font-weight: bold;
	color: var(--dvgo-color-claro) !important;
	background-color: var(--dvgo-color-principal);
	border: 1px dashed var(--dvgo-color-claro);
	border-radius: 1rem;
	padding: 0.4rem 1rem;
	cursor: pointer;
}

#comments .form-submit input[type="submit"]:hover,
#comments #submit:hover {
	background-color: var(--dvgo-color-muy-oscuro);
	color: #fff !important;
}

/* --------------------------------------------------------------
   Tarjetas de articulos (equivalente a .mosaicojuego .td en /bd):
   borde discontinuo redondeado + sombra, etiqueta de categoria en
   pastilla azul, boton "Leer mas" en pastilla, igual que /bd.
   -------------------------------------------------------------- */

.cm-content article {
	background-color: #fff;
	border: 1px dashed var(--dvgo-color-principal) !important;
	border-radius: 1rem !important;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 3px;
	padding: 0.8rem;
	margin-bottom: 1.5rem;
	transition: border-color 0.2s ease, border-style 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.cm-content article:hover {
	border-color: var(--dvgo-color-principal) !important;
	border-style: solid !important;
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

body.single .cm-content article:hover {
	transform: none;
	box-shadow: none;
}

/* Sin borde/tarjeta en la entrada individual, solo en los listados. */
body.single .cm-content article {
	border: 0 !important;
	box-shadow: none !important;
	padding: 0;
	background-color: transparent;
}

body.single .cm-content article:hover {
	border: 0 !important;
}

.cm-featured-image {
	border-radius: 0.7rem;
	overflow: hidden;
}

.cm-featured-image img {
	border-radius: 0.7rem;
}

.cm-post-categories a {
	display: inline-block;
	font-family: "KodeMono-Medium", "IBMPlexSans", sans-serif !important;
	font-size: 0.75rem !important;
	font-weight: bold;
	color: #fff !important;
	background-color: var(--dvgo-color-principal) !important;
	padding: 0.2rem 0.7rem !important;
	border-radius: 1rem !important;
	text-decoration: none !important;
}

/* Un color por categoria (ColorMag no pone clase de categoria en el
   enlace, asi que se distingue por el propio href) para escanear la
   portada de un vistazo, coherente con la paleta azul/oscura de /bd. */
.cm-post-categories a[href*="/category/noticias/"] {
	background-color: var(--dvgo-color-principal) !important;
}

.cm-post-categories a[href*="/category/analisis/"] {
	background-color: #6a4c93 !important;
}

.cm-post-categories a[href*="/category/resenas/"] {
	background-color: #b8860b !important;
}

.cm-post-categories a[href*="/category/articulos/"] {
	background-color: #1f7a5c !important;
}

.cm-post-categories a[href*="/category/destacados/"],
.cm-post-categories a[href*="/category/featured/"] {
	background-color: #b8860b !important;
}

.entry-title a {
	color: var(--dvgo-color-oscuro) !important;
	text-decoration: none !important;
}

.entry-title a:hover {
	color: var(--dvgo-color-principal) !important;
}

.cm-entry-button {
	display: inline-block;
	font-family: "IBMPlexMono", monospace !important;
	font-weight: bold;
	color: var(--dvgo-color-claro) !important;
	background-color: var(--dvgo-color-principal) !important;
	border: 1px dashed var(--dvgo-color-claro);
	border-radius: 1rem;
	padding: 0.3rem 0.8rem;
	font-size: 0.85rem;
	text-decoration: none !important;
}

.cm-entry-button:hover {
	background-color: var(--dvgo-color-muy-oscuro) !important;
	color: #fff !important;
}

/* --------------------------------------------------------------
   Hero del ultimo articulo (portada): imagen a todo el ancho con el
   titulo superpuesto, encima de Destacados. Ver
   devuego_hero_ultimo_post() en functions.php.
   -------------------------------------------------------------- */

/* Imagen y overlay apilados en la misma celda de grid (en vez de
   position:absolute): el "contenedor de posicionamiento" del overlay
   no se estaba resolviendo contra .devuego-hero pese al
   position:relative, causando un ancho de cientos de px de mas.
   Con grid no hace falta resolver ningun contenedor de posicionamiento. */
.devuego-hero {
	display: grid !important;
	grid-template-columns: 1fr !important;
	grid-template-rows: 1fr !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	border-radius: 1rem;
	overflow: hidden !important;
	margin-bottom: 1.5rem;
	border: 1px dashed var(--dvgo-color-principal);
	text-decoration: none !important;
}

.devuego-hero-imagen,
.devuego-hero-overlay {
	grid-column: 1 !important;
	grid-row: 1 !important;
	min-width: 0;
	min-height: 0;
}

.devuego-hero-imagen {
	display: block;
	aspect-ratio: 21 / 9;
	overflow: hidden;
	z-index: 1;
}

.devuego-hero-imagen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.devuego-hero:hover .devuego-hero-imagen img {
	transform: scale(1.04);
}

.devuego-hero-overlay {
	align-self: end;
	padding: 2.5rem 1.5rem 1.2rem 1.5rem;
	box-sizing: border-box;
	background: linear-gradient(180deg, rgba(5, 47, 72, 0) 0%, rgba(5, 47, 72, 0.92) 75%);
	pointer-events: none;
	z-index: 2;
}

.devuego-hero-overlay a,
.devuego-hero-overlay .cm-post-categories {
	pointer-events: auto;
}

.devuego-hero-titulo {
	font-size: 2rem;
	line-height: 1.2;
	margin: 0.5rem 0 0.4rem 0;
}

.devuego-hero-titulo a {
	font-family: "KodeMono-Medium", "IBMPlexSans", sans-serif !important;
	color: #fff !important;
	text-decoration: none !important;
}

.devuego-hero-titulo a:hover {
	text-decoration: underline !important;
}

.devuego-hero-datos {
	font-family: "KodeMono-Medium", "IBMPlexSans", sans-serif;
	font-size: 0.85rem;
	color: var(--dvgo-color-claro);
}

@media screen and (max-width: 767px) {
	.devuego-hero-imagen {
		aspect-ratio: 4 / 3;
	}

	.devuego-hero-titulo {
		font-size: 1.4rem;
	}
}

/* --------------------------------------------------------------
   Destacados (portada): rejilla .mosaicojuego, misma clase y reglas
   que las tarjetas de juego en /bd (ver css/basico.css), usada aqui
   para los posts fijos/sticky (ver front-page.php).
   -------------------------------------------------------------- */

.devuego-destacados-wrap {
	margin-bottom: 1.5rem;
}

.mosaicojuego {
	width: 99%;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

@media screen and (max-width: 1199px) {
	.mosaicojuego {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media screen and (max-width: 600px) {
	.mosaicojuego {
		grid-template-columns: 1fr;
	}
}

.mosaicojuego .td {
	padding: 1.2rem;
	border-radius: 1rem;
	border: 1px dashed var(--dvgo-color-principal);
	box-shadow: rgba(0, 0, 0, 0.35) 0px 1px 3px;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mosaicojuego .td:hover {
	border: 1px solid var(--dvgo-color-principal);
	transform: translateY(-4px);
	box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25);
}

.mosaicojuego .divportada {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 4px;
	margin-bottom: 1rem;
	display: flex;
	align-items: center;
}

.mosaicojuego .portada {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 4px;
	box-shadow: 0 0 8px #000;
}

.mosaicojuego .juego {
	display: block;
	font-family: "IBMPlexSans", sans-serif !important;
	color: var(--dvgo-color-principal) !important;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.3;
	text-decoration: none !important;
	margin-bottom: 0.4rem;
}

.mosaicojuego .juego:hover {
	color: var(--dvgo-color-oscuro) !important;
}

/* Primer destacado de portada: mas jerarquia y contexto visual. */
.devuego-destacados-wrap .mosaicojuego .td:first-child .juego {
	font-size: 2.5rem;
	line-height: 1.25;
	margin-bottom: 0.75rem;
}

.devuego-destacado-extracto {
	font-family: "IBMPlexSans", sans-serif;
	font-size: 1.05rem;
	line-height: 1.55;
	color: var(--dvgo-color-oscuro);
	margin: 0 0 0.8rem;
}

@media screen and (max-width: 600px) {
	.devuego-destacados-wrap .mosaicojuego .td:first-child .juego {
		font-size: 2.1rem;
	}
}

/* Formato "bento" en Destacados: la primera tarjeta ocupa 2x2 para
   darle jerarquia visual frente al resto de la rejilla. */
@media screen and (min-width: 601px) {
	.devuego-destacados-wrap .mosaicojuego .td:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}

	.devuego-destacados-wrap .mosaicojuego .td:first-child .divportada {
		aspect-ratio: 16 / 10;
	}

	.devuego-destacados-wrap .mosaicojuego .td:first-child .juego {
		font-size: 2.5rem;
	}
}

.mosaicojuego .devuego-item-datos {
	margin-top: 0.2rem;
	font-family: "KodeMono-Medium", "IBMPlexSans", sans-serif;
}

.devuego-destacados-wrap .mosaicojuego .td:first-child .devuego-item-datos {
	font-size: 0.95rem;
	line-height: 1.35;
}

/* --------------------------------------------------------------
   Secciones de portada por categoria (Noticias/Analisis/Resenas/
   Articulos): tarjetas horizontales, imagen a la izquierda y meta
   (titulo + fecha/autor) a la derecha. Sustituyen los widgets
   "Category Post List" de ColorMag (ver front-page.php).
   -------------------------------------------------------------- */

.devuego-seccion-categoria {
	margin-bottom: 1.5rem;
}

.devuego-lista-horizontal {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.8rem;
}

@media screen and (max-width: 767px) {
	.devuego-lista-horizontal {
		grid-template-columns: 1fr;
	}
}

.devuego-item-horizontal {
	display: flex;
	align-items: stretch;
	gap: 1rem;
	border: 1px dashed var(--dvgo-color-principal);
	border-radius: 1rem;
	padding: 0.6rem;
	transition: border-color 0.2s ease;
}

.devuego-item-horizontal:hover {
	border: 1px solid var(--dvgo-color-principal);
}

.devuego-item-imagen {
	flex: 0 0 auto;
	width: 120px;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: 0.6rem;
	background-color: var(--dvgo-gris-fondo-claro);
	display: block;
}

.devuego-item-imagen img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.devuego-item-meta {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
}

.devuego-item-titulo {
	font-family: "IBMPlexSans", sans-serif !important;
	font-size: 1.1rem !important;
	font-weight: bold;
	color: var(--dvgo-color-oscuro) !important;
	text-decoration: none !important;
	margin-bottom: 0.3rem;
}

.devuego-item-titulo:hover {
	color: var(--dvgo-color-principal) !important;
}

.devuego-item-datos {
	font-family: "IBMPlexSans", sans-serif;
	font-size: 0.8rem;
	color: #888;
}

.devuego-vermas {
	display: inline-block;
	margin-top: 0.8rem;
}

/* --------------------------------------------------------------
   Listado generico de categoria (category.php)
   -------------------------------------------------------------- */

.devuego-categoria-descripcion {
	font-family: "IBMPlexSerif", serif;
	font-size: 1.1rem;
	color: #555;
	margin: 0 0.5rem 1.5rem 0.5rem;
}

.devuego-item-extracto {
	font-family: "IBMPlexSerif", serif;
	font-size: 0.9rem;
	color: #555;
	margin-top: 0.4rem;
	line-height: 1.5;
}

/* --------------------------------------------------------------
   Archivo de autor (author.php)
   -------------------------------------------------------------- */

.devuego-autor-subtitulo {
	font-family: "IBMPlexSans", sans-serif;
	font-size: 0.9rem;
	color: #888;
	margin: 0.3rem 0.5rem 1.5rem 0.5rem;
}

.devuego-autor-cabecera {
	display: flex;
	align-items: center;
	gap: 1rem;
	background-color: var(--dvgo-gris-fondo-claro);
	border-radius: 1rem;
	padding: 1rem 1.2rem;
	margin: 0 0.5rem 1.5rem 0.5rem;
}

.devuego-autor-cabecera img {
	border-radius: 50%;
	flex: 0 0 auto;
}

.devuego-autor-cabecera p {
	font-family: "IBMPlexSerif", serif;
	font-size: 1rem;
	color: #555;
	margin: 0;
}

/* --------------------------------------------------------------
   Pagina 404 (404.php)
   -------------------------------------------------------------- */

.devuego-404-contenido {
	text-align: center;
	padding: 2rem 1rem;
}

.devuego-404-contenido p {
	font-family: "IBMPlexSerif", serif;
	font-size: 1.2rem;
	color: #555;
	margin-bottom: 1.5rem;
}

.devuego-404-buscador {
	max-width: 320px;
	margin: 2rem auto 0 auto;
}

/* --------------------------------------------------------------
   Migas de pan (breadcrumb_trail() de ColorMag, activadas en
   functions.php via colormag_breadcrumb_enable)
   -------------------------------------------------------------- */

.breadcrumb-wrap {
	margin: 0.5rem 0.5rem 1rem 0.5rem;
}

.breadcrumb-trail {
	font-family: "IBMPlexSans", sans-serif;
	font-size: 0.8rem;
	color: #888;
}

.breadcrumb-trail .breadcrumb-title {
	display: none;
}

.breadcrumb-trail .trail-items {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0.3rem;
}

.breadcrumb-trail .trail-item {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.breadcrumb-trail .trail-item:not(:last-child)::after {
	content: "\2192";
	color: var(--dvgo-color-principal);
	opacity: 0.6;
}

.breadcrumb-trail .trail-item a {
	color: var(--dvgo-color-principal) !important;
	text-decoration: none !important;
}

.breadcrumb-trail .trail-item a:hover {
	text-decoration: underline !important;
}

.breadcrumb-trail .trail-item.trail-end {
	color: #888;
	font-weight: bold;
}

/* --------------------------------------------------------------
   Posts relacionados al final de la entrada individual
   -------------------------------------------------------------- */

.devuego-relacionados {
	margin-top: 2.5rem;
	padding-top: 1.5rem;
	border-top: 1px dashed var(--dvgo-color-principal);
}

@media screen and (max-width: 480px) {
	.devuego-item-imagen {
		width: 90px;
	}

	.devuego-item-titulo {
		font-size: 1rem !important;
	}
}

/* --------------------------------------------------------------
   Botones DeVuego (utilidades, para usar en entradas/paginas)
   -------------------------------------------------------------- */

.botonmini, .boton, .botongrande {
	display: inline-block;
	font-family: "IBMPlexMono", monospace;
	font-weight: bold;
	color: var(--dvgo-color-claro) !important;
	background-color: var(--dvgo-color-principal);
	border: 1px dashed var(--dvgo-color-claro);
	border-radius: 1rem;
	text-decoration: none;
}

.botonmini {
	font-size: 0.7rem;
	padding: 0.3rem 0.6rem;
}

.boton {
	font-size: 1rem;
	padding: 0.4rem 0.8rem;
}

.botongrande {
	font-size: 1.5rem;
	padding: 0.5rem 1rem;
}

.botonmini:hover, .boton:hover, .botongrande:hover {
	background-color: var(--dvgo-color-muy-oscuro);
	color: #fff !important;
	transition: 0.2s;
}

.pulse-button:hover {
	transform: scale(1.05);
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

/* --------------------------------------------------------------
   Tablas dentro del contenido (mismo estilo que /bd)
   -------------------------------------------------------------- */

.entry-content table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0 4px;
	background-color: var(--dvgo-color-principal-trans);
	padding: 1rem !important;
	border-radius: 1rem;
	margin: 1rem auto;
}

.entry-content tr td {
	border-top: 1px dashed var(--dvgo-tds-fondo-claro-contraste);
	border-bottom: 1px dashed var(--dvgo-tds-fondo-claro-contraste);
	padding: 0.3rem 0.6rem;
}

.entry-content tr td:first-child {
	border-radius: 8px 0 0 8px;
	border-left: 1px dashed var(--dvgo-tds-fondo-claro-contraste);
}

.entry-content tr td:last-child {
	border-radius: 0 8px 8px 0;
	border-right: 1px dashed var(--dvgo-tds-fondo-claro-contraste);
}

/* --------------------------------------------------------------
   BloquesTop: nav superior compartida con /bd, /escor, /codice...
   Reglas tomadas de css/devstilos.css (fuente viva) para los
   breakpoints de escritorio; el patron movil replica el markup real
   de local/bloquestop.php (bloque "topmovil"), que /bd oculta a
   partir de 969px sustituyendolo por su propio menu hamburguesa.
   -------------------------------------------------------------- */

@media screen and (min-width: 1200px) {
	#bloquestop {
		margin: 0 auto;
		width: 95%;
		max-width: 1600px;
		padding: 5px 2px;
		background-color: var(--dvgo-color-footer-fondo);
		text-align: center;
		box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .5);
		border-radius: 0.5rem 0.5rem 0 0;
		margin-bottom: 0;
		display: block;
		min-height: 1.6rem;
	}

	#bloquestop .bloquebig {
		float: left;
		font-family: "KodeMono-Medium", sans-serif;
		font-size: 0.8rem;
		font-weight: bold;
		color: var(--dvgo-color-claro);
		padding: 0.3rem 1rem;
		margin-bottom: 0px;
		margin-left: -3px;
		border-radius: 0.5rem 0.5rem 0 0;
	}

	#bloquestop .bloquebig:hover {
		background-color: var(--dvgo-color-claro);
		color: #000;
		text-decoration: none;
	}

	#bloquestop .abloquebig {
		font-weight: bold;
	}

	#bloquestop .abloquebig:hover {
		text-decoration: none;
	}

	#bloquestop .bloquebigselect {
		float: left;
		font-family: "KodeMono-Medium", sans-serif;
		font-size: 0.8rem;
		font-weight: bold;
		padding: 0.3rem 1rem;
		margin-bottom: 0px;
		margin-left: -3px;
		background-color: #fff;
		color: #000;
		text-decoration: none;
		border-radius: 0.5rem 0.5rem 0 0;
	}

	#bloquestop .abloquebigselect {
		text-decoration: none;
	}

	#topmovil {
		display: none;
	}
}

@media screen and (min-width: 970px) and (max-width: 1199px) {
	#bloquestop {
		margin: 0 auto;
		width: 920px;
		padding: 5px 2px;
		background-color: var(--dvgo-color-footer-fondo);
		text-align: center;
		box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .5);
		border-radius: 0.5rem 0.5rem 0 0;
		margin-bottom: 0;
		display: block;
		min-height: 1.5rem;
	}

	#bloquestop .bloquebig {
		float: left;
		font-size: 0.9rem;
		font-weight: bold;
		color: var(--dvgo-color-claro);
		padding: 4px 8px;
		margin-bottom: 0px;
		margin-left: -3px;
		border-radius: 0.5rem 0.5rem 0 0;
	}

	#bloquestop .bloquebig:hover {
		background-color: var(--dvgo-color-claro);
		color: #000;
		text-decoration: none;
	}

	#bloquestop .abloquebig {
		font-size: 16px;
		font-weight: bold;
	}

	#bloquestop .bloquebigselect {
		float: left;
		font-size: 0.9rem;
		font-weight: bold;
		padding: 4px 8px;
		margin-bottom: 0px;
		margin-left: -3px;
		background-color: #fff;
		color: #000;
		text-decoration: none;
		border-radius: 0.5rem 0.5rem 0 0;
	}

	#topmovil {
		display: none;
	}
}

@media screen and (max-width: 969px) {
	#bloquestop {
		display: none;
	}

	#topmovil {
		overflow: hidden;
		background-color: var(--dvgo-color-footer-fondo);
		text-align: center;
	}

	#topmovil a {
		font-family: "KodeMono-Medium", "IBMPlexSans", sans-serif;
		font-weight: bold;
		color: var(--dvgo-color-claro);
		padding: 0.5em 0.2em;
		text-decoration: none;
		font-size: 1.5em;
		display: block;
	}

	#topmovil a:hover {
		background-color: var(--dvgo-color-claro);
		color: #000;
	}

	#topmovil .bloquebig {
		font-size: 1.2rem;
		font-weight: bold;
		color: var(--dvgo-color-claro);
		padding: 4px 8px 7px 8px;
		margin-bottom: 0px;
		margin-left: -3px;
	}

	#topmovil .abloquebig {
		display: inline;
		float: left;
		width: 30%;
	}

	#topmovil a.icon {
		color: #fff;
		font-size: 1.2em;
		background-color: var(--dvgo-color-principal);
	}

	#topmovil a.icon:hover {
		color: #000;
		background-color: var(--dvgo-color-claro);
	}

	#bloquestopmovil {
		display: none;
	}
}

/* --------------------------------------------------------------
   Footer estilo DeVuego (ver footer.php de este child theme)
   -------------------------------------------------------------- */

#footer {
	clear: both;
	margin: 1.5rem auto 0 auto;
	font-size: 16px;
	width: 97%;
	max-width: 1600px;
	padding: 1rem;
	color: #fff;
	text-align: center;
	background-color: var(--dvgo-color-footer-fondo);
	box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, .5);
	border-radius: 0.5rem;
}

#footer a {
	color: var(--dvgo-color-footer-texto);
}

#footer .logofooter {
	max-width: 220px;
	height: auto;
	margin: 0.5rem 0;
}

#licencia {
	clear: both;
	margin: 1rem auto 0 auto;
	padding: 5px;
	text-align: center;
}

#licencia .licencia {
	padding: 2px;
	font-family: "IBMPlexSans", sans-serif;
	font-size: 11px;
	color: #ccc;
}

#ygn {
	font-family: "IBMPlexSans", sans-serif;
	clear: both;
	color: #999;
	margin: 2rem auto 0 auto;
	padding: 0.6em 0;
	background-color: var(--dvgo-color-footer-fondo);
	text-align: center;
}

#ygn img {
	vertical-align: middle;
	margin-right: 0.5rem;
}

#ygn .cuadrodatosmini {
	display: inline-block;
	font-size: 0.9rem;
	color: var(--dvgo-color-claro);
	padding: 0.3rem 0.6rem;
	margin: 0.2rem;
	border-radius: 0.5rem;
}

#ygn .cuadrodatosmini:hover {
	background-color: var(--dvgo-color-claro);
	color: #000;
	text-decoration: none;
}

.flag-icon {
	border-radius: 4px;
}