/* Mi Negocio - look & feel "liquid glass", mobile-first.
   Vidrio en contenedores y navegacion; campos y numeros sobre superficies casi opacas para que se lean bien.
   Colores semanticos fijos: verde = ventas, rojo = gastos, ambar = cobros (siempre con texto/icono, nunca solo color). */

:root {
    --acento: #047857;
    --acento-2: #0d9488;
    --acento-tinte: rgba(4, 120, 87, .12);
    --tinta: #0d1f33;
    --tinta-suave: #41566e;
    --venta: #15803d;   --venta-tinte: rgba(21, 128, 61, .13);
    --gasto: #b91c1c;   --gasto-tinte: rgba(185, 28, 28, .11);
    --cobro: #b45309;   --cobro-tinte: rgba(180, 83, 9, .13);
    --error: #b42318;
    --fondo-a: #d3f6e4;
    --fondo-b: #e2f5ee;
    --vidrio-1: rgba(255, 255, 255, .68);
    --vidrio-2: rgba(255, 255, 255, .34);
    --vidrio-borde: rgba(255, 255, 255, .8);
    --vidrio-sombra: rgba(10, 90, 60, .16);
    --campo-bg: rgba(255, 255, 255, .86);
    --campo-borde: rgba(65, 86, 110, .6);
    --blob-1: #6ee7b7; --blob-2: #5eead4; --blob-3: #fde68a;
    --radio: 24px;
    --tab-h: 74px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --acento: #34d399;
        --acento-2: #2dd4bf;
        --acento-tinte: rgba(52, 211, 153, .17);
        --tinta: #eef6ff;
        --tinta-suave: #b4c6dc;
        --venta: #4ade80;  --venta-tinte: rgba(74, 222, 128, .15);
        --gasto: #fca5a5;  --gasto-tinte: rgba(252, 165, 165, .15);
        --cobro: #fbbf24;  --cobro-tinte: rgba(251, 191, 36, .15);
        --error: #ff9b8f;
        --fondo-a: #05150f; --fondo-b: #07181a;
        --vidrio-1: rgba(22, 40, 62, .66);
        --vidrio-2: rgba(14, 28, 46, .42);
        --vidrio-borde: rgba(255, 255, 255, .16);
        --vidrio-sombra: rgba(0, 0, 0, .5);
        --campo-bg: rgba(10, 22, 38, .74);
        --campo-borde: rgba(180, 198, 220, .55);
        --blob-1: #065f46; --blob-2: #115e59; --blob-3: #854d0e;
        color-scheme: dark;
    }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0; overflow-x: clip; min-height: 100vh; min-height: 100dvh;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px; line-height: 1.5; color: var(--tinta);
    background: linear-gradient(160deg, var(--fondo-a), var(--fondo-b)) fixed;
    -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--acento); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- fondo liquido ---------- */
.fondo { position: fixed; inset: 0; overflow: hidden; z-index: -1; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .62; animation: flotar 22s ease-in-out infinite alternate; }
.blob.b1 { width: 62vmax; height: 62vmax; background: var(--blob-1); top: -22vmax; left: -18vmax; }
.blob.b2 { width: 54vmax; height: 54vmax; background: var(--blob-2); bottom: -20vmax; right: -16vmax; animation-delay: -7s; }
.blob.b3 { width: 38vmax; height: 38vmax; background: var(--blob-3); top: 38%; left: 52%; opacity: .45; animation-delay: -13s; }
@keyframes flotar { to { transform: translate3d(5vmax, 4vmax, 0) scale(1.08); } }

/* ---------- vidrio ---------- */
.glass, .glass-suave {
    position: relative;
    background: linear-gradient(145deg, var(--vidrio-1), var(--vidrio-2));
    border: 1px solid var(--vidrio-borde);
    box-shadow: 0 10px 34px var(--vidrio-sombra), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -1px 0 rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(26px) saturate(1.8); backdrop-filter: blur(26px) saturate(1.8);
    border-radius: var(--radio);
}
.glass::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(180deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 38%); opacity: .55;
    -webkit-mask: linear-gradient(#000, transparent 70%); mask: linear-gradient(#000, transparent 70%);
}
@media (prefers-color-scheme: dark) { .glass::before { opacity: .12; } }
.glass-suave { border-radius: 18px; box-shadow: 0 4px 16px var(--vidrio-sombra), inset 0 1px 0 rgba(255, 255, 255, .5); -webkit-backdrop-filter: none; backdrop-filter: none; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .glass, .glass-suave { background: rgba(255, 255, 255, .93); }
    @media (prefers-color-scheme: dark) { .glass, .glass-suave { background: rgba(18, 32, 52, .96); } }
}
@media (prefers-reduced-transparency: reduce) {
    .glass, .glass-suave { background: rgba(255, 255, 255, .96); -webkit-backdrop-filter: none; backdrop-filter: none; }
    .glass::before { display: none; }
    @media (prefers-color-scheme: dark) { .glass, .glass-suave { background: rgba(18, 32, 52, .98); } }
}
@media (prefers-contrast: more) { :root { --vidrio-1: rgba(255, 255, 255, .94); --vidrio-2: rgba(255, 255, 255, .9); --campo-borde: #41566e; } }
@media (forced-colors: active) { .glass, .glass-suave, .btn, .chip, .seg.on, .tab.on { border: 1px solid CanvasText; } }
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } * { scroll-behavior: auto !important; transition: none !important; animation: none !important; } }

/* ---------- botones ---------- */
.btn {
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 48px; padding: 0 20px; border-radius: 999px; cursor: pointer; text-decoration: none;
    font-weight: 650; font-size: 16px; color: var(--tinta);
    background: linear-gradient(180deg, rgba(255, 255, 255, .88), rgba(255, 255, 255, .52));
    border: 1px solid var(--vidrio-borde);
    box-shadow: 0 2px 10px var(--vidrio-sombra), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .15s ease, filter .15s ease; -webkit-tap-highlight-color: transparent;
}
@media (prefers-color-scheme: dark) { .btn { background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .06)); box-shadow: 0 2px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .25); } }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.btn.primario { color: #fff; border-color: rgba(255, 255, 255, .45); background: linear-gradient(180deg, color-mix(in srgb, var(--acento) 92%, #fff), var(--acento));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--acento) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 6px rgba(0, 0, 0, .12); }
@media (prefers-color-scheme: dark) { .btn.primario { color: #031a10; } }
.btn.peligro { color: #fff; background: #b42318; border-color: transparent; }
.btn.fantasma { background: transparent; box-shadow: none; border-color: transparent; }
.btn.grande { min-height: 56px; padding: 0 28px; font-size: 17px; width: 100%; }
.btn.chico { min-height: 44px; padding: 0 16px; font-size: 15px; }
.btn.eliminar { color: var(--error); }
.ico { width: 22px; height: 22px; flex: none; }
.spinner { display: none; width: 20px; height: 20px; border: 3px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: gira .7s linear infinite; }
.cargando .spinner { display: inline-block; }
.cargando .txt { display: none; }
.spinner-lg { width: 32px; height: 32px; border: 4px solid var(--acento); border-right-color: transparent; border-radius: 50%; animation: gira .8s linear infinite; margin: 0 auto 8px; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- barra superior ---------- */
.barra {
    position: sticky; top: 8px; z-index: 20; padding: 8px 8px 8px 14px; display: flex; align-items: center; justify-content: space-between;
    border-radius: 22px; max-width: 680px; margin: 8px auto 0; width: calc(100% - 24px);
}
.marca { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); font-weight: 750; letter-spacing: -.01em; }
.marca img { border-radius: 22%; }
.barra .btn { min-height: 44px; padding: 0 18px; }

/* ---------- contenedor ---------- */
.app { max-width: 680px; margin: 0 auto; padding: 16px 12px calc(var(--tab-h) + 56px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 14px; }
.aviso { padding: 18px; }

/* ---------- acceso (login / bloqueo / terminos) ---------- */
.acceso { min-height: 100dvh; display: grid; place-items: center; padding: 20px 16px; }
.acceso.ancho .tarjeta-acceso { max-width: 560px; text-align: left; }
.tarjeta-acceso { width: 100%; max-width: 420px; padding: 32px 24px 24px; text-align: center; display: flex; flex-direction: column; gap: 14px; }
.tarjeta-acceso .logo { margin: 0 auto; box-shadow: 0 10px 24px color-mix(in srgb, var(--acento) 35%, transparent); border-radius: 22.5%; }
.tarjeta-acceso h1 { font-size: 26px; line-height: 1.2; letter-spacing: -.02em; }
.lema { color: var(--tinta-suave); }
.tarjeta-acceso form { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-top: 6px; }
.tarjeta-acceso label { font-weight: 600; font-size: 15px; }
.campo-tel { display: flex; align-items: stretch; background: var(--campo-bg); border: 1.5px solid var(--campo-borde); border-radius: 16px; overflow: hidden; }
.campo-tel:focus-within { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-tinte); }
.campo-tel .prefijo { display: grid; place-items: center; padding: 0 14px; font-weight: 700; color: var(--tinta-suave); border-right: 1px solid var(--campo-borde); }
.campo-tel input[type="tel"] { flex: 1; min-width: 0; border: 0; border-radius: 0; background: transparent; min-height: 54px; padding: 0 14px; font-size: 20px; letter-spacing: .04em; outline: 0; box-shadow: none; width: auto; }
.pie-mini { font-size: 13px; color: var(--tinta-suave); }
.pie-mini a, .volver { color: var(--tinta-suave); }
.sms-caja { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; align-items: baseline; padding: 14px 16px; border-radius: 16px; background: var(--acento-tinte); text-align: left; }
.sms-caja strong { font-size: 20px; letter-spacing: .04em; }
.suscribir-caja { text-align: left; display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; border-radius: 20px; background: var(--acento-tinte); border: 1px solid var(--vidrio-borde); }
.suscribir-caja strong { font-size: 18px; line-height: 1.25; }
.suscribir-caja p { color: var(--tinta-suave); }
.suscribir-caja b { color: var(--tinta); letter-spacing: .04em; }
.texto-legal h2 { font-size: 17px; margin-top: 8px; }
.texto-legal p { color: var(--tinta-suave); }
.volver { text-decoration: none; font-weight: 600; }

/* ---------- campos ---------- */
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label, .etq { font-weight: 600; font-size: 15px; }
.opc { font-weight: 400; color: var(--tinta-suave); font-size: 13px; }
input[type="text"], input[type="tel"], input[type="date"], select {
    width: 100%; min-height: 52px; padding: 12px 14px; font-size: 16px;
    background: var(--campo-bg); color: var(--tinta); border: 1.5px solid var(--campo-borde); border-radius: 14px; outline: 0;
    transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none;
}
input:focus, select:focus { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-tinte); }
input::placeholder { color: var(--tinta-suave); opacity: .9; }
.con-error input, .con-error .campo-monto { border-color: var(--error); }
.error { color: var(--error); font-size: 14px; font-weight: 600; }
.ayuda { font-size: 13px; color: var(--tinta-suave); }
.campo-monto { display: flex; align-items: center; background: var(--campo-bg); border: 1.5px solid var(--campo-borde); border-radius: 18px; padding: 0 16px; transition: border-color .15s, box-shadow .15s; }
.campo-monto:focus-within { border-color: var(--acento); box-shadow: 0 0 0 4px var(--acento-tinte); }
.campo-monto .moneda { font-size: 24px; font-weight: 750; color: var(--tinta-suave); margin-right: 8px; }
.campo-monto input { border: 0; background: transparent; box-shadow: none !important; min-height: 64px; padding: 0; font-size: 34px; font-weight: 750; letter-spacing: -.02em; width: 100%; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer; font-weight: 550; font-size: 15px;
    background: var(--campo-bg); border: 1.5px solid var(--campo-borde); color: var(--tinta); transition: background .15s, transform .12s; }
.chip.on { background: var(--acento); border-color: var(--acento); color: #fff; font-weight: 650; }
@media (prefers-color-scheme: dark) { .chip.on { color: #031a10; } }
.chip:active { transform: scale(.96); }

.segmento { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); padding: 4px; gap: 4px; border-radius: 16px; background: var(--acento-tinte); }
.seg { min-width: 0; min-height: 44px; padding: 0 8px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; font-weight: 650; font-size: 15px; color: var(--tinta-suave); transition: background .15s, color .15s; }
.seg.on { background: var(--campo-bg); color: var(--tinta); box-shadow: 0 2px 8px var(--vidrio-sombra), inset 0 1px 0 rgba(255, 255, 255, .7); }

/* ---------- inicio: resumen ---------- */
.resumen { padding: 18px 16px 16px; display: flex; flex-direction: column; gap: 14px; }
.resumen-cab { display: flex; flex-direction: column; gap: 10px; }
.resumen-cab small { color: var(--tinta-suave); font-weight: 600; }
.ganancia { display: flex; flex-direction: column; gap: 2px; }
.ganancia .etq { color: var(--tinta-suave); font-size: 14px; font-weight: 600; }
.ganancia .valor { font-size: clamp(32px, 9vw, 44px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ganancia .valor.neg { color: var(--gasto); }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tile { padding: 12px 10px; border-radius: 18px; display: flex; flex-direction: column; gap: 2px; background: var(--campo-bg); border: 1px solid var(--vidrio-borde); min-width: 0; text-align: left; font-family: inherit; }
button.tile { cursor: pointer; }
.tile .etq { font-size: 13px; font-weight: 650; display: flex; align-items: center; gap: 4px; }
.tile .etq .ico { width: 16px; height: 16px; }
.tile .valor { font-size: clamp(16px, 4.6vw, 21px); font-weight: 780; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.2; }
.tile .valor.sm { font-size: clamp(14px, 3.9vw, 18px); }
.tile .valor.xs { font-size: clamp(12px, 3.2vw, 15px); }
.tile small { font-size: 12px; color: var(--tinta-suave); line-height: 1.25; }
.tile.venta .etq, .tile.venta .valor { color: var(--venta); }
.tile.gasto .etq, .tile.gasto .valor { color: var(--gasto); }
.tile.cobro .etq, .tile.cobro .valor { color: var(--cobro); }
.tile small.venc { color: var(--gasto); font-weight: 650; }

.acciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.accion { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 92px; border-radius: 22px; cursor: pointer; font-weight: 750; font-size: 16px; border: 1px solid var(--vidrio-borde);
    color: var(--tinta); background: linear-gradient(180deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .5)); box-shadow: 0 4px 14px var(--vidrio-sombra), inset 0 1px 0 rgba(255, 255, 255, .9); transition: transform .15s; }
@media (prefers-color-scheme: dark) { .accion { background: linear-gradient(180deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .06)); } }
.accion:active { transform: scale(.96); }
.accion .mas { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.accion.venta .mas { background: var(--venta); } .accion.gasto .mas { background: var(--gasto); } .accion.cobro .mas { background: var(--cobro); }
@media (prefers-color-scheme: dark) { .accion .mas { color: #031a10; } }

.seccion-tit { display: flex; align-items: baseline; justify-content: space-between; padding-inline: 4px; margin-top: 4px; }
.seccion-tit h2 { font-size: 18px; letter-spacing: -.01em; }
.seccion-tit button { background: none; border: 0; color: var(--acento); font-weight: 650; cursor: pointer; min-height: 44px; padding: 0 4px; }

/* ---------- listas ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.item { width: 100%; display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; cursor: pointer; border: 1px solid var(--vidrio-borde); background: var(--campo-bg); border-radius: 18px; min-height: 64px; }
.item:active { transform: scale(.985); }
.item-ico { flex: none; width: 42px; height: 42px; border-radius: 14px; display: grid; place-items: center; }
.item-ico .ico { width: 22px; height: 22px; }
.t-venta .item-ico, .ico-venta { background: var(--venta-tinte); color: var(--venta); }
.t-gasto .item-ico, .ico-gasto { background: var(--gasto-tinte); color: var(--gasto); }
.t-cobro .item-ico, .ico-cobro { background: var(--cobro-tinte); color: var(--cobro); }
.item-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.item-txt small { color: var(--tinta-suave); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-monto { flex: none; font-weight: 780; font-size: 16px; font-variant-numeric: tabular-nums; text-align: right; }
.t-venta .item-monto { color: var(--venta); } .t-gasto .item-monto { color: var(--gasto); }
.cobrado .item-txt strong { text-decoration: line-through; text-decoration-thickness: 1px; opacity: .8; }

.cobro-card { padding: 14px; display: flex; flex-direction: column; gap: 12px; }
.cobro-card .fila { display: flex; align-items: center; gap: 12px; text-align: left; width: 100%; background: none; border: 0; padding: 0; cursor: pointer; }
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 2px 10px; border-radius: 999px; width: fit-content; }
.badge.venc { background: var(--gasto-tinte); color: var(--gasto); }
.badge.hoy { background: var(--cobro-tinte); color: var(--cobro); }
.badge.ok { background: var(--venta-tinte); color: var(--venta); }
.badge.fut { background: var(--acento-tinte); color: var(--tinta-suave); }

.cab-lista { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.cab-lista h1 { font-size: 22px; letter-spacing: -.02em; }
.total-lista { font-size: clamp(28px, 8vw, 38px); font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.total-lista.venta { color: var(--venta); } .total-lista.gasto { color: var(--gasto); } .total-lista.cobro { color: var(--cobro); }
.vacio { padding: 28px 20px; text-align: center; color: var(--tinta-suave); display: flex; flex-direction: column; gap: 8px; align-items: center; }
.vacio .ico { width: 40px; height: 40px; color: var(--acento); }
.vacio strong { color: var(--tinta); }

/* ---------- barra de pestañas ---------- */
.tabbar { position: fixed; z-index: 30; left: 12px; right: 12px; bottom: calc(10px + env(safe-area-inset-bottom)); max-width: 656px; margin: 0 auto; padding: 6px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; border-radius: 28px; }
.tab { min-height: 58px; border: 0; background: transparent; border-radius: 22px; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 12px; font-weight: 700; color: var(--tinta-suave); transition: background .15s, color .15s; }
.tab .ico { width: 24px; height: 24px; }
.tab.on { background: var(--acento-tinte); color: var(--acento); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.tab .pt { position: absolute; margin: -22px -26px 0 0; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--gasto); color: #fff; font-size: 11px; line-height: 18px; text-align: center; }
@media (prefers-color-scheme: dark) { .tab .pt { color: #1c0a0a; } }

/* ---------- hoja de captura (bottom sheet) ---------- */
.sheet-fondo { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-end; justify-content: center; background: rgba(8, 20, 36, .45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: aparece .2s ease-out; }
.sheet { width: 100%; max-width: 560px; max-height: 94dvh; overflow-y: auto; border-radius: 28px 28px 0 0; padding: 10px 18px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 16px; animation: sube .25s cubic-bezier(.2, .9, .3, 1); }
.sheet .agarre { width: 44px; height: 5px; border-radius: 3px; background: var(--campo-borde); opacity: .6; margin: 0 auto; flex: none; }
.sheet-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sheet-cab h2 { font-size: 22px; letter-spacing: -.02em; display: flex; align-items: center; gap: 10px; }
.sheet-cab h2 .item-ico { width: 38px; height: 38px; }
.sheet .btn.primario.grande.venta { background: linear-gradient(180deg, #22a855, #15803d); }
.fila-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.dos-col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@keyframes sube { from { transform: translateY(40px); opacity: 0; } }
@keyframes aparece { from { opacity: 0; } }
@media (min-width: 700px) { .sheet-fondo { align-items: center; } .sheet { border-radius: 28px; } }

.modal-fondo { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(8, 20, 36, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal { width: 100%; max-width: 380px; padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.modal h2 { font-size: 20px; }
.modal p { color: var(--tinta-suave); }
.modal-botones { display: flex; gap: 10px; margin-top: 8px; }
.modal-botones .btn { flex: 1; }

.toast { position: fixed; left: 50%; top: calc(14px + env(safe-area-inset-top)); transform: translate(-50%, -14px); opacity: 0; z-index: 140; padding: 10px 12px 10px 18px; border-radius: 18px; width: max-content; max-width: min(92vw, 460px);
    display: flex; align-items: center; gap: 10px; font-weight: 650; font-size: 15px; transition: opacity .25s, transform .25s; pointer-events: none; }
.toast.on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast button { background: none; border: 0; color: var(--acento); font-weight: 750; cursor: pointer; min-height: 40px; padding: 0 10px; }

@media (min-width: 700px) { .acciones .accion { min-height: 104px; } }

.campo-monto input::placeholder { opacity: .4; }
.btn .txt { display: inline-flex; align-items: center; gap: 8px; }
.sheet { background: linear-gradient(145deg, rgba(255, 255, 255, .86), rgba(255, 255, 255, .62)); }
@media (prefers-color-scheme: dark) { .sheet { background: linear-gradient(145deg, rgba(22, 40, 62, .9), rgba(14, 28, 46, .8)); } }