/* ============================================================
   CS TUCUMAN · STAFF V24
   Grid compacto inspirado en comunidades gaming.
   ============================================================ */

body.cst100-staff{
 background:#000!important;
 color:#f5f5f5!important;
 font-family:Inter,Arial,sans-serif!important;
}

.cst100-staff-shell{
 width:min(1220px,calc(100% - 30px))!important;
 margin:0 auto 80px!important;
}

/* Intro */
.cst240-staff-intro{
 padding:70px 0 48px;
 text-align:center;
 border-bottom:1px solid #101010;
}
.cst240-staff-intro>span{
 color:#555;
 font-size:9px;
 font-weight:700;
 letter-spacing:3px;
}
.cst240-staff-intro h1{
 margin:10px 0 8px;
 color:#fff!important;
 font:400 clamp(54px,6vw,82px)/.95 "DM Serif Display",Georgia,serif!important;
 letter-spacing:-2px;
}
.cst240-staff-intro p{
 max-width:620px;
 margin:0 auto;
 color:#666;
 font-size:12px;
 line-height:1.65;
}

/* Search + filters */
.cst240-staff-tools{
 margin:24px 0 36px;
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:16px;
}
.cst240-staff-tools>label{
 width:260px;
 height:40px;
 padding:0 11px;
 display:flex;
 align-items:center;
 gap:8px;
 border:1px solid #191919;
 border-radius:10px;
 background:#030303;
}
.cst240-staff-tools label ion-icon{color:#555}
.cst240-staff-tools input{
 min-width:0;
 width:100%;
 border:0!important;
 background:transparent!important;
 box-shadow:none!important;
 color:#fff!important;
 font-size:9px!important;
}
.cst240-staff-tools>div{
 display:flex;
 gap:5px;
 flex-wrap:wrap;
 justify-content:flex-end;
}
.cst240-staff-tools button{
 min-height:35px;
 padding:0 10px;
 display:inline-flex;
 align-items:center;
 gap:6px;
 border:1px solid #191919;
 border-radius:9px;
 background:#030303;
 color:#777;
 font-size:7px;
 font-weight:800;
 cursor:pointer;
}
.cst240-staff-tools button b{
 min-width:17px;
 padding:2px 5px;
 border-radius:999px;
 background:#0b0b0b;
 color:#555;
 font-size:6px;
}
.cst240-staff-tools button:hover,
.cst240-staff-tools button.active{
 border-color:#332113;
 color:#fff;
 background:#070707;
}
.cst240-staff-tools button.active b{color:#ff8a24}

/* Group section */
.cst100-role-block[data-staff-role]{
 margin:0 0 58px!important;
 padding:0!important;
 border:0!important;
 background:transparent!important;
}
.cst240-group-divider{
 display:grid;
 grid-template-columns:1fr auto 1fr;
 align-items:center;
 gap:20px;
 margin:0 0 38px;
}
.cst240-group-divider>span{
 height:1px;
 background:#171717;
}
.cst240-group-divider>b{
 min-height:38px;
 padding:0 17px;
 display:inline-flex;
 align-items:center;
 justify-content:center;
 gap:6px;
 border:1px solid #252525;
 border-radius:999px;
 background:#050505;
 color:#e9e9e9;
 font-size:11px;
 font-weight:800;
 box-shadow:0 10px 28px rgba(0,0,0,.28);
}
.cst240-group-divider b small{
 color:#666;
 font-size:9px;
 font-weight:600;
}
.cst240-group-ceo>b{border-color:#4a2b13;color:#ff9a3d}
.cst240-group-staff>b{border-color:#332719}
.cst240-group-full>b{border-color:#28231e}
.cst240-group-basic>b{border-color:#242424}

/* Grid exactly like reference */
.cst100-staff-grid{
 display:grid!important;
 grid-template-columns:repeat(6,minmax(0,1fr))!important;
 gap:14px!important;
}

/* Card */
.cst240-staff-card{
 position:relative!important;
 min-height:192px!important;
 padding:15px 12px 12px!important;
 overflow:hidden!important;
 border:1px solid #1c1c1c!important;
 border-radius:14px!important;
 background:#020202!important;
 box-shadow:none!important;
 transition:transform .16s ease,border-color .16s ease,background .16s ease!important;
}
.cst240-staff-card:before{display:none!important}
.cst240-staff-card:hover{
 transform:translateY(-3px)!important;
 border-color:#303030!important;
 background:#040404!important;
}
.cst240-card-main{
 display:flex;
 align-items:center;
 flex-direction:column;
 color:#fff;
 text-decoration:none;
}
.cst240-avatar{
 position:relative;
 width:92px;
 height:92px;
 margin:3px auto 10px;
}
.cst240-avatar img,
.cst240-avatar>span{
 width:100%;
 height:100%;
 display:grid;
 place-items:center;
 object-fit:cover;
 border:1px solid #252525;
 border-radius:3px;
 background:#111;
 color:#777;
 font-size:20px;
 font-weight:700;
}
.cst240-avatar:before{
 content:"";
 position:absolute;
 z-index:2;
 inset:-3px;
 border:1px solid transparent;
 border-radius:5px;
 pointer-events:none;
}
.cst240-group-ceo + .cst100-staff-grid .cst240-avatar:before{
 border-color:rgba(255,122,0,.34);
 box-shadow:0 0 16px rgba(255,122,0,.08);
}
.cst240-avatar>i{
 position:absolute;
 z-index:4;
 right:-2px;
 bottom:-2px;
 width:10px;
 height:10px;
 border:2px solid #020202;
 border-radius:50%;
 background:#46515a;
}
.cst240-avatar>i.online{
 background:#31d47d;
 box-shadow:0 0 9px rgba(49,212,125,.42);
}
.cst240-staff-card h3{
 width:100%;
 margin:0 0 8px!important;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
 text-align:center;
 color:#fff!important;
 font:800 11px/1.2 Inter,Arial,sans-serif!important;
}
.cst240-scope{
 max-width:100%;
 min-height:23px;
 padding:0 7px;
 display:flex;
 align-items:center;
 justify-content:center;
 gap:5px;
 border:1px solid #222;
 border-radius:999px;
 background:#070707;
 color:#d6d6d6;
 font-size:7px;
 font-weight:700;
}
.cst240-scope ion-icon{
 min-width:12px;
 color:#666;
 font-size:12px;
}
.cst240-scope span{
 max-width:120px;
 overflow:hidden;
 text-overflow:ellipsis;
 white-space:nowrap;
}

/* Hover actions */
.cst240-card-actions{
 position:absolute;
 top:8px;
 right:8px;
 display:flex;
 gap:4px;
 opacity:0;
 transform:translateY(-3px);
 transition:.16s ease;
}
.cst240-staff-card:hover .cst240-card-actions{
 opacity:1;
 transform:none;
}
.cst240-card-actions a{
 width:28px;
 height:28px;
 display:grid;
 place-items:center;
 border:1px solid #242424;
 border-radius:8px;
 background:rgba(0,0,0,.88);
 color:#777;
 text-decoration:none;
}
.cst240-card-actions a:hover{
 color:#ff8a24;
 border-color:#3a2514;
}

/* old elements hidden if any remain */
.cst100-staff-card-top,
.cst100-staff-card-main,
.cst100-staff-mini,
.cst100-staff-card>footer{
 display:none!important;
}

/* Filter integration */
.cst100-role-block.is-hidden,
.cst240-staff-card.is-hidden{display:none!important}

/* End */
.cst240-staff-end{
 margin-top:20px;
 padding:32px 0 8px;
 border-top:1px solid #111;
 text-align:center;
}
.cst240-staff-end>span{
 color:#444;
 font-size:8px;
 font-weight:800;
 letter-spacing:2px;
}
.cst240-staff-end p{
 margin:7px 0 0;
 color:#555;
 font-size:8px;
}
.cst240-staff-end a{color:#858585;text-decoration:none}
.cst240-staff-end a:hover{color:#ff8a24}

@media(max-width:1120px){
 .cst100-staff-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media(max-width:940px){
 .cst100-staff-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:760px){
 .cst240-staff-tools{align-items:stretch;flex-direction:column}
 .cst240-staff-tools>label{width:100%;box-sizing:border-box}
 .cst240-staff-tools>div{justify-content:flex-start}
 .cst100-staff-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
@media(max-width:560px){
 .cst100-staff-shell{width:calc(100% - 18px)!important}
 .cst240-staff-intro{padding:52px 0 38px}
 .cst240-staff-intro h1{font-size:52px}
 .cst240-group-divider{gap:10px}
 .cst240-group-divider>b{padding:0 12px;font-size:9px}
 .cst100-staff-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}
 .cst240-staff-card{min-height:176px!important;padding:12px 8px 10px!important}
 .cst240-avatar{width:80px;height:80px}
}