/* ============================================================
   NORMATIVA EMAPAAC EP
   Tarjetas de descarga de documentos

   Se carga DESPUÉS de custom-smart.css en ordenanzas.php.
   Todo va prefijado con .normativa-emapaac para no afectar
   ninguna otra página del sitio.
   ============================================================ */

.normativa-emapaac {

    /* Color institucional (tomado de color-blue-ep del tema) */
    --nrm-azul:        #1266a3;
    --nrm-azul-osc:    #0d4f7d;
    --nrm-azul-suave:  #eaf3fa;
    --nrm-rojo-pdf:    #d62828;

    --nrm-texto-tenue: #6b7a85;
    --nrm-borde:       #e3e9ee;
    --nrm-borde-hover: #cddfec;

    --nrm-e1:  4px;
    --nrm-e2:  8px;
    --nrm-e3: 12px;
    --nrm-e4: 16px;
    --nrm-e5: 24px;
    --nrm-e6: 32px;

    --nrm-radio: 8px;
    --nrm-sombra:      0 1px 2px rgba(16,42,66,.04),
                       0 4px 12px rgba(16,42,66,.06);
    --nrm-sombra-alta: 0 2px 4px rgba(16,42,66,.06),
                       0 12px 28px rgba(16,42,66,.12);

    display: block;
}


/* ------------------------------------------------------------
   NEUTRALIZAR ESTILOS DEL TEMA

   style.css pinta flechas antes de cada <li> (clase
   list-icon-arrow y reglas generales de lista). Sin esto,
   cada tarjeta saldría con una flecha azul delante.
   ------------------------------------------------------------ */

.normativa-emapaac ul.normativa-grid,
.normativa-emapaac ul.normativa-grid > li {
    list-style: none;
    list-style-image: none;
    margin: 0;
    padding: 0;
    text-indent: 0;
    background: none;
}

.normativa-emapaac ul.normativa-grid > li::before,
.normativa-emapaac ul.normativa-grid > li::after,
.normativa-emapaac ul.normativa-grid::before,
.normativa-emapaac ul.normativa-grid::after {
    content: none !important;
    display: none !important;
    background: none !important;
}

.normativa-emapaac ul.normativa-grid > li::marker {
    content: "";
}


/* ------------------------------------------------------------
   GRID

   Vive dentro de col-md-9 (~730px en escritorio), así que
   entran 3 columnas cómodas.
   ------------------------------------------------------------ */

.normativa-emapaac .normativa-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
    gap: var(--nrm-e4);
    align-items: stretch;

    margin: 0 0 var(--nrm-e6) !important;
}


/* ------------------------------------------------------------
   TARJETA
   ------------------------------------------------------------ */

.normativa-emapaac .normativa-card {
    display: flex;
    flex-direction: column;

    padding: var(--nrm-e5) var(--nrm-e4) !important;
    text-align: left;

    background: #ffffff;
    border: 1px solid var(--nrm-borde);
    border-radius: var(--nrm-radio);
    box-shadow: var(--nrm-sombra);

    transition: transform .2s ease,
                box-shadow .2s ease,
                border-color .2s ease;
}

.normativa-emapaac .normativa-card:hover {
    transform: translateY(-3px);
    border-color: var(--nrm-borde-hover);
    box-shadow: var(--nrm-sombra-alta);
}


/* Ícono PDF (SVG incrustado: no depende de Font Awesome) */
.normativa-emapaac .normativa-icono {
    display: block;
    width: 28px;
    height: 28px;
    margin-bottom: var(--nrm-e4);
    color: var(--nrm-rojo-pdf);
    fill: currentColor;
    flex: 0 0 auto;
}


/* Nombre del documento */
.normativa-emapaac .normativa-card h4 {
    margin: 0 0 var(--nrm-e2) !important;
    padding: 0;

    color: var(--nrm-azul);
    font-size: 15px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -.005em;
    text-transform: none;
}


/* Año: distingue normas con título parecido.

   align-self es obligatorio. En un contenedor flex en columna
   todo hijo recibe align-self:stretch, y la etiqueta saldría
   como una barra gris de lado a lado. */
.normativa-emapaac .normativa-anio {
    align-self: flex-start;
    width: auto;

    margin: 0 0 var(--nrm-e3);
    padding: 3px 8px;
    border-radius: 4px;

    background: var(--nrm-azul-suave);
    color: var(--nrm-azul);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    line-height: 1.4;
}


/* Descripción */
.normativa-emapaac .normativa-descripcion {
    margin: 0 0 var(--nrm-e5) !important;
    padding: 0;

    color: var(--nrm-texto-tenue);
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}


/* ------------------------------------------------------------
   BOTÓN
   ------------------------------------------------------------ */

.normativa-emapaac a.normativa-boton {
    /* Ancla el botón al pie: quedan todos alineados aunque
       las descripciones tengan distinto largo. */
    margin-top: auto;
    align-self: flex-start;

    display: inline-flex;
    align-items: center;
    gap: var(--nrm-e2);

    padding: 9px 15px;
    border: 0;
    border-radius: 6px;

    background: var(--nrm-azul);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .015em;
    line-height: 1;

    transition: background-color .2s ease, transform .12s ease;
}

/* El tema define color de enlace por estado; hay que cubrirlos
   todos o el texto del botón sale azul sobre azul. */
.normativa-emapaac a.normativa-boton,
.normativa-emapaac a.normativa-boton:link,
.normativa-emapaac a.normativa-boton:visited,
.normativa-emapaac a.normativa-boton:hover,
.normativa-emapaac a.normativa-boton:focus,
.normativa-emapaac a.normativa-boton:active {
    color: #ffffff;
    text-decoration: none;
}

.normativa-emapaac a.normativa-boton:hover,
.normativa-emapaac a.normativa-boton:focus-visible {
    background: var(--nrm-azul-osc);
}

.normativa-emapaac a.normativa-boton:active {
    transform: translateY(1px);
}

/* Foco visible para navegación con teclado */
.normativa-emapaac a.normativa-boton:focus-visible {
    outline: 2px solid var(--nrm-azul);
    outline-offset: 3px;
}

.normativa-emapaac .normativa-boton-icono {
    width: 14px;
    height: 14px;
    fill: currentColor;
    flex: 0 0 auto;
}


/* ------------------------------------------------------------
   RESPONSIVE

   En tablet el sidebar de Bootstrap 3 baja y la columna pasa a
   ancho completo: caben más tarjetas por fila.
   ------------------------------------------------------------ */

@media (max-width: 991px) {
    .normativa-emapaac .normativa-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}

@media (max-width: 600px) {

    .normativa-emapaac .normativa-grid {
        grid-template-columns: 1fr;
    }

    .normativa-emapaac .normativa-card {
        padding: var(--nrm-e4) !important;
    }

    .normativa-emapaac a.normativa-boton {
        align-self: stretch;
        justify-content: center;
    }
}


/* ------------------------------------------------------------
   PREFERENCIAS DEL USUARIO
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

    .normativa-emapaac .normativa-card,
    .normativa-emapaac a.normativa-boton {
        transition: none;
    }

    .normativa-emapaac .normativa-card:hover {
        transform: none;
    }
}


/* ------------------------------------------------------------
   IMPRESIÓN
   En papel el botón no sirve: se imprime la URL.
   ------------------------------------------------------------ */

@media print {

    .normativa-emapaac .normativa-card {
        break-inside: avoid;
        box-shadow: none;
    }

    .normativa-emapaac a.normativa-boton {
        background: none;
        color: var(--nrm-azul) !important;
        padding: 0;
    }

    .normativa-emapaac a.normativa-boton::after {
        content: " (" attr(href) ")";
        font-weight: 400;
        word-break: break-all;
    }
}