/* ============================================================================
   SCRUM-2220 — Registro de orden de venta V5
   ----------------------------------------------------------------------------
   Acabado visual del mockop (softop-v5.html) sobre la base técnica de Dore.

   Decisión D2 del documento de diseño: se sigue al mockup en espaciado, radios,
   sombras, escala tipográfica y tratamiento de cabeceras y panel lateral, pero
   los COLORES salen de las variables del tema activo, para que la pantalla
   respete el modo claro/oscuro y las seis variantes por óptica.

   Traducción de tokens del mockup:
     --a-ventas        #00707f   ->  var(--theme-color-1)
     --a-ventas-50     #e3f0f1   ->  var(--theme-color-1-10)
     --line / line-soft          ->  var(--separator-color)
     --ink-900 … 300             ->  var(--primary-color) con opacidad
     --sh-1 / --sh-2             ->  --rov-sombra-1 / -2

   TODO va acotado bajo .rov-screen: nada alcanza al resto de la aplicación.
   Prefijo de clases propias: rov-
   ============================================================================ */

.rov-screen {
    /* Escala del mockup */
    --rov-r-sm: 8px;
    --rov-r: 10px;
    --rov-r-lg: 13px;
    --rov-sombra-1: 0 1px 2px rgba(13, 23, 32, .05);
    --rov-sombra-2: 0 1px 3px rgba(13, 23, 32, .06), 0 10px 28px rgba(13, 23, 32, .07);
    --rov-acento: var(--theme-color-1);
    --rov-acento-10: var(--theme-color-1-10);
}

/* ══ 1. Cabecera ══════════════════════════════════════════════════════════ */

.rov-screen .rov-eyebrow {
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: var(--rov-acento);
    font-weight: 800;
    margin-bottom: 3px;
}

.rov-screen .rov-h1 {
    font-size: 22px;
    font-weight: 800;
    color: var(--primary-color);
    margin: 0;
}

.rov-screen .rov-cliente {
    font-size: 13px;
    opacity: .7;
    margin: 2px 0 0;
}

.rov-screen .rov-cliente b { opacity: 1; }

/* Conmutador Orden / Cotización: cápsula con el activo en color de acento. */
.rov-screen .rov-toggle {
    display: inline-flex;
    background: var(--foreground-color);
    border: 1px solid var(--separator-color);
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
    box-shadow: var(--rov-sombra-1);
}

.rov-screen .rov-toggle .btn {
    border: 0;
    background: none;
    padding: 9px 16px;
    border-radius: 9px;
    font-weight: 700;
    font-size: 13px;
    color: var(--primary-color);
    opacity: .65;
    box-shadow: none;
}

.rov-screen .rov-toggle .btn.active,
.rov-screen .rov-toggle .btn:hover {
    opacity: 1;
}

.rov-screen .rov-toggle .btn.active {
    background: var(--rov-acento);
    color: #fff;
    box-shadow: 0 3px 8px var(--rov-acento-10);
}

/* ══ 2. Secciones ═════════════════════════════════════════════════════════ */

.rov-screen .card {
    border: 1px solid var(--separator-color);
    border-radius: var(--rov-r-lg);
    box-shadow: var(--rov-sombra-1);
    margin-bottom: 16px;
    overflow: visible;
}

/* Se neutraliza el borde de color de Bootstrap: la jerarquía la da el número. */
.rov-screen .card[class*="border-left-"] {
    border-left: 1px solid var(--separator-color);
}

.rov-screen .card-header {
    background: transparent;
    border-bottom: 1px solid var(--separator-color);
    padding: 15px 18px;
}

.rov-screen .card-header h6 {
    font-size: 14.5px;
    font-weight: 800;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
}

.rov-screen .card-body { padding: 16px 18px 18px; }

/* Círculo numerado de la cabecera, como en el mockup. */
.rov-screen .rov-n {
    width: 26px;
    height: 26px;
    border-radius: var(--rov-r-sm);
    background: var(--rov-acento-10);
    color: var(--rov-acento);
    display: grid;
    place-items: center;
    font-weight: 800;
    font-size: 13px;
    flex: none;
}

.rov-screen .rov-hint {
    font-size: 11.5px;
    font-weight: 600;
    opacity: .55;
    margin-left: auto;
}

.rov-screen .rov-badge {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--separator-color);
    color: var(--primary-color);
    opacity: .75;
    padding: 3px 9px;
    border-radius: 20px;
}

/* Cabecera colapsable: el botón de Bootstrap se aplana. */
.rov-screen .seccion-colapsable-toggle {
    padding: 15px 18px !important;
    color: var(--primary-color);
}

.rov-screen .seccion-colapsable-toggle h6 { font-size: 14.5px; font-weight: 800; }

/* Clínica titula con h5; se iguala al resto sin tocar el partial. */
.rov-screen .seccion-colapsable-toggle h5 { font-size: 14.5px; font-weight: 800; margin: 0; }

/* ── 2b. Alineación de las secciones copiadas ─────────────────────────────
 *
 * Relacionado y Clínica son copias verbatim del legado (contrato D3) y traen su propio
 * envoltorio `.row > .col-md-12`. Dentro de `.col-lg-8` ese `.row` aporta los −15px de
 * gutter de Bootstrap, así que esas dos tarjetas salían 30px más anchas y desplazadas a la
 * izquierda respecto de las secciones ① y ②. Se neutraliza aquí, por CSS, en vez de editar
 * los partials: así siguen siendo byte-idénticos al legado y el test de copia exacta pasa.
 */
.rov-screen .informacionTercero,
.rov-screen #informacion-clinica-card {
    margin-left: 0;
    margin-right: 0;
}

.rov-screen .informacionTercero > .col-md-12,
.rov-screen #informacion-clinica-card > .col-md-12 {
    padding-left: 0;
    padding-right: 0;
}

/* Mismo motivo: Relacionado pinta el borde azul completo. Sólo se aplana la tarjeta
 * exterior — dentro de la sección hay tarjetas .tercero-option cuyo color de borde SÍ
 * distingue la opción elegida y no debe tocarse. */
.rov-screen .informacionTercero > .col-md-12 > .card.border-primary {
    /* `!important` porque la utilidad .border-primary de Bootstrap también lo lleva. */
    border-color: var(--separator-color) !important;
}

/* Cabecera de sección uniforme. Sólo las de primer nivel: dentro de Relacionado hay
 * cabeceras grises anidadas que forman parte de su diseño original. */
.rov-screen > form > .row > .col-lg-8 > .card > .card-header.bg-light,
.rov-screen .informacionTercero > .col-md-12 > .card > .card-header.bg-light {
    background: transparent !important;
}

/* Clínica mete el toggle dentro de un card-header con padding propio: se anula el del
   header para que no se sume al del toggle y la altura coincida con las demás. */
.rov-screen #informacion-clinica-card > .col-md-12 > .card > .card-header {
    padding: 0 18px 0 0;
}

/* Pie del campo Cliente: accesos a la izquierda, ayuda empujada a la derecha. */
.rov-screen .rov-acc {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px 0;
    font-size: 11.5px;
}

.rov-screen .rov-acc .ml-auto { margin-left: auto; }

/* ══ 3. Campos ════════════════════════════════════════════════════════════ */

.rov-screen label {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    opacity: .85;
    margin-bottom: 5px;
}

.rov-screen .form-control,
.rov-screen .select2-container--bootstrap .select2-selection {
    border: 1.5px solid var(--separator-color);
    border-radius: var(--rov-r);
    padding: 10px 12px;
    font-size: 13px;
    height: auto;
    min-height: 42px;
    color: var(--primary-color);
    background: var(--foreground-color);
    transition: border-color .15s, box-shadow .15s;
}

.rov-screen .form-control:focus,
.rov-screen .select2-container--bootstrap.select2-container--focus .select2-selection {
    border-color: var(--rov-acento);
    box-shadow: 0 0 0 3px var(--rov-acento-10);
}

/* Campo obligatorio: filete de acento a la izquierda (patrón del mockup). */
.rov-screen .rov-req .form-control,
.rov-screen .rov-req .select2-container--bootstrap .select2-selection {
    border-left: 3px solid var(--rov-acento);
}

/* Campo obligatorio sin llenar. Lo marca jQuery Validate desde rovOrden.js
   (_configurarValidacion): filete y borde rojos, y el motivo debajo del grupo. */
.rov-screen .rov-invalido .form-control,
.rov-screen .rov-invalido .select2-container--bootstrap .select2-selection,
.rov-screen .rov-req.rov-invalido .form-control,
.rov-screen .rov-req.rov-invalido .select2-container--bootstrap .select2-selection {
    border-color: #e0524d;
}

.rov-screen small.rov-error {
    display: block;
    margin-top: 3px;
    color: #e0524d;
    font-size: 11px;
    line-height: 1.3;
}

.rov-screen textarea.form-control { min-height: 62px; resize: vertical; }

.rov-screen .form-text { font-size: 11px; opacity: .6; }

.rov-screen .input-group-text {
    border: 1.5px solid var(--separator-color);
    border-radius: var(--rov-r);
    background: var(--separator-color);
    font-size: 12.5px;
}

.rov-screen .btn { border-radius: var(--rov-r); font-weight: 700; font-size: 13px; }
.rov-screen .btn-lg { border-radius: var(--rov-r); padding: 13px 18px; font-size: 14px; }

/* ══ 4. Zona de búsqueda y catálogo ═══════════════════════════════════════ */

/* Caja diferenciada que agrupa buscador y filtros, como .ov-addz del mockup. */
.rov-screen .rov-addz {
    background: var(--rov-acento-10);
    border: 1px solid var(--separator-color);
    border-radius: var(--rov-r-lg);
    padding: 14px;
    margin-bottom: 16px;
}

.rov-screen .rov-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    align-items: stretch;
}

.rov-screen .rov-toolbar > * { min-height: 44px; }
.rov-screen .rov-toolbar .rov-buscador { flex: 1 1 300px; }
.rov-screen .rov-toolbar .btn,
.rov-screen .rov-toolbar .form-control { height: 44px; }

.rov-screen .rov-toolbar .btn-outline-secondary {
    background: var(--foreground-color);
    border: 1.5px solid var(--separator-color);
    color: var(--primary-color);
}

.rov-screen .rov-toolbar .btn-outline-secondary:hover {
    border-color: var(--rov-acento);
    color: var(--rov-acento);
}

/* El botón de promociones se distingue: es la única acción que agrega varios. */
.rov-screen .rov-btn-promo {
    border: 1.5px solid #7952b3;
    color: #7952b3;
    background: var(--foreground-color);
    white-space: nowrap;
}

.rov-screen .rov-btn-promo:hover,
.rov-screen .rov-btn-promo.aplicada { background: #7952b3; color: #fff; }

/* Tarjetas del catálogo. */
.rov-screen .rov-browse {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(186px, 1fr));
    grid-gap: 10px;
    max-height: 420px;
    overflow-y: auto;
    padding: 2px;
}

.rov-screen .rov-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--foreground-color);
    border: 1.5px solid var(--separator-color);
    border-radius: var(--rov-r);
    padding: 12px 12px 10px;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.rov-screen .rov-card:hover,
.rov-screen .rov-card.active {
    border-color: var(--rov-acento);
    box-shadow: var(--rov-sombra-2);
    transform: translateY(-1px);
}

.rov-screen .rov-card-ic {
    color: var(--rov-acento);
    background: var(--rov-acento-10);
    width: 32px;
    height: 32px;
    border-radius: var(--rov-r-sm);
    display: grid;
    place-items: center;
    font-size: 1rem;
    margin-bottom: 9px;
}

.rov-screen .rov-card-nom {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.3;
    color: var(--primary-color);
    margin-bottom: 2px;
}

.rov-screen .rov-card-meta {
    font-size: 11px;
    opacity: .55;
    margin-bottom: 8px;
}

/* Observación de la referencia (show_referenceObserva). Es texto libre y puede venir largo:
   se recorta a una línea para no descuadrar la altura de la cuadrícula. */
.rov-screen .rov-card-obs {
    font-size: 11px;
    font-style: italic;
    opacity: .7;
    margin-top: -4px;
    margin-bottom: 8px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rov-screen .rov-card-precio {
    font-weight: 800;
    font-size: 13.5px;
    color: var(--primary-color);
}

.rov-screen .rov-card-fav {
    position: absolute;
    top: 8px;
    right: 9px;
    border: 0;
    background: transparent;
    padding: 2px;
    line-height: 1;
    font-size: 14px;
    opacity: .25;
    cursor: pointer;
    color: var(--primary-color);
}

.rov-screen .rov-card-fav:hover,
.rov-screen .rov-card-fav.on { opacity: 1; color: #e6a623; }

/* Píldoras de existencia, con los tonos semánticos del mockup. */
.rov-screen .rov-card-stock {
    display: inline-block;
    align-self: flex-start;
    font-size: 10px;
    font-weight: 800;
    padding: 3px 8px;
    border-radius: 20px;
    margin-top: 6px;
}

.rov-screen .rov-card-stock.ok       { background: #e8f7f0; color: #12784b; }
.rov-screen .rov-card-stock.bajo     { background: #fef6e7; color: #b8830f; }
.rov-screen .rov-card-stock.agotado  { background: #fdecea; color: #c0392b; }
.rov-screen .rov-card-stock.serv     { background: var(--separator-color); color: var(--primary-color); }

/* Contador de la tarjeta. Ocupa el sitio del botón de agregar cuando el producto ya está en
   la orden, así que tiene que medir lo mismo de alto que él: si abriera una fila propia, la
   tarjeta crecería al agregar y la cuadrícula perdería la línea base. */
.rov-screen .rov-card-qty {
    display: inline-flex;
    align-items: center;
    height: 28px;
    border: 1px solid var(--separator-color);
    border-radius: var(--rov-r-sm);
    overflow: hidden;
}

.rov-screen .rov-card-qty button {
    border: 0;
    background: var(--separator-color);
    width: 24px;
    height: 100%;
    font-size: 14px;
    line-height: 1;
    color: var(--primary-color);
}

.rov-screen .rov-card-qty button:hover { background: var(--rov-acento-10); color: var(--rov-acento); }

.rov-screen .rov-card-qty input {
    width: 30px;
    height: 100%;
    text-align: center;
    border: 0;
    background: var(--foreground-color);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
}

.rov-screen .rov-grupo {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .05em;
    opacity: .5;
    padding: 6px 2px 0;
}

.rov-screen .rov-card-agotado { opacity: .5; }
.rov-screen .rov-browse.rov-cargando { opacity: .5; pointer-events: none; }

/* Paginado del catálogo: ancho fijo y centrado. Lo pinta rovCatalogo.js resumido
   —primera, última y la actual con sus vecinas— para que quepa siempre en la tarjeta. */
.rov-screen #rovPaginado {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
}

.rov-screen #rovPaginado .page-item {
    padding: 0;
    margin: 0;
}

.rov-screen #rovPaginado .page-link {
    min-width: 30px;
    padding: 3px 6px;
    text-align: center;
    border-radius: var(--rov-r-sm);
    font-size: 12px;
    line-height: 18px;
}

.rov-screen #rovPaginado .page-item.disabled .page-link {
    background: transparent;
    border-color: transparent;
}

/* ══ 5. Desplegables de dos niveles ═══════════════════════════════════════ */

.rov-screen .rov-dd-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1050;
    min-width: 260px;
    max-height: 340px;
    overflow-y: auto;
    padding-top: 8px;
    border: 1px solid var(--separator-color);
    border-radius: var(--rov-r);
    box-shadow: var(--rov-sombra-2);
}

.rov-screen .rov-dd-menu .dropdown-item {
    cursor: pointer;
    white-space: normal;
    font-size: 12.5px;
    padding: 8px 14px;
}

.rov-screen .rov-dd-menu .dropdown-item:hover { background: var(--rov-acento-10); color: var(--rov-acento); }

.rov-screen .rov-dd-back {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
    font-size: 12px;
    padding: 8px 14px;
    border-bottom: 1px solid var(--separator-color);
    cursor: pointer;
    color: var(--rov-acento);
}

/* ══ 6. Tabla de productos de la orden ════════════════════════════════════ */

.rov-screen .rov-order-h {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    font-weight: 800;
    color: var(--primary-color);
    padding-bottom: 7px;
    border-bottom: 2px solid var(--separator-color);
    margin-bottom: 2px;
}

.rov-screen .rov-count {
    background: var(--rov-acento);
    color: #fff;
    border-radius: 20px;
    font-size: 11px;
    padding: 2px 9px;
    font-weight: 800;
    min-width: 22px;
    text-align: center;
}

.rov-screen #productsContent + thead th,
.rov-screen .table thead th {
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .55;
    font-weight: 700;
    border-top: 0;
    border-bottom: 1px solid var(--separator-color);
    padding: 9px 8px;
}

.rov-screen .table td {
    padding: 10px 8px;
    font-size: 13px;
    vertical-align: middle;
    border-top: 0;
    border-bottom: 1px solid var(--separator-color);
}

/* Criterio 12 del ticket: con convenio activo la grilla gana dos columnas de badges y no
   puede descolocarse. Los badges van en una sola línea y con un alto fijo, para que una fila
   con badge mida lo mismo que una sin él y las columnas no salten al aplicar el convenio. */
.rov-screen #productsContent td.convenioSi {
    white-space: nowrap;
    text-align: right;
}

.rov-screen #productsContent .badge-pill {
    display: inline-block;
    min-width: 58px;
    line-height: 1.1;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

/* El badge "Combo" acompaña a la referencia: no debe empujarla a una segunda línea. */
.rov-screen #productsContent td .badge-warning {
    white-space: nowrap;
}

/* Los campos editables de la fila comparten alto y alineación para que la columna no baile. */
.rov-screen #productsContent .rov-desc {
    width: 100%;
    min-width: 68px;
    text-align: right;
    padding: 4px 6px;
    height: 30px;
}

/* El precio final es el dato que el asesor negocia: se destaca sobre el resto de la fila. */
.rov-screen #productsContent .rov-final {
    font-weight: 700;
    min-width: 96px;
}

/* Cierre de la tarjeta en dos filas: los datos —precio y disponibilidad— y debajo las
   acciones, alineadas a la derecha.
   Las acciones estuvieron ancladas en la esquina con position:absolute, para que las tarjetas
   con promoción no quedaran más altas que las demás; con dos botones se montaban sobre la
   disponibilidad. Compartir fila con ella tampoco sirve: en cuanto el contador sustituye al
   carrito no queda ancho y "Disponible 496" sale cortado. Separadas, la altura es la misma
   —dos filas en cualquier caso— y ninguna le quita sitio a la otra. */
.rov-screen .rov-card-datos {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: auto;
}

.rov-screen .rov-card-datos .rov-card-stock {
    margin: 0 0 0 auto;
    align-self: center;
}

.rov-screen .rov-card-acc {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 8px;
}

.rov-screen .rov-card-promo { position: static; }

/* Los dos botones son de icono y comparten caja: misma altura, mismo radio que la tarjeta y
   sin borde. A su tamaño natural de Bootstrap eran dos pastillas de alturas distintas que
   pesaban más que el nombre del producto. */
.rov-screen .rov-card-acc .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    min-width: 28px;
    padding: 0 6px;
    border: 0;
    border-radius: var(--rov-r-sm);
    font-size: 14px;
    line-height: 1;
    box-shadow: none;
    transition: background-color .15s, color .15s;
}

.rov-screen .rov-card-acc .btn:focus { box-shadow: none; }
.rov-screen .rov-card-acc .glyph-icon,
.rov-screen .rov-card-acc i { line-height: 1; }

/* Jerarquía: agregar es LA acción de la tarjeta y va en sólido; la etiqueta es secundaria y
   va en blanco con un filete, que le da definición sin competir. El verde va a mano —no sale
   del tema, igual que los de .rov-card-stock— porque es la pista visual que se buscaba: el
   botón de agregar de la pantalla actual es verde en las seis variantes. */
.rov-screen .rov-card-add {
    background: #16a06a;
    color: #fff;
}

.rov-screen .rov-card-add:hover,
.rov-screen .rov-card-add:focus { background: #0f7d52; color: #fff; }

.rov-screen .rov-card-promo > .btn {
    background: var(--foreground-color);
    border: 1px solid var(--separator-color);
    color: var(--rov-acento);
}

.rov-screen .rov-card-promo > .btn:hover,
.rov-screen .rov-card-promo > .btn[aria-expanded="true"] {
    background: var(--rov-acento);
    border-color: var(--rov-acento);
    color: #fff;
}

.rov-screen .rov-card-promo > .btn[disabled] { opacity: .45; }

/* El caret de Bootstrap, a la escala del botón: con el suyo el botón de la etiqueta era casi
   el doble de ancho que el del carrito. */
.rov-screen .rov-card-acc .dropdown-toggle::after {
    margin-left: 4px;
    border-top-width: 4px;
    border-right-width: 3px;
    border-left-width: 3px;
    opacity: .75;
}

/* La disponibilidad se aligera para no competir con el precio, que es lo que se lee primero. */
.rov-screen .rov-card-datos .rov-card-stock {
    font-size: 10px;
    padding: 2px 7px;
    border-radius: var(--rov-r-sm);
}

.rov-screen .rov-card-promo .dropdown-menu,
.rov-menu-flotante.dropdown-menu {
    z-index: 1050;
    font-size: 12px;
    max-height: 260px;
    overflow-y: auto;
}

/* Abierto, el menú se cuelga del <body> (rovCatalogo._sacarMenuPromo) porque la cuadrícula
   tiene `overflow-y:auto` y recorta a cualquier descendiente posicionado. Ya fuera de ella,
   `fixed` lo mantiene sobre las tarjetas —también para el ratón, que si no se lo llevaba la
   tarjeta de detrás—; la posición la calcula el JS contra el botón. */
.rov-menu-flotante.dropdown-menu {
    position: fixed;
    z-index: 1080;
    margin: 0;
    /* `dropdown-menu-right` fija right:0; con nuestro `left` el menú se estiraba hasta el
       borde de la ventana. Aquí la alineación por la derecha la hace el JS. */
    right: auto;
}

.rov-screen .rov-card-promo .dropdown-header,
.rov-menu-flotante .dropdown-header {
    font-size: 11px;
    padding: 6px 12px 2px;
}

/* ══ 7. Panel lateral ═════════════════════════════════════════════════════ */

.rov-rail {
    position: -webkit-sticky;
    position: sticky;
    top: 80px;
    align-self: flex-start;
}

@media (max-width: 991.98px) {
    .rov-rail { position: static; top: auto; }
}

/* El panel es UNA sola tarjeta: resumen, entrega, pago y acción son secciones
   separadas por filetes, como en el mockup. */
.rov-screen .rov-sum { overflow: hidden; }

.rov-screen .rov-sum-h {
    background: linear-gradient(120deg, var(--rov-acento), var(--theme-color-4));
    color: #fff;
    padding: 14px 18px;
    font-weight: 800;
    font-size: 14px;
}

.rov-screen .rov-sum-b { padding: 14px 18px; }

/* ── Lista de productos, por encima de las bases ── */

.rov-screen #rovResumenItems:not(:empty) {
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px dashed var(--separator-color);
}

.rov-screen .rov-si-h {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .55;
}

.rov-screen .rov-si {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 7px 0;
    border-bottom: 1px solid var(--separator-color);
}

.rov-screen .rov-si:last-child { border-bottom: 0; }

.rov-screen .rov-si-q {
    flex: none;
    min-width: 28px;
    height: 22px;
    padding: 0 6px;
    border-radius: 6px;
    background: var(--rov-acento-10);
    color: var(--rov-acento);
    font-size: 11.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rov-screen .rov-si-n { flex: 1; min-width: 0; }

.rov-screen .rov-si-n b {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--primary-color);
}

.rov-screen .rov-si-n em { font-style: normal; font-size: 10.5px; opacity: .55; }

.rov-screen .rov-si-t {
    flex: none;
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--primary-color);
}

.rov-screen .rov-si-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11.5px;
    opacity: .55;
    background: var(--separator-color);
    border-radius: 9px;
    padding: 10px 12px;
}

/* ── Líneas de totales ── */

.rov-screen .rov-line {
    display: flex;
    justify-content: space-between;
    padding: 7px 0;
    font-size: 13px;
    color: var(--primary-color);
}

.rov-screen .rov-line span { opacity: .55; }
.rov-screen .rov-line b { font-variant-numeric: tabular-nums; }

.rov-screen .rov-line.rov-total {
    border-top: 2px dashed var(--separator-color);
    margin-top: 8px;
    padding-top: 12px;
    font-size: 20px;
    font-weight: 800;
    align-items: center;
}

.rov-screen .rov-line.rov-total span {
    font-size: 13px;
    font-weight: 700;
    opacity: .8;
}

.rov-screen .rov-line.rov-total b { color: var(--rov-acento); }

/* ── Entrega: dos cajas con microetiqueta ── */

.rov-screen .rov-deliv {
    display: flex;
    gap: 10px;
    padding: 6px 18px 16px;
}

.rov-screen .rov-deliv-c {
    flex: 1;
    min-width: 0;
    background: var(--foreground-color);
    border: 1.5px solid var(--separator-color);
    border-radius: 12px;
    padding: 9px 12px;
}

.rov-screen .rov-deliv-c.gav { max-width: 108px; flex: none; }

.rov-screen .rov-deliv-c label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 800;
    opacity: .55;
    margin-bottom: 4px;
}

.rov-screen .rov-deliv-c label i { color: var(--rov-acento); font-size: 12px; }

.rov-screen .rov-deliv-c input {
    width: 100%;
    border: 0;
    outline: 0;
    padding: 0;
    min-height: 0;
    height: auto;
    background: none;
    font-size: 14px;
    font-weight: 700;
    color: var(--primary-color);
}

.rov-screen .rov-deliv-c input:focus { box-shadow: none; }

/* ── Pago ── */

.rov-screen .rov-pay {
    border-top: 1px solid var(--separator-color);
    padding: 15px 18px;
    background: var(--rov-acento-10);
}

.rov-screen .rov-pay h4 {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 800;
    opacity: .55;
    margin-bottom: 10px;
}

.rov-screen .rov-saldo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #e8f7f0;
    border-radius: 10px;
    padding: 11px 13px;
    margin-top: 12px;
}

.rov-screen .rov-saldo.due { background: #fdecea; }

.rov-screen .rov-saldo b {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .04em;
    font-weight: 800;
    opacity: .6;
}

.rov-screen .rov-samt { font-size: 18px; font-weight: 800; color: #12784b; }
.rov-screen .rov-saldo.due .rov-samt { color: #e0524d; }

/* ── Acción principal ── */

.rov-screen .rov-acts {
    padding: 15px 18px;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.rov-screen .rov-cta {
    border: 0;
    border-radius: 12px;
    padding: 13px;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    color: #fff;
    background: linear-gradient(120deg, var(--rov-acento), var(--theme-color-4));
    box-shadow: 0 6px 16px var(--rov-acento-10);
    transition: transform .15s;
}

.rov-screen .rov-cta:hover { transform: translateY(-1px); }

.rov-screen .rov-req-nota {
    font-size: 11px;
    text-align: center;
    opacity: .55;
}

.rov-screen .rov-req-nota span { color: #e0524d; }

/* ══ 8. Estados vacíos ════════════════════════════════════════════════════ */

.rov-screen .rov-empty {
    text-align: center;
    padding: 26px 16px;
    opacity: .6;
    font-size: 12.5px;
}

.rov-screen .rov-empty .rov-empty-ic {
    display: block;
    font-size: 26px;
    margin-bottom: 8px;
    opacity: .6;
}

/* ══ 9. Panel de fórmula (RX) ═════════════════════════════════════════════ */

.rov-screen .rov-rx-tb { font-size: 12.5px; margin-bottom: 8px; }

.rov-screen .rov-rx-tb th {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .04em;
    opacity: .55;
    font-weight: 700;
}

.rov-screen .rov-rx-sugg {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: var(--rov-r-sm);
    background: var(--rov-acento-10);
}

.rov-screen .rov-rx-externa { background: rgba(230, 166, 35, .08); }

/* ══ 10. Picker unificado de combos y promociones (F4) ═══════════════════ */

.rov-screen .rov-promo-menu { min-width: 340px; max-width: 400px; }

.rov-screen .rov-promo-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 10px 8px;
    border-bottom: 1px solid var(--separator-color);
}

.rov-screen .rov-promo-tab {
    border: 0;
    background: transparent;
    font-size: 11.5px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 20px;
    color: var(--primary-color);
    opacity: .6;
}

.rov-screen .rov-promo-tab.active {
    background: var(--rov-acento-10);
    color: var(--rov-acento);
    opacity: 1;
}

.rov-screen .rov-promo-count {
    margin-left: auto;
    font-size: 10.5px;
    opacity: .5;
}

.rov-screen .rov-promo-i {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    padding: 9px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--separator-color);
}

.rov-screen .rov-promo-i:hover { background: var(--rov-acento-10); }

.rov-screen .rov-promo-badge {
    font-size: 9.5px;
    font-weight: 800;
    text-transform: uppercase;
    padding: 3px 7px;
    border-radius: 20px;
    background: var(--separator-color);
    color: var(--primary-color);
    flex: none;
    margin-top: 1px;
}

.rov-screen .rov-promo-badge.tcombo { background: var(--rov-acento-10); color: var(--rov-acento); }
.rov-screen .rov-promo-badge.tpromo { background: rgba(121, 82, 179, .12); color: #7952b3; }

.rov-screen .rov-promo-tx { flex: 1; min-width: 0; }
.rov-screen .rov-promo-tx b { display: block; font-size: 12.5px; font-weight: 700; }
.rov-screen .rov-promo-tx span { font-size: 11px; opacity: .55; }

.rov-screen .rov-promo-fav {
    border: 0;
    background: transparent;
    font-size: 13px;
    opacity: .25;
    color: var(--primary-color);
    padding: 0 2px;
}

.rov-screen .rov-promo-fav:hover,
.rov-screen .rov-promo-fav.on { opacity: 1; color: #e6a623; }

.rov-screen .rov-promo-ninguna { background: var(--separator-color); }

.rov-screen .rov-btn-promo #rovPromoQuitar {
    margin-left: 7px;
    font-weight: 800;
    opacity: .8;
}

/* ══ 11. Panel de fórmula (F6) ═══════════════════════════════════════════ */

.rov-screen #rovRx .rov-rx-h,
.rov-screen #rovRxExterna .rov-rx-h { padding: 12px 16px; }

.rov-screen .rov-rx-tb th { font-weight: 700; }
.rov-screen .rov-rx-tb tbody th { font-size: 11px; opacity: .7; width: 34px; }
.rov-screen .rov-rx-tb td { padding: 6px 8px; }

.rov-screen .rov-rx-vacio {
    border-style: dashed;
    background: transparent;
}

/* La fórmula externa se distingue con tinte ámbar, como pide el ticket. */
.rov-screen .rov-rx-externa {
    background: rgba(230, 166, 35, .06);
    border-color: rgba(230, 166, 35, .45);
}

.rov-screen .rov-rx-externa .rov-n {
    background: rgba(230, 166, 35, .16);
    color: #b8830f;
}

/* ══ 12. Modal de resumen ═════════════════════════════════════════════════
 *
 * El modal vive FUERA de .rov-screen, así que estas reglas no van acotadas.
 *
 * La pantalla legada oculta estas columnas con una regla en su CSS inline
 * (ViewPurchaseOrder.php:4309), que la V5 no carga: sin ella, el resumen mostraba la
 * columna de acciones. Se replica aquí. Como es la misma declaración, tenerla en los dos
 * sitios no cambia nada en la pantalla legada.
 */
#contenedor_tabla_orden .ocultar_resumen {
    display: none;
}

/* Nada dentro del resumen es operable: es una confirmación, no un formulario. */
#contenedor_tabla_orden input,
#contenedor_tabla_orden button {
    pointer-events: none;
}

/* ══ 13. Campos numéricos ═════════════════════════════════════════════════
 *
 * Sin flechas de incremento. Son importes y cantidades: subirlos de uno en uno con el ratón no
 * sirve de nada y, sobre todo, las flechas invitan a un gesto que en el trackpad se confunde
 * con el desplazamiento y termina cambiando el precio de una línea sin que nadie lo teclee.
 *
 * Lo que la rueda del ratón hace sobre un campo enfocado lo bloquea rovOrden.js: es
 * comportamiento del navegador y no se puede quitar con CSS.
 *
 * Alcanza a .rov-modales además de a .rov-screen porque los modales de la pantalla se
 * renderizan fuera del envoltorio, como hermanos suyos. Ese envoltorio sólo existe en las dos
 * pantallas V5, así que la regla no llega a la pantalla actual ni al resto de la aplicación,
 * aunque esta hoja se cargue en todas.
 */
.rov-screen input[type="number"],
.rov-modales input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.rov-screen input[type="number"]::-webkit-outer-spin-button,
.rov-screen input[type="number"]::-webkit-inner-spin-button,
.rov-modales input[type="number"]::-webkit-outer-spin-button,
.rov-modales input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* SCRUM-2678 — Abono que ya entró en un cierre de caja. */
tr.abono-bloqueado-cierre {
    background-color: #fff3cd;
}

tr.abono-bloqueado-cierre td {
    color: #856404;
}

tr.abono-bloqueado-cierre input[readonly] {
    background-color: #fff3cd;
    cursor: not-allowed;
}