.normas-rejilla {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
}
.normas-rejilla .norma {
    margin-bottom: 0;
    height: 100%;
    padding: 1.15rem 1.25rem;
    gap: 0.9rem;
}
.normas-rejilla .norma-portada { width: 3rem; }

.normas-rejilla .norma-titulo {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.normas-rejilla .vacio { grid-column: 1 / -1; }

@media (max-width: 1100px) {
    .normas-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
    .normas-rejilla { grid-template-columns: 1fr; }
}
.normas-barra {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.normas-recuento { font-size: var(--t-sm); color: var(--tinta-suave); margin: 0; }
.normas-recuento .dato { color: var(--tinta); font-weight: 500; }

.dispositivo-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.dispositivo-tag {
    font-family: var(--sans); font-size: var(--t-xs); font-weight: 500;
    letter-spacing: 0.02em;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--borde-fuerte); border-radius: var(--radio-sm);
    background: var(--superficie); color: var(--tinta-media);
    cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.dispositivo-tag:hover { border-color: var(--tinta); color: var(--tinta); }
.dispositivo-tag.active { background: var(--tinta); border-color: var(--tinta); color: var(--superficie); }

.dispositivo-select { display: none; }

@media (max-width: 760px) {
    .dispositivo-tags { display: none; }
    .dispositivo-select {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
        min-width: 0;
        flex: 1 1 100%;
    }
    .dispositivo-select-et {
        font-size: 0.5625rem;
        font-weight: 600;
        letter-spacing: 0.03em;
        text-transform: uppercase;
        color: var(--tinta-suave);
    }
    .dispositivo-select .selector-campo {
        height: 2.25rem;
        font-size: var(--t-sm);
        padding: 0 0.5rem;
        border: 1px solid var(--borde-fuerte);
        background: var(--superficie);
        color: var(--tinta);
    }
    .dispositivo-select .selector-campo:hover { border-color: var(--tinta); }
}

.normas-descargas {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-left: auto;
}
.normas-descargas-et {
    font-size: var(--t-xs);
    color: var(--tinta-tenue);
    margin-right: 0.15rem;
}
.normas-descarga {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    color: var(--tinta-media);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.normas-descarga:hover {
    color: var(--marca);
    border-color: var(--marca-borde);
    background: var(--marca-claro);
}

@media (max-width: 640px) {
    .normas-descargas { margin-left: 0; width: 100%; }
}

.normas-vistas {
    display: inline-flex;
    gap: 2px;
    padding: 3px;
    background: var(--fondo);
    border: 1px solid var(--borde);
    border-radius: 999px;
}
.normas-vista {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--sans);
    font-size: var(--t-xs);
    font-weight: 600;
    padding: 0.25rem 0.7rem;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--tinta-suave);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}
.normas-vista:hover { color: var(--tinta); }
.normas-vista.active { background: var(--tinta); color: var(--superficie); }
.normas-vista i { font-size: 0.7rem; }

.normas-listado { display: block; }
.normas-tabla-marco {
    overflow-x: auto;
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    background: var(--superficie);
}
.normas-tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--t-sm);
    table-layout: fixed;
    min-width: 46rem;
}
.normas-tabla th {
    text-align: left;
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--tinta-tenue);
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--borde);
    background: var(--fondo);
    position: sticky;
    top: 0;
    z-index: 1;
}
.normas-tabla td {
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--borde);

    /* Centrado vertical.
       La sumilla ocupa dos o tres lineas y las demas celdas una, asi que con
       alineacion arriba la fecha, el tipo y el boton quedaban pegados al borde
       superior y la fila se leia torcida. Centradas, cada dato queda a la
       altura del bloque de texto que acompaña. */
    vertical-align: middle;
    color: var(--tinta-media);
}
.normas-tabla tbody tr:last-child td { border-bottom: none; }
.normas-tabla tbody tr:hover { background: var(--fondo); }

/* ---- Los anchos: en el COLGROUP, no en las celdas ----
 *
 * Aqui estuvo el fallo que costo varias vueltas. Con table-layout: fixed el
 * navegador reparte las columnas mirando UNA sola fila --la primera-- y esa
 * fila es la cabecera. Los width vivian en los .normas-td-*, es decir en el
 * cuerpo, donde nadie los lee: el navegador no encontraba ni un ancho, repartia
 * las cinco columnas a partes iguales y la sumilla acababa midiendo lo mismo
 * que la celda del boton "Ver". Estrechar las otras columnas no cambiaba nada,
 * porque el problema no era cuanto pedian sino que no se les hacia caso.
 *
 * El <colgroup> es la forma de decirlo una vez y para toda la tabla, sin
 * depender de que la primera fila sea la cabecera ni de repetirlo en el
 * esqueleto de carga.
 *
 * Los anchos: fecha, "6 sep 2026" en mono, no da mas de si. Tipo, "Resolucion
 * Ministerial" es el mas largo y envuelve en dos lineas sin molestar. Nombre,
 * el mas ancho de los fijos: lleva el nombre completo de la norma con su numero
 * --"Decreto Supremo N° 155-2026-EF"-- y ese dato va entero, partiendo en dos
 * lineas si hace falta, nunca cortado. Ver, lo justo para el boton.
 *
 * La sumilla NO lleva ancho: en fixed, las columnas sin declarar se reparten lo
 * que sobra, y como es la unica, se lo lleva todo -- unas 47rem de las 74 de la
 * tabla, en vez de las 14.8 de antes. */
.normas-col-fecha   { width: 6.25rem; }
.normas-col-tipo    { width: 7.5rem; }
.normas-col-nombre  { width: 13rem; }
.normas-col-ver     { width: 4rem; }

/* Y las celdas, solo con lo que no es ancho. */
.normas-td-fecha  { font-family: var(--mono); font-size: var(--t-xs); color: var(--tinta-tenue); }

/* El nombre de la norma, entero.
   Sin ellipsis y sin nowrap a proposito: aqui va el numero con el que se cita
   la norma, y cortarlo --"Decreto Supremo N° 155-2026…"-- deja un dato
   inservible. Lo que no cabe de ancho baja de linea.

   overflow-wrap por si un numero largo no encuentra donde partir: antes que
   desbordar sobre la sumilla, parte por donde sea. */
.normas-td-titulo {
    font-family: var(--mono);
    font-size: var(--t-xs);
    color: var(--tinta-tenue);
    overflow-wrap: anywhere;
}

.normas-td-sumilla { color: var(--tinta); }
.normas-td-sin    { color: var(--tinta-tenue); }
/* El relleno lateral de la ultima columna, recortado: 0.85rem a cada lado para
   un boton de tres letras era mas margen que contenido, y ese hueco se lo lleva
   la sumilla. */
.normas-td-fuente {
    padding-left: 0.25rem;
    padding-right: 0.5rem;
    white-space: nowrap;
    text-align: right;
}

/* "Ver" como boton y no como enlace suelto.
   En una tabla de filas largas, dos palabras subrayadas al final se pierden;
   un boton se ve de un vistazo y ademas da una diana mas grande que el texto,
   que en tactil importa. */
.normas-btn-ver {
    display: inline-block;
    padding: 0.25rem 0.55rem;
    min-height: 1.6rem;
    font-family: var(--sans);
    font-size: var(--t-xs);
    font-weight: 600;
    line-height: 1.4;
    color: var(--marca);
    background: var(--superficie, #fff);
    border: 1px solid var(--marca-borde);
    border-radius: 999px;
    text-decoration: none;
    white-space: nowrap;
}

.normas-btn-ver:hover,
.normas-btn-ver:focus-visible {
    color: #fff;
    background: var(--marca);
    border-color: var(--marca);
}

.normas-tr-emergencia td:first-child { box-shadow: inset 3px 0 0 var(--marca); }

.normas-th-oculto {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .normas-vistas { margin-left: 0; }
    .normas-vista span { display: none; }
    .normas-vista { padding: 0.3rem 0.6rem; }
}

/* ---- La sumilla en pantalla estrecha ----

   Dos lineas como mucho, y lo que sobra con puntos suspensivos.

   Se recorta por LINEAS y no por caracteres --antes se cortaba a 180 en el
   JS-- porque el numero de caracteres que caben depende del ancho real: en un
   movil 180 son seis lineas y en escritorio una y media. Contando lineas, el
   recorte es el mismo en todas partes: dos.

   El texto entero sigue en el title de la celda, asi que no se pierde. */
@media (max-width: 720px) {
    .normas-sumilla-txt {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ---------- el buscador ---------- */

/* Va el primero de la barra y ocupa lo que sobre: es lo que mas se usa de todo
   lo que hay ahi, y un campo estrecho en el que no cabe "RESOLUCION MINISTERIAL"
   invita a no escribir. */
.normas-buscar {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    flex: 1 1 14rem;
    min-width: 11rem;
}

.normas-buscar-et {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--tinta-suave);
}

.normas-buscar-campo {
    font-family: var(--sans);
    font-size: var(--t-sm);
    color: var(--tinta);
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    padding: 0.45rem 0.7rem;
    width: 100%;
}

.normas-buscar-campo:focus-visible {
    outline: 2px solid var(--marca);
    outline-offset: 1px;
    border-color: var(--marca);
}

.normas-buscar-campo::placeholder { color: var(--tinta-suave); }