/* ============================================================
   NUNTARIS — nuntaris-resumen.css  |  Versión 1.5
   Página de resumen de noticias (general, deportes, etc.)
   Requiere: flag-icons CSS (cdn.jsdelivr.net)
============================================================ */

/* ── VARIABLES ─────────────────────────────────────────────────
   Modifica aquí colores y tamaños de fuente.
   Sin sufijo = móvil/tablet. Sufijo -lg = desktop (≥1024px).
──────────────────────────────────────────────────────────── */
:root {
  --ntr-acento:           #c00000;
  --ntr-acento-alt:       #990000;
  --ntr-texto-fuerte:     #1a1a1a;
  --ntr-texto-medio:      #454545;
  --ntr-texto-sutil:      #757575;
  --ntr-borde:            #e8e8e8;
  --ntr-fondo-pagina:     #ffffff;
  --ntr-fondo-tarjeta:    #f9f9f9;

  --fs-bloque-titulo:      24px;
  --fs-bloque-titulo-lg:   28px;
  --fs-bloque-subtitulo:   15px;
  --fs-bloque-fecha:       13px;

  --fs-card-titular:       16px;
  --fs-card-titular-lg:    22px;
  --fs-card-resumen:       14px;
  --fs-card-resumen-lg:    15px;
  --fs-card-footer:        13px;
  --fs-card-caption:       12px;

  --fs-rel-fuente:         13px;
  --fs-rel-badge:          12px;
  --fs-rel-titular:        14px;
  --fs-rel-titular-lg:     15px;
  --fs-rel-comentario:     13px;
  --fs-rel-comentario-lg:  14px;
  --fs-rel-fecha:          12px;
  --fs-rel-flag:           16px;

  --fs-det-cerrar:         16px;
  --fs-det-titular:        18px;
  --fs-det-resumen:        15px;
  --fs-det-seccion:        12px;

  --fs-ad-label:           12px;
}

/* ── CABECERA DE BLOQUE ────────────────────────────────────── */
.ntr-bloque-header {
  padding-bottom: 12px;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--ntr-borde);
}

.ntr-bloque-titulo {
  font-family: 'Playfair Display', serif;
  font-weight: 700;
  font-size: var(--fs-bloque-titulo);
  color: var(--ntr-texto-fuerte);
  line-height: 1.3;
  margin-bottom: 4px !important;
}

@media (min-width: 1024px) { .ntr-bloque-titulo { font-size: var(--fs-bloque-titulo-lg); } }

.ntr-bloque-subtitulo { font-size: var(--fs-bloque-subtitulo); color: var(--ntr-texto-medio); margin-bottom: 3px !important; }
.ntr-bloque-fecha     { font-size: var(--fs-bloque-fecha); color: var(--ntr-texto-sutil); margin: 0 !important; }

/* ── GRID ──────────────────────────────────────────────────── */
.ntr-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 768px)  { .ntr-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 1024px) { .ntr-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; } }

/* ── TARJETA BASE ──────────────────────────────────────────── */
.ntr-card {
  background: var(--ntr-fondo-tarjeta);
  border: 1px solid var(--ntr-borde);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ntr-card:hover { border-color: #d0d0d0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.ntr-card--sin-fuentes { cursor: default; }
.ntr-card--sin-fuentes:hover { border-color: var(--ntr-borde); box-shadow: none; }

/* ── TARJETA CON IMAGEN ────────────────────────────────────── */
.ntr-card--imagen { grid-column: 1 / -1; }
@media (min-width: 1024px) { .ntr-card--imagen { grid-column: span 2; } }

.ntr-card__inner { display: flex; flex-direction: column; flex: 1; }
@media (min-width: 768px) {
  .ntr-card--imagen .ntr-card__inner { flex-direction: row; align-items: stretch; }
}

.ntr-card__img {
  background: var(--ntr-fondo-tarjeta);
  padding: 8px 8px 0 8px;
  display: flex; flex-direction: column;
  align-items: stretch; justify-content: flex-start;
  overflow: hidden; min-height: 150px; flex-shrink: 0;
}

.ntr-card__img img { width: 100%; flex: 1; object-fit: cover; display: block; min-height: 0; }

@media (min-width: 768px) {
  .ntr-card--imagen .ntr-card__img {
    width: calc(50% - 10px);
    min-width: calc(50% - 10px);
    min-height: unset;
    align-self: stretch;
  }
}

.ntr-card__col { display: flex; flex-direction: column; flex: 1; }

.ntr-card__body {
  flex: 1; padding: 16px !important;
  display: flex; flex-direction: column; gap: 10px;
}

@media (min-width: 1024px) { .ntr-card__body { padding: 18px !important; } }

.ntr-card__titular {
  font-weight: 550;
  font-size: var(--fs-card-titular);
  color: var(--ntr-texto-fuerte);
  line-height: 1.4;
  margin: 0 !important;
}

@media (min-width: 1024px) { .ntr-card__titular { font-size: var(--fs-card-titular-lg); } }

.ntr-card__resumen {
  font-size: var(--fs-card-resumen);
  color: var(--ntr-texto-medio);
  line-height: 1.5; flex: 1;
  margin: 0 !important;
}

@media (min-width: 1024px) { .ntr-card__resumen { font-size: var(--fs-card-resumen-lg); } }

.ntr-card__caption {
  font-size: var(--fs-card-caption);
  color: var(--ntr-texto-sutil);
  padding: 5px 8px;
  flex-shrink: 0;
  margin: 0 !important;
}

.ntr-card__footer {
  display: flex; align-items: center; gap: 5px;
  padding: 8px 16px 12px !important;
  border-top: 1px solid var(--ntr-borde);
  margin-top: auto !important;
}

.ntr-card__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ntr-acento); flex-shrink: 0; }
.ntr-card__fuentes { font-size: var(--fs-card-footer); color: var(--ntr-texto-sutil); flex: 1; margin: 0 !important; }

/* ── PUBLICIDAD – CUADRÍCULA PRINCIPAL ─────────────────────── */
.ntr-ad__slot {
  overflow: hidden;
  width: 100%;
  flex-shrink: 0;
}

.ntr-card--ad-1col { cursor: default; }
.ntr-card--ad-1col:hover { border-color: var(--ntr-borde); box-shadow: none; }
.ntr-card--ad-1col .ntr-ad__slot { height: 250px; }

.ntr-card--ad-fila { cursor: default; grid-column: 1 / -1; }
.ntr-card--ad-fila:hover { border-color: var(--ntr-borde); box-shadow: none; }
.ntr-card--ad-fila .ntr-ad__slot { height: 120px; }

.ntr-ad__img { width: 100%; height: 100%; object-fit: cover; display: block; }

.ntr-ad__label {
  font-size: var(--fs-ad-label);
  color: var(--ntr-texto-sutil);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 5px 10px;
  text-align: center;
  border-top: 1px solid var(--ntr-borde);
  margin: 0 !important;
}

/* ── VISTAS Y TRANSICIÓN ───────────────────────────────────── */
.ntr-vista { display: none; }

@keyframes ntrEntrada {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ntr-vista--activa { display: block; animation: ntrEntrada 0.22s ease forwards; }

/* ── VISTA DE DETALLE — panel fijo sobre toda la pantalla ─── */
#vista-detalle {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 999;
  overflow-y: auto;
  background: var(--ntr-fondo-pagina);
  padding: 24px 0 64px;
  box-sizing: border-box;
}

@media (min-width: 768px)  { #vista-detalle { padding: 32px 0 64px; } }
@media (min-width: 1024px) { #vista-detalle { padding: 40px 0 64px; } }

/* ── BOTÓN CERRAR ──────────────────────────────────────────── */
.ntr-detalle__cerrar {
  position: fixed; top: 16px; right: 16px; z-index: 1000;
  display: inline-flex; align-items: center; gap: 5px;
  font-family: 'Roboto', sans-serif; font-weight: 500;
  font-size: var(--fs-det-cerrar);
  color: var(--ntr-acento);
  background: var(--ntr-fondo-pagina) !important; border: none; cursor: pointer;
  padding: 4px 8px; border-radius: 4px;
  margin: 0 !important;
}

.ntr-detalle__cerrar--oculto { display: none !important; }
.ntr-detalle__cerrar:hover { color: var(--ntr-acento-alt); background: var(--ntr-fondo-pagina) !important; }

.ntr-detalle__titular {
  font-weight: 700; font-size: 24px;
  color: var(--ntr-texto-fuerte); line-height: 1.4;
  margin-bottom: 10px !important;
}

.ntr-detalle__resumen {
  font-size: var(--fs-det-resumen); color: var(--ntr-texto-medio);
  line-height: 1.6; margin-bottom: 20px !important; padding-bottom: 16px;
  border-bottom: 1px solid var(--ntr-borde);
}

.ntr-detalle__seccion {
  font-size: var(--fs-det-seccion); color: var(--ntr-texto-sutil);
  text-transform: uppercase; letter-spacing: 0.07em;
  margin-bottom: 14px !important;
}

/* ── CONTENEDOR INTERIOR DEL DETALLE ──────────────────────── */
.ntr-detalle__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 768px)  { .ntr-detalle__inner { padding: 0 24px; } }
@media (min-width: 1024px) { .ntr-detalle__inner { padding: 0 40px; } }

/* ── TARJETAS DE TITULARES RELACIONADOS ────────────────────── */
.ntr-rel {
  background: var(--ntr-fondo-tarjeta);
  border: 1px solid var(--ntr-borde);
  border-radius: 8px;
  padding: 14px !important;
  display: flex; flex-direction: column; gap: 6px;
}

@media (min-width: 1024px) { .ntr-rel { padding: 16px !important; } }

.ntr-rel__header { display: flex; align-items: center; gap: 6px; margin: 0 !important; }

.ntr-rel__logo { width: 15px; height: 15px; object-fit: contain; border-radius: 2px; flex-shrink: 0; }

.ntr-rel__logo-fb {
  width: 15px; height: 15px; border-radius: 2px;
  background: var(--ntr-acento);
  display: flex; align-items: center; justify-content: center;
  font-size: 8px; color: #fff; font-weight: 500; flex-shrink: 0;
}

.ntr-rel__fuente {
  font-size: var(--fs-rel-fuente); font-weight: 500;
  color: var(--ntr-texto-medio); flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  margin: 0 !important;
}

.ntr-rel__badge { font-size: var(--fs-rel-badge); padding: 2px 6px !important; border-radius: 4px; font-weight: 500; flex-shrink: 0; margin: 0 !important; }
.ntr-rel__badge--libre { background: #eaf3de; color: #3B6D11; }
.ntr-rel__badge--pago  { background: #FCEBEB; color: #A32D2D; }

.ntr-rel__titular {
  font-size: var(--fs-rel-titular); font-weight: 550;
  color: var(--ntr-texto-fuerte); line-height: 1.4;
  text-decoration: none; display: block;
  margin: 0 !important;
}

.ntr-rel__titular:hover { color: var(--ntr-acento); }
@media (min-width: 1024px) { .ntr-rel__titular { font-size: var(--fs-rel-titular-lg); } }

.ntr-rel__comentario {
  font-size: var(--fs-rel-comentario); color: var(--ntr-texto-medio);
  line-height: 1.4; border-left: 2px solid var(--ntr-borde);
  padding-left: 7px; margin-top: 2px !important;
}

@media (min-width: 1024px) { .ntr-rel__comentario { font-size: var(--fs-rel-comentario-lg); } }

.ntr-rel__meta { display: flex; align-items: center; gap: 6px; margin-top: auto !important; padding-top: 8px; }

.ntr-rel__flag { font-size: var(--fs-rel-flag); border-radius: 2px; vertical-align: middle; flex-shrink: 0; margin: 0 !important; }

.ntr-rel__fecha { font-size: var(--fs-rel-fecha); color: var(--ntr-texto-sutil); margin-left: auto !important; }

/* Publicidad en relacionados: fila completa */
.ntr-rel--ad {
  background: var(--ntr-fondo-tarjeta); cursor: default;
  padding: 0 !important; grid-column: 1 / -1;
}
.ntr-rel--ad .ntr-ad__slot { height: 120px; }