/* Zestia Negocio: lectura inmediata en las cinco calles operativas.
   Esta capa es deliberadamente aislada al panel de comandas. */

body.app-frame.page-dashboard #ops-center .order-card,
body.app-frame.page-dashboard #ops-center .order-card--large,
body.app-frame.page-dashboard.ops-compact #ops-center .order-card {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-areas:
    "head"
    "group"
    "kitchens"
    "items"
    "actions"
    "alerts"
    "meta"
    "details" !important;
  grid-template-rows: auto !important;
  align-content: start !important;
  gap: 7px !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 8px !important;
  overflow: visible !important;
}

body.app-frame.page-dashboard #ops-center .order-card__head {
  grid-area: head !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 94px !important;
  align-items: start !important;
  gap: 7px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

body.app-frame.page-dashboard #ops-center .order-card__identity {
  display: grid !important;
  align-content: start !important;
  gap: 5px !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
}

body.app-frame.page-dashboard #ops-center .order-card__keyline {
  display: flex !important;
  align-items: stretch !important;
  gap: 6px !important;
  width: 100% !important;
}

body.app-frame.page-dashboard #ops-center .order-card__keyline .turn-number {
  display: grid !important;
  place-items: center !important;
  flex: 1 1 auto !important;
  min-width: 62px !important;
  height: 54px !important;
  padding: 4px 7px !important;
  font-size: clamp(25px, 2.2vw, 34px) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.app-frame.page-dashboard #ops-center .zops-group-marker {
  flex: 0 0 42px !important;
  min-width: 42px !important;
  min-height: 54px !important;
}

body.app-frame.page-dashboard #ops-center .zops-group-marker b {
  font-size: 19px !important;
}

body.app-frame.page-dashboard #ops-center .zops-group-marker small {
  font-size: 11px !important;
}

body.app-frame.page-dashboard #ops-center .order-card__title {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
  width: 100% !important;
  min-height: 0 !important;
  grid-column: auto !important;
}

body.app-frame.page-dashboard #ops-center .turn-label,
body.app-frame.page-dashboard #ops-center .status-pill {
  max-width: 100% !important;
  font-size: 11px !important;
  line-height: 1.15 !important;
  white-space: normal !important;
}

body.app-frame.page-dashboard #ops-center .order-due-stack {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  align-self: start !important;
  gap: 5px !important;
  width: 94px !important;
  height: auto !important;
  margin: 0 !important;
}

body.app-frame.page-dashboard #ops-center .order-due-box {
  display: grid !important;
  gap: 1px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 5px 4px !important;
  text-align: center !important;
}

body.app-frame.page-dashboard #ops-center .order-due-box span,
body.app-frame.page-dashboard #ops-center .order-due-box small {
  font-size: 10px !important;
  line-height: 1.1 !important;
  white-space: normal !important;
}

body.app-frame.page-dashboard #ops-center .order-due-box strong {
  font-size: 17px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

body.app-frame.page-dashboard #ops-center .zops-joint-group,
body.app-frame.page-dashboard #ops-center .zops-kitchen-match {
  align-self: start !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

body.app-frame.page-dashboard #ops-center .zops-joint-group strong,
body.app-frame.page-dashboard #ops-center .zops-joint-group span,
body.app-frame.page-dashboard #ops-center .zops-joint-group > b,
body.app-frame.page-dashboard #ops-center .zops-kitchen-match strong,
body.app-frame.page-dashboard #ops-center .zops-kitchen-match span {
  font-size: 12px !important;
  line-height: 1.2 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
}

body.app-frame.page-dashboard #ops-center .order-card__items {
  grid-area: items !important;
  display: grid !important;
  gap: 4px !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.app-frame.page-dashboard #ops-center .order-item-line {
  display: grid !important;
  gap: 2px !important;
  min-width: 0 !important;
  font-size: 13px !important;
  line-height: 1.24 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

body.app-frame.page-dashboard #ops-center .order-item-line strong,
body.app-frame.page-dashboard #ops-center .order-item-line span {
  display: block !important;
  max-width: 100% !important;
  font-size: inherit !important;
  line-height: inherit !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

body.app-frame.page-dashboard #ops-center .order-card__alerts,
body.app-frame.page-dashboard #ops-center .order-card__meta,
body.app-frame.page-dashboard #ops-center .order-card__details,
body.app-frame.page-dashboard #ops-center .order-card__actions {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.app-frame.page-dashboard #ops-center .order-card__meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 4px !important;
}

body.app-frame.page-dashboard #ops-center .order-card__meta .pill,
body.app-frame.page-dashboard #ops-center .order-card__details,
body.app-frame.page-dashboard #ops-center .order-card__allergens,
body.app-frame.page-dashboard #ops-center .order-card__instructions {
  font-size: 11px !important;
  line-height: 1.2 !important;
}

body.app-frame.page-dashboard #ops-center .order-card__actions,
body.app-frame.page-dashboard #ops-center .order-card__actions .primary-actions {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-template-rows: auto !important;
  grid-auto-rows: auto !important;
  align-items: stretch !important;
  align-content: start !important;
  gap: 5px !important;
}

/* The legacy dashboard gives .primary-actions a multi-column grid. At the
   narrow lane width that splits labels into fragments. These controls are
   decisions, not icon buttons: stack them and keep the complete verb visible. */
body.app-frame.page-dashboard #ops-center .order-card__actions .primary-actions,
body.app-frame.page-dashboard #ops-center .order-card__actions .primary-actions.row,
body.app-frame.page-dashboard #ops-center .order-card__actions .primary-actions.wrap {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  grid-auto-flow: row !important;
  grid-auto-columns: minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

body.app-frame.page-dashboard #ops-center .order-card__actions form,
body.app-frame.page-dashboard #ops-center .order-card__actions .row {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 5px !important;
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 0 !important;
}

body.app-frame.page-dashboard #ops-center .order-card__actions button,
body.app-frame.page-dashboard #ops-center .order-card__actions .button,
body.app-frame.page-dashboard #ops-center .order-card__actions .ghost-button,
body.app-frame.page-dashboard #ops-center .order-card__actions select,
body.app-frame.page-dashboard #ops-center .order-card__actions input {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: 38px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  white-space: normal !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  text-wrap: balance !important;
}

body.app-frame.page-dashboard #ops-center .order-card__exception,
body.app-frame.page-dashboard #ops-center .order-details {
  width: 100% !important;
  min-width: 0 !important;
}

body.app-frame.page-dashboard #ops-center .order-card__exception > summary,
body.app-frame.page-dashboard #ops-center .order-details > summary {
  min-height: 36px !important;
  padding: 8px 9px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  cursor: pointer !important;
}

body.app-frame.page-dashboard #ops-center .order-card__exception[open] form,
body.app-frame.page-dashboard #ops-center .order-details[open] .order-details__content {
  margin-top: 6px !important;
}

/* Do not let the explicit form grid override the browser's closed-details
   behaviour. Otherwise exception forms remain visually present outside their
   collapsed summary and overlap the following card metadata. */
body.app-frame.page-dashboard #ops-center .order-card__exception:not([open]) > :not(summary),
body.app-frame.page-dashboard #ops-center .order-details:not([open]) > :not(summary) {
  display: none !important;
}

@media (max-width: 720px) {
  body.app-frame.page-dashboard #ops-center .order-card__head {
    grid-template-columns: minmax(0, 1fr) 100px !important;
  }
}

/* Route cards must keep their duration and state readable in the narrow
   planning rail. The map remains the authority; this only fixes presentation. */
body.app-frame.page-dashboard #delivery-work-map .ops-route-card__head {
  display: grid !important;
  grid-template-columns: 42px minmax(0, 1fr) max-content !important;
  align-items: start !important;
  gap: 8px !important;
}

body.app-frame.page-dashboard #delivery-work-map .ops-route-card__head > div {
  min-width: 0 !important;
}

body.app-frame.page-dashboard #delivery-work-map .ops-route-card__head strong,
body.app-frame.page-dashboard #delivery-work-map .ops-route-card__head small,
body.app-frame.page-dashboard #delivery-work-map .ops-dispatch-state {
  display: block !important;
  max-width: 100% !important;
  font-size: 12px !important;
  line-height: 1.24 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

body.app-frame.page-dashboard #delivery-work-map .ops-route-row__eta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 46px !important;
  padding: 5px 7px !important;
  font-size: 14px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
}

body.app-frame.page-dashboard #delivery-work-map .ops-route-card__action,
body.app-frame.page-dashboard #delivery-work-map .ops-route-card__load span,
body.app-frame.page-dashboard #delivery-work-map .ops-route-card__load small {
  font-size: 11px !important;
  line-height: 1.25 !important;
  word-break: normal !important;
}