/* ============================================================
   Sección de noticias · Sitio institucional ITSC
   Línea gráfica compartida con los sistemas del Tec.

   Todas las clases van con el prefijo 'nt-' a propósito: esta hoja se
   carga en TODAS las páginas del sitio desde head.php, y el resto del
   sitio corre sobre Bootstrap 4 con estilos muy generales. Sin el
   prefijo, cualquier regla de aquí se le encimaría a otra página.
   ============================================================ */

.nt-seccion {
  --nt-azul:       #1b396a;
  --nt-azul-osc:   #142b50;
  --nt-azul-claro: #2c528e;
  --nt-azul-tenue: #eef2f8;
  --nt-gris-900:   #1f2937;
  --nt-gris-700:   #3f4a5a;
  --nt-gris-500:   #6b7684;
  --nt-gris-300:   #cbd2db;
  --nt-gris-200:   #e3e7ed;
  --nt-gris-100:   #f1f3f7;
  --nt-gris-50:    #f7f8fa;
  --nt-blanco:     #ffffff;
  --nt-radio:      10px;
  --nt-radio-s:    6px;
  --nt-sombra:     0 1px 2px rgba(27, 57, 106, .06), 0 4px 16px rgba(27, 57, 106, .06);

  padding: 34px 0 54px;
  color: var(--nt-gris-900);
}

/* ---------- Encabezado de la sección ---------- */
.nt-cabecera {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 16px;
  margin-bottom: 26px;
  border-bottom: 3px solid var(--nt-azul);
}
.nt-cabecera h1 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--nt-azul);
  line-height: 1.2;
}
.nt-cabecera p { margin: 4px 0 0; color: var(--nt-gris-500); font-size: .92rem; }

/* ---------- Buscador ---------- */
/* Sustituye al de DataTables, que filtraba en el navegador y para eso
   necesitaba que el servidor mandara las 139 notas completas --cuerpo
   incluido-- en cada carga de la página. */
.nt-buscador { display: flex; gap: 8px; align-items: center; }
.nt-buscador input[type=search] {
  width: 240px;
  max-width: 100%;
  padding: 9px 12px;
  font-size: .92rem;
  font-family: inherit;
  color: var(--nt-gris-900);
  background: var(--nt-blanco);
  border: 1px solid var(--nt-gris-300);
  border-radius: var(--nt-radio-s);
}
.nt-buscador input[type=search]:focus {
  outline: none;
  border-color: var(--nt-azul-claro);
  box-shadow: 0 0 0 3px rgba(44, 82, 142, .13);
}
.nt-boton {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 17px;
  font-family: inherit;
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.3;
  border: 1px solid var(--nt-azul);
  border-radius: var(--nt-radio-s);
  background: var(--nt-azul);
  color: var(--nt-blanco);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s, color .15s, border-color .15s;
}
.nt-boton:hover { background: var(--nt-azul-osc); border-color: var(--nt-azul-osc); color: var(--nt-blanco); text-decoration: none; }
.nt-boton-claro { background: var(--nt-blanco); color: var(--nt-azul); border-color: var(--nt-gris-300); }
.nt-boton-claro:hover { background: var(--nt-azul-tenue); color: var(--nt-azul); border-color: var(--nt-azul); }

/* ---------- Rejilla de notas ----------
   El listado anterior era una tabla de una sola columna: cada noticia
   ocupaba una fila con la imagen centrada, y en un teléfono había que
   bajar una pantalla completa por nota. */
.nt-rejilla {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 22px;
}

.nt-tarjeta {
  display: flex;
  flex-direction: column;
  background: var(--nt-blanco);
  border: 1px solid var(--nt-gris-200);
  border-radius: var(--nt-radio);
  box-shadow: var(--nt-sombra);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease;
}
.nt-tarjeta:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
  border-color: #c3d0e4;
  box-shadow: 0 2px 4px rgba(27, 57, 106, .08), 0 12px 28px rgba(27, 57, 106, .12);
}

/* ---------- La portada de cada tarjeta ----------

   Todas ocupan EXACTAMENTE el mismo cuadro, para que la rejilla quede
   pareja: las notas llegan con imágenes de todos los tamaños y sin esto
   cada tarjeta empieza su texto a una altura distinta.

   Dos decisiones que conviene no deshacer sin pensarlo:

   1. El cuadro es CUADRADO. De las portadas del acervo, 48 de 71 son
      cuadradas (1:1) y otras 21 andan en 1.19: un cuadro cuadrado es el
      que mejor le queda a casi todas.

   2. Se usa 'contain', no 'cover'. Con 'cover' la imagen se recorta para
      llenar el cuadro, y aquí las portadas son CARTELES: recortarlos
      parte el texto. Con el cuadro de 16/10 que había antes, la
      "Convocatoria BécALAS 2025-2026" salía con el año cortado a la
      mitad. Con 'contain' cabe entera y, si le sobra aire por algún
      lado, queda del color del fondo. */
.nt-tarjeta .nt-foto {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background: var(--nt-gris-50);
  border-bottom: 1px solid var(--nt-gris-200);
}
/* aspect-ratio no existe en navegadores viejos; ahí se cae a una altura
   fija, que es peor pero no rompe la maquetación. */
@supports not (aspect-ratio: 1) {
  .nt-tarjeta .nt-foto { height: 280px; }
  .nt-tarjeta .nt-sin-foto { height: 280px; }
}
.nt-tarjeta .nt-sin-foto {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: var(--nt-gris-50);
  border-bottom: 1px solid var(--nt-gris-200);
}

.nt-tarjeta .nt-texto { padding: 16px 18px 18px; display: flex; flex-direction: column; flex: 1 1 auto; }
.nt-tarjeta .nt-fecha {
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--nt-azul-claro);
  margin-bottom: 6px;
}
.nt-tarjeta h2 {
  font-size: 1.02rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--nt-azul);
  margin: 0 0 8px;
}
.nt-tarjeta .nt-resumen {
  font-size: .87rem;
  line-height: 1.55;
  color: var(--nt-gris-700);
  margin: 0 0 14px;
}
.nt-tarjeta .nt-leer {
  margin-top: auto;
  font-size: .84rem;
  font-weight: 600;
  color: var(--nt-azul-claro);
}
.nt-tarjeta:hover .nt-leer { text-decoration: underline; }

/* ---------- Sin resultados ---------- */
.nt-vacio {
  text-align: center;
  padding: 54px 20px;
  color: var(--nt-gris-500);
  background: var(--nt-blanco);
  border: 1px solid var(--nt-gris-200);
  border-radius: var(--nt-radio);
}

/* ---------- Paginación ---------- */
.nt-paginacion {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 30px;
}
.nt-paginacion a, .nt-paginacion .nt-actual, .nt-paginacion .nt-brinco {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border-radius: var(--nt-radio-s);
  font-size: .86rem;
  font-weight: 600;
}
.nt-paginacion a {
  color: var(--nt-gris-700);
  border: 1px solid var(--nt-gris-300);
  background: var(--nt-blanco);
  text-decoration: none;
}
.nt-paginacion a:hover { border-color: var(--nt-azul); color: var(--nt-azul); background: var(--nt-azul-tenue); text-decoration: none; }
.nt-paginacion .nt-actual { background: var(--nt-azul); color: var(--nt-blanco); border: 1px solid var(--nt-azul); }
.nt-paginacion .nt-brinco { color: var(--nt-gris-300); }

/* ============================================================
   Nota abierta
   ============================================================ */
.nt-nota { max-width: 100%; }
.nt-migas { font-size: .82rem; color: var(--nt-gris-500); margin-bottom: 14px; }
.nt-migas a { color: var(--nt-azul-claro); }

.nt-nota .nt-fecha-larga {
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--nt-azul-claro);
  margin-bottom: 8px;
}
.nt-nota h1 {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--nt-azul);
  margin: 0 0 18px;
}
/* La portada de la nota abierta.
   Mismo criterio que en las tarjetas: cuadro fijo y 'contain', para que
   todas las notas se lean igual de altas y ningún cartel salga cortado.
   El cuadro es un poco más ancho que alto porque aquí la imagen convive
   con el texto y un cuadrado empujaría la nota fuera de la pantalla. */
.nt-nota .nt-portada {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: contain;
  background: var(--nt-gris-50);
  border: 1px solid var(--nt-gris-200);
  border-radius: var(--nt-radio);
  margin-bottom: 24px;
}
@supports not (aspect-ratio: 1) {
  .nt-nota .nt-portada { max-height: 460px; }
}

/* ---------- Texto de la nota ----------
   Las mismas reglas que el panel usa en su editor y en su vista previa,
   para que lo que se escribe allá sea de veras lo que se lee aquí. */
.nt-prosa { color: var(--nt-gris-900); font-size: 1rem; line-height: 1.75; }
.nt-prosa > :first-child { margin-top: 0; }
.nt-prosa > :last-child { margin-bottom: 0; }
.nt-prosa p { margin: 0 0 1em; }
.nt-prosa h2 { font-size: 1.25rem; color: var(--nt-azul); margin: 1.6em 0 .5em; font-weight: 600; }
.nt-prosa h3 { font-size: 1.06rem; color: var(--nt-azul); margin: 1.5em 0 .45em; font-weight: 600; }
.nt-prosa ul, .nt-prosa ol { margin: 0 0 1em; padding-left: 1.5em; }
.nt-prosa li { margin-bottom: .35em; }
.nt-prosa a { color: var(--nt-azul-claro); text-decoration: underline; }
.nt-prosa img { max-width: 100%; height: auto; border-radius: var(--nt-radio-s); margin: .6em 0; }
.nt-prosa blockquote {
  margin: 1.3em 0;
  padding: .2em 0 .2em 1.1em;
  border-left: 3px solid #d3ddec;
  color: var(--nt-gris-700);
  font-style: italic;
}
.nt-prosa hr { border: none; border-top: 1px solid var(--nt-gris-200); margin: 1.8em 0; }
.nt-prosa table { width: 100%; border-collapse: collapse; font-size: .92rem; margin: 0 0 1em; }
.nt-prosa th, .nt-prosa td { border: 1px solid var(--nt-gris-200); padding: 9px 12px; text-align: left; }
.nt-prosa th { background: var(--nt-gris-50); font-weight: 600; }

/* Una tabla ancha dentro de la nota rueda en su propia caja: si no, es
   la página completa la que se desplaza de lado en el teléfono. */
.nt-prosa .nt-rueda, .nt-prosa table { display: block; overflow-x: auto; }

.nt-pie-nota {
  margin-top: 32px;
  padding-top: 18px;
  border-top: 1px solid var(--nt-gris-200);
}

/* ---------- Responsivo ---------- */
@media (max-width: 767px) {
  .nt-seccion { padding: 22px 0 40px; }
  .nt-cabecera h1 { font-size: 1.4rem; }
  .nt-buscador { width: 100%; }
  .nt-buscador input[type=search] { flex: 1 1 auto; width: auto; }
  .nt-rejilla { grid-template-columns: 1fr; gap: 18px; }
  .nt-nota h1 { font-size: 1.4rem; }
}