/* ==========================================
   ACM PANEL
========================================== */

.acm-panel {

    margin-top: 2px;

    border: 1px solid #3a4452;
    border-radius: 10px;

    background: #1b2028;

    overflow: hidden;

}

/* ==========================================
   TABS
========================================== */

.acm-tabs {

    display: flex;
	
	flex-wrap: wrap;

    align-items: flex-end;

    background: #232831;

    border-bottom: 1px solid #3a4452;

}

/* ==========================================
   TAB
========================================== */

.acm-tab {

    padding: 8px 12px;

    margin-right: 2px;

    border: 1px solid #2f3946;
    border-bottom: 4px solid #3a4452;

    border-radius: 6px 6px 0 0;

    background: transparent;

    color: #aeb8c5;

    cursor: pointer;

    font-size: 15px;

    transition: .2s;

}

.acm-tab:hover {

    background: #2a313b;

    color: #55b7ff;

}

/* ==========================================
   TAB ACTIVA
========================================== */

.acm-tab.active {

    background: #1b2028;

    color: #55b7ff;

    border-color: #3a4452;
    border-bottom-color: #55b7ff;

}

/* ==========================================
   CONTENIDO
========================================== */

.acm-panel-content {

    padding: 10px 20px 20px;

}

/* ==========================================
   TAB CONTENT
========================================== */

.acm-tab-content {

    display: none;

}

.acm-tab-content.active {

    display: block;

}

/* ==========================================================
   MODAL PERFIL DE STAFF
   ========================================================== */

.acm-staff-modal-overlay {

    position: fixed;

    inset: 0;

    background:
        rgba(5, 7, 10, 0.78);

    display: flex;

    justify-content: center;

    align-items: flex-start;

    padding-top: 3vh;

    z-index: 9999;

}


/* ==========================================================
   CONTENEDOR PRINCIPAL
   ========================================================== */

.acm-staff-modal {

    width: 900px;

    max-width: calc(100vw - 24px);

    background:
        linear-gradient(
            145deg,
            #191d22 0%,
            #1d2228 100%
        );

    color:
        var(--acm-text);

    border:
        1px solid var(--acm-border);

    border-radius: 10px;

    box-shadow:
        0 25px 70px rgba(0, 0, 0, 0.65),
        0 0 0 1px rgba(0, 0, 0, 0.25);

    overflow: hidden;

}


/* ==========================================================
   HEADER
   ========================================================== */

.acm-staff-modal-header {

    height: 58px;

    box-sizing: border-box;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding: 0 18px;

    background:
        rgba(12, 15, 19, 0.72);

    border-bottom:
        1px solid var(--acm-border);

}


.acm-staff-modal-header h2 {

    margin: 0;

    font-size: 19px;

    font-weight: 700;

    color:
        var(--acm-text);

}


/* ==========================================================
   BOTÓN X
   ========================================================== */

.acm-staff-modal-close {

    width: 32px;

    height: 32px;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        transparent;

    border:
        1px solid var(--acm-border-strong);

    border-radius: 6px;

    color:
        var(--acm-text-muted);

    font-size: 23px;

    line-height: 1;

    cursor: pointer;

}


.acm-staff-modal-close:hover {

    color:
        var(--acm-text);

    border-color:
        var(--acm-primary);

    background:
        rgba(22, 131, 232, 0.08);

}


/* ==========================================================
   BODY
   ========================================================== */

.acm-staff-modal-body {

    padding: 18px;

}


/* ==========================================================
   LAYOUT PRINCIPAL
   ========================================================== */

.acm-staff-layout {

    display: grid;

    grid-template-columns:
        minmax(0, 1fr) 280px;

    gap: 14px;

}


/* ==========================================================
   PANEL DE DATOS
   ========================================================== */

.acm-staff-data {

    min-width: 0;

    padding: 16px;

    background:
        rgba(25, 29, 34, 0.82);

    border:
        1px solid var(--acm-border);

    border-radius: 8px;

}


/* ==========================================================
   CABECERA DEL PERFIL
   ========================================================== */

.acm-staff-profile {

    display: flex;

    align-items: center;

    gap: 14px;

    padding-bottom: 14px;

    margin-bottom: 12px;

    border-bottom:
        1px solid var(--acm-border);

}


.acm-staff-avatar {

    width: 52px;

    height: 52px;

    flex-shrink: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background:
        linear-gradient(
            145deg,
            #20252b,
            #191d22
        );

    border:
        1px solid var(--acm-border-strong);

    border-radius: 50%;

    color:
        var(--acm-primary);

    font-size: 22px;

    font-weight: 800;

}


.acm-staff-profile-info {

    min-width: 0;

}


.acm-staff-profile-info h1 {

    margin: 0;

    font-size: 22px;

    font-weight: 700;

    color:
        var(--acm-text);

}


.acm-staff-profile-role {

    margin-top: 4px;

    font-size: 12px;

    color:
        var(--acm-text-muted);

}


/* ==========================================================
   ESTADO
   ========================================================== */

.acm-staff-status {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    margin-top: 6px;

    padding: 4px 8px;

    border-radius: 6px;

    font-size: 11px;

    font-weight: 700;

}


.acm-staff-status.active {

    background:
        rgba(50, 215, 75, 0.08);

    border:
        1px solid rgba(50, 215, 75, 0.25);

    color:
        var(--acm-success);

}


.acm-staff-status.inactive {

    background:
        rgba(239, 68, 68, 0.08);

    border:
        1px solid rgba(239, 68, 68, 0.25);

    color:
        var(--acm-danger);

}


/* ==========================================================
   DATOS
   ========================================================== */

.acm-staff-details {

    display: grid;

    grid-template-columns:
        1fr 1fr;

    gap: 8px;

}


.acm-staff-detail {

    min-width: 0;

    padding: 9px 11px;

    background:
        rgba(25, 29, 34, 0.82);

    border:
        1px solid var(--acm-border);

    border-radius: 7px;

}


.acm-staff-detail-label {

    margin-bottom: 3px;

    font-size: 10px;

    color:
        var(--acm-text-muted);

    text-transform: uppercase;

    letter-spacing: 0.3px;

}


.acm-staff-detail-value {

    font-size: 14px;

    font-weight: 700;

    color:
        var(--acm-text);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}


/* ==========================================================
   PANEL DE ACCIONES
   ========================================================== */

.acm-staff-actions {

    min-width: 0;

    padding: 14px;

    background:
        rgba(25, 29, 34, 0.82);

    border:
        1px solid var(--acm-border);

    border-radius: 8px;

}


.acm-staff-actions h3 {

    margin: 0 0 12px;

    font-size: 15px;

    font-weight: 700;

    color:
        var(--acm-text);

}


/* ==========================================================
   BOTONES
   ========================================================== */

.acm-staff-action-button {

    width: 100%;

    min-height: 38px;

    box-sizing: border-box;

    margin-bottom: 8px;

    padding: 8px 12px;

    background:
        rgba(255, 255, 255, 0.025);

    border:
        1px solid var(--acm-border);

    border-radius: 7px;

    color:
        var(--acm-text-muted);

    font-size: 13px;

    font-weight: 700;

    text-align: left;

    cursor: pointer;

    transition:
        background .2s,
        border-color .2s,
        color .2s;

}


.acm-staff-action-button:hover {

    background:
        rgba(22, 131, 232, 0.08);

    border-color:
        var(--acm-primary);

    color:
        var(--acm-text);

}


.acm-staff-action-button:last-child {

    margin-bottom: 0;

}


/* ==========================================================
   BOTÓN WARNING
   ========================================================== */

.acm-staff-action-button.warning {

    background:
        rgba(245, 185, 66, 0.06);

    border:
        1px solid rgba(245, 185, 66, 0.28);

    color:
        #e6b85c;

}


.acm-staff-action-button.warning:hover {

    background:
        rgba(245, 185, 66, 0.12);

    border-color:
        var(--acm-warning);

    color:
        #ffffff;

}


/* ==========================================================
   DIVISOR
   ========================================================== */

.acm-staff-divider {

    height: 1px;

    margin: 12px 0;

    background:
        var(--acm-border);

}


/* ==========================================================
   SELECTOR DE STAFF
   ========================================================== */

.acm-staff-selector {

    width: 100%;

    height: 38px;

    box-sizing: border-box;

    margin-bottom: 8px;

    padding: 0 10px;

    background:
        var(--acm-input);

    border:
        1px solid var(--acm-border);

    border-radius: 7px;

    color:
        var(--acm-text);

    font-size: 13px;

    outline: none;

    cursor: pointer;

}


.acm-staff-selector:hover {

    border-color:
        var(--acm-border-strong);

}


.acm-staff-selector:focus {

    border-color:
        var(--acm-primary);

    box-shadow:
        0 0 0 3px
        rgba(22, 131, 232, 0.10);

}


/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media (max-width: 760px) {

    .acm-staff-modal {

        width:
            calc(100vw - 20px);

    }


    .acm-staff-layout {

        grid-template-columns:
            1fr;

    }


    .acm-staff-details {

        grid-template-columns:
            1fr;

    }

}