/* Shared status palette. Screen only: printed documents retain their original styles. */
@media screen {
  :root {
    --atlas-status-green: #a4e879;
    --atlas-status-blue: #10233f;
    --atlas-status-amber: #f3b523;
    --atlas-status-cherry: #c51f4a;
    --atlas-status-slate: #526176;
    --atlas-status-light: #fff;
  }

  html body .badge,
  html body .pill,
  html body .status-chip,
  html body .production-history-state,
  html body .dashboard-state,
  html body .review-state,
  html body .temperature-state-label,
  html body .base-temp-status,
  html body .entity-status,
  html body .employee-state,
  html body .center-correction-status,
  html body .manager-store-status,
  html body .center-inventory-agenda-state,
  html body .manager-work-state,
  html body .absence-period,
  html body .purchase-status,
  html body .cleaning-area-tag,
  html body .inventory-period-cards article > span,
  html body .production-column-title > span,
  html body .manager-count-status-top > b,
  html body .receipt > span {
    box-sizing: border-box;
    max-width: 100%;
    padding: 5px 9px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--atlas-state-bg, var(--atlas-status-blue)) !important;
    color: var(--atlas-state-ink, var(--atlas-status-light)) !important;
    font-weight: 750 !important;
    line-height: 1.35;
    box-shadow: 0 2px 7px #10233f1f !important;
  }

  /* Neutral states remain distinct from work in progress. */
  html body .status-chip:not(.is-active):not(.is-review),
  html body .employee-state.is-inactive,
  html body .entity-card.is-inactive .entity-status,
  html body .badge[data-state="BORRADOR"],
  html body .manager-count-status-card.is-draft .manager-count-status-top > b {
    --atlas-state-bg: var(--atlas-status-slate);
    --atlas-state-ink: var(--atlas-status-light);
  }

  html body .status-chip.is-active,
  html body .production-history-state.is-finished,
  html body .pill.complete,
  html body .badge.status-activa,
  html body .review-state.validated,
  html body .temperature-state-label.ok,
  html body .base-temp-status:not(.warn),
  html body .entity-status,
  html body .employee-state.is-active,
  html body .manager-store-status.is-clear,
  html body .phase-resuelta .center-correction-status,
  html body .absence-period.period-done,
  html body .cleaning-area-tag,
  html body .receipt > span.ok,
  html body .production-column[data-status="FINALIZADA"] .production-column-title > span,
  html body .manager-count-status-card.is-complete .manager-count-status-top > b,
  html body .center-inventory-agenda-card.is-today .center-inventory-agenda-state,
  html body .badge[data-state="RECIBIDO"],
  html body .badge[data-state="CONFIRMADO"],
  html body .badge[data-state="VALIDADO"],
  html body .badge[data-state="FINALIZADA"] {
    --atlas-state-bg: var(--atlas-status-green);
    --atlas-state-ink: var(--atlas-status-blue);
  }

  html body .dashboard-state.working,
  html body .phase-leida .center-correction-status,
  html body .production-column[data-status="EN PROCESO"] .production-column-title > span,
  html body .manager-count-status-card.is-progress .manager-count-status-top > b,
  html body .manager-count-status-card.is-programmed .manager-count-status-top > b,
  html body .badge[data-state="ENVIADO"],
  html body .badge[data-state="EN PROCESO"] {
    --atlas-state-bg: var(--atlas-status-blue);
    --atlas-state-ink: var(--atlas-status-light);
  }

  html body .status-chip.is-review,
  html body .pill.pending,
  html body .badge.status-pendiente,
  html body .review-state.pending,
  html body .dashboard-state:not(.working),
  html body .temperature-state-label.missing,
  html body .base-temp-status.warn,
  html body .center-correction-status,
  html body .manager-store-status:not(.is-clear),
  html body .absence-period.period-pending,
  html body .purchase-status,
  html body .production-column[data-status="PENDIENTE"] .production-column-title > span,
  html body .manager-count-status-card.is-review .manager-count-status-top > b,
  html body .badge[data-state*="PENDIENTE"],
  html body .badge[data-state*="REVIS"] {
    --atlas-state-bg: var(--atlas-status-amber);
    --atlas-state-ink: var(--atlas-status-blue);
  }

  html body .production-history-state.is-cancelled,
  html body .badge.status-anulada,
  html body .review-state.returned,
  html body .temperature-state-label.bad,
  html body .manager-work-state.late,
  html body .inventory-period-cards article.cancelled > span,
  html body .manager-count-status-card:is(.is-correction,.is-overdue) .manager-count-status-top > b,
  html body .center-inventory-agenda-card.is-overdue .center-inventory-agenda-state,
  html body .badge[data-state*="ERROR"],
  html body .badge[data-state*="CANCEL"],
  html body .badge[data-state*="ANUL"],
  html body .badge[data-state*="RECHAZ"],
  html body .badge[data-state*="DIFEREN"] {
    --atlas-state-bg: var(--atlas-status-cherry);
    --atlas-state-ink: var(--atlas-status-light);
  }

  /* Status panels and live deadlines use the same palette, without changing layout. */
  html body :is(.inventory-period-state, .purchase-cost-status, .assigned-task-countdown),
  html body.kitchen-simple #app #content:not(.dashboard-view):not(.production-view) .purchase-cost-status,
  html body.kitchen-simple #app #content:not(.dashboard-view):not(.production-view) .purchase-cost-status.needs-review {
    background: var(--atlas-state-bg, var(--atlas-status-blue)) !important;
    color: var(--atlas-state-ink, var(--atlas-status-light)) !important;
    border-color: transparent !important;
    font-weight: 750 !important;
    box-shadow: 0 3px 10px #10233f24 !important;
  }
  html body .inventory-period-state.locked {
    --atlas-state-bg: var(--atlas-status-slate);
    --atlas-state-ink: var(--atlas-status-light);
  }
  html body :is(.purchase-cost-status.needs-review, .assigned-task-countdown.is-urgent) {
    --atlas-state-bg: var(--atlas-status-amber);
    --atlas-state-ink: var(--atlas-status-blue);
  }
  html body .assigned-task-countdown:is(.is-critical,.is-overdue) {
    --atlas-state-bg: var(--atlas-status-cherry);
    --atlas-state-ink: var(--atlas-status-light);
  }
  html body :is(.inventory-period-state, .purchase-cost-status) :is(small,strong,b,p,button) {
    color: inherit !important;
  }
  html body .inventory-period-state > span {
    background: #ffffff24 !important;
    color: inherit !important;
    border-color: transparent !important;
  }
  html body :is(.inventory-period-cards article.cancelled, .center-incident.is-resolved) {
    opacity: 1 !important;
  }

  html body .production-column-title h3::before {background: var(--atlas-status-amber) !important;}
  html body .production-column[data-status="EN PROCESO"] .production-column-title h3::before {background: var(--atlas-status-blue) !important;}
  html body .production-column[data-status="FINALIZADA"] .production-column-title h3::before {background: var(--atlas-status-green) !important;}
}