.app-layout {
  display:
    grid;

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

  min-height:
    100vh;

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

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

.sidebar-system {
  position:
    relative;

  z-index:
    200;
}

.sidebar {
  position:
    fixed;

  z-index:
    210;

  top:
    0;

  bottom:
    0;

  left:
    0;

  display:
    flex;

  width:
    var(
      --sidebar-width
    );

  min-width:
    0;

  flex-direction:
    column;

  overflow:
    hidden;

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

  background:
    #0c0f10;

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

.sidebar::before {
  position:
    absolute;

  top:
    0;

  right:
    0;

  width:
    2px;

  height:
    72px;

  background:
    var(
      --primary
    );

  content:
    "";
}

body.sidebar-collapsed
.sidebar {
  width:
    var(
      --sidebar-collapsed-width
    );
}

.sidebar__technical-line {
  display:
    flex;

  height:
    28px;

  flex:
    0 0
    28px;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    0 15px;

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

  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.12em;

  white-space:
    nowrap;
}

.sidebar__header {
  display:
    flex;

  min-height:
    89px;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    12px;

  padding:
    18px 15px;

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

.sidebar__brand {
  display:
    flex;

  min-width:
    0;

  align-items:
    center;

  gap:
    13px;
}

.sidebar__brand-mark {
  position:
    relative;

  display:
    grid;

  width:
    42px;

  height:
    42px;

  flex:
    0 0
    42px;

  place-items:
    center;

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

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

.sidebar__brand-mark::before,
.sidebar__brand-mark::after {
  position:
    absolute;

  width:
    8px;

  height:
    8px;

  content:
    "";
}

.sidebar__brand-mark::before {
  top:
    -1px;

  left:
    -1px;

  border-top:
    2px solid
    var(
      --primary
    );

  border-left:
    2px solid
    var(
      --primary
    );
}

.sidebar__brand-mark::after {
  right:
    -1px;

  bottom:
    -1px;

  border-right:
    2px solid
    var(
      --primary
    );

  border-bottom:
    2px solid
    var(
      --primary
    );
}

.sidebar__brand-letter {
  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-size:
    21px;

  font-weight:
    700;
}

.sidebar__brand-copy {
  min-width:
    0;

  white-space:
    nowrap;

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

.sidebar__brand-copy strong,
.sidebar__brand-copy span {
  display:
    block;
}

.sidebar__brand-copy strong {
  font-size:
    16px;

  letter-spacing:
    0.16em;
}

.sidebar__brand-copy span {
  margin-top:
    2px;

  color:
    var(
      --text-secondary
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.13em;
}

.sidebar__collapse-button,
.topbar__menu-button {
  display:
    inline-grid;

  width:
    36px;

  height:
    36px;

  flex:
    0 0
    36px;

  place-items:
    center;

  padding:
    0;

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

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

  background:
    transparent;

  color:
    var(
      --text-secondary
    );

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

.sidebar__collapse-button:hover,
.topbar__menu-button:hover {
  border-color:
    var(
      --primary
    );

  background:
    var(
      --primary-muted
    );

  color:
    var(
      --primary
    );
}

.sidebar__collapse-button svg,
.topbar__menu-button svg {
  width:
    18px;

  height:
    18px;
}

.sidebar__division {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding:
    17px
    17px
    9px;

  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.13em;

  white-space:
    nowrap;
}

.sidebar__nav {
  display:
    grid;

  gap:
    5px;

  padding:
    5px
    11px;
}

.sidebar__nav a {
  position:
    relative;

  display:
    grid;

  min-height:
    52px;

  grid-template-columns:
    25px
    30px
    minmax(
      0,
      1fr
    )
    18px;

  align-items:
    center;

  gap:
    8px;

  padding:
    7px
    10px;

  overflow:
    hidden;

  border:
    1px solid
    transparent;

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

  color:
    var(
      --text-secondary
    );

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

.sidebar__nav a::before {
  position:
    absolute;

  top:
    8px;

  bottom:
    8px;

  left:
    0;

  width:
    2px;

  background:
    var(
      --primary
    );

  content:
    "";

  opacity:
    0;

  transform:
    scaleY(
      0.25
    );

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

.sidebar__nav a:hover {
  border-color:
    var(
      --border
    );

  background:
    var(
      --surface
    );

  color:
    var(
      --text
    );

  transform:
    translateX(
      2px
    );
}

.sidebar__nav a.is-active {
  border-color:
    var(
      --border-strong
    );

  background:
    var(
      --primary-muted
    );

  color:
    var(
      --text
    );
}

.sidebar__nav a.is-active::before {
  opacity:
    1;

  transform:
    scaleY(
      1
    );
}

.sidebar__nav-index {
  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    9px;
}

.sidebar__nav-icon {
  display:
    grid;

  width:
    30px;

  height:
    30px;

  place-items:
    center;
}

.sidebar__nav-icon svg {
  width:
    18px;

  height:
    18px;
}

.sidebar__nav-label {
  overflow:
    hidden;

  font-size:
    14px;

  font-weight:
    600;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sidebar__nav-arrow {
  display:
    grid;

  place-items:
    center;

  opacity:
    0.4;
}

.sidebar__nav-arrow svg {
  width:
    14px;

  height:
    14px;
}

.sidebar__system-panel {
  display:
    grid;

  gap:
    12px;

  margin:
    22px
    12px
    0;

  padding:
    13px;

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

  background:
    var(
      --surface
    );

  transition:
    opacity
    var(
      --transition
    );
}

.sidebar__system-row {
  display:
    flex;

  min-width:
    0;

  align-items:
    center;

  gap:
    9px;
}

.sidebar__system-indicator {
  width:
    7px;

  height:
    7px;

  flex:
    0 0
    7px;

  border-radius:
    50%;

  background:
    var(
      --success
    );

  animation:
    systemIndicator
    2s
    ease-in-out
    infinite;
}

.sidebar__system-row strong,
.sidebar__system-row span {
  display:
    block;

  white-space:
    nowrap;
}

.sidebar__system-row strong {
  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.08em;
}

.sidebar__system-row span {
  margin-top:
    2px;

  color:
    var(
      --text-muted
    );

  font-size:
    10px;
}

.sidebar__system-code {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  padding-top:
    9px;

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

  font-family:
    monospace;

  font-size:
    9px;
}

.sidebar__system-code span {
  color:
    var(
      --text-muted
    );
}

.sidebar__system-code strong {
  color:
    var(
      --success
    );
}

.sidebar__footer {
  display:
    grid;

  gap:
    10px;

  margin-top:
    auto;

  padding:
    13px;

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

.sidebar__user {
  display:
    flex;

  min-width:
    0;

  align-items:
    center;

  gap:
    10px;

  padding:
    7px;
}

.sidebar__user-avatar {
  display:
    grid;

  width:
    36px;

  height:
    36px;

  flex:
    0 0
    36px;

  place-items:
    center;

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

  background:
    var(
      --surface-secondary
    );

  color:
    var(
      --primary
    );

  font-family:
    monospace;

  font-size:
    14px;

  font-weight:
    700;
}

.sidebar__user-copy {
  min-width:
    0;

  transition:
    opacity
    var(
      --transition
    );
}

.sidebar__user-copy strong,
.sidebar__user-copy span {
  display:
    block;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}

.sidebar__user-copy strong {
  font-size:
    13px;
}

.sidebar__user-copy span {
  margin-top:
    2px;

  color:
    var(
      --text-muted
    );

  font-size:
    10px;
}

.sidebar__logout {
  display:
    flex;

  min-height:
    40px;

  align-items:
    center;

  justify-content:
    center;

  gap:
    9px;

  padding:
    9px;

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

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

  background:
    transparent;

  color:
    var(
      --text-secondary
    );

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

.sidebar__logout:hover {
  border-color:
    var(
      --danger
    );

  background:
    var(
      --danger-muted
    );

  color:
    var(
      --danger
    );
}

.sidebar__logout svg {
  width:
    17px;

  height:
    17px;
}

.sidebar-overlay {
  position:
    fixed;

  z-index:
    190;

  inset:
    0;

  display:
    none;

  padding:
    0;

  border:
    0;

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

  opacity:
    0;

  transition:
    opacity
    var(
      --transition
    );
}

body.sidebar-collapsed
.sidebar__brand-copy,
body.sidebar-collapsed
.sidebar__division,
body.sidebar-collapsed
.sidebar__nav-index,
body.sidebar-collapsed
.sidebar__nav-label,
body.sidebar-collapsed
.sidebar__nav-arrow,
body.sidebar-collapsed
.sidebar__system-panel,
body.sidebar-collapsed
.sidebar__user-copy,
body.sidebar-collapsed
.sidebar__logout span {
  width:
    0;

  overflow:
    hidden;

  opacity:
    0;

  pointer-events:
    none;
}

body.sidebar-collapsed
.sidebar__header {
  justify-content:
    center;

  padding-right:
    10px;

  padding-left:
    10px;
}

body.sidebar-collapsed
.sidebar__brand {
  display:
    none;
}

body.sidebar-collapsed
.sidebar__collapse-button svg {
  transform:
    rotate(
      180deg
    );
}

body.sidebar-collapsed
.sidebar__nav {
  padding-right:
    10px;

  padding-left:
    10px;
}

body.sidebar-collapsed
.sidebar__nav a {
  display:
    flex;

  justify-content:
    center;

  padding:
    7px;
}

body.sidebar-collapsed
.sidebar__nav a:hover {
  transform:
    none;
}

body.sidebar-collapsed
.sidebar__footer {
  padding-right:
    10px;

  padding-left:
    10px;
}

body.sidebar-collapsed
.sidebar__user {
  justify-content:
    center;

  padding:
    5px;
}

body.sidebar-collapsed
.sidebar__logout {
  width:
    42px;

  margin:
    0 auto;
}

body.sidebar-collapsed
[data-sidebar-tooltip] {
  position:
    relative;
}

body.sidebar-collapsed
[data-sidebar-tooltip]:hover::after {
  position:
    fixed;

  z-index:
    500;

  left:
    calc(
      var(
        --sidebar-collapsed-width
      ) +
      10px
    );

  padding:
    7px
    10px;

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

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

  background:
    var(
      --surface-raised
    );

  color:
    var(
      --text
    );

  content:
    attr(
      data-sidebar-tooltip
    );

  font-size:
    12px;

  white-space:
    nowrap;
}

.main-content {
  min-width:
    0;

  background:
    transparent;
}

.topbar {
  position:
    relative;

  display:
    flex;

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

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    28px;

  padding:
    22px
    34px;

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

  background:
    rgba(
      11,
      14,
      15,
      0.92
    );
}

.topbar::after {
  position:
    absolute;

  right:
    34px;

  bottom:
    -1px;

  width:
    88px;

  height:
    2px;

  background:
    var(
      --primary
    );

  content:
    "";
}

.topbar__primary {
  display:
    flex;

  min-width:
    0;

  align-items:
    center;

  gap:
    17px;
}

.topbar__menu-button {
  display:
    none;
}

.topbar__heading {
  min-width:
    0;
}

.topbar__eyebrow {
  display:
    flex;

  align-items:
    center;

  gap:
    7px;

  margin-bottom:
    7px;

  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.13em;
}

.topbar__status-dot {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(
      --primary
    );
}

.topbar h1 {
  margin-bottom:
    5px;

  font-size:
    clamp(
      23px,
      3vw,
      30px
    );

  font-weight:
    600;

  letter-spacing:
    -0.025em;
}

.topbar p {
  max-width:
    690px;

  margin-bottom:
    0;

  color:
    var(
      --text-secondary
    );

  font-size:
    13px;
}

.topbar__metadata {
  display:
    flex;

  flex:
    0 0
    auto;

  align-items:
    stretch;

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

.topbar__metadata-block {
  display:
    grid;

  min-width:
    145px;

  align-content:
    center;

  gap:
    4px;

  padding:
    11px
    14px;
}

.topbar__metadata-block +
.topbar__metadata-block {
  border-left:
    1px solid
    var(
      --border
    );
}

.topbar__metadata-block span {
  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    8px;

  letter-spacing:
    0.12em;
}

.topbar__metadata-block strong {
  font-family:
    monospace;

  font-size:
    10px;

  letter-spacing:
    0.05em;
}

.topbar__online {
  color:
    var(
      --success
    );
}

.page-content {
  display:
    grid;

  gap:
    18px;

  padding:
    28px
    34px
    44px;
}

.login-body {
  background:
    var(
      --background
    );
}

.login-page {
  position:
    relative;

  display:
    grid;

  min-height:
    100vh;

  place-items:
    center;

  padding:
    24px;
}

.login-page::before {
  position:
    absolute;

  top:
    24px;

  left:
    24px;

  color:
    var(
      --text-muted
    );

  content:
    "WIRTZ MAIL SYSTEM / SECURE ACCESS";

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.13em;
}

.login-panel {
  position:
    relative;

  width:
    min(
      100%,
      450px
    );

  padding:
    36px;

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

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

  background:
    var(
      --surface
    );
}

.login-panel::before,
.login-panel::after {
  position:
    absolute;

  width:
    18px;

  height:
    18px;

  content:
    "";
}

.login-panel::before {
  top:
    -1px;

  left:
    -1px;

  border-top:
    2px solid
    var(
      --primary
    );

  border-left:
    2px solid
    var(
      --primary
    );
}

.login-panel::after {
  right:
    -1px;

  bottom:
    -1px;

  border-right:
    2px solid
    var(
      --primary
    );

  border-bottom:
    2px solid
    var(
      --primary
    );
}

.login-brand {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  margin-bottom:
    44px;
}

.login-brand__icon {
  display:
    grid;

  width:
    43px;

  height:
    43px;

  place-items:
    center;

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

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

  background:
    var(
      --surface-secondary
    );

  color:
    var(
      --primary
    );
}

.login-brand strong,
.login-brand span {
  display:
    block;
}

.login-brand strong {
  letter-spacing:
    0.08em;
}

.login-brand span {
  color:
    var(
      --text-muted
    );

  font-family:
    monospace;

  font-size:
    9px;

  letter-spacing:
    0.12em;
}

.login-copy h1 {
  margin-bottom:
    10px;

  font-size:
    30px;

  letter-spacing:
    -0.025em;
}

.login-copy p {
  color:
    var(
      --text-secondary
    );
}

.login-form {
  display:
    grid;

  gap:
    16px;

  margin-top:
    28px;
}

@keyframes systemIndicator {
  0%,
  100% {
    opacity:
      0.4;
  }

  50% {
    opacity:
      1;
  }
}

@media (
  max-width:
    1100px
) {
  .topbar__metadata {
    display:
      none;
  }
}

@media (
  max-width:
    900px
) {
  .app-layout,
  body.sidebar-collapsed
  .app-layout {
    grid-template-columns:
      minmax(
        0,
        1fr
      );
  }

  .sidebar {
    width:
      min(
        84vw,
        290px
      );

    transform:
      translateX(
        -102%
      );
  }

  body.sidebar-mobile-open
  .sidebar {
    transform:
      translateX(
        0
      );
  }

  .sidebar-overlay {
    display:
      block;

    pointer-events:
      none;
  }

  body.sidebar-mobile-open
  .sidebar-overlay {
    opacity:
      1;

    pointer-events:
      auto;
  }

  .topbar__menu-button {
    display:
      inline-grid;
  }

  .topbar {
    min-height:
      104px;

    padding:
      18px;
  }

  .topbar::after {
    right:
      18px;
  }

  .page-content {
    padding:
      20px
      18px
      34px;
  }
}

@media (
  max-width:
    560px
) {
  .topbar {
    align-items:
      flex-start;
  }

  .topbar__primary {
    align-items:
      flex-start;
  }

  .topbar p {
    font-size:
      12px;
  }

  .login-panel {
    padding:
      28px
      22px;
  }

  .login-page::before {
    display:
      none;
  }
}

/* =========================================================
   SIDEBAR · FONDO CORPORATIVO
   ========================================================= */

.sidebar {
  isolation:
    isolate;

  background:
    #0c0f10;
}

.sidebar::after {
  position:
    absolute;

  z-index:
    -3;

  inset:
    0;

  background-image:
    url(
      "/assets/images/sidebar-background.webp"
    );

  background-position:
    center;

  background-repeat:
    no-repeat;

  background-size:
    cover;

  content:
    "";

  filter:
    grayscale(
      0.25
    )
    contrast(
      1.18
    )
    brightness(
      0.28
    );

  opacity:
    0.68;

  pointer-events:
    none;
}

.sidebar::before {
  z-index:
    5;
}

.sidebar__technical-line,
.sidebar__header,
.sidebar__division,
.sidebar__nav,
.sidebar__system-panel,
.sidebar__footer {
  position:
    relative;

  z-index:
    2;
}

.sidebar__technical-line,
.sidebar__header,
.sidebar__footer {
  background:
    rgba(
      8,
      11,
      11,
      0.78
    );

  backdrop-filter:
    blur(
      8px
    );
}

.sidebar__nav a {
  background:
    rgba(
      10,
      13,
      13,
      0.46
    );

  backdrop-filter:
    blur(
      4px
    );
}

.sidebar__nav a:hover {
  background:
    rgba(
      18,
      23,
      22,
      0.82
    );
}

.sidebar__nav a.is-active {
  background:
    linear-gradient(
      90deg,
      rgba(
        213,
        220,
        52,
        0.16
      ),
      rgba(
        8,
        11,
        11,
        0.74
      )
    );
}

.sidebar__system-panel {
  background:
    rgba(
      12,
      16,
      16,
      0.74
    );

  backdrop-filter:
    blur(
      8px
    );
}

@media (
  max-width:
    900px
) {
  .sidebar::after {
    background-image:
      url(
        "/assets/images/sidebar-mobile-background.webp"
      );

    background-position:
      center top;

    filter:
      grayscale(
        0.2
      )
      contrast(
        1.15
      )
      brightness(
        0.24
      );

    opacity:
      0.76;
  }
}

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

@media (
  max-width:
    760px
) {
  html,
  body,
  #app,
  .app-layout,
  .main-content,
  .page-content {
    max-width:
      100%;

    overflow-x:
      hidden
      !important;
  }

  .app-layout,
  .main-content,
  .page-content,
  .card,
  .table-card,
  .table-wrapper,
  form,
  .filters {
    min-width:
      0;
  }

  img,
  svg,
  video,
  canvas,
  iframe {
    max-width:
      100%;
  }

  input,
  select,
  textarea,
  button {
    max-width:
      100%;
  }

  .table-wrapper {
    scrollbar-width:
      none;
  }

  .table-wrapper::-webkit-scrollbar {
    display:
      none;
  }
}