diff --git a/pos/static/css/workshop.css b/pos/static/css/workshop.css
index d408358..c691f29 100644
--- a/pos/static/css/workshop.css
+++ b/pos/static/css/workshop.css
@@ -1,28 +1,556 @@
-:root {
-  --kanban-column-width: 280px;
-  --kanban-card-bg: var(--glass-bg-strong);
-  --kanban-card-border: var(--glass-border);
+/* workshop.css — Taller / Service Orders Kanban (design-system aligned) */
+
+/* ═══════════════════════════════════════════════════════════════
+   BASE RESET & SHELL
+   ═══════════════════════════════════════════════════════════════ */
+
+*, *::before, *::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+html, body {
+  height: 100%;
+}
+
+body {
+  font-family: var(--font-body);
+  font-size: var(--text-body-sm);
+  color: var(--color-text-primary);
+  background-color: var(--color-bg-base);
+  overflow: hidden;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+[data-theme="modern"] body {
+  background-color: var(--color-bg-base);
+  background-image: radial-gradient(
+    circle,
+    var(--dot-grid-color) 1px,
+    transparent 1px
+  );
+  background-size: var(--dot-grid-size) var(--dot-grid-size);
+}
+
+.app-shell {
+  display: flex;
+  height: 100vh;
+}
+
+.main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  min-width: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   PAGE HEADER
+   ═══════════════════════════════════════════════════════════════ */
+
+.page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-6);
+  background: var(--color-bg-elevated);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+[data-theme="industrial"] .page-header {
+  background: var(--color-surface-1);
+}
+
+.page-header__title-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.page-header__eyebrow {
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-widest);
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+}
+
+.page-header__title {
+  font-family: var(--font-heading);
+  font-weight: var(--heading-weight-primary);
+  font-size: var(--text-h4);
+  letter-spacing: var(--heading-tracking-h4);
+  color: var(--color-text-primary);
+  line-height: 1.2;
+}
+
+[data-theme="industrial"] .page-header__title {
+  text-transform: uppercase;
+}
+
+.page-header__actions {
+  display: flex;
+  align-items: center;
+  gap: var(--space-3);
 }
 
 .page-header__subtitle {
   color: var(--color-text-muted);
-  font-size: var(--text-sm);
+  font-size: var(--text-body-sm);
   margin-top: var(--space-1);
 }
 
+/* ═══════════════════════════════════════════════════════════════
+   SUMMARY CARDS
+   ═══════════════════════════════════════════════════════════════ */
+
+.summary-strip {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--space-4);
+  padding: var(--space-4) var(--space-6);
+  background: var(--color-bg-base);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+[data-theme="modern"] .summary-strip {
+  background: transparent;
+}
+
+.summary-card {
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  padding: var(--space-4) var(--space-5);
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-3);
+  box-shadow: var(--shadow-sm);
+  transition: var(--transition-normal);
+}
+
+.summary-card:hover {
+  box-shadow: var(--shadow-md);
+  border-color: var(--color-border-strong);
+}
+
+[data-theme="industrial"] .summary-card {
+  border-left: 3px solid var(--color-primary);
+}
+
+[data-theme="modern"] .summary-card {
+  background: var(--color-bg-overlay);
+}
+
+.summary-card__icon {
+  width: 38px;
+  height: 38px;
+  border-radius: var(--radius-md);
+  background: var(--color-primary-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.summary-card__icon svg {
+  width: 20px;
+  height: 20px;
+  stroke: var(--color-primary);
+  fill: none;
+  stroke-width: 1.75;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.summary-card__icon--ok {
+  background: rgba(34, 197, 94, 0.12);
+}
+.summary-card__icon--ok svg {
+  stroke: var(--color-success);
+}
+
+.summary-card__icon--alert {
+  background: rgba(239, 68, 68, 0.12);
+}
+.summary-card__icon--alert svg {
+  stroke: var(--color-error);
+}
+
+.summary-card__body {
+  flex: 1;
+  min-width: 0;
+}
+
+.summary-card__label {
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  margin-bottom: var(--space-1);
+}
+
+.summary-card__value {
+  font-family: var(--font-heading);
+  font-weight: var(--heading-weight-primary);
+  font-size: 1.5rem;
+  color: var(--color-text-primary);
+  line-height: 1.1;
+}
+
+.summary-card__value--danger {
+  color: var(--color-error);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BUTTONS
+   ═══════════════════════════════════════════════════════════════ */
+
+.btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: 0 var(--space-4);
+  height: 36px;
+  border-radius: var(--radius-md);
+  font-family: var(--font-body);
+  font-size: var(--text-body-sm);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-wide);
+  cursor: pointer;
+  border: 1px solid transparent;
+  transition: var(--transition-fast);
+  text-decoration: none;
+  white-space: nowrap;
+}
+
+.btn svg {
+  width: 15px;
+  height: 15px;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+  flex-shrink: 0;
+}
+
+.btn--primary {
+  background: var(--btn-primary-bg);
+  color: var(--btn-primary-text);
+  border-color: var(--btn-primary-border);
+}
+
+.btn--primary:hover {
+  background: var(--btn-primary-bg-hover);
+}
+
+.btn--secondary {
+  background: var(--btn-secondary-bg);
+  color: var(--btn-secondary-text);
+  border-color: var(--btn-secondary-border);
+}
+
+.btn--secondary:hover {
+  background: var(--btn-secondary-bg-hover);
+}
+
+.btn--ghost {
+  background: var(--btn-ghost-bg);
+  color: var(--btn-ghost-text);
+  border-color: var(--btn-ghost-border);
+}
+
+.btn--ghost:hover {
+  background: var(--color-surface-2);
+  border-color: var(--color-border-strong);
+  color: var(--color-text-primary);
+}
+
+.btn--sm {
+  height: 28px;
+  padding: 0 var(--space-3);
+  font-size: var(--text-caption);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   DATA TABLE
+   ═══════════════════════════════════════════════════════════════ */
+
+.table-wrapper {
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  overflow: hidden;
+  box-shadow: var(--shadow-sm);
+}
+
+[data-theme="modern"] .table-wrapper {
+  background: var(--color-bg-overlay);
+}
+
+.data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-body-sm);
+}
+
+.data-table thead {
+  position: sticky;
+  top: 0;
+  background: var(--color-surface-2);
+  border-bottom: 1px solid var(--color-border);
+  z-index: 10;
+}
+
+[data-theme="industrial"] .data-table thead {
+  background: var(--color-surface-3);
+}
+
+.data-table th {
+  padding: var(--space-3) var(--space-4);
+  text-align: left;
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--tracking-wider);
+  text-transform: uppercase;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+.data-table th:first-child { padding-left: var(--space-5); }
+.data-table th:last-child  { padding-right: var(--space-5); }
+
+.data-table tbody tr {
+  border-bottom: 1px solid var(--color-border);
+  transition: background var(--duration-fast) var(--ease-in-out);
+}
+
+.data-table tbody tr:last-child {
+  border-bottom: none;
+}
+
+.data-table tbody tr:hover {
+  background: var(--color-surface-2);
+}
+
+.data-table td {
+  padding: var(--space-3) var(--space-4);
+  color: var(--color-text-secondary);
+  vertical-align: middle;
+}
+
+.data-table td:first-child { padding-left: var(--space-5); }
+.data-table td:last-child  { padding-right: var(--space-5); }
+
+.data-table .td--primary {
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+.data-table .td--mono {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--color-text-accent);
+}
+
+.data-table .td--amount {
+  font-family: var(--font-mono);
+  font-size: 0.8125rem;
+  color: var(--color-text-primary);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   BADGES
+   ═══════════════════════════════════════════════════════════════ */
+
+.badge--reserved {
+  background: rgba(99, 102, 241, 0.12);
+  color: #818cf8;
+}
+
+.badge--installed {
+  background: rgba(34, 197, 94, 0.12);
+  color: var(--color-success);
+}
+
+.badge--normal {
+  background: var(--color-primary-muted);
+  color: var(--color-primary);
+}
+
+.badge--high {
+  background: rgba(234, 179, 8, 0.12);
+  color: var(--color-warning);
+}
+
+.badge--urgent {
+  background: rgba(239, 68, 68, 0.12);
+  color: var(--color-error);
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   FORMS
+   ═══════════════════════════════════════════════════════════════ */
+
+.form-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-3);
+}
+
+.form-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
+
+.form-field--span2,
+.form-field--span3,
+.form-field--span4 {
+  grid-column: 1 / -1;
+}
+
+.form-label {
+  font-size: var(--text-caption);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  letter-spacing: var(--tracking-wide);
+  text-transform: uppercase;
+}
+
+.form-input,
+.form-select {
+  padding: var(--space-2) var(--space-3);
+  background: var(--color-surface-1);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-primary);
+  font-family: var(--font-body);
+  font-size: var(--text-body-sm);
+  outline: none;
+  transition: var(--transition-fast);
+  width: 100%;
+}
+
+.form-input:focus,
+.form-select:focus {
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 2px var(--color-primary-muted);
+}
+
+.form-field textarea.form-input {
+  min-height: 80px;
+  resize: vertical;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   MODALS
+   ═══════════════════════════════════════════════════════════════ */
+
+.modal-overlay {
+  display: none;
+  position: fixed;
+  inset: 0;
+  z-index: 9000;
+  background: rgba(0,0,0,0.6);
+  backdrop-filter: blur(4px);
+  align-items: center;
+  justify-content: center;
+}
+
+.modal-overlay.is-open {
+  display: flex;
+}
+
+.modal {
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-lg);
+  width: 520px;
+  max-height: 85vh;
+  overflow-y: auto;
+  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
+  display: flex;
+  flex-direction: column;
+}
+
+.modal--lg {
+  width: 720px;
+  max-width: 90vw;
+}
+
+.modal__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-4) var(--space-5);
+  border-bottom: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+.modal__header h2,
+.modal__header h3 {
+  font-family: var(--font-heading);
+  font-weight: var(--heading-weight-primary);
+  font-size: var(--text-h5);
+  color: var(--color-text-primary);
+  margin: 0;
+}
+
+.modal__close {
+  background: none;
+  border: none;
+  font-size: 1.5rem;
+  color: var(--color-text-muted);
+  cursor: pointer;
+  padding: 0 var(--space-1);
+  line-height: 1;
+}
+
+.modal__close:hover {
+  color: var(--color-text-primary);
+}
+
+.modal__body {
+  padding: var(--space-4) var(--space-5);
+  overflow-y: auto;
+}
+
+.modal__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--space-3);
+  padding: var(--space-3) var(--space-5);
+  border-top: 1px solid var(--color-border);
+  flex-shrink: 0;
+}
+
+/* ═══════════════════════════════════════════════════════════════
+   KANBAN BOARD
+   ═══════════════════════════════════════════════════════════════ */
+
 .kanban-board {
+  flex: 1;
   display: flex;
   gap: var(--space-4);
   overflow-x: auto;
-  padding-bottom: var(--space-4);
-  min-height: 60vh;
+  padding: var(--space-4) var(--space-6);
+  min-height: 0;
 }
 
 .kanban-column {
-  flex: 0 0 var(--kanban-column-width);
+  flex: 0 0 280px;
   display: flex;
   flex-direction: column;
-  max-height: 75vh;
+  max-height: 100%;
 }
 
 .kanban-column__header {
@@ -30,20 +558,25 @@
   align-items: center;
   justify-content: space-between;
   padding: var(--space-3) var(--space-4);
-  background: var(--glass-bg-strong);
-  border: 1px solid var(--glass-border);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-md) var(--radius-md) 0 0;
   font-family: var(--font-heading);
-  font-size: var(--text-sm);
+  font-size: var(--text-body-sm);
   font-weight: var(--font-weight-bold);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
+  flex-shrink: 0;
+}
+
+[data-theme="modern"] .kanban-column__header {
+  background: var(--color-bg-overlay);
 }
 
 .kanban-column__count {
   background: var(--color-primary);
-  color: var(--color-bg);
-  font-size: var(--text-xs);
+  color: var(--color-text-inverse);
+  font-size: var(--text-caption);
   padding: 2px 8px;
   border-radius: var(--radius-full);
 }
@@ -51,8 +584,8 @@
 .kanban-column__body {
   flex: 1;
   overflow-y: auto;
-  background: rgba(0, 0, 0, 0.15);
-  border: 1px solid var(--glass-border);
+  background: var(--color-surface-2);
+  border: 1px solid var(--color-border);
   border-top: none;
   border-radius: 0 0 var(--radius-md) var(--radius-md);
   padding: var(--space-3);
@@ -62,17 +595,22 @@
 }
 
 .kanban-card {
-  background: var(--kanban-card-bg);
-  border: 1px solid var(--kanban-card-border);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: var(--space-3);
   cursor: pointer;
-  transition: transform 0.15s ease, box-shadow 0.15s ease;
+  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
 }
 
 .kanban-card:hover {
   transform: translateY(-2px);
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--shadow-lg);
+  border-color: var(--color-border-strong);
+}
+
+[data-theme="modern"] .kanban-card {
+  background: var(--color-bg-overlay);
 }
 
 .kanban-card__header {
@@ -80,34 +618,28 @@
   justify-content: space-between;
   align-items: flex-start;
   margin-bottom: var(--space-2);
+  gap: var(--space-2);
 }
 
 .kanban-card__id {
   font-family: var(--font-mono);
-  font-size: var(--text-xs);
+  font-size: var(--text-caption);
   color: var(--color-primary);
   font-weight: var(--font-weight-bold);
 }
 
 .kanban-card__priority {
-  font-size: var(--text-xs);
-  padding: 2px 6px;
-  border-radius: var(--radius-sm);
-  text-transform: uppercase;
-  font-weight: var(--font-weight-bold);
+  font-size: var(--text-caption);
 }
 
-.kanban-card__priority--urgent { background: var(--color-error); color: #fff; }
-.kanban-card__priority--high { background: var(--color-warn); color: #000; }
-.kanban-card__priority--normal { background: var(--color-info); color: #fff; }
-
 .kanban-card__customer {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
   margin-bottom: var(--space-1);
+  color: var(--color-text-primary);
 }
 
 .kanban-card__vehicle {
-  font-size: var(--text-sm);
+  font-size: var(--text-body-sm);
   color: var(--color-text-muted);
   margin-bottom: var(--space-2);
 }
@@ -115,7 +647,8 @@
 .kanban-card__meta {
   display: flex;
   justify-content: space-between;
-  font-size: var(--text-xs);
+  align-items: center;
+  font-size: var(--text-caption);
   color: var(--color-text-muted);
 }
 
@@ -125,25 +658,33 @@
   gap: var(--space-1);
 }
 
-/* Detail modal */
+/* ═══════════════════════════════════════════════════════════════
+   SERVICE ORDER DETAIL
+   ═══════════════════════════════════════════════════════════════ */
+
 .so-detail {
   display: grid;
   gap: var(--space-4);
 }
 
 .so-detail__section {
-  background: var(--glass-bg-strong);
-  border: 1px solid var(--glass-border);
+  background: var(--color-bg-elevated);
+  border: 1px solid var(--color-border);
   border-radius: var(--radius-md);
   padding: var(--space-4);
 }
 
+[data-theme="modern"] .so-detail__section {
+  background: var(--color-bg-overlay);
+}
+
 .so-detail__section h3 {
   font-family: var(--font-heading);
-  font-size: var(--text-sm);
+  font-size: var(--text-body-sm);
   text-transform: uppercase;
   letter-spacing: var(--tracking-wide);
   margin-bottom: var(--space-3);
+  color: var(--color-text-primary);
 }
 
 .so-detail__grid {
@@ -159,13 +700,14 @@
 }
 
 .so-detail__label {
-  font-size: var(--text-xs);
+  font-size: var(--text-caption);
   color: var(--color-text-muted);
   text-transform: uppercase;
 }
 
 .so-detail__value {
-  font-weight: var(--font-weight-bold);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-primary);
 }
 
 .so-detail__actions {
@@ -174,44 +716,19 @@
   flex-wrap: wrap;
 }
 
-/* Tables inside modal */
-.data-table--compact {
-  width: 100%;
-  border-collapse: collapse;
-  font-size: var(--text-sm);
-}
-
-.data-table--compact th,
-.data-table--compact td {
-  padding: var(--space-2) var(--space-3);
-  text-align: left;
-  border-bottom: 1px solid var(--glass-border);
-}
-
-.data-table--compact th {
-  color: var(--color-text-muted);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-  font-size: var(--text-xs);
-}
-
-.status-badge {
-  display: inline-block;
-  padding: 2px 8px;
-  border-radius: var(--radius-sm);
-  font-size: var(--text-xs);
-  font-weight: var(--font-weight-bold);
-  text-transform: uppercase;
-}
-
-.status-badge--pending { background: var(--color-warn); color: #000; }
-.status-badge--reserved { background: var(--color-info); color: #fff; }
-.status-badge--installed { background: var(--color-success); color: #000; }
+/* ═══════════════════════════════════════════════════════════════
+   RESPONSIVE
+   ═══════════════════════════════════════════════════════════════ */
 
 @media (max-width: 1024px) {
+  .summary-strip {
+    grid-template-columns: repeat(2, 1fr);
+  }
+
   .kanban-board {
     flex-direction: column;
     overflow-x: visible;
+    overflow-y: auto;
   }
 
   .kanban-column {
@@ -219,3 +736,34 @@
     max-height: none;
   }
 }
+
+@media (max-width: 768px) {
+  .page-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--space-3);
+  }
+
+  .page-header__actions {
+    width: 100%;
+    flex-wrap: wrap;
+  }
+
+  .summary-strip {
+    grid-template-columns: 1fr;
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  .form-field--span2,
+  .form-field--span3,
+  .form-field--span4 {
+    grid-column: span 1;
+  }
+
+  .so-detail__grid {
+    grid-template-columns: 1fr;
+  }
+}
diff --git a/pos/static/js/workshop.js b/pos/static/js/workshop.js
index 4bd38a4..3e74700 100644
--- a/pos/static/js/workshop.js
+++ b/pos/static/js/workshop.js
@@ -96,7 +96,7 @@ var Workshop = (function() {
             })
             .catch(function(e) {
                 console.error(e);
-                document.getElementById('kanbanBoard').innerHTML = '<div class="empty-state"><div class="empty-state__text">Error cargando órdenes</div></div>';
+                document.getElementById('kanbanBoard').innerHTML = '<div class="empty-state"><div class="empty-state__title">Error cargando órdenes</div><div class="empty-state__subtitle">No se pudieron cargar las órdenes de servicio.</div></div>';
             });
     }
 
@@ -117,7 +117,7 @@ var Workshop = (function() {
 
             var body = colEl.querySelector('.kanban-column__body');
             if (!colOrders.length) {
-                body.innerHTML = '<div class="empty-state__text" style="text-align:center;padding:var(--space-4);color:var(--color-text-muted);">Sin órdenes</div>';
+                body.innerHTML = '<div class="empty-state" style="padding:var(--space-4);"><div class="empty-state__subtitle">Sin órdenes</div></div>';
             } else {
                 colOrders.forEach(function(o) {
                     body.appendChild(renderCard(o));
@@ -126,6 +126,33 @@ var Workshop = (function() {
         });
     }
 
+    function priorityLabel(p) {
+        var map = {normal: 'Normal', high: 'Alta', urgent: 'Urgente'};
+        return map[p] || p;
+    }
+
+    function statusBadgeClass(status) {
+        var map = {
+            pending: 'badge--pending',
+            reserved: 'badge--reserved',
+            installed: 'badge--installed',
+            cancelled: 'badge--cancelled',
+            complete: 'badge--complete'
+        };
+        return map[status] || 'badge--pending';
+    }
+
+    function statusLabel(status) {
+        var map = {
+            pending: 'Pendiente',
+            reserved: 'Reservado',
+            installed: 'Instalado',
+            cancelled: 'Cancelado',
+            complete: 'Completado'
+        };
+        return map[status] || status;
+    }
+
     function renderCard(o) {
         var card = document.createElement('div');
         card.className = 'kanban-card';
@@ -133,7 +160,7 @@ var Workshop = (function() {
         card.innerHTML =
             '<div class="kanban-card__header">' +
             '  <span class="kanban-card__id">' + esc(o.order_number) + '</span>' +
-            '  <span class="kanban-card__priority kanban-card__priority--' + esc(o.priority) + '">' + esc(o.priority) + '</span>' +
+            '  <span class="kanban-card__priority badge badge--' + esc(o.priority) + '">' + esc(priorityLabel(o.priority)) + '</span>' +
             '</div>' +
             '<div class="kanban-card__customer">' + esc(o.customer_name || 'Cliente general') + '</div>' +
             '<div class="kanban-card__vehicle">' + esc(o.vehicle_plate || 'Sin vehículo') + '</div>' +
@@ -153,7 +180,7 @@ var Workshop = (function() {
             .then(function(o) {
                 document.getElementById('detailTitle').textContent = 'Orden ' + esc(o.order_number);
                 renderDetailBody(o);
-                document.getElementById('detailModal').style.display = 'flex';
+                document.getElementById('detailModal').classList.add('is-open');
             })
             .catch(function(e) { alert('Error: ' + e.message); });
     }
@@ -176,13 +203,14 @@ var Workshop = (function() {
 
             '  <div class="so-detail__section">' +
             '    <h3>Refacciones</h3>' +
-            '    <table class="data-table--compact"><thead><tr><th>Concepto</th><th>Cant.</th><th>Precio</th><th>Estado</th><th></th></tr></thead><tbody>' +
+            '    <table class="data-table"><thead><tr><th>Concepto</th><th>Cant.</th><th>Precio</th><th>Estado</th><th></th></tr></thead><tbody>' +
             (o.items || []).map(function(it) {
+                var itemStatus = it.reserved_quantity >= it.quantity ? 'reserved' : it.status;
                 return '<tr>' +
                     '<td>' + esc(it.name) + '<br><small>' + esc(it.part_number || '') + '</small></td>' +
                     '<td>' + fmt(it.quantity) + '</td>' +
                     '<td>' + fmtMoney(it.unit_price) + '</td>' +
-                    '<td><span class="status-badge status-badge--' + (it.reserved_quantity >= it.quantity ? 'reserved' : it.status) + '">' + (it.reserved_quantity >= it.quantity ? 'Reservado' : esc(it.status)) + '</span></td>' +
+                    '<td><span class="badge ' + statusBadgeClass(itemStatus) + '">' + statusLabel(itemStatus) + '</span></td>' +
                     '<td>' + (it.reserved_quantity < it.quantity && it.status !== 'cancelled' ? '<button class="btn btn--sm btn--secondary" onclick="event.stopPropagation();Workshop.reserveItem(' + it.id + ')">Reservar</button>' : '') + '</td>' +
                     '</tr>';
             }).join('') +
@@ -195,14 +223,14 @@ var Workshop = (function() {
 
             '  <div class="so-detail__section">' +
             '    <h3>Mano de obra</h3>' +
-            '    <table class="data-table--compact"><thead><tr><th>Concepto</th><th>Horas</th><th>Precio/hr</th><th>Total</th><th>Estado</th></tr></thead><tbody>' +
+            '    <table class="data-table"><thead><tr><th>Concepto</th><th>Horas</th><th>Precio/hr</th><th>Total</th><th>Estado</th></tr></thead><tbody>' +
             (o.labor || []).map(function(l) {
                 return '<tr>' +
                     '<td>' + esc(l.description) + '</td>' +
                     '<td>' + fmt(l.hours) + '</td>' +
                     '<td>' + fmtMoney(l.hourly_rate) + '</td>' +
                     '<td>' + fmtMoney(l.total_cost) + '</td>' +
-                    '<td><span class="status-badge status-badge--' + l.status + '">' + esc(l.status) + '</span></td>' +
+                    '<td><span class="badge ' + statusBadgeClass(l.status) + '">' + statusLabel(l.status) + '</span></td>' +
                     '</tr>';
             }).join('') +
             '</tbody></table>' +
@@ -250,13 +278,15 @@ var Workshop = (function() {
         var footer = document.getElementById('detailFooter');
         footer.innerHTML =
             '<button class="btn btn--ghost" onclick="Workshop.closeDetailModal()">Cerrar</button>' +
-            '<button class="btn btn--secondary" onclick="Workshop.printOrder()">🖨️ Imprimir orden</button>' +
+            '<button class="btn btn--secondary" onclick="Workshop.printOrder()">' +
+            '<svg viewBox="0 0 24 24"><polyline points="6 9 6 2 18 2 18 9"/><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><rect x="6" y="14" width="12" height="8"/></svg>' +
+            'Imprimir orden</button>' +
             (o.status === 'ready' && !o.sale_id ? '<button class="btn btn--primary" onclick="Workshop.convertToSale()">Convertir a venta</button>' : '') +
             (o.sale_id ? '<a class="btn btn--secondary" href="/pos/invoicing?sale_id=' + o.sale_id + '">Ver venta #' + o.sale_id + '</a>' : '');
     }
 
     function closeDetailModal() {
-        document.getElementById('detailModal').style.display = 'none';
+        document.getElementById('detailModal').classList.remove('is-open');
         currentOrderId = null;
     }
 
@@ -358,11 +388,11 @@ var Workshop = (function() {
         populateSelect('noCustomer', customers, function(c) { return {value: c.id, text: c.name + ' (' + (c.phone || '') + ')'}; });
         populateSelect('noVehicle', vehicles, function(v) { return {value: v.id, text: v.plate + ' ' + v.make + ' ' + v.model}; });
         populateSelect('noMechanic', employees, function(e) { return {value: e.id, text: e.name}; });
-        document.getElementById('newOrderModal').style.display = 'flex';
+        document.getElementById('newOrderModal').classList.add('is-open');
     }
 
     function closeNewOrderModal() {
-        document.getElementById('newOrderModal').style.display = 'none';
+        document.getElementById('newOrderModal').classList.remove('is-open');
         document.getElementById('newOrderForm').reset();
     }
 
@@ -387,12 +417,12 @@ var Workshop = (function() {
     // ─── Catalog ───
 
     function openCatalogModal() {
-        document.getElementById('catalogModal').style.display = 'flex';
+        document.getElementById('catalogModal').classList.add('is-open');
         renderCatalog();
     }
 
     function closeCatalogModal() {
-        document.getElementById('catalogModal').style.display = 'none';
+        document.getElementById('catalogModal').classList.remove('is-open');
     }
 
     function loadCatalog() {
diff --git a/pos/templates/workshop.html b/pos/templates/workshop.html
index 77891b1..c6324a1 100644
--- a/pos/templates/workshop.html
+++ b/pos/templates/workshop.html
@@ -15,45 +15,71 @@
   <meta name="theme-color" content="#F5A623" />
   <link rel="shortcut icon" type="image/png" href="/pos/static/pwa/icon-192.png" />
 
-  <link rel="stylesheet" href="/pos/static/css/workshop.css">
+  <link rel="stylesheet" href="/pos/static/css/workshop.css?v=2">
 </head>
 <body>
 
-<div class="page-shell">
+<div class="app-shell">
   <!-- Sidebar injected by sidebar.js -->
   <aside id="sidebar"></aside>
 
-  <div class="main-area pos-main-offset">
+  <main class="main" role="main">
     <div id="offlineBanner"></div>
 
     <div class="page-header">
-      <div>
-        <h1>Taller</h1>
-        <p class="page-header__subtitle">Órdenes de servicio y control de reparaciones</p>
+      <div class="page-header__title-group">
+        <span class="page-header__eyebrow">Operación · Taller</span>
+        <h1 class="page-header__title">Taller</h1>
       </div>
       <div class="page-header__actions">
-        <button class="btn btn--ghost" id="btnCatalog" onclick="Workshop.openCatalogModal()">Catálogo de servicios</button>
-        <button class="btn btn--primary" id="btnNewOrder" onclick="Workshop.openNewOrderModal()">+ Nueva orden</button>
+        <button class="btn btn--ghost" id="btnCatalog" onclick="Workshop.openCatalogModal()">
+          <svg viewBox="0 0 24 24"><path d="M4 6h16M4 10h16M4 14h16M4 18h16"/></svg>
+          Catálogo de servicios
+        </button>
+        <button class="btn btn--primary" id="btnNewOrder" onclick="Workshop.openNewOrderModal()">
+          <svg viewBox="0 0 24 24"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>
+          Nueva orden
+        </button>
       </div>
     </div>
 
     <!-- Summary cards -->
-    <div class="stats-row" id="statsRow">
-      <div class="stat-card">
-        <span class="stat-card__label">Recibidos</span>
-        <span class="stat-card__value" id="statReceived">--</span>
+    <div class="summary-strip" id="statsRow">
+      <div class="summary-card">
+        <div class="summary-card__icon">
+          <svg viewBox="0 0 24 24"><path d="M21 15a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v10z"/><polyline points="3 8 12 13 21 8"/></svg>
+        </div>
+        <div class="summary-card__body">
+          <div class="summary-card__label">Recibidos</div>
+          <div class="summary-card__value" id="statReceived">--</div>
+        </div>
       </div>
-      <div class="stat-card">
-        <span class="stat-card__label">En reparación</span>
-        <span class="stat-card__value" id="statRepair">--</span>
+      <div class="summary-card">
+        <div class="summary-card__icon">
+          <svg viewBox="0 0 24 24"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
+        </div>
+        <div class="summary-card__body">
+          <div class="summary-card__label">En reparación</div>
+          <div class="summary-card__value" id="statRepair">--</div>
+        </div>
       </div>
-      <div class="stat-card">
-        <span class="stat-card__label">Listos</span>
-        <span class="stat-card__value" id="statReady">--</span>
+      <div class="summary-card">
+        <div class="summary-card__icon summary-card__icon--ok">
+          <svg viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><polyline points="9 12 12 15 16 10"/></svg>
+        </div>
+        <div class="summary-card__body">
+          <div class="summary-card__label">Listos</div>
+          <div class="summary-card__value" id="statReady">--</div>
+        </div>
       </div>
-      <div class="stat-card">
-        <span class="stat-card__label">Vencidos</span>
-        <span class="stat-card__value stat-card__value--danger" id="statOverdue">--</span>
+      <div class="summary-card">
+        <div class="summary-card__icon summary-card__icon--alert">
+          <svg viewBox="0 0 24 24"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"/><line x1="12" y1="9" x2="12" y2="13"/><line x1="12" y1="17" x2="12.01" y2="17"/></svg>
+        </div>
+        <div class="summary-card__body">
+          <div class="summary-card__label">Vencidos</div>
+          <div class="summary-card__value summary-card__value--danger" id="statOverdue">--</div>
+        </div>
       </div>
     </div>
 
@@ -61,11 +87,11 @@
     <div class="kanban-board" id="kanbanBoard">
       <!-- Columns injected by JS -->
     </div>
-  </div>
+  </main>
 </div>
 
 <!-- Detail modal -->
-<div class="modal-overlay" id="detailModal" style="display:none;">
+<div class="modal-overlay" id="detailModal">
   <div class="modal modal--lg">
     <div class="modal__header">
       <h2 class="modal__title" id="detailTitle">Orden #0000</h2>
@@ -81,14 +107,14 @@
 </div>
 
 <!-- New order modal -->
-<div class="modal-overlay" id="newOrderModal" style="display:none;">
+<div class="modal-overlay" id="newOrderModal">
   <div class="modal">
     <div class="modal__header">
       <h2 class="modal__title">Nueva orden de servicio</h2>
       <button class="modal__close" onclick="Workshop.closeNewOrderModal()">&times;</button>
     </div>
     <div class="modal__body">
-      <form id="newOrderForm" class="form-grid form-grid--2">
+      <form id="newOrderForm" class="form-grid">
         <div class="form-field">
           <label class="form-label" for="noCustomer">Cliente</label>
           <select class="form-input" id="noCustomer" required></select>
@@ -131,14 +157,14 @@
 </div>
 
 <!-- Catalog modal -->
-<div class="modal-overlay" id="catalogModal" style="display:none;">
+<div class="modal-overlay" id="catalogModal">
   <div class="modal modal--lg">
     <div class="modal__header">
       <h2 class="modal__title">Catálogo de servicios</h2>
       <button class="modal__close" onclick="Workshop.closeCatalogModal()">&times;</button>
     </div>
     <div class="modal__body">
-      <div class="form-grid form-grid--4" id="catalogForm">
+      <div class="form-grid" id="catalogForm">
         <div class="form-field form-field--span2">
           <input class="form-input" id="catName" placeholder="Nombre del servicio" />
         </div>
@@ -155,21 +181,23 @@
           <button class="btn btn--primary" onclick="Workshop.addCatalogItem()">Agregar</button>
         </div>
       </div>
-      <div class="vs-container" style="margin-top:var(--space-4);max-height:40vh;overflow-y:auto;">
-        <table class="data-table">
-          <thead>
-            <tr>
-              <th>Servicio</th>
-              <th>Horas</th>
-              <th>Precio/hora</th>
-              <th>Total sugerido</th>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody id="catalogBody">
-            <tr><td colspan="5" style="text-align:center;padding:var(--space-4);">Cargando...</td></tr>
-          </tbody>
-        </table>
+      <div class="table-wrapper" style="margin-top:var(--space-4);">
+        <div class="vs-container" style="max-height:40vh;overflow-y:auto;">
+          <table class="data-table">
+            <thead>
+              <tr>
+                <th>Servicio</th>
+                <th>Horas</th>
+                <th>Precio/hora</th>
+                <th>Total sugerido</th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody id="catalogBody">
+              <tr><td colspan="5" style="text-align:center;padding:var(--space-4);">Cargando...</td></tr>
+            </tbody>
+          </table>
+        </div>
       </div>
     </div>
   </div>
@@ -181,7 +209,7 @@
 <script src="/pos/static/js/pos-utils.js?v=2" defer></script>
 <script src="/pos/static/js/sidebar.js" defer></script>
 <script src="/pos/static/js/offline-banner.js" defer></script>
-<script src="/pos/static/js/workshop.js" defer></script>
+<script src="/pos/static/js/workshop.js?v=2" defer></script>
 <script>if('serviceWorker' in navigator){navigator.serviceWorker.register('/pos/sw.js',{scope:'/pos/'});}</script>
 <script src="/pos/static/js/pwa-install.js" defer></script>
 <script src="/pos/static/js/chat.js" defer></script>