:root {
    --np-bg: #eef3fb;
    --np-panel: #f8fbff;
    --np-card: #ffffff;
    --np-border: #d6e2f3;
    --np-border-soft: #e6eef9;
    --np-head: #0f2747;
    --np-text: #48627d;
    --np-primary: #1956d8;
    --np-primary-soft: #dfe9ff;
    --np-accent: #17d8c1;
    --np-shadow: 0 14px 36px rgba(16, 44, 88, .11);
    --np-radius-lg: 18px;
    --np-radius-md: 12px;
}

html, body {
    background: var(--np-bg);
    color: var(--np-text);
}

body {
    font-family: "Plus Jakarta Sans", "Segoe UI", "Segoe UI Variable", Tahoma, Geneva, Verdana, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--np-head);
    letter-spacing: -.01em;
    font-weight: 700;
}

.body .container-lg {
    max-width: 1320px;
}

.header {
    background: #fff !important;
    border-bottom: 1px solid var(--np-border-soft) !important;
}

.footer {
    background: #fff;
    border-top: 1px solid var(--np-border-soft);
}

.sidebar {
    background: #fff;
}

.sidebar .nav-link {
    border-radius: 10px;
    margin: 0 .45rem .15rem;
}

.card {
    background: var(--np-card);
    border: 1px solid var(--np-border-soft);
    border-radius: var(--np-radius-lg);
    box-shadow: 0 6px 24px rgba(16, 44, 88, .08);
}

.card-header {
    background: var(--np-panel);
    border-bottom: 1px solid var(--np-border-soft);
    color: var(--np-head);
    font-weight: 700;
}

.btn {
    border-radius: 12px;
    font-weight: 700;
}

.btn-primary {
    background: var(--np-primary);
    border-color: var(--np-primary);
}

.btn-primary:hover {
    background: #1147bb;
    border-color: #1147bb;
}

.btn-success {
    background: var(--np-accent);
    border-color: var(--np-accent);
    color: #063d38;
}

.btn-success:hover {
    background: #13c3af;
    border-color: #13c3af;
    color: #063d38;
}

.btn-outline-primary {
    border-color: #b4caef;
    color: #1d4fa7;
}

.btn-outline-primary:hover {
    background: #edf3ff;
    color: #1d4fa7;
    border-color: #8db1eb;
}

.form-control,
.form-select,
.input-group-text {
    border-radius: var(--np-radius-md);
    border-color: #c6d8ef;
}

.form-control:focus,
.form-select:focus {
    border-color: #78a8ff;
    box-shadow: 0 0 0 .2rem rgba(25, 86, 216, .14);
}

.table {
    --bs-table-bg: transparent;
}

.table thead th {
    color: #5a7698;
    background: #f2f7ff;
    text-transform: uppercase;
    letter-spacing: .03em;
    font-size: .74rem;
}

.table tbody td {
    border-color: #e8f0fb;
}

.badge {
    border-radius: 999px;
    font-weight: 700;
}

.alert {
    border-radius: 12px;
    border: 1px solid transparent;
}

.alert-success {
    border-color: #bee8de;
}

.alert-danger {
    border-color: #f3c2c2;
}

/* Hoja de Vida + Ausencias premium finishing */
.hv-module .content-card {
    border: 1px solid #d9e6f7;
    box-shadow: 0 10px 28px rgba(16, 44, 88, .09);
}

.hv-module .table-active > * {
    --bs-table-bg-state: #e9f2ff;
    --bs-table-color-state: #0f2747;
}

.hv-module .modal-content {
    border-radius: 16px;
}

.hv-module .modal-header {
    background: #f3f8ff;
}

.hv-module .badge.bg-info {
    background-color: #3f7ef0 !important;
}

.hv-module .badge.bg-primary {
    background-color: #1956d8 !important;
}

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

.np-page-title {
    margin: 0;
    font-size: 1.45rem;
}

.np-page-subtitle {
    margin: .2rem 0 0;
    color: #607c9d;
    font-size: .9rem;
}

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

.breadcrumb {
    background: #f4f8ff;
    border: 1px solid #e1ebf8;
    border-radius: 10px;
    padding: .4rem .7rem;
}

/* Shared auth pages style */
.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 1rem;
    background:
        radial-gradient(1200px 240px at 15% 0, rgba(25, 86, 216, .24), transparent 70%),
        radial-gradient(900px 260px at 85% 15%, rgba(23, 216, 193, .18), transparent 75%),
        var(--np-bg);
}

.auth-container {
    width: 100%;
    max-width: 430px;
}

.auth-logo {
    text-align: center;
    margin-bottom: 1.25rem;
}

.auth-logo img {
    max-width: 280px;
    height: auto;
}

.auth-card {
    background: linear-gradient(140deg, #fefefe 8%, #edf4ff 100%);
    border: 1px solid #d8e5f8;
    border-radius: 20px;
    box-shadow: var(--np-shadow);
}

.auth-title {
    color: var(--np-head);
    font-size: 1.35rem;
    margin-bottom: 1rem;
}