/* Ventas → Nueva orden · estilo «Paso a paso» (vertical) (Configuración → Ajustes generales → Estilo de Nueva orden).
   Solo apariencia: todo va dentro de .no-vertical; Clásico, Moderno y Fluido no cambian.
   Una sola columna centrada, de arriba a abajo: 1 Cliente → 2 Artículos → 3 Abono y comprobante → 4 Factura → total y «Crear orden».
   Los pasos van unidos por una línea (como una línea de tiempo) y se marcan solos (hecho / ahora / pendiente).
   Aquí la página sí se desliza; ningún dato se corta. Colores: solo variables del tema. */

.no-vertical{
  --nv-gut:46px; --nv-node:30px; --nv-gap:16px; --nv-in:38px; --nv-r:11px; --nv-t:.18s;
  --nv-ring:color-mix(in srgb,var(--primary) 16%,transparent);
  --nv-tile:color-mix(in srgb,var(--primary) 12%,transparent);
  display:flex;flex-direction:column;align-items:stretch;gap:var(--nv-gap);width:100%;max-width:1020px;margin:0 auto;padding:20px 20px 24px;box-sizing:border-box
}
.no-vertical>.no-main{display:contents}

/* Tipo de pedido y delivery: arriba, alineados con las tarjetas */
.no-vertical .no-tipo-fila{margin-left:var(--nv-gut);display:flex;align-items:center;gap:10px}
.no-vertical .no-tipo{margin:0;padding:4px;border-radius:999px;flex-wrap:wrap}
.no-vertical .no-tipo button{padding:6px 14px;border-radius:999px;font-size:13px;transition:background var(--nv-t),color var(--nv-t)}
.no-vertical .no-tipo button[aria-pressed="true"]{color:var(--primary)}
.no-vertical .no-main>.alerta{margin-left:var(--nv-gut);border-radius:14px}

/* ---------- Tarjetas de cada paso, unidas por la línea ---------- */
.no-vertical .no-sec,.no-vertical>.no-side,.no-vertical>.nv-fin{position:relative;margin-left:var(--nv-gut);background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:16px 20px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:12px;min-width:0;transition:border-color var(--nv-t),box-shadow var(--nv-t)}
.no-vertical>.no-side{position:relative;top:auto}
.no-vertical .no-main>.abono-orden{border-top:1px solid var(--line);padding-top:16px}
.no-vertical [data-paso="actual"]{border-color:color-mix(in srgb,var(--primary) 45%,var(--line));box-shadow:0 0 0 4px var(--nv-ring),var(--shadow)}
/* Línea que une un paso con el siguiente */
.no-vertical .no-sec::before,.no-vertical>.no-side::before{content:"";position:absolute;left:calc(-1 * var(--nv-gut) + var(--nv-node) / 2 - 1px);top:calc(16px + var(--nv-node) + 6px);bottom:calc(-1 * var(--nv-gap) - 22px);width:2px;border-radius:2px;background:var(--line);transition:background var(--nv-t)}
.no-vertical [data-paso="hecho"]::before,.no-vertical [data-paso="omitido"]::before{background:color-mix(in srgb,var(--ok) 55%,var(--line))}

/* Cabecera: número en la línea, icono, título y una pista */
.no-vertical .no-h{gap:10px;flex-wrap:wrap;min-height:30px}
.no-vertical .no-h h3{font-size:15.5px;font-weight:700;letter-spacing:-.01em}
.no-vertical .no-h .hint{margin-left:auto;font-size:12px}
.no-vertical .no-h>.n{position:absolute;left:calc(-1 * var(--nv-gut));top:16px;width:var(--nv-node);height:var(--nv-node);border-radius:50%;display:grid;place-items:center;
  background:var(--surface);border:2px solid var(--line);color:var(--muted);font-weight:800;font-size:13px;transition:background var(--nv-t),border-color var(--nv-t),color var(--nv-t),box-shadow var(--nv-t)}
.no-vertical [data-paso="actual"] .no-h>.n{background:var(--primary);border-color:var(--primary);color:var(--on-primary);box-shadow:0 0 0 5px var(--nv-ring)}
.no-vertical [data-paso="hecho"] .no-h>.n{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 55%,transparent);color:transparent}
.no-vertical [data-paso="hecho"] .no-h>.n::after{content:"";position:absolute;inset:0;margin:auto;width:13px;height:7px;border:solid var(--ok);border-width:0 0 2.5px 2.5px;transform:translateY(-2px) rotate(-45deg)}
.no-vertical [data-paso="omitido"] .no-h>.n{border-style:dashed}
.no-vertical .nv-ic{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--nv-tile);color:var(--primary);flex:none;transition:background var(--nv-t),color var(--nv-t)}
.no-vertical .nv-ic .i{width:17px;height:17px;stroke-width:2}
.no-vertical [data-paso="hecho"] .nv-ic{background:var(--ok-soft);color:var(--ok)}

/* ---------- Campos: con aire y completos ---------- */
.no-vertical .input,.no-vertical select.input{min-height:var(--nv-in);border-radius:var(--nv-r);font-size:13.5px;transition:border-color var(--nv-t),box-shadow var(--nv-t)}
.no-vertical .input:hover:not(:focus):not(:disabled){border-color:color-mix(in srgb,var(--primary) 30%,var(--line))}
.no-vertical .input:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--nv-ring)}
.no-vertical textarea.input{min-height:64px;resize:vertical}
.no-vertical .field{gap:5px;min-width:0}
.no-vertical .field>span{font-size:12.5px;font-weight:600;color:var(--ink2);white-space:normal}
.no-vertical .field>.hint{font-size:11.5px;font-weight:400;color:var(--muted)}

/* ---------- 1 · Cliente ---------- */
.no-vertical .selcli .input{min-height:42px;padding-left:38px;background:var(--surface) no-repeat 13px 50%/16px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238792A6' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E")}
.no-vertical .selcli .results{top:48px}
.no-vertical .picked{border-radius:14px;padding:10px 12px 10px 14px}
.no-vertical .picked>.i{color:var(--primary)}
.no-vertical .cv-caja{margin:0;border-radius:14px;padding:12px 14px}
.no-vertical .cv-datos{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr))}
.no-vertical .cv-f b{white-space:normal;overflow:visible;text-overflow:clip;overflow-wrap:anywhere}
.no-vertical .no-duena{margin:0;border-radius:14px}

/* ---------- 2 · Artículos ---------- */
.no-vertical .no-s-art{container-type:inline-size}
.no-vertical .oline{grid-template-columns:minmax(0,1fr) 78px 104px 108px 32px;gap:10px;padding:5px 8px 5px 5px;border-radius:13px;transition:border-color var(--nv-t),box-shadow var(--nv-t)}
.no-vertical .oline:hover{border-color:color-mix(in srgb,var(--primary) 25%,var(--line))}
.no-vertical .oline:focus-within{border-color:color-mix(in srgb,var(--primary) 50%,var(--line));box-shadow:0 0 0 3px var(--nv-ring)}
.no-vertical .oline.ol-head{padding:0 8px 0 12px;font-size:12px;font-weight:600;text-transform:none;letter-spacing:0;box-shadow:none}
.no-vertical .olines{gap:8px}
.no-vertical .ol-art .input{min-height:36px}
.no-vertical .ol-c .input.sm{min-height:36px}
.no-vertical .ol-num{font-size:14px;white-space:nowrap}
.no-vertical .ol-tags{flex-wrap:wrap}
.no-vertical .oline .x{border-radius:999px;transition:background var(--nv-t),color var(--nv-t)}
.no-vertical .oline .x:hover{color:var(--bad);background:var(--bad-soft)}
/* Nombre del artículo completo (baja de línea si es largo); al tocarlo aparece el buscador para cambiarlo */
.no-vertical .olf-nom{display:none}
.no-vertical .f-prod:not(:focus-within):has(>.olf-nom:not(:empty))>.olf-nom{display:block;padding:8px 12px;font-size:13.5px;line-height:1.35;color:var(--ink);overflow-wrap:anywhere;cursor:text;min-height:36px}
.no-vertical .f-prod:not(:focus-within):has(>.olf-nom:not(:empty))>input{position:absolute;inset:0;height:100%;opacity:0;z-index:1}
.no-vertical .no-art-acc .btn.sm{min-height:32px;padding:4px 14px;border-radius:999px;transition:background var(--nv-t)}
.no-vertical .no-art-acc .btn.sm:first-child{border-style:dashed;color:var(--primary);border-color:color-mix(in srgb,var(--primary) 40%,var(--line))}
.no-vertical .no-art-acc .btn.sm:hover{background:var(--primary-soft)}
@container (max-width:560px){
  .no-vertical .oline.ol-head{display:none}
  .no-vertical .oline{grid-template-columns:64px minmax(96px,1.2fr) minmax(0,1fr) 32px;row-gap:6px;padding:8px}
  .no-vertical .ol-art{grid-column:1/4;grid-row:1;flex-wrap:wrap}
  .no-vertical .ol-art .f-prod{flex:1 1 100%}
  .no-vertical .ol-c:nth-of-type(4){grid-column:3/5}
  .no-vertical .ol-c .input.sm{padding:5px 8px;width:100%}
  .no-vertical .oline .x{grid-column:4;grid-row:1}
  .no-vertical .ol-c{display:flex;flex-direction:column;gap:3px;text-align:left;grid-row:2}
  .no-vertical .ol-c::before{content:attr(data-l);font-size:11.5px;font-weight:600;color:var(--muted)}
  .no-vertical .ol-cambio{grid-column:1/-1}
}

/* ---------- 3 · Abono y comprobante: visor a la izquierda y datos a la derecha cuando hay espacio ---------- */
.no-vertical .abono-orden{container-type:inline-size}
.no-vertical .abono-orden .pago-grid{grid-template-columns:minmax(0,1fr);gap:16px}
.no-vertical .abono-orden .pago-visor{position:static;margin:0;padding:0;background:none}
.no-vertical .abono-orden .visor{min-height:180px;border-radius:14px}
.no-vertical .abono-orden .visor:has(>.visor-vacio){min-height:120px}
.no-vertical .abono-orden .zona{border-radius:14px}
.no-vertical .abono-orden .pf-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px 14px}
.no-vertical .abono-orden .pf-grid select.input{text-overflow:clip}
.no-vertical .abono-orden .tasa-box{border-radius:14px}
.no-vertical .abono-orden .tb-izq{max-width:none}
@container (min-width:720px){
  .no-vertical .abono-orden .pago-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:20px;align-items:start}
  .no-vertical .abono-orden .pago-visor{position:sticky;top:12px}
  .no-vertical .abono-orden .visor{min-height:300px}
  .no-vertical .abono-orden .visor:has(>.visor-vacio){min-height:240px}
}

/* ---------- 4 · Factura ---------- */
.no-vertical>.no-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:14px 16px;align-items:start}
.no-vertical>.no-side>.no-h,.no-vertical>.no-side>.rif-caja,.no-vertical>.no-side>.field:has(textarea){grid-column:1/-1}
.no-vertical>.no-side select.input{text-overflow:clip}
.no-vertical .no-pista{margin-top:6px;font-size:12px;line-height:1.4}

/* ---------- Final: total y «Crear orden» ---------- */
.no-vertical>.nv-fin{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 20px;padding:18px 20px;
  background:color-mix(in srgb,var(--primary-soft) 70%,var(--surface));border-color:color-mix(in srgb,var(--primary) 25%,var(--line))}
.no-vertical>.nv-fin::after{content:"";position:absolute;left:calc(-1 * var(--nv-gut) + 7px);top:calc(50% - 8px);width:16px;height:16px;border-radius:50%;background:var(--line);transition:background var(--nv-t),box-shadow var(--nv-t)}
.no-vertical>.nv-fin>.err{grid-column:1/-1;order:-1}
.no-vertical .nv-fin .no-total{display:flex;flex-direction:column;gap:0;border:0;padding:0}
.no-vertical .nv-fin .no-total small{font-size:12.5px;color:var(--ink2)}
.no-vertical .nv-fin .no-total .t{font-size:32px;line-height:1.1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.no-vertical .nv-fin .btn.full{width:auto;min-width:240px;min-height:48px;padding:0 28px;border-radius:999px;font-size:15px;font-weight:700;transition:transform var(--nv-t),box-shadow var(--nv-t)}
.no-vertical .nv-fin .btn.full:hover:not(:disabled){transform:translateY(-1px)}
.no-vertical.nf-listo>.nv-fin{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.no-vertical.nf-listo>.nv-fin::after{background:var(--ok);box-shadow:0 0 0 5px color-mix(in srgb,var(--ok) 18%,transparent)}
.no-vertical.nf-listo .nv-fin .btn.full{box-shadow:0 0 0 4px var(--nv-ring),0 10px 22px -10px var(--primary)}

/* Barrita fija abajo: total y atajo al final (se esconde cuando el final ya está a la vista) */
.no-vertical>.nv-barra{position:sticky;bottom:14px;z-index:5;margin-left:var(--nv-gut);align-self:center;display:flex;align-items:center;gap:14px;
  padding:6px 6px 6px 16px;border-radius:999px;border:1px solid var(--line);background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:var(--shadow);transition:opacity .2s,transform .2s}
.no-vertical>.nv-barra.oculta{opacity:0;transform:translateY(10px);pointer-events:none}
.no-vertical .nv-barra-l{display:flex;align-items:center;gap:8px}
.no-vertical .nv-barra-l .i{color:var(--primary);width:17px;height:17px}
.no-vertical .nv-barra-l small{font-size:12px}
.no-vertical .nv-barra-t{font-size:16px;white-space:nowrap}
.no-vertical .nv-barra .btn.sm{border-radius:999px;min-height:34px;padding:4px 14px;gap:6px}
.no-vertical .nv-barra .btn .i{width:15px;height:15px}

@media (prefers-reduced-motion:reduce){.no-vertical *{transition:none!important}}

/* ---------- Teléfono: línea más angosta, todo apilado ---------- */
@media (max-width:640px){
  .no-vertical{--nv-gut:30px;--nv-node:24px;--nv-gap:14px;padding:14px 12px 18px}
  .no-vertical .no-sec,.no-vertical>.no-side,.no-vertical>.nv-fin{padding:12px 13px 14px;border-radius:16px}
  .no-vertical .no-h>.n{top:12px;font-size:11.5px}
  .no-vertical .no-sec::before,.no-vertical>.no-side::before{top:calc(12px + var(--nv-node) + 5px)}
  .no-vertical .no-h .hint{margin-left:0;flex-basis:100%}
  .no-vertical .no-tipo{flex:1 1 auto}
  .no-vertical .no-tipo button{flex:1;justify-content:center;padding:6px 6px;font-size:12px}
  .no-vertical>.nv-fin{grid-template-columns:minmax(0,1fr)}
  .no-vertical>.nv-fin::after{left:calc(-1 * var(--nv-gut) + 4px)}
  .no-vertical .nv-fin .btn.full{width:100%;min-width:0}
  .no-vertical>.nv-barra{margin-left:0;align-self:stretch;bottom:10px;justify-content:space-between}
  .no-vertical .nv-barra-l small{display:none}
  .no-vertical .oline .x{width:34px;height:34px}
}