/* ══════════════════════════════════════════════════════════════════════
   ContextLex MX · Página pública «Leyes» (/leyes)
   Capa de página sobre el sistema visual «Expediente» (apps/account/static/account.css).

   Los tokens y componentes base (tokens :root, tipografía, .btn, .chip,
   .sello, .notice, .vacio, cabecera, pie, skip link) vienen de
   /assets/account.css y NO se repiten aquí. Este archivo sólo añade lo
   que esta página necesita.

   Adaptación del contrato del diseñador (leyes-page.css): se retiran las
   bandas de revisión («Datos de ejemplo» / «Variante A») que no van al
   producto. La página sirve la variante A (tabla); el bloque de fichas de
   la variante B se conserva para el cambio documentado en el diseño.

   Reglas duras del portal que esta capa respeta:
   · CSP style-src 'self' → sin <style> embebido ni atributos style="".
     Todo el estilo vive en este archivo.
   · Sin JavaScript: búsqueda, filtros y paginación son un formulario GET y
     enlaces; el servidor resuelve y re-renderiza.
   · Sin dependencias nuevas: fuentes del sistema, sin @import, sin url().

   Orden: 0 tokens de página · 1 encabezado · 2 resumen · 3 barra
   (búsqueda + filtros) · 3b secciones por jurisdicción · 4 metadatos de
   lista · 5 leyenda · 6 tabla (variante A) · 7 fichas (variante B) ·
   8 paginación · 9 responsive · 10 impresión.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 0. Tokens de página (delta sobre account.css) ───────────────────── */
:root {
  --leyes-hover: #F6F1E7;        /* realce de fila */
  --leyes-nueva-bg: #F7EFEF;     /* fondo del chip «Nueva» (reservado) */
  --leyes-nueva-line: #D9C2C6;   /* borde del chip «Nueva» (reservado) */
}

/* ── 1. Encabezado de la página ──────────────────────────────────────── */
.leyes-cabeza { margin-top: var(--s6); }
.leyes-cabeza h1 { margin-top: 0; }
.leyes-cabeza .lead { max-width: 68ch; }
.leyes-corte {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3);
  margin: var(--s4) 0 0; color: var(--muted); font-size: 14.5px;
}
.leyes-corte b { color: var(--ink); font-weight: 600; }
.leyes-corte .sep { color: var(--line-strong); }

/* ── 2. Resumen del catálogo ─────────────────────────────────────────── */
.sello .cifras {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s7);
  margin: var(--s2) 0 var(--s3);
}
.cifra-bloque { display: grid; gap: 2px; align-content: start; }
.cifra-bloque .cifra { font-variant-numeric: tabular-nums; }
.cifra-pie { font-size: 13px; color: var(--muted); }

/* ── 3. Barra: búsqueda + filtros ────────────────────────────────────── */
.leyes-barra { display: grid; gap: var(--s4); margin-top: var(--s6); }
.buscador {
  display: flex; align-items: stretch; gap: var(--s2);
  max-width: none; margin: 0;
}
.buscador input[type="search"] { flex: 1 1 auto; min-width: 0; max-width: 560px; }
.buscador .btn { flex: 0 0 auto; }

.filtros { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.filtros .rotulo {
  font: 600 11px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-right: var(--s1);
}
.filtro {
  display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  min-height: 36px; padding: 9px 13px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink);
  font: 600 12.5px/1 var(--font-ui); text-decoration: none;
}
.filtro:hover { border-color: var(--ink); }
.filtro .n { color: var(--muted); font-variant-numeric: tabular-nums; }
.filtro[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.filtro[aria-current="true"] .n { color: #CBBFA9; }

/* Selector de entidades federativas (vista estatal): la lista fija de 32
   entidades; las que no tienen leyes publicadas se muestran con 0 y la
   leyenda «en preparación», nunca ocultas. */
.entidades { align-items: flex-start; }
.entidades .filtro { border-radius: 10px; }
.entidades .prep { color: var(--muted); font: italic 500 11px/1 var(--font-ui); }
.entidades .filtro[aria-current="true"] .prep { color: #CBBFA9; }

/* ── 3b. Secciones por jurisdicción (federal / entidad federativa) ───── */
.leyes-seccion { margin-top: var(--s6); }
.leyes-seccion-titulo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--s3);
  margin: 0; font-size: 20px;
}
.leyes-seccion-titulo .seccion-clave {
  background: none; border: 0; padding: 0; font-size: 12.5px; color: var(--muted);
}
.leyes-seccion-titulo .seccion-n {
  margin-left: auto; font-size: 13.5px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}

/* ── 4. Metadatos de la lista (conteo + orden) ───────────────────────── */
.lista-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--s2) var(--s5); margin-top: var(--s6); padding-bottom: var(--s2);
  border-bottom: 1px solid var(--line-strong);
  color: var(--muted); font-size: 14px;
}
.lista-meta b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.orden { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--s3); }
.orden .rotulo-orden { font: 600 11px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.orden a { color: var(--primary); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 1px; }
.orden a:hover { border-bottom-color: currentColor; }
.orden a[aria-current="true"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--line-strong); }

/* ── 5. Leyenda (cómo leer estados y fechas) ─────────────────────────── */
details.leyenda {
  margin-top: var(--s5); border: 1px solid var(--line); border-radius: var(--r);
  background: #FDFCF9; padding: var(--s3) var(--s5);
}
details.leyenda summary {
  display: flex; align-items: center; gap: var(--s2); min-height: 32px;
  cursor: pointer; font: 600 14px/1.4 var(--font-ui); color: var(--primary);
}
details.leyenda summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.leyenda-cuerpo {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5); padding: var(--s2) 0 var(--s3);
}
.leyenda-grupo h3 {
  margin: 0 0 var(--s2); font: 600 11px/1.3 var(--font-ui);
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.leyenda-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s2); }
.leyenda-lista li { font-size: 13.5px; color: var(--muted); }
.leyenda-lista .chip { margin-right: 5px; vertical-align: -3px; }
.leyenda-cuerpo p { margin: 0 0 var(--s2); font-size: 13.5px; color: var(--muted); }
.leyenda-cuerpo p:last-child { margin-bottom: 0; }
.leyenda-cuerpo strong { color: var(--ink); font-weight: 600; }
.leyenda-cuerpo code { font-size: 12.5px; }
/* Antigüedad > 1 año. Doble clase: debe ganarle a «.hace» y «.ficha-frescura .hace». */
.hace-vieja, .hace.hace-vieja { color: var(--warn); font-weight: 600; }

/* Chip «Nueva»: variante propia del diseño (los otros tres vienen de account.css).
   Reservado: la página no lo deriva porque no hay señal real en el payload. */
.chip-nueva { color: var(--primary); border-color: var(--leyes-nueva-line); background: var(--leyes-nueva-bg); }
.chip-nueva .dot { background: var(--primary); }

/* ── 6. Variante A · tabla de leyes ──────────────────────────────────── */
.tabla-leyes { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: var(--s4); }
.tabla-leyes caption {          /* el título de la tabla es para lectores de pantalla */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tabla-leyes col.col-ley { width: 31%; }
.tabla-leyes col.col-act { width: 15%; }
.tabla-leyes col.col-estado { width: 16%; }
.tabla-leyes col.col-num { width: 8%; }
.tabla-leyes col.col-proc { width: 22%; }
.tabla-leyes th {
  position: sticky; top: 0; z-index: 1;
  background: var(--paper); padding: 10px var(--s3);
  border-bottom: 1px solid var(--line-strong);
  text-align: left; white-space: nowrap;
  font: 600 11px/1.3 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.tabla-leyes th.num { text-align: right; }
.tabla-leyes td { padding: var(--s3); border-bottom: 1px solid var(--line); vertical-align: top; font-size: 15px; }
.tabla-leyes tbody tr:hover { background: var(--leyes-hover); }
.tabla-leyes .dato { display: block; min-width: 0; }
.tabla-leyes .num { text-align: right; font-variant-numeric: tabular-nums; }

/* celda «Ley» */
.ley-nombre { font: 600 15.5px/1.35 var(--font-ui); color: var(--ink); text-decoration: none; }
.ley-nombre:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.ley-clave { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.ley-clave code { background: none; border: 0; padding: 0; font-size: 12px; color: var(--muted); }

/* celda «Actualizada» */
.c-act time { display: block; font-weight: 600; font-variant-numeric: tabular-nums; }
.hace { display: block; margin-top: 2px; font-size: 12.5px; color: var(--muted); }

/* celda «Estado» */
.c-estado .chequeo { display: block; margin-top: 5px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* celda «Procedencia» */
.c-proc .fuente { font-size: 14px; color: var(--primary); text-decoration: none; border-bottom: 1px solid var(--line-strong); }
.c-proc .fuente:hover { border-bottom-color: var(--primary); }
.c-proc .hash { display: block; margin-top: 5px; }

/* ── 7. Variante B · fichas con la señal de frescura a la derecha ────── */
.fichas { list-style: none; margin: var(--s4) 0 0; padding: 0; }
li.ficha {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, auto);
  grid-template-areas: "titulo frescura" "datos frescura";
  align-items: start;
  gap: var(--s2) var(--s6);
  padding: var(--s5) var(--s3);
  border-bottom: 1px solid var(--line);
}
li.ficha:first-child { border-top: 1px solid var(--line); }
li.ficha:hover { background: var(--leyes-hover); }
.ficha-titulo { grid-area: titulo; }
.ficha-datos { grid-area: datos; }
.ficha-frescura { grid-area: frescura; display: grid; gap: 6px; justify-items: end; text-align: right; }
.ficha-nombre { margin: 0; font: 500 19px/1.25 var(--font-serif); letter-spacing: -0.005em; }
.ficha-nombre a { color: var(--ink); text-decoration: none; }
.ficha-nombre a:hover { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.ficha-clave { margin: 6px 0 0; font-size: 12.5px; color: var(--muted); }
.ficha-clave code { font-size: 12px; background: none; border: 0; padding: 0; color: var(--muted); }
.ficha-datos { display: flex; flex-wrap: wrap; gap: 4px var(--s6); margin: var(--s4) 0 0; }
.ficha-datos > div { display: flex; align-items: baseline; gap: 6px; }
.ficha-datos dt {
  font: 600 10.5px/1.4 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.ficha-datos dd { margin: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.ficha-frescura .fecha { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end; gap: 4px var(--s2); margin: 0; font-size: 14.5px; }
.ficha-frescura .fecha time { font-weight: 600; font-variant-numeric: tabular-nums; }
.ficha-frescura .hace { display: inline; margin: 0; font-size: 13px; }
.rot-micro {
  font: 600 10.5px/1 var(--font-ui); letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted);
}

/* ── 8. Paginación ───────────────────────────────────────────────────── */
.paginacion {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s3) var(--s5); margin-top: var(--s5); padding-top: var(--s4);
  border-top: 1px solid var(--line-strong);
}
.paginacion .conteo { margin: 0; font-size: 14px; color: var(--muted); }
.paginacion .conteo b { color: var(--ink); font-variant-numeric: tabular-nums; }
.paginacion-botones { display: flex; gap: var(--s2); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }

/* ── 9. Responsive ───────────────────────────────────────────────────── */
@media screen and (max-width: 900px) {
  .leyenda-cuerpo { grid-template-columns: 1fr; gap: var(--s4); }
}

@media screen and (max-width: 720px) {
  .buscador { flex-wrap: wrap; }
  .buscador input[type="search"] { flex: 1 1 100%; max-width: none; }
  .buscador .btn { flex: 1 1 auto; }

  /* la tabla se degrada a fichas apiladas; el encabezado queda para lectores
     de pantalla y cada celda muestra su propia etiqueta */
  .tabla-leyes { display: block; border: 0; }
  .tabla-leyes colgroup { display: none; }
  .tabla-leyes thead {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
  }
  .tabla-leyes tbody, .tabla-leyes tr, .tabla-leyes td { display: block; }
  .tabla-leyes tr {
    border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
    padding: var(--s4); margin-top: var(--s3);
  }
  .tabla-leyes tbody tr:hover { background: var(--surface); }
  .tabla-leyes td { border: 0; padding: 0; }
  .tabla-leyes .c-ley { padding-bottom: var(--s2); border-bottom: 1px dashed var(--line); }
  .tabla-leyes td + td { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s4); padding-top: 6px; }
  .tabla-leyes td + td::before {
    content: attr(data-label); flex: 0 0 auto;
    font: 600 10.5px/1.4 var(--font-ui); letter-spacing: .12em; text-transform: uppercase;
    color: var(--muted);
  }
  .tabla-leyes td + td .dato {
    display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: flex-end;
    gap: 2px var(--s2);
  }
  .tabla-leyes .c-act time, .tabla-leyes .hace, .tabla-leyes .chequeo { display: inline; margin: 0; }

  li.ficha {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "titulo" "frescura" "datos";
    gap: var(--s3);
    padding: var(--s4) var(--s2);
  }
  .ficha-frescura { justify-items: start; text-align: left; }
  .ficha-frescura .fecha { justify-content: flex-start; }

  .lista-meta { margin-top: var(--s5); }
}

/* ── 10. Impresión (la tabla es el formato útil en papel) ────────────── */
@media print {
  .skip, .leyes-barra, details.leyenda, .paginacion,
  header.site nav.main, .orden { display: none !important; }
  body { background: #fff; font-size: 11.5pt; }
  .tabla-leyes th { position: static; }
  .tabla-leyes td, .tabla-leyes th { padding: 5px 6px; }
  .tabla-leyes tbody tr:hover { background: none; }
  .sello { break-inside: avoid; }
}