/* Color global para cabeceras de todas las tablas del sistema */
:root {
  --system-table-header: #2563eb;
}

table > thead,
table > thead > tr,
table > thead > tr > th,
table > thead > tr > td,
.table > thead,
.table > thead > tr,
.table > thead > tr > th,
.table > thead > tr > td,
table.table > thead,
table.table > thead > tr,
table.table > thead > tr > th,
table.table > thead > tr > td,
table.dataTable > thead,
table.dataTable > thead > tr,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td,
.dataTables_scrollHead table > thead,
.dataTables_scrollHead table > thead > tr,
.dataTables_scrollHead table > thead > tr > th,
.dataTables_scrollHead table > thead > tr > td,
.table-responsive table > thead,
.table-responsive table > thead > tr,
.table-responsive table > thead > tr > th,
.table-responsive table > thead > tr > td,
table thead[style],
table thead[style] tr,
table thead[style] th,
table thead th[style],
table thead td[style] {
  background: var(--system-table-header) !important;
  background-color: var(--system-table-header) !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.24) !important;
  box-shadow: none !important;
  text-shadow: none !important;
}

table > thead > tr > th,
table > thead > tr > td,
.table > thead > tr > th,
.table > thead > tr > td,
table.table > thead > tr > th,
table.table > thead > tr > td,
table.dataTable > thead > tr > th,
table.dataTable > thead > tr > td {
  border-bottom: 2px solid var(--system-table-header) !important;
  font-weight: 800 !important;
}

table.dataTable thead .sorting,
table.dataTable thead .sorting_asc,
table.dataTable thead .sorting_desc,
table.dataTable thead .sorting_disabled {
  background-color: var(--system-table-header) !important;
  background-image: none !important;
  color: #ffffff !important;
}

table.dataTable thead .sorting:before,
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_desc:after {
  color: rgba(255, 255, 255, 0.82) !important;
  opacity: 1 !important;
}

/* Responsive baseline for every module.
   Keeps existing DataTables behavior, but prevents page-level horizontal scroll. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

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

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

.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper,
.container,
.container-fluid,
.row,
.card,
.card-body,
.modal,
.modal-content,
.tab-content,
.tab-pane {
  min-width: 0;
}

.table-responsive,
.dataTables_wrapper,
.dataTables_scroll,
.dataTables_scrollBody,
.dt-container,
.dt-layout-table,
.dt-scroll,
.dt-scroll-body {
  width: 100% !important;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table,
table {
  max-width: 100%;
}

.card-body > table:not(.dataTable),
.modal-body > table:not(.dataTable),
.tab-pane > table:not(.dataTable),
.table-responsive > table {
  width: 100%;
}

table th,
table td,
.table th,
.table td {
  overflow-wrap: anywhere;
  vertical-align: middle;
}

table.nowrap th,
table.nowrap td,
.nowrap th,
.nowrap td,
table.dataTable.nowrap th,
table.dataTable.nowrap td {
  white-space: nowrap;
}

.dataTables_wrapper .row,
.dt-container .row,
.dt-container .dt-layout-row {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
  row-gap: .75rem;
}

.dataTables_length,
.dataTables_filter,
.dataTables_info,
.dataTables_paginate,
.dt-length,
.dt-search,
.dt-info,
.dt-paging {
  min-width: 0;
}

.dataTables_filter label,
.dt-search label {
  width: 100%;
}

.dataTables_filter input,
.dt-search input,
.dataTables_length select,
.dt-length select {
  max-width: 100%;
}

.dt-buttons,
.dataTables_wrapper .dt-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}

.btn,
button,
input,
select,
textarea,
.form-control,
.form-select,
.select2,
.select2-container {
  max-width: 100%;
}

.modal-dialog {
  max-width: min(calc(100vw - 1rem), var(--bs-modal-width, 500px));
  margin-left: auto;
  margin-right: auto;
}

.modal-xl {
  --bs-modal-width: 1140px;
}

.modal-lg {
  --bs-modal-width: 800px;
}

.modal-body {
  overflow-x: auto;
}

.dropdown-menu,
.select2-dropdown,
.swal2-popup {
  max-width: calc(100vw - 1rem);
}

.menu-link,
.menu-link div,
.card-title,
.card-text,
.modal-title,
.dropdown-item,
.nav-link,
.badge,
.alert {
  min-width: 0;
  overflow-wrap: anywhere;
}

.menu-link,
.nav-link,
.dropdown-item {
  white-space: normal;
}

@media (max-width: 1199.98px) {
  .layout-menu {
    max-width: min(18rem, 86vw);
  }

  .layout-overlay {
    cursor: pointer;
  }
}

@media (max-width: 767.98px) {
  body {
    font-size: .92rem;
  }

  .container,
  .container-fluid {
    padding-left: .75rem;
    padding-right: .75rem;
  }

  .card,
  .modal-content {
    border-radius: .5rem;
  }

  .card-body,
  .modal-body {
    padding: .9rem;
  }

  .modal-dialog,
  .modal-sm,
  .modal-md,
  .modal-lg,
  .modal-xl {
    width: calc(100vw - .75rem);
    max-width: calc(100vw - .75rem);
    margin: .375rem auto;
  }

  .modal-dialog-scrollable .modal-content {
    max-height: calc(100vh - .75rem);
  }

  .modal-header,
  .modal-footer,
  .card-header {
    gap: .5rem;
    flex-wrap: wrap;
  }

  .modal-header .modal-title,
  .card-header h1,
  .card-header h2,
  .card-header h3,
  .card-header h4,
  .card-header h5,
  .card-header p {
    min-width: 0;
    overflow-wrap: anywhere;
  }

  .btn,
  .btn-group > .btn,
  button[type="submit"] {
    white-space: normal;
  }

  .btn-group,
  .btn-group-vertical {
    flex-wrap: wrap;
  }

  .dataTables_filter,
  .dt-search,
  .dataTables_filter input,
  .dt-search input {
    width: 100% !important;
    text-align: left !important;
  }

  .dataTables_length,
  .dataTables_info,
  .dataTables_paginate,
  .dt-length,
  .dt-info,
  .dt-paging {
    width: 100%;
    text-align: left !important;
  }

  .pagination {
    flex-wrap: wrap;
    gap: .25rem;
  }

  .card-body > table:not(.dataTable),
  .modal-body > table:not(.dataTable),
  .tab-pane > table:not(.dataTable) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 390px) {
  .container,
  .container-fluid {
    padding-left: .55rem;
    padding-right: .55rem;
  }

  .card-body,
  .modal-body {
    padding: .75rem;
  }

  .table {
    font-size: .82rem;
  }
}