@layer legado {
/* estilos/07-compras-cristal-y-parte-modal.css · fichero 7/11 de la hoja HEREDADA (líneas 17505-18744 del antiguo styles.css).
   Viewport y compras, facturación iOS, cristal global, detalle del parte como modal. Tramos internos, en este orden:
     · 22-viewport-y-compras (17505-17812): Supervisor de viewport (shell fluido) e importador de compras
     · 23-facturacion-ios (17813-17993): Facturación rediseñada: KPI, tabla densa y estilo iOS (.billing-ios)
     · 24-cristal-global (17994-18261): Lenguaje de cristal iOS 26/27 global (.app-shell), tierra, paneles, filtros, ayuda (?)
     · 25-parte-modal (18262-18744): Detalle del parte como modal: consola oscura, espina de flujo, cabecera premium, lateral
   El orden ES la cascada: va tras 06-facturacion-accesos-e-inspector.css y antes de 08-agenda-flat-y-look-saas.css; no se reordena. Índice: static/styles.css. */
/* ── tramo 22-viewport-y-compras (líneas 17505-17812 del antiguo styles.css): Supervisor de viewport (shell fluido) e importador de compras ── */
/* Typy viewport supervisor: fluid shell for Safari/PWA resize, zoom and auto-hidden nav. */
:root {
  --typy-visual-vw: calc(1vw * 100);
  --typy-visual-vh: calc(1vh * 100);
  --typy-shell-gutter: clamp(18px, calc(1vw * 2), 36px);
  --typy-shell-topbar-gap: clamp(8px, calc(1vw * 0.7), 14px);
}

html,
body,
.app-root {
  width: 100%;
  max-width: none;
  min-width: 0;
}

body {
  min-width: 320px;
}

.app-root {
  min-height: calc(1vh * 100);
  min-height: var(--typy-visual-vh, calc(1vh * 100));
  isolation: isolate;
}

.app-shell.layout.command-layout.ops-shell,
.app-shell.layout.command-layout.ops-shell.nav-collapsed {
  width: 100%;
  max-width: none;
  min-width: 0;
  min-height: calc(1vh * 100);
  min-height: var(--typy-visual-vh, calc(1vh * 100));
}

.app-shell.layout.command-layout.ops-shell {
  grid-template-columns: var(--sidebar-width, 284px) minmax(0, 1fr);
}

.app-shell.layout.command-layout.ops-shell.nav-collapsed {
  grid-template-columns: minmax(0, 1fr);
}

.ops-shell .workspace {
  width: 100%;
  max-width: none;
  min-width: 0;
  container-name: typy-workspace;
  container-type: inline-size;
}

.ops-shell .content {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
  padding: var(--typy-shell-gutter);
}

.ops-shell .command-module {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin: 0;
}

.ops-shell .command-topbar,
.top-command-bar.command-topbar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  grid-template-columns: minmax(160px, 0.72fr) minmax(260px, 1fr) minmax(0, auto);
  grid-template-areas:
    "main search actions"
    "context filters actions";
  gap: var(--typy-shell-topbar-gap);
  padding-inline: var(--typy-shell-gutter);
  overflow-x: clip;
  overflow-y: visible;
}

.ops-shell .ops-topbar-main,
.ops-shell .topbar-context,
.ops-shell .universal-search,
.ops-shell .global-filter-bar,
.ops-shell .topbar-actions {
  min-width: 0;
}

.ops-shell .topbar-context {
  flex-wrap: wrap;
}


.ops-shell .global-filter-bar {
  flex-wrap: wrap;
  overflow: visible;
}

.ops-shell .topbar-actions {
  flex: 0 1 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.ops-shell .topbar-actions .btn,
.ops-shell .topbar-actions .sync-chip-action,
.ops-shell .topbar-actions .topbar-user-button {
  white-space: nowrap;
}

.ops-shell .page-intro-v2,
.ops-shell .section-panel,
.ops-shell .panel,
.ops-shell .drawer,
.ops-shell .workorders-view,
.ops-shell .workorder-detail-grid,
.ops-shell .detail-panel,
.ops-shell .detail-section,
.ops-shell .data-table,
.ops-shell .ops-data-table {
  max-width: 100%;
  min-width: 0;
}

@container typy-workspace (max-width: 1320px) {
  .ops-shell .command-topbar,
  .top-command-bar.command-topbar {
    grid-template-columns: minmax(160px, 0.78fr) minmax(250px, 1fr) minmax(0, auto);
    grid-template-areas:
      "main search actions"
      "context filters filters";
  }

  .ops-shell .topbar-actions {
    justify-content: flex-start;
  }
}

@container typy-workspace (max-width: 980px) {
  .ops-shell .command-topbar,
  .top-command-bar.command-topbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "context"
      "search"
      "filters"
      "actions";
    min-height: 0;
    align-content: start;
  }

  .ops-shell .topbar-actions {
    justify-content: flex-start;
  }
}

@media (max-width: 1320px) {
  .ops-shell .command-topbar,
  .top-command-bar.command-topbar {
    grid-template-columns: minmax(160px, 0.78fr) minmax(250px, 1fr) minmax(0, auto);
    grid-template-areas:
      "main search actions"
      "context filters filters";
  }
}

@media (max-width: 980px) {
  .ops-shell .command-topbar,
  .top-command-bar.command-topbar {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "main"
      "context"
      "search"
      "filters"
      "actions";
  }
}

.purchase-import-panel {
  display: grid;
  gap: 1rem;
  margin-bottom: 1rem;
}

.purchase-import-upload,
.purchase-import-review {
  border: 1px solid rgba(218, 106, 43, 0.18);
  border-radius: 18px;
  padding: 1rem;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), rgba(255, 248, 241, 0.74));
}

.purchase-import-table-wrap {
  max-height: min(calc(1vh * 58), 620px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: white;
}

/* Anchos del importador de compras. Van con el contenedor delante (.purchase-import-table-wrap) a
   proposito: coherencia.css pone min-width:0 a todo campo y .command-module .data-table baja la
   tabla a 680px, las dos con mas especificidad que una clase sola. Asi estaban ganando desde que
   llego coherencia.css: 15 columnas en ~1.070px, campos de 26px y la descripcion ilegible
   (23-sep-2026, pedido de RS). La tabla se desplaza en horizontal dentro de su caja. */
.purchase-import-table-wrap .purchase-import-table {
  min-width: 1700px;
}

.purchase-import-table-wrap .purchase-import-table :is(input, select, textarea) {
  min-width: 64px;
}

.purchase-import-table-wrap .purchase-import-table :is(th, td):nth-child(2) { min-width: 130px; }
.purchase-import-table-wrap .purchase-import-table :is(th, td):nth-child(3) { min-width: 190px; }
.purchase-import-table-wrap .purchase-import-table :is(th, td):nth-child(4) { min-width: 300px; }
.purchase-import-table-wrap .purchase-import-table :is(th, td):nth-child(5) { min-width: 120px; }
.purchase-import-table-wrap .purchase-import-table :is(th, td):nth-child(6) { min-width: 230px; }
.purchase-import-table-wrap .purchase-import-table :is(th, td):nth-child(14) { min-width: 130px; }

.purchase-import-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.purchase-import-table input,
.purchase-import-table select,
.purchase-import-table textarea {
  width: 100%;
  min-width: 86px;
  padding: 0.55rem 0.6rem;
  font-size: 0.88rem;
}

.purchase-import-table textarea {
  resize: vertical;
}

.purchase-import-table td:first-child {
  text-align: center;
}

.purchase-import-table td:first-child input {
  min-width: 0;
  width: auto;
}





.purchase-receive-table-wrap {
  max-height: min(calc(1vh * 46), 460px);
  overflow: auto;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: white;
}

.purchase-receive-table th {
  position: sticky;
  top: 0;
  z-index: 1;
}

.purchase-receive-table td:first-child {
  min-width: 260px;
}

.purchase-receive-table td strong,
.purchase-receive-table td small {
  display: block;
}

.purchase-receive-table input {
  width: 100%;
  min-width: 90px;
}

.mini-check {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-top: 0.4rem;
  color: var(--muted);
  font-size: 0.78rem;
  white-space: nowrap;
}

.mini-check input {
  width: auto;
  min-width: 0;
}

@media (max-width: 900px) {
  .purchase-import-upload,
  .purchase-import-review {
    padding: 0.75rem;
  }
}

/* ── tramo 23-facturacion-ios (líneas 17813-17993 del antiguo styles.css): Facturación rediseñada: KPI, tabla densa y estilo iOS (.billing-ios) ── */
/* ===== Facturación rediseñada (KPI cards + tabla densa) ===== */
.billing-section-tabs,
.billing-status-tabs { flex-wrap: wrap; }
.billing-workspace { display: flex; flex-direction: column; gap: 16px; }
.billing-kpi-grid > .billing-kpi { min-width: 0; }
/* "Por emitir" es un contador simple → cuadrado más pequeño (no crece como los de importe). */
.billing-kpi-grid > .billing-kpi.billing-kpi-compact { flex: 0 1 138px; }
.billing-kpi {
  display: flex; flex-direction: column; gap: 4px; align-items: flex-start;
  padding: 16px 18px; border-radius: var(--control-radius);
  background: var(--panel-solid); border: 1px solid var(--border-soft);
  border-left: 4px solid var(--border-medium); box-shadow: var(--soft-shadow);
  cursor: pointer; text-align: left; transition: transform .12s ease, box-shadow .12s ease;
}
.billing-kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.billing-kpi.active { outline: 2px solid var(--brand); outline-offset: 1px; }
.billing-kpi .kpi-sub { font-size: 12px; color: var(--text-muted); }
.billing-kpi.tone-info { border-left-color: var(--info); }
.billing-kpi.tone-danger { border-left-color: var(--danger); }
.billing-kpi.tone-success { border-left-color: var(--success); }
.billing-kpi.tone-warning { border-left-color: var(--warning); }
.billing-kpi.tone-brand { border-left-color: var(--brand); cursor: default; }
.billing-kpi.tone-brand:hover { transform: none; box-shadow: var(--soft-shadow); }
.billing-year-select {
  font: inherit; font-size: 12px; font-weight: 800; text-transform: none;
  color: var(--brand); background: var(--brand-soft);
  border: 1px solid var(--border-soft); border-radius: 7px;
  padding: 1px 4px; cursor: pointer;
}
.billing-list-panel { padding: 0; overflow: hidden; }
.billing-list-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 14px 16px; border-bottom: 1px solid var(--line);
}
.billing-list-toolbar .saved-view-bar-v2 { margin: 0; }
.billing-invoice-table { min-width: 640px; }
.billing-invoice-table th,
.billing-invoice-table td { vertical-align: middle; padding: 12px 16px; }
.billing-invoice-table td.num,
.billing-invoice-table th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.billing-invoice-row { cursor: pointer; transition: background .1s ease; }
.billing-invoice-row:hover td { background: var(--surface-warm); }
.billing-invoice-row.selected td { background: var(--brand-soft); }
.billing-num-cell strong { font-variant-numeric: tabular-nums; }
.billing-detail-wrap { margin-top: 4px; }
@media (max-width: 900px) {
  .billing-invoice-table th:nth-child(3), .billing-invoice-table td:nth-child(3),
  .billing-invoice-table th:nth-child(4), .billing-invoice-table td:nth-child(4) { display: none; }
}

/* ===== Estilo iOS / macOS para Facturación (scopeado a .billing-ios) ===== */
.billing-ios {
  --ios-bg: #f2f2f7;
  --ios-card: #ffffff;
  --ios-sep: rgba(60, 60, 67, 0.13);
  --ios-label: #1c1c1e;
  --ios-label2: rgba(60, 60, 67, 0.6);
  --ios-blue: #007aff;
  --ios-green: #34c759;
  --ios-green-ink: #248a3d;
  --ios-red: #ff3b30;
  --ios-red-ink: #c4271e;
  --ios-orange: #ff9500;
  --ios-orange-ink: #aa5e00;
  --ios-fill: rgba(118, 118, 128, 0.12);
  --ios-card-shadow: 0 1px 2px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.05);
  font-family: var(--ty-fuente, -apple-system, BlinkMacSystemFont, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.billing-ios h1, .billing-ios h2, .billing-ios h3 { letter-spacing: -0.022em; }

/* Controles segmentados (pestañas de sección y de estado) */
.billing-ios .saved-view-bar-v2 {
  background: var(--ios-fill);
  border: none;
  border-radius: 10px;
  padding: 2px;
  gap: 2px;
  display: inline-flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  max-width: 100%;
  scrollbar-width: none;
}
.billing-ios .saved-view-bar-v2::-webkit-scrollbar { display: none; }
.billing-ios .saved-view-bar-v2 button {
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 6px 13px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ios-label);
  box-shadow: none;
  white-space: nowrap;
  transition: background .15s ease;
}
.billing-ios .saved-view-bar-v2 button.active {
  background: var(--ios-card);
  box-shadow: 0 1px 3px rgba(0,0,0,0.14);
  color: var(--ios-label);
}
.billing-ios .saved-view-bar-v2 button b {
  font-weight: 700;
  color: var(--ios-label2);
  margin-left: 4px;
}

/* Tarjetas KPI estilo iOS */
.billing-ios .billing-kpi {
  background: var(--ios-card);
  border: none;
  border-left: none;
  border-radius: 16px;
  box-shadow: var(--ios-card-shadow);
  padding: 16px 18px;
  gap: 5px;
}
.billing-ios .billing-kpi:hover { transform: translateY(-1px); }
.billing-ios .billing-kpi.active { outline: none; box-shadow: 0 0 0 2.5px var(--ios-blue); }
.billing-ios .billing-kpi .kpi-sub { font-size: 12px; color: var(--ios-label2); }

/* Lista de facturas como tarjeta agrupada (inset list) */
.billing-ios .billing-list-panel,
.billing-ios .billing-detail-wrap article.panel,
.billing-ios article.panel {
  background: var(--ios-card);
  border: none;
  border-radius: 16px;
  box-shadow: var(--ios-card-shadow);
}
.billing-ios .billing-list-toolbar { border-bottom: 1px solid var(--ios-sep); }
.billing-ios .billing-invoice-table th {
  background: transparent;
  color: var(--ios-label2);
  font-weight: 600;
  font-size: 12px;
  text-transform: none;
  letter-spacing: -0.01em;
  border-bottom: 1px solid var(--ios-sep);
}
.billing-ios .billing-invoice-table td {
  border-bottom: 1px solid var(--ios-sep);
  color: var(--ios-label);
  font-size: 14px;
}
.billing-ios .billing-invoice-table tr:last-child td { border-bottom: 0; }
.billing-ios .billing-invoice-row:hover td { background: rgba(0, 122, 255, 0.05); }
.billing-ios .billing-invoice-row.selected td { background: rgba(0, 122, 255, 0.09); }

/* Pastillas de estado con colores del sistema Apple */
.billing-ios .status-pill { border: none; border-radius: 999px; font-weight: 600; font-size: 12px; }
.billing-ios .status-pill.success { background: rgba(52, 199, 89, 0.16); color: var(--ios-green-ink); }
.billing-ios .status-pill.warning { background: rgba(255, 149, 0, 0.16); color: var(--ios-orange-ink); }
.billing-ios .status-pill.danger { background: rgba(255, 59, 48, 0.15); color: var(--ios-red-ink); }
.billing-ios .status-pill.info { background: rgba(0, 122, 255, 0.13); color: #0060df; }
.billing-ios .status-pill.neutral { background: var(--ios-fill); color: var(--ios-label2); }

/* Detalle como secciones agrupadas */
.billing-ios .detail-row { border-bottom: 1px solid var(--ios-sep); }
.billing-ios .detail-list .detail-row:last-child { border-bottom: 0; }

/* Botones iOS */
.billing-ios .btn { border-radius: 11px; font-weight: 600; }
.billing-ios .btn.primary { background: var(--ios-blue); border-color: var(--ios-blue); }
.billing-ios .btn.primary:hover { background: #0067d6; border-color: #0067d6; }
.billing-ios .btn.danger { color: var(--ios-red); }

/* ── tramo 24-cristal-global (líneas 17994-18261 del antiguo styles.css): Lenguaje de cristal iOS 26/27 global (.app-shell), tierra, paneles, filtros, ayuda (?) ── */
/* ===================================================================== */
/* LENGUAJE DE CRISTAL iOS 26/27 — GLOBAL, escopado a .app-shell         */
/*                                                            2026-08-19 */
/*                                                                       */
/* Este bloque era el tema "iOS agrupado": fondo gris #eef0f3, tarjetas   */
/* blancas planas de radio 18 y tipografía SF Pro forzada. Convivía a la  */
/* fuerza con el cristal de Facturas de proveedor, Presupuestos y         */
/* Facturación, que SOLO se veía porque esas tres pantallas lo pisaban    */
/* con estilos en línea: `.app-shell .panel` (0,2,0) gana a `.panel`      */
/* (0,1,0) por especificidad, así que cualquier capa sin escopar era      */
/* invisible dentro de la app. Ahí estaba la razón de que el rediseño no  */
/* se notara en el resto de pantallas.                                    */
/*                                                                       */
/* Ahora el cristal es el tema de la casa, y estas reglas —que ya tenían  */
/* el alcance y la especificidad correctos— son las que lo sirven. Los    */
/* valores salen de las variables --cr-* del final del fichero, las       */
/* mismas que lee static/cristal.js.                                     */
/* ===================================================================== */
.app-shell {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Sin `font-family`: se hereda Inter de :root. Forzar SF Pro aquí era lo que hacía que
     Facturas de proveedor (que hereda) y el resto de la app no se vieran de la misma familia. */

  /* Los --ios-* se conservan porque otras reglas de más arriba los leen; se remapean a los
     valores de cristal para que no quede un segundo lenguaje escondido detrás. */
  --ios-sep: var(--cr-sep);
  --ios-fill: rgba(20, 22, 26, 7%);
  --ios-blue: var(--cr-t-info-ink);
  --ios-green-ink: var(--cr-t-success-ink);
  --ios-orange-ink: var(--cr-t-warning-ink);
  --ios-red-ink: var(--cr-t-danger-ink);
  --ios-card-shadow: var(--cr-lift-card);
}

.app-shell h1,
.app-shell h2,
.app-shell h3,
.app-shell h4 { letter-spacing: -0.025em; font-weight: 700; }

/* Barras de vistas y pestañas: chips de cristal, no control segmentado gris. */
.app-shell .saved-view-bar-v2 {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: transparent;
}

.app-shell .saved-view-bar-v2 button {
  min-height: 38px;
  padding: 8px 15px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--cr-ink);
  font-size: 13px;
  font-weight: 550;
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.app-shell .saved-view-bar-v2 button.active {
  border-color: rgb(255 255 255 / 90%);
  background: linear-gradient(170deg, #fff, rgb(255 255 255 / 82%));
  box-shadow: 0 1px 0 rgb(255 255 255 / 90%) inset, 0 4px 12px -5px rgb(20 26 40 / 34%);
  color: var(--cr-ink-strong);
  font-weight: 650;
}

.app-shell .saved-view-bar-v2 button b {
  margin-left: 2px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgb(20 22 26 / 7%);
  color: var(--cr-ink);
  font-size: 12px;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
  opacity: 1;
}

.app-shell .saved-view-bar-v2 button.active b {
  background: rgb(255 255 255 / 94%);
  color: var(--cr-orange-deep);
}

/* Tablas: cabecera de cristal y líneas finas. */
.app-shell .data-table th {
  border-bottom: 1px solid var(--cr-sep);
  background: rgb(255 255 255 / 50%);
  color: var(--cr-ink);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

.app-shell .data-table td { border-bottom: 1px solid var(--cr-sep-soft); }
.app-shell .data-table tr:last-child td { border-bottom: 0; }

/* Píldoras de estado: blanco OPACO con el color en borde y texto. La fila puede ir tintada con
   ese mismo tono, y apilar los dos fondos hunde el contraste del texto. */
.app-shell .status-pill {
  border: 1px solid var(--cr-t-neutral-border);
  border-radius: 999px;
  background: var(--cr-pill-bg);
  color: var(--cr-t-neutral-ink);
  font-weight: 700;
}

.app-shell .status-pill.success { border-color: var(--cr-t-success-border); background: var(--cr-pill-bg); color: var(--cr-t-success-ink); }
.app-shell .status-pill.warning { border-color: var(--cr-t-warning-border); background: var(--cr-pill-bg); color: var(--cr-t-warning-ink); }
.app-shell .status-pill.danger { border-color: var(--cr-t-danger-border); background: var(--cr-pill-bg); color: var(--cr-t-danger-ink); }
.app-shell .status-pill.info { border-color: var(--cr-t-info-border); background: var(--cr-pill-bg); color: var(--cr-t-info-ink); }
.app-shell .status-pill.neutral,
.app-shell .status-pill.offline { border-color: var(--cr-t-neutral-border); background: var(--cr-pill-bg); color: var(--cr-t-neutral-ink); }

/* Botones y campos. */
.app-shell .btn {
  min-height: 40px;
  padding: 9px 17px;
  border: var(--cr-inset-border);
  border-radius: 999px;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 2px 8px -4px rgb(20 26 40 / 26%);
  font-size: 14px;
  font-weight: 600;
}

.app-shell .btn.primary {
  border-color: rgb(255 90 0 / 30%);
  background: linear-gradient(170deg, #ff7d29, var(--cr-orange));
  box-shadow: 0 1px 0 rgb(255 255 255 / 40%) inset, 0 12px 26px -10px rgb(255 90 0 / 60%);
  color: #fff;
  font-weight: 700;
}

.app-shell .btn.primary:hover {
  border-color: rgb(255 90 0 / 40%);
  background: linear-gradient(170deg, #ff6f14, #f05300);
}

.app-shell .btn.danger { border-color: var(--cr-t-danger-border); color: var(--cr-t-danger-ink); }
.app-shell .btn.ghost { border-color: transparent; background: transparent; box-shadow: none; }
.app-shell .btn.small,
.app-shell .btn.micro,
.app-shell .btn.compact { border-radius: 999px; }

/* `.page-actions .btn` traía radio 8px y ganaba por especificidad: se le devuelve la píldora. */
.app-shell .page-actions .btn,
.page-actions .btn { border-radius: 999px; }

.app-shell input.search-input,
.app-shell select.search-input,
.app-shell .search-input {
  min-height: 44px;
  padding: 12px 15px;
  border: 1px solid rgb(255 255 255 / 84%);
  border-radius: var(--cr-r-field);
  background: rgb(255 255 255 / 80%);
  box-shadow: 0 1px 3px rgb(20 26 40 / 6%) inset;
  font-size: 14px;
  font-weight: 500;
}

.app-shell input[type="text"],
.app-shell input[type="search"],
.app-shell input[type="date"],
.app-shell select,
.app-shell textarea { border-radius: var(--cr-r-field); }

/* ===== La tierra sobre la que el cristal se lee como cristal ===== */
/* Era gris azulado (#f2f2f7 / #eef0f3). El cristal de esta familia está pensado sobre un gris
   CÁLIDO: sobre el azulado, el degradado blanco-cálido del hero se veía sucio. */
.app-shell .content { background: #eeecea; }
.app-shell.command-layout,
.app-shell.layout.command-layout { background: #e9e6e2; }

/* Paneles de cristal. */
.app-shell .panel {
  border: var(--cr-hairline);
  border-radius: var(--cr-r-panel);
  background: var(--cr-glass);
  box-shadow: var(--cr-lift);
  backdrop-filter: blur(14px);
}

/* Panel dentro de panel: plano. Hay tres vistas con anidamiento (inventario, albaranes de venta
   y partes) y, sin esto, sale tarjeta dentro de tarjeta. */
.app-shell .panel .panel {
  border-color: rgb(255 255 255 / 72%);
  border-radius: var(--cr-r-card);
  background: rgb(255 255 255 / 50%);
  box-shadow: none;
  backdrop-filter: none;
}

/* Hero de pantalla y paneles de entidad. `.detail-hero` NO entra: en el modal de partes es
   oscuro, con botones blancos translúcidos encima, y aclararlo se llevaría el contraste. */
.app-shell .page-intro-v2,
.app-shell .command-page-intro {
  align-items: start;
  gap: 24px;
  padding: 24px 26px;
  border: var(--cr-hairline);
  border-radius: var(--cr-r-hero);
  background: var(--cr-hero-wash);
  box-shadow: var(--cr-lift);
  backdrop-filter: none;
}

.app-shell .entity-detail-panel,
.app-shell .entity-list-panel {
  border: var(--cr-hairline);
  border-radius: var(--cr-r-panel);
  background: var(--cr-glass);
  box-shadow: var(--cr-lift);
  backdrop-filter: none;
}

.app-shell .detail-hero {
  border-radius: var(--cr-r-panel);
}

/* Barra de filtros: tarjeta de cristal propia, no un contenedor transparente. */
.app-shell .filter-bar-v2 {
  padding: 14px 16px;
  border: var(--cr-hairline);
  border-radius: var(--cr-r-filter);
  background: var(--cr-filter-wash);
  box-shadow: var(--cr-lift-soft);
}

/* Icono de ayuda (?) — sustituye párrafos de ayuda largos por una pista contextual. */
.help-tip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  margin-left: 6px;
  border-radius: 50%;
  border: 1px solid var(--b, #cbd5e1);
  /* La zona pulsable se amplia a 26x26 (WCAG 2.5.8 pide 24) con el ::after de aqui debajo. Un
     borde transparente no vale: con `box-sizing: border-box` queda DENTRO y no crece nada. */
  position: relative;
  background: var(--bg2, #f1f5f9);
  color: var(--muted, #64748b);
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  vertical-align: middle;
  flex: 0 0 auto;
}
.help-tip:hover { background: var(--accent, #c2410c); color: #fff; border-color: var(--accent, #c2410c); }
.help-tip::after {
  /* Solo zona pulsable: sin dibujo. El clic en el pseudoelemento llega al boton. */
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: 50%;
}

/* ── tramo 25-parte-modal (líneas 18262-18744 del antiguo styles.css): Detalle del parte como modal: consola oscura, espina de flujo, cabecera premium, lateral ── */
/* ───────────── Detalle de parte como MODAL (web ancho) ───────────── */
/* ============================================================
   PARTE · Detalle "command console" (rediseño futurista)
   Tema oscuro/glass scoped a .wo-modal. Sobrescribimos los tokens
   del tema dentro del modal para que TODO el contenido herede el
   look sin tener que retocar el HTML de cada panel.
   ============================================================ */
.workorder-detail-overlay {
  position: fixed; inset: 0; z-index: 1200;
  background: radial-gradient(120% 120% at 50% 0%, rgba(24,14,4,.5), rgba(5,7,12,.74));
  -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 18px; overflow-y: auto;
}
.workorder-detail-overlay .wo-modal {
  /* --- Tokens del tema sobreescritos → todo el contenido se vuelve oscuro --- */
  --ink: #eef1f8; --text-primary: #eef1f8;
  --muted: #9aa3bd; --text-secondary: #9aa3bd; --text-muted: #8f95a3; /* #6f7892 daba 3,74:1 sobre este fondo oscuro; #8f95a3 da 5,48 */
  --line: rgba(255,255,255,.08);
  --border-soft: rgba(255,255,255,.10); --border-medium: rgba(255,255,255,.16);
  --panel: rgba(255,255,255,.045); --panel-solid: #161b2b; --panel-soft: rgba(255,255,255,.04);
  --surface: transparent; --surface-muted: rgba(255,255,255,.03); --surface-warm: rgba(255,255,255,.04);
  --page-background: transparent; --bg-surface: rgba(255,255,255,.04); --bg-surface-muted: rgba(255,255,255,.03);
  --brand-soft: rgba(255,122,26,.16);
  --success-soft: rgba(34,197,94,.16); --warning-soft: rgba(245,158,11,.16);
  --danger-soft: rgba(239,68,68,.16); --info-soft: rgba(59,130,246,.16); --teal-soft: rgba(20,184,166,.16);
  --shadow: 0 24px 70px rgba(0,0,0,.5); --soft-shadow: 0 14px 36px rgba(0,0,0,.4);
  /* familia --typy-* (la usan section-header-v2, paneles de facturación, etc.) */
  --typy-text: #f3f5fb; --typy-text-muted: #9aa3bd; --typy-text-soft: #8f95a3; /* #6f7892 daba 3,74:1 sobre el fondo oscuro */
  --typy-surface: rgba(255,255,255,.04); --typy-surface-soft: rgba(255,255,255,.035);
  --typy-surface-muted: rgba(255,255,255,.03); --typy-surface-raised: rgba(255,255,255,.05);
  --typy-border: rgba(255,255,255,.1); --typy-border-strong: rgba(255,255,255,.16);
  --typy-copper-dark: #ff944f;

  width: calc(1vw * 92); max-width: 1360px; margin: 0;
  height: auto; max-height: calc(1vh * 92);
  background:
    radial-gradient(140% 90% at 100% 0%, rgba(228,103,1,.18), transparent 55%),
    linear-gradient(160deg, #11151f 0%, #0c0f18 60%, #0a0c14 100%);
  border-radius: 22px; overflow: hidden; color: var(--ink);
  box-shadow: 0 40px 120px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05),
              inset 0 1px 0 rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column;
}
.wo-modal .detail-panel {
  margin: 0; border: 0; border-radius: 0; box-shadow: none; padding: 0;
  flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  position: relative; background: transparent;
}
/* Con la edición abierta, el detalle (article.detail-panel) se colapsa a height:0 y el formulario
   pasa a ser el contenido visible (alto). Pero .wo-modal es overflow:hidden con max-height:calc(1vh * 92) →
   el formulario se recortaba y NO se podía hacer scroll. Basta con permitir el scroll del modal en
   edit-open; el detalle sigue clipado a 0 (NO tocar su overflow, o su hero/stepper se derraman como
   fantasmas sobre el formulario). */
.wo-modal.edit-open { overflow-y: auto; }

/* ---- Botón cerrar ---- */
.wo-modal-close {
  position: absolute; top: 16px; right: 18px; z-index: 5;
  width: 36px; height: 36px; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08);
  color: #fff; font-size: 16px; line-height: 1; transition: color .16s ease, background-color .16s ease, border-color .16s ease, box-shadow .16s ease, transform .16s ease, opacity .16s ease;
}
.wo-modal-close:hover { background: rgba(239,68,68,.85); border-color: transparent; transform: rotate(90deg); }

/* ---- Cabecera ---- */
.wo-modal .detail-hero {
  flex: 0 0 auto; margin: 0; padding: 20px 30px 18px; position: relative;
  background:
    radial-gradient(130% 220% at 0% 0%, rgba(228,103,1,.22), transparent 58%),
    linear-gradient(110deg, rgba(255,255,255,.05), rgba(255,255,255,.012));
  color: #fff; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.07);
  display: flex; justify-content: space-between; gap: 20px;
  align-items: flex-start; flex-wrap: wrap;
}
.wo-modal .detail-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,122,26,.75), transparent);
}
.wo-modal .detail-hero h2 {
  color: #fff; margin: 0; font-size: 23px; letter-spacing: .3px;
  text-shadow: 0 0 26px rgba(228,103,1,.28);
}
.wo-modal .detail-hero > div > p { color: #c2c9da; }
.wo-modal .detail-hero .detail-mode-note { color: #8d96ab; font-size: 12px; }
:where(.wo-modal .detail-hero) .btn {
  background: rgba(255,255,255,.07); color: #eef1f8; border-color: rgba(255,255,255,.16);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}
:where(.wo-modal .detail-hero) .btn:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.3); transform: translateY(-1px); }
:where(.wo-modal .detail-hero) .btn.primary, :where(.wo-modal .detail-hero) a.btn.primary {
  background: linear-gradient(135deg, #ff7a1a, #e46701); color: #fff; border-color: transparent;
  box-shadow: 0 6px 20px rgba(228,103,1,.42);
}
:where(.wo-modal .detail-hero) .btn.primary:hover { box-shadow: 0 8px 28px rgba(228,103,1,.58); }
.wo-modal .detail-hero-actions { padding-right: 44px; }
.wo-modal .detail-hero .status-pill, .wo-modal .detail-hero .status-chip {
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border: 1px solid rgba(255,255,255,.16);
}

/* ---- Cuerpo: rail + contenido ---- */
.wo-modal-body { flex: 1; min-height: 0; display: flex; align-items: stretch; overflow: hidden; }
.wo-modal-body > .workorder-tabs {
  flex: 0 0 218px; width: 218px; display: flex; flex-direction: column; gap: 3px;
  padding: 16px 12px; margin: 0; overflow-y: auto; border-radius: 0;
  background: rgba(0,0,0,.2); border-right: 1px solid rgba(255,255,255,.06);
}
.wo-modal-body > .workorder-tabs .workorder-tab-button {
  width: 100%; text-align: left; justify-content: flex-start; position: relative;
  padding: 10px 14px; border-radius: 11px; border: 0; background: transparent;
  color: #aab2c7; font-weight: 500; transition: color .14s ease, background-color .14s ease, border-color .14s ease, box-shadow .14s ease, transform .14s ease, opacity .14s ease;
}
.wo-modal-body > .workorder-tabs .workorder-tab-button:hover { background: rgba(255,255,255,.05); color: #eef1f8; }
.wo-modal-body > .workorder-tabs .workorder-tab-button.is-active {
  background: linear-gradient(135deg, rgba(255,122,26,.22), rgba(228,103,1,.07));
  color: #ff944f; font-weight: 650; box-shadow: inset 0 0 0 1px rgba(255,122,26,.32);
}
.wo-modal-body > .workorder-tabs .workorder-tab-button.is-active::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
  border-radius: 3px; background: linear-gradient(#ff944f, #e46701); box-shadow: 0 0 12px rgba(255,122,26,.75);
}
.wo-modal-content {
  flex: 1; min-width: 0; overflow-y: auto; padding: 22px 26px 28px;
  background: transparent; color: var(--ink);
}
.wo-modal-content .workorder-tab-panel { padding: 0; }

/* ---- Tarjetas / superficies de datos (glass) ---- */
.wo-modal-content .detail-grid > div,
.wo-modal-content .workorder-summary-card,
.wo-modal-content .panel,
.wo-modal-content .card,
.wo-modal-content .signature-preview-card,
.wo-modal-content .workorder-focus-note {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 16px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.wo-modal-content .detail-grid > div {
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.wo-modal-content .detail-grid > div:hover {
  border-color: rgba(255,122,26,.45); transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(255,122,26,.15);
}
.wo-modal-content .detail-grid span,
.wo-modal-content .workorder-summary-card > span {
  text-transform: none; font-size: 12px; font-weight: 700; color: #8b93ab;
}
.wo-modal-content .workorder-summary-card strong { color: #f3f5fb; font-size: 15px; }
.wo-modal-content .workorder-summary-card small { color: #9aa3bd; }

/* ---- Secciones ---- */
.wo-modal-content .detail-section { border-bottom: 1px solid rgba(255,255,255,.07); }
.wo-modal-content .detail-section h3 { color: #f3f5fb; display: flex; align-items: center; gap: 9px; }
.wo-modal-content .detail-section h3::before {
  content: ""; width: 8px; height: 8px; border-radius: 3px; flex: 0 0 auto;
  background: linear-gradient(135deg, #ff944f, #e46701); box-shadow: 0 0 10px rgba(255,122,26,.6);
}
.wo-modal-content .detail-row { border-bottom: 1px solid rgba(255,255,255,.06); }
.wo-modal-content .detail-row.wide { background: rgba(255,255,255,.02); }

/* ---- Botones del contenido ---- */
.wo-modal-content .btn { background: rgba(255,255,255,.06); color: #e7ebf5; border-color: rgba(255,255,255,.14); }
.wo-modal-content .btn:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.26); }
.wo-modal-content .btn.primary {
  background: linear-gradient(135deg, #ff7a1a, #e46701); color: #fff; border-color: transparent;
  box-shadow: 0 6px 18px rgba(228,103,1,.35);
}
.wo-modal-content .btn.danger { background: linear-gradient(135deg, #ef4444, #b91c1c); color: #fff; border-color: transparent; }

/* ---- Encabezados / eyebrow ---- */
.wo-modal-content h1, .wo-modal-content h2, .wo-modal-content h3, .wo-modal-content h4 { color: #f3f5fb; }
.wo-modal-content .eyebrow { color: #ff944f; }

/* ---- Pills semánticos: texto claro para destacar sobre el tema oscuro ---- */
.wo-modal .status-pill.info, .wo-modal .chip.info, .wo-modal .pill.info { color: #7ab3ff; }
.wo-modal .status-pill.success, .wo-modal .chip.success, .wo-modal .pill.success { color: #4ade80; }
.wo-modal .status-pill.warning, .wo-modal .chip.warning, .wo-modal .pill.warning { color: #fbbf24; }
.wo-modal .status-pill.danger, .wo-modal .chip.danger, .wo-modal .pill.danger { color: #f87171; }
.wo-modal .status-pill, .wo-modal .chip { border: 1px solid rgba(255,255,255,.12); }

/* ---- Paneles con fondo claro hardcoded → glass oscuro (no usan tokens) ---- */
.wo-modal-content .billing-prep-panel,
.wo-modal-content .workorder-action-rail,
.wo-modal-content .technical-readiness-panel,
.wo-modal-content .inline-command,
.wo-modal-content .empty,
.wo-modal-content .billing-resolution-preview,
.wo-modal-content .help-tip,
.wo-modal-content .data-table {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  color: var(--ink);
}
.wo-modal-content .technical-readiness-panel.warning,
.wo-modal-content .workorder-focus-note.warning {
  background: rgba(245,158,11,.12); border-color: rgba(245,158,11,.3);
}
.wo-modal-content .help-tip { color: #cdd3e2; }

/* Pestaña Revisión: el panel tenía un degradado claro hardcoded → glass oscuro + tarjetas legibles */
.wo-modal-content .review-section { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.08); border-radius: 16px; }
.wo-modal-content .review-check { border-color: rgba(255,255,255,.1); }
.wo-modal-content .review-check.neutral { background: rgba(255,255,255,.05); }
.wo-modal-content .review-check span { color: #9aa3bd; }
.wo-modal-content .review-check strong { color: #eef1f8; }

/* ---- Tablas (días del parte, snapshot facturación) ---- */
.wo-modal-content table { color: var(--ink); }
.wo-modal-content .data-table { background: transparent; }
.wo-modal-content thead tr,
.wo-modal-content .data-table thead th { background: rgba(255,255,255,.04); }
.wo-modal-content table th { color: #9aa3bd; border-color: rgba(255,255,255,.1); }
.wo-modal-content table td { border-color: rgba(255,255,255,.06); color: var(--ink); }
.wo-modal-content .data-table tbody tr:hover { background: rgba(255,255,255,.03); }

/* ---- Inputs (por si algún panel los muestra) ---- */
.wo-modal-content input, .wo-modal-content select, .wo-modal-content textarea {
  background: rgba(255,255,255,.05); color: #eef1f8; border-color: rgba(255,255,255,.14);
}
.wo-modal-content input::placeholder, .wo-modal-content textarea::placeholder { color: #6f7892; }

/* "Editar parte" (.detail-edit) cuelga de .wo-modal pero FUERA de .wo-modal-content, así que NO
   heredaba el tema oscuro del modal → los campos salían con fondo BLANCO y texto claro (texto
   invisible) y los paneles (reglas de facturación, tarjetas de equipo) con fondo claro hardcoded.
   Replicamos aquí el tratamiento oscuro para todo el formulario de edición. */
.wo-modal .detail-edit input,
.wo-modal .detail-edit select,
.wo-modal .detail-edit textarea {
  background: rgba(255,255,255,.06);
  color: #eef1f8;
  border-color: rgba(255,255,255,.16);
}
.wo-modal .detail-edit input::placeholder,
.wo-modal .detail-edit textarea::placeholder { color: #8089a0; }
.wo-modal .detail-edit input[readonly],
.wo-modal .detail-edit input:disabled,
.wo-modal .detail-edit select:disabled,
.wo-modal .detail-edit textarea[readonly],
.wo-modal .detail-edit textarea:disabled {
  background: rgba(255,255,255,.03);
  color: #aab2c6;
  -webkit-text-fill-color: #aab2c6;
  opacity: 1;
}
.wo-modal .detail-edit .billing-resolution-preview,
.wo-modal .detail-edit .material-line-card,
.wo-modal .detail-edit .workorder-equipment-card,
.wo-modal .detail-edit .contract-choice,
.wo-modal .detail-edit details.workorder-equipment-advanced,
.wo-modal .detail-edit .data-table {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.1);
  color: var(--ink);
}
.wo-modal .detail-edit .billing-resolution-preview .detail-list dt,
.wo-modal .detail-edit .billing-resolution-preview .eyebrow,
.wo-modal .detail-edit .material-line-card .muted,
.wo-modal .detail-edit .workorder-equipment-card .muted { color: #aab2c6; }
.wo-modal .detail-edit .billing-resolution-preview .detail-list dd { color: #eef1f8; }

/* Barra de acciones del formulario de edición: Cancelar (descarta) + Guardar cambios (acepta),
   FIJA al pie del modal (sticky) para que siempre estén a mano sin tener que llegar al final;
   los botones de PDF quedan como secundarios a la izquierda. */
.wo-modal .detail-edit .wo-edit-actions {
  position: sticky; bottom: 0; z-index: 6;
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between;
  margin: 10px -26px -28px; padding: 14px 26px;
  /* Fondo SÓLIDO opaco: con el gradiente semi-transparente (.9) + blur, el contenido del formulario
     se transparentaba por detrás de la barra y los botones se veían mal (visto 6-jul). */
  background: #0f1220;
  border-top: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 -10px 24px rgba(0,0,0,.45);
}
.wo-modal .detail-edit .wo-edit-actions-aux { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.wo-modal .detail-edit .wo-edit-actions-main { display: flex; gap: 10px; align-items: center; margin-left: auto; }
.wo-modal .detail-edit .wo-edit-actions-main .btn.primary { padding-left: 22px; padding-right: 22px; }
@media (max-width: 700px) {
  .wo-modal .detail-edit .wo-edit-actions { margin: 10px -16px -18px; padding: 12px 16px; flex-direction: column; align-items: stretch; }
  .wo-modal .detail-edit .wo-edit-actions-aux { width: 100%; }
  .wo-modal .detail-edit .wo-edit-actions-main { width: 100%; }
  .wo-modal .detail-edit .wo-edit-actions-main .btn { flex: 1; justify-content: center; }
}

/* Desplegables flotantes del parte (menú ⋮ de overflow y menú Compartir/PDF): el popover tiene
   fondo BLANCO hardcoded y dentro los .btn ghost del modal oscuro tienen texto claro → opciones
   invisibles (claro sobre blanco). Dentro del modal oscuro el popover va oscuro y opaco. */
.wo-modal .pdf-share-popover,
.wo-modal .wo-overflow-pop {
  background: #1b2336;
  border-color: rgba(255,255,255,.14);
  box-shadow: 0 18px 42px rgba(0,0,0,.55);
}
:where(.wo-modal .pdf-share-popover) .btn,
:where(.wo-modal .wo-overflow-pop) .btn {
  color: #eef1f8;
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}
:where(.wo-modal .pdf-share-popover) .btn:hover,
:where(.wo-modal .wo-overflow-pop) .btn:hover {
  background: rgba(255,255,255,.13);
}

/* ---- Firma ---- */
.wo-modal .signature-preview-card, .signature-preview-card { max-width: 440px; }
.signature-preview-image {
  max-height: 150px; width: auto; max-width: 100%; display: block;
  background: #fff; border: 1px solid #ece8e1; border-radius: 8px; padding: 6px;
}
.wo-modal .signature-preview-image { border-color: rgba(255,255,255,.16); }
.signature-preview-fallback { display: none; }
.signature-preview-image.signature-preview-image-error { display: none; }
.signature-preview-card:has(.signature-preview-image-error) .signature-preview-fallback {
  display: block; margin-top: 6px; color: #9aa3bd; font-size: 12px;
}

/* ============================================================
   PARTE · "Espina de flujo" (rediseño r96)
   Stepper de 4 etapas + 2 columnas (trabajo enfocado | acción fija).
   Reutiliza los 12 paneles existentes; cambia solo navegación y armazón.
   ============================================================ */
.wo-modal-content.wo-flow { padding: 0; }
.wo-stepper {
  display: flex; gap: 0; padding: 20px 26px 18px;
  background: rgba(0,0,0,.2); border-bottom: 1px solid rgba(255,255,255,.07);
}
.wo-step {
  flex: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 4px 6px 0; background: transparent; border: 0; cursor: pointer; font-family: inherit;
}
.wo-step::before {
  content: ""; position: absolute; top: 22px; left: -50%; width: 100%; height: 2px;
  background: rgba(255,255,255,.12); z-index: 0;
}
.wo-step:first-child::before { display: none; }
.wo-step.done::before, .wo-step.active::before { background: linear-gradient(90deg,#2fbf86,#34d39a); }
.wo-step-node {
  position: relative; z-index: 1; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700;
  background: #1d2533; border: 2px solid rgba(255,255,255,.14);
  /* Literal a proposito: esta isla es oscura con cualquier tema, y `--ty-tinta-suave` seria
     #746e67 con el tema claro, o sea tinta oscura sobre fondo oscuro. */
  color: #9aa3bd; /* era #646d85: 2,98:1. Apagado si, ilegible no. Ahora 5,79:1 */
  transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease, opacity .15s ease;
}
.wo-step.done .wo-step-node { background: rgba(52,211,154,.16); border-color: #34d39a; color: #34d39a; }
.wo-step.active .wo-step-node {
  background: linear-gradient(135deg,#ff7a1a,#e46701); border-color: #ff7a1a; color: #190a00;
  box-shadow: 0 0 0 5px rgba(255,122,26,.16);
}
.wo-step-lbl { font-size: 13px; font-weight: 650; color: #aab2c7; text-align: center; }
.wo-step.done .wo-step-lbl { color: #e7eaf2; }
.wo-step.active .wo-step-lbl { color: #ff944f; }
.wo-step:hover .wo-step-lbl { color: #fff; }
.wo-step-meta { font-size: 12px; color: #646d85; text-align: center; }

.wo-flow-cols { display: grid; grid-template-columns: minmax(0,1fr) 360px; gap: 0; align-items: start; }
.wo-flow-main { padding: 26px 30px 34px; min-width: 0; }
/* Cinturón y tirantes: si una tabla del panel de días fuera más ancha que su columna, que haga
   scroll horizontal dentro de su caja con borde (nunca cortada/abierta). El apilado responsive
   del modal está más abajo, DESPUÉS de la regla .wo-flow-cols de .workorder-detail-overlay
   (si no, esa regla posterior lo pisaba y la tabla se salía — Rubén 21-jul, "la línea roja"). */
.workorder-sessions-panel .table-wrap { max-width: 100%; overflow-x: auto; }

/* placeholder: la solución robusta al borde "abierto" del modal oscuro está al final del fichero
   para ganar por ORDEN de aparición sin depender de selectores complejos (Rubén 21-jul). */
/* Resumen: TODAS las tarjetas iguales (misma anchura por columna + misma altura mínima). */
.wo-modal-content .workorder-summary-grid {
  grid-template-columns: repeat(auto-fit, minmax(244px, 1fr));
  grid-auto-rows: minmax(116px, auto); gap: 13px;
}
.wo-modal-content .workorder-summary-card { align-content: start; }
.wo-modal-content .workorder-summary-card > span { display: flex; align-items: center; gap: 6px; }
.wo-card-ic { flex: 0 0 auto; opacity: .85; }
.wo-modal-content .detail-grid > div { padding: 14px 16px; }
.wo-modal-content .workorder-focus-note { display: flex; flex-direction: column; gap: 6px; }
.wo-note-label { font-size: 12px; font-weight: 800; text-transform: none; color: #ff944f; }
.wo-flow-side {
  padding: 24px 22px 28px; background: rgba(0,0,0,.16);
  border-left: 1px solid rgba(255,255,255,.07);
  display: flex; flex-direction: column; gap: 16px; position: sticky; top: 0; align-self: start;
}
.wo-flow-side .workorder-action-rail {
  margin: 0; grid-template-columns: 1fr; align-items: stretch; gap: 12px;
  border-bottom: 0; border-radius: 14px; padding: 16px;
}
.wo-flow-side .workorder-action-context { min-width: 0; }
.wo-flow-side .workorder-action-controls { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.wo-flow-side .row-actions { flex-direction: column; align-items: stretch; gap: 9px; min-width: 0; }
.wo-flow-side .btn { width: 100%; white-space: normal; }
.wo-flow-side .workorder-action-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.wo-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.wo-chip {
  font-size: 12px; font-weight: 600; color: #9aa3b8; padding: 7px 12px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03); cursor: pointer; font-family: inherit;
}
.wo-chip:hover { color: #e7eaf2; border-color: rgba(255,255,255,.22); }
.wo-chip.on {
  background: linear-gradient(135deg,rgba(255,122,26,.2),rgba(228,103,1,.06));
  border-color: rgba(255,122,26,.5); color: #ff944f;
}

.wo-facts {
  display: flex; flex-direction: column; gap: 0; overflow: hidden;
  border: 1px solid rgba(255,255,255,.08); border-radius: 14px; background: rgba(255,255,255,.03);
}
.wo-facts-title {
  font-size: 12px; font-weight: 800; text-transform: none;
  color: #ff944f; padding: 12px 14px 8px;
}
.wo-fact { display: flex; justify-content: space-between; gap: 12px; padding: 9px 14px; border-top: 1px solid rgba(255,255,255,.06); }
.wo-fact span { color: #8b93ab; font-size: 12px; }
.wo-fact strong { color: #eef1f8; font-size: 12.5px; text-align: right; font-weight: 650; }

/* ===== Cabecera premium (r99) ===== */
.wo-hero { align-items: flex-start; padding: 20px 26px 16px; }
.wo-hero-id { display: flex; gap: 14px; align-items: flex-start; min-width: 0; }
.wo-hero-icon { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; color: #ff944f; background: rgba(255,122,26,.14); border: 1px solid rgba(255,122,26,.28); }
.wo-hero-idtext { min-width: 0; }
.wo-hero-eyebrow { display: block; font-size: 12px; font-weight: 800; text-transform: none; color: #8d96ab; margin-bottom: 2px; }
.wo-hero-titlerow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.wo-hero-titlerow h2 { margin: 0; font-size: 22px; color: #fff; letter-spacing: -.2px; text-shadow: 0 0 24px rgba(228,103,1,.25); }
.wo-hero-badge { font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .4px; }
.wo-stage-badge { background: linear-gradient(135deg,#ff7a1a,#e46701); color: #190a00; text-transform: none; }
.wo-stage-meta { background: rgba(255,255,255,.08); color: #c2c9da; border: 1px solid rgba(255,255,255,.14); }
.wo-hero-meta { margin: 5px 0 0; color: #aeb6c8; font-size: 13px; }
.wo-hero-facts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.wo-hero-facts .status-pill { font-size: 12px; }
.wo-hero-actions2 { gap: 8px; align-items: flex-start; padding-right: 46px; }
.wo-hero-actions2 .btn { display: inline-flex; align-items: center; gap: 7px; }
.btn-ic { flex: 0 0 auto; }

/* ===== Timeline: conectores punteados + fecha ===== */
.wo-step::before { background: none; height: 0; border-top: 2px dashed rgba(255,255,255,.18); }
.wo-step.done::before, .wo-step.active::before { background: none; border-top: 2px dashed #34d39a; }
.wo-step-date { font-size: 12px; color: #717a92; }

/* ===== Tabs con subrayado + icono ===== */
.wo-chips { display: flex; flex-wrap: wrap; gap: 2px 4px; margin-bottom: 20px; border-bottom: 1px solid rgba(255,255,255,.08); }
.wo-chip { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: 9px 12px; margin-bottom: -1px; color: #9aa3b8; font-size: 12.5px; font-weight: 600; }
.wo-chip:hover { background: none; color: #e7eaf2; border-color: transparent; }
.wo-chip.on { background: none; color: #ff944f; border-bottom-color: #ff7a1a; }
.wo-tab-ic { opacity: .8; flex: 0 0 auto; }

/* ===== Lateral: Cierre técnico + Acciones como tarjetas separadas ===== */
.wo-flow-side .workorder-action-rail { display: block; background: none; border: 0; padding: 0; margin: 0; }
.wo-flow-side .workorder-action-context { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.wo-flow-side .workorder-action-context > strong { font-size: 15px; color: #f3f5fb; }
.wo-flow-side .workorder-action-context small { color: #9aa3bd; line-height: 1.45; }
.wo-flow-side .workorder-action-controls { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.wo-flow-side .workorder-action-controls::before { content: "Acciones"; font-size: 12px; font-weight: 800; text-transform: none; color: #ff944f; }
.wo-definitive-block { display: flex; flex-direction: column; gap: 2px; background: rgba(52,211,154,.12); border: 1px solid rgba(52,211,154,.32); border-radius: 11px; padding: 10px 12px; margin-top: 4px; }
.wo-definitive-block span { font-size: 12px; font-weight: 700; text-transform: none; color: #34d39a; }
.wo-definitive-block strong { font-size: 14px; color: #d6ffe9; }

@media (max-width: 860px) {
  .wo-flow-cols { grid-template-columns: 1fr; }
  .wo-flow-side { position: static; border-left: 0; border-top: 1px solid rgba(255,255,255,.07); }
  .wo-stepper { overflow-x: auto; }
  .wo-step { min-width: 96px; }
}

@media (max-width: 820px) {
  .workorder-detail-overlay { padding: 0; }
  .workorder-detail-overlay .wo-modal { max-width: 100%; max-height: calc(1vh * 100); height: calc(1vh * 100); border-radius: 0; }
  .wo-modal-body { flex-direction: column; }
  .wo-modal-body > .workorder-tabs {
    flex: 0 0 auto; width: 100%; flex-direction: row; overflow-x: auto;
    border-right: 0; border-bottom: 1px solid rgba(255,255,255,.06);
  }
  .wo-modal-body > .workorder-tabs .workorder-tab-button { width: auto; white-space: nowrap; }
  .wo-modal-body > .workorder-tabs .workorder-tab-button.is-active::before { display: none; }
  .wo-modal .detail-hero { padding: 14px 16px; }
}
}

@layer utilidades {
  .app-shell .content { background: #eeecea; }
  .app-shell.command-layout, .app-shell.layout.command-layout { background: #e9e6e2; }
}
.purchase-order-documents,
.pc-documents {
  display: grid;
  gap: .55rem;
  margin-block: .75rem;
}

.pc-documents h4 {
  margin: 0;
}

.purchase-order-documents .detail-row,
.pc-documents .detail-row {
  align-items: center;
  gap: .75rem;
}
.pc-doc-missing {
  display: block;
  color: var(--cr-t-warning-ink);
  font-size: .78rem;
}