/* ═══════════════════════════════════════════════════════════════
       DetalleLineasGrid.razor.css
       Paleta: cobalt blue (#1D4ED8 / #0F3494 / #E8EEF9), sin :root vars,
       valores directos en cada regla, igual a tu sistema de diseño actual.
       ═══════════════════════════════════════════════════════════════ */

    .vg-wrap {
        width: 100%;
        border-radius: 5px;
        border: 1px solid #e5e7eb;
        background: #ffffff;
        overflow: hidden;
    }

    .vg-scroll {
        max-height: 62vh;
        overflow: auto;
        scrollbar-width: thin;
    }

    /* ── Grid base: header y filas comparten el mismo grid-template-columns
       (inyectado inline vía --vg-cols), así jamás se desalinean. ── */
    .vg-grid {
        display: grid;
        min-width: 980px; /* fuerza scroll horizontal antes de aplastar columnas */
    }

    .vg-row {
        display: grid;
        grid-template-columns: subgrid;
        grid-column: 1 / -1;
        align-items: center;
    }

    /* Fallback para navegadores sin subgrid: cada fila repite el template */
    @supports not (grid-template-columns: subgrid) {
        .vg-row

    {
        grid-template-columns: inherit;
    }

    }

    .vg-head {
        position: sticky;
        top: 0;
        z-index: 5;
        background: #E8EEF9;
        border-bottom: 2px solid #1D4ED8;
    }

        .vg-head .vg-h {
            padding: 10px 8px;
            font-size: 11px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .03em;
            color: #0F3494;
            white-space: nowrap;
        }

    .vg-cell {
        padding: 10px 8px;
        font-size: 13px;
        color: #1f2937;
        min-width: 0;
        overflow: hidden;
    }

    .vg-data {
        border-bottom: 1px solid #f0f2f5;
        cursor: pointer;
        transition: background-color .12s ease;
    }

        .vg-data:hover {
            background: #F5F8FE;
        }

    .vg-activa {
        background: #E8EEF9;
        box-shadow: inset 3px 0 0 #1D4ED8;
    }

    .vg-warn {
        background: #FFF8EC;
    }

    .vg-ar {
        text-align: right;
        justify-self: end;
    }

    .vg-ac {
        text-align: center;
        justify-self: center;
    }

    .vg-cc {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .vg-al {
        text-align: left;
    }

    .vg-mono {
        font-family: var(--font-mono, ui-monospace, monospace);
        font-size: 11px;
        font-variant-numeric: tabular-nums;
    }

    .vg-total {
        font-weight: 700;
        color: #0F3494;
    }

    .mono-r {
        font-family: "JetBrains Mono", "Courier New", monospace !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        text-align: right !important;
        display: block !important;
    }

        .mono-r.val-dscto {
            color: #dc2626 !important;
        }

        .mono-r.val-igv {
            color: #b45309 !important;
        }

        .mono-r.val-total {
            color: #15803d !important;
            font-weight: 700 !important;
        }
    .vg-codigo {
        font-family: var(--font-mono, ui-monospace, monospace);
        font-size: 11px;
        font-weight: 600;
        color: #1D4ED8;
    }

    /* ── Semáforo ── */
    .vg-semaforo {
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
    }

    .vg-sem-ok {
        background: #16a34a;
    }

    .vg-sem-warn {
        background: #f59e0b;
    }

    .vg-sem-bad {
        background: #dc2626;
        animation: pulsoRojo 1.8s ease-in-out infinite !important;
    }

    .vg-sem-neutro {
        background: #cbd5e1;
    }

    /* ── Descripción ── */
    .vg-desc-cell {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

    .vg-desc-text {
        font-size: 13px;
        font-weight: 500;
        line-height: 1.3;
    }

    .vg-input-desc {
        width: 100%;
        border: 1px solid #d7dee9;
        border-radius: 5px;
        padding: 5px 7px;
        font-size: 13px;
    }

    .vg-codes {
        /* display: flex;
        gap: 5px;
        flex-wrap: wrap; */
        display: flex !important;
        gap: 8px !important;
        margin-top: 2px !important;
    }

    .vg-chip-code {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 10px !important;
        color: #94a3b8 !important;
        font-family: "JetBrains Mono", "Courier New", monospace !important;
        background: #F1F5FB;    
        /* border: 1px solid #dbe4f3;
        border-radius: 5px; */
        padding: 2px 8px;
    }

    
    .vg-chip-empty {
        background: #fff7ed !important;
        border-color: #fb923c !important;
        color: #9a3412 !important;
    }

    
    .vg-chip-action {
        /* border: none;
        background: #1D4ED8;
        color: #fff;
        width: 15px;
        height: 15px;
        border-radius: 50%;
        font-size: 9px;
        line-height: 1;
        cursor: pointer; */

        border: 1px solid #93c5fd !important;
        background: #eff6ff !important;
        color: #1e3a8a !important;
        font-weight: 800 !important;
        font-size: 0.65rem !important;
        padding: 1px 6px !important;
        border-radius: 5px !important;
        cursor: pointer !important;
        line-height: 1 !important;
    }

    .vg-warn-btn {
        background: #f59e0b;
    }

    /* ── Acciones (series / lotes / precios) ── */
    .vg-acciones-cell {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        align-items: center;
    }

    .vg-btn-min {
        border: 1px solid #dbe4f3;
        background: #fff;
        color: #1D4ED8;
        border-radius: 5px;
        font-size: 10px;
        font-weight: 700;
        padding: 3px 6px;
        cursor: pointer;
    }

        .vg-btn-min:hover {
            background: #E8EEF9;
        }

    .vg-trigger {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        border: 1px solid transparent;
        border-radius: 999px;
        font-size: 10.5px;
        font-weight: 600;
        padding: 3px 8px;
        cursor: pointer;
        white-space: nowrap;
    }

    .vg-trigger-ok {
        background: #EAF7EF;
        color: #16a34a;
        border-color: #cdeedb;
    }

    .vg-trigger-warn {
        background: #FFF3E0;
        color: #b45309;
        border-color: #ffe1b3;
    }

    /* ── Inputs numéricos ── */
    .vg-input-num {
        width: 100%;
        max-width: 90px;
        border: 1px solid #d7dee9;
        border-radius: 5px;
        padding: 5px 6px;
        font-size: 11px;
        text-align: right;
        font-variant-numeric: tabular-nums;
    }

        .vg-input-num:focus,
        .vg-input-desc:focus {
            outline: 2px solid #1D4ED8;
            outline-offset: 1px;
            border-color: #1D4ED8;
        }

    .vg-input-sm {
        max-width: 58px;
    }

    /* ── Afectación ── */
    .vg-afect-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border-radius: 5px;
        font-size: 11px;
        font-weight: 800;
        cursor: pointer;
    }

    .vg-afect-g {
        background: #E8EEF9;
        color: #1D4ED8;
    }

    .vg-afect-e {
        background: #EAF7EF;
        color: #16a34a;
    }

    .vg-afect-i {
        background: #F3F4F6;
        color: #4b5563;
    }

    .vg-afect-x {
        background: #FDEBEE;
        color: #dc2626;
    }

    /* ── Seguimiento (Recibido / Pendiente / Estado) ──
         Solo aparece cuando Config.MostrarColumnaSeguimiento = true
         (ej. Orden de Compra editando una orden ya guardada). ── */
    .vg-track-badge {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 48px;
        padding: 3px 6px;
        border-radius: 5px;
        font-weight: 700;
        font-size: 11px;
        border: 1px solid transparent;
        white-space: nowrap;
    }

    .vg-track-recibido {
        background: #eef7ff;
        color: #0f4c81;
        border-color: #cfe4ff;
    }

    .vg-track-pendiente {
        background: #fff8e8;
        color: #8a5a00;
        border-color: #ffe0a3;
    }

    .vg-track-estado {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 2px 8px;
        border-radius: 5px;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
    }

        .vg-track-estado.badge-success { background: #2e7d32; color: #fff; }
        .vg-track-estado.badge-warning { background: #f9a825; color: #000; }
        .vg-track-estado.badge-danger { background: #c62828; color: #fff; }
        .vg-track-estado.badge-desconocido { background: #F3F4F6; color: #6B7280; border: 1px solid #D1D5DB; }

    .vg-track-bar {
        width: 64px;
        height: 6px;
        background: #e6e6e6;
        border-radius: 4px;
        margin: 3px auto 2px;
        overflow: hidden;
    }

    .vg-track-bar-fill {
        height: 100%;
        transition: width .3s ease;
    }

        .vg-track-bar-fill.badge-success { background: #2e7d32; }
        .vg-track-bar-fill.badge-warning { background: #f9a825; }
        .vg-track-bar-fill.badge-danger { background: #c62828; }
        .vg-track-bar-fill.badge-desconocido { background: #9CA3AF; }

    .vg-track-bar-text {
        font-size: 10px;
        color: #555;
        text-align: center;
    }

    /* ── Botón Acciones IA (opcional, Config.MostrarAccionIA) ── */
    .vg-btn-ia {
        color: #92400e;
        border-color: #fde68a;
        background: #f8fafc;
    }

        .vg-btn-ia:hover {
            background: #fef3c7;
        }

    /* ── Selector de lista de VENTA (opcional, Config.MostrarSelectorListaVenta) ── */
    .vg-precio-cell-wrap {
        display: flex;
        flex-direction: column;
        gap: 3px;
        align-items: flex-end;
        width: 100%;
    }

    .vg-precio-cell-input {
        display: flex;
        align-items: center;
        gap: 4px;
        flex-wrap: wrap;
        justify-content: flex-end;
        width: 100%;
    }

    .vg-lista-tag {
        font-size: 10px;
        font-weight: 700;
        border-radius: 4px;
        padding: 2px 7px;
        border: 1px solid;
        white-space: nowrap;
    }

    .vg-sin-lista {
        background: #f3f4f6;
        color: #6b7280;
        border-color: #e5e7eb;
    }

    .vg-btn-cambiar-lista {
        background: #f8fafc;
        color: #64748b;
        border: 1px solid #e2e8f0;
        border-radius: 5px;
        padding: 2px 7px;
        font-size: 11px;
        cursor: pointer;
        transition: all .15s;
        line-height: 1.4;
    }

        .vg-btn-cambiar-lista:hover {
            background: #dbeafe;
            color: #1d4ed8;
            border-color: #93c5fd;
        }

    .vg-lista-badges-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        justify-content: flex-end;
    }

    .vg-lista-badge {
        border-radius: 5px;
        padding: 3px 8px;
        font-size: 10.5px;
        font-weight: 700;
        cursor: pointer;
        border: 1.5px solid;
        transition: all .15s;
        white-space: nowrap;
        line-height: 1.3;
    }

        .vg-lista-badge:hover {
            filter: brightness(.93);
            transform: scale(1.03);
        }

    .vg-sin-precio-text {
        font-size: 10.5px;
        color: #94a3b8;
        font-style: italic;
    }

    /* ── Eliminar ── */
    .vg-btn-del {
        border: none;
        background: transparent;
        color: #dc2626;
        cursor: pointer;
        font-size: 13px;
        padding: 4px;
    }

        .vg-btn-del:hover {
            color: #991b1b;
        }

    .vg-btn-del-disabled {
        color: #d1d5db;
        cursor: not-allowed;
        font-size: 13px;
    }

    /* ── Sub-fila: series / lotes / panel de precios ──
       Va en su propia fila del grid, ocupando TODAS las columnas
       (grid-column: 1 / -1), por eso nunca se sobrepone a Cantidad. ── */
    .vg-subrow {
        grid-column: 1 / -1;
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 8px 12px 12px 40px;
        background: #FAFBFD;
        border-bottom: 1px solid #f0f2f5;
        border-left: 3px solid #1D4ED8;
        cursor: default;
    }

    .vg-chipline {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        align-items: center;
    }

    .vg-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        padding: 4px 8px;
        border-radius: 5px;
        background: #fff;
        border: 1px solid #e2e8f5;
    }

    .vg-chip-serie {
        color: #0F3494;
    }

    .vg-chip-lote {
        color: #0f5132;
    }

    .vg-chip-sub {
        color: #6b7280;
        font-size: 10.5px;
    }

    .vg-chip-x {
        border: none;
        background: transparent;
        color: #9ca3af;
        cursor: pointer;
        font-size: 13px;
        line-height: 1;
    }

        .vg-chip-x:hover {
            color: #dc2626;
        }

    .vg-alert {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        font-size: 10.5px;
        font-weight: 600;
        padding: 3px 8px;
        border-radius: 5px;
    }

    .vg-alert-ok {
        background: #EAF7EF;
        color: #16a34a;
    }

    .vg-alert-warn {
        background: #FFF3E0;
        color: #b45309;
    }

    .vg-alert-text {
        font-size: 11.5px;
        color: #b45309;
    }

    .vg-precio-panel {
        background: #fff;
        border: 1px solid #e2e8f5;
        border-radius: 5px;
        padding: 8px 10px;
    }

    .vg-precio-header {
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        color: #0F3494;
        margin-bottom: 6px;
    }

    .vg-precio-fields {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        align-items: center;
    }

        .vg-precio-fields label {
            display: flex;
            flex-direction: column;
            gap: 3px;
            font-size: 10.5px;
            color: #6b7280;
        }

    .vg-margen-ok {
        color: #16a34a;
        font-weight: 700;
    }

    .vg-margen-low {
        color: #dc2626;
        font-weight: 700;
    }

    /* ── Tabla multi-lista / lista única dentro del panel de precios ── */
    .vg-multilista {
        width: 100%;
        border-collapse: collapse;
    }

        .vg-multilista thead th {
            text-align: right;
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: .02em;
            color: #6b7280;
            padding: 4px 8px;
            border-bottom: 1px solid #e2e8f5;
        }

        .vg-multilista .vg-ml-l {
            text-align: left;
        }

        .vg-multilista tbody td {
            padding: 5px 8px;
            text-align: right;
            font-size: 12px;
            border-bottom: 1px solid #f3f4f6;
        }

        .vg-multilista tbody tr:last-child td {
            border-bottom: none;
        }

    .vg-ml-nom {
        text-align: left;
        font-weight: 600;
        color: #0F3494;
    }

    .vg-ml-hint {
        color: #6b7280;
    }

    .vg-ml-row-warn {
        background: #FDEBEE;
    }

    .vg-multilista .vg-input-sm {
        max-width: 78px;
    }

    .vg-mon-tag {
        display: inline-block;
        font-size: 10px;
        font-weight: 700;
        padding: 2px 7px;
        border-radius: 5px;
        background: #E8EEF9;
        color: #1D4ED8;
    }

    /* ── Vacío ── */
    .vg-empty {
        padding: 32px;
        text-align: center;
        color: #9ca3af;
        font-size: 13px;
        line-height: 1.6;
    }

    .vg-empty-icon {
        font-size: 32px;
        margin-bottom: 8px;
    }

    /* ═══════════════════════════════════════════════════════════════
       RESPONSIVE — debajo de 900px se colapsa a tarjetas apiladas:
       más legible en tablet/celular que forzar scroll horizontal.
       ═══════════════════════════════════════════════════════════════ */
    @media (max-width: 900px) {
        .vg-scroll

    {
        overflow: visible;
        max-height: none;
    }

    .vg-grid {
        display: flex;
        flex-direction: column;
        min-width: 0;
    }

    .vg-head {
        display: none;
    }

    .vg-row.vg-data {
        display: grid;
        grid-template-columns: 24px 1fr auto;
        grid-template-areas:
            "sem desc del"
            "sem acc  acc"
            "sem cant precio"
            "sem dscto subtotal"
            "sem igv total";
        gap: 6px 10px;
        padding: 12px;
        border: 1px solid #eef1f5;
        border-radius: 5px;
        margin: 8px;
    }

    .vg-cell {
        padding: 0;
    }

        .vg-cell:nth-child(1) {
            grid-area: sem;
        }

        .vg-cell:nth-child(2) {
            display: none;
        }
    /* código se ve en el chip de descripción */
    .vg-desc-cell {
        grid-area: desc;
    }

    .vg-acciones-cell {
        grid-area: acc;
    }

    .vg-ar, .vg-ac {
        justify-self: start;
        text-align: left;
    }

    .vg-subrow {
        grid-column: 1 / -1;
        border-left: none;
        border-top: 2px solid #1D4ED8;
        padding: 10px 4px 4px;
        margin-top: 6px;
    }

    }