/* ============================================================================
 * novedades.css — LA PANTALLA DE NOVEDADES del ecosistema iustitia.mx
 * ----------------------------------------------------------------------------
 * ORIGINAL: D:/Programacion/_branding/novedades/novedades.css
 *
 * Este archivo se COPIA a cada producto (`_branding/` no se despliega, y el
 * candado de seguridad de los sitios no deja cargar hojas de estilo desde otro
 * origen). El candado `_branding/check_novedades_unico.py` comprueba que las
 * copias sean idénticas byte por byte, igual que con `nav.css`.
 *
 * Prefijo `nv-` en TODAS las clases. Ninguna se llama como algo que ya exista
 * en los diez productos: `.card`, `.badge`, `.timeline` y `.entry` chocan en
 * más de uno.
 *
 * Colores: los tres del ecosistema (`--navy`, `--gold`, `--cream`), con su
 * valor por defecto pegado al lado para que la hoja funcione sola en el
 * producto que no los declare.
 *
 * VERSIÓN: 3  ← subir junto con la VERSION del sw.js de cada producto que la use.
 *   v3 (2026-08-17): misma pasada que nav.css v3. Los respaldos de `--line`,
 *   `--cream`, `--ink` y `--muted` estaban escritos con tonos que no eran los
 *   del patrón oro; el punto de «hay algo que no has leído» usaba un rojo
 *   distinto al del menú; la letra baja de 8 tamaños a los 4 de la escala
 *   (12 · 13 · 14 · 28 px), lo que además saca de pantalla la etiqueta de
 *   10.9 px; y la esquina de 12px pasa a los 10px del patrón oro. La regla que
 *   achicaba el título un 4% en celular se quitó: con la escala era el mismo
 *   tamaño que en escritorio.
 * ========================================================================== */

.nv-pagina {
  max-width: 780px;
  margin: 0 auto;
  padding: 0 0 3rem;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--navy, #0F2A4A);
}

.nv-h1 {
  font-family: 'Libre Baskerville', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--navy, #0F2A4A);
  margin: .4rem 0 .6rem;
}

.nv-intro {
  margin: 0 0 1.8rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--muted, #5A6474);
  text-align: justify;
}

/* ── Encabezado del mes ───────────────────────────────────────────────────── */
.nv-mes {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin: 2.2rem 0 1rem;
  font: 700 .8125rem/1 'Inter', system-ui, sans-serif;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: #8a93a0;
}
.nv-mes::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line, #E6DFD2);
}
.nv-grupo:first-child .nv-mes { margin-top: 0; }

/* ── Cada novedad ─────────────────────────────────────────────────────────── */
.nv-lista { list-style: none; margin: 0; padding: 0; }

.nv-item {
  position: relative;
  padding: 0 0 1.35rem 1.4rem;
  border-left: 2px solid var(--line, #E6DFD2);
}
.nv-item:last-child { border-left-color: transparent; padding-bottom: .4rem; }

/* El punto de la línea de tiempo. Va sobre el borde, no al lado. */
.nv-item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: .42rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold, #C9A86B);
  box-shadow: 0 0 0 3px var(--fondo-app, #fff);
}
.nv-item.nv-arreglo::before { background: #8a93a0; }

.nv-cab {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .55rem;
  margin-bottom: .3rem;
}

.nv-titulo {
  font: 600 1rem/1.35 'Inter', system-ui, sans-serif;
  color: var(--navy, #0F2A4A);
  margin: 0;
}

.nv-etiqueta {
  flex: none;
  padding: .12rem .5rem;
  border-radius: 999px;
  font: 700 .75rem/1.5 'Inter', system-ui, sans-serif;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--gold, #C9A86B);
  color: var(--ink, #1A1F2B);
}
.nv-etiqueta.nv-t-mejora  { background: var(--cream, #FAF7F2); color: var(--navy, #0F2A4A); border: 1px solid var(--line, #E6DFD2); }
.nv-etiqueta.nv-t-arreglo { background: #eef1f4; color: var(--muted, #5A6474); border: 1px solid var(--line, #E6DFD2); }

.nv-fecha {
  flex: none;
  margin-left: auto;
  font: 500 .75rem/1.5 'Inter', system-ui, sans-serif;
  color: #8a93a0;
  white-space: nowrap;
}

.nv-detalle {
  margin: 0;
  font-size: .875rem;
  line-height: 1.6;
  color: var(--muted, #5A6474);
  text-align: justify;
}

/* ── Cuando todavía no hay nada anotado ───────────────────────────────────── */
.nv-vacio {
  padding: 2.5rem 1.5rem;
  text-align: center;
  border: 1px dashed var(--line, #E6DFD2);
  border-radius: 10px;
  color: #8a93a0;
  font-size: 1rem;
  line-height: 1.6;
}

/* ── El punto del menú: «hay algo que no has leído» ───────────────────────── */
/* Se prende desde novedades_punto.js poniéndole el atributo al enlace. El
 * selector cuelga del atributo y no de una clase a propósito: así no hay forma
 * de que quede prendido por un `class` copiado a mano en una plantilla. */
.nv-aviso {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: .4rem;
  border-radius: 50%;
  background: #B4232A;
  flex: none;
  vertical-align: middle;
}

/* El mismo aviso, dicho con palabras para quien navega con lector de pantalla.
 * Se declara aquí y no se hereda de `nav.css` a propósito: hay productos que
 * cargan esta hoja y no aquélla, y un punto de color que nadie puede oír no
 * avisa a nadie. */
.nv-aviso-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Celular ──────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .nv-fecha { margin-left: 0; width: 100%; order: 3; }
  /* Columna angosta: justificar deja huecos feos con pocas palabras por línea. */
  .nv-intro, .nv-detalle { text-align: left; }
}

/* ── Fondo oscuro (la columna lateral de Directia, el modo oscuro de otros) ── */
@media (prefers-color-scheme: dark) {
  .nv-pagina.nv-auto-oscuro { color: #fff; }
  .nv-pagina.nv-auto-oscuro .nv-h1 { color: #fff; }
  .nv-pagina.nv-auto-oscuro .nv-titulo { color: #fff; }
  .nv-pagina.nv-auto-oscuro .nv-detalle { color: rgba(255,255,255,.78); }
  .nv-pagina.nv-auto-oscuro .nv-item { border-left-color: rgba(255,255,255,.18); }
  .nv-pagina.nv-auto-oscuro .nv-item::before { box-shadow: 0 0 0 3px var(--fondo-app, #16202e); }
  .nv-pagina.nv-auto-oscuro .nv-mes::after { background: rgba(255,255,255,.18); }
  .nv-pagina.nv-auto-oscuro .nv-etiqueta.nv-t-mejora { background: rgba(255,255,255,.10); color: #fff; border-color: rgba(255,255,255,.18); }
  .nv-pagina.nv-auto-oscuro .nv-etiqueta.nv-t-arreglo { background: rgba(255,255,255,.06); color: rgba(255,255,255,.72); border-color: rgba(255,255,255,.18); }
}