/* ==========================================================================
   CIMO — Componentes
   --------------------------------------------------------------------------
   Consolida o que estava espalhado por 22 blocos <style> e 133 atributos
   style=". Depende de cimo/tokens.css e cimo/base.css.

   Princípio: a maioria da interface é neutra. O primary aparece em
   link, ação primária, item ativo, chip de marca e na banda escura do footer.
   ========================================================================== */

/* ==========================================================================
   1. BOTÕES — 4 papéis. Consolidam as 33 variantes de classe encontradas.
   ========================================================================== */

.btn {
    --bs-btn-border-radius: var(--cimo-radius-md);
    font-family: var(--cimo-font);
    font-size: var(--cimo-fs-btn);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: 0;
    min-height: 44px;                 /* alvo de toque */
    padding: var(--cimo-space-3) var(--cimo-space-5);
    border-radius: var(--cimo-radius-md);
    border-width: 1px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cimo-space-2);
    cursor: pointer;
    text-transform: none;
    transition:
        background-color var(--cimo-dur) var(--cimo-ease),
        border-color var(--cimo-dur) var(--cimo-ease),
        color var(--cimo-dur) var(--cimo-ease),
        box-shadow var(--cimo-dur) var(--cimo-ease);
}

.btn:hover {
    text-decoration: none;
}

.btn-sm {
    min-height: 36px;
    font-size: var(--cimo-fs-sm);
    padding: var(--cimo-space-2) var(--cimo-space-4);
}

.btn-lg {
    min-height: 52px;
    font-size: 1rem;
    padding: var(--cimo-space-4) var(--cimo-space-6);
}

/* --- Primário: a única ação de destaque por vista ----------------------- */
.btn-primary,
.btn-primary:not(.bg-transparent) {
    background-color: var(--cimo-primary-500);
    border-color: var(--cimo-primary-500);
    color: #fff;
}

.btn-primary:hover,
.btn-primary.hover,
.btn-primary:hover:not(.bg-transparent),
.btn-primary.hover:not(.bg-transparent),
.btn-primary:focus,
.btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active {
    background-color: var(--cimo-primary-600);
    border-color: var(--cimo-primary-600);
    color: #fff;
}

/* --- Secundário: neutro, não verde ------------------------------------- */
.btn-secondary,
.btn-secondary:not(.bg-transparent) {
    background-color: var(--cimo-neutral-100);
    border-color: var(--cimo-neutral-300);
    color: var(--cimo-neutral-900);
}

.btn-secondary:hover,
.btn-secondary.hover,
.btn-secondary:hover:not(.bg-transparent),
.btn-secondary:focus,
.btn-secondary:active,
.btn-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--cimo-neutral-200);
    border-color: var(--cimo-neutral-400);
    color: var(--cimo-neutral-950);
}

/* --- Outline ------------------------------------------------------------ */
.btn-outline-primary {
    background-color: transparent;
    border-color: var(--cimo-primary-500);
    color: var(--cimo-primary-500);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active,
.btn-outline-primary:not(:disabled):not(.disabled):active {
    background-color: var(--cimo-primary-500);
    border-color: var(--cimo-primary-500);
    color: #fff;
}

.btn-outline-secondary {
    background-color: transparent;
    border-color: var(--cimo-neutral-300);
    color: var(--cimo-neutral-700);
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-outline-secondary:active,
.btn-outline-secondary:not(:disabled):not(.disabled):active {
    background-color: var(--cimo-neutral-100);
    border-color: var(--cimo-neutral-400);
    color: var(--cimo-neutral-950);
}

/* --- Ghost / link ------------------------------------------------------- */
.btn-link,
.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--cimo-primary-500);
    text-decoration: none;
    padding-left: var(--cimo-space-3);
    padding-right: var(--cimo-space-3);
}

.btn-link:hover,
.btn-ghost:hover {
    background-color: var(--cimo-primary-a08);
    color: var(--cimo-primary-600);
    text-decoration: none;
}

/* --- Semânticas: o Bootstrap fixa estes valores dentro da classe -------- */
.btn-success {
    --bs-btn-bg: var(--cimo-success);
    --bs-btn-border-color: var(--cimo-success);
    --bs-btn-hover-bg: #3a6724;
    --bs-btn-hover-border-color: #3a6724;
    --bs-btn-active-bg: #2f541d;
    --bs-btn-active-border-color: #2f541d;
    --bs-btn-disabled-bg: var(--cimo-success);
    --bs-btn-disabled-border-color: var(--cimo-success);
}

.btn-info {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cimo-info);
    --bs-btn-border-color: var(--cimo-info);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #175b79;
    --bs-btn-hover-border-color: #175b79;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #134b63;
    --bs-btn-active-border-color: #134b63;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cimo-info);
    --bs-btn-disabled-border-color: var(--cimo-info);
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--cimo-warning);
    --bs-btn-border-color: var(--cimo-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #834d00;
    --bs-btn-hover-border-color: #834d00;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #6b3f00;
    --bs-btn-active-border-color: #6b3f00;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--cimo-warning);
    --bs-btn-disabled-border-color: var(--cimo-warning);
}

.btn-danger {
    --bs-btn-bg: var(--cimo-error);
    --bs-btn-border-color: var(--cimo-error);
    --bs-btn-hover-bg: #97201a;
    --bs-btn-hover-border-color: #97201a;
    --bs-btn-active-bg: #7d1a15;
    --bs-btn-active-border-color: #7d1a15;
    --bs-btn-disabled-bg: var(--cimo-error);
    --bs-btn-disabled-border-color: var(--cimo-error);
}

/* --- Variantes locais herdadas dos blades ------------------------------- */
/* `.btn-modern` e `.btn-rounded` estavam definidos dentro de páginas
   individuais; ficam aqui, alinhados com o sistema. */
.btn-modern {
    text-transform: none;
    letter-spacing: 0;
}

.btn-rounded {
    border-radius: var(--cimo-radius-pill);
}

/* `.share-btn` não tinha CSS nenhum em lado nenhum. */
.share-btn {
    min-height: 36px;
    padding: var(--cimo-space-2) var(--cimo-space-4);
    font-size: var(--cimo-fs-sm);
    border-radius: var(--cimo-radius-md);
}


/* ==========================================================================
   2. CARDS — uma base, o resto são modificadores.
   Substitui 11 padrões com 6 lifts e 6 sombras diferentes.
   ========================================================================== */

.card,
.cimo-panel,
.tabs-container {
    background-color: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-lg);
    box-shadow: var(--cimo-shadow-sm);
    transition:
        box-shadow var(--cimo-dur) var(--cimo-ease),
        transform var(--cimo-dur) var(--cimo-ease),
        border-color var(--cimo-dur) var(--cimo-ease);
}

.card-body {
    padding: var(--cimo-space-5);
}

.card-header {
    background-color: var(--cimo-neutral-100);
    border-bottom: 1px solid var(--cimo-neutral-200);
    color: var(--cimo-neutral-900);
    font-weight: 600;
    padding: var(--cimo-space-4) var(--cimo-space-5);
}

/* Um único lift, uma única sombra de hover — e só onde o card é clicável. */
.cimo-card-interactive:hover,
a.card:hover,
.hover-effect:hover,
.hover-lift:hover,
.card.hover-lift:hover,
.researcher-card-hover:hover,
.team-member-card:hover,
.page-sponsor-card:hover,
.network-card:hover,
.startup-card:hover,
.about-card:hover,
.research-card:hover,
.project-info-card:hover {
    box-shadow: var(--cimo-shadow-md);
    transform: translateY(var(--cimo-lift));
    border-color: var(--cimo-neutral-300);
}

/* Painel "não-card" — oito blocos do projeto repetiam esta superfície com
   valores ligeiramente diferentes (.researcher-header, .chart-container,
   .bio-section, .tabs-container, .stats-grid, .publications-container).
   .tabs-container sobrevive pelo nome antigo porque a página de propriedade
   intelectual ainda a usa. */
.cimo-panel,
.tabs-container {
    padding: var(--cimo-space-6);
}

.tabs-container {
    margin-bottom: var(--cimo-space-6);
}

.cimo-panel--flush {
    padding: 0;
    overflow: hidden;
}

/* Título de painel: um só tamanho para os cabeçalhos dentro de cartões,
   em vez de h2/h3/h4/h5 escolhidos ao caso. */
.cimo-panel__title {
    color: var(--cimo-neutral-900);
    font-size: var(--cimo-fs-h3);
    margin-bottom: var(--cimo-space-4);
}

/* Superfície recuada, para agrupar sem introduzir cor. */
.cimo-surface-sunken {
    background-color: var(--cimo-neutral-100);
    border-radius: var(--cimo-radius-lg);
}

/* Callout de marca — este é um dos poucos sítios onde o primary claro
   é apropriado como fundo. */
.cimo-callout {
    background-color: var(--cimo-primary-50);
    border: 1px solid var(--cimo-primary-200);
    border-left: 3px solid var(--cimo-primary-500);
    border-radius: var(--cimo-radius-md);
    padding: var(--cimo-space-5);
    color: var(--cimo-neutral-900);
}


/* ==========================================================================
   3. BADGES — significado, não decoração.
   ========================================================================== */

.badge {
    font-family: var(--cimo-font);
    font-size: var(--cimo-fs-xs);
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: 0.01em;
    padding: 0.35em 0.7em;
    border-radius: var(--cimo-radius-sm);
    text-transform: none;
}

/* Categorização sem carga semântica -> neutro. */
.cimo-badge-neutral,
.badge.bg-light {
    background-color: var(--cimo-neutral-100) !important;
    color: var(--cimo-neutral-700) !important;
    border: 1px solid var(--cimo-neutral-200);
}

/* Chip de marca — categoria diretamente ligada ao CIMO (grupo de
   investigação, por exemplo). É o único elemento colorido do cartão. */
.cimo-chip,
.researcher-group-chip {
    display: inline-block;
    background-color: var(--cimo-primary-a08);
    color: var(--cimo-primary-600);
    border: 1px solid var(--cimo-primary-200);
    border-radius: var(--cimo-radius-pill);
    font-size: var(--cimo-fs-xs);
    font-weight: 600;
    line-height: 1.4;
    padding: 0.3em 0.85em;
}

/* Badges suaves para contadores em sidebars e filtros. */
.cimo-badge-soft {
    background-color: var(--cimo-neutral-100);
    color: var(--cimo-neutral-700);
    border-radius: var(--cimo-radius-pill);
    font-size: var(--cimo-fs-xs);
    font-weight: 600;
    padding: 0.2em 0.6em;
}


/* ==========================================================================
   4. TABELAS — registo científico: densas, legíveis, sem bloco verde.
   ========================================================================== */

.table {
    --bs-table-bg: var(--cimo-surface);
    --bs-table-color: var(--cimo-neutral-900);
    --bs-table-border-color: var(--cimo-neutral-200);
    --bs-table-striped-bg: var(--cimo-neutral-50);
    --bs-table-striped-color: var(--cimo-neutral-900);
    --bs-table-hover-bg: var(--cimo-primary-a04);
    --bs-table-hover-color: var(--cimo-neutral-950);
    font-size: var(--cimo-fs-sm);
    line-height: var(--cimo-lh-snug);
    margin-bottom: 0;
}

/* Substitui o `linear-gradient(135deg,#007447,#009e5d)` que estava
   duplicado em três ficheiros. Cabeçalho neutro, âncora por peso e borda. */
.table > thead > tr > th,
.table thead th,
.table .table-dark th,
table.dataTable thead th,
table.dataTable thead td {
    background: var(--cimo-neutral-100) !important;
    background-image: none !important;
    color: var(--cimo-neutral-800) !important;
    font-size: var(--cimo-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-bottom: 2px solid var(--cimo-neutral-300) !important;
    border-top: 0 !important;
    padding: var(--cimo-space-3) var(--cimo-space-3);
    vertical-align: middle;
    white-space: nowrap;
}

.table > tbody > tr > td,
.table tbody td {
    padding: var(--cimo-space-3);
    border-color: var(--cimo-neutral-200);
    vertical-align: top;
}

.table > tbody > tr:last-child > td {
    border-bottom: 0;
}

/* Título da linha é o único elemento com peso — o resto é neutro. */
.cimo-cell-title {
    color: var(--cimo-neutral-900);
    font-weight: 600;
}

.cimo-cell-title:hover {
    color: var(--cimo-primary-500);
}

.cimo-cell-meta {
    color: var(--cimo-neutral-600);
}

.cimo-cell-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* Nenhuma tabela pode empurrar a página na horizontal. */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* A coluna do título é a que se lê; as outras são de referência. Sem isto o
   DataTables reparte a largura por igual e os títulos ficam a quebrar de
   duas em duas palavras. */
#publications-table th:first-child,
#publications-table td:first-child,
#thesis-table th:first-child,
#thesis-table td:first-child {
    min-width: 290px;
}

#publications-table th:nth-child(3),
#publications-table td:nth-child(3) {
    min-width: 160px;
}

#thesis-table .badge,
#projects-table td:nth-child(3) .badge,
#theses-table td:nth-child(3) .badge {
    background-color: var(--cimo-neutral-100) !important;
    border: 1px solid var(--cimo-neutral-200);
    color: var(--cimo-neutral-700) !important;
    font-weight: 600;
    white-space: nowrap;
}

/* Tipo de publicação pela paleta viz: com 91% "Article", a cor serve para encontrar as exceções. */
.badge.cimo-type {
    background-color: color-mix(in srgb, var(--cimo-type, var(--cimo-neutral-600)) 8%, var(--cimo-surface)) !important;
    border: 1px solid color-mix(in srgb, var(--cimo-type, var(--cimo-neutral-600)) 28%, var(--cimo-surface));
    color: var(--cimo-type, var(--cimo-neutral-600)) !important;
    white-space: normal;
}

.cimo-type--article    { --cimo-type: var(--cimo-viz-1); }
.cimo-type--book       { --cimo-type: var(--cimo-viz-2); }
.cimo-type--conference { --cimo-type: var(--cimo-viz-4); }
.cimo-type--thesis     { --cimo-type: var(--cimo-viz-7); }

.cimo-type-label {
    align-items: center;
    display: inline-flex;
    gap: var(--cimo-space-2);
}

.cimo-type-dot {
    background-color: var(--cimo-type, var(--cimo-neutral-500));
    border-radius: var(--cimo-radius-circle);
    flex-shrink: 0;
    height: 10px;
    width: 10px;
}

.cimo-cites {
    background-color: var(--cimo-primary-50);
    border-radius: var(--cimo-radius-pill);
    color: var(--cimo-primary-700);
    display: inline-block;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    min-width: 2.25em;
    padding: 0.1em 0.6em;
}

.cimo-cites--none {
    background-color: transparent;
    color: var(--cimo-neutral-600);
    font-weight: 400;
}

/* Exceção deliberada: nas tabelas de projetos e de teses a coluna de
   estado (4.ª e 5.ª) é o único sítio destas páginas onde a cor carrega
   significado — "Ongoing" e "Concluded" não são categorias, são estados.
   Ficam semânticas; o tipo, que é categorização, fica neutro. */
#projects-table td:nth-child(4) .badge,
#theses-table td:nth-child(5) .badge {
    font-weight: 600;
    white-space: nowrap;
}

/* --- DataTables: tema definido uma vez, não três ------------------------ */
.dataTables_wrapper {
    font-size: var(--cimo-fs-sm);
    color: var(--cimo-neutral-700);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border: 1px solid var(--cimo-neutral-300);
    border-radius: var(--cimo-radius-sm);
    padding: var(--cimo-space-2) var(--cimo-space-3);
    color: var(--cimo-neutral-900);
    background-color: var(--cimo-surface);
    min-height: 38px;
}

.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
    border-color: var(--cimo-primary-500);
    box-shadow: var(--cimo-focus-ring);
    outline: none;
}

/* Repõe o espaço da seta do form-select, que o padding acima anulava. */
.dataTables_wrapper .dataTables_length select {
    background-position: right var(--cimo-space-2) center;
    padding-right: var(--cimo-space-6);
}

.cimo-dt-footer {
    align-items: center;
    border-top: 1px solid var(--cimo-neutral-200);
    display: flex;
    flex-wrap: wrap;
    gap: var(--cimo-space-3) var(--cimo-space-5);
    justify-content: space-between;
    margin-top: var(--cimo-space-4);
    padding-top: var(--cimo-space-4);
}

.cimo-dt-pager {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cimo-space-3) var(--cimo-space-5);
}

.cimo-dt-footer .dataTables_info {
    padding-top: 0 !important;
}

.cimo-dt-footer .pagination {
    margin: 0 !important;
}

@media (max-width: 767.98px) {
    .cimo-dt-footer,
    .cimo-dt-pager {
        justify-content: center;
    }
}

.dataTables_wrapper .dataTables_processing {
    background: var(--cimo-surface) !important;
    background-image: none !important;
    color: var(--cimo-neutral-900) !important;
    border: 1px solid var(--cimo-neutral-200) !important;
    border-radius: var(--cimo-radius-md) !important;
    box-shadow: var(--cimo-shadow-md) !important;
    font-size: var(--cimo-fs-sm) !important;
    font-weight: 600;
    padding: var(--cimo-space-4) var(--cimo-space-5) !important;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_length {
    color: var(--cimo-neutral-600);
}


/* ==========================================================================
   5. FORMULÁRIOS — neutros em repouso, primary só no foco.
   ========================================================================== */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="password"],
textarea,
select {
    background-color: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-300);
    border-radius: var(--cimo-radius-md);
    color: var(--cimo-neutral-900);
    font-family: var(--cimo-font);
    font-size: var(--cimo-fs-body);
    line-height: var(--cimo-lh-snug);
    min-height: 44px;
    padding: var(--cimo-space-3) var(--cimo-space-4);
    transition:
        border-color var(--cimo-dur) var(--cimo-ease),
        box-shadow var(--cimo-dur) var(--cimo-ease);
}

.form-control::placeholder,
textarea::placeholder {
    color: var(--cimo-neutral-400);
    opacity: 1;
}

/* O anel de foco estava a 8% de opacidade, praticamente invisível. */
.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    background-color: var(--cimo-surface);
    border-color: var(--cimo-primary-500);
    box-shadow: var(--cimo-focus-ring);
    outline: none;
    color: var(--cimo-neutral-900);
}

.form-control:disabled,
.form-select:disabled {
    background-color: var(--cimo-neutral-100);
    color: var(--cimo-neutral-500);
}

.form-label,
label {
    color: var(--cimo-neutral-800);
    font-size: var(--cimo-fs-sm);
    font-weight: 600;
    margin-bottom: var(--cimo-space-2);
}

.form-control.is-invalid,
.is-invalid {
    border-color: var(--cimo-error);
}

.invalid-feedback,
.form-error {
    color: var(--cimo-error);
    font-size: var(--cimo-fs-sm);
}

textarea.form-control,
textarea {
    min-height: 120px;
}


/* ==========================================================================
   6. NAVEGAÇÃO — activo por cor + peso + barra, nunca só por cor.
   ========================================================================== */

#header .header-body {
    background-color: var(--cimo-surface);
    border-bottom: 1px solid var(--cimo-neutral-200);
    box-shadow: none;
}

#header .header-nav-main nav > ul > li > a {
    color: var(--cimo-neutral-700);
    font-size: var(--cimo-fs-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    transition: color var(--cimo-dur) var(--cimo-ease);
}

#header .header-nav-main nav > ul > li > a:hover,
#header .header-nav-main nav > ul > li:hover > a {
    color: var(--cimo-primary-500);
}

#header .header-nav-main nav > ul > li.active > a,
#header .header-nav-main nav > ul > li > a.active {
    color: var(--cimo-primary-500);
    font-weight: 700;
    position: relative;
}

#header .header-nav-main nav > ul > li.active > a::after,
#header .header-nav-main nav > ul > li > a.active::after {
    content: '';
    position: absolute;
    left: 0.7rem;
    right: 0.7rem;
    bottom: 0.35rem;
    height: 2px;
    background-color: var(--cimo-primary-500);
    border-radius: 1px;
}

#header .header-nav-main nav > ul > li > .dropdown-menu {
    border: 1px solid var(--cimo-neutral-200);
    border-top: 2px solid var(--cimo-primary-500);
    border-radius: var(--cimo-radius-md);
    box-shadow: var(--cimo-shadow-md);
    padding: var(--cimo-space-2) 0;
}

#header .header-nav-main nav > ul > li > .dropdown-menu li a {
    color: var(--cimo-neutral-700);
    font-size: var(--cimo-fs-sm);
    font-weight: 500;
    padding: var(--cimo-space-2) var(--cimo-space-4);
    min-height: 40px;
    display: flex;
    align-items: center;
}

#header .header-nav-main nav > ul > li > .dropdown-menu li a:hover {
    background-color: var(--cimo-primary-a08);
    color: var(--cimo-primary-600);
}

/* --- Tabs --------------------------------------------------------------- */
.nav-tabs {
    border-bottom: 1px solid var(--cimo-neutral-200);
    gap: var(--cimo-space-1);
}

.nav-tabs .nav-link,
.nav-tabs li .nav-link {
    background: transparent;
    border: 0;
    border-bottom: 2px solid transparent;
    border-radius: 0;
    color: var(--cimo-neutral-700);
    font-size: var(--cimo-fs-sm);
    font-weight: 600;
    letter-spacing: 0;
    min-height: 44px;
    padding: var(--cimo-space-3) var(--cimo-space-4);
    transition:
        color var(--cimo-dur) var(--cimo-ease),
        border-color var(--cimo-dur) var(--cimo-ease);
}

.nav-tabs .nav-link:hover,
.nav-tabs li .nav-link:hover {
    background: transparent;
    border-bottom-color: var(--cimo-neutral-300);
    color: var(--cimo-neutral-950);
}

.nav-tabs .nav-link.active,
.nav-tabs li .nav-link.active {
    background: transparent;
    border-bottom-color: var(--cimo-primary-500);
    color: var(--cimo-primary-600);
    font-weight: 700;
}

/* --- Paginação ----------------------------------------------------------
   Precisa de fazer wrap: com muitas páginas a lista passava dos 375px e
   empurrava o conteúdo para fora do ecrã. -------------------------------- */
.pagination {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cimo-space-1);
    justify-content: center;
    padding-left: 0;
    row-gap: var(--cimo-space-2);
}

.pagination {
    --bs-pagination-color: var(--cimo-neutral-700);
    --bs-pagination-bg: var(--cimo-surface);
    --bs-pagination-border-color: var(--cimo-neutral-200);
    --bs-pagination-hover-color: var(--cimo-neutral-950);
    --bs-pagination-hover-bg: var(--cimo-neutral-100);
    --bs-pagination-hover-border-color: var(--cimo-neutral-300);
    --bs-pagination-focus-color: var(--cimo-neutral-950);
    --bs-pagination-focus-bg: var(--cimo-neutral-100);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: var(--cimo-primary-500);
    --bs-pagination-active-border-color: var(--cimo-primary-500);
    /* Um controlo inativo continua a ter de se ler. */
    --bs-pagination-disabled-color: var(--cimo-neutral-600);
    --bs-pagination-disabled-bg: var(--cimo-neutral-50);
    --bs-pagination-disabled-border-color: var(--cimo-neutral-200);
}

.page-link,
.pagination .page-link {
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-sm) !important;
    color: var(--cimo-neutral-700);
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--cimo-fs-sm);
    font-weight: 600;
}

.page-link:hover {
    background-color: var(--cimo-neutral-100);
    border-color: var(--cimo-neutral-300);
    color: var(--cimo-neutral-950);
}

.page-item.active .page-link {
    background-color: var(--cimo-primary-500);
    border-color: var(--cimo-primary-500);
    color: #fff;
}

.page-item.disabled .page-link,
.pagination .page-item.disabled .page-link,
.pagination .page-item.disabled span.page-link {
    background-color: var(--cimo-neutral-50);
    border-color: var(--cimo-neutral-200);
    color: var(--cimo-neutral-600);
}


/* ==========================================================================
   7. PAGE HEADER — 25 cópias no site. Neutro, com a hierarquia na tipografia.
   ========================================================================== */

.page-header,
.page-header.page-header-modern,
.page-header.bg-color-grey {
    background-color: var(--cimo-neutral-100) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--cimo-neutral-200);
    padding: var(--cimo-section-y-sm) 0;
}

/* Vence .page-header-modern.page-header-lg/-md do Porto (65/50px); os 35px de margem somados ao py-5 davam 83px de vazio. */
.page-header.page-header-modern.bg-color-grey.page-header-lg,
.page-header.page-header-modern.bg-color-grey.page-header-md,
.page-header.page-header-modern.bg-color-grey.page-header-no-margin {
    margin-bottom: 0;
    padding: var(--cimo-space-6) 0;
}

.page-header h1 {
    color: var(--cimo-neutral-900);
    font-size: var(--cimo-fs-h1);
    font-weight: 700;
    letter-spacing: var(--cimo-ls-heading);
    line-height: var(--cimo-lh-tight);
    margin-bottom: 0;
    text-transform: none;
    border: 0;
    padding: 0;
}

/* Escala h2, não h1: a 44px em maiúsculas ficava enorme; 34px iguala os H2 do conteúdo sem ficar abaixo deles. */
.page-header.page-header-modern.bg-color-grey.page-header-lg h1,
.page-header.page-header-modern.bg-color-grey.page-header-md h1,
.page-header.page-header-modern.bg-color-grey.page-header-no-margin h1 {
    font-size: var(--cimo-fs-h2);
}

.page-header .breadcrumb {
    background-color: transparent;
    font-size: var(--cimo-fs-xs);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: var(--cimo-space-3);
    padding: 0;
}

.page-header .breadcrumb li,
.page-header .breadcrumb a {
    color: var(--cimo-neutral-600);
}

.page-header .breadcrumb a:hover {
    color: var(--cimo-primary-500);
}

.page-header .breadcrumb .active,
.page-header .breadcrumb li.active {
    color: var(--cimo-neutral-800);
    font-weight: 600;
}

/* Cabeçalho de secção — substitui os 8 `heading heading-border`. */
.cimo-section-heading {
    margin-bottom: var(--cimo-space-6);
}

.cimo-section-heading h2,
.cimo-section-heading h3 {
    color: var(--cimo-neutral-900);
    margin-bottom: var(--cimo-space-2);
}

.cimo-section-heading p {
    color: var(--cimo-neutral-600);
    max-width: var(--cimo-measure);
    margin-bottom: 0;
}

/* A barra fina é o toque de marca — não o título inteiro a verde. */
.cimo-section-heading--rule h2::after,
.cimo-section-heading--rule h3::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background-color: var(--cimo-primary-500);
    border-radius: 2px;
    margin-top: var(--cimo-space-3);
}

.cimo-section-heading--center h2::after,
.cimo-section-heading--center h3::after {
    margin-inline: auto;
}

.cimo-section-heading--center p {
    margin-inline: auto;
}

.cimo-page-header__subtitle {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-body);
    margin-bottom: 0;
    margin-top: var(--cimo-space-3);
    max-width: var(--cimo-measure);
    margin-inline: auto;
}

.cimo-section {
    padding-block: var(--cimo-section-y);
}

.cimo-section--sunken {
    background-color: var(--cimo-neutral-100);
}


/* ==========================================================================
   7c. HERO DA HOME
   --------------------------------------------------------------------------
   Carrossel de altura fixa com sobreposição escura. O `text-shadow` duro em
   três elementos passa a um véu uniforme, que é o que dá legibilidade sem
   sujar a tipografia.
   ========================================================================== */

.cimo-hero {
    height: 700px;
}

/* A imagem continua inline porque é dinâmica; o enquadramento é do sistema. */
.cimo-hero__slide {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

/* O véu é dimensionado para o pior caso: texto branco sobre uma fotografia
   totalmente clara. A 0,68 de alpha o branco dá 5,4:1 mesmo aí, o que cobre
   o eyebrow de 12px e o lead de 18px. As bordas ficam mais leves para a
   imagem continuar a respirar. */
.cimo-hero__overlay {
    background: linear-gradient(
        180deg,
        rgba(3, 43, 28, 0.46) 0%,
        rgba(3, 43, 28, 0.68) 38%,
        rgba(3, 43, 28, 0.70) 72%,
        rgba(3, 43, 28, 0.80) 100%
    );
    z-index: 2;
}

.cimo-hero__eyebrow {
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--cimo-fs-label);
    font-weight: 600;
    letter-spacing: var(--cimo-ls-label);
    text-transform: uppercase;
}

.cimo-hero__title {
    color: #fff;
    font-size: var(--cimo-fs-display);
    font-weight: 700;
    letter-spacing: var(--cimo-ls-display);
    line-height: 1.1;
}

.cimo-hero__lead {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.125rem;
    line-height: 1.6;
    max-width: 62ch;
}

@media (max-width: 767.98px) {
    .cimo-hero {
        height: 520px;
    }

    .cimo-hero__lead {
        font-size: 1rem;
    }
}

/* Subtítulo de secção — havia 5 tamanhos de "lead" diferentes na home. */
.cimo-lead {
    color: var(--cimo-neutral-600);
    font-size: 1.125rem;
    font-weight: 400;
    line-height: 1.6;
    margin-inline: auto;
    max-width: var(--cimo-measure);
}

/* Tagline da marca — um dos poucos textos que justifica o primary. */
.cimo-tagline {
    color: var(--cimo-primary-500);
    font-size: var(--cimo-fs-body);
    font-weight: 600;
}


/* ==========================================================================
   7b. PÁGINAS DE CONTEÚDO — texto corrido vindo do CMS.
   Este bloco estava duplicado byte-a-byte nas 6 páginas de research-group
   e repetido em variações nas páginas do CIMO.
   ========================================================================== */

.page-content {
    color: var(--cimo-neutral-800);
    line-height: var(--cimo-lh-body);
}

.page-content h2,
.page-content h3,
.page-content h4 {
    color: var(--cimo-neutral-900);
    margin-top: var(--cimo-space-6);
    margin-bottom: var(--cimo-space-4);
}

.page-content h2:first-child,
.page-content h3:first-child {
    margin-top: 0;
}

.page-content p {
    margin-bottom: var(--cimo-space-5);
    max-width: var(--cimo-measure);
}

.page-content ul,
.page-content ol {
    margin-bottom: var(--cimo-space-5);
    padding-left: var(--cimo-space-6);
    max-width: var(--cimo-measure);
}

.page-content li {
    margin-bottom: var(--cimo-space-2);
}

.page-content a {
    text-decoration: underline;
    text-underline-offset: 0.18em;
    text-decoration-color: var(--cimo-primary-200);
}

.page-content a:hover {
    text-decoration-color: currentColor;
}

.page-content img {
    border-radius: var(--cimo-radius-lg);
}

.page-content blockquote {
    border-left: 3px solid var(--cimo-primary-500);
    color: var(--cimo-neutral-700);
    margin: var(--cimo-space-6) 0;
    padding-left: var(--cimo-space-5);
}

.page-content table {
    width: 100%;
    margin-bottom: var(--cimo-space-5);
}

/* Imagem destacada — a sombra é discreta e não há lift, porque a imagem
   não é um alvo clicável. */
.featured-image {
    border-radius: var(--cimo-radius-lg);
    box-shadow: var(--cimo-shadow-sm);
    overflow: hidden;
}

.featured-image img {
    border-radius: var(--cimo-radius-lg);
    display: block;
    height: auto;
    object-fit: cover;
    width: 100%;
}

.content-section {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
}

.image-container {
    align-items: flex-start;
    display: flex;
    justify-content: center;
}

@media (max-width: 767.98px) {
    .content-section,
    .image-section {
        margin-bottom: var(--cimo-space-6);
    }
}


/* ==========================================================================
   8. SIDEBAR DE FILTROS — 3 cópias (publications, phd-thesis, projects).
   ========================================================================== */

.cimo-filter-panel,
.filter-section-sidebar,
.stats-sidebar {
    background-color: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-lg);
    padding: var(--cimo-space-5);
    margin-bottom: var(--cimo-space-5);
}

.cimo-filter-panel h4,
.filter-section-sidebar h4 {
    font-size: var(--cimo-fs-label);
    font-weight: 600;
    letter-spacing: var(--cimo-ls-label);
    text-transform: uppercase;
    color: var(--cimo-neutral-600);
    margin-bottom: var(--cimo-space-4);
}

/* "Clear filters" é uma ação secundária, não destrutiva — neutro. */
.cimo-filter-clear {
    background: transparent;
    border: 0;
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-sm);
    font-weight: 600;
    padding: var(--cimo-space-2) 0;
    min-height: 44px;
}

.cimo-filter-clear:hover {
    color: var(--cimo-neutral-900);
    text-decoration: underline;
}

/* Pílulas de filtro (people). Activo = primary sólido.
   Padding lateral em -4 (não -5): com 5 chips + pesquisa a competir pela
   mesma linha, 8px a menos de cada lado por chip (40 no total) ajuda a
   caber a larguras onde antes faltavam ~120px para tudo ficar numa linha. */
.cimo-filter-pill,
.filter-buttons .btn {
    background-color: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-300);
    border-radius: var(--cimo-radius-pill);
    color: var(--cimo-neutral-700);
    font-size: var(--cimo-fs-sm);
    font-weight: 600;
    min-height: 44px;
    padding: var(--cimo-space-2) var(--cimo-space-4);
}

.cimo-filter-pill:hover,
.filter-buttons .btn:hover {
    border-color: var(--cimo-primary-500);
    color: var(--cimo-primary-600);
    background-color: var(--cimo-primary-a04);
}

.cimo-filter-pill.active,
.filter-buttons .btn.active {
    background-color: var(--cimo-primary-500);
    border-color: var(--cimo-primary-500);
    color: #fff;
}

.cimo-filter-pill.active:hover,
.filter-buttons .btn.active:hover {
    background-color: var(--cimo-primary-600);
    border-color: var(--cimo-primary-600);
    color: #fff;
}

.cimo-filter-pill .badge,
.filter-buttons .btn .badge {
    background-color: var(--cimo-neutral-100) !important;
    color: var(--cimo-neutral-700) !important;
    border: 0;
    margin-left: var(--cimo-space-2);
}

.cimo-filter-pill.active .badge,
.filter-buttons .btn.active .badge {
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}


/* ==========================================================================
   8b. PÁGINAS DE CONSULTA DE DADOS
   --------------------------------------------------------------------------
   publications (5.372 registos), phd-thesis, projects-list,
   intellectual-property. Estas páginas são para varrer e filtrar, não para
   ler — daí a escala mais apertada que o resto do site.

   Substitui 285 linhas de CSS que estavam duplicadas entre
   publications.blade.php e phd-thesis.blade.php, diferindo apenas nos nomes
   dos seletores.
   ========================================================================== */

/* --- Cabeçalho da página (era um gradiente cinzento) ------------------- */
.publications-header,
.thesis-header,
.projects-header,
.cimo-data-header {
    background: var(--cimo-neutral-100);
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-lg);
    margin-bottom: var(--cimo-space-6);
    padding: var(--cimo-space-6);
}

/* O título era verde; a hierarquia faz-se por tamanho e peso. */
.publications-title,
.thesis-title,
.projects-title {
    color: var(--cimo-neutral-900);
    margin-bottom: var(--cimo-space-3);
}

.publications-description,
.thesis-description,
.projects-description {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-body);
    line-height: var(--cimo-lh-body);
    margin-bottom: 0;
    max-width: var(--cimo-measure);
}

/* --- Grelha de estatísticas ------------------------------------------- */
.stats-grid {
    display: grid;
    gap: var(--cimo-space-4);
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    margin-bottom: var(--cimo-space-6);
}

/* Era um cartão com gradiente verde e texto branco. Passa a superfície
   neutra com o número em primary — o dado é que interessa, não o fundo. */
.stat-card {
    background: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-lg);
    box-shadow: var(--cimo-shadow-xs);
    color: var(--cimo-neutral-900);
    padding: var(--cimo-space-5);
    text-align: center;
}

.stat-number {
    color: var(--cimo-primary-500);
    display: block;
    font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.stat-label {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-label);
    font-weight: 600;
    letter-spacing: var(--cimo-ls-label);
    text-transform: uppercase;
    opacity: 1;
}

/* --- Contentor da tabela ---------------------------------------------- */
.publications-container,
.thesis-container {
    background: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-lg);
    box-shadow: var(--cimo-shadow-sm);
    margin-bottom: var(--cimo-space-6);
    padding: var(--cimo-space-6);
}

.cimo-data-title {
    align-items: center;
    border-bottom: 1px solid var(--cimo-neutral-200);
    display: flex;
    gap: var(--cimo-space-3);
    margin-bottom: var(--cimo-space-5);
    padding-bottom: var(--cimo-space-4);
}

.cimo-data-title h3 {
    color: var(--cimo-neutral-900);
    margin: 0;
}

.cimo-data-title .cimo-icon-puck {
    font-size: 1.125rem;
    height: 44px;
    width: 44px;
}

/* Verde escuro distingue o título com link (DOI/URL) do título sem link. */
.publication-link,
.thesis-link,
.publication-link:visited,
.thesis-link:visited {
    color: var(--cimo-primary-700);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--cimo-dur) var(--cimo-ease);
}

.publication-link:hover,
.thesis-link:hover {
    color: var(--cimo-primary-500);
    text-decoration: underline;
    text-underline-offset: 0.15em;
}

.publications-container table.dataTable thead th,
.thesis-container table.dataTable thead th {
    background: var(--cimo-primary-50) !important;
    border-bottom-color: var(--cimo-primary-200) !important;
    color: var(--cimo-primary-800) !important;
}

/* O DataTables pinta as riscas e o hover com rgba(0,0,0,…); aqui ficam no tom da marca. */
.publications-container table.dataTable.table-striped > tbody > tr.odd > *,
.thesis-container table.dataTable.table-striped > tbody > tr.odd > * {
    box-shadow: inset 0 0 0 9999px var(--cimo-primary-a04);
}

.publications-container table.dataTable.table-hover > tbody > tr:hover > *,
.thesis-container table.dataTable.table-hover > tbody > tr:hover > * {
    box-shadow: inset 0 0 0 9999px var(--cimo-primary-a08);
}

/* --- Sidebar ---------------------------------------------------------- */
.sidebar {
    background: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-lg);
    height: fit-content;
    padding: var(--cimo-space-5);
    position: sticky;
    top: var(--cimo-space-6);
}

.filter-section-sidebar {
    margin-bottom: var(--cimo-space-6);
}

.filter-section-sidebar:last-child {
    margin-bottom: 0;
}

/* A sidebar já é o cartão: as secções dentro dela não precisam de outro. */
.cimo-sidebar-flat .filter-section-sidebar,
.cimo-sidebar-flat .stats-sidebar {
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    margin-top: 0;
    padding: 0;
}

.cimo-sidebar-flat .stats-sidebar,
.cimo-sidebar-flat .stat-item-sidebar:last-child {
    margin-bottom: 0;
}

/* O ponto de cor substitui o triângulo que o Porto põe antes de cada link da lista. */
.cimo-sidebar-flat .nav-list li::before,
.cimo-sidebar-flat .nav-list .nav-link::before {
    content: none;
    display: none;
}

.filter-header-sidebar h5 {
    border-bottom: 1px solid var(--cimo-neutral-200);
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-label);
    font-weight: 600;
    letter-spacing: var(--cimo-ls-label);
    margin-bottom: var(--cimo-space-4);
    padding-bottom: var(--cimo-space-3);
    text-transform: uppercase;
}

.filter-header-sidebar h5 i {
    color: var(--cimo-primary-500);
}

.filter-controls-sidebar .form-label {
    color: var(--cimo-neutral-700);
    font-size: var(--cimo-fs-sm);
    font-weight: 600;
    margin-bottom: var(--cimo-space-2);
}

.filter-controls-sidebar select,
.filter-controls-sidebar input {
    border: 1px solid var(--cimo-neutral-300);
    border-radius: var(--cimo-radius-md);
    font-size: var(--cimo-fs-sm);
    min-height: 44px;
    padding: var(--cimo-space-2) var(--cimo-space-3);
}

.filter-controls-sidebar select:focus,
.filter-controls-sidebar input:focus {
    border-color: var(--cimo-primary-500);
    box-shadow: var(--cimo-focus-ring);
}

/* Antes: `.filter-controls-sidebar .btn { background: #6c757d }` pintava de
   cinzento qualquer btn-primary colocado na sidebar. Os botões voltam a ser
   o que a classe diz que são. */
.filter-controls-sidebar .btn {
    font-size: var(--cimo-fs-sm);
    width: 100%;
}

.filter-controls-sidebar select.loading,
.filter-controls-sidebar input.loading {
    opacity: 0.7;
    pointer-events: none;
}

.filter-message {
    margin-bottom: var(--cimo-space-4);
}

.filter-message .alert {
    border-radius: var(--cimo-radius-md);
    box-shadow: none;
}

/* Painel "filtros activos" — é um dos poucos sítios onde o primary claro
   como fundo comunica algo: o estado da consulta. */
.filter-status {
    background-color: var(--cimo-primary-50) !important;
    border: 1px solid var(--cimo-primary-200) !important;
    border-left: 3px solid var(--cimo-primary-500) !important;
    border-radius: var(--cimo-radius-md);
    color: var(--cimo-neutral-800) !important;
    font-size: var(--cimo-fs-sm);
}

.filter-status strong {
    color: var(--cimo-primary-700);
}

/* --- Linha de registo (projetos, patentes, software) -------------------
   Não é um .card: é uma linha de lista larga. Havia dois padrões quase
   iguais (.project-item e .patent-item) com hovers diferentes. ---------- */

.project-item,
.patent-item {
    background: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-200);
    border-left: 3px solid transparent;
    border-radius: var(--cimo-radius-md);
    margin-bottom: var(--cimo-space-3);
    padding: var(--cimo-space-5);
    transition:
        border-color var(--cimo-dur) var(--cimo-ease),
        box-shadow var(--cimo-dur) var(--cimo-ease);
}

/* A barra à esquerda aparece no hover — sinal de foco sem deslocar nada. */
.project-item:hover,
.patent-item:hover {
    border-color: var(--cimo-neutral-300);
    border-left-color: var(--cimo-primary-500);
    box-shadow: var(--cimo-shadow-sm);
}

.project-title,
.patent-title,
.patent-title a {
    color: var(--cimo-neutral-900);
    font-size: var(--cimo-fs-h5);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--cimo-dur) var(--cimo-ease);
}

.project-title:hover,
.patent-title a:hover,
.project-item:hover .project-title,
.patent-item:hover .patent-title a {
    color: var(--cimo-primary-500);
    text-decoration: none;
}

.project-meta,
.patent-meta {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-sm);
    margin-top: var(--cimo-space-2);
}

.project-meta .badge,
.patent-meta .badge {
    font-size: var(--cimo-fs-xs);
    padding: 0.2em 0.55em;
}

.patent-meta-item {
    align-items: center;
    color: var(--cimo-neutral-600);
    display: flex;
    font-size: var(--cimo-fs-sm);
    gap: var(--cimo-space-2);
}

/* Os ícones dos metadados são decorativos — neutros, não primary. */
.patent-meta-item i {
    color: var(--cimo-neutral-500);
    width: 16px;
}

/* Tipo de propriedade intelectual: categoria da marca, versão suave em vez
   de uma pílula verde sólida. */
.patent-badge {
    background: var(--cimo-primary-a08);
    border: 1px solid var(--cimo-primary-200);
    border-radius: var(--cimo-radius-pill);
    color: var(--cimo-primary-600);
    font-size: var(--cimo-fs-xs);
    font-weight: 600;
    padding: 0.25em 0.8em;
}

.patent-summary {
    color: var(--cimo-neutral-700);
    line-height: var(--cimo-lh-body);
    margin-bottom: var(--cimo-space-4);
    max-width: var(--cimo-measure);
}

.patent-researchers {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cimo-space-2);
    margin-top: var(--cimo-space-4);
}

/* Etiqueta de pessoa — categorização, portanto neutra; ganha a marca no
   hover, que é quando se torna uma ação. */
.researcher-tag {
    background: var(--cimo-neutral-100);
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-pill);
    color: var(--cimo-neutral-700);
    display: inline-block;
    font-size: var(--cimo-fs-xs);
    font-weight: 500;
    padding: 0.25em 0.8em;
    text-decoration: none;
    transition:
        background-color var(--cimo-dur) var(--cimo-ease),
        border-color var(--cimo-dur) var(--cimo-ease),
        color var(--cimo-dur) var(--cimo-ease);
}

.researcher-tag:hover {
    background: var(--cimo-primary-a08);
    border-color: var(--cimo-primary-200);
    color: var(--cimo-primary-600);
    text-decoration: none;
}

/* Estado vazio local — alinhado com <x-empty-state>. */
.empty-state {
    color: var(--cimo-neutral-600);
    padding: var(--cimo-space-8) var(--cimo-space-5);
    text-align: center;
}

.empty-state i {
    color: var(--cimo-neutral-400);
    display: block;
    font-size: 2rem;
    margin-bottom: var(--cimo-space-4);
}

.empty-state h4 {
    color: var(--cimo-neutral-800);
    margin-bottom: var(--cimo-space-2);
}

.tab-content {
    padding-top: var(--cimo-space-5);
}

/* --- Navegação por tipo, com contadores ------------------------------- */
.nav-list .nav-link {
    align-items: center;
    border-bottom: 1px solid var(--cimo-neutral-200);
    border-left: 3px solid transparent;
    color: var(--cimo-neutral-700);
    display: flex;
    font-size: var(--cimo-fs-sm);
    justify-content: space-between;
    min-height: 44px;
    padding: var(--cimo-space-2) var(--cimo-space-3);
    transition:
        color var(--cimo-dur) var(--cimo-ease),
        background-color var(--cimo-dur) var(--cimo-ease),
        border-color var(--cimo-dur) var(--cimo-ease);
}

.nav-list .nav-link:hover {
    background-color: var(--cimo-neutral-50);
    color: var(--cimo-neutral-950);
}

/* Activo: cor + peso + barra. Nunca só cor. */
.nav-list .nav-link.active {
    background-color: var(--cimo-primary-a08);
    border-left-color: var(--cimo-primary-500);
    color: var(--cimo-primary-600);
    font-weight: 600;
}

.nav-list .nav-link .badge {
    background-color: var(--cimo-neutral-100) !important;
    color: var(--cimo-neutral-700) !important;
    font-size: var(--cimo-fs-xs);
    padding: 0.2em 0.55em;
}

.nav-list .nav-link.active .badge {
    background-color: var(--cimo-primary-500) !important;
    color: #fff !important;
}

/* --- Estatísticas da sidebar ------------------------------------------ */
.stats-sidebar {
    margin-top: var(--cimo-space-4);
}

.stat-item-sidebar {
    align-items: center;
    background: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-md);
    display: flex;
    gap: var(--cimo-space-3);
    margin-bottom: var(--cimo-space-3);
    padding: var(--cimo-space-3) var(--cimo-space-4);
}

.stat-item-sidebar .cimo-icon-puck {
    font-size: 1rem;
    height: 40px;
    width: 40px;
}

.stat-number-sidebar {
    color: var(--cimo-primary-500);
    display: block;
    font-size: 1.375rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.stat-label-sidebar {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-xs);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

@media (max-width: 991.98px) {
    /* Abaixo de lg a sidebar deixa de ser fixa e vai para cima da tabela. */
    .sidebar {
        margin-bottom: var(--cimo-space-6);
        position: static;
        top: auto;
    }
}

@media (max-width: 767.98px) {
    .stats-grid {
        grid-template-columns: 1fr 1fr;
    }
}


/* ==========================================================================
   9. PESSOAS — avatares e cartões do diretório.
   ========================================================================== */

.cimo-avatar {
    border-radius: var(--cimo-radius-circle);
    object-fit: cover;
    object-position: center top;
    background-color: var(--cimo-neutral-100);
    box-shadow:
        0 0 0 4px var(--cimo-surface),
        0 0 0 5px var(--cimo-neutral-200);
    transition: box-shadow var(--cimo-dur) var(--cimo-ease);
}

.cimo-avatar--xl { width: 190px; height: 190px; }
.cimo-avatar--lg { width: 180px; height: 180px; }
.cimo-avatar--md { width: 112px; height: 112px; }
.cimo-avatar--sm { width: 80px;  height: 80px;  }
/* xs: linhas de lista (supervisão), onde 80px já domina a linha. */
.cimo-avatar--xs { width: 44px;  height: 44px;  }

.card:hover .cimo-avatar,
.researcher-card-hover:hover .cimo-avatar {
    box-shadow:
        0 0 0 4px var(--cimo-surface),
        0 0 0 5px var(--cimo-primary-a35);
}

/* Avatar de iniciais — a cor vem de uma paleta derivada do logo,
   escolhida de forma estável em PHP. Todas passam AA com texto branco. */
.cimo-avatar-initials {
    align-items: center;
    color: #fff;
    display: inline-flex;
    font-size: 1.75rem;
    font-weight: 600;
    justify-content: center;
    letter-spacing: 0.02em;
    line-height: 1;
}

.cimo-avatar-initials.cimo-avatar--xs { font-size: 0.875rem; }
.cimo-avatar-initials.cimo-avatar--sm { font-size: 1.25rem; }
.cimo-avatar-initials.cimo-avatar--lg { font-size: 2.75rem; }
.cimo-avatar-initials.cimo-avatar--xl { font-size: 3.25rem; letter-spacing: 0.04em; }

/* O anel do avatar na ficha do investigador é mais marcado que na grelha. */
.cimo-avatar--xl {
    box-shadow:
        0 0 0 5px var(--cimo-surface),
        0 0 0 6px var(--cimo-neutral-200);
}

@media (max-width: 767.98px) {
    .cimo-avatar--xl { width: 150px; height: 150px; }
    .cimo-avatar-initials.cimo-avatar--xl { font-size: 2.5rem; }
}

.cimo-person-name {
    color: var(--cimo-neutral-900);
    font-size: var(--cimo-fs-h5);
    font-weight: 600;
    line-height: 1.35;
    margin-bottom: var(--cimo-space-1);
}

.cimo-person-role {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-sm);
    margin-bottom: var(--cimo-space-3);
}

.cimo-person-contact {
    border-top: 1px solid var(--cimo-neutral-200);
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-xs);
    margin-top: var(--cimo-space-4);
    padding-top: var(--cimo-space-3);
    word-break: break-word;
}

.cimo-person-contact i {
    color: var(--cimo-neutral-500);
}

/* --- Diretório (people/index) -----------------------------------------
   Toolbar de filtros + pesquisa num só cartão, grelha de cartões de altura
   uniforme. O chip de grupo é o único elemento colorido do cartão. ----- */

.people-toolbar {
    align-items: center;
    background: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-lg);
    display: flex;
    flex-wrap: wrap;
    gap: var(--cimo-space-3) var(--cimo-space-2);
    margin-bottom: var(--cimo-space-6);
    padding: var(--cimo-space-5);
}

/* display:contents: os 5 chips e o formulário de pesquisa ficam TODOS como
   itens diretos de .people-toolbar, um único nível de flex-wrap em vez de
   dois aninhados. Um wrapper flex dentro de outro wrap não tem forma
   inequívoca de anunciar "preciso de X px" ao pai antes de saber quanto
   espaço lhe vai calhar — medi com o DevTools Protocol e via, consoante o
   valor de flex-basis, o mesmo bug para lados diferentes (quebra cedo
   demais com "auto", ou os chips e a pesquisa ficam desalinhados com "0%").
   Sem wrapper, a decisão de quebra é uma só, sem ambiguidade. O <div> em si
   não carrega semântica (não é lista, não tem papel ARIA), por isso
   desaparecer do layout não tira nada à acessibilidade dos links lá dentro. */
.filter-buttons {
    display: contents;
}

.researcher-card-hover {
    cursor: pointer;
    overflow: hidden;
}

/* O nome ganha a cor da marca no hover — sinal de que o cartão é clicável. */
.researcher-card-hover:hover h6 {
    color: var(--cimo-primary-500) !important;
}

/* Só centra e dá respiro — o próprio <x-avatar> já traz o anel, o tamanho
   e o brilho no hover (via ".card:hover .cimo-avatar", genérico). Havia aqui
   uma segunda caixa (.researcher-photo) com o seu próprio anel, que anulava
   o do avatar — duas bordas, uma a cancelar a outra. */
.researcher-photo-wrap {
    display: flex;
    justify-content: center;
    padding: var(--cimo-space-6) var(--cimo-space-4) var(--cimo-space-2);
}

.researcher-card-body {
    padding: var(--cimo-space-2) var(--cimo-space-4) var(--cimo-space-4);
    text-align: center;
}

/* Nome e função numa linha, truncados: numa grelha de 388 pessoas o
   objetivo é varrer e reconhecer, não ler. */
.researcher-card-body h6,
.researcher-role {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.researcher-role {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-xs);
    margin-bottom: var(--cimo-space-3);
}

.researcher-group-chip {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: var(--cimo-space-3);
}

.results-section {
    margin-top: var(--cimo-space-4);
}

/* --- Pesquisa ----------------------------------------------------------
   260px de largura preferida (não 320): só importa como item flex na
   toolbar de /people — na sidebar de /news este formulário nem é filho de
   um flex container, por isso o valor não muda nada lá. Em /people, estes
   60px a menos ajudam a caber ao lado dos 5 chips a mais larguras. -------- */
.search-form {
    flex: 0 1 260px;
    margin: 0;
}

.search-input-group {
    display: flex;
    gap: var(--cimo-space-2);
}

.search-input {
    background: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-300);
    border-radius: var(--cimo-radius-md);
    flex: 1;
    font-size: var(--cimo-fs-sm);
    min-height: 44px;
    min-width: 0;
    padding: var(--cimo-space-2) var(--cimo-space-3);
    transition:
        border-color var(--cimo-dur) var(--cimo-ease),
        box-shadow var(--cimo-dur) var(--cimo-ease);
}

.search-input:focus {
    background: var(--cimo-surface);
    border-color: var(--cimo-primary-500);
    box-shadow: var(--cimo-focus-ring);
    outline: none;
}

.search-input::placeholder {
    color: var(--cimo-neutral-400);
    font-weight: 400;
}

.search-btn {
    align-items: center;
    background: var(--cimo-primary-500);
    border: 1px solid var(--cimo-primary-500);
    border-radius: var(--cimo-radius-md);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    justify-content: center;
    min-height: 44px;
    min-width: 44px;
    padding: var(--cimo-space-2) var(--cimo-space-4);
    transition:
        background-color var(--cimo-dur) var(--cimo-ease),
        border-color var(--cimo-dur) var(--cimo-ease);
}

.search-btn:hover {
    background: var(--cimo-primary-600);
    border-color: var(--cimo-primary-600);
}

@media (max-width: 767.98px) {
    .people-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .filter-buttons .btn,
    .cimo-filter-pill {
        flex: 1 1 auto;
        text-align: center;
    }

    .search-form {
        flex: 1 1 auto;
    }
}


/* ==========================================================================
   9b. FICHA DO INVESTIGADOR (people/detail)
   --------------------------------------------------------------------------
   Redesenhada de zero. O que estava mal não era a cor — era a arquitetura:
   uma banda inteira a dizer "RESEARCHER PROFILE" (200px só para anunciar o
   tipo de página) e o nome da pessoa repetido logo abaixo dentro de um
   cartão. Duas zonas para uma informação.

   Agora a banda É a identificação: nome como <h1>, fotografia, categoria,
   afiliação e identificadores externos (ORCID / Scopus / Ciência ID), que
   estavam na base de dados e nunca apareciam em sítio nenhum.

   Disciplina de cor: o nome ganha por tamanho, não por cor; a categoria
   profissional é o único elemento em primary do cabeçalho; o email é o
   único chip com a marca (é a ação provável da página); no painel de
   produção o verde existe só nas barras do gráfico.
   ========================================================================== */

/* Largura: três tabelas de 6 colunas e uma série temporal de 25 anos. Usa a
   largura toda, com limite para não esticar sem fim. O mesmo valor no
   cabeçalho e no corpo mantém as duas zonas alinhadas à esquerda. */
.cimo-page-wide {
    margin-inline: auto;
    max-width: 1560px;
}

/* A banda reaproveita .page-header (fundo neutral-100, borda inferior,
   tipografia do breadcrumb). Só muda o alinhamento: a ficha de uma pessoa
   lê-se da esquerda, não centrada como um título de secção. */
/* margin-bottom: 0 — o Porto dá 30px de margem ao .page-header, que somados
   ao py-5 do corpo faziam 78px de vazio entre a banda e o primeiro painel. */
.cimo-profile-header {
    margin-bottom: 0;
    text-align: left;
}

.cimo-profile-header .breadcrumb {
    justify-content: flex-start;
    text-align: left;
}

.cimo-profile-id {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cimo-space-4) var(--cimo-space-6);
}

.cimo-profile-id__photo {
    flex-shrink: 0;
}

/* min-width: 0 — sem isto um nome comprido impede a coluna de encolher e
   empurra o conteúdo para fora da banda. */
.cimo-profile-id__body {
    flex: 1 1 320px;
    min-width: 0;
}

/* Especificidade: o Porto declara `.page-header.page-header-modern h1`
   (0,2,1) com 28px fixos. Um seletor de classe sozinho perdia. */
.cimo-profile-header h1.cimo-profile-id__name {
    color: var(--cimo-neutral-900);
    font-size: var(--cimo-fs-h1);
    font-weight: 700;
    letter-spacing: var(--cimo-ls-heading);
    line-height: var(--cimo-lh-tight);
    margin-bottom: var(--cimo-space-2);
    text-transform: none;
}

/* A categoria é o subtítulo do nome — e o único elemento de marca aqui. */
.cimo-profile-id__role {
    color: var(--cimo-primary-600);
    font-size: 1.0625rem;
    font-weight: 600;
    line-height: var(--cimo-lh-snug);
    margin-bottom: var(--cimo-space-2);
}

.cimo-profile-id__affiliation {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-sm);
    margin-bottom: var(--cimo-space-2);
}

.cimo-profile-id__affiliation span:not(:last-child)::after {
    color: var(--cimo-neutral-400);
    content: "·";
    margin: 0 var(--cimo-space-2);
}

/* Linha de investigação: leva rótulo porque o valor sozinho ("Sustainable
   Agriculture and Innovative Agro-food Chains") não se distingue do grupo. */
.cimo-profile-id__line {
    color: var(--cimo-neutral-700);
    font-size: var(--cimo-fs-sm);
    margin-bottom: 0;
    max-width: var(--cimo-measure);
}

.cimo-profile-id__line .cimo-label {
    display: block;
    margin-bottom: 2px;
}

.cimo-profile-id__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cimo-space-2);
    margin-top: var(--cimo-space-5);
}

/* --- Chips de contacto e de identificador ------------------------------
   ORCID (337 investigadores), Scopus (233) e Ciência ID (259) estavam na
   base de dados e não apareciam. Numa ficha científica são o que permite
   confirmar autoria — mais importantes do que qualquer decoração. -------- */
.cimo-id-chip {
    align-items: center;
    background-color: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-pill);
    color: var(--cimo-neutral-700);
    display: inline-flex;
    font-size: var(--cimo-fs-sm);
    gap: var(--cimo-space-2);
    line-height: 1.2;
    min-height: 44px;
    padding: var(--cimo-space-2) var(--cimo-space-4);
    text-decoration: none;
    transition:
        background-color var(--cimo-dur) var(--cimo-ease),
        border-color var(--cimo-dur) var(--cimo-ease),
        color var(--cimo-dur) var(--cimo-ease);
}

a.cimo-id-chip:hover {
    border-color: var(--cimo-primary-300);
    color: var(--cimo-primary-600);
    text-decoration: none;
}

.cimo-id-chip__label {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-xs);
    font-weight: 600;
    letter-spacing: var(--cimo-ls-label);
    text-transform: uppercase;
}

.cimo-id-chip__icon {
    color: var(--cimo-neutral-500);
    font-size: 0.875em;
}

.cimo-id-chip--action .cimo-id-chip__icon,
a.cimo-id-chip:hover .cimo-id-chip__icon,
a.cimo-id-chip:hover .cimo-id-chip__label {
    color: currentColor;
}

.cimo-id-chip__value {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* O ícone de link externo aparece a seguir ao valor, pequeno e discreto:
   avisa que sai do site sem competir com o identificador.
   neutral-500 e não -400: a -400 dava 2,28:1 sobre branco e este ícone
   transporta informação (abre noutro sítio), logo tem de cumprir os 3:1
   dos elementos não-textuais. A -500 dá 3,74:1. */
.cimo-id-chip__ext {
    color: var(--cimo-neutral-500);
    font-size: 0.6875rem;
}

a.cimo-id-chip:hover .cimo-id-chip__ext {
    color: currentColor;
}

/* O email é a ação provável desta página — o único chip com a marca. */
.cimo-id-chip--action {
    background-color: var(--cimo-primary-a08);
    border-color: var(--cimo-primary-200);
    color: var(--cimo-primary-600);
    font-weight: 600;
}

a.cimo-id-chip--action:hover {
    background-color: var(--cimo-primary-500);
    border-color: var(--cimo-primary-500);
    color: #fff;
}

/* --- Produção científica ----------------------------------------------
   Era uma grelha 2×2 de cartões (com quatro números em verde) ao lado de
   um gráfico apertado em 8 colunas. Passa a um painel só: métricas em
   régua no topo, gráfico a toda a largura por baixo. Lê-se como uma
   figura com legenda, que é o que é. ------------------------------------ */
.cimo-output {
    margin-bottom: var(--cimo-space-6);
    overflow: hidden;
}

.cimo-output__head {
    padding: var(--cimo-space-6) var(--cimo-space-6) var(--cimo-space-5);
}

.cimo-output__head .cimo-panel__title {
    margin-bottom: var(--cimo-space-2);
}

.cimo-output__head p {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-sm);
    margin-bottom: 0;
    max-width: var(--cimo-measure);
}

/* Régua de métricas: encosta às bordas do painel e separa-se por fios de
   1px em vez de quatro caixas com sombra — menos moldura, mesmos dados. */
.cimo-metric-strip {
    border-bottom: 1px solid var(--cimo-neutral-200);
    border-top: 1px solid var(--cimo-neutral-200);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.cimo-metric-strip .cimo-stat {
    background: transparent;
    border: 0;
    border-radius: 0;
    min-width: 0;
    padding: var(--cimo-space-5) var(--cimo-space-6);
    text-align: left;
}

.cimo-metric-strip .cimo-stat + .cimo-stat {
    border-left: 1px solid var(--cimo-neutral-200);
}

.cimo-output__figure {
    margin: 0;
    padding: var(--cimo-space-6);
}

/* Altura fixa + maintainAspectRatio:false no Chart.js: com proporção fixa,
   a 1500px de largura o gráfico ficava com 375px de altura e a 400px ficava
   com 100px — ilegível. Assim a altura é sempre a de leitura. */
.cimo-chart {
    height: clamp(260px, 32vw, 380px);
    position: relative;
}

/* --- Supervisão -------------------------------------------------------
   Era uma sidebar de 3 colunas com scroll interno e a altura acertada por
   jQuery ao carregar e a cada resize. As pessoas passam a linhas numa
   grelha que se adapta sozinha. ---------------------------------------- */
.cimo-supervision {
    display: grid;
    gap: var(--cimo-space-3);
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    list-style: none;
    margin: 0;
    padding: 0;
}

.cimo-supervision__item {
    align-items: center;
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-md);
    display: flex;
    gap: var(--cimo-space-3);
    padding: var(--cimo-space-3);
    transition:
        background-color var(--cimo-dur) var(--cimo-ease),
        border-color var(--cimo-dur) var(--cimo-ease);
}

.cimo-supervision__item:hover {
    background-color: var(--cimo-primary-a04);
    border-color: var(--cimo-primary-300);
}

.cimo-supervision__body {
    min-width: 0;
}

.cimo-supervision__name {
    color: var(--cimo-neutral-900);
    display: block;
    font-size: var(--cimo-fs-sm);
    font-weight: 600;
    line-height: 1.35;
    text-decoration: none;
}

a.cimo-supervision__name:hover {
    color: var(--cimo-primary-600);
}

.cimo-supervision__meta {
    align-items: center;
    color: var(--cimo-neutral-600);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--cimo-fs-xs);
    gap: var(--cimo-space-2);
    margin-top: var(--cimo-space-1);
}

/* --- Separadores ------------------------------------------------------ */

/* O Porto põe uma caixa no .tab-content (fundo, borda, sombra e 15px de
   padding). Dentro de um painel que já é um cartão, isso dava duas molduras
   encaixadas. O conteúdo do separador não é um cartão — é a continuação
   do painel. */
.tab-content {
    background: transparent;
    border: 0;
    box-shadow: none;
    padding: var(--cimo-space-5) 0 0;
}

/* Contagem por separador. Vem do próprio DataTables (recordsTotal), por
   isso não custa uma query nem pode dessincronizar do que a tabela mostra.
   :empty — enquanto o AJAX não responder, a badge não ocupa espaço. */
.cimo-tab-count {
    margin-left: var(--cimo-space-2);
}

.cimo-tab-count:empty {
    display: none;
}

/* --- Filtros dentro do <th>: o header já não é verde, por isso os
   selects levam borda neutra em vez de branca semi-transparente. ------- */
.table thead th .form-select {
    background-color: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-300);
    border-radius: var(--cimo-radius-sm);
    color: var(--cimo-neutral-900);
    font-size: var(--cimo-fs-xs);
    font-weight: 400;
    letter-spacing: 0;
    margin-top: var(--cimo-space-2);
    min-height: 34px;
    padding: var(--cimo-space-1) var(--cimo-space-2);
    text-transform: none;
}

.table thead th .form-select:focus {
    border-color: var(--cimo-primary-500);
    box-shadow: var(--cimo-focus-ring);
}

#clearFilters:hover {
    background-color: var(--cimo-neutral-200);
    border-color: var(--cimo-neutral-400);
    color: var(--cimo-neutral-950);
}

/* --- Ficha do investigador: adaptação a ecrãs estreitos ---------------- */

/* 4 métricas numa régua só cabem enquanto houver ~180px por coluna. */
@media (max-width: 991.98px) {
    .cimo-metric-strip {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Com duas colunas o fio vertical do 3.º item deixa de fazer sentido:
       passa a haver um fio horizontal entre as duas linhas. */
    .cimo-metric-strip .cimo-stat:nth-child(odd) {
        border-left: 0;
    }

    .cimo-metric-strip .cimo-stat:nth-child(n + 3) {
        border-top: 1px solid var(--cimo-neutral-200);
    }
}

@media (max-width: 767.98px) {
    /* A fotografia sobe para cima do nome; o texto continua à esquerda. */
    .cimo-profile-id {
        gap: var(--cimo-space-4);
    }

    .cimo-profile-id__body {
        flex-basis: 100%;
    }

    .cimo-metric-strip .cimo-stat {
        padding: var(--cimo-space-4);
    }

    .cimo-output__head,
    .cimo-output__figure {
        padding: var(--cimo-space-5);
    }
}


/* --- Legenda de gráfico ------------------------------------------------
   As amostras leem os mesmos tokens que o Chart.js: uma só fonte de verdade
   em vez de duas cópias manualmente sincronizadas. ---------------------- */

.cimo-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cimo-space-5);
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.cimo-legend__item {
    align-items: center;
    color: var(--cimo-neutral-700);
    display: inline-flex;
    font-size: var(--cimo-fs-xs);
    font-weight: 600;
    gap: var(--cimo-space-2);
}

.cimo-legend__swatch {
    border-radius: 2px;
    display: inline-block;
    flex-shrink: 0;
    height: 12px;
    width: 12px;
}

/* A forma distingue o tipo de série além da cor: barra vs linha. */
.cimo-legend__swatch--line {
    height: 3px;
    width: 18px;
}

.cimo-legend__swatch--viz-1 { background-color: var(--cimo-viz-1); }
.cimo-legend__swatch--viz-2 { background-color: var(--cimo-viz-2); }
.cimo-legend__swatch--viz-3 { background-color: var(--cimo-viz-3); }
.cimo-legend__swatch--viz-4 { background-color: var(--cimo-viz-4); }
.cimo-legend__swatch--viz-5 { background-color: var(--cimo-viz-5); }
.cimo-legend__swatch--viz-6 { background-color: var(--cimo-viz-6); }
.cimo-legend__swatch--viz-7 { background-color: var(--cimo-viz-7); }


/* ==========================================================================
   9c. CARTÃO DE LOGÓTIPO
   --------------------------------------------------------------------------
   O mesmo padrão existia quatro vezes com prefixos diferentes
   (.page-sponsor-*, .network-*, .startup-*), cada um com o seu hover, o seu
   raio e — em dois deles — o lima do Porto (#72c02c) no título e um azul do
   Bootstrap (rgba(0,123,255,.3)) na sombra do botão.
   ========================================================================== */

.page-sponsor-card,
.network-card,
.startup-card {
    overflow: hidden;
}

/* Sem moldura: o logótipo é conteúdo do cartão, não uma coisa emoldurada
   lá dentro — uma caixa branca com contorno sobre um cartão já branco só
   criava um retângulo extra a meio, sem função. O tamanho consistente entre
   logótipos de proporções diferentes vem do próprio `.cimo-entity-logo`
   (largura/altura fixas + object-fit:contain), não desta caixa.
   O logótipo cresce ligeiramente no hover do cartão, que tem overflow:hidden
   — o scale não desloca o layout. */
.page-sponsor-logo,
.network-logo,
.startup-logo {
    transition: transform var(--cimo-dur-slow) var(--cimo-ease);
}

.page-sponsor-card:hover .page-sponsor-logo,
.network-card:hover .network-logo,
.startup-card:hover .startup-logo {
    transform: scale(1.04);
}

.page-sponsor-card .card-title a,
.network-card .card-title a,
.startup-card .card-title a {
    color: var(--cimo-neutral-900);
}

.page-sponsor-card:hover .card-title a,
.network-card:hover .card-title a,
.startup-card:hover .card-title a {
    color: var(--cimo-primary-500);
}

/* Tipo / categoria da entidade — metadado, logo neutro. */
.page-sponsor-type,
.startup-type,
.cimo-role span {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-sm);
    font-weight: 400;
}

/* Rodapé do cartão separado por uma linha, não por cor. */
.page-support-period,
.startup-industry,
.additional-info {
    border-top: 1px solid var(--cimo-neutral-200);
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-xs);
    margin-top: var(--cimo-space-3);
    padding-top: var(--cimo-space-3);
}

@media (max-width: 767.98px) {
    /* Antes encolhia a caixa (que já não existe); o que precisa de encolher
       em telefone é a própria imagem. */
    .cimo-entity-logo {
        height: 100px;
        width: 100px;
    }
}


/* ==========================================================================
   9d. FICHA DE PROJETO (research/project-detail)
   ========================================================================== */

.project-info-card,
.team-member-card,
.partner-card {
    overflow: hidden;
}

/* Lista etiqueta/valor — a hierarquia é peso vs cor, não duas cores. */
.info-item {
    border-bottom: 1px solid var(--cimo-neutral-200);
    padding: var(--cimo-space-4) 0;
}

.info-item:last-child {
    border-bottom: none;
}

.info-label {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-label);
    font-weight: 600;
    letter-spacing: var(--cimo-ls-label);
    margin-bottom: var(--cimo-space-1);
    text-transform: uppercase;
}

.info-value {
    color: var(--cimo-neutral-900);
    font-size: var(--cimo-fs-body);
}

.status-badge {
    border-radius: var(--cimo-radius-pill);
    font-size: var(--cimo-fs-xs);
    padding: 0.4em 1em;
}

/* O montante de financiamento era `#28a745` — verde do Bootstrap, e um
   valor monetário não é um estado de sucesso. */
.funding-value {
    color: var(--cimo-neutral-900);
    font-size: var(--cimo-fs-h5);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.date-info {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-sm);
    font-variant-numeric: tabular-nums;
}

.section-divider {
    border-top: 1px solid var(--cimo-neutral-200);
    margin: var(--cimo-space-7) 0;
}

.researcher-link {
    color: var(--cimo-neutral-900) !important;
    text-decoration: none !important;
    transition: color var(--cimo-dur) var(--cimo-ease);
}

.researcher-link:hover {
    color: var(--cimo-primary-500) !important;
}

.cimo-partner-logo {
    max-height: 80px;
    object-fit: contain;
    width: auto;
}

.cimo-partner-placeholder {
    background: var(--cimo-neutral-100);
    height: 80px;
}

.cimo-acronym-badge {
    font-size: var(--cimo-fs-sm);
    letter-spacing: 0.02em;
}


/* ==========================================================================
   10. TILES DE ESTATÍSTICA
   ========================================================================== */

.cimo-stat {
    background-color: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-lg);
    padding: var(--cimo-space-5);
    text-align: center;
}

.cimo-stat__value {
    color: var(--cimo-neutral-900);
    display: block;
    font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.cimo-stat__label {
    color: var(--cimo-neutral-600);
    display: block;
    font-size: var(--cimo-fs-label);
    font-weight: 600;
    letter-spacing: var(--cimo-ls-label);
    text-transform: uppercase;
    margin-top: var(--cimo-space-2);
}

/* Cartões clicáveis: o título ganha a marca no hover — era `#28a745`,
   o verde do Bootstrap, que não existe no sistema. */
.hover-effect,
.hover-lift {
    cursor: pointer;
    transition:
        box-shadow var(--cimo-dur) var(--cimo-ease),
        transform var(--cimo-dur) var(--cimo-ease);
}

.hover-effect:hover h4,
.hover-lift:hover h4 {
    color: var(--cimo-primary-500);
}

.stat-item h4 {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin-bottom: var(--cimo-space-2);
}


/* ==========================================================================
   11. ESTADO VAZIO — 9 cópias de `alert alert-info` no site.
   ========================================================================== */

.cimo-empty {
    background-color: var(--cimo-neutral-50);
    border: 1px dashed var(--cimo-neutral-300);
    border-radius: var(--cimo-radius-lg);
    color: var(--cimo-neutral-600);
    padding: var(--cimo-space-8) var(--cimo-space-5);
    text-align: center;
}

.cimo-empty i {
    color: var(--cimo-neutral-400);
    font-size: 2rem;
    margin-bottom: var(--cimo-space-4);
    display: block;
}

.cimo-empty h4 {
    color: var(--cimo-neutral-800);
    margin-bottom: var(--cimo-space-2);
}

.cimo-empty p {
    margin-bottom: 0;
    max-width: 46ch;
    margin-inline: auto;
}


/* ==========================================================================
   12. ÍCONES — hierarquia por cor: decorativo é neutro, ação é primary.
   ========================================================================== */

.cimo-icon-muted    { color: var(--cimo-neutral-500); }
.cimo-icon-action   { color: var(--cimo-primary-500); }
.cimo-icon-success  { color: var(--cimo-success); }
.cimo-icon-warning  { color: var(--cimo-warning); }
.cimo-icon-error    { color: var(--cimo-error); }
.cimo-icon-info     { color: var(--cimo-info); }

/* Puck de ícone: superfície neutra, glifo com a cor.
   Substitui os pucks `bg-success`/`bg-warning`/`bg-info` que usavam cores
   semânticas para decorar — um bullet "Food Tech" não é um aviso. */
.cimo-icon-puck {
    align-items: center;
    background-color: var(--cimo-neutral-100);
    border-radius: var(--cimo-radius-circle);
    color: var(--cimo-primary-500);
    display: inline-flex;
    flex-shrink: 0;
    height: 64px;
    justify-content: center;
    width: 64px;
    font-size: 1.5rem;
}

.cimo-icon-puck--sm { width: 48px; height: 48px; font-size: 1.125rem; }
.cimo-icon-puck--md { width: 80px; height: 80px; font-size: 1.75rem; }
.cimo-icon-puck--lg { width: 90px; height: 90px; font-size: 2rem; }

.cimo-icon-puck--brand {
    background-color: var(--cimo-primary-a08);
    color: var(--cimo-primary-600);
}

/* Ícone grande que identifica um tile de navegação. */
.cimo-outcome-icon {
    color: var(--cimo-primary-400);
    font-size: 2.5rem;
}

/* Bullets de lista de tópicos — usavam `text-success`/`text-warning` para
   decorar. Um item "Food Tech" não é um aviso. */
.cimo-bullet i,
.cimo-bullet .fas,
.cimo-bullet-icon {
    color: var(--cimo-primary-400);
    font-size: 0.8125rem;
}

/* "Learn More" e afins: é uma ação de navegação, logo primary — não
   `text-warning`/`text-success` como estava. */
.cimo-link-more {
    color: var(--cimo-primary-500);
    font-size: var(--cimo-fs-sm);
    font-weight: 600;
}

.cimo-link-more i {
    transition: transform var(--cimo-dur) var(--cimo-ease);
}

a:hover .cimo-link-more,
.cimo-link-more:hover {
    color: var(--cimo-primary-600);
}

a:hover .cimo-link-more i,
.cimo-link-more:hover i {
    transform: translateX(3px);
}

/* --------------------------------------------------------------------------
   Cartão de notícia — teaser "Latest News" da home.
   Imagem em proporção fixa (as três ficam sempre alinhadas, independente do
   tamanho original de cada foto), meta discreta como no /news real (ícone +
   texto, não uma badge), título e resumo cortados a 2 linhas para que os
   três cartões tenham sempre a mesma altura.
   -------------------------------------------------------------------------- */

.cimo-news-thumb {
    aspect-ratio: 16 / 10;
    background-color: var(--cimo-neutral-100);
    border-radius: var(--cimo-radius-lg) var(--cimo-radius-lg) 0 0;
    display: block;
    overflow: hidden;
}

.cimo-news-thumb img {
    height: 100%;
    object-fit: cover;
    transition: transform var(--cimo-dur-slow) var(--cimo-ease);
    width: 100%;
}

/* O zoom fica contido pelo overflow:hidden do wrapper — não desloca layout. */
.cimo-card-interactive:hover .cimo-news-thumb img {
    transform: scale(1.05);
}

.cimo-news-meta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--cimo-space-1) var(--cimo-space-4);
    margin-bottom: var(--cimo-space-3);
}

.cimo-news-meta__item {
    align-items: center;
    color: var(--cimo-neutral-500);
    display: inline-flex;
    font-size: var(--cimo-fs-xs);
    font-weight: 600;
    gap: var(--cimo-space-1);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.cimo-news-meta__item i {
    color: var(--cimo-neutral-400);
    font-size: 0.85em;
}

.cimo-news-title {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    font-size: var(--cimo-fs-h5);
    line-height: 1.35;
    margin-bottom: var(--cimo-space-2);
    overflow: hidden;
}

.cimo-news-title a {
    color: var(--cimo-neutral-900);
    text-decoration: none;
    transition: color var(--cimo-dur) var(--cimo-ease);
}

.cimo-card-interactive:hover .cimo-news-title a {
    color: var(--cimo-primary-500);
}

.cimo-news-excerpt {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--cimo-neutral-600);
    display: -webkit-box;
    font-size: var(--cimo-fs-sm);
    line-height: 1.6;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Mini-post — lista compacta na sidebar (Popular / Recent do /news).
   Substitui o widget `.simple-post-list` do Porto: a meta usava
   `var(--grey-900)`, que no remap do sistema é quase preto — a data ficava
   com o mesmo peso do título em vez de discreta.
   -------------------------------------------------------------------------- */

.cimo-mini-posts {
    list-style: none;
    margin: 0;
    padding: 0;
}

.cimo-mini-posts li + li {
    border-top: 1px solid var(--cimo-neutral-200);
    margin-top: var(--cimo-space-3);
    padding-top: var(--cimo-space-3);
}

.cimo-mini-post {
    align-items: flex-start;
    display: flex;
    gap: var(--cimo-space-3);
    text-decoration: none;
}

.cimo-mini-post__thumb {
    background: var(--cimo-neutral-100);
    border-radius: var(--cimo-radius-md);
    flex-shrink: 0;
    height: 48px;
    overflow: hidden;
    width: 48px;
}

.cimo-mini-post__thumb img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.cimo-mini-post__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.cimo-mini-post__title {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    color: var(--cimo-neutral-900);
    display: -webkit-box;
    font-size: var(--cimo-fs-sm);
    font-weight: 600;
    line-height: 1.35;
    overflow: hidden;
    transition: color var(--cimo-dur) var(--cimo-ease);
}

.cimo-mini-post:hover .cimo-mini-post__title {
    color: var(--cimo-primary-500);
}

.cimo-mini-post__meta {
    color: var(--cimo-neutral-500);
    font-size: var(--cimo-fs-xs);
    margin-top: var(--cimo-space-1);
}

/* Fotografia redonda de pessoa nos cartões de órgãos sociais. */
.cimo-person-photo {
    aspect-ratio: 1;
    background: var(--cimo-neutral-100);
    object-fit: cover;
    object-position: center top;
}

/* Logótipo de entidade nos cartões de parceiros/startups/redes. */
.cimo-entity-logo {
    height: 120px;
    object-fit: contain;
    width: 120px;
}

.cimo-entity-logo--placeholder {
    background: var(--cimo-neutral-100);
    border-radius: var(--cimo-radius-md);
    margin-inline: auto;
}

.cimo-news-img {
    border-radius: var(--cimo-radius-lg);
    height: auto;
    max-width: 400px;
    width: 100%;
}

.cimo-icon-inline {
    font-size: 0.8em;
}

.cimo-map {
    height: 500px;
}

/* O InfoWindow do Google Maps é injetado no DOM da página, por isso
   estiliza-se aqui em vez de inline no template JS. */
.cimo-map-infowindow {
    color: var(--cimo-neutral-700);
    font-family: var(--cimo-font);
    padding: var(--cimo-space-2);
}

.cimo-map-infowindow h5 {
    color: var(--cimo-neutral-900);
    font-size: var(--cimo-fs-h5);
    margin: 0 0 var(--cimo-space-2);
}

.cimo-map-infowindow p {
    font-size: var(--cimo-fs-sm);
    margin: 0;
}

/* Cores de marca de terceiros — continuam a ser deles, mas deixam de estar
   escritas no markup. */
.share-btn--linkedin {
    background-color: #0077b5;
    border-color: #0077b5;
    color: #fff;
}

.share-btn--linkedin:hover {
    background-color: #005e8f;
    border-color: #005e8f;
    color: #fff;
}

/* O #25D366 da WhatsApp dá 1,98:1 com texto branco. Usa-se o verde escuro
   oficial da marca (#075E54), que dá 7,67:1 e continua a ser reconhecível. */
.share-btn--whatsapp {
    background-color: #075e54;
    border-color: #075e54;
    color: #fff;
}

.share-btn--whatsapp:hover {
    background-color: #054740;
    border-color: #054740;
    color: #fff;
}

/* Imagem destacada com altura limitada (era inline em 8 páginas). */
.cimo-featured-img {
    border-radius: var(--cimo-radius-lg);
    box-shadow: var(--cimo-shadow-sm);
    max-height: 400px;
    width: auto;
    max-width: 100%;
}


/* ==========================================================================
   13. FOOTER — a banda escura é a âncora de identidade da página.
   ========================================================================== */

#footer {
    background-color: var(--cimo-primary-900);
    color: rgba(255, 255, 255, 0.82);
    border-top: 0;
}

#footer h1, #footer h2, #footer h3, #footer h4, #footer h5 {
    color: #fff;
}

/* O Porto usa `#footer a:not(.btn):not(.no-footer-css)` — especificidade
   (1,2,1) — para pôr os links do footer em var(--default). Sobre o
   primary-900 isso dá 2,86:1. Igualo a especificidade (e carrego depois)
   para os links voltarem a ler-se. */
#footer a:not(.btn):not(.no-footer-css) {
    color: rgba(255, 255, 255, 0.86);
}

#footer a:not(.btn):not(.no-footer-css):hover {
    color: #fff;
}

.cimo-header-logo {
    max-height: 60px;
    width: auto;
}

.cimo-icon-tiny {
    font-size: 0.625rem;
}

.cimo-sponsor-img {
    height: 60px;
    object-fit: contain;
    width: auto;
}

/* --------------------------------------------------------------------------
   Public Funding & Support — painel claro, não mais um bloco verde escuro.
   A secção Outcomes já dá à página uma âncora saturada a meio; empilhar aqui
   um segundo bloco escuro fazia o rodapé parecer duas secções de fecho em
   vez de uma. A única âncora escura passa a ser a faixa de copyright, no
   fundo. -------------------------------------------------------------- */

.footer-support-section {
    background-color: var(--cimo-neutral-100);
    border-block: 1px solid var(--cimo-neutral-200);
    color: var(--cimo-neutral-700);
}

.cimo-footer-eyebrow {
    color: var(--cimo-neutral-600);
    font-size: var(--cimo-fs-label);
    font-weight: 600;
    letter-spacing: var(--cimo-ls-label);
    text-transform: uppercase;
}

.cimo-footer-eyebrow i {
    color: var(--cimo-primary-400);
}

.cimo-footer-support-grid {
    margin-inline: auto;
    max-width: 1100px;
}

.footer-support-card {
    background-color: var(--cimo-surface);
    border: 1px solid var(--cimo-neutral-200);
    border-radius: var(--cimo-radius-md);
    padding: var(--cimo-space-5);
    transition:
        border-color var(--cimo-dur) var(--cimo-ease),
        box-shadow var(--cimo-dur) var(--cimo-ease);
}

.footer-support-card:hover {
    border-color: var(--cimo-neutral-300);
    box-shadow: var(--cimo-shadow-xs);
}

.cimo-footer-support-text {
    color: var(--cimo-neutral-700);
    font-size: var(--cimo-fs-sm);
    line-height: 1.6;
}

.cimo-footer-support-text strong {
    color: var(--cimo-neutral-900);
}

#footer .footer-support-section a:not(.btn):not(.no-footer-css),
.footer-support-section a:not(.btn) {
    color: var(--cimo-primary-600);
}

#footer .footer-support-section a:not(.btn):not(.no-footer-css):hover,
.footer-support-section a:not(.btn):hover {
    color: var(--cimo-primary-700);
}

/* O DOI é uma categoria da marca — mesmo chip suave usado no resto do
   sistema, não uma pílula branca translúcida sobre verde.
   `#footer a.footer-support-badge:not(.btn)` iguala a especificidade (1,2,1)
   de `#footer a:not(.btn):not(.no-footer-css)` — sem isto o link herdava
   a cor quase-branca do footer escuro e ficava ilegível sobre o chip claro. */
#footer a.footer-support-badge:not(.btn),
.footer-support-badge {
    align-items: center;
    background-color: var(--cimo-primary-a08);
    border: 1px solid var(--cimo-primary-200);
    border-radius: var(--cimo-radius-pill);
    color: var(--cimo-primary-600);
    display: inline-flex;
    font-size: var(--cimo-fs-xs);
    gap: var(--cimo-space-1);
    line-height: 1.4;
    padding: var(--cimo-space-1) var(--cimo-space-3);
    text-decoration: none;
}

#footer a.footer-support-badge:not(.btn):hover,
.footer-support-badge:hover {
    background-color: var(--cimo-primary-100);
    border-color: var(--cimo-primary-300);
    color: var(--cimo-primary-700);
}

/* Banda clara dos logos institucionais — neutra, separa sem cor. */
.footer-logos-section {
    background-color: var(--cimo-neutral-50) !important;
    border-top: 1px solid var(--cimo-neutral-200);
    border-bottom: 1px solid var(--cimo-neutral-200);
}

.footer-copyright {
    background-color: var(--cimo-primary-950);
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--cimo-fs-sm);
}

#footer .footer-copyright a:not(.btn):not(.no-footer-css),
.footer-copyright a {
    color: rgba(255, 255, 255, 0.75);
}

#footer .footer-copyright a:not(.btn):not(.no-footer-css):hover,
.footer-copyright a:hover {
    color: #fff;
}

/* Logos de parceiros: neutros em repouso, a cor volta no hover.
   Grelha antes definida num <style> dentro do layout. */
.sponsors-logos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--cimo-space-5);
    justify-content: center;
    max-width: 1200px;
    margin-inline: auto;
}

.sponsor-logo {
    align-items: center;
    display: flex;
    filter: grayscale(100%);
    flex: 0 0 calc(20% - var(--cimo-space-5));
    justify-content: center;
    max-width: calc(20% - var(--cimo-space-5));
    min-height: 80px;
    opacity: 0.62;
    padding: var(--cimo-space-2);
    transition:
        filter var(--cimo-dur) var(--cimo-ease),
        opacity var(--cimo-dur) var(--cimo-ease);
}

.sponsor-logo:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: none;
}

.sponsor-logo img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.sponsor-logo:hover img {
    transform: none;
}

@media (max-width: 991.98px) {
    .sponsors-logos {
        gap: var(--cimo-space-4);
    }

    .sponsor-logo {
        flex: 0 0 calc(33.333% - var(--cimo-space-4));
        max-width: calc(33.333% - var(--cimo-space-4));
    }

    .sponsor-logo img {
        max-height: 50px;
    }
}

@media (max-width: 575.98px) {
    .sponsor-logo {
        flex: 0 0 calc(50% - var(--cimo-space-3));
        max-width: calc(50% - var(--cimo-space-3));
        min-height: 68px;
    }

    .sponsor-logo img {
        max-height: 40px;
    }
}


/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {
    .cimo-panel {
        padding: var(--cimo-space-5);
    }

    .page-header.page-header-modern.bg-color-grey.page-header-lg,
    .page-header.page-header-modern.bg-color-grey.page-header-md,
    .page-header.page-header-modern.bg-color-grey.page-header-no-margin {
        padding: var(--cimo-space-5) 0;
    }
}

@media (max-width: 575.98px) {
    body {
        font-size: 1rem;               /* nunca abaixo de 16px */
    }

    .cimo-panel,
    .cimo-filter-panel,
    .card-body {
        padding: var(--cimo-space-4);
    }

    .cimo-empty {
        padding: var(--cimo-space-6) var(--cimo-space-4);
    }

    .btn {
        padding: var(--cimo-space-3) var(--cimo-space-4);
    }

    /* Uma coluna no diretório: com foto de 112px, duas colunas deixam
       ~155px de conteúdo e o nome parte. */
    .cimo-avatar--lg { width: 140px; height: 140px; }

    .publications-container,
    .thesis-container {
        padding: var(--cimo-space-4);
    }

    .cimo-dt-footer .pagination {
        gap: 2px;
    }
}

/* Nada empurra a página na horizontal. */
html,
body {
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   Cabeçalhos com "heading-border" do Porto
   --------------------------------------------------------------------------
   `.heading-middle-border` desenha uma linha a 50% de altura, que passa por
   dentro do texto. Substitui-se pela barra curta em primary sob o título —
   o mesmo gesto de marca que <x-section-heading> usa. -------------------- */

.heading.heading-middle-border::before,
.heading.heading-middle-border::after {
    display: none !important;
}

.heading.heading-border {
    margin-bottom: var(--cimo-space-6);
}

.heading.heading-border h1,
.heading.heading-border h2,
.heading.heading-border h3 {
    color: var(--cimo-neutral-900);
    padding: 0;
}

.heading.heading-border h2::after,
.heading.heading-border h3::after {
    background-color: var(--cimo-primary-500);
    border-radius: 2px;
    content: '';
    display: block;
    height: 3px;
    margin-top: var(--cimo-space-3);
    width: 48px;
}

.heading.heading-border.text-center h2::after,
.heading.heading-border.text-center h3::after,
.text-center .heading.heading-border h2::after,
.text-center .heading.heading-border h3::after {
    margin-inline: auto;
}

/* A palavra-chave do heading de secção ("Meet Our <strong>Leadership
   Team</strong>") pode levar `text-primary` como acento de marca — é um
   apontamento numa palavra, não o título inteiro a verde, por isso não
   reabre o "green overload". Aplica-se de forma consistente aos ~12
   headings deste padrão em todo o site. O peso extra fica sempre, tenha
   ou não a cor. */
.heading.heading-border h1 strong,
.heading.heading-border h2 strong,
.heading.heading-border h3 strong {
    font-weight: 800;
}