/* Ventas → Nueva orden · estilo «Fluido+» (Configuración → Ajustes generales → Estilo de Nueva orden).
   Reutiliza el aspecto de Fluido (nueva_orden_fluida.css también aplica a .no-fmas: barra de pasos, tarjetas, campos completos)
   y aquí solo cambia el orden: una columna de arriba a abajo (Cliente → Artículos → Abono → Factura → total y «Crear orden» al final).
   La barra de pasos queda fija arriba al deslizar; la página sí se desliza. Colores: solo variables del tema. */

.norden.no-fmas{
  display:flex;flex-direction:column;align-items:stretch;gap:12px;height:auto;min-height:0;
  width:100%;max-width:1040px;margin:0 auto;padding:12px 16px 20px;box-sizing:border-box;background:none;border-radius:0
}
/* Barra de pasos: siempre a la vista mientras se baja */
.no-fmas>.nf-riel{position:sticky;top:8px;z-index:6;background:var(--surface)}
/* Títulos de la barra: todos iguales (misma línea base); el paso actual en una pastilla suave, los hechos con ✓ verde,
   las sub-etiquetas en gris (la del paso actual en el color principal). Sin subrayados. */
.no-fmas .nf-paso{padding:4px 12px 4px 4px;align-items:center}
.no-fmas .nf-txt{gap:1px}
.no-fmas .nf-txt b{font-size:12.5px;font-weight:600;line-height:1.2;color:var(--ink2)}
.no-fmas .nf-sub,.no-fmas.nf-listo .nf-li:last-child .nf-sub{font-size:11px;line-height:1.2;font-weight:400;color:var(--muted)}
.no-fmas .nf-paso[data-estado="actual"]{background:var(--nf-tile)}
.no-fmas .nf-paso[data-estado="actual"] .nf-txt b{color:var(--ink);font-weight:700}
.no-fmas .nf-paso[data-estado="actual"] .nf-sub{color:var(--primary);font-weight:500}
.no-fmas .nf-paso[data-estado="actual"] .nf-num{box-shadow:none}
.no-fmas .nf-paso[data-estado="hecho"] .nf-txt b{color:var(--ink)}
.no-fmas .nf-paso.nf-vista:not([data-estado="actual"]){background:var(--nf-back)}
.no-fmas.nf-listo .nf-li:last-child .nf-paso .nf-num{box-shadow:none}

/* Títulos de las tarjetas: el mismo círculo que la barra (número · icono si es el actual · ✓ si está hecho) */
.no-fmas .no-h{gap:10px;min-height:28px;align-items:center}
.no-fmas .no-h h3{font-size:14px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.no-fmas .no-h .hint{font-size:11.5px;color:var(--muted)}
.no-fmas .no-h .n.nf-num{width:28px;height:28px;border-radius:50%;background:var(--surface);color:var(--muted);font-size:12px}
.no-fmas [data-paso="actual"]>.no-h .nf-num{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.no-fmas [data-paso="actual"]>.no-h .nf-n,.no-fmas [data-paso="hecho"]>.no-h .nf-n{display:none}
.no-fmas [data-paso="actual"]>.no-h .nf-ic{display:block}
.no-fmas [data-paso="hecho"]>.no-h .nf-num{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 50%,transparent);color:var(--ok)}
.no-fmas [data-paso="hecho"]>.no-h .nf-ok{display:block}
.no-fmas [data-paso="omitido"]>.no-h .nf-num{border-style:dashed}

/* Paso 2 · Tipo de factura: el tipo de factura, el tipo de pedido y el delivery juntos */
.no-fmas .nf-tipo-g{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px 14px;align-items:end}
.no-fmas .nf-pedido .no-tipo-fila{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.no-fmas .nf-pedido .no-tipo{padding:3px;background:var(--nf-back)}
.no-fmas .nf-pedido .no-tipo button{padding:5px 12px;font-size:12.5px}
.no-fmas .nf-pedido .no-tipo .i{display:inline-block}
.no-fmas .nf-pedido .no-deliv{width:34px;height:34px}

/* Columna única: las tarjetas no se deslizan por dentro */
.no-fmas>.no-main,.no-fmas>.no-side,.no-fmas>.abono-orden{overflow:visible;min-height:auto}
.no-fmas>.no-main{display:flex;flex-direction:column;gap:12px}
.no-fmas .no-sec,.no-fmas>.no-side,.no-fmas>.nv-fin{scroll-margin-top:84px}
.no-fmas .no-main>.abono-orden{border-top:1px solid var(--line);padding-top:11px}
.no-fmas .no-h .hint{margin-left:auto}

/* Artículos: con el ancho de la columna caben en una línea (el nombre largo baja de renglón) */
.no-fmas .oline{grid-template-columns:minmax(0,1fr) 64px 96px 100px 28px}

/* Abono: comprobante a la izquierda y datos a la derecha cuando hay espacio; si no, uno debajo del otro */
.no-fmas .abono-orden{container-type:inline-size}
.no-fmas .abono-orden .visor:has(>.visor-vacio){display:flex;min-height:96px}
.no-fmas .abono-orden .pf-grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr))}
.no-fmas .abono-orden .pf-grid>.field:nth-child(4),.no-fmas .abono-orden .pf-grid>.field:nth-child(6){grid-column:auto}
@container (min-width:700px){
  .no-fmas .abono-orden .pago-grid{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:16px;align-items:start}
  .no-fmas .abono-orden .pago-visor{position:sticky;top:80px}
  .no-fmas .abono-orden .visor{max-height:none;min-height:220px}
  .no-fmas .abono-orden .visor:has(>.visor-vacio){min-height:120px}
  .no-fmas .abono-orden .visor-img{max-height:420px}
  .no-fmas .abono-orden .visor-pdf{height:360px}
}

/* Factura: los campos en una cuadrícula que se acomoda; la observación a lo ancho */
.no-fmas>.no-side{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:10px 14px;align-items:start;padding-bottom:13px}
.no-fmas>.no-side>.no-h,.no-fmas>.no-side>.rif-caja,.no-fmas>.no-side>.field:has(textarea){grid-column:1/-1}
.no-fmas>.no-side textarea.input{height:auto;min-height:52px}

/* Final: total y «Crear orden» */
.no-fmas>.nv-fin{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px 18px;padding:14px 16px;border-radius:var(--nf-card);
  border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line));background:color-mix(in srgb,var(--primary-soft) 70%,var(--surface));box-shadow:var(--shadow);
  transition:background var(--nf-t),border-color var(--nf-t)}
.no-fmas>.nv-fin>.err{grid-column:1/-1;order:-1;font-size:12.5px}
.no-fmas .nv-fin .no-total{display:flex;flex-direction:column;gap:0;border:0;padding:0;background:none;margin:0}
.no-fmas .nv-fin .no-total small{font-size:12px;color:var(--ink2)}
.no-fmas .nv-fin .no-total .t{font-size:28px;line-height:1.1;letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.no-fmas .nv-fin .btn.full{width:auto;min-width:220px;min-height:44px;padding:0 26px;border-radius:999px;font-size:14.5px;font-weight:700;transition:transform var(--nf-t),box-shadow var(--nf-t)}
.no-fmas .nv-fin .btn.full:hover:not(:disabled){transform:translateY(-1px)}
.no-fmas.nf-listo>.nv-fin{background:var(--ok-soft);border-color:color-mix(in srgb,var(--ok) 40%,var(--line))}
.no-fmas.nf-listo .nv-fin .btn.full{box-shadow:0 0 0 4px var(--nf-ring),0 10px 22px -10px var(--primary)}

/* Barrita fija abajo: total y atajo al final (se esconde cuando el final está a la vista) */
.no-fmas>.nv-barra{position:sticky;bottom:14px;z-index:5;align-self:center;display:flex;align-items:center;gap:14px;
  padding:5px 5px 5px 14px;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-fmas>.nv-barra.oculta{opacity:0;transform:translateY(10px);pointer-events:none}
.no-fmas .nv-barra-l{display:flex;align-items:center;gap:8px}
.no-fmas .nv-barra-l .i{color:var(--primary);width:16px;height:16px}
.no-fmas .nv-barra-l small{font-size:12px}
.no-fmas .nv-barra-t{font-size:15px;white-space:nowrap}
.no-fmas .nv-barra .btn.sm{border-radius:999px;min-height:32px;padding:4px 13px;gap:6px}
.no-fmas .nv-barra .btn .i{width:14px;height:14px}

/* Teléfono */
@media (max-width:980px){
  .norden.no-fmas{padding:10px 10px 16px}
  .no-fmas>.nf-riel{top:4px}
}
@media (max-width:640px){
  .no-fmas>.nv-fin{grid-template-columns:minmax(0,1fr)}
  .no-fmas .nv-fin .btn.full{width:100%;min-width:0}
  .no-fmas>.nv-barra{align-self:stretch;justify-content:space-between;bottom:10px}
  .no-fmas .nv-barra-l small{display:none}
  .no-fmas .no-sec,.no-fmas>.no-side,.no-fmas>.nv-fin{scroll-margin-top:150px}
}
/* Teléfono: más compacto; al bajar, el tipo de pedido se va y los pasos quedan fijos arriba */
@media (max-width:640px){
  .no-fmas>.nf-riel{top:4px}
  .no-fmas .nf-paso{padding:3px}
  .no-fmas .nf-pedido .no-tipo{flex:1 1 auto}
  .no-fmas .abono-orden .pf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .no-fmas .abono-orden .pf-grid>.field:nth-child(4),.no-fmas .abono-orden .pf-grid>.field:nth-child(6){grid-column:1/-1}
  .no-fmas .abono-orden .visor:has(>.visor-vacio){min-height:72px}
  .no-fmas .no-sec,.no-fmas>.no-side,.no-fmas>.nv-fin{scroll-margin-top:96px}
}
@media (max-width:640px){.no-fmas .nf-pedido .no-tipo .i{display:none}.no-fmas .nf-pedido .no-tipo button{flex:1;padding:6px 6px}}