/* =========================================================
   CS TUCUMÁN · STAFF V450
   HERO CENTRADO + RANGOS CON COLOR PROPIO
   ========================================================= */

:root{
 --bg:#030303;
 --card:#0a0a0b;
 --line:rgba(255,255,255,.075);
 --white:#f5f5f6;
 --muted:#858a93;
 --green:#32df8f;

 --ceo:#ff9b17;
 --ceo-rgb:255,155,23;

 --staff:#18a8ff;
 --staff-rgb:24,168,255;

 --full:#9b63ff;
 --full-rgb:155,99,255;

 --admin:#ff4d49;
 --admin-rgb:255,77,73;
}

*{box-sizing:border-box}

html{scroll-behavior:smooth}

body.cst450-page{
 margin:0;
 background:#030303;
 color:var(--white);
 font-family:Inter,Arial,sans-serif;
}

.cst450-shell{
 width:min(1320px,calc(100% - 36px));
 margin:0 auto;
 padding:28px 0 76px;
}

/* =========================================================
   HERO CENTRADO
   ========================================================= */

.cst450-hero{
 min-height:245px;
 position:relative;
 overflow:hidden;

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

 padding:38px 44px;

 border:1px solid var(--line);
 border-radius:18px;

 background:
  radial-gradient(circle at 50% 100%,rgba(255,138,0,.06),transparent 36%),
  linear-gradient(110deg,#0b0b0c,#070708);

 isolation:isolate;
}

.cst450-hero.has-image::before{
 content:"";
 position:absolute;
 inset:0;
 z-index:-3;

 background-image:var(--hero);
 background-size:cover;
 background-position:center;

 filter:saturate(.55) contrast(1.08);
 transform:scale(1.03);
}

.cst450-hero::after{
 content:"";
 position:absolute;
 inset:0;
 z-index:-2;

 background:
  radial-gradient(circle at center,rgba(3,3,4,.68),rgba(3,3,4,.92) 72%),
  linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.72));
}

.hero-copy{
 width:min(760px,100%);
 text-align:center;
}

.hero-copy .eyebrow{
 display:inline-flex;
 align-items:center;
 justify-content:center;

 min-height:31px;
 padding:0 22px;
 margin-bottom:14px;

 border:1px solid rgba(24,168,255,.34);
 border-radius:30px;

 background:rgba(8,16,24,.45);

 color:#75c9ff;
 font-size:8px;
 font-weight:900;
 letter-spacing:.22em;
}

.hero-copy h1{
 margin:0;

 font:900 clamp(54px,5.4vw,78px)/.9 Rajdhani,Inter,sans-serif;
 letter-spacing:-.045em;

 text-shadow:0 9px 35px rgba(0,0,0,.35);
}

.hero-copy h1 em{
 color:#ff8a00;
 font-style:normal;
}

.hero-copy p{
 max-width:700px;
 margin:16px auto 0;

 color:#a5a9b0;
 font-size:12px;
 line-height:1.65;
}

/* =========================================================
   FILTROS
   ========================================================= */

.cst450-toolbar{
 margin-top:18px;
 padding:10px;

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

 border:1px solid var(--line);
 border-radius:13px;

 background:#080809;
}

.filters{
 display:flex;
 gap:8px;
 flex-wrap:wrap;
}

.filters button{
 --tone:#ff8a00;

 height:36px;
 padding:0 15px;

 border:1px solid rgba(255,255,255,.075);
 border-radius:8px;

 background:#0b0b0c;
 color:#b8bbc1;

 font:800 7px Inter;
 letter-spacing:.02em;

 cursor:pointer;

 transition:
  border-color .18s ease,
  color .18s ease,
  background .18s ease,
  box-shadow .18s ease;
}

.filters button.tone-ceo{--tone:var(--ceo)}
.filters button.tone-staff{--tone:var(--staff)}
.filters button.tone-full{--tone:var(--full)}
.filters button.tone-admin{--tone:var(--admin)}

.filters button:hover{
 border-color:var(--tone);
 color:#fff;
 box-shadow:0 0 15px color-mix(in srgb,var(--tone) 12%,transparent);
}

.filters button.active{
 border-color:rgba(255,138,0,.72);
 background:linear-gradient(180deg,#ff9414,#ff7c00);
 color:#140d04;

 box-shadow:0 0 18px rgba(255,138,0,.12);
}

.cst450-toolbar .search{
 width:240px;
 height:37px;

 display:flex;
 align-items:center;
 gap:8px;

 padding:0 12px;

 border:1px solid rgba(255,255,255,.075);
 border-radius:8px;

 background:#0b0b0c;
 color:#70747c;
}

.cst450-toolbar .search input{
 width:100%;

 border:0;
 outline:0;

 background:transparent;
 color:#eee;

 font:500 9px Inter;
}

.cst450-toolbar .search input::placeholder{
 color:#696d74;
}

/* =========================================================
   RANGOS
   ========================================================= */

.cst450-rank{
 --tone:#ff8a00;
 --tone-rgb:255,138,0;

 position:relative;

 margin-top:34px;
 padding:20px 15px 15px;

 border:1px solid rgba(var(--tone-rgb),.66);
 border-radius:14px;

 background:
  linear-gradient(180deg,rgba(var(--tone-rgb),.04),transparent 34%),
  #060607;

 box-shadow:
  0 0 0 1px rgba(var(--tone-rgb),.05) inset,
  0 0 25px rgba(var(--tone-rgb),.10);
}

.cst450-rank::before{
 content:"";

 position:absolute;
 left:24px;
 right:24px;
 top:-1px;

 height:2px;

 background:linear-gradient(
  90deg,
  transparent,
  var(--tone),
  transparent
 );

 filter:drop-shadow(0 0 7px var(--tone));
}

/* COLORES DE CADA RANGO */

.rank-ceo{
 --tone:var(--ceo);
 --tone-rgb:var(--ceo-rgb);
}

.rank-staff{
 --tone:var(--staff);
 --tone-rgb:var(--staff-rgb);
}

.rank-full{
 --tone:var(--full);
 --tone-rgb:var(--full-rgb);
}

.rank-admin{
 --tone:var(--admin);
 --tone-rgb:var(--admin-rgb);
}

/* -------- TITULO TIPO ----- CEO ----- -------- */

.rank-head{
 display:grid;
 grid-template-columns:1fr auto 1fr;
 align-items:center;
 gap:14px;

 margin:0 8px;
}

.rank-head .line{
 height:1px;

 background:linear-gradient(
  90deg,
  transparent,
  rgba(var(--tone-rgb),.82)
 );
}

.rank-head .line:last-child{
 background:linear-gradient(
  90deg,
  rgba(var(--tone-rgb),.82),
  transparent
 );
}

.rank-title{
 display:flex;
 align-items:center;
 justify-content:center;
 gap:9px;

 color:var(--tone);
}

.rank-title ion-icon{
 font-size:26px;

 filter:drop-shadow(
  0 0 7px rgba(var(--tone-rgb),.28)
 );
}

.rank-title h2{
 margin:0;

 color:#f3f3f4;

 font:900 25px/1 Rajdhani,Inter,sans-serif;
 letter-spacing:.03em;
 white-space:nowrap;
}

.rank-desc{
 margin:9px 0 15px;

 text-align:center;

 color:#858a92;
 font-size:9px;
}

/* =========================================================
   GRILLAS
   ========================================================= */

.grid{
 display:grid;
 gap:11px;
}

.ceo-grid{
 grid-template-columns:repeat(2,minmax(0,1fr));
}

.staff-grid,
.full-grid,
.admin-grid{
 grid-template-columns:repeat(4,minmax(0,1fr));
}

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

.cst450-card{
 --tone:#ff8a00;
 --tone-rgb:255,138,0;

 position:relative;
 min-width:0;

 display:grid;
 grid-template-columns:58px minmax(0,1fr);
 gap:12px;

 padding:14px;

 border:1px solid rgba(var(--tone-rgb),.23);
 border-radius:11px;

 background:
  linear-gradient(
   180deg,
   rgba(var(--tone-rgb),.025),
   #09090a
  );

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

.cst450-card.tone-ceo{
 --tone:var(--ceo);
 --tone-rgb:var(--ceo-rgb);
}

.cst450-card.tone-staff{
 --tone:var(--staff);
 --tone-rgb:var(--staff-rgb);
}

.cst450-card.tone-full{
 --tone:var(--full);
 --tone-rgb:var(--full-rgb);
}

.cst450-card.tone-admin{
 --tone:var(--admin);
 --tone-rgb:var(--admin-rgb);
}

.cst450-card::before{
 content:"";

 position:absolute;
 left:0;
 top:14px;
 bottom:14px;

 width:2px;

 border-radius:2px;

 background:var(--tone);

 box-shadow:
  0 0 10px rgba(var(--tone-rgb),.35);
}

.cst450-card:hover{
 transform:translateY(-2px);

 border-color:rgba(var(--tone-rgb),.52);

 box-shadow:
  0 0 22px rgba(var(--tone-rgb),.085);
}

/* AVATAR */

.avatar{
 position:relative;

 width:58px;
 height:58px;

 border:1px solid rgba(var(--tone-rgb),.62);
 border-radius:50%;

 background:#080809;

 box-shadow:
  0 0 14px rgba(var(--tone-rgb),.06);
}

.avatar img{
 width:100%;
 height:100%;

 display:block;

 object-fit:cover;
 border-radius:50%;
}

.avatar>span{
 width:100%;
 height:100%;

 display:grid;
 place-items:center;

 color:var(--tone);

 font:900 22px Rajdhani;
}

.avatar>i{
 position:absolute;
 right:0;
 bottom:0;

 width:10px;
 height:10px;

 border:2px solid #080809;
 border-radius:50%;

 background:#555;
}

.avatar>i.online{
 background:var(--green);

 box-shadow:
  0 0 7px rgba(50,223,143,.4);
}

/* INFO */

.copy{
 min-width:0;
}

.meta{
 display:flex;
 align-items:center;
 justify-content:space-between;
 gap:6px;

 margin-bottom:4px;
}

.role{
 display:inline-flex;
 align-items:center;
 gap:4px;

 min-height:19px;
 padding:0 7px;

 border:1px solid rgba(var(--tone-rgb),.30);
 border-radius:6px;

 background:rgba(var(--tone-rgb),.055);

 color:var(--tone);

 font-size:6px;
 font-weight:900;
}

.presence{
 display:inline-flex;
 align-items:center;
 gap:4px;

 color:#666a71;

 font-size:5px;
 font-weight:900;
}

.presence i{
 width:5px;
 height:5px;

 border-radius:50%;

 background:#555;
}

.presence.online{
 color:#72d3a6;
}

.presence.online i{
 background:var(--green);
}

.cst450-card h3{
 display:flex;
 align-items:center;
 gap:4px;

 margin:0;

 color:#f2f2f3;

 font:900 18px/1 Rajdhani;
 overflow-wrap:anywhere;
}

.cst450-card h3 ion-icon{
 color:var(--tone);
 font-size:10px;
}

.cst450-card small{
 display:flex;
 align-items:center;
 gap:4px;

 margin-top:5px;

 color:#737780;

 font-size:6px;
 font-weight:800;
}

.cst450-card small ion-icon{
 color:var(--tone);
}

.cst450-card p{
 margin:8px 0 0;

 color:#8a8e96;

 font-size:8px;
 line-height:1.42;
}

/* BOTONES */

.actions{
 grid-column:1/3;

 display:flex;
 justify-content:flex-end;
 gap:6px;

 margin-top:2px;
 padding-top:9px;

 border-top:1px solid rgba(255,255,255,.05);
}

.actions a{
 height:28px;
 padding:0 9px;

 display:inline-flex;
 align-items:center;
 gap:5px;

 border:1px solid rgba(255,255,255,.08);
 border-radius:7px;

 background:#09090a;
 color:#d4d6d9;

 text-decoration:none;

 font-size:6px;
 font-weight:900;
}

.actions a.message{
 border-color:rgba(var(--tone-rgb),.36);

 background:rgba(var(--tone-rgb),.09);
 color:var(--tone);
}

/* =========================================================
   BUSQUEDA VACIA
   ========================================================= */

.cst450-empty{
 margin-top:30px;
 padding:28px;

 display:flex;
 align-items:center;
 justify-content:center;
 gap:10px;

 border:1px dashed rgba(255,255,255,.10);
 border-radius:13px;

 color:#777;
}

.cst450-empty ion-icon{
 font-size:25px;
 color:#ff8a00;
}

.cst450-empty b{
 display:block;
 color:#eee;
}

.cst450-empty span{
 display:block;
 margin-top:4px;
 font-size:9px;
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.js-cst450 [data-reveal]{
 opacity:0;
 transform:translateY(12px);
}

.js-cst450 [data-reveal].visible{
 opacity:1;
 transform:none;

 transition:
  opacity .42s ease,
  transform .42s ease;
}

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

@media(max-width:1050px){

 .staff-grid,
 .full-grid,
 .admin-grid{
  grid-template-columns:repeat(3,minmax(0,1fr));
 }

}

@media(max-width:800px){

 .cst450-shell{
  width:min(100% - 24px,1320px);
 }

 .cst450-toolbar{
  flex-direction:column;
  align-items:stretch;
 }

 .cst450-toolbar .search{
  width:100%;
 }

 .ceo-grid{
  grid-template-columns:1fr;
 }

 .staff-grid,
 .full-grid,
 .admin-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
 }

}

@media(max-width:560px){

 .cst450-shell{
  width:100%;
  padding:14px 12px 54px;
 }

 .cst450-hero{
  min-height:220px;
  padding:28px 18px;
  border-radius:14px;
 }

 .hero-copy h1{
  font-size:50px;
 }

 .hero-copy p{
  font-size:10px;
 }

 .filters{
  flex-wrap:nowrap;
  overflow-x:auto;

  scrollbar-width:none;
 }

 .filters::-webkit-scrollbar{
  display:none;
 }

 .filters button{
  flex:0 0 auto;
 }

 .rank-head{
  gap:8px;
 }

 .rank-title h2{
  font-size:19px;
 }

 .rank-title ion-icon{
  font-size:20px;
 }

 .rank-desc{
  padding:0 10px;
  font-size:8px;
 }

 .cst450-rank{
  padding:15px 10px 10px;
 }

 .staff-grid,
 .full-grid,
 .admin-grid{
  grid-template-columns:1fr;
 }

}

@media(prefers-reduced-motion:reduce){

 html{
  scroll-behavior:auto;
 }

 .js-cst450 [data-reveal]{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
 }

 .cst450-card{
  transition:none!important;
 }

}


/* =========================================================
   V460 · HERO MÁS CENTRADO
   ========================================================= */
.cst450-hero{min-height:260px}
.cst450-hero .hero-copy{width:min(820px,100%);margin-inline:auto;text-align:center}
.cst450-hero .hero-copy .eyebrow{display:inline-flex;width:auto;margin-inline:auto}
.cst450-hero .hero-copy p{max-width:720px;margin-inline:auto}

/* =========================================================
   V460 · DRAWER MÓVIL CST DESDE LA DERECHA
   ========================================================= */
.cst460-mobile-backdrop,.cst460-mobile-drawer,.cst460-mobile-menu-btn{display:none}

@media (max-width:760px){
 html.cst460-menu-open,html.cst460-menu-open body{overflow:hidden!important}
 #cst325MobileDrawer,.cst325-mobile-drawer,#cst325MobileBackdrop,.cst325-mobile-backdrop,#cst330MobileDrawer,.cst330-mobile-drawer{display:none!important;visibility:hidden!important;pointer-events:none!important}
 .cst320-nav-row{display:none!important}
 .cst320-top{display:block!important}
 .cst320-top-inner{min-height:76px!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important}
 .cst320-brand{min-width:0!important}
 .cst320-brand .copy small{display:none!important}
 #cst320MenuBtn,.cst320-menu-btn{display:none!important}
 .cst460-mobile-menu-btn{flex:0 0 46px;width:46px;height:46px;display:grid!important;place-items:center;padding:0;border:1px solid rgba(255,255,255,.12);border-radius:12px;background:#0b0b0c;color:#f2f2f2;font-size:25px;cursor:pointer;z-index:1004}
 .cst460-mobile-menu-btn:hover{border-color:rgba(255,138,0,.42);color:#ff8a00}
 .cst460-mobile-backdrop{position:fixed;inset:0;z-index:9998;display:block;opacity:0;visibility:hidden;pointer-events:none;background:rgba(0,0,0,.68);backdrop-filter:blur(4px);transition:opacity .22s ease,visibility .22s ease}
 .cst460-mobile-backdrop.is-open{opacity:1;visibility:visible;pointer-events:auto}
 .cst460-mobile-drawer{--drawer-w:min(86vw,340px);position:fixed;top:0;right:0;bottom:0;z-index:9999;width:var(--drawer-w);display:flex;flex-direction:column;transform:translateX(103%);background:radial-gradient(circle at 100% 0%,rgba(255,138,0,.08),transparent 27%),linear-gradient(180deg,#080809,#050506);border-left:1px solid rgba(255,138,0,.20);box-shadow:-24px 0 70px rgba(0,0,0,.55);transition:transform .27s cubic-bezier(.2,.8,.2,1);overflow-y:auto;overscroll-behavior:contain}
 .cst460-mobile-drawer.is-open{transform:translateX(0)}
 .cst460-drawer-head{min-height:84px;padding:16px 16px 14px;display:flex;align-items:center;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(255,255,255,.07)}
 .cst460-drawer-brand{min-width:0;display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none}
 .cst460-drawer-brand img{width:48px;height:48px;object-fit:contain}
 .cst460-drawer-brand span{min-width:0;display:flex;flex-direction:column}
 .cst460-drawer-brand b{color:#fff;font:900 15px/1 Inter,Arial,sans-serif;white-space:nowrap}
 .cst460-drawer-brand small{margin-top:5px;color:#676b73;font-size:6px;font-weight:800;letter-spacing:.13em;white-space:nowrap}
 .cst460-drawer-close{flex:0 0 42px;width:42px;height:42px;display:grid;place-items:center;border:1px solid rgba(255,138,0,.23);border-radius:11px;background:#0d0d0e;color:#ff8a00;font-size:22px;cursor:pointer}
 .cst460-drawer-body{padding:14px 14px 20px}
 .cst460-drawer-label{display:block;padding:5px 8px 9px;color:#62666e;font-size:6px;font-weight:900;letter-spacing:.18em}
 .cst460-drawer-nav{display:grid;gap:5px}
 .cst460-drawer-nav>a{min-height:48px;padding:0 13px;display:flex;align-items:center;gap:11px;border:1px solid transparent;border-radius:10px;background:transparent;color:#d8dade;text-decoration:none;font-size:10px;font-weight:900}
 .cst460-drawer-nav>a ion-icon{width:19px;flex:0 0 19px;color:#8b8f96;font-size:19px}
 .cst460-drawer-nav>a.active{border-color:rgba(255,138,0,.36);background:linear-gradient(90deg,rgba(255,138,0,.12),rgba(255,138,0,.035));color:#ff9a23;box-shadow:inset 3px 0 0 #ff8a00}
 .cst460-drawer-nav>a.active ion-icon{color:#ff8a00}
 .cst460-drawer-nav>a:hover{background:rgba(255,255,255,.035);color:#fff}
 .cst460-drawer-panels{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07)}
 .cst460-panel-list{display:grid;gap:6px}
 .cst460-panel-list>a{min-height:48px;padding:0 13px;display:flex;align-items:center;gap:11px;border:1px solid rgba(255,138,0,.13);border-radius:10px;background:rgba(255,138,0,.035);color:#e6e7e9;text-decoration:none;font-size:9px;font-weight:900}
 .cst460-panel-list>a ion-icon{color:#ff8a00;font-size:18px}
 .cst460-panel-list>a small{margin-left:auto;color:#686c74;font-size:6px;font-weight:700;text-align:right}
 .cst460-drawer-account{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.07);display:grid;gap:7px}
 .cst460-drawer-account>a{min-height:44px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid rgba(255,255,255,.09);border-radius:9px;background:#0b0b0c;color:#e5e5e6;text-decoration:none;font-size:8px;font-weight:900}
 .cst460-drawer-account>a.primary{border-color:#ff8a00;background:linear-gradient(180deg,#ff9516,#ff7d00);color:#140d04}
 .cst460-drawer-account>a.panel{border-color:rgba(255,138,0,.24);color:#ff9825}
 .cst450-hero{min-height:235px!important;padding:30px 18px!important}
 .cst450-hero .hero-copy{width:100%}
 .cst450-hero .hero-copy h1{font-size:50px}
 .cst450-toolbar{position:relative}
 .cst450-rank{border-radius:13px}
}

@media (max-width:380px){
 .cst460-mobile-drawer{--drawer-w:91vw}
 .cst460-drawer-brand small{display:none}
}