.users-admin-filters {
  grid-template-columns:
    minmax(
      230px,
      1fr
    )
    minmax(
      150px,
      190px
    )
    minmax(
      150px,
      190px
    )
    auto
    auto;
}

.users-admin-metrics {
  display:
    grid;

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

  gap:
    16px;
}

.users-admin-metrics article {
  display:
    grid;

  min-height:
    108px;

  align-content:
    center;

  gap:
    7px;
}

.users-admin-metrics span {
  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.11em;
}

.users-admin-metrics strong {
  color:
    var(
      --text
    );

  font-family:
    monospace;

  font-size:
    30px;
}

.user-admin-identity {
  display:
    flex;

  min-width:
    220px;

  align-items:
    center;

  gap:
    11px;
}

.user-admin-avatar {
  display:
    grid;

  width:
    40px;

  height:
    40px;

  flex:
    0 0
    40px;

  place-items:
    center;

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

  background:
    var(
      --surface-secondary
    );

  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-weight:
    700;
}

.user-admin-identity > div {
  display:
    grid;

  min-width:
    0;

  gap:
    3px;
}

.user-admin-identity strong {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  color:
    var(
      --text
    );
}

.user-admin-identity strong small {
  padding:
    2px
    5px;

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

  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-size:
    7px;

  letter-spacing:
    0.08em;
}

.user-admin-identity > div > span {
  overflow:
    hidden;

  color:
    var(
      --text-muted
    );

  font-size:
    11px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.user-admin-role {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    6px
    8px;

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

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.07em;
}

.user-admin-role svg {
  width:
    14px;

  height:
    14px;
}

.user-admin-role--admin {
  border-color:
    var(
      --primary
    );

  color:
    var(
      --primary
    );

  background:
    var(
      --primary-muted
    );
}

.user-admin-role--usuario {
  color:
    var(
      --text-secondary
    );
}

.user-admin-activity {
  display:
    grid;

  gap:
    3px;

  min-width:
    105px;
}

.user-admin-activity span {
  color:
    var(
      --text-secondary
    );

  font-size:
    11px;
}

.users-admin-actions {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;
}

.users-admin-delete {
  color:
    var(
      --danger
    );
}

.user-password-target {
  display:
    grid;

  gap:
    4px;

  margin-bottom:
    20px;

  padding:
    15px;

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

  background:
    var(
      --background-secondary
    );
}

.user-password-target span {
  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.11em;
}

.user-password-target strong {
  color:
    var(
      --text
    );

  font-size:
    17px;
}

.user-password-target small {
  color:
    var(
      --text-muted
    );
}

.user-password-form {
  display:
    grid;

  gap:
    16px;
}

@media (
  max-width:
    1150px
) {
  .users-admin-filters {
    grid-template-columns:
      minmax(
        220px,
        1fr
      )
      minmax(
        140px,
        180px
      )
      minmax(
        140px,
        180px
      );
  }

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

@media (
  max-width:
    760px
) {
  .users-admin-filters {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }

  .users-admin-metrics {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }

  .users-admin-metrics article {
    min-height:
      86px;
  }
}

/* =========================================================
   USUARIOS · VISTA MÓVIL SIN SCROLL HORIZONTAL
   ========================================================= */

@media (
  max-width:
    760px
) {
  body:has(
    a[href="#/usuarios"].is-active
  ) {
    width:
      100%;

    max-width:
      100%;

    overflow-x:
      hidden
      !important;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  #app,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .app-layout,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .main-content,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .page-content {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    overflow-x:
      hidden
      !important;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .main-content {
    margin:
      0
      !important;

    padding:
      0
      !important;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .sidebar
  +
  .main-content {
    margin-left:
      0
      !important;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .page-content {
    display:
      grid;

    gap:
      14px;

    padding:
      14px
      !important;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .app-topbar,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .topbar,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .page-header {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    margin:
      0
      !important;

    overflow:
      hidden;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .users-admin-toolbar,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .users-admin-metrics,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .users-admin-table,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .card,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .table-card,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .table-wrapper {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    overflow-x:
      hidden
      !important;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .users-admin-filters {
    display:
      grid;

    width:
      100%;

    min-width:
      0;

    grid-template-columns:
      minmax(
        0,
        1fr
      )
      !important;

    gap:
      13px;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .users-admin-filters
  .field,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .users-admin-filters
  input,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .users-admin-filters
  select,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .users-admin-filters
  button {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .users-admin-metrics {
    grid-template-columns:
      minmax(
        0,
        1fr
      );

    gap:
      12px;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .users-admin-metrics
  article {
    min-height:
      82px;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .users-admin-table {
    padding:
      0;

    border:
      0;

    background:
      transparent;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .table-wrapper {
    overflow:
      visible
      !important;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table {
    display:
      block;

    width:
      100%;

    min-width:
      0
      !important;

    max-width:
      100%;

    border:
      0;

    table-layout:
      fixed;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  thead {
    display:
      none;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody {
    display:
      grid;

    width:
      100%;

    gap:
      12px;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  tr {
    position:
      relative;

    display:
      grid;

    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    padding:
      16px;

    overflow:
      hidden;

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

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

    background:
      var(
        --surface
      );
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  tr::before {
    position:
      absolute;

    top:
      0;

    left:
      16px;

    width:
      42px;

    height:
      2px;

    background:
      var(
        --primary
      );

    content:
      "";
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  td {
    display:
      grid;

    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    grid-template-columns:
      minmax(
        86px,
        31%
      )
      minmax(
        0,
        1fr
      );

    align-items:
      start;

    gap:
      10px;

    padding:
      11px
      0;

    border:
      0;

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

    overflow:
      hidden;

    text-align:
      left;

    white-space:
      normal;

    overflow-wrap:
      anywhere;

    word-break:
      break-word;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  td:last-child {
    padding-bottom:
      0;

    border-bottom:
      0;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  td:nth-child(1)::before {
    content:
      "USUARIO";
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  td:nth-child(2)::before {
    content:
      "ROL";
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  td:nth-child(3)::before {
    content:
      "ACTIVIDAD";
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  td:nth-child(4)::before {
    content:
      "CREADO";
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  td:nth-child(5)::before {
    content:
      "ESTADO";
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  td:nth-child(6)::before {
    content:
      "ACCIONES";
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  td::before {
    color:
      var(
        --text-muted
      );

    font-family:
      monospace;

    font-size:
      8px;

    font-weight:
      600;

    letter-spacing:
      0.1em;

    line-height:
      1.5;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  td[colspan] {
    display:
      block;

    padding:
      30px
      14px;

    border:
      0;

    color:
      var(
        --text-muted
      );

    text-align:
      center;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  td[colspan]::before {
    display:
      none;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .user-admin-identity {
    width:
      100%;

    min-width:
      0;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .user-admin-identity
  > div {
    min-width:
      0;

    max-width:
      100%;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .user-admin-identity
  > div
  > span,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .user-admin-identity
  strong {
    max-width:
      100%;

    overflow:
      hidden;

    text-overflow:
      ellipsis;

    white-space:
      normal;

    overflow-wrap:
      anywhere;

    word-break:
      break-word;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .user-admin-activity {
    width:
      100%;

    min-width:
      0;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .users-admin-actions {
    display:
      flex;

    width:
      100%;

    min-width:
      0;

    flex-wrap:
      wrap;

    justify-content:
      flex-start;

    gap:
      7px;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .pagination {
    display:
      grid;

    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

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

    align-items:
      center;

    gap:
      8px;

    padding:
      12px;

    overflow:
      hidden;

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

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

    background:
      var(
        --surface
      );
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .pagination
  button,
  body:has(
    a[href="#/usuarios"].is-active
  )
  .pagination
  .button {
    width:
      100%;

    min-width:
      0;

    max-width:
      100%;

    padding-right:
      8px;

    padding-left:
      8px;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .pagination
  > span {
    min-width:
      68px;

    color:
      var(
        --text-muted
      );

    font-family:
      monospace;

    font-size:
      8px;

    text-align:
      center;

    white-space:
      nowrap;
  }
}

@media (
  max-width:
    430px
) {
  body:has(
    a[href="#/usuarios"].is-active
  )
  .page-content {
    padding:
      10px
      !important;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  tr {
    padding:
      14px;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  table
  tbody
  td {
    grid-template-columns:
      minmax(
        75px,
        28%
      )
      minmax(
        0,
        1fr
      );

    gap:
      8px;

    font-size:
      12px;
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .pagination {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        0,
        1fr
      );
  }

  body:has(
    a[href="#/usuarios"].is-active
  )
  .pagination
  > span {
    grid-column:
      1 /
      -1;

    grid-row:
      1;
  }
}