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

/* ---------- 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 */
}