.usuarios-page {
  width: 100%;
  min-width: 0;

  --usuarios-bg: #f5f6f7;

  --usuarios-surface: #ffffff;
  --usuarios-surface-soft: #f8f9fa;
  --usuarios-surface-hover: #f1f3f5;

  --usuarios-text: #15181d;
  --usuarios-text-soft: #4b5563;
  --usuarios-muted: #808895;

  --usuarios-border:
    rgba(
      17,
      24,
      39,
      0.08
    );

  --usuarios-border-strong:
    rgba(
      17,
      24,
      39,
      0.14
    );

  --usuarios-primary: #111827;
  --usuarios-primary-hover: #1f2937;
  --usuarios-primary-contrast: #ffffff;

  --usuarios-danger: #bd3434;
  --usuarios-danger-soft: #fdf1f1;
  --usuarios-danger-border: #efcccc;

  --usuarios-success: #18794e;
  --usuarios-success-soft: #edf8f2;
  --usuarios-success-border: #c9e8d6;

  --usuarios-warning: #9a6700;
  --usuarios-warning-soft: #fff7e6;

  --usuarios-info: #426aa3;
  --usuarios-info-soft: #eef3fa;

  --usuarios-shadow:
    0 1px 2px
      rgba(
        15,
        23,
        42,
        0.02
      ),
    0 8px 24px
      rgba(
        15,
        23,
        42,
        0.04
      );

  --usuarios-shadow-hover:
    0 14px 38px
      rgba(
        15,
        23,
        42,
        0.07
      );

  --usuarios-modal-shadow:
    0 26px 80px
      rgba(
        15,
        23,
        42,
        0.18
      );

  --usuarios-radius-sm: 9px;
  --usuarios-radius-md: 13px;
  --usuarios-radius-lg: 17px;

  --usuarios-transition:
    180ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    );

  color:
    var(--usuarios-text);
}



html[data-theme="dark"]
.usuarios-page,
body[data-theme="dark"]
.usuarios-page {
  --usuarios-bg: #0d0e10;

  --usuarios-surface: #111214;
  --usuarios-surface-soft: #16181b;
  --usuarios-surface-hover: #1b1d21;

  --usuarios-text: #f4f5f7;
  --usuarios-text-soft: #c3c7ce;
  --usuarios-muted: #888e98;

  --usuarios-border:
    rgba(
      255,
      255,
      255,
      0.07
    );

  --usuarios-border-strong:
    rgba(
      255,
      255,
      255,
      0.13
    );

  --usuarios-primary: #f4f5f7;
  --usuarios-primary-hover: #ffffff;
  --usuarios-primary-contrast: #111214;

  --usuarios-danger: #ef9292;
  --usuarios-danger-soft: #291919;
  --usuarios-danger-border: #583030;

  --usuarios-success: #7ec59a;
  --usuarios-success-soft: #15251c;
  --usuarios-success-border: #285338;

  --usuarios-warning: #e0b65f;
  --usuarios-warning-soft: #2b2416;

  --usuarios-info: #91b3e0;
  --usuarios-info-soft: #182331;

  --usuarios-shadow:
    0 1px 0
      rgba(
        255,
        255,
        255,
        0.02
      ),
    0 10px 30px
      rgba(
        0,
        0,
        0,
        0.16
      );

  --usuarios-shadow-hover:
    0 16px 44px
      rgba(
        0,
        0,
        0,
        0.26
      );

  --usuarios-modal-shadow:
    0 30px 90px
      rgba(
        0,
        0,
        0,
        0.48
      );
}



.usuarios-heading {
  width: 100%;
  min-width: 0;

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

  gap: 18px;

  margin-bottom: 14px;
}



.usuarios-heading-copy {
  min-width: 0;
}



.usuarios-eyebrow,
.usuarios-modal-eyebrow {
  display: block;

  margin-bottom: 4px;

  color:
    var(--usuarios-muted);

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

  line-height: 1;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}



.usuarios-heading h1,
.usuarios-modal-header h2 {
  margin: 0;

  color:
    var(--usuarios-text);

  font-weight: 780;

  line-height: 1.1;

  letter-spacing:
    -0.035em;
}



.usuarios-heading h1 {
  font-size: 22px;
}



.usuarios-heading p {
  margin:
    4px 0 0;

  color:
    var(--usuarios-muted);

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

  line-height: 1.35;
}



.usuarios-button {
  min-height: 34px;

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

  gap: 6px;

  padding:
    0 10px;

  border:
    1px solid
    transparent;

  border-radius:
    var(--usuarios-radius-sm);

  outline: none;

  font-family: inherit;
  font-size: 9px;
  font-weight: 690;

  line-height: 1;

  cursor: pointer;

  white-space: nowrap;

  transition:
    color
      var(--usuarios-transition),
    background-color
      var(--usuarios-transition),
    border-color
      var(--usuarios-transition),
    transform
      var(--usuarios-transition),
    box-shadow
      var(--usuarios-transition),
    opacity
      var(--usuarios-transition);
}



.usuarios-button svg {
  width: 13px;
  height: 13px;

  stroke-width: 2;
}



.usuarios-button:hover:not(
  :disabled
) {
  transform:
    translateY(-1px);
}



.usuarios-button:active:not(
  :disabled
) {
  transform:
    scale(0.98);
}



.usuarios-button:focus-visible {
  box-shadow:
    0 0 0 3px
    rgba(
      127,
      127,
      127,
      0.12
    );
}



.usuarios-button:disabled {
  opacity: 0.55;

  cursor: not-allowed;

  transform: none;
}



.usuarios-button.is-loading
svg,
.usuarios-refresh-button.is-loading
svg {
  animation:
    usuariosSpin
    850ms
    linear
    infinite;
}



.usuarios-button-primary {
  color:
    var(--usuarios-primary-contrast);

  background:
    var(--usuarios-primary);

  border-color:
    var(--usuarios-primary);
}



.usuarios-button-primary:hover:not(
  :disabled
) {
  background:
    var(--usuarios-primary-hover);

  border-color:
    var(--usuarios-primary-hover);
}



.usuarios-button-secondary {
  color:
    var(--usuarios-text-soft);

  background:
    var(--usuarios-surface);

  border-color:
    var(--usuarios-border);
}



.usuarios-button-secondary:hover:not(
  :disabled
) {
  color:
    var(--usuarios-text);

  background:
    var(--usuarios-surface-hover);

  border-color:
    var(--usuarios-border-strong);
}



.usuarios-button-danger {
  color: #ffffff;

  background:
    var(--usuarios-danger);

  border-color:
    var(--usuarios-danger);
}



.usuarios-button-danger:hover:not(
  :disabled
) {
  filter:
    brightness(0.92);
}



.usuarios-feedback {
  min-height: 40px;

  display: flex;
  align-items: center;

  gap: 8px;

  margin-bottom: 12px;

  padding:
    7px 8px
    7px 10px;

  border:
    1px solid
    transparent;

  border-radius:
    var(--usuarios-radius-sm);

  font-size: 8.5px;
  font-weight: 600;

  box-shadow:
    var(--usuarios-shadow);
}



.usuarios-feedback.is-success {
  color:
    var(--usuarios-success);

  background:
    var(--usuarios-success-soft);

  border-color:
    var(--usuarios-success-border);
}



.usuarios-feedback.is-error {
  color:
    var(--usuarios-danger);

  background:
    var(--usuarios-danger-soft);

  border-color:
    var(--usuarios-danger-border);
}



.usuarios-feedback-icon {
  width: 25px;
  height: 25px;

  flex:
    0 0
    25px;

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

  border-radius: 7px;

  background:
    rgba(
      127,
      127,
      127,
      0.08
    );
}



.usuarios-feedback-icon svg {
  width: 13px;
  height: 13px;
}



.usuarios-feedback > span {
  min-width: 0;

  flex: 1;
}



.usuarios-feedback > button {
  width: 27px;
  height: 27px;

  flex:
    0 0
    27px;

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

  padding: 0;

  color: currentColor;

  background:
    transparent;

  border: 0;

  border-radius: 7px;

  opacity: 0.65;

  cursor: pointer;

  transition:
    opacity
      var(--usuarios-transition),
    background-color
      var(--usuarios-transition);
}



.usuarios-feedback > button:hover {
  opacity: 1;

  background:
    rgba(
      127,
      127,
      127,
      0.1
    );
}



.usuarios-feedback > button svg {
  width: 12px;
  height: 12px;
}



.usuarios-toolbar {
  min-height: 52px;

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

  gap: 10px;

  margin-bottom: 10px;

  padding: 8px;

  background:
    var(--usuarios-surface);

  border:
    1px solid
    var(--usuarios-border);

  border-radius:
    var(--usuarios-radius-md);

  box-shadow:
    var(--usuarios-shadow);

  transition:
    border-color
      var(--usuarios-transition),
    box-shadow
      var(--usuarios-transition),
    background-color
      var(--usuarios-transition);
}



.usuarios-toolbar:hover {
  border-color:
    var(--usuarios-border-strong);
}



.usuarios-search {
  width:
    min(
      100%,
      480px
    );

  min-height: 34px;

  display: flex;
  align-items: center;

  gap: 7px;

  padding:
    0 9px;

  background:
    var(--usuarios-surface-soft);

  border:
    1px solid
    var(--usuarios-border);

  border-radius:
    var(--usuarios-radius-sm);

  transition:
    background-color
      var(--usuarios-transition),
    border-color
      var(--usuarios-transition),
    box-shadow
      var(--usuarios-transition);
}



.usuarios-search:focus-within {
  background:
    var(--usuarios-surface);

  border-color:
    var(--usuarios-border-strong);

  box-shadow:
    0 0 0 3px
    rgba(
      127,
      127,
      127,
      0.08
    );
}



.usuarios-search > svg {
  width: 13px;
  height: 13px;

  flex:
    0 0
    13px;

  color:
    var(--usuarios-muted);

  stroke-width: 1.9;
}



.usuarios-search input {
  min-width: 0;

  flex: 1;

  border: 0;
  outline: 0;

  color:
    var(--usuarios-text);

  background:
    transparent;

  font-family: inherit;
  font-size: 9px;
  font-weight: 580;
}



.usuarios-search input::placeholder {
  color:
    var(--usuarios-muted);

  opacity: 0.75;
}



.usuarios-search button {
  width: 25px;
  height: 25px;

  flex:
    0 0
    25px;

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

  padding: 0;

  color:
    var(--usuarios-muted);

  background:
    transparent;

  border: 0;

  border-radius: 7px;

  cursor: pointer;
}



.usuarios-search button:hover {
  color:
    var(--usuarios-text);

  background:
    var(--usuarios-surface-hover);
}



.usuarios-search button svg {
  width: 12px;
  height: 12px;
}



.usuarios-toolbar-actions {
  display: flex;
  align-items: center;

  gap: 7px;
}



.usuarios-refresh-button {
  width: 32px;
  height: 32px;

  flex:
    0 0
    32px;

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

  padding: 0;

  color:
    var(--usuarios-text-soft);

  background:
    var(--usuarios-surface-soft);

  border:
    1px solid
    var(--usuarios-border);

  border-radius:
    9px;

  cursor: pointer;

  transition:
    color
      var(--usuarios-transition),
    background-color
      var(--usuarios-transition),
    border-color
      var(--usuarios-transition),
    transform
      var(--usuarios-transition);
}



.usuarios-refresh-button:hover:not(
  :disabled
) {
  color:
    var(--usuarios-text);

  background:
    var(--usuarios-surface-hover);

  border-color:
    var(--usuarios-border-strong);

  transform:
    translateY(-1px);
}



.usuarios-refresh-button svg {
  width: 13px;
  height: 13px;
}



.usuarios-counter {
  min-width: 88px;

  display: flex;
  align-items: baseline;
  justify-content: flex-end;

  gap: 4px;

  padding-right: 3px;

  color:
    var(--usuarios-muted);

  font-size: 8px;
  font-weight: 600;
}



.usuarios-counter strong {
  color:
    var(--usuarios-text);

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

  font-variant-numeric:
    tabular-nums;
}



.usuarios-table-card {
  width: 100%;
  min-width: 0;

  overflow: hidden;

  background:
    var(--usuarios-surface);

  border:
    1px solid
    var(--usuarios-border);

  border-radius:
    var(--usuarios-radius-md);

  box-shadow:
    var(--usuarios-shadow);

  transition:
    border-color
      var(--usuarios-transition),
    box-shadow
      var(--usuarios-transition),
    transform
      var(--usuarios-transition),
    background-color
      var(--usuarios-transition);
}



.usuarios-table-card:hover {
  border-color:
    var(--usuarios-border-strong);

  box-shadow:
    var(--usuarios-shadow-hover);

  transform:
    translateY(-1px);
}



.usuarios-table-scroll {
  width: 100%;

  overflow-x: auto;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--usuarios-border-strong)
    transparent;
}



.usuarios-table-scroll::-webkit-scrollbar {
  height: 5px;
}



.usuarios-table-scroll::-webkit-scrollbar-track {
  background:
    transparent;
}



.usuarios-table-scroll::-webkit-scrollbar-thumb {
  background:
    var(--usuarios-border-strong);

  border-radius:
    999px;
}



.usuarios-table {
  width: 100%;

  min-width: 960px;

  border-collapse: collapse;

  white-space: nowrap;
}



.usuarios-table th {
  height: 38px;

  padding:
    0 12px;

  color:
    var(--usuarios-muted);

  background:
    var(--usuarios-surface-soft);

  border-bottom:
    1px solid
    var(--usuarios-border);

  text-align: left;

  font-size: 7.5px;
  font-weight: 730;

  letter-spacing:
    0.055em;

  text-transform:
    uppercase;
}



.usuarios-table td {
  height: 54px;

  padding:
    8px 12px;

  color:
    var(--usuarios-text-soft);

  border-bottom:
    1px solid
    var(--usuarios-border);

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

  vertical-align: middle;
}



.usuarios-table tbody
tr:last-child td {
  border-bottom: 0;
}



.usuarios-table tbody tr {
  transition:
    background-color
      var(--usuarios-transition);
}



.usuarios-table tbody tr:hover {
  background:
    var(--usuarios-surface-soft);
}



.usuario-main {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 8px;
}



.usuario-avatar {
  width: 31px;
  height: 31px;

  flex:
    0 0
    31px;

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

  color:
    var(--usuarios-primary-contrast);

  background:
    var(--usuarios-primary);

  border-radius: 9px;

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

  letter-spacing:
    -0.01em;

  transition:
    transform
      var(--usuarios-transition),
    border-radius
      var(--usuarios-transition);
}



.usuarios-table tbody tr:hover
.usuario-avatar,
.usuario-mobile-card:hover
.usuario-avatar {
  border-radius: 50%;

  transform:
    scale(1.03);
}



.usuario-main-copy {
  min-width: 0;
}



.usuario-main-copy strong {
  display: block;

  max-width: 220px;

  overflow: hidden;

  color:
    var(--usuarios-text);

  font-size: 9.5px;
  font-weight: 690;

  text-overflow:
    ellipsis;
}



.usuario-main-copy span {
  display: block;

  max-width: 220px;

  margin-top: 2px;

  overflow: hidden;

  color:
    var(--usuarios-muted);

  font-size: 7.5px;
  font-weight: 540;

  text-overflow:
    ellipsis;
}



.usuarios-username {
  color:
    var(--usuarios-text-soft);

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



.usuarios-role {
  min-height: 23px;

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

  padding:
    0 7px;

  color:
    var(--usuarios-text-soft);

  background:
    var(--usuarios-surface-soft);

  border:
    1px solid
    var(--usuarios-border);

  border-radius:
    7px;

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



.usuarios-status {
  min-height: 22px;

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

  padding:
    0 7px;

  border-radius:
    999px;

  font-size: 7px;
  font-weight: 720;

  letter-spacing:
    0.035em;
}



.usuarios-status.is-active {
  color:
    var(--usuarios-success);

  background:
    var(--usuarios-success-soft);
}



.usuarios-status.is-inactive {
  color:
    var(--usuarios-muted);

  background:
    var(--usuarios-surface-hover);
}



.usuarios-status.is-blocked {
  color:
    var(--usuarios-danger);

  background:
    var(--usuarios-danger-soft);
}



.usuarios-status.is-suspended {
  color:
    var(--usuarios-warning);

  background:
    var(--usuarios-warning-soft);
}



.usuarios-status.is-pending {
  color:
    var(--usuarios-info);

  background:
    var(--usuarios-info-soft);
}



.usuarios-last-login {
  min-width: 0;
}



.usuarios-last-login strong {
  display: block;

  color:
    var(--usuarios-text-soft);

  font-size: 8px;
  font-weight: 620;
}



.usuarios-password-warning {
  display: inline-flex;
  align-items: center;

  gap: 4px;

  margin-top: 3px;

  color:
    var(--usuarios-warning);

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



.usuarios-password-warning svg {
  width: 10px;
  height: 10px;
}



.usuarios-created {
  color:
    var(--usuarios-muted);

  font-size: 7.5px;
  font-weight: 560;
}



.usuarios-actions-heading,
.usuarios-actions-cell {
  text-align:
    right !important;
}



.usuarios-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 4px;
}



.usuario-icon-button {
  width: 29px;
  height: 29px;

  flex:
    0 0
    29px;

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

  padding: 0;

  color:
    var(--usuarios-muted);

  background:
    var(--usuarios-surface);

  border:
    1px solid
    var(--usuarios-border);

  border-radius:
    8px;

  cursor: pointer;

  transition:
    color
      var(--usuarios-transition),
    background-color
      var(--usuarios-transition),
    border-color
      var(--usuarios-transition),
    transform
      var(--usuarios-transition);
}



.usuario-icon-button:hover {
  color:
    var(--usuarios-text);

  background:
    var(--usuarios-surface-hover);

  border-color:
    var(--usuarios-border-strong);

  transform:
    translateY(-1px);
}



.usuario-icon-button svg {
  width: 12px;
  height: 12px;
}



.usuario-icon-button-danger:hover {
  color:
    var(--usuarios-danger);

  background:
    var(--usuarios-danger-soft);

  border-color:
    var(--usuarios-danger-border);
}



.usuarios-you {
  min-height: 23px;

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

  padding:
    0 7px;

  color:
    var(--usuarios-text-soft);

  background:
    var(--usuarios-surface-soft);

  border:
    1px solid
    var(--usuarios-border);

  border-radius:
    999px;

  font-size: 7px;
  font-weight: 680;
}



.usuarios-empty {
  height: 220px;

  text-align: center;
}



.usuarios-empty-card {
  min-height: 190px;

  display: none;

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

  padding: 20px;

  text-align: center;

  background:
    var(--usuarios-surface);

  border:
    1px solid
    var(--usuarios-border);

  border-radius:
    var(--usuarios-radius-md);
}



.usuarios-empty-icon {
  width: 42px;
  height: 42px;

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

  margin:
    0 auto 9px;

  color:
    var(--usuarios-muted);

  background:
    var(--usuarios-surface-soft);

  border:
    1px solid
    var(--usuarios-border);

  border-radius: 12px;
}



.usuarios-empty-icon svg {
  width: 17px;
  height: 17px;
}



.usuarios-empty strong,
.usuarios-empty span,
.usuarios-empty-card strong,
.usuarios-empty-card span {
  display: block;
}



.usuarios-empty strong,
.usuarios-empty-card strong {
  color:
    var(--usuarios-text);

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



.usuarios-empty span,
.usuarios-empty-card span {
  margin-top: 3px;

  color:
    var(--usuarios-muted);

  font-size: 8px;
  font-weight: 550;
}



.usuarios-mobile-list {
  display: none;
}



.usuario-mobile-card {
  min-width: 0;

  padding: 12px;

  background:
    var(--usuarios-surface);

  border:
    1px solid
    var(--usuarios-border);

  border-radius:
    var(--usuarios-radius-md);

  box-shadow:
    var(--usuarios-shadow);

  transition:
    transform
      var(--usuarios-transition),
    border-color
      var(--usuarios-transition),
    box-shadow
      var(--usuarios-transition);
}



.usuario-mobile-card:hover {
  border-color:
    var(--usuarios-border-strong);

  box-shadow:
    var(--usuarios-shadow-hover);

  transform:
    translateY(-1px);
}



.usuario-mobile-head {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 10px;
}



.usuario-mobile-data {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap: 8px;

  margin-top: 12px;

  padding-top: 10px;

  border-top:
    1px solid
    var(--usuarios-border);
}



.usuario-mobile-data > div {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 2px;
}



.usuario-mobile-data span {
  color:
    var(--usuarios-muted);

  font-size: 7px;
  font-weight: 560;
}



.usuario-mobile-data strong {
  overflow-wrap: anywhere;

  color:
    var(--usuarios-text-soft);

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



.usuarios-mobile-actions {
  display: flex;
  align-items: center;

  gap: 5px;

  margin-top: 10px;

  padding-top: 10px;

  border-top:
    1px solid
    var(--usuarios-border);
}



.usuario-action-button {
  min-height: 30px;

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

  gap: 5px;

  padding:
    0 8px;

  color:
    var(--usuarios-text-soft);

  background:
    var(--usuarios-surface-soft);

  border:
    1px solid
    var(--usuarios-border);

  border-radius: 8px;

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

  cursor: pointer;
}



.usuario-action-button svg {
  width: 11px;
  height: 11px;
}



.usuario-action-button.is-danger {
  color:
    var(--usuarios-danger);
}



.usuarios-modal-backdrop {
  position: fixed;

  inset: 0;

  z-index: 5000;

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

  padding: 18px;

  overflow-y: auto;

  background:
    rgba(
      0,
      0,
      0,
      0.42
    );

  backdrop-filter:
    blur(5px);

  -webkit-backdrop-filter:
    blur(5px);

  animation:
    usuariosBackdropEnter
    180ms
    ease
    both;
}



.usuarios-modal {
  width:
    min(
      100%,
      680px
    );

  max-height:
    calc(
      100dvh - 36px
    );

  overflow-y: auto;
  overflow-x: hidden;

  background:
    var(--usuarios-surface);

  border:
    1px solid
    var(--usuarios-border-strong);

  border-radius:
    var(--usuarios-radius-lg);

  box-shadow:
    var(--usuarios-modal-shadow);

  scrollbar-width:
    thin;

  scrollbar-color:
    var(--usuarios-border-strong)
    transparent;

  animation:
    usuariosModalEnter
    240ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    both;
}



.usuarios-modal-small {
  width:
    min(
      100%,
      460px
    );
}



.usuarios-modal-delete {
  position: relative;

  width:
    min(
      100%,
      420px
    );

  padding: 24px;

  text-align: center;
}



.usuarios-modal-header {
  position: sticky;

  top: 0;

  z-index: 4;

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

  gap: 16px;

  padding:
    17px 18px;

  background:
    var(--usuarios-surface);

  border-bottom:
    1px solid
    var(--usuarios-border);

  backdrop-filter:
    blur(16px);

  -webkit-backdrop-filter:
    blur(16px);
}



.usuarios-modal-heading {
  min-width: 0;
}



.usuarios-modal-header h2 {
  font-size: 17px;
}



.usuarios-modal-header p {
  margin:
    4px 0 0;

  color:
    var(--usuarios-muted);

  font-size: 8.5px;
  font-weight: 550;
}



.usuarios-modal-close {
  width: 31px;
  height: 31px;

  flex:
    0 0
    31px;

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

  padding: 0;

  color:
    var(--usuarios-muted);

  background:
    var(--usuarios-surface-soft);

  border:
    1px solid
    var(--usuarios-border);

  border-radius: 9px;

  cursor: pointer;

  transition:
    color
      var(--usuarios-transition),
    background-color
      var(--usuarios-transition),
    border-color
      var(--usuarios-transition),
    transform
      var(--usuarios-transition);
}



.usuarios-modal-close:hover {
  color:
    var(--usuarios-text);

  background:
    var(--usuarios-surface-hover);

  border-color:
    var(--usuarios-border-strong);

  transform:
    rotate(4deg);
}



.usuarios-modal-close svg {
  width: 13px;
  height: 13px;
}



.usuarios-delete-close {
  position: absolute;

  top: 12px;
  right: 12px;
}



.usuarios-form {
  padding: 18px;
}



.usuarios-form-grid {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(
        0,
        1fr
      )
    );

  gap:
    12px
    13px;
}



.usuarios-form-grid-single {
  grid-template-columns:
    1fr;
}



.usuarios-field {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 5px;
}



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



.usuarios-field > span {
  color:
    var(--usuarios-text-soft);

  font-size: 8.5px;
  font-weight: 660;
}



.usuarios-input-wrap,
.usuarios-password-field {
  position: relative;

  width: 100%;
  min-width: 0;
}



.usuarios-input-wrap > svg,
.usuarios-password-field > svg {
  position: absolute;

  top: 50%;
  left: 9px;

  z-index: 2;

  width: 12px;
  height: 12px;

  color:
    var(--usuarios-muted);

  stroke-width: 1.8;

  transform:
    translateY(-50%);

  pointer-events: none;
}



.usuarios-field input,
.usuarios-field select {
  width: 100%;

  min-height: 36px;

  padding:
    0 9px;

  outline: none;

  color:
    var(--usuarios-text);

  background:
    var(--usuarios-surface-soft);

  border:
    1px solid
    var(--usuarios-border);

  border-radius:
    var(--usuarios-radius-sm);

  font-family: inherit;
  font-size: 9px;
  font-weight: 570;

  transition:
    background-color
      var(--usuarios-transition),
    border-color
      var(--usuarios-transition),
    box-shadow
      var(--usuarios-transition);
}



.usuarios-input-wrap input,
.usuarios-input-wrap select {
  padding-left: 29px;
}



.usuarios-field input:hover,
.usuarios-field select:hover {
  border-color:
    var(--usuarios-border-strong);
}



.usuarios-field input:focus,
.usuarios-field select:focus {
  background:
    var(--usuarios-surface);

  border-color:
    var(--usuarios-border-strong);

  box-shadow:
    0 0 0 3px
    rgba(
      127,
      127,
      127,
      0.08
    );
}



.usuarios-field select {
  cursor: pointer;
}



.usuarios-password-field input {
  padding:
    0 37px
    0 29px;
}



.usuarios-password-field button {
  position: absolute;

  top: 50%;
  right: 4px;

  width: 27px;
  height: 27px;

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

  padding: 0;

  color:
    var(--usuarios-muted);

  background:
    transparent;

  border: 0;

  border-radius: 7px;

  cursor: pointer;

  transform:
    translateY(-50%);
}



.usuarios-password-field button:hover {
  color:
    var(--usuarios-text);

  background:
    var(--usuarios-surface-hover);
}



.usuarios-password-field button svg {
  width: 12px;
  height: 12px;
}



.usuarios-check {
  position: relative;

  display: flex;
  align-items: flex-start;

  gap: 7px;

  margin-top: 14px;

  color:
    var(--usuarios-text-soft);

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

  line-height: 1.45;

  cursor: pointer;
}



.usuarios-check input {
  position: absolute;

  opacity: 0;

  pointer-events: none;
}



.usuarios-check-control {
  width: 16px;
  height: 16px;

  flex:
    0 0
    16px;

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

  color: transparent;

  background:
    var(--usuarios-surface-soft);

  border:
    1px solid
    var(--usuarios-border-strong);

  border-radius: 5px;

  transition:
    color
      var(--usuarios-transition),
    background-color
      var(--usuarios-transition),
    border-color
      var(--usuarios-transition);
}



.usuarios-check-control svg {
  width: 10px;
  height: 10px;

  stroke-width: 2.5;
}



.usuarios-check input:checked
+ .usuarios-check-control {
  color:
    var(--usuarios-primary-contrast);

  background:
    var(--usuarios-primary);

  border-color:
    var(--usuarios-primary);
}



.usuarios-password-strength {
  margin-top: 13px;

  padding: 9px;

  background:
    var(--usuarios-surface-soft);

  border:
    1px solid
    var(--usuarios-border);

  border-radius:
    var(--usuarios-radius-sm);
}



.usuarios-password-strength > div:first-child {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 8px;

  margin-bottom: 6px;
}



.usuarios-password-strength span,
.usuarios-password-strength strong {
  font-size: 7.5px;
}



.usuarios-password-strength span {
  color:
    var(--usuarios-muted);

  font-weight: 550;
}



.usuarios-password-strength strong {
  color:
    var(--usuarios-text-soft);

  font-weight: 650;
}



.usuarios-password-strength-track {
  width: 100%;
  height: 4px;

  overflow: hidden;

  background:
    var(--usuarios-border);

  border-radius:
    999px;
}



.usuarios-password-strength-track > span {
  width: 0;
  height: 100%;

  display: block;

  background:
    var(--usuarios-muted);

  border-radius:
    inherit;

  transition:
    width
      220ms
      cubic-bezier(
        0.22,
        1,
        0.36,
        1
      ),
    background-color
      var(--usuarios-transition);
}



.usuarios-password-strength-track
> span[data-level="1"] {
  background:
    var(--usuarios-danger);
}



.usuarios-password-strength-track
> span[data-level="2"] {
  background:
    var(--usuarios-warning);
}



.usuarios-password-strength-track
> span[data-level="3"] {
  background:
    var(--usuarios-success);
}



.usuarios-form-error {
  margin-top: 13px;

  padding:
    9px 10px;

  color:
    var(--usuarios-danger);

  background:
    var(--usuarios-danger-soft);

  border:
    1px solid
    var(--usuarios-danger-border);

  border-radius:
    var(--usuarios-radius-sm);

  font-size: 8px;
  font-weight: 620;
}



.usuarios-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 7px;

  margin-top: 16px;

  padding-top: 13px;

  border-top:
    1px solid
    var(--usuarios-border);
}



.usuarios-delete-icon {
  width: 46px;
  height: 46px;

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

  margin:
    3px auto 12px;

  color:
    var(--usuarios-danger);

  background:
    var(--usuarios-danger-soft);

  border:
    1px solid
    var(--usuarios-danger-border);

  border-radius: 13px;
}



.usuarios-delete-icon svg {
  width: 18px;
  height: 18px;
}



.usuarios-modal-delete h2 {
  margin: 0;

  color:
    var(--usuarios-text);

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



.usuarios-modal-delete p {
  margin:
    7px 0 0;

  color:
    var(--usuarios-muted);

  font-size: 8.5px;
  font-weight: 550;

  line-height: 1.5;
}



.usuarios-modal-delete p strong {
  color:
    var(--usuarios-text-soft);
}



.usuarios-delete-warning {
  display: block;

  margin-top: 8px;

  color:
    var(--usuarios-danger);

  font-size: 7.5px;
  font-weight: 600;
}



.usuarios-modal-delete
.usuarios-modal-footer {
  justify-content:
    center;
}



.usuarios-state {
  min-height: 340px;

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

  gap: 11px;

  padding: 20px;

  color:
    var(--usuarios-muted);
}



.usuarios-state-icon {
  width: 40px;
  height: 40px;

  flex:
    0 0
    40px;

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

  color:
    var(--usuarios-text-soft);

  background:
    var(--usuarios-surface);

  border:
    1px solid
    var(--usuarios-border);

  border-radius: 11px;

  box-shadow:
    var(--usuarios-shadow);
}



.usuarios-state-icon svg {
  width: 17px;
  height: 17px;
}



.usuarios-state:not(
  .usuarios-state-error
)
.usuarios-state-icon svg {
  animation:
    usuariosSpin
    900ms
    linear
    infinite;
}



.usuarios-state > div:last-child {
  display: flex;
  flex-direction: column;

  align-items: flex-start;

  gap: 3px;
}



.usuarios-state strong {
  color:
    var(--usuarios-text);

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



.usuarios-state span {
  max-width: 350px;

  color:
    var(--usuarios-muted);

  font-size: 8.5px;
  font-weight: 550;
}



.usuarios-state .usuarios-button {
  margin-top: 7px;
}



.usuarios-forbidden {
  min-height: 350px;

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

  text-align: center;
}



.usuarios-forbidden-icon {
  width: 46px;
  height: 46px;

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

  margin-bottom: 11px;

  color:
    var(--usuarios-danger);

  background:
    var(--usuarios-danger-soft);

  border:
    1px solid
    var(--usuarios-danger-border);

  border-radius: 13px;
}



.usuarios-forbidden-icon svg {
  width: 19px;
  height: 19px;
}



.usuarios-forbidden h1 {
  margin: 0;

  color:
    var(--usuarios-text);

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



.usuarios-forbidden p {
  max-width: 380px;

  margin:
    5px 0 0;

  color:
    var(--usuarios-muted);

  font-size: 8.5px;
  font-weight: 550;

  line-height: 1.5;
}



.usuarios-enter {
  opacity: 0;

  animation:
    usuariosEnter
    360ms
    cubic-bezier(
      0.22,
      1,
      0.36,
      1
    )
    var(
      --usuarios-delay,
      0ms
    )
    forwards;
}



body.usuarios-modal-open {
  overflow: hidden;
}



html[data-theme="dark"]
.usuarios-field input,
html[data-theme="dark"]
.usuarios-field select,
html[data-theme="dark"]
.usuarios-search input {
  color-scheme:
    dark;
}



html[data-theme="light"]
.usuarios-field input,
html[data-theme="light"]
.usuarios-field select,
html[data-theme="light"]
.usuarios-search input {
  color-scheme:
    light;
}



@keyframes usuariosEnter {
  from {
    opacity: 0;

    transform:
      translateY(7px)
      scale(0.995);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}



@keyframes usuariosBackdropEnter {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}



@keyframes usuariosModalEnter {
  from {
    opacity: 0;

    transform:
      translateY(10px)
      scale(0.975);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}



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



@media (
  max-width: 1120px
) {
  .usuarios-table {
    min-width: 900px;
  }
}



@media (
  max-width: 900px
) {
  .usuarios-heading {
    align-items:
      stretch;

    gap: 12px;
  }

  .usuarios-table-card {
    display: none;
  }

  .usuarios-mobile-list {
    display: grid;

    gap: 9px;
  }

  .usuarios-empty-card {
    display: flex;
  }
}



@media (
  max-width: 720px
) {
  .usuarios-heading {
    flex-direction:
      column;
  }

  .usuarios-heading
  > .usuarios-button {
    align-self:
      flex-start;
  }

  .usuarios-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }

  .usuarios-search {
    width: 100%;
  }

  .usuarios-toolbar-actions {
    justify-content:
      space-between;
  }

  .usuarios-counter {
    justify-content:
      flex-end;
  }

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

  .usuarios-field-full {
    grid-column:
      auto;
  }

  .usuarios-modal-backdrop {
    align-items:
      flex-start;

    padding: 10px;
  }

  .usuarios-modal {
    max-height:
      calc(
        100dvh - 20px
      );

    border-radius:
      14px;
  }

  .usuarios-modal-header {
    padding:
      14px;
  }

  .usuarios-form {
    padding:
      14px;
  }
}



@media (
  max-width: 520px
) {
  .usuarios-heading h1 {
    font-size: 19px;
  }

  .usuarios-heading p {
    font-size: 8px;
  }

  .usuarios-heading
  > .usuarios-button {
    width: 100%;
  }

  .usuario-mobile-card {
    padding: 10px;
  }

  .usuario-mobile-head {
    align-items:
      flex-start;
  }

  .usuario-mobile-data {
    grid-template-columns:
      1fr;
  }

  .usuarios-mobile-actions {
    display: grid;

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

  .usuario-action-button {
    width: 100%;
  }

  .usuarios-you {
    min-height: 30px;
  }

  .usuarios-modal-footer {
    flex-direction:
      column-reverse;
  }

  .usuarios-modal-footer
  .usuarios-button {
    width: 100%;
  }

  .usuarios-modal-delete {
    padding: 20px 14px;
  }
}



@media (
  max-width: 380px
) {
  .usuario-mobile-head {
    flex-direction:
      column;

    gap: 8px;
  }

  .usuarios-mobile-actions {
    grid-template-columns:
      1fr;
  }
}



@media (
  hover: none
) {
  .usuarios-table-card:hover,
  .usuario-mobile-card:hover,
  .usuarios-button:hover:not(
    :disabled
  ),
  .usuarios-refresh-button:hover:not(
    :disabled
  ),
  .usuario-icon-button:hover {
    transform: none;
  }
}



@media (
  prefers-reduced-motion:
  reduce
) {
  .usuarios-heading,
  .usuarios-toolbar,
  .usuarios-table-card,
  .usuario-mobile-card,
  .usuarios-feedback,
  .usuarios-button,
  .usuarios-refresh-button,
  .usuario-icon-button,
  .usuario-avatar,
  .usuarios-search,
  .usuarios-modal,
  .usuarios-modal-backdrop,
  .usuarios-modal-close,
  .usuarios-field input,
  .usuarios-field select,
  .usuarios-password-strength-track
  > span,
  .usuarios-enter {
    animation:
      none !important;

    transition:
      none !important;
  }

  .usuarios-enter {
    opacity: 1;
  }
}.usuarios-page {
  --usuarios-text: #0f1115;
  --usuarios-text-soft: #2f3742;
  --usuarios-muted: #5f6874;
}

html[data-theme="dark"]
.usuarios-page,
body[data-theme="dark"]
.usuarios-page {
  --usuarios-text: #ffffff;
  --usuarios-text-soft: #e2e5e9;
  --usuarios-muted: #b4bac2;
}

.usuarios-heading h1 {
  font-size: 25px;
  font-weight: 850;
}

.usuarios-heading p {
  font-size: 10.5px;
  font-weight: 650;
  color: var(--usuarios-text-soft);
}

.usuarios-eyebrow,
.usuarios-modal-eyebrow {
  font-size: 9px;
  font-weight: 850;
  color: var(--usuarios-text-soft);
}

.usuarios-button {
  font-size: 10.5px;
  font-weight: 800;
}

.usuarios-search input {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--usuarios-text);
}

.usuarios-search input::placeholder {
  color: var(--usuarios-muted);
  font-weight: 650;
  opacity: 1;
}

.usuarios-counter {
  font-size: 9.5px;
  font-weight: 700;
  color: var(--usuarios-text-soft);
}

.usuarios-counter strong {
  font-size: 15px;
  font-weight: 850;
}

.usuarios-table th {
  font-size: 8.5px;
  font-weight: 850;
  color: var(--usuarios-text-soft);
}

.usuarios-table td {
  font-size: 10px;
  font-weight: 650;
  color: var(--usuarios-text-soft);
}

.usuario-main-copy strong {
  font-size: 11px;
  font-weight: 800;
  color: var(--usuarios-text);
}

.usuario-main-copy span {
  font-size: 8.5px;
  font-weight: 650;
  color: var(--usuarios-text-soft);
}

.usuarios-username {
  font-size: 9.5px;
  font-weight: 750;
  color: var(--usuarios-text);
}

.usuarios-role {
  font-size: 8.5px;
  font-weight: 800;
  color: var(--usuarios-text);
}

.usuarios-status {
  font-size: 8px;
  font-weight: 850;
}

.usuarios-last-login strong {
  font-size: 9px;
  font-weight: 750;
  color: var(--usuarios-text);
}

.usuarios-password-warning {
  font-size: 7.5px;
  font-weight: 800;
}

.usuarios-created {
  font-size: 8.5px;
  font-weight: 700;
  color: var(--usuarios-text-soft);
}

.usuarios-you {
  font-size: 8px;
  font-weight: 800;
  color: var(--usuarios-text);
}

.usuarios-feedback {
  font-size: 9.5px;
  font-weight: 700;
}

.usuarios-modal-header h2 {
  font-size: 19px;
  font-weight: 850;
}

.usuarios-modal-header p {
  font-size: 9.5px;
  font-weight: 650;
  color: var(--usuarios-text-soft);
}

.usuarios-field > span {
  font-size: 9.5px;
  font-weight: 800;
  color: var(--usuarios-text);
}

.usuarios-field input,
.usuarios-field select {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--usuarios-text);
}

.usuarios-check {
  font-size: 9px;
  font-weight: 700;
  color: var(--usuarios-text-soft);
}

.usuarios-form-error {
  font-size: 9px;
  font-weight: 750;
}

.usuarios-password-strength span,
.usuarios-password-strength strong {
  font-size: 8.5px;
  font-weight: 750;
}

.usuario-mobile-data span {
  font-size: 8px;
  font-weight: 700;
  color: var(--usuarios-muted);
}

.usuario-mobile-data strong {
  font-size: 9px;
  font-weight: 750;
  color: var(--usuarios-text);
}

.usuario-action-button {
  font-size: 8.5px;
  font-weight: 750;
}

.usuarios-empty strong,
.usuarios-empty-card strong {
  font-size: 11px;
  font-weight: 800;
  color: var(--usuarios-text);
}

.usuarios-empty span,
.usuarios-empty-card span {
  font-size: 9px;
  font-weight: 650;
  color: var(--usuarios-text-soft);
}