:root {
  --ssp-mobile-nav-height: 74px;
  --ssp-safe-bottom: calc(var(--ssp-mobile-nav-height) + env(safe-area-inset-bottom, 0px));
}

/* Legibilidad base: los textos auxiliares heredados de 8–11 px suben a 12 px. */
#app .text-\[8px\],
#app .text-\[9px\],
#app .text-\[10px\],
#app .text-\[11px\] {
  font-size: .75rem !important;
  line-height: 1rem !important;
}

#app details > summary::-webkit-details-marker { display: none; }
#app details > summary { touch-action: manipulation; }

.ssp-connection-status {
  width: 14px;
  height: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
}

.ssp-connection-status__dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}

.ssp-connection-status[data-state="offline"] .ssp-connection-status__dot,
html[data-connection="offline"] .ssp-connection-status__dot {
  background: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, .18);
}

.ssp-form-state {
  position: sticky;
  top: .5rem;
  z-index: 30;
  margin-left: auto;
  width: max-content;
  max-width: 100%;
  padding: .45rem .7rem;
  border-radius: 999px;
  font-size: .75rem;
  line-height: 1;
  font-weight: 800;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
}

.ssp-form-state[data-state="dirty"] { color: #92400e; background: #fffbeb; border-color: #fcd34d; }
.ssp-form-state[data-state="saving"] { color: #1d4ed8; background: #eff6ff; border-color: #93c5fd; }
.ssp-form-state[data-state="saved"] { color: #047857; background: #ecfdf5; border-color: #6ee7b7; }
.ssp-form-state[data-state="offline"],
.ssp-form-state[data-state="error"] { color: #b91c1c; background: #fef2f2; border-color: #fca5a5; }

.dark .ssp-form-state { color: #cbd5e1; background: #1e293b; border-color: #475569; }
.dark .ssp-form-state[data-state="dirty"] { color: #fde68a; background: #451a03; border-color: #92400e; }
.dark .ssp-form-state[data-state="saved"] { color: #a7f3d0; background: #052e2b; border-color: #047857; }
.dark .ssp-form-state[data-state="offline"],
.dark .ssp-form-state[data-state="error"] { color: #fecaca; background: #450a0a; border-color: #b91c1c; }

@media (max-width: 767px) {
  main[data-preserve-scroll-container="main"], #app main {
    padding-bottom: var(--ssp-safe-bottom);
    scroll-padding-top: 1rem;
    scroll-padding-bottom: calc(var(--ssp-safe-bottom) + 1rem);
  }

  .ssp-app-nav {
    height: var(--ssp-mobile-nav-height) !important;
    padding: .3rem .25rem calc(.3rem + env(safe-area-inset-bottom, 0px)) !important;
    gap: 0 !important;
  }

  .ssp-app-nav > div.flex-1 {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    width: 100% !important;
    padding: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .ssp-app-nav > div.flex-1::-webkit-scrollbar { display: none; }

  .ssp-mobile-nav-item {
    flex: 0 0 76px;
    min-width: 76px;
    min-height: 56px;
    display: inline-flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .18rem;
    padding: .25rem .1rem !important;
    border-radius: .75rem;
    color: #64748b;
    scroll-snap-align: center;
  }

  .ssp-mobile-nav-item[aria-current="page"] { color: #2563eb; background: #eff6ff; }
  .dark .ssp-mobile-nav-item[aria-current="page"] { color: #60a5fa; background: rgba(30, 64, 175, .22); }

  .ssp-app-nav .ssp-nav-label {
    display: block !important;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: .75rem !important;
    line-height: 1rem;
    font-weight: 800;
    text-transform: none;
    letter-spacing: 0;
    margin: 0 !important;
  }

  #app main button.nav-btn:not(.ssp-mobile-nav-item) span,
  #app main button[class*="text-[10px]"] { font-size: .75rem !important; }

  #app button[aria-label],
  #app button[title] { min-height: 44px; }

  #app input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  #app select,
  #app textarea { font-size: .875rem !important; }

  #sspGpsAdminAlertBanner {
    top: 4.75rem !important;
    right: .75rem !important;
    bottom: auto !important;
    max-width: min(230px, calc(100vw - 1.5rem)) !important;
  }

  #mercadeoInventoryModule .mi-section-scroll-btn { display: inline-flex !important; flex: 0 0 44px; width: 44px !important; height: 44px !important; touch-action: manipulation; }
  #mercadeoInventoryModule #miSectionNavRail {
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    overscroll-behavior-inline: contain;
    touch-action: pan-x pan-y;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
  }
  #mercadeoInventoryModule #miSectionNavRail::-webkit-scrollbar { display: none; }
  #mercadeoInventoryModule #miSectionNavRail > div {
    display: flex !important;
    width: max-content !important;
    min-width: 100% !important;
    flex-wrap: nowrap !important;
  }
  #mercadeoInventoryModule #miSectionNavRail .mi-section-chip {
    display: inline-flex !important;
    width: auto !important;
    min-width: max-content !important;
    justify-content: center;
    padding-inline: .75rem;
    font-size: .75rem !important;
    scroll-snap-align: center;
    touch-action: manipulation;
  }
  #mercadeoInventoryModule #miSectionNavRail .mi-section-chip span { overflow: visible; text-overflow: clip; white-space: nowrap; }

  button:focus-visible,
  input:focus-visible,
  select:focus-visible,
  textarea:focus-visible,
  [tabindex]:focus-visible {
    outline: 3px solid #3b82f6 !important;
    outline-offset: 2px !important;
  }
}

@media (min-width: 768px) {
  #sspGpsAdminAlertBanner { top: 1rem !important; bottom: auto !important; }
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled { opacity: .72; }

.activity-filter {
  min-height: 44px;
  padding: .4rem .65rem;
  border-radius: .65rem;
  border: 1px solid #cbd5e1;
  background: #f8fafc;
  color: #475569;
  font-size: .75rem;
  font-weight: 800;
}
.activity-filter.is-active { color: #1d4ed8; border-color: #93c5fd; background: #eff6ff; }
.dark .activity-filter { color: #cbd5e1; border-color: #475569; background: #1e293b; }

.ssp-table-pagination {
  display: flex;
  justify-content: center;
  padding: .85rem;
}
.ssp-table-pagination__button {
  min-height: 44px;
  padding: .65rem 1rem;
  border-radius: .8rem;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  color: #1d4ed8;
  font-size: .8rem;
  font-weight: 800;
}
.ssp-table-pagination__button:disabled { color: #64748b; border-color: #e2e8f0; background: #f8fafc; }

.reports-filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .75rem;
}
.reports-filter-action {
  min-height: 44px;
  padding: .45rem .75rem;
  border: 1px solid #cbd5e1;
  border-radius: .7rem;
  background: #fff;
  color: #334155;
  font-size: .75rem;
  font-weight: 800;
}
@media (max-width: 767px) {
  #reportsFiltersPanel.is-collapsed { display: none !important; }
  .reports-filter-summary { align-items: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}