/*=====================================================
RB GROUP ADMIN UI
Versión 2.0
======================================================*/

:root{

    --rb-primary:#1f6bff;
    --rb-primary-hover:#1457db;

    --rb-orange:#ea8354;

    --rb-success:#22c55e;
    --rb-warning:#f59e0b;
    --rb-danger:#ef4444;
    --rb-purple:#7c3aed;
    --rb-info:#06b6d4;

    --rb-bg:#f5f7fb;

    --rb-white:#ffffff;

    --rb-text:#1f2937;
    --rb-text-light:#64748b;

    --rb-border:#e5e7eb;

    --rb-radius:14px;

    --rb-shadow:
        0 6px 20px rgba(16,24,40,.05);

}

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

.rb-admin-grid{

    display:grid;

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

    gap:24px;

    align-items:start;

}

.rb-admin-main{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.rb-admin-sidebar{

    position:sticky;

    top:20px;

    display:flex;

    flex-direction:column;

    gap:20px;

}
.rb-admin-grid.no-sidebar{
 
    grid-template-columns: 1fr;
 
}

/*=====================================================
CARDS
======================================================*/

.rb-card,

.rb-admin-panel{

    background:var(--rb-white);

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

    border-radius:16px;

    box-shadow:var(--rb-shadow);

}

.rb-card{

    padding:20px;

}

.rb-admin-panel{

    padding:24px;

}

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

.rb-admin-tabs{

    display:flex;

    gap:0;

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

    margin-bottom:26px;

}

.rb-admin-tab{

    border:none;

    background:transparent;

    height:48px;

    padding:0 24px;

    font-size:14px;

    font-weight:600;

    color:#64748b;

    cursor:pointer;

    position:relative;

    transition:.25s;

}

.rb-admin-tab:hover{

    color:var(--rb-primary);

}

.rb-admin-tab.active{

    color:var(--rb-primary);

}

.rb-admin-tab.active::after{

    content:"";

    position:absolute;

    left:0;

    right:0;

    bottom:-1px;

    height:3px;

    border-radius:20px;

    background:var(--rb-primary);

}
/*=====================================================
TOOLBAR
======================================================*/

.rb-admin-toolbar{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:18px;

    margin-bottom:18px;

    flex-wrap:wrap;

}

.rb-admin-filters{

    display:flex;

    align-items:center;

    gap:12px;

    flex-wrap:wrap;

}

/*=====================================================
BUSCADOR
======================================================*/

.rb-admin-search{

    width:270px;

    height:42px;

    padding:0 16px;

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

    border-radius:10px;

    background:#fff;

    font-size:13px;

    color:var(--rb-text);

    transition:.25s;

}

.rb-admin-search::placeholder{

    color:#94a3b8;

}

.rb-admin-search:focus{

    outline:none;

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

    box-shadow:0 0 0 4px rgba(31,107,255,.08);

}

/*=====================================================
SELECTS
======================================================*/

.rb-admin-toolbar select,

.rb-input{

    min-width:135px;

    height:42px;

    padding:0 14px;

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

    border-radius:10px;

    background:#fff;

    color:#374151;

    font-size:13px;

    transition:.25s;

}

.rb-admin-toolbar select:focus,

.rb-input:focus{

    outline:none;

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

    box-shadow:0 0 0 4px rgba(31,107,255,.08);

}

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

.rb-btn{

    height:42px;

    padding:0 18px;

    border:none;

    border-radius:10px;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    cursor:pointer;

    font-size:13px;

    font-weight:600;

    transition:.25s;

    text-decoration:none;

}

.rb-btn i{

    font-size:12px;

}

.rb-btn-primary{

    background:var(--rb-primary);

    color:#fff;

}

.rb-btn-primary:hover{

    background:var(--rb-primary-hover);

}

.rb-btn-secondary{

    background:#fff;

    color:#374151;

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

}

.rb-btn-secondary:hover{

    background:#f8fafc;

}

.rb-btn-light{

    background:#fff;

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

    color:#374151;

    min-width:118px;

}

.rb-btn-light:hover{

    border-color:#cbd5e1;

    background:#f8fafc;

}

.rb-btn-success{

    background:var(--rb-success);

    color:#fff;

}

.rb-btn-warning{

    background:var(--rb-warning);

    color:#fff  !important;

}

.rb-btn-danger{

    background:var(--rb-danger);

    color:#fff;

}

.rb-btn-success:hover,

.rb-btn-warning:hover,

.rb-btn-danger:hover{

    filter:brightness(.95);

}
/*=====================================================
TABLA
======================================================*/

.rb-admin-table{

    width:100%;

    border-collapse:separate;

    border-spacing:0;

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

    border-radius:12px;

    background:#fff;

}

.rb-admin-table thead th{

    height:48px;

    padding:0 16px;

    background:#fbfcfe;

    color:#64748b;

    font-size:12px;

    font-weight:700;

    text-align:left;

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

    white-space:nowrap;

}

.rb-admin-table tbody td{

    padding:10px 12px;

    border-bottom:1px solid #edf1f7;

    vertical-align:middle;

    font-size:12px;

    color:#374151;

}

.rb-admin-table tbody tr{

    transition:.20s;

}

.rb-admin-table tbody tr:hover{

    background:#f8fbff;

}

.rb-admin-table tbody tr:last-child td{

    border-bottom:none;

}

/*=====================================================
COLUMNAS
======================================================*/

.rb-admin-table th:first-child,
.rb-admin-table td:first-child{

    width:50;

}

.rb-admin-table th:nth-child(2){

    width:210px;

}

.rb-admin-table th:nth-child(3){

    width:270px;

}

.rb-admin-table th:nth-child(4){

    width:120px;

}

.rb-admin-table th:nth-child(5){

    width:120px;

}

.rb-admin-table th:nth-child(6){

    width:150px;

}

.rb-admin-table th:last-child,
.rb-admin-table td:last-child{

    width:150px;

    text-align:center;

}

/*=====================================================
AVATAR
======================================================*/

.rb-admin-avatar{

    width:32px;

    height:32px;

    border-radius:50%;

    object-fit:cover;

    display:block;

    border:2px solid #fff;

    box-shadow:0 2px 8px rgba(0,0,0,.10);

}

/*=====================================================
NOMBRE
======================================================*/

.rb-admin-table strong{

    display:block;

    color:#1f2937;

    font-size:13px;

    font-weight:700;

    margin-bottom:2px;

}

.rb-admin-table small{

    color:#94a3b8;

    font-size:11px;

}

/*=====================================================
BADGES
======================================================*/

.rb-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 10px;

    border-radius:8px;

    font-size:11px;

    font-weight:600;

    white-space:nowrap;

}

/* Roles */

.rb-role-admin{

    background:#efe8ff;

    color:#7c3aed;

}

.rb-role-instructor{

    background:#e7f0ff;

    color:#2563eb;

}

.rb-role-sales{

    background:#dcfce7;

    color:#0f766e;

}

.rb-role-reception{

    background:#fff1e7;

    color:#ea580c;

}

.rb-role-viewer{

    background:#f3f4f6;

    color:#4b5563;

}

/* Estados */

.rb-status-active{

    background:#dcfce7;

    color:#15803d;

}

.rb-status-pending{

    background:#fff3d6;

    color:#d97706;

}

.rb-status-suspended{

    background:#ffe3e3;

    color:#dc2626;

}

/*=====================================================
FOOTER TABLA
======================================================*/

.rb-admin-table-footer{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:20px;

    padding:18px 0 0;

    margin-top:18px;

    border-top:1px solid #edf2f7;

}

.rb-admin-table-info{

    font-size:12px;

    color:#64748b;

    line-height:18px;

    font-weight:500;
    
     flex:0 0 210px

}

.rb-admin-pagination{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:6px;

}

.rb-admin-pagination button{

    width:42px;

    height:38px;

    border:1px solid #e6edf5;

    border-radius:8px;

    background:#fff;

    color:#475569;

    font-size:14px;

    font-weight:600;

    cursor:pointer;

    transition:all .20s ease;

}

.rb-admin-pagination button:hover{

    background:#f8fbff;

    border-color:#2563eb;

    color:#2563eb;

}

.rb-admin-pagination button.active{

    background:#2563eb;

    color:#fff;

    border-color:#2563eb;

}

.rb-admin-page-size{

    flex:0 0 140px;
    
    margin-left:auto;
    
    width:140px;

    height:40px;

    padding:0 12px;

    border:1px solid #e7edf5;

    border-radius:10px;

    background:#fff;

    font-size:13px;

    justify-self:end;
    

    

}
/*=====================================================
SIDEBAR
======================================================*/

.rb-admin-panel{

    padding:0;

    overflow:hidden;

}

.rb-admin-panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:18px 22px;

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

}

.rb-admin-panel-title{

    font-size:14px;

    font-weight:700;

    color:#1f2937;

    text-transform:uppercase;

    letter-spacing:.4px;

}

.rb-admin-panel-close{

    width:32px;

    height:32px;

    border:none;

    background:transparent;

    cursor:pointer;

    color:#94a3b8;

    font-size:18px;

    transition:.20s;

}

.rb-admin-panel-close:hover{

    color:#374151;

}


/*=====================================================
RESUMEN
======================================================*/

.rb-admin-summary{

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:18px;

    margin-top:24px;

}

.rb-admin-summary .rb-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    border:1px solid #edf2f7;

    box-shadow:none;

}

.rb-summary-icon{

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:24px;

}

.rb-summary-primary{

    background:#e8f0ff;

    color:#2563eb;

}

.rb-summary-success{

    background:#dcfce7;

    color:#16a34a;

}

.rb-summary-danger{

    background:#fee2e2;

    color:#dc2626;

}

.rb-summary-purple{

    background:#f3e8ff;

    color:#7c3aed;

}

.rb-summary-warning{

    background:#fff7ed;

    color:#ea580c;

}

.rb-summary-number{

    font-size:34px;

    font-weight:700;

    color:#1f2937;

    line-height:1;

}

.rb-summary-label{

    margin-top:4px;

    font-size:13px;

    color:#64748b;

}

.rb-summary-link{

    display:inline-block;

    margin-top:8px;

    font-size:12px;

    font-weight:600;

    color:var(--rb-primary);

    text-decoration:none;

}

.rb-summary-link:hover{

    text-decoration:underline;

}
/*=====================================================
EFECTOS
======================================================*/

.rb-card,
.rb-admin-panel,
.rb-admin-table{

    transition:
        transform .20s ease,
        box-shadow .20s ease,
        border-color .20s ease;

}

.rb-card:hover,
.rb-admin-panel:hover{

    transform:translateY(-2px);

    box-shadow:0 10px 30px rgba(15,23,42,.08);

}

.rb-btn{

    transition:
        background .20s,
        color .20s,
        border-color .20s,
        transform .15s,
        box-shadow .20s;

}

.rb-btn:hover{

    transform:translateY(-1px);

}

.rb-btn:active{

    transform:scale(.98);

}

.rb-admin-avatar{

    transition:.20s;

}

.rb-admin-table tbody tr:hover .rb-admin-avatar{

    transform:scale(1.08);

}

/*=====================================================
SCROLL TABLA
======================================================*/

.rb-admin-table thead,
.rb-admin-table tbody{

    width:100%;

}

.rb-admin-table::-webkit-scrollbar{

    height:8px;

}

.rb-admin-table::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:20px;

}

.rb-admin-table::-webkit-scrollbar-track{

    background:#f8fafc;

}
/*=====================================================
TABLE WRAPPER
======================================================*/

.rb-admin-table-wrapper{

    overflow-x:auto;

    border-radius:12px;

}

.rb-admin-table-wrapper::-webkit-scrollbar{

    height:8px;

}

.rb-admin-table-wrapper::-webkit-scrollbar-thumb{

    background:#d1d5db;

    border-radius:20px;

}

.rb-admin-table-wrapper::-webkit-scrollbar-track{

    background:#f8fafc;

}
/*=====================================================
SIDEBAR
======================================================*/

.rb-admin-sidebar{

    align-self:start;
    width:340px;

}

.rb-admin-sidebar .rb-admin-panel{

    overflow:hidden;
    
    background:#fff;

    border-radius:16px;

    border:1px solid #e9eef5;

    box-shadow:0 10px 25px rgba(15,23,42,.05);

    overflow:hidden;


}

/*=====================================================
INPUTS
======================================================*/

input,
select,
textarea{

    transition:
        border-color .20s,
        box-shadow .20s,
        background .20s;

}

input:focus,
select:focus,
textarea:focus{

    background:#fff;

}

/*=====================================================
BADGES
======================================================*/

.rb-badge{

    transition:.20s;

}

.rb-admin-table tbody tr:hover .rb-badge{

    transform:translateY(-1px);

}

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

.rb-admin-tab{

    user-select:none;

}

.rb-admin-tab:focus{

    outline:none;

}

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

@media (max-width:1200px){

    .rb-admin-grid{

        grid-template-columns:1fr;

    }

    .rb-admin-sidebar{

        position:relative;

        top:auto;

    }

.rb-admin-summary{

    margin-top:28px;

    display:grid;

    grid-template-columns:repeat(5,1fr);

    gap:20px;

}

}

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

@media (max-width:992px){

    .rb-admin-toolbar{

        flex-direction:column;

        align-items:stretch;

    }

    .rb-admin-filters{

        width:100%;

        flex-direction:column;

        align-items:stretch;

    }

    .rb-admin-search,
    .rb-input,
    .rb-admin-toolbar select{

        width:100%;

    }

    .rb-btn-primary{

        width:100%;

    }

}

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

@media (max-width:768px){

    .rb-admin-summary{

        grid-template-columns:1fr;

    }

    .rb-admin-tabs{

        overflow-x:auto;

        white-space:nowrap;

    }

    .rb-admin-tab{

        flex:none;

    }

    .rb-summary-number{

        font-size:28px;

    }

}

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

@media (max-width:480px){

    .rb-card{

        padding:16px;

    }

    .rb-admin-panel{

        border-radius:12px;

    }


    .rb-admin-avatar{

        width:38px;

        height:38px;

    }

    .rb-btn{

        height:40px;

        font-size:12px;

    }

}

/*=====================================================
FIN
======================================================*/