/* Staff v3.1: piel móvil del prototipo aplicada a las vistas React existentes. */
.staff-m {
  --sm-max: 560px;
  --sm-head: 58px;
  --sm-card: var(--cc-card);
  --sm-line: rgba(255, 255, 255, 0.14);
  --sm-soft: rgba(255, 255, 255, 0.06);
  --sm-muted: var(--cc-muted);
  --sm-ok: #3ddc84;
  min-height: 100vh;
  min-height: 100dvh;
  color: #fff;
  background: var(--cc-bg);
}
html:has(.staff-m),
body:has(.staff-m) {
  min-height: 100%;
  background: var(--cc-bg) !important;
}
.staff-m::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(
    rgba(191, 233, 251, 0.12) 1px,
    transparent 1px
  );
  background-size: 28px 28px;
  z-index: 0;
}
.staff-m > * {
  position: relative;
}
.staff-m ::selection {
  background: var(--cc-yellow);
  color: var(--ink);
}
.staff-m .sm-head {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--sm-head);
  padding: 0 8px 0 14px;
  background: rgba(13, 24, 56, 0.94);
  backdrop-filter: blur(10px);
  border-bottom: 1.5px solid rgba(255, 255, 255, 0.1);
}
.staff-m .sm-logos {
  gap: 7px;
  min-width: 0;
}
.staff-m .sm-logos .x {
  font-family: var(--f-display);
  font-size: 13px;
  color: var(--cc-yellow);
}
.staff-m .sm-tag {
  display: inline-flex;
  padding: 4px 8px;
  border-radius: 8px;
  background: var(--cc-yellow);
  color: var(--ink);
  border: 2px solid var(--cc-line);
  font-size: 10.5px;
  letter-spacing: 0.12em;
}
.staff-m .sm-who {
  position: relative;
  padding: 4px;
  border-radius: 999px;
}
.staff-m .sm-av {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--cc-blue);
  border: 2.5px solid #fff;
  font-family: var(--f-display);
  font-size: 15px;
  color: #fff;
}
.staff-m .sm-who .net {
  position: absolute;
  right: 2px;
  bottom: 3px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--sm-ok);
  border: 2px solid var(--cc-bg);
}
.staff-m .sm-account {
  position: absolute;
  top: calc(var(--sm-head) - 4px);
  right: 10px;
  z-index: 60;
  width: min(240px, calc(100vw - 20px));
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--cc-line);
  box-shadow: 5px 5px 0 var(--cc-yellow);
}
.staff-m .sm-account b,
.staff-m .sm-account span {
  display: block;
}
.staff-m .sm-account span {
  margin-top: 2px;
  color: var(--ink-3);
  font-size: 12.5px;
}
.staff-m .sm-account button {
  width: 100%;
  min-height: 44px;
  margin-top: 12px;
  border: 2px solid var(--cc-line);
  border-radius: 12px;
  background: var(--danger-soft);
  color: var(--danger);
  font: inherit;
  font-weight: 800;
}
.staff-m > .theme-staff,
.staff-m .theme-staff {
  background: transparent;
  color: #fff;
  min-height: calc(100vh - var(--sm-head));
}
.staff-m .page {
  max-width: var(--sm-max);
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 48px);
  scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 48px);
}
.staff-m .st-title {
  padding: 16px var(--gutter) 4px;
}
.staff-m .st-title .h1 {
  font-size: 28px;
  color: #fff;
}
.staff-m .st-title .kicker {
  color: var(--cc-yellow);
}
.staff-m .st-note {
  color: var(--cc-muted);
}
.staff-m .st-card {
  border-radius: 22px;
  background: var(--sm-card);
  border: 2px solid var(--sm-line);
  color: #fff;
}
.staff-m .st-card--ink {
  border-color: var(--cc-yellow);
}
.staff-m .scanner {
  border: 3px solid var(--cc-line);
  border-radius: 24px;
  box-shadow: 5px 5px 0 var(--cc-blue);
  background: radial-gradient(circle at 50% 40%, #24396a 0%, #0a1228 75%);
}
.staff-m .result {
  border: 2.5px solid var(--cc-line);
}
.staff-m .recent button {
  background: var(--sm-soft);
  border-color: var(--sm-line);
  color: #fff;
}
.staff-m .ph-main {
  border-color: var(--cc-line);
  box-shadow: 6px 6px 0 var(--cc-blue);
}
.staff-m .ph-tile {
  border-color: var(--cc-line);
}
.staff-m .sh-row {
  background: var(--sm-card);
  border-color: var(--sm-line);
  color: #fff;
}
.staff-m .sh-row .d,
.staff-m .sh-row .time small {
  color: var(--cc-muted);
}
.staff-m .subnav {
  top: var(--sm-head);
  background: var(--cc-bg);
}
.staff-m .subnav a {
  background: var(--sm-soft);
  border-color: var(--sm-line);
  color: #fff;
}
.staff-m .subnav a[aria-current="page"] {
  background: var(--cc-yellow);
  border-color: var(--cc-line);
  color: var(--ink);
}
.staff-m .kpi,
.staff-m .edit-card,
.staff-m .export-list a {
  border: 3px solid var(--cc-line);
  box-shadow: 4px 4px 0 var(--cc-blue);
}
.staff-m > .st-tabbar.cc-tabbar {
  position: fixed !important;
  inset: auto 0 0 !important;
  margin: 0 !important;
  width: 100% !important;
  z-index: 100;
}
.staff-m .cc-tabbar nav {
  max-width: var(--sm-max);
  grid-template-columns: repeat(var(--staff-tabs, 5), minmax(0, 1fr));
  background: #080f25;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 12px;
}
.staff-m .cc-tab {
  color: #8f9abb;
}
.staff-m .cc-tab[aria-current="page"] {
  color: var(--cc-yellow);
  background: transparent;
}
.staff-m .cc-tab[aria-current="page"] .ico {
  background: rgba(249, 217, 74, 0.16);
}
.staff-m .cc-tab {
  min-height: 58px;
  justify-content: center;
}
.staff-m .cc-tab .ico {
  width: min(84px, 80%);
  height: 32px;
  border-radius: 13px;
  display: grid;
  place-items: center;
}
.staff-m .login-m {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 26px 16px 40px;
}
.login-m .logos {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 18px;
}
.login-m .logos b {
  color: var(--cc-yellow);
  font-family: var(--f-display);
  font-size: 24px;
}
.login-m .form-card {
  border-radius: 26px;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--cc-line);
  box-shadow: 7px 7px 0 var(--cc-blue);
  padding: 20px;
}
.login-m .form-card .h1 {
  font-size: 30px;
}
.login-m .form-card .lead {
  color: #4a5868;
  font-size: 14px;
}
.login-m .field {
  color: var(--ink);
}
.login-m .st-input {
  min-height: 54px;
  border: 2px solid #c5d0dc;
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
}
.login-m .st-input:focus {
  border-color: var(--link);
  box-shadow: 0 0 0 4px rgba(31, 111, 153, 0.18);
}
.login-m .btn--yellow {
  min-height: 58px;
  border: 3px solid var(--cc-line);
  border-radius: 18px;
  background: var(--cc-yellow);
  color: var(--ink);
  box-shadow: 5px 5px 0 var(--cc-red);
  font-family: var(--f-display);
  font-size: 19px;
}
.login-m .mascots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 16px;
}
.login-m .mascots img {
  width: 86px;
  height: 100px;
  object-fit: contain;
}
@media (max-width: 379px) {
  .staff-m .sm-logos .cc,
  .staff-m .sm-logos .x {
    display: none;
  }
  .staff-m .sm-logos > img:first-child {
    width: 84px;
  }
  .staff-m .sm-tag {
    padding-inline: 6px;
  }
  .login-m .logos img:first-child {
    width: 118px;
  }
  .login-m .logos img:last-child {
    width: 84px;
  }
}
@media (min-width: 700px) {
  .staff-m .st-title .h1 {
    font-size: 32px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .staff-m * {
    scroll-behavior: auto !important;
  }
}

/* Staff v3.1: pantallas móviles por ruta. */
.staff-m .sm-page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--sm-max);
  min-width: 0;
  margin: 0 auto;
  padding: 10px 14px calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 48px);
  scroll-padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 48px);
  overflow: hidden;
}
.staff-m :is(.page, .sm-page) :is(a, button, input, select, textarea, [tabindex]) {
  scroll-margin-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 24px);
}
.staff-m .sm-page button,
.staff-m .sm-page a {
  touch-action: manipulation;
}
.staff-m .sm-page button {
  font: inherit;
}
.staff-m .sm-page img {
  max-width: 100%;
}
.staff-m .sm-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 104px;
  align-items: center;
  min-height: 142px;
  padding: 12px 4px 8px;
}
.staff-m .sm-hero h1 {
  margin: 2px 0;
  font-family: var(--f-display);
  font-size: clamp(34px, 11vw, 48px);
  line-height: 1;
  color: #fff;
}
.staff-m .sm-hero p {
  margin: 3px 0;
  color: var(--sm-muted);
  font-size: 13px;
}
.staff-m .sm-hero > img {
  width: 104px;
  height: 112px;
  object-fit: contain;
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
  animation: sm-bob 3s ease-in-out infinite;
}
.staff-m .kicker {
  color: var(--cc-yellow);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.staff-m .sm-back,
.staff-m .sm-public,
.staff-m .link-x {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: #bfe9fb;
  font-size: 12.5px;
  font-weight: 800;
  text-decoration: none;
}
.staff-m .sm-back {
  min-height: 36px;
}
.staff-m .sm-public {
  color: var(--cc-yellow);
}
.staff-m .sm-sec {
  margin-top: 22px;
}
.staff-m .sm-sec-h,
.staff-m .sm-card-h,
.staff-m .sm-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.staff-m .sm-sec-h {
  margin-bottom: 9px;
}
.staff-m .sm-sec h2 {
  margin: 1px 0 0;
  font-family: var(--f-display);
  font-size: 22px;
  color: #fff;
}
.staff-m .sm-card,
.staff-m .sm-light,
.staff-m .meta-card,
.staff-m .me-card {
  display: block;
  padding: 14px;
  border: 1.5px solid var(--sm-line);
  border-radius: 18px;
  background: var(--sm-card);
  color: #fff;
}
.staff-m .sm-light {
  margin-bottom: 9px;
  background: #fff;
  color: var(--ink);
  border-color: var(--cc-line);
}
.staff-m .sm-light--yellow {
  background: #fff9d9;
  box-shadow: 3px 3px 0 var(--cc-yellow);
}
.staff-m .sm-card + .sm-card {
  margin-top: 9px;
}
.staff-m .sm-card b,
.staff-m .sm-card small,
.staff-m .sm-light b,
.staff-m .sm-light small {
  display: block;
}
.staff-m .sm-card small {
  color: var(--sm-muted);
}
.staff-m .sm-light small {
  color: var(--ink-3);
}
.staff-m .lbl {
  font-size: 10.5px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.staff-m .note {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--sm-muted);
  font-size: 12.5px;
  line-height: 1.45;
}
.staff-m .sm-light .note {
  color: var(--ink-3);
}
.staff-m .seg {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  padding: 3px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}
.staff-m .seg button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-height: 42px;
  padding: 6px;
  border: 0;
  border-radius: 11px;
  background: transparent;
  color: #aeb9d2;
  font-size: 12px;
  font-weight: 900;
}
.staff-m .seg button[aria-pressed="true"] {
  background: var(--cc-yellow);
  color: var(--ink);
}
.staff-m .pill,
.staff-m .tag-x,
.staff-m .sm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: 100%;
  padding: 4px 8px;
  border-radius: 999px;
  background: #edf1f5;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 900;
}
.staff-m .pill--yellow,
.staff-m .sm-chip--warn {
  background: var(--cc-yellow);
  color: var(--ink);
}
.staff-m .pill--red {
  background: var(--cc-red);
  color: #fff;
}
.staff-m .pill--ok,
.staff-m .sm-chip--ok {
  background: #d9f8e7;
  color: #08633a;
}
.staff-m .tag-x {
  margin: 2px;
  background: rgba(51, 116, 246, 0.18);
  color: #bfe9fb;
}
.staff-m .sm-light .tag-x {
  color: #15539c;
}
.staff-m .kpi-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.staff-m .kpi-m {
  min-width: 0;
  padding: 12px;
  border: 1.5px solid var(--sm-line);
  border-radius: 16px;
  background: var(--sm-card);
}
.staff-m .kpi-m > b {
  display: block;
  font-family: var(--f-display);
  font-size: 25px;
  color: var(--cc-yellow);
}
.staff-m .kpi-m span,
.staff-m .kpi-m small {
  display: block;
  overflow-wrap: anywhere;
}
.staff-m .kpi-m span {
  font-size: 12px;
  font-weight: 800;
}
.staff-m .kpi-m small {
  margin-top: 2px;
  color: var(--sm-muted);
  font-size: 10.5px;
}
.staff-m .meta-panel {
  display: block;
  margin: 14px 0 4px;
  padding: 14px;
  border: 1.5px solid var(--sm-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  color: #fff;
}
.staff-m .meta-panel .kicker {
  color: var(--cc-yellow);
}
.staff-m .meta-panel .meta-count b {
  font-family: var(--f-display);
  font-size: 38px;
  line-height: 1;
  color: var(--cc-yellow);
}
.staff-m .meta-panel .meta-count span {
  font-size: 13px;
  font-weight: 800;
  color: var(--sm-muted);
}
.staff-m .meta-segs {
  display: flex;
  gap: 4px;
  margin-top: 8px;
}
.staff-m .meta-segs i {
  display: block;
  height: 10px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
}
.staff-m .meta-segs i > span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cc-blue);
}
.staff-m .meta-segs i.is-done > span {
  background: var(--cc-yellow);
}
.staff-m .meta-panel .note b {
  color: #fff;
}
.staff-m .meta-card {
  margin-top: 12px;
  background: #fff9d9;
  color: var(--ink);
  border: 2px solid var(--cc-line);
  box-shadow: 4px 4px 0 var(--cc-yellow);
}
.staff-m .meta-count {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin-top: 8px;
}
.staff-m .meta-count b {
  font-family: var(--f-display);
  font-size: 38px;
}
.staff-m .meta-count span {
  font-size: 13px;
  font-weight: 800;
}
.staff-m .meta-bar {
  position: relative;
  height: 10px;
  margin: 7px 0;
  border-radius: 99px;
  background: #dfe5eb;
  overflow: hidden;
}
.staff-m .meta-bar .fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--cc-blue);
}
.staff-m .tier {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  font-size: 12px;
}
.staff-m .tier .n {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #e0e5eb;
  text-align: center;
}
.staff-m .tier.is-done .n {
  background: #27bd70;
  color: #fff;
}
.staff-m .tier.is-next {
  font-weight: 800;
}
.staff-m .win {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  padding: 9px 2px;
  border-bottom: 1px solid rgba(20, 35, 54, 0.1);
}
.staff-m .win:last-child {
  border-bottom: 0;
}
.staff-m .win .pos {
  flex: none;
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cc-yellow);
  font-family: var(--f-display);
  font-size: 17px;
}
.staff-m .win .grow {
  min-width: 0;
}
.staff-m .win small {
  display: block;
  font-size: 11px;
}
.staff-m .countdown {
  color: #a25a00 !important;
  font-weight: 900;
}
.staff-m .sm-time {
  font-family: var(--f-display);
  font-size: 24px;
}
.staff-m .board {
  overflow: hidden;
  border: 1.5px solid var(--sm-line);
  border-radius: 18px;
  background: var(--sm-card);
}
.staff-m .rk-line {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-height: 54px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--sm-line);
  color: #fff;
  text-decoration: none;
}
.staff-m .rk-line:last-child {
  border: 0;
}
.staff-m .rk-line.top .p {
  color: var(--cc-yellow);
}
.staff-m .rk-line .p,
.staff-m .rk-line .pts {
  font-family: var(--f-display);
  font-size: 20px;
}
.staff-m .rk-line .w {
  min-width: 0;
  font-size: 12.5px;
}
.staff-m .rk-line small {
  display: block;
  color: var(--sm-muted);
  font-size: 10.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.staff-m .prize-row,
.staff-m .gp-row,
.staff-m .stamp-def {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
  padding: 10px;
  border: 1.5px solid var(--sm-line);
  border-radius: 17px;
  background: var(--sm-card);
}
.staff-m .prize-row .pic,
.staff-m .prize-row .pic img,
.staff-m .gp-row > img,
.staff-m .stamp-def > img {
  width: 58px;
  height: 58px;
  object-fit: contain;
}
.staff-m .prize-row .n,
.staff-m .prize-row .s,
.staff-m .gp-row small,
.staff-m .stamp-def small {
  display: block;
}
.staff-m .prize-row .s,
.staff-m .gp-row small,
.staff-m .stamp-def small {
  color: var(--sm-muted);
  font-size: 11px;
}
.staff-m .prize-row .ctl {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: 7px;
}
.staff-m .stock-ctl {
  display: flex;
  align-items: center;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.1);
}
.staff-m .stock-ctl button {
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 18px;
}
.staff-m .stock-ctl output {
  min-width: 28px;
  text-align: center;
  font-weight: 900;
}
.staff-m .stock-ctl.is-low {
  background: rgba(255, 138, 135, 0.22);
}
.staff-m .gp-row {
  grid-template-columns: 24px 48px minmax(0, 1fr) auto auto;
}
.staff-m .gp-row > img {
  width: 46px;
  height: 48px;
}
.staff-m .gp-row .price {
  font-size: 12px;
  color: var(--cc-yellow);
}
.staff-m .stamp-def {
  grid-template-columns: 58px minmax(0, 1fr) auto;
}
.staff-m .stamp-def .switch {
  width: 44px;
  height: 26px;
  border: 0;
  border-radius: 99px;
  background: #39c779;
}
.staff-m .stamp-def .switch:after {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  margin: 3px 3px 3px auto;
  border-radius: 50%;
  background: #fff;
}
.staff-m .sm-acc {
  margin-bottom: 8px;
  border: 1.5px solid var(--sm-line);
  border-radius: 16px;
  background: var(--sm-card);
  overflow: hidden;
}
.staff-m .sm-acc summary {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 54px;
  padding: 10px 13px;
  cursor: pointer;
  list-style: none;
}
.staff-m .sm-acc summary::-webkit-details-marker {
  display: none;
}
.staff-m .sm-acc .ttl {
  flex: 1;
  color: #fff;
  font-weight: 900;
}
.staff-m .sm-acc .body {
  padding: 0 13px 14px;
  border-top: 1px solid var(--sm-line);
}
.staff-m .sm-row {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-width: 0;
  padding: 10px 0;
  border: 0;
  border-bottom: 1px solid var(--sm-line);
  background: transparent;
  color: inherit;
  text-align: left;
  text-decoration: none;
}
.staff-m .sm-row:last-child {
  border: 0;
}
.staff-m .sm-row .grow {
  min-width: 0;
}
.staff-m .sm-row b,
.staff-m .sm-row small {
  display: block;
}
.staff-m .sm-row small {
  color: var(--sm-muted);
  font-size: 11px;
}
.staff-m .sm-row time {
  flex: none;
  color: var(--sm-muted);
  font-size: 11px;
}
.staff-m .online-dot {
  width: 10px;
  height: 10px;
  flex: none;
  border-radius: 50%;
  background: #667084;
}
.staff-m .online-dot.on {
  background: #3ddc84;
  box-shadow: 0 0 0 3px rgba(61, 220, 132, 0.15);
}
.staff-m .tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.staff-m .tile {
  position: relative;
  min-height: 122px;
  padding: 13px;
  border: 1.5px solid var(--sm-line);
  border-radius: 18px;
  background: var(--sm-card);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
}
.staff-m .tile b,
.staff-m .tile small {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 70%;
}
.staff-m .tile small {
  margin-top: 3px;
  color: var(--sm-muted);
  font-size: 11px;
}
.staff-m .tile img {
  position: absolute;
  right: -4px;
  bottom: -5px;
  width: 72px;
  height: 82px;
  object-fit: contain;
}
.staff-m .tile-status {
  position: relative;
  z-index: 1;
  display: inline-flex;
  margin-top: 9px;
  padding: 3px 7px;
  border-radius: 999px;
  background: rgba(249, 217, 74, 0.14);
  color: var(--cc-yellow);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.staff-m .me-card {
  display: flex;
  width: 100%;
  align-items: center;
  gap: 10px;
  text-align: left;
}
.staff-m .me-card small {
  display: block;
  color: var(--sm-muted);
}
.staff-m .sm-panel-link {
  text-decoration: none;
}
.staff-m .web-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.staff-m .web-links a {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 46px;
  padding: 9px;
  border: 1.5px solid var(--sm-line);
  border-radius: 13px;
  background: var(--sm-card);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  text-decoration: none;
}
.staff-m .sm-find {
  display: flex;
  gap: 6px;
  margin-top: 12px;
}
.staff-m .sm-find .st-input {
  min-width: 0;
}
.staff-m .sm-chips {
  display: flex;
  gap: 6px;
  overflow: auto;
}
.staff-m .sm-chip {
  border: 0;
  white-space: nowrap;
}
.staff-m .sm-toolbar {
  margin: 12px 0;
}
.staff-m .sm-toolbar .note {
  margin: 0;
}
.staff-m .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.staff-m .field {
  min-width: 0;
  color: inherit;
  font-size: 11px;
  font-weight: 800;
}
.staff-m .field .st-input {
  display: block;
  width: 100%;
  margin-top: 4px;
}
.staff-m .kv {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  margin-bottom: 0;
  font-size: 12.5px;
}
.staff-m .kv dd {
  font-weight: 900;
  color: var(--cc-yellow);
}
.staff-m .sm-light .kv dd {
  color: var(--cc-blue);
}
.staff-m .sm-ico {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--cc-yellow);
  color: var(--ink);
  font-weight: 900;
}
.staff-m .funnel-m {
  display: grid;
  grid-template-columns: 80px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 7px;
  padding: 5px 0;
  font-size: 11.5px;
}
.staff-m .funnel-m .bar {
  height: 9px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.staff-m .funnel-m .bar span {
  display: block;
  height: 100%;
  background: var(--cc-blue);
}
.staff-m .ann-box {
  padding: 14px;
  border: 1.5px solid var(--sm-line);
  border-radius: 18px;
  background: var(--sm-card);
}
.staff-m .ann-box.is-on {
  border-color: var(--cc-yellow);
}
.staff-m .sm-scan {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 300px;
  border: 2px solid var(--sm-line);
  border-radius: 24px;
  background: #080f25;
  overflow: hidden;
}
.staff-m .sm-scan .frame {
  position: absolute;
  width: 190px;
  height: 190px;
  border: 2px solid rgba(255, 255, 255, 0.25);
  border-radius: 20px;
}
.staff-m .sm-scan > .mascot {
  width: 115px;
}
.staff-m .sm-scan .cam-btn {
  position: absolute;
  bottom: 42px;
}
.staff-m .sm-scan .hint {
  position: absolute;
  bottom: 16px;
  font-size: 11px;
  color: var(--sm-muted);
}
.staff-m .sm-results {
  margin-top: 8px;
}
.staff-m .sm-result {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  background: var(--sm-card);
}
.staff-m .sm-station {
  border-radius: 22px;
  background: var(--cc-yellow);
  color: var(--ink);
  border: 3px solid var(--cc-line);
  box-shadow: 5px 5px 0 var(--cc-red);
  padding: 14px;
  animation: aiRise .3s var(--ease-out);
}
.staff-m .sm-station .k {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  color: #6B4E00;
}
.staff-m .sm-station h3 {
  font-size: 19px;
  margin-top: 2px;
}
.staff-m .sm-station .real {
  font-size: 12.5px;
  color: #3B2E00;
}
.staff-m .sm-station .row-in {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.staff-m .sm-station .row-in .st-input {
  flex: 1;
  border: 2.5px solid var(--cc-line);
}
.staff-m .sm-station .field {
  color: var(--ink);
}
.staff-m .person-pass {
  padding: 18px;
  border-radius: 24px;
  background: #fff;
  color: var(--ink);
  border: 3px solid var(--cc-line);
  box-shadow: 5px 5px 0 var(--cc-blue);
}
.staff-m .person-pass h1 {
  margin: 3px 0;
  font-family: var(--f-display);
  font-size: 30px;
}
.staff-m .pass-stamps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
  margin-top: 14px;
}
.staff-m .pass-stamps span {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #fff4a8;
  border: 2px dashed #b28700;
}
.staff-m .pass-stamps img {
  width: 90%;
  height: 90%;
  object-fit: contain;
}
.staff-m .pass-stamps b {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  text-align: center;
}
.staff-m .sm-report {
  max-width: 900px;
  padding-bottom: 30px;
}
.staff-m .report-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 5px 0 12px;
}
.staff-m .report-toolbar > a {
  color: #bfe9fb;
}
.staff-m .report-page {
  padding: 22px;
  border-radius: 12px;
  background: #fff;
  color: #16202e;
}
.staff-m .report-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 2px solid #e6ecf2;
}
.staff-m .report-head img {
  width: 125px;
}
.staff-m .report-head div {
  text-align: right;
}
.staff-m .report-head b,
.staff-m .report-head small {
  display: block;
}
.staff-m .report-page .kpi-m {
  border-color: #dce3ea;
  background: #f5f7f9;
}
.staff-m .report-page .kpi-m > b {
  color: #16202e;
}
.staff-m .report-page .kpi-m span,
.staff-m .report-page .kpi-m small {
  color: #4a5868;
}
.staff-m .report-sec {
  margin-top: 20px;
}
.staff-m .report-sec h3 {
  padding-bottom: 5px;
  border-bottom: 2px solid #e6ecf2;
  font-size: 15px;
}
.staff-m .report-page .tbl {
  color: #16202e;
}
.staff-dialog-backdrop {
  z-index: 140;
  overscroll-behavior: contain;
}
.staff-dialog {
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 36px);
  overflow: hidden;
  padding: 0 !important;
}
.staff-dialog > form {
  min-height: 0;
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
}
.staff-dialog__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 18px 12px;
  border-bottom: 1px solid #e9eef3;
  background: #fff;
}
.staff-dialog__head h2 {
  margin: 2px 0 0;
}
.staff-dialog__close {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border: 1px solid #d5dee8;
  border-radius: 50%;
  background: #fff;
  color: var(--ink);
  font-size: 28px;
  line-height: 1;
}
.staff-dialog__body {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 16px 18px 24px;
}
.staff-dialog fieldset.field {
  min-inline-size: 0;
  margin-inline: 0;
  padding: 0;
  border: 0;
}
.staff-dialog fieldset.field > legend {
  padding: 0;
}
.staff-dialog .modal-actions {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #e9eef3;
  background: #fff;
  box-shadow: 0 -8px 20px rgba(22, 32, 46, 0.08);
}
.staff-m .setting-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--sm-line);
}
.staff-m .setting-row:last-child {
  border-bottom: 0;
}
.staff-m .setting-row small {
  display: block;
  max-width: 36rem;
  margin-top: 3px;
  color: var(--sm-muted);
  font-size: 11px;
  line-height: 1.4;
}
.staff-m .setting-value {
  flex: 0 0 auto;
  min-width: 82px;
  min-height: 48px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-weight: 900;
  text-align: center;
}
.staff-m .setting-value span {
  display: block;
  margin-top: 4px;
  color: var(--cc-yellow);
  font-size: 11.5px;
  font-weight: 800;
}
.staff-m .setting-editor {
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.06);
}
.staff-m .member-actions {
  flex: 0 0 auto;
  gap: 5px;
}
.staff-queue {
  position: sticky;
  top: calc(52px + env(safe-area-inset-top));
  z-index: 35;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: 8px 14px;
  background: var(--cc-yellow);
  color: var(--ink);
  border-bottom: 2px solid var(--cc-line);
  font-size: 12px;
  overflow-wrap: anywhere;
}
.staff-queue > span { min-width: 0; }
.staff-m .sm-card,
.staff-m .sm-row,
.staff-m .field,
.staff-m .grow { min-width: 0; }
.staff-m code.break-word { display: block; max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.staff-dialog .search-results {
  max-height: 240px;
  overflow-y: auto;
  border-top: 1px solid #e9eef3;
  border-bottom: 1px solid #e9eef3;
}
.staff-dialog .search-results .sm-row[aria-pressed="true"] {
  background: #fff8d6;
}
@keyframes sm-bob {
  50% {
    transform: translateY(-5px);
  }
}
@media (min-width: 700px) {
  .staff-m .sm-page {
    padding-inline: 18px;
  }
  .staff-m .tiles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .staff-m .kpi-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 699px) {
  .staff-dialog {
    max-height: 92dvh;
  }
}
@media (max-width: 359px) {
  .staff-m .sm-page {
    padding-inline: 10px;
  }
  .staff-m .sm-hero {
    grid-template-columns: minmax(0, 1fr) 82px;
  }
  .staff-m .sm-hero > img {
    width: 82px;
  }
  .staff-m .btn-grid,
  .staff-m .form-grid {
    grid-template-columns: 1fr;
  }
  .staff-m .gp-row {
    grid-template-columns: 20px 42px minmax(0, 1fr);
  }
  .staff-m .gp-row .price {
    grid-column: 3;
  }
  .staff-m .win {
    flex-wrap: wrap;
  }
  .staff-m .win .btn {
    margin-left: 39px;
  }
  .staff-m .setting-row > .row {
    align-items: flex-start;
    flex-direction: column;
  }
  .staff-m .setting-value {
    width: 100%;
    text-align: left;
  }
  .staff-m .member-actions {
    width: calc(100% - 45px);
    margin-left: 45px;
  }
  .staff-queue { align-items: flex-start; flex-direction: column; }
}
/* Ventana de metas (fiel al prototipo): filas compactas e ideas de premios. */
.tier-edit + .tier-edit { margin-top: 10px; padding-top: 10px; border-top: 1px solid #E9EEF3; }
.tier-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; align-items: center; }
.tier-row.meta-row { grid-template-columns: 80px minmax(0, 1fr) auto; }
.tpl-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 10px -14px 0; padding: 0 14px 2px; }
.tpl-row::-webkit-scrollbar { display: none; }
.tpl-row button { flex: none; max-width: 250px; white-space: normal; text-align: left; padding: 8px 11px; border-radius: 14px; border: 1.5px dashed rgba(22, 32, 46, .35); background: #FFF8D6; color: var(--ink); font-size: 12.5px; font-weight: 800; line-height: 1.3; }
.quick-reasons { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.quick-reasons button { padding: 7px 11px; border-radius: 999px; border: 1.5px dashed var(--link); background: #fff; color: var(--link); font-size: 12.5px; font-weight: 800; }
@media print {
  .staff-m .sm-head,
  .staff-m .st-tabbar,
  .staff-m .no-print,
  .staff-m::before {
    display: none !important;
  }
  .staff-m,
  .staff-m .sm-page {
    background: #fff !important;
    color: #16202e !important;
  }
  .staff-m .sm-report {
    max-width: none;
    padding: 0;
  }
  .staff-m .report-page {
    padding: 0;
  }
  .staff-m .report-page .kpi-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}