/* SAFE AREAS */
:root{
    --safe-top: env(safe-area-inset-top);
    --safe-bottom: env(safe-area-inset-bottom);
    --safe-left: env(safe-area-inset-left);
    --safe-right: env(safe-area-inset-right);
    --header-h: 60px;
    --menu-h: 70px;
}

.pb-safe{
    padding-bottom: var(--safe-bottom);
}

/* BASE */
body{
    background:#f1f5f9;
    margin:0;
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
    min-height:100vh;
    overflow-x:hidden;
}

/* APP CONTAINER */
.app{
    max-width:420px;
    margin:auto;
}

/* HEADER FIXED */
#header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:calc(var(--header-h) + var(--safe-top));
    padding-top:var(--safe-top);
    background:white;
    border-bottom:1px solid #e5e7eb;
    z-index:1000;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding-left:16px;
    padding-right:16px;
}

/* MENU FIXED */
#menu{
    position:fixed;
    bottom:0;
    left:0;
    width:100%;
    height:calc(var(--menu-h) + var(--safe-bottom));
    padding-bottom:var(--safe-bottom);
    background:white;
    border-top:1px solid #e5e7eb;
    z-index:1000;
}

/* CONTENT WRAPPER */
main{
    position:relative;
    height:calc(100vh - (var(--header-h) + var(--menu-h) + var(--safe-top) + var(--safe-bottom)));
    overflow:hidden;
}

/* UI COMPONENTS */
.section{
    margin-top:18px;
}
.card{
    background:white;
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 4px 12px rgba(0,0,0,0.05);
}
.item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:14px 16px;
    font-size:14px;
    border-bottom:1px solid #f1f5f9;
    transition:.15s;
}
.item:last-child{
    border-bottom:none;
}
.item:active{
    background:#f1f5f9;
    transform:scale(0.98);
}
.item-left{
    display:flex;
    align-items:center;
    gap:12px;
}
.icon-box{
    width:34px;
    height:34px;
    border-radius:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:16px;
    color:white;
}
.bg-blue{background:#2563eb;}
.bg-purple{background:#7c3aed;}
.bg-yellow{background:#f59e0b;}
.bg-red{background:#dc2626;}
.arrow{
    color:#9ca3af;
}
.status{
    font-size:11px;
    padding:4px 10px;
    border-radius:20px;
}

/* NOTYF */
.notyf__toast{
    border-radius:12px;
    font-weight:500;
    margin:12px;
    padding:12px 16px;
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
    display:flex;
    align-items:center;
}
.notyf__toast--warning{
    background:linear-gradient(135deg,#f59e0b,#fbbf24);
    color:#fff;
}
.notyf__toast--success{
    background:linear-gradient(135deg,#16a34a,#22c55e);
    color:#fff;
}
.notyf__toast--error{
    background:linear-gradient(135deg,#dc2626,#ef4444);
    color:#fff;
}

/* ═══════════════════════════════════════════════
   MODO NOCHE
═══════════════════════════════════════════════ */
body.night-mode {
    background: #0f172a !important;
    color: #e2e8f0 !important;
}
body.night-mode #header,
body.night-mode #menu {
    background: #1e293b !important;
    border-color: #334155 !important;
}
body.night-mode .card {
    background: #1e293b !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.4) !important;
}
body.night-mode .item {
    border-color: #334155 !important;
    color: #e2e8f0 !important;
}
body.night-mode .item:active {
    background: #334155 !important;
}
body.night-mode .text-gray-400,
body.night-mode .text-gray-500,
body.night-mode .text-gray-600 {
    color: #94a3b8 !important;
}
body.night-mode .text-gray-800,
body.night-mode .text-gray-900 {
    color: #f1f5f9 !important;
}
body.night-mode .bg-gray-100,
body.night-mode .bg-gray-50 {
    background: #0f172a !important;
}
body.night-mode input,
body.night-mode select,
body.night-mode textarea {
    background: #0f172a !important;
    color: #e2e8f0 !important;
    border-color: #475569 !important;
}
body.night-mode .section > div:first-child {
    color: #64748b !important;
}

/* Animación suave al cambiar modo */
body {
    transition: background .4s ease, color .3s ease;
}
#header, #menu, .card, .item {
    transition: background .4s ease, border-color .3s ease, color .3s ease;
}

/* Toggle modo noche */
#nightToggle {
    font-size: 20px;
    cursor: pointer;
    user-select: none;
    padding: 4px 8px;
    border-radius: 10px;
    transition: transform .2s;
}
#nightToggle:active { transform: scale(0.85); }

/* ═══════════════════════════════════════════════
   CONTADOR DE GANANCIAS
═══════════════════════════════════════════════ */
#earningsBar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border-radius: 16px;
    margin: 10px 12px 0;
    box-shadow: 0 4px 15px rgba(22,163,74,0.3);
    cursor: pointer;
    transition: transform .15s;
}
#earningsBar:active { transform: scale(0.98); }
body.night-mode #earningsBar {
    background: linear-gradient(135deg, #15803d, #16a34a) !important;
}
#earningsBar .earn-label {
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    text-transform: uppercase;
    letter-spacing: .5px;
}
#earningsBar .earn-amount {
    font-size: 22px;
    font-weight: 800;
    color: white;
    letter-spacing: -0.5px;
}
#earningsBar .earn-count {
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    margin-top: 1px;
}
#earningsBar .earn-icon {
    font-size: 28px;
    opacity: .9;
}

/* ═══════════════════════════════════════════════
   BOTÓN NAVEGACIÓN RÁPIDA
═══════════════════════════════════════════════ */
.btn-nav {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, #2563eb, #3b82f6);
    color: white !important;
    padding: 14px 18px;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 4px 15px rgba(37,99,235,0.35);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s;
    border: none;
    width: 100%;
    justify-content: center;
}
.btn-nav:active {
    transform: scale(0.97);
    box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.btn-nav .nav-icon { font-size: 22px; }
body.night-mode .btn-nav {
    background: linear-gradient(135deg, #1d4ed8, #2563eb) !important;
}

/* PULL REFRESH */
#pullZone{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:0;
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:9999;
    transition:height .2s;
    overflow:hidden;
}
.pull-icon{
    font-size:32px;
    color:#6b7280;
}
.pull-spin{
    animation:spin 1s linear infinite;
}
@keyframes spin{
    0%{transform:rotate(0deg);}
    100%{transform:rotate(360deg);}
}