/* tablas.css — extraído de app.css (orden original preservado) */

/* Lista móvil de clientes: evita desbordes */
.table-mobile {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  --bs-table-bg: transparent;
  --bs-table-striped-bg: transparent;
  --bs-table-hover-bg: transparent;
  --bs-table-accent-bg: transparent;
}

.table-mobile th,
.table-mobile td {
  vertical-align: top;
  padding: 0.5rem 0.5rem;
}

/* En vista móvil forzamos wrap contra cualquier heredado */
.d-md-none .table-mobile th,
.d-md-none .table-mobile td {
  white-space: normal !important;
  word-break: break-word;
  overflow-wrap: anywhere;
  hyphens: auto;
}

.table-mobile th {
  width: 42%;
  line-height: 1.2;
  font-weight: 600;
  color: var(--muted, #6c757d);
}

.table-mobile td code {
  word-break: break-all;
}

.empleado-card .table-mobile tbody tr > * {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

.table:not(.aoTable) thead th {
  color: var(--muted);
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 0.06em;
  border-bottom: 0;
}

/* Preset tablas, este iba con <style id="ao-table-preset" */
:root {
  --tbl-radius: 14px;
  --tbl-shadow: 0 10px 24px rgba(0, 0, 0, 0.1), 0 2px 6px rgba(0, 0, 0, 0.06);
  --tbl-head-bg: color-mix(in srgb, var(--ink) 6%, transparent);
  --tbl-stripe: color-mix(in srgb, var(--ink) 5%, transparent);
  --tbl-hover: color-mix(in srgb, var(--ink) 8%, transparent);
}

.table {
  --bs-table-color: var(--ink);
  --bs-table-bg: var(--card);
  --bs-table-striped-color: var(--ink);
  --bs-table-striped-bg: var(--tbl-stripe);
  --bs-table-hover-color: var(--ink);
  --bs-table-hover-bg: var(--tbl-hover);
  --bs-table-border-color: var(--border);

  background-color: var(--bs-table-bg) !important;
  color: var(--bs-table-color) !important;
  margin-bottom: 0;
}

/* SOLO tablas legacy (no AO) llevan borde/sombra/radio aquí */
.table:not(.aoTable) {
  border: 1px solid var(--bs-table-border-color);
  border-radius: var(--tbl-radius);
  box-shadow: var(--tbl-shadow);
  overflow: clip;
  /* si lo quieres, ok */
}

/* Deja que Bootstrap pinte fondos (bg/stripe/hover) con sus variables.
   Solo forzamos color/bordes en el cuerpo para no matar el THEAD brand. */
.table > :not(caption) > tbody > * > * {
  color: var(--ink) !important;
  border-color: var(--bs-table-border-color, var(--border)) !important;
}

.table thead tr {
  background: var(--tbl-head-bg) !important;
}

.table thead th {
  color: var(--muted) !important;
  font-weight: 600;
  border-bottom-color: var(--border) !important;
}

.table .text-muted {
  color: var(--muted) !important;
}

.table-responsive:not(.aoTableWrap) {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--tbl-radius);
  box-shadow: var(--tbl-shadow);
  overflow: clip;
}

.table-responsive:not(.aoTableWrap) > .table {
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.table-responsive > .table {
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

.ao-table-flat.table,
.table-responsive.ao-table-flat {
  box-shadow: none !important;
}

.card .table-responsive:not(.aoTableWrap) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: var(--rad-lg);
  overflow: clip;
}

.card .table {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0;
}

.card .table thead tr {
  background: var(--tbl-head-bg) !important;
}

/* ===== Tablas (modo claro) — blanco + hover gris ===== */
body:not(.dark-mode) {
  --tbl-light-bg: #ffffff;

  /* Stripe y hover sutiles (gris suave) */
  --tbl-light-stripe: color-mix(in srgb, #000 2%, #fff);
  /* ~gris 2% */
  --tbl-light-hover: color-mix(in srgb, #000 6%, #fff);
  /* ~gris 6% */

  --tbl-light-border: #d2d2d7;
}

body:not(.dark-mode) .table {
  --bs-table-bg: var(--tbl-light-bg) !important;
  --bs-table-striped-bg: var(--tbl-light-stripe) !important;
  --bs-table-hover-bg: var(--tbl-light-hover) !important;
  --bs-table-border-color: var(--tbl-light-border) !important;

  background: var(--tbl-light-bg) !important;
  border-color: var(--tbl-light-border) !important;
}

/* Ya no queremos pintar el THEAD en gris en claro */
body:not(.dark-mode) .table thead tr {
  background: transparent !important;
}

/* =========================================================
   Agend One — AO TABLE (TABLAS UNIFICADAS)
   Uso recomendado:
   <div class="table-responsive aoTableWrap">
     <table class="table table-hover align-middle aoTable aoTableCompact">
   ========================================================= */

:root {
  --ao-table-radius: 0.65rem;
  /* como Clientes */
}

/* Wrapper (controla radio + clip + borde + sombra) */
.aoTableWrap {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--ao-table-radius);
  box-shadow: var(
    --tbl-shadow,
    0 10px 24px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.06)
  );

  overflow-x: auto;
  /* scroll horizontal si hace falta */
  overflow-y: hidden;
  /* como hace Bootstrap en responsive tables */
}

/* La tabla dentro del wrapper NO debe duplicar borde/sombra */
.aoTableWrap > .table {
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
}

/* Etiqueta de tabla (tipografía + comportamiento) */
.table.aoTable thead th {
  text-transform: none !important;
  /* adiós mayúsculas forzadas */
  letter-spacing: 0.02em !important;
  font-size: 0.95rem;
}

/* Compact spacing (equivale a tu table-compact actual) */
.aoTableCompact :is(td, th) {
  padding-top: 0.6rem;
  padding-bottom: 0.6rem;
}

/* Modo claro: fondo totalmente blanco como Clientes */
body:not(.dark-mode) .aoTableWrap {
  background: #fff !important;
  border-color: var(--tbl-light-border, #d2d2d7) !important;
}

body:not(.dark-mode) .aoTableWrap .table {
  --bs-table-bg: #fff !important;
  --bs-table-striped-bg: var(--tbl-light-stripe) !important;
  --bs-table-hover-bg: var(--tbl-light-hover) !important;
}

/* ===== THEAD global en color de marca (todas las tablas) =====
   Gradiente continuo: NO se reinicia por columna.
   Truco: cada <th> pinta el MISMO gradiente con background-attachment: fixed.
*/
.table thead th {
  background-color: transparent !important;
  background-image: var(--brand-grad) !important;
  background-repeat: no-repeat !important;
  background-size: 100vw 100% !important;
  background-position: left top !important;
  background-attachment: fixed;

  color: var(--on-brand, #ffffff) !important;
  border-bottom: 0 !important;
  vertical-align: middle;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
}

/* En oscuro tu --brand-grad ya está oscurecido en app.css, así que esto es suficiente */
body.dark-mode .table thead th {
  background: var(--brand-grad) !important;
}

/* Cabecera pegajosa si el <tr> lleva .sticky-th (opcional) */
.sticky-th th {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* OPT-OUT: añade .thead-soft al <table> para volver al estilo neutro */
.table.thead-soft thead th {
  background: var(--tbl-head-bg) !important;
  color: var(--muted) !important;
  text-shadow: none !important;
  border-bottom: 1px solid var(--border) !important;
}

/* =========================================================
   Compat: .ao-table-skin (legacy) -> look de wrapper AO
   Así Clientes no necesita overrides en su CSS.
   ========================================================= */
.ao-table-skin {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--ao-table-radius, 0.65rem);
  box-shadow: var(
    --tbl-shadow,
    0 10px 24px rgba(0, 0, 0, 0.1),
    0 2px 6px rgba(0, 0, 0, 0.06)
  );
  overflow-x: auto;
  overflow-y: hidden;
}

.ao-table-skin > .table {
  margin-bottom: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Claro: blanco total + border correcto */
body:not(.dark-mode) .ao-table-skin {
  background: #fff !important;
  border-color: var(--tbl-light-border, #d2d2d7) !important;
}

body:not(.dark-mode) .ao-table-skin .text-muted {
  color: var(--muted) !important;
}

body:not(.dark-mode) .ao-table-skin :is(.form-control, .btn) {
  border-color: var(--tbl-light-border, #d2d2d7);
}

/* =========================================================
   AO — Evitar clipping de dropdowns dentro de wrappers responsive
   (compat: Caja sin tocar templates)
   ========================================================= */

:where(.ao-table-dropdowns, #caja-root .caja-table-wrap) {
  overflow-y: visible !important;
}

:where(.ao-table-dropdowns, #caja-root .caja-table-wrap) .dropdown-menu {
  z-index: 2000;
}