:root {
    --surface: #f5f7fa;
    --ink: #1f2933;
    --muted: #64748b;
    --brand: #14532d;
    --brand-2: #0f766e;
    --line: #dbe2ea;
}

body {
    background: var(--surface);
    color: var(--ink);
}

.navbar-brand,
.nav-link i {
    color: var(--brand);
}

.page-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.content-panel,
.stat-panel {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.05);
}

.content-panel {
    padding: 1rem;
}

.stat-panel {
    padding: 1rem;
    min-height: 112px;
}

.stat-panel .label {
    color: var(--muted);
    font-size: .875rem;
}

.stat-panel .value {
    font-size: 1.65rem;
    font-weight: 700;
}

.login-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;

    background-image:
        linear-gradient(135deg, rgba(20, 83, 45, .9), rgba(15, 118, 110, .82)),
        url('https://pagos.municipioindigenaxoxocotla.org/logo.png');

    background-repeat: no-repeat, no-repeat;
    background-position: center, center;

    /* Degradado | Logo */
    background-size: cover, 44%;
}

.login-card {
    width: min(420px, calc(100vw - 2rem));
    background: rgba(255, 255, 255, .96);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, .5);
    padding: 1.5rem;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .22);
}

.table thead th {
    white-space: nowrap;
}

.actions {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    .page-title {
        align-items: flex-start;
        flex-direction: column;
    }
}