/* Meus Gastos: consistent spacing, aligned labels, values and touch targets. */
:root{--ui-control-height:46px;--ui-gap:12px}
.app :is(h1,h2,h3){text-wrap:balance}
.app :is(p,small,.helper,.muted){line-height:1.6}
.app .heading{align-items:center;gap:20px}
.app .heading>div:first-child{min-width:0}
.app .panel-head{align-items:center;gap:14px;flex-wrap:wrap}
.app .panel-head h2{line-height:1.4;margin:0}
.app .form-grid{align-items:start;gap:18px 16px}
.app .field{min-width:0;gap:8px}
.app .field>label{display:flex;align-items:flex-end;min-height:2.8em;line-height:1.4;margin:0}
.app .field :is(input,select){min-height:var(--ui-control-height);line-height:1.4;padding:11px 12px;font-size:1rem}
.app :is(.btn,.install-button){display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--ui-control-height);line-height:1.35;text-align:center;white-space:normal;overflow-wrap:anywhere;padding:10px 16px}
.app .link-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;line-height:1.4;text-align:center}
.app .actions{display:flex;align-items:stretch;gap:var(--ui-gap);flex-wrap:wrap;margin-top:22px}
.app .actions>.btn{min-width:128px}
.app .helper{margin-top:14px}
.app .summary .label,.app .savings-summary .label{display:block;min-height:2.8em;line-height:1.4}
.app :is(.number,.row-value b,.forecast-card dd,.card-month-amount,.goal-balance){font-variant-numeric:tabular-nums}
.app .summary .number,.app .savings-summary .number{line-height:1.2;letter-spacing:-.035em}
.app .row{align-items:center;gap:16px;padding-block:16px}
.app .row-main strong{white-space:normal;overflow-wrap:anywhere;line-height:1.5}
.app .row-main small{line-height:1.6;margin-top:4px}
.app .row-value{min-width:118px;text-align:right;align-self:center}
.app .row-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px}
.app .row-tools button{min-height:38px;padding:6px 8px;font-size:.8rem;line-height:1.4}
.app .filters{align-items:stretch;gap:10px;flex-wrap:wrap}
.app .filters :is(input,select){min-height:44px;line-height:1.4;min-width:0}
.app .filters input{flex:1 1 200px}
.app .extra-filters>select{flex:1 1 145px}
.app .pagination{align-items:center;gap:12px}
.app .pagination .btn{min-width:100px}
.app #pageInfo{text-align:center;line-height:1.5}
.app .report-toolbar{align-items:stretch;gap:12px}
.app .report-toolbar .helper{align-self:center;margin:0}
.app .goal-card .actions,.app .registered-card .actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.app .goal-card .actions .btn,.app .registered-card .actions .btn{min-width:0;width:100%;padding-inline:10px;height:100%}
.app .goal-card .plan-row-head{align-items:flex-start}
.app .plan-row-head h3{line-height:1.5;overflow-wrap:anywhere}
.app .plan-tag{line-height:1.5}
.app .forecast-card dl>div{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:14px}
.app .forecast-card dt{line-height:1.5}
.app .forecast-card dd{line-height:1.5;margin:0;text-align:right}
.app .installment-toggle,.app .card-active{align-items:center;gap:10px;line-height:1.5}
.app .installment-toggle input,.app .card-active input{margin:0;flex:0 0 20px}
.modal .modal-actions{align-items:stretch;gap:12px}
.modal .modal-actions button{display:inline-flex;align-items:center;justify-content:center;min-height:46px;line-height:1.4}
.web-dashboard .web-focus-grid>.panel{align-items:center}
.web-dashboard .dashboard-summary .balance-card .label{min-height:0}
.web-dashboard .top-actions{align-items:center;gap:10px}
.web-dashboard .web-period-control{align-items:center}
.web-dashboard .app-tabs button{align-items:center;line-height:1.4}
.web-dashboard .app-tabs button .web-nav-icon{align-self:center}
/* Account and invitation screens share the same button and field rhythm. */
.auth-card :is(input,button){min-height:var(--ui-control-height);line-height:1.4}
.auth-card form{gap:18px;margin-top:22px}
.auth-card label{line-height:1.5;gap:8px}
.auth-card :is(.intro,.hint){line-height:1.7}
.auth-card>h2{line-height:1.4;margin-bottom:16px}
.auth-card :is(button,input){border-radius:10px}
.auth-card button{display:inline-flex;align-items:center;justify-content:center;padding:11px 16px;text-align:center}
.auth-card .message:empty,.account>.message:empty{display:none}
.account header{align-items:center;gap:24px}
.account header h1{margin:18px 0 10px}
.account header nav{align-items:center;gap:12px}
.account header nav a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px 12px;text-align:center;line-height:1.4}
.account .check{display:flex;align-items:center;gap:10px;min-height:44px}
.account .check input{min-height:20px;width:20px;margin:0;flex:0 0 20px}
.account .user{align-items:center;gap:20px}
.account .user>div:first-child{flex:1}
.account .user-actions{display:flex;align-items:stretch;gap:10px;justify-content:flex-end}
.account .user-actions button{min-height:44px;min-width:125px;line-height:1.4}
.account #linkArea{max-width:720px;line-height:1.6}
.account #activationLink{font-size:.875rem}
@media(min-width:1000px) and (max-width:1299px){
 .web-dashboard .web-focus-grid>.panel{align-items:stretch}
}
@media(max-width:700px){
 .app .heading{align-items:flex-start;flex-direction:column;gap:16px}
 .app .heading .period{width:100%}
 .app .period strong{min-width:0;flex:1;line-height:1.4}
 .app .cards-overview,.app .planning-overview{align-items:stretch;flex-direction:column}
 .app .cards-overview>.btn,.app .planning-overview>.btn{width:100%}
 .account header{align-items:flex-start;flex-direction:column}
 .account header nav{width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 .account header nav :is(a,button){width:100%;min-height:46px;font-size:.85rem;padding:10px 8px}
 .account .user{align-items:stretch;flex-direction:column}
 .account .user-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}
 .account .user-actions button{min-width:0;width:100%}
}
@media(max-width:560px){
 .app .top{align-items:flex-start;gap:16px}
 .app .top-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;gap:8px}
 .app .top-actions .top-note{display:none}
 .app .top-actions .web-period-control{grid-column:1/-1;width:100%;margin-bottom:6px}
 .app .top-actions .install-button{width:100%;min-width:0;min-height:46px;font-size:.82rem;padding:10px 8px}
 .app .form-grid{gap:16px 12px}
 .app .actions>.btn{flex:1 1 135px;min-width:0}
 .app .goal-card .actions,.app .registered-card .actions{grid-template-columns:repeat(2,minmax(0,1fr))}
 .app .goal-card .actions>.btn:first-child,.app .registered-card .actions>.btn:first-child{grid-column:1/-1}
 .app .row{gap:10px;align-items:flex-start}
 .app .row .icon{display:none}
 .app .row-value{min-width:100px;max-width:48%;align-self:center}
 .app .row-tools{gap:4px;flex-wrap:wrap}
 .app .row-tools button{padding:6px;font-size:.78rem}
 .app .row-main small{font-size:.8rem}
 .app .filters :is(input,select){width:100%;flex:1 1 100%}
 .app .extra-filters .link-btn{width:100%;border:1px solid #d6e1eb;border-radius:9px}
 .app .pagination .btn{min-width:0;padding-inline:12px}
 .app .report-toolbar>.btn{flex:1 1 100%;width:100%}
 .app .report-toolbar .helper{width:100%}
 .app .forecast-card dl>div{gap:10px}
 .app .plan-row-head{gap:10px}
 .app .plan-row-head .link-btn{padding-inline:6px}
 .modal .modal-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 .modal .modal-actions .btn{min-width:0;padding:10px}
}
@media(max-width:380px){
 .app .form-grid{grid-template-columns:minmax(0,1fr)}
 .app .field>label{min-height:0}
 .app .row{display:grid;grid-template-columns:minmax(0,1fr)}
 .app .row-value{max-width:none;width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left}
 .app .row-tools{margin:0}
 .app .summary .label,.app .savings-summary .label{min-height:0}
 .app .summary .number,.app .savings-summary .number{font-size:1.4rem}
 .app .summary .primary .number{font-size:2rem}
}

/* v20: interaction states with visible keyboard focus and reduced-motion support. */
:where(button, .btn, .link-btn) { transition: background-color .16s, box-shadow .16s, transform .16s; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:where(button, a, input, select, textarea):focus-visible { outline: 3px solid #1684a0; outline-offset: 3px; }
@media (hover:hover) {
  :where(button, .btn):not(:disabled):hover { filter: brightness(.96); box-shadow: 0 4px 12px #14334320; }
}
:where(button, .btn):not(:disabled):active { transform: translateY(1px) scale(.98); }
button:disabled { cursor: wait; opacity: .6; box-shadow: none; }
[role="tab"][aria-selected="true"] { box-shadow: inset 0 -3px #1684a0; font-weight: 700; }
body[aria-busy="true"] .sync-status { animation: sync-pulse 1s ease-in-out infinite alternate; }
input:focus, select:focus, textarea:focus { border-color: #1684a0; box-shadow: 0 0 0 3px #1684a018; }
.card { border-radius: 18px; }
.row { transition: background-color .16s; }
.row:focus-within { background: #1684a00a; }
@keyframes sync-pulse { to { opacity: .55; } }
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* v21: one navigation route per section on the home screen. */
.quick-actions, .web-actions, .web-catalog,
#openPlanning, #openCards { display: none !important; }
/* Keep the content below the sticky navigation while scrolling. */
.app-tabs { scroll-margin-top: 12px; }