/* ============================
   BOSS USERS 
   ============================ */

/* Botón + (header) */
.bossPlusHeader{
  width:44px;height:38px;padding:0;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  font-weight:900;font-size:18px;line-height:1;
  cursor:pointer;user-select:none;
}

/* Fallback + fijo */
.bossPlusBtn{
  position:fixed;top:14px;right:14px;z-index:9999;
  width:44px;height:44px;border-radius:14px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(10,20,40,.78);
  backdrop-filter:blur(10px);
  color:#fff;font-size:22px;line-height:1;font-weight:500;
  cursor:pointer;
  box-shadow:0 16px 60px rgba(0,0,0,.55);
  user-select:none;
}
.bossPlusBtn:hover{transform:translateY(-1px);}
.bossPlusBtn:active{transform:translateY(0);}
.bossPlusBtn:focus{outline:2px solid rgba(59,130,246,.6);outline-offset:2px;}

/* Modal backdrop */
.bossModalBack{
  position:fixed;inset:0;z-index:10000;
  background:rgba(0,0,0,.6);
  display:none;align-items:center;justify-content:center;
  padding:18px;
}

/* Modal base */
.bossModal{
  width:min(520px,100%);
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(8,14,26,.92);
  backdrop-filter:blur(12px);
  color:#fff;
  box-shadow:0 20px 80px rgba(0,0,0,.65);
  overflow:hidden;
}

/* Header modal (solo modal principal) */
.bossModalHeader{
  padding:14px 16px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.bossModalHeader::before{content:"";}
.bossModalHeader b{
  font-size:18px;font-weight:600;
  justify-self:center;text-align:center;
}
.bossModalClose{
  justify-self:end;
  background:transparent;border:0;
  color:rgba(255,255,255,.85);
  font-size:18px;cursor:pointer;
  padding:6px 10px;border-radius:10px;
}
.bossModalClose:hover{background:rgba(255,255,255,.08);}

.bossModalBody{padding:16px;}
.bossGrid{display:grid;gap:12px;}

/* Fields */
.bossField{position:relative;}
.bossField label{
  display:block;text-align:left;padding-left:6px;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.75);
  margin-bottom:6px;
}
.bossField input{
  width:100%;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  color:#fff;outline:none;
  font-size:14px;font-weight:400;text-align:left;
}
.bossField input:focus{border-color:rgba(59,130,246,.65);}

/* Hint (editar contraseña) */
.bossHint{
  font-size:15px;
  line-height:1.35;
  color:rgba(255,255,255,.70);
  margin:-2px 0 10px;
  padding-left:7px;
}

/* Password: espacio para el ojito dentro del input */
#bossUserPass{padding-right:46px;}

/* Ojo (SVG) */
.bossPassToggle{
  position:absolute;
  right:12px;
  width:40px;height:40px;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;
  border:0;
  padding:0;
  cursor:pointer;
  opacity:.92;
}
.bossPassToggle:hover{opacity:1;}
.bossPassToggle svg{
  width:22px;height:22px;
  fill:none;
  stroke:rgba(255,255,255,.92);
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.bossPassToggle:focus,
.bossPassToggle:focus-visible{
  outline:none !important;
  box-shadow:none !important;
}
.bossPassToggle:active{transform:translateY(0);}

/* Estado mostrando */
.bossPassToggle.isOn{opacity:1;}
.bossPassToggle.isOn svg{stroke:rgba(59,130,246,1);}
.bossPassToggle.isOn::after{
  content:"";
  position:absolute;
  width:18px;height:2px;
  background:rgba(59,130,246,1);
  transform:rotate(-35deg);
  border-radius:2px;
}

/* Tabs */
.bossTabs{
  display:flex;gap:10px;
  padding:12px 16px 0;
  justify-content:center;
}
.bossTab{
  width:140px;height:40px;padding:0 12px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:#fff;cursor:pointer;
  font-weight:500;font-size:14px;
}
.bossTab.isActive{
  background:rgba(59,130,246,.25);
  border-color:rgba(59,130,246,.55);
}

/* Validación */
.bossMsg{
  margin-top:12px;
  font-size:13px;
  padding:10px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  color:rgba(255,255,255,.92);
  display:none;
  white-space:pre-wrap;
  text-align:center;
}

/* Actions */
.bossActions{
  display:flex;gap:10px;justify-content:center;
  padding:16px 16px;
  border-top:0;
}

/* Botones */
.bossBtn{
  width:140px;height:40px;padding:0 14px;border-radius:12px;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
  color:#fff;cursor:pointer;
  font-weight:500;font-size:14px;
}
.bossBtnPrimary{
  background:rgba(59,130,246,.28);
  border-color:rgba(59,130,246,.55);
}
.bossBtnPrimary:hover{
  background:rgba(59,130,246,.34);
  border-color:rgba(59,130,246,.65);
}
.bossBtn:disabled{opacity:.55;cursor:not-allowed;}

.bossBtnSmall{width:96px;height:34px;}
.bossBtnDanger{
  border:1px solid rgba(239,68,68,.35);
  background:rgba(239,68,68,.12);
}
.bossBtnDanger:hover{background:rgba(239,68,68,.18);}

/* Header lista */
.bossListHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.bossListHeader .muted{
  padding-left:7px;
  flex:1;
}

/* Reload icon */
.bossReloadIcon{
  width:30px;height:30px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:transparent;
  color:#fff;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:18px;line-height:1;font-weight:700;
}
.bossReloadIcon:hover{background:rgba(255,255,255,.12);}

/* Tabla wrapper */
.bossTableWrap{
  max-height:52vh;
  overflow:auto;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(8,14,26,.98);

  /* Scrollbar Firefox */
  scrollbar-width:thin;
  scrollbar-color:rgba(59,130,246,.45) rgba(255,255,255,.05);
}

/* Scrollbar acorde al tema (Chrome/Edge/Safari) */
.bossTableWrap::-webkit-scrollbar{width:10px;}
.bossTableWrap::-webkit-scrollbar-track{
  background:rgba(255,255,255,.04);
  border-radius:999px;
}
.bossTableWrap::-webkit-scrollbar-thumb{
  background:rgba(59,130,246,.35);
  border:2px solid rgba(8,14,26,.98);
  border-radius:999px;
}
.bossTableWrap::-webkit-scrollbar-thumb:hover{
  background:rgba(59,130,246,.55);
}

/* Tabla base */
.bossTable{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
}
.bossTable thead th:first-child{border-top-left-radius:14px;}
.bossTable thead th:last-child{border-top-right-radius:14px;}
.bossTable th,
.bossTable td{
  padding:10px 12px;
  border-bottom:1px solid rgba(255,255,255,.08);
  text-align:left;
  font-size:14px;
}
.bossTable th{
  position:sticky;top:0;
  background:rgba(8,14,26,.98);
  backdrop-filter:blur(10px);
  z-index:1;
}

/* Selección */
.bossTable tbody tr{cursor:pointer;}
.bossTable tbody tr:hover{background:rgba(255,255,255,.04);}
.bossTable tbody tr.isSelected{
  background:rgba(59,130,246,.14);
  outline:1px solid rgba(59,130,246,.35);
}

/* Tabla usuarios */
.bossUsersTable{table-layout:fixed;width:100%;}
.bossUsersTable .colSelect{width:44px;}
.bossUsersTable .colName{width:26%;}
.bossUsersTable .colEmail{width:44%;}
.bossUsersTable .colCreated{width:30%;}

.bossUsersTable th,
.bossUsersTable td{border-right:1px solid rgba(255,255,255,.08);}
.bossUsersTable th:last-child,
.bossUsersTable td:last-child{border-right:0;}

.bossUsersTable td,
.bossUsersTable th{
  white-space:normal;
  overflow:visible;
  text-overflow:clip;
  word-break:break-word;
}
.bossUsersTable td:nth-child(3){word-break:break-all;}

.bossUsersTable td.bossTdSelect,
.bossUsersTable th.bossTdSelect{
  padding:0 !important;
  text-align:center;
  vertical-align:middle;
  list-style:none;
}
.bossUsersTable td.bossTdSelect::before,
.bossUsersTable td.bossTdSelect::marker{content:none !important;}

.bossRowCheck{
  width:16px;height:16px;
  cursor:pointer;
  accent-color:rgba(59,130,246,.85);
  margin:0;
}

/* Toast */
.bossToast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  z-index:20000;
  padding:10px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(8,14,26,.92);
  backdrop-filter:blur(12px);
  color:rgba(255,255,255,.95);
  font-size:13px;
  box-shadow:0 20px 80px rgba(0,0,0,.55);
  display:none;
}
.bossToast.isOk{border-color:rgba(34,197,94,.35);}
.bossToast.isErr{border-color:rgba(239,68,68,.35);}
.bossToast.isInfo{border-color:rgba(59,130,246,.35);}

/* ============================
   Confirm modal (SIN HEADER)
   ============================ */
.bossConfirmModal{width:min(420px,100%);}

.bossConfirmBody{
  padding:18px 16px 8px;
  text-align:center;
  font-size:15px;
  line-height:1.55;
  color:rgba(255,255,255,.92);
}
.bossConfirmBody .muted{
  display:block;
  margin-top:10px;
  font-size:16px;
  line-height:1.4;
  opacity:.82;
}
#bossConfirmText{
  font-size:16px;
  font-weight:600;
  line-height:1.35;
}

/* ============================
   Skeleton pro (loading users)
   ============================ */
.bossTableWrap{ min-height:260px; }

.bossSkRow td{
  padding:12px 12px;
  height:44px;
  vertical-align:middle;
}
.bossSk{
  height:12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  position:relative;
  overflow:hidden;
}
.bossSk::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent);
  animation:bossSk 1.05s infinite;
}
@keyframes bossSk{100%{transform:translateX(100%);}}

/* tamaños */
.bossSk.sm{
  width:16px;height:16px;
  border-radius:6px;
  margin:0 auto;
}
.bossSk.md{width:58%;}
.bossSk.lg{width:88%;}