.norma {
    display: flex;
    align-items: stretch;
    gap: 1.15rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-sm);
    padding: 1.35rem 1.5rem;
    margin-bottom: 0.85rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}

#normas .norma {
    background-color: rgb(247 247 247 / 87%);
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.10'/%3E%3C/svg%3E");
    border-color: #9e9e9e69;
}
#normas .norma:hover { border-color: var(--marca); }
.norma-cuerpo {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.norma-portada {
    width: 3.75rem;
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
    align-self: flex-start;
    object-fit: cover;
    border: 1px solid var(--borde);
    border-radius: 3px;
    background: var(--fondo);
}
.norma:hover { border-color: var(--marca-borde); box-shadow: var(--sombra); }

/* El número arriba, el tipo debajo. Siempre.
 *
 * Era una fila que se partía sola cuando no cabía, así que en una tarjeta ancha
 * el número y el tipo salían juntos y en una estrecha --o con un número largo,
 * "N° D000351-2026-MIDAGRI-DM"-- se partían en dos. La misma sección enseñaba
 * las fichas de dos maneras según el sitio que hubiera.
 *
 * El salto lo fuerza .norma-tipo ocupando la fila entera, no un cambio a
 * columna: en columna, la chapa de "Emergencia" se iría a una tercera línea en
 * vez de quedarse al lado del número. */
.norma-cita {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 0.3rem;
    margin-bottom: 0.55rem;
}
.norma-numero {
    font-family: var(--mono);
    font-size: var(--t-xs);
    font-weight: 500;
    color: var(--marca);
    background: var(--marca-claro);
    padding: 0.2rem 0.55rem;
    border-radius: 999px;

    /* El TEXTO del número, a ras del título.
     *
     * La chapa lleva 0,55rem de relleno a la izquierda, así que con la caja
     * pegada al borde su texto empezaba medio centímetro más adentro que el
     * título, el ámbito y la fecha, que arrancan todos en el mismo punto. Se
     * tira de la chapa hacia fuera lo mismo que mete su relleno: la caja sobra
     * un poco por la izquierda --hay 1,5rem de margen de tarjeta donde
     * apoyarse-- y las cuatro líneas quedan alineadas. */
    margin-left: -0.55rem;
}
.norma-tipo {
    /* La fila entera: es lo que lo empuja siempre a la segunda línea. */
    flex: 0 0 100%;

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

/* Salvo que no haya número delante: entonces no hay nada que dejar arriba y
   bajarlo dejaría la primera línea vacía. */
.norma-tipo:first-child { flex: 0 1 auto; }

.norma-titulo {
    font-family: var(--sans);
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    line-height: 1.4;
    color: var(--tinta);
    margin: 0 0 0.7rem;
    max-width: 56rem;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.norma-ambito {
    display: inline-block;
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--tinta-media);
    margin: 0 0 0.2rem;
}
.norma-meta {
    font-family: var(--mono);
    font-size: var(--t-xs);
    color: var(--tinta-suave);
    margin: 0;
}

.acciones {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: 1rem;
}

.accion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--sans);
    font-size: var(--t-sm);
    font-weight: 600;
    line-height: 1.2;
    padding: 0.45rem 1rem;
    border-radius: 999px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    white-space: nowrap;
}

.accion-ver {
    color: #fff;
    background: var(--marca);
    border: 1.5px solid var(--marca);
}
.accion-ver:hover { background: var(--marca-hondo); border-color: var(--marca-hondo); }

.accion-compartir {
    background: none;
    border: 1.5px solid var(--borde-fuerte);
    color: var(--tinta-media);
}
.accion-compartir:hover { border-color: var(--marca); color: var(--marca); }

.accion:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }

.accion-sin-enlace {
    font-size: var(--t-sm);
    color: var(--tinta-tenue);
    font-style: italic;
}

.norma-emergencia { border-left: 4px solid var(--alerta); }

.share-wrapper { position: relative; display: inline-flex; }
/* Respecto a la VENTANA, no a la ficha.
 *
 * Colgando de la ficha, el menu lo recortaba el carrusel de Emergencia, que
 * lleva overflow-x: auto para desplazarse en horizontal y con eso recorta
 * tambien arriba y abajo. Por eso se abria hacia arriba: ahi caia sobre la
 * propia ficha, dentro de la caja. Abriendolo hacia abajo se cortaba.
 *
 * Fijo a la ventana se escapa de cualquier recorte. Las coordenadas las pone
 * el JS al abrirlo, que es quien sabe donde esta el boton en ese momento. */
.share-menu {
    display: none;
    position: fixed;
    background: var(--superficie);
    border: 1px solid var(--borde-fuerte);
    border-radius: var(--radio-sm);
    box-shadow: var(--sombra);
    padding: 0.3rem;
    z-index: 50;
    min-width: 9.5rem;
}
.share-menu.open { display: flex; flex-direction: column; }
.share-menu a {
    font-size: var(--t-sm);
    padding: 0.45rem 0.7rem;
    border-radius: var(--radio-sm);
    text-decoration: none;
    color: var(--tinta-media);
}
.share-menu a:hover { background: var(--marca-claro); color: var(--marca); }

.norma-portada-esq {
    width: 3.75rem;
    aspect-ratio: 3 / 4;
    flex-shrink: 0;
    align-self: flex-start;
    border-radius: var(--radio-sm);
    display: block;
}

.norma-boton-esq {
    display: inline-block;
    width: 9.5rem;
    height: 2rem;
    border-radius: var(--radio-sm);
}
.norma-boton-esq-corto { width: 2.4rem; }

@media (max-width: 640px) {
    .norma-portada-esq { width: 3rem; }
    .norma-boton-esq { width: 8rem; }
}