/* =========================================================================
   ESTILOS DE LA VISTA noticia.php
   Generado al sacar los estilos en linea de los .php (atributos style y
   bloques <style>). Solo los carga esta vista
   (partesuperior.php enlaza css/paginas/<nombre del script>.css si existe).
   Las clases ec-N / ev-<vista>-N sustituyen a un style="..." concreto. Sus
   declaraciones llevan !important porque el estilo en linea ganaba a cualquier
   regla normal; no lo llevan display/visibility/opacity (las cambia jQuery con
   .show()/.hide()) ni las propiedades en las que ya habia una regla !important
   que le ganaba al estilo en linea. En los <a> sin href ni class se usa
   data-estilo="..." (una class anularia a:not([class]) de Bootstrap).
   ========================================================================= */

/* ---------- Antes bloque <style> de noticia.php ---------- */
	/* ===== Detalle de noticia ===== */
	.noticia-detalle .container-fluid { position: relative; z-index: 1; } /* contenido por encima de la marca de agua de la plantilla */
	.noticia-detalle a { color:#f4b333; }

	/* h2 en principal.css lleva font-size:140% !important, hay que ganarle */
	.noticia-kicker { font-size: 3rem !important; font-weight: 800; color:#333f4f; margin:0; }
	/* La mitad que el "NOTICIA" de arriba (3rem) */
	.noticia-fecha  { font-size: 1.5rem; color:#f4b333; font-weight: 700; letter-spacing: .05em; margin-bottom: 24px; }

	/* Cabecera de la noticia: imagen (35%) + título/país, como dos columnas.
	   El título arranca arriba, alineado con el borde superior de la imagen.
	   La imagen tiene proporción fija 16:9 y rellena todo el marco haciendo
	   zoom y recortando lo que sobra (object-fit: cover), en lugar de dejar
	   franjas a los lados. Así el bloque mide siempre lo mismo sea la foto
	   vertical u horizontal. Para cambiar la altura, tocar el aspect-ratio. */
	.noticia-cabecera { display:flex; align-items:flex-start; gap:24px; margin-bottom:18px; }
	.noticia-media {
		flex:0 0 42%; max-width:42%;
		aspect-ratio: 16 / 9;
		overflow:hidden;
		border-radius:2px;
		background:#eee;
	}
	.noticia-media img { width:100%; height:100%; object-fit:cover; object-position:center; display:block; }
	/* El bloque del título se estrecha por la derecha: parte antes de llegar al
	   borde de la columna, dejando aire a la derecha. */
	.noticia-encabezado { flex:1 1 auto; min-width:0; padding-right:8%; }

	@media (max-width: 767px) {
		.noticia-cabecera { flex-direction:column; align-items:stretch; gap:14px; }
		.noticia-media { flex-basis:auto; max-width:100%; }
	}
	.noticia-titulo { font-size: 1.6rem; font-weight: 800; color:#333f4f; line-height:1.25; }
	/* El subtítulo va debajo de la cabecera, a ancho completo */
	.noticia-subtitulo { font-size: 1.1rem; padding-top: 4px; }
	/* La palabra "País" en amarillo, igual que la fecha; el valor en gris */
	.noticia-pais { color:#f4b333; font-weight:700; margin-bottom: 18px; }
	.noticia-pais span { color:#666; font-weight:400; }
	.noticia-cuerpo { color:#444; line-height:1.7; padding-top:6px; }
	.noticia-cuerpo p { margin-bottom: 14px; }

	/* estilos.css les fija width:190px/210px !important, lo que cortaba el texto:
	   aqui se libera el ancho para que cada boton ocupe lo que necesite en una linea. */
	.noticia-detalle .btn-mas-info-big,
	.noticia-detalle .btn-noticias-big {
		display:inline-block;
		width:auto !important;
		max-width:none !important;
		padding:13px 32px; font-size:1rem; font-weight:700; line-height:1.2;
		white-space:nowrap;   /* el texto nunca parte en dos lineas */
		text-align:center; text-decoration:none;
		border-radius:2px; margin:10px 8px 0 0;
	}
	.btn-mas-info-big { background:#f4b333 !important; color:#fff !important; border:1px solid #f4b333 !important; }
	.btn-noticias-big { background:#333f4f !important; color:#fff !important; border:1px solid #333f4f !important; }
	.btn-mas-info-big:hover { background:#fff !important; color:#f4b333 !important; }
	.btn-noticias-big:hover { background:#fff !important; color:#333f4f !important; }

	/* ===== Fuentes ===== */
	.noticia-fuentes { margin: 34px 0 0; }
	.noticia-fuentes h4 {
		font-size:1.1rem; font-weight:800; color:#333f4f;
		margin:0 0 10px; letter-spacing:.01em;
	}
	.noticia-fuentes ul { list-style:none; margin:0; padding:0; }
	.noticia-fuentes li {
		position:relative; padding:0 0 0 18px; margin:0 0 10px;
		line-height:1.5;
	}
	.noticia-fuentes li:before {
		content:""; position:absolute; left:0; top:.62em;
		width:6px; height:6px; border-radius:50%; background:#f4b333;
	}
	.noticia-fuentes .fuente-medio { font-style:italic; color:#555; font-size:.95rem; }
	.noticia-fuentes .fuente-sep   { color:#bbb; margin:0 4px; }
	.noticia-fuentes .fuente-enlace {
		color:#f4b333 !important; font-weight:700; font-size:.95rem;
		text-decoration:underline; text-underline-offset:3px;
	}
	.noticia-fuentes .fuente-enlace:hover { color:#333f4f !important; }
	.noticia-fuentes .fuente-url {
		display:block; margin-top:3px;
		color:#8a8a8a; font-size:.8rem; word-break:break-all;
	}

	/* ===== Más noticias ===== */
	.mas-noticias-title { font-size:1.6rem; font-weight:800; color:#f4b333; margin:40px 0 18px; }
	.mas-noticia-item { padding:14px 0; border-top:1px solid #ececec; }
	.mas-noticia-item:last-child { border-bottom:1px solid #ececec; }
	.mas-noticia-item a { color:#333f4f; font-weight:700; text-decoration:none; }
	.mas-noticia-item a:hover { color:#f4b333; }
	.mas-noticia-item .arrow { color:#f4b333; font-weight:800; margin-right:6px; }
	.mas-noticia-item p { color:#777; margin:4px 0 0; font-size:.92rem; }

	/* ===== Sidebar =====
	   El contenido es el mismo bloque que la ficha de evento
	   (submenu_actualidad.php), pero NO se usa id='bloque_derecha': ese id
	   lleva float:left y width:25% en css/estilos.css y romperia la columna
	   Bootstrap de esta pagina. Se replica solo lo visual. */
	.noticia-detalle .noticia-sidebar { background-color:#f1f1f3; }
	.noticia-detalle .noticia-sidebar .agenda-title { margin:20px 10px 10px 18px; }