/* Original Inicio appearance comes from unchanged styles.css.
   Only typography and upper-header spacing are enhanced here. */
.view-home { font-family: "Segoe UI", Arial, sans-serif; }
.view-home .topbar {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr) auto;
  gap: 12px;
  height: 90px;
  align-items: center;
}
.view-home .mobile-brand strong {
  font-family: Bahnschrift, "Segoe UI", Arial, sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -.5px;
  line-height: 1.1;
}
.view-home .mobile-brand small {
  font-family: "Segoe UI", Arial, sans-serif;
  margin-top: 5px;
  font-size: 8px;
  line-height: 1.3;
  letter-spacing: 1.25px;
}
.view-home .top-actions { gap: 7px; justify-content: end; }
.view-home .top-icon, .view-home .mobile-avatar { width: 34px; height: 34px; }
.view-home .welcome-copy h1, .view-home .home-status h2,
.view-home .tutorial-head h2, .view-home .tutorial-step h3 {
  font-family: Bahnschrift, "Segoe UI", Arial, sans-serif;
}
body:has(.view-home) .bottom-nav { font-family: "Segoe UI", Arial, sans-serif; }
@media (max-width: 430px) {
  .view-home .topbar { gap: 9px; }
  .view-home .mobile-brand strong { font-size: 21px; }
  .view-home .mobile-brand small { letter-spacing: .7px; }
}
@media (max-width: 350px) {
  .view-home .topbar { gap: 7px; }
  .view-home .mobile-brand strong { font-size: 18px; }
  .view-home .mobile-brand small { font-size: 7px; letter-spacing: .3px; }
  .view-home .top-actions { gap: 5px; }
}

/* Inicio only: align the collection dial and refine the decorative scanner. */
.view-home .home-status-content {
  display: grid;
  grid-template-columns: 51px minmax(0, 1fr);
  align-items: center;
}
.view-home .status-dial { place-self: center; }
.view-home .status-dial span, .view-home .status-dial b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  line-height: 1;
}
.view-home .scanner-orb {
  right: 24px;
  top: 66px;
  width: 104px;
  height: 104px;
  border: 5px solid #315f50;
  background:
    linear-gradient(#39684f22, #39684f22) center / 1px 70% no-repeat,
    linear-gradient(90deg, #39684f22, #39684f22) center / 70% 1px no-repeat,
    radial-gradient(circle, #e6f7c8, #d5efad);
  box-shadow: inset 0 0 0 4px #a5cc83, 0 3px #315848;
  overflow: hidden;
}
.view-home .scanner-orb::before {
  inset: 14px;
  border: 2px solid #5c9773;
  border-radius: 50%;
  background: radial-gradient(circle, transparent 48%, #39684f55 49% 52%, transparent 53%);
}
.view-home .scanner-orb::after {
  inset: calc(50% - 3px);
  border: 0;
  border-radius: 50%;
  background: #39684f;
}
.view-home .scanner-orb i {
  position: absolute;
  inset: 15px;
  border-radius: 50%;
  background: conic-gradient(from 12deg, transparent 0deg 300deg, #5c977322 320deg, #5c977377 359deg, transparent 360deg);
}
.view-home .scanner-orb span, .view-home .scanner-orb b { display: none; }
@media (max-width: 390px) {
  .view-home .scanner-orb { width: 84px; height: 84px; right: 18px; top: 78px; }
  .view-home .scanner-orb::before { inset: 10px; }
  .view-home .scanner-orb i { inset: 11px; }
}

/* Center the small dial optically, including its existing 3px lower relief.
   Render the decorative dotted ring symmetrically instead of using font bearings. */
.view-home .status-dial { translate: 0 -1.5px; }
.view-home .status-dial span {
  inset: 13px;
  font-size: 0;
  border: 1px dotted currentColor;
  border-radius: 50%;
}
.view-home .status-dial b {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  text-align: center;
}