/* Ahorrapdo — App Styles | Black Solution © 2025 */

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; -webkit-tap-highlight-color: transparent; }

/* ── SPA PAGES ── */
.page { display: none !important; }
.page.active { display: block !important; }

/* ── GRADIENTS ── */
.grad { background: linear-gradient(135deg, #064e3b 0%, #059669 60%, #10b981 100%); }
.grad-dark { background: linear-gradient(135deg, #022c22 0%, #064e3b 100%); }
.glass { background: rgba(255,255,255,.12); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,.2); }

/* ── ANIMATIONS ── */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slideIn  { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: translateX(0); } }
@keyframes spin     { to { transform: rotate(360deg); } }
@keyframes pulseRing {
    0%   { box-shadow: 0 0 0 0   rgba(5, 150, 105, .7); }
    70%  { box-shadow: 0 0 0 10px rgba(5, 150, 105, 0); }
    100% { box-shadow: 0 0 0 0   rgba(5, 150, 105, 0); }
}

.anim-up  { animation: fadeUp  .45s ease both; }
.anim-in  { animation: slideIn .30s ease both; }

.spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2.5px solid rgba(255,255,255,.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .75s linear infinite;
}

.pulse-ring { animation: pulseRing 2s infinite; }

/* ── TOAST ── */
#toast {
    position: fixed;
    bottom: 88px;
    left: 50%;
    transform: translateX(-50%) translateY(16px);
    opacity: 0;
    transition: all .3s ease;
    z-index: 9999;
    pointer-events: none;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── INSTALL FAB ── */
#install-fab { display: none; }
#install-fab.show { display: flex; }

/* ── INPUTS ── */
input:focus, select:focus {
    outline: none;
    border-color: #059669 !important;
    box-shadow: 0 0 0 3px rgba(5, 150, 105, .15) !important;
}

/* ── CATEGORY BUTTONS ── */
.cat-btn { transition: all .18s ease; }
.cat-btn.selected { border-color: #059669 !important; background: #ecfdf5; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: #059669; border-radius: 4px; }

/* ── GRADIENT TEXT ── */
.gtext {
    background: linear-gradient(135deg, #6ee7b7, #a7f3d0);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── FEATURE CARDS ── */
.fcard { transition: transform .25s ease, box-shadow .25s ease; }
.fcard:hover { transform: translateY(-5px); box-shadow: 0 16px 40px rgba(0,0,0,.1); }

/* ── STEP CIRCLES ── */
.step {
    background: #059669; color: #fff;
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem; font-weight: 800;
    margin: 0 auto 1rem;
}

/* ── BOTTOM NAV ── */
.bottom-nav { padding-bottom: env(safe-area-inset-bottom, 0px); }

/* ── TOUCH TARGETS (min 44×44px per Apple HIG) ── */
button, a, [role="button"] { min-height: 44px; }
nav.bottom-nav button { min-height: 56px; }