/* ============================================================
   WÖRTH · ADMIN MASTER MODULES v2
   ============================================================ */

body.ws-role-admin{
    --adm-green:#07513e;
    --adm-green2:#087258;
    --adm-soft:#edf5f1;
    --adm-border:#dce4e0;
    --adm-muted:#78857f;
}


/* ============================================================
   CABECERA DE MÓDULO
   ============================================================ */

.ws-am-page{
    width:100%;
    max-width:1280px;
    margin:0 auto;
}

.ws-am-heading{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:20px;

    margin-bottom:18px;
}

.ws-am-heading h1{
    margin:0 !important;

    color:#073f31 !important;

    font-family:
        Georgia,
        "Times New Roman",
        serif !important;

    font-size:30px !important;
    font-weight:500 !important;

    letter-spacing:-.5px;
}

.ws-am-heading p{
    margin:5px 0 0;

    color:#78857f;

    font-size:10.5px;
}


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

.ws-am-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;

    margin-bottom:14px;
}

.ws-am-search{
    width:min(390px,100%);

    min-height:39px;

    box-sizing:border-box;

    padding:8px 14px;

    border:
        1px solid #cfdbd5;

    border-radius:20px;

    background:#fff;

    color:#304d42;

    font-family:"Inter",Arial,sans-serif;
    font-size:10.5px;
}

.ws-am-search:focus{
    outline:
        2px solid
        rgba(7,81,62,.08);

    border-color:#07513e;
}

.ws-am-filter{
    min-height:37px;

    padding:7px 11px;

    border:
        1px solid #d3ded8;

    border-radius:18px;

    background:#fff;

    color:#466057;

    font-size:9.5px;
}


/* ============================================================
   KPIs
   ============================================================ */

.ws-am-kpis{
    display:grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap:12px;

    margin-bottom:16px;
}

.ws-am-kpi{
    min-height:92px;

    padding:13px 14px;

    background:#fff;

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

    border-radius:11px;
}

.ws-am-kpi-label{
    color:#73827b;

    font-size:9px;
}

.ws-am-kpi-value{
    margin-top:6px;

    color:#07513e;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:25px;
    font-weight:600;
}

.ws-am-kpi-note{
    margin-top:4px;

    color:#929d98;

    font-size:8px;
}


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

.ws-am-panel{
    overflow:hidden;

    background:#fff;

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

    border-radius:11px;
}

.ws-am-panel-head{
    min-height:50px;

    box-sizing:border-box;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;

    padding:12px 15px;

    border-bottom:
        1px solid #e4e9e6;
}

.ws-am-panel-title{
    color:#073f31;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:17px;
    font-weight:600;
}

.ws-am-count{
    min-width:24px;

    padding:3px 7px;

    border-radius:12px;

    background:#edf5f1;

    color:#07513e;

    text-align:center;

    font-size:8.5px;
    font-weight:750;
}


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

.ws-am-table-wrap{
    overflow:auto;
}

.ws-am-table{
    width:100%;

    min-width:760px;

    border-collapse:collapse;
}

.ws-am-table th{
    padding:10px;

    text-align:left;

    background:#f4f7f5;

    color:#687a72;

    font-size:8.8px;
    font-weight:750;

    white-space:nowrap;
}

.ws-am-table td{
    padding:11px 10px;

    border-bottom:
        1px solid #e9edea;

    color:#42594f;

    font-size:9.7px;

    vertical-align:middle;
}

.ws-am-table tbody tr{
    transition:
        background .13s ease;
}

.ws-am-table tbody tr:hover{
    background:#f7faf8;
}

.ws-am-table tbody tr:last-child td{
    border-bottom:0;
}

.ws-am-primary{
    color:#07513e;

    font-weight:700;
}

.ws-am-secondary{
    margin-top:2px;

    color:#8a9691;

    font-size:8px;
}


/* ============================================================
   BADGE
   ============================================================ */

.ws-am-badge{
    display:inline-flex;
    align-items:center;

    padding:4px 7px;

    border-radius:13px;

    background:#eef4f1;

    color:#07513e;

    font-size:8px;
    font-weight:700;
}

.ws-am-badge.ok{
    background:#e8f4ed;
    color:#087258;
}

.ws-am-badge.warn{
    background:#fff4df;
    color:#92601c;
}

.ws-am-badge.bad{
    background:#fff0ed;
    color:#b42318;
}


/* ============================================================
   BUTTON
   ============================================================ */

.ws-am-btn{
    min-height:30px;

    display:inline-flex;
    align-items:center;
    justify-content:center;

    padding:5px 10px;

    border:
        1px solid #c7d7cf;

    border-radius:16px;

    background:#fff;

    color:#07513e;

    font-family:"Inter",Arial,sans-serif;
    font-size:8.7px;
    font-weight:700;

    cursor:pointer;

    transition:
        background .14s ease,
        transform .14s ease;
}

.ws-am-btn:hover{
    background:#edf5f1;

    transform:translateY(-1px);
}

.ws-am-btn.primary{
    background:#07513e;
    border-color:#07513e;
    color:#fff;
}


/* ============================================================
   DETAIL DRAWER / CARD
   ============================================================ */

.ws-am-detail{
    display:grid;

    gap:15px;
}

.ws-am-data-grid{
    display:grid;

    grid-template-columns:
        repeat(3,minmax(0,1fr));

    gap:10px;
}

.ws-am-data{
    padding:11px;

    border:
        1px solid #e3e8e5;

    border-radius:9px;

    background:#fafcfb;
}

.ws-am-data-label{
    color:#85918c;

    font-size:8px;
}

.ws-am-data-value{
    margin-top:3px;

    color:#345248;

    font-size:9.7px;
    font-weight:650;

    word-break:break-word;
}


/* ============================================================
   EMPTY
   ============================================================ */

.ws-am-empty{
    padding:30px 15px;

    text-align:center;

    color:#87938d;

    font-size:9.5px;
}


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

@media(max-width:1000px){

    .ws-am-kpis{
        grid-template-columns:
            repeat(2,1fr);
    }

    .ws-am-data-grid{
        grid-template-columns:
            repeat(2,1fr);
    }
}

@media(max-width:650px){

    .ws-am-kpis{
        grid-template-columns:1fr;
    }

    .ws-am-data-grid{
        grid-template-columns:1fr;
    }

    .ws-am-heading,
    .ws-am-toolbar{
        display:block;
    }

    .ws-am-search{
        margin-top:10px;
    }
}