@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Archivo";
    font-style: normal;
    font-weight: 400 800;
    font-stretch: 75% 100%;
    font-display: swap;
    src: url("../fonts/archivo-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
    --p50: #EEF3FA;
    --p100: #D7E3F3;
    --p200: #AFC6E7;
    --p300: #7FA1D4;
    --p400: #4B78BD;
    --p500: #2458A6;
    --p600: #0E418E;
    --p700: #0B3574;
    --p800: #08295B;
    --p900: #051B3D;
    --ink: #0F1B2D;
    --ink2: #4A5869;
    --ink3: #8A97A8;
    --line: #DFE5EC;
    --bg: #F2F4F7;
    --surface: #FFFFFF;
    --steel: #E8ECF1;
    --ok: #157A3E;
    --ok-50: #E2F5E9;
    --warn: #9A5B00;
    --warn-50: #FFF1D6;
    --err: #B42318;
    --err-50: #FDE7E5;
    --accent: #F2A516;
    --r-xs: 6px;
    --r-sm: 10px;
    --r-md: 14px;
    --r-lg: 20px;
    --r-pill: 999px;
    --shadow-1: 0 1px 2px rgba(15, 27, 45, .06);
    --shadow-2: 0 8px 24px rgba(15, 27, 45, .12);
    --font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fs-xs: 11px;
    --fs-sm: 12px;
    --fs-base: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 22px;
    --fs-2xl: 28px;
    --s1: 4px;
    --s2: 8px;
    --s3: 12px;
    --s4: 16px;
    --s5: 20px;
    --s6: 24px;
    --s8: 32px;
    --appbar-h: 56px;
    --nav-h: 68px;
    --touch: 44px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow-x: clip; }
body {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--font);
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    min-height: 100dvh;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }
img { max-width: 100%; }
.i14 { width: 14px; height: 14px; }
.i16 { width: 16px; height: 16px; }
.i18 { width: 18px; height: 18px; }
.i20 { width: 20px; height: 20px; }
.i22 { width: 22px; height: 22px; }
.i28 { width: 28px; height: 28px; }
.i40 { width: 40px; height: 40px; }
.i64 { width: 64px; height: 64px; }
svg { display: block; }

#app {
    min-height: 100dvh;
    max-width: 480px;
    margin: 0 auto;
    background: var(--bg);
    position: relative;
}

.vista { min-height: 100dvh; display: flex; flex-direction: column; background: var(--bg); }

.appbar { height: 56px; flex: none; background: var(--p600); color: #fff; display: flex; align-items: center; gap: 4px; padding: 0 8px; padding-top: env(safe-area-inset-top); height: calc(56px + env(safe-area-inset-top)); }
.appbar h1 { font-size: 18px; font-weight: 700; flex: 1; padding-left: 8px; display: flex; align-items: center; gap: 8px; min-width: 0; }
.appbar .count { font-size: 12px; font-weight: 600; background: rgba(255, 255, 255, .16); padding: 2px 8px; border-radius: var(--r-pill); }
.ib { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: transparent; border: 0; color: inherit; position: relative; flex: none; }
.ib.box { background: var(--surface); border: 1px solid var(--line); color: var(--ink); }
.ib .dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); border: 2px solid var(--p600); }
.ib .num { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--p600); color: #fff; font-size: 10px; font-weight: 700; display: grid; place-items: center; padding: 0 4px; }

.body { flex: 1; overflow: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; position: relative; -webkit-overflow-scrolling: touch; }
.toolbar { background: var(--surface); border-bottom: 1px solid var(--line); padding: 12px 16px 10px; display: flex; flex-direction: column; gap: 10px; flex: none; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.g4 { gap: 4px; }
.g6 { gap: 6px; }
.g8 { gap: 8px; }
.g10 { gap: 10px; }
.g12 { gap: 12px; }
.wrap { flex-wrap: wrap; }
.col { display: flex; flex-direction: column; }
.grow { flex: 1; min-width: 0; }
.mla { margin-left: auto; }

.search { flex: 1; height: 44px; display: flex; align-items: center; gap: 8px; background: var(--bg); border: 1.5px solid transparent; border-radius: 12px; padding: 0 12px; color: var(--ink3); }
.search.filled { color: var(--ink); background: var(--surface); border-color: var(--p600); }
.search.on-p { background: var(--surface); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; height: 100%; }
.search input::placeholder { color: var(--ink3); }
.search .clr { margin-left: auto; color: var(--ink3); display: grid; place-items: center; width: 32px; height: 32px; }

.chips { display: flex; gap: 8px; overflow-x: auto; }
.chips::-webkit-scrollbar { display: none; }
.chip { height: 32px; padding: 0 12px; border-radius: var(--r-pill); border: 1px solid var(--line); background: var(--surface); font-size: 13px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--ink); flex: none; }
.chip.on { background: var(--p600); border-color: var(--p600); color: #fff; }
.chip.soft { background: var(--p50); border-color: var(--p100); color: var(--p700); }

.meta-row { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--ink2); }
.meta-row b { color: var(--ink); font-weight: 700; }
.link { color: var(--p600); font-weight: 600; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; background: none; border: 0; padding: 0; }

.card { background: var(--surface); border-radius: var(--r-md); border: 1px solid var(--line); }
button.card, button.pcard { width: 100%; text-align: left; }
.pcard { display: flex; gap: 12px; padding: 12px; position: relative; background: var(--surface); }
.thumb { width: 68px; height: 68px; border-radius: 10px; background: var(--p50); color: var(--p500); display: grid; place-items: center; flex: none; border: 1px solid var(--p100); overflow: hidden; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.pname { font-weight: 600; font-size: 14px; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.oem { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 7px; border: 1px solid var(--p200); border-radius: 5px; background: var(--surface); color: var(--p700); font-size: 12px; font-weight: 600; font-stretch: 80%; letter-spacing: .04em; white-space: nowrap; max-width: 100%; }
.oem small { font-size: 9px; font-weight: 700; color: var(--ink3); letter-spacing: .02em; }
.price { font-weight: 700; color: var(--ink); font-size: 16px; }
.cost { font-size: 12px; color: var(--ink2); }
.pp { display: flex; flex-direction: column; gap: 1px; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 9px; border-radius: var(--r-pill); font-size: 12px; font-weight: 600; white-space: nowrap; }
.b-ok { background: var(--ok-50); color: var(--ok); }
.b-warn { background: var(--warn-50); color: var(--warn); }
.b-err { background: var(--err-50); color: var(--err); }
.b-p { background: var(--p50); color: var(--p700); }
.b-n { background: var(--steel); color: var(--ink2); }
.tag { font-size: 11px; color: var(--ink2); background: var(--steel); border-radius: 5px; padding: 2px 7px; font-weight: 500; }
mark.hit { background: var(--warn-50); color: inherit; }

.btn { height: 50px; border-radius: 12px; font-weight: 600; font-size: 15px; display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; border: 0; }
.btn:disabled { opacity: .85; }
.btn-p { background: var(--p600); color: #fff; }
.btn-o { background: var(--surface); color: var(--p700); border: 1.5px solid var(--p200); }
.btn-s { background: var(--p50); color: var(--p700); }
.btn-sm { height: 40px; font-size: 14px; }

.field label { display: block; font-size: 13px; font-weight: 600; color: var(--ink2); margin-bottom: 6px; }
.input { height: 50px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 14px; display: flex; align-items: center; gap: 10px; color: var(--ink3); background: var(--surface); }
.input input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 16px; font-weight: 500; height: 100%; }
.input input::placeholder { color: var(--ink3); font-weight: 400; }
.input:focus-within, .input.focus { border-color: var(--p600); box-shadow: 0 0 0 4px var(--p100); }
.input.error { border-color: var(--err); color: var(--err); }
.input.error:focus-within { box-shadow: none; }
.help { font-size: 12px; margin-top: 6px; color: var(--err); display: flex; gap: 4px; align-items: center; }
.switch { width: 40px; height: 24px; border-radius: 12px; background: #C5CED9; position: relative; flex: none; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; }
.switch.on { background: var(--p600); }
.switch.on::after { left: 19px; }
.radio { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid var(--line); flex: none; position: relative; }
.radio.on { border-color: var(--p600); }
.radio.on::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--p600); }

.nav { height: calc(68px + env(safe-area-inset-bottom)); flex: none; background: var(--surface); border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(4, 1fr); padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
.nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--ink3); text-decoration: none; }
.nav a span.pill { width: 56px; height: 30px; border-radius: 15px; display: grid; place-items: center; }
.nav a.on { color: var(--p700); }
.nav a.on span.pill { background: var(--p100); }

.scrim { position: fixed; top: 0; bottom: 0; left: 50%; width: min(480px, 100%); transform: translateX(-50%); background: rgba(5, 27, 61, .48); z-index: 20; }
.sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(480px, 100%); background: var(--surface); border-radius: 24px 24px 0 0; z-index: 21; padding: 8px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; max-height: 88dvh; overflow: auto; }
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--line); margin: 0 auto 2px; flex: none; }
.sheet-h { display: flex; align-items: center; justify-content: space-between; }
.sheet-h h2 { font-size: 18px; font-weight: 700; }
.sec { font-size: 14px; font-weight: 700; color: var(--ink); }
.divider { display: flex; align-items: center; gap: 12px; color: var(--ink3); font-size: 12px; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--line); flex: 1; }
.kv { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 13px; width: 100%; background: none; text-align: left; }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--ink2); display: flex; gap: 8px; align-items: center; }
.kv b { font-weight: 600; }

.login-top { background: var(--p600); color: #fff; padding: calc(22px + env(safe-area-inset-top)) 26px 60px; flex: none; }
.logo { width: 56px; height: 56px; border-radius: 16px; background: #fff; color: var(--p600); display: grid; place-items: center; }
.login-top h1 { font-size: 28px; font-weight: 800; font-stretch: 85%; margin-top: 26px; line-height: 1.1; }
.login-top p { color: var(--p100); margin-top: 8px; font-size: 14px; line-height: 1.45; max-width: 30ch; }
.login-card { background: var(--surface); margin-top: -30px; border-radius: 24px 24px 0 0; flex: 1; padding: 28px 24px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; }
.foot { font-size: 12px; color: var(--ink3); text-align: center; margin-top: auto; }
.alert { border-radius: 12px; padding: 12px; display: flex; gap: 10px; font-size: 13px; line-height: 1.4; }
.alert-err { background: var(--err-50); color: var(--err); }
.alert-warn { background: var(--warn-50); color: var(--warn); }
.alert-ok { background: var(--ok-50); color: var(--ok); }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }

.home-top { background: var(--p600); color: #fff; padding: calc(6px + env(safe-area-inset-top)) 16px 18px; display: flex; flex-direction: column; gap: 14px; flex: none; }
.avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--p400); color: #fff; font-weight: 700; display: grid; place-items: center; flex: none; }
.branch { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: var(--r-pill); background: rgba(255, 255, 255, .14); font-size: 12px; font-weight: 600; align-self: flex-start; color: #fff; }
.kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; text-align: left; color: inherit; }
.kpi .v { font-size: 24px; font-weight: 800; font-stretch: 85%; line-height: 1; }
.kpi .l { font-size: 12px; color: var(--ink2); display: flex; justify-content: space-between; align-items: center; }
.kpi.warn { border-color: #F3D9A4; }
.kpi.warn .v, .kpi.warn .l svg { color: var(--warn); }
.kpi.err { border-color: #F4C4BF; }
.kpi.err .v, .kpi.err .l svg { color: var(--err); }
.search.on-p { cursor: pointer; }
.search.on-p span { flex: 1; text-align: left; }
.search.on-p button { color: var(--p600); width: 32px; height: 32px; display: grid; place-items: center; }
.qa { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.qa button { display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--ink2); text-align: center; line-height: 1.2; }
.qa span.qa-ic { width: 52px; height: 52px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); display: grid; place-items: center; color: var(--p600); }
.mini { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-bottom: 1px solid var(--line); width: 100%; text-align: left; background: none; }
.mini:last-child { border-bottom: 0; }
.mini .thumb { width: 40px; height: 40px; border-radius: 8px; }

.swipe { position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--line); }
.swipe .acts { position: absolute; top: 0; right: 0; bottom: 0; display: flex; }
.swipe .acts button { width: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font-size: 11px; font-weight: 600; }
.swipe .pcard { border: 0; border-radius: 0; transition: transform .2s ease; position: relative; z-index: 1; }
.swipe.open .pcard { transform: translateX(-216px); }

.gallery { height: 210px; background: var(--p50); display: grid; place-items: center; color: var(--p400); position: relative; flex: none; border-bottom: 1px solid var(--line); overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: contain; }
.gallery .cnt { position: absolute; right: 12px; bottom: 12px; font-size: 12px; font-weight: 600; background: var(--surface); color: var(--ink2); padding: 3px 9px; border-radius: var(--r-pill); }
.dots { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--p200); display: block; }
.dots i.on { width: 18px; background: var(--p600); }
.pricebox { display: grid; grid-template-columns: 1.3fr 1fr 1fr; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.pricebox div { padding: 12px; border-right: 1px solid var(--line); }
.pricebox div:last-child { border-right: 0; }
.pricebox small { display: block; font-size: 11px; color: var(--ink2); margin-bottom: 4px; }
.pricebox b { font-size: 17px; font-weight: 700; }
.pricebox .big b { font-size: 22px; color: var(--p700); font-stretch: 85%; font-weight: 800; }
.wh { padding: 10px 0; border-bottom: 1px solid var(--line); }
.wh:last-child { border-bottom: 0; }
.bar { height: 6px; background: var(--steel); border-radius: 3px; margin-top: 8px; overflow: hidden; }
.bar span { display: block; height: 100%; background: var(--p600); border-radius: 3px; }
.bar span.w { background: var(--accent); }
.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 14px; }
.block-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 0 4px; }
.actionbar { flex: none; background: var(--surface); border-top: 1px solid var(--line); padding: 12px 16px calc(18px + env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.notas { font-size: 13px; color: var(--ink2); line-height: 1.5; padding: 4px 0 12px; }

.sum { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sum div { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: 10px; text-align: center; }
.sum small { font-size: 11px; color: var(--ink2); display: block; }
.sum b { font-size: 20px; font-weight: 800; font-stretch: 85%; }
.seg { display: flex; background: var(--steel); border-radius: 12px; padding: 4px; gap: 4px; }
.seg button { flex: 1; text-align: center; font-size: 13px; font-weight: 600; padding: 7px 0; border-radius: 9px; color: var(--ink2); }
.seg button.on { background: var(--surface); color: var(--p700); box-shadow: var(--shadow-1); }
.month { font-size: 12px; font-weight: 700; color: var(--ink2); padding: 4px 2px; }
.mov { display: flex; gap: 12px; padding: 12px; border-bottom: 1px solid var(--line); }
.mov:last-child { border-bottom: 0; }
.mov .mi { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.mov .q { font-weight: 700; font-size: 15px; text-align: right; }
.mov .q small { display: block; font-size: 11px; color: var(--ink2); font-weight: 500; margin-top: 2px; }

.cam { flex: 1; background: #18222F; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; gap: 20px; min-height: 280px; overflow: hidden; }
.cam video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vf { width: 260px; height: 170px; position: relative; z-index: 1; }
.vf i.c { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; }
.vf .tl { top: 0; left: 0; border-right: 0; border-bottom: 0; border-radius: 12px 0 0 0; }
.vf .tr { top: 0; right: 0; border-left: 0; border-bottom: 0; border-radius: 0 12px 0 0; }
.vf .bl { bottom: 0; left: 0; border-right: 0; border-top: 0; border-radius: 0 0 0 12px; }
.vf .br { bottom: 0; right: 0; border-left: 0; border-top: 0; border-radius: 0 0 12px 0; }
.vf .line { position: absolute; left: 16px; right: 16px; top: 50%; height: 2px; background: var(--accent); }
.cam-tools { display: flex; gap: 14px; position: relative; z-index: 1; }
.cam-tools button { width: 52px; height: 52px; border-radius: 50%; background: rgba(255, 255, 255, .14); display: grid; place-items: center; color: #fff; }
.cam-hint { font-size: 14px; color: #C9D3DF; text-align: center; max-width: 26ch; position: relative; z-index: 1; }
.cam .sheet { position: relative; transform: none; left: auto; bottom: auto; width: 100%; margin-top: -24px; border-radius: 24px 24px 0 0; z-index: 2; max-height: none; }

.ucard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px; display: flex; gap: 12px; align-items: center; }
.menu { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.menu button, .menu .menu-row { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 500; width: 100%; text-align: left; background: none; color: inherit; }
.menu button:last-child, .menu .menu-row:last-child { border-bottom: 0; }
.menu .mic { width: 34px; height: 34px; border-radius: 10px; background: var(--p50); color: var(--p600); display: grid; place-items: center; flex: none; }
.menu .chev { margin-left: auto; color: var(--ink3); }
.menu small { color: var(--ink2); font-size: 12px; font-weight: 400; }

@keyframes pulse { 50% { opacity: .5; } }
.sk { background: var(--steel); border-radius: 6px; animation: pulse 1.4s ease-in-out infinite; }
.offline { background: var(--ink); color: #fff; font-size: 12px; padding: 9px 16px; display: flex; gap: 8px; align-items: center; flex: none; }
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 24px; }
.empty .eic { width: 84px; height: 84px; border-radius: 24px; background: var(--p50); color: var(--p500); display: grid; place-items: center; margin-bottom: 6px; }
.empty h3 { font-size: 18px; font-weight: 700; }
.empty p { color: var(--ink2); font-size: 14px; line-height: 1.5; }
.toast { position: fixed; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translateX(-50%); width: min(448px, calc(100% - 32px)); background: var(--ink); color: #fff; border-radius: 12px; padding: 12px 14px; display: flex; gap: 10px; align-items: center; font-size: 13px; z-index: 30; }
.fin { text-align: center; font-size: 12px; color: var(--ink3); padding: 8px; }
.titulo-mas { height: calc(56px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 20px 0; background: var(--surface); flex: none; display: flex; align-items: center; }
.titulo-mas h1 { font-size: 20px; font-weight: 800; font-stretch: 85%; }
.recuperar-top { height: calc(56px + env(safe-area-inset-top)); padding-top: env(safe-area-inset-top); background: var(--surface); display: flex; align-items: center; padding-left: 8px; padding-right: 8px; flex: none; }
.recuperar-body { background: var(--surface); padding: 8px 24px 24px; gap: 16px; flex: 1; }
.recuperar-body h2 { font-size: 26px; font-weight: 800; font-stretch: 85%; line-height: 1.15; }
.recuperar-body > p { color: var(--ink2); line-height: 1.5; }
.file-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
    .spin, .sk { animation: none; }
    .swipe .pcard { transition: none; }
}