.news-details { max-width: 1000px; margin: 18px auto; padding: 0 16px; font-family: Arial, Helvetica, sans-serif; }

	.news-carousel { position: relative; width: 100%; aspect-ratio: 16/9; border-radius: 12px; overflow: hidden; background: #f3f3f3; }
	.news-carousel .carousel-slide { position: absolute; inset: 0; opacity: 0; transition: opacity .4s ease; }
	.news-carousel .carousel-slide.active { opacity: 1; }
	.news-carousel .carousel-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
	.news-carousel .carousel-control {
		position: absolute; top: 50%; transform: translateY(-50%);
		background: rgba(0,0,0,.45); color: #fff; border: 0; width: 38px; height: 38px;
		border-radius: 50%; cursor: pointer; display: grid; place-items: center;
	}
	.news-carousel .carousel-control:hover { background: rgba(0,0,0,.55); }
	.news-carousel .prev { left: 10px; }
	.news-carousel .next { right: 10px; }
	.news-carousel .carousel-dots {
		position: absolute; bottom: 8px; left: 0; right: 0; display: flex; gap: 6px; justify-content: center; align-items: center;
	}
	.news-carousel .dot {
		width: 8px; height: 8px; border-radius: 50%; border: 0; background: rgba(255,255,255,.6); cursor: pointer;
	}
	.news-carousel .dot.active { background: #fff; }

	.news-title { margin:12px 0 6px; font-size:1.6rem; color:#111827; }
	.news-meta { color:#64748b; margin-bottom:14px; }
	.news-content { color:#374151; line-height:1.6; white-space:pre-wrap; text-align: justify; }

	
	.comments-box { margin-top: 22px; padding: 14px; background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; }
	.comments-box textarea {
		width: 100%; box-sizing: border-box; padding: 10px; border-radius: 8px; border: 1px solid #d1d5db; font-size: .98rem; background: #fff;
		resize: none;          
		overflow: auto;        
		font-family: Arial, Helvetica, sans-serif; 
	}
	.comments-box textarea::placeholder,
	.comments-box textarea::-webkit-input-placeholder,
	.comments-box textarea::-moz-placeholder,
	.comments-box textarea:-ms-input-placeholder {
		font-family: Arial, Helvetica, sans-serif; 
	}
	
	.comments-box .actions { text-align: right; margin-top: 10px; }
	.comments-box .btn { display: none; background:#1E8F4A; color:#fff; border:0; padding:10px 14px; border-radius:8px; font-weight:700; cursor:pointer; }
	.comments-box .btn.show { display: inline-block; }

	
	.comment-success{ margin-top:14px; padding:10px; background:#ecfdf5; border:1px solid #a7f3d0; color:#065f46; border-radius:8px; }
	.comment-error{ margin-top:14px; padding:10px; background:#fff4f4; border:1px solid #f5c2c7; color:#b91c1c; border-radius:8px; }

	
	.comments-list { margin-top: 18px; display: grid; gap: 12px; }
	
	#comments { scroll-margin-top: 90px; }
	.comment-item { background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:12px 14px; }
	.comment-head { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
	.comment-avatar {
		width:36px; height:36px; border-radius:50%; background:#0b6b3a; color:#fff;
		display:flex; align-items:center; justify-content:center; font-weight:700;
	}
	.comment-name { font-weight:700; color:#111827; }
	.comment-meta { color:#64748b; font-size:.9rem; }
	.comment-text { color:#374151; white-space:pre-wrap; margin-top:4px; }

	/* CTA y paginación de comentarios */
	.comments-cta { text-align:center; margin-top:12px; }
	.comments-cta a { display:inline-block; padding:8px 12px; border-radius:8px; border:1px solid #d1d5db; color:#0b6b3a; text-decoration:none; font-weight:700; background:#fff; }
	.comments-cta a:hover { background:#f3f4f6; }
	/* NUEVO: botón rojo para cerrar comentarios */
	.comments-cta .btn-close {
		display:inline-block; padding:8px 12px; border-radius:8px;
		background:#c82333; color:#fff; border:1px solid #c82333; text-decoration:none; font-weight:700;
	}
	.comments-cta .btn-close:hover { background:#8a0916; border-color:#8a0916; }

	.comments-pagination { display:flex; gap:8px; justify-content:center; align-items:center; margin:14px 0 6px; }
	.comments-pagination a, .comments-pagination span {
		display:inline-block; padding:6px 10px; border-radius:8px; text-decoration:none; border:1px solid #d1d5db; color:#374151; background:#fff; font-size:.95rem;
	}
	.comments-pagination a:hover { background:#f3f4f6; }
	.comments-pagination .active { background:#0b6b3a; color:#fff; border-color:#0b6b3a; }
	.comments-pagination .disabled { opacity:.5; pointer-events:none; }

	/* NUEVO: Barra de reacciones (like/dislike/compartir) */
	.engage-bar { display:flex; gap:10px; justify-content:flex-end; align-items:center; margin:12px 0 8px; }
	.engage-btn {
		border:1px solid #d1d5db; background:#fff; color:#374151;
		padding:8px 10px; border-radius:8px; cursor:pointer; display:inline-flex; gap:6px; align-items:center;
	}
	.engage-btn:hover { background:#f9fafb; }
	.engage-btn i { pointer-events:none; }
	.engage-btn.like.active { color:#1E8F4A; border-color:#1E8F4A; background:#ecfdf5; }
	.engage-btn.dislike.active { color:#c82333; border-color:#c82333; background:#fff4f4; }
	.engage-btn.share { color:#0b6b3a; }
	.engage-btn.share.active { background:#ecfdf5; border-color:#1E8F4A; color:#1E8F4A; }
	.engage-btn .count { font-weight:700; margin-left:4px; }

	/* Contador de caracteres del comentario */
	.comment-count { margin-top: 6px; color: #64748b; font-size: .9rem; text-align: right; }

	/* Modal de error para comentarios inválidos */
	.comment-modal-overlay {
		position: fixed; inset: 0; display: none; place-items: center; background: rgba(0,0,0,.4); z-index: 60;
	}
	.comment-modal-overlay.open { display: grid; }
	.comment-modal {
		width: min(520px, 92vw); background: #fff; border-radius: 12px; border: 1px solid #e5e7eb; padding: 16px;
		font-family: Arial, Helvetica, sans-serif; box-shadow: 0 10px 30px rgba(0,0,0,.15);
	}
	.comment-modal .title { font-weight: 700; color: #c82333; margin-bottom: 6px; }
	.comment-modal .message { color: #374151; }
	.comment-modal .actions { text-align: right; margin-top: 10px; }
	.comment-modal .btn { background:#1E8F4A; color:#fff; border:0; padding:8px 12px; border-radius:8px; font-weight:700; cursor:pointer; }

	html { scroll-behavior: smooth; } /* desplazamiento suave */