/* =========================================================
   DRIVE ZERNYX · LAYOUT
   Sidebar · Topbar · Contenido principal
   ========================================================= */

:root {
  --sidebar-collapsed-width:
    78px;
}

.app-layout {
  display:
    grid;

  grid-template-columns:
    var(
      --sidebar-width
    )
    minmax(
      0,
      1fr
    );

  width:
    100%;

  min-height:
    100vh;

  background:
    transparent;

  transition:
    grid-template-columns
    var(
      --transition-slow
    );
}

/* =========================================================
   SIDEBAR
   ========================================================= */

.app-sidebar {
  position:
    sticky;

  top:
    0;

  z-index:
    700;

  display:
    flex;

  flex-direction:
    column;

  width:
    var(
      --sidebar-width
    );

  min-width:
    var(
      --sidebar-width
    );

  height:
    100vh;

  overflow:
    visible;

  border-right:
    1px solid
    var(
      --sidebar-line-strong
    );

  color:
    var(
      --sidebar-text
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        15, 15, 16,
        0.995
      ),
      rgba(
        9, 9, 10,
        0.995
      )
    );

  transition:
    width
    var(
      --transition-slow
    ),
    min-width
    var(
      --transition-slow
    ),
    transform
    var(
      --transition-slow
    ),
    border-color
    var(
      --transition
    );
}

.app-sidebar::before {
  position:
    absolute;

  top:
    0;

  right:
    -1px;

  width:
    1px;

  height:
    120px;

  content:
    "";

  background:
    linear-gradient(
      to bottom,
      var(
        --accent
      ),
      transparent
    );
}

.app-sidebar__image-overlay {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      180deg,
      rgba(
        8, 7, 9,
        0.08
      ),
      rgba(
        8, 7, 9,
        0.3
      )
    );
}

.app-sidebar__grid {
  position:
    absolute;

  inset:
    0;

  z-index:
    0;

  pointer-events:
    none;

  opacity:
    0.18;

  background-image:
    linear-gradient(
      rgba(
        255,
        255,
        255,
        0.018
      )
      1px,
      transparent
      1px
    ),
    linear-gradient(
      90deg,
      rgba(
        255,
        255,
        255,
        0.018
      )
      1px,
      transparent
      1px
    );

  background-size:
    32px
    32px;
}

/* =========================================================
   SIDEBAR · MARCA
   ========================================================= */

.app-sidebar__brand {
  position:
    relative;

  z-index:
    2;

  display:
    grid;

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

  align-items:
    center;

  gap:
    12px;

  min-height:
    var(
      --topbar-height
    );

  padding:
    14px
    44px
    14px
    16px;

  overflow:
    visible;

  border-bottom:
    1px solid
    var(
      --sidebar-line-strong
    );
}

.app-sidebar__brand::after {
  position:
    absolute;

  right:
    16px;

  bottom:
    -1px;

  width:
    46px;

  height:
    1px;

  content:
    "";

  background:
    var(
      --accent
    );
}

.app-sidebar__logo {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    46px;

  min-width:
    46px;

  height:
    46px;

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

  border-radius: 0;

  color:
    var(
      --accent
    );

  background:
    linear-gradient(
      145deg,
      rgba(
        232, 232, 236,
        0.09
      ),
      rgba(
        232, 232, 236,
        0.02
      )
    );

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

.app-sidebar__logo:hover {
  border-color:
    var(
      --accent
    );

  transform:
    rotate(
      -3deg
    );
}

.app-sidebar__logo svg {
  width:
    21px;

  height:
    21px;

  stroke-width:
    1.8;
}

.app-sidebar__logo-status {
  position:
    absolute;

  right:
    -3px;

  bottom:
    -3px;

  width:
    10px;

  height:
    10px;

  border:
    2px solid
    var(
      --sidebar-bg
    );

  border-radius:
    50%;

  background:
    var(
      --success
    );

  animation:
    sidebar-status-pulse
    2s
    ease-in-out
    infinite;
}

.app-sidebar__brand-copy {
  display:
    flex;

  flex-direction:
    column;

  gap:
    3px;

  min-width:
    0;
}

.app-sidebar__brand-copy strong {
  overflow:
    hidden;

  color:
    var(
      --sidebar-text
    );

  font-size:
    15px;

  font-weight:
    750;

  letter-spacing:
    -0.025em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.app-sidebar__brand-copy span {
  overflow:
    hidden;

  color:
    var(
      --sidebar-text-muted
    );

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size:
    8px;

  letter-spacing:
    0.07em;

  text-overflow:
    ellipsis;

  text-transform:
    uppercase;

  white-space:
    nowrap;
}

.app-sidebar__version {
  padding:
    4px
    6px;

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

  border-radius: 0;

  color:
    var(
      --sidebar-text-muted
    );

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size:
    7px;

  letter-spacing:
    0.08em;
}

/* =========================================================
   BOTÓN CERRAR / ABRIR SIDEBAR
   ========================================================= */

.app-sidebar__collapse {
  position:
    absolute;

  top:
    50%;

  right:
    -14px;

  z-index:
    30;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  min-width:
    28px;

  height:
    36px;

  padding:
    0;

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

  border-left:
    0;

  border-radius: 0;

  color:
    var(
      --sidebar-text-muted
    );

  background:
    #0e0e0f;

  transform:
    translateY(
      -50%
    );

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

.app-sidebar__collapse:hover {
  border-color:
    var(
      --accent-border
    );

  color:
    var(
      --accent
    );

  background:
    #151516;
}

.app-sidebar__collapse svg {
  width:
    15px;

  height:
    15px;

  stroke-width:
    1.9;
}

/* =========================================================
   SIDEBAR · ESTADO
   ========================================================= */

.app-sidebar__system {
  position:
    relative;

  z-index:
    1;

  padding:
    13px
    16px;

  overflow:
    hidden;

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

.app-sidebar__system-row {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-bottom:
    8px;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size:
    8px;

  letter-spacing:
    0.1em;

  text-transform:
    uppercase;
}

.app-sidebar__system-row span {
  color:
    var(
      --sidebar-text-muted
    );
}

.app-sidebar__system-row strong {
  color:
    var(
      --success
    );

  font-weight:
    700;
}

.app-sidebar__system-line {
  height:
    2px;

  overflow:
    hidden;

  background:
    var(
      --sidebar-line
    );
}

.app-sidebar__system-line span {
  display:
    block;

  width:
    78%;

  height:
    100%;

  background:
    linear-gradient(
      90deg,
      var(
        --success
      ),
      var(
        --accent
      )
    );

  animation:
    sidebar-system-line
    2.8s
    ease-in-out
    infinite;
}

/* =========================================================
   SIDEBAR · NAVEGACIÓN
   ========================================================= */

.app-sidebar__nav {
  position:
    relative;

  z-index:
    1;

  display:
    flex;

  flex:
    1;

  flex-direction:
    column;

  gap:
    5px;

  min-height:
    0;

  padding:
    13px
    11px;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  scrollbar-width:
    thin;

  scrollbar-color:
    var(
      --sidebar-line-strong
    )
    transparent;
}

.app-sidebar__nav::-webkit-scrollbar {
  width:
    5px;
}

.app-sidebar__nav::-webkit-scrollbar-track {
  background:
    transparent;
}

.app-sidebar__nav::-webkit-scrollbar-thumb {
  border-radius: 0;

  background:
    var(
      --sidebar-line-strong
    );
}

.app-sidebar__section-label {
  margin:
    12px
    10px
    5px;

  color:
    #646465;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size:
    8px;

  font-weight:
    700;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;
}

.app-sidebar__section-label:first-child {
  margin-top:
    2px;
}

.app-sidebar__link {
  position:
    relative;

  display:
    grid;

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

  align-items:
    center;

  gap:
    9px;

  width:
    100%;

  min-height:
    46px;

  padding:
    0
    10px;

  overflow:
    hidden;

  border:
    1px solid
    transparent;

  border-radius: 0;

  color:
    var(
      --sidebar-text-muted
    );

  font-size:
    12px;

  font-weight:
    650;

  text-align:
    left;

  background:
    transparent;

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

.app-sidebar__link::after {
  position:
    absolute;

  bottom:
    0;

  left:
    0;

  width:
    0;

  height:
    1px;

  content:
    "";

  background:
    var(
      --accent
    );

  transition:
    width
    var(
      --transition-slow
    );
}

.app-sidebar__link:hover {
  border-color:
    var(
      --sidebar-line-strong
    );

  color:
    var(
      --sidebar-text
    );

  background:
    linear-gradient(
      90deg,
      rgba(
        255,
        255,
        255,
        0.025
      ),
      rgba(
        255,
        255,
        255,
        0.008
      )
    );

  transform:
    translateX(
      3px
    );
}

.app-sidebar__link:hover::after {
  width:
    100%;
}

.app-sidebar__link.is-active {
  border-color:
    var(
      --accent-border
    );

  color:
    var(
      --sidebar-text
    );

  background:
    linear-gradient(
      90deg,
      rgba(
        232, 232, 236,
        0.11
      ),
      rgba(
        232, 232, 236,
        0.025
      )
    );
}

.app-sidebar__link.is-active::before {
  position:
    absolute;

  top:
    50%;

  left:
    -1px;

  width:
    2px;

  height:
    27px;

  content:
    "";

  background:
    var(
      --accent
    );

  transform:
    translateY(
      -50%
    );
}

.app-sidebar__link.is-active::after {
  width:
    100%;
}

.app-sidebar__link-index {
  color:
    #59595a;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size:
    8px;

  font-weight:
    600;
}

.app-sidebar__link > svg:not(
  .app-sidebar__link-arrow
) {
  width:
    18px;

  min-width:
    18px;

  height:
    18px;

  stroke-width:
    1.75;
}

.app-sidebar__link.is-active > svg:not(
  .app-sidebar__link-arrow
) {
  color:
    var(
      --accent
    );
}

.app-sidebar__link-arrow {
  width:
    14px !important;

  height:
    14px !important;

  color:
    #59595a;

  opacity:
    0;

  transform:
    translateX(
      -5px
    );

  transition:
    opacity
    var(
      --transition
    ),
    transform
    var(
      --transition
    );
}

.app-sidebar__link:hover
.app-sidebar__link-arrow,
.app-sidebar__link.is-active
.app-sidebar__link-arrow {
  opacity:
    1;

  transform:
    translateX(
      0
    );
}

.app-sidebar__separator {
  height:
    1px;

  margin:
    10px
    5px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(
        --sidebar-line-strong
      ),
      transparent
    );
}

/* =========================================================
   SIDEBAR · USUARIO
   ========================================================= */

.app-sidebar__footer {
  position:
    relative;

  z-index:
    1;

  padding:
    12px;

  overflow:
    hidden;

  border-top:
    1px solid
    var(
      --sidebar-line-strong
    );

  background:
    rgba(
      0,
      0,
      0,
      0.12
    );
}

.app-sidebar__user {
  display:
    grid;

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

  align-items:
    center;

  gap:
    10px;

  min-width:
    0;

  padding:
    10px;

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

  border-radius: 0;

  background:
    linear-gradient(
      145deg,
      rgba(
        255,
        255,
        255,
        0.026
      ),
      rgba(
        255,
        255,
        255,
        0.008
      )
    );

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

.app-sidebar__user:hover {
  border-color:
    var(
      --accent-border
    );

  background:
    var(
      --accent-soft
    );

  transform:
    translateY(
      -1px
    );
}

.app-sidebar__avatar {
  position:
    relative;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    38px;

  min-width:
    38px;

  height:
    38px;

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

  border-radius: 0;

  color:
    var(
      --accent
    );

  font-size:
    10px;

  font-weight:
    800;

  background:
    rgba(
      232, 232, 236,
      0.06
    );
}

.app-sidebar__avatar span {
  position:
    absolute;

  right:
    -2px;

  bottom:
    -2px;

  width:
    8px;

  height:
    8px;

  border:
    2px solid
    var(
      --sidebar-bg
    );

  border-radius:
    50%;

  background:
    var(
      --success
    );
}

.app-sidebar__user-copy {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}

.app-sidebar__user-copy strong {
  overflow:
    hidden;

  color:
    var(
      --sidebar-text
    );

  font-size:
    11px;

  font-weight:
    700;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.app-sidebar__user-copy span {
  overflow:
    hidden;

  color:
    var(
      --sidebar-text-muted
    );

  font-size:
    9px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.app-sidebar__user-status {
  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    28px;

  height:
    28px;

  color:
    var(
      --success
    );
}

.app-sidebar__user-status svg {
  width:
    15px;

  height:
    15px;
}

.app-sidebar__footer-meta {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  margin-top:
    9px;

  padding:
    0
    4px;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size:
    7px;

  letter-spacing:
    0.08em;
}

.app-sidebar__footer-meta span {
  color:
    #5b5b5c;
}

.app-sidebar__footer-meta strong {
  color:
    var(
      --success
    );

  font-weight:
    700;
}

/* =========================================================
   ÁREA PRINCIPAL
   ========================================================= */

.app-main {
  position:
    relative;

  display:
    flex;

  flex-direction:
    column;

  width:
    100%;

  min-width:
    0;

  min-height:
    100vh;
}

.app-main__content {
  width:
    100%;

  max-width:
    var(
      --content-max-width
    );

  min-width:
    0;

  margin:
    0
    auto;

  padding:
    22px;
}

/* =========================================================
   TOPBAR
   ========================================================= */

.app-topbar {
  position:
    sticky;

  top:
    0;

  z-index:
    300;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    24px;

  width:
    100%;

  min-height:
    var(
      --topbar-height
    );

  padding:
    0
    22px;

  overflow:
    hidden;

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

  background:
    linear-gradient(
      90deg,
      rgba(
        15, 15, 16,
        0.985
      ),
      rgba(
        10, 10, 11,
        0.985
      )
    );

  backdrop-filter: none;
}

.app-topbar::after {
  position:
    absolute;

  right:
    0;

  bottom:
    0;

  width:
    180px;

  height:
    1px;

  content:
    "";

  background:
    linear-gradient(
      90deg,
      transparent,
      var(
        --accent
      )
    );
}

.app-topbar__ambient {
  position:
    absolute;

  top:
    -80px;

  right:
    18%;

  width:
    240px;

  height:
    160px;

  border-radius:
    50%;

  pointer-events:
    none;

  background:
    radial-gradient(
      circle,
      rgba(
        232, 232, 236,
        0.075
      ),
      transparent
      68%
    );
}

/* =========================================================
   TOPBAR · IZQUIERDA
   ========================================================= */

.app-topbar__left {
  position:
    relative;

  display:
    flex;

  flex:
    1
    1
    auto;

  align-items:
    center;

  gap:
    12px;

  min-width:
    0;
}

.app-topbar__heading {
  display:
    flex;

  flex-direction:
    column;

  gap:
    2px;

  min-width:
    0;
}

.app-topbar__eyebrow {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  color:
    #69696a;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size:
    7px;

  font-weight:
    700;

  letter-spacing:
    0.11em;
}

.app-topbar__eyebrow span {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(
      --success
    );

  animation:
    sidebar-status-pulse
    2s
    ease-in-out
    infinite;
}

.app-topbar__heading h1 {
  overflow:
    hidden;

  color:
    var(
      --text
    );

  font-size:
    20px;

  font-weight:
    750;

  letter-spacing:
    -0.035em;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.app-topbar__heading p {
  overflow:
    hidden;

  color:
    var(
      --text-muted
    );

  font-size:
    10px;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

/* =========================================================
   TOPBAR · DERECHA
   ========================================================= */

.app-topbar__right {
  position:
    relative;

  display:
    flex;

  flex:
    0
    0
    auto;

  align-items:
    center;

  justify-content:
    flex-end;

  gap:
    10px;

  min-width:
    0;
}

/* =========================================================
   TOPBAR · BUSCADOR
   ========================================================= */

.app-topbar__search {
  position:
    relative;

  display:
    flex;

  flex:
    0
    0
    390px;

  align-items:
    center;

  gap:
    10px;

  width:
    390px;

  min-width:
    280px;

  height:
    44px;

  padding:
    0
    12px;

  overflow:
    hidden;

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

  border-radius: 0;

  background:
    linear-gradient(
      145deg,
      rgba(
        24, 24, 25,
        0.97
      ),
      rgba(
        13, 13, 14,
        0.98
      )
    );

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

.app-topbar__search::after {
  position:
    absolute;

  bottom:
    0;

  left:
    0;

  width:
    0;

  height:
    1px;

  content:
    "";

  background:
    var(
      --accent
    );

  transition:
    width
    var(
      --transition-slow
    );
}

.app-topbar__search:hover {
  border-color:
    #5b5b5c;
}

.app-topbar__search:focus-within {
  border-color:
    var(
      --accent-border
    );

  background:
    #111112;
}

.app-topbar__search:focus-within::after,
.app-topbar__search.has-value::after {
  width:
    100%;
}

.app-topbar__search > svg {
  flex:
    0
    0
    18px;

  width:
    18px;

  min-width:
    18px;

  height:
    18px;

  color:
    var(
      --text-soft
    );

  stroke-width:
    1.8;
}

.app-topbar__search:focus-within > svg {
  color:
    var(
      --accent
    );
}

.app-topbar__search input {
  display:
    block;

  flex:
    1
    1
    auto;

  width:
    100%;

  min-width:
    0;

  height:
    42px;

  padding:
    0;

  border:
    0;

  outline:
    0;

  color:
    var(
      --text
    );

  font-size:
    12px;

  font-weight:
    500;

  background:
    transparent;
}

.app-topbar__search input::placeholder {
  color:
    #6f6f70;
}

.app-topbar__search-code {
  color:
    #585859;

  font-family:
    "SFMono-Regular",
    Consolas,
    monospace;

  font-size:
    7px;

  letter-spacing:
    0.08em;
}

/* =========================================================
   TOPBAR · BOTONES
   ========================================================= */

.app-topbar__right
.button,
.app-topbar__right
.icon-button {
  flex:
    0
    0
    auto;
}

.app-topbar__right
.button {
  min-height:
    44px;
}

.app-topbar__right
.icon-button {
  width:
    44px;

  min-width:
    44px;

  height:
    44px;
}

.app-topbar__logout:hover:not(
  :disabled
) {
  border-color:
    var(
      --danger-border
    );

  color:
    var(
      --danger
    );

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

.app-topbar__logout.is-loading
svg {
  animation:
    topbar-logout-spin
    0.7s
    linear
    infinite;
}

.app-topbar__menu-button {
  display:
    none;
}

/* =========================================================
   OVERLAY SIDEBAR
   ========================================================= */

.app-sidebar-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    800;

  display:
    none;

  width:
    100%;

  height:
    100%;

  border:
    0;

  opacity:
    0;

  background:
    rgba(
      5, 4, 6,
      0.82
    );

  backdrop-filter: none;

  animation:
    sidebar-overlay-in
    180ms
    ease
    forwards;
}

body.sidebar-open
.app-sidebar-overlay {
  display:
    block;
}

/* =========================================================
   SIDEBAR COLAPSADO EN PC
   ========================================================= */

@media (
  min-width:
  901px
) {
  .app-topbar__menu-button {
    display:
      inline-flex;
  }

  body.sidebar-collapsed
  .app-layout {
    grid-template-columns:
      var(
        --sidebar-collapsed-width
      )
      minmax(
        0,
        1fr
      );
  }

  body.sidebar-collapsed
  .app-sidebar,
  .app-sidebar.is-collapsed {
    width:
      var(
        --sidebar-collapsed-width
      );

    min-width:
      var(
        --sidebar-collapsed-width
      );
  }

  .app-sidebar.is-collapsed
  .app-sidebar__brand {
    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    min-height:
      var(
        --topbar-height
      );

    padding:
      12px
      8px;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__brand::after {
    right:
      15px;

    left:
      15px;

    width:
      auto;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__logo {
    width:
      42px;

    min-width:
      42px;

    height:
      42px;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__collapse {
    top:
      50%;

    right:
      -14px;

    bottom:
      auto;

    width:
      28px;

    min-width:
      28px;

    height:
      36px;

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

    border-left:
      0;

    border-radius: 0;

    transform:
      translateY(
        -50%
      );
  }

  .app-sidebar.is-collapsed
  .app-sidebar__brand-copy,
  .app-sidebar.is-collapsed
  .app-sidebar__version,
  .app-sidebar.is-collapsed
  .app-sidebar__system,
  .app-sidebar.is-collapsed
  .app-sidebar__section-label,
  .app-sidebar.is-collapsed
  .app-sidebar__link-index,
  .app-sidebar.is-collapsed
  .app-sidebar__link-label,
  .app-sidebar.is-collapsed
  .app-sidebar__link-arrow,
  .app-sidebar.is-collapsed
  .app-sidebar__user-copy,
  .app-sidebar.is-collapsed
  .app-sidebar__user-status,
  .app-sidebar.is-collapsed
  .app-sidebar__footer-meta {
    display:
      none;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__nav {
    align-items:
      center;

    gap:
      7px;

    padding:
      18px
      9px
      12px;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__link {
    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      48px;

    min-width:
      48px;

    height:
      46px;

    min-height:
      46px;

    padding:
      0;

    transform:
      none;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__link:hover {
    transform:
      none;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__link > svg:not(
    .app-sidebar__link-arrow
  ) {
    width:
      19px;

    min-width:
      19px;

    height:
      19px;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__link.is-active::before {
    left:
      -1px;

    height:
      24px;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__separator {
    width:
      42px;

    margin:
      8px
      auto;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__footer {
    display:
      flex;

    justify-content:
      center;

    padding:
      10px
      8px;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__user {
    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    width:
      50px;

    min-width:
      50px;

    padding:
      6px;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__avatar {
    width:
      36px;

    min-width:
      36px;

    height:
      36px;
  }

  body.sidebar-collapsed
  .app-main {
    width:
      100%;
  }

  body.sidebar-collapsed
  .app-main__content {
    max-width:
      none;
  }

  body.sidebar-collapsed
  .app-sidebar-overlay {
    display:
      none !important;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (
  max-width:
  1180px
) {
  .app-topbar__search {
    flex-basis:
      300px;

    width:
      300px;

    min-width:
      220px;
  }

  .app-main__content {
    padding:
      18px;
  }
}

/* =========================================================
   SIDEBAR MÓVIL
   ========================================================= */

@media (
  max-width:
  900px
) {
  .app-layout {
    display:
      block;

    width:
      100%;
  }

  .app-sidebar {
    position:
      fixed;

    top:
      0;

    bottom:
      0;

    left:
      0;

    z-index:
      900;

    width:
      min(
        var(
          --sidebar-width
        ),
        calc(
          100vw -
          42px
        )
      );

    min-width:
      0;

    height:
      100dvh;

    overflow:
      hidden;

    transform:
      translateX(
        -105%
      );
  }

  .app-sidebar.is-open,
  body.sidebar-open
  .app-sidebar {
    transform:
      translateX(
        0
      );
  }

  .app-sidebar__brand {
    padding:
      14px
      48px
      14px
      16px;
  }

  .app-sidebar__collapse {
    top:
      50%;

    right:
      10px;

    width:
      32px;

    min-width:
      32px;

    height:
      32px;

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

    border-radius: 0;

    transform:
      translateY(
        -50%
      );
  }

  .app-main {
    width:
      100%;

    min-height:
      100vh;
  }

  .app-topbar {
    gap:
      14px;

    padding:
      0
      16px;
  }

  .app-topbar__menu-button {
    display:
      inline-flex;
  }

  .app-topbar__search {
    flex:
      1
      1
      auto;

    width:
      auto;

    min-width:
      180px;
  }

  body.sidebar-open
  .app-sidebar-overlay {
    display:
      block;
  }

  body.sidebar-collapsed
  .app-layout {
    grid-template-columns:
      1fr;
  }
}

/* =========================================================
   MÓVIL
   ========================================================= */

@media (
  max-width:
  680px
) {
  .app-topbar {
    min-height:
      72px;

    padding:
      0
      12px;
  }

  .app-topbar__heading p,
  .app-topbar__eyebrow {
    display:
      none;
  }

  .app-topbar__heading h1 {
    font-size:
      17px;
  }

  .app-topbar__search {
    display:
      none;
  }

  .app-topbar__right {
    gap:
      7px;
  }

  .app-topbar__right
  .button {
    min-width:
      42px;

    width:
      42px;

    padding:
      0;
  }

  .app-topbar__right
  .button span:not(
    .button__scanline
  ) {
    display:
      none;
  }

  .app-main__content {
    padding:
      12px;
  }
}

/* =========================================================
   ANIMACIONES
   ========================================================= */

@keyframes sidebar-status-pulse {
  0%,
  100% {
    opacity:
      1;

    transform:
      scale(
        1
      );
  }

  50% {
    opacity:
      0.35;

    transform:
      scale(
        0.7
      );
  }
}

@keyframes sidebar-system-line {
  0%,
  100% {
    width:
      72%;

    opacity:
      0.8;
  }

  50% {
    width:
      96%;

    opacity:
      1;
  }
}

@keyframes sidebar-overlay-in {
  to {
    opacity:
      1;
  }
}

@keyframes topbar-logout-spin {
  to {
    transform:
      rotate(
        360deg
      );
  }
}

/* =========================================================
   REDUCIR MOVIMIENTO
   ========================================================= */

@media (
  prefers-reduced-motion:
  reduce
) {
  .app-layout,
  .app-sidebar,
  .app-sidebar *,
  .app-topbar,
  .app-topbar * {
    animation-duration:
      0.01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      0.01ms !important;
  }
}/* =========================================================
   SIDEBAR · MOSTRAR UN SOLO BOTÓN
   ========================================================= */

@media (
  min-width:
  901px
) {
  .app-topbar__menu-button,
  [data-sidebar-toggle],
  [data-topbar-menu] {
    display:
      none !important;
  }

  .app-sidebar__collapse {
    display:
      inline-flex !important;
  }
}

@media (
  max-width:
  900px
) {
  .app-topbar__menu-button,
  [data-sidebar-toggle],
  [data-topbar-menu] {
    display:
      inline-flex !important;
  }

  .app-sidebar__collapse {
    display:
      none !important;
  }
}/* =========================================================
   SIDEBAR · BOTÓN ÚNICO CORREGIDO
   ========================================================= */

@media (
  min-width:
  901px
) {
  .app-topbar__menu-button,
  [data-sidebar-toggle],
  [data-topbar-menu] {
    display:
      none !important;
  }

  .app-sidebar__brand {
    grid-template-columns:
      auto
      minmax(
        0,
        1fr
      )
      auto
      32px;

    padding:
      14px
      12px
      14px
      16px;

    overflow:
      hidden;
  }

  .app-sidebar__collapse {
    position:
      relative !important;

    top:
      auto !important;

    right:
      auto !important;

    bottom:
      auto !important;

    z-index:
      5;

    display:
      inline-flex !important;

    align-items:
      center;

    justify-content:
      center;

    width:
      30px;

    min-width:
      30px;

    height:
      34px;

    padding:
      0;

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

    border-radius: 0;

    color:
      var(
        --sidebar-text-muted
      );

    background:
      rgba(
        10, 10, 11,
        0.9
      );

    transform:
      none !important;
  }

  .app-sidebar__collapse:hover {
    border-color:
      var(
        --accent-border
      );

    color:
      var(
        --accent
      );

    background:
      var(
        --accent-soft
      );
  }

  .app-sidebar__collapse svg {
    width:
      15px;

    height:
      15px;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__brand {
    display:
      flex;

    align-items:
      center;

    justify-content:
      center;

    flex-direction:
      column;

    gap:
      8px;

    min-height:
      112px;

    padding:
      12px
      8px;
  }

  .app-sidebar.is-collapsed
  .app-sidebar__collapse {
    position:
      relative !important;

    top:
      auto !important;

    right:
      auto !important;

    bottom:
      auto !important;

    width:
      36px;

    min-width:
      36px;

    height:
      30px;

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

    border-radius: 0;

    transform:
      none !important;
  }
}

@media (
  max-width:
  900px
) {
  .app-sidebar__collapse {
    display:
      none !important;
  }

  .app-topbar__menu-button,
  [data-sidebar-toggle],
  [data-topbar-menu] {
    display:
      inline-flex !important;
  }
}/* =========================================================
   SIDEBAR · BOTÓN TRANSPARENTE
   ========================================================= */

@media (
  min-width:
  901px
) {
  .app-sidebar__collapse {
    border:
      1px solid
      transparent !important;

    color:
      var(
        --sidebar-text-muted
      ) !important;

    background:
      transparent !important;

    box-shadow:
      none !important;
  }

  .app-sidebar__collapse:hover {
    border-color:
      var(
        --sidebar-line-strong
      ) !important;

    color:
      var(
        --accent
      ) !important;

    background:
      rgba(
        255,
        255,
        255,
        0.025
      ) !important;
  }

  .app-sidebar__collapse:active {
    background:
      var(
        --accent-soft
      ) !important;
  }

  .app-sidebar__collapse::before,
  .app-sidebar__collapse::after {
    display:
      none !important;
  }
}