/* ============================================================
   AGUA CIRCULAR — tables-nav.css
   Fase 3: tablas DataTables, badges P1/P2/P3, top-nav y tabs.
   Ref: design-system.md §7.4–§7.6
   ============================================================ */

/* ── Top navigation (Intranet) ─────────────────────────────── */
html body nav.ac-nav.navbar {
  min-height: 64px;
  margin-bottom: 0;
  background: hsl(var(--brand-deep)) !important;
  border: none;
  border-radius: 0;
  border-bottom: 1px solid hsl(var(--brand-deep) / 0.9);
  box-shadow: var(--shadow-sm);
}

html body nav.ac-nav .navbar-brand {
  height: 64px;
  display: flex;
  align-items: center;
  padding: var(--space-2) var(--space-4);
  margin-top: 0 !important;
}

html body nav.ac-nav .navbar-brand .logo,
html body nav.ac-nav .navbar-brand img.logo {
  width: auto;
  max-width: 130px;
  height: 28px;
  position: static;
  bottom: auto;
  object-fit: contain;
}

html body nav.ac-nav .navbar-nav > li > a,
html body nav.ac-nav .navbar-nav > li > a.dropdown-toggle {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85) !important;
  padding: var(--space-5) var(--space-4);
  line-height: 1.2;
  transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}

html body nav.ac-nav .navbar-nav > li > a:hover,
html body nav.ac-nav .navbar-nav > li > a:focus,
html body nav.ac-nav .navbar-nav > li.open > a {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

html body nav.ac-nav .navbar-nav > li.active > a,
html body nav.ac-nav .navbar-nav > li.active > a:hover,
html body nav.ac-nav .navbar-nav > li.active > a:focus {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12) !important;
  border-radius: var(--radius-sm);
}

html body nav.ac-nav .navbar-nav .caret {
  border-top-color: rgba(255, 255, 255, 0.75);
}

html body nav.ac-nav .navbar-toggle {
  border-color: rgba(255, 255, 255, 0.35);
  margin-top: 15px;
}

html body nav.ac-nav .navbar-toggle .icon-bar {
  background-color: #fff;
}

html body nav.ac-nav .dropdown-menu {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: var(--space-1) 0;
  margin-top: 0;
}

html body nav.ac-nav .dropdown-menu > li > a {
  font-size: var(--text-sm);
  color: hsl(var(--foreground)) !important;
  padding: var(--space-2) var(--space-4);
}

html body nav.ac-nav .dropdown-menu > li > a:hover,
html body nav.ac-nav .dropdown-menu > li.active > a {
  background: hsl(var(--accent));
  color: hsl(var(--accent-foreground)) !important;
}

html body nav.ac-nav .dropdown-menu > li.divider {
  background-color: hsl(var(--border));
  margin: var(--space-1) 0;
}

/* Usuario (dropdown derecha) */
html body nav.ac-nav .navbar-right .dropdown .btnxs,
html body nav.ac-nav .navbar-right .btn-defaultxs {
  margin-top: 14px;
  margin-right: var(--space-3);
  height: 36px;
  padding: 0 var(--space-4);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: var(--radius);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 500;
  font-family: inherit;
}

html body nav.ac-nav .navbar-right .dropdown .btnxs:hover,
html body nav.ac-nav .navbar-right .dropdown .btnxs:focus {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

html body nav.ac-nav .color-menu {
  min-width: 200px;
}

/* ── Tabs sub-navegación (underline §7.6) ──────────────────── */
.ac-tabs,
.cm-nav-tabs.ac-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  margin: var(--space-6) auto var(--space-8);
  padding: 0;
  border-bottom: 1px solid hsl(var(--border));
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  width: auto;
  max-width: 100%;
  justify-content: flex-start;
}

.ac-tabs .ac-tab,
.cm-nav-tabs.ac-tabs .cm-nav-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 44px;
  padding: var(--space-3) var(--space-4) !important;
  margin: 0 0 -1px;
  border: none !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: hsl(var(--muted-foreground)) !important;
  font-size: var(--text-sm) !important;
  font-weight: 500 !important;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: none !important;
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.ac-tabs .ac-tab:hover,
.cm-nav-tabs.ac-tabs .cm-nav-tab:hover:not(.active) {
  color: hsl(var(--foreground)) !important;
  background: transparent !important;
  border-bottom-color: hsl(var(--border-strong)) !important;
}

.ac-tabs .ac-tab.active,
.cm-nav-tabs.ac-tabs .cm-nav-tab.active {
  color: hsl(var(--primary)) !important;
  background: transparent !important;
  border-bottom-color: hsl(var(--primary)) !important;
  box-shadow: none !important;
}

.ac-tabs .ac-tab i,
.cm-nav-tabs.ac-tabs .cm-nav-tab i {
  font-size: var(--text-sm);
  opacity: 0.85;
}

/* ── Badges (§7.5 + §7.9) ───────────────────────────────────── */
.badge,
.cm-priority-badge,
.cm-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  height: 22px;
  padding: 0 var(--space-2);
  border-radius: var(--radius-full);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  line-height: 1;
  vertical-align: middle;
  white-space: nowrap;
}

.badge-default,
.cm-status-badge.borrador,
.cm-status-badge.pendiente {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.badge-brand {
  background: hsl(var(--brand-soft));
  color: hsl(var(--brand-soft-foreground));
}

.badge-success,
.cm-status-badge.enviado,
.cm-status-badge.finalizada {
  background: hsl(var(--success-soft));
  color: hsl(var(--success-soft-foreground));
}

.badge-warning,
.cm-status-badge.pausada {
  background: hsl(var(--warning-soft));
  color: hsl(var(--warning-soft-foreground));
}

.badge-destructive,
.cm-status-badge.error,
.cm-status-badge.fallido {
  background: hsl(var(--destructive-soft));
  color: hsl(var(--destructive-soft-foreground));
}

.badge-info,
.cm-status-badge.en_envio {
  background: hsl(var(--info-soft));
  color: hsl(var(--info-soft-foreground));
}

/* Prioridades intranet / correos — §7.5 */
.badge-p1,
.badge-priority-1,
.cm-priority-badge.p1,
span.cm-priority-badge.p1 {
  background: hsl(var(--destructive-soft));
  color: hsl(var(--destructive-soft-foreground));
}

.badge-p2,
.badge-priority-2,
.cm-priority-badge.p2,
span.cm-priority-badge.p2 {
  background: hsl(var(--warning-soft));
  color: hsl(var(--warning-soft-foreground));
}

.badge-p3,
.badge-priority-3,
.cm-priority-badge.p3,
span.cm-priority-badge.p3 {
  background: hsl(var(--info-soft));
  color: hsl(var(--info-soft-foreground));
}

.badge-p4,
.badge-priority-4,
.cm-priority-badge.p4,
span.cm-priority-badge.p4 {
  background: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.cm-priority-badge.no-enviar,
.badge-no-enviar {
  background: hsl(var(--destructive));
  color: hsl(var(--destructive-foreground));
}

/* ── Tablas globales (páginas sin .fp-scope / .tt-scope) ───── */
html body:not(.fp-scope):not(.tt-scope) .table-wrapper,
html body:not(.fp-scope):not(.tt-scope) .ac-table-card {
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

/* width SIN !important a propósito: con scrollX, DataTables mide el ancho
   natural de las columnas y lo fija inline en px sobre la tabla (y sus clones
   de header/FixedColumns). Un `width: 100% !important` le gana a ese estilo
   inline, aplasta todas las columnas dentro del viewport y elimina el
   desborde → desaparece el scroll horizontal. El 100% simple solo aplica a
   tablas sin scrollX (donde sí corresponde). */
html body:not(.fp-scope):not(.tt-scope) table.dataTable,
html body:not(.fp-scope):not(.tt-scope) table.ac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  background: hsl(var(--card));
}

html body:not(.fp-scope):not(.tt-scope) table.dataTable thead th,
html body:not(.fp-scope):not(.tt-scope) table.dataTable thead td,
html body:not(.fp-scope):not(.tt-scope) table.ac-table thead th {
  background: hsl(var(--muted)) !important;
  color: hsl(var(--muted-foreground)) !important;
  text-transform: uppercase;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  padding: var(--space-3) var(--space-4) !important;
  border-bottom: 1px solid hsl(var(--border)) !important;
  vertical-align: middle;
  white-space: nowrap;
}

html body:not(.fp-scope):not(.tt-scope) table.dataTable tbody td,
html body:not(.fp-scope):not(.tt-scope) table.dataTable tbody th,
html body:not(.fp-scope):not(.tt-scope) table.ac-table tbody td {
  padding: var(--space-3) var(--space-4) !important;
  border-top: 1px solid hsl(var(--border)) !important;
  vertical-align: middle;
  color: hsl(var(--foreground));
  font-size: var(--text-sm);
  background: hsl(var(--card));
}

html body:not(.fp-scope):not(.tt-scope) table.dataTable.stripe tbody tr.odd td,
html body:not(.fp-scope):not(.tt-scope) table.dataTable.display tbody tr.odd > .sorting_1 {
  background: hsl(var(--muted) / 0.35) !important;
}

html body:not(.fp-scope):not(.tt-scope) table.dataTable tbody tr:hover td {
  background: hsl(var(--accent) / 0.5) !important;
}

html body:not(.fp-scope):not(.tt-scope) table.dataTable tbody tr.selected td {
  background: hsl(var(--brand-soft)) !important;
  color: hsl(var(--brand-deep)) !important;
  font-weight: normal !important;
}

html body:not(.fp-scope):not(.tt-scope) table.dataTable tbody tr.selected td:first-child {
  box-shadow: inset 3px 0 0 0 hsl(var(--primary));
}

html body:not(.fp-scope):not(.tt-scope) table.dataTable thead .sorting,
html body:not(.fp-scope):not(.tt-scope) table.dataTable thead .sorting_asc,
html body:not(.fp-scope):not(.tt-scope) table.dataTable thead .sorting_desc,
html body:not(.fp-scope):not(.tt-scope) table.dataTable thead .sorting_asc_disabled,
html body:not(.fp-scope):not(.tt-scope) table.dataTable thead .sorting_desc_disabled {
  cursor: pointer;
  background-color: hsl(var(--muted)) !important;
}

html body:not(.fp-scope):not(.tt-scope) .td-right,
html body:not(.fp-scope):not(.tt-scope) table.dataTable td.td-num,
html body:not(.fp-scope):not(.tt-scope) table.dataTable th.td-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

html body:not(.fp-scope):not(.tt-scope) .td-center,
html body:not(.fp-scope):not(.tt-scope) table.dataTable td.td-center {
  text-align: center;
}

html body:not(.fp-scope):not(.tt-scope) .td-actions,
html body:not(.fp-scope):not(.tt-scope) table.dataTable td.td-actions {
  text-align: right;
  white-space: nowrap;
}

/* DataTables toolbar / paginación (global) */
html body:not(.fp-scope):not(.tt-scope) div.dataTables_wrapper {
  font-family: inherit;
  font-size: var(--text-sm);
}

html body:not(.fp-scope):not(.tt-scope) div.dataTables_filter label,
html body:not(.fp-scope):not(.tt-scope) div.dataTables_length label {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  font-weight: 500;
}

html body:not(.fp-scope):not(.tt-scope) div.dataTables_filter input {
  height: 36px;
  padding: 0 var(--space-3);
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  font-family: inherit;
  font-size: var(--text-sm);
  margin-left: var(--space-2);
}

html body:not(.fp-scope):not(.tt-scope) div.dataTables_filter input:focus {
  outline: none;
  border-color: hsl(var(--input-focus));
  box-shadow: var(--shadow-focus);
}

html body:not(.fp-scope):not(.tt-scope) div.dataTables_length select {
  height: 36px;
  border: 1px solid hsl(var(--border));
  border-radius: var(--radius-sm);
  padding: 0 var(--space-2);
  font-family: inherit;
}

html body:not(.fp-scope):not(.tt-scope) div.dataTables_info {
  font-size: var(--text-sm);
  color: hsl(var(--muted-foreground));
  padding: var(--space-3) 0;
}

html body:not(.fp-scope):not(.tt-scope) div.dataTables_paginate {
  padding: var(--space-3) 0;
}

html body:not(.fp-scope):not(.tt-scope) div.dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-3) !important;
  margin: 0 2px;
  border: 1px solid hsl(var(--border)) !important;
  border-radius: var(--radius-sm) !important;
  background: hsl(var(--card)) !important;
  color: hsl(var(--foreground)) !important;
  font-size: var(--text-sm) !important;
}

html body:not(.fp-scope):not(.tt-scope) div.dataTables_paginate .paginate_button:hover {
  background: hsl(var(--accent)) !important;
  color: hsl(var(--accent-foreground)) !important;
  border-color: hsl(var(--border-strong)) !important;
}

html body:not(.fp-scope):not(.tt-scope) div.dataTables_paginate .paginate_button.current,
html body:not(.fp-scope):not(.tt-scope) div.dataTables_paginate .paginate_button.current:hover {
  background: hsl(var(--primary)) !important;
  color: hsl(var(--primary-foreground)) !important;
  border-color: hsl(var(--primary)) !important;
}

html body:not(.fp-scope):not(.tt-scope) div.dataTables_paginate .paginate_button.disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* =============================================================
   DataTables — toolbar superior (.ac-dt-top) e inferior (.ac-dt-bottom)
   -------------------------------------------------------------
   Convención del proyecto:
     dom: '<"ac-dt-top" f>rt<"ac-dt-bottom" lpi>'
   - Arriba: search (`f`) y, opcionalmente, botones de exportar
     que vivan en el HTML adyacente (los recogemos vía CSS sibling).
   - Abajo: page-length (`l`), paginación (`p`) y info (`i`).
   ============================================================= */

html body div.dataTables_wrapper > .ac-dt-top,
html body div.dataTables_wrapper > .ac-dt-bottom {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  background: hsl(var(--card));
  border: 1px solid hsl(var(--border));
  padding: var(--space-3) var(--space-4);
}

/* Top — search a la izquierda, espacio para botones a la derecha */
html body div.dataTables_wrapper > .ac-dt-top {
  border-radius: var(--radius) var(--radius) 0 0;
  border-bottom: none;
  justify-content: space-between;
}

html body div.dataTables_wrapper > .ac-dt-top .dataTables_filter {
  margin: 0;
  flex: 0 1 380px;
  text-align: left;
}

html body div.dataTables_wrapper > .ac-dt-top .dataTables_filter label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
  width: 100%;
  max-width: 380px;
}

html body div.dataTables_wrapper > .ac-dt-top .dataTables_filter input {
  margin-left: 0;
  width: 100%;
  min-width: 200px;
}

/* Slot opcional para botones (export, filtros) — los pages que tengan
   un toolbar pueden envolverlo en .ac-dt-actions DENTRO de .ac-dt-top
   o como sibling con la clase .ac-dt-toolbar. */
html body div.dataTables_wrapper > .ac-dt-top .ac-dt-actions {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Bottom — length+info a la izquierda, paginación a la derecha */
html body div.dataTables_wrapper > .ac-dt-bottom {
  border-radius: 0 0 var(--radius) var(--radius);
  border-top: none;
  justify-content: space-between;
}

html body div.dataTables_wrapper > .ac-dt-bottom .dataTables_length {
  order: 1;
  margin: 0;
}

html body div.dataTables_wrapper > .ac-dt-bottom .dataTables_info {
  order: 2;
  padding: 0;
  flex: 1 1 auto;
  text-align: right;
  margin-right: var(--space-3);
}

html body div.dataTables_wrapper > .ac-dt-bottom .dataTables_paginate {
  order: 3;
  padding: 0;
  margin: 0;
}

html body div.dataTables_wrapper > .ac-dt-bottom .dataTables_length label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin: 0;
}

/* Asegurar que el wrapper de la tabla queda integrado al toolbar */
html body div.dataTables_wrapper:has(> .ac-dt-top) > .dataTables_scroll,
html body div.dataTables_wrapper:has(> .ac-dt-top) > div.dataTables_scroll {
  border-left: 1px solid hsl(var(--border));
  border-right: 1px solid hsl(var(--border));
}

/* Mobile — apilado vertical */
@media (max-width: 720px) {
  html body div.dataTables_wrapper > .ac-dt-top,
  html body div.dataTables_wrapper > .ac-dt-bottom {
    flex-direction: column;
    align-items: stretch;
  }
  html body div.dataTables_wrapper > .ac-dt-top .dataTables_filter label,
  html body div.dataTables_wrapper > .ac-dt-top .dataTables_filter input {
    max-width: none;
  }
  html body div.dataTables_wrapper > .ac-dt-bottom .dataTables_info {
    text-align: left;
    margin-right: 0;
  }
  html body div.dataTables_wrapper > .ac-dt-bottom .dataTables_paginate {
    align-self: center;
  }
}

/* ── DataTables: cuerpo con scroll (scrollX/scrollY) ─────────
   Deslizadores SIEMPRE visibles y con buen tamaño de agarre, para
   que sea obvio que la tabla desborda horizontal/verticalmente. */
html body div.dataTables_scrollBody {
  -webkit-overflow-scrolling: touch;
  scrollbar-color: hsl(var(--border-strong)) hsl(var(--muted));
}

html body div.dataTables_scrollBody::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html body div.dataTables_scrollBody::-webkit-scrollbar-track {
  background: hsl(var(--muted));
}

html body div.dataTables_scrollBody::-webkit-scrollbar-thumb {
  background: hsl(var(--border-strong));
  border-radius: var(--radius-full);
  border: 2px solid hsl(var(--muted));
}

html body div.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
  background: hsl(var(--muted-foreground));
}

/* Celda estado legacy (avisos) → badge destructive */
html body:not(.fp-scope):not(.tt-scope) td.redx,
html body:not(.fp-scope):not(.tt-scope) .redx {
  background: hsl(var(--destructive-soft)) !important;
  color: hsl(var(--destructive-soft-foreground)) !important;
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 600;
}

/* Footer intranet */
html body footer.container-fluid.text-center {
  background: hsl(var(--brand-deep));
  color: rgba(255, 255, 255, 0.85);
  padding: var(--space-6);
  font-size: var(--text-sm);
  border: none;
}

/* Jumbotron legacy → hero con tokens */
html body:not(.fp-scope):not(.tt-scope) .jumbotron {
  background: linear-gradient(
    135deg,
    hsl(var(--brand-deep)) 0%,
    hsl(var(--primary-active)) 100%
  ) !important;
  color: #fff;
  border-radius: 0;
  margin-bottom: 0;
}

html body:not(.fp-scope):not(.tt-scope) .jumbotron h1 {
  color: #fff;
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
}

/* DataTables search label — never break the label text mid-word */
html body .dataTables_filter label {
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}