/*
 * INFONEXO — Identidad de color v1
 * Capa de color sobre el tema el-nexo. No layout, no grilla, no tipografías.
 * Selectores confirmados por auditoría de DOM en vivo (portada + nota interior),
 * ver IDENTIDAD-INFONEXO.md para el detalle selector -> valor viejo -> valor nuevo.
 */

:root {
	--ink: #0B1220;
	--paper: #FAF8F4;
	--grey: #6B7180;
	--teal: #0FA47F;
	--teal-text: #0A7A5C;
	--amber: #E8A317;

	--infonexo-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;

	/*
	 * El tema el-nexo ya define sus propios custom properties en :root
	 * (--paper, --accent, --accent-deep, --text-3, etc.) y la mayoría de
	 * sus selectores los consumen vía var(...). Redefinir esos MISMOS
	 * nombres acá (en vez de pelear especificidad selector por selector)
	 * propaga el cambio de color a todos sus usos automáticamente:
	 *   --paper       fondo general del sitio
	 *   --accent      bordes/rellenos + texto en altas (cat-tag, eyebrow,
	 *                 nav activo, filete del masthead, blockquote) -> teal
	 *   --accent-deep enlaces de cuerpo y hover de "Ver todo"        -> teal-text
	 *   --text-3      bylines, cargos, fechas, metadatos             -> grey
	 * Selectores con especificidad más alta que la del tema (poca, ver
	 * abajo) se ajustan aparte donde el propio tema fija un color fijo
	 * en vez de heredar la variable (comprobado contra el DOM en vivo).
	 */
	--accent: var(--teal);
	--accent-deep: var(--teal-text);
	--text-3: var(--grey);
}

/* ---------- Masthead / wordmark ---------- */
/* El wordmark real es "El Informante" (enlace único en .logo a), no un compuesto
   "INFONEXO" separable en INFO/NEXO -- no hay markup para partirlo sin tocar el
   template. Se deja en --ink pleno, según instrucción para este caso. */

.masthead,
.masthead .wordmark,
.masthead .logo a {
	color: var(--ink);
}

/* ---------- Navegación ---------- */
/* El tema fija el texto del nav en var(--text-2) (no --ink) en reposo; el
   filete de activo/hover ya usa var(--accent), que hereda teal solo. */

.primary-nav a,
.primary-nav .sub-toggle {
	color: var(--ink);
}

/* ---------- Ticker ---------- */
/* El fondo del ticker ya es --ink de origen; solo cambia el label y la hora. */

.ticker-label {
	color: var(--amber);
	font-family: var(--infonexo-mono);
}

.ticker-item time {
	color: var(--amber);
	font-family: var(--infonexo-mono);
}

/* ---------- Category tag (tarjetas + hero de artículo) ---------- */

.cat-tag,
.art-cat,
.card .cat-tag {
	display: inline-block;
	background: transparent;
	border: 1px solid var(--teal);
	border-radius: 2px;
	padding: 2px 6px;
	color: var(--teal-text);
	font-family: var(--infonexo-mono);
	text-transform: uppercase;
	text-decoration: none;
}

/* ---------- Kickers / eyebrows (portada e interior, incluido "Sigue leyendo ·") ---------- */
/* .eyebrow y .cat-tag/.art-cat ya heredan el color correcto vía --accent
   (ver :root). .kicker .nombre fija su propio color:var(--ink) en el tema
   con la misma especificidad (.kicker .nombre) -- se iguala acá para que
   el texto del bloque ("Nacional", "Internacional", etc.) tome teal-text. */

.kicker,
.kicker .nombre,
.eyebrow,
.apertura-dominante .eyebrow {
	color: var(--teal-text);
	text-transform: uppercase;
	letter-spacing: .13em;
}

/* ---------- "Ver todo" ---------- */
/* El tema fija .kicker .ver-todo en var(--text-3), que acá redefinimos a
   --grey (ver :root) -- se sobreescribe puntualmente porque "Ver todo"
   pide teal-text, no grey, a diferencia del resto de los usos de --text-3. */

.ver-todo,
.kicker .ver-todo {
	color: var(--teal-text);
}

/* ---------- Enlaces de cuerpo y citas ---------- */

.articulo-cuerpo a,
.fuentes-consultadas a,
.art-dek a,
blockquote a {
	color: var(--teal-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* ---------- Byline / metadatos ---------- */

.art-byline,
.meta {
	color: var(--grey);
}

/* ---------- Foco visible ---------- */

a:focus-visible,
button:focus-visible {
	outline: 2px solid var(--teal-text);
	outline-offset: 2px;
}

/* ---------- Bloque "Fuentes consultadas" ---------- */

.fuentes-consultadas {
	border-left: 3px solid var(--teal);
	background: color-mix(in srgb, var(--teal) 5%, transparent);
	border-radius: 0 2px 2px 0;
	padding: 16px 18px;
}

.fuentes-consultadas h3 {
	color: var(--teal-text);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
}

/* Salvedades editoriales ("discrepancia no resuelta", etc.) van en texto plano
   dentro del <li>, sin envoltura propia en el markup actual -- no se puede
   aislar por CSS sin tocar el contenido. Documentado en IDENTIDAD-INFONEXO.md
   como límite conocido; el color nunca se usa para advertencias en esta capa. */

/* ---------- Wordmark del masthead ---------- */
/* header.php ahora renderiza <img class="site-wordmark"> (era texto plano)
   con height="80" en el propio HTML (subido de 40 a pedido del director,
   2026-09-10 -- doble tamaño, misma proporción); esta regla solo fija el
   ancho en auto para que escale en proporción y evita que un img{width:100%}
   genérico del tema lo estire. display:inline-block (no block) es a propósito:
   .masthead-top centra su contenido con text-align:center, que solo funciona
   sobre elementos inline/inline-block -- un <img> ya es inline por defecto y
   se centraría solo, pero se deja explícito para que no dependa de ese
   comportamiento implícito. Ver REVERT.md para el hunk de header.php. */

.site-wordmark {
	height: 80px;
	width: auto;
	display: inline-block;
	vertical-align: middle;
}

/* ---------- Masthead mas compacto ---------- */
/* Ajuste de espaciado unicamente (2026-09-10, a pedido del director, dos
   rondas) -- no cambia tamano del logo ni ningun otro elemento. La imagen
   inline-block dentro de .logo se alineaba por defecto a la linea base del
   texto (vertical-align:baseline), lo que dejaba un hueco extra debajo de
   la imagen ademas del padding-bottom declarado -- vertical-align:middle
   (arriba) ya elimina ese hueco fantasma. El resto reduce los paddings
   originales del tema: arriba/abajo del bloque 14/10px -> 4/3px (segunda
   ronda, mas agresivo que la primera 8/6px); margen entre "MEDIO CHILENO"
   y el logo se mantiene en 2px (ya reducido en la primera ronda, lectura
   visual de "separacion pequeña y equilibrada"); padding del nav
   10/10px -> 4/4px. Ticker y portada sin cambios. */

.masthead-top {
	padding-top: 4px;
	padding-bottom: 3px;
}

.wordmark {
	margin-bottom: 0;
}

.primary-nav .wrap {
	padding-top: 4px;
	padding-bottom: 4px;
}

/* ---------- Wordmark: version compacta solo en movil ---------- */
/* A pedido del director (2026-09-10): en pantallas chicas el logo baja de
   80px a 66px de alto (-17.5%, dentro del rango 15-20% pedido) -- mismo
   ancho:auto, misma proporcion/colores/diseño, solo mas chico para liberar
   espacio vertical y que el contenido de la nota aparezca antes. El
   breakpoint 860px es el mismo que ya usa el tema (style.css) para su
   propio responsive, no uno nuevo. No toca escritorio ni ningun otro
   elemento del encabezado. */

@media (max-width: 860px) {
	.site-wordmark {
		height: 66px;
	}
}

/* ---------- Wordmark: ajuste fino en el breakpoint del header móvil compacto ---------- */
/* Decisión registrada 2026-09-16 (control combinado de navegación+búsqueda
   junto al logo, ver style.css @media max-width:599px): a 66px de alto el
   logo mide ~306px de ancho real (proporción 2172x468 del SVG), dejando muy
   poco margen para el botón a su izquierda. Medido en vivo: -8% (66px a
   61px) alcanza para ~16px de aire frente al botón, la reducción más chica
   de todas las variantes evaluadas. Va DESPUÉS del bloque de 860px a
   propósito -- misma especificidad, gana por orden en la cascada en el
   rango donde ambas media queries aplican (≤599px). No toca el rango
   600-860px (tablet), que sigue en 66px. */

@media (max-width: 599px) {
	.site-wordmark {
		height: 61px;
	}
}