:root {
  --mi-shell-red: #e4232b;
  --mi-shell-green: #147451;
  --mi-shell-ink: #151515;
  --mi-shell-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mi-layer-nav: 30;
  --mi-layer-header: 70;
}

.mi-shell-header {
  width: 100%;
  height: 70px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 6px;
  color: var(--mi-shell-ink);
  font-family: ManropeAP, -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;
}

.mi-shell-header[hidden],
.mi-shell-bottom-nav[hidden] {
  display: none !important;
}

.mi-shell-logo { width: 50px; height: 50px; display: block; justify-self: start; object-fit: contain; }
.mi-shell-order-zone { min-width: 0; display: flex; justify-content: center; justify-self: center; }

.mi-shell-identity {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-self: end;
  line-height: 1;
  text-align: right;
}

.mi-shell-identity span {
  color: #6d6e72;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.mi-shell-identity strong {
  width: 100%;
  overflow: hidden;
  margin-top: 5px;
  font-size: 16px;
  font-weight: 780;
  letter-spacing: -.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mi-shell-pending {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 12px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: 12px;
  background: linear-gradient(145deg, #208b64, #116244);
  color: #fff;
  box-shadow: 0 6px 14px rgba(13, 91, 62, .22), inset 0 1px 0 rgba(255, 255, 255, .18);
  font: 900 9.2px/1 ManropeAP, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -.01em;
  white-space: nowrap;
  cursor: pointer;
  touch-action: manipulation;
  transition: transform .14s ease, box-shadow .14s ease, filter .14s ease;
}

.mi-shell-pending:hover { filter: brightness(1.035); }

.mi-shell-pending:active {
  transform: translateY(1px) scale(.975);
  box-shadow: 0 3px 9px rgba(13, 91, 62, .19), inset 0 1px 0 rgba(255, 255, 255, .13);
}

.mi-shell-pending:focus-visible { outline: 3px solid rgba(20, 116, 81, .24); outline-offset: 3px; }

.mi-shell-pending-icon {
  width: 18px;
  height: 18px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mi-shell-pending-compact { display: none; }
.mi-shell-pending-separator { opacity: .68; }
.mi-shell-pending b { font-size: 10px; font-weight: 900; }

.mi-shell-bottom-nav {
  position: fixed;
  z-index: var(--mi-layer-nav);
  right: 0;
  bottom: 0;
  left: 0;
  height: calc(72px + var(--mi-shell-safe-bottom));
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 5px;
  padding: 6px max(6px, env(safe-area-inset-right)) var(--mi-shell-safe-bottom) max(6px, env(safe-area-inset-left));
  border: 0;
  background: transparent;
  box-shadow: none;
  pointer-events: none;
}

.mi-shell-bottom-nav button {
  --mi-icon-accent: #d51d25;
  --mi-icon-soft: #fdebed;
  --mi-icon-main: #4b4d52;
  position: relative;
  min-width: 0;
  min-height: 44px;
  border: 1px solid rgba(35, 32, 28, .08);
  border-radius: 14px;
  background: rgba(255, 255, 255, .88);
  color: #666970;
  box-shadow: 0 5px 15px rgba(30, 27, 23, .11), inset 0 1px 0 rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: blur(13px) saturate(140%);
  backdrop-filter: blur(13px) saturate(140%);
  font: 810 8.1px/1 ManropeAP, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: .005em;
  cursor: pointer;
  white-space: nowrap;
  pointer-events: auto;
  touch-action: manipulation;
  transition: transform .14s ease, color .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.mi-shell-bottom-nav button[data-nav="service"],
.mi-shell-bottom-nav button[data-mi-moto-nav="service"] { --mi-icon-accent: #c86d12; --mi-icon-soft: #fff0dc; }

.mi-shell-bottom-nav button[data-nav="appointments"],
.mi-shell-bottom-nav button[data-mi-moto-nav="appointments"] { --mi-icon-accent: #197a74; --mi-icon-soft: #e2f3f1; }

.mi-shell-bottom-nav button[data-nav="catalog"],
.mi-shell-bottom-nav button[data-mi-moto-nav="catalog"] { --mi-icon-accent: #76506f; --mi-icon-soft: #f1e8f0; }

.mi-shell-bottom-nav button[data-nav="consultas"],
.mi-shell-bottom-nav button[data-mi-moto-nav="consultas"] { --mi-icon-accent: #416b9e; --mi-icon-soft: #e8eff8; }

.mi-shell-bottom-nav button > span { width: 23px; height: 23px; display: block; margin: 0 auto 3px; }

.mi-shell-bottom-nav button svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mi-shell-bottom-nav .mi-icon-tint { fill: var(--mi-icon-soft); stroke: none; }
.mi-shell-bottom-nav .mi-icon-main { fill: none; stroke: var(--mi-icon-main); stroke-width: 1.65; }
.mi-shell-bottom-nav .mi-icon-accent { fill: none; stroke: var(--mi-icon-accent); stroke-width: 1.9; }
.mi-shell-bottom-nav .mi-icon-fill { fill: var(--mi-icon-accent); stroke: none; }

.mi-shell-bottom-nav button:active {
  transform: translateY(1px) scale(.965);
  box-shadow: 0 2px 8px rgba(30, 27, 23, .1);
}

.mi-shell-bottom-nav button:focus-visible { outline: 3px solid rgba(228, 35, 43, .25); outline-offset: 2px; }

.mi-shell-bottom-nav button.active {
  border-color: rgba(228, 35, 43, .16);
  background: rgba(255, 246, 246, .94);
  color: #b91b22;
  box-shadow: 0 6px 18px rgba(114, 18, 23, .13), inset 0 1px 0 #fff;
}

.mi-shell-bottom-nav button.active::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 50%;
  width: 19px;
  height: 2px;
  border-radius: 4px;
  background: var(--mi-shell-red);
  transform: translateX(-50%);
  box-shadow: 0 2px 7px rgba(228, 35, 43, .24);
}

.mi-shell-bottom-nav button.active .mi-icon-main { stroke: #282a2e; }

@media (max-width: 359px) {
  .mi-shell-pending-full { display: none; }
  .mi-shell-pending-compact { display: inline; }
  .mi-shell-pending { padding: 0 10px; font-size: 9px; }
}

@media (max-width: 319px) {
  .mi-shell-logo { width: 46px; height: 46px; }
  .mi-shell-pending-compact,
  .mi-shell-pending-separator { display: none; }
  .mi-shell-pending { min-width: 48px; padding: 0 8px; }
  .mi-shell-identity strong { font-size: 14px; }
}

@media (min-width: 521px) {
  .mi-shell-bottom-nav { left: 50%; width: 520px; transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .mi-shell-bottom-nav button,
  .mi-shell-pending { transition: none !important; }
}