/* ════════════════════════════════════════════════════════════
   portal.css — Estilos compartidos del portal público de contenido
   Cargado siempre en todas las páginas públicas (head.php), igual
   que admin.css se carga siempre en el panel de administración.
   Contiene todo lo reutilizable entre inicio, noticias, normatividad,
   convocatorias y servicios: layout, tarjetas, filtros, tabla,
   breadcrumb y paginación. Lo exclusivo del inicio (hero, carousel
   de destacados) vive en home.css.
   ════════════════════════════════════════════════════════════ */

/* ── 1 · LAYOUT BASE ─────────────────────────────────────────── */
.workspace--full { display: block; }

.main-panel {
    padding: 1.25rem 1.5rem 2rem;
    background: var(--c-page);
    max-width: 1600px;
    margin: 0 auto;
}

/* ── 2 · BREADCRUMB ──────────────────────────────────────────── */
.breadcrumb { margin-bottom: 1rem; }

.breadcrumb__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .85rem;
    color: var(--c-ink-500);
}

.breadcrumb__list li { display: inline-flex; align-items: center; gap: .35rem; }

.breadcrumb__list li:not(:last-child)::after {
    content: "\f105"; /* fa-chevron-right */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: .7rem;
    color: var(--c-line-strong);
    margin-left: .35rem;
}

.breadcrumb__list a {
    color: var(--c-blue-800);
    font-weight: 600;
    text-decoration: none;
}
.breadcrumb__list a:hover,
.breadcrumb__list a:focus-visible { text-decoration: underline; }

.breadcrumb__list li[aria-current="page"] {
    color: var(--c-ink-700);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 40ch;
}

/* ── 3 · PÁGINA — CABECERA ───────────────────────────────────── */
.portal-page-header { margin-bottom: 1.25rem; }

.portal-page-header h1 {
    margin: 0 0 .3rem;
    color: var(--c-blue-900);
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
}

.portal-page-header p {
    margin: 0;
    color: var(--c-ink-700);
    font-size: .95rem;
}

/* ── 4 · GRILLA Y TARJETAS ───────────────────────────────────── */
.content-grid {
    display: grid;
    gap: 1.375rem;
}

.card {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    overflow: hidden;
}

.card__header {
    padding: 1.25rem 1.375rem .875rem;
    border-bottom: 1px solid var(--c-line);
}

.card__header h2 {
    margin: 0 0 .2rem;
    color: var(--c-blue-900);
    font-size: 1.2rem;
    font-weight: 700;
}

.card__header h2 i {
    color: var(--c-orange);
    margin-right: .45rem;
}

.card__header p {
    margin: 0;
    color: var(--c-ink-700);
    font-size: .875rem;
    overflow-wrap: anywhere;
}

.card__header--split {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: flex-start;
    padding-bottom: 1rem;
}

.card__header--split > * { min-width: 0; }

/* Grilla de tarjetas de listado (noticias, normatividad, convocatorias, servicios) */
.content-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1.375rem;
}

.content-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-white);
    overflow: hidden;
    transition:
        transform var(--t-fast),
        box-shadow var(--t-base),
        border-color var(--t-fast);
}
.content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--sh-md);
    border-color: var(--c-line-strong);
}

.content-card__image {
    position: relative;
    min-height: 160px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--c-blue-900);
}

.content-card__badge {
    position: absolute;
    left: .875rem;
    top: .875rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255,255,255,.2);
    color: var(--c-white);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.content-card__body {
    display: grid;
    gap: .55rem;
    padding: 1rem 1.1rem 1.2rem;
    flex: 1 1 auto;
}

.content-card__eyebrow {
    margin: 0;
    color: var(--c-orange);
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.content-card h3 {
    margin: 0;
    font-size: .98rem;
    line-height: 1.28;
    color: var(--c-blue-900);
    font-weight: 700;
    overflow-wrap: anywhere;
}

.content-card p {
    margin: 0;
    color: var(--c-ink-700);
    font-size: .86rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
}

.content-card__meta {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--c-ink-500, #64748b);
    font-size: .8rem;
}

.content-card__link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    color: var(--c-blue-800);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    transition: color var(--t-fast), gap var(--t-fast);
}
.content-card__link:hover,
.content-card__link:focus-visible { color: var(--c-blue-900); gap: .6rem; }
.content-card__link .fas { font-size: .78rem; }

/* ── 5 · FILTROS ─────────────────────────────────────────────── */
.filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: flex-start;
}

.filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 34px;
    padding: .35rem .875rem;
    border: 1px solid var(--c-line-strong);
    border-radius: 999px;
    background: var(--c-white);
    color: var(--c-ink-700);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition:
        background-color var(--t-fast),
        border-color var(--t-fast),
        color var(--t-fast),
        box-shadow var(--t-fast);
}

.filter-chip:hover,
.filter-chip:focus-visible {
    background: var(--c-blue-050);
    border-color: var(--c-blue-800);
    color: var(--c-blue-900);
}

.filter-chip.is-active {
    background: var(--c-blue-800);
    border-color: var(--c-blue-800);
    color: var(--c-white);
    box-shadow: var(--sh-xs);
}

/* Formulario de filtros GET (listados de portal) */
.portal-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .75rem;
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
}

.portal-filters__field {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 160px;
    flex: 1;
}

.portal-filters__field--wide { flex: 2; min-width: 220px; }

.portal-filters__label {
    font-size: .72rem;
    font-weight: 600;
    color: var(--c-ink-500);
}

.portal-filters__input,
.portal-filters__select {
    min-height: 40px;
    padding: .4rem .75rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    font-size: .88rem;
    color: var(--c-ink-900);
    background: var(--c-white);
}
.portal-filters__input:focus,
.portal-filters__select:focus {
    outline: none;
    border-color: var(--c-blue-800);
    box-shadow: 0 0 0 3px rgba(240,180,41,.35);
}

.portal-filters__actions { display: flex; gap: .5rem; }

/* ── 6 · TABLA (directorio de servicios) ─────────────────────── */
.table-wrap {
    padding: .875rem 1.375rem 1.375rem;
    overflow-x: auto;
}

.app-table {
    width: 100%;
    min-width: 800px;
    border-collapse: collapse;
    font-size: .9rem;
}

.app-table thead th {
    padding: .75rem .875rem;
    text-align: left;
    background: var(--c-blue-050);
    color: var(--c-ink-500);
    font-size: .76rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    border-bottom: 2px solid var(--c-line);
}

.app-table thead th:first-child { border-radius: var(--r-xs) 0 0 var(--r-xs); }
.app-table thead th:last-child  { border-radius: 0 var(--r-xs) var(--r-xs) 0; }

.app-table tbody th,
.app-table tbody td {
    padding: .9rem .875rem;
    border-bottom: 1px solid var(--c-line);
    vertical-align: top;
}

.app-table tbody th { text-align: left; font-weight: 600; }

.app-table tbody tr:last-child th,
.app-table tbody tr:last-child td { border-bottom: 0; }

.app-table tbody tr { transition: background-color var(--t-fast); }
.app-table tbody tr:hover { background: var(--c-blue-050); }

.app-table__name {
    display: inline-flex;
    align-items: flex-start;
    gap: .5rem;
    overflow-wrap: anywhere;
}

.app-table__name .fas {
    color: var(--c-blue-800);
    margin-top: .1rem;
    flex: 0 0 auto;
}

.app-table__tag {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: .15rem .6rem;
    background: rgba(240,180,41,.1);
    border: 1px solid rgba(240,180,41,.32);
    border-radius: 999px;
    color: var(--c-blue-900);
    font-size: .78rem;
    font-weight: 700;
}

.action-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--c-blue-800);
    font-weight: 700;
    font-size: .85rem;
    text-decoration: none;
    transition: color var(--t-fast), gap var(--t-fast);
}
.action-link:hover,
.action-link:focus-visible { color: var(--c-blue-900); gap: .6rem; }
.action-link .fas { font-size: .78rem; }

.empty-state {
    margin: 0;
    padding: .75rem 1.375rem 1.375rem;
    color: var(--c-ink-700);
    font-size: .9rem;
}

/* ── 7 · LISTA DE RECURSOS ───────────────────────────────────── */
.split-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.375rem;
}

.resource-list {
    list-style: none;
    margin: 0;
    padding: 1rem 1.375rem 1.375rem;
}

.resource-list__item {
    padding: .875rem 1rem;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    transition:
        border-color var(--t-fast),
        box-shadow var(--t-base),
        transform var(--t-fast);
}

.resource-list__item + .resource-list__item { margin-top: .75rem; }

.resource-list__item:hover {
    border-color: var(--c-line-strong);
    box-shadow: var(--sh-sm);
    transform: translateY(-2px);
}

.resource-list__item h3 {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin: 0 0 .375rem;
    color: var(--c-blue-900);
    font-size: .95rem;
    font-weight: 700;
}

.resource-list__item h3 .fas { color: var(--c-blue-800); font-size: .9rem; }

.resource-list__item p {
    margin: 0 0 .65rem;
    color: var(--c-ink-700);
    font-size: .875rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

.resource-list__item a {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--c-blue-800);
    font-weight: 700;
    font-size: .875rem;
    text-decoration: none;
    transition: color var(--t-fast), gap var(--t-fast);
}
.resource-list__item a:hover,
.resource-list__item a:focus-visible { color: var(--c-blue-900); gap: .6rem; }
.resource-list__item a .fas { font-size: .78rem; }

/* ── 8 · ETIQUETAS (chips de solo lectura) ────────────────────── */
.etiqueta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin: 1rem 0;
}

.etiqueta-chip {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    min-height: 30px;
    padding: .3rem .8rem;
    border: 1px solid var(--c-line-strong);
    border-radius: 999px;
    background: var(--c-blue-050);
    color: var(--c-blue-900);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
}
.etiqueta-chip:hover,
.etiqueta-chip:focus-visible {
    background: var(--c-blue-800);
    color: var(--c-white);
}

/* ── 9 · PAGINACIÓN ──────────────────────────────────────────── */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-top: 1.75rem;
}

.pagination__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    padding: 0 .6rem;
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-sm);
    background: var(--c-white);
    color: var(--c-blue-800);
    font-weight: 700;
    font-size: .9rem;
    text-decoration: none;
    transition: background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.pagination__link:hover,
.pagination__link:focus-visible {
    background: var(--c-blue-050);
    border-color: var(--c-blue-800);
}

.pagination__link.is-active {
    background: var(--c-blue-800);
    border-color: var(--c-blue-800);
    color: var(--c-white);
    cursor: default;
}

.pagination__link.is-disabled {
    opacity: .4;
    pointer-events: none;
}

/* ── 10 · DETALLE DE CONTENIDO ───────────────────────────────── */
.content-detail {
    background: var(--c-white);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-xs);
    overflow: hidden;
    max-width: 900px;
    margin: 0 auto;
}

/* Detalle de ancho completo (ej. Balance Scorecard embebido) — el contenido
   no es texto de lectura, así que no aplica el ancho de columna de artículo */
.content-detail--full {
    max-width: 96%;
    width: 96%;
}

.content-detail__image {
    width: 100%;
    max-height: 380px;
    object-fit: cover;
}

.content-detail__body { padding: 1.75rem clamp(1.25rem, 4vw, 3rem) 2.5rem; }

.content-detail__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .6rem;
    color: var(--c-orange);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
}

.content-detail__body h1 {
    margin: 0 0 .5rem;
    color: var(--c-blue-900);
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 800;
    line-height: 1.2;
}

.content-detail__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1.5rem;
    color: var(--c-ink-500);
    font-size: .85rem;
}
.content-detail__meta span { display: inline-flex; align-items: center; gap: .35rem; }

.content-detail__cuerpo {
    color: var(--c-ink-900);
    font-size: 1rem;
    line-height: 1.75;
    overflow-wrap: anywhere;
}
.content-detail__cuerpo img { border-radius: var(--r-md); }
.content-detail__cuerpo h2,
.content-detail__cuerpo h3 { color: var(--c-blue-900); }

/* ── Archivos adjuntos (detalle público, ej. eventos) ─────────── */
.content-detail__adjuntos {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-line-strong);
}
.content-detail__adjuntos h2 {
    margin: 0 0 .75rem;
    font-size: 1rem;
    color: var(--c-blue-900);
}
.content-detail__adjuntos h2 .fas { color: var(--c-orange); }

.content-detail__actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--c-line);
}

/* ── Balance Scorecard — embebido (iframe) ────────────────────── */
/* scorecard-portal.js define las variables desde data-ancho y data-alto */
.scorecard-embed {
    width: var(--scorecard-ancho, 100%);
    max-width: 100%;
    margin: 1.5rem auto 0;
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: var(--sh-xs);
}

.scorecard-embed iframe {
    display: block;
    width: 100%;
    height: var(--scorecard-alto, 70vh);
    min-height: 420px;
    border: 0;
}

/* Un alto en píxeles es exacto: el mínimo solo protege a las alturas relativas */
.scorecard-embed--alto-fijo iframe {
    min-height: 0;
}

/* ── 11 · RESULTADOS DE BÚSQUEDA ──────────────────────────────── */
.search-results__tipos { margin-bottom: 1.25rem; }

.search-results__count { color: var(--c-ink-700); font-size: .95rem; }

.search-results {
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    max-width: 760px;
}

.search-result {
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--c-line);
}
.search-result:first-child { padding-top: 0; }

.search-result__eyebrow {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem;
    margin: 0 0 .3rem;
    color: var(--c-ink-500);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.search-result__url {
    text-transform: none;
    font-weight: 500;
    letter-spacing: normal;
    color: var(--c-success);
    overflow-wrap: anywhere;
}

.search-result__title {
    margin: 0 0 .3rem;
    font-size: 1.15rem;
    line-height: 1.35;
}

.search-result__title a {
    color: var(--c-blue-800);
    font-weight: 700;
    text-decoration: none;
}
.search-result__title a:hover,
.search-result__title a:focus-visible { text-decoration: underline; }

.search-result__snippet {
    margin: 0;
    color: var(--c-ink-700);
    font-size: .92rem;
    line-height: 1.6;
    overflow-wrap: anywhere;
}

.search-results__extra {
    max-width: 760px;
    margin-top: .5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--c-line);
}

.search-results__extra-title {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 1rem;
    color: var(--c-blue-900);
    font-size: 1.05rem;
    font-weight: 700;
}

.search-results__extra-title i { color: var(--c-orange); }

.search-result mark,
.search-result__title mark {
    background: rgba(240, 180, 41, .45);
    color: inherit;
    padding: 0 .05em;
    border-radius: 2px;
}

/* ── 12 · RESPONSIVE — PORTAL ─────────────────────────────────── */
@media (max-width: 768px) {
    .main-panel { padding: 1rem 1rem 1.5rem; }

    .card__header { padding: 1rem 1rem .75rem; }
    .card__header--split { flex-direction: column; align-items: stretch; }

    .table-wrap    { padding: .75rem 1rem 1rem; overflow: visible; }
    .resource-list { padding: .875rem 1rem 1rem; }

    .portal-filters { flex-direction: column; align-items: stretch; }
    .portal-filters__field { min-width: 0; }

    .filter-bar {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .filter-chip {
        border-radius: var(--r-sm);
        justify-content: center;
    }

    /* Tabla responsive — tarjetas por fila */
    .app-table,
    .app-table tbody,
    .app-table tr,
    .app-table th,
    .app-table td { display: block; width: 100%; }

    .app-table     { min-width: 0; }
    .app-table thead { display: none; }

    .app-table tbody { display: grid; gap: .75rem; }

    .app-table tbody tr {
        padding: 1rem;
        border: 1px solid var(--c-line);
        border-radius: var(--r-md);
        background: var(--c-white);
        box-shadow: var(--sh-xs);
    }

    .app-table tbody th,
    .app-table tbody td {
        display: grid;
        grid-template-columns: minmax(95px, 110px) minmax(0, 1fr);
        gap: .6rem;
        padding: 0;
        border: 0;
    }

    .app-table tbody tr:hover { background: var(--c-white); }

    .app-table tbody tr > * + * { margin-top: .6rem; }

    .app-table tbody th::before,
    .app-table tbody td::before {
        content: attr(data-label);
        color: var(--c-ink-500);
        font-size: .7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .07em;
        padding-top: .1rem;
    }

    .app-table__tag,
    .action-link { justify-self: flex-start; }

    .content-detail__body { padding: 1.5rem 1.25rem 2rem; }
}

@media (max-width: 360px) {
    .main-panel { padding: .75rem .75rem 1.25rem; }

    .filter-bar { grid-template-columns: 1fr; }

    .app-table tbody th,
    .app-table tbody td { grid-template-columns: 1fr; gap: .28rem; }

    .app-table tbody tr { padding: .875rem; }

    .content-card-grid { grid-template-columns: 1fr; }
}