/* ---------------------------------------------------
    VISOR DE DOCUMENTOS Y LISTAS DE DOCUMENTOS · SEPGA
    Se carga después de style.css y main.css (index.php).
    Modal: vistas/visor/visor.php · lógica: «Visor de documentos» en index.php
    Medidas en px: la plantilla del panel (style.bundle.css) pone la raíz a 12-13 px
    y con rem los botones quedarían por debajo de 44 px.
----------------------------------------------------- */

:root {
    --sepga: #b15050;           /* color de marca: fondos con texto blanco (5,1:1) */
    --sepga-texto: #9a4040;     /* mismo granate, oscurecido para texto y bordes (6,6:1 sobre blanco) */
    --sepga-tinte: #f7eded;     /* fondo al pasar el ratón (5,7:1 con --sepga-texto) */
    --doc-texto: #222;
    --doc-secundario: #555;     /* 7,5:1 */
    --doc-borde: #e2e2e2;
}

/* ---------- lista de documentos (noticias, editoriales) ----------
   Una fila por documento: icono, nombre legible con formato y peso, y dos acciones
   (ver en el visor o descargar). */
.documentos-noticia {
    margin: 40px 0 32px;
}
.documentos-titulo {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--doc-texto);
}
.documentos-lista {
    display: grid;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.documento {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 12px 12px 12px 16px;
    border: 1px solid var(--doc-borde);
    border-radius: 6px;
    background: #fff;
    text-align: left;
}
.documento-icono {
    flex: none;
    width: 32px;
    font-size: 26px;
    line-height: 1;
    text-align: center;
    color: var(--sepga-texto);
}
.documento-texto {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-width: 0;
}
.documento-nombre {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--doc-texto);
    overflow-wrap: anywhere;
}
.documento-meta {
    font-size: 14px;
    color: var(--doc-secundario);
}
.documento-acciones {
    display: flex;
    flex: none;
    gap: 4px;
}
.documento-accion {
    display: inline-flex;
    font-size: 15px;
    align-items: center;
    gap: 6.4px;
    min-height: 44px;
    padding: 8px 12px;
    border-radius: 4px;
    font-weight: 700;
    color: var(--sepga-texto);
    text-decoration: none;
}
.documento-accion:hover,
.documento-accion:focus {
    color: var(--sepga-texto);
    background: var(--sepga-tinte);
    text-decoration: none;
}
.documento-accion:focus-visible,
.visor-modal .btn:focus-visible,
.visor-modal .close:focus-visible {
    outline: 2px solid var(--sepga-texto);
    outline-offset: 2px;
}
@media (max-width: 575.98px) {
    .documento {
        flex-wrap: wrap;
    }
    .documento-acciones {
        width: 100%;
        justify-content: flex-end;
        margin-top: -4px;
    }
}

/* acciones en una sola línea (documento de una página de contenido) */
.documento-acciones--linea {
    justify-content: flex-end;
    margin: 0 0 24px;
}
/* acceso directo al primer PDF de la noticia, bajo la fecha */
.documento-acciones--fecha {
    margin: -8px 0 16px -12px;
}

/* ---------- visor de documentos (modal) ---------- */
.visor-modal .modal-dialog {
    max-width: min(960px, calc(100vw - 16px));
}
.visor-titulo {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.35;
    color: var(--doc-texto);
    text-align: left;
    overflow-wrap: anywhere;
}
.visor-modal .modal-body {
    padding: 8px;
}
.visor-documento {
    width: 100%;
    height: min(calc(100vh - 192px), 780px);
    min-height: 288px;
}
.visor-documento iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.visor-imagen {
    display: block;
    max-width: 100%;
    max-height: 75vh;
    height: auto;
    margin: 0 auto;
}
.visor-audio {
    width: 100%;
}
.visor-aviso {
    margin: 24px 16px;
    font-size: 16px;
    text-align: center;
    color: var(--doc-texto);
}
/* la plantilla del panel (style.bundle.css) da otro aspecto a cabeceras y botones de modal:
   el visor usa el suyo, claro y con botones de 44 px */
.visor-modal .modal-header {
    align-items: center;
    padding: 12px 12px 12px 16px;
    background: #fff;
    border-bottom: 1px solid var(--doc-borde);
}
.visor-modal .modal-header .close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin: -8px -4px -8px 8px;
    padding: 0;
    background: transparent;
    border: 0;
    color: var(--doc-texto);
    font-size: 28px;
    opacity: 0.75;
}
.visor-modal .modal-header .close:hover {
    opacity: 1;
}
/* style.bundle.css oculta el span de la × en los modales (usa su propia fuente de iconos) */
.visor-modal .modal-header .close > span {
    display: inline;
    line-height: 1;
}
.visor-modal .modal-footer {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    border-top: 1px solid var(--doc-borde);
}
.visor-modal .modal-footer > * {
    margin: 0;
}
.visor-modal .visor-acciones .btn {
    display: inline-flex;
    align-items: center;
    gap: 6.4px;
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
}
.visor-modal .visor-acciones .btn-link {
    margin-right: auto;
    background: transparent;
    color: var(--sepga-texto);
}
.visor-modal .visor-acciones .btn-outline-secondary {
    background: #fff;
    border-color: var(--sepga-texto);
    color: var(--sepga-texto);
}
.visor-modal .visor-acciones .btn-primary {
    background: var(--sepga);
    border-color: var(--sepga);
    color: #fff;
}
.visor-modal .visor-acciones .btn-link:hover,
.visor-modal .visor-acciones .btn-outline-secondary:hover {
    background: var(--sepga-tinte);
    color: var(--sepga-texto);
}
.visor-modal .visor-acciones .btn-primary:hover {
    background: var(--sepga-texto);
    border-color: var(--sepga-texto);
    color: #fff;
}
@media (max-width: 575.98px) {
    .visor-modal .visor-acciones .btn-link {
        width: 100%;
        justify-content: center;
    }
    /* en el móvil el título ocupa varias líneas y los botones dos filas:
       el documento deja sitio para que todo quepa sin desplazar la ventana */
    .visor-modal .modal-dialog {
        margin: 8px auto;
        min-height: calc(100% - 16px);
    }
    .visor-documento {
        height: calc(100vh - 300px);
        height: calc(100dvh - 300px);
        min-height: 240px;
    }
}