/* Instituciones (ADR-049; tareas M61 y M62): Gobernaciones, Congreso y los poderes Ejecutivo y Judicial. Sobre finanzas.css
   (cajas, filtros, mapa, leyenda, tablas y evolución de las páginas de finanzas municipales): aquí, el resumen en tarjetas,
   las tablas por objeto del gasto con sus niveles, la elección de entidad y el reparto entre las entidades. */

.instituciones__resumen,
.instituciones__entidades {
    display: grid;
    gap: .875rem;
    min-width: 0;
    padding: 1.25rem;
    border: 1px solid var(--border);
    border-radius: 1.25rem;
    background: var(--surface);
}

.instituciones__resumen > *,
.instituciones__entidades > * {
    min-width: 0;
    max-width: 100%;
}

.instituciones__resumen-titulo {
    margin: 0;
    font-size: 1.125rem;
}

.instituciones__tarjetas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
    gap: .75rem;
}

.instituciones__tarjeta {
    display: grid;
    align-content: start;
    gap: .25rem;
    padding: .875rem 1rem;
    border: 1px solid var(--border);
    border-radius: 1rem;
    background: var(--surface-soft);
}

.instituciones__tarjeta p {
    margin: 0;
}

.instituciones__tarjeta-titulo {
    color: var(--text-muted);
    font-size: .8125rem;
    font-weight: 600;
}

.instituciones__tarjeta-valor {
    color: var(--text);
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.instituciones__tarjeta-detalle {
    color: var(--text-soft);
    font-size: .8125rem;
}

.instituciones__tarjeta--calculo {
    border-style: dashed;
}

/* Tablas: la fila elegida, el total y los niveles del clasificador (grupo, subgrupo y detalle). */
.instituciones__tabla tbody tr {
    cursor: pointer;
}

.instituciones__total th,
.instituciones__total td {
    font-weight: 700;
    border-top: 2px solid var(--border-strong);
}

.instituciones__objeto td,
.instituciones__objeto th {
    font-variant-numeric: tabular-nums;
}

.instituciones__nivel-grupo th,
.instituciones__nivel-grupo td {
    font-weight: 650;
}

.instituciones__nivel-subgrupo th {
    padding-left: 1.5rem;
    font-weight: 400;
}

.instituciones__nivel-detalle th {
    padding-left: 2.75rem;
    color: var(--text-soft);
    font-weight: 400;
}

.instituciones__nivel-detalle td {
    color: var(--text-soft);
}

.instituciones__detalle-controles,
.instituciones__vistas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
}

.instituciones__detalle .tabla-scroll + .tabla-scroll {
    margin-top: .5rem;
}

.instituciones__fuentes {
    display: grid;
    gap: .25rem;
    margin: 0;
    padding-left: 1.25rem;
    font-size: .875rem;
}

.instituciones__fuentes a {
    overflow-wrap: anywhere;
}

/* Congreso: el reparto del año entre sus tres entidades, una barra apilada con su leyenda (y la tabla con los números). */
.instituciones__reparto {
    display: flex;
    width: 100%;
    height: 1.5rem;
    overflow: hidden;
    border-radius: .5rem;
    background: var(--surface-soft);
}

.instituciones__reparto span {
    min-width: 2px;
}

.instituciones__reparto-leyenda {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .875rem;
}

.instituciones__reparto-leyenda li {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
}

.instituciones__reparto-leyenda .leyenda__muestra {
    flex: 0 0 auto;
}

/* Poder Ejecutivo y Poder Judicial (tarea M62): la lista de entidades del año, el nombre de cada entidad en su tabla como
   botón (para elegirla con el teclado), las marcas de lo que cambia ese año, la tabla de lo obligado por entidad y año y
   los desplegables del método. */
.instituciones__campo-entidad {
    flex: 1 1 18rem;
    min-width: 0;
}

.instituciones__campo-entidad select {
    width: 100%;
    max-width: 32rem;
}

.instituciones__elegir {
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
}

.instituciones__elegir:hover {
    color: var(--orange-600);
    text-decoration: underline;
}

.instituciones__elegir:focus-visible {
    outline: 3px solid var(--orange-500);
    outline-offset: 2px;
}

.instituciones__etiqueta {
    display: inline-block;
    margin-left: .5rem;
    padding: .0625rem .5rem;
    border: 1px solid var(--border-strong);
    border-radius: 9999px;
    color: var(--text-soft);
    font-size: .6875rem;
    font-weight: 600;
    white-space: nowrap;
}

.instituciones__por-entidad td {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.instituciones__desplegable {
    margin-top: .5rem;
}

.instituciones__desplegable summary {
    cursor: pointer;
    font-weight: 600;
}

.instituciones__desplegable summary:focus-visible {
    outline: 3px solid var(--orange-500);
    outline-offset: 2px;
}

.instituciones__desplegable ul {
    margin: .5rem 0 0;
    padding-left: 1.25rem;
    font-size: .875rem;
}

/* Un año presupuestado (M63: 2026, el PGN aprobado, sin ejecución): el aviso arriba del resumen y su fila en las tablas por
   año (el presupuesto inicial; lo demás, «—»). */
.instituciones__presupuestado {
    margin: 0;
    padding: .75rem 1rem;
    border-left: 4px solid #7c3aed;
    border-radius: .5rem;
    background: color-mix(in srgb, #7c3aed 10%, var(--surface-solid));
    color: var(--text);
    font-size: .9375rem;
    font-weight: 650;
    line-height: 1.5;
}

/* Debajo del aviso: qué es el inicial del año presupuestado, con el enlace al presupuesto de todas las instituciones. */
.instituciones__presupuestado-nota {
    margin: .5rem 0 0;
}

/* Los enlaces de las notas (el Presupuesto 2026 debajo del aviso, el PDF de un listado): subrayados, para que se vean. */
.instituciones .nota a {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.instituciones__fila-presupuestada th,
.instituciones__fila-presupuestada td {
    font-style: italic;
}

/* La fuente de un año presupuestado sin enlace (el manifiesto no trae uno): texto, no un enlace. */
.finanzas__fuente-oficial a:not([href]),
html[data-theme="dark"] .finanzas__fuente-oficial a:not([href]) {
    color: var(--text-muted);
    text-decoration: none;
    cursor: default;
}

@media (max-width: 640px) {
    .instituciones__resumen,
    .instituciones__entidades {
        padding: 1rem;
    }

    .instituciones__tarjeta-valor {
        font-size: 1.1875rem;
    }

    .instituciones__vistas .segmentos {
        flex-wrap: wrap;
    }
}