[hidden] { display: none !important; }
.portal { width: min(70rem, calc(100% - 2rem)); margin: clamp(2rem, 5vw, 4rem) auto; }
.portal > h1 { font-size: clamp(2rem, 5vw, 3rem); margin: 1rem 0; color: #ff6a00; }
.portal .intro { color: #ccc; max-width: 65ch; margin-bottom: 2rem; }
.login-box { max-width: 32rem; background: #191919; border: 1px solid #414141; border-radius: 1rem; padding: clamp(1.25rem, 4vw, 2rem); }
.portal h2 { font-size: 1.4rem; text-align: left; margin-bottom: 1rem; }
.portal label { display: block; margin: 1.25rem 0 .5rem; font-weight: 600; }
.portal input, .portal textarea { width: 100%; min-height: 3rem; border: 1px solid #777; border-radius: .5rem; background: #0e0e0e; color: #fff; padding: .75rem; font: inherit; }
.portal input:focus-visible, .portal textarea:focus-visible, .portal button:focus-visible { outline: 3px solid #ffb16e; outline-offset: 3px; }
.portal button { font: inherit; cursor: pointer; min-height: 2.75rem; }
.portal button:disabled { opacity: .55; cursor: wait; }
.portal form .btn { width: 100%; margin-top: 1.25rem; border: none; }
.ajuda { color: #c9c9c9; font-size: .9375rem; margin-top: 1rem; }
.portal-message { max-width: 65ch; margin: 1rem 0; padding: 1rem; border-left: 3px solid #ff6a00; background: #211a14; }
.portal-message:empty { display: none; }
.secondary { display: inline-block; border: 1px solid #777; border-radius: .5rem; background: #222; color: #fff; text-decoration: none; padding: .625rem 1rem; }
.toolbar, .payment-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin: 1rem 0; }
.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; border: 1px solid #444; background: #191919; padding: 1.25rem; border-radius: .75rem; }
.payment-card h3 { margin-bottom: .75rem; }
.payment-card .value { font-size: 1.6rem; color: #ffb16e; font-weight: 600; }
.payment-card .status { display: inline-block; margin-top: .75rem; padding: .25rem .625rem; border: 1px solid #666; border-radius: .5rem; }
.payment-card .late { border-color: #e59d83; color: #ffc6b1; }
.payment-detail { border-top: 1px solid #444; margin-top: 1rem; padding-top: 1rem; }
.pix-image { width: min(100%, 16rem); height: auto; background: #fff; padding: .5rem; margin: 1rem auto; }
.portal textarea { min-height: 6rem; resize: vertical; overflow-wrap: anywhere; }
.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; } }