/*
 * Capa de compatibilidad visual del proyecto.
 * El shell vuelve a apoyarse en Corporate UI Dashboard PRO sin branding invasivo.
 * Cualquier personalizacion futura debe vivir aqui y no dentro de los layouts.
 */

.navbar-brand-img {
    max-height: 2rem;
}

body.dark-version {
    background-color: #15192f;
}

body.dark-version .footer .copyright {
    color: rgba(226, 232, 240, 0.72) !important;
}

.text-dark-mode-white {
    color: #344767 !important;
}

body.dark-version .text-dark-mode-white {
    color: #f8fafc !important;
}

/* Estilos comunes para el módulo de usuarios (Create/Edit) en modo oscuro */
body.dark-version #user-create-app,
body.dark-version #user-edit-app {
    color: #f8fafc;
}

body.dark-version #user-create-app .user-section-card,
body.dark-version #user-edit-app .user-section-card {
    background: #1b2038;
    box-shadow: 0 20px 40px rgba(2, 6, 23, 0.28);
}

body.dark-version #user-create-app .user-section-card .card-header,
body.dark-version #user-edit-app .user-section-card .card-header,
body.dark-version #user-create-app .user-section-card .card-body,
body.dark-version #user-edit-app .user-section-card .card-body,
body.dark-version #user-create-app .user-section-card h5,
body.dark-version #user-edit-app .user-section-card h5,
body.dark-version #user-create-app .user-section-card h6,
body.dark-version #user-edit-app .user-section-card h6,
body.dark-version #user-create-app .user-section-card .font-weight-bolder,
body.dark-version #user-edit-app .user-section-card .font-weight-bolder,
body.dark-version #user-create-app .user-section-card .font-weight-bold,
body.dark-version #user-edit-app .user-section-card .font-weight-bold,
body.dark-version #user-create-app .user-section-card .text-dark,
body.dark-version #user-edit-app .user-section-card .text-dark {
    color: #f8fafc !important;
}

body.dark-version #user-create-app .user-section-card p,
body.dark-version #user-edit-app .user-section-card p,
body.dark-version #user-create-app .user-section-card .text-secondary,
body.dark-version #user-edit-app .user-section-card .text-secondary,
body.dark-version #user-create-app .user-section-card .text-xs,
body.dark-version #user-edit-app .user-section-card .text-xs,
body.dark-version #user-create-app .user-section-card .text-sm,
body.dark-version #user-edit-app .user-section-card .text-sm,
body.dark-version #user-create-app .user-section-card label,
body.dark-version #user-edit-app .user-section-card label {
    color: rgba(226, 232, 240, 0.82) !important;
}

body.dark-version #user-create-app .bg-gray-100,
body.dark-version #user-edit-app .bg-gray-100,
body.dark-version #user-create-app .user-username-helper,
body.dark-version #user-edit-app .user-username-helper,
body.dark-version #user-create-app .alert.alert-light,
body.dark-version #user-edit-app .alert.alert-light,
body.dark-version .bg-light {
    background: #252b45 !important;
    border-color: rgba(148, 163, 184, 0.2) !important;
    color: #e2e8f0 !important;
}

body.dark-version #user-create-app .user-role-card,
body.dark-version #user-edit-app .user-role-card {
    background: #242a43;
    border-color: rgba(148, 163, 184, 0.22);
    box-shadow: none;
}

body.dark-version #user-create-app .user-role-card:hover,
body.dark-version #user-edit-app .user-role-card:hover {
    border-color: rgba(129, 140, 248, 0.48);
    box-shadow: 0 18px 30px rgba(2, 6, 23, 0.24);
}

body.dark-version #user-create-app .user-role-card.is-selected,
body.dark-version #user-edit-app .user-role-card.is-selected {
    background: linear-gradient(180deg, rgba(46, 56, 91, 0.98) 0%, rgba(35, 42, 68, 0.98) 100%);
    border-color: rgba(129, 140, 248, 0.7);
    box-shadow: 0 18px 32px rgba(79, 70, 229, 0.18);
}

body.dark-version #user-create-app .user-role-icon,
body.dark-version #user-edit-app .user-role-icon {
    background: linear-gradient(310deg, rgba(148, 163, 184, 0.16), rgba(129, 140, 248, 0.2));
    color: #f8fafc;
}

body.dark-version #user-create-app .user-password-rule,
body.dark-version #user-edit-app .user-password-rule {
    background: rgba(51, 65, 85, 0.9);
    color: rgba(226, 232, 240, 0.82);
}

body.dark-version #user-create-app .user-password-rule.is-valid,
body.dark-version #user-edit-app .user-password-rule.is-valid {
    background: rgba(34, 197, 94, 0.18);
    color: #86efac;
}

body.dark-version #user-create-app .form-control,
body.dark-version #user-edit-app .form-control,
body.dark-version #user-create-app .form-select,
body.dark-version #user-edit-app .form-select {
    background: #0f172a;
    border-color: rgba(148, 163, 184, 0.28);
    color: #f8fafc;
}

body.dark-version #user-create-app .form-control::placeholder,
body.dark-version #user-edit-app .form-control::placeholder {
    color: rgba(148, 163, 184, 0.72);
}

body.dark-version #user-create-app .btn.btn-white,
body.dark-version #user-edit-app .btn.btn-white {
    background: #20263d;
    border-color: rgba(148, 163, 184, 0.24);
    color: #f8fafc;
}

body.dark-version #user-create-app .btn.btn-outline-primary,
body.dark-version #user-edit-app .btn.btn-outline-primary {
    border-color: rgba(129, 140, 248, 0.52);
    color: #c7d2fe;
}

body.dark-version #user-create-app .border,
body.dark-version #user-edit-app .border,
body.dark-version #user-create-app .border-gray-200,
body.dark-version #user-edit-app .border-gray-200 {
    border-color: rgba(148, 163, 184, 0.2) !important;
}

body.dark-version #user-create-app .list-group-item,
body.dark-version #user-edit-app .list-group-item {
    background: transparent;
    color: #f8fafc;
}

/* Listado de usuarios */
body.dark-version #users-index-app .card {
    background: #11162a;
    border-color: rgba(148, 163, 184, 0.22) !important;
    box-shadow: 0 22px 44px rgba(2, 6, 23, 0.28);
}

body.dark-version #users-index-app .card-header,
body.dark-version #users-index-app .card-body {
    background: transparent;
}

body.dark-version #users-index-app .card-header {
    border-color: rgba(148, 163, 184, 0.24) !important;
}

body.dark-version #users-index-app .card-header h6,
body.dark-version #users-index-app .users-table h6,
body.dark-version #users-index-app .users-table .font-weight-bold,
body.dark-version #users-index-app .users-table .font-weight-bolder {
    color: #f8fafc !important;
}

body.dark-version #users-index-app .card-header p,
body.dark-version #users-index-app .text-secondary,
body.dark-version #users-index-app .users-table thead th {
    color: rgba(226, 232, 240, 0.74) !important;
}

body.dark-version #users-index-app .users-table thead th {
    background: #171d33 !important;
    border-color: rgba(148, 163, 184, 0.18) !important;
}

body.dark-version #users-index-app .users-table tbody tr {
    border-color: rgba(148, 163, 184, 0.14) !important;
}

body.dark-version #users-index-app .badge-light {
    background: rgba(148, 163, 184, 0.12) !important;
    border-color: rgba(148, 163, 184, 0.22) !important;
}

body.dark-version #users-index-app .input-group {
    background: #0f172a !important;
    border-color: rgba(148, 163, 184, 0.28) !important;
}

body.dark-version #users-index-app .form-control,
body.dark-version #users-index-app .input-group-text {
    background: transparent !important;
    color: #f8fafc !important;
}

body.dark-version #users-index-app .form-control::placeholder {
    color: rgba(148, 163, 184, 0.8);
}

body.dark-version #users-index-app .btn-action-user {
    background: rgba(148, 163, 184, 0.1) !important;
    border: 1px solid rgba(148, 163, 184, 0.16) !important;
}

body.dark-version #users-index-app .btn-action-user.btn-outline-info {
    color: #60a5fa !important;
}

body.dark-version #users-index-app .btn-action-user.btn-outline-dark {
    color: #c7d2fe !important;
}

body.dark-version #users-index-app .btn-action-user:hover {
    background: rgba(129, 140, 248, 0.18) !important;
    color: #ffffff !important;
}