/* ============================================================================
 * datagrid.css — estilos del componente responsive (tabla PC / cards movil)
 *
 * Paleta por variables con 2 contextos de color (la ESTRUCTURA no cambia):
 *   - CLARO  (por defecto): TODO legacy + diseño nuevo en light.
 *   - OSCURO: SOLO diseño nuevo en dark (body.g-newdesign.theme-dark).
 * En legacy siempre claro/nativo (los skins de SmartAdmin dejan el contenido
 * claro), y app-override.css no se carga, por eso el componente trae su paleta.
 * ============================================================================ */

.dg {
    position: relative;
    /* ---- CLARO (default: legacy claro + nuevo light) ---- */
    --dg-bar-bg:  #f8fafc;
    --dg-bd:      #e5e7eb;
    --dg-bd-soft: #f1f5f9;
    --dg-mut:     #64748b;
    --dg-hover:   #eef2f7;
    --dg-empty:   #94a3b8;
    --dg-card-bg: #fff;
    --dg-head-bg: #f1f5f9;
    --dg-title:   #0f172a;
    --dg-th:      inherit;
    --dg-accent:  #1d4ed8;
    --dg-overlay: rgba(255,255,255,.6);
    --dg-shadow:  0 1px 2px rgba(0,0,0,.05);
}

/* ---- OSCURO: EXCLUSIVO del diseño nuevo en dark ----
   En legacy los skins de SmartAdmin dejan el contenido claro (incluido
   smart-style-1 "oscuro elegante", que solo oscurece header/nav), así que el
   grid va siempre claro/nativo en legacy. */
body.g-newdesign.theme-dark .dg {
    --dg-bar-bg:  #1e293b;
    --dg-bd:      #334155;
    --dg-bd-soft: #334155;
    --dg-mut:     #94a3b8;
    --dg-hover:   #334155;
    --dg-empty:   #64748b;
    --dg-card-bg: #1e293b;
    --dg-head-bg: #0f172a;
    --dg-title:   #e2e8f0;
    --dg-th:      #e2e8f0;
    --dg-accent:  #93c5fd;
    --dg-overlay: rgba(15,23,42,.6);
    --dg-shadow:  none;
}

/* ---------- toolbar ---------- */
.dg-toolbar {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 6px;
    padding: 6px 8px; border-bottom: 1px solid var(--dg-bd); background: var(--dg-bar-bg);
}
.dg-toolbar-left { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.dg-toolbar-right { display: flex; align-items: center; gap: 6px; }
.dg-length { width: auto; display: inline-block; }
.dg-length-wrap { font-size: 12px; color: var(--dg-mut); }

/* ---------- tabla ---------- */
.dg-table-wrap { width: 100%; overflow-x: auto; }
.dg-table { margin-bottom: 0; width: 100%; }
.dg-table > thead > tr > th { vertical-align: middle; white-space: nowrap; color: var(--dg-th); }
.dg-th-num { width: 42px; text-align: center; }
.dg-th-act { width: 90px; text-align: center; }
.dg-sortable { cursor: pointer; user-select: none; }
.dg-sortable:hover { background: var(--dg-hover); }
.dg-sort-dim { opacity: .35; }
.dg-filter-row > th { padding: 4px 6px; }
.dg-filter-row .form-control { min-width: 80px; }
.dg-actions { white-space: nowrap; }
.dg-empty { text-align: center; color: var(--dg-empty); padding: 18px; font-style: italic; }

/* ---------- COLUMNAS CON COLOR (opcion `tint` de la columna) ----------
   Para separar de un vistazo columnas contiguas que se confunden (ej. en la lista
   de precios: Precio Compra / FU% / Precio Venta, tres numeros editables pegados).

   Se pinta la columna ENTERA: cabecera, fila de filtros, celdas y —en movil— la
   fila de la card.

   ⚠️ DOS COSAS QUE PARECEN DE MAS Y NO LO SON (las dos salieron de romperse en
   pantalla, no de la teoria):

   1) El color va como `background-image` (degradado de UN solo tono) y NO como
      `background-color`. Un color de fondo en la celda REEMPLAZA al de la fila:
      se perderian la franja del `table-striped` y el `:hover` justo en estas
      columnas y la tabla quedaria peor que antes. Al ser propiedades distintas,
      la imagen se SUPERPONE al color que ya trae la fila y los dos conviven.

   2) `!important` + selector largo. `app-override.css` (el tema nuevo) pinta las
      tablas con el ATAJO `background` y `!important`:
          .table-striped>tbody>tr:nth-of-type(odd)>td { background: ... !important }
          .table-hover>tbody>tr:hover>td              { background: ... !important }
          .table>thead>tr>th                          { background: ... !important }
          body.theme-dark .table>tbody>tr>td          { background: ... !important }
      El atajo NO es solo un color: resetea `background-image: none`. Sin esto el
      tinte se borraba en las filas IMPARES y al pasar el mouse -> se veia fila por
      medio, que es exactamente lo que se reporto. Solo se pisa `background-image`,
      nunca el color: asi el rayado y el hover de esas reglas se siguen viendo
      DEBAJO del tinte y la columna queda pareja en todas las filas.

   El alpha del OSCURO es mas alto que el del claro a proposito: el mismo velo
   sobre el navy (#161b27) casi no se ve. Es la unica parte de este archivo que no
   usa las variables --dg-*: aca el color ES el dato. */
.dg .dg-table > tbody > tr > td.dg-tint-blue,
.dg .dg-card-field.dg-tint-blue   { background-image: linear-gradient(rgba( 59,130,246,.13), rgba( 59,130,246,.13)) !important; }
.dg .dg-table > tbody > tr > td.dg-tint-amber,
.dg .dg-card-field.dg-tint-amber  { background-image: linear-gradient(rgba(245,158, 11,.15), rgba(245,158, 11,.15)) !important; }
.dg .dg-table > tbody > tr > td.dg-tint-green,
.dg .dg-card-field.dg-tint-green  { background-image: linear-gradient(rgba( 16,185,129,.13), rgba( 16,185,129,.13)) !important; }
.dg .dg-table > tbody > tr > td.dg-tint-red,
.dg .dg-card-field.dg-tint-red    { background-image: linear-gradient(rgba(239, 68, 68,.12), rgba(239, 68, 68,.12)) !important; }
.dg .dg-table > tbody > tr > td.dg-tint-violet,
.dg .dg-card-field.dg-tint-violet { background-image: linear-gradient(rgba(139, 92,246,.13), rgba(139, 92,246,.13)) !important; }

/* cabecera + fila de filtros: mas alpha, para que la columna se "ancle" arriba */
.dg .dg-table > thead > tr > th.dg-tint-blue   { background-image: linear-gradient(rgba( 59,130,246,.24), rgba( 59,130,246,.24)) !important; }
.dg .dg-table > thead > tr > th.dg-tint-amber  { background-image: linear-gradient(rgba(245,158, 11,.26), rgba(245,158, 11,.26)) !important; }
.dg .dg-table > thead > tr > th.dg-tint-green  { background-image: linear-gradient(rgba( 16,185,129,.24), rgba( 16,185,129,.24)) !important; }
.dg .dg-table > thead > tr > th.dg-tint-red    { background-image: linear-gradient(rgba(239, 68, 68,.22), rgba(239, 68, 68,.22)) !important; }
.dg .dg-table > thead > tr > th.dg-tint-violet { background-image: linear-gradient(rgba(139, 92,246,.24), rgba(139, 92,246,.24)) !important; }

/* ---- OSCURO (exclusivo del diseño nuevo, igual que el resto del componente) ----
   El `body` de mas al frente no es decorativo: `body.theme-dark .table-hover>tbody>
   tr:hover>td` de app-override pesa mas que el selector claro y, sin esto, el tinte
   se apagaba al pasar el mouse SOLO en oscuro. */
body.g-newdesign.theme-dark .dg .dg-table > tbody > tr > td.dg-tint-blue,
body.g-newdesign.theme-dark .dg .dg-card-field.dg-tint-blue   { background-image: linear-gradient(rgba( 96,165,250,.22), rgba( 96,165,250,.22)) !important; }
body.g-newdesign.theme-dark .dg .dg-table > tbody > tr > td.dg-tint-amber,
body.g-newdesign.theme-dark .dg .dg-card-field.dg-tint-amber  { background-image: linear-gradient(rgba(251,191, 36,.20), rgba(251,191, 36,.20)) !important; }
body.g-newdesign.theme-dark .dg .dg-table > tbody > tr > td.dg-tint-green,
body.g-newdesign.theme-dark .dg .dg-card-field.dg-tint-green  { background-image: linear-gradient(rgba( 52,211,153,.20), rgba( 52,211,153,.20)) !important; }
body.g-newdesign.theme-dark .dg .dg-table > tbody > tr > td.dg-tint-red,
body.g-newdesign.theme-dark .dg .dg-card-field.dg-tint-red    { background-image: linear-gradient(rgba(248,113,113,.20), rgba(248,113,113,.20)) !important; }
body.g-newdesign.theme-dark .dg .dg-table > tbody > tr > td.dg-tint-violet,
body.g-newdesign.theme-dark .dg .dg-card-field.dg-tint-violet { background-image: linear-gradient(rgba(167,139,250,.22), rgba(167,139,250,.22)) !important; }

body.g-newdesign.theme-dark .dg .dg-table > thead > tr > th.dg-tint-blue   { background-image: linear-gradient(rgba( 96,165,250,.32), rgba( 96,165,250,.32)) !important; }
body.g-newdesign.theme-dark .dg .dg-table > thead > tr > th.dg-tint-amber  { background-image: linear-gradient(rgba(251,191, 36,.30), rgba(251,191, 36,.30)) !important; }
body.g-newdesign.theme-dark .dg .dg-table > thead > tr > th.dg-tint-green  { background-image: linear-gradient(rgba( 52,211,153,.30), rgba( 52,211,153,.30)) !important; }
body.g-newdesign.theme-dark .dg .dg-table > thead > tr > th.dg-tint-red    { background-image: linear-gradient(rgba(248,113,113,.30), rgba(248,113,113,.30)) !important; }
body.g-newdesign.theme-dark .dg .dg-table > thead > tr > th.dg-tint-violet { background-image: linear-gradient(rgba(167,139,250,.32), rgba(167,139,250,.32)) !important; }

/* movil: la card no tiene columnas, asi que el color va en la fila del campo;
   el margen negativo lo lleva de borde a borde de la tarjeta */
.dg .dg-card-field[class*="dg-tint-"] { margin: 0 -10px; padding-left: 10px; padding-right: 10px; }

/* ---------- cards (movil) ---------- */
.dg-cards { padding: 8px; display: flex; flex-direction: column; gap: 8px; }
.dg-card {
    border: 1px solid var(--dg-bd); border-radius: 8px; background: var(--dg-card-bg);
    box-shadow: var(--dg-shadow); overflow: hidden;
}
.dg-card-head {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px; background: var(--dg-head-bg); border-bottom: 1px solid var(--dg-bd);
}
.dg-card-num { font-size: 11px; color: var(--dg-mut); font-weight: 700; }
.dg-card-title { font-weight: 700; color: var(--dg-title); flex: 1; word-break: break-word; }
.dg-card-actions { display: flex; gap: 4px; }
.dg-card-body { padding: 8px 10px; }
.dg-card-field { padding: 3px 0; font-size: 13px; border-bottom: 1px dashed var(--dg-bd-soft); }
.dg-card-field:last-child { border-bottom: 0; }
.dg-card-label { color: var(--dg-mut); font-weight: 600; }
.dg-card-value { color: var(--dg-title); }
.dg-card-empty { border: 1px dashed var(--dg-bd); border-radius: 8px; }

/* ---------- panel de filtros movil ---------- */
.dg-filter-panel { padding: 8px 10px; background: var(--dg-bar-bg); border-bottom: 1px solid var(--dg-bd); }
.dg-filter-group { margin-bottom: 8px; }
.dg-filter-group > label { display: block; font-size: 12px; color: var(--dg-mut); margin-bottom: 2px; }
.dg-sort-row { display: flex; gap: 6px; }
.dg-sort-row .dg-sort-mobile { flex: 1; }
.dg-filter-actions { display: flex; gap: 6px; margin-top: 4px; }

/* ---------- footer / paginacion ---------- */
.dg-footer {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 6px; padding: 6px 8px; border-top: 1px solid var(--dg-bd);
}
.dg-info { font-size: 12px; color: var(--dg-mut); }
.dg-pagination { margin: 0; }

/* ---------- loading ---------- */
.dg-loading {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 20;
    display: flex; align-items: center; justify-content: center;
    background: var(--dg-overlay); color: var(--dg-accent);
    pointer-events: none;   /* solo visual: no bloquea tipear/clic durante el debounce */
}

/* ---------- menu de acciones (solo con actionsMode:'dropdown') ----------
   Se usa cuando la fila tiene tantas acciones que la columna se come el ancho de la tabla.
   El desplegable es PROPIO, no el de Bootstrap: el proyecto carga distintas versiones de BS
   segun el skin y el markup de los items cambia entre la 3 y la 4.
   `position: fixed` y NO absolute: `.dg-table-wrap` tiene overflow-x:auto y recortaria el menu
   (con overflow declarado en un eje, el otro deja de ser visible). Las coordenadas las calcula
   el JS al abrir. Sin `:has()` ni `color-mix()` — la base es Firefox 80. */
.dg-act-wrap { position: relative; }
.dg-act-toggle { white-space: nowrap; }
.dg-act-menu {
    display: none; position: fixed; z-index: 1050;
    min-width: 190px; margin: 0; padding: 4px 0; list-style: none;
    background: var(--dg-card-bg); border: 1px solid var(--dg-bd); border-radius: 6px;
    box-shadow: 0 4px 14px rgba(0,0,0,.14); text-align: left;
}
.dg-act-wrap.open .dg-act-menu { display: block; }
.dg-act-menu > li { display: block; }
.dg-act-menu > li > a {
    display: block; padding: 6px 14px; font-size: 13px; line-height: 1.4;
    color: var(--dg-title); text-decoration: none; white-space: nowrap;
}
.dg-act-menu > li > a:hover,
.dg-act-menu > li > a:focus { background: var(--dg-hover); color: var(--dg-title); text-decoration: none; }
.dg-act-menu > li > a > i { width: 18px; text-align: center; margin-right: 6px; color: var(--dg-accent); }

/* ---------- COLUMNAS CONGELADAS (position: sticky) ----------
   Problema que resuelve: en las bandejas anchas (cpe/comprobante tiene 11 columnas) la
   columna de ACCIONES queda fuera de la pantalla y el usuario tiene que descubrir el scroll
   horizontal para llegar a los botones. Congelada, el menu de acciones NUNCA se oculta.
   Tambien se congela la PRIMERA columna, para no perder de vista de que fila es cada accion.

   Todo esto se activa solo con la clase `dg-xscroll`, que el JS pone unicamente cuando la
   tabla DESBORDA de verdad (`scrollWidth > clientWidth`). Si el grid entra completo en
   pantalla no cambia absolutamente nada respecto de como se veia. La clase `dg-fixl` la
   agrega el JS solo si la primera columna es angosta (ver `updateSticky`).

   ⚠️ TRES COSAS QUE PARECEN DE MAS Y NO LO SON:

   1) La celda congelada NECESITA fondo OPACO. Es lo unico que la separa de las celdas que
      pasan por debajo al desplazarse; sin fondo se leen los dos textos superpuestos. Por eso
      hay que repintar a mano el rayado (`table-striped`) y el `:hover` de esa columna: el
      color de la FILA lo pintan `.table-striped`/`.table-hover` sobre el `<td>` y aca lo
      estamos reemplazando.

   2) `!important` + selector largo, igual que en `tint`: `app-override.css` (tema nuevo)
      pinta las tablas con el ATAJO `background` y `!important` y se carga DESPUES que este
      archivo. Se pisa solo `background-color`, nunca `background-image`, para que una columna
      con `tint` congelada conserve su velo de color.

   3) El separador va como `box-shadow` y NO como `border`. La tabla es `border-collapse:
      collapse`: ahi el borde pertenece a la TABLA, no a la celda, y la celda congelada lo
      pierde al desplazarse (queda la columna flotando sin linea). El `inset` dibuja la linea
      y el segundo valor la sombra de profundidad.

   La sombra aparece solo del lado por el que HAY contenido oculto (`dg-xs-l` / `dg-xs-r`, que
   el JS conmuta segun `scrollLeft`): asi se ve de un vistazo que la tabla sigue.

   `position: sticky` es seguro en la base del proyecto (Firefox 80). */
.dg {
    --dg-fix-bg:      #fff;        /* legacy: el cuerpo del widget es blanco */
    --dg-fix-bg-odd:  #f9f9f9;     /* = .table-striped de Bootstrap */
    --dg-fix-hover:   #f5f5f5;     /* = .table-hover de Bootstrap */
    --dg-fix-head-bg: #fff;
    --dg-fix-sh:      rgba(0,0,0,.20);
}
body.g-newdesign .dg {
    --dg-fix-bg:      var(--g-bg2);   /* = .widget-body del tema nuevo (light y dark) */
    --dg-fix-bg-odd:  #eff0f4;        /* = --g-bg2 con el velo rgba(0,0,0,.02) de app-override */
    --dg-fix-hover:   var(--g-bg3);
    --dg-fix-head-bg: var(--g-bg3);
}
body.g-newdesign.theme-dark .dg {
    --dg-fix-bg-odd:  var(--g-bg2);   /* en oscuro app-override apaga el rayado: columna pareja */
    --dg-fix-sh:      rgba(0,0,0,.55);
}

/* --- pegado --- */
.dg .dg-table-wrap.dg-xscroll > .dg-table > tbody > tr > td.dg-fix-r { position: sticky; right: 0; z-index: 2; }
.dg .dg-table-wrap.dg-xscroll > .dg-table > thead > tr > th.dg-fix-r { position: sticky; right: 0; z-index: 3; }
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > tbody > tr > td.dg-fix-l0 { position: sticky; left: 0; z-index: 2; }
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > thead > tr > th.dg-fix-l0 { position: sticky; left: 0; z-index: 3; }
/* el `left` de la 1a columna de datos depende del ancho real de la columna `#`: lo pone el JS */
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > tbody > tr > td.dg-fix-l1 { position: sticky; z-index: 2; }
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > thead > tr > th.dg-fix-l1 { position: sticky; z-index: 3; }

/* --- fondo opaco (ver nota 1) --- */
.dg .dg-table-wrap.dg-xscroll > .dg-table > tbody > tr > td.dg-fix-r,
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > tbody > tr > td.dg-fix-l0,
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > tbody > tr > td.dg-fix-l1 { background-color: var(--dg-fix-bg) !important; }

.dg .dg-table-wrap.dg-xscroll > .dg-table > tbody > tr:nth-of-type(odd) > td.dg-fix-r,
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > tbody > tr:nth-of-type(odd) > td.dg-fix-l0,
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > tbody > tr:nth-of-type(odd) > td.dg-fix-l1 { background-color: var(--dg-fix-bg-odd) !important; }

/* el hover va DESPUES del rayado a proposito: misma especificidad, gana el ultimo */
.dg .dg-table-wrap.dg-xscroll > .dg-table > tbody > tr:hover > td.dg-fix-r,
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > tbody > tr:hover > td.dg-fix-l0,
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > tbody > tr:hover > td.dg-fix-l1 { background-color: var(--dg-fix-hover) !important; }

.dg .dg-table-wrap.dg-xscroll > .dg-table > thead > tr > th.dg-fix-r,
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > thead > tr > th.dg-fix-l0,
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > thead > tr > th.dg-fix-l1 { background-color: var(--dg-fix-head-bg) !important; }

/* --- linea separadora + sombra de profundidad (ver nota 3) --- */
.dg .dg-table-wrap.dg-xscroll > .dg-table > thead > tr > th.dg-fix-r,
.dg .dg-table-wrap.dg-xscroll > .dg-table > tbody > tr > td.dg-fix-r { box-shadow: inset 1px 0 0 var(--dg-bd); }
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > thead > tr > th.dg-fix-l1,
.dg .dg-table-wrap.dg-xscroll.dg-fixl > .dg-table > tbody > tr > td.dg-fix-l1 { box-shadow: inset -1px 0 0 var(--dg-bd); }

.dg .dg-table-wrap.dg-xscroll.dg-xs-r > .dg-table > thead > tr > th.dg-fix-r,
.dg .dg-table-wrap.dg-xscroll.dg-xs-r > .dg-table > tbody > tr > td.dg-fix-r { box-shadow: inset 1px 0 0 var(--dg-bd), -7px 0 9px -6px var(--dg-fix-sh); }
.dg .dg-table-wrap.dg-xscroll.dg-fixl.dg-xs-l > .dg-table > thead > tr > th.dg-fix-l1,
.dg .dg-table-wrap.dg-xscroll.dg-fixl.dg-xs-l > .dg-table > tbody > tr > td.dg-fix-l1 { box-shadow: inset -1px 0 0 var(--dg-bd), 7px 0 9px -6px var(--dg-fix-sh); }