:root {
    --utad-azul: #0055a4;
    --utad-azul-escuro: #003f7d;
    --utad-azul-claro: #e7f1fb;
    --fundo: #f4f7fb;
    --texto: #172033;
    --secundario: #68758a;
    --linha: #e3e9f1;

    /* Valores por omissão. O _Layout.cshtml volta a declarar estes três a partir das chaves
       Design.* do Web.config, logo a seguir a esta folha, e é essa declaração que vale. */
    --largura-maxima: 100%;
    --escala-texto: 1.15;
    --escala-icone: 1.25;

    /* Largura mínima de cada cartão. Acompanha as letras: com texto maior cabem menos colunas
       por linha, em vez de o nome da aplicação passar a partir-se ao meio. */
    --largura-cartao: calc(300px * var(--escala-texto));
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }

body {
    background: var(--fundo);
    color: var(--texto);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.app-topbar {
    background: #fff;
    border-bottom: 1px solid rgba(10, 50, 90, .1);
    min-height: calc(74px * var(--escala-texto));
}

.app-topbar .container-fluid {
    max-width: var(--largura-maxima);
    margin: 0 auto;
}

.utad-logo {
    display: inline-flex;
    align-items: center;
}

.utad-logo img {
    display: block;
    height: calc(43px * var(--escala-texto));
    width: auto;
}

.marca-catalogo {
    border-left: 1px solid #d9e1eb;
    color: #607087;
    font-size: calc(.78rem * var(--escala-texto));
    font-weight: 650;
    letter-spacing: .06em;
    margin-left: 1.1rem;
    padding-left: 1.1rem;
    text-transform: uppercase;
}

.app-content {
    flex: 1 1 auto;
    margin: 0 auto;
    max-width: var(--largura-maxima);
    padding: 1.5rem clamp(1.5rem, 2.2vw, 2.75rem) 2.5rem;
    width: 100%;
}

.app-footer {
    background: #fff;
    border-color: var(--linha) !important;
}

.hero-catalogo {
    background:
        radial-gradient(circle at 88% 10%, rgba(95, 179, 255, .24), transparent 30%),
        linear-gradient(135deg, var(--utad-azul-escuro), var(--utad-azul));
    border-radius: 1.1rem;
    box-shadow: 0 14px 34px rgba(0, 63, 125, .18);
    color: #fff;
    margin-bottom: 2rem;
    overflow: hidden;
    padding: 2.1rem 2.25rem;
    position: relative;
}

.hero-conteudo {
    align-items: center;
    display: flex;
    gap: 2rem;
    justify-content: space-between;
}

.hero-etiqueta {
    color: #b9ddff;
    display: block;
    font-size: calc(.72rem * var(--escala-texto));
    font-weight: 750;
    letter-spacing: .12em;
    margin-bottom: .55rem;
    text-transform: uppercase;
}

.hero-texto h1 {
    font-size: clamp(calc(1.7rem * var(--escala-texto)),
                     calc(3vw * var(--escala-texto)),
                     calc(2.45rem * var(--escala-texto)));
    font-weight: 700;
    letter-spacing: -.035em;
    margin: 0;
}

.hero-texto p {
    color: rgba(255,255,255,.78);
    font-size: calc(.98rem * var(--escala-texto));
    margin: .45rem 0 0;
}

.hero-total {
    align-items: center;
    background: rgba(255,255,255,.13);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: .85rem;
    display: flex;
    flex-direction: column;
    min-width: calc(112px * var(--escala-texto));
    padding: .8rem 1rem;
}

.hero-total strong {
    font-size: calc(1.65rem * var(--escala-texto));
    line-height: 1;
}

.hero-total span {
    color: rgba(255,255,255,.7);
    font-size: calc(.72rem * var(--escala-texto));
    margin-top: .25rem;
    text-transform: uppercase;
}

.pesquisa-wrap {
    box-shadow: 0 10px 24px rgba(0, 33, 66, .18);
    margin-top: 1.45rem;
    max-width: 700px;
    position: relative;
}

.pesquisa-wrap > .bi-search {
    color: #748399;
    font-size: calc(1rem * var(--escala-icone));
    left: 1rem;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.pesquisa-wrap input {
    background: #fff;
    border: 0;
    border-radius: .75rem;
    color: var(--texto);
    font-size: calc(.96rem * var(--escala-texto));
    min-height: calc(52px * var(--escala-texto));
    outline: none;
    padding: .75rem 3rem .75rem 2.9rem;
    width: 100%;
}

.pesquisa-wrap input:focus { box-shadow: 0 0 0 4px rgba(134, 199, 255, .34); }
.pesquisa-wrap input::placeholder { color: #98a4b5; }

.limpar-pesquisa {
    background: none;
    border: 0;
    color: #748399;
    cursor: pointer;
    font-size: calc(1rem * var(--escala-icone));
    padding: .5rem;
    position: absolute;
    right: .55rem;
    top: 50%;
    transform: translateY(-50%);
}

.seccoes-aplicacoes {
    display: flex;
    flex-direction: column;
    gap: 1.6rem;
}

.catalogo-seccao {
    background: #fff;
    border: 1px solid var(--linha);
    border-radius: .85rem;
    box-shadow: 0 3px 14px rgba(22, 39, 66, .045);
    overflow: hidden;
}

.seccao-cabecalho {
    align-items: center;
    border-bottom: 1px solid var(--linha);
    display: flex;
    gap: .8rem;
    padding: 1rem 1.15rem;
}

.seccao-icone { color: var(--utad-azul); font-size: calc(1.05rem * var(--escala-icone)); }
.seccao-cabecalho > div { min-width: 0; }

.seccao-cabecalho h2 {
    color: #26364b;
    font-size: calc(.96rem * var(--escala-texto));
    font-weight: 750;
    margin: 0;
}

.seccao-cabecalho p {
    color: #8995a5;
    font-size: calc(.7rem * var(--escala-texto));
    margin: .1rem 0 0;
}

.seccao-total {
    color: #98a3b2;
    font-size: calc(.72rem * var(--escala-texto));
    font-weight: 700;
    margin-left: auto;
}

/* auto-fill em vez de um número fixo de colunas: numa página inteira o ecrã largo enche-se
   de cartões em vez de os esticar, e o ecrã estreito reduz as colunas sozinho. */
.lista-aplicacoes {
    display: grid;
    gap: 0;
    grid-template-columns: repeat(auto-fill, minmax(var(--largura-cartao), 1fr));
    padding: .4rem;
}

.aplicacao-linha {
    align-items: flex-start;
    border-radius: .55rem;
    display: flex;
    gap: .8rem;
    min-height: calc(82px * var(--escala-texto));
    padding: .8rem;
    transition: background-color .15s ease;
}

.aplicacao-linha:hover { background: #f4f8fc; }
.aplicacao-inativa { opacity: .66; }
.aplicacao-inativa:hover { opacity: .88; }

.app-sigla {
    align-items: center;
    border-radius: .28rem;
    color: #fff;
    display: inline-flex;
    flex: 0 0 calc(42px * var(--escala-icone));
    font-size: calc(.78rem * var(--escala-icone));
    font-weight: 750;
    height: calc(42px * var(--escala-icone));
    justify-content: center;
    letter-spacing: -.025em;
    overflow: hidden;
    text-transform: uppercase;
}

.cor-0 { background: #0f6b93; }
.cor-1 { background: #8b5cf6; }
.cor-2 { background: #f97316; }
.cor-3 { background: #db2777; }
.cor-4 { background: #0ea5b7; }
.cor-5 { background: #4f6f9f; }
.cor-6 { background: #2a9d8f; }
.cor-7 { background: #a3a33a; }
.cor-8 { background: #7c3fa0; }
.cor-9 { background: #e45f47; }
.cor-10 { background: #e9a23b; }
.cor-11 { background: #263f5f; }

.app-conteudo { min-width: 0; }

.app-titulo-linha {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem .55rem;
}

.app-nome {
    color: #26364b;
    font-size: calc(.8rem * var(--escala-texto));
    font-weight: 700;
    line-height: 1.3;
    text-decoration: none;
}

a.app-nome:hover { color: var(--utad-azul); }

.app-nome .bi {
    font-size: calc(.62rem * var(--escala-icone));
    margin-left: .15rem;
    opacity: 0;
    transition: opacity .15s ease;
}

.aplicacao-linha:hover .app-nome .bi { opacity: .75; }
.app-nome.sem-url { color: #64748b; }

.app-estado {
    align-items: center;
    color: #8c96a5;
    display: inline-flex;
    font-size: calc(.62rem * var(--escala-texto));
    gap: .2rem;
}

.app-estado .bi { font-size: calc(.68rem * var(--escala-icone)); }

.app-resumo {
    color: #7b8798;
    display: -webkit-box;
    font-size: calc(.68rem * var(--escala-texto));
    line-height: 1.4;
    margin: .25rem 0 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.link-rede {
    align-items: center;
    color: #698097;
    display: inline-flex;
    font-size: calc(.62rem * var(--escala-texto));
    gap: .28rem;
    margin-top: .3rem;
    text-decoration: none;
}

.link-rede .bi { font-size: calc(.7rem * var(--escala-icone)); }
.link-rede:hover { color: var(--utad-azul); text-decoration: underline; }

.empty-state {
    color: var(--secundario);
    padding: 5rem 1rem;
    text-align: center;
}

.empty-icon {
    align-items: center;
    background: #e7eef7;
    border-radius: 50%;
    color: #7890aa;
    display: inline-flex;
    font-size: calc(1.55rem * var(--escala-icone));
    height: calc(64px * var(--escala-icone));
    justify-content: center;
    margin-bottom: 1rem;
    width: calc(64px * var(--escala-icone));
}

.empty-state h2 { color: #334155; font-size: calc(1.18rem * var(--escala-texto)); margin-bottom: .4rem; }
.empty-state p { font-size: calc(.88rem * var(--escala-texto)); margin: 0; }
.escondido { display: none !important; }

@media (max-width: 767.98px) {
    .app-topbar { min-height: calc(64px * var(--escala-texto)); }
    .utad-logo img { height: calc(35px * var(--escala-texto)); }
    .marca-catalogo { display: none; }
    .app-content { padding: .85rem .85rem 1.5rem; }
    .hero-catalogo { border-radius: .9rem; margin-bottom: 1.4rem; padding: 1.4rem; }
    .hero-conteudo { align-items: flex-start; }
    .hero-total { min-width: calc(82px * var(--escala-texto)); padding: .65rem; }
    .hero-total strong { font-size: calc(1.35rem * var(--escala-texto)); }
    .hero-texto p { font-size: calc(.86rem * var(--escala-texto)); }
    .lista-aplicacoes { grid-template-columns: 1fr; }
    .seccao-cabecalho p { display: none; }
}

@media (max-width: 420px) {
    .hero-conteudo { gap: .8rem; }
    .hero-total { display: none; }
}

@media print {
    body { background: #fff; }
    .app-topbar, .app-footer, .pesquisa-wrap { display: none; }
    .app-content { max-width: none; padding: 0; }
    .hero-catalogo { background: none; box-shadow: none; color: #000; padding: 0; }
    .hero-texto p, .hero-etiqueta { color: #555; }
    .lista-aplicacoes { grid-template-columns: repeat(3, 1fr); }
    .catalogo-seccao { break-inside: avoid; box-shadow: none; }
}