:root {
  --sa-forest: #0f3b2d;
  --sa-forest-2: #1a5240;
  --sa-primary: #157a55;
  --sa-highlight: #f0b429;
  --sa-ink: #17231d;
  --sa-muted: #5d6d65;
  --sa-canvas: #f2f5f3;
  --sa-surface: #ffffff;
  --sa-line: #dde5e0;
  --sa-on-forest: #cfe0d7;
  --sa-on-forest-muted: #8fb0a1;
  --sa-ok: #1c8a4e;
  --sa-warn: #b7791f;
  --sa-info: #2563a8;
  --sa-ship: #0e7c86;
  --sa-bad: #c2413a;
  --sa-font-display: "Bricolage Grotesque", "Source Sans 3", system-ui, sans-serif;
  --sa-font-body: "Source Sans 3", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  --sa-sidebar-w: 264px;
  --sa-pad: clamp(1rem, 2.5vw, 2rem);
  --bs-body-font-family: var(--sa-font-body);
  --bs-body-color: var(--sa-ink);
  --bs-body-bg: var(--sa-canvas);
  --bs-border-color: var(--sa-line);
  --bs-border-radius: .55rem;
  color-scheme: light;
}

body { -webkit-font-smoothing: antialiased; }

.btn { --bs-btn-font-weight: 600; --bs-btn-focus-shadow-rgb: 21, 122, 85; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; min-height: 2.5rem; }
.btn-primary { --bs-btn-bg: var(--sa-primary); --bs-btn-border-color: var(--sa-primary); --bs-btn-hover-bg: #116446; --bs-btn-hover-border-color: #116446; --bs-btn-active-bg: var(--sa-forest); --bs-btn-active-border-color: var(--sa-forest); }
.btn-outline-secondary { --bs-btn-color: var(--sa-ink); --bs-btn-bg: var(--sa-surface); --bs-btn-border-color: var(--sa-line); --bs-btn-hover-color: var(--sa-ink); --bs-btn-hover-bg: var(--sa-canvas); --bs-btn-hover-border-color: #c3d0c9; --bs-btn-active-color: var(--sa-ink); --bs-btn-active-bg: var(--sa-line); --bs-btn-active-border-color: #c3d0c9; }
.sa-btn-plain { --bs-btn-color: var(--sa-ink); --bs-btn-hover-color: var(--sa-ink); --bs-btn-hover-bg: var(--sa-canvas); --bs-btn-active-color: var(--sa-ink); --bs-btn-active-bg: var(--sa-line); --bs-btn-active-border-color: transparent; }
.sa-icon-btn { width: 2.5rem; padding: 0; font-size: 1.2rem; }

.form-control, .form-select { min-height: 2.5rem; }
.form-control:focus, .form-select:focus { border-color: var(--sa-primary); box-shadow: 0 0 0 .2rem rgba(21, 122, 85, .18); }
.form-label { margin-bottom: .3rem; font-weight: 600; }
.input-group-text { background: var(--sa-surface); color: var(--sa-muted); }
.dropdown-menu { --bs-dropdown-border-color: var(--sa-line); --bs-dropdown-border-radius: .7rem; --bs-dropdown-link-active-bg: var(--sa-primary); box-shadow: 0 12px 28px rgba(15, 59, 45, .12); }
.dropdown-item { display: flex; align-items: center; gap: .6rem; padding-block: .55rem; }
.pagination { --bs-pagination-color: var(--sa-ink); --bs-pagination-border-color: var(--sa-line); --bs-pagination-hover-color: var(--sa-ink); --bs-pagination-hover-bg: var(--sa-canvas); --bs-pagination-hover-border-color: var(--sa-line); --bs-pagination-focus-color: var(--sa-ink); --bs-pagination-focus-bg: var(--sa-canvas); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(21, 122, 85, .18); --bs-pagination-active-bg: var(--sa-primary); --bs-pagination-active-border-color: var(--sa-primary); --bs-pagination-disabled-border-color: var(--sa-line); margin: 0; }
.page-link { display: grid; place-items: center; min-width: 2.5rem; min-height: 2.5rem; }
.modal { --bs-modal-border-width: 0; --bs-modal-border-radius: 1rem; }
.modal-title { font: 600 1.3rem/1.2 var(--sa-font-display); }
.toast { --bs-toast-bg: var(--sa-forest); --bs-toast-color: #fff; --bs-toast-border-width: 0; }

.sa-main { min-width: 0; }
.sa-sidebar { --bs-offcanvas-width: min(288px, 86vw); }
.sa-sidebar-inner { display: flex; flex: 1 1 auto; flex-direction: column; height: 100%; min-height: 0; overflow-y: auto; background: var(--sa-forest); color: var(--sa-on-forest); }
.sa-brand { display: flex; align-items: center; gap: .75rem; padding: 1.1rem 1.1rem .9rem; }
.sa-brand-mark { display: grid; flex: none; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: .7rem; background: var(--sa-highlight); color: var(--sa-forest); font: 700 1.35rem/1 var(--sa-font-display); }
.sa-brand-text { display: grid; }
.sa-brand-text strong { color: #fff; font: 700 1.25rem/1.15 var(--sa-font-display); }
.sa-brand-text small { color: var(--sa-on-forest-muted); font-size: .82rem; line-height: 1.2; }
.sa-side-search { padding: 0 .75rem .6rem; }
.sa-side-search .form-control { border-color: transparent; background: rgba(255, 255, 255, .08); color: #fff; }
.sa-side-search .form-control::placeholder { color: var(--sa-on-forest-muted); }
.sa-nav { display: grid; gap: 2px; padding: .25rem .75rem 1rem; }
.sa-nav-group { display: grid; gap: 2px; padding: 2px 0; }
.sa-nav-link, .sa-nav-sub { position: relative; display: flex; align-items: center; gap: .8rem; min-height: 2.75rem; padding: 0 .75rem; border-radius: .6rem; color: inherit; text-decoration: none; }
.sa-nav-link > .bi:first-child { font-size: 1.15rem; }
.sa-nav-link > span { flex: 1; }
.sa-caret { font-size: .8rem; transition: transform .2s; }
.sa-nav-link[aria-expanded="false"] .sa-caret { transform: rotate(-90deg); }
.sa-nav-link:hover, .sa-nav-sub:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.sa-nav-link.active { color: #fff; }
.sa-nav-link.active > .bi:first-child { color: var(--sa-highlight); }
.sa-nav-sub { min-height: 2.5rem; margin-left: 1.95rem; }
.sa-nav-sub.active { background: var(--sa-forest-2); color: #fff; font-weight: 600; }
.sa-nav-sub.active::before { content: ""; position: absolute; top: .6rem; bottom: .6rem; left: 0; width: 3px; border-radius: 3px; background: var(--sa-highlight); }
.sa-nav-label { margin: .9rem .75rem .25rem; color: var(--sa-on-forest-muted); font-size: .82rem; }
.sa-sidebar :focus-visible { outline: 2px solid var(--sa-highlight); outline-offset: 2px; }
.sa-side-foot { margin: auto 0 0; padding: .9rem 1.25rem 1.1rem; border-top: 1px solid rgba(255, 255, 255, .08); color: var(--sa-on-forest-muted); font-size: .82rem; }

.sa-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .5rem; min-height: 3.75rem; padding: .5rem var(--sa-pad); border-bottom: 1px solid var(--sa-line); background: var(--sa-surface); }
.sa-topbar-brand { color: var(--sa-forest); font: 700 1.2rem/1 var(--sa-font-display); }
.sa-topbar-end { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.sa-search { position: relative; flex: 1; max-width: 26rem; }
.sa-search .bi, .sa-input-icon .bi { position: absolute; top: 50%; left: .8rem; color: var(--sa-muted); transform: translateY(-50%); pointer-events: none; }
.sa-search .form-control, .sa-input-icon .form-control { padding-left: 2.4rem; }
.sa-search .form-control { border-color: transparent; background: var(--sa-canvas); }
.sa-lang { display: flex; gap: 2px; padding: 3px; border-radius: .6rem; background: var(--sa-canvas); }
.sa-lang .btn { --bs-btn-color: var(--sa-muted); --bs-btn-active-bg: var(--sa-surface); min-height: 2rem; padding: 0 .65rem; border-radius: .45rem; font-size: .9rem; }
.sa-lang .btn.active { box-shadow: 0 1px 2px rgba(15, 59, 45, .16); }
.sa-user { gap: .6rem; padding: .25rem .5rem .25rem .25rem; line-height: 1.15; text-align: left; }
.sa-user-text strong, .sa-user-text small { display: block; }
.sa-user-text small { color: var(--sa-muted); font-weight: 400; }
.sa-avatar { display: grid; flex: none; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: var(--sa-forest); color: #fff; font-size: .85rem; font-weight: 700; }

.sa-content { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: var(--sa-pad); }
.sa-page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem 1rem; }
.sa-page-head h1 { margin: 0; font: 600 1.75rem/1.15 var(--sa-font-display); letter-spacing: -.01em; text-wrap: balance; }
.sa-sub { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: .25rem 0 0; color: var(--sa-muted); }
.sa-sample { padding: 0 .5rem; border: 1px dashed #b9c7bf; border-radius: 999px; font-size: .82rem; }
.sa-actions { display: flex; gap: .5rem; }

.sa-tabs { display: flex; gap: .25rem; overflow-x: auto; box-shadow: inset 0 -1px 0 var(--sa-line); scrollbar-width: none; }
.sa-tab { display: inline-flex; flex: none; align-items: center; gap: .45rem; padding: .65rem .7rem; border: 0; border-bottom: 2px solid transparent; background: none; color: var(--sa-muted); font-weight: 600; }
.sa-tab b { min-width: 1.5rem; padding: 0 .4rem; border-radius: 999px; background: var(--sa-line); color: var(--sa-ink); font-size: .8rem; font-weight: 600; text-align: center; }
.sa-tab:hover { color: var(--sa-ink); }
.sa-tab.active { border-bottom-color: var(--sa-primary); color: var(--sa-ink); }
.sa-tab:focus-visible, .sa-order-no:focus-visible { outline: 2px solid var(--sa-primary); outline-offset: -2px; }

.sa-filters { display: flex; flex-wrap: wrap; gap: .5rem; }
.sa-filter-main { display: flex; flex: 1 1 18rem; gap: .5rem; }
.sa-input-icon { position: relative; flex: 1; }
.sa-filter-more { gap: .5rem; }
.sa-filter-more .form-select { width: auto; min-width: 13rem; }
.sa-filter-more .input-group { flex-wrap: nowrap; width: auto; }
.sa-filter-more .input-group > .form-control { flex: none; width: 9.5rem; }

.sa-panel { container-type: inline-size; overflow: hidden; border: 1px solid var(--sa-line); border-radius: .85rem; background: var(--sa-surface); }
.sa-table-wrap { overflow-x: auto; }
.sa-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sa-table th { padding: .7rem 1rem; border-bottom: 1px solid var(--sa-line); background: #f8faf9; color: var(--sa-muted); font-size: .86rem; font-weight: 600; white-space: nowrap; }
.sa-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--sa-line); vertical-align: middle; }
.sa-table tbody tr { cursor: pointer; }
.sa-table tbody tr:hover { background: #f6f9f7; }
.sa-table small { display: block; color: var(--sa-muted); font-size: .86rem; white-space: nowrap; }
.sa-order-no { color: var(--sa-ink); font-weight: 600; text-decoration: none; white-space: nowrap; }
.sa-order-no:hover { color: var(--sa-primary); text-decoration: underline; }
.c-total { font-weight: 600; white-space: nowrap; }
.c-act { width: 1%; }
.c-member small { white-space: normal; }
.sa-table .sa-col-wide { display: none; }
@container (min-width: 60rem) {
  .sa-table .sa-col-wide { display: table-cell; }
}
.st-pendiente .c-order { box-shadow: inset 3px 0 0 var(--sa-warn); }
.sa-pill { --c: var(--sa-muted); display: inline-flex; align-items: center; gap: .4rem; padding: .15rem .6rem; border-radius: 999px; background: color-mix(in srgb, var(--c) 12%, white); color: color-mix(in srgb, var(--c) 75%, black); font-size: .86rem; font-weight: 600; white-space: nowrap; }
.sa-pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: var(--c); }
.sa-pill-pendiente { --c: var(--sa-warn); }
.sa-pill-preparacion { --c: var(--sa-info); }
.sa-pill-enviado { --c: var(--sa-ship); }
.sa-pill-entregado { --c: var(--sa-ok); }
.sa-pill-cancelado { --c: var(--sa-bad); }
.sa-empty { display: grid; justify-items: center; gap: .75rem; padding: 2.5rem 1rem; color: var(--sa-muted); text-align: center; }
.sa-empty p { margin: 0; }
.sa-panel-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding: .75rem 1rem; color: var(--sa-muted); font-size: .92rem; }

.sa-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .9rem 1.25rem; margin: 0 0 1.25rem; }
.sa-dl dt { color: var(--sa-muted); font-size: .86rem; font-weight: 400; }
.sa-dl dd { margin: 0; font-weight: 600; }
.sa-form { display: grid; gap: 1rem; }
.sa-modal-date { color: var(--sa-muted); }

@media (min-width: 768px) {
  .sa-shell { display: grid; grid-template-columns: var(--sa-sidebar-w) minmax(0, 1fr); transition: grid-template-columns .2s ease; }
  .sa-sidebar { position: sticky; top: 0; height: 100vh; height: 100dvh; }
  .sb-rail { --sa-sidebar-w: 76px; }
  .sb-rail .sa-brand { justify-content: center; padding-inline: 0; }
  .sb-rail .sa-brand-text, .sb-rail .sa-nav .sa-caret, .sb-rail .sa-nav .collapse, .sb-rail .sa-nav .collapsing, .sb-rail .sa-side-foot { display: none; }
  .sb-rail .sa-nav-link { justify-content: center; padding: 0; }
  .sb-rail .sa-nav-link > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sb-rail .sa-nav-label { height: 1px; margin: .6rem .5rem; background: rgba(255, 255, 255, .12); font-size: 0; }
}

@media (min-width: 768px) and (max-width: 1199.98px) {
  .sa-filter-more { flex: 1 1 100%; min-width: 0; }
  .sa-filter-more > * { flex: 1 1 0; min-width: 0; }
  .sa-filter-more .input-group > .form-control { flex: 1 1 auto; width: 1%; }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .sa-table th, .sa-table td { padding-inline: .75rem; }
}

@media (max-width: 767.98px) {
  .sa-filter-main, .sa-filter-more { flex-basis: 100%; }
  .sa-filter-more.show, .sa-filter-more.collapsing { display: grid; }
  .sa-filter-more .form-select, .sa-filter-more .input-group { width: 100%; }
  .sa-filter-more .input-group > .form-control { flex: 1 1 auto; width: 1%; }
  .sa-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .sa-table, .sa-table tbody { display: block; }
  .sa-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "order status" "member total"; gap: .4rem .75rem; padding: .85rem 1rem; border-bottom: 1px solid var(--sa-line); }
  .sa-table td { display: block; padding: 0; border: 0; }
  .sa-table .c-order { grid-area: order; box-shadow: none; }
  .sa-table .c-status { grid-area: status; justify-self: end; }
  .sa-table .c-member { grid-area: member; }
  .sa-table .c-total { grid-area: total; align-self: end; }
  .sa-table tbody tr.st-pendiente { box-shadow: inset 3px 0 0 var(--sa-warn); }
  .sa-panel-foot { justify-content: center; }
  .modal-footer .btn { flex: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .sa-shell, .sa-caret { transition: none; }
}

.sa-plain { display: grid; min-height: 100vh; place-items: center; padding: var(--sa-pad); }
.sa-plain-box { max-width: 28rem; text-align: center; }
.sa-plain-code { color: var(--sa-primary); font: 700 3.5rem/1 var(--sa-font-display); }
.sa-plain-box h1 { margin: .75rem 0 .5rem; font: 600 1.5rem/1.2 var(--sa-font-display); }
.sa-plain-box p { color: var(--sa-muted); }
.sa-panel-body { padding: 1.25rem; color: var(--sa-muted); }