/* BIG BEN — Mobile Experience 2.2
   Progressive enhancement: business rules and desktop layout remain untouched. */

:root {
    --mobile-nav-height: 78px;
    --mobile-ease: cubic-bezier(.2, .8, .2, 1);
    --mobile-spring: cubic-bezier(.16, 1, .3, 1);
}

html { overflow-x: hidden; }
body { min-width: 320px; overflow-x: hidden; }
.button, button, [role="button"] { min-width: 44px; min-height: 44px; }
.mobile-filter-trigger, .mobile-sheet-header, .mobile-sheet-overlay,
.mobile-step-progress, .mobile-step-actions, .mobile-live-summary,
.report-swipe-hint { display: none; }

/* Hyper-realistic login atmosphere */
.auth-content { position: relative; isolation: isolate; perspective: 1400px; }
.login-scene { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.login-scene::before {
    position: absolute; inset: 0; content: "";
    background:
        linear-gradient(105deg, transparent 0 46%, rgba(255,255,255,.025) 49%, transparent 53%),
        radial-gradient(circle at 50% 42%, transparent 0 17%, rgba(198,148,66,.08) 17.2% 17.45%, transparent 17.7%),
        repeating-radial-gradient(circle at 50% 42%, transparent 0 68px, rgba(255,255,255,.018) 69px 70px),
        linear-gradient(145deg, #0b0809, #211216 46%, #100b0d);
}
.login-scene::after {
    position: absolute; inset: 0; content: ""; opacity: .55;
    background-image: radial-gradient(rgba(255,255,255,.11) .55px, transparent .7px);
    background-size: 4px 4px; mix-blend-mode: soft-light;
}
.login-halo { position: absolute; border-radius: 50%; filter: blur(2px); }
.halo-one { top: -24vw; right: -12vw; width: 62vw; height: 62vw; background: radial-gradient(circle, rgba(215,166,76,.18), rgba(173,111,28,.035) 46%, transparent 70%); animation: login-halo-drift 12s ease-in-out infinite alternate; }
.halo-two { bottom: -35vw; left: -22vw; width: 76vw; height: 76vw; background: radial-gradient(circle, rgba(153,36,66,.24), rgba(97,20,41,.04) 48%, transparent 70%); animation: login-halo-drift 16s ease-in-out -4s infinite alternate-reverse; }
.login-light-beam { position: absolute; top: -20%; left: 52%; width: 25%; height: 145%; opacity: .48; background: linear-gradient(90deg, transparent, rgba(255,218,150,.065), transparent); filter: blur(12px); transform: rotate(13deg); animation: login-beam 8s ease-in-out infinite alternate; }
.login-clock { position: absolute; top: 50%; left: 50%; width: min(78vw, 760px); aspect-ratio: 1; border: 1px solid rgba(220,175,92,.08); border-radius: 50%; box-shadow: 0 0 0 42px rgba(198,148,66,.016), 0 0 0 96px rgba(198,148,66,.012), inset 0 0 90px rgba(0,0,0,.22); transform: translate(-50%,-50%); }
.login-clock::before, .login-clock::after { position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; border-radius: 50%; content: ""; background: #d6aa5d; box-shadow: 0 0 24px rgba(218,169,82,.45); transform: translate(-50%,-50%); }
.login-clock::after { width: 54%; height: 54%; border: 1px dashed rgba(228,189,117,.07); background: transparent; box-shadow: none; }
.login-clock i, .login-clock b { position: absolute; bottom: 50%; left: calc(50% - 1px); width: 2px; border-radius: 4px; background: linear-gradient(to top, #8f6024, #e1b866); transform-origin: 50% 100%; }
.login-clock i { height: 25%; animation: clock-hand 24s linear infinite; }
.login-clock b { height: 17%; opacity: .72; animation: clock-hand 144s linear infinite; }
.login-particles i { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #e9c98c; box-shadow: 0 0 12px #c89541; animation: particle-float 8s ease-in-out infinite; }
.login-particles i:nth-child(1) { top: 18%; left: 15%; animation-delay: -1s; }
.login-particles i:nth-child(2) { top: 74%; left: 18%; animation-delay: -5s; }
.login-particles i:nth-child(3) { top: 28%; right: 13%; animation-delay: -3s; }
.login-particles i:nth-child(4) { right: 22%; bottom: 19%; animation-delay: -6s; }
.login-particles i:nth-child(5) { top: 11%; left: 60%; animation-delay: -2s; }
.login-particles i:nth-child(6) { bottom: 9%; left: 55%; animation-delay: -7s; }

.auth-card.login-premium {
    --pointer-x: 50%; --pointer-y: 50%; --rotate-x: 0deg; --rotate-y: 0deg;
    overflow: visible; border: 1px solid rgba(255,255,255,.62);
    background: linear-gradient(145deg, rgba(255,255,255,.985), rgba(249,244,239,.94));
    box-shadow: 0 55px 130px rgba(0,0,0,.52), 0 12px 30px rgba(0,0,0,.2), inset 0 1px 0 #fff;
    transform: rotateX(var(--rotate-x)) rotateY(var(--rotate-y));
    transform-style: preserve-3d;
    transition: transform .2s ease-out, box-shadow .4s ease;
}
.auth-card.login-premium::after {
    position: absolute; z-index: -1; inset: 12px; border-radius: inherit; content: "";
    background: #7b2138; filter: blur(36px); opacity: .18; transform: translateY(32px) translateZ(-1px);
}
.login-card-glow { position: absolute; z-index: 0; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; }
.login-card-glow::before { position: absolute; width: 240px; height: 240px; border-radius: 50%; content: ""; background: radial-gradient(circle, rgba(255,255,255,.88), rgba(255,229,181,.13) 38%, transparent 69%); transform: translate(calc(var(--pointer-x) - 50%), calc(var(--pointer-y) - 50%)); transition: transform .15s linear; }
.login-premium > :not(.login-card-glow) { position: relative; z-index: 1; transform: translateZ(16px); }
.login-premium .auth-logo { filter: drop-shadow(0 12px 18px rgba(72,34,15,.22)); animation: logo-breathe 4s ease-in-out infinite; }
.login-premium .field input { border-color: rgba(97,60,66,.14); background: rgba(255,255,255,.72); box-shadow: inset 0 1px 2px rgba(29,15,18,.035); transition: border .25s, box-shadow .25s, transform .25s; }
.login-premium .field input:focus { border-color: rgba(139,40,65,.58); box-shadow: 0 0 0 4px rgba(139,40,65,.09), 0 12px 24px rgba(50,20,28,.07); transform: translateY(-1px); }
.login-submit { position: relative; overflow: hidden; justify-content: space-between; padding-inline: 22px; }
.login-submit::before { position: absolute; top: -100%; left: -35%; width: 25%; height: 300%; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: rotate(22deg); animation: login-button-shine 4.2s ease-in-out infinite; }
.login-submit b { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.13); transition: transform .25s var(--mobile-spring); }
.login-submit:hover b { transform: translateX(4px); }

/* Draft, loading and success feedback */
.draft-recovery { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 10px; padding: 13px; border: 1px solid rgba(198,148,66,.25); border-radius: 14px; background: #fff8eb; }
.draft-recovery div { display: flex; flex-direction: column; }
.draft-recovery small { color: var(--muted); font-size: .75rem; }
.draft-recovery > button:not(.button) { min-height: 44px; padding: 0 11px; border: 0; color: var(--wine); background: transparent; font-weight: 800; }
.is-submitting button[type="submit"] { position: relative; opacity: .82; cursor: wait; }
.is-submitting button[type="submit"]::before { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,.45); border-top-color: #fff; border-radius: 50%; content: ""; animation: mobile-spin .7s linear infinite; }
.mobile-success-feedback { position: fixed; z-index: 200; top: 50%; left: 50%; display: grid; width: 190px; min-height: 160px; place-items: center; padding: 24px; border: 1px solid rgba(255,255,255,.18); border-radius: 28px; color: #fff; text-align: center; background: rgba(22,67,52,.92); box-shadow: 0 32px 90px rgba(0,0,0,.35); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; transform: translate(-50%,-45%) scale(.8); transition: opacity .3s, transform .5s var(--mobile-spring); }
.mobile-success-feedback.show { opacity: 1; transform: translate(-50%,-50%) scale(1); }
.mobile-success-feedback span { display: grid; width: 64px; height: 64px; place-items: center; border: 2px solid rgba(255,255,255,.6); border-radius: 50%; font-size: 2rem; box-shadow: 0 0 0 10px rgba(255,255,255,.08); }

@keyframes login-halo-drift { to { transform: translate3d(4vw,-2vw,0) scale(1.08); } }
@keyframes login-beam { to { opacity: .2; transform: translateX(-12vw) rotate(8deg); } }
@keyframes clock-hand { to { transform: rotate(1turn); } }
@keyframes particle-float { 50% { opacity: .2; transform: translate3d(18px,-30px,0) scale(.5); } }
@keyframes logo-breathe { 50% { transform: translateY(-3px); filter: drop-shadow(0 16px 22px rgba(72,34,15,.3)); } }
@keyframes login-button-shine { 0%,60% { left: -35%; } 85%,100% { left: 125%; } }
@keyframes mobile-spin { to { transform: rotate(1turn); } }
@keyframes step-enter { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes success-pop { 0% { transform: scale(.25); opacity: 0; } 70% { transform: scale(1.12); } 100% { transform: none; opacity: 1; } }

@media (max-width: 900px) {
    input, select, textarea { font-size: 16px; }
    body.filter-sheet-open { overflow: hidden; }
    .mobile-header { overflow: hidden; transform: translateZ(0); transition: height .35s var(--mobile-ease), padding .35s var(--mobile-ease), background .25s, box-shadow .25s; }
    .mobile-header .mobile-brand, .mobile-header .icon-button { transition: transform .35s var(--mobile-ease), opacity .25s; }
    .mobile-header.is-compact { height: calc(54px + env(safe-area-inset-top)); }
    .mobile-header.is-compact .mobile-brand { transform: scale(.92); transform-origin: left center; }
    .mobile-header.is-compact .mobile-brand small { opacity: 0; }
    .mobile-header.is-compact .icon-button { transform: scale(.9); }

    .bottom-nav a, .bottom-nav button { min-height: 58px; font-size: .64rem; line-height: 1; letter-spacing: .005em; }
    .bottom-nav a.active { position: relative; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); box-shadow: inset 0 1px rgba(255,255,255,.08); }
    .bottom-nav a.active::before { position: absolute; top: 1px; width: 24px; height: 2px; border-radius: 2px; content: ""; background: #e8bb6b; box-shadow: 0 0 10px rgba(232,187,107,.6); }

    /* Native-feeling filter bottom sheet */
    .mobile-filter-trigger { display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; width: 100%; min-height: 62px; margin-bottom: 14px; padding: 8px 14px; border: 1px solid rgba(93,60,65,.1); border-radius: 17px; text-align: left; background: rgba(255,255,255,.92); box-shadow: 0 9px 28px rgba(39,21,25,.07); }
    .mobile-filter-trigger > span { grid-row: 1 / 3; display: grid; place-items: center; color: var(--wine); font-size: 1.5rem; }
    .mobile-filter-trigger strong { align-self: end; color: var(--text); font-size: .86rem; }
    .mobile-filter-trigger small { align-self: start; color: var(--muted); font-size: .72rem; }
    .filter-card[data-filter-ready="1"] { position: fixed; z-index: 102; right: 0; bottom: 0; left: 0; display: block; max-height: 82vh; max-height: min(82dvh, 720px); margin: 0; padding: 0 18px calc(20px + env(safe-area-inset-bottom)); overflow-y: auto; border: 0; border-radius: 27px 27px 0 0; background: rgba(255,253,251,.985); box-shadow: 0 -24px 80px rgba(27,13,17,.28); overscroll-behavior: contain; transform: translateY(calc(100% + 20px)); visibility: hidden; animation: none !important; transition: transform .48s var(--mobile-spring), visibility .48s; }
    .filter-card[data-filter-ready="1"].filter-initializing { transition: none !important; }
    .filter-card[data-filter-ready="1"].is-open { transform: none; visibility: visible; }
    .mobile-sheet-header { position: sticky; z-index: 2; top: 0; display: grid; grid-template-columns: 1fr 44px; align-items: center; min-height: 78px; margin: 0 -18px 14px; padding: 19px 18px 9px; background: linear-gradient(rgba(255,253,251,1) 75%, rgba(255,253,251,0)); touch-action: none; }
    .mobile-sheet-handle { position: absolute; top: 8px; left: 50%; width: 42px; height: 5px; border-radius: 5px; background: #d8d0ca; transform: translateX(-50%); }
    .mobile-sheet-header div { display: flex; flex-direction: column; }
    .mobile-sheet-header small { color: var(--wine); font-size: .59rem; font-weight: 900; letter-spacing: .14em; }
    .mobile-sheet-header strong { font-size: 1.1rem; }
    .mobile-sheet-header button { border: 0; border-radius: 13px; color: var(--text); background: #f3eeea; font-size: 1.5rem; }
    .mobile-sheet-overlay { position: fixed; z-index: 101; inset: 0; display: block; width: 100%; height: 100%; border: 0; background: rgba(19,10,13,.55); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
    .mobile-sheet-overlay.is-open { opacity: 1; visibility: visible; }
    .filter-card[data-filter-ready="1"] .filter-form,
    .filter-card[data-filter-ready="1"] .report-filter-form { display: grid; grid-template-columns: 1fr; gap: 13px; }
    .filter-card[data-filter-ready="1"] .button { width: 100%; }
}

@media (max-width: 680px) {
    body { font-size: 16px; }
    .content { padding-top: calc(86px + env(safe-area-inset-top)); }
    .page-heading p, .section-heading p, .field > span, .metric-card small, .summary-item small,
    .helper-text, .muted { font-size: max(.78rem, 12.5px); line-height: 1.45; }
    .button { min-height: 48px; }

    /* One denomination = one clear touch card */
    .cash-table-wrap { margin: 0 !important; padding: 0 !important; overflow: visible; }
    .cash-table-wrap::after { display: none !important; }
    .mobile-denomination-cards { display: block; min-width: 0 !important; width: 100%; }
    .mobile-denomination-cards thead { display: none; }
    .mobile-denomination-cards tbody { display: grid; gap: 12px; }
    .mobile-denomination-cards tr { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 11px 14px; padding: 17px; border: 1px solid rgba(92,57,62,.1); border-radius: 19px; background: linear-gradient(145deg,#fff,#fbf7f3); box-shadow: 0 12px 32px rgba(43,22,27,.065); animation: item-reveal .45s var(--mobile-spring) both; }
    .mobile-denomination-cards tr:nth-child(2) { animation-delay: .04s; }
    .mobile-denomination-cards tr:nth-child(3) { animation-delay: .08s; }
    .mobile-denomination-cards tr:nth-child(4) { animation-delay: .12s; }
    .mobile-denomination-cards tr:nth-child(5) { animation-delay: .16s; }
    .mobile-denomination-cards td { display: flex; min-width: 0; height: auto !important; padding: 0; border: 0; }
    .mobile-denomination-cards td:nth-child(1) { align-items: center; font-size: 1.18rem; font-weight: 900; }
    .mobile-denomination-cards td:nth-child(2) { align-items: center; justify-content: flex-end; color: var(--muted); font-size: .76rem; }
    .mobile-denomination-cards td:nth-child(2)::before { margin-right: 5px; content: "Meta:"; }
    .mobile-denomination-cards td:nth-child(3) { grid-column: 1 / -1; }
    .mobile-denomination-cards td:nth-child(3)::before { display: block; align-self: center; min-width: 68px; margin-right: 10px; color: var(--muted); content: "Contado"; font-size: .72rem; font-weight: 800; }
    .mobile-denomination-cards .count-stepper { display: grid; grid-template-columns: 52px minmax(70px,1fr) 52px; width: 100%; }
    .mobile-denomination-cards .count-stepper button, .mobile-denomination-cards .count-stepper input { min-height: 52px; }
    .mobile-denomination-cards td:nth-child(4) { flex-direction: column; }
    .mobile-denomination-cards td:nth-child(4)::before { color: var(--muted); content: "Subtotal"; font-size: .68rem; font-weight: 700; }
    .mobile-denomination-cards td:nth-child(4) strong { color: var(--wine); font-size: 1.05rem; }
    .mobile-denomination-cards td:nth-child(5) { align-items: end; justify-content: flex-end; text-align: right; }
    .mobile-denomination-cards .status-chip { white-space: normal; }

    /* Horizontal data tables become vertical record cards */
    .mobile-card-table-wrap { margin: 0 !important; padding: 0 !important; overflow: visible; }
    .mobile-record-table, .mobile-record-table tbody, .mobile-record-table tr, .mobile-record-table td,
    .mobile-report-table, .mobile-report-table tbody, .mobile-report-table tr, .mobile-report-table td { display: block; width: 100%; min-width: 0; }
    .mobile-record-table thead, .mobile-report-table thead { display: none; }
    .mobile-record-table tbody, .mobile-report-table tbody { display: grid; gap: 13px; }
    .mobile-record-table tr, .mobile-report-table tbody tr { overflow: hidden; padding: 9px 16px; border: 1px solid rgba(91,57,62,.1); border-radius: 18px; background: #fff; box-shadow: 0 10px 28px rgba(39,20,25,.06); animation: item-reveal .45s var(--mobile-spring) both; }
    .mobile-record-table td, .mobile-report-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 42px; padding: 9px 0; border: 0; border-bottom: 1px solid rgba(91,57,62,.07); text-align: right; }
    .mobile-record-table td::before, .mobile-report-table tbody td::before { flex: 0 0 40%; color: var(--muted); text-align: left; content: attr(data-label); font-size: .72rem; font-weight: 800; }
    .mobile-record-table td:last-child, .mobile-report-table tbody td:last-child { border-bottom: 0; }
    .mobile-record-table td:first-child { color: var(--text); font-size: 1rem; font-weight: 900; }
    .mobile-record-table .mobile-card-action { display: block; padding-top: 12px; }
    .mobile-record-table .mobile-card-action::before { display: none; }
    .mobile-record-table .mobile-card-action a, .mobile-record-table .mobile-card-action .button { width: 100%; }

    /* Os cartões de relatório usam data-label do HTML para acompanhar as colunas atuais. */
    .mobile-report-table tfoot { display: block; margin-top: 10px; }
    .mobile-report-table tfoot tr { display: grid; gap: 3px; padding: 15px; border-radius: 16px; color: #fff; background: linear-gradient(145deg,#86263f,#5c1729); }
    .mobile-report-table tfoot td { display: block; width: 100%; padding: 4px; border: 0; color: #fff; text-align: right; }

    /* Closing flow in three short, animated steps */
    .mobile-steps-form { scroll-margin-top: 82px; }
    .mobile-step-progress { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 20px; }
    .mobile-step-progress span { position: relative; height: 6px; overflow: hidden; border-radius: 6px; background: #e8e0da; }
    .mobile-step-progress span::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg,#8e2943,#c99742); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--mobile-ease); }
    .mobile-step-progress span.active::after, .mobile-step-progress span.complete::after { transform: scaleX(1); }
    .form-step.is-active { display: block; animation: step-enter .45s var(--mobile-spring) both; }
    .mobile-steps-form .form-step[hidden] { display: none !important; }
    .mobile-step-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; margin-top: 22px; }
    .mobile-step-actions .button { width: 100%; }
    .mobile-step-heading { margin-top: 0; }

    /* Important totals stay at thumb level during note counting */
    .mobile-live-summary { position: fixed; z-index: 32; right: 10px; bottom: calc(91px + env(safe-area-inset-bottom)); left: 10px; display: grid; grid-template-columns: repeat(4,1fr); min-height: 66px; padding: 7px; border: 1px solid rgba(255,255,255,.1); border-radius: 20px; color: #fff; background: rgba(31,20,23,.94); box-shadow: 0 18px 48px rgba(26,12,16,.3); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); transition: opacity .3s, transform .35s var(--mobile-ease); }
    .mobile-live-summary.is-suppressed { opacity: 0; pointer-events: none; transform: translateY(16px); }
    .mobile-live-summary > div { display: flex; min-width: 0; align-items: center; justify-content: center; flex-direction: column; padding: 3px 4px; border-right: 1px solid rgba(255,255,255,.08); text-align: center; }
    .mobile-live-summary > div:last-child { border: 0; }
    .mobile-live-summary span { overflow: hidden; width: 100%; color: rgba(255,255,255,.5); font-size: .58rem; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-live-summary strong { max-width: 100%; overflow: hidden; color: #fff; font-size: .76rem; text-overflow: ellipsis; white-space: nowrap; }
    .mobile-live-summary .difference-positive strong { color: #82d4af; }
    .mobile-live-summary .difference-negative strong { color: #ff9aaa; }

    /* Responsive report visualization + deliberate horizontal gesture */
    .report-swipe-hint { display: flex; align-items: center; justify-content: center; gap: 8px; margin: -5px 0 15px; color: var(--muted); font-size: .72rem; }
    .report-swipe-hint::before { content: "↔"; color: var(--wine); font-size: 1.1rem; }
    .monthly-bars { display: grid; grid-template-columns: repeat(12,minmax(0,1fr)); gap: 4px; width: 100%; height: 245px; padding: 22px 0 4px; overflow: visible; }
    .month-bar { min-width: 0; }
    .month-bar .bar-value { overflow: visible; font-size: .48rem; white-space: nowrap; transform: translateX(-17%); }
    .month-bar > strong { font-size: .58rem; }
    [data-report-swipe] { touch-action: pan-y; transition: opacity .2s, transform .2s; }
    [data-report-swipe].swipe-left { opacity: .65; transform: translateX(-8px); }
    [data-report-swipe].swipe-right { opacity: .65; transform: translateX(8px); }

    .draft-recovery { grid-template-columns: 1fr 1fr; }
    .draft-recovery div { grid-column: 1 / -1; }
    .draft-recovery .button { width: 100%; }

    .auth-content { padding-inline: 14px; }
    .auth-card.login-premium { padding: 28px 21px; border-radius: 25px; }
    .auth-brand { margin-bottom: 28px; }
    .login-clock { width: 128vw; }
}

@media (max-width: 390px) {
    .bottom-nav a, .bottom-nav button { font-size: .58rem; }
    .bottom-nav .ui-icon { width: 18px; height: 18px; }
    .mobile-live-summary { right: 6px; left: 6px; }
    .mobile-live-summary span { font-size: .53rem; }
    .mobile-live-summary strong { font-size: .68rem; }
    .month-bar .bar-value { display: none; }
    .mobile-denomination-cards tr { padding: 14px; }
    .auth-card.login-premium { padding-inline: 18px; }
}

/* Android/iOS landscape: preserve usable vertical space */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {
    .mobile-header { height: calc(52px + env(safe-area-inset-top)); }
    .mobile-brand small { display: none; }
    .content { padding-top: calc(66px + env(safe-area-inset-top)); padding-bottom: calc(78px + env(safe-area-inset-bottom)); }
    .bottom-nav { right: max(12px, env(safe-area-inset-right)); bottom: 6px; left: max(12px, env(safe-area-inset-left)); height: 58px; border-radius: 17px; }
    .bottom-nav a, .bottom-nav button { min-height: 48px; flex-direction: row; gap: 6px; font-size: .64rem; }
    .bottom-nav .bottom-action { top: -7px; width: 58px; height: 56px; border-width: 3px; border-radius: 17px; }
    .mobile-live-summary { right: max(10px, env(safe-area-inset-right)); bottom: calc(70px + env(safe-area-inset-bottom)); left: max(10px, env(safe-area-inset-left)); min-height: 54px; }
    .filter-card[data-filter-ready="1"] { right: max(8vw, env(safe-area-inset-right)); left: max(8vw, env(safe-area-inset-left)); max-height: 92dvh; border-radius: 25px 25px 0 0; }
    .auth-content { align-items: flex-start; padding: 16px max(18px,env(safe-area-inset-right)) 16px max(18px,env(safe-area-inset-left)); overflow-y: auto; }
    .auth-card.login-premium { width: min(100%,760px); padding: 20px 28px; }
    .auth-brand { margin-bottom: 12px; }
    .auth-heading h1 { margin: 4px 0; font-size: 1.55rem; }
    .auth-heading p, .auth-footnote { margin-block: 5px; }
    .login-premium form { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 14px; }
    .login-premium .login-submit { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
    .login-scene span, .login-premium .auth-logo, .login-submit::before { animation: none !important; }
    .auth-card.login-premium { transform: none !important; }
}

@media print {
    .mobile-filter-trigger, .mobile-sheet-overlay, .mobile-sheet-header,
    .mobile-live-summary, .report-swipe-hint, .mobile-success-feedback { display: none !important; }

    /* A largura virtual da folha pode ativar os breakpoints mobile.
       Em impressão, tabelas voltam ao formato tabular para não virarem cartões. */
    .mobile-record-table,
    .mobile-report-table { display: table !important; width: 100% !important; }
    .mobile-record-table thead,
    .mobile-report-table thead { display: table-header-group !important; }
    .mobile-record-table tbody,
    .mobile-report-table tbody { display: table-row-group !important; }
    .mobile-record-table tfoot,
    .mobile-report-table tfoot { display: table-footer-group !important; margin: 0 !important; }
    .mobile-record-table tr,
    .mobile-report-table tr { display: table-row !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; animation: none !important; }
    .mobile-record-table td,
    .mobile-report-table td { display: table-cell !important; width: auto !important; min-height: 0 !important; padding: 6px !important; border-bottom: 1px solid #ddd5cd !important; text-align: left !important; }
    .mobile-record-table td::before,
    .mobile-report-table td::before { display: none !important; content: none !important; }
    .mobile-record-table .mobile-card-action { display: table-cell !important; padding: 6px !important; }
    .mobile-record-table .mobile-card-action a,
    .mobile-record-table .mobile-card-action .button { width: auto !important; }
}

/* 2.3.8 — métricas/ROI compactas em Android e iOS */
@media (max-width:680px) {
    .admin-performance-preview { margin-top:18px; }
    .performance-preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .performance-preview-card { min-height:82px; padding:12px; }
    .performance-preview-card strong { font-size:1.08rem; }
    .metrics-top-grid { grid-template-columns:1fr 1fr; }
    .performance-period-grid { gap:9px; }
    .performance-period-card { padding:13px; }
    .performance-period-heading { margin-bottom:10px; }
    .performance-period-heading > div > strong { font-size:1.2rem; }
    .performance-breakdown { gap:6px; }
    .performance-breakdown > div { padding:9px; }
    .best-period-grid { grid-template-columns:1fr; gap:8px; }
    .best-period-card { min-height:78px; padding:13px; }
    .metrics-cost-layout { grid-template-columns:1fr; gap:10px; }
    .metrics-cost-form-card .form-grid.columns-2.metrics-cost-fields { grid-template-columns:1fr; }
    .metrics-cost-form-card,
    .metrics-cost-list-card { padding:13px; }
    .metrics-cost-item { gap:9px; padding:10px 0; }
    .metrics-cost-item .button { min-width:72px; }
    .metrics-danger-zone { align-items:stretch; flex-direction:column; }
    .metrics-danger-actions { display:grid; grid-template-columns:1fr; width:100%; }
    .metrics-danger-actions .button { width:100%; }
    .metrics-reset-banner { margin-bottom:10px; }
}

@media (max-width:390px) {
    .performance-preview-card { min-height:72px; }
    .performance-breakdown { grid-template-columns:1fr 1fr; }
    .metrics-cost-item .button-small { min-height:44px; }
}

/* 2.3.11 — envelope por cédulas sem aumentar espaços no mobile */
@media (max-width: 680px) {
    .mobile-denomination-cards td:nth-child(5) { grid-column: 1 / -1; align-items: stretch; justify-content: stretch; text-align: left; }
    .mobile-denomination-cards .destination-cell { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .envelope-rule-grid { margin-top: 8px; }
}

/* 2.3.14 — alerta de divergência no resumo móvel */
@media (max-width: 900px) {
    .mobile-live-summary .difference-warning strong { color: #edc36c; }
}

/* 2.3.20: alvos de toque mínimos no cabeçalho/menu mobile. */
@media (max-width: 900px) {
    .icon-button { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
    .sidebar-user > a { width: 44px; height: 44px; min-width: 44px; min-height: 44px; }
}

/* 2.3.23 — Android/iOS visual hardening */
.login-card-glow::before {
    top: var(--pointer-y);
    left: var(--pointer-x);
    transform: translate(-50%, -50%);
}

@media (hover: none), (pointer: coarse) {
    .auth-content { perspective: none; }
    .auth-card.login-premium { transform: none !important; transform-style: flat; }
    .login-premium > :not(.login-card-glow) { transform: none; }
    .login-card-glow::before { top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: .55; }
    .login-premium .auth-logo, .login-submit::before { animation: none; }
}

@media (max-width: 900px) {
    .mobile-header {
        padding-right: max(16px, env(safe-area-inset-right));
        padding-left: max(16px, env(safe-area-inset-left));
    }
    .content {
        padding-right: max(20px, env(safe-area-inset-right));
        padding-left: max(20px, env(safe-area-inset-left));
    }
    .bottom-nav {
        right: max(12px, env(safe-area-inset-right));
        left: max(12px, env(safe-area-inset-left));
    }
    .bottom-nav button.active { position: relative; color: #fff; background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.035)); box-shadow: inset 0 1px rgba(255,255,255,.08); }
    .bottom-nav button.active::before { position: absolute; top: 1px; width: 24px; height: 2px; border-radius: 2px; content: ""; background: #e8bb6b; box-shadow: 0 0 10px rgba(232,187,107,.6); }
    .mobile-live-summary {
        right: max(10px, env(safe-area-inset-right));
        left: max(10px, env(safe-area-inset-left));
    }
    .toast {
        right: max(12px, env(safe-area-inset-right));
        left: max(12px, env(safe-area-inset-left));
    }
    .filter-card[data-filter-ready="1"] {
        padding-right: max(18px, env(safe-area-inset-right));
        padding-left: max(18px, env(safe-area-inset-left));
    }
    .auth-content {
        min-height: 100svh;
        min-height: 100dvh;
        padding-right: max(18px, env(safe-area-inset-right));
        padding-left: max(18px, env(safe-area-inset-left));
    }
}

@media (max-width: 680px) {
    .content {
        padding-right: max(14px, env(safe-area-inset-right));
        padding-left: max(14px, env(safe-area-inset-left));
    }
    .detail-card, .form-card, .narrow-card, .report-chart-card, .annual-summary-card { min-width: 0; }
    .profile-card dl > div { min-width: 0; }
    .profile-card dd { min-width: 0; max-width: 68%; }
    .audit-item time { white-space: normal; }
    .form-actions { flex-wrap: wrap; }
    .form-actions .button { min-width: min(100%, 150px); }
}

@media (max-width: 480px) {
    .metrics-top-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 390px) {
    .content {
        padding-right: max(11px, env(safe-area-inset-right));
        padding-left: max(11px, env(safe-area-inset-left));
    }
    .bottom-nav {
        right: max(8px, env(safe-area-inset-right));
        left: max(8px, env(safe-area-inset-left));
    }
    .mobile-live-summary {
        right: max(6px, env(safe-area-inset-right));
        left: max(6px, env(safe-area-inset-left));
    }
}

/* 2.3.24 — Login cinematic states */
.login-card-edge {
    position: absolute; z-index: 2; inset: -1px; overflow: hidden; border-radius: inherit; pointer-events: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; padding: 1px;
    background: conic-gradient(from var(--login-edge-angle, 0deg), transparent 0 22%, rgba(243,205,133,.92) 30%, transparent 40% 68%, rgba(72,137,139,.58) 76%, transparent 86%);
    opacity: .62; animation: login-edge-orbit 8s linear infinite;
}
.login-premium:focus-within .login-card-edge { opacity: .95; animation-duration: 4.8s; }
.login-premium .field { position: relative; }
.login-premium .field::after {
    position: absolute; right: 14px; bottom: 0; left: 14px; height: 1px; border-radius: 2px; content: "";
    background: linear-gradient(90deg, transparent, rgba(204,155,70,.8), transparent); opacity: 0; transform: scaleX(.25);
    transition: opacity .25s, transform .45s var(--mobile-ease);
}
.login-premium .field:focus-within::after { opacity: 1; transform: scaleX(1); }
.login-premium.is-authenticating { pointer-events: none; animation: login-submit-lift .65s var(--mobile-spring) both; }
.login-premium.is-authenticating .login-card-edge { animation-duration: .8s; opacity: 1; }
.login-premium.is-authenticating .login-submit b { animation: login-arrow-go .7s var(--mobile-spring) infinite; }

.auth-has-error .login-premium { animation: login-error-card .58s cubic-bezier(.36,.07,.19,.97) both; }
.auth-has-error .login-premium::after { background: #a91f38; opacity: .34; animation: login-error-glow 1.25s ease-out both; }
.auth-has-error .login-card-edge { background: conic-gradient(from 0deg, transparent 0 12%, rgba(232,75,91,.95) 22%, transparent 34% 62%, rgba(255,182,104,.72) 72%, transparent 84%); animation: login-edge-orbit 2.2s linear 1; }
.auth-has-error .login-premium input[name="password"] { border-color: rgba(190,53,70,.65); box-shadow: 0 0 0 4px rgba(190,53,70,.08), inset 0 1px 2px rgba(29,15,18,.04); }

/* 2.3.26 — durante a transição de login, não permita rolar o painel por trás da animação. */
html.login-entry-running,
html.login-entry-running body { overflow: hidden !important; overscroll-behavior: none; }
html.login-entry-running .login-entry { touch-action: none; }

.login-entry {
    position: fixed; z-index: 10000; inset: 0; display: grid; place-items: center; overflow: hidden; color: #fff;
    background: rgba(8,10,11,.98); opacity: 1; visibility: visible; pointer-events: all;
    animation: login-entry-exit .72s 1.65s cubic-bezier(.7,0,.3,1) forwards;
}
.login-entry::before, .login-entry::after { position: absolute; content: ""; border-radius: 50%; pointer-events: none; }
.login-entry-core { position: relative; z-index: 3; display: grid; justify-items: center; gap: 7px; text-align: center; animation: login-entry-core 1.25s var(--mobile-spring) both; }
.login-entry-core img { width: 92px; height: 92px; object-fit: contain; filter: drop-shadow(0 20px 36px rgba(0,0,0,.45)); }
.login-entry-core strong { margin-top: 8px; font-size: .72rem; letter-spacing: .22em; }
.login-entry-core span { color: rgba(255,255,255,.56); font-size: .78rem; letter-spacing: .04em; }
.login-entry-orbit { position: absolute; z-index: 2; width: min(62vw, 520px); aspect-ratio: 1; }
.login-entry-orbit i { position: absolute; inset: 0; border: 1px solid rgba(230,191,113,.18); border-radius: 50%; animation: entry-orbit 3s linear infinite; }
.login-entry-orbit i:nth-child(2) { inset: 12%; animation-direction: reverse; animation-duration: 4.4s; }
.login-entry-orbit i:nth-child(3) { inset: 26%; animation-duration: 2.2s; }
.login-entry-sweep { position: absolute; z-index: 4; top: -20%; bottom: -20%; width: 18%; transform: skewX(-16deg) translateX(-65vw); animation: login-entry-sweep 1.05s .4s cubic-bezier(.2,.8,.2,1) both; }

.login-entry-admin { background: radial-gradient(circle at 50% 48%, #342615 0, #15130e 26%, #080a0b 62%); }
.login-entry-admin::before { width: 78vmax; height: 78vmax; border: 1px solid rgba(224,184,106,.1); box-shadow: 0 0 0 8vmax rgba(207,154,66,.025), 0 0 0 16vmax rgba(207,154,66,.018); animation: admin-crown-pulse 1.4s ease-out both; }
.login-entry-admin::after { width: 380px; height: 380px; background: radial-gradient(circle, rgba(226,180,93,.2), transparent 68%); filter: blur(14px); }
.login-entry-admin .login-entry-core img { animation: admin-logo-rise 1.15s var(--mobile-spring) both; }
.login-entry-admin .login-entry-core strong { color: #f0c978; text-shadow: 0 0 24px rgba(227,178,86,.34); }
.login-entry-admin .login-entry-orbit i { border-top-color: rgba(241,205,133,.78); box-shadow: 0 -5px 28px rgba(229,181,91,.12); }
.login-entry-admin .login-entry-sweep { background: linear-gradient(90deg, transparent, rgba(247,211,144,.2), rgba(255,255,255,.48), rgba(247,211,144,.15), transparent); filter: blur(6px); }

.login-entry-employee { background: radial-gradient(circle at 50% 48%, #17231d 0, #101715 28%, #080a0b 65%); }
.login-entry-employee::before { width: 54vmax; height: 54vmax; border: 1px dashed rgba(111,201,154,.16); box-shadow: inset 0 0 80px rgba(60,142,103,.06); animation: employee-scan-ring 1.4s var(--mobile-ease) both; }
.login-entry-employee::after { right: 0; bottom: 0; left: 0; height: 2px; border-radius: 0; background: linear-gradient(90deg, transparent, #5fc08f, transparent); box-shadow: 0 0 34px rgba(95,192,143,.5); animation: employee-scan-line 1.25s ease-in-out both; }
.login-entry-employee .login-entry-core strong { color: #8ed9b2; }
.login-entry-employee .login-entry-orbit { width: min(50vw, 420px); }
.login-entry-employee .login-entry-orbit i { border-color: rgba(101,198,150,.14); border-right-color: rgba(107,213,160,.68); }
.login-entry-employee .login-entry-sweep { background: linear-gradient(90deg, transparent, rgba(97,207,151,.18), rgba(174,255,215,.34), transparent); filter: blur(5px); }

@keyframes login-edge-orbit { to { --login-edge-angle: 360deg; transform: rotate(360deg); } }
@keyframes login-submit-lift { 50% { transform: translateY(-4px) scale(1.012); box-shadow: 0 68px 150px rgba(0,0,0,.56), 0 16px 34px rgba(0,0,0,.24), inset 0 1px #fff; } }
@keyframes login-arrow-go { 50% { transform: translateX(7px); } }
@keyframes login-error-card { 0%,100% { transform: translateX(0); } 18% { transform: translateX(-9px) rotate(-.4deg); } 36% { transform: translateX(8px) rotate(.35deg); } 54% { transform: translateX(-5px); } 72% { transform: translateX(3px); } }
@keyframes login-error-glow { 0% { opacity: .42; filter: blur(22px); } 100% { opacity: .18; filter: blur(36px); } }
@keyframes login-entry-core { 0% { opacity: 0; transform: scale(.72) translateY(18px); } 62% { opacity: 1; transform: scale(1.035); } 100% { opacity: 1; transform: none; } }
@keyframes login-entry-exit { to { opacity: 0; visibility: hidden; transform: scale(1.035); } }
@keyframes entry-orbit { to { transform: rotate(360deg); } }
@keyframes login-entry-sweep { 0% { transform: skewX(-16deg) translateX(-65vw); } 100% { transform: skewX(-16deg) translateX(65vw); } }
@keyframes admin-crown-pulse { 0% { opacity: 0; transform: scale(.55); } 68% { opacity: 1; } 100% { opacity: .55; transform: scale(1); } }
@keyframes admin-logo-rise { 0% { transform: translateY(24px) scale(.7) rotate(-6deg); opacity: 0; } 72% { transform: translateY(-4px) scale(1.06) rotate(1deg); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes employee-scan-ring { 0% { opacity: 0; transform: scale(.65); } 70% { opacity: 1; } 100% { opacity: .7; transform: scale(1); } }
@keyframes employee-scan-line { 0% { bottom: 10%; opacity: 0; } 20% { opacity: 1; } 100% { bottom: 90%; opacity: 0; } }

@media (max-width: 900px) {
    .login-entry-orbit { width: min(112vw, 520px); }
    .login-entry-core img { width: 78px; height: 78px; }
    .login-entry-core strong { font-size: .66rem; letter-spacing: .18em; }
    .login-entry-employee .login-entry-orbit { width: min(96vw, 420px); }
}
@media (prefers-reduced-motion: reduce) {
    .login-entry { animation-duration: .18s; animation-delay: .35s; }
    .login-entry *, .login-card-edge, .auth-has-error .login-premium { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* 2.3.24 — Stage 4: richer touch motion without sacrificing iOS/Android sharpness */
@media (hover: none), (pointer: coarse) {
    /* Keep the card flat for WebKit text sharpness, but preserve motion in isolated layers. */
    .login-premium .auth-logo { animation: touch-logo-float 4.8s ease-in-out infinite; }
    .login-submit::before { animation: login-button-shine 5.2s ease-in-out infinite; }
    .login-card-edge { animation: login-edge-orbit 10s linear infinite; }
    .login-premium:focus-within .login-card-edge { animation-duration: 5.6s; }
    .login-card-glow::before { animation: touch-glow-breathe 5s ease-in-out infinite; }
    .login-premium .field:focus-within { animation: touch-field-pulse .38s var(--mobile-spring) both; }
}

@media (max-width: 900px) {
    .mobile-header { -webkit-backdrop-filter: blur(18px) saturate(125%); backdrop-filter: blur(18px) saturate(125%); }
    .bottom-nav { -webkit-backdrop-filter: blur(22px) saturate(135%); backdrop-filter: blur(22px) saturate(135%); }
    .bottom-nav a.active .ui-icon, .bottom-nav button.active .ui-icon { animation: mobile-active-icon 2.6s ease-in-out infinite; }
    .bottom-nav .bottom-action .ui-icon { filter: drop-shadow(0 4px 12px rgba(0,0,0,.28)); }
    .mobile-filter-trigger:active { transform: scale(.985); }
    .button:active, .icon-button:active, .row-action:active { transform: scale(.975); }
    .mobile-record-table tr, .mobile-report-table tbody tr { contain: paint; }
}

@media (max-width: 480px) {
    .page-heading h1 { max-width: 100%; font-size: clamp(1.82rem, 9vw, 2.28rem); line-height: .98; }
    .page-heading p { max-width: 34rem; line-height: 1.48; }
    .metric-card { min-width: 0; }
    .metric-card strong { max-width: 100%; white-space: normal; overflow-wrap: anywhere; line-height: 1.02; }
    .performance-period-heading > div > strong, .performance-preview-card strong, .best-period-card strong { overflow-wrap: anywhere; }
    .report-chart-card { overflow: hidden; }
    .monthly-bars { min-width: 0; }
    .auth-card.login-premium { max-width: 100%; }
    .login-entry-core { max-width: calc(100vw - 32px - env(safe-area-inset-left) - env(safe-area-inset-right)); }
}

@media (max-width: 360px) {
    .content { padding-right: max(9px, env(safe-area-inset-right)); padding-left: max(9px, env(safe-area-inset-left)); }
    .page-heading h1 { font-size: 1.76rem; }
    .auth-card.login-premium { padding: 24px 16px; }
    .auth-brand { gap: 10px; }
    .brand-logo.auth-logo { width: 66px; height: 66px; }
    .login-entry-core img { width: 68px; height: 68px; }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {
    .login-scene { min-height: 100dvh; }
    .login-clock { width: min(72vw, 560px); }
    .login-premium .auth-logo { width: 52px; height: 52px; }
    .login-premium .auth-brand strong { font-size: .92rem; }
    .login-card-edge { opacity: .72; }
    .login-entry-core img { width: 64px; height: 64px; }
    .login-entry-orbit { width: min(58vh, 320px); }
}

@supports (-webkit-touch-callout: none) {
    /* Safari/iOS: isolate animated paint from form text to avoid blur/jitter. */
    .login-card-edge, .login-card-glow, .login-scene, .login-entry { -webkit-transform: translateZ(0); transform: translateZ(0); }
    .login-premium input, .login-premium button, .login-premium .auth-heading, .login-premium .auth-brand { -webkit-font-smoothing: antialiased; }
    .bottom-nav { padding-bottom: max(6px, env(safe-area-inset-bottom)); }
    .filter-card[data-filter-ready="1"] { overscroll-behavior-y: contain; }
}

@keyframes touch-logo-float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-4px) scale(1.018); filter: drop-shadow(0 18px 26px rgba(208,158,69,.28)); } }
@keyframes touch-glow-breathe { 0%,100% { opacity: .38; transform: translate(-50%,-50%) scale(.9); } 50% { opacity: .7; transform: translate(-50%,-50%) scale(1.15); } }
@keyframes touch-field-pulse { 0% { transform: scale(.995); } 70% { transform: scale(1.006); } 100% { transform: none; } }
@keyframes mobile-active-icon { 0%,100% { transform: translateY(0); filter: drop-shadow(0 0 6px rgba(224,180,92,.22)); } 50% { transform: translateY(-1px); filter: drop-shadow(0 0 12px rgba(224,180,92,.45)); } }

/* 2.3.37 — auditoria visual do fechamento em iPhone/Android */
@media (max-width: 900px) {
    /* A própria tela de fechamento já tem menu no cabeçalho. Sem barra inferior concorrente. */
    .page-new-closure .content {
        padding-bottom: calc(30px + env(safe-area-inset-bottom));
    }

    .page-new-closure .closure-layout {
        gap: 14px;
    }

    .page-new-closure .closure-layout .section-heading,
    .page-new-closure .closure-layout .section-title-group {
        min-width: 0;
    }

    .page-new-closure .closure-layout .section-heading h2 {
        max-width: 100%;
        line-height: 1.16;
    }

    .page-new-closure .closure-layout .section-heading p {
        max-width: 100%;
        margin-bottom: 0;
    }

    .page-new-closure .closure-date-field input[type="date"] {
        width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .page-new-closure .closure-date-field input[type="date"]::-webkit-date-and-time-value {
        width: 100%;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

@media (max-width: 680px) {
    .page-new-closure .form-card {
        overflow: hidden;
    }

    .page-new-closure .section-heading {
        align-items: flex-start;
        gap: 13px;
    }

    .page-new-closure .section-heading > .step-number,
    .page-new-closure .section-title-group > .step-number {
        flex: 0 0 auto;
    }

    .page-new-closure .section-heading h2 {
        font-size: clamp(1.08rem, 5.2vw, 1.32rem);
    }

    .page-new-closure .opening-float-confirm-card {
        width: 100%;
        margin-top: 14px;
        padding: 15px;
        overflow: hidden;
    }

    .page-new-closure .opening-float-confirm-card small {
        font-size: .76rem;
        line-height: 1.5;
    }

    .page-new-closure .opening-float-input-wrap {
        width: 100%;
        max-width: 100%;
    }

    .page-new-closure .opening-float-input-wrap input {
        min-width: 0;
        font-size: clamp(1.34rem, 7vw, 1.6rem);
    }

    .page-new-closure .confirm-box {
        gap: 11px;
        padding: 14px;
        overflow: hidden;
    }

    .page-new-closure .confirm-box > span {
        min-width: 0;
    }

    .page-new-closure .confirm-box strong {
        font-size: .79rem;
        line-height: 1.38;
    }

    .page-new-closure .confirm-box small {
        font-size: .72rem;
        line-height: 1.48;
    }

    /* O resumo flutua somente durante a contagem; não cobre identificação nem resultado. */
    .page-new-closure .mobile-live-summary {
        right: max(10px, env(safe-area-inset-right));
        bottom: max(12px, env(safe-area-inset-bottom));
        left: max(10px, env(safe-area-inset-left));
        z-index: 34;
        min-height: 68px;
        padding: 7px;
    }

    .page-new-closure .mobile-live-summary[hidden] {
        display: none !important;
    }

    .page-new-closure .mobile-live-summary span {
        font-size: .6rem;
        line-height: 1.15;
    }

    .page-new-closure .mobile-live-summary strong {
        font-size: clamp(.72rem, 2.8vw, .84rem);
        font-variant-numeric: tabular-nums;
    }

    .page-new-closure .closure-result-grid .summary-item {
        min-height: 0;
        padding: 16px;
    }

    .page-new-closure .closure-result-grid .summary-item strong {
        font-size: clamp(1.38rem, 7vw, 1.72rem);
        line-height: 1.1;
    }

    .page-new-closure .info-banner {
        align-items: flex-start;
        gap: 12px;
    }

    .page-new-closure .info-banner > div {
        min-width: 0;
    }

    .page-new-closure .info-banner p {
        margin-bottom: 0;
    }

    /* Botões finais ficam no fluxo; nada é coberto por uma ação sticky. */
    .page-new-closure .sticky-actions {
        position: static;
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        margin: 20px 0 0;
        padding: 16px 0 0;
        border-top: 1px solid var(--line);
        background: transparent;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .page-new-closure .sticky-actions .button {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    /* Quatro colunas ficavam pequenas demais em iPhones/Androids estreitos. */
    .page-new-closure .mobile-live-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 112px;
        padding: 8px 10px;
        border-radius: 18px;
    }

    .page-new-closure .mobile-live-summary > div {
        min-height: 46px;
        padding: 5px 8px;
        border-right: 1px solid rgba(255,255,255,.08);
    }

    .page-new-closure .mobile-live-summary > div:nth-child(2) {
        border-right: 0;
    }

    .page-new-closure .mobile-live-summary > div:nth-child(-n+2) {
        border-bottom: 1px solid rgba(255,255,255,.08);
    }

    .page-new-closure .mobile-live-summary > div:last-child {
        border-right: 0;
        border-bottom: 0;
    }

    .page-new-closure .mobile-live-summary span {
        overflow: visible;
        font-size: .64rem;
        text-overflow: clip;
        white-space: normal;
    }

    .page-new-closure .mobile-live-summary strong {
        overflow: visible;
        font-size: clamp(.78rem, 4vw, .94rem);
        text-overflow: clip;
    }
}

@media (max-width: 900px) and (orientation: landscape) and (max-height: 560px) {
    /* Em paisagem baixa, qualquer painel fixo consome altura demais. */
    .page-new-closure .mobile-live-summary {
        display: none !important;
    }
}

@media (max-width: 680px) {
    .page-new-closure .mobile-denomination-cards td:nth-child(2) {
        flex-wrap: wrap;
        gap: 2px 4px;
        line-height: 1.28;
        text-align: right;
    }

    .page-new-closure .mobile-denomination-cards td:nth-child(2) small {
        flex: 1 0 100%;
        font-size: .66rem;
        text-align: right;
    }

    .page-new-closure .mobile-denomination-cards .destination-cell {
        min-width: 0;
        width: 100%;
    }

    .page-new-closure .mobile-denomination-cards .destination {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        line-height: 1.35;
        overflow-wrap: anywhere;
        white-space: normal;
    }
}

/* 2.3.40 — gráfico mensal legível em iPhone/Android: os valores completos ficam na tabela abaixo. */
@media (max-width: 680px) {
    .page-reports .monthly-bars { height: 215px; padding-top: 8px; }
    .page-reports .month-bar { grid-template-rows: minmax(0, 1fr) 20px; }
    .page-reports .month-bar .bar-value { display: none; writing-mode: horizontal-tb; transform: none; }
}

/* 2.3.41 — UX responsiva: celular pequeno, tablet e telas médias */
@media (max-width: 900px) {
    .mobile-header-spacer { display: block; flex: 0 0 42px; width: 42px; height: 42px; }

    /* Nomes das unidades não competem com o total em tablets. */
    .store-grid { grid-template-columns: minmax(0, 1fr); }
    .store-card { grid-template-columns: 44px minmax(0, 1fr) 18px; gap: 12px; padding: 16px; }
    .store-total { grid-column: 2; min-width: 0; text-align: left; }
    .card-arrow { grid-area: 1 / 3 / 3 / 4; }

    /* Cabeçalhos com contexto longo empilham em vez de comprimir o título. */
    .responsive-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
    .responsive-heading .subtle-label { align-self: flex-start; }

    /* As tabelas operacionais viram cartões também em tablet retrato. */
    .cash-table-wrap, .mobile-card-table-wrap { margin: 0 !important; padding: 0 !important; overflow: visible !important; }
    .cash-table-wrap::after { display: none !important; }

    .mobile-denomination-cards { display: block; width: 100%; min-width: 0 !important; }
    .mobile-denomination-cards thead { display: none; }
    .mobile-denomination-cards tbody { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
    .mobile-denomination-cards tr { position: relative; display: grid; grid-template-columns: 1fr auto; gap: 10px 13px; min-width: 0; padding: 15px; border: 1px solid rgba(92,57,62,.1); border-radius: 18px; background: linear-gradient(145deg,#fff,#fbf7f3); box-shadow: 0 10px 28px rgba(43,22,27,.055); }
    .mobile-denomination-cards td { display: flex; min-width: 0; height: auto !important; padding: 0; border: 0; }
    .mobile-denomination-cards td:nth-child(1) { align-items: center; font-size: 1.12rem; font-weight: 900; }
    .mobile-denomination-cards td:nth-child(2) { align-items: center; justify-content: flex-end; color: var(--muted); font-size: .76rem; text-align: right; }
    .mobile-denomination-cards td:nth-child(2)::before { margin-right: 5px; content: "Meta:"; }
    .mobile-denomination-cards td:nth-child(3) { grid-column: 1 / -1; }
    .mobile-denomination-cards td:nth-child(3)::before { display: block; align-self: center; min-width: 68px; margin-right: 10px; color: var(--muted); content: "Contado"; font-size: .72rem; font-weight: 800; }
    .mobile-denomination-cards .count-stepper { display: grid; grid-template-columns: 48px minmax(62px,1fr) 48px; width: 100%; }
    .mobile-denomination-cards .count-stepper button, .mobile-denomination-cards .count-stepper input { min-height: 48px; }
    .mobile-denomination-cards td:nth-child(4) { flex-direction: column; }
    .mobile-denomination-cards td:nth-child(4)::before { color: var(--muted); content: "Subtotal"; font-size: .68rem; font-weight: 700; }
    .mobile-denomination-cards td:nth-child(4) strong { color: var(--wine); font-size: 1.02rem; }
    .mobile-denomination-cards td:nth-child(5) { align-items: end; justify-content: flex-end; text-align: right; }
    .mobile-denomination-cards .status-chip, .mobile-denomination-cards .destination { white-space: normal; overflow-wrap: anywhere; }

    .mobile-record-table, .mobile-record-table tbody, .mobile-record-table tr, .mobile-record-table td,
    .mobile-report-table, .mobile-report-table tbody, .mobile-report-table tr, .mobile-report-table td { display: block; width: 100%; min-width: 0; }
    .mobile-record-table thead, .mobile-report-table thead { display: none; }
    .mobile-record-table tbody, .mobile-report-table tbody { display: grid; gap: 11px; }
    .mobile-record-table tr, .mobile-report-table tbody tr { overflow: hidden; padding: 8px 15px; border: 1px solid rgba(91,57,62,.1); border-radius: 17px; background: #fff; box-shadow: 0 9px 24px rgba(39,20,25,.05); }
    .mobile-record-table td, .mobile-report-table tbody td { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 40px; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(91,57,62,.07); text-align: right; }
    .mobile-record-table td::before, .mobile-report-table tbody td::before { flex: 0 0 38%; color: var(--muted); text-align: left; content: attr(data-label); font-size: .74rem; font-weight: 800; }
    .mobile-record-table td:last-child, .mobile-report-table tbody td:last-child { border-bottom: 0; }
    .mobile-record-table .mobile-card-action { display: block; padding-top: 10px; }
    .mobile-record-table .mobile-card-action::before { display: none; }
    .mobile-record-table .mobile-card-action a, .mobile-record-table .mobile-card-action .button { width: 100%; }
    .mobile-report-table tfoot { display: block; margin-top: 10px; }
    .mobile-report-table tfoot tr { display: grid; gap: 3px; padding: 15px; border-radius: 16px; }
    .mobile-report-table tfoot td { display: block; width: 100%; padding: 4px; border: 0; text-align: right; }

    /* Em tablet ainda há pouco espaço para 12 rótulos monetários sobre as barras. */
    .page-reports .monthly-bars { height: 225px; padding-top: 10px; }
    .page-reports .month-bar .bar-value { display: none; writing-mode: horizontal-tb; transform: none; }
}

@media (min-width: 681px) and (max-width: 900px) {
    .mobile-denomination-cards tbody { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 680px) {
    .mobile-denomination-cards tbody { grid-template-columns: minmax(0, 1fr); }
    .field small, td > small, .destination, .badge, .store-total span, .store-total small,
    .notification-item small, .replenishment-meta, .audit-item p, .audit-item time {
        font-size: max(.74rem, 11.8px);
        line-height: 1.42;
    }
}

@media (max-width: 390px) {
    .bottom-nav a, .bottom-nav button { font-size: .62rem; }
}

@media (max-width: 360px) {
    .bottom-nav a, .bottom-nav button { font-size: .60rem; }
    .bottom-nav .bottom-action { top: -8px; width: 60px; height: 58px; }
}

/* A paleta principal é grafite + dourado + teal; evita o vinho herdado no estado neutro do login. */
.login-card-edge {
    background: conic-gradient(from var(--login-edge-angle, 0deg), transparent 0 22%, rgba(243,205,133,.92) 30%, transparent 40% 68%, rgba(72,137,139,.58) 76%, transparent 86%);
}

@media (max-width: 900px) {
    .store-fund-rule-heading { flex-direction: column; align-items: flex-start; }
    .store-fund-rule-heading .target-pill,
    .target-pill { max-width: 100%; margin-left: 0; font-size: .72rem; line-height: 1.3; white-space: normal; }
}


/* 2.3.44 — iOS/Android: data/hora nunca ultrapassam o campo visual. */
@media (max-width: 900px) {
    .field {
        min-width: 0;
        max-width: 100%;
    }

    .field input[type="date"],
    .field input[type="time"] {
        inline-size: 100% !important;
        width: 100% !important;
        min-inline-size: 0 !important;
        min-width: 0 !important;
        max-inline-size: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden;
    }

    .field input[type="date"]::-webkit-date-and-time-value,
    .field input[type="time"]::-webkit-date-and-time-value {
        inline-size: auto;
        width: auto;
        min-inline-size: 0;
        min-width: 0;
        max-inline-size: 100%;
        max-width: 100%;
    }
}

@supports (-webkit-touch-callout: none) {
    @media (max-width: 900px) {
        .field input[type="date"],
        .field input[type="time"] {
            -webkit-appearance: none;
            appearance: none;
        }
    }
}