/* ============================================================================= * EDITAR ORDEN — presentacion MOBILE (< 768 px). Ver public/js/orden-edit-mobile.js. * * Todo acotado a #ordenEditModal y a pantallas chicas: en escritorio y tablet (>= 768 px) no cambia nada. * Lo que depende del modulo JS (encabezado, tarjetas de seccion) cuelga de `.dwm-on`; las lineas, los totales y * la barra de acciones son CSS puro sobre el HTML de siempre, asi que funcionan aunque el modulo no cargue. * ============================================================================= */ /* Lo que arma el modulo no se ve fuera de mobile (por si quedara algo en pantalla al agrandar la ventana). */ :is(#ordenEditModal, #cotizNeoEditModal) .dwm-head, :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec, :is(#ordenEditModal, #cotizNeoEditModal) .dwm-valid { display: none; } @media (max-width: 767.98px) { :is(#ordenEditModal, #cotizNeoEditModal) { --dwm-verde: #1b4d2e; --dwm-verde-2: #2e7d32; --dwm-fondo: #f3f6f4; --dwm-borde: #e1e7e3; --dwm-texto: #1f2a24; --dwm-suave: #6b7770; --dwm-alerta: #b42318; } /* ---- marco: pantalla completa, sin esquinas, con las zonas seguras del telefono ------------------------ */ :is(#ordenEditModal, #cotizNeoEditModal) .modal-content { border-radius: 0; min-height: 100%; } :is(#ordenEditModal, #cotizNeoEditModal) .modal-body.small { font-size: .95rem; padding: 10px 12px 16px; background: var(--dwm-fondo); } /* ---- encabezado fijo (el modulo lo arma; el original se esconde) ---------------------------------------- */ :is(#ordenEditModal, #cotizNeoEditModal).dwm-on .modal-header { padding: calc(8px + env(safe-area-inset-top)) 8px 8px 6px; background: linear-gradient(90deg, var(--dwm-verde), var(--dwm-verde-2)); position: sticky; top: 0; z-index: 5; } :is(#ordenEditModal, #cotizNeoEditModal).dwm-on .modal-header > .modal-title, :is(#ordenEditModal, #cotizNeoEditModal).dwm-on .modal-header > .btn-close { display: none; } :is(#ordenEditModal, #cotizNeoEditModal).dwm-on .dwm-head { display: flex; align-items: center; gap: 4px; width: 100%; color: #fff; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-back, :is(#ordenEditModal, #cotizNeoEditModal) .dwm-more { width: 44px; height: 44px; border: 0; background: transparent; color: #fff; font-size: 1.35rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-back:active, :is(#ordenEditModal, #cotizNeoEditModal) .dwm-more:active { background: rgba(255, 255, 255, .18); } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-ttl { flex: 1; min-width: 0; line-height: 1.15; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-t1 { font-weight: 700; font-size: 1.05rem; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-t2 { font-size: .8rem; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-menu .dropdown-item { min-height: 44px; display: flex; align-items: center; } /* ---- pestañas Orden / Comentarios / Pagos: una sola fila que se desliza --------------------------------- */ :is(#ordenEditModal, #cotizNeoEditModal) .nav-tabs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; border-bottom-color: var(--dwm-borde); } :is(#ordenEditModal, #cotizNeoEditModal) .nav-tabs::-webkit-scrollbar { display: none; } :is(#ordenEditModal, #cotizNeoEditModal) .nav-tabs .nav-link { min-height: 44px; display: flex; align-items: center; } /* ---- cliente: barra compacta ---------------------------------------------------------------------------- */ :is(#ordenEditModal, #cotizNeoEditModal) .dwov2-clientbar { margin-bottom: 10px; border-radius: 12px; background: #fff; border-color: var(--dwm-borde); } /* ---- tarjetas de seccion (acordeon) --------------------------------------------------------------------- */ :is(#ordenEditModal, #cotizNeoEditModal).dwm-on .dwm-sec { display: block; background: #fff; border: 1px solid var(--dwm-borde); border-radius: 12px; margin-bottom: 10px; overflow: hidden; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-head { width: 100%; min-height: 52px; padding: 8px 14px; border: 0; background: transparent; text-align: left; display: flex; align-items: center; gap: 10px; color: var(--dwm-texto); font-weight: 700; font-size: 1rem; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-ic { color: var(--dwm-verde-2); font-size: 1.2rem; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-tt { flex: 1; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sub { font-weight: 500; font-size: .8rem; color: var(--dwm-suave); } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-chev { transition: transform .15s ease; color: var(--dwm-suave); } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec.dwm-open > .dwm-sec-head .dwm-chev { transform: rotate(180deg); } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec > .dwm-sec-body { display: none; padding: 2px 14px 14px; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec.dwm-open > .dwm-sec-body { display: block; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-flag { font-size: .72rem; font-weight: 700; color: var(--dwm-alerta); background: #fdecea; border-radius: 99px; padding: 3px 9px; white-space: nowrap; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec.dwm-incomplete { border-color: #f0b8b3; } /* los campos de las secciones: una columna, tactiles y sin el zoom de iOS (>= 16 px) */ /* (el panel de credito conserva sus tres columnas de importes) */ :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec:not(.dwm-credit) .dwm-sec-body .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-body .form-control, :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-body .form-select, :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-body .btn { min-height: 44px; font-size: 16px; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-body textarea.form-control { min-height: 88px; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-body .form-label { font-size: .8rem; color: var(--dwm-suave); } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-body .form-check-input { width: 1.4rem; height: 1.4rem; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-body .form-switch .form-check-input { width: 2.6rem; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-body .d-flex.flex-wrap > * { min-width: 0; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-body :is(#ordenEditPayment, #cotizNeoEditPayment) { max-width: 100% !important; width: 100%; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-body :is(#ordenEditPaymentOtherBox, #cotizNeoEditPaymentOtherBox), :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-body :is(#ordenEditPaymentOtherMotivo, #cotizNeoEditPaymentOtherMotivo) { min-width: 0 !important; flex: 1 1 100% !important; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-emptied { display: none !important; } /* lista del combo de CEBE: ancho de la columna, no del contenido */ :is(#ordenEditModal, #cotizNeoEditModal) .dwm-sec-body .dropdown-menu { max-width: 100%; } /* ---- credito ---------------------------------------------------------------------------------------------- */ :is(#ordenEditModal, #cotizNeoEditModal).dwm-on .dwm-valid { display: block; background: #fff; border: 1px solid var(--dwm-borde); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-valid-head { font-weight: 700; display: flex; align-items: center; color: var(--dwm-texto); } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-valid.dwm-valid-has .dwm-valid-pend { display: none; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-valid .dwm-valid-pend { margin-top: 4px; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-valid :is(#ordenEditCreditPrecheck, #cotizNeoEditCreditPrecheck) { margin-top: 8px !important; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-credit .dwm-sec-body > :is(#ordenEditCreditPanel, #cotizNeoEditCreditPanel) { margin: 0 !important; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-credit .dwov2-cstat { padding: 8px 9px; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-credit .dwov2-cstat .v { font-size: 1rem; } /* ---- lineas de productos --------------------------------------------------------------------------------- */ /* encabezado: titulo y los dos accesos (Oportunidades / Cargar presupuesto) en filas completas */ :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) > .d-flex.justify-content-between { flex-wrap: wrap; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) > .d-flex.justify-content-between > .d-flex.gap-2 { width: 100%; flex-direction: column; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) > .d-flex.justify-content-between > .d-flex.gap-2 .btn { min-height: 44px; width: 100%; } /* agregar producto: busqueda arriba, cantidad y precio, y el boton ancho */ :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) { background: #fff; border: 1px solid var(--dwm-borde); border-radius: 12px; padding: 10px; margin-bottom: 10px; } :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) > .row { margin: 0; } :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) > .row > [class*="col-"] { padding: 0; margin-bottom: 8px; flex: 0 0 100%; max-width: 100%; } :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) > .row > .col-4 { order: 1; } /* descripcion */ :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) > .row > .col-2:first-child { order: 2; flex: 0 0 38%; max-width: 38%; padding-right: 6px; } /* codigo */ :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) > .row > .col-3 { order: 3; flex: 0 0 62%; max-width: 62%; padding-left: 6px; } /* precio */ :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) > .row > .col-2:nth-child(3) { order: 4; } /* cantidad - / + */ :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) > .row > .col-1 { order: 5; margin-bottom: 0; } /* agregar */ :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) .form-control, :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) .btn { min-height: 44px; font-size: 16px; } :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) :is(#ordenEditAddLine, #cotizNeoEditAddLine) { font-size: 0; background: var(--dwm-verde-2); border-color: var(--dwm-verde-2); } :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) :is(#ordenEditAddLine, #cotizNeoEditAddLine) .bi { font-size: 1.4rem; } :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) :is(#ordenEditAddLine, #cotizNeoEditAddLine)::after { content: "Agregar"; font-size: 1rem; font-weight: 700; margin-left: 4px; } :is(#ordenEditAddLineWrap, #cotizNeoEditAddLineWrap) .input-group .btn { min-width: 52px; } :is(#ordenEditLineSearchDropdown, #cotizNeoEditLineSearchDropdown) { min-width: 0 !important; width: 100%; max-height: 50vh !important; } /* la tabla pasa a tarjetas: cada es una linea; los controles son LOS MISMOS (mismos atributos y handlers) */ :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) .table-responsive { overflow: visible; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) .table-responsive > table { display: block; border: 0; background: transparent; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) .table-responsive thead { display: none; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) { display: block; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 8px; background: #fff; border: 1px solid var(--dwm-borde); border-radius: 12px; padding: 12px 12px 6px; margin-bottom: 10px; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-width: 0; padding: 0; border: 0; background: transparent; text-align: left !important; font-size: .85rem; color: var(--dwm-texto); } /* cada dato con su rotulo (los nth-child son las columnas de la tabla de escritorio) */ :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(3)::before { content: "Cantidad"; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(4)::before { content: "Presentación"; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(5)::before { content: "Precio unit."; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(6)::before { content: "Descuento"; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(8)::before { content: "Destino"; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(9)::before { content: "Stock"; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(10)::before { content: "Margen"; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td::before { font-size: .7rem; font-weight: 600; color: var(--dwm-suave); text-transform: uppercase; letter-spacing: .02em; } /* titulo: codigo, descripcion y total */ :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(1) { grid-area: 1 / 1 / 2 / 5; font-weight: 700; font-size: .8rem; color: var(--dwm-suave); } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(7) { grid-area: 1 / 5 / 2 / 7; align-items: flex-end; font-weight: 800; font-size: 1.1rem; color: var(--dwm-verde); } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(2) { grid-area: 2 / 1 / 3 / 7; font-weight: 600; font-size: .95rem; line-height: 1.25; display: block; overflow-wrap: anywhere; white-space: normal; } /* datos principales */ :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(3) { grid-area: 3 / 1 / 4 / 7; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(4) { grid-area: 4 / 1 / 5 / 3; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(5) { grid-area: 4 / 3 / 5 / 5; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(6) { grid-area: 4 / 5 / 5 / 7; } /* OPCIONES DE LA LINEA, CON NOMBRE (2026-10-16). En el celular unos iconos sueltos no dicen que hacen: cada opcion es un boton con su icono Y su texto. Siempre a mano: «Precio / descuento» y «Quitar». Al expandir la tarjeta: «Alternativos» e «Historial», y debajo el destino, el stock y el margen. Los botones son LOS MISMOS (mismos atributos y handlers). */ :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) { grid-area: 5 / 1 / 6 / 7; display: block; border-top: 1px solid var(--dwm-borde); padding-top: 8px; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) .dwov2-lineicons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) .b { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 8px; width: 100%; border: 1px solid var(--dwm-borde); border-radius: 10px; background: #fff; color: var(--dwm-texto); font-size: .82rem; font-weight: 600; line-height: 1.1; text-align: center; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) .b i { font-size: 1.1rem; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) .b:active { background: #f1f6f2; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) [data-line-price-adj] { order: 1; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) [data-line-remove] { order: 2; color: var(--dwm-alerta); border-color: #f0b8b3; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) [data-line-alt-code] { order: 3; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) [data-line-price-history] { order: 4; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) [data-line-price-adj]::after { content: "Precio / descuento"; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) [data-line-remove]::after { content: "Quitar"; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) [data-line-alt-code]::after { content: "Alternativos"; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(11) [data-line-price-history]::after { content: "Historial"; } /* cerrada: solo lo esencial */ :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr:not(.dwm-line-open) > td:nth-child(11) .b:not([data-line-price-adj]):not([data-line-remove]) { display: none; } /* expandida: destino y stock (con nombre) y el margen */ :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(8) { grid-area: 6 / 1 / 7 / 4; display: none; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(9) { grid-area: 6 / 4 / 7 / 7; display: none; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(10) { grid-area: 7 / 1 / 8 / 7; display: none; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr.dwm-line-open > td:nth-child(8), :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr.dwm-line-open > td:nth-child(9), :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr.dwm-line-open > td:nth-child(10) { display: flex; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(8)::before, :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(9)::before { display: none; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(8) > div { width: 100%; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(8) [data-line-dest-info], :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(9) [data-line-stock-code] { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; min-height: 44px; padding: 0 8px; border: 1px solid var(--dwm-borde); border-radius: 10px; background: #fff; color: var(--dwm-texto); font-size: .82rem; font-weight: 600; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(8) [data-line-dest-info] i, :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(9) [data-line-stock-code] i { font-size: 1.1rem; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(8) [data-line-dest-info]::after { content: "Destino"; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(9) [data-line-stock-code]::after { content: "Stock"; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(9) .dwov2-lineicons { width: 100%; display: block; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td:nth-child(10) > div { width: 100%; } /* el control de cantidad: botones de 44 px */ :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) .dwov2-qty-btn { min-width: 44px; min-height: 44px; font-size: 1.2rem; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) .dwov2-qty-inp { min-height: 44px; width: 64px; font-size: 16px; } /* «ver mas»: un toque en la tarjeta (fuera de un control) la expande; el rotulo lo dice */ :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr:not(:has(td[colspan]))::after { content: "Ver más detalles"; grid-area: 8 / 1 / 9 / 7; text-align: center; font-size: .75rem; color: var(--dwm-suave); padding: 2px 0 6px; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr.dwm-line-open:not(:has(td[colspan]))::after { content: "Ver menos"; } /* estado vacio ("Sin productos."): una tarjeta simple */ :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr > td[colspan] { grid-area: 1 / 1 / 2 / 7; align-items: center; text-align: center !important; padding: 8px 0; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditLinesBody, #cotizNeoEditLinesBody) > tr:has(td[colspan]) { display: block; text-align: center; } /* ---- totales: una tarjeta ------------------------------------------------------------------------------- */ :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) .table-responsive tfoot { display: block; background: #fff; border: 1px solid var(--dwm-borde); border-radius: 12px; padding: 10px 14px; margin-top: 4px; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) .table-responsive tfoot > tr { display: flex; justify-content: space-between; align-items: baseline; padding: 3px 0; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) .table-responsive tfoot > tr > td { display: block; padding: 0; border: 0; background: transparent; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) .table-responsive tfoot > tr > td:empty { display: none; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) .table-responsive tfoot > tr:nth-child(2) { border-top: 1px solid var(--dwm-borde); margin-top: 4px; padding-top: 8px; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) .table-responsive tfoot > tr:nth-child(2) > td:first-child { font-size: 1rem; } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) :is(#ordenEditTotal, #cotizNeoEditTotal) { font-size: 1.5rem; font-weight: 800; color: var(--dwm-verde); } :is(#ordenEditTabOrden, #cotizNeoEditTabOrden) .table-responsive tfoot > tr:nth-child(3) { display: block; padding-top: 8px; } /* ---- barra de acciones inferior: fija, con la zona segura de abajo -------------------------------------- */ :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer { display: grid; grid-template-columns: 1fr 1.25fr; gap: 8px; align-items: stretch; justify-content: stretch; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--dwm-borde); position: sticky; bottom: 0; z-index: 5; box-shadow: 0 -4px 14px rgba(0, 0, 0, .06); } :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer > .btn { min-height: 48px; font-size: .95rem; font-weight: 700; margin: 0; padding-left: 8px; padding-right: 8px; display: flex; align-items: center; justify-content: center; white-space: nowrap; } :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer :is(#ordenEditSave, #cotizNeoEditSave) .bi { display: none; } /* «Cancelar» sale del pie (el encabezado tiene volver y el menu): la misma accion, mas lugar para las dos importantes */ :is(#ordenEditModal, #cotizNeoEditModal).dwm-on .modal-footer > .btn-secondary[data-bs-dismiss="modal"] { display: none; } :is(#ordenEditModal, #cotizNeoEditModal):not(.dwm-on) .modal-footer > .btn-secondary[data-bs-dismiss="modal"] { grid-column: 1 / -1; } :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer > .form-switch { grid-column: 1 / -1; order: -1; margin: 0 !important; padding: 0 0 2px; display: flex !important; align-items: center; justify-content: space-between; flex-direction: row-reverse; } :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer > .form-switch .form-check-input { margin: 0; width: 2.8rem; height: 1.5rem; } :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer > .form-switch .form-check-label { margin: 0 !important; font-size: .95rem !important; font-weight: 600; color: var(--dwm-texto) !important; } /* avisos que agrega el pie (por que no se puede enviar): ancho completo */ :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer > :not(.btn):not(.form-switch) { grid-column: 1 / -1; font-size: .8rem; } :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer :is(#ordenEditSave, #cotizNeoEditSave) { background: #fff; color: var(--dwm-verde); border: 2px solid var(--dwm-verde-2); } :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer :is(#ordenEditSaveSend, #cotizNeoEditSaveSend) { background: var(--dwm-verde-2) !important; border-color: var(--dwm-verde-2); } :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer :is(#ordenEditSaveSend, #cotizNeoEditSaveSend):disabled { opacity: .5; } /* ---- sin scroll horizontal ------------------------------------------------------------------------------ */ :is(#ordenEditModal, #cotizNeoEditModal) .modal-body { overflow-x: hidden; } :is(#ordenEditModal, #cotizNeoEditModal) .modal-body img, :is(#ordenEditModal, #cotizNeoEditModal) .modal-body table { max-width: 100%; } } /* telefono en horizontal: el encabezado y la barra no le comen la pantalla al formulario */ @media (max-width: 767.98px) and (orientation: landscape) and (max-height: 520px) { :is(#ordenEditModal, #cotizNeoEditModal).dwm-on .modal-header { padding-top: calc(4px + env(safe-area-inset-top)); padding-bottom: 4px; } :is(#ordenEditModal, #cotizNeoEditModal) .dwm-back, :is(#ordenEditModal, #cotizNeoEditModal) .dwm-more { width: 40px; height: 40px; } :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer { padding-top: 6px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); grid-template-columns: auto 1fr 1.3fr; align-items: center; } :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer > .btn { min-height: 44px; } /* una sola fila: «En preparacion» a la izquierda y los dos botones al lado */ :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer > .form-switch { grid-column: auto; order: -1; gap: 10px; padding: 0 4px 0 0; } :is(#ordenEditModal, #cotizNeoEditModal) .modal-footer > :not(.btn):not(.form-switch) { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { :is(#ordenEditModal, #cotizNeoEditModal) .dwm-chev { transition: none; } } /* ============================================================================= * LA COTIZACION conserva su tema azul (dwov2-quote): mismas medidas y misma distribucion que la orden, con sus colores. * ============================================================================= */ @media (max-width: 767.98px) { #cotizNeoEditModal { --dwm-verde: #0d2c54; --dwm-verde-2: #1e4e8c; --dwm-fondo: #eef5ff; --dwm-borde: #cfe0f5; } #cotizNeoEditModal.dwm-on .modal-header { background: linear-gradient(90deg, #0d2c54, #1e4e8c); } /* una tarjeta cuyas columnas estan todas ocultas por la logica de siempre (la fila de pago de la cotizacion) no se muestra vacia */ :is(#ordenEditModal, #cotizNeoEditModal).dwm-on .dwm-sec.dwm-vacia { display: none !important; } }