@charset "UTF-8";

/* Specific CSS to solve specific problems related to SICO */

html {
    font-size: 15px;
}

:root {
    --ins-logo-lg-height: 40px;
}

/* Modal body background */
.bg-body-modal {
    --ins-bg-opacity: -6;
    background-color: rgb(186 218 238 / 20%) !important;
}

.degradedBackground {
    background: linear-gradient(to bottom, #1e2a38 0%, #3e5867 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    height: 34px;
    margin-right: 20px !important;
    font-size: large;
    font-weight: lighter;
    padding-right: 10px;
}

/* Select2 dentro de input-group */
.input-group .select2-container {
    flex: 1 1 auto;
    width: 1px !important;
}

.input-group .select2-container--default .select2-selection--single {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.input-group .select2-container--default.select2-container--focus .select2-selection--single,
.input-group .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

.text-blue {
    --ins-text-opacity: 1;
    color: rgba(rgb(60 86 101), var(--ins-text-opacity)) !important;
}

.w-10 {
    width: 10% !important;
}

/* Select2 Bootstrap 5 — arrow positioning fix */
.select2-container--bootstrap-5 .select2-selection__arrow {
    top: 50%;
    right: 0.75rem;
    transform: translateY(-50%);
    position: absolute;
}

.select2-dropdown.select2-dropdown .select2-results__options {
    max-height: 500px !important;
}

/* Select2 dark mode fix */
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown,
[data-bs-theme="dark"] .select2-dropdown {
    background-color: #1e1f27 !important;
    color: #aab8c5 !important;
    border-color: #293036 !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option,
[data-bs-theme="dark"] .select2-dropdown .select2-results__option {
    color: #aab8c5 !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[role=group] .select2-results__group,
[data-bs-theme="dark"] .select2-dropdown .select2-results__group {
    color: #1AB394 !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--highlighted,
[data-bs-theme="dark"] .select2-dropdown .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #1AB394 !important;
    color: #fff !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option.select2-results__option--selected,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-results__options .select2-results__option[aria-selected=true]:not(.select2-results__option--highlighted),
[data-bs-theme="dark"] .select2-dropdown .select2-results__option[aria-selected=true] {
    background-color: #272832 !important;
    color: #aab8c5 !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-dropdown .select2-search .select2-search__field,
[data-bs-theme="dark"] .select2-dropdown .select2-search__field {
    background-color: #17181e !important;
    color: #aab8c5 !important;
    border-color: #293036 !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection,
[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single {
    background-color: #1e1f27 !important;
    color: #aab8c5 !important;
    border-color: #293036 !important;
}

[data-bs-theme="dark"] .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered {
    color: #aab8c5 !important;
}

/* FullCalendar — event display fixes */
.fc .fc-daygrid-event {
    margin: 1px 0;
}

.fc-event {
    border-width: 2px !important;
}

.fc-daygrid-event-dot {
    display: none !important;
}

/* Stat card hover lift */
.stat-card {
    transition: all 0.3s ease;
}

    .stat-card:hover {
        transform: translateY(-2px);
        box-shadow: 0 4px 6px rgba(0, 0, 0, .1);
    }

/* Filter card gradient */
.filter-card {
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

[data-bs-theme="dark"] .filter-card {
    background: linear-gradient(135deg, #1e1f27 0%, #272832 100%);
}

/* Pre-wrap para texto multilínea */
.text-pre-wrap {
    white-space: pre-wrap;
}

/* ========================================
   UserAccess - Online indicator
   ======================================== */
.online-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
}

    .online-indicator.online {
        background-color: #10b981;
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
        animation: online-pulse 2s infinite;
    }

    .online-indicator.offline {
        background-color: #6b7280;
    }

@keyframes online-pulse {
    0%, 100% {
        box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
    }

    50% {
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.1);
    }
}

.method-badge {
    min-width: 70px;
    text-align: center;
}

.device-icon {
    font-size: 1.5rem;
    opacity: 0.7;
}

.activity-item {
    transition: background-color 0.2s;
}

    .activity-item:hover {
        background-color: rgba(0, 0, 0, 0.02);
    }

@media (max-width: 575.98px) {
    .auth-box {
        padding: 15px;
    }

        .auth-box .card-body {
            padding: 25px;
        }
}

/* Password strength bar - nivel 5 (no incluido en app.min.css) */
.password-bar .strong-bar.bar-active-5 {
    background-color: #0acf97;
}

/* ============================================
   SweetAlert2 — Diálogo de blanqueo de contraseña
   ============================================ */
.swal-reset-pass {
    width: 30em;
    padding: 1.75rem 1.75rem 1.5rem;
}

.swal-reset-pass .swal2-title {
    padding: 0 0 0.25rem;
    font-size: 1.25rem;
}

.swal-reset-pass-icon {
    border: none !important;
    width: 3.25rem !important;
    height: 3.25rem !important;
    margin: 0 auto 0.5rem !important;
    color: var(--ins-primary) !important;
    background: rgba(var(--ins-primary-rgb, 85, 110, 230), 0.12);
    border-radius: 50%;
}

.swal-reset-pass-icon i {
    font-size: 1.75rem;
    line-height: 1;
}

.swal-reset-pass-lead {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--ins-body-color);
    text-align: center;
}

.reset-pass-options {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
    text-align: left;
}

.reset-pass-opt {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 0.9rem;
    border: 1.5px solid var(--ins-border-color);
    border-radius: var(--ins-border-radius);
    background-color: var(--ins-secondary-bg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
    margin: 0;
}

.reset-pass-opt:hover {
    border-color: var(--ins-primary);
    background-color: rgba(var(--ins-primary-rgb, 85, 110, 230), 0.04);
}

.reset-pass-opt.is-selected {
    border-color: var(--ins-primary);
    background-color: rgba(var(--ins-primary-rgb, 85, 110, 230), 0.08);
    box-shadow: 0 0 0 1px var(--ins-primary) inset;
}

.reset-pass-opt input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.reset-pass-opt-icon {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    background-color: rgba(var(--ins-primary-rgb, 85, 110, 230), 0.12);
    color: var(--ins-primary);
    font-size: 1.15rem;
}

.reset-pass-opt-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    line-height: 1.25;
}

.reset-pass-opt-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--ins-heading-color);
}

.reset-pass-opt-desc {
    font-size: 0.78rem;
    color: var(--ins-secondary-color, var(--ins-body-color));
    opacity: 0.75;
    margin-top: 0.1rem;
}

.reset-pass-opt-check {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--ins-primary);
    color: #fff;
    font-size: 0.85rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.reset-pass-opt.is-selected .reset-pass-opt-check {
    opacity: 1;
    transform: scale(1);
}

/* ============================================
   Banner de IMPERSONACIÓN
   ============================================ */
.impersonation-banner {
    position: sticky;
    top: 0;
    z-index: 2000;
    background: linear-gradient(90deg, #d97706 0%, #f59e0b 100%);
    color: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    padding: 0.5rem 1rem;
    font-size: 0.88rem;
    font-weight: 500;
}

.impersonation-banner-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1600px;
    margin: 0 auto;
}

.impersonation-banner-text {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 0;
}

.impersonation-banner-text span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.impersonation-banner-text i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.impersonation-banner .btn-light {
    background-color: #fff;
    color: #b45309;
    border-color: #fff;
    font-weight: 600;
    flex-shrink: 0;
}

.impersonation-banner .btn-light:hover {
    background-color: #fef3c7;
    color: #92400e;
    border-color: #fef3c7;
}

/* Compensar el banner en layouts con sidenav fijo si hace falta */
body.has-impersonation-banner .app-wrapper,
body.has-impersonation-banner .wrapper {
    /* No se mueve nada — el sticky del banner ya reserva su espacio */
}

@media (max-width: 576px) {
    .impersonation-banner-inner {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .impersonation-banner .btn-light {
        width: 100%;
    }
}

/* ============================================
   Dashboard — Sección "Mi Area"
   ============================================ */
.area-panel {
    position: relative;
    padding: 1rem 1rem 1rem 1.25rem;
    background-color: var(--ins-tertiary-bg, var(--ins-secondary-bg));
    border-radius: var(--ins-border-radius);
    border-left: 4px solid var(--ins-warning);
    height: 100%;
    box-shadow: inset 0 0 0 1px var(--ins-border-color);
}

.area-panel h6 {
    color: var(--ins-secondary-color, var(--ins-body-color));
    opacity: 0.85;
    letter-spacing: 0.03em;
    margin-bottom: 0.75rem;
}

/* ============================================================
   Avatar user photos — crop to fill circular frame correctly
   ============================================================ */

/* Base: any circular img crops to fill its own dimensions */
img.rounded-circle {
    object-fit: cover;
}

/* When the img is inside a fixed-size avatar container (not the img itself),
   force it to fill the container completely before cropping */
.avatar > img.rounded-circle,
div[class*="avatar-"] > img.rounded-circle {
    width: 100%;
    height: 100%;
}

/* Topbar avatar: width="32" is set as attribute but height needs to match */
#userAvatar {
    height: 32px;
}


/* ============================================================
   Topbar notifications — fondo sólido en el área simplebar
   simplebar genera capas absolutas internas que no heredan
   el background del dropdown, hay que forzarlo explícitamente.
   ============================================================ */
#topbar-notifications-list .simplebar-content-wrapper,
#topbar-notifications-list .simplebar-content {
    background-color: var(--bs-dropdown-bg);
}