/*
 * assets/css/pages/transparencia.css
 * Estilos exclusivos del micrositio de Transparencia.
 *
 * Criterio visual AGEJ v7:
 * - Escala de grises elegante.
 * - Sin botones azules.
 * - Hero institucional con imagen y overlay oscuro.
 * - Componentes sobrios, blancos, bordes suaves y sombras ligeras.
 */

/* CONTENEDOR GENERAL DE LA PÁGINA */
.transparencia-page{
    background:var(--agej-bg);
    color:var(--agej-text);
}

/* HERO: conserva el patrón global .page-hero y solo ajusta detalles locales. */
.transparencia-hero .agej-breadcrumb{
    display:flex;
    gap:8px;
    align-items:center;
    flex-wrap:wrap;
    color:rgba(255,255,255,.74);
    font-size:.88rem;
    margin-bottom:16px;
}

.transparencia-hero .agej-breadcrumb a{
    color:rgba(255,255,255,.88)!important;
    font-weight:700;
}

/* NAVEGACIÓN INTERNA */
.transparency-anchor{
    position:sticky;
    top:0;
    z-index:20;
    background:rgba(244,245,247,.94);
    border-bottom:1px solid var(--agej-line);
    backdrop-filter:blur(10px);
}

.transparency-anchor__inner{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    padding:14px 0;
}

.transparency-anchor a{
    display:inline-flex;
    align-items:center;
    min-height:38px;
    padding:0 15px;
    border:1px solid var(--agej-line);
    border-radius:999px;
    background:#fff;
    color:#30363c;
    font-size:.9rem;
    font-weight:700;
    text-decoration:none;
    transition:background .2s ease, transform .2s ease, border-color .2s ease;
}

.transparency-anchor a:hover{
    background:#eef0f3;
    border-color:#cfd5dc;
    transform:translateY(-1px);
}

/* BLOQUE INTRODUCTORIO */
.transparency-intro{
    background:var(--agej-bg);
}

/* SECCIÓN DEL ÁRBOL DOCUMENTAL */
.transparency-tree-section{
    background:#eef0f3;
}

.transparency-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:20px;
    margin-bottom:24px;
}

/* BARRA DE BÚSQUEDA Y ACCIONES */
.transparency-toolbar{
    display:grid;
    grid-template-columns:minmax(260px, 1fr) minmax(180px, 260px) auto;
    gap:14px;
    align-items:end;
    margin:28px 0 18px;
    padding:18px;
    border:1px solid var(--agej-line);
    border-radius:24px;
    background:#fff;
    box-shadow:var(--agej-shadow-soft);
}

.transparency-field{
    display:flex;
    flex-direction:column;
    gap:7px;
    min-width:0;
}

.transparency-field span{
    color:#5f6972;
    font-size:.78rem;
    font-weight:800;
    letter-spacing:.06em;
    text-transform:uppercase;
}

.transparency-field input,
.transparency-field select{
    width:100%;
    min-height:46px;
    padding:0 14px;
    border:1px solid #cfd5dc;
    border-radius:16px;
    background:#f7f8f9;
    color:#30363c;
    font:inherit;
    outline:none;
    transition:background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.transparency-field input:focus,
.transparency-field select:focus{
    background:#fff;
    border-color:#8f99a3;
    box-shadow:0 0 0 4px rgba(47,51,55,.08);
}

.transparency-actions{
    display:flex;
    gap:10px;
    justify-content:flex-end;
}

/* Botones grises, compactos, sin color azul. */
.transparency-actions button,
.transparency-empty button{
    min-height:42px;
    padding:0 15px;
    border:1px solid #cfd5dc;
    border-radius:999px;
    background:#fff;
    color:#30363c;
    font:inherit;
    font-size:.9rem;
    font-weight:700;
    cursor:pointer;
    transition:background .2s ease, transform .2s ease, border-color .2s ease;
}

.transparency-actions button:hover,
.transparency-empty button:hover{
    background:#eef0f3;
    border-color:#aeb7c0;
    transform:translateY(-1px);
}

/* RESUMEN DE RESULTADOS */
.transparency-results{
    margin:0 0 14px;
    color:#66717c;
    font-size:.95rem;
    font-weight:700;
}

/* ÁRBOL DOCUMENTAL */
.transparency-tree{
    display:grid;
    gap:12px;
}

/* Cada nodo representa una fracción, apartado o subapartado. */
.art8-node{
    border:1px solid var(--agej-line);
    border-radius:22px;
    background:#fff;
    overflow:hidden;
    box-shadow:var(--agej-shadow-soft);
}

/* Indentación visual por profundidad del árbol. */
.art8-node[data-level="1"]{margin-left:22px;}
.art8-node[data-level="2"]{margin-left:44px;}
.art8-node[data-level="3"]{margin-left:66px;}
.art8-node[data-level="4"]{margin-left:88px;}

/* Cabecera clickable del nodo. */
.art8-node__header{
    width:100%;
    display:grid;
    grid-template-columns:auto 1fr auto;
    gap:14px;
    align-items:start;
    padding:18px 20px;
    border:0;
    background:#fff;
    color:#30363c;
    text-align:left;
    cursor:pointer;
}

.art8-node__header:hover{
    background:#f7f8f9;
}

/* Ícono expandir/contraer. */
.art8-node__toggle{
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border:1px solid var(--agej-line);
    border-radius:999px;
    background:#eef0f3;
    color:#30363c;
    font-size:1.2rem;
    line-height:1;
    transition:transform .2s ease, background .2s ease;
}

.art8-node.is-open > .art8-node__header .art8-node__toggle{
    transform:rotate(45deg);
    background:#fff;
}

.art8-node__content h3{
    margin:0;
    color:#30363c;
    font-size:1.08rem;
    line-height:1.28;
    font-weight:700;
}

.art8-node__content p{
    margin:6px 0 0;
    color:#66717c;
    line-height:1.55;
    font-size:.95rem;
}

.art8-node__meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    justify-content:flex-end;
}

.art8-pill{
    display:inline-flex;
    align-items:center;
    min-height:26px;
    padding:0 9px;
    border:1px solid var(--agej-line);
    border-radius:999px;
    background:#eef0f3;
    color:#4c555e;
    font-size:.78rem;
    font-weight:700;
    white-space:nowrap;
}

/* Cuerpo del nodo: documentos directos e hijos. */
.art8-node__body{
    display:none;
    padding:0 20px 18px 68px;
    border-top:1px solid var(--agej-line);
}

.art8-node.is-open > .art8-node__body{
    display:block;
}

/* Lista de documentos dentro de cada nodo. */
.art8-docs{
    display:grid;
    gap:9px;
    padding-top:14px;
}

.art8-doc{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:12px;
    align-items:center;
    padding:12px;
    border:1px solid var(--agej-line);
    border-radius:16px;
    background:#f7f8f9;
}

.art8-doc strong{
    display:block;
    color:#30363c;
    font-size:.94rem;
    line-height:1.35;
}

.art8-doc span{
    display:block;
    margin-top:3px;
    color:#66717c;
    font-size:.85rem;
}

/* Botón de descarga: pequeño, gris y alineado. */
.art8-doc a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 12px;
    border:1px solid #cfd5dc;
    border-radius:999px;
    background:#fff;
    color:#30363c!important;
    font-size:.85rem;
    font-weight:700;
    text-decoration:none!important;
    white-space:nowrap;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
}

.art8-doc a:hover{
    background:#30363c;
    border-color:#30363c;
    color:#fff!important;
    transform:translateY(-1px);
}

/* Contenedor de nodos hijos. */
.art8-children{
    display:grid;
    gap:10px;
    padding-top:14px;
}

/* ESTADO VACÍO */
.transparency-empty{
    margin-top:16px;
    padding:28px 24px;
    border:1px dashed #cfd5dc;
    border-radius:22px;
    background:#fff;
    text-align:center;
}

.transparency-empty strong{
    display:block;
    color:#30363c;
    font-size:1.05rem;
}

.transparency-empty p{
    max-width:680px;
    margin:8px auto 0;
    color:#66717c;
    line-height:1.6;
}

.transparency-empty code{
    padding:.1rem .35rem;
    border-radius:6px;
    background:#eef0f3;
    color:#30363c;
}

/* RECURSOS COMPLEMENTARIOS */
.transparency-resources{
    background:var(--agej-bg);
}

.transparency-resource-list{
    display:grid;
    gap:12px;
    margin-top:26px;
}

.transparency-resource-card{
    display:grid;
    grid-template-columns:1fr auto;
    gap:16px;
    align-items:center;
    padding:18px 20px;
    border:1px solid var(--agej-line);
    border-radius:20px;
    background:#fff;
    box-shadow:var(--agej-shadow-soft);
}

.transparency-resource-card h3{
    margin:0 0 5px;
    color:#30363c;
    font-size:1.05rem;
    font-weight:700;
}

.transparency-resource-card p{
    margin:0;
    color:#66717c;
    line-height:1.5;
}

.transparency-resource-card a{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:36px;
    padding:0 13px;
    border:1px solid #cfd5dc;
    border-radius:999px;
    background:#fff;
    color:#30363c!important;
    font-size:.86rem;
    font-weight:700;
    text-decoration:none!important;
    white-space:nowrap;
    transition:background .2s ease, border-color .2s ease, transform .2s ease;
}

.transparency-resource-card a:hover{
    background:#30363c;
    border-color:#30363c;
    color:#fff!important;
    transform:translateY(-1px);
}

/* RESPONSIVE */
@media(max-width:980px){
    .transparency-toolbar{
        grid-template-columns:1fr 1fr;
    }

    .transparency-field--search,
    .transparency-actions{
        grid-column:1 / -1;
    }

    .transparency-actions{
        justify-content:flex-start;
    }
}

@media(max-width:720px){
    .transparency-toolbar{
        grid-template-columns:1fr;
        padding:14px;
    }

    .transparency-field--search,
    .transparency-actions{
        grid-column:auto;
    }

    .transparency-actions{
        flex-direction:column;
    }

    .transparency-actions button{
        width:100%;
    }

    .art8-node[data-level="1"],
    .art8-node[data-level="2"],
    .art8-node[data-level="3"],
    .art8-node[data-level="4"]{
        margin-left:0;
    }

    .art8-node__header{
        grid-template-columns:auto 1fr;
    }

    .art8-node__meta{
        grid-column:1 / -1;
        justify-content:flex-start;
    }

    .art8-node__body{
        padding:0 14px 16px;
    }

    .art8-doc,
    .transparency-resource-card{
        grid-template-columns:1fr;
    }

    .art8-doc a,
    .transparency-resource-card a{
        width:100%;
    }
}