/* =========================================================
   NAI HUB · USUARIOS
   NEURO APRENDIZAJE INFANTIL

   UBICACIÓN:
   frontend/src/pages/usuarios/usuarios.css

   - PREMIUM
   - MODERNO
   - COMPACTO
   - LEGIBLE
   - TEXTO NEGRO / BLANCO
   - SIN GLOW
   - FULL RESPONSIVE
   - SIN SCROLL HORIZONTAL MOBILE
   ========================================================= */


/* =========================================================
   PAGE TOKENS
   ========================================================= */

#usuariosPage,
.usuarios-page {
  --u-bg:
    #f5f6f8;

  --u-surface:
    #ffffff;

  --u-surface-soft:
    #f7f8fa;

  --u-surface-hover:
    #f0f2f5;

  --u-border:
    #d5dae2;

  --u-border-strong:
    #b6bdc8;

  --u-text:
    #050505;

  --u-violet:
    #6253a2;

  --u-violet-soft:
    rgba(98, 83, 162, .08);

  --u-blue:
    #31517a;

  --u-success:
    #115d39;

  --u-success-bg:
    #eaf7ef;

  --u-success-border:
    #b8ddc8;

  --u-warning:
    #704500;

  --u-warning-bg:
    #fff5da;

  --u-warning-border:
    #e8ce8b;

  --u-danger:
    #8d1c1c;

  --u-danger-bg:
    #fff0ef;

  --u-danger-border:
    #efb3ae;

  --u-radius:
    14px;

  --u-radius-sm:
    9px;

  --u-transition:
    150ms cubic-bezier(.2, .8, .2, 1);

  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    18px !important;

  overflow-x:
    hidden !important;

  box-sizing:
    border-box !important;

  color:
    #050505 !important;
}


/* =========================================================
   BOX SIZING
   ========================================================= */

#usuariosPage *,
#usuariosPage *::before,
#usuariosPage *::after {
  box-sizing:
    border-box;
}


/* =========================================================
   HEADER
   ========================================================= */

#usuariosPage .usuarios-page__header {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    18px;

  margin-bottom:
    14px;
}


/* =========================================================
   TITLE
   ========================================================= */

#usuariosPage .usuarios-page__title {
  min-width:
    0;
}


#usuariosPage .usuarios-page__overline {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  margin-bottom:
    4px;

  color:
    #050505;

  font-size:
    8px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;
}


#usuariosPage .usuarios-page__overline-dot {
  width:
    5px;

  height:
    5px;

  flex:
    0 0 5px;

  border-radius:
    50%;

  background:
    var(--u-violet);
}


#usuariosPage .usuarios-page__title h1 {
  margin:
    0;

  color:
    #050505;

  font-size:
    27px;

  font-weight:
    900;

  line-height:
    1.05;

  letter-spacing:
    -.045em;
}


#usuariosPage .usuarios-page__title p {
  margin:
    6px 0 0;

  color:
    #050505;

  font-size:
    11.5px;

  font-weight:
    650;

  line-height:
    1.4;
}


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

#usuariosPage .usuarios-page__actions {
  flex:
    0 0 auto;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


/* =========================================================
   BUTTON
   ========================================================= */

#usuariosPage .usuarios-btn {
  min-height:
    35px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    7px;

  padding:
    0 12px;

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

  border-radius:
    9px;

  background:
    #ffffff;

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    9.5px;

  font-weight:
    800;

  line-height:
    1;

  white-space:
    nowrap;

  cursor:
    pointer;

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


#usuariosPage .usuarios-btn svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 14px;

  stroke-width:
    2.2;
}


#usuariosPage .usuarios-btn:hover {
  border-color:
    var(--u-border-strong);

  transform:
    translateY(-1px);
}


#usuariosPage .usuarios-btn:active {
  transform:
    scale(.97);
}


#usuariosPage .usuarios-btn--primary {
  border-color:
    #423970;

  background:
    linear-gradient(
      120deg,
      #31476f 0%,
      #51488a 50%,
      #6655a4 100%
    );

  color:
    #ffffff;
}


#usuariosPage .usuarios-btn--primary:hover {
  border-color:
    #362e61;

  background:
    linear-gradient(
      120deg,
      #2b4168 0%,
      #493f80 50%,
      #5d4d99 100%
    );
}


#usuariosPage .usuarios-btn--secondary {
  background:
    var(--u-surface-soft);

  color:
    #050505;
}


#usuariosPage .usuarios-btn--danger {
  border-color:
    var(--u-danger-border);

  background:
    var(--u-danger-bg);

  color:
    var(--u-danger);
}


/* =========================================================
   METRICS
   ========================================================= */

#usuariosPage .usuarios-metrics {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    9px;

  margin-bottom:
    12px;
}


/* =========================================================
   METRIC
   ========================================================= */

#usuariosPage .usuarios-metric {
  position:
    relative;

  min-width:
    0;

  min-height:
    78px;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    11px;

  overflow:
    hidden;

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

  border-radius:
    12px;

  background:
    var(--u-surface);

  color:
    #050505;

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


#usuariosPage .usuarios-metric::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  width:
    3px;

  height:
    100%;

  background:
    #605297;

  opacity:
    .75;
}


#usuariosPage .usuarios-metric:hover {
  border-color:
    var(--u-border-strong);

  transform:
    translateY(-1px);
}


#usuariosPage .usuarios-metric--success::before {
  background:
    #187247;
}


#usuariosPage .usuarios-metric--warning::before {
  background:
    #9c6400;
}


/* =========================================================
   METRIC ICON
   ========================================================= */

#usuariosPage .usuarios-metric__icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    9px;

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

  color:
    #050505;
}


#usuariosPage .usuarios-metric__icon svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.2;
}


/* =========================================================
   METRIC COPY
   ========================================================= */

#usuariosPage .usuarios-metric__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    1px;
}


#usuariosPage .usuarios-metric__content > span {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    8px;

  font-weight:
    800;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#usuariosPage .usuarios-metric__content > strong {
  color:
    #050505;

  font-size:
    18px;

  font-weight:
    900;

  line-height:
    1.05;

  letter-spacing:
    -.035em;
}


#usuariosPage .usuarios-metric__content > small {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.5px;

  font-weight:
    600;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   PANEL
   ========================================================= */

#usuariosPage .usuarios-panel {
  width:
    100%;

  min-width:
    0;

  overflow:
    visible;

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

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

  background:
    var(--u-surface);
}


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

#usuariosPage .usuarios-toolbar {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding:
    10px;

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

  background:
    var(--u-surface);
}


/* =========================================================
   SEARCH
   ========================================================= */

#usuariosPage .usuarios-search {
  position:
    relative;

  min-width:
    220px;

  width:
    min(
      100%,
      430px
    );

  height:
    36px;

  display:
    flex;

  align-items:
    center;

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

  border-radius:
    9px;

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

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


#usuariosPage .usuarios-search:focus-within {
  border-color:
    var(--u-violet);

  background:
    #ffffff;
}


#usuariosPage .usuarios-search > svg {
  width:
    14px;

  height:
    14px;

  flex:
    0 0 14px;

  margin-left:
    11px;

  color:
    #050505;

  stroke-width:
    2.1;
}


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

  flex:
    1;

  height:
    100%;

  padding:
    0 8px;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    10.5px;

  font-weight:
    700;
}


#usuariosPage .usuarios-search input::placeholder {
  color:
    #050505;

  opacity:
    1;

  font-weight:
    600;
}


/* =========================================================
   SEARCH CLEAR
   ========================================================= */

#usuariosPage .usuarios-search__clear {
  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

  display:
    grid;

  place-items:
    center;

  margin-right:
    2px;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    #050505;

  cursor:
    pointer;

  transition:
    background var(--u-transition),
    transform var(--u-transition);
}


#usuariosPage .usuarios-search__clear:hover {
  background:
    #e8eaf0;
}


#usuariosPage .usuarios-search__clear:active {
  transform:
    scale(.92);
}


#usuariosPage .usuarios-search__clear[hidden] {
  display:
    none !important;
}


#usuariosPage .usuarios-search__clear svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    2.3;
}


/* =========================================================
   FILTERS
   ========================================================= */

#usuariosPage .usuarios-toolbar__filters {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    7px;
}


/* =========================================================
   FILTER
   ========================================================= */

#usuariosPage .usuarios-filter {
  min-width:
    0;

  height:
    36px;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  padding:
    0 8px;

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

  border-radius:
    9px;

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

  color:
    #050505;

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


#usuariosPage .usuarios-filter:hover,
#usuariosPage .usuarios-filter:focus-within {
  border-color:
    var(--u-border-strong);

  background:
    #ffffff;
}


#usuariosPage .usuarios-filter > svg {
  width:
    13px;

  height:
    13px;

  flex:
    0 0 13px;

  stroke-width:
    2.2;
}


/* =========================================================
   SELECT
   ========================================================= */

#usuariosPage .usuarios-select {
  min-width:
    110px;

  max-width:
    155px;

  height:
    100%;

  padding:
    0 18px 0 0;

  border:
    0;

  outline:
    0;

  background:
    transparent;

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    9px;

  font-weight:
    750;

  cursor:
    pointer;
}


#usuariosPage .usuarios-select--small {
  min-width:
    110px;
}


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

#usuariosPage .usuarios-table-area {
  position:
    relative;

  width:
    100%;

  min-width:
    0;

  overflow:
    visible;

  background:
    var(--u-surface);
}


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

#usuariosPage .usuarios-table-wrap {
  width:
    100%;

  min-width:
    0;

  overflow:
    visible;
}


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

#usuariosPage .usuarios-table {
  width:
    100%;

  min-width:
    0;

  table-layout:
    fixed;

  border-collapse:
    separate;

  border-spacing:
    0;

  color:
    #050505;
}


/* =========================================================
   THEAD
   ========================================================= */

#usuariosPage .usuarios-table thead th {
  height:
    38px;

  padding:
    0 8px;

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

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

  color:
    #050505;

  font-size:
    8px;

  font-weight:
    850;

  text-align:
    left;

  vertical-align:
    middle;

  white-space:
    nowrap;
}


#usuariosPage .usuarios-table thead th:nth-child(1) {
  width:
    18%;
}


#usuariosPage .usuarios-table thead th:nth-child(2) {
  width:
    11%;
}


#usuariosPage .usuarios-table thead th:nth-child(3) {
  width:
    16%;
}


#usuariosPage .usuarios-table thead th:nth-child(4) {
  width:
    10%;
}


#usuariosPage .usuarios-table thead th:nth-child(5) {
  width:
    9%;
}


#usuariosPage .usuarios-table thead th:nth-child(6) {
  width:
    12%;
}


#usuariosPage .usuarios-table thead th:nth-child(7) {
  width:
    11%;
}


#usuariosPage .usuarios-table thead th:nth-child(8) {
  width:
    9%;
}


#usuariosPage .usuarios-table thead th:nth-child(9) {
  width:
    48px;
}


/* =========================================================
   SORT
   ========================================================= */

#usuariosPage .usuarios-sort {
  max-width:
    100%;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    4px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    inherit;

  font-weight:
    850;

  cursor:
    pointer;
}


#usuariosPage .usuarios-sort span {
  overflow:
    hidden;

  text-overflow:
    ellipsis;
}


#usuariosPage .usuarios-sort svg {
  width:
    10px;

  height:
    10px;

  flex:
    0 0 10px;

  stroke-width:
    2.3;
}


#usuariosPage .usuarios-sort.is-active {
  color:
    var(--u-violet);
}


/* =========================================================
   TBODY
   ========================================================= */

#usuariosPage .usuarios-table tbody tr {
  position:
    relative;

  transition:
    background var(--u-transition);
}


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


#usuariosPage .usuarios-table tbody td {
  height:
    53px;

  min-width:
    0;

  padding:
    6px 8px;

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

  color:
    #050505;

  font-size:
    9px;

  font-weight:
    650;

  vertical-align:
    middle;
}


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


/* =========================================================
   USER
   ========================================================= */

#usuariosPage .usuarios-user {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0;

  border:
    0;

  background:
    transparent;

  color:
    #050505;

  text-align:
    left;

  cursor:
    pointer;
}


/* =========================================================
   AVATAR
   ========================================================= */

#usuariosPage .usuarios-user__avatar,
#usuariosPage .usuarios-detail__avatar,
#usuariosPage .usuarios-delete__avatar {
  display:
    grid;

  place-items:
    center;

  overflow:
    hidden;

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

  border-radius:
    50%;

  background:
    linear-gradient(
      135deg,
      #eceaf6,
      #f6f6fa
    );

  color:
    #050505;

  font-weight:
    900;

  line-height:
    1;
}


#usuariosPage .usuarios-user__avatar {
  width:
    32px;

  height:
    32px;

  flex:
    0 0 32px;

  font-size:
    9px;
}


#usuariosPage .usuarios-user__avatar img,
#usuariosPage .usuarios-detail__avatar img,
#usuariosPage .usuarios-delete__avatar img {
  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  object-position:
    center;

  border-radius:
    50%;
}


#usuariosPage [data-avatar-fallback][hidden] {
  display:
    none !important;
}


/* =========================================================
   USER CONTENT
   ========================================================= */

#usuariosPage .usuarios-user__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


#usuariosPage .usuarios-user__content strong {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    9.5px;

  font-weight:
    850;

  line-height:
    1.15;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#usuariosPage .usuarios-user__content small {
  color:
    #050505;

  font-size:
    7.5px;

  font-weight:
    600;

  line-height:
    1;
}


/* =========================================================
   USERNAME / EMAIL / ROLE / DATE
   ========================================================= */

#usuariosPage .usuarios-username,
#usuariosPage .usuarios-email,
#usuariosPage .usuarios-role,
#usuariosPage .usuarios-date {
  display:
    block;

  max-width:
    100%;

  overflow:
    hidden;

  color:
    #050505;

  font-weight:
    700;

  line-height:
    1.25;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#usuariosPage .usuarios-username {
  font-weight:
    800;
}


/* =========================================================
   STATUS
   ========================================================= */

#usuariosPage .usuarios-status {
  max-width:
    100%;

  min-height:
    22px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    5px;

  padding:
    0 7px;

  overflow:
    hidden;

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

  border-radius:
    999px;

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

  color:
    #050505;

  font-size:
    7.8px;

  font-weight:
    850;

  line-height:
    1;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#usuariosPage .usuarios-status__dot {
  width:
    5px;

  height:
    5px;

  flex:
    0 0 5px;

  border-radius:
    50%;

  background:
    currentColor;
}


#usuariosPage .usuarios-status--activo {
  border-color:
    var(--u-success-border);

  background:
    var(--u-success-bg);

  color:
    #0b5132;
}


#usuariosPage .usuarios-status--inactivo,
#usuariosPage .usuarios-status--pendiente {
  border-color:
    var(--u-warning-border);

  background:
    var(--u-warning-bg);

  color:
    #624000;
}


#usuariosPage .usuarios-status--bloqueado,
#usuariosPage .usuarios-status--suspendido {
  border-color:
    var(--u-danger-border);

  background:
    var(--u-danger-bg);

  color:
    #741717;
}


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

#usuariosPage .usuarios-password-state {
  max-width:
    100%;

  min-height:
    22px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.8px;

  font-weight:
    750;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


#usuariosPage .usuarios-password-state svg {
  width:
    11px;

  height:
    11px;

  flex:
    0 0 11px;

  stroke-width:
    2.3;
}


#usuariosPage .usuarios-password-state--pending {
  color:
    #6b4500;
}


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

#usuariosPage .usuarios-col-actions {
  text-align:
    center;
}


#usuariosPage .usuarios-row-actions {
  position:
    relative;

  display:
    flex;

  justify-content:
    center;
}


/* =========================================================
   ICON BUTTON
   ========================================================= */

#usuariosPage .usuarios-icon-btn {
  width:
    30px;

  height:
    30px;

  flex:
    0 0 30px;

  display:
    grid;

  place-items:
    center;

  padding:
    0;

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

  border-radius:
    8px;

  background:
    var(--u-surface);

  color:
    #050505;

  cursor:
    pointer;

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


#usuariosPage .usuarios-icon-btn:hover:not(:disabled) {
  border-color:
    var(--u-border-strong);

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

  transform:
    translateY(-1px);
}


#usuariosPage .usuarios-icon-btn:active:not(:disabled) {
  transform:
    scale(.93);
}


#usuariosPage .usuarios-icon-btn:disabled {
  cursor:
    not-allowed;

  opacity:
    .35;
}


#usuariosPage .usuarios-icon-btn svg {
  width:
    14px;

  height:
    14px;

  stroke-width:
    2.2;
}


/* =========================================================
   ROW MENU
   ========================================================= */

#usuariosPage .usuarios-row-menu {
  position:
    absolute;

  top:
    calc(100% + 5px);

  right:
    0;

  z-index:
    30;

  width:
    185px;

  padding:
    5px;

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

  border-radius:
    10px;

  background:
    #ffffff;

  animation:
    usuariosMenuIn
    140ms
    cubic-bezier(.2, .8, .2, 1);
}


@keyframes usuariosMenuIn {

  from {
    opacity:
      0;

    transform:
      translateY(-4px)
      scale(.98);
  }

  to {
    opacity:
      1;

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

}


#usuariosPage .usuarios-row-menu button {
  width:
    100%;

  min-height:
    33px;

  display:
    flex;

  align-items:
    center;

  gap:
    8px;

  padding:
    0 9px;

  border:
    0;

  border-radius:
    7px;

  background:
    transparent;

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    9px;

  font-weight:
    750;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    background var(--u-transition),
    transform var(--u-transition);
}


#usuariosPage .usuarios-row-menu button:hover {
  background:
    var(--u-surface-hover);

  transform:
    translateX(1px);
}


#usuariosPage .usuarios-row-menu button svg {
  width:
    13px;

  height:
    13px;

  flex:
    0 0 13px;

  stroke-width:
    2.2;
}


#usuariosPage .usuarios-row-menu button.is-danger {
  color:
    var(--u-danger);
}


#usuariosPage .usuarios-row-menu__divider {
  display:
    block;

  width:
    100%;

  height:
    1px;

  margin:
    4px 0;

  background:
    var(--u-border);
}


/* =========================================================
   PAGINATION
   ========================================================= */

#usuariosPage .usuarios-pagination {
  min-height:
    47px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    8px 10px;

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

  color:
    #050505;
}


#usuariosPage .usuarios-pagination__info,
#usuariosPage .usuarios-pagination__page {
  display:
    flex;

  align-items:
    center;

  gap:
    4px;

  color:
    #050505;

  font-size:
    8.5px;

  font-weight:
    650;
}


#usuariosPage .usuarios-pagination__info strong,
#usuariosPage .usuarios-pagination__page strong {
  color:
    #050505;

  font-weight:
    900;
}


#usuariosPage .usuarios-pagination__controls {
  display:
    flex;

  align-items:
    center;

  gap:
    8px;
}


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

#usuariosPage .usuarios-loading,
#usuariosPage .usuarios-empty {
  min-height:
    260px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  gap:
    11px;

  padding:
    24px;

  color:
    #050505;

  text-align:
    center;
}


#usuariosPage .usuarios-loading > div {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    flex-start;

  gap:
    3px;
}


#usuariosPage .usuarios-loading strong,
#usuariosPage .usuarios-empty strong {
  color:
    #050505;

  font-size:
    11px;

  font-weight:
    850;
}


#usuariosPage .usuarios-loading span:not(.usuarios-spinner),
#usuariosPage .usuarios-empty > span {
  color:
    #050505;

  font-size:
    9px;

  font-weight:
    600;
}


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

#usuariosPage .usuarios-empty {
  flex-direction:
    column;
}


#usuariosPage .usuarios-empty__icon {
  width:
    40px;

  height:
    40px;

  display:
    grid;

  place-items:
    center;

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

  border-radius:
    11px;

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

  color:
    #050505;
}


#usuariosPage .usuarios-empty__icon svg {
  width:
    19px;

  height:
    19px;

  stroke-width:
    2.1;
}


/* =========================================================
   SPINNER
   ========================================================= */

#usuariosPage .usuarios-spinner {
  width:
    23px;

  height:
    23px;

  flex:
    0 0 23px;

  border:
    2px solid var(--u-border);

  border-top-color:
    #050505;

  border-radius:
    50%;

  animation:
    usuariosSpin
    600ms
    linear
    infinite;
}


@keyframes usuariosSpin {

  to {
    transform:
      rotate(360deg);
  }

}


/* =========================================================
   SKELETON
   ========================================================= */

#usuariosPage .usuarios-skeleton {
  position:
    relative;

  overflow:
    hidden;

  border-radius:
    6px;

  background:
    #e8eaf0;
}


#usuariosPage .usuarios-skeleton::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  transform:
    translateX(-100%);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, .85),
      transparent
    );

  animation:
    usuariosSkeleton
    1.1s
    ease-in-out
    infinite;
}


@keyframes usuariosSkeleton {

  to {
    transform:
      translateX(100%);
  }

}


#usuariosPage .usuarios-skeleton--icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;
}


#usuariosPage .usuarios-skeleton--label {
  width:
    68px;

  height:
    7px;
}


#usuariosPage .usuarios-skeleton--value {
  width:
    40px;

  height:
    17px;

  margin-top:
    4px;
}


#usuariosPage .usuarios-skeleton--helper {
  width:
    82px;

  height:
    6px;

  margin-top:
    3px;
}


/* =========================================================
   MODAL BACKDROP
   ========================================================= */

.usuarios-modal-backdrop {
  position:
    fixed;

  inset:
    0;

  z-index:
    1000;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    20px;

  overflow-y:
    auto;

  background:
    rgba(3, 5, 12, .72);

  animation:
    usuariosBackdropIn
    150ms
    ease;
}


@keyframes usuariosBackdropIn {

  from {
    opacity:
      0;
  }

  to {
    opacity:
      1;
  }

}


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


/* =========================================================
   MODAL
   ========================================================= */

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

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

  display:
    flex;

  flex-direction:
    column;

  overflow:
    hidden;

  border:
    1px solid #cfd4dc;

  border-radius:
    15px;

  background:
    #ffffff;

  color:
    #050505;

  animation:
    usuariosModalIn
    170ms
    cubic-bezier(.2, .8, .2, 1);
}


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


@keyframes usuariosModalIn {

  from {
    opacity:
      0;

    transform:
      translateY(8px)
      scale(.985);
  }

  to {
    opacity:
      1;

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

}


/* =========================================================
   MODAL HEADER
   ========================================================= */

.usuarios-modal__header {
  min-height:
    58px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    10px 12px;

  border-bottom:
    1px solid #d5dae2;

  background:
    #ffffff;

  color:
    #050505;
}


.usuarios-modal__heading {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    10px;
}


.usuarios-modal__heading-icon {
  width:
    34px;

  height:
    34px;

  flex:
    0 0 34px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid #d5dae2;

  border-radius:
    9px;

  background:
    #f6f7f9;

  color:
    #050505;
}


.usuarios-modal__heading-icon svg {
  width:
    16px;

  height:
    16px;

  stroke-width:
    2.2;
}


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


.usuarios-modal__heading-copy > span {
  display:
    block;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    7.5px;

  font-weight:
    850;

  line-height:
    1;

  letter-spacing:
    .10em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.usuarios-modal__heading-copy h2 {
  max-width:
    100%;

  margin:
    3px 0 0;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    14px;

  font-weight:
    900;

  line-height:
    1.2;

  letter-spacing:
    -.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   MODAL BODY
   ========================================================= */

.usuarios-modal__body {
  min-height:
    0;

  flex:
    1;

  padding:
    14px;

  overflow-y:
    auto;

  overflow-x:
    hidden;

  color:
    #050505;
}


/* =========================================================
   MODAL FOOTER
   ========================================================= */

.usuarios-modal__footer {
  min-height:
    54px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    8px;

  padding:
    9px 12px;

  border-top:
    1px solid #d5dae2;

  background:
    #f8f9fa;
}


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

.usuarios-form {
  width:
    100%;

  min-width:
    0;
}


.usuarios-form-grid {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  gap:
    11px;
}


/* =========================================================
   FIELD
   ========================================================= */

.usuarios-field {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    6px;
}


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


.usuarios-field__label {
  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    #050505;
}


.usuarios-field__label > svg {
  width:
    12px;

  height:
    12px;

  flex:
    0 0 12px;

  stroke-width:
    2.2;
}


.usuarios-field__label > span {
  color:
    #050505;

  font-size:
    8.5px;

  font-weight:
    800;
}


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

  min-width:
    0;

  height:
    39px;

  padding:
    0 10px;

  border:
    1px solid #cbd1da;

  border-radius:
    9px;

  outline:
    0;

  background:
    #fafafa;

  color:
    #050505;

  font-family:
    inherit;

  font-size:
    10px;

  font-weight:
    700;

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


.usuarios-field input:focus,
.usuarios-field select:focus {
  border-color:
    #6253a2;

  background:
    #ffffff;
}


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

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

  padding-top:
    13px;

  border-top:
    1px solid #d5dae2;
}


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

.usuarios-switch {
  width:
    100%;

  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  cursor:
    pointer;
}


.usuarios-switch > input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


.usuarios-switch__control {
  position:
    relative;

  width:
    35px;

  height:
    20px;

  flex:
    0 0 35px;

  display:
    block;

  border:
    1px solid #abb2bd;

  border-radius:
    999px;

  background:
    #e5e7eb;

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


.usuarios-switch__control > span {
  position:
    absolute;

  top:
    3px;

  left:
    3px;

  width:
    12px;

  height:
    12px;

  border-radius:
    50%;

  background:
    #050505;

  transition:
    transform var(--u-transition),
    background var(--u-transition);
}


.usuarios-switch > input:checked +
.usuarios-switch__control {
  border-color:
    #51438f;

  background:
    #6253a2;
}


.usuarios-switch > input:checked +
.usuarios-switch__control > span {
  background:
    #ffffff;

  transform:
    translateX(15px);
}


.usuarios-switch__content {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;
}


.usuarios-switch__content strong {
  color:
    #050505;

  font-size:
    9.5px;

  font-weight:
    850;
}


.usuarios-switch__content small {
  color:
    #050505;

  font-size:
    8px;

  font-weight:
    600;

  line-height:
    1.35;
}


/* =========================================================
   DETAIL
   ========================================================= */

.usuarios-detail {
  width:
    100%;

  min-width:
    0;
}


/* =========================================================
   DETAIL PROFILE
   ========================================================= */

.usuarios-detail__profile {
  width:
    100%;

  min-width:
    0;

  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    13px;

  padding:
    12px;

  border:
    1px solid #d5dae2;

  border-radius:
    11px;

  background:
    #f7f8fa;
}


.usuarios-detail__avatar {
  width:
    62px;

  height:
    62px;

  flex:
    0 0 62px;

  font-size:
    16px;
}


.usuarios-detail__identity {
  min-width:
    0;
}


.usuarios-detail__identity strong {
  display:
    block;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    13px;

  font-weight:
    900;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.usuarios-detail__identity span {
  display:
    block;

  margin-top:
    3px;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    9px;

  font-weight:
    650;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.usuarios-detail__badges {
  display:
    flex;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    6px;

  flex-wrap:
    wrap;
}


/* =========================================================
   ROLE BADGE
   ========================================================= */

.usuarios-role-badge {
  min-height:
    22px;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  padding:
    0 7px;

  border:
    1px solid rgba(98, 83, 162, .22);

  border-radius:
    999px;

  background:
    rgba(98, 83, 162, .07);

  color:
    #050505;

  font-size:
    7.8px;

  font-weight:
    800;

  white-space:
    nowrap;
}


.usuarios-role-badge svg {
  width:
    10px;

  height:
    10px;

  stroke-width:
    2.2;
}


/* =========================================================
   DETAIL GRID
   ========================================================= */

.usuarios-detail__grid {
  display:
    grid;

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

  overflow:
    hidden;

  border:
    1px solid #d5dae2;

  border-radius:
    11px;
}


/* =========================================================
   DETAIL FIELD
   ========================================================= */

.usuarios-detail-field {
  min-width:
    0;

  min-height:
    63px;

  padding:
    10px 11px;

  border-right:
    1px solid #d5dae2;

  border-bottom:
    1px solid #d5dae2;

  background:
    #ffffff;

  color:
    #050505;
}


.usuarios-detail-field:nth-child(2n) {
  border-right:
    0;
}


.usuarios-detail-field:nth-last-child(-n + 2) {
  border-bottom:
    0;
}


.usuarios-detail-field__label {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    #050505;
}


.usuarios-detail-field__label svg {
  width:
    11px;

  height:
    11px;

  flex:
    0 0 11px;

  stroke-width:
    2.2;
}


.usuarios-detail-field__label span {
  overflow:
    hidden;

  color:
    #050505;

  font-size:
    8px;

  font-weight:
    800;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.usuarios-detail-field > strong {
  display:
    block;

  margin-top:
    6px;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    10.5px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* =========================================================
   ALERT
   ========================================================= */

.usuarios-alert {
  width:
    100%;

  display:
    flex;

  align-items:
    flex-start;

  gap:
    9px;

  margin-bottom:
    13px;

  padding:
    10px;

  border:
    1px solid #d5dae2;

  border-radius:
    10px;

  color:
    #050505;
}


.usuarios-alert__icon {
  width:
    28px;

  height:
    28px;

  flex:
    0 0 28px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid currentColor;

  border-radius:
    8px;
}


.usuarios-alert__icon svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    2.2;
}


.usuarios-alert > div:last-child {
  min-width:
    0;

  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;
}


.usuarios-alert strong {
  color:
    inherit;

  font-size:
    9.5px;

  font-weight:
    850;
}


.usuarios-alert span {
  color:
    inherit;

  font-size:
    8px;

  font-weight:
    600;

  line-height:
    1.4;
}


.usuarios-alert--warning {
  border-color:
    var(--u-warning-border);

  background:
    var(--u-warning-bg);

  color:
    #5f3c00;
}


.usuarios-alert--danger {
  border-color:
    var(--u-danger-border);

  background:
    var(--u-danger-bg);

  color:
    #731717;
}


/* =========================================================
   DELETE USER
   ========================================================= */

.usuarios-delete__user {
  display:
    flex;

  align-items:
    center;

  gap:
    10px;

  padding:
    11px;

  border:
    1px solid #d5dae2;

  border-radius:
    10px;

  background:
    #f7f8fa;
}


.usuarios-delete__avatar {
  width:
    42px;

  height:
    42px;

  flex:
    0 0 42px;

  font-size:
    11px;
}


.usuarios-delete__user > div:last-child {
  min-width:
    0;
}


.usuarios-delete__user strong {
  display:
    block;

  overflow:
    hidden;

  color:
    #050505;

  font-size:
    10.5px;

  font-weight:
    850;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


.usuarios-delete__user span {
  display:
    block;

  margin-top:
    3px;

  color:
    #050505;

  font-size:
    8.5px;

  font-weight:
    650;
}


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

.usuarios-toast-container {
  position:
    fixed;

  top:
    62px;

  right:
    16px;

  z-index:
    1200;

  width:
    min(
      340px,
      calc(100vw - 32px)
    );

  display:
    flex;

  flex-direction:
    column;

  gap:
    7px;

  pointer-events:
    none;
}


.usuarios-toast {
  min-height:
    44px;

  display:
    grid;

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

  align-items:
    center;

  gap:
    8px;

  padding:
    8px 10px;

  border:
    1px solid #cfd4dd;

  border-radius:
    10px;

  background:
    #ffffff;

  color:
    #050505;

  opacity:
    0;

  transform:
    translateX(12px);

  transition:
    opacity 180ms ease,
    transform 180ms ease;
}


.usuarios-toast.is-visible {
  opacity:
    1;

  transform:
    translateX(0);
}


.usuarios-toast__icon {
  width:
    28px;

  height:
    28px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid currentColor;

  border-radius:
    8px;
}


.usuarios-toast__icon svg {
  width:
    13px;

  height:
    13px;

  stroke-width:
    2.2;
}


.usuarios-toast > span {
  color:
    inherit;

  font-size:
    9px;

  font-weight:
    750;

  line-height:
    1.35;
}


.usuarios-toast--success {
  border-color:
    var(--u-success-border);

  background:
    var(--u-success-bg);

  color:
    #0c5032;
}


.usuarios-toast--warning {
  border-color:
    var(--u-warning-border);

  background:
    var(--u-warning-bg);

  color:
    #624000;
}


.usuarios-toast--error {
  border-color:
    var(--u-danger-border);

  background:
    var(--u-danger-bg);

  color:
    #731717;
}


/* =========================================================
   DARK MODE
   ========================================================= */

html[data-theme="dark"]
#usuariosPage,
body.dark
#usuariosPage,
.dark
#usuariosPage {
  --u-bg:
    #050505;

  --u-surface:
    #0b0b0d;

  --u-surface-soft:
    #111114;

  --u-surface-hover:
    #151519;

  --u-border:
    #29292f;

  --u-border-strong:
    #44444c;

  --u-text:
    #ffffff;

  --u-violet:
    #a495dc;

  --u-violet-soft:
    rgba(164, 149, 220, .10);

  color:
    #ffffff !important;
}


/* =========================================================
   DARK TEXT
   ========================================================= */

html[data-theme="dark"] #usuariosPage .usuarios-page__overline,
html[data-theme="dark"] #usuariosPage .usuarios-page__title h1,
html[data-theme="dark"] #usuariosPage .usuarios-page__title p,
html[data-theme="dark"] #usuariosPage .usuarios-metric,
html[data-theme="dark"] #usuariosPage .usuarios-metric__icon,
html[data-theme="dark"] #usuariosPage .usuarios-metric__content > span,
html[data-theme="dark"] #usuariosPage .usuarios-metric__content > strong,
html[data-theme="dark"] #usuariosPage .usuarios-metric__content > small,
html[data-theme="dark"] #usuariosPage .usuarios-search,
html[data-theme="dark"] #usuariosPage .usuarios-search > svg,
html[data-theme="dark"] #usuariosPage .usuarios-search input,
html[data-theme="dark"] #usuariosPage .usuarios-search input::placeholder,
html[data-theme="dark"] #usuariosPage .usuarios-search__clear,
html[data-theme="dark"] #usuariosPage .usuarios-filter,
html[data-theme="dark"] #usuariosPage .usuarios-select,
html[data-theme="dark"] #usuariosPage .usuarios-table,
html[data-theme="dark"] #usuariosPage .usuarios-table thead th,
html[data-theme="dark"] #usuariosPage .usuarios-sort,
html[data-theme="dark"] #usuariosPage .usuarios-table tbody td,
html[data-theme="dark"] #usuariosPage .usuarios-user,
html[data-theme="dark"] #usuariosPage .usuarios-user__content strong,
html[data-theme="dark"] #usuariosPage .usuarios-user__content small,
html[data-theme="dark"] #usuariosPage .usuarios-username,
html[data-theme="dark"] #usuariosPage .usuarios-email,
html[data-theme="dark"] #usuariosPage .usuarios-role,
html[data-theme="dark"] #usuariosPage .usuarios-date,
html[data-theme="dark"] #usuariosPage .usuarios-password-state,
html[data-theme="dark"] #usuariosPage .usuarios-icon-btn,
html[data-theme="dark"] #usuariosPage .usuarios-pagination,
html[data-theme="dark"] #usuariosPage .usuarios-pagination__info,
html[data-theme="dark"] #usuariosPage .usuarios-pagination__page,
html[data-theme="dark"] #usuariosPage .usuarios-pagination__info strong,
html[data-theme="dark"] #usuariosPage .usuarios-pagination__page strong,
html[data-theme="dark"] #usuariosPage .usuarios-loading,
html[data-theme="dark"] #usuariosPage .usuarios-loading strong,
html[data-theme="dark"] #usuariosPage .usuarios-loading span,
html[data-theme="dark"] #usuariosPage .usuarios-empty,
html[data-theme="dark"] #usuariosPage .usuarios-empty strong,
html[data-theme="dark"] #usuariosPage .usuarios-empty > span,
html[data-theme="dark"] #usuariosPage .usuarios-empty__icon,
body.dark #usuariosPage .usuarios-page__overline,
body.dark #usuariosPage .usuarios-page__title h1,
body.dark #usuariosPage .usuarios-page__title p,
body.dark #usuariosPage .usuarios-metric,
body.dark #usuariosPage .usuarios-metric__icon,
body.dark #usuariosPage .usuarios-metric__content > span,
body.dark #usuariosPage .usuarios-metric__content > strong,
body.dark #usuariosPage .usuarios-metric__content > small,
body.dark #usuariosPage .usuarios-search,
body.dark #usuariosPage .usuarios-search > svg,
body.dark #usuariosPage .usuarios-search input,
body.dark #usuariosPage .usuarios-search input::placeholder,
body.dark #usuariosPage .usuarios-search__clear,
body.dark #usuariosPage .usuarios-filter,
body.dark #usuariosPage .usuarios-select,
body.dark #usuariosPage .usuarios-table,
body.dark #usuariosPage .usuarios-table thead th,
body.dark #usuariosPage .usuarios-sort,
body.dark #usuariosPage .usuarios-table tbody td,
body.dark #usuariosPage .usuarios-user,
body.dark #usuariosPage .usuarios-user__content strong,
body.dark #usuariosPage .usuarios-user__content small,
body.dark #usuariosPage .usuarios-username,
body.dark #usuariosPage .usuarios-email,
body.dark #usuariosPage .usuarios-role,
body.dark #usuariosPage .usuarios-date,
body.dark #usuariosPage .usuarios-password-state,
body.dark #usuariosPage .usuarios-icon-btn,
body.dark #usuariosPage .usuarios-pagination,
body.dark #usuariosPage .usuarios-pagination__info,
body.dark #usuariosPage .usuarios-pagination__page,
body.dark #usuariosPage .usuarios-pagination__info strong,
body.dark #usuariosPage .usuarios-pagination__page strong,
body.dark #usuariosPage .usuarios-loading,
body.dark #usuariosPage .usuarios-loading strong,
body.dark #usuariosPage .usuarios-loading span,
body.dark #usuariosPage .usuarios-empty,
body.dark #usuariosPage .usuarios-empty strong,
body.dark #usuariosPage .usuarios-empty > span,
body.dark #usuariosPage .usuarios-empty__icon {
  color:
    #ffffff;
}


/* =========================================================
   DARK INPUTS
   ========================================================= */

html[data-theme="dark"] #usuariosPage .usuarios-search,
html[data-theme="dark"] #usuariosPage .usuarios-filter,
html[data-theme="dark"] #usuariosPage .usuarios-table thead th,
html[data-theme="dark"] #usuariosPage .usuarios-metric__icon,
html[data-theme="dark"] #usuariosPage .usuarios-empty__icon,
body.dark #usuariosPage .usuarios-search,
body.dark #usuariosPage .usuarios-filter,
body.dark #usuariosPage .usuarios-table thead th,
body.dark #usuariosPage .usuarios-metric__icon,
body.dark #usuariosPage .usuarios-empty__icon {
  background:
    #111114;
}


/* =========================================================
   DARK ROW MENU
   ========================================================= */

html[data-theme="dark"] #usuariosPage .usuarios-row-menu,
body.dark #usuariosPage .usuarios-row-menu {
  border-color:
    #3d3d45;

  background:
    #111114;
}


html[data-theme="dark"] #usuariosPage .usuarios-row-menu button,
body.dark #usuariosPage .usuarios-row-menu button {
  color:
    #ffffff;
}


/* =========================================================
   DARK AVATAR
   ========================================================= */

html[data-theme="dark"] #usuariosPage .usuarios-user__avatar,
body.dark #usuariosPage .usuarios-user__avatar {
  border-color:
    #33333a;

  background:
    #151519;

  color:
    #ffffff;
}


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

html[data-theme="dark"] .usuarios-modal,
body.dark .usuarios-modal {
  border-color:
    #303038;

  background:
    #0b0b0d;

  color:
    #ffffff;
}


html[data-theme="dark"] .usuarios-modal__header,
html[data-theme="dark"] .usuarios-modal__footer,
body.dark .usuarios-modal__header,
body.dark .usuarios-modal__footer {
  border-color:
    #29292f;

  background:
    #0b0b0d;
}


html[data-theme="dark"] .usuarios-modal__heading-icon,
body.dark .usuarios-modal__heading-icon {
  border-color:
    #33333a;

  background:
    #111114;

  color:
    #ffffff;
}


html[data-theme="dark"] .usuarios-modal__heading-copy > span,
html[data-theme="dark"] .usuarios-modal__heading-copy h2,
body.dark .usuarios-modal__heading-copy > span,
body.dark .usuarios-modal__heading-copy h2 {
  color:
    #ffffff;
}


html[data-theme="dark"] .usuarios-field__label,
html[data-theme="dark"] .usuarios-field__label > span,
html[data-theme="dark"] .usuarios-switch__content strong,
html[data-theme="dark"] .usuarios-switch__content small,
body.dark .usuarios-field__label,
body.dark .usuarios-field__label > span,
body.dark .usuarios-switch__content strong,
body.dark .usuarios-switch__content small {
  color:
    #ffffff;
}


html[data-theme="dark"] .usuarios-field input,
html[data-theme="dark"] .usuarios-field select,
body.dark .usuarios-field input,
body.dark .usuarios-field select {
  border-color:
    #33333a;

  background:
    #111114;

  color:
    #ffffff;
}


html[data-theme="dark"] .usuarios-form-section,
body.dark .usuarios-form-section {
  border-color:
    #29292f;
}


/* =========================================================
   DARK DETAIL
   ========================================================= */

html[data-theme="dark"] .usuarios-detail__profile,
html[data-theme="dark"] .usuarios-delete__user,
body.dark .usuarios-detail__profile,
body.dark .usuarios-delete__user {
  border-color:
    #303038;

  background:
    #111114;
}


html[data-theme="dark"] .usuarios-detail__identity strong,
html[data-theme="dark"] .usuarios-detail__identity span,
html[data-theme="dark"] .usuarios-delete__user strong,
html[data-theme="dark"] .usuarios-delete__user span,
body.dark .usuarios-detail__identity strong,
body.dark .usuarios-detail__identity span,
body.dark .usuarios-delete__user strong,
body.dark .usuarios-delete__user span {
  color:
    #ffffff;
}


html[data-theme="dark"] .usuarios-detail__grid,
html[data-theme="dark"] .usuarios-detail-field,
body.dark .usuarios-detail__grid,
body.dark .usuarios-detail-field {
  border-color:
    #303038;

  background:
    #0b0b0d;
}


html[data-theme="dark"] .usuarios-detail-field__label,
html[data-theme="dark"] .usuarios-detail-field__label span,
html[data-theme="dark"] .usuarios-detail-field > strong,
body.dark .usuarios-detail-field__label,
body.dark .usuarios-detail-field__label span,
body.dark .usuarios-detail-field > strong {
  color:
    #ffffff;
}


html[data-theme="dark"] .usuarios-detail__avatar,
html[data-theme="dark"] .usuarios-delete__avatar,
body.dark .usuarios-detail__avatar,
body.dark .usuarios-delete__avatar {
  border-color:
    #33333a;

  background:
    #151519;

  color:
    #ffffff;
}


html[data-theme="dark"] .usuarios-role-badge,
body.dark .usuarios-role-badge {
  color:
    #ffffff;
}


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

html[data-theme="dark"] .usuarios-toast,
body.dark .usuarios-toast {
  border-color:
    #393940;

  background:
    #111114;

  color:
    #ffffff;
}


/* =========================================================
   DARK SPINNER
   ========================================================= */

html[data-theme="dark"] #usuariosPage .usuarios-spinner,
body.dark #usuariosPage .usuarios-spinner {
  border-color:
    #34343b;

  border-top-color:
    #ffffff;
}


/* =========================================================
   MOUNT
   ========================================================= */

#usuariosPageMount {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow-x:
    hidden !important;

  flex:
    1 1 auto !important;

  align-self:
    stretch !important;

  justify-self:
    stretch !important;
}


#usuariosPageMount >
.usuarios-page {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;
}


/* =========================================================
   PADRES
   ========================================================= */

main:has(#usuariosPageMount),
.app-main:has(#usuariosPageMount),
.main:has(#usuariosPageMount),
.main-content:has(#usuariosPageMount),
.app-content:has(#usuariosPageMount),
.page-content:has(#usuariosPageMount),
.content:has(#usuariosPageMount),
.content-wrapper:has(#usuariosPageMount),
.page-wrapper:has(#usuariosPageMount),
.workspace:has(#usuariosPageMount) {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  overflow-x:
    hidden !important;
}


/* =========================================================
   RESPONSIVE ≤ 1250
   ========================================================= */

@media (
  max-width: 1250px
) {

  #usuariosPage .usuarios-metrics {
    grid-template-columns:
      repeat(
        3,
        minmax(0, 1fr)
      );
  }


  #usuariosPage .usuarios-col-created {
    display:
      none;
  }


  #usuariosPage .usuarios-table thead th:nth-child(1) {
    width:
      20%;
  }


  #usuariosPage .usuarios-table thead th:nth-child(3) {
    width:
      19%;
  }

}


/* =========================================================
   RESPONSIVE ≤ 1050
   ========================================================= */

@media (
  max-width: 1050px
) {

  #usuariosPage .usuarios-toolbar {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  #usuariosPage .usuarios-search {
    width:
      100%;

    max-width:
      none;
  }


  #usuariosPage .usuarios-toolbar__filters {
    width:
      100%;

    justify-content:
      flex-start;
  }


  #usuariosPage .usuarios-filter {
    flex:
      1;

    min-width:
      0;
  }


  #usuariosPage .usuarios-select {
    min-width:
      0;

    max-width:
      none;

    width:
      100%;
  }


  #usuariosPage .usuarios-col-last-access {
    display:
      none;
  }

}


/* =========================================================
   RESPONSIVE ≤ 850
   ========================================================= */

@media (
  max-width: 850px
) {

  #usuariosPage,
  .usuarios-page {
    padding:
      13px !important;
  }


  #usuariosPage .usuarios-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  #usuariosPage .usuarios-metric:first-child {
    grid-column:
      1 / -1;
  }


  #usuariosPage .usuarios-col-email {
    display:
      none;
  }

}


/* =========================================================
   MOBILE CARDS ≤ 720
   ========================================================= */

@media (
  max-width: 720px
) {

  #usuariosPage,
  .usuarios-page {
    padding:
      10px !important;
  }


  /* =======================================================
     HEADER
     ======================================================= */

  #usuariosPage .usuarios-page__header {
    align-items:
      flex-end;

    gap:
      10px;

    margin-bottom:
      11px;
  }


  #usuariosPage .usuarios-page__title h1 {
    font-size:
      23px;
  }


  #usuariosPage .usuarios-page__title p {
    max-width:
      330px;

    font-size:
      10px;
  }


  #usuariosPage .usuarios-btn {
    min-height:
      34px;

    padding:
      0 10px;
  }


  /* =======================================================
     METRICS
     ======================================================= */

  #usuariosPage .usuarios-metrics {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );

    gap:
      7px;
  }


  #usuariosPage .usuarios-metric:first-child {
    grid-column:
      1 / -1;
  }


  #usuariosPage .usuarios-metric {
    min-height:
      69px;

    padding:
      9px;
  }


  #usuariosPage .usuarios-metric__icon {
    width:
      30px;

    height:
      30px;

    flex-basis:
      30px;
  }


  #usuariosPage .usuarios-metric__content > strong {
    font-size:
      16px;
  }


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

  #usuariosPage .usuarios-toolbar {
    padding:
      8px;
  }


  #usuariosPage .usuarios-toolbar__filters {
    display:
      grid;

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

    gap:
      6px;
  }


  #usuariosPage .usuarios-filter {
    width:
      100%;

    height:
      34px;
  }


  #usuariosPage .usuarios-filter--limit {
    grid-column:
      1 / -1;
  }


  /* =======================================================
     TABLE -> CARDS
     ======================================================= */

  #usuariosPage .usuarios-table-wrap {
    padding:
      8px;

    overflow:
      visible;
  }


  #usuariosPage .usuarios-table,
  #usuariosPage .usuarios-table tbody {
    display:
      block;

    width:
      100%;
  }


  #usuariosPage .usuarios-table thead {
    display:
      none;
  }


  #usuariosPage .usuarios-table tbody {
    display:
      grid;

    gap:
      8px;
  }


  #usuariosPage .usuarios-table tbody tr {
    position:
      relative;

    width:
      100%;

    min-width:
      0;

    display:
      grid;

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

    gap:
      0;

    overflow:
      visible;

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

    border-radius:
      11px;

    background:
      var(--u-surface);
  }


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


  #usuariosPage .usuarios-table tbody td {
    position:
      relative;

    width:
      auto;

    min-width:
      0;

    height:
      auto;

    min-height:
      51px;

    display:
      flex;

    flex-direction:
      column;

    align-items:
      flex-start;

    justify-content:
      center;

    gap:
      5px;

    padding:
      9px 10px;

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

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


  #usuariosPage .usuarios-table tbody td::before {
    content:
      attr(data-label);

    display:
      block;

    color:
      var(--u-text);

    font-size:
      7px;

    font-weight:
      850;

    line-height:
      1;

    letter-spacing:
      .06em;

    text-transform:
      uppercase;
  }


  #usuariosPage .usuarios-table tbody td:nth-child(2n) {
    border-right:
      0;
  }


  #usuariosPage .usuarios-table tbody td:nth-last-child(-n + 2) {
    border-bottom:
      0;
  }


  /* =======================================================
     USER CARD
     ======================================================= */

  #usuariosPage .usuarios-table tbody td.usuarios-cell-user {
    grid-column:
      1 / -1;

    min-height:
      64px;

    display:
      block;

    padding:
      9px 10px;

    border-right:
      0;
  }


  #usuariosPage .usuarios-table tbody td.usuarios-cell-user::before {
    display:
      none;
  }


  #usuariosPage .usuarios-user__avatar {
    width:
      38px;

    height:
      38px;

    flex-basis:
      38px;
  }


  #usuariosPage .usuarios-user__content strong {
    font-size:
      10.5px;
  }


  /* =======================================================
     RESTAURAR COLUMNAS OCULTAS
     ======================================================= */

  #usuariosPage .usuarios-col-email,
  #usuariosPage .usuarios-col-password,
  #usuariosPage .usuarios-col-last-access,
  #usuariosPage .usuarios-col-created {
    display:
      flex;
  }


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

  #usuariosPage .usuarios-table tbody td.usuarios-col-actions {
    align-items:
      flex-end;

    text-align:
      right;
  }


  #usuariosPage .usuarios-row-actions {
    justify-content:
      flex-end;
  }


  #usuariosPage .usuarios-row-menu {
    top:
      calc(100% + 4px);

    right:
      0;

    width:
      min(
        190px,
        calc(100vw - 52px)
      );
  }


  /* =======================================================
     PAGINATION
     ======================================================= */

  #usuariosPage .usuarios-pagination {
    flex-wrap:
      wrap;

    min-height:
      44px;
  }

}


/* =========================================================
   MOBILE ≤ 520
   ========================================================= */

@media (
  max-width: 520px
) {

  #usuariosPage,
  .usuarios-page {
    padding:
      8px !important;
  }


  #usuariosPage .usuarios-page__header {
    align-items:
      stretch;

    flex-direction:
      column;
  }


  #usuariosPage .usuarios-page__actions {
    width:
      100%;
  }


  #usuariosPage .usuarios-page__actions .usuarios-btn {
    width:
      100%;
  }


  #usuariosPage .usuarios-metrics {
    gap:
      6px;
  }


  #usuariosPage .usuarios-metric {
    min-height:
      65px;

    gap:
      7px;
  }


  #usuariosPage .usuarios-metric__content > span {
    font-size:
      7.5px;
  }


  #usuariosPage .usuarios-metric__content > small {
    font-size:
      7px;
  }


  #usuariosPage .usuarios-toolbar__filters {
    grid-template-columns:
      1fr;
  }


  #usuariosPage .usuarios-filter--limit {
    grid-column:
      auto;
  }


  #usuariosPage .usuarios-table tbody tr {
    grid-template-columns:
      1fr;
  }


  #usuariosPage .usuarios-table tbody td {
    min-height:
      48px;

    border-right:
      0;

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


  #usuariosPage .usuarios-table tbody td:nth-last-child(-n + 2) {
    border-bottom:
      1px solid var(--u-border);
  }


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


  #usuariosPage .usuarios-table tbody td.usuarios-col-actions {
    min-height:
      45px;

    flex-direction:
      row;

    align-items:
      center;

    justify-content:
      space-between;
  }


  #usuariosPage .usuarios-table tbody td.usuarios-col-actions::before {
    margin-right:
      auto;
  }


  #usuariosPage .usuarios-pagination {
    align-items:
      stretch;

    flex-direction:
      column;

    gap:
      8px;
  }


  #usuariosPage .usuarios-pagination__controls {
    width:
      100%;

    justify-content:
      space-between;
  }


  #usuariosPage .usuarios-pagination__info {
    justify-content:
      center;
  }


  /* =======================================================
     MODAL
     ======================================================= */

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

    padding:
      8px;
  }


  .usuarios-modal,
  .usuarios-modal--large {
    width:
      100%;

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

    border-radius:
      15px;
  }


  .usuarios-modal__body {
    padding:
      11px;
  }


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


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


  .usuarios-detail__profile {
    grid-template-columns:
      52px
      minmax(0, 1fr);

    gap:
      9px;
  }


  .usuarios-detail__avatar {
    width:
      52px;

    height:
      52px;

    flex-basis:
      52px;
  }


  .usuarios-detail__badges {
    grid-column:
      1 / -1;

    justify-content:
      flex-start;
  }


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


  .usuarios-detail-field {
    border-right:
      0;

    border-bottom:
      1px solid #d5dae2;
  }


  .usuarios-detail-field:nth-last-child(-n + 2) {
    border-bottom:
      1px solid #d5dae2;
  }


  .usuarios-detail-field:last-child {
    border-bottom:
      0;
  }


  .usuarios-modal__footer {
    display:
      grid;

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


  .usuarios-modal__footer .usuarios-btn {
    width:
      100%;
  }

}


/* =========================================================
   MOBILE ≤ 380
   ========================================================= */

@media (
  max-width: 380px
) {

  #usuariosPage .usuarios-page__title h1 {
    font-size:
      21px;
  }


  #usuariosPage .usuarios-metrics {
    grid-template-columns:
      1fr;
  }


  #usuariosPage .usuarios-metric:first-child {
    grid-column:
      auto;
  }


  #usuariosPage .usuarios-metric {
    min-height:
      60px;
  }


  .usuarios-modal__heading-copy h2 {
    max-width:
      190px;

    font-size:
      13px;
  }


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

}


/* =========================================================
   LARGE SCREENS
   ========================================================= */

@media (
  min-width: 1500px
) {

  #usuariosPage,
  .usuarios-page {
    padding:
      20px !important;
  }


  #usuariosPage .usuarios-metric {
    min-height:
      82px;
  }


  #usuariosPage .usuarios-user__content strong {
    font-size:
      10px;
  }


  #usuariosPage .usuarios-table tbody td {
    font-size:
      9.5px;
  }

}


/* =========================================================
   FOCUS
   ========================================================= */

#usuariosPage button:focus-visible,
#usuariosPage input:focus-visible,
#usuariosPage select:focus-visible,
.usuarios-modal button:focus-visible,
.usuarios-modal input:focus-visible,
.usuarios-modal select:focus-visible {
  outline:
    2px solid currentColor;

  outline-offset:
    2px;
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (
  prefers-reduced-motion: reduce
) {

  #usuariosPage *,
  #usuariosPage *::before,
  #usuariosPage *::after,
  .usuarios-modal,
  .usuarios-modal-backdrop,
  .usuarios-toast,
  .usuarios-toast::before,
  .usuarios-toast::after {
    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}/* =========================================================
   USUARIOS
   FIX ALTURA COMPLETA + MENÚ ACCIONES SIN RECORTE
   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   MOUNT
   OCUPAR TODO EL ESPACIO DISPONIBLE
   ========================================================= */

#usuariosPageMount {
  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    100% !important;

  flex:
    1 1 auto !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  align-self:
    stretch !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;
}


/* =========================================================
   PAGE
   ALTURA COMPLETA HASTA EL FOOTER
   ========================================================= */

#usuariosPage,
.usuarios-page {
  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    100% !important;

  flex:
    1 1 auto !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;
}


/* =========================================================
   PANEL
   CRECE HASTA COMPLETAR LA ALTURA
   ========================================================= */

#usuariosPage .usuarios-panel {
  position:
    relative !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  flex:
    1 1 auto !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  overflow:
    visible !important;
}


/* =========================================================
   TABLE AREA
   CRECE VERTICALMENTE
   ========================================================= */

#usuariosPage .usuarios-table-area {
  position:
    relative !important;

  width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    0 !important;

  flex:
    1 1 auto !important;

  overflow:
    visible !important;
}


/* =========================================================
   TABLE WRAP
   NO CORTAR MENÚ
   ========================================================= */

#usuariosPage .usuarios-table-wrap {
  position:
    relative !important;

  width:
    100% !important;

  min-width:
    0 !important;

  overflow:
    visible !important;
}


/* =========================================================
   TABLA
   NO GENERAR CONTEXTO DE RECORTE
   ========================================================= */

#usuariosPage .usuarios-table {
  position:
    relative !important;

  overflow:
    visible !important;
}


/* =========================================================
   FILAS
   PERMITIR QUE EL MENÚ SALGA DE LA TABLA
   ========================================================= */

#usuariosPage .usuarios-table tbody {
  overflow:
    visible !important;
}


#usuariosPage .usuarios-table tbody tr {
  position:
    relative !important;

  z-index:
    1;

  overflow:
    visible !important;
}


/* =========================================================
   FILA CON MENÚ ABIERTO
   SUBIRLA SOBRE TODO
   ========================================================= */

#usuariosPage .usuarios-table tbody tr:has(.usuarios-row-menu) {
  z-index:
    500 !important;
}


/* =========================================================
   CELDAS
   NO CORTAR MENÚ
   ========================================================= */

#usuariosPage .usuarios-table tbody td {
  overflow:
    visible !important;
}


#usuariosPage .usuarios-col-actions {
  position:
    relative !important;

  z-index:
    20 !important;

  overflow:
    visible !important;
}


/* =========================================================
   ACCIONES
   ========================================================= */

#usuariosPage .usuarios-row-actions {
  position:
    relative !important;

  z-index:
    30 !important;

  overflow:
    visible !important;
}


/* =========================================================
   MENÚ
   SIEMPRE POR ENCIMA
   ========================================================= */

#usuariosPage .usuarios-row-menu {
  position:
    absolute !important;

  top:
    calc(100% + 6px) !important;

  right:
    0 !important;

  bottom:
    auto !important;

  left:
    auto !important;

  z-index:
    1000 !important;

  overflow:
    hidden !important;
}


/* =========================================================
   PAGINACIÓN
   NO TAPAR MENÚ
   ========================================================= */

#usuariosPage .usuarios-pagination {
  position:
    relative !important;

  z-index:
    1 !important;

  flex:
    0 0 auto !important;

  overflow:
    visible !important;
}


/* =========================================================
   APP CONTENT
   IMPORTANTE:
   EVITAR RECORTE VERTICAL DEL MÓDULO
   ========================================================= */

.app-content:has(#usuariosPageMount),
.page-content:has(#usuariosPageMount),
.main-content:has(#usuariosPageMount),
.content:has(#usuariosPageMount),
.content-wrapper:has(#usuariosPageMount),
.page-wrapper:has(#usuariosPageMount),
.workspace:has(#usuariosPageMount) {
  min-height:
    100% !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;
}


/* =========================================================
   MAIN
   MANTENER EL CONTENIDO ESTIRADO
   ========================================================= */

.app-main:has(#usuariosPageMount),
main:has(#usuariosPageMount) {
  min-height:
    0 !important;

  display:
    flex !important;

  flex-direction:
    column !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;
}


/* =========================================================
   DESKTOP
   DAR ESPACIO REAL AL PANEL
   ========================================================= */

@media (min-width: 721px) {

  #usuariosPageMount {
    min-height:
      calc(100dvh - 118px) !important;
  }


  #usuariosPage,
  .usuarios-page {
    min-height:
      calc(100dvh - 118px) !important;
  }


  #usuariosPage .usuarios-panel {
    min-height:
      360px !important;
  }

}


/* =========================================================
   MOBILE
   NO FORZAR ALTURA ARTIFICIAL
   ========================================================= */

@media (max-width: 720px) {

  #usuariosPageMount,
  #usuariosPage,
  .usuarios-page {
    min-height:
      auto !important;
  }


  #usuariosPage .usuarios-panel,
  #usuariosPage .usuarios-table-area,
  #usuariosPage .usuarios-table-wrap,
  #usuariosPage .usuarios-table tbody,
  #usuariosPage .usuarios-table tbody tr,
  #usuariosPage .usuarios-table tbody td,
  #usuariosPage .usuarios-col-actions,
  #usuariosPage .usuarios-row-actions {
    overflow:
      visible !important;
  }


  #usuariosPage .usuarios-table tbody tr:has(.usuarios-row-menu) {
    z-index:
      500 !important;
  }


  #usuariosPage .usuarios-row-menu {
    z-index:
      1000 !important;
  }

}/* =========================================================
   USUARIOS · FULL WIDTH / FULL HEIGHT
   DARK MODE NEGRO REAL
   AGREGAR AL FINAL
   ========================================================= */


/* =========================================================
   APP CONTENT
   ========================================================= */

.app-content:has(#usuariosPageMount) {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    100% !important;

  margin:
    0 !important;

  padding:
    10px 12px !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;
}


/* =========================================================
   MOUNT
   ========================================================= */

#usuariosPageMount {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    100% !important;

  margin:
    0 !important;

  padding:
    0 !important;

  flex:
    1 1 auto !important;

  align-self:
    stretch !important;

  justify-self:
    stretch !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;
}


/* =========================================================
   PAGE
   ========================================================= */

#usuariosPage,
.usuarios-page {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  min-height:
    calc(
      100dvh -
      var(--topbar-height, 68px) -
      20px
    ) !important;

  margin:
    0 !important;

  padding:
    0 !important;

  overflow-x:
    clip !important;

  overflow-y:
    visible !important;
}


/* =========================================================
   PANEL
   ========================================================= */

#usuariosPage .usuarios-panel {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;

  flex:
    1 1 auto !important;
}


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

#usuariosPage .usuarios-table-area,
#usuariosPage .usuarios-table-wrap {
  width:
    100% !important;

  max-width:
    none !important;

  min-width:
    0 !important;
}


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

#usuariosPage .usuarios-table {
  width:
    100% !important;

  min-width:
    100% !important;

  max-width:
    none !important;
}


/* =========================================================
   DARK MODE · TOKENS NEGRO REAL
   ========================================================= */

html[data-theme="dark"]
#usuariosPage,

body.dark
#usuariosPage,

.dark
#usuariosPage {

  --u-bg:
    #000000;

  --u-surface:
    #050505;

  --u-surface-soft:
    #0a0a0a;

  --u-surface-hover:
    #111111;

  --u-border:
    #242424;

  --u-border-strong:
    #3a3a3a;

  --u-text:
    #ffffff;

  --u-violet:
    #a495dc;

  --u-violet-soft:
    rgba(164, 149, 220, .10);

  background:
    #000000 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · APP CONTENT
   ========================================================= */

html[data-theme="dark"]
.app-content:has(#usuariosPageMount),

body.dark
.app-content:has(#usuariosPageMount) {
  background:
    #000000 !important;
}


/* =========================================================
   DARK · MOUNT
   ========================================================= */

html[data-theme="dark"]
#usuariosPageMount,

body.dark
#usuariosPageMount {
  background:
    #000000 !important;
}


/* =========================================================
   DARK · MAIN SURFACES
   ========================================================= */

html[data-theme="dark"]
#usuariosPage .usuarios-metric,

html[data-theme="dark"]
#usuariosPage .usuarios-panel,

html[data-theme="dark"]
#usuariosPage .usuarios-toolbar,

html[data-theme="dark"]
#usuariosPage .usuarios-table-area,

html[data-theme="dark"]
#usuariosPage .usuarios-table tbody td,

html[data-theme="dark"]
#usuariosPage .usuarios-pagination,

html[data-theme="dark"]
#usuariosPage .usuarios-loading,

html[data-theme="dark"]
#usuariosPage .usuarios-empty,

body.dark
#usuariosPage .usuarios-metric,

body.dark
#usuariosPage .usuarios-panel,

body.dark
#usuariosPage .usuarios-toolbar,

body.dark
#usuariosPage .usuarios-table-area,

body.dark
#usuariosPage .usuarios-table tbody td,

body.dark
#usuariosPage .usuarios-pagination,

body.dark
#usuariosPage .usuarios-loading,

body.dark
#usuariosPage .usuarios-empty {
  background:
    #050505 !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · SECONDARY SURFACES
   ========================================================= */

html[data-theme="dark"]
#usuariosPage .usuarios-search,

html[data-theme="dark"]
#usuariosPage .usuarios-filter,

html[data-theme="dark"]
#usuariosPage .usuarios-table thead th,

html[data-theme="dark"]
#usuariosPage .usuarios-metric__icon,

html[data-theme="dark"]
#usuariosPage .usuarios-empty__icon,

html[data-theme="dark"]
#usuariosPage .usuarios-icon-btn,

body.dark
#usuariosPage .usuarios-search,

body.dark
#usuariosPage .usuarios-filter,

body.dark
#usuariosPage .usuarios-table thead th,

body.dark
#usuariosPage .usuarios-metric__icon,

body.dark
#usuariosPage .usuarios-empty__icon,

body.dark
#usuariosPage .usuarios-icon-btn {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · TABLE ROW HOVER
   ========================================================= */

html[data-theme="dark"]
#usuariosPage .usuarios-table tbody tr:hover td,

body.dark
#usuariosPage .usuarios-table tbody tr:hover td {
  background:
    #0d0d0d !important;
}


/* =========================================================
   DARK · SEARCH / FILTER HOVER
   ========================================================= */

html[data-theme="dark"]
#usuariosPage .usuarios-search:focus-within,

html[data-theme="dark"]
#usuariosPage .usuarios-filter:hover,

html[data-theme="dark"]
#usuariosPage .usuarios-filter:focus-within,

body.dark
#usuariosPage .usuarios-search:focus-within,

body.dark
#usuariosPage .usuarios-filter:hover,

body.dark
#usuariosPage .usuarios-filter:focus-within {
  background:
    #111111 !important;

  border-color:
    #3a3a3a !important;
}


/* =========================================================
   DARK · TEXT GENERAL
   ========================================================= */

html[data-theme="dark"]
#usuariosPage .usuarios-page__overline,

html[data-theme="dark"]
#usuariosPage .usuarios-page__title h1,

html[data-theme="dark"]
#usuariosPage .usuarios-page__title p,

html[data-theme="dark"]
#usuariosPage .usuarios-metric,

html[data-theme="dark"]
#usuariosPage .usuarios-metric__icon,

html[data-theme="dark"]
#usuariosPage .usuarios-metric__content > span,

html[data-theme="dark"]
#usuariosPage .usuarios-metric__content > strong,

html[data-theme="dark"]
#usuariosPage .usuarios-metric__content > small,

html[data-theme="dark"]
#usuariosPage .usuarios-search,

html[data-theme="dark"]
#usuariosPage .usuarios-search > svg,

html[data-theme="dark"]
#usuariosPage .usuarios-search input,

html[data-theme="dark"]
#usuariosPage .usuarios-search input::placeholder,

html[data-theme="dark"]
#usuariosPage .usuarios-search__clear,

html[data-theme="dark"]
#usuariosPage .usuarios-filter,

html[data-theme="dark"]
#usuariosPage .usuarios-select,

html[data-theme="dark"]
#usuariosPage .usuarios-table,

html[data-theme="dark"]
#usuariosPage .usuarios-table th,

html[data-theme="dark"]
#usuariosPage .usuarios-table td,

html[data-theme="dark"]
#usuariosPage .usuarios-user,

html[data-theme="dark"]
#usuariosPage .usuarios-user__content strong,

html[data-theme="dark"]
#usuariosPage .usuarios-user__content small,

html[data-theme="dark"]
#usuariosPage .usuarios-username,

html[data-theme="dark"]
#usuariosPage .usuarios-email,

html[data-theme="dark"]
#usuariosPage .usuarios-role,

html[data-theme="dark"]
#usuariosPage .usuarios-date,

html[data-theme="dark"]
#usuariosPage .usuarios-password-state,

html[data-theme="dark"]
#usuariosPage .usuarios-pagination,

html[data-theme="dark"]
#usuariosPage .usuarios-pagination__info,

html[data-theme="dark"]
#usuariosPage .usuarios-pagination__page,

html[data-theme="dark"]
#usuariosPage .usuarios-loading,

html[data-theme="dark"]
#usuariosPage .usuarios-empty,

body.dark
#usuariosPage .usuarios-page__overline,

body.dark
#usuariosPage .usuarios-page__title h1,

body.dark
#usuariosPage .usuarios-page__title p,

body.dark
#usuariosPage .usuarios-metric,

body.dark
#usuariosPage .usuarios-metric__icon,

body.dark
#usuariosPage .usuarios-metric__content > span,

body.dark
#usuariosPage .usuarios-metric__content > strong,

body.dark
#usuariosPage .usuarios-metric__content > small,

body.dark
#usuariosPage .usuarios-search,

body.dark
#usuariosPage .usuarios-search > svg,

body.dark
#usuariosPage .usuarios-search input,

body.dark
#usuariosPage .usuarios-search input::placeholder,

body.dark
#usuariosPage .usuarios-search__clear,

body.dark
#usuariosPage .usuarios-filter,

body.dark
#usuariosPage .usuarios-select,

body.dark
#usuariosPage .usuarios-table,

body.dark
#usuariosPage .usuarios-table th,

body.dark
#usuariosPage .usuarios-table td,

body.dark
#usuariosPage .usuarios-user,

body.dark
#usuariosPage .usuarios-user__content strong,

body.dark
#usuariosPage .usuarios-user__content small,

body.dark
#usuariosPage .usuarios-username,

body.dark
#usuariosPage .usuarios-email,

body.dark
#usuariosPage .usuarios-role,

body.dark
#usuariosPage .usuarios-date,

body.dark
#usuariosPage .usuarios-password-state,

body.dark
#usuariosPage .usuarios-pagination,

body.dark
#usuariosPage .usuarios-pagination__info,

body.dark
#usuariosPage .usuarios-pagination__page,

body.dark
#usuariosPage .usuarios-loading,

body.dark
#usuariosPage .usuarios-empty {
  color:
    #ffffff !important;
}


/* =========================================================
   DARK · ROW MENU
   ========================================================= */

html[data-theme="dark"]
#usuariosPage .usuarios-row-menu,

body.dark
#usuariosPage .usuarios-row-menu {
  background:
    #050505 !important;

  border-color:
    #3a3a3a !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"]
#usuariosPage .usuarios-row-menu button,

body.dark
#usuariosPage .usuarios-row-menu button {
  color:
    #ffffff !important;
}


html[data-theme="dark"]
#usuariosPage .usuarios-row-menu button:hover,

body.dark
#usuariosPage .usuarios-row-menu button:hover {
  background:
    #111111 !important;
}


/* =========================================================
   DARK · AVATAR
   ========================================================= */

html[data-theme="dark"]
#usuariosPage .usuarios-user__avatar,

body.dark
#usuariosPage .usuarios-user__avatar {
  background:
    #0a0a0a !important;

  border-color:
    #2b2b2b !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MODAL
   ========================================================= */

html[data-theme="dark"]
.usuarios-modal,

body.dark
.usuarios-modal {
  background:
    #050505 !important;

  border-color:
    #333333 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MODAL HEADER
   ========================================================= */

html[data-theme="dark"]
.usuarios-modal__header,

body.dark
.usuarios-modal__header {
  background:
    #050505 !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · MODAL BODY
   ========================================================= */

html[data-theme="dark"]
.usuarios-modal__body,

body.dark
.usuarios-modal__body {
  background:
    #050505 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · MODAL FOOTER
   ========================================================= */

html[data-theme="dark"]
.usuarios-modal__footer,

body.dark
.usuarios-modal__footer {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;
}


/* =========================================================
   DARK · MODAL ICON
   ========================================================= */

html[data-theme="dark"]
.usuarios-modal__heading-icon,

body.dark
.usuarios-modal__heading-icon {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · FORM INPUTS
   ========================================================= */

html[data-theme="dark"]
.usuarios-field input,

html[data-theme="dark"]
.usuarios-field select,

body.dark
.usuarios-field input,

body.dark
.usuarios-field select {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"]
.usuarios-field input:focus,

html[data-theme="dark"]
.usuarios-field select:focus,

body.dark
.usuarios-field input:focus,

body.dark
.usuarios-field select:focus {
  background:
    #111111 !important;

  border-color:
    #484848 !important;
}


/* =========================================================
   DARK · FORM TEXT
   ========================================================= */

html[data-theme="dark"]
.usuarios-modal__heading-copy > span,

html[data-theme="dark"]
.usuarios-modal__heading-copy h2,

html[data-theme="dark"]
.usuarios-field__label,

html[data-theme="dark"]
.usuarios-field__label > span,

html[data-theme="dark"]
.usuarios-switch__content strong,

html[data-theme="dark"]
.usuarios-switch__content small,

body.dark
.usuarios-modal__heading-copy > span,

body.dark
.usuarios-modal__heading-copy h2,

body.dark
.usuarios-field__label,

body.dark
.usuarios-field__label > span,

body.dark
.usuarios-switch__content strong,

body.dark
.usuarios-switch__content small {
  color:
    #ffffff !important;
}


/* =========================================================
   DARK · DETAIL
   ========================================================= */

html[data-theme="dark"]
.usuarios-detail__profile,

html[data-theme="dark"]
.usuarios-delete__user,

body.dark
.usuarios-detail__profile,

body.dark
.usuarios-delete__user {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;
}


html[data-theme="dark"]
.usuarios-detail__grid,

body.dark
.usuarios-detail__grid {
  border-color:
    #242424 !important;

  background:
    #050505 !important;
}


html[data-theme="dark"]
.usuarios-detail-field,

body.dark
.usuarios-detail-field {
  background:
    #050505 !important;

  border-color:
    #242424 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · DETAIL TEXT
   ========================================================= */

html[data-theme="dark"]
.usuarios-detail__identity strong,

html[data-theme="dark"]
.usuarios-detail__identity span,

html[data-theme="dark"]
.usuarios-detail-field__label,

html[data-theme="dark"]
.usuarios-detail-field__label span,

html[data-theme="dark"]
.usuarios-detail-field > strong,

html[data-theme="dark"]
.usuarios-delete__user strong,

html[data-theme="dark"]
.usuarios-delete__user span,

body.dark
.usuarios-detail__identity strong,

body.dark
.usuarios-detail__identity span,

body.dark
.usuarios-detail-field__label,

body.dark
.usuarios-detail-field__label span,

body.dark
.usuarios-detail-field > strong,

body.dark
.usuarios-delete__user strong,

body.dark
.usuarios-delete__user span {
  color:
    #ffffff !important;
}


/* =========================================================
   DARK · DETAIL AVATARS
   ========================================================= */

html[data-theme="dark"]
.usuarios-detail__avatar,

html[data-theme="dark"]
.usuarios-delete__avatar,

body.dark
.usuarios-detail__avatar,

body.dark
.usuarios-delete__avatar {
  background:
    #0a0a0a !important;

  border-color:
    #2b2b2b !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · ROLE BADGE
   ========================================================= */

html[data-theme="dark"]
.usuarios-role-badge,

body.dark
.usuarios-role-badge {
  color:
    #ffffff !important;
}


/* =========================================================
   DARK · SECONDARY BUTTON
   ========================================================= */

html[data-theme="dark"]
#usuariosPage .usuarios-btn--secondary,

html[data-theme="dark"]
.usuarios-modal .usuarios-btn--secondary,

body.dark
#usuariosPage .usuarios-btn--secondary,

body.dark
.usuarios-modal .usuarios-btn--secondary {
  background:
    #0a0a0a !important;

  border-color:
    #242424 !important;

  color:
    #ffffff !important;
}


html[data-theme="dark"]
#usuariosPage .usuarios-btn--secondary:hover,

html[data-theme="dark"]
.usuarios-modal .usuarios-btn--secondary:hover,

body.dark
#usuariosPage .usuarios-btn--secondary:hover,

body.dark
.usuarios-modal .usuarios-btn--secondary:hover {
  background:
    #111111 !important;

  border-color:
    #3a3a3a !important;
}


/* =========================================================
   DARK · TOAST
   ========================================================= */

html[data-theme="dark"]
.usuarios-toast,

body.dark
.usuarios-toast {
  background:
    #0a0a0a !important;

  border-color:
    #333333 !important;

  color:
    #ffffff !important;
}


/* =========================================================
   DARK · SPINNER
   ========================================================= */

html[data-theme="dark"]
#usuariosPage .usuarios-spinner,

body.dark
#usuariosPage .usuarios-spinner {
  border-color:
    #333333 !important;

  border-top-color:
    #ffffff !important;
}


/* =========================================================
   RESPONSIVE ≤ 900
   ========================================================= */

@media (
  max-width: 900px
) {

  .app-content:has(#usuariosPageMount) {
    padding:
      8px !important;
  }


  #usuariosPage,
  .usuarios-page {
    min-height:
      calc(
        100dvh -
        var(--topbar-height, 68px) -
        16px
      ) !important;

    padding:
      0 !important;
  }

}


/* =========================================================
   RESPONSIVE ≤ 620
   ========================================================= */

@media (
  max-width: 620px
) {

  .app-content:has(#usuariosPageMount) {
    padding:
      6px !important;
  }


  #usuariosPage,
  .usuarios-page {
    min-height:
      auto !important;

    padding:
      0 !important;
  }

}