[hidden] { display: none !important; }
.portal { width: min(70rem, calc(100% - var(--gutter) - var(--gutter))); margin: clamp(2rem, 6vw, 4.5rem) auto; }
.voltar-link { display: inline-flex; min-height: 2.75rem; align-items: center; color: var(--suave); font-size: .9375rem; text-decoration: none; }
.portal > h1 { margin: .5rem 0 .75rem; font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem); }
.portal .intro { max-width: 62ch; margin-bottom: 2rem; color: var(--suave); }
.login-box {
    max-width: 30rem;
    padding: clamp(1.5rem, 4vw, 2.25rem);
    border: 1px solid var(--borda);
    border-radius: 1.25rem;
    background:
        radial-gradient(24rem 12rem at 100% 0%, rgba(255, 106, 0, .14), transparent 60%),
        var(--superficie);
    box-shadow: var(--sombra);
}
.portal h2 { margin-bottom: .5rem; font-size: 1.375rem; }
.login-box form > p:not(.ajuda) { color: var(--suave); font-size: .9375rem; }
.portal label { display: block; margin: 1.5rem 0 .5rem; font-size: .9375rem; font-weight: 600; }
.portal input, .portal textarea {
    width: 100%;
    min-height: 3rem;
    padding: .75rem 1rem;
    border: 1px solid #5a4a3d;
    border-radius: .75rem;
    background: var(--fundo);
    color: var(--texto);
    font: inherit;
    transition: border-color .2s, box-shadow .2s;
}
.portal input:focus { border-color: var(--laranja); box-shadow: 0 0 0 4px rgba(255, 106, 0, .18); }
.portal input:focus-visible, .portal textarea:focus-visible, .portal button:focus-visible { outline: 3px solid var(--laranja-claro); outline-offset: 3px; }
.portal button { font-family: inherit; line-height: 1.3; cursor: pointer; min-height: 2.75rem; }
.portal button:disabled { opacity: .55; cursor: wait; }
.portal form .btn { width: 100%; margin-top: 1.25rem; }
.portal form .secondary { width: 100%; margin-top: .75rem; }
.ajuda { margin-top: 1rem; color: var(--suave); font-size: .875rem; }
.ajuda a { color: var(--laranja-claro); }
.portal-message { max-width: 65ch; margin: 1rem 0 1.5rem; padding: 1rem 1.25rem; border: 1px solid rgba(255, 106, 0, .35); border-left: 4px solid var(--laranja); border-radius: .75rem; background: #211810; }
.portal-message:empty { display: none; }
.secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .625rem 1.125rem;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: var(--superficie-2);
    color: var(--texto);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color .2s, background-color .2s;
}
.toolbar, .payment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; }
.toolbar { justify-content: flex-end; margin-bottom: 1.5rem; }
.payment-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: 1rem; list-style: none; }
.payment-card {
    min-width: 0;
    padding: 1.5rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    background: linear-gradient(180deg, var(--superficie), var(--fundo-alt));
}
.payment-card h3 { margin-bottom: .5rem; color: var(--suave); font-size: 1rem; font-weight: 500; }
.payment-card .value { color: var(--texto); font-size: 1.75rem; font-weight: 700; letter-spacing: -.01em; }
.payment-card .status {
    display: inline-block;
    margin-top: .75rem;
    padding: .2rem .75rem;
    border: 1px solid #4a3d33;
    border-radius: 999px;
    background: var(--superficie-2);
    font-size: .8125rem;
    font-weight: 500;
}
.payment-card .late { border-color: #8a4a35; background: rgba(229, 157, 131, .12); color: #ffc6b1; }
.payment-detail { border-top: 1px solid var(--borda); margin-top: 1rem; padding-top: 1rem; }
.pix-image { width: min(100%, 16rem); height: auto; background: #fff; padding: .5rem; margin: 1rem auto; border-radius: .75rem; }
.portal textarea { min-height: 6rem; resize: vertical; overflow-wrap: anywhere; font-size: .875rem; }
.pagination { margin-top: 1.5rem; display: flex; justify-content: space-between; gap: 1rem; }
@media (max-width: 35.999rem) { .payment-actions > *, .toolbar > * { flex: 1 1 100%; text-align: center; } }
@media (hover: hover) and (pointer: fine) {
    .secondary:hover { border-color: var(--laranja); background: var(--laranja-fundo); }
    .voltar-link:hover { color: var(--laranja-claro); }
}
/* Downloads BR TI: botões do acesso liberado. */
#liberado .btn, #liberado .secondary { display: flex; width: 100%; margin-top: 1rem; justify-content: center; text-decoration: none; }
/* Lista de arquivos do repositório. */
.downloads-lista { list-style: none; margin: 1rem 0 0; padding: 0; }
.downloads-lista li {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem;
    padding: .9rem 0; border-bottom: 1px solid var(--borda);
}
.downloads-lista li.vazio { display: block; color: var(--suave); }
.download-info { flex: 1 1 14rem; min-width: 0; overflow-wrap: anywhere; }
.download-info strong { display: block; }
.download-info p { margin: .2rem 0 0; color: var(--suave); font-size: .875rem; white-space: pre-line; }
.download-info span { display: block; margin-top: .2rem; color: var(--suave); font-size: .78rem; }
#liberado .download-botao { display: inline-flex; width: auto; margin: 0; padding-inline: 1.25rem; }
@media (max-width: 36rem) { #liberado .download-botao { width: 100%; } }