/* ============================================================================
 * 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); }