/* ==========================================================================
   Estilos propios del sistema (sobre AdminLTE 4 / Bootstrap 5.3)
   ========================================================================== */

:root {
    --app-avatar-bg: #0d6efd;
}

/* Avatar con iniciales cuando el usuario no tiene foto */
.avatar-initials {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--app-avatar-bg);
    color: #fff;
    font-weight: 600;
    font-size: .8rem;
    flex-shrink: 0;
}
.avatar-initials.avatar-lg {
    width: 4rem;
    height: 4rem;
    font-size: 1.4rem;
}
.user-header .avatar-initials { border: 3px solid rgba(255, 255, 255, .5); }
.user-menu .user-header { height: auto !important; padding-bottom: 1rem; }

/* Tema: mostrar el ícono correcto */
[data-bs-theme="dark"] .theme-icon-light,
:root:not([data-bs-theme="dark"]) .theme-icon-dark { display: none; }

/* Menú: 3er nivel con sangría */
.sidebar-menu .nav-treeview.level-3 > .nav-item > .nav-link { padding-left: 2.6rem; font-size: .9rem; }
.sidebar-menu .nav-treeview.level-2 > .nav-item > .nav-link { padding-left: 1.6rem; }

/* Tarjetas de módulo en el inicio */
.module-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: .75rem;
    background: rgba(13, 110, 253, .12);
    color: #0d6efd;
    font-size: 1.35rem;
}

/* DataTables */
div.dt-container .dt-buttons .btn { margin-left: .5rem; }
div.dt-container div.dt-layout-row { margin-bottom: .5rem; }
table.dataTable td .btn-group-sm > .btn { padding: .15rem .45rem; }
table.dataTable > thead > tr > th { white-space: nowrap; }

/* bootstrap-select con validación */
.bootstrap-select.is-invalid > .dropdown-toggle { border-color: var(--bs-form-invalid-border-color); }
.bootstrap-select > .dropdown-toggle.form-select { padding-right: 2.25rem; }
.bootstrap-select .dropdown-toggle::after { display: none; }
.bootstrap-select .dropdown-menu { max-width: 100%; }

/* Asistente por pasos */
.wizard-step { display: none; }
.wizard-step.active { display: block; animation: fadeStep .2s ease-in; }
@keyframes fadeStep { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.wizard-nav-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .25rem;
    color: var(--bs-secondary-color);
    cursor: default;
}
.wizard-nav-item.done { cursor: pointer; }
.wizard-nav-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid var(--bs-border-color);
    flex-shrink: 0;
}
.wizard-nav-item.active { color: var(--bs-body-color); font-weight: 600; }
.wizard-nav-item.active .wizard-nav-number { border-color: var(--bs-primary); background: var(--bs-primary); color: #fff; }
.wizard-nav-item.done .wizard-nav-number { border-color: var(--bs-success); color: var(--bs-success); }
@media (max-width: 575.98px) {
    .wizard-nav-text { display: none; }
}

/* SweetAlert2 sobre modales de Bootstrap */
.swal2-container { z-index: 2000; }

/* Login (Prompt 1) */
.login-page { min-height: 100vh; }

/* ==========================================================================
   Login, cambio de contraseña y perfil (Prompt 1)
   ========================================================================== */
.auth-page { position: relative; }
.auth-page .login-box { width: 400px; max-width: calc(100% - 32px); }
.auth-page .auth-box-wide { width: 460px; }
.auth-topbar {
    position: absolute;
    top: 1rem;
    right: 1rem;
    display: flex;
    gap: .5rem;
}
.auth-page .card-header img { border-radius: 14px; }

.password-rules li { color: var(--bs-secondary-color); transition: color .15s; }
.password-rules li.text-success { color: var(--bs-success) !important; }
.password-rules i { margin-right: .25rem; }

.profile-photo { width: 128px; height: 128px; }
.profile-photo img { width: 128px; height: 128px; object-fit: cover; }
.avatar-initials.avatar-xl { width: 128px; height: 128px; font-size: 2.6rem; }
.user-menu .user-image { width: 2rem; height: 2rem; object-fit: cover; margin-top: 0; }
.swal2-image.object-fit-cover { object-fit: cover; }

/* ==========================================================================
   Módulo Usuarios (Prompt 2)
   ========================================================================== */
.btn-check:checked + .btn small.text-body-secondary { color: rgba(255, 255, 255, .85) !important; }
.matriz-table thead th { background: var(--bs-body-bg); vertical-align: bottom; z-index: 2; }
.matriz-table .form-check-input { cursor: pointer; }
.matriz-table tr.matriz-modulo td { border-top: 2px solid var(--bs-border-color); }
.log-diff td { word-break: break-word; }

/* ==========================================================================
   Dashboard (Prompt 3)
   ========================================================================== */
.dash-widget { position: relative; }
.dash-loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--bs-body-bg) 55%, transparent);
    border-radius: inherit;
    z-index: 3;
}
.dash-kpi .dash-loading { background: rgba(0, 0, 0, .15); color: #fff; }
.dash-kpi .js-valor { min-height: 2.6rem; }
.dash-kpi .small-box-footer.pe-none { cursor: default; }
.dash-chart { position: relative; height: 290px; }
.dash-widget .card-body.js-body { min-height: 140px; }
.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .35rem;
    min-height: 140px;
    color: var(--bs-secondary-color);
    text-align: center;
}
.dash-empty > .bi { font-size: 1.8rem; }
.bi.spin { display: inline-block; animation: dash-spin 1s linear infinite; }
@keyframes dash-spin { to { transform: rotate(360deg); } }

/* ==========================================================================
   Modales centrados y arrastrables
   ========================================================================== */
.modal-draggable .modal-header { cursor: move; user-select: none; touch-action: none; }
.modal-draggable .modal-header .btn-close,
.modal-draggable .modal-header button,
.modal-draggable .modal-header input,
.modal-draggable .modal-header a { cursor: pointer; }
.modal.is-dragging .modal-content { box-shadow: 0 1rem 3rem rgba(0, 0, 0, .3); opacity: .97; }
.modal.is-dragging .modal-dialog { transition: none; }