/* ============================================================
   tables.css
   Tablas globales — prefijo .gst-table-
   Depende de las variables definidas en rootcolors.css y gesint.css
   ============================================================ */

/* ===== LAYOUT DEL MÓDULO ===== */
/* Envuelve barra de filtros + tabla en columna que ocupa el espacio disponible */
.gst-module-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    gap: 0.75rem;
    height: 100%;
}


/* ===== CONTENEDOR PRINCIPAL DE LA TABLA ===== */
.gst-table-wrap {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}


/* ===== CABECERA FIJA ===== */
.gst-table-head {
    flex-shrink: 0;
    overflow: hidden;
    min-width: 0;
    border-bottom: 2px solid var(--primary-color);
    /* Compensa el scrollbar-gutter:stable del body (5 px) para que
       ambas tablas tengan el mismo ancho de contenido */
    padding-right: 5px;
}

/* ===== CUERPO SCROLLABLE ===== */
.gst-table-body {
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 80px;
    scrollbar-gutter: stable;
}
.gst-table-body::-webkit-scrollbar        { width: 5px; }
.gst-table-body::-webkit-scrollbar-track  { background: transparent; }
.gst-table-body::-webkit-scrollbar-thumb  {
    background: var(--border-color);
    border-radius: 3px;
}
.gst-table-body::-webkit-scrollbar-thumb:hover { background: var(--slate-400); }


/* ===== TABLA BASE ===== */
.gst-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
}

/* ── thead ── */
.gst-table thead,
.gst-table thead tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
.gst-table thead th {
    padding: 0.7rem 1rem;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--slate-500) !important;
    background: var(--bg-primary);
    white-space: nowrap;
}
.gst-table thead th:first-child { padding-left: 1.25rem; }
.gst-table thead th:last-child  { padding-right: 1.25rem; }

/* ── Ícono de ordenamiento (opcional) ── */
.gst-table-sort-icon {
    font-size: 0.85rem;
    opacity: 0.5;
    margin-left: 0.25rem;
    vertical-align: middle;
}

/* ── tbody ── */
.gst-table tbody {
    display: block;
    overflow-y: auto;
}
.gst-table tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
    cursor: pointer;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}
.gst-table tbody tr:last-child { border-bottom: none; }

.gst-table tbody tr td {
    padding: 0.72rem 1rem;
    font-size: 0.84rem;
    color: var(--dark-text-clr) !important;
    vertical-align: middle;
}
.gst-table tbody tr td:first-child { padding-left: 1.25rem; }
.gst-table tbody tr td:last-child  { padding-right: 1.25rem; }


/* ===== ESTADOS ===== */
.gst-table tbody tr:hover {
    background: var(--blue-50);
}
.gst-table tbody tr.active,
.gst-table tbody tr[aria-selected="true"] {
    background: var(--blue-100);
}
.gst-table tbody tr.active td,
.gst-table tbody tr[aria-selected="true"] td {
    color: var(--primary-color) !important;
    font-weight: 600;
}

/* ── Filas con transición de entrada ── */
.gst-table tbody tr {
    animation: gst-row-in 0.18s ease-out both;
}
@keyframes gst-row-in {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Variante a rayas */
.gst-table--striped tbody tr:nth-child(even)       { background: var(--bg-secondary); }
.gst-table--striped tbody tr:nth-child(even):hover { background: var(--blue-50); }


/* ===== ESTADO VACÍO ===== */
.gst-table-empty {
    padding: 2.5rem 1rem;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
}
.gst-table-empty i {
    font-size: 2.2rem;
    color: var(--slate-300);
}
.gst-table-empty p {
    margin: 0;
    font-size: 0.85rem;
    color: var(--slate-400) !important;
}


/* ===== BADGE / CHIP DENTRO DE CELDA ===== */
.gst-cell-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.15rem 0.65rem;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 600;
}
.gst-cell-badge--blue   { background: var(--blue-100);   color: var(--blue-700);   }
.gst-cell-badge--green  { background: var(--green-100);  color: var(--green-700);  }
.gst-cell-badge--amber  { background: var(--amber-100);  color: var(--amber-700);  }
.gst-cell-badge--red    { background: var(--red-100);    color: var(--red-700);    }
.gst-cell-badge--violet { background: var(--violet-100); color: var(--violet-700); }
.gst-cell-badge--slate  { background: var(--slate-100);  color: var(--slate-700);  }


/* ===== DARK MODE ===== */
body.dark-mode .gst-table-wrap      { background: var(--bg-primary); }
body.dark-mode .gst-table thead th  { background: var(--bg-primary); color: var(--slate-400) !important; }
body.dark-mode .gst-table tbody tr:hover        { background: rgba(37,99,235,0.1); }
body.dark-mode .gst-table tbody tr.active       { background: rgba(37,99,235,0.18); }
body.dark-mode .gst-table--striped tbody tr:nth-child(even)       { background: rgba(255,255,255,0.03); }
body.dark-mode .gst-table--striped tbody tr:nth-child(even):hover { background: rgba(37,99,235,0.1); }
body.dark-mode .gst-cell-badge--blue   { background: rgba(37,99,235,0.18);   color: var(--blue-300);   }
body.dark-mode .gst-cell-badge--green  { background: rgba(34,197,94,0.18);   color: var(--green-300);  }
body.dark-mode .gst-cell-badge--amber  { background: rgba(245,158,11,0.18);  color: var(--amber-300);  }
body.dark-mode .gst-cell-badge--red    { background: rgba(239,68,68,0.18);   color: var(--red-300);    }
body.dark-mode .gst-cell-badge--violet { background: rgba(139,92,246,0.18);  color: var(--violet-300); }


/* ===== EVENTOS DE PRODUCTO: celda Producto (desktop) ===== */
/* pe-wrap: bloque que contiene código + nombre del producto */
.pe-sep  { display: none; }           /* separador " — " oculto en desktop */
.pe-name { display: block; font-size: 0.8rem; }  /* nombre en segunda línea */
.pe-wrap { display: block; }


/* ===== RESPONSIVE ===== */
@media (max-width: 576px) {
    .gst-table thead th,
    .gst-table tbody tr td {
        padding: 0.6rem 0.75rem;
        font-size: 0.78rem;
    }
    .gst-table thead th:first-child,
    .gst-table tbody tr td:first-child { padding-left: 0.75rem; }
    .gst-table thead th:last-child,
    .gst-table tbody tr td:last-child  { padding-right: 0.75rem; }
}


/* ============================================================
   MODO TARJETA RESPONSIVE — .gst-table-cards-mobile
   Activo en ≤ 768 px: cada fila se convierte en una tarjeta
   Módulos compatibles: fila-checklist, fila-evento, fila-so, fila-orden, fila-movimiento, fila-requerimiento
   ============================================================ */
@media (max-width: 768px) {

    /* Ocultar cabecera fija */
    .gst-table-cards-mobile .gst-table-head { display: none; }

    /* Body: padding contenedor, scroll vertical */
    .gst-table-cards-mobile .gst-table-body { padding: 0.75rem; }

    /* Tabla y tbody como bloques */
    .gst-table-cards-mobile .gst-table-body .gst-table,
    .gst-table-cards-mobile .gst-table-body .gst-table tbody { display: block; }

    /* ── Cada fila = tarjeta (compartido por todos los módulos) ── */
    .gst-table-cards-mobile .fila-checklist,
    .gst-table-cards-mobile .fila-evento,
    .gst-table-cards-mobile .fila-so,
    .gst-table-cards-mobile .fila-supply-item,
    .gst-table-cards-mobile .fila-orden,
    .gst-table-cards-mobile .fila-requerimiento,
    .gst-table-cards-mobile .fila-movimiento,
    .gst-table-cards-mobile .fila-rp-item {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        background: var(--bg-primary);
        border: 1px solid var(--border-color);
        border-radius: 12px;
        padding: 0.875rem 1rem;
        margin-bottom: 0.5rem;
        box-shadow: var(--shadow-sm);
        transition: box-shadow 0.18s, transform 0.18s;
        animation: gst-row-in 0.18s ease-out both;
    }
    .gst-table-cards-mobile .fila-checklist:last-child,
    .gst-table-cards-mobile .fila-evento:last-child,
    .gst-table-cards-mobile .fila-so:last-child,
    .gst-table-cards-mobile .fila-supply-item:last-child,
    .gst-table-cards-mobile .fila-orden:last-child,
    .gst-table-cards-mobile .fila-requerimiento:last-child,
    .gst-table-cards-mobile .fila-movimiento:last-child,
    .gst-table-cards-mobile .fila-rp-item:last-child { margin-bottom: 0; }

    .gst-table-cards-mobile .fila-checklist:hover,
    .gst-table-cards-mobile .fila-evento:hover,
    .gst-table-cards-mobile .fila-so:hover,
    .gst-table-cards-mobile .fila-supply-item:hover,
    .gst-table-cards-mobile .fila-orden:hover,
    .gst-table-cards-mobile .fila-requerimiento:hover,
    .gst-table-cards-mobile .fila-movimiento:hover,
    .gst-table-cards-mobile .fila-rp-item:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.1);
        transform: translateY(-1px);
    }

    /* Línea separadora: pseudo-elemento order:5, separa info de badges/fecha */
    .gst-table-cards-mobile .fila-checklist::after,
    .gst-table-cards-mobile .fila-evento::after,
    .gst-table-cards-mobile .fila-so::after,
    .gst-table-cards-mobile .fila-supply-item::after,
    .gst-table-cards-mobile .fila-orden::after,
    .gst-table-cards-mobile .fila-requerimiento::after,
    .gst-table-cards-mobile .fila-movimiento::after,
    .gst-table-cards-mobile .fila-rp-item::after {
        content: '';
        order: 5;
        flex: 0 0 100%;
        height: 1px;
        background: var(--border-color);
        margin: 0.25rem 0;
    }

    /* ── td base: ancho completo, layout label / valor ── */
    .gst-table-cards-mobile .fila-checklist td,
    .gst-table-cards-mobile .fila-evento td,
    .gst-table-cards-mobile .fila-so td,
    .gst-table-cards-mobile .fila-supply-item td,
    .gst-table-cards-mobile .fila-orden td,
    .gst-table-cards-mobile .fila-requerimiento td,
    .gst-table-cards-mobile .fila-movimiento td,
    .gst-table-cards-mobile .fila-rp-item td {
        flex: 0 0 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.22rem 0;
        border: none !important;
        font-size: 0.84rem;
        color: var(--dark-text-clr) !important;
        line-height: 1.45;
    }
    .gst-table-cards-mobile .fila-checklist td::before,
    .gst-table-cards-mobile .fila-evento td::before,
    .gst-table-cards-mobile .fila-so td::before,
    .gst-table-cards-mobile .fila-supply-item td::before,
    .gst-table-cards-mobile .fila-orden td::before,
    .gst-table-cards-mobile .fila-requerimiento td::before,
    .gst-table-cards-mobile .fila-movimiento td::before,
    .gst-table-cards-mobile .fila-rp-item td::before {
        content: attr(data-label);
        font-size: 0.7rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.4px;
        color: var(--slate-500);
        flex-shrink: 0;
        margin-right: 0.75rem;
    }

    /* ─────────────────────────────────────────────────────────
       CHECKLIST — orden de celdas
       1=# (oculto)  2=Template  3=Supervisado  4=Supervisor
       ::after (sep, order 5)
       6=✓  7=✗  8=Pend.  9=Fecha
    ───────────────────────────────────────────────────────── */
    .gst-table-cards-mobile .fila-checklist td:nth-child(1) { order: 1; display: none; }
    .gst-table-cards-mobile .fila-checklist td:nth-child(2) { order: 2; }
    .gst-table-cards-mobile .fila-checklist td:nth-child(3) { order: 3; }
    .gst-table-cards-mobile .fila-checklist td:nth-child(4) { order: 4; }
    .gst-table-cards-mobile .fila-checklist td:nth-child(5) { order: 6; flex: 0 0 auto; }
    .gst-table-cards-mobile .fila-checklist td:nth-child(6) { order: 7; flex: 0 0 auto; }
    .gst-table-cards-mobile .fila-checklist td:nth-child(7) { order: 8; flex: 0 0 auto; }
    .gst-table-cards-mobile .fila-checklist td:nth-child(8) { order: 9; flex: 0 0 auto; margin-left: auto; }

    /* ─────────────────────────────────────────────────────────
       EVENTOS DE PRODUCTO — orden de celdas (8 cols, sin Período)
       1=# (oculto)  2=Producto (título)  3=Tipo  4=Nombre
       5=Modalidad   6=Precio
       ::after (sep, order 10 — override del shared order:5)
       11=Estado (izq)   12=Acc. (der)
    ───────────────────────────────────────────────────────── */

    /* Mover el separador más abajo para dar espacio a las 4 filas de info */
    .gst-table-cards-mobile .fila-evento::after { order: 10; }

    .gst-table-cards-mobile .fila-evento td:nth-child(1) { order: 1; display: none; }

    /* Producto: título con #id, una sola línea truncada */
    .gst-table-cards-mobile .fila-evento td:nth-child(2) {
        order: 2;
        display: flex !important;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        overflow: hidden;
        font-weight: 700;
        font-size: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color) !important;
    }
    .gst-table-cards-mobile .fila-evento td:nth-child(2)::before {
        content: '#' attr(data-id);
        font-size: 0.72rem;
        font-weight: 500;
        color: var(--slate-400);
        margin-bottom: 0.1rem;
    }
    .gst-table-cards-mobile .fila-evento td:nth-child(2) .pe-wrap {
        display: block;
        width: 100%;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }
    .gst-table-cards-mobile .fila-evento td:nth-child(2) .pe-sep  { display: inline !important; }
    .gst-table-cards-mobile .fila-evento td:nth-child(2) .pe-name { display: inline !important; color: var(--dark-text-clr) !important; font-size: 0.9rem; }

    .gst-table-cards-mobile .fila-evento td:nth-child(3) { order: 3; }   /* Tipo       */
    .gst-table-cards-mobile .fila-evento td:nth-child(4) { order: 4; }   /* Nombre     */
    .gst-table-cards-mobile .fila-evento td:nth-child(5) { order: 5; }   /* Modalidad  */
    .gst-table-cards-mobile .fila-evento td:nth-child(6) { order: 6; }   /* Precio     */
    /* ::after (sep): order:10 */
    .gst-table-cards-mobile .fila-evento td:nth-child(7) { order: 11; flex: 0 0 auto; }                /* Estado    */
    .gst-table-cards-mobile .fila-evento td:nth-child(7)::before { display: none; }
    .gst-table-cards-mobile .fila-evento td:nth-child(8) { order: 12; flex: 0 0 auto; margin-left: auto; }  /* Acciones */
    .gst-table-cards-mobile .fila-evento td:nth-child(8)::before { display: none; }

    /* ─────────────────────────────────────────────────────────
       ÓRDENES DE SERVICIO — orden de celdas
       1=Orden (título)  2=Voucher  3=Cliente  4=Soporte
       ::after (sep, order 5)
       6=Estado (badge)  7=Fecha
    ───────────────────────────────────────────────────────── */
    .gst-table-cards-mobile .fila-so td:nth-child(1) { order: 1; font-weight: 700; font-size: 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--border-color) !important; }
    .gst-table-cards-mobile .fila-so td:nth-child(1)::before { display: none; }
    .gst-table-cards-mobile .fila-so td:nth-child(2) { order: 2; }
    .gst-table-cards-mobile .fila-so td:nth-child(3) { order: 3; }
    .gst-table-cards-mobile .fila-so td:nth-child(4) { order: 4; }
    .gst-table-cards-mobile .fila-so td:nth-child(5) { order: 6; flex: 0 0 auto; }
    .gst-table-cards-mobile .fila-so td:nth-child(6) { order: 7; flex: 0 0 auto; margin-left: auto; }

    /* ── # : oculto (refuerzo para cl-td-id sin nth-child) ── */
    .gst-table-cards-mobile .cl-td-id { display: none; }

    /* ── Template / título: encabezado prominente con prefijo #id ── */
    .gst-table-cards-mobile .cl-td-template {
        font-weight: 700;
        font-size: 1rem;
        padding-bottom: 0.5rem;
        margin-bottom: 0.15rem;
        border-bottom: 1px solid var(--border-color) !important;
    }
    .gst-table-cards-mobile .cl-td-template::before {
        content: '#' attr(data-id);
        font-size: 0.72rem;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0;
        color: var(--slate-400);
        margin-right: 0.5rem;
    }

    /* ── Badges (contadores): inline con borde suave ── */
    .gst-table-cards-mobile .cl-td-badge {
        display: inline-flex !important;
        width: auto !important;
        align-items: center;  
        border: 1px solid red !important;
        border-radius: 0.5rem !important;
        padding: 0.2rem 0.5rem !important;
        margin-right: 0.35rem;
        font-size: 0.78rem;
        font-weight: 600;
    }
    .gst-table-cards-mobile .cl-td-badge::before {
        text-transform: none;
        letter-spacing: 0;
        font-size: 0.78rem;
        font-weight: 600;
        display: flex;
        align-items: right;
        justify-content: flex-end;
    }

    /* ── Fecha: solo el valor, sin etiqueta, alineada a la derecha ── */
    .gst-table-cards-mobile .cl-td-fecha {
        font-size: 0.75rem !important;
        color: var(--slate-400) !important;
        white-space: nowrap;
        justify-content: flex-end;
    }
    .gst-table-cards-mobile .cl-td-fecha::before {
        display: none;
    }

    /* ─────────────────────────────────────────────────────────
       ORDEN DE SUMINISTROS — lista principal
       1=# (N° Orden, título)  2=Solicitante  3=Centro de Costo
       ::after (sep, order 4)
       4=Estado (badge)  5=Fecha
    ───────────────────────────────────────────────────────── */
    .gst-table-cards-mobile .fila-orden::after { order: 4; }

    .gst-table-cards-mobile .fila-orden td:nth-child(1) {
        order: 1;
        font-weight: 700;
        font-size: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color) !important;
    }
    .gst-table-cards-mobile .fila-orden td:nth-child(1)::before { display: none; }
    .gst-table-cards-mobile .fila-orden td:nth-child(2) { order: 2; }
    .gst-table-cards-mobile .fila-orden td:nth-child(3) { order: 3; }
    .gst-table-cards-mobile .fila-orden td:nth-child(4) { order: 5; flex: 0 0 auto; }
    .gst-table-cards-mobile .fila-orden td:nth-child(4)::before { display: none; }
    .gst-table-cards-mobile .fila-orden td:nth-child(5) {
        order: 6;
        flex: 0 0 auto;
        margin-left: auto;
        font-size: 0.75rem;
        color: var(--slate-400);
    }
    .gst-table-cards-mobile .fila-orden td:nth-child(5)::before { display: none; }

    /* ─────────────────────────────────────────────────────────
       MOVIMIENTO DE PERSONAL — orden de celdas
       1=# (N° Mov., título)  2=Empleado  3=Tipo  4=Desde  5=Hasta
       ::after (sep, order 6)
       6=Estado (badge)  7=Fecha solicitud
    ───────────────────────────────────────────────────────── */
    .gst-table-cards-mobile .fila-movimiento::after { order: 6; }

    .gst-table-cards-mobile .fila-movimiento td:nth-child(1) {
        order: 1;
        font-weight: 700;
        font-size: 1rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color) !important;
    }
    .gst-table-cards-mobile .fila-movimiento td:nth-child(1)::before { display: none; }
    .gst-table-cards-mobile .fila-movimiento td:nth-child(2) { order: 2; }
    .gst-table-cards-mobile .fila-movimiento td:nth-child(3) { order: 3; }
    .gst-table-cards-mobile .fila-movimiento td:nth-child(4) { order: 4; }
    .gst-table-cards-mobile .fila-movimiento td:nth-child(5) { order: 5; }
    .gst-table-cards-mobile .fila-movimiento td:nth-child(6) { order: 7; flex: 0 0 auto; }
    .gst-table-cards-mobile .fila-movimiento td:nth-child(6)::before { display: none; }
    .gst-table-cards-mobile .fila-movimiento td:nth-child(7) {
        order: 8;
        flex: 0 0 auto;
        margin-left: auto;
        font-size: 0.75rem;
        color: var(--slate-400);
    }
    .gst-table-cards-mobile .fila-movimiento td:nth-child(7)::before { display: none; }

    /* ─────────────────────────────────────────────────────────
       REQUERIMIENTOS DE PAGO — orden de celdas
       Cols: 1=# (RP-num)  2=Solicitante  3=Objeto
             4=Total  5=Estado(badge)  6=Fecha
       Card layout:
         RP-000002                       26/03/2026   ← td:1 (izq) + td:6 (der), order 1
         Solicitante: Dennys Mejia                    ← td:2, order 2
         Objeto: Compra de mascarillas                ← td:3, order 3
         ────────────────────────────────────────     ← ::after sep, order 4
         Total: S/ 4.00                  Entregado   ← td:4 (izq) + td:5 (der), order 5
    ───────────────────────────────────────────────────────── */
    .gst-table-cards-mobile .fila-requerimiento::after { order: 4; }

    /* # (RP-XXXXXX): título izquierdo, comparte fila con fecha */
    .gst-table-cards-mobile .fila-requerimiento td:nth-child(1) {
        order: 1;
        flex: 1 1 auto;
        font-weight: 700;
        font-size: 0.95rem;
        color: var(--primary-color) !important;
        padding-bottom: 0.35rem;
    }
    .gst-table-cards-mobile .fila-requerimiento td:nth-child(1)::before { display: none; }

    /* Solicitante: label + valor, ancho completo */
    .gst-table-cards-mobile .fila-requerimiento td:nth-child(2) { order: 2; }

    /* Objeto: label + valor, ancho completo */
    .gst-table-cards-mobile .fila-requerimiento td:nth-child(3) { order: 3; }

    /* Total: izquierdo tras separador */
    .gst-table-cards-mobile .fila-requerimiento td:nth-child(4) {
        order: 5;
        flex: 1 1 auto;
        font-weight: 600;
    }

    /* Estado (badge): derecho tras separador, sin etiqueta */
    .gst-table-cards-mobile .fila-requerimiento td:nth-child(5) {
        order: 5;
        flex: 0 0 auto;
    }
    .gst-table-cards-mobile .fila-requerimiento td:nth-child(5)::before { display: none; }

    /* Fecha: derecha en fila de título, pequeña y gris, sin etiqueta */
    .gst-table-cards-mobile .fila-requerimiento td:nth-child(6) {
        order: 1;
        flex: 0 0 auto;
        font-size: 0.75rem;
        color: var(--slate-400) !important;
        white-space: nowrap;
        padding-bottom: 0.35rem;
    }
    .gst-table-cards-mobile .fila-requerimiento td:nth-child(6)::before { display: none; }

    /* ─────────────────────────────────────────────────────────
       ITEMS DE ORDEN DE SUMINISTROS — orden de celdas
       1=# (oculto)  2=Codigo  3=Descripcion (título)
       4=Cant.Sol.   5=Unidad
       ::after (sep, order 5)
       6=Cant.Apr.   7=Obs.Sol.   8=Obs.Apr.
    ───────────────────────────────────────────────────────── */
    .gst-table-cards-mobile .fila-supply-item td:nth-child(1) { order: 1; display: none; }
    .gst-table-cards-mobile .fila-supply-item td:nth-child(3) {
        order: 2;
        font-weight: 700;
        font-size: 0.95rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid var(--border-color) !important;
    }
    .gst-table-cards-mobile .fila-supply-item td:nth-child(3)::before { display: none; }
    .gst-table-cards-mobile .fila-supply-item td:nth-child(2) { order: 3; }
    .gst-table-cards-mobile .fila-supply-item td:nth-child(4) { order: 4; }
    .gst-table-cards-mobile .fila-supply-item td:nth-child(5) { order: 5; }
    /* ::after separator: order 5 default */
    .gst-table-cards-mobile .fila-supply-item::after { order: 6; }
    .gst-table-cards-mobile .fila-supply-item td:nth-child(6) { order: 7; }
    .gst-table-cards-mobile .fila-supply-item td:nth-child(7) { order: 8; }
    .gst-table-cards-mobile .fila-supply-item td:nth-child(8) { order: 9; }

    /* ─────────────────────────────────────────────────────────
       ITEMS DE REQUERIMIENTO DE PAGO — orden de celdas
       1=# (oculto)  2=Descripcion (título)
       ::after (sep, order 3)
       4=Importe (izq)  5=Partida (der)
    ───────────────────────────────────────────────────────── */
    .gst-table-cards-mobile .fila-rp-item td:nth-child(1) { order: 1; display: none; }
    .gst-table-cards-mobile .fila-rp-item td:nth-child(2) {
        order: 2;
        font-weight: 600;
        font-size: 0.9rem;
        padding-bottom: 0.4rem;
        border-bottom: 1px solid var(--border-color) !important;
    }
    .gst-table-cards-mobile .fila-rp-item td:nth-child(2)::before { display: none; }
    .gst-table-cards-mobile .fila-rp-item::after { order: 3; }
    .gst-table-cards-mobile .fila-rp-item td:nth-child(3) {
        order: 4;
        flex: 1 1 auto;
        font-weight: 600;
    }
    .gst-table-cards-mobile .fila-rp-item td:nth-child(4) {
        order: 4;
        flex: 0 0 auto;
        margin-left: auto;
    }

    /* ── Dark mode ── */
    body.dark-mode .gst-table-cards-mobile .fila-checklist,
    body.dark-mode .gst-table-cards-mobile .fila-evento,
    body.dark-mode .gst-table-cards-mobile .fila-so {
        background: var(--bg-primary);
        border-color: var(--border-color);
    }
    body.dark-mode .gst-table-cards-mobile .fila-supply-item,
    body.dark-mode .gst-table-cards-mobile .fila-orden,
    body.dark-mode .gst-table-cards-mobile .fila-requerimiento,
    body.dark-mode .gst-table-cards-mobile .fila-rp-item {
        background: var(--bg-primary);
        border-color: var(--border-color);
    }
    body.dark-mode .gst-table-cards-mobile .fila-checklist:hover,
    body.dark-mode .gst-table-cards-mobile .fila-evento:hover,
    body.dark-mode .gst-table-cards-mobile .fila-so:hover,
    body.dark-mode .gst-table-cards-mobile .fila-supply-item:hover,
    body.dark-mode .gst-table-cards-mobile .fila-orden:hover,
    body.dark-mode .gst-table-cards-mobile .fila-requerimiento:hover,
    body.dark-mode .gst-table-cards-mobile .fila-rp-item:hover {
        box-shadow: 0 4px 16px rgba(0,0,0,0.35);
    }
}