/* Pistón · órdenes de servicio — estilos del ejemplo conceptual de Software a medida (Alphyx v9). Aislado: todo
 * cuelga del prefijo ps- y de esta página; no comparte hojas con Alphyx ni con los otros ejemplos.
 * Identidad de herramienta de trabajo de taller: superficie gris lámina, paneles blancos, barra lateral grafito con
 * trama de tablero perforado, tipografía del sistema con cifras tabulares y monoespaciada para números de orden,
 * placas y datos. El color codifica SOLO la etapa de la orden (siempre con icono y texto); los botones principales
 * van en tinta neutra y el foco en naranja de seguridad. Firma: el llavero de orden (.ps-tag).
 * Sin JS (html sin .ps-js): todas las vistas legibles en secuencia, fichas incluidas. Movimiento en piston.js. */

:root {
  --ps-bg: #e7eaeb; --ps-panel: #fff; --ps-panel2: #f3f5f5; --ps-line: #d2d8da; --ps-line2: #aeb7bc;
  --ps-ink: #15191c; --ps-ink2: #434c52; --ps-ink3: #566067;
  --ps-side: #1f2528; --ps-side-ink: #e8ecee; --ps-side-ink2: #aab4b9;
  --ps-focus: #c2410c; --ps-focus-dark: #f59e5b;
  --ps-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
  --ps-ease: cubic-bezier(.22, 1, .36, 1);
  color-scheme: light;
  scroll-padding-top: 16px;
}
/* Etapas: tinta, fondo suave y borde. Contraste de la tinta sobre su fondo ≥ 5,8:1. */
.ps-st--recibido { --st: #46535b; --st-soft: #e2e7ea; --st-line: #aab5bc; }
.ps-st--diagnostico { --st: #5a3ea0; --st-soft: #ece7fa; --st-line: #bcaee6; }
.ps-st--esperando { --st: #7a4f00; --st-soft: #fbefd0; --st-line: #dfc07a; }
.ps-st--reparacion { --st: #1c4d8c; --st-soft: #dfe9f7; --st-line: #a3bde2; }
.ps-st--listo { --st: #22683a; --st-soft: #dcf1e2; --st-line: #9fcfae; }
.ps-st--entregado { --st: #3b4247; --st-soft: #e6e8e9; --st-line: #b5bbbf; }

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ps-bg); color: var(--ps-ink); font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; font-variant-numeric: tabular-nums; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--ps-focus); outline-offset: 2px; }
.ps-side :focus-visible, .ps-demo-bar :focus-visible { outline-color: var(--ps-focus-dark); }
[tabindex="-1"]:focus { outline: none; }
.ps-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
html:not(.ps-js) .ps-js-only { display: none !important; }
.ps-ico { width: 18px; height: 18px; flex: none; }
.ps-ico--s { width: 15px; height: 15px; }
.ps-ico--xs { width: 11px; height: 11px; }
.ps-muted { color: var(--ps-ink3); font-size: 13.5px; }
.ps-note { color: var(--ps-ink3); font-size: 13px; line-height: 1.45; margin-top: 10px; }
.ps-empty-s { color: var(--ps-ink3); font-size: 14px; padding: 6px 0; }
.ps-nowrap { white-space: nowrap; }

/* ——— Enlace de salto y barra de la demo ——— */
.ps-skip { position: absolute; left: 12px; top: -80px; z-index: 100; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; background: #fff; color: var(--ps-ink); font-weight: 600; text-decoration: none; box-shadow: 0 8px 24px #0000004d; }
.ps-skip:focus { top: 8px; }
.ps-demo-bar { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; min-height: 44px; padding: 0 16px; background: #101416; color: #e8ecee; font-size: 13px; }
.ps-demo-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding-right: 6px; color: #fff; font-weight: 600; text-decoration: none; }
.ps-demo-back:hover span { text-decoration: underline; }
.ps-demo-label { color: #d3dade; }
.ps-demo-note { margin-left: auto; color: #b8c2c7; }

/* ——— Estructura: barra lateral + contenido ——— */
.ps-app { display: grid; grid-template-columns: 216px minmax(0, 1fr); min-height: calc(100vh - 44px); background: linear-gradient(90deg, var(--ps-side) 216px, transparent 216px); }
.ps-side { position: sticky; top: 0; align-self: start; height: 100vh; display: flex; flex-direction: column; gap: 14px; padding: 18px 14px 16px; overflow-y: auto; color: var(--ps-side-ink); background: radial-gradient(circle at 1px 1px, #ffffff17 1.1px, transparent 1.4px) 0 0 / 14px 14px, var(--ps-side); --ps-mark-cut: var(--ps-side); }
.ps-brand { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 2px 6px; color: #fff; text-decoration: none; border-radius: 10px; }
.ps-mark { width: 30px; height: 30px; flex: none; color: #eef1f3; }
.ps-brand-t b { display: block; font-size: 20px; line-height: 1.05; letter-spacing: -.02em; }
.ps-brand-t small { display: block; color: var(--ps-side-ink2); font-size: 12px; }
.ps-nav ul { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.ps-nav a { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 10px; border-radius: 9px; color: var(--ps-side-ink); font-weight: 550; text-decoration: none; }
.ps-nav a:hover { background: #ffffff14; }
.ps-nav a[aria-current="page"] { background: #ffffff24; color: #fff; box-shadow: inset 3px 0 0 #fff; }
.ps-nav a.is-parent { background: #ffffff10; }
.ps-nav-l { white-space: nowrap; }
.ps-nav-n { margin-left: auto; min-width: 26px; padding: 1px 7px; border-radius: 999px; background: #ffffff21; color: #fff; font: 650 12px/1.5 var(--ps-mono); text-align: center; }
.ps-nav-n--warn { background: #fbefd0; color: #6b4500; }
.ps-region--in { display: inline; }
.ps-nav .ps-region--in { display: inline-flex; margin-left: auto; }
.ps-btn--new { width: 100%; background: #f3f5f6; color: var(--ps-ink); border-color: #f3f5f6; }
.ps-btn--new:hover { background: #fff; }
.ps-btn--new[aria-current="page"] { box-shadow: 0 0 0 2px var(--ps-side), 0 0 0 4px #f3f5f6; }
.ps-side-foot { margin-top: auto; display: grid; gap: 10px; font-size: 13px; }
.ps-user { display: flex; align-items: center; gap: 10px; color: var(--ps-side-ink); }
.ps-user small { display: block; color: var(--ps-side-ink2); }
.ps-av--me { --m: #3d474d; }
.ps-btn--ghost { background: transparent; color: var(--ps-side-ink); border-color: #4f5a60; }
.ps-btn--ghost:hover { background: #ffffff12; }
.ps-main { min-width: 0; padding: 26px 28px 64px; }
.ps-main:focus { outline: none; }
.ps-noscript { margin-bottom: 20px; padding: 14px 16px; border-radius: 12px; background: #fbefd0; color: #4a3200; }

/* ——— Vistas ——— */
.ps-js .ps-view { display: none; }
.ps-js .ps-view.is-active { display: block; }
html:not(.ps-js) .ps-view + .ps-view, html:not(.ps-js) .ps-fichas { margin-top: 48px; padding-top: 40px; border-top: 2px solid var(--ps-line2); }
html:not(.ps-js) .ps-fichas .ps-view + .ps-view { margin-top: 40px; padding-top: 32px; border-top: 1px dashed var(--ps-line2); }
.ps-fichas-t { margin-bottom: 20px; font-weight: 650; color: var(--ps-ink2); }
.ps-view-head { display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; margin-bottom: 20px; }
.ps-view-title { flex: 1 1 280px; min-width: 0; }
.ps-view-head h1 { font-size: 28px; line-height: 1.12; letter-spacing: -.02em; font-weight: 680; }
.ps-kicker { color: var(--ps-ink3); font-size: 12.5px; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; margin-bottom: 4px; }
.ps-sub { color: var(--ps-ink2); margin-top: 6px; }
.ps-cover { width: 176px; aspect-ratio: 16 / 10; flex: none; border-radius: 12px; }

/* ——— Piezas comunes ——— */
.ps-card { background: var(--ps-panel); border: 1px solid var(--ps-line); border-radius: 14px; padding: 18px 20px; }
.ps-card h2 { font-size: 17px; line-height: 1.25; font-weight: 680; letter-spacing: -.01em; display: flex; align-items: center; gap: 8px; }
.ps-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; margin-bottom: 12px; }
.ps-card-head p { color: var(--ps-ink3); font-size: 13.5px; }
.ps-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; min-width: 44px; padding: 0 16px; border: 1px solid var(--ps-line2); border-radius: 10px; background: #fff; color: var(--ps-ink); font-weight: 620; font-size: 14.5px; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.ps-btn:hover { background: var(--ps-panel2); border-color: #8f999f; }
.ps-btn--primary { background: var(--ps-ink); border-color: var(--ps-ink); color: #fff; }
.ps-btn--primary:hover { background: #2c3338; border-color: #2c3338; }
.ps-btn--s { padding: 0 12px; font-size: 13.5px; }
.ps-btn--wide { width: 100%; }
.ps-btn[aria-disabled="true"] { background: #eef0f1; border-style: dashed; border-color: #99a3a9; color: #4f595f; cursor: not-allowed; }
.ps-demo-price { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 6px; background: #fbefd0; color: #6b4500; font-size: 12px; font-weight: 650; letter-spacing: .01em; white-space: nowrap; }
.ps-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px 3px 7px; border-radius: 999px; background: var(--st-soft); color: var(--st); box-shadow: inset 0 0 0 1px var(--st-line); font-size: 13.5px; font-weight: 620; line-height: 1.3; white-space: nowrap; }
.ps-badge--s { font-size: 12.5px; padding: 2px 8px 2px 6px; }
.ps-badge--l { font-size: 15px; padding: 6px 14px 6px 10px; }
.ps-prio { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; color: var(--ps-ink2); white-space: nowrap; }
.ps-prio--urgente { color: #a31b1b; }
.ps-prio--normal { color: var(--ps-ink3); font-weight: 500; }
.ps-av { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--m); color: #fff; font: 700 11px/1 system-ui, sans-serif; letter-spacing: .02em; }
.ps-av--s { width: 24px; height: 24px; font-size: 10px; }
.ps-av--l { width: 48px; height: 48px; font-size: 16px; }
.ps-av--none { background: #d6dbde; color: #434c52; }
.ps-mec { display: inline-flex; align-items: center; gap: 8px; }
.ps-plate { display: inline-block; padding: 0 6px; border: 1.5px solid #59636a; border-radius: 4px; background: #fbfbf8; font: 650 12.5px/1.6 var(--ps-mono); letter-spacing: .04em; white-space: nowrap; }
.ps-when { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ps-ink2); white-space: nowrap; }
.ps-money { white-space: nowrap; }
.ps-num { font-variant-numeric: tabular-nums; }
.ps-roll { display: inline-flex; }
.ps-roll-col { display: inline-flex; flex-direction: column; height: 1lh; overflow: visible; line-height: inherit; }
.ps-roll-col span { display: block; height: 1lh; }
[data-roll] { display: inline-block; overflow: hidden; vertical-align: bottom; -webkit-mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(transparent, #000 22%, #000 78%, transparent); }
.ps-bar { position: relative; display: block; height: 6px; border-radius: 3px; background: #dde2e4; overflow: hidden; }
.ps-bar > span { position: absolute; inset: 0; background: var(--ps-ink2); transform-origin: 0 50%; transform: scaleX(var(--p)); border-radius: 3px; }
.ps-bar.is-full > span { background: #a31b1b; }
.ps-bar--l { height: 8px; border-radius: 4px; }

/* El llavero de orden: etiqueta numerada con su ojal, como la que cuelga de la llave de cada auto. */
.ps-tag { --h: 26px; position: relative; display: inline-flex; align-items: center; gap: 3px; height: var(--h); padding: 0 9px 0 19px; border: 1.5px solid var(--st); border-radius: 4px 13px 13px 4px; background: var(--st-soft); color: var(--st); font: 700 13px/1 var(--ps-mono); letter-spacing: .01em; white-space: nowrap; flex: none; }
.ps-tag small { font-size: 9px; font-weight: 700; opacity: .9; }
.ps-tag-hole { position: absolute; left: 5px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--st); }
.ps-tag--s { --h: 24px; font-size: 12px; padding-left: 17px; }
.ps-tag--s small { display: none; }
.ps-tag--l { --h: 54px; gap: 5px; padding: 0 18px 0 36px; border-width: 2px; border-radius: 6px 27px 27px 6px; font-size: 23px; transform-origin: 13px 50%; box-shadow: 0 10px 20px -14px #0000007a; }
.ps-tag--l small { font-size: 12px; }
.ps-tag--l .ps-tag-hole { left: 9px; width: 14px; height: 14px; margin-top: -7px; box-shadow: inset 0 0 0 2px var(--st); }
.ps-tag--l::before { content: ""; position: absolute; left: -12px; top: 50%; width: 30px; height: 30px; margin-top: -15px; border-radius: 50%; border: 2.5px solid #7d878c; clip-path: inset(0 55% 0 0); }

/* ——— Tablero del día ——— */
.ps-keys { padding-bottom: 20px; }
.ps-hooks { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.ps-hook { min-width: 0; border-radius: 12px; background: var(--ps-panel2); padding-bottom: 14px; box-shadow: inset 0 0 0 1px #e1e5e7; }
.ps-hook-link { display: grid; gap: 2px; min-height: 44px; padding: 10px 12px 8px; border-top: 4px solid var(--st); border-radius: 12px 12px 0 0; color: inherit; text-decoration: none; }
.ps-hook-link:hover { background: var(--st-soft); }
.ps-hook-top { display: flex; align-items: center; gap: 6px; color: var(--st); font-weight: 650; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-hook-n .ps-num { font-size: 32px; font-weight: 680; line-height: 1.15; letter-spacing: -.02em; }
.ps-hook-rail { display: block; height: 5px; margin: 4px 10px 0; border-radius: 3px; background: linear-gradient(#a3acb1, #7b8489); }
.ps-hook-tags { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 5px; margin: 0 12px; padding: 0; min-height: 60px; }
.ps-hook-tags li { position: relative; padding-top: 7px; }
.ps-hook-tags li::before { content: ""; position: absolute; left: 50%; top: 0; width: 1.5px; height: 9px; background: #7b8489; }
.ps-hook-tags .ps-tag { writing-mode: vertical-rl; height: auto; width: 24px; padding: 17px 0 7px; justify-content: flex-start; border-radius: 4px 4px 12px 12px; font-size: 11.5px; }
.ps-hook-tags .ps-tag-hole { left: 50%; top: 5px; margin: 0 0 0 -4px; }
.ps-hook-more { align-self: center; padding-top: 7px !important; color: var(--ps-ink3); font: 650 12px var(--ps-mono); }
.ps-hook-more::before { display: none; }
.ps-dash { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.ps-rows { list-style: none; padding: 0; display: grid; }
.ps-rows > li + li { border-top: 1px solid #e6e9eb; }
.ps-row { display: flex; align-items: center; gap: 10px; min-height: 54px; padding: 6px 8px; margin: 0 -8px; border-radius: 9px; color: inherit; text-decoration: none; }
.ps-row:hover { background: var(--ps-panel2); }
.ps-row-time { width: 44px; flex: none; font: 650 13px var(--ps-mono); }
.ps-row-main { flex: 1; min-width: 0; display: grid; }
.ps-row-main b { font-weight: 620; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-row-main small { color: var(--ps-ink3); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ps-row-amt { font-weight: 650; }
.ps-load-link { display: flex; align-items: center; gap: 12px; min-height: 54px; padding: 6px 8px; margin: 0 -8px; border-radius: 9px; color: inherit; text-decoration: none; }
.ps-load-link:hover { background: var(--ps-panel2); }
.ps-load-main { flex: 1; min-width: 0; display: grid; gap: 3px; }
.ps-load-main small { color: var(--ps-ink3); font-size: 13px; }
.ps-alerts { list-style: none; padding: 0; display: grid; gap: 8px; }
.ps-alert { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; border-radius: 10px; background: var(--ps-panel2); color: var(--ps-ink2); text-decoration: none; }
.ps-alert.is-on { background: #fdf3dc; color: #4a3200; box-shadow: inset 0 0 0 1px #e9cf8f; }
.ps-alert > span { flex: 1; }
.ps-alert b { font-weight: 620; }
.ps-alert:hover { filter: brightness(.97); }

/* ——— Órdenes: filtros, tabla y tarjetas ——— */
.ps-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; padding: 14px 16px; margin-bottom: 12px; border-radius: 14px; background: var(--ps-panel); border: 1px solid var(--ps-line); }
.ps-field { display: grid; gap: 4px; min-width: 0; }
.ps-field label { font-size: 13px; font-weight: 600; color: var(--ps-ink2); }
.ps-field label small { font-weight: 450; color: var(--ps-ink3); }
.ps-field--q { flex: 1 1 260px; }
.ps-q { position: relative; display: block; }
.ps-q .ps-ico { position: absolute; left: 12px; top: 50%; margin-top: -9px; color: var(--ps-ink3); pointer-events: none; }
.ps-q input[type="search"] { padding-left: 40px; }
input[type="search"], select, textarea { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--ps-line2); border-radius: 10px; background: #fff; font-size: 15px; }
textarea { padding: 10px 12px; resize: vertical; line-height: 1.4; }
select { padding-right: 32px; appearance: none; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23434c52' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 10px center / 16px; }
.ps-filters .ps-field:not(.ps-field--q) { flex: 0 1 190px; }
.ps-clear { align-self: flex-end; }
.ps-count-row { display: flex; align-items: center; justify-content: space-between; }
.ps-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--ps-panel); border: 1px solid var(--ps-line); border-radius: 14px; overflow: hidden; font-size: 14px; }
.ps-table thead th { padding: 10px 12px; background: var(--ps-panel2); border-bottom: 1px solid var(--ps-line); color: var(--ps-ink2); font-size: 12.5px; font-weight: 650; text-align: left; white-space: nowrap; }
.ps-table tbody th, .ps-table td { padding: 6px 12px; border-top: 1px solid #e6e9eb; text-align: left; vertical-align: middle; font-weight: inherit; }
.ps-table tbody tr:first-child th, .ps-table tbody tr:first-child td { border-top: 0; }
.ps-tr { cursor: pointer; }
.ps-tr:hover th, .ps-tr:hover td { background: #f6f8f8; }
.ps-olink { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; text-decoration: none; }
.ps-cell-veh { display: block; font-weight: 600; margin-bottom: 2px; }
.ps-ocards { list-style: none; padding: 0; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ps-ocard { position: relative; display: grid; gap: 4px; padding: 12px 14px; border-radius: 14px; background: var(--ps-panel); border: 1px solid var(--ps-line); }
.ps-ocard:hover { border-color: var(--ps-line2); }
.ps-ocard-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ps-ocard-t { font-size: 16px; font-weight: 650; }
.ps-ocard-t a { display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.ps-ocard-t a::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.ps-ocard-meta { color: var(--ps-ink3); font-size: 13.5px; }
.ps-ocard-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; margin-top: 6px; font-size: 13.5px; }
.ps-empty { display: grid; justify-items: center; gap: 10px; padding: 48px 20px; border-radius: 14px; background: var(--ps-panel); border: 1px dashed var(--ps-line2); text-align: center; }
.ps-empty h2 { font-size: 19px; }
.ps-empty p { color: var(--ps-ink2); max-width: 460px; }
.ps-empty .ps-tag { transform: rotate(-8deg); }

/* ——— Tablero por etapas ——— */
.ps-jump { display: none; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ps-jump-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 12px; border: 1px solid var(--st-line); border-radius: 999px; background: var(--st-soft); color: var(--st); font-weight: 620; font-size: 13.5px; cursor: pointer; }
.ps-jump-n { font: 650 12px var(--ps-mono); }
.ps-board { position: relative; overflow-x: auto; margin: 0 -28px; padding: 2px 28px 18px; scroll-padding: 0 28px; }
.ps-board-in { display: grid; grid-template-columns: repeat(6, minmax(178px, 1fr)); gap: 8px; min-width: min-content; }
.ps-col { position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 360px; padding: 8px 8px 12px; border-radius: 14px; background: #dde2e4; border-top: 4px solid var(--st); transition: background-color .15s ease, opacity .15s ease; }
.ps-col-head { display: flex; align-items: center; gap: 6px; min-height: 36px; margin: 0 4px 8px; font-size: 14px; font-weight: 680; }
.ps-col-head .ps-ico { color: var(--st); }
.ps-col-name { min-width: 0; line-height: 1.2; }
.ps-col-n { margin-left: auto; }
.ps-col-n .ps-num { min-width: 26px; padding: 1px 8px; border-radius: 999px; background: #fff; font: 650 12.5px/1.5 var(--ps-mono); text-align: center; }
.ps-col-list { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.ps-col-empty { margin: 4px; padding: 16px 10px; border: 1.5px dashed #b4bdc2; border-radius: 10px; color: var(--ps-ink3); font-size: 13px; text-align: center; }
.ps-drop-hint:empty { display: none; }
.ps-drop-hint { margin: 0 4px 8px; font-size: 12.5px; font-weight: 600; color: var(--st); }
.ps-kcard { position: relative; display: grid; gap: 2px; min-width: 0; padding: 8px 8px 10px 10px; border-radius: 11px; background: #fff; box-shadow: 0 1px 0 #00000012, 0 0 0 1px #0000000f; cursor: grab; -webkit-user-select: none; user-select: none; touch-action: auto; }
.ps-kcard:hover { box-shadow: 0 4px 12px -6px #00000040, 0 0 0 1px #0000001a; }
.ps-kcard-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.ps-kcard-t { font-size: 14.5px; font-weight: 650; line-height: 1.25; }
.ps-kcard-t a { display: flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; text-decoration: none; -webkit-user-drag: none; }
.ps-kcard-t a:hover { text-decoration: underline; }
.ps-kcard-meta { color: var(--ps-ink3); font-size: 13px; line-height: 1.35; }
.ps-kcard-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; margin-top: 6px; }
.ps-kcard-foot .ps-when { font-size: 12.5px; }
.ps-move { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; margin: -6px -4px -6px auto; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ps-ink2); font-size: 13px; font-weight: 650; cursor: pointer; }
.ps-move:hover, .ps-move[aria-expanded="true"] { background: var(--ps-panel2); color: var(--ps-ink); }
.ps-kcard.is-lifted { opacity: .35; box-shadow: inset 0 0 0 2px #8f999f; }
.ps-kghost { position: fixed; z-index: 60; margin: 0; pointer-events: none; list-style: none; box-shadow: 0 22px 40px -14px #00000066, 0 0 0 1px #00000024; cursor: grabbing; }
.ps-dragging, .ps-dragging * { cursor: grabbing !important; }
.ps-col.is-drop-ok { background: #edf0f1; box-shadow: inset 0 0 0 2px var(--st-line); }
.ps-col.is-over { background: var(--st-soft); box-shadow: inset 0 0 0 2px var(--st); }
.ps-col.is-drop-no { opacity: .5; }

/* Menú «Mover…» */
.ps-menu { position: fixed; z-index: 70; padding: 6px; border-radius: 14px; background: #fff; box-shadow: 0 18px 44px -10px #00000059, 0 0 0 1px #0000001f; }
.ps-menu-t { padding: 6px 10px 4px; color: var(--ps-ink3); font-size: 12.5px; font-weight: 650; }
.ps-menu [role="menu"] { display: grid; gap: 2px; }
.ps-menu-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; min-height: 44px; padding: 9px 10px; border: 0; border-radius: 9px; background: none; text-align: left; cursor: pointer; }
.ps-menu-item .ps-ico { margin-top: 2px; color: var(--st); }
.ps-menu-item b { display: block; font-weight: 620; }
.ps-menu-item small { display: block; color: var(--ps-ink3); font-size: 12.5px; line-height: 1.35; }
.ps-menu-item:hover, .ps-menu-item:focus { background: var(--ps-panel2); }
.ps-menu-item:focus-visible { outline-offset: -3px; }
.ps-menu-item[aria-disabled="true"] { cursor: not-allowed; }
.ps-menu-item[aria-disabled="true"] b { color: var(--ps-ink3); font-weight: 520; }

/* ——— Ficha de la orden ——— */
.ps-crumbs { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; color: var(--ps-ink3); font-size: 14px; }
.ps-crumbs a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; font-weight: 600; color: var(--ps-ink2); text-decoration: none; }
.ps-crumbs a:hover { text-decoration: underline; }
.ps-f-head { padding: 22px 24px 16px; border-radius: 16px; background: var(--ps-panel); border: 1px solid var(--ps-line); }
.ps-f-top { display: flex; align-items: center; gap: 18px 22px; flex-wrap: wrap; }
.ps-f-top .ps-tag--l { margin-left: 12px; }
.ps-f-title { flex: 1 1 320px; min-width: 0; }
.ps-f-title h1 { font-size: 25px; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; }
.ps-f-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-top: 10px; }
.ps-progress { position: relative; list-style: none; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 18px; padding: 0; }
.ps-progress li { position: relative; z-index: 1; display: grid; justify-items: center; gap: 4px; text-align: center; }
.ps-progress-dot { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px #b4bdc2; color: #fff; }
.ps-progress .is-done .ps-progress-dot { background: var(--ps-ink2); box-shadow: none; }
.ps-progress .is-current .ps-progress-dot { width: 34px; border-radius: 8px; background: var(--ps-ink); box-shadow: 0 0 0 4px #fff; }
.ps-progress-l { font-size: 12px; color: var(--ps-ink3); line-height: 1.25; }
.ps-progress .is-current .ps-progress-l { color: var(--ps-ink); font-weight: 650; }
.ps-progress li.ps-progress-bar { position: absolute; z-index: 0; left: calc(100% / 12); right: calc(100% / 12); top: 6.5px; height: 3px; border-radius: 2px; background: #dde2e4; overflow: hidden; }
.ps-progress-bar span { position: absolute; inset: 0; background: var(--ps-ink2); transform-origin: 0 50%; transform: scaleX(var(--p)); }
.ps-f-act { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; margin-top: 16px; }
.ps-f-cur { margin-bottom: 12px; }
.ps-trans { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px; }
.ps-trans-item { display: grid; gap: 6px; max-width: 100%; }
.ps-why { display: flex; gap: 6px; align-items: flex-start; max-width: 360px; color: #6b4500; font-size: 13px; line-height: 1.4; }
.ps-why .ps-ico { margin-top: 1px; }
.ps-f-act .ps-card:nth-child(2) > .ps-card, .ps-f-act .ps-field + .ps-field { margin-top: 12px; }
.ps-sel-av { display: flex; align-items: center; gap: 10px; }
.ps-f-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 16px; align-items: start; margin-top: 16px; }
.ps-f-main, .ps-f-log { display: grid; gap: 16px; min-width: 0; }
.ps-f-veh .ps-f-veh-body { min-width: 0; }
.ps-f-veh { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 20px; align-items: start; }
.ps-f-car { aspect-ratio: 4 / 3; border-radius: 12px; }
.ps-dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin-top: 12px; }
.ps-dl--1 { grid-template-columns: minmax(0, 1fr); }
.ps-dl dt { color: var(--ps-ink3); font-size: 12.5px; font-weight: 600; }
.ps-dl dd { font-weight: 560; }
.ps-dl dd small { color: var(--ps-ink3); font-weight: 450; }
.ps-sint { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ps-sint li { padding: 6px 12px; border-radius: 9px; background: var(--ps-panel2); box-shadow: inset 0 0 0 1px #dfe3e5; font-weight: 550; }
.ps-chk-list { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 20px; }
.ps-chk-row { display: grid; gap: 0 10px; align-content: center; min-height: 48px; padding: 4px 0; border-bottom: 1px solid #edf0f1; }
.ps-chk { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; }
.ps-chk input { position: absolute; opacity: 0; width: 24px; height: 24px; margin: 0; }
.ps-chk-box { display: grid; place-items: center; width: 24px; height: 24px; flex: none; border-radius: 50%; box-shadow: inset 0 0 0 2px #8f999f; background: #fff; }
.ps-chk-box svg { width: 18px; height: 18px; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 24; stroke-dashoffset: 24; }
.ps-chk input:checked + .ps-chk-box { background: var(--ps-ink); box-shadow: none; }
.ps-chk input:checked + .ps-chk-box svg { stroke-dashoffset: 0; }
.ps-chk input:focus-visible + .ps-chk-box { outline: 3px solid var(--ps-focus); outline-offset: 2px; }
.ps-chk-l { font-weight: 560; }
.ps-res { display: inline-flex; align-items: center; gap: 5px; margin-left: 34px; color: var(--ps-ink3); font-size: 13px; }
.ps-chk-row > .ps-chk-l + .ps-res { margin-left: 0; }
.ps-res--ok { color: var(--ps-ink2); }
.ps-res--att { color: #7a3a00; font-weight: 600; }
.ps-f-evid { aspect-ratio: 16 / 9; max-width: 520px; margin-top: 12px; border-radius: 12px; }
.ps-pres-st { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 12px; padding: 4px 10px; border-radius: 8px; font-size: 13.5px; font-weight: 620; }
.ps-pres-st--ok { background: #dcf1e2; color: #1d5a32; }
.ps-pres-st--wait { background: #fbefd0; color: #6b4500; }
.ps-pres-st--draft { background: var(--ps-panel2); color: var(--ps-ink2); }
.ps-ptable-wrap { margin: 0 -4px; }
.ps-ptable { width: 100%; border-collapse: collapse; font-size: 14px; }
.ps-ptable thead th { padding: 8px 6px; border-bottom: 2px solid var(--ps-ink); color: var(--ps-ink2); font-size: 12.5px; font-weight: 650; text-align: left; }
.ps-ptable tbody th, .ps-ptable tbody td { padding: 9px 6px; border-bottom: 1px solid #e6e9eb; vertical-align: top; }
.ps-ptable tbody th { font-weight: 560; text-align: left; }
.ps-ptable tbody th small { display: block; color: var(--ps-ink3); font-size: 12.5px; font-weight: 450; }
.ps-ptable tfoot th { padding: 7px 6px; text-align: right; font-weight: 560; color: var(--ps-ink2); }
.ps-ptable tfoot td { padding: 7px 6px; }
.ps-ptable .ps-total th, .ps-ptable .ps-total td { padding-top: 10px; border-top: 2px solid var(--ps-ink); color: var(--ps-ink); font-size: 17px; font-weight: 700; }
.ps-num-c { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ps-f-pres .ps-btn { margin-top: 14px; }
.ps-refs { list-style: none; padding: 0; display: grid; }
.ps-ref { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; padding: 10px 0; border-bottom: 1px solid #edf0f1; }
.ps-ref-main { flex: 1 1 220px; display: grid; min-width: 0; }
.ps-ref-main b { font-weight: 600; }
.ps-ref-main small { color: var(--ps-ink3); font-size: 13px; }
.ps-pst { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 8px; font-size: 13px; font-weight: 620; white-space: nowrap; }
.ps-pst--por-apartar { background: var(--ps-panel2); color: var(--ps-ink2); box-shadow: inset 0 0 0 1px #d7dcdf; }
.ps-pst--apartada, .ps-pst--recibida { background: #dcf1e2; color: #1d5a32; }
.ps-pst--pedida { background: #fbefd0; color: #6b4500; }
.ps-hist { list-style: none; padding: 0; margin-top: 10px; display: grid; }
.ps-hist li, .ps-notes li { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 10px; padding: 8px 0 8px; }
.ps-hist li::before { content: ""; position: absolute; left: 52px; top: 0; bottom: 0; width: 2px; background: #e3e7e9; }
.ps-hist li::after { content: ""; position: absolute; left: 49px; top: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--ps-ink2); box-shadow: 0 0 0 3px #fff; }
.ps-hist li:first-child::after { background: var(--ps-focus); }
.ps-hist-h { font: 650 12.5px/1.6 var(--ps-mono); color: var(--ps-ink2); }
.ps-hist-t { padding-left: 16px; font-size: 14px; }
.ps-hist-t small { display: block; color: var(--ps-ink3); font-size: 12.5px; }
.ps-notes { list-style: none; padding: 0; margin-top: 10px; display: grid; }
.ps-notes li { border-bottom: 1px solid #edf0f1; }
.ps-notes p { font-size: 14px; }
.ps-note-form { display: grid; gap: 10px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ps-line); }
.ps-err:empty { display: none; }
.ps-err { display: flex; align-items: center; gap: 6px; color: #a31b1b; font-size: 13.5px; font-weight: 600; }

/* ——— Nueva orden ——— */
.ps-wsteps { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; margin-bottom: 16px; }
.ps-wsteps li { display: flex; align-items: center; gap: 8px; color: var(--ps-ink3); font-size: 14px; }
.ps-wstep-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 14px; box-shadow: inset 0 0 0 2px #aeb7bc; font: 700 12.5px var(--ps-mono); color: var(--ps-ink2); }
.ps-wstep-mark svg { width: 16px; height: 16px; fill: none; stroke: #fff; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 20; }
.ps-wsteps .is-done .ps-wstep-mark { background: var(--ps-ink2); box-shadow: none; }
.ps-wsteps .is-current { color: var(--ps-ink); font-weight: 650; }
.ps-wsteps .is-current .ps-wstep-mark { width: 52px; background: var(--ps-ink); box-shadow: none; color: #fff; }
.ps-wiz { padding: 22px 24px; border-radius: 16px; background: var(--ps-panel); border: 1px solid var(--ps-line); }
.ps-wiz-t { font-size: 20px; letter-spacing: -.01em; }
.ps-wiz-body > .ps-sub { margin-bottom: 16px; }
.ps-wiz-body .ps-err { margin-bottom: 12px; }
.ps-opts { border: 0; padding: 0; margin: 0 0 18px; display: grid; gap: 8px; min-width: 0; }
.ps-opts legend { padding: 0; margin-bottom: 8px; font-weight: 650; font-size: 15px; }
.ps-opts--cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ps-opts--tipo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ps-opts--color, .ps-opts--row { display: flex; flex-wrap: wrap; }
.ps-opts[data-invalid] { padding: 10px; border-radius: 12px; box-shadow: inset 0 0 0 2px #e7a8a8; }
.ps-opt { position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px 14px; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px var(--ps-line2); cursor: pointer; }
.ps-opt:hover { background: var(--ps-panel2); }
.ps-opt:has(input:checked) { box-shadow: inset 0 0 0 2px var(--ps-ink); background: #f1f3f4; }
.ps-opt input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: var(--ps-ink); }
.ps-opt:has(input:disabled) { opacity: .6; cursor: not-allowed; }
.ps-opt-l { min-width: 0; font-weight: 560; }
.ps-opt-l small { display: block; color: var(--ps-ink3); font-size: 12.5px; font-weight: 450; }
.ps-opts--tipo .ps-opt { flex-direction: column; align-items: stretch; padding: 8px 8px 12px; }
.ps-opts--tipo .ps-opt input { position: absolute; left: 16px; top: 16px; z-index: 1; }
.ps-opt-photo { aspect-ratio: 16 / 10; border-radius: 8px; }
.ps-opts--tipo .ps-opt-l { padding-left: 4px; }
.ps-swatch { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px #0000003d; }
.ps-field--inline { max-width: 220px; margin-bottom: 18px; }
.ps-review { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 4px 0 8px; }
.ps-wiz-actions { display: flex; justify-content: space-between; gap: 12px; margin-top: 8px; padding-top: 16px; border-top: 1px solid var(--ps-line); }

/* ——— Refacciones ——— */
.ps-banner { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 14px; padding: 12px 16px; border-radius: 12px; background: #fdf3dc; color: #4a3200; box-shadow: inset 0 0 0 1px #e9cf8f; }
.ps-banner .ps-ico { margin-top: 1px; }
.ps-banner--ok { background: #dcf1e2; color: #1d4a2c; box-shadow: inset 0 0 0 1px #9fcfae; }
.ps-table--parts tbody th b { display: block; font-weight: 620; }
.ps-table--parts tbody th small { color: var(--ps-ink3); font: 12.5px var(--ps-mono); }
.ps-table--parts td, .ps-table--parts tbody th { padding-top: 10px; padding-bottom: 10px; }
.ps-stock { display: inline-grid; grid-template-columns: auto 64px; align-items: center; gap: 8px; margin-right: 10px; }
.ps-stock .ps-num { font: 700 17px var(--ps-mono); min-width: 1.4em; text-align: right; }
.ps-bar--agotada > span { background: #a31b1b; }
.ps-bar--bajo > span { background: #8a5a00; }
.ps-sst { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 620; white-space: nowrap; }
.ps-sst--ok { color: var(--ps-ink3); font-weight: 520; }
.ps-sst--bajo { color: #6b4500; }
.ps-sst--agotada { color: #a31b1b; }
.ps-min { display: block; color: var(--ps-ink3); font-size: 12px; }
.ps-pend { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 10px; }
.ps-pend a { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; min-width: 44px; text-decoration: none; }
.ps-pend-no { font: 650 13px var(--ps-mono); text-decoration: underline; text-underline-offset: 3px; }
.ps-pend small { font-size: 12.5px; color: var(--ps-ink3); }
.ps-pcards { list-style: none; padding: 0; display: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ps-pcard { display: grid; gap: 6px; padding: 14px 16px; border-radius: 14px; background: var(--ps-panel); border: 1px solid var(--ps-line); }
.ps-pcard h2 { font-size: 16px; }
.ps-pcard-stock { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; }
.ps-pcard-pend { display: flex; align-items: center; flex-wrap: wrap; gap: 0 10px; }

/* ——— Mecánicos ——— */
.ps-mcards { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: start; }
.ps-mcard-head { display: flex; align-items: center; gap: 14px; }
.ps-mcard-head p { color: var(--ps-ink3); font-size: 13.5px; }
.ps-mload { margin: 14px 0 6px; padding: 12px 14px; border-radius: 12px; background: var(--ps-panel2); }
.ps-mload p:first-child { margin-bottom: 8px; font-size: 14px; }
.ps-mload .ps-note { margin-top: 6px; }
.ps-mcard--none { background: #f6f7f7; border-style: dashed; }

/* ——— Diálogo «Apartar» ——— */
.ps-dialog { width: min(480px, calc(100% - 24px)); max-height: calc(100% - 24px); padding: 0; border: 0; border-radius: 18px; background: #fff; color: var(--ps-ink); box-shadow: 0 30px 70px -20px #00000080; }
.ps-dialog::backdrop { background: #0b0f11a6; }
.ps-dialog-in { display: grid; gap: 12px; padding: 22px 22px 18px; }
.ps-dialog h2 { font-size: 19px; }
.ps-dialog [data-ap-info] { color: var(--ps-ink2); font-size: 14px; }
.ps-opts-in { display: grid; gap: 8px; }
.ps-dialog-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }

/* ——— Fotos y marcadores ——— */
.ps-media { position: relative; overflow: hidden; background: #cfd5d8; }
.ps-fill, .ps-fill img { position: absolute; inset: 0; width: 100%; height: 100%; }
.ps-fill img { object-fit: cover; }
.ps-ph { background: radial-gradient(120% 90% at 28% 16%, #ffffffa6, transparent 60%), linear-gradient(160deg, #e3e7e9, #cbd2d5); }
.ps-ph-shape { position: absolute; left: 50%; top: 46%; width: min(46%, 140px); transform: translate(-50%, -50%); color: #6f7a80; opacity: .75; }
.ps-ph-note { position: absolute; left: 8px; bottom: 8px; padding: 1px 7px; border-radius: 6px; background: #f7f8f8eb; color: #3f484d; font: 600 11.5px/1.6 var(--ps-mono); }

/* ——— Pie ——— */
.ps-footer { padding: 36px 28px 44px 244px; background: #d9dee0; color: var(--ps-ink2); font-size: 14px; }
.ps-footer-in { display: grid; gap: 12px; max-width: 900px; }
.ps-footer-mark { display: flex; align-items: center; gap: 8px; color: var(--ps-ink); --ps-mark-cut: #d9dee0; }
.ps-footer-mark .ps-mark { width: 24px; height: 24px; color: var(--ps-ink); }
.ps-footer-note { color: var(--ps-ink3); }
.ps-footer-links { display: flex; flex-wrap: wrap; gap: 0 22px; }
.ps-footer-links a, .ps-credits-list a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; text-underline-offset: 3px; }
.ps-footer-small { color: var(--ps-ink3); font-size: 13px; }
.ps-footer-reset { justify-self: start; }
.ps-credits-title { font-weight: 600; }
.ps-credits-list { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0 18px; }
.ps-credits-list li { display: inline-flex; align-items: center; gap: 8px; }
.ps-credits-list span { color: var(--ps-ink3); font-size: 12.5px; }

/* ——— Anchos intermedios ——— */
@media (max-width: 1320px) {
  .ps-jump { display: flex; }
  .ps-hooks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ps-mcards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1099px) {
  .ps-table { display: none; }
  .ps-ocards, .ps-pcards { display: grid; }
  .ps-dash { grid-template-columns: minmax(0, 1fr); }
  .ps-f-grid, .ps-f-act { grid-template-columns: minmax(0, 1fr); }
  .ps-review { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 899px) {
  .ps-app { grid-template-columns: minmax(0, 1fr); }
  .ps-side { position: static; height: auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 16px; overflow: visible; }
  .ps-nav-host { grid-column: 1 / -1; min-width: 0; }
  .ps-nav ul { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .ps-nav ul::-webkit-scrollbar { display: none; }
  .ps-nav a { padding: 0 12px; }
  .ps-nav a[aria-current="page"] { box-shadow: inset 0 -3px 0 #fff; }
  .ps-btn--new { width: auto; grid-row: 1; grid-column: 2; }
  .ps-app { background: none; }
  .ps-side-foot { display: none; }
  .ps-main { padding: 20px 16px 48px; }
  .ps-board { margin: 0 -16px; padding: 2px 16px 16px; scroll-padding: 0 16px; scroll-snap-type: x proximity; }
  .ps-board-in { grid-template-columns: repeat(6, minmax(260px, 1fr)); }
  .ps-col { scroll-snap-align: start; }
  .ps-footer { padding: 28px 16px 40px; }
  .ps-mcards { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .ps-demo-note { display: none; }
  .ps-long { display: none; }
  .ps-view-head h1 { font-size: 24px; }
  .ps-view-head--cover .ps-cover { width: 100%; aspect-ratio: 16 / 6; }
  .ps-view-head .ps-btn { width: 100%; }
  .ps-hooks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ps-card { padding: 16px; }
  .ps-ocards, .ps-pcards { grid-template-columns: minmax(0, 1fr); }
  .ps-filters .ps-field:not(.ps-field--q) { flex: 1 1 calc(50% - 6px); }
  .ps-board-in { grid-template-columns: repeat(6, calc(100vw - 56px)); }
  .ps-f-head { padding: 18px 16px 14px; }
  .ps-f-title h1 { font-size: 21px; }
  .ps-progress li:not(.is-current) .ps-progress-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ps-progress .is-current .ps-progress-l { white-space: nowrap; }
  .ps-f-veh { grid-template-columns: minmax(0, 1fr); }
  .ps-dl, .ps-chk-list, .ps-opts--cols, .ps-review { grid-template-columns: minmax(0, 1fr); }
  .ps-opts--tipo { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  .ps-opts--tipo .ps-opt { padding: 6px 6px 10px; font-size: 14px; }
  .ps-col-unit { display: none; }
  .ps-wiz { padding: 18px 16px; }
  .ps-wiz-actions .ps-btn { flex: 1; }
  .ps-trans-item, .ps-trans .ps-btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}