:root {
    --brand-bg: #e6e9f2;        /* fondo gris-azulado */
    --brand-dark: #f2f6ff;      /* azul petróleo oscuro */
    --brand-dark-2:#f2f6ff;
    --brand-dark-3: #2d3f47;
    --brand-primary:#314d67;    /* azul violeta */
    --brand-muted:#cbd5e1;
    --brand-card:#ffffff;
    --brand-active: #82bea5; /* verde menta activo */
}

/* Fondo general */
body {
    background: var(--brand-bg) !important;
    color: #1f2937;
}

/* Navbar / encabezado */
.navbar, .topbar, header.header, .page-content .bg-dark, .auth-one-bg {
    background: linear-gradient(180deg, var(--brand-dark) 0%, var(--brand-dark-2) 100%) !important;
}

/* Tarjetas */
.card {
    border: 0;
    border-radius: 18px;
    background: var(--brand-card);
    box-shadow: 0 12px 32px rgba(0,0,0,.08);
}

/* Botones principales */
.btn-primary {
    background: var(--brand-primary) !important;
    border-color: var(--brand-primary) !important;
}

.btn-primary:hover {
    filter: brightness(.95) !important;
    box-shadow: 0 0 0 .25rem rgba(31,42,117,.25) !important;
}

/* Botones soft */
.btn-soft-primary {
    background: rgba(100,131,244,.12) !important;
    border: 0 !important;
}
.btn-soft-secondary {
    background: #eef2ff !important;
    color: #475569 !important;
    border: 0 !important;
}
.btn-soft-danger {
    background: #fee2e2 !important;
    color: #b91c1c !important;
    border: 0 !important;
}

/* Tablas */
.table thead.table-light {
    background: #eef1f8 !important;
    color: #1f2937 !important;
    border-bottom: 1px solid var(--brand-muted) !important;
}
.table tbody tr:hover {
    background: #f6f7fb;
}

/* Formularios */
.form-control {
    border-color: var(--brand-muted);
}
.form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 .2rem rgba(100,131,244,.25);
}

/* Modales */
.modal-content { border-radius: 16px; }
.modal-header {
    border-bottom: 0;
    border-radius: 16px 16px 0 0;
}

/* Toasts */
.toast .toast-header {
    background: #eef1f8;
    color: #1f2937;
}

/* DataTables */
.dataTables_length select,
.dataTables_filter input {
    border: 1px solid var(--brand-muted);
    border-radius: 8px;
}
.dt-button, .buttons-html5 {
    background: var(--brand-primary) !important;
    border: 0 !important;
    color: #fff !important;
    border-radius: 8px !important;
}

.navbar-menu .navbar-nav .nav-link[data-bs-toggle=collapse][aria-expanded=true],
.navbar-menu .navbar-nav .nav-link:hover,
.navbar-menu .navbar-nav .nav-link.active {
    color: var(--brand-active) !important;
}

.btn-outline-primary {
    --vz-btn-color: #313b7c;
    --vz-btn-bg: transparent;
    --vz-btn-border-color: var(--brand-primary);
    --vz-btn-hover-bg: var(--brand-primary);
    --vz-btn-hover-border-color: var(--brand-primary);
    --vz-btn-focus-shadow-rgb: var(--brand-primary);
    --vz-btn-active-bg: var(--brand-primary);
    --vz-btn-active-border-color: var(--brand-primary);
}

.modal-header h1,
.modal-header h2,
.modal-header h3,
.modal-header h4,
.modal-header h5,
.modal-header h6 {
    color: var(--brand-dark-3) !important;
}

#layout-wrapper {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* -----------------------------
   DARK MODE — personalizado
   ----------------------------- */
:root[data-bs-theme="dark"] {
    --bs-body-bg: #12131a;
    --bs-body-color: #e3e6ed;

    --bs-card-bg: #1b1c25;
    --bs-card-color: #e3e6ed;
    --bs-card-border-color: #292a33;

    --bs-border-color: #3a3b44;
    --bs-form-control-bg: #1c1d26;
    --bs-form-control-color: #e6e6e6;
    --bs-form-control-border-color: #3a3b44;

    --bs-navbar-bg: #1a1b24;
    --bs-navbar-color: #d6d8df;

    --bs-modal-bg: #1c1d26;
    --bs-modal-border-color: #2c2d36;

    --bs-table-bg: #1b1c25;
    --bs-table-striped-bg: #23242d;

    --bs-btn-bg: #2d5ef2;
    --bs-btn-hover-bg: #4d7aff;
}

/* Extras */
[data-bs-theme="dark"] .card {
    background-color: var(--bs-card-bg) !important;
}

[data-bs-theme="dark"] .form-control {
    background-color: var(--bs-form-control-bg) !important;
}

[data-bs-theme="dark"] #layout-wrapper {
    background: #12131a;
    color: #e3e6ed;
}