/*
Theme Name: BroadNews Child — Noticias de San Juan
Theme URI: https://noticiasdesanjuan.com/
Template: broadnews
Author: Noticias de San Juan
Description: Child theme de BroadNews para Noticias de San Juan. Todas las personalizaciones de diseño y funcionalidad viven acá, nunca en el tema padre: así una actualización de BroadNews no se lleva puesto nada.
Version: 1.0.0
Text Domain: broadnews-child
*/

/* =========================================================
 * TOKENS DE MARCA
 * El rojo de la marca. Si algún día cambia, se cambia acá
 * y se propaga a todo el sitio.
 * ========================================================= */
:root {
	--ndsj-red:        #b3121a;
	--ndsj-red-dark:   #8a0e15;
	--ndsj-black:      #0b0b0b;
	--ndsj-text:       #1a1a1a;
	--ndsj-text-muted: #555555;
	--ndsj-border:     #e5e5e5;
	--ndsj-bg-suave:   #f0f0f0;
	--ndsj-font-body:    'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	--ndsj-font-heading: 'Roboto', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

/* =========================================================
 * TIPOGRAFÍA Y BASE
 * ========================================================= */
body {
	background-color: #fff;
	color: #222;
	font-family: var(--ndsj-font-body);
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--ndsj-font-heading);
	font-weight: 600;
	color: #111;
}

a {
	color: var(--ndsj-red);
	text-decoration: none;
	transition: all 0.25s ease;
}

a:hover {
	color: var(--ndsj-red-dark);
	text-decoration: underline;
}

/* =========================================================
 * CABECERA
 * ========================================================= */
.site-header,
.main-header {
	background-color: #ffffff !important;
	box-shadow: 0 1px 3px rgb(0 0 0 / .05);
	margin-bottom: 0 !important;
}

.site-header a,
.main-header a {
	color: #111 !important;
	font-weight: 500;
}

.site-header,
.main-header,
.header-layout-1,
.header-layout-2,
.custom-header,
.site-branding {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.site-branding {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 100% !important;
	max-width: 100% !important;
	text-align: center !important;
	padding: 10px 0 !important;
}

/* El logo, atado. Sin esto sale a tamano original y ocupa media pantalla:
   el de este diario es mucho mas alto de lo que espera el tema. */
.site-branding img,
.custom-logo,
.custom-logo-link img {
	max-height: 92px !important;
	width: auto !important;
	height: auto !important;
}

@media (max-width: 782px) {
	.site-branding img,
	.custom-logo,
	.custom-logo-link img {
		max-height: 64px !important;
	}
}

/* El nombre y la bajada ya estan dentro del logo: repetirlos al lado, en
   gris claro sobre blanco, no se leia y ademas duplicaba el titulo. Se
   esconden a la vista pero siguen en el HTML para lectores de pantalla. */
#masthead .site-title,
#masthead .site-description,
.broadnews-header .site-title,
.broadnews-header .site-description,
.site-header .site-title,
.site-header .site-description {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	white-space: nowrap;
}

.site-branding .container,
.main-header .container,
.site-header .container {
	padding-top: 6px !important;
	padding-bottom: 6px !important;
}

/* =========================================================
 * TARJETAS DE NOTA
 * ========================================================= */
article,
.post,
.post-content,
.post-item,
.entry-content,
.post-box,
.grid-wrapper {
	background-color: #fff;
	color: #111;
	border-radius: 8px;
	box-shadow: 0 2px 8px rgb(0 0 0 / .05);
	padding: 20px;
	margin-bottom: 30px;
	transition: all 0.3s ease;
}

article:hover,
.post:hover,
.post-item:hover,
.post-box:hover {
	transform: scale(1.01);
	box-shadow: 0 4px 12px rgb(0 0 0 / .08);
}

.post-box h2 a,
.post-box .entry-title a,
.post-box .post-title a,
.post-item h2 a {
	color: #111 !important;
}

.post-box h2 a:hover,
.post-box .entry-title a:hover,
.post-box .post-title a:hover,
.post-item h2 a:hover {
	color: var(--ndsj-red-dark) !important;
}

/* Sección destacada de portada: menos aire del que trae el tema */
.main-banner-wrapper,
.banner-exclusive-posts-wrapper,
.featured-section,
.top-featured-posts,
.aft-main-banner-wrapper {
	margin-top: 5px !important;
	margin-bottom: 5px !important;
}

/* =========================================================
 * ETIQUETAS DE CATEGORÍA
 * ========================================================= */
/* Las tarjetas del tema ponen la categoria ENCIMA de la foto
   (.category-min-read-wrap va posicionada sobre la miniatura). En rojo sobre
   una imagen no se lee: va con placa roja y letra blanca, que se distingue
   tanto sobre foto como sobre fondo claro. */
.category-style-1 span,
.cat-links a,
.cat-links a.broadnews-categories,
.read-categories .cat-links a {
	background-color: var(--ndsj-red) !important;
	color: #ffffff !important;
	font-weight: 700 !important;
	font-size: 11px !important;
	line-height: 1.6;
	padding: 3px 8px !important;
	border-radius: 3px;
	margin-right: 6px;
	text-transform: uppercase;
	letter-spacing: .04em;
	display: inline-block;
	text-shadow: none !important;
}

.category-style-1 span:hover,
.cat-links a:hover,
.cat-links a.broadnews-categories:hover {
	background-color: var(--ndsj-red-dark) !important;
	color: #ffffff !important;
	text-decoration: none;
}

/* BroadNews colorea cada categoria distinto (category-color-1, -2, -3...).
   Se unifica en el rojo de la marca. */
.cat-links a[class*="category-color-"] {
	background-color: var(--ndsj-red) !important;
	color: #ffffff !important;
}

/* En MIS bloques la categoria va sobre fondo blanco, arriba del titulo:
   ahi si conviene texto rojo sin placa. */
.ndsj-cat {
	background: none !important;
	padding: 0 !important;
}

/* =========================================================
 * NAVEGACIÓN, BOTONES Y PAGINACIÓN — el rojo de marca
 * ========================================================= */
.main-navigation ul li.current-menu-item > a,
.main-navigation ul li.current_page_item > a,
.main-navigation ul li.current-cat > a,
.main-navigation ul li a:hover {
	background-color: var(--ndsj-red) !important;
	color: #ffffff !important;
}

a.button,
button,
input[type="submit"],
input[type="button"],
.tagcloud a:hover,
.tagcloud a:focus,
a.more-link,
a.read-more,
.highlight-bg,
a.highlight-link,
.widget-title:after {
	background-color: var(--ndsj-red) !important;
	border-color: var(--ndsj-red) !important;
	color: #ffffff !important;
}

.entry-meta a:hover {
	color: var(--ndsj-red-dark) !important;
}

.pagination .current,
.page-numbers.current {
	background-color: var(--ndsj-red) !important;
	color: #ffffff !important;
}

.pagination a:hover,
.page-numbers:hover {
	background-color: var(--ndsj-red-dark) !important;
	color: #ffffff !important;
}

/* Barrita roja al costado del título de cada widget */
.widget-title-border-side .widget-title {
	position: relative;
	padding-left: 15px !important;
}

.widget-title-border-side .widget-title::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background-color: var(--ndsj-red);
	z-index: 10;
}

/* =========================================================
 * BOTÓN "VOLVER ARRIBA"
 * No se toca "display": el jQuery del tema ya lo muestra y
 * lo esconde solo al scrollear.
 * ========================================================= */
#scroll-up.secondary-color {
	width: 48px !important;
	height: 48px !important;
	border-radius: 50% !important;
	background-color: var(--ndsj-red) !important;
	border: none !important;
	position: fixed;
	bottom: 30px;
	right: 30px;
	z-index: 9999;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15l6-6 6 6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 20px 20px;
	transition: background-color 0.2s ease;
}

#scroll-up.secondary-color:hover {
	background-color: var(--ndsj-red-dark) !important;
}

@media (max-width: 782px) {
	#scroll-up.secondary-color {
		width: 40px !important;
		height: 40px !important;
		bottom: 20px;
		right: 20px;
		background-size: 16px 16px;
	}
}

/* =========================================================
 * MODO OSCURO (BroadNews lo trae con la clase aft-dark-mode)
 * ========================================================= */
body.aft-dark-mode {
	background-color: #121212 !important;
	color: #f0f0f0 !important;
}

body.aft-dark-mode h1,
body.aft-dark-mode h2,
body.aft-dark-mode h3,
body.aft-dark-mode h4,
body.aft-dark-mode h5,
body.aft-dark-mode h6,
body.aft-dark-mode .post-title,
body.aft-dark-mode .entry-title,
body.aft-dark-mode .post-box h2,
body.aft-dark-mode .post-box p {
	color: #ffffff !important;
}

body.aft-dark-mode a {
	color: #ffffff !important;
}

body.aft-dark-mode a:hover {
	color: #dddddd !important;
	text-decoration: underline;
}

body.aft-dark-mode .site-header,
body.aft-dark-mode .main-header {
	background-color: #1c1c1c !important;
	color: #f0f0f0 !important;
}

body.aft-dark-mode article,
body.aft-dark-mode .post,
body.aft-dark-mode .post-item,
body.aft-dark-mode .entry-content,
body.aft-dark-mode .post-box,
body.aft-dark-mode .grid-wrapper {
	background-color: #1e1e1e !important;
	color: #f0f0f0 !important;
	border: none !important;
	box-shadow: none !important;
}

body.aft-dark-mode .post-meta,
body.aft-dark-mode .entry-meta {
	color: #ccc !important;
}

body.aft-dark-mode .category-style-1 span,
body.aft-dark-mode .cat-links a {
	background-color: #333 !important;
	color: #ddd !important;
}

body.aft-dark-mode .category-style-1 span:hover,
body.aft-dark-mode .cat-links a:hover {
	background-color: #555 !important;
	color: #fff !important;
}

body.aft-dark-mode .post-box h2 a,
body.aft-dark-mode .post-box .entry-title a,
body.aft-dark-mode .post-box .post-title a,
body.aft-dark-mode .post-item h2 a,
body.aft-dark-mode .post-box a {
	color: #ffffff !important;
}

body.aft-dark-mode .post-box a:hover,
body.aft-dark-mode .post-item a:hover {
	color: #dddddd !important;
}


/* =========================================================
 * CABECERA DE BROADNEWS
 * El tema usa #masthead / .broadnews-header, no .site-header:
 * por eso las reglas genericas de arriba no le pegaban.
 * ========================================================= */

/* La franja del medio venia con una imagen de fondo que el tema busca
   DENTRO del child theme (assets/img/default-header-image.jpeg). Ese
   archivo no existe acá, asi que daba 404 y quedaba un bloque oscuro.
   Fondo blanco. */
.af-middle-header,
.af-middle-header.af-header-image,
.af-middle-header.data-bg {
	background-image: none !important;
	background-color: #ffffff !important;
}

.af-middle-header .af-middle-container {
	min-height: 0 !important;
	padding: 26px 0 !important;
}

/* Logo mas grande y centrado: es lo unico que identifica al diario
   una vez que se esconde el titulo en texto. */
#masthead .site-branding .custom-logo,
#masthead .custom-logo-link img,
.broadnews-header .custom-logo {
	max-height: 150px !important;
	width: auto !important;
	height: auto !important;
	margin: 0 auto !important;
}

@media (max-width: 782px) {
	#masthead .site-branding .custom-logo,
	#masthead .custom-logo-link img,
	.broadnews-header .custom-logo {
		max-height: 84px !important;
	}
}

/* Barra del menu con el rojo de la marca */
#main-navigation-bar,
.af-bottom-header {
	background-color: var(--ndsj-black) !important;
}

#main-navigation-bar .main-navigation > div > ul > li > a,
.af-bottom-header .main-navigation a {
	color: #ffffff !important;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .02em;
}

#main-navigation-bar .main-navigation > div > ul > li > a:hover,
#main-navigation-bar .main-navigation > div > ul > li.current-menu-item > a {
	background-color: var(--ndsj-red) !important;
	color: #ffffff !important;
}

/* El tema pinta un velo negro (::before) encima de la imagen de cabecera para
   que se lea el texto blanco. Sacada la imagen, quedaba el velo solo y la
   franja se veia gris oscura. */
.af-middle-header::before,
.af-middle-header.af-header-image::before,
.af-middle-header.data-bg::before {
	background: transparent !important;
	opacity: 0 !important;
	display: none !important;
}

/* Logo centrado */
.af-middle-header .af-middle-container {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
}

.af-middle-header .logo {
	margin: 0 auto !important;
	float: none !important;
	text-align: center !important;
}

/* La cabecera reserva un bloque .header-promotion (espacio publicitario) al
   lado del logo, que se llevaba 696 de los 1160 px y dejaba el logo pegado a
   la izquierda. Esta vacio, asi que se oculta y el logo queda centrado, como
   en la red y Panorama.
   OJO: si algun dia se usa ese espacio para publicidad de cabecera, hay que
   sacar esta regla. La red publicitaria tiene su propio prompt. */
.af-middle-container .header-promotion {
	display: none !important;
}

.af-middle-container .logo {
	width: 100% !important;
	max-width: 100% !important;
	flex: 1 1 100% !important;
	text-align: center !important;
}

/* =========================================================
 * PORTADA: una nota principal y cuatro acompañando
 * (el markup lo genera ndsj_portada_principal() en functions.php)
 * ========================================================= */
.ndsj-portada { padding: 22px 0; }

.ndsj-portada__grilla {
	display: grid;
	grid-template-columns: 2fr 1fr;
	gap: 26px;
	align-items: start;
}

/* --- la principal --- */
.ndsj-principal__foto { display: block; }

.ndsj-principal__foto img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 6px;
}

.ndsj-principal__texto { padding-top: 14px; }

.ndsj-principal__titulo {
	font-size: 30px;
	line-height: 1.2;
	margin: 6px 0 8px;
}

.ndsj-principal__titulo a { color: #111 !important; }
.ndsj-principal__titulo a:hover { color: var(--ndsj-red) !important; text-decoration: none; }

.ndsj-principal__bajada {
	color: var(--ndsj-text-muted);
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 6px;
}

.ndsj-meta { color: #888; font-size: 12px; margin: 0; }

/* --- la categoría en rojo --- */
.ndsj-cat {
	display: inline-block;
	color: var(--ndsj-red) !important;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	margin-bottom: 2px;
}
.ndsj-cat:hover { color: var(--ndsj-red-dark) !important; text-decoration: none; }

/* --- las que acompañan --- */
.ndsj-acompanan {
	display: flex;
	flex-direction: column;
	gap: 18px;
}

.ndsj-secundaria {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: 12px;
	align-items: start;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--ndsj-border);
}

.ndsj-secundaria:last-child { border-bottom: 0; padding-bottom: 0; }

.ndsj-secundaria__foto img {
	width: 96px;
	height: 72px;
	object-fit: cover;
	border-radius: 4px;
	display: block;
}

.ndsj-secundaria__titulo {
	font-size: 15px;
	line-height: 1.32;
	margin: 2px 0 0;
}

.ndsj-secundaria__titulo a { color: #111 !important; }
.ndsj-secundaria__titulo a:hover { color: var(--ndsj-red) !important; text-decoration: none; }

/* --- en celular, una columna --- */
@media (max-width: 900px) {
	.ndsj-portada__grilla { grid-template-columns: 1fr; gap: 20px; }
	.ndsj-principal__titulo { font-size: 23px; }
}

/* En modo oscuro los títulos tienen que invertirse */
body.aft-dark-mode .ndsj-principal__titulo a,
body.aft-dark-mode .ndsj-secundaria__titulo a { color: #fff !important; }
body.aft-dark-mode .ndsj-secundaria { border-bottom-color: #333; }
body.aft-dark-mode .ndsj-principal__bajada { color: #bbb; }

/* =========================================================
 * BLOQUES DE PORTADA: Últimas noticias y una sección por categoría
 * (markup de ndsj_portada_lista en functions.php)
 * ========================================================= */
.ndsj-bloque { padding: 8px 0 4px; }

.ndsj-bloque__cabeza {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	border-bottom: 2px solid var(--ndsj-border);
	padding-bottom: 8px;
	margin-bottom: 18px;
}

.ndsj-bloque__titulo {
	font-size: 19px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	margin: 0;
	position: relative;
	padding-left: 12px;
}

/* La barrita roja al costado del titulo, como en la red */
.ndsj-bloque__titulo::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	bottom: 2px;
	width: 4px;
	background: var(--ndsj-red);
}

.ndsj-bloque__vermas {
	font-size: 13px;
	color: var(--ndsj-text-muted) !important;
	white-space: nowrap;
}
.ndsj-bloque__vermas:hover { color: var(--ndsj-red) !important; text-decoration: none; }

.ndsj-bloque__grilla {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
}

.ndsj-tarjeta__foto { display: block; }

.ndsj-tarjeta__foto img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 4px;
	display: block;
	margin-bottom: 8px;
}

.ndsj-tarjeta__titulo {
	font-size: 15px;
	line-height: 1.34;
	margin: 2px 0 0;
}
.ndsj-tarjeta__titulo a { color: #111 !important; }
.ndsj-tarjeta__titulo a:hover { color: var(--ndsj-red) !important; text-decoration: none; }

@media (max-width: 1000px) {
	.ndsj-bloque__grilla { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
	.ndsj-bloque__grilla { grid-template-columns: 1fr; }
}

body.aft-dark-mode .ndsj-tarjeta__titulo a { color: #fff !important; }
body.aft-dark-mode .ndsj-bloque__cabeza { border-bottom-color: #333; }

/* Los separadores publicitarios: uno solo, centrado, con aire arriba y abajo */
.ndsj-banners--home {
	margin: 30px auto;
	padding: 0 16px;
}

/* =========================================================
 * TIPOGRAFÍA UNIFICADA
 *
 * BroadNews mezcla tres fuentes: Jost en la cabecera y los botones, Oswald en
 * las etiquetas de categoría y "Source Sans Pro", serif como base de textos y
 * títulos. Ese serif era lo que hacía que las notas se vieran distintas a
 * la red, que usa Roboto en todo.
 *
 * Se fuerza Roboto en todo menos en los iconos: si se les toca la familia,
 * los glifos de aft-icons y Font Awesome se convierten en cuadraditos.
 * ========================================================= */
body,
body *:not(i):not(.ham):not([class*="aft-icon"]):not([class*="fa-"]):not(.fa):not([class*="dashicons"]) {
	font-family: var(--ndsj-font-body) !important;
}

/* =========================================================
 * CLIMA Y DÓLAR
 * (markup de ndsj_clima_dolar_html en mu-plugins/ndsj-clima-dolar.php)
 * ========================================================= */
.ndsj-cd { padding: 6px 0 2px; }

.ndsj-cd__fila {
	display: grid;
	grid-template-columns: 1fr 1.6fr;
	gap: 18px;
}

.ndsj-cd__caja {
	background: #111;
	color: #fff;
	border-radius: 6px;
	padding: 18px 22px;
}

.ndsj-cd__rotulo {
	display: block;
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9a9a9a;
	margin-bottom: 6px;
}

/* --- clima --- */
.ndsj-clima {
	display: flex;
	align-items: center;
	gap: 18px;
}

.ndsj-clima__icono { font-size: 40px; line-height: 1; }

.ndsj-clima__datos { display: flex; flex-direction: column; }

.ndsj-clima__temp {
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
}

.ndsj-clima__estado { font-size: 14px; color: #ddd; }
.ndsj-clima__minmax { font-size: 12px; color: #9a9a9a; margin-top: 2px; }

/* --- dólar --- */
.ndsj-dolar__lista { display: flex; flex-direction: column; gap: 10px; }

.ndsj-dolar__fila {
	display: grid;
	grid-template-columns: 84px 1fr 1fr;
	align-items: center;
	gap: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid #262626;
}
.ndsj-dolar__fila:last-child { border-bottom: 0; padding-bottom: 0; }

.ndsj-dolar__tipo {
	background: var(--ndsj-red);
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	text-align: center;
	padding: 4px 6px;
	border-radius: 3px;
}

.ndsj-dolar__valor { display: flex; flex-direction: column; line-height: 1.15; }
.ndsj-dolar__valor strong { font-size: 21px; font-weight: 700; }
.ndsj-dolar__valor small { font-size: 10px; color: #9a9a9a; text-transform: uppercase; letter-spacing: .08em; }

@media (max-width: 800px) {
	.ndsj-cd__fila { grid-template-columns: 1fr; }
	.ndsj-dolar__valor strong { font-size: 18px; }
}

/* =========================================================
 * MODO OSCURO EN LA CABECERA
 *
 * Las reglas de arriba fuerzan la cabecera a blanco para que se lea el logo,
 * pero en modo oscuro eso dejaba una franja blanca arriba de un sitio negro.
 * Acá se revierte para .aft-dark-mode.
 *
 * El logo es un PNG con letras oscuras: sobre negro no se lee. Se pasa a
 * blanco con un filtro (brightness(0) hace todo negro, invert(1) lo pasa a
 * blanco), sin tocar ancho ni alto: mismas medidas que en modo claro.
 * ========================================================= */
body.aft-dark-mode .af-middle-header,
body.aft-dark-mode .af-middle-header.af-header-image,
body.aft-dark-mode .af-middle-header.data-bg,
body.aft-dark-mode .site-header,
body.aft-dark-mode .main-header,
body.aft-dark-mode .header-layout-1,
body.aft-dark-mode .custom-header,
body.aft-dark-mode .site-branding {
	background-color: #121212 !important;
	background-image: none !important;
}

body.aft-dark-mode .top-header,
body.aft-dark-mode .af-middle-header .af-middle-container {
	background-color: #121212 !important;
}

/* El logo, en blanco.
 *
 * OJO: el PNG original NO tiene transparencia, es un rectangulo con fondo
 * blanco solido (verificado: la esquina es 254,254,254 y el 69% de los pixeles
 * son blancos). Por eso NINGUN filtro CSS sirve: brightness(0) invert(1)
 * pintaba el rectangulo entero de blanco y quedaba un bloque.
 *
 * Se genero una version blanca sobre transparente a partir del original y se
 * cambia la imagen con content. Las medidas no se tocan: el max-height sigue
 * siendo el mismo que en modo claro. */
body.aft-dark-mode #masthead .site-branding .custom-logo,
body.aft-dark-mode #masthead .custom-logo-link img,
body.aft-dark-mode .broadnews-header .custom-logo {
	content: url("https://noticiasdesanjuan.com/wp-content/uploads/2026/09/ndsj-logo-blanco.png");
	max-height: 150px !important;
	width: auto !important;
	height: auto !important;
}

@media (max-width: 782px) {
	body.aft-dark-mode #masthead .site-branding .custom-logo,
	body.aft-dark-mode #masthead .custom-logo-link img,
	body.aft-dark-mode .broadnews-header .custom-logo {
		max-height: 66px !important;
	}
}

/* La barra del menú ya era oscura; en modo oscuro se separa con una línea
   para que no se funda con la cabecera. */
body.aft-dark-mode #main-navigation-bar,
body.aft-dark-mode .af-bottom-header {
	background-color: #0b0b0b !important;
	border-top: 1px solid #262626;
}

/* La fecha de la barra superior, legible sobre negro */
body.aft-dark-mode .topbar-date,
body.aft-dark-mode #topbar-time {
	color: #ddd !important;
}

/* =========================================================
 * EL PIE
 * (markup de ndsj_pie en functions.php)
 * ========================================================= */
.ndsj-pie {
	background: #111;
	color: #ddd;
	padding: 40px 0 26px;
	border-top: 3px solid var(--ndsj-red);
}

.ndsj-pie__grilla {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr;
	gap: 40px;
}

.ndsj-pie__logo {
	max-height: 76px;
	width: auto;
	height: auto;
	margin-bottom: 12px;
	/* Sin filtro: se sirve directamente la version blanca del logo. El PNG
	   original tiene fondo blanco solido y cualquier filtro lo vuelve un bloque. */
}

.ndsj-pie__nombre { font-size: 20px; color: #fff; display: block; margin-bottom: 10px; }

.ndsj-pie__bajada {
	color: #9a9a9a;
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 12px;
	max-width: 46ch;
}

.ndsj-pie__red { font-size: 13px; margin: 0; color: #9a9a9a; }
.ndsj-pie__red a { color: #fff !important; }
.ndsj-pie__red a:hover { color: var(--ndsj-red) !important; }

.ndsj-pie__titulo {
	color: #fff;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0 0 14px;
	padding-bottom: 8px;
	border-bottom: 1px solid #2a2a2a;
}

.ndsj-pie__lista { list-style: none; margin: 0; padding: 0; }
.ndsj-pie__lista li { margin-bottom: 8px; }

.ndsj-pie__lista a {
	color: #bbb !important;
	font-size: 14px;
}
.ndsj-pie__lista a:hover { color: #fff !important; text-decoration: none; }

@media (max-width: 800px) {
	.ndsj-pie__grilla { grid-template-columns: 1fr; gap: 26px; }
	.ndsj-pie { padding: 30px 0 20px; }
}

/* =========================================================
 * PÁGINA 404
 * ========================================================= */
.ndsj-404 {
	text-align: center;
	padding: 54px 16px 34px;
	max-width: 720px;
	margin: 0 auto;
}

.ndsj-404__codigo {
	color: var(--ndsj-red);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin: 0 0 8px;
}

.ndsj-404__titulo {
	font-size: 34px;
	line-height: 1.15;
	margin: 0 0 12px;
}

.ndsj-404__texto {
	color: var(--ndsj-text-muted);
	font-size: 16px;
	line-height: 1.55;
	margin: 0 auto 22px;
	max-width: 52ch;
}

.ndsj-404__buscador { max-width: 460px; margin: 0 auto 26px; }
.ndsj-404__buscador .search-form { display: flex; gap: 8px; }
.ndsj-404__buscador .search-field { flex: 1; }

.ndsj-404__secciones {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 10px;
}

.ndsj-404__rotulo {
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #999;
	width: 100%;
	margin-bottom: 2px;
}

.ndsj-404__secciones a {
	border: 1px solid var(--ndsj-border);
	border-radius: 4px;
	padding: 6px 12px;
	font-size: 13px;
	color: #333 !important;
}

.ndsj-404__secciones a:hover {
	background: var(--ndsj-red);
	border-color: var(--ndsj-red);
	color: #fff !important;
	text-decoration: none;
}

body.aft-dark-mode .ndsj-404__secciones a { color: #ddd !important; border-color: #333; }
body.aft-dark-mode .ndsj-404__texto { color: #aaa; }

@media (max-width: 600px) {
	.ndsj-404__titulo { font-size: 25px; }
	.ndsj-404 { padding: 34px 16px 24px; }
}