/* =========================================================
   HISTORIAL · CORRECCIÓN RESPONSIVE
   ========================================================= */

.history-route-active {
  overflow-x:
    hidden;
}

.history-route-active .main-content,
.history-route-active .page-content,
.history-route-active .history-mobile-page {
  width:
    100%;

  min-width:
    0;

  max-width:
    none;

  overflow-x:
    hidden;
}

.history-route-active .history-mobile-page {
  padding-right:
    clamp(
      14px,
      3vw,
      28px
    );

  padding-left:
    clamp(
      14px,
      3vw,
      28px
    );
}

.history-route-active .card,
.history-route-active .table-card,
.history-route-active .table-wrapper {
  min-width:
    0;

  max-width:
    100%;
}

.history-route-active .table-wrapper {
  width:
    100%;

  overflow-x:
    auto;

  overscroll-behavior-inline:
    contain;
}

@media (
  max-width:
    760px
) {
  .history-route-active .main-content {
    width:
      100%;

    min-width:
      0;

    margin:
      0;
  }

  .history-route-active .page-content,
  .history-route-active .history-mobile-page {
    display:
      grid;

    width:
      100%;

    gap:
      14px;

    padding:
      14px;
  }

  .history-route-active .page-header,
  .history-route-active .topbar,
  .history-route-active .app-topbar {
    width:
      100%;

    min-width:
      0;
  }

  .history-route-active .filters,
  .history-route-active form.filters,
  .history-route-active .history-filters {
    display:
      grid;

    width:
      100%;

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

    gap:
      13px;
  }

  .history-route-active .filters .field,
  .history-route-active form.filters .field,
  .history-route-active .history-filters .field {
    width:
      100%;

    min-width:
      0;
  }

  .history-route-active .filters input,
  .history-route-active .filters select,
  .history-route-active .filters textarea,
  .history-route-active .filters button,
  .history-route-active form.filters input,
  .history-route-active form.filters select,
  .history-route-active form.filters button {
    width:
      100%;

    min-width:
      0;
  }

  .history-route-active .table-card {
    padding:
      0;

    overflow:
      visible;

    border:
      0;

    background:
      transparent;
  }

  .history-route-active .table-wrapper {
    overflow:
      visible;
  }

  .history-route-active .history-responsive-table {
    display:
      block;

    width:
      100%;

    border:
      0;
  }

  .history-route-active .history-responsive-table thead {
    position:
      absolute;

    width:
      1px;

    height:
      1px;

    overflow:
      hidden;

    clip:
      rect(
        0,
        0,
        0,
        0
      );

    white-space:
      nowrap;
  }

  .history-route-active .history-responsive-table tbody {
    display:
      grid;

    width:
      100%;

    gap:
      12px;
  }

  .history-route-active .history-responsive-row {
    position:
      relative;

    display:
      grid;

    width:
      100%;

    min-width:
      0;

    padding:
      16px;

    overflow:
      hidden;

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

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

    background:
      var(
        --surface
      );
  }

  .history-route-active .history-responsive-row::before {
    position:
      absolute;

    top:
      0;

    left:
      17px;

    width:
      42px;

    height:
      2px;

    background:
      var(
        --primary
      );

    content:
      "";
  }

  .history-route-active .history-responsive-cell {
    display:
      grid;

    width:
      100%;

    min-width:
      0;

    grid-template-columns:
      minmax(
        92px,
        36%
      )
      minmax(
        0,
        1fr
      );

    align-items:
      start;

    gap:
      12px;

    padding:
      11px
      0;

    border:
      0;

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

    background:
      transparent;

    color:
      var(
        --text-secondary
      );

    text-align:
      left;

    white-space:
      normal;

    overflow-wrap:
      anywhere;
  }

  .history-route-active .history-responsive-cell:last-child {
    padding-bottom:
      0;

    border-bottom:
      0;
  }

  .history-route-active .history-responsive-cell::before {
    color:
      var(
        --text-muted
      );

    content:
      attr(
        data-label
      );

    font-family:
      monospace;

    font-size:
      8px;

    font-weight:
      600;

    letter-spacing:
      0.1em;

    line-height:
      1.5;

    text-transform:
      uppercase;
  }

  .history-route-active .history-responsive-cell > * {
    min-width:
      0;

    max-width:
      100%;
  }

  .history-route-active .history-responsive-cell a,
  .history-route-active .history-responsive-cell span,
  .history-route-active .history-responsive-cell strong,
  .history-route-active .history-responsive-cell p,
  .history-route-active .history-responsive-cell div {
    max-width:
      100%;

    overflow-wrap:
      anywhere;

    word-break:
      break-word;
  }

  .history-route-active .history-responsive-cell .table-actions,
  .history-route-active .history-responsive-cell .history-actions {
    display:
      flex;

    width:
      100%;

    flex-wrap:
      wrap;

    justify-content:
      flex-start;

    gap:
      7px;
  }

  .history-route-active .pagination {
    display:
      grid;

    width:
      100%;

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

    align-items:
      center;

    gap:
      8px;

    padding:
      12px;

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

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

    background:
      var(
        --surface
      );
  }

  .history-route-active .pagination .button,
  .history-route-active .pagination button {
    width:
      100%;

    min-width:
      0;

    padding-right:
      10px;

    padding-left:
      10px;
  }

  .history-route-active .pagination > span {
    min-width:
      70px;

    color:
      var(
        --text-muted
      );

    font-family:
      monospace;

    font-size:
      8px;

    text-align:
      center;

    white-space:
      nowrap;
  }
}

@media (
  max-width:
    430px
) {
  .history-route-active .page-content,
  .history-route-active .history-mobile-page {
    padding:
      10px;
  }

  .history-route-active .history-responsive-row {
    padding:
      14px;
  }

  .history-route-active .history-responsive-cell {
    grid-template-columns:
      minmax(
        78px,
        32%
      )
      minmax(
        0,
        1fr
      );

    gap:
      9px;

    font-size:
      12px;
  }

  .history-route-active .pagination {
    grid-template-columns:
      minmax(
        0,
        1fr
      )
      minmax(
        0,
        1fr
      );
  }

  .history-route-active .pagination > span {
    grid-column:
      1 /
      -1;

    grid-row:
      1;
  }
}

/* =========================================================
   HISTORIAL MÓVIL · ELIMINAR ESPACIO SUPERIOR
   ========================================================= */

@media (
  max-width:
    760px
) {
  .history-route-active .app-layout {
    min-height:
      100svh;

    align-items:
      stretch;
  }

  .history-route-active .main-content {
    min-height:
      100svh;

    padding-top:
      0
      !important;

    margin-top:
      0
      !important;
  }

  .history-route-active .app-topbar,
  .history-route-active .topbar,
  .history-route-active .page-header {
    position:
      relative;

    top:
      auto;

    width:
      100%;

    min-height:
      0;

    margin-top:
      0
      !important;

    padding-top:
      18px
      !important;
  }

  .history-route-active .page-content,
  .history-route-active .history-mobile-page {
    margin-top:
      0
      !important;
  }

  .history-route-active .sidebar + .main-content {
    padding-top:
      0
      !important;
  }

  .history-route-active .mobile-topbar-spacer,
  .history-route-active .topbar-spacer,
  .history-route-active .sidebar-spacer,
  .history-route-active [data-topbar-spacer] {
    display:
      none
      !important;

    height:
      0
      !important;

    min-height:
      0
      !important;

    margin:
      0
      !important;

    padding:
      0
      !important;
  }
}

@media (
  max-width:
    430px
) {
  .history-route-active .app-topbar,
  .history-route-active .topbar,
  .history-route-active .page-header {
    padding-top:
      14px
      !important;
  }
}