/**
 * Modificaciones sobre CoverNews
 *
 * IMPORTANTE: este archivo NO cambia el aspecto propio del tema. CoverNews conserva
 * sus tipografías, sus colores, sus tamaños y su ancho. Aquí solo van:
 *
 *   1. el nombre y el eslogan ocultos (dejando únicamente el logotipo);
 *   2. el menú principal centrado y en Arial;
 *   3. la barra de las 9 secciones, en Arial y sin negrita;
 *   4. el cintillo de última hora;
 *   5. los espacios publicitarios;
 *   6. el botón de claro/oscuro arriba en la cabecera;
 *   7. el modo oscuro (solo se aplica cuando el visitante lo activa).
 *
 * Los valores de color de los elementos nuevos (#ff184e) y del modo oscuro proceden
 * del bloque :root del tema de referencia. El resto no se toca.
 */

/* Variables que usan SOLO los elementos añadidos */
:root {
	--dum-acento: #ff184e;
	--dum-borde: #88888826;
	--dum-gris: #666;
	--dum-aviso: #fe682e;
	--dum-sombra: 0 4px 30px #00000012;
	--dum-ancho: 1280px;
	--dum-redondeo: 3px;
	--dum-transicion: all 0.2s cubic-bezier(0.32, 0.74, 0.57, 1);
}

/* ============================================================
   1. Solo el logotipo: se ocultan el nombre y el eslogan
   (se mantienen para buscadores y lectores de pantalla)
   ============================================================ */
body.wp-custom-logo .site-branding .site-title,
body.wp-custom-logo .site-branding .site-description,
body.wp-custom-logo .site-branding h1.site-title,
body.wp-custom-logo .site-branding p.site-description {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
}

/* ============================================================
   2. Menú principal: centrado y en Arial
   ============================================================ */
.main-navigation ul.menu,
.main-navigation .nav-links,
.main-navigation .main-navigation-container-items-wrapper > div {
	display: flex !important;
	flex-wrap: wrap;
	justify-content: center !important;
	align-items: stretch;
	width: 100%;
	margin: 0 !important;
}

/* El contenedor del menú ocupaba solo 541 px y por eso los elementos salían
   pegados a la izquierda. Se le hace ocupar el espacio libre de la fila y
   centrar dentro: así el menú queda centrado de verdad. */
@media (min-width: 992px) {
	.main-navigation .navigation-container {
		justify-content: space-between;
	}

	.main-navigation .main-navigation-container-items-wrapper {
		flex: 1 1 auto !important;
		display: flex !important;
		align-items: center;
		justify-content: center !important;
		width: auto !important;
		max-width: none !important;
	}

	.main-navigation .main-navigation-container-items-wrapper > ul.menu {
		justify-content: center !important;
		width: auto !important;
	}
}

/* Por encima de 1200 px el buscador y el conmutador se sacan del flujo y se anclan
   a la derecha: así el menú se centra en la PÁGINA y no en el hueco que le queda. */
@media (min-width: 1200px) {
	.main-navigation .navigation-container { position: relative; }

	.main-navigation .main-navigation-container-items-wrapper {
		flex: 1 1 100% !important;
		width: 100% !important;
	}

	.main-navigation .cart-search {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
	}
}

.main-navigation .menu > li > a,
.main-navigation a.menu-link,
.main-navigation .nav-links a,
.main-navigation ul.menu a {
	font-family: Arial, Helvetica, 'Liberation Sans', sans-serif !important;
	letter-spacing: normal !important;
	text-transform: none !important;
}

/* En modo CLARO la barra del menú ya es roja (#bb1919), así que la opción activa
   y el hover NO pueden ir en el rojo de acento: daban 1,68:1 y quedaban invisibles.
   Se marcan con blanco y un subrayado. */
.main-navigation .menu > li > a:hover,
.main-navigation .menu > .current-menu-item > a,
.main-navigation .menu > li.current-menu-item > a,
.main-navigation .nav-links a:hover {
	color: #fff !important;
	box-shadow: inset 0 -3px 0 #fff;
}

/* En modo oscuro la barra es oscura: ahí el acento claro sí se lee (6,3:1) */
html[data-theme='dark'] .main-navigation .menu > li > a:hover,
html[data-theme='dark'] .main-navigation .menu > .current-menu-item > a,
html[data-theme='dark'] .main-navigation .menu > li.current-menu-item > a {
	color: #ff6b8b !important;
	box-shadow: inset 0 -3px 0 #ff6b8b;
}

/* ============================================================
   3. Barra de las 9 secciones: Arial, sin negrita
   ============================================================ */
.dum-catbar {
	background-color: #fff;
	border-bottom: 1px solid var(--dum-borde);
	box-shadow: var(--dum-sombra);
	position: sticky;
	top: 0;
	z-index: 900;
}

.dum-catbar__inner {
	max-width: var(--dum-ancho);
	margin: 0 auto;
	padding: 0 15px;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
}

.dum-catbar a {
	font-family: Arial, Helvetica, 'Liberation Sans', sans-serif;
	font-size: 15px;
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
	text-decoration: none;
	padding: 13px 13px;
	display: block;
	white-space: nowrap;
	border-bottom: 3px solid transparent;
	transition: var(--dum-transicion);
}

.dum-catbar a:hover,
.dum-catbar a:focus {
	color: var(--dum-acento) !important;
	border-bottom-color: var(--dum-acento);
}

/* ============================================================
   4. Cintillo de última hora
   ============================================================ */
.dum-ticker {
	display: flex;
	align-items: stretch;
	background-color: #fff;
	border-bottom: 1px solid var(--dum-borde);
	overflow: hidden;
}

.dum-ticker__label {
	background-color: var(--dum-aviso);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 0 14px;
	display: flex;
	align-items: center;
	white-space: nowrap;
	font-family: Arial, Helvetica, sans-serif;
}

.dum-ticker__viewport { position: relative; flex: 1 1 auto; overflow: hidden; height: 38px; }

.dum-ticker__item {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	font-size: 15px;
	font-weight: 600;
	color: inherit !important;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transition: opacity 0.4s ease;
}

.dum-ticker__item.is-active { opacity: 1; }
.dum-ticker__item:hover { color: var(--dum-acento) !important; }

/* ============================================================
   5. Espacios publicitarios
   ============================================================ */
.dum-ad { text-align: center; position: relative; line-height: 1; }

.dum-ad__tag {
	display: block;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 9px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--dum-gris);
	padding: 7px 0 5px;
}

.dum-ad img { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: var(--dum-redondeo); }

.dum-ad--top { background-color: #fafafa; border-bottom: 1px solid var(--dum-borde); padding-bottom: 9px; }
.dum-ad--slot { display: flex; flex-direction: column; gap: 10px; padding-bottom: 4px; }
.dum-ad--side { margin-bottom: 30px; }
.dum-ad--content {
	margin: 0 0 28px;
	padding: 10px 0;
	border-top: 1px solid var(--dum-borde);
	border-bottom: 1px solid var(--dum-borde);
}

/* ============================================================
   6. Botón claro / oscuro, arriba en la cabecera
   ============================================================ */
.dum-theme-toggle {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	background-color: #191c20;
	color: #fff;
	font-size: 19px;
	line-height: 1;
	box-shadow: var(--dum-sombra);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--dum-transicion);
}

.dum-theme-toggle:hover { background-color: var(--dum-acento); }
.dum-theme-toggle .dum-theme-toggle__sun { display: none; }
html[data-theme='dark'] .dum-theme-toggle .dum-theme-toggle__sun { display: inline; }
html[data-theme='dark'] .dum-theme-toggle .dum-theme-toggle__moon { display: none; }

/* El botón va junto a la lupa, con el mismo tratamiento: icono suelto, sin círculo */
.dum-theme-toggle.dum-theme-toggle--inline {
	position: static;
	display: inline-block;
	width: 40px;
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 16px;
	padding: 0;
	background-color: transparent;
	background-image: none;
	color: inherit;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

.dum-theme-toggle.dum-theme-toggle--inline i { font-size: inherit; line-height: inherit; }

/* La barra de la lupa es oscura: el icono va en blanco, como ella */
.search-overlay .dum-theme-toggle.dum-theme-toggle--inline,
.af-search-wrap .dum-theme-toggle.dum-theme-toggle--inline,
.cart-search .dum-theme-toggle.dum-theme-toggle--inline {
	color: #fff;
}

.dum-theme-toggle.dum-theme-toggle--inline:hover {
	background-color: transparent;
	color: var(--dum-acento);
}

html[data-theme='dark'] .search-overlay .dum-theme-toggle.dum-theme-toggle--inline,
html[data-theme='dark'] .af-search-wrap .dum-theme-toggle.dum-theme-toggle--inline,
html[data-theme='dark'] .cart-search .dum-theme-toggle.dum-theme-toggle--inline {
	color: #fff;
}

/* La lupa y el conmutador comparten fila, sin hueco entre ellos.
   En CoverNews el hueco de la lupa es una caja en línea; se convierte en
   contenedor flexible para que el interruptor se siente JUSTO a su lado
   sin restar espacio a los menús. */
.cart-search {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.cart-search .af-search-wrap,
.af-search-wrap {
	display: inline-flex;
	align-items: center;
	width: auto;
}

.cart-search .search-overlay,
.af-search-wrap .search-overlay,
.search-overlay {
	display: inline-flex;
	align-items: center;
}

/* La lupa conserva su sitio exacto: caja de 25 px con el icono centrado */
.cart-search .search-icon,
.af-search-wrap .search-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

/* ============================================================
   5b. Intercambio: los anuncios ocupan el hueco de «Trending Story»
   y el rótulo se va con el módulo, que ahora vive en la barra lateral.
   ============================================================ */
.trending-story > .widget-title { display: none !important; }

.trending-story .dum-ad--slot {
	padding-top: 6px;
}

/* El módulo de Trending, ya en la barra lateral */
.dum-trending-lateral {
	margin-bottom: var(--dum-espaciado, 30px);
}

.dum-trending-lateral .widget-title {
	margin-bottom: 12px;
}

/* ============================================================
   6b. Conmutador claro / oscuro
   Se lee como interruptor: PISTA con fondo sólido y borde claro
   (contraste real sobre la barra oscura) + BOLA que se desliza.
   DENTRO de la bola va el icono del modo actual: sol en claro,
   luna en oscuro. 68x28 px y 14 px de aire hasta la lupa.
   ============================================================ */
.dum-theme-slide {
	position: relative;
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	width: 64px;
	height: 28px;
	min-width: 64px;
	margin: 0 0 0 14px; /* 14 px de aire, ahora a la izquierda: va DESPUÉS de la lupa */
	padding: 0;
	border: 2px solid #d7dce4;
	border-radius: 14px;
	background-color: rgba(35, 38, 43, 0.35); /* gris translúcido: deja pasar la barra */
	cursor: pointer;
	line-height: 1;
	vertical-align: middle;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* La bola: 22 px, con 1 px de aire en los extremos */
.dum-theme-slide__bola {
	position: absolute;
	top: 1px;
	left: 1px;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background-color: #ffffff;
	color: #23262b; /* sol oscuro sobre bola clara: contraste alto */
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
	transition: left 0.25s cubic-bezier(0.32, 0.74, 0.57, 1), background-color 0.2s ease, color 0.2s ease;
}

html[data-theme='dark'] .dum-theme-slide__bola {
	left: 37px;
	background-color: #ffffff; /* bola blanca, igual que en modo claro */
	color: #23262b;            /* luna oscura sobre la bola blanca */
}

/* Los DOS iconos viven dentro de la bola; solo se enciende el del modo actual */
.dum-theme-slide__icono {
	display: none;
	width: 14px;
	height: 14px;
}

/* ============================================================
   6c. La lupa, agrandada en proporción al conmutador
   La dibuja la fuente de iconos del tema (aft-icons, glifo \f002),
   no Font Awesome. Antes medía 15x35 con font-size 16 px.
   ============================================================ */
.main-navigation .cart-search .search-icon,
.main-navigation .af-search-wrap .search-icon {
	width: 21px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.main-navigation .cart-search .search-icon i,
.main-navigation .af-search-wrap .search-icon i,
.main-navigation .search-icon i {
	font-size: 20px;
	line-height: 1;
}

html:not([data-theme='dark']) .dum-theme-slide .dum-theme-slide__icono--sol { display: block; }
html[data-theme='dark'] .dum-theme-slide .dum-theme-slide__icono--luna { display: block; }

.dum-theme-slide:hover { background-color: rgba(35, 38, 43, 0.6); border-color: #ffffff; }
html[data-theme='dark'] .dum-theme-slide:hover { background-color: rgba(35, 38, 43, 0.6); }
.dum-theme-slide:focus,
.dum-theme-slide:focus-visible { outline: 2px solid var(--dum-acento); outline-offset: 2px; }

/* Si no encontrara la fila, quedaría flotando discretamente */
.dum-theme-slide--suelto {
	position: fixed;
	right: 18px;
	bottom: 18px;
	z-index: 9999;
	margin: 0;
}

/* Logotipo. Los dos archivos que ha dado el usuario venían con mucho margen
   transparente alrededor: Logo.png (1080x1080 con el dibujo en 480x171) y
   logor.png (664x314 con el dibujo en 596x178). Se recortan al dibujo real
   antes de subirlos; el de ahora quedó en 644x226 y se muestra a 78 px de alto. */
.custom-logo,
img.custom-logo {
	max-height: 78px !important;
	width: auto !important;
	max-width: 100%;
}

/* Este logo es azul marino oscuro (0,39,96) y rojo (206,1,8) sobre fondo
   transparente. En modo oscuro el azul se perderia sobre #191c20, y aclararlo con
   brightness() le cambiaba el color (salia cian). En vez de recolorearlo se le pone
   una placa clara detras: asi conserva sus colores exactos y se lee en los dos modos. */
html[data-theme='dark'] .custom-logo,
html[data-theme='dark'] img.custom-logo {
	filter: none;
	background-color: #ffffff;
	padding: 4px 9px;
	border-radius: 8px;
	box-sizing: border-box;
}

/* El hueco vacío de la cabecera de CoverNews aloja el botón */
.masthead-banner .row { display: flex; align-items: center; }
.masthead-banner .col-md-8 {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
}

/* ============================================================
   7. Modo oscuro — solo cuando el visitante lo activa.
   Aquí sí hay que recolorear, porque el tema es claro de origen.
   ============================================================ */
html[data-theme='dark'] body,
html[data-theme='dark'] .site,
html[data-theme='dark'] .site-content,
html[data-theme='dark'] .site-header,
html[data-theme='dark'] .masthead-banner,
html[data-theme='dark'] .header-layout-1,
html[data-theme='dark'] .main-navigation,
html[data-theme='dark'] .navigation-container,
html[data-theme='dark'] .main-navigation .container,
html[data-theme='dark'] .dum-catbar,
html[data-theme='dark'] .dum-ticker,
html[data-theme='dark'] article,
html[data-theme='dark'] .categorised-article,
html[data-theme='dark'] .spotlight-post,
html[data-theme='dark'] .widget,
html[data-theme='dark'] .aft-sidebar .widget {
	background-color: #191c20 !important;
	color: #d7dce4 !important;
}

html[data-theme='dark'] h1, html[data-theme='dark'] h2, html[data-theme='dark'] h3,
html[data-theme='dark'] h4, html[data-theme='dark'] h5, html[data-theme='dark'] h6,
html[data-theme='dark'] .article-title a,
html[data-theme='dark'] .article-title-1 a,
html[data-theme='dark'] .entry-title a,
html[data-theme='dark'] .widget-title,
html[data-theme='dark'] .dum-catbar a,
html[data-theme='dark'] .dum-ticker__item,
html[data-theme='dark'] .main-navigation .menu > li > a {
	color: #fff !important;
}

html[data-theme='dark'] .item-metadata,
html[data-theme='dark'] .grid-item-metadata,
html[data-theme='dark'] .posts-date,
html[data-theme='dark'] .posts-author,
html[data-theme='dark'] .post-description,
html[data-theme='dark'] .dum-ad__tag {
	color: #b9c1cd !important;
}

html[data-theme='dark'] .dum-catbar,
html[data-theme='dark'] .dum-ticker,
html[data-theme='dark'] .masthead-banner,
html[data-theme='dark'] .main-navigation { border-color: #ffffff1a !important; }

html[data-theme='dark'] .dum-ad--top { background-color: #14171c !important; }
html[data-theme='dark'] .site-footer,
html[data-theme='dark'] .footer-nav-wrapper { background-color: #0e0f12 !important; }
html[data-theme='dark'] input, html[data-theme='dark'] textarea, html[data-theme='dark'] select {
	background-color: #242830;
	color: #fff;
	border-color: #ffffff1a;
}

/* ============================================================
   7b. CONTRASTE DEL TEXTO EN MODO OSCURO
   Medido con un auditor de contraste: el tema deja 8 sitios con
   gris oscuro (#404040) sobre el fondo #191c20, que dan 1,65:1
   cuando el mínimo legible es 4,5:1. Aquí se aclaran.
   ============================================================ */

/* Títulos de los bloques de sección: el h2 salía blanco, pero su
   enlace interior seguía en gris oscuro y no se leía. */
html[data-theme='dark'] .dp-seccion__titulo,
html[data-theme='dark'] .dp-seccion__titulo a,
html[data-theme='dark'] .dp-seccion__titulo span { color: #eef1f6 !important; }

/* Números y enlaces de la paginación */
html[data-theme='dark'] .covernews-pagination a,
html[data-theme='dark'] .covernews-pagination .page-numbers,
html[data-theme='dark'] .pagination a,
html[data-theme='dark'] .pagination .page-numbers,
html[data-theme='dark'] .nav-links a,
html[data-theme='dark'] .nav-links .page-numbers { color: #c9d1dc !important; }

html[data-theme='dark'] .covernews-pagination .current,
html[data-theme='dark'] .pagination .current { color: #fff !important; }

/* Etiquetas de formulario (el widget de búsqueda) */
html[data-theme='dark'] label,
html[data-theme='dark'] .wp-block-search__label { color: #c9d1dc !important; }

/* Contadores, comentarios y metadatos pequeños */
html[data-theme='dark'] .aft-show-hover,
html[data-theme='dark'] .aft-comment-count a,
html[data-theme='dark'] .aft-date,
html[data-theme='dark'] .aft-post-format,
html[data-theme='dark'] figcaption,
html[data-theme='dark'] .wp-block-latest-comments,
html[data-theme='dark'] .no-comments { color: #aeb7c4 !important; }

/* Ese bloque traía fondo blanco de fábrica: en oscuro sobra */
html[data-theme='dark'] .wp-block-latest-comments,
html[data-theme='dark'] .no-comments,
html[data-theme='dark'] .wp-block-latest-comments__comment { background-color: transparent !important; }

/* El rojo de acento, aclarado para que se lea sobre el fondo oscuro
   (daba 4,47:1 y el mínimo es 4,5:1) */
html[data-theme='dark'] .dp-cat { color: #ff6b8b !important; }

/* OJO: las insignias de categoría del tema llevan fondo rojo propio, así que su
   texto debe seguir BLANCO. Pintarlo de acento daba 2,37:1 (rosa sobre rojo). */
html[data-theme='dark'] .covernews-categories,
html[data-theme='dark'] .covernews-categories a,
html[data-theme='dark'] .cat-links a { color: #fff !important; }

/* Red de seguridad: los enlaces de la composición no se quedan en gris */
html[data-theme='dark'] .dp-seccion a,
html[data-theme='dark'] .dp-card a,
html[data-theme='dark'] .dp-item a,
html[data-theme='dark'] .dum-trending-lateral a { color: #eef1f6; }

/* ============================================================
   9. Cita de la fuente (notas de agregación)
   Va al final de la nota, cerrando el texto y diciendo de dónde
   viene la información, con el enlace al medio original.
   ============================================================ */
.dum-fuente {
	margin-top: 26px;
	padding: 14px 16px;
	border-left: 4px solid var(--dum-acento);
	background-color: #f6f7f9;
	font-size: 14px;
	line-height: 1.6;
	color: #4a4a4a;
}

.dum-fuente strong { color: #12141a; }

.dum-fuente a {
	color: #c8002f;
	font-weight: 600;
	text-decoration: none;
}

.dum-fuente a:hover { text-decoration: underline; }

.dum-fuente .dum-fuente__credito {
	display: block;
	margin-top: 8px;
	font-size: 12px;
	color: #6b6b6b;
}

html[data-theme='dark'] .dum-fuente {
	background-color: #1f242b;
	color: #c3cbd6;
}

html[data-theme='dark'] .dum-fuente strong { color: #fff; }
html[data-theme='dark'] .dum-fuente a { color: #ff6b8b; }
html[data-theme='dark'] .dum-fuente .dum-fuente__credito { color: #9aa4b2; }

/* ============================================================
   8. Móvil
   ============================================================ */
@media (max-width: 767px) {
	.dum-catbar__inner { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
	.dum-catbar a { padding: 11px 10px; font-size: 14px; }
}