.users-admin-page {
  width: 100%;
  min-width: 0;
  padding: 28px;
  color: #172019;
}


.users-admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 22px;
}


.users-admin-eyebrow {
  display: block;
  margin-bottom: 7px;
  color: #367540;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
}


.users-admin-header h1 {
  margin: 0;
  color: #122017;
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -.04em;
}


.users-admin-header p {
  max-width: 720px;
  margin: 7px 0 0;
  color: #5d6c61;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.55;
}


.users-admin-header__actions {
  display: flex;
  gap: 9px;
}


.users-admin-button {
  min-height: 43px;
  padding: 0 16px;
  border: 1px solid transparent;
  border-radius: 10px;

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

  font: inherit;
  font-size: 13px;
  font-weight: 850;

  cursor: pointer;
}


.users-admin-button svg {
  width: 16px;
  height: 16px;
}


.users-admin-button.is-primary {
  background: #246a31;
  color: #fff;
}


.users-admin-button.is-primary:hover:not(:disabled) {
  background: #1d5a28;
}


.users-admin-button.is-secondary {
  border-color: rgba(22, 45, 27, .13);
  background: #fff;
  color: #304235;
}


.users-admin-button:disabled {
  opacity: .5;
  cursor: not-allowed;
}


.users-admin-button.is-full {
  width: 100%;
}


/* =========================================================
   KPI
   ========================================================= */

.users-admin-kpis {
  display: grid;
  grid-template-columns:
    repeat(
      3,
      minmax(
        0,
        1fr
      )
    );
  gap: 12px;
  margin-bottom: 14px;
}


.users-admin-kpis article {
  min-height: 92px;
  padding: 17px;
  border: 1px solid rgba(22, 45, 27, .09);
  border-radius: 14px;
  background: #fff;

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


.users-admin-kpi__icon {
  flex: 0 0 45px;
  width: 45px;
  height: 45px;

  border-radius: 11px;

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

  background: #eef5ef;
  color: #326f3b;
}


.users-admin-kpi__icon.is-success {
  background: rgba(30, 135, 54, .1);
  color: #217234;
}


.users-admin-kpi__icon.is-muted {
  background: #f0f2f0;
  color: #68736a;
}


.users-admin-kpi__icon svg {
  width: 20px;
  height: 20px;
}


.users-admin-kpis article > div:last-child {
  display: flex;
  flex-direction: column;
  gap: 3px;
}


.users-admin-kpis span {
  color: #6d7b71;
  font-size: 11px;
  font-weight: 800;
}


.users-admin-kpis strong {
  color: #15231a;
  font-size: 25px;
  line-height: 1;
  font-weight: 900;
}


/* =========================================================
   TOOLBAR
   ========================================================= */

.users-admin-toolbar {
  width: 100%;

  display: grid;

  grid-template-columns:
    minmax(
      320px,
      1fr
    )
    190px
    190px;

  gap: 10px;

  margin-bottom: 14px;
}


.users-admin-search {
  position: relative;
}


.users-admin-search svg {
  position: absolute;
  top: 50%;
  left: 14px;

  width: 17px;
  height: 17px;

  color: #718077;

  transform: translateY(-50%);
}


.users-admin-search input,
.users-admin-toolbar select {
  width: 100%;
  height: 43px;

  border: 1px solid rgba(22, 45, 27, .13);
  border-radius: 10px;

  background: #fff;
  color: #18251c;

  font: inherit;
  font-size: 13px;
  font-weight: 700;

  outline: none;
}


.users-admin-search input {
  padding: 0 14px 0 41px;
}


.users-admin-toolbar select {
  padding: 0 12px;
}


.users-admin-search input:focus,
.users-admin-toolbar select:focus {
  border-color: #43834c;

  box-shadow:
    0 0 0 3px
    rgba(54, 124, 65, .08);
}


/* =========================================================
   TABLE
   ========================================================= */

.users-admin-loading[hidden],
.users-admin-empty[hidden],
.users-admin-table-card[hidden],
.users-admin-modal[hidden] {
  display: none !important;
}


.users-admin-loading {
  min-height: 80px;

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

  gap: 9px;

  color: #67766b;

  font-size: 13px;
  font-weight: 750;
}


.users-admin-loading svg {
  width: 18px;
  height: 18px;

  animation:
    usersAdminSpin
    .8s
    linear
    infinite;
}


@keyframes usersAdminSpin {
  to {
    transform: rotate(360deg);
  }
}


.users-admin-table-card {
  width: 100%;

  border: 1px solid rgba(22, 45, 27, .09);
  border-radius: 14px;

  overflow: hidden;

  background: #fff;
}


.users-admin-table-scroll {
  width: 100%;
  overflow-x: auto;
}


.users-admin-table {
  width: 100%;
  min-width: 1080px;

  border-collapse: collapse;
}


.users-admin-table th {
  padding: 13px 15px;

  border-bottom:
    1px solid
    rgba(22, 45, 27, .08);

  background: #f6f8f6;

  color: #65736a;

  text-align: left;

  font-size: 10px;
  font-weight: 900;

  letter-spacing: .055em;

  text-transform: uppercase;
}


.users-admin-table td {
  padding: 14px 15px;

  border-bottom:
    1px solid
    rgba(22, 45, 27, .065);

  color: #334238;

  font-size: 12px;
  font-weight: 700;

  vertical-align: middle;
}


.users-admin-table tr:last-child td {
  border-bottom: 0;
}


.users-admin-table tr.is-inactive {
  background: #fafbfa;
}


.users-admin-table tr.is-inactive td {
  opacity: .72;
}


/* =========================================================
   PERSONA
   ========================================================= */

.users-admin-person {
  min-width: 220px;

  display: flex;
  align-items: center;

  gap: 11px;
}


.users-admin-avatar {
  flex: 0 0 44px;

  width: 44px;
  height: 44px;

  border-radius: 50%;

  background: #eaf2eb;
  color: #2c6736;

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

  font-size: 13px;
  font-weight: 900;

  letter-spacing: -.02em;
}


.users-admin-avatar.is-large {
  flex-basis: 52px;

  width: 52px;
  height: 52px;

  font-size: 15px;
}


.users-admin-person__info {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.users-admin-person__name {
  display: flex;
  align-items: center;
  gap: 6px;
}


.users-admin-person__name strong {
  color: #15231a;

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


.users-admin-person__info > span {
  color: #7a867d;

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


.users-admin-you {
  min-height: 19px;
  padding: 0 6px;

  border-radius: 999px;

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

  background: #e9f3ea;
  color: #34733e;

  font-size: 8px !important;
  font-weight: 900 !important;
  text-transform: uppercase;
}


/* =========================================================
   EMAIL / ROLE / STATUS
   ========================================================= */

.users-admin-email {
  max-width: 220px;

  display: flex;
  align-items: center;

  gap: 7px;

  color: #57665c;
}


.users-admin-email svg {
  flex: 0 0 auto;

  width: 14px;
  height: 14px;

  color: #7a897f;
}


.users-admin-email span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.users-admin-role {
  min-height: 25px;
  padding: 0 8px;

  border-radius: 999px;

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

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

  text-transform: uppercase;
}


.users-admin-role.is-super-admin {
  background: rgba(99, 64, 173, .1);
  color: #6d46b5;
}


.users-admin-role.is-admin {
  background: rgba(37, 98, 167, .1);
  color: #2d67a3;
}


.users-admin-role.is-user {
  background: rgba(63, 113, 72, .1);
  color: #407348;
}


.users-admin-status {
  min-height: 25px;
  padding: 0 9px;

  border-radius: 999px;

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

  gap: 6px;

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


.users-admin-status > span {
  width: 6px;
  height: 6px;

  border-radius: 50%;
}


.users-admin-status.is-active {
  background: rgba(30, 135, 54, .09);
  color: #237536;
}


.users-admin-status.is-active > span {
  background: #2a9640;
}


.users-admin-status.is-inactive {
  background: rgba(89, 101, 91, .1);
  color: #68736a;
}


.users-admin-status.is-inactive > span {
  background: #89928a;
}


.users-admin-date {
  color: #647168;
  font-size: 10px;
  font-weight: 700;
}


/* =========================================================
   ACTIONS
   ========================================================= */

.users-admin-actions {
  display: flex;
  align-items: center;

  gap: 5px;
}


.users-admin-actions button {
  width: 33px;
  height: 33px;

  padding: 0;

  border:
    1px solid
    rgba(22, 45, 27, .1);

  border-radius: 8px;

  background: #fff;
  color: #4e5f54;

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

  cursor: pointer;

  transition:
    background .15s ease,
    color .15s ease,
    border-color .15s ease;
}


.users-admin-actions button:hover:not(:disabled) {
  border-color:
    rgba(42, 102, 51, .22);

  background: #f0f5f0;
  color: #295e32;
}


.users-admin-actions button.is-danger {
  color: #b42323;
}


.users-admin-actions button.is-danger:hover:not(:disabled) {
  background: rgba(180, 35, 35, .07);
}


.users-admin-actions button:disabled {
  opacity: .3;
  cursor: not-allowed;
}


.users-admin-actions svg {
  width: 14px;
  height: 14px;
}


/* =========================================================
   EMPTY
   ========================================================= */

.users-admin-empty {
  min-height: 360px;

  border:
    1px dashed
    rgba(22, 45, 27, .16);

  border-radius: 14px;

  background: #fff;

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

  text-align: center;
}


.users-admin-empty > svg {
  width: 46px;
  height: 46px;

  color: #7b8c80;
}


.users-admin-empty h2 {
  margin: 17px 0 5px;

  color: #17241b;

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


.users-admin-empty p {
  margin: 0;

  color: #6d7b71;

  font-size: 13px;
  font-weight: 650;
}


/* =========================================================
   MODALS
   ========================================================= */

.users-admin-modal {
  position: fixed;
  inset: 0;

  z-index: 1400;

  padding: 22px;

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


.users-admin-modal__backdrop {
  position: absolute;
  inset: 0;

  border: 0;

  background:
    rgba(
      10,
      18,
      12,
      .58
    );

  backdrop-filter:
    blur(
      3px
    );
}


.users-admin-modal__panel {
  position: relative;
  z-index: 1;

  width: min(
    720px,
    100%
  );

  max-height:
    calc(
      100vh -
      44px
    );

  border-radius: 17px;

  overflow: hidden;

  background: #fff;

  box-shadow:
    0
    30px
    90px
    rgba(
      10,
      20,
      12,
      .22
    );

  opacity: 0;

  transform:
    translateY(
      8px
    );

  transition:
    .16s ease;
}


.users-admin-modal.is-visible
.users-admin-modal__panel {
  opacity: 1;

  transform:
    translateY(
      0
    );
}


.users-admin-modal__panel--password {
  width: min(
    540px,
    100%
  );

  padding: 22px;
}


.users-admin-modal__panel--small {
  width: min(
    480px,
    100%
  );

  padding: 24px;
}


.users-admin-modal__header {
  min-height: 73px;

  padding: 16px 20px;

  border-bottom:
    1px solid
    rgba(22, 45, 27, .08);

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

  gap: 18px;
}


.users-admin-modal__header span {
  color: #3d8047;

  font-size: 10px;
  font-weight: 900;

  text-transform: uppercase;

  letter-spacing: .09em;
}


.users-admin-modal__header h2 {
  margin: 3px 0 0;

  color: #17231a;

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


.users-admin-modal__close {
  width: 37px;
  height: 37px;

  border: 0;
  border-radius: 9px;

  background: #f0f4f0;
  color: #4e5e53;

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

  cursor: pointer;
}


.users-admin-modal__close svg {
  width: 18px;
  height: 18px;
}


.users-admin-modal__body {
  max-height:
    calc(
      100vh -
      118px
    );

  padding: 21px;

  overflow-y: auto;
}


/* =========================================================
   FORM
   ========================================================= */

.users-admin-form-grid {
  display: grid;

  grid-template-columns:
    1fr
    1fr;

  gap: 14px;
}


.users-admin-field {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 6px;
}


.users-admin-field--full {
  grid-column:
    1 /
    -1;
}


.users-admin-field > span {
  color: #4d5d52;

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


.users-admin-field > small {
  color: #77837a;

  font-size: 10px;
  font-weight: 650;

  line-height: 1.45;
}


.users-admin-field input,
.users-admin-field select {
  width: 100%;
  height: 42px;

  padding:
    0
    11px;

  border:
    1px solid
    rgba(22, 45, 27, .13);

  border-radius: 9px;

  background: #fff;
  color: #172018;

  font: inherit;
  font-size: 13px;
  font-weight: 700;

  outline: none;
}


.users-admin-field input:focus,
.users-admin-field select:focus {
  border-color: #43834c;

  box-shadow:
    0 0 0 3px
    rgba(54, 124, 65, .08);
}


.users-admin-password-field {
  position: relative;
}


.users-admin-password-field input {
  padding-right: 45px;
}


.users-admin-password-field button {
  position: absolute;

  top: 50%;
  right: 5px;

  width: 32px;
  height: 32px;

  border: 0;
  border-radius: 7px;

  background: transparent;
  color: #647168;

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

  transform:
    translateY(
      -50%
    );

  cursor: pointer;
}


.users-admin-password-field button:hover {
  background: #f0f4f0;
}


.users-admin-password-field button svg {
  width: 15px;
  height: 15px;
}


.users-admin-inline-password {
  width: 100%;
  height: 42px;

  padding: 0 12px;

  border:
    1px solid
    rgba(22, 45, 27, .12);

  border-radius: 9px;

  background: #f7f9f7;
  color: #355d3c;

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

  gap: 7px;

  font: inherit;
  font-size: 12px;
  font-weight: 850;

  cursor: pointer;
}


.users-admin-inline-password svg {
  width: 15px;
  height: 15px;
}


/* =========================================================
   SWITCH
   ========================================================= */

.users-admin-switches {
  margin-top: 17px;
}


.users-admin-switch {
  position: relative;
  min-height: 60px;

  padding: 0 14px;

  border:
    1px solid
    rgba(22, 45, 27, .1);

  border-radius: 11px;

  display: flex;
  align-items: center;

  gap: 11px;

  cursor: pointer;
}


.users-admin-switch > input {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  margin: 0;

  opacity: 0;
}


.users-admin-switch > span {
  position: relative;

  flex: 0 0 36px;

  width: 36px;
  height: 21px;

  border-radius: 999px;

  background: #c8d0c9;

  transition:
    .16s ease;
}


.users-admin-switch > span::after {
  content: "";

  position: absolute;

  top: 3px;
  left: 3px;

  width: 15px;
  height: 15px;

  border-radius: 50%;

  background: #fff;

  transition:
    .16s ease;
}


.users-admin-switch
input:checked +
span {
  background: #347640;
}


.users-admin-switch
input:checked +
span::after {
  transform:
    translateX(
      15px
    );
}


.users-admin-switch
input:disabled +
span {
  opacity: .5;
}


.users-admin-switch > div {
  display: flex;
  flex-direction: column;

  gap: 2px;
}


.users-admin-switch strong {
  color: #28392d;

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


.users-admin-switch small {
  color: #77847a;

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


/* =========================================================
   INFO CUENTA
   ========================================================= */

.users-admin-account-info {
  display: grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  gap: 8px;

  margin-top: 17px;
}


.users-admin-account-info > div {
  min-width: 0;

  padding: 11px;

  border:
    1px solid
    rgba(22, 45, 27, .08);

  border-radius: 9px;

  background: #f8faf8;

  display: flex;
  flex-direction: column;

  gap: 4px;
}


.users-admin-account-info span {
  color: #748078;

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

  text-transform: uppercase;
}


.users-admin-account-info strong {
  overflow: hidden;

  color: #29392d;

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

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


.users-admin-modal__footer {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  margin-top: 20px;
  padding-top: 18px;

  border-top:
    1px solid
    rgba(22, 45, 27, .08);
}


/* =========================================================
   PASSWORD
   ========================================================= */

.users-password-header {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 22px;
}


.users-password-header > div:last-child {
  min-width: 0;
}


.users-password-header span {
  color: #3b7b45;

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

  letter-spacing: .08em;

  text-transform: uppercase;
}


.users-password-header h2 {
  margin: 4px 0 2px;

  color: #17231a;

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


.users-password-header p {
  margin: 0;

  color: #78847b;

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


.users-password-options {
  display: grid;
  gap: 11px;
}


.users-password-generate {
  min-height: 42px;

  border:
    1px dashed
    rgba(42, 111, 52, .25);

  border-radius: 9px;

  background: #f7faf7;
  color: #367440;

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

  gap: 7px;

  font: inherit;
  font-size: 11px;
  font-weight: 850;

  cursor: pointer;
}


.users-password-generate svg {
  width: 15px;
  height: 15px;
}


/* =========================================================
   TEMP PASSWORD
   ========================================================= */

.users-temporary-password {
  text-align: center;
}


.users-temporary-password__icon {
  width: 52px;
  height: 52px;

  margin:
    0
    auto
    14px;

  border-radius: 14px;

  background: #eaf3eb;
  color: #2b7037;

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


.users-temporary-password__icon svg {
  width: 23px;
  height: 23px;
}


.users-temporary-password > span {
  color: #397642;

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

  letter-spacing: .09em;

  text-transform: uppercase;
}


.users-temporary-password h2 {
  margin: 5px 0 7px;

  color: #17231a;

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


.users-temporary-password p {
  max-width: 360px;

  margin:
    0
    auto
    18px;

  color: #69766c;

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

  line-height: 1.5;
}


.users-temporary-password__value {
  min-height: 52px;

  margin-bottom: 16px;
  padding: 7px 7px 7px 13px;

  border:
    1px solid
    rgba(22, 45, 27, .12);

  border-radius: 10px;

  background: #f6f8f6;

  display: flex;
  align-items: center;

  gap: 8px;
}


.users-temporary-password__value code {
  min-width: 0;
  flex: 1;

  overflow-x: auto;

  color: #152b1a;

  text-align: left;

  font-size: 14px;
  font-weight: 900;

  white-space: nowrap;
}


.users-temporary-password__value button {
  flex: 0 0 37px;

  width: 37px;
  height: 37px;

  border: 0;
  border-radius: 8px;

  background: #fff;
  color: #35663b;

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

  cursor: pointer;
}


.users-temporary-password__value button svg {
  width: 16px;
  height: 16px;
}


/* =========================================================
   TOAST
   ========================================================= */

.users-admin-toast {
  position: fixed;

  right: 20px;
  bottom: 20px;

  z-index: 4000;

  max-width: 380px;

  padding: 13px 16px;

  border-radius: 10px;

  background: #18321e;
  color: #fff;

  font-size: 12px;
  font-weight: 750;

  opacity: 0;

  transform:
    translateY(
      10px
    );

  pointer-events: none;

  transition:
    .18s ease;
}


.users-admin-toast.is-visible {
  opacity: 1;

  transform:
    translateY(
      0
    );
}


.users-admin-toast.is-error {
  background: #a62727;
}


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

@media (
  max-width:
  960px
) {

  .users-admin-kpis {
    grid-template-columns:
      1fr
      1fr
      1fr;
  }


  .users-admin-toolbar {
    grid-template-columns:
      1fr
      180px;
  }


  .users-admin-toolbar select:last-child {
    grid-column:
      1 /
      -1;
  }

}


@media (
  max-width:
  720px
) {

  .users-admin-page {
    padding:
      18px
      14px;
  }


  .users-admin-header {
    flex-direction:
      column;
  }


  .users-admin-header__actions {
    width: 100%;
  }


  .users-admin-header__actions button {
    flex: 1;
  }


  .users-admin-kpis {
    grid-template-columns:
      1fr;
  }


  .users-admin-toolbar {
    grid-template-columns:
      1fr;
  }


  .users-admin-toolbar select:last-child {
    grid-column:
      auto;
  }


  .users-admin-form-grid {
    grid-template-columns:
      1fr;
  }


  .users-admin-field--full {
    grid-column:
      auto;
  }


  .users-admin-account-info {
    grid-template-columns:
      1fr;
  }


  .users-admin-modal {
    padding: 10px;
  }


  .users-admin-modal__footer {
    flex-direction:
      column-reverse;
  }


  .users-admin-modal__footer button {
    width: 100%;
  }

}