@layer legado {
/* estilos/05-torre-de-control-y-command-os.css · fichero 5/11 de la hoja HEREDADA (líneas 12105-15308 del antiguo styles.css).
   Torre de control (shell ops) y Command OS V2. Tramos internos, en este orden:
     · 16-torre-de-control (12105-13741): Operations Control Tower (shell ops y dashboard) y su segunda pasada de UX
     · 17-command-os-v2 (13742-15308): Command OS V2: fundación (shell), rediseño por módulos, filtros, paneles y textos largos
   El orden ES la cascada: va tras 04-agenda-y-capa-industrial.css y antes de 06-facturacion-accesos-e-inspector.css; no se reordena. Índice: static/styles.css. */
/* ── tramo 16-torre-de-control (líneas 12105-13741 del antiguo styles.css): Operations Control Tower (shell ops y dashboard) y su segunda pasada de UX ── */
/* Operations Control Tower: enterprise desktop shell and dashboard */
:root {
  --bg-app: #f7f4ef;
  --bg-surface: #ffffff;
  --bg-surface-muted: #fbfaf7;
  --border-soft: #e6dfd6;
  --text-primary: #171717;
  --text-secondary: #5f5a55;
  --text-muted: #746e67;   /* era #8a8178: 3,67:1 sobre el fondo real. Ahora 4,83 */
  --brand-copper: #c95f2a;
  --brand-orange: #f36b21;
  --brand-copper-dark: #8f3d1f;
  --navy-900: #102033;
  --navy-800: #172b42;
  --slate-700: #2f3a45;
  --success: #1f7a4d;
  --warning: #b7791f;
  --danger: #b42318;
  --info: #2563a8;
  --offline: #6b7280;
  --panel: #ffffff;
  --panel-solid: #ffffff;
  --panel-soft: #fbfaf7;
  --line: var(--border-soft);
  --ink: var(--text-primary);
  --muted: var(--text-secondary);
  --shadow: 0 24px 70px rgba(16, 32, 51, 0.10);
  --soft-shadow: 0 14px 34px rgba(16, 32, 51, 0.08);
}

body {
  background:
    radial-gradient(circle at top left, rgba(201, 95, 42, 0.10), transparent 32rem),
    linear-gradient(180deg, #fbf8f3 0%, var(--bg-app) 46%, #efe8df 100%);
}

.layout.command-layout.ops-shell {
  grid-template-columns: 286px minmax(0, 1fr);
  background: transparent;
}

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

.ops-shell .command-sidebar {
  background:
    linear-gradient(180deg, rgba(16, 32, 51, 0.98), rgba(23, 43, 66, 0.97)),
    var(--navy-900);
  color: #fff;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 24px 0 80px rgba(16, 32, 51, 0.18);
}

.ops-shell .sidebar-head,
.ops-shell .sidebar-user-card,
.ops-shell .sync-mini {
  color: #fff;
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.10);
  box-shadow: none;
}

.ops-shell .sidebar-head img {
  background: rgba(255, 255, 255, 0.95);
}

.ops-shell .sidebar-title strong,
.ops-shell .sidebar-user-card strong,
.ops-shell .sync-mini strong {
  color: #fff;
}

.ops-shell .sidebar-title span,
.ops-shell .sidebar-user-card span:not(.avatar),
.ops-shell .sync-mini span:not(.status-dot) {
  color: rgba(255, 255, 255, 0.66);
}

.ops-shell .avatar {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-copper), var(--brand-orange));
}

.nav-collapse-toggle {
  min-height: 34px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 12px;
  color: rgba(255, 255, 255, 0.78);
  background: rgba(255, 255, 255, 0.06);
  font-weight: 900;
}

.ops-shell .command-nav button {
  justify-content: flex-start;
  gap: 10px;
  color: rgba(255, 255, 255, 0.72);
  background: transparent;
  border-color: transparent;
}

.ops-shell .command-nav button i {
  width: 32px;
  height: 30px;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 10px;
  color: rgba(255, 255, 255, 0.88);
  background: rgba(255, 255, 255, 0.08);
  font-size: 12px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: 0.06em;
}

.ops-shell .command-nav button:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}

.ops-shell .command-nav button.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(243, 107, 33, 0.30), rgba(243, 107, 33, 0.08));
  border-color: rgba(243, 107, 33, 0.26);
}

.ops-shell .command-nav button.active i {
  background: var(--brand-orange);
}

.ops-shell .nav-section-title {
  color: rgba(255, 255, 255, 0.46);
}

.ops-shell .nav-badge {
  margin-left: auto;
  color: #fff;
  background: rgba(243, 107, 33, 0.24);
}

.ops-shell.nav-collapsed .sidebar-title,
.ops-shell.nav-collapsed .sidebar-user-card div,
.ops-shell.nav-collapsed .sync-mini div,
.ops-shell.nav-collapsed .nav-section-title,
.ops-shell.nav-collapsed .command-nav button span,
.ops-shell.nav-collapsed .sidebar-logout,
.ops-shell.nav-collapsed .nav-collapse-toggle span {
  display: none;
}

.ops-shell.nav-collapsed .command-sidebar {
  padding-inline: 10px;
}

.ops-shell.nav-collapsed .sidebar-head,
.ops-shell.nav-collapsed .sidebar-user-card,
.ops-shell.nav-collapsed .sync-mini {
  justify-content: center;
  padding: 10px;
}

.ops-shell.nav-collapsed .command-nav button {
  justify-content: center;
  padding: 9px;
}

.ops-shell.nav-collapsed .nav-badge {
  position: absolute;
  right: 6px;
  top: 4px;
}

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

.ops-shell.nav-collapsed .command-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  z-index: 90;
  width: 272px;
  padding: 18px 14px;
  transform: translateX(calc(-100% + 10px));
  transition: transform 0.18s ease;
}

.ops-shell.nav-collapsed .command-sidebar:hover,
.ops-shell.nav-collapsed .command-sidebar:focus-within {
  transform: translateX(0);
}

.ops-shell.nav-collapsed .sidebar-title,
.ops-shell.nav-collapsed .sidebar-user-card div,
.ops-shell.nav-collapsed .nav-section-title,
.ops-shell.nav-collapsed .command-nav button span,
.ops-shell.nav-collapsed .nav-collapse-toggle span {
  display: initial;
}

.ops-shell.nav-collapsed .sidebar-title,
.ops-shell.nav-collapsed .sidebar-user-card div {
  display: grid;
}

.ops-shell.nav-collapsed .sidebar-logout {
  display: inline-flex;
}

.ops-shell.nav-collapsed .sidebar-head,
.ops-shell.nav-collapsed .sidebar-user-card,
.ops-shell.nav-collapsed .sync-mini {
  justify-content: flex-start;
  padding: 11px;
}

.ops-shell.nav-collapsed .command-nav button {
  justify-content: flex-start;
  padding: 9px 10px;
}

.nav-reveal-button {
  position: fixed;
  left: 12px;
  top: 14px;
  z-index: 95;
  min-height: 42px;
  border: 1px solid rgba(243, 107, 33, 0.38);
  border-radius: 999px;
  padding: 8px 14px;
  color: #fff;
  background: linear-gradient(135deg, var(--brand-copper), var(--brand-orange));
  box-shadow: 0 16px 40px rgba(16, 32, 51, 0.20);
  font-weight: 950;
}

.command-topbar {
  position: sticky;
  top: 0;
  z-index: 40;
}

.ops-shell .command-topbar {
  display: grid;
  grid-template-columns: minmax(210px, 0.9fr) minmax(230px, 0.86fr) minmax(280px, 1.2fr) minmax(280px, 0.9fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 82px;
  background: rgba(251, 250, 247, 0.92);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: 0 10px 32px rgba(16, 32, 51, 0.06);
}

.ops-topbar-main {
  display: grid;
  gap: 2px;
}

.topbar-kicker {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}

.topbar-context {
  display: flex;
  gap: 8px;
  min-width: 0;
}

.context-select,
.range-select {
  min-height: 46px;
  min-width: 0;
  display: grid;
  align-content: center;
  gap: 2px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 7px 12px;
  background: #fff;
  color: var(--text-primary);
  text-align: left;
}

.context-select span,
.range-select span {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}

.context-select strong,
.range-select select {
  overflow: hidden;
  border: 0;
  color: var(--navy-900);
  background: transparent;
  font-size: 13px;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}





.global-filter-bar {
  display: flex;
  gap: 6px;
  overflow-x: auto;
}

.global-filter-bar button {
  min-height: 34px;
  flex: 0 0 auto;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  padding: 6px 10px;
  color: var(--text-secondary);
  background: #fff;
  font-size: 12px;
  font-weight: 900;
}

.global-filter-bar button.active {
  color: var(--brand-copper-dark);
  border-color: rgba(201, 95, 42, 0.32);
  background: rgba(243, 107, 33, 0.10);
}

.topbar-actions {
  justify-content: end;
  flex-wrap: nowrap;
}

.sync-badge,
.sync-chip-action {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border: 1px solid var(--border-soft);
  border-radius: 14px;
  padding: 8px 12px;
  color: var(--text-primary);
  background: #fff;
  text-align: left;
  font-weight: 900;
}

.sync-badge small,
.sync-chip-action small {
  display: block;
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 800;
}

.ops-control-tower {
  display: grid;
  gap: 16px;
}







.status-badge {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 950;
}

.status-badge.success {
  color: #0f5f3b;
  border-color: rgba(31, 122, 77, 0.22);
  background: rgba(31, 122, 77, 0.10);
}

.status-badge.warning {
  color: #855414;
  border-color: rgba(183, 121, 31, 0.24);
  background: rgba(183, 121, 31, 0.12);
}

.status-badge.danger {
  color: #8a1a13;
  border-color: rgba(180, 35, 24, 0.24);
  background: rgba(180, 35, 24, 0.10);
}

.status-badge.info,
.status-badge.neutral {
  color: #173f68;
  border-color: rgba(37, 99, 168, 0.20);
  background: rgba(37, 99, 168, 0.10);
}



button.kpi-tile:hover,
button.decision-card:hover,
.command-row:hover {
  transform: translateY(-1px);
  border-color: rgba(201, 95, 42, 0.28);
}








.ops-main-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.section-panel {
  min-width: 0;
  border: 1px solid var(--border-soft);
  border-radius: 22px;
  background: #fff;
  box-shadow: var(--soft-shadow);
  overflow: clip;
}



.span-5 {
  grid-column: span 5;
}



.section-panel-head {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border-soft);
  background: var(--bg-surface-muted);
}

.section-panel-head h3 {
  margin: 0;
  color: var(--navy-900);
  font-size: 18px;
  line-height: 1.12;
}

.section-panel-head p {
  margin: 5px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 750;
}

.section-panel-body {
  padding: 18px;
}







.ops-table-wrap {
  overflow: auto;
  border: 1px solid var(--border-soft);
  border-radius: 16px;
}

.ops-data-table {
  min-width: 720px;
  width: 100%;
  background: #fff;
}

.ops-data-table th {
  color: var(--text-muted);
  background: #f5f0ea;
  font-size: 12px;
  letter-spacing: 0.04em;
}

.ops-data-table td {
  vertical-align: middle;
}

.ops-data-table td strong,
.ops-data-table td span,
.ops-data-table td small {
  display: block;
}

.ops-data-table td small {
  margin-top: 3px;
  color: var(--text-muted);
  font-weight: 750;
}

.billing-command-list {
  gap: 8px;
}

.billing-command-row {
  align-items: center;
  min-height: 58px;
  padding: 10px 12px;
}

.billing-command-row .status-badge {
  flex-shrink: 0;
  white-space: nowrap;
}

.btn.micro {
  min-height: 34px;
  border-radius: 10px;
  padding: 6px 10px;
  font-size: 12px;
}

.ops-empty-state,
.ops-error-state,
.ops-loading-state {
  display: grid;
  gap: 6px;
  min-height: 112px;
  align-content: center;
  justify-items: start;
  border: 1px dashed var(--border-soft);
  border-radius: 16px;
  padding: 16px;
  color: var(--text-secondary);
  background: var(--bg-surface-muted);
}

.ops-empty-state strong,
.ops-error-state strong,
.ops-loading-state strong {
  color: var(--navy-900);
}


@keyframes typy-spin {
  to {
    transform: rotate(360deg);
  }
}

.ops-error-state {
  border-color: rgba(180, 35, 24, 0.22);
  background: rgba(180, 35, 24, 0.06);
}

.view-error-state {
  max-width: 760px;
  margin: 24px auto;
  padding: 22px;
}

.quote-empty-state {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
  padding: 20px 22px;
}

.quote-empty-state h3 {
  margin: 4px 0;
}

.quote-empty-state p {
  max-width: 720px;
  margin: 0;
  color: var(--text-secondary);
  font-weight: 750;
}

.quote-list-panel {
  overflow: hidden;
}

.quote-list {
  display: grid;
  gap: 12px;
  padding: 16px 18px 18px;
}

.quote-list-row {
  display: grid;
  grid-template-columns: minmax(360px, 1fr) minmax(150px, 190px) minmax(420px, 0.9fr);
  gap: 16px;
  align-items: stretch;
  border: 1px solid var(--typy-border);
  border-radius: 18px;
  padding: 16px;
  background: linear-gradient(180deg, #fff, var(--typy-surface-soft));
}

.quote-list-main,
.quote-list-financial,
.quote-list-actions {
  min-width: 0;
}

.quote-list-kicker,
.quote-list-meta,
.quote-action-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.quote-list-kicker strong {
  color: var(--typy-text);
  font-size: 18px;
  letter-spacing: -0.03em;
  white-space: nowrap;
}

.quote-list-main h4 {
  margin: 10px 0 6px;
  color: var(--typy-text);
  font-size: clamp(18px, calc(1vw * 1.4), 22px);
  line-height: 1.12;
}

.quote-list-main p {
  margin: 0 0 12px;
  color: var(--typy-text-muted);
  font-weight: 850;
}

.quote-list-meta span {
  display: grid;
  gap: 2px;
  min-width: 118px;
  border: 1px solid rgb(226 216 204 / 82%);
  border-radius: 12px;
  padding: 8px 10px;
  background: #fff;
  color: var(--typy-text);
  font-weight: 850;
}

.quote-list-meta span strong {
  display: block;
  color: var(--typy-text-muted);
  font-size: 12px;
  text-transform: none;
}

.quote-list-financial {
  display: grid;
  align-content: start;
  justify-items: end;
  gap: 5px;
  border-left: 1px solid rgb(226 216 204 / 72%);
  padding-left: 16px;
  text-align: right;
}

.quote-list-financial span,
.quote-list-financial small {
  color: var(--typy-text-muted);
  font-weight: 850;
}

.quote-list-financial strong {
  color: var(--typy-text);
  font-size: 22px;
  letter-spacing: -0.04em;
}

.quote-list-actions {
  display: grid;
  align-content: start;
  gap: 10px;
}

.quote-stock-prep-panel {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(240px, 0.55fr) minmax(320px, 1fr);
  gap: 12px;
  align-items: start;
  border: 1px solid rgb(226 216 204 / 82%);
  border-radius: 14px;
  padding: 12px;
  background: #fff;
}

.quote-stock-prep-panel span,
.quote-stock-prep-panel small,
.quote-stock-prep-panel p {
  color: var(--typy-text-muted);
  font-weight: 850;
}

.quote-stock-prep-panel span {
  display: block;
  font-size: 12px;
  text-transform: none;
}

.quote-stock-prep-panel strong {
  color: var(--typy-text);
}

.quote-stock-prep-panel p {
  margin: 4px 0 0;
}

.quote-stock-prep-panel.success {
  border-color: rgba(40, 130, 83, 0.22);
  background: linear-gradient(180deg, #fff, #f4fbf6);
}

.quote-stock-prep-panel.warning {
  border-color: rgba(183, 121, 31, 0.25);
  background: linear-gradient(180deg, #fff, #fff8e7);
}

.quote-stock-prep-panel.danger {
  border-color: rgba(181, 53, 44, 0.25);
  background: linear-gradient(180deg, #fff, #fff1ef);
}

.quote-stock-prep-panel.info {
  border-color: rgba(57, 105, 170, 0.2);
  background: linear-gradient(180deg, #fff, #f5f9ff);
}

.quote-stock-prep-lines {
  display: grid;
  gap: 8px;
}

.quote-stock-prep-lines > div {
  display: grid;
  gap: 2px;
  border: 1px solid rgb(226 216 204 / 76%);
  border-radius: 12px;
  padding: 9px 10px;
  background: rgb(255 255 255 / 76%);
}

.quote-stock-meta.success {
  border-color: rgba(40, 130, 83, 0.24);
  background: #f4fbf6;
}

.quote-stock-meta.warning {
  border-color: rgba(183, 121, 31, 0.28);
  background: #fff8e7;
}

.quote-stock-meta.danger {
  border-color: rgba(181, 53, 44, 0.28);
  background: #fff1ef;
}

.quote-ai-review-panel {
  grid-column: 1 / -1;
  margin: 4px 0 0;
}

.quote-action-group {
  justify-content: flex-end;
}

.quote-action-group .btn {
  min-height: 40px;
  white-space: nowrap;
}


.warning-panel {
  border-color: rgba(183, 121, 31, 0.28);
  background: linear-gradient(180deg, #fff, #fff8e7);
}

.actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 16px 16px;
}

.ops-load-list,
.ops-activity-list {
  display: grid;
  gap: 10px;
}








.ops-alert-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 1380px) {
  .ops-shell .command-topbar {
    grid-template-columns: minmax(200px, 1fr) minmax(220px, 0.9fr) minmax(260px, 1fr);
  }

  .global-filter-bar,
  .topbar-actions {
    grid-column: span 1;
  }


  .span-3,
  .span-4,
  .span-5 {
    grid-column: span 6;
  }

}

@media (max-width: 1024px) {
  .layout.command-layout.ops-shell,
  .layout.command-layout.ops-shell.nav-collapsed {
    display: block;
  }

  .ops-shell .command-topbar {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }

  .topbar-context,
  .universal-search,
  .global-filter-bar,
  .topbar-actions {
    grid-column: 1 / -1;
  }



  .ops-kpi-grid,
  .ops-alert-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .span-3,
  .span-4,
  .span-5,
  .span-8,
  .span-12 {
    grid-column: span 12;
  }
}

@media (max-width: 640px) {
  .ops-shell .command-topbar {
    position: sticky;
    top: 0;
    padding: 10px 12px;
  }

  .topbar-context,
  .topbar-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .context-select,
  .range-select,
  .topbar-actions .btn,
  .sync-chip-action {
    width: 100%;
  }

  .global-filter-bar {
    padding-bottom: 2px;
  }



  .ops-kpi-grid,
  .ops-alert-strip,
  .decision-grid,
  .ops-main-grid {
    grid-template-columns: 1fr;
  }

  .span-3,
  .span-4,
  .span-5,
  .span-8,
  .span-12 {
    grid-column: span 1;
  }

  .section-panel-head {
    display: grid;
  }

  .ops-data-table {
    min-width: 640px;
  }
}

/* Control Tower UX pass 2: clarify persistent controls vs readonly indicators. */
.ops-shell .command-topbar {
  grid-template-columns: minmax(160px, 0.72fr) minmax(210px, 0.8fr) minmax(300px, 1fr) minmax(390px, auto);
  grid-template-areas:
    "main context search actions"
    "main filters filters actions";
  align-items: center;
  min-height: 96px;
  overflow: visible;
  row-gap: 8px;
}

.ops-shell .ops-topbar-main {
  grid-area: main;
}

.ops-shell .topbar-context {
  grid-area: context;
}


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

.ops-shell .topbar-actions {
  grid-area: actions;
  display: flex;
  justify-content: flex-end;
  max-width: 100%;
}

.ops-shell .global-filter-bar button {
  min-height: 30px;
  padding: 5px 10px;
  box-shadow: none;
}

.ops-shell .metrics {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.ops-shell .metric {
  min-height: 74px;
  gap: 5px;
  border-radius: 17px;
  padding: 12px 13px;
}

.ops-shell .metric span {
  font-size: 12px;
}

.ops-shell .metric strong {
  font-size: 26px;
}

.ops-shell .metric small {
  font-size: 12px;
}

.metric.metric-info {
  position: relative;
  cursor: default;
  box-shadow: 0 8px 20px rgb(28 25 23 / 5%);
  transition: none;
}

.metric.metric-info:hover {
  transform: none;
  border-color: var(--line);
  box-shadow: 0 8px 20px rgb(28 25 23 / 5%);
}

.metric.metric-action {
  position: relative;
}

.data-quality-notice {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: -4px 0 18px;
  border: 1px solid rgba(183, 121, 31, 0.28);
  border-left: 6px solid var(--warning);
  border-radius: 20px;
  padding: 16px 18px;
  background: linear-gradient(135deg, #fffaf0 0%, #fff 72%);
  box-shadow: 0 10px 26px rgb(28 25 23 / 5%);
}

.data-quality-notice div {
  display: grid;
  gap: 4px;
}

.data-quality-notice span {
  color: #93671a;
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
  /* era var(--warning) = #b7791f: 3,64:1 */
}

.data-quality-notice strong {
  color: var(--navy-900);
  font-size: 18px;
}

.data-quality-notice b {
  color: var(--text-primary);
  font-size: 30px;
  line-height: 1;
}

.data-quality-notice small {
  max-width: 920px;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 780;
}












.analytics-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(360px, 0.75fr);
  gap: 16px;
  margin: 0 0 18px;
}

.analytics-panel {
  overflow: hidden;
}

.analytics-panel .panel-head {
  align-items: flex-start;
}

.analytics-panel .panel-head p {
  margin: 4px 0 0;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 720;
}

.month-switch-group {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  border: 1px solid var(--border-soft);
  border-radius: 999px;
  background: #fff;
}

.month-switch {
  min-width: 42px;
  min-height: 32px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
}

.month-switch.is-active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand-orange), var(--brand-copper-dark));
}

.mini-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(42px, 1fr));
  gap: 10px;
  align-items: end;
  min-height: 118px;
  padding-top: 8px;
}

.mini-bar-column {
  display: grid;
  gap: 6px;
  justify-items: center;
  min-width: 0;
}

.mini-bar-track {
  display: flex;
  align-items: flex-end;
  width: 100%;
  height: 62px;
  border: 1px solid rgba(201, 95, 42, 0.16);
  border-radius: 999px 999px 10px 10px;
  padding: 4px;
  background: linear-gradient(180deg, rgba(16, 32, 51, 0.035), rgba(255, 255, 255, 0.72));
}

.mini-bar-track i {
  display: block;
  width: 100%;
  height: var(--bar-height);
  min-height: 5px;
  border-radius: 999px 999px 8px 8px;
  background: linear-gradient(180deg, var(--brand-orange), var(--brand-copper-dark));
  box-shadow: 0 8px 14px rgba(201, 95, 42, 0.16);
}

.mini-bar-column small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 850;
  text-transform: none;
}

.mini-bar-column b {
  overflow: hidden;
  max-width: 100%;
  color: var(--navy-900);
  font-size: 12px;
  font-weight: 950;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.signal-rail {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.signal-rail.compact .signal-card {
  min-height: 68px;
}

.signal-card {
  display: grid;
  gap: 5px;
  min-height: 74px;
  border: 1px solid var(--border-soft);
  border-radius: 18px;
  padding: 11px 12px;
  text-align: left;
  background: linear-gradient(135deg, #fff 0%, var(--bg-surface-muted) 100%);
}

button.signal-card {
  appearance: none;
  color: inherit;
  cursor: pointer;
  font: inherit;
}

button.signal-card:hover {
  border-color: rgba(201, 95, 42, 0.36);
  box-shadow: 0 12px 24px rgba(28, 25, 23, 0.07);
  transform: translateY(-1px);
}

.signal-card span {
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}

.signal-card strong {
  color: var(--text-primary);
  font-size: 22px;
  line-height: 1;
}

.signal-card small {
  color: var(--text-muted);
  font-size: 12px;
  font-weight: 760;
}

.signal-card.warning {
  border-color: rgba(183, 121, 31, 0.28);
  background: linear-gradient(135deg, #fffaf0, #fff);
}

.signal-card.danger {
  border-color: rgba(180, 35, 24, 0.22);
  background: linear-gradient(135deg, #fff4f2, #fff);
}

.signal-card.success {
  border-color: rgba(31, 122, 77, 0.18);
  background: linear-gradient(135deg, #f2fbf6, #fff);
}

.signal-card.info {
  border-color: rgba(37, 99, 168, 0.18);
  background: linear-gradient(135deg, #f5f9ff, #fff);
}

@media (max-width: 1560px) {
  .ops-shell .command-topbar {
    grid-template-columns: minmax(170px, 0.8fr) minmax(280px, 1fr) minmax(340px, auto);
    grid-template-areas:
      "main search actions"
      "context filters actions";
  }

  .ops-shell .topbar-context {
    min-width: 0;
  }
}

@media (max-width: 1180px) {
  .ops-shell .command-topbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "context"
      "search"
      "filters"
      "actions";
    min-height: 0;
  }

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

  .analytics-grid {
    grid-template-columns: 1fr;
  }

  .workorders-overview-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .quote-empty-state {
    display: grid;
  }

  .quote-empty-state .row-actions {
    justify-content: stretch;
  }

  .quote-empty-state .btn {
    width: 100%;
  }

  .data-quality-notice {
    grid-template-columns: 1fr;
  }

  .signal-rail {
    grid-template-columns: 1fr;
  }

  .workorder-focus-row {
    grid-template-columns: 1fr;
  }

  .sort-button {
    min-height: 36px;
    padding: 8px 10px;
  }
}

/* ── tramo 17-command-os-v2 (líneas 13742-15308 del antiguo styles.css): Command OS V2: fundación (shell), rediseño por módulos, filtros, paneles y textos largos ── */
/* Typy Command OS V2 foundation: design tokens + shell only. */
:root {
  --typy-bg: #f6f1ea;
  --typy-bg-gradient-a: #f8f3ec;
  --typy-bg-gradient-b: #efe5d8;
  --typy-surface: #ffffff;
  --typy-surface-soft: #fbf7f1;
  --typy-surface-muted: #f4ece2;
  --typy-surface-raised: #ffffff;
  --typy-border: #e2d8cc;
  --typy-border-strong: #cdbeaf;
  --typy-navy-950: #07111f;
  --typy-navy-900: #0d1b2e;
  --typy-navy-850: #102238;
  --typy-navy-800: #14263d;
  --typy-slate-700: #334155;
  --typy-copper: #c95f2a;
  --typy-orange: #f36b21;
  --typy-orange-soft: #fff0e7;
  --typy-copper-dark: #8f3d1f;
  --typy-text: #151515;
  --typy-text-muted: #655f58;
  --typy-text-soft: #746e67;   /* era #8a8178: 3,67:1. Es el origen de `--text-muted`. Ahora 4,83 */
  --typy-text-inverse: #f9fafb;
  --typy-success: #1f7a4d;
  --typy-warning: #b7791f;
  --typy-danger: #b42318;
  --typy-info: #2563a8;
  --typy-offline: #6b7280;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --shadow-panel: 0 12px 32px rgb(15 23 42 / 8%);
  --shadow-floating: 0 22px 60px rgb(15 23 42 / 16%);
  --shadow-subtle: 0 8px 20px rgb(15 23 42 / 6%);
  --topbar-height: 72px;
  --sidebar-width: 284px;
  --sidebar-collapsed-width: 84px;
  --z-sidebar: 80;
  --z-topbar: 70;
  --z-mobile-nav: 90;
  --density-xs: 4px;
  --density-sm: 8px;
  --density-md: 12px;
  --density-lg: 16px;
  --density-xl: 24px;

  --page-background: var(--typy-bg);
  --sidebar-background: var(--typy-navy-900);
  --surface: var(--typy-bg);
  --surface-muted: var(--typy-surface-muted);
  --surface-warm: var(--typy-surface-soft);
  --text-primary: var(--typy-text);
  --text-secondary: var(--typy-text-muted);
  --text-muted: var(--typy-text-soft);
  --border-soft: var(--typy-border);
  --border-medium: var(--typy-border-strong);
  --success: var(--typy-success);
  --warning: var(--typy-warning);
  --danger: var(--typy-danger);
  --info: var(--typy-info);
  --offline: var(--typy-offline);
  --brand: var(--typy-orange);
  --brand-soft: var(--typy-orange-soft);
  --brand-strong: var(--typy-copper-dark);
  --brand-copper: var(--typy-copper);
  --brand-orange: var(--typy-orange);
  --ink: var(--typy-text);
  --muted: var(--typy-text-muted);
  --line: var(--typy-border);
  --panel: var(--typy-surface);
  --panel-solid: var(--typy-surface);
  --panel-soft: var(--typy-surface-soft);
  --shadow: var(--shadow-panel);
  --soft-shadow: var(--shadow-subtle);
  --radius: var(--radius-lg);
  --control-radius: var(--radius-md);
}

html {
  background: var(--typy-bg);
}

body {
  color: var(--typy-text);
  background:
    radial-gradient(circle at 16% 8%, rgb(201 95 42 / 8%), transparent 34rem),
    radial-gradient(circle at 96% 0%, rgb(16 32 51 / 7%), transparent 32rem),
    linear-gradient(180deg, var(--typy-bg-gradient-a) 0%, var(--typy-bg) 48%, var(--typy-bg-gradient-b) 100%);
}

.app-shell.layout.command-layout.ops-shell {
  grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
  min-height: calc(1vh * 100);
  background: transparent;
}

.workspace {
  min-width: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 22%), transparent 420px);
}

.sidebar-nav.command-sidebar {
  position: sticky;
  top: 0;
  z-index: var(--z-sidebar);
  width: var(--sidebar-width);
  height: calc(1vh * 100);
  padding: 12px;
  gap: 9px;
  background:
    linear-gradient(180deg, rgb(7 17 31 / 98%), rgb(13 27 46 / 98%)),
    var(--typy-navy-900);
  border-right: 1px solid rgb(255 255 255 / 8%);
  box-shadow: 18px 0 42px rgb(7 17 31 / 20%);
}

.sidebar-nav .sidebar-head,
.sidebar-nav .sidebar-user-card,
.sidebar-nav .sync-mini {
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 6%);
  box-shadow: none;
}

.sidebar-nav .sidebar-user-card {
  display: none;
}

.sidebar-nav .sidebar-head {
  min-height: 52px;
  padding: 8px;
}

.sidebar-nav .sidebar-head img {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  background: var(--typy-surface);
}

.sidebar-nav .sidebar-user-card,
.sidebar-nav .sync-mini {
  min-height: 46px;
  padding: 8px;
}

.sidebar-nav .sidebar-title strong,
.sidebar-nav .sidebar-user-card strong,
.sidebar-nav .sync-mini strong {
  color: var(--typy-text-inverse);
}

.sidebar-nav .sidebar-title span,
.sidebar-nav .sidebar-user-card span:not(.avatar),
.sidebar-nav .sync-mini span:not(.status-dot) {
  color: rgb(249 250 251 / 66%);
}

.sidebar-nav .avatar,
.topbar-user-button .avatar {
  border-radius: var(--radius-sm);
  color: #fff;
  background: linear-gradient(135deg, var(--typy-copper), var(--typy-orange));
}

.sidebar-nav .nav-collapse-toggle {
  min-height: 30px;
  border-radius: var(--radius-sm);
  color: rgb(249 250 251 / 76%);
  background: rgb(255 255 255 / 6%);
  border-color: rgb(255 255 255 / 10%);
}

.sidebar-nav .command-nav {
  flex: 1 1 auto;
  min-height: 0;
  gap: 5px;
  overflow-y: auto;
  padding-bottom: 6px;
  padding-right: 2px;
}

.nav-group {
  gap: 2px;
}

.sidebar-nav .nav-section-title {
  padding: 6px 8px 1px;
  color: rgb(249 250 251 / 42%);
  font-size: 12px;
  letter-spacing: 0.10em;
}

.sidebar-nav .nav-item {
  min-height: 34px;
  border-radius: var(--radius-sm);
  padding: 7px 8px;
  color: rgb(249 250 251 / 74%);
  background: transparent;
  border: 1px solid transparent;
}

.sidebar-nav .nav-item i {
  width: 28px;
  height: 26px;
  border-radius: var(--radius-xs);
  color: rgb(249 250 251 / 82%);
  background: rgb(255 255 255 / 8%);
}

.sidebar-nav .nav-item:hover {
  color: #fff;
  background: rgb(255 255 255 / 7%);
}

.sidebar-nav .nav-item.active {
  color: #fff;
  background: linear-gradient(90deg, rgb(243 107 33 / 28%), rgb(243 107 33 / 8%));
  border-color: rgb(243 107 33 / 32%);
}

.sidebar-nav .nav-item.active::before {
  width: 3px;
  height: 20px;
  margin-right: 7px;
  background: var(--typy-orange);
}

.sidebar-nav .nav-item.active i {
  color: #fff;
  background: var(--typy-orange);
}

.sidebar-nav .nav-badge,
.topbar-notifications .nav-badge {
  min-width: 22px;
  min-height: 20px;
  padding: 2px 7px;
  border-radius: 999px;
  color: #fff;
  /* Era `rgb(201 95 42 / 72%)`: compuesto sobre el menu daba 2,8:1 con el blanco, y AA pide 4,5.
     Estos contadores —el 327 de Pendientes, el 53 de Partes— son de lo que mas se mira de reojo en
     toda la aplicacion. Ahora es opaco y es el naranja de accion del sistema: 4,59:1 exactos. */
  background-color: var(--ty-marca-accion);
  font-size: 12px;
  line-height: 1;
}

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

.app-shell.nav-collapsed .command-sidebar,
.app-shell.nav-collapsed .command-sidebar:hover,
.app-shell.nav-collapsed .command-sidebar:focus-within {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sidebar-width);
  transform: translateX(-105%);
}

.nav-reveal-button {
  top: 12px;
  left: 12px;
  z-index: calc(var(--z-sidebar) + 2);
  min-height: 38px;
  border-radius: 999px;
  padding: 8px 13px;
  background: linear-gradient(135deg, var(--typy-navy-850), var(--typy-navy-900));
  border-color: rgb(243 107 33 / 38%);
  box-shadow: var(--shadow-floating);
}

.top-command-bar.command-topbar {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: grid;
  grid-template-columns: minmax(190px, 0.76fr) minmax(300px, 1.25fr) max-content;
  grid-template-rows: 42px 32px;
  grid-template-areas:
    "main search actions"
    "context filters actions";
  gap: 8px 12px;
  align-items: center;
  align-content: center;
  min-height: var(--topbar-height);
  padding: 10px 22px;
  background: rgb(251 247 241 / 90%);
  border-bottom: 1px solid var(--typy-border);
  box-shadow: 0 8px 22px rgb(15 23 42 / 5%);
  backdrop-filter: blur(18px);
}

.workspace-title {
  grid-area: main;
  min-width: 0;
}

.workspace-title .topbar-kicker {
  color: var(--typy-copper-dark);
  font-size: 12px;
  letter-spacing: 0.12em;
}

.workspace-title .topbar-title {
  color: var(--typy-navy-950);
  font-size: clamp(19px, calc(1vw * 1.4), 24px);
  letter-spacing: -0.03em;
}

.topbar-context {
  grid-area: context;
  align-items: center;
  min-width: 0;
  overflow: hidden;
}

.context-select,
.range-select {
  min-height: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: var(--radius-md);
  border-color: var(--typy-border);
  padding: 5px 9px;
  background: var(--typy-surface);
  box-shadow: none;
}

.context-select span,
.range-select span {
  display: none;
}

.context-select strong,
.range-select select {
  font-size: 12px;
}




.global-filter-bar {
  grid-area: filters;
}

.global-filter-bar button {
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 999px;
  border-color: var(--typy-border);
  color: var(--typy-text-muted);
  background: rgb(255 255 255 / 72%);
  box-shadow: none;
}

.global-filter-bar button.active {
  color: var(--typy-copper-dark);
  border-color: rgb(201 95 42 / 28%);
  background: var(--typy-orange-soft);
}

.topbar-actions {
  grid-area: actions;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  max-width: none;
}

.topbar-actions > .btn.ghost:not(.topbar-notifications) {
  display: none;
}

.sync-badge,
.sync-chip-action {
  min-height: 36px;
  min-width: 0;
  border-radius: var(--radius-md);
  border-color: var(--typy-border);
  background: var(--typy-surface);
  box-shadow: none;
}

.topbar-actions .btn,
.topbar-actions .sync-chip-action,
.topbar-actions .topbar-notifications {
  min-height: 36px;
  padding: 6px 10px;
}

.topbar-actions .sync-chip-action {
  min-width: 0;
  gap: 8px;
}

.topbar-user-button {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--typy-border);
  border-radius: var(--radius-md);
  padding: 6px 10px 6px 7px;
  color: var(--typy-text);
  background: var(--typy-surface);
  font-weight: 900;
}

.topbar-user-button span:not(.avatar) {
  display: none;
}

.topbar-user-button .avatar {
  width: 28px;
  height: 28px;
  font-size: 12px;
}

.btn {
  border-radius: var(--radius-sm);
  box-shadow: none;
}

.btn.primary {
  background: linear-gradient(180deg, var(--typy-orange), #df5919);
  border-color: rgb(143 61 31 / 18%);
  box-shadow: 0 10px 22px rgb(201 95 42 / 20%);
}

.btn.ghost {
  background: rgb(255 255 255 / 56%);
}

.panel,
.section-panel,
.drawer,
.section-title,
.metric,
.compact-signal,
.signal-card,
.data-quality-notice,
.command-create-card,
.modal-card {
  border-color: var(--typy-border);
  border-radius: var(--radius-lg);
  background: var(--typy-surface);
  box-shadow: var(--shadow-subtle);
}


.section-title,
.section-header {
  min-height: 74px;
  padding: 15px 18px;
  margin-bottom: 16px;
}

.section-title h2,
.section-header h2 {
  color: var(--typy-navy-950);
  font-size: clamp(24px, calc(1vw * 2), 32px);
  letter-spacing: -0.04em;
}

.metrics {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.metric,
.compact-signal {
  min-height: 74px;
  padding: 12px;
  border-radius: var(--radius-md);
}

.metric strong,
.compact-signal strong {
  font-size: clamp(24px, calc(1vw * 2.2), 30px);
}


.empty,
.empty-state,
.view-error-state,
.error-state {
  border: 1px dashed var(--typy-border-strong);
  border-radius: var(--radius-lg);
  background: var(--typy-surface-soft);
}

.status-pill,
.pill,
.status-badge {
  min-height: 26px;
  border-radius: 999px;
  padding: 4px 9px;
  border: 1px solid var(--typy-border);
  color: var(--typy-text-muted);
  background: var(--typy-surface-soft);
}

.status-pill.success,
.pill.success,
.status-badge.success {
  color: var(--typy-success);
  border-color: rgb(31 122 77 / 22%);
  background: rgb(31 122 77 / 10%);
}

.status-pill.warning,
.pill.warning,
.status-badge.warning {
  color: var(--typy-warning);
  border-color: rgb(183 121 31 / 26%);
  background: rgb(183 121 31 / 11%);
}

.status-pill.danger,
.pill.danger,
.status-badge.danger {
  color: var(--typy-danger);
  border-color: rgb(180 35 24 / 24%);
  background: rgb(180 35 24 / 10%);
}

.status-pill.info,
.pill.info,
.status-badge.info {
  color: var(--typy-info);
  border-color: rgb(37 99 168 / 22%);
  background: rgb(37 99 168 / 10%);
}

.status-pill.offline,
.status-pill.neutral,
.pill.neutral,
.status-badge.neutral {
  color: var(--typy-offline);
  border-color: rgb(107 114 128 / 24%);
  background: rgb(107 114 128 / 10%);
}

.status-dot,
.sync-dot {
  background: var(--typy-success);
  box-shadow: 0 0 0 4px rgb(31 122 77 / 14%);
}

.status-dot.warning,
.sync-dot.warning {
  background: var(--typy-warning);
  box-shadow: 0 0 0 4px rgb(183 121 31 / 16%);
}

.status-dot.danger,
.sync-dot.danger {
  background: var(--typy-danger);
  box-shadow: 0 0 0 4px rgb(180 35 24 / 14%);
}

.status-dot.offline,
.sync-dot.offline,
.status-dot.neutral,
.sync-dot.neutral {
  background: var(--typy-offline);
  box-shadow: 0 0 0 4px rgb(107 114 128 / 16%);
}

.data-table,
.ops-data-table {
  border-collapse: separate;
  border-spacing: 0;
  background: var(--typy-surface);
}

.data-table th,
.ops-data-table th {
  color: var(--typy-text-muted);
  background: var(--typy-surface-muted);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.data-table td,
.ops-data-table td {
  border-top: 1px solid var(--typy-border);
}

.data-table tbody tr:hover td,
.ops-data-table tbody tr:hover td {
  background: var(--typy-surface-soft);
}

@media (max-width: 1280px) {
  .quote-list-row {
    grid-template-columns: minmax(300px, 1fr) minmax(140px, 170px);
  }

  .quote-list-actions {
    grid-column: 1 / -1;
  }

  .quote-action-group {
    justify-content: flex-start;
  }

  .top-command-bar.command-topbar {
    grid-template-columns: minmax(170px, 0.7fr) minmax(260px, 1fr) max-content;
    grid-template-areas:
      "main search actions"
      "context filters actions";
  }

  .topbar-actions .topbar-user-button span:not(.avatar),
  .topbar-actions .topbar-notifications {
    display: none;
  }
}

@media (max-width: 900px) {
  .quote-list {
    padding: 12px;
  }

  .quote-list-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }

  .quote-list-financial {
    justify-items: start;
    border-left: 0;
    border-top: 1px solid rgb(226 216 204 / 72%);
    padding: 12px 0 0;
    text-align: left;
  }

  .quote-action-group .btn {
    flex: 1 1 130px;
  }

  .quote-stock-prep-panel {
    grid-template-columns: 1fr;
  }

  .app-shell.layout.command-layout.ops-shell,
  .app-shell.layout.command-layout.ops-shell.nav-collapsed {
    display: block;
  }

  .sidebar-nav.command-sidebar {
    display: none;
  }

  .nav-reveal-button {
    display: none;
  }

  .top-command-bar.command-topbar {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "main actions"
      "search search";
    min-height: 0;
    padding: 9px 12px;
  }

  .topbar-context,
  .global-filter-bar,
  .topbar-actions .btn.ghost,
  .topbar-actions .install-status,
  .topbar-actions [data-action="install-app"],
  .topbar-user-button {
    display: none;
  }

  .workspace-title .topbar-kicker {
    display: none;
  }

  .topbar-actions {
    display: flex;
  }

  .topbar-actions .btn.primary,
  .topbar-actions .sync-chip-action {
    min-height: 38px;
    padding: 7px 10px;
  }




  .content {
    padding: 14px 12px calc(98px + env(safe-area-inset-bottom, 0px));
  }

  .mobile-bottom-nav {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: max(10px, env(safe-area-inset-bottom, 0px));
    z-index: var(--z-mobile-nav);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 4px;
    padding: 6px;
    border: 1px solid rgb(205 190 175 / 84%);
    border-radius: var(--radius-xl);
    background: rgb(255 255 255 / 92%);
    box-shadow: var(--shadow-floating);
    backdrop-filter: blur(18px);
  }

  .mobile-bottom-nav button {
    min-width: 0;
    min-height: 50px;
    display: grid;
    place-items: center;
    gap: 3px;
    border: 0;
    border-radius: var(--radius-md);
    padding: 6px 4px;
    color: var(--typy-text-muted);
    background: transparent;
    font-size: 12px;
    font-weight: 900;
  }

  .mobile-bottom-nav button.active {
    color: var(--typy-copper-dark);
    background: var(--typy-orange-soft);
  }

  .mobile-bottom-nav .tab-dot {
    width: auto;
    height: auto;
    min-width: 24px;
    border-radius: var(--radius-xs);
    color: inherit;
    background: transparent;
    font-size: 12px;
    line-height: 1;
  }

  .mobile-bottom-nav button.active .tab-dot {
    background: transparent;
  }

  .section-title {
    display: grid;
    min-height: 0;
    padding: 14px;
  }

  .metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 520px) {
  .top-command-bar.command-topbar {
    grid-template-columns: 1fr;
    grid-template-areas:
      "main"
      "actions"
      "search";
  }

  .topbar-actions {
    justify-content: stretch;
  }

  .topbar-actions .btn.primary,
  .topbar-actions .sync-chip-action {
    flex: 1 1 0;
  }

  .workspace-title .topbar-title {
    font-size: 19px;
  }

  .metrics {
    grid-template-columns: 1fr;
  }

  .panel,
  .section-panel,
  .drawer,
  .section-title,
  .command-create-card {
    border-radius: var(--radius-md);
  }
}

/* Typy Command OS V2 product redesign: operational cockpit across modules. */

.content {
  background:
    radial-gradient(circle at 12% 0%, rgb(201 95 42 / 9%), transparent 26rem),
    radial-gradient(circle at 92% 6%, rgb(16 32 51 / 8%), transparent 30rem),
    linear-gradient(135deg, var(--typy-bg-gradient-a), var(--typy-bg-gradient-b));
}

.command-module {
  width: min(100%, 1580px);
  margin: 0 auto;
  display: grid;
  gap: 14px;
}

.command-module-dashboard,
.command-home-v2 {
  gap: 16px;
}

.page-intro-v2 {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 18px 20px;
  border: 1px solid rgb(226 216 204 / 92%);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, rgb(255 255 255 / 96%), rgb(251 247 241 / 92%)),
    var(--typy-surface);
  box-shadow: var(--shadow-subtle);
}


.page-intro-v2 .eyebrow,
.section-header-v2 .eyebrow {
  color: var(--typy-copper-dark);
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}


.page-intro-copy h2 {
  margin: 3px 0 5px;
  font-size: clamp(28px, calc(1vw * 3), 48px);
  line-height: 0.96;
  letter-spacing: -0.055em;
}

.page-intro-copy p {
  max-width: 680px;
  margin: 0;
  color: var(--typy-text-muted);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.32;
}


.page-intro-side {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.status-row,
.page-actions,
.filter-bar-v2,
.saved-view-bar-v2 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.page-actions .btn {
  min-height: 38px;
  border-radius: var(--radius-sm);
}

.filter-bar-v2 {
  padding: 10px;
  border: 1px solid rgb(226 216 204 / 82%);
  border-radius: var(--radius-md);
  background: rgb(255 255 255 / 72%);
  box-shadow: 0 8px 22px rgb(15 23 42 / 4%);
}

.filter-bar-v2 > .search-input {
  flex: 1 1 320px;
  min-height: 40px;
  border-radius: var(--radius-sm);
  background: var(--typy-surface);
}

/* Bandeja "Qué requiere acción ahora": el filtro venía todo en una fila apretada (búsqueda +
   8 chips + contador). Se separa en filas con aire: búsqueda a ancho completo arriba, chips
   debajo y el contador a la derecha en su propia línea (Rubén 21-jul: "apelotonado"). */
.filter-bar-v2.bandeja-filter {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding: 14px 16px;
}
.filter-bar-v2.bandeja-filter > .search-input {
  flex: none;
  width: 100%;
}
.filter-bar-v2.bandeja-filter > .saved-view-bar-v2 {
  gap: 10px;
}
.filter-bar-v2.bandeja-filter > .filter-result-count {
  align-self: flex-end;
  margin: 0;
}

/* Segunda fila de filtros de Partes: Estado / Tipo / rango de fechas */
.workorder-filter-row {
  background: rgb(255 255 255 / 55%);
}

.workorder-filter-row .filter-field {
  display: inline-flex;
  flex-direction: column;
  gap: 3px;
  flex: 0 1 auto;
}

.workorder-filter-row .filter-field > span {
  font-size: 12px;
  font-weight: 900;
  text-transform: none;
  color: var(--text-secondary);
}

.workorder-filter-row .filter-field > .search-input {
  min-height: 38px;
  min-width: 150px;
  border-radius: var(--radius-sm);
  background: var(--typy-surface);
}

.workorder-filter-row .filter-field > input[type="date"] {
  min-width: 140px;
}

.sort-control {
  flex: 0 1 240px;
  display: grid;
  gap: 4px;
  min-width: 210px;
}

.sort-control span {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}

.sort-control .search-input {
  width: 100%;
  min-height: 40px;
}

.saved-view-bar-v2 button {
  min-height: 34px;
  display: inline-flex;
  /* No encogerse por debajo de la etiqueta. La barra ya envuelve (`flex-wrap: wrap`), asi que una
     pestaña que no cabe baja de linea en vez de aplastarse. Medido a 850px: «Libros registro» y
     «390, 347 y 190» se quedaban con 2,6px de aire a la derecha en vez de 11. */
  flex-shrink: 0;
  gap: 8px;
  align-items: center;
  border: 1px solid var(--typy-border);
  border-radius: 999px;
  padding: 7px 11px;
  color: var(--typy-text-muted);
  background: var(--typy-surface);
  font-size: 12px;
  font-weight: 950;
}

.saved-view-bar-v2 button.active,
.saved-view-bar-v2 button:hover {
  color: var(--typy-copper-dark);
  border-color: rgb(201 95 42 / 32%);
  background: var(--typy-orange-soft);
}

.saved-view-bar-v2 b {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  color: var(--typy-copper-dark);
  background: rgb(201 95 42 / 10%);
  font-size: 12px;
}













.command-grid-v2,
.command-grid-hero,
.sync-control-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(360px, 0.9fr);
  gap: 14px;
}

.ops-main-grid.command-grid-v2 {
  grid-template-columns: repeat(12, minmax(0, 1fr));
}



.ops-main-grid.command-grid-v2 > .span-5 {
  grid-column: span 5;
}

.ops-main-grid.command-grid-v2 > .span-7 {
  grid-column: span 7;
}



.panel,
.section-panel,
.drawer,
.entity-detail-panel,
.entity-list-panel {
  border-color: rgb(226 216 204 / 88%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-subtle);
}

.section-header-v2,
.section-panel-head,
.panel-head {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid rgb(226 216 204 / 72%);
}

.panel > .section-header-v2,
.panel > .panel-head,
.entity-detail-panel > .section-header-v2,
.entity-list-panel > .panel-head {
  padding: 18px 18px 14px;
}

/* Los 18 px que separan el contenido del borde del panel. `.panel-head` y los `<p>` los traen en su
   propio `padding`; estos, en margen. La tira de KPI entró aquí el 5-sep-2026: iba a RAS del borde
   (+1 px, medido) mientras todo lo demás estaba metido 18, y como el panel tiene 28 px de radio, las
   tarjetas de las esquinas asomaban por fuera del redondeo. Se vio en el cockpit del SGA, que es el
   único sitio de todo el ERP donde una tira de KPI es hija DIRECTA de un panel: recorridas las once
   pantallas principales, no hay ninguna más, así que esto no mueve nada de lo que ya existía. La
   ficha del kardex también pinta KPI, pero dentro de `.kardex-ficha` y no de un panel. */
.panel > .detail-summary,
.panel > .detail-list,
.panel > .form-grid,
.panel > .kpi-strip-v3,
.panel > .row-actions {
  margin-left: 18px;
  margin-right: 18px;
}

.panel > .list,
.panel > .table-wrap,
.panel > .detail-grid,
.panel > .sync-node-row,
.panel > .chip-list {
  margin-left: 18px;
  margin-right: 18px;
}

/* `.table-wrap` trae `width: 100%` de la hoja base: sumado a los 18 px de cada lado de arriba media
   36 px MAS que el panel, y como `.panel` recorta (`overflow: hidden`) la ultima columna salia
   cortada por la derecha. Lo enseño Ruben el 10-oct-2026 en «Gastos del periodo» de Facturar a
   subcontrata: la cabecera decia «IMPORTI» y las casillas no tenian borde derecho. Con `auto` un
   bloque ocupa justo lo que dejan sus margenes. */
.panel > .table-wrap {
  width: auto;
}

.panel > .list,
.panel > .table-wrap,
.panel > .detail-grid,
.panel > .sync-node-row,
.panel > .chip-list,
.panel > .empty {
  margin-bottom: 18px;
}

/* Un panel que TERMINA en una fila de botones no tenía nada que lo cerrara: `.row-actions` está en
   la regla de los márgenes laterales de arriba pero no en la del margen inferior, así que los
   botones quedaban a 1 px del borde recortado de la tarjeta (medido el 5-sep-2026 en el cockpit del
   SGA, que es donde se vio). Va con `:last-child` a propósito y no sobre `.row-actions` a secas: una
   fila de botones en MEDIO de un panel ya lleva la separación de lo que venga detrás, y añadirle
   margen abriría un hueco donde hoy no lo hay. Recorrido el ERP con las nueve pantallas principales
   pintadas: los únicos paneles que acaban en `.row-actions` son los dos del SGA, así que esto no
   mueve nada de lo que ya existía y evita el mismo defecto al siguiente que escriba uno. */
.panel > .row-actions:last-child {
  margin-bottom: 18px;
}

.section-header-v2 h3,
.section-panel-head h3,
.panel-head h3 {
  margin: 2px 0 2px;
  color: var(--typy-text);
  font-size: 20px;
  letter-spacing: -0.035em;
}

.section-header-v2 p,
.section-panel-head p,
.panel-head p {
  margin: 0;
  color: var(--typy-text-muted);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.28;
}

.decision-queue-v2.full-width {
  width: 100%;
}










.pipeline-stage-list {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

.pipeline-stage {
  min-height: 68px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 14px;
  align-items: center;
  border: 1px solid var(--typy-border);
  border-radius: var(--radius-md);
  padding: 13px 14px;
  text-align: left;
  background: var(--typy-surface-soft);
}

.pipeline-stage span {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 950;
  text-transform: none;
}

.pipeline-stage strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--typy-navy-900);
  font-size: 26px;
}

.pipeline-stage small {
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 800;
}

.command-row,
.list-row,
.line-row {
  border-radius: var(--radius-sm);
}

.data-table {
  font-size: 13px;
}

.data-table th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 12px;
}

.data-table td {
  padding: 10px 12px;
  vertical-align: middle;
}

.table-wrap,
.ops-table-wrap {
  overflow: auto;
  border: 1px solid rgb(226 216 204 / 78%);
  border-radius: var(--radius-md);
}

.quote-create-disclosure > form {
  margin-top: 12px;
  border: 0;
  box-shadow: none;
}

/* CORREOS, IBAN Y REFERENCIAS LARGAS: QUE PARTAN, NO QUE SE SALGAN.
   Un correo como «r.fernandez@typyspain.es» es UNA sola palabra para el navegador. Metido en una
   columna estrecha con `overflow: hidden`, se sale y el panel se lo come: 94px en la tarjeta de
   Sincronizacion, 32px en el directorio de Tecnicos. Los dos, cazados midiendo.
   Se aplica donde vive ese tipo de dato —textos secundarios y celdas— y NO a lo ancho de todo,
   porque partiria tambien palabras normales que hoy envuelven bien.

   `break-word`, NO `anywhere`, y la diferencia importa aunque parezca la misma palabra: las dos
   parten un correo cuando de verdad no cabe, pero `anywhere` ademas encoge la ANCHURA MINIMA del
   elemento, asi que una columna flexible se cierra sobre el texto en vez de reservarle su sitio.
   Eso es lo que partia «r.fernandez@typyspai / n.es» en el directorio de Tecnicos con espacio de
   sobra al lado: no era el texto, era la columna colapsando. Con `break-word` la columna mantiene
   el ancho de la palabra mas larga y el correo cabe entero. */
.entity-list-panel .muted,
.entity-list-panel small,
.customer-command-metric small,
td .muted,
td small {
  overflow-wrap: break-word;
}

.sync-operation-list {
  display: grid;
  gap: 10px;
  padding: 16px 18px 18px;
}

.sync-operation-list.compact {
  gap: 8px;
}

.sync-operation-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px;
  align-items: center;
  border: 1px solid var(--typy-border);
  border-radius: var(--radius-md);
  background: var(--typy-surface);
  padding: 14px;
}

.sync-operation-card.compact {
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 12px;
}

.sync-operation-card.danger {
  border-color: rgb(180 35 24 / 28%);
  background: #fff7f5;
}

.sync-operation-card.warning {
  border-color: rgb(183 121 31 / 28%);
  background: #fffaf0;
}

.sync-operation-card.success {
  border-color: rgb(31 122 77 / 22%);
  background: #f6fbf7;
}

.sync-operation-card.info {
  border-color: rgb(37 99 168 / 20%);
  background: #f7faff;
}

.sync-operation-main {
  min-width: 0;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 9px;
  align-items: center;
}

.sync-operation-main strong,
.sync-operation-main span:not(.status-pill),
.sync-operation-main em {
  min-width: 0;
}

.sync-operation-main strong {
  color: var(--typy-navy-900);
  font-size: 16px;
  letter-spacing: -0.02em;
}

.sync-operation-main span:not(.status-pill) {
  grid-column: 2;
  color: var(--typy-text-muted);
  font-size: 13px;
  font-weight: 800;
}

.sync-operation-main em {
  grid-column: 1 / -1;
  color: var(--typy-danger);
  font-size: 12px;
  font-style: normal;
  font-weight: 900;
  line-height: 1.25;
}

.sync-operation-main small {
  grid-column: 1 / -1;
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.35;
}

.sync-operation-main small strong {
  display: inline;
  margin-top: 0;
  font-size: inherit;
}

.sync-operation-meta {
  display: grid;
  justify-items: end;
  gap: 3px;
  color: var(--typy-text-muted);
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.sync-operation-card > .row-actions {
  grid-column: 1 / -1;
  justify-content: flex-end;
}

.panel.stack .list {
  display: grid;
  gap: 12px;
  padding: 14px 18px 18px;
}

.billing-insight-grid {
  align-items: start;
}

.billing-review-grid {
  display: grid;
  gap: 18px;
  margin-top: 18px;
}

.billing-queue-board {
  display: grid;
  gap: 14px;
  margin: 0 18px 18px;
}
}