@media screen {
  html:not(.workspace-embedded) .lococo-admin-root::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 30;
    border: 1px solid var(--lococo-focus, #7a9ed7);
  }
  html.workspace-embedded .sidebar,
  html.workspace-embedded body .app-shell .main-column > header.topbar,
  html.workspace-embedded .mobile-bottom-nav,
  html.workspace-embedded .sidebar-scrim,
  html.workspace-embedded .order-top,
  html.workspace-embedded .sales-brand,
  html.workspace-embedded #adminMenu,
  html.workspace-embedded #logout,
  html.workspace-embedded .sales-primary-nav {
    display: none !important;
  }
  html.workspace-embedded .app-shell {
    display: block !important;
    min-height: 100dvh;
  }
  html.workspace-embedded .main-column {
    margin: 0 !important;
    width: 100% !important;
  }
  html.workspace-embedded .content-area {
    padding: 16px !important;
  }
  html.workspace-embedded .sales-header {
    background: #f6f8fb;
    color: #102b4e;
    border-bottom: 1px solid #dde4ed;
    padding: 10px 16px;
    flex-shrink: 0;
  }
  html.workspace-embedded .sales-header-main {
    justify-content: flex-end;
  }
  html.workspace-embedded #newQuote {
    background: #102b4e;
    color: white;
    border: 0;
  }
  html.workspace-embedded .order-shell {
    background: #f6f8fb;
  }
  html.workspace-embedded #ordersApp {
    padding: 16px;
  }
  html.workspace-embedded .sales-header-note {
    display: none;
  }
}

/* The persistent workspace already owns branding and primary navigation. */
@media screen {
 html.workspace-embedded .sales-header { padding:0 10px; }
 html.workspace-embedded .sales-header-main { min-height:40px; padding:3px 0; }
 html.workspace-embedded .sales-header-main #newQuote { min-height:32px; padding:5px 10px; }
}

/* The parent navigation owns the quotation action. */
html.workspace-embedded .sales-header { display:none; }

/* One frame for every screen that lives in #ordersApp (Pedidos, Caja, abastecimiento, ventas registradas).
   The shell strip above already names the screen and has the same 20px inset, so the page drops its own
   title, starts at that left edge and sits right under the strip (no extra vertical gap). */
@media screen {
  html.workspace-embedded { scrollbar-gutter: stable; }
  html.workspace-embedded #ordersApp {
    max-width: 1440px;
    margin: 0;
    padding: 6px 20px 80px;
  }
  html.workspace-embedded #ordersApp .cash-operations { max-width: none; margin: 0; }
  html.workspace-embedded .order-exchange-access { max-width: 1440px; margin: 0; padding: 8px 20px 0; }
  html.workspace-embedded #ordersApp .order-page-title,
  html.workspace-embedded #ordersApp .supply-heading h1,
  html.workspace-embedded #ordersApp .supply-heading > div > span,
  html.workspace-embedded #ordersApp .book-heading h1,
  html.workspace-embedded #ordersApp .book-heading > div > span,
  html.workspace-embedded #ordersApp .cash-operations:not(.co-customer-mode) .co-header > div:first-child {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
  html.workspace-embedded #ordersApp .cash-operations:not(.co-customer-mode) .co-header { justify-content: flex-end; margin-bottom: 10px; }
  html.workspace-embedded #ordersApp .supply-heading,
  html.workspace-embedded #ordersApp .book-heading { margin-bottom: 12px; }
  html.workspace-embedded #ordersApp .co-loading { padding: 4px 0; border: 0; background: transparent; }
  html.workspace-embedded #ordersApp .co-loading h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  html.workspace-embedded #ordersApp .co-loading p { margin: 0 0 10px; font-size: 12px; }
  html.workspace-embedded #ordersApp .co-loading-blocks span { height: 64px; }
  /* Loading state: same column, no card, so nothing moves when the page settles. */
  html.workspace-embedded #ordersApp > .order-load-state {
    max-width: none;
    margin: 0;
    padding: 6px 0;
    background: transparent;
    border: 0;
    border-radius: 0;
  }
  html.workspace-embedded #ordersApp > .order-load-state h2 { margin: 0 0 2px; font-size: 14px; color: #52647b; }
  html.workspace-embedded #ordersApp > .order-load-state p { margin: 0; font-size: 12px; }
}
@media screen and (max-width: 680px) {
  html.workspace-embedded #ordersApp { padding: 6px 12px 70px; }
  html.workspace-embedded .order-exchange-access { padding: 8px 12px 0; }
}

/* Inside the shell every #ordersApp screen uses the full width with the same 20px inset as the shell
   title strip, so wide monitors don't leave an empty band on the right (2026-10-08 owner report). */
@media screen {
  html.workspace-embedded #ordersApp,
  html.workspace-embedded #ordersApp[data-orders-frame],
  html.workspace-embedded .order-exchange-access { max-width: none; }
  html.workspace-embedded #ordersApp .od-host { max-width: none; margin: 0; }
}