/* =========================================================
   DANFER USERS TABLE FINAL
   ========================================================= */


/* CONTENEDOR */

#moduleContent:has(.users-row) {
  width: 100%;
}


/* TABLA */

#moduleContent:has(.users-row) table {
  width: 100%;

  border-collapse: separate;
  border-spacing: 0;

  background: #ffffff;

  border:
    1px solid #dce4ec;

  border-radius: 14px;

  overflow: hidden;

  box-shadow:
    0 8px 24px rgba(15,42,61,.06);
}


/* HEADER */

#moduleContent:has(.users-row) table thead,
#moduleContent:has(.users-row) table thead tr,
#moduleContent:has(.users-row) table th {
  background: #164b6d !important;
  color: #ffffff !important;
}


#moduleContent:has(.users-row) table th {
  padding: 13px 15px;

  border-right:
    1px solid rgba(255,255,255,.16);

  border-bottom:
    0;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .035em;
  text-transform: uppercase;

  white-space: nowrap;
}


#moduleContent:has(.users-row) table th:last-child {
  border-right: 0;
}


/* FILAS */

#moduleContent:has(.users-row) .users-row td {
  padding: 13px 15px;

  background: #ffffff !important;

  border-bottom:
    1px solid #e5ebf0 !important;

  color: #172033 !important;

  vertical-align: middle;
}


#moduleContent:has(.users-row)
.users-row:nth-child(even) td {
  background: #f9fbfc !important;
}


#moduleContent:has(.users-row)
.users-row:hover td {
  background: #f1f6fa !important;
}


#moduleContent:has(.users-row)
.users-row:last-child td {
  border-bottom: 0 !important;
}


/* USUARIO */

#moduleContent:has(.users-row)
.users-person {
  display: flex;
  align-items: center;
  gap: 11px;

  min-width: 230px;
}


#moduleContent:has(.users-row)
.users-avatar {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      #164b6d,
      #246f98
    );

  border:
    2px solid #ffffff;

  box-shadow:
    0 0 0 1px #bfd0dc;

  color: #ffffff !important;

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


#moduleContent:has(.users-row)
.users-person-copy {
  min-width: 0;

  display: grid;
  gap: 3px;
}


#moduleContent:has(.users-row)
.users-person-copy strong {
  color: #102335 !important;

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


#moduleContent:has(.users-row)
.users-person-copy span {
  color: #72859a !important;

  font-size: 10px;

  max-width: 260px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


#moduleContent:has(.users-row)
.users-person-copy small {
  width: max-content;

  padding: 3px 7px;

  border-radius: 999px;

  background: #eaf3ff;

  color: #2563eb !important;

  font-size: 8px;
  font-weight: 800;

  text-transform: uppercase;
}


/* PERFIL */

#moduleContent:has(.users-row)
.users-role-badge {
  display: inline-flex;
  align-items: center;

  min-height: 27px;

  padding: 0 10px;

  border-radius: 999px;

  border: 1px solid #d6e0e8;

  background: #eef3f7;

  color: #29445a !important;

  font-size: 9px;
  font-weight: 800;

  white-space: nowrap;
}


#moduleContent:has(.users-row)
.users-role-admin {
  background: #e7f1ff;
  border-color: #bfd8ff;
  color: #1755a0 !important;
}


#moduleContent:has(.users-row)
.users-role-supervisor {
  background: #fff1e8;
  border-color: #ffd6bd;
  color: #a84c14 !important;
}


#moduleContent:has(.users-row)
.users-role-capturista {
  background: #f1ebff;
  border-color: #dacbff;
  color: #6644ad !important;
}


/* ACCESO */

#moduleContent:has(.users-row)
.users-access {
  display: grid;
  gap: 3px;

  min-width: 150px;
}


#moduleContent:has(.users-row)
.users-access strong {
  color: #173047 !important;

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


#moduleContent:has(.users-row)
.users-access span {
  color: #8091a2 !important;

  font-size: 9px;
}


/* ESTATUS */

#moduleContent:has(.users-row)
.users-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  min-height: 27px;

  padding: 0 10px;

  border-radius: 999px;

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


#moduleContent:has(.users-row)
.users-status-badge i {
  width: 7px;
  height: 7px;

  border-radius: 50%;
}


#moduleContent:has(.users-row)
.users-status-badge.is-active {
  background: #e8f7ef;
  color: #187a4b !important;

  border:
    1px solid #c8ebd8;
}


#moduleContent:has(.users-row)
.users-status-badge.is-active i {
  background: #20a66a;
}


#moduleContent:has(.users-row)
.users-status-badge.is-inactive {
  background: #f0f3f6;
  color: #758292 !important;

  border:
    1px solid #dce3e9;
}


#moduleContent:has(.users-row)
.users-status-badge.is-inactive i {
  background: #9da8b4;
}


/* SESION */

#moduleContent:has(.users-row)
.users-session-v2,

#moduleContent:has(.users-row)
.users-session {
  min-width: 175px;

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


#moduleContent:has(.users-row)
.users-session-copy-v2,

#moduleContent:has(.users-row)
.users-session-copy {
  display: grid;
  gap: 3px;
}


#moduleContent:has(.users-row)
.users-session-copy-v2 strong,

#moduleContent:has(.users-row)
.users-session-copy strong {
  color: #173047 !important;

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


#moduleContent:has(.users-row)
.users-session-copy-v2 span,

#moduleContent:has(.users-row)
.users-session-copy span {
  color: #8091a2 !important;

  font-size: 9px;
}


#moduleContent:has(.users-row)
.users-session-dot-v2,

#moduleContent:has(.users-row)
.users-session-dot {
  width: 8px;
  height: 8px;

  flex: 0 0 8px;

  border-radius: 50%;

  background: #94a3b8;
}


#moduleContent:has(.users-row)
.users-session-dot-v2.is-online,

#moduleContent:has(.users-row)
.users-session-dot.is-online {
  background: #22a869;

  box-shadow:
    0 0 0 3px rgba(34,168,105,.12);
}


/* ALTA */

#moduleContent:has(.users-row)
.users-date {
  display: grid;
  gap: 3px;

  min-width: 105px;
}


#moduleContent:has(.users-row)
.users-date strong {
  color: #173047 !important;

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


#moduleContent:has(.users-row)
.users-date span {
  color: #8a9aab !important;

  font-size: 8px;
}


/* ACCIONES */

#moduleContent:has(.users-row)
.users-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  min-width: 150px;
}


#moduleContent:has(.users-row)
.users-action {
  min-width: 68px;
  min-height: 31px;

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

  padding: 0 11px;

  border-radius: 8px;

  font-size: 9px;
  font-weight: 800;

  cursor: pointer;
}


#moduleContent:has(.users-row)
.users-action-edit {
  background: #10243b !important;

  border:
    1px solid #263e58 !important;

  color: #ffffff !important;
}


#moduleContent:has(.users-row)
.users-action-edit:hover {
  background: #193855 !important;
}


#moduleContent:has(.users-row)
.users-action-delete {
  background: #531923 !important;

  border:
    1px solid #7e2936 !important;

  color: #ffffff !important;
}


#moduleContent:has(.users-row)
.users-action-delete:hover {
  background: #6c1f2d !important;
}


#moduleContent:has(.users-row)
.users-action > span {
  display: none !important;
}


#moduleContent:has(.users-row)
.users-current-label {
  display: inline-flex;
  align-items: center;

  min-height: 31px;

  padding: 0 10px;

  border-radius: 8px;

  background: #eef3f7;

  color: #68798b !important;

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


/* =========================================================
   MODO OSCURO
   ========================================================= */

html[data-theme="dark"]
#moduleContent:has(.users-row)
table {
  background: #101b2d !important;

  border-color: #293a50 !important;

  box-shadow:
    0 8px 26px rgba(0,0,0,.16) !important;
}


html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-row td {
  background: #101b2d !important;

  color: #dce5ee !important;

  border-bottom-color:
    #25364a !important;
}


html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-row:nth-child(even) td {
  background: #0e192a !important;
}


html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-row:hover td {
  background: #17263b !important;
}


html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-person-copy strong,

html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-access strong,

html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-date strong,

html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-session-copy strong,

html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-session-copy-v2 strong {
  color: #f8fafc !important;
}


html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-person-copy span,

html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-access span,

html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-date span,

html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-session-copy span,

html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-session-copy-v2 span {
  color: #8fa2b8 !important;
}


html[data-theme="dark"]
#moduleContent:has(.users-row)
.users-current-label {
  background: #172238;

  color: #a5b4c5 !important;
}


/* SCROLL EN PANTALLA CHICA */

#moduleContent:has(.users-row)
.table-wrap {
  overflow-x: auto;
}


#moduleContent:has(.users-row)
table {
  min-width: 1080px;
}


@media (max-width: 900px) {

  #moduleContent:has(.users-row)
  .users-person {
    min-width: 210px;
  }

}