/* ============================================================================
   SURATRADER - Tema oscuro estilo SuraBit (negro + amarillo dorado)
   Requiere Bootstrap 5.3
   ========================================================================== */
:root{
  --st-bg:#050506;
  --st-bg-soft:#0b0b0d;
  --st-panel:#101013;
  --st-card:#141419;
  --st-card-2:#191920;
  --st-border:#23232b;
  --st-border-soft:#1b1b22;
  --st-yellow:#f2de4a;
  --st-yellow-strong:#ffe95e;
  --st-yellow-dark:#c7b52f;
  --st-yellow-dim:rgba(242,222,74,.12);
  --st-yellow-glow:rgba(242,222,74,.18);
  --st-text:#f5f6f7;
  --st-muted:#8b8f98;
  --st-muted-2:#5f636d;
  --st-green:#2fd575;
  --st-green-dim:rgba(47,213,117,.12);
  --st-red:#ff5b5b;
  --st-red-dim:rgba(255,91,91,.12);
  --st-blue:#59b7ff;
  --st-radius:18px;
  --st-radius-sm:12px;
  --st-font:'Montserrat','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
}

html,body{height:100%}
body{
  background:var(--st-bg);
  color:var(--st-text);
  font-family:var(--st-font);
  font-size:.925rem;
  -webkit-font-smoothing:antialiased;
}
body.st-app{
  background:
    radial-gradient(1200px 500px at 85% -10%, rgba(242,222,74,.07), transparent 60%),
    radial-gradient(900px 420px at -10% 110%, rgba(242,222,74,.045), transparent 60%),
    var(--st-bg);
}
a{color:var(--st-yellow);text-decoration:none}
a:hover{color:var(--st-yellow-strong)}
::selection{background:var(--st-yellow);color:#111}

/* scrollbar */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:var(--st-bg-soft)}
::-webkit-scrollbar-thumb{background:#26262e;border-radius:8px;border:2px solid var(--st-bg-soft)}
::-webkit-scrollbar-thumb:hover{background:#33333d}

/* ============================= NAVBAR ==================================== */
.st-navbar{
  background:rgba(8,8,10,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--st-border-soft);
  padding:.55rem 1rem;
  position:sticky;top:0;z-index:1030;
}
.st-navbar .brand{display:flex;align-items:center;gap:.6rem}
.st-navbar .brand img{height:38px}
.st-navbar .brand .brand-text{font-weight:800;font-size:1.25rem;letter-spacing:.5px}
.st-navbar .brand .brand-text b{color:#fff}
.st-navbar .brand .brand-text span{color:var(--st-yellow)}
.st-navbar .brand small{display:block;color:var(--st-muted);font-size:.62rem;letter-spacing:4px;font-weight:600;margin-top:-3px}
.st-user-chip{
  display:flex;align-items:center;gap:.55rem;
  background:var(--st-card);border:1px solid var(--st-border);
  padding:.3rem .8rem .3rem .4rem;border-radius:999px;
}
.st-user-chip .avatar{
  width:32px;height:32px;border-radius:50%;
  background:var(--st-yellow);color:#111;font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:.85rem;
}
.st-user-chip .role{font-size:.66rem;color:var(--st-muted);letter-spacing:1px;text-transform:uppercase}
.st-user-chip .name{font-weight:600;font-size:.83rem;line-height:1.05}

/* ====================== BANNER MODO VISTA CLIENTE ======================== */
.st-impersonando{
  position:sticky;top:59px;z-index:1029;
  background:linear-gradient(90deg,#3a3410,#2b2708);
  border-bottom:1px solid rgba(242,222,74,.5);
  color:var(--st-yellow);font-size:.82rem;font-weight:600;
  padding:.5rem 1rem;text-align:center;
}
.st-impersonando .btn-volver-admin{
  background:var(--st-yellow);color:#141414;font-weight:800;font-size:.78rem;
  border-radius:999px;padding:.3rem .95rem;text-decoration:none;white-space:nowrap;
}
.st-impersonando .btn-volver-admin:hover{background:var(--st-yellow-strong);color:#111}

/* ============================= MENU LATERAL ============================== */
.st-layout{display:flex;min-height:calc(100vh - 59px)}
.st-sidebar{
  width:238px;flex:0 0 238px;
  background:var(--st-bg-soft);
  border-right:1px solid var(--st-border-soft);
  padding:1.1rem .8rem;
}
.st-sidebar .section{color:var(--st-muted-2);font-size:.64rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;margin:1.1rem .6rem .45rem}
.st-sidebar .nav-link{
  display:flex;align-items:center;gap:.7rem;
  color:#c9ccd2;font-weight:500;font-size:.875rem;
  border-radius:12px;padding:.58rem .8rem;margin-bottom:2px;
  border:1px solid transparent;
}
.st-sidebar .nav-link i{width:20px;text-align:center;color:var(--st-muted);font-size:.95rem}
.st-sidebar .nav-link:hover{background:var(--st-card);color:#fff}
.st-sidebar .nav-link.active{
  background:linear-gradient(90deg,var(--st-yellow-dim),transparent 85%);
  border-color:rgba(242,222,74,.25);
  color:var(--st-yellow);font-weight:600;
}
.st-sidebar .nav-link.active i{color:var(--st-yellow)}
.st-main{flex:1;min-width:0;padding:1.5rem 1.7rem 3rem}

@media (max-width: 991.98px){
  .st-sidebar{position:fixed;left:-260px;top:59px;bottom:0;z-index:1040;transition:left .25s ease}
  .st-sidebar.open{left:0;box-shadow:0 0 60px rgba(0,0,0,.6)}
  .st-main{padding:1rem}
}

/* --- menu colapsable en PC: la hamburguesa lo esconde/fija y, escondido, se
   asoma solo acercando el mouse al borde izquierdo (franja invisible). El
   estado se guarda por usuario. En el celular sigue el overlay de arriba. --- */
.st-borde-menu{display:none}
@media (min-width: 992px){
  body.sidebar-suelta .st-sidebar{
    position:fixed;left:-260px;top:59px;bottom:0;z-index:1040;
    transition:left .22s ease;overflow-y:auto;
  }
  body.sidebar-suelta .st-sidebar.open{left:0;box-shadow:0 0 60px rgba(0,0,0,.6)}
  body.sidebar-suelta .st-borde-menu{
    display:block;position:fixed;left:0;top:59px;bottom:0;width:12px;z-index:1039;
  }
}

/* ============================= TARJETAS ================================== */
.st-card{
  background:linear-gradient(180deg,var(--st-card),var(--st-panel));
  border:1px solid var(--st-border);
  border-radius:var(--st-radius);
  padding:1.25rem 1.35rem;
}
.st-card .card-title{font-size:.72rem;letter-spacing:2px;color:var(--st-muted);font-weight:700;text-transform:uppercase;margin-bottom:.65rem}
.st-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(620px 260px at 92% -30%, var(--st-yellow-glow), transparent 65%),
    linear-gradient(180deg,#121216,#0c0c0f);
  border:1px solid var(--st-border);
  border-radius:22px;
  padding:1.7rem 1.9rem;
}
.st-hero .hero-label{color:var(--st-muted);font-size:.85rem}
.st-hero .hero-value{font-size:2.6rem;font-weight:800;letter-spacing:.5px}
.st-hero .hero-value small{font-size:1.2rem;color:var(--st-muted)}
.st-kpi{display:flex;flex-direction:column;gap:.15rem}
.st-kpi .kpi-label{color:var(--st-muted);font-size:.74rem;letter-spacing:1.4px;text-transform:uppercase;font-weight:600}
.st-kpi .kpi-value{font-size:1.45rem;font-weight:800}
.st-kpi .kpi-sub{font-size:.76rem;color:var(--st-muted)}
.st-kpi .kpi-icon{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--st-yellow-dim);color:var(--st-yellow);font-size:1.1rem;margin-bottom:.55rem;
}
.text-gain{color:var(--st-green)!important}
.text-loss{color:var(--st-red)!important}
.text-yellow{color:var(--st-yellow)!important}
.text-muted-2{color:var(--st-muted)!important}

/* ============================= BOTONES =================================== */
.btn-st{
  background:var(--st-yellow);color:#141414;font-weight:700;
  border:none;border-radius:12px;padding:.6rem 1.25rem;
}
.btn-st:hover{background:var(--st-yellow-strong);color:#111;transform:translateY(-1px)}
.btn-st:disabled{background:#6b6430;color:#222}
.btn-st-outline{
  background:transparent;color:var(--st-yellow);
  border:1px solid rgba(242,222,74,.45);border-radius:12px;padding:.6rem 1.25rem;font-weight:600;
}
.btn-st-outline:hover{background:var(--st-yellow-dim);color:var(--st-yellow-strong);border-color:var(--st-yellow)}
.btn-st-dark{
  background:var(--st-card-2);color:#e7e8ea;border:1px solid var(--st-border);
  border-radius:12px;padding:.6rem 1.25rem;font-weight:600;
}
.btn-st-dark:hover{background:#20202a;color:#fff;border-color:#2e2e3a}
.btn-st-danger{background:var(--st-red-dim);color:var(--st-red);border:1px solid rgba(255,91,91,.35);border-radius:12px;font-weight:600}
.btn-st-danger:hover{background:rgba(255,91,91,.22);color:#ff8080}
.st-action{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  color:#d9dadd;font-size:.8rem;font-weight:600;border:none;background:none;
}
.st-action .ico{
  width:58px;height:58px;border-radius:50%;
  background:var(--st-yellow);color:#141414;font-size:1.25rem;
  display:flex;align-items:center;justify-content:center;
  transition:transform .15s ease, box-shadow .15s ease;
}
.st-action:hover .ico{transform:translateY(-3px);box-shadow:0 8px 24px rgba(242,222,74,.35)}
.st-action:hover{color:#fff}

/* ============================= BADGES / PILLS ============================ */
.st-pill{
  display:inline-flex;align-items:center;gap:.35rem;
  background:var(--st-card-2);border:1px solid var(--st-border);
  color:#cfd1d6;border-radius:999px;padding:.22rem .7rem;font-size:.74rem;font-weight:600;
}
.st-pill.buy,.st-pill.ok{background:var(--st-green-dim);color:var(--st-green);border-color:rgba(47,213,117,.3)}
.st-pill.sell,.st-pill.bad{background:var(--st-red-dim);color:var(--st-red);border-color:rgba(255,91,91,.3)}
.st-pill.warn{background:var(--st-yellow-dim);color:var(--st-yellow);border-color:rgba(242,222,74,.3)}
.st-pill.info{background:rgba(89,183,255,.1);color:var(--st-blue);border-color:rgba(89,183,255,.3)}

/* ============================= TABLAS ==================================== */
.st-table{width:100%;color:var(--st-text);font-size:.86rem;--bs-table-bg:transparent}
.st-table thead th{
  color:var(--st-muted);font-size:.68rem;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;
  border-bottom:1px solid var(--st-border)!important;padding:.65rem .75rem;background:transparent;white-space:nowrap;
}
.st-table tbody td{
  border-bottom:1px solid var(--st-border-soft);padding:.72rem .75rem;vertical-align:middle;background:transparent;color:var(--st-text);
}
.st-table tbody tr:hover td{background:rgba(255,255,255,.02)}
.st-table .mono{font-variant-numeric:tabular-nums;font-family:Consolas,'Roboto Mono',monospace;font-size:.83rem}
.st-coin{display:flex;align-items:center;gap:.65rem}
.st-coin .coin-ico{
  width:34px;height:34px;border-radius:50%;flex:0 0 34px;
  display:flex;align-items:center;justify-content:center;
  font-weight:800;font-size:.8rem;color:#111;background:var(--st-yellow);
}
.st-coin .coin-name{font-weight:700}
.st-coin small{display:block;color:var(--st-muted);font-weight:500}

/* ============================= FORMULARIOS =============================== */
.form-control.st-input,.form-select.st-input{
  background:var(--st-bg-soft);border:1px solid var(--st-border);color:var(--st-text);
  border-radius:12px;padding:.68rem .9rem;font-size:.9rem;
}
.form-control.st-input:focus,.form-select.st-input:focus{
  background:var(--st-bg-soft);border-color:var(--st-yellow);color:#fff;
  box-shadow:0 0 0 .2rem rgba(242,222,74,.12);
}
.form-control.st-input::placeholder{color:var(--st-muted-2)}
.form-label{color:#c6c8cd;font-size:.8rem;font-weight:600;letter-spacing:.4px}
.form-text{color:var(--st-muted-2)}
.st-input-group .input-group-text{
  background:var(--st-card-2);border:1px solid var(--st-border);color:var(--st-muted);border-radius:12px 0 0 12px;
}
.form-check-input{background-color:var(--st-card-2);border-color:var(--st-border)}
.form-check-input:checked{background-color:var(--st-yellow);border-color:var(--st-yellow)}

/* PIN input */
.st-pin{display:flex;gap:.6rem;justify-content:center}
.st-pin input{
  width:56px;height:64px;text-align:center;font-size:1.6rem;font-weight:800;
  background:var(--st-bg-soft);border:1px solid var(--st-border);color:var(--st-yellow);
  border-radius:14px;caret-color:var(--st-yellow);
}
.st-pin input:focus{outline:none;border-color:var(--st-yellow);box-shadow:0 0 0 .2rem rgba(242,222,74,.12)}
/* variante compacta (formularios con dos PIN, como el registro) */
.st-pin.compacto input{width:46px;height:54px;font-size:1.25rem;border-radius:12px}
/* el ultimo digito cargado deja el grupo marcado en verde */
.st-pin.completo input{border-color:rgba(47,213,117,.5)}
/* faltan digitos al enviar: parpadeo rojo */
.st-pin.error input{border-color:var(--st-red);animation:st-pin-tiembla .3s}
@keyframes st-pin-tiembla{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-4px)}
  75%{transform:translateX(4px)}
}
@media (max-width: 400px){
  .st-pin input{width:48px;height:56px;font-size:1.35rem}
  .st-pin.compacto input{width:42px;height:50px}
}

/* ============================= LOGIN ===================================== */
.st-auth{
  min-height:100vh;display:flex;align-items:center;justify-content:center;padding:2rem 1rem;
  background:
    radial-gradient(900px 460px at 80% -10%, rgba(242,222,74,.1), transparent 60%),
    radial-gradient(700px 380px at 10% 110%, rgba(242,222,74,.06), transparent 60%),
    var(--st-bg);
}
.st-auth-card{
  width:100%;max-width:430px;
  background:linear-gradient(180deg,#131318,#0c0c0f);
  border:1px solid var(--st-border);border-radius:24px;
  padding:2.3rem 2.2rem;
  box-shadow:0 30px 80px rgba(0,0,0,.55);
}
.st-auth-card .logo{display:flex;justify-content:center;margin-bottom:1.4rem}
.st-auth-card .logo img{height:64px}
.st-auth-title{font-weight:800;font-size:1.35rem;text-align:center}
.st-auth-sub{color:var(--st-muted);text-align:center;font-size:.85rem;margin-bottom:1.6rem}

/* ============================= MODALES / TOAST =========================== */
.modal-content.st-modal{
  background:linear-gradient(180deg,#15151b,#0d0d10);
  border:1px solid var(--st-border);border-radius:20px;color:var(--st-text);
}
.st-modal .modal-header{border-bottom:1px solid var(--st-border-soft)}
.st-modal .modal-footer{border-top:1px solid var(--st-border-soft)}
.st-modal .btn-close{filter:invert(1) grayscale(1)}
.st-toast{
  background:#15151b;border:1px solid var(--st-border);color:var(--st-text);
  border-left:4px solid var(--st-yellow);border-radius:12px;
}
.st-toast.ok{border-left-color:var(--st-green)}
.st-toast.error{border-left-color:var(--st-red)}

/* ============================= GRAFICAS ================================== */
.st-chart-box{position:relative;width:100%}
.st-legend{display:flex;flex-wrap:wrap;gap:1rem;font-size:.78rem;color:var(--st-muted)}
.st-legend .dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:.35rem;vertical-align:1px}

/* ============================= UTILIDADES ================================ */
.st-divider{border-top:1px solid var(--st-border-soft);margin:1.2rem 0}
.st-empty{
  text-align:center;color:var(--st-muted);padding:2.6rem 1rem;
}
.st-empty i{font-size:2.2rem;color:var(--st-muted-2);display:block;margin-bottom:.7rem}
.cursor-pointer{cursor:pointer}
.st-copy{cursor:pointer;color:var(--st-yellow)}
.st-copy:hover{color:var(--st-yellow-strong)}
.st-id-chip{
  display:inline-flex;align-items:center;gap:.5rem;
  background:var(--st-bg-soft);border:1px solid var(--st-border);
  border-radius:12px;padding:.4rem .9rem;font-size:.9rem;
}
.st-id-chip b{color:var(--st-yellow);letter-spacing:2px}
.st-loading{display:flex;align-items:center;justify-content:center;gap:.7rem;color:var(--st-muted);padding:2.2rem}
.st-loading .spinner-border{color:var(--st-yellow)}

/* Tarjetas de membresia (vista inversores) */
.st-tier{
  position:relative;overflow:hidden;border-radius:20px;border:1px solid var(--st-border);
  background:linear-gradient(160deg,#17171d, #0d0d10 70%);
  padding:1.5rem;height:100%;transition:transform .18s ease, border-color .18s ease;
}
.st-tier:hover{transform:translateY(-4px);border-color:rgba(242,222,74,.4)}
.st-tier .tier-name{font-weight:800;letter-spacing:1px;font-size:1.05rem}
.st-tier .tier-price{font-size:2rem;font-weight:800;color:var(--st-yellow)}
.st-tier .tier-price small{font-size:.9rem;color:var(--st-muted)}
.st-tier ul{list-style:none;margin:.9rem 0 0;padding:0}
.st-tier ul li{padding:.28rem 0;color:#c9ccd2;font-size:.83rem}
.st-tier ul li i{color:var(--st-yellow);margin-right:.5rem}
.st-tier.featured{border-color:rgba(242,222,74,.55);background:linear-gradient(160deg,#1d1c14,#0d0d10 75%)}
.st-tier .tier-flag{
  position:absolute;top:14px;right:-34px;transform:rotate(38deg);
  background:var(--st-yellow);color:#111;font-size:.66rem;font-weight:800;letter-spacing:1px;
  padding:.28rem 2.6rem;
}

/* Timeline de operaciones */
.st-timeline{position:relative;padding-left:1.6rem}
.st-timeline:before{content:'';position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--st-border)}
.st-timeline .titem{position:relative;padding:.45rem 0 .9rem}
.st-timeline .titem:before{
  content:'';position:absolute;left:-1.6rem;top:.75rem;width:16px;height:16px;border-radius:50%;
  background:var(--st-card);border:3px solid var(--st-yellow);
}
.st-timeline .titem.sell:before{border-color:var(--st-red)}
.st-timeline .titem.buy:before{border-color:var(--st-green)}

/* impresion / correo preview */
.st-mail-preview{background:#f4f4f6;border-radius:14px;padding:1rem;max-height:640px;overflow:auto}