/* ================================================================
   noticias.css — GAMS Sacaba / Tema gams
   Estilos para archive-noticias.php y el contador de vistas
   en single.php.
   ================================================================ */

/* ── Layout principal: sidebar + contenido ───────────────── */
.news-layout {
  display:               grid;
  grid-template-columns: 240px 1fr;
  gap:                   28px;
  padding:               32px 24px 60px;
  align-items:           start;
}

/* Hero — texto de categoría activa */
.news-hero-cat {
  font-weight:   400;
  font-size:     1.4rem;
  opacity:       0.85;
}

/* ════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════ */
.news-sidebar {
  display:        flex;
  flex-direction: column;
  gap:            16px;
  position:       sticky;
  top:            80px; /* debajo del navbar sticky */
  max-height:     calc(100vh - 100px);
  overflow-y:     auto;
}

/* Bloque del sidebar */
.news-sb-block {
  background:    var(--background-card);
  border:        1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  overflow:      hidden;
}

.news-sb-title {
  display:       flex;
  align-items:   center;
  gap:           7px;
  font-size:     0.72rem !important;
  font-weight:   700 !important;
  color:         var(--texto-suave) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  padding:       10px 14px;
  margin:        0 !important;
  border-bottom: 1px solid var(--borde-suave);
  background:    var(--background-default);
}
.news-sb-title i { font-size: 0.88rem; color: var(--primary-main); }

/* ── Categorías en el sidebar ────────────────────────────── */
.news-cat-item {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         9px 14px;
  border-bottom:   1px solid var(--borde-suave);
  text-decoration: none;
  transition:      background var(--transicion), border-color var(--transicion);
  border-left:     3px solid transparent;
}
.news-cat-item:last-child { border-bottom: none; }
.news-cat-item:hover {
  background:       var(--background-default);
  text-decoration:  none;
  border-left-color: var(--primary-main);
}
.news-cat-item.activo {
  background:        #f0f7f0;
  border-left-color: var(--primary-main);
}

.news-cat-nombre {
  display:     flex;
  align-items: center;
  gap:         7px;
  font-size:   0.83rem;
  font-weight: 500;
  color:       var(--texto-default);
}
.news-cat-nombre i { color: var(--primary-main); font-size: 0.9rem; }
.news-cat-item.activo .news-cat-nombre { color: var(--primary-main); }

.news-cat-count {
  font-size:     0.7rem;
  font-weight:   600;
  background:    var(--background-default);
  color:         var(--texto-suave);
  padding:       2px 8px;
  border-radius: 99px;
  flex-shrink:   0;
}
.news-cat-item.activo .news-cat-count {
  background: var(--primary-main);
  color:      #fff;
}

/* ── Más leídas en el sidebar ────────────────────────────── */
.news-leida-item {
  display:         flex;
  align-items:     flex-start;
  gap:             10px;
  padding:         10px 14px;
  border-bottom:   1px solid var(--borde-suave);
  text-decoration: none;
  transition:      background var(--transicion);
}
.news-leida-item:last-child { border-bottom: none; }
.news-leida-item:hover {
  background:      var(--background-default);
  text-decoration: none;
}

/* Número de ranking con colores degradados */
.news-leida-num {
  font-size:   1.3rem;
  font-weight: 800;
  line-height: 1;
  min-width:   22px;
  flex-shrink: 0;
}
.news-leida-num-1 { color: #f9a825; }  /* oro */
.news-leida-num-2 { color: #90a4ae; }  /* plata */
.news-leida-num-3 { color: #a1887f; }  /* bronce */
.news-leida-num-4,
.news-leida-num-5 { color: var(--borde-medio, #ccc); }

.news-leida-tit {
  font-size:   0.8rem;
  font-weight: 600;
  color:       var(--texto-default);
  line-height: 1.4;
  margin:      0 0 4px;
  display:     -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}
.news-leida-item:hover .news-leida-tit { color: var(--primary-main); }

.news-leida-meta {
  display:     flex;
  align-items: center;
  gap:         5px;
  font-size:   0.72rem;
  color:       var(--texto-suave);
  flex-wrap:   wrap;
}
.news-leida-cat {
  color:       var(--texto-suave);
  font-weight: 500;
}
.news-leida-vistas {
  display:     inline-flex;
  align-items: center;
  gap:         3px;
  color:       var(--primary-main);
}

/* ════════════════════════════════════════════════════════════
   COLUMNA PRINCIPAL
   ════════════════════════════════════════════════════════════ */

/* ── Barra de filtros ─────────────────────────────────────── */
.news-filtros-bar {
  display:       flex;
  align-items:   center;
  gap:           8px;
  flex-wrap:     wrap;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--borde-suave);
  margin-bottom: 14px;
}
.news-filtros-left {
  display:     flex;
  align-items: center;
  gap:         8px;
  flex-wrap:   wrap;
}
.news-filtros-label {
  font-size:   0.78rem;
  color:       var(--texto-suave);
  font-weight: 600;
}

/* Chips de filtro */
.news-chip {
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
  font-size:       0.78rem;
  font-weight:     600;
  padding:         5px 13px;
  border-radius:   99px;
  border:          1px solid var(--borde-suave);
  background:      var(--background-card);
  color:           var(--texto-suave);
  text-decoration: none;
  transition:      all var(--transicion);
}
.news-chip:hover {
  border-color:    var(--primary-main);
  color:           var(--primary-main);
  text-decoration: none;
}
.news-chip.activo {
  background:   var(--primary-main);
  border-color: var(--primary-main);
  color:        #fff;
}

/* Buscador inline */
.news-busqueda {
  display:       flex;
  align-items:   center;
  gap:           7px;
  background:    var(--background-default);
  border:        1px solid var(--borde-suave);
  border-radius: 99px;
  padding:       5px 14px;
  margin-left:   auto;
  transition:    border-color var(--transicion), box-shadow var(--transicion);
}
.news-busqueda:focus-within {
  border-color: var(--primary-main);
  box-shadow:   0 0 0 3px rgba(27,94,32,0.08);
}
.news-busqueda i { color: var(--texto-suave); font-size: 0.85rem; }
.news-busqueda input {
  border:      none !important;
  background:  transparent !important;
  outline:     none !important;
  font-size:   0.82rem !important;
  color:       var(--texto-default) !important;
  width:       180px;
  box-shadow:  none !important;
  padding:     0 !important;
}
.news-busqueda input::placeholder { color: var(--texto-muy-suave); }
.news-busqueda-clear {
  color:           var(--texto-suave);
  text-decoration: none;
  font-size:       0.75rem;
  display:         flex;
  align-items:     center;
}
.news-busqueda-clear:hover { color: var(--primary-main); }

/* Contador de resultados */
.news-resultado-count {
  font-size:     0.82rem;
  color:         var(--texto-suave);
  margin-bottom: 14px;
}
.news-resultado-count strong { color: var(--primary-main); }

/* ── Grid de noticias ─────────────────────────────────────── */
.news-grid {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

/* ── Tarjeta base ─────────────────────────────────────────── */
.news-card {
  display:       grid;
  grid-template-columns: 140px 1fr;
  gap:           0;
  background:    var(--background-card);
  border:        1px solid var(--borde-suave);
  border-radius: var(--radio-lg);
  overflow:      hidden;
  transition:    border-color var(--transicion), transform var(--transicion),
                 box-shadow var(--transicion);
}
.news-card:hover {
  border-color: var(--primary-main);
  transform:    translateY(-1px);
  box-shadow:   var(--sombra-card);
}

/* Imagen de la tarjeta normal */
.news-card-img {
  height:          100%;
  min-height:      110px;
  background:      var(--background-default);
  background-size:     cover;
  background-position: center;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--borde-medio, #ccc);
  font-size:       1.8rem;
}
.news-card-img-link { display: block; }

/* ── Tarjeta DESTACADA (primera, más grande) ─────────────── */
.news-card-destacada {
  grid-template-columns: 1fr;
}

.news-card-img-dest {
  height:          220px;
  background:      var(--primary-navbg);
  background-size:     cover;
  background-position: center;
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  padding:         14px 16px;
  position:        relative;
}
.news-card-img-dest::after {
  /* Gradiente oscuro en la parte inferior para legibilidad del badge */
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient( to top, rgba(0,0,0,0.45) 0%, transparent 60% );
  pointer-events: none;
}
.news-card-img-dest i {
  font-size: 3rem;
  color:     rgba(255,255,255,0.15);
  align-self: center;
  margin: auto;
  position: relative;
  z-index: 1;
}
.news-img-badge {
  position:       relative;
  z-index:        2;
  background:     rgba(255,255,255,0.18);
  color:          #fff;
  font-size:      0.68rem;
  font-weight:    700;
  padding:        3px 10px;
  border-radius:  99px;
  text-transform: uppercase;
  letter-spacing: .05em;
  border:         1px solid rgba(255,255,255,0.3);
  backdrop-filter: blur(4px);
}
.news-sticky-pin {
  position:       relative;
  z-index:        2;
  display:        flex;
  align-items:    center;
  gap:            4px;
  background:     var(--color-acento);
  color:          #fff;
  font-size:      0.65rem;
  font-weight:    700;
  padding:        3px 9px;
  border-radius:  99px;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Cuerpo de la tarjeta ─────────────────────────────────── */
.news-card-body {
  padding:        14px 16px;
  display:        flex;
  flex-direction: column;
  gap:            7px;
}

/* Badge de categoría */
.news-badge {
  display:        inline-block;
  font-size:      0.67rem;
  font-weight:    700;
  padding:        3px 9px;
  border-radius:  99px;
  text-transform: uppercase;
  letter-spacing: .04em;
  width:          fit-content;
  text-decoration: none;
  transition:     opacity var(--transicion);
}
.news-badge:hover { opacity: 0.8; text-decoration: none; }

/* Título */
.news-card-tit {
  font-size:   1rem !important;
  font-weight: 700 !important;
  color:       var(--texto-default) !important;
  line-height: 1.35 !important;
  margin:      0 !important;
}
.news-card-tit a {
  color:           inherit;
  text-decoration: none;
}
.news-card-tit a:hover { color: var(--primary-main); }

.news-card-tit-sm {
  font-size:            0.88rem !important;
  -webkit-line-clamp:   2;
  display:              -webkit-box;
  -webkit-box-orient:   vertical;
  overflow:             hidden;
}

/* Excerpt */
.news-card-excerpt {
  font-size:   0.85rem;
  color:       var(--texto-suave);
  line-height: 1.6;
  margin:      0;
  display:     -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:    hidden;
}

/* Meta: fecha + vistas */
.news-card-meta {
  display:     flex;
  align-items: center;
  gap:         12px;
  font-size:   0.75rem;
  color:       var(--texto-suave);
  margin-top:  auto;
  flex-wrap:   wrap;
}
.news-card-meta i { font-size: 0.8rem; }
.news-vistas {
  display:     inline-flex;
  align-items: center;
  gap:         4px;
  color:       var(--primary-main);
  font-weight: 600;
}

/* ── Sin resultados ───────────────────────────────────────── */
.news-sin-resultados {
  text-align:  center;
  padding:     60px 20px;
  color:       var(--texto-suave);
}
.news-sin-resultados i {
  font-size:   2.5rem;
  display:     block;
  margin-bottom: 12px;
  opacity:     0.3;
}
.news-sin-resultados strong { display: block; margin-bottom: 8px; color: var(--texto-default); }
.news-sin-resultados a { color: var(--primary-main); }

/* ── Paginación ───────────────────────────────────────────── */
.news-paginacion {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             6px;
  margin-top:      28px;
  flex-wrap:       wrap;
}
.news-pag-btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       36px;
  height:          36px;
  padding:         0 10px;
  border-radius:   var(--radio);
  border:          1px solid var(--borde-suave);
  background:      var(--background-card);
  color:           var(--texto-suave);
  font-size:       0.85rem;
  font-weight:     600;
  text-decoration: none;
  transition:      all var(--transicion);
}
.news-pag-btn:hover {
  border-color:    var(--primary-main);
  color:           var(--primary-main);
  text-decoration: none;
}
.news-pag-btn.activo {
  background:   var(--primary-main);
  border-color: var(--primary-main);
  color:        #fff;
}
.news-pag-dots {
  font-size: 0.85rem;
  color:     var(--texto-suave);
  padding:   0 4px;
}

/* ════════════════════════════════════════════════════════════
   CONTADOR DE VISTAS — usado en single.php
   ════════════════════════════════════════════════════════════ */
.news-vistas-counter {
  display:     inline-flex;
  align-items: center;
  gap:         5px;
  font-size:   0.78rem;
  color:       var(--texto-suave);
}
.news-vistas-counter i { color: var(--primary-main); }

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 960px) {
  .news-layout {
    grid-template-columns: 1fr;
    padding: 24px 16px 40px;
    gap: 24px;
  }
  /* En tablet el sidebar va debajo del contenido */
  .news-sidebar {
    position: static;
    max-height: none;
    overflow-y: visible;
    order: 2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

@media (max-width: 600px) {
  .news-sidebar { grid-template-columns: 1fr; }
  .news-card    { grid-template-columns: 110px 1fr; }
  .news-card-img { min-height: 90px; }
  .news-card-img-dest { height: 160px; }
  .news-filtros-bar { flex-direction: column; align-items: stretch; }
  .news-busqueda { margin-left: 0; }
  .news-busqueda input { width: 100%; }
}