:root {
    --primary: #0d2c54;
    --gold: #c5a059;
    --light-bg: #f4f6f9;
}

body {
    background: var(--light-bg);
    font-family: 'Segoe UI', system-ui, sans-serif;
    padding-bottom: 70px;
}

@media (min-width: 992px) { body { padding-bottom: 0; padding-left: 260px; } }

/* Login a pantalla completa */
body.login-body {
    padding: 0 !important;
    margin: 0;
    background: linear-gradient(135deg, #0d2c54 0%, #1a4a7a 100%);
    min-height: 100vh;
}
body.login-body .login-wrap {
    min-height: 100vh;
    width: 100%;
    background: transparent;
}

.sidebar {
    position: fixed;
    top: 0; left: 0;
    width: 260px;
    height: 100vh;
    z-index: 1030;
    border-right: 1px solid #e9ecef;
}
.brand-icon {
    width: 40px; height: 40px;
    background: var(--primary);
    color: var(--gold);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
}
.sidebar-link {
    color: #495057;
    border-radius: 8px;
    padding: .65rem .9rem;
    margin-bottom: 3px;
    display: flex; align-items: center; gap: .6rem;
    font-weight: 500;
    transition: all .15s;
}
.sidebar-link:hover { background: #eef2f7; color: var(--primary); }
.sidebar-link.active { background: var(--primary); color: #fff; }
.sidebar-link.active i { color: var(--gold); }

.bottom-nav .bottom-link {
    display: flex; flex-direction: column; align-items: center;
    text-decoration: none; color: #6c757d;
    padding: .4rem .8rem; border-radius: 8px;
    font-size: .72rem;
}
.bottom-nav .bottom-link i { font-size: 1.2rem; }
.bottom-nav .bottom-link.active { color: var(--primary); }
.bottom-nav .bottom-link.active i { color: var(--gold); }

.card { border: none; box-shadow: 0 2px 10px rgba(0,0,0,.04); border-radius: 14px; }
.btn-primary { background: var(--primary); border-color: var(--primary); }
.btn-primary:hover { background: #0a2343; border-color: #0a2343; }
.btn-gold { background: var(--gold); color: #fff; border: none; }
.btn-gold:hover { background: #b08d47; color:#fff; }

.stat-card { padding: 1.25rem; border-left: 4px solid var(--primary); }
.stat-card.gold { border-left-color: var(--gold); }
.stat-card h3 { margin: 0; font-weight: 700; color: var(--primary); }
.stat-card small { color: #6c757d; text-transform: uppercase; font-size: .75rem; letter-spacing: .5px; }

.login-wrap {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #0d2c54 0%, #1a4a7a 100%);
    padding: 1rem;
}
.login-card { background: #fff; border-radius: 18px; padding: 2rem; width: 100%; max-width: 420px; box-shadow: 0 10px 40px rgba(0,0,0,.2); }

.install-banner {
    position: fixed;
    bottom: 80px;          /* sobre el bottom-nav en móvil */
    left: 15px;
    right: 15px;
    background: var(--primary);
    color: #fff;
    padding: 1rem;
    border-radius: 12px;
    display: none;
    z-index: 1050;
    box-shadow: 0 6px 20px rgba(0,0,0,.3);
}

@media (min-width: 992px) {
    .install-banner {
        left: auto;
        right: 20px;
        max-width: 350px;
        bottom: 20px;      /* en escritorio no hay bottom-nav */
    }
}

.table-responsive { border-radius: 12px; }
@media (max-width: 768px) {
    .deuda-card h2 { font-size: 1.8rem; }
}

/* Inputs que se fuerzan a mayúsculas */
input.uppercase, textarea.uppercase {
    text-transform: uppercase;
}
input.uppercase::placeholder {
    text-transform: none;
    color: #adb5bd;
}

/* Toggle ojito */
.toggle-password {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-left: none;
    color: #6c757d;
    cursor: pointer;
}
.toggle-password:hover { background: #e9ecef; color: var(--primary); }

/* Paginación */
.pagination .page-link { color: var(--primary); border: none; margin: 0 2px; border-radius: 6px; }
.pagination .page-item.active .page-link { background: var(--primary); color: #fff; }
.pagination .page-item.disabled .page-link { color: #adb5bd; }