/* 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: .5rem .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: .35rem;
   padding-bottom: .35rem;
}

.table:not(.aoTable) thead th {
   color: var(--muted);
   text-transform: uppercase;
   font-size: .8rem;
   letter-spacing: .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, .10), 0 2px 6px rgba(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: .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, .10), 0 2px 6px rgba(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: .02em !important;
   font-size: .95rem;
}

/* Compact spacing (equivale a tu table-compact actual) */
.aoTableCompact :is(td, th) {
   padding-top: .6rem;
   padding-bottom: .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: .03em;
   text-shadow: 0 1px 0 rgba(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, .65rem);
   box-shadow: var(--tbl-shadow, 0 10px 24px rgba(0, 0, 0, .10), 0 2px 6px rgba(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;
}