:root {
  --dna-bg: #F2F2F7;
  --dna-card: #FFFFFF;
  --dna-text: #111111;
  --dna-muted: #8E8E93;
  --dna-primary: #ec5b13;
  --dna-border: #C6C6C8;
  --dna-accent: #007AFF;
  --dna-status-active-bg: #e8f4ea;
  --dna-status-active-br: #c7e2cd;
  --dna-status-active-tx: #2f6b3b;
  --dna-status-pending-bg: #f7efe7;
  --dna-status-pending-br: #e8d8c9;
  --dna-status-pending-tx: #8a6a4a;
  --dna-status-ship-bg: #eaf3f8;
  --dna-status-ship-br: #cfe2ee;
  --dna-status-ship-tx: #2e5d78;
  --dna-status-done-bg: #edf1ea;
  --dna-status-done-br: #d5e0cd;
  --dna-status-done-tx: #3f5c37;
  --dna-status-neutral-bg: #f4f4f4;
  --dna-status-neutral-br: #e0e0e0;
  --dna-status-neutral-tx: #666;
  --dna-status-expired-bg: #fbe9e7;
  --dna-status-expired-br: #f1c8be;
  --dna-status-expired-tx: #a33c2a;
  --dna-radius-xl: 20px;
  --dna-radius-lg: 14px;
  --dna-radius-md: 12px;
  --dna-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  --mobile-nav-height: 92px;
  --mobile-nav-safe-bottom: env(safe-area-inset-bottom, 0px);
  --mobile-nav-safe-left: env(safe-area-inset-left, 0px);
  --mobile-nav-safe-right: env(safe-area-inset-right, 0px);
  --bg: var(--dna-bg);
  --card: var(--dna-card);
  --text: var(--dna-text);
  --muted: var(--dna-muted);
  --primary: var(--dna-primary);
  --border: var(--dna-border);
}


body {
  font-family: "Public Sans", system-ui, -apple-system, sans-serif;
  background: var(--dna-bg);
  color: var(--dna-text);
}

html, body {
  overscroll-behavior: none;
}

a { color: inherit; }
.mobile-only { display: none; }
.mobile-bottom-nav { display: none !important; }

/* Top bar + nav */
.topbar {
  background: var(--dna-bg);
  color: var(--dna-text);
  border-bottom: 1px solid var(--dna-border);
}
.brand { letter-spacing: 0.06em; }
.back-btn, .menu-toggle, .nav-logout { color: var(--dna-text); }
.nav {
  background: var(--dna-bg);
  color: var(--dna-text);
}
.nav a,
.nav-link,
.nav-title,
.nav-title-link {
  color: var(--dna-muted);
}
.nav a:hover,
.nav-link:hover,
.nav-title:hover,
.nav-title-link:hover {
  color: var(--dna-text);
  background: rgba(0,0,0,0.04);
}
.nav-divider { background: var(--dna-border); }
.nav-group { border-bottom: 1px solid var(--dna-border); }
.nav-quick-btn {
  background: var(--dna-card);
  border: 1px solid var(--dna-border);
  color: var(--dna-text);
  border-radius: var(--dna-radius-lg);
}
.nav-logout {
  background: var(--dna-card);
  border: 1px solid var(--dna-border);
}

/* Containers & cards */
.card,
.stat-card,
.queue-item,
.quick-action,
.product-card,
.label-card,
.report-section.card,
.labels-empty,
.users-toolbar,
.modal,
.live-btn,
.filter-search,
.filter-select,
.filter-apply,
.filters-toggle,
.file-btn,
.user-block,
.metric,
.daily-metric,
.channel-pill,
.suggestions,
.merge-list,
.labels-counter,
.labels-toolbar,
.labels-floating,
.login-surface,
.wa-modal {
  background: var(--dna-card) !important;
  border: 1px solid var(--dna-border) !important;
  border-radius: var(--dna-radius-xl) !important;
  box-shadow: var(--dna-shadow) !important;
}

.filters-sticky,
.filters-wrap,
.labels-toolbar,
.labels-floating,
.report-toolbar {
  padding-left: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box;
}

/* Tables */
.table th,
.table td { border-bottom: 1px solid var(--dna-border); }
.table th { color: var(--dna-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 12px; }

/* Inputs */
input, select, textarea {
  background: var(--dna-card);
  color: var(--dna-text);
  border: 1px solid var(--dna-border);
  border-radius: var(--dna-radius-md);
  height: 44px;
  padding: 0 12px;
  font-size: 14px;
}
textarea { height: auto; padding: 10px 12px; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(0, 122, 255, 0.25);
  border-color: var(--dna-accent);
}
@media (max-width: 720px) {
  input, select, textarea {
    font-size: 16px !important;
  }
}

/* Buttons */
.btn {
  background: var(--dna-card);
  border: 1px solid var(--dna-border);
  color: var(--dna-text);
  border-radius: var(--dna-radius-md);
  padding: 10px 16px;
  font-weight: 600;
  min-height: 44px;
}
.btn.primary {
  background: var(--dna-primary);
  border-color: var(--dna-primary);
  color: #fff;
}
.live-btn.primary {
  background: var(--dna-primary) !important;
  border-color: var(--dna-primary) !important;
  color: #fff !important;
}

/* Pills / badges */
.pill,
.status-pill,
.queue-item-badge {
  background: rgba(142, 142, 147, 0.12) !important;
  color: var(--dna-muted) !important;
  border: 1px solid var(--dna-border) !important;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Semantic status helpers (legacy aliases included) */
.pill.is-active,
.status-pill.is-active,
.pill.active,
.status-pill.active {
  background: var(--dna-status-active-bg) !important;
  border-color: var(--dna-status-active-br) !important;
  color: var(--dna-status-active-tx) !important;
}
.pill.is-pending,
.status-pill.is-pending,
.pill.pending,
.status-pill.pending {
  background: var(--dna-status-pending-bg) !important;
  border-color: var(--dna-status-pending-br) !important;
  color: var(--dna-status-pending-tx) !important;
}
.pill.is-ship,
.status-pill.is-ship,
.pill.ship,
.status-pill.ship {
  background: var(--dna-status-ship-bg) !important;
  border-color: var(--dna-status-ship-br) !important;
  color: var(--dna-status-ship-tx) !important;
}
.pill.is-done,
.status-pill.is-done,
.pill.done,
.status-pill.done,
.pill.closed,
.status-pill.closed {
  background: var(--dna-status-done-bg) !important;
  border-color: var(--dna-status-done-br) !important;
  color: var(--dna-status-done-tx) !important;
}
.pill.is-neutral,
.status-pill.is-neutral,
.pill.neutral,
.status-pill.neutral {
  background: var(--dna-status-neutral-bg) !important;
  border-color: var(--dna-status-neutral-br) !important;
  color: var(--dna-status-neutral-tx) !important;
}
.pill.is-expired,
.status-pill.is-expired,
.pill.expired,
.status-pill.expired,
.pill.urgent,
.status-pill.urgent,
.status-pill.warn {
  background: var(--dna-status-expired-bg) !important;
  border-color: var(--dna-status-expired-br) !important;
  color: var(--dna-status-expired-tx) !important;
}

/* Inventory/status aliases */
.pill.status-DISPONIBLE,
.status-pill.status-DISPONIBLE { background: var(--dna-status-done-bg) !important; border-color: var(--dna-status-done-br) !important; color: var(--dna-status-done-tx) !important; }
.pill.status-RESERVADA,
.status-pill.status-RESERVADA { background: var(--dna-status-pending-bg) !important; border-color: var(--dna-status-pending-br) !important; color: var(--dna-status-pending-tx) !important; }
.pill.status-ENVIADA,
.status-pill.status-ENVIADA { background: var(--dna-status-ship-bg) !important; border-color: var(--dna-status-ship-br) !important; color: var(--dna-status-ship-tx) !important; }
.pill.status-BAJA,
.status-pill.status-BAJA { background: var(--dna-status-expired-bg) !important; border-color: var(--dna-status-expired-br) !important; color: var(--dna-status-expired-tx) !important; }
.pill.status-BORRADOR,
.status-pill.status-BORRADOR { background: var(--dna-status-neutral-bg) !important; border-color: var(--dna-status-neutral-br) !important; color: var(--dna-status-neutral-tx) !important; }
.pill.status-OPORTUNIDAD,
.status-pill.status-OPORTUNIDAD { background: #fff4e6 !important; border-color: #f3d7b3 !important; color: #8a5a2b !important; }
.pill.status-VENDIDA,
.status-pill.status-VENDIDA { background: #e9edf8 !important; border-color: #cfd8ee !important; color: #2f4a78 !important; }
.pill.status-DEVUELTA,
.status-pill.status-DEVUELTA { background: #f1eef8 !important; border-color: #ddd1f0 !important; color: #5b3a78 !important; }

/* Headings */
h1, h2, h3 { font-family: "Public Sans", system-ui, -apple-system, sans-serif; }

/* Links in cards */
.quick-action, .queue-item { text-decoration: none; color: inherit; }

.chip:not([class*="segment-"]):not([class*="alert-"]):not([class*="channel-"]) {
  background: var(--dna-card) !important;
  border: 1px solid var(--dna-border) !important;
  color: var(--dna-text) !important;
}

@media (max-width: 720px) {
  /* Shared mobile primitives to avoid per-view drift */
  .filters-wrap {
    position: sticky;
    top: 62px;
    z-index: 5;
    background: var(--bg);
    padding: 6px 0 10px;
  }
  .filter-search {
    width: 100%;
    height: 40px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: #fff;
    padding: 0 10px;
    font-weight: 600;
    font-size: 13px;
    box-sizing: border-box;
  }
  .filters-toggle {
    height: 40px;
    border-radius: 10px !important;
    border: 1px solid var(--border) !important;
    background: #fff !important;
    color: var(--text) !important;
    font-weight: 700;
    font-size: 13px;
    padding: 0 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 40px;
    box-sizing: border-box;
    text-decoration: none;
  }
  .filters-toggle:focus,
  .filters-toggle:hover,
  .filters-toggle:active {
    border-color: var(--border) !important;
    color: var(--text) !important;
    text-decoration: none;
  }
  .filters-toggle.is-primary {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
  }
  .filters-toggle.is-primary:focus,
  .filters-toggle.is-primary:hover,
  .filters-toggle.is-primary:active {
    background: var(--primary) !important;
    border-color: var(--primary) !important;
    color: #fff !important;
  }
  .filters-toggle.is-muted {
    background: #f3f3f5 !important;
    color: #111 !important;
  }
  .filters-toggle.is-minimal {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    padding: 0 2px;
    justify-content: space-between;
  }
  .filters-row-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
  .mobile-list {
    display: grid;
    gap: 12px;
  }
  .card-item {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 12px;
    display: grid;
    gap: 8px;
  }
  .card-top,
  .card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #efefef;
  }
  .card-top .card-title,
  .card-head .card-title {
    min-width: 0;
  }
  .card-body {
    display: grid;
    gap: 2px;
  }
  .card-title {
    font-weight: 800;
    font-size: 17px;
  }
  .card-sub,
  .card-meta {
    font-size: 12px;
    color: var(--muted);
  }
  .pill,
  .status-pill {
    font-size: 9px !important;
    padding: 3px 8px !important;
    border-radius: 999px;
    width: fit-content;
    text-transform: uppercase;
    letter-spacing: 0.25px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
  }

  html, body {
    height: 100%;
    overscroll-behavior: none;
  }
  body.layout-shell {
    overflow: hidden;
  }
  .mobile-only { display: block; }
  .mobile-bottom-nav.mobile-only {
    display: flex !important;
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .app-shell {
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  @supports (height: 100svh) {
    .app-shell {
      height: 100svh;
      min-height: 100svh;
    }
  }
  .app-content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  .topbar { display: none; }
  .nav,
  .nav-overlay {
    display: none !important;
  }
  .container {
    padding-top: 12px;
    padding-bottom: 20px;
    overscroll-behavior: none;
  }
  .mobile-bottom-nav {
    position: relative;
    flex: 0 0 auto;
    z-index: 50;
    display: flex !important;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 8px calc(10px + var(--mobile-nav-safe-right)) calc(12px + var(--mobile-nav-safe-bottom)) calc(10px + var(--mobile-nav-safe-left));
    background: rgba(255, 255, 255, 0.9);
    border-top: 1px solid #e5e5ea;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    max-width: none;
    margin: 0;
    border-radius: 16px 16px 0 0;
  }
  .mobile-bottom-nav a {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    color: #8e8e93;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
  }
  .mobile-bottom-nav .icon {
    width: 20px;
    height: 20px;
    color: currentColor;
  }
  .mobile-bottom-nav a.active {
    color: var(--dna-primary);
  }
  .mobile-bottom-nav a.active .icon-wrap {
    background: rgba(236, 91, 19, 0.12);
  }
  .mobile-bottom-nav .icon-wrap {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 8px;
  }
  .labels-floating,
  .create-cta,
  .import-cta {
    bottom: calc(var(--mobile-nav-safe-bottom) + 8px) !important;
  }
  .filters-wrap,
  .filters-sticky {
    top: 0 !important;
  }
  .section-title {
    top: 70px !important;
  }
  .modal-backdrop,
  .wa-modal-backdrop {
    padding: 16px;
    box-sizing: border-box;
    place-items: center !important;
    align-items: center !important;
    justify-items: center !important;
    justify-content: center !important;
  }
  .modal,
  .wa-modal {
    margin: 0;
    max-height: calc(100dvh - 140px);
    overflow: auto;
  }
  .toast,
  .alert {
    margin-bottom: 10px;
  }
}