/* ════════════════════════════════════════════════════════════════════
       RegistroCompraEdicionLineas.razor.css
       Paleta extraída del proyecto:
         primario      #2f65c4 / hover #1d4ed8
         oscuro        #0f172a / #1a2740
         texto medio   #5a6a80 / #64748b / #6b7280
         neutro borde  #e2e8f0 / #dde3ed
         neutro fondo  #f8fafc / #eef3fc
         success       #15803d / #1a7a4a / fondo #e8f7ef / #dcfce7
         warning       #b45309 / fondo #fef3c7 / #fff8e6
         danger        #dc2626 / #b91c1c / fondo #fee2e2
         info          #1e40af / fondo #dbeafe / borde #93c5fd
       ════════════════════════════════════════════════════════════════════ */

    /* ── OVERLAY PRINCIPAL ─────────────────────────────────────────────── */
    .rce-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: var(--z-modal); /* D-51 (era 1200) */
        display: flex;
        align-items: stretch;
        justify-content: flex-end;
        animation: rce-fadein .18s ease;
    }

    @keyframes rce-fadein {
        from

    {
        opacity: 0;
    }

    to {
        opacity: 1;
    }

    }

    /* ── PANEL LATERAL (slide desde la derecha) ─────────────────────────── */
    .rce-panel {
        width: min(96vw, 960px);
        background: #ffffff;
        border-left: 1px solid #e2e8f0;
        box-shadow: -4px 0 24px rgba(15,23,42,.12);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: rce-slidein .22s cubic-bezier(.25,.46,.45,.94);
    }

    @keyframes rce-slidein {
        from

    {
        transform: translateX(40px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }

    }

    /* ── HEADER ──────────────────────────────────────────────────────────── */
    .rce-header {
        padding: 10px 16px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        flex-shrink: 0;
    }

    .rce-header-left {
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .rce-header-right {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .rce-titulo {
        font-size: 13px;
        font-weight: 800;
        color: #0f172a;
        letter-spacing: .03em;
    }

    /* Chip de estado ciclo (ACTIVO / CERRADO) */
    .rce-doc-ref {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 5px;
        background: #eef3fc;
        color: #2f65c4;
        border: 1px solid #b5cfee;
        letter-spacing: .04em;
    }

    /* Badge de estado financiero */
    .rce-estado-fin {
        font-size: 10px;
        font-weight: 700;
        padding: 2px 8px;
        border-radius: 5px;
        border: 1px solid transparent;
    }

    .rce-fin-badge-pagado {
        background: #dcfce7;
        color: #15803d;
        border-color: #86efac;
    }

    .rce-fin-badge-parcial {
        background: #fef9c3;
        color: #b45309;
        border-color: #fde047;
    }

    .rce-fin-badge-pendiente {
        background: #fee2e2;
        color: #dc2626;
        border-color: #fca5a5;
    }

    /* Botón cerrar X */
    .rce-btn-close {
        width: 28px;
        height: 28px;
        border: none;
        background: transparent;
        cursor: pointer;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #64748b;
        font-size: 14px;
        transition: background .15s, color .15s;
    }

        .rce-btn-close:hover {
            background: #fee2e2;
            color: #dc2626;
        }

    /* ── BOTONES DE HEADER ──────────────────────────────────────────────── */
    .rce-btn {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        padding: 5px 12px;
        border-radius: 6px;
        font-size: 12px;
        font-weight: 600;
        cursor: pointer;
        border: 1px solid transparent;
        transition: background .15s, opacity .15s;
        white-space: nowrap;
    }

        .rce-btn:disabled {
            opacity: .5;
            cursor: not-allowed;
        }

    .rce-btn-primary {
        background: #2f65c4;
        color: #fff;
        border-color: #2f65c4;
    }

        .rce-btn-primary:hover:not(:disabled) {
            background: #1d4ed8;
            border-color: #1d4ed8;
        }

    .rce-btn-secondary {
        background: #f8fafc;
        color: #374151;
        border-color: #e2e8f0;
    }

        .rce-btn-secondary:hover:not(:disabled) {
            background: #e2e8f0;
        }

    .rce-btn-success {
        background: #15803d;
        color: #fff;
        border-color: #15803d;
    }

        .rce-btn-success:hover:not(:disabled) {
            background: #1a7a4a;
        }

    .rce-btn-warn {
        background: #fef3c7;
        color: #b45309;
        border-color: #fde047;
    }

        .rce-btn-warn:hover:not(:disabled) {
            background: #fde68a;
        }

    .rce-btn-danger {
        background: #dc2626;
        color: #fff;
        border-color: #dc2626;
    }

        .rce-btn-danger:hover:not(:disabled) {
            background: #b91c1c;
        }

    /* ── BANNER DE BLOQUEO GENERAL ──────────────────────────────────────── */
    .rce-banner {
        padding: 9px 16px;
        font-size: 12px;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
    }

    .rce-banner-cerrado {
        background: #fef9c3;
        color: #b45309;
        border-bottom: 1px solid #fde047;
    }

    /* ── RESUMEN FINANCIERO ─────────────────────────────────────────────── */
    .rce-fin-strip {
        padding: 8px 16px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 20px;
        flex-wrap: wrap;
        flex-shrink: 0;
    }

    .rce-fin-item {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }

    .rce-fin-label {
        font-size: 9.5px;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: .05em;
    }

    .rce-fin-val {
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
        font-family: 'Courier New', monospace;
    }

    .rce-fin-abono {
        color: #15803d;
    }

    .rce-fin-saldo {
        color: #b45309;
    }

    .rce-fin-pagado {
        color: #15803d;
    }

    .rce-fin-aviso {
        font-size: 11px;
        color: #b45309;
        background: #fff8e6;
        border: 1px solid #fde047;
        border-radius: 6px;
        padding: 3px 10px;
        display: flex;
        align-items: center;
        gap: 5px;
    }

    /* ── GRILLA DE LÍNEAS ──────────────────────────────────────────────── */
    .rce-grid-wrap {
        flex: 1;
        overflow: auto;
        padding: 0;
    }

    .rce-grid {
        width: 100%;
        border-collapse: collapse;
        font-size: 12px;
    }

        .rce-grid thead th {
            position: sticky;
            top: 0;
            background: #f8fafc;
            border-bottom: 2px solid #e2e8f0;
            padding: 7px 10px;
            font-size: 10.5px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: .04em;
            white-space: nowrap;
            z-index: 10;
        }

        .rce-grid tbody tr {
            border-bottom: 1px solid #f1f5f9;
            transition: background .1s;
        }

            .rce-grid tbody tr:hover {
                background: #fafcff;
            }

        .rce-grid tbody td {
            padding: 8px 10px;
            vertical-align: middle;
        }

    /* Fila bloqueada: fondo sutil más oscuro */
    .rce-row-locked {
        background: #f8fafc !important;
        opacity: .85;
    }

    /* ── CANDADOS / ICONOS DE ESTADO ─────────────────────────────────── */
    .rce-candado {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        border-radius: 5px;
        font-size: 10px;
        cursor: default;
    }

    .rce-candado-cerrado {
        background: #f3f4f6;
        color: #9ca3af;
    }

    .rce-candado-oc {
        background: #dbeafe;
        color: #1e40af;
    }

    .rce-candado-warn {
        background: #fef3c7;
        color: #b45309;
    }

    .rce-candado-libre {
        background: #dcfce7;
        color: #15803d;
    }

    /* ── CHIPS DE RESTRICCIÓN EN LA FILA ────────────────────────────── */
    .rce-chip {
        display: inline-block;
        font-size: 9px;
        font-weight: 700;
        padding: 1px 5px;
        border-radius: 4px;
        margin-left: 4px;
        vertical-align: middle;
        letter-spacing: .04em;
    }

    .rce-chip-oc {
        background: #dbeafe;
        color: #1e40af;
        border: 1px solid #93c5fd;
    }

    .rce-chip-warn {
        background: #fef3c7;
        color: #b45309;
        border: 1px solid #fde047;
    }

    /* ── DESCRIPCIÓN ─────────────────────────────────────────────────── */
    .rce-desc {
        font-size: 12px;
        color: #1a2740;
        font-weight: 500;
        line-height: 1.35;
    }

    .rce-codigo {
        font-family: 'Courier New', monospace;
        font-size: 11px;
        font-weight: 600;
        color: #2f65c4;
    }

    /* ── BOTONES DE ACCIÓN POR LÍNEA ─────────────────────────────────── */
    .rce-acciones-linea {
        display: flex;
        gap: 4px;
        align-items: center;
        justify-content: center;
        flex-wrap: nowrap;
    }

    .rce-mini {
        width: 24px;
        height: 24px;
        border-radius: 5px;
        border: 1px solid transparent;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        cursor: pointer;
        transition: background .15s, transform .1s;
    }

        .rce-mini:active {
            transform: scale(.9);
        }

    .rce-mini-add {
        background: #dcfce7;
        color: #15803d;
        border-color: #86efac;
    }

        .rce-mini-add:hover {
            background: #bbf7d0;
        }

    .rce-mini-edit {
        background: #dbeafe;
        color: #1e40af;
        border-color: #93c5fd;
    }

        .rce-mini-edit:hover {
            background: #bfdbfe;
        }

    .rce-mini-info {
        background: #f0f4fa;
        color: #2f65c4;
        border-color: #b5cfee;
    }

        .rce-mini-info:hover {
            background: #eef3fc;
        }

    .rce-mini-reproceso {
        background: #fef3c7;
        color: #b45309;
        border-color: #fde047;
        cursor: help;
        width: 24px;
        height: 24px;
        border-radius: 5px;
        border: 1px solid #fde047;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    /* ── INPUTS EN GRILLA ────────────────────────────────────────────── */
    .rce-num-input {
        width: 72px;
        height: 26px;
        border: 1px solid #dde3ed;
        border-radius: 5px;
        padding: 0 6px;
        font-size: 12px;
        text-align: right;
        background: #fff;
        color: #0f172a;
        outline: none;
        transition: border-color .15s;
    }

        .rce-num-input:focus {
            border-color: #2f65c4;
            box-shadow: 0 0 0 2px #eef3fc;
        }

    .rce-num-ro {
        font-family: 'Courier New', monospace;
        font-size: 12px;
        font-weight: 600;
        color: #5a6a80;
    }

    .rce-total-linea {
        font-family: 'Courier New', monospace;
        font-size: 12px;
        font-weight: 700;
        color: #0f172a;
    }

    /* ── BOTÓN ELIMINAR ──────────────────────────────────────────────── */
    .rce-btn-del {
        width: 26px;
        height: 26px;
        border: 1px solid #fca5a5;
        background: #fee2e2;
        color: #dc2626;
        border-radius: 5px;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
        transition: background .15s;
    }

        .rce-btn-del:hover {
            background: #fecaca;
        }

    .rce-btn-del-dis {
        width: 26px;
        height: 26px;
        border: 1px solid #e5e7eb;
        background: #f9fafb;
        color: #d1d5db;
        border-radius: 5px;
        cursor: not-allowed;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }

    /* ── FOOTER ──────────────────────────────────────────────────────── */
    .rce-footer {
        padding: 10px 16px;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        flex-shrink: 0;
        flex-wrap: wrap;
    }

    .rce-footer-aviso {
        font-size: 11px;
        color: #64748b;
        display: flex;
        align-items: center;
        gap: 5px;
        flex: 1;
    }

    .rce-footer-btns {
        display: flex;
        gap: 8px;
    }

    /* ── LOADING / ERROR / EMPTY ─────────────────────────────────────── */
    .rce-loading,
    .rce-error,
    .rce-empty {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 40px 20px;
        font-size: 13px;
        color: #64748b;
        flex: 1;
    }

    .rce-error {
        color: #dc2626;
    }

    /* ═══════════════════════════════════════════════════════════════════
       MODALES SECUNDARIOS (aumentar, corregir, trazabilidad, confirmación)
       ═══════════════════════════════════════════════════════════════════ */
    .rce-sub-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,.55);
        z-index: var(--z-modal-2); /* D-51 (era 1300) */
        display: flex;
        align-items: center;
        justify-content: center;
        animation: rce-fadein .15s ease;
    }

    .rce-sub-modal {
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 8px 40px rgba(15,23,42,.18);
        width: min(94vw, 480px);
        display: flex;
        flex-direction: column;
        overflow: hidden;
        animation: rce-popin .18s cubic-bezier(.34,1.56,.64,1);
    }

    .rce-sub-modal-lg {
        width: min(96vw, 720px);
        max-height: 80vh;
    }

    .rce-sub-modal-sm {
        width: min(94vw, 380px);
    }

    @keyframes rce-popin {
        from

    {
        transform: scale(.92);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }

    }

    /* Header sub-modal */
    .rce-sub-header {
        padding: 12px 16px;
        background: #f8fafc;
        border-bottom: 1px solid #e2e8f0;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 13px;
        font-weight: 700;
        color: #0f172a;
    }

    .rce-sub-header-warn {
        background: #fff8e6;
        border-bottom-color: #fde047;
        color: #b45309;
    }

    .rce-sub-header-danger {
        background: #fee2e2;
        border-bottom-color: #fca5a5;
        color: #dc2626;
    }

    .rce-btn-close-sm {
        margin-left: auto;
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 14px;
        color: #94a3b8;
        width: 24px;
        height: 24px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .rce-btn-close-sm:hover {
            background: #fee2e2;
            color: #dc2626;
        }

    /* Body sub-modal */
    .rce-sub-body {
        padding: 16px;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .rce-sub-aviso {
        padding: 8px 12px;
        border-radius: 6px;
        font-size: 11.5px;
        font-weight: 500;
        display: flex;
        align-items: flex-start;
        gap: 7px;
        background: #dbeafe;
        color: #1e40af;
        border: 1px solid #93c5fd;
        line-height: 1.45;
    }

    .rce-sub-aviso-neutral {
        background: #f0f4fa;
        color: #2f65c4;
        border-color: #b5cfee;
    }

    .rce-sub-aviso-danger {
        background: #fee2e2;
        color: #dc2626;
        border-color: #fca5a5;
    }

    .rce-sub-field {
        display: flex;
        flex-direction: column;
        gap: 4px;
    }

        .rce-sub-field label {
            font-size: 11px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

    .rce-sub-val {
        font-size: 12px;
        font-weight: 600;
        color: #1a2740;
    }

    .rce-sub-hint {
        font-size: 10px;
        color: #94a3b8;
    }

    .rce-text-input {
        height: 30px;
        border: 1px solid #dde3ed;
        border-radius: 6px;
        padding: 0 10px;
        font-size: 12px;
        color: #0f172a;
        outline: none;
        transition: border-color .15s;
    }

        .rce-text-input:focus {
            border-color: #2f65c4;
            box-shadow: 0 0 0 2px #eef3fc;
        }

    .rce-date-input {
        height: 30px;
        border: 1px solid #dde3ed;
        border-radius: 6px;
        padding: 0 8px;
        font-size: 12px;
        color: #0f172a;
        outline: none;
    }

        .rce-date-input:focus {
            border-color: #2f65c4;
        }

    .rce-textarea {
        border: 1px solid #dde3ed;
        border-radius: 6px;
        padding: 6px 10px;
        font-size: 12px;
        color: #0f172a;
        outline: none;
        resize: vertical;
        font-family: 'Courier New', monospace;
        transition: border-color .15s;
    }

        .rce-textarea:focus {
            border-color: #2f65c4;
            box-shadow: 0 0 0 2px #eef3fc;
        }

    /* Footer sub-modal */
    .rce-sub-footer {
        padding: 10px 16px;
        background: #f8fafc;
        border-top: 1px solid #e2e8f0;
        display: flex;
        justify-content: flex-end;
        gap: 8px;
    }

    /* ── TABS (corregir serie / lote) ───────────────────────────────────── */
    .rce-tab-wrap {
        display: flex;
        gap: 4px;
        border-bottom: 1px solid #e2e8f0;
        padding-bottom: 0;
        margin-bottom: 4px;
    }

    .rce-tab {
        padding: 5px 14px;
        border: 1px solid transparent;
        border-bottom: none;
        border-radius: 6px 6px 0 0;
        background: transparent;
        font-size: 12px;
        font-weight: 600;
        color: #64748b;
        cursor: pointer;
        transition: background .15s, color .15s;
    }

        .rce-tab.active {
            background: #fff;
            color: #2f65c4;
            border-color: #e2e8f0;
            border-bottom-color: #fff;
            margin-bottom: -1px;
        }

        .rce-tab:hover:not(.active) {
            background: #f1f5f9;
        }

    /* ── TRAZABILIDAD ───────────────────────────────────────────────────── */
    .traza-bloque {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        overflow: hidden;
        margin-bottom: 8px;
    }

    .traza-header {
        background: #f8fafc;
        padding: 7px 12px;
        display: flex;
        align-items: center;
        gap: 10px;
        flex-wrap: wrap;
        border-bottom: 1px solid #e2e8f0;
    }

    .traza-tipo {
        font-size: 9px;
        font-weight: 800;
        padding: 2px 7px;
        border-radius: 4px;
        letter-spacing: .05em;
    }

    .traza-tipo-lote {
        background: #dbeafe;
        color: #1e40af;
        border: 1px solid #93c5fd;
    }

    .traza-tipo-serie {
        background: #d1fae5;
        color: #065f46;
        border: 1px solid #6ee7b7;
    }

    .traza-tipo-talla {
        background: #f3e8ff;
        color: #6b21a8;
        border: 1px solid #d8b4fe;
    }

    .traza-stock {
        font-size: 11px;
        color: #5a6a80;
        margin-left: auto;
    }

    .traza-consumido {
        color: #dc2626;
    }

    .traza-disponible {
        color: #15803d;
    }

    .traza-agotado {
        color: #dc2626;
    }

    .traza-tbl {
        width: 100%;
        border-collapse: collapse;
        font-size: 11.5px;
    }

        .traza-tbl thead th {
            background: #f1f5f9;
            padding: 5px 10px;
            font-size: 10px;
            font-weight: 700;
            color: #64748b;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .traza-tbl tbody td {
            padding: 5px 10px;
            border-top: 1px solid #f1f5f9;
        }

    .traza-row-entrada {
        background: #f0fdf4;
    }

    .traza-row-salida {
        background: #fef9f9;
    }

    /* ── CHECKBOX LABEL ─────────────────────────────────────────────────── */
    .rce-checkbox-lbl {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 12px;
        font-weight: 600;
        color: #374151;
        cursor: pointer;
    }

        .rce-checkbox-lbl input[type="checkbox"] {
            width: 14px;
            height: 14px;
            cursor: pointer;
        }