@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Rajdhani:wght@500;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ============================================================
   Design tokens — Iceberg Business Insight Data brand identity
   (Brand Board v1.0, IBD-BIS-001). See design/style_guide.md.
   Do not hardcode these hex values anywhere else; always
   reference the var.
   ============================================================ */
:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-heading: 'Rajdhani', var(--font-sans);
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Spacing scale */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Semantic accents — identical in both themes */
  --cyan: #00E5FF;
  --red: #FF4D6D;
  --amber: #FFB020;
  --green: #00FF88;

  /* Stage colors — semantic, not theme-dependent */
  --blue: #2962FF;
  --violet: #8A2BE2;
  --orange: #FFB020;
  --teal: #00FFC2;

  --sidebar-width: 260px;
  --sidebar-width-collapsed: 72px;
  --radius: 8px;
  --transition: 180ms ease;

  /* z-index scale */
  --z-sidebar: 20;
  --z-overlay: 40;
  --z-modal: 50;
  --z-toast: 60;
}

/* Dark theme (default, Iceberg brand identity) */
:root,
html[data-theme='dark'] {
  --bg: #071223;
  --surface: #0A1E33;
  --surface2: #1A2A44;
  --border: #1A2A44;
  --text1: #F2F7FF;
  --text2: #8B94A3;
  --text3: #6B7A8F; /* between --text2 and --border for WCAG AA on --surface */
  --focus-ring: var(--cyan);
  /* Every "brand accent" usage in the app (buttons, badges, highlights,
     active nav) references --accent, not --cyan, directly — dark theme is
     the branded look, so --accent just is the (per-tenant-customizable)
     --cyan here. See the light theme block below for why this indirection
     exists. */
  --accent: var(--cyan);
  /* Status-badge/letter TEXT colors only (Confirmado/Proyectado, warehouse
     status, report badges) — same "dark theme = vivid original" pattern as
     --accent above. Backgrounds/borders/icons keep using --green/--amber/
     etc. directly; only text needs a light-mode-safe darker variant, since
     e.g. --green (#00FF88) is unreadable as text on a white surface. */
  --green-text: var(--green);
  --amber-text: var(--amber);
  --orange-text: var(--orange);
  --red-text: var(--red);
  --teal-text: var(--teal);
}

/* Light theme (brand board defines dark only; neutrals kept, accent
   re-mapped). Deliberately does NOT follow --cyan here (2026-07-07,
   explicit user request after a custom per-tenant color looked bad in
   light mode — an arbitrary brand color has no guaranteed contrast against
   a white surface). Light mode is a standardized black/gray professional
   look regardless of what color a deployment picks for --cyan; only dark
   mode carries the customizable brand accent. */
html[data-theme='light'] {
  --bg: #F8FAFC;
  --surface: #FFFFFF;
  --surface2: #F1F5F9;
  --border: #E2E8F0;
  --text1: #0F172A;
  --text2: #475569;
  --text3: #64748B;
  --focus-ring: #1F2937;
  --accent: #1F2937; /* Slate-800 — fixed, never overridden by primary_color */
  /* Darkened, WCAG-AA-safe variants of the semantic status colors, used
     only where that color is TEXT (badges, status letters) — the vivid
     dark-theme originals (#00FF88 green, #FFB020 amber/orange, #FF4D6D
     red, #00FFC2 teal) are all too light to read on a white surface. */
  --green-text: #15803D;
  --amber-text: #B45309;
  --orange-text: #B45309;
  --red-text: #BE123C;
  --teal-text: #0F766E;
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: dark;
}

html[data-theme='light'] {
  color-scheme: light;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--bg);
  color: var(--text1);
  -webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font-family: inherit;
  cursor: pointer;
}

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}

/* ============================================================
   App shell
   ============================================================ */
.app-shell {
  display: flex;
  min-height: 100dvh;
}

/* --- Sidebar --- */
.sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100dvh;
  z-index: var(--z-sidebar);
  transition: transform var(--transition);
}

.sidebar__brand {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-bottom: 1px solid var(--border);
  min-height: 64px;
}

.sidebar__logo {
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  background: var(--accent);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg);
  font-weight: 700;
  font-size: 14px;
}

.sidebar__company-name {
  font-weight: 600;
  font-size: 15px;
  color: var(--text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sidebar__nav {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3) var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.nav-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius);
  color: var(--text2);
  font-size: 14px;
  font-weight: 500;
  min-height: 44px;
  transition: background var(--transition), color var(--transition);
}

.nav-item svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.nav-item:hover {
  background: var(--surface2);
  color: var(--text1);
}

.nav-item[aria-current='page'] {
  background: var(--surface2);
  color: var(--accent);
  border-left: 2px solid var(--accent);
  padding-left: calc(var(--space-3) - 2px);
}

.nav-item[hidden] {
  display: none;
}

.sidebar__footer {
  border-top: 1px solid var(--border);
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.theme-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface2);
  color: var(--text1);
  font-size: 13px;
  font-weight: 500;
  min-height: 44px;
}

.theme-toggle__track {
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: var(--border);
  position: relative;
  transition: background var(--transition);
  flex-shrink: 0;
}

.theme-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--accent);
  transition: transform var(--transition);
}

html[data-theme='light'] .theme-toggle__thumb {
  transform: translateX(16px);
}

.user-menu {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  min-height: 44px;
}

.user-menu:hover {
  background: var(--surface2);
}

.user-menu__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: var(--text2);
  flex-shrink: 0;
}

.user-menu__name {
  font-size: 13px;
  font-weight: 500;
  color: var(--text1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.user-menu__logout {
  margin-left: auto;
  color: var(--text3);
  background: none;
  border: none;
  padding: var(--space-1);
  border-radius: var(--radius);
  display: flex;
}

.user-menu__logout:hover {
  color: var(--red-text);
}

/* --- Sidebar toggle (mobile) --- */
.sidebar-toggle {
  display: none;
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  z-index: var(--z-overlay);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  color: var(--text1);
}

.sidebar-backdrop {
  display: none;
}

/* --- Main content --- */
.app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

#app-content {
  flex: 1;
  padding: var(--space-6);
}

@media (max-width: 1023px) {
  .sidebar {
    position: fixed;
    left: 0;
    transform: translateX(-100%);
  }

  .sidebar.is-open {
    transform: translateX(0);
  }

  .sidebar-toggle {
    display: flex;
  }

  .sidebar-backdrop.is-open {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--z-sidebar) - 1);
  }

  #app-content {
    padding-top: calc(var(--space-6) + 44px + var(--space-3));
  }
}

/* ============================================================
   Auth: guest (login screen) vs authenticated (app shell)
   ============================================================ */
body.is-guest .app-shell {
  display: none;
}

body.is-guest .login-screen {
  display: flex;
}

body.is-authenticated .login-screen {
  display: none;
}

.login-screen {
  display: none;
  min-height: 100dvh;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.login-card__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.login-card__brand-name {
  font-weight: 600;
  font-size: 18px;
  color: var(--text1);
}

.login-card__error {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: rgba(255, 75, 85, 0.12);
  color: var(--red-text);
  font-size: 13px;
  font-weight: 500;
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text2);
}

.form-input {
  min-height: 44px;
  padding: 0 var(--space-3);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text1);
  font-size: 15px;
  font-family: inherit;
}

.form-input:focus-visible {
  border-color: var(--accent);
}

.form-input[readonly] {
  color: var(--text3);
  background: var(--surface2);
  cursor: not-allowed;
}

.btn-primary {
  min-height: 44px;
  border-radius: var(--radius);
  border: 1.5px solid var(--accent);
  background: transparent;
  color: var(--accent);
  font-weight: 600;
  font-size: 15px;
  transition: background var(--transition), color var(--transition);
}

.btn-primary:hover {
  background: var(--accent);
  color: var(--bg);
  opacity: 1;
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ============================================================
   Page content (Admin and future routed pages)
   ============================================================ */
h1, h2, h3 {
  font-family: var(--font-heading);
  letter-spacing: 0.01em;
}

h1 {
  font-weight: 700;
}

h2, h3 {
  font-weight: 500;
}

.page-title {
  font-family: var(--font-heading);
  letter-spacing: 0.01em;
  color: var(--text1);
  font-size: 24px;
  font-weight: 700;
  margin: 0 0 var(--space-6);
}

.admin-tabs {
  display: flex;
  gap: var(--space-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--space-6);
  overflow-x: auto;
}

.admin-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-3) var(--space-2);
  color: var(--text2);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  min-height: 44px;
}

.admin-tab:hover {
  color: var(--text1);
}

.admin-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.admin-tab-panel {
  max-width: 480px;
}

.reports-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
}

.reports-search {
  max-width: 320px;
}

.reports-table-wrap {
  overflow-x: auto;
}

/* KPI summary strip — quick context above the table, no expansion needed. */
.reports-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.reports-kpi-strip__context {
  font-size: 12px;
  color: var(--accent);
  margin-bottom: var(--space-2);
}

.reports-kpi-card {
  min-width: 160px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  background: var(--surface);
  border: 1px solid var(--border);
}

.reports-kpi-card--warn {
  border-color: var(--red-text);
}

.reports-kpi-card__value {
  font-family: var(--font-heading);
  font-size: 22px;
  font-weight: 700;
  color: var(--text1);
}

.reports-kpi-card--warn .reports-kpi-card__value {
  color: var(--red-text);
}

.reports-kpi-card__label {
  font-size: 12px;
  color: var(--text2);
  margin-top: var(--space-1);
}

/* Status/stage pills used inside the detail table and card badges. */
.reports-badge {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.reports-badge--blue { background: rgba(41, 98, 255, 0.15); color: var(--blue); }
.reports-badge--violet { background: rgba(138, 43, 226, 0.15); color: var(--violet); }
.reports-badge--teal { background: rgba(0, 255, 194, 0.12); color: var(--teal-text); }
.reports-badge--orange { background: rgba(255, 176, 32, 0.15); color: var(--orange-text); }
.reports-badge--amber { background: rgba(255, 176, 32, 0.15); color: var(--amber-text); }
.reports-badge--ok { background: rgba(0, 255, 136, 0.12); color: var(--green-text); }
.reports-badge--warn { background: rgba(255, 77, 109, 0.15); color: var(--red-text); }
.reports-badge--muted { background: var(--surface2); color: var(--text2); }

/* --- Grouped cards: Proveedor > Producto, each its own visual container.
   Only the leaf level (Proforma/Carpeta) is an actual <table>, so "this is
   a category" and "this is data" never look like the same kind of row. --- */
.reports-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.reports-group-card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  overflow: hidden;
}

.reports-group-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  cursor: pointer;
  border-left: 4px solid var(--accent);
}

.reports-group-card__header:hover {
  background: var(--surface2);
}

.reports-group-card__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--text1);
  background: rgba(255, 255, 255, 0.06);
  flex-shrink: 0;
}

.reports-group-card__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 16px;
  color: var(--text1);
  flex: 1;
}

.reports-group-card__badge {
  font-size: 13px;
  color: var(--text2);
  white-space: nowrap;
}

.reports-group-card__body {
  padding: var(--space-3) var(--space-4) var(--space-4);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Producto cards nested inside an expanded Proveedor card: a visibly
   smaller, teal-accented container so the two levels never look alike. */
.reports-group-card--nested {
  border-color: var(--border);
}

.reports-group-card--nested > .reports-group-card__header {
  border-left-color: var(--teal-text);
  padding: var(--space-2) var(--space-3);
}

.reports-group-card--nested .reports-group-card__title {
  font-size: 14px;
  font-weight: 600;
}

.reports-group-card--nested .reports-group-card__body {
  background: var(--surface);
  padding: 0;
}

.reports-detail-table {
  margin: 0;
}

.reports-sortable-th {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}

.reports-sortable-th:hover {
  color: var(--accent);
}

/* Saldo de Inventario's 12-month dashboard (replaces the calendar for this
   tab only — see docs/decision_log.md): two bars per month (inventory
   level, sales) on the left axis, a days-of-coverage line on the right
   axis. */
.reports-dashboard__note {
  font-size: 12px;
  color: var(--text2);
  margin: 0 0 var(--space-3);
}

.reports-dashboard__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
  font-size: 12px;
  color: var(--text2);
}

.reports-dashboard__legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.reports-dashboard__swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.reports-dashboard__swatch--inventory {
  background: var(--accent);
}

.reports-dashboard__swatch--sales {
  background: var(--teal);
}

.reports-dashboard__swatch--coverage {
  background: var(--violet);
}

.reports-dashboard__svg {
  width: 100%;
  height: 260px;
  display: block;
}

.reports-dashboard__line {
  fill: none;
  stroke-width: 2;
}

.reports-dashboard__line--coverage {
  stroke: var(--violet);
  stroke-dasharray: 4 3;
}

.reports-dashboard__point {
  cursor: pointer;
}

.reports-dashboard__point--coverage {
  fill: var(--violet);
}

.reports-dashboard__point:hover {
  fill: var(--text1);
}

.reports-dashboard__bar {
  cursor: pointer;
}

.reports-dashboard__bar--inventory {
  fill: var(--accent);
  opacity: 0.85;
}

.reports-dashboard__bar--sales {
  fill: var(--teal);
  opacity: 0.85;
}

.reports-dashboard__gridline {
  stroke: var(--border);
  stroke-width: 1;
}

.reports-dashboard__axis-label {
  fill: var(--text2);
  font-size: 10px;
  font-family: var(--font-mono);
}

.reports-dashboard__axis-label--coverage {
  fill: var(--violet);
}

.reports-dashboard__detail {
  margin-top: var(--space-3);
}

/* Two-column layout: grid + nav on the left, a vertically-scrollable
   detail panel on the right (previously below the grid, pushing the page
   down every time a day/month was selected). Stacks on narrow viewports. */
.reports-cal {
  display: flex;
  gap: var(--space-6);
  max-width: 960px;
  flex-wrap: wrap;
}

.reports-cal__main {
  flex: 1 1 420px;
  min-width: 320px;
}

.reports-cal__side {
  flex: 1 1 260px;
  max-width: 320px;
  max-height: 420px;
  overflow-y: auto;
  border-left: 1px solid var(--border);
  padding-left: var(--space-4);
}

.reports-cal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  flex-wrap: wrap;
}

.reports-cal__month-label {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--text1);
  min-width: 100px;
  text-align: center;
}

.reports-cal__granularity {
  font-size: 12px;
}

.reports-cal__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.reports-cal__grid--year {
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
}

.reports-cal__cell--month {
  min-height: 56px;
}

.reports-cal__grid--header {
  margin-bottom: var(--space-1);
}

.reports-cal__weekday {
  text-align: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text3);
  padding: var(--space-1) 0;
}

.reports-cal__cell {
  position: relative;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-1);
  font-size: 11px;
  color: var(--text2);
  cursor: default;
}

.reports-cal__cell--blank {
  border: none;
}

.reports-cal__cell--has-arrivals {
  cursor: pointer;
  border-color: var(--accent);
  background: rgba(6, 182, 212, 0.08);
}

.reports-cal__cell--has-arrivals:hover {
  background: rgba(6, 182, 212, 0.16);
}

.reports-cal__day-num {
  font-weight: 600;
  color: var(--text1);
}

.reports-cal__badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--accent);
  color: #0b1220;
  border-radius: 999px;
  min-width: 16px;
  height: 16px;
  font-size: 9px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.reports-cal__detail-item {
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}

.reports-cal__detail-item:last-child {
  border-bottom: none;
}

.reports-cal__detail-item__title {
  color: var(--text1);
  font-weight: 600;
}

.reports-cal__detail-item__title--warn {
  color: var(--red-text);
}

.reports-cal__detail-item__variants {
  color: var(--text2);
  font-size: 11px;
  margin-top: 2px;
}

.admin-panel__loading,
.admin-panel__error {
  color: var(--text2);
  font-size: 14px;
}

.admin-panel__error {
  color: var(--red-text);
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.admin-form__success {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: rgba(34, 197, 94, 0.12);
  color: var(--green-text);
  font-size: 13px;
  font-weight: 500;
}

.admin-form__error {
  margin: 0;
  padding: var(--space-3);
  border-radius: var(--radius);
  background: rgba(255, 75, 85, 0.12);
  color: var(--red-text);
  font-size: 13px;
  font-weight: 500;
}

.admin-form__submit {
  align-self: flex-start;
  padding: 0 var(--space-6);
}

/* ============================================================
   Admin — Users tab
   ============================================================ */
.admin-tab-panel--wide {
  max-width: 720px;
}

.admin-form--inline {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

.admin-form--inline .form-field {
  flex: 1 1 160px;
}

.admin-form--inline .admin-form__submit {
  align-self: flex-end;
  padding: 0 var(--space-4);
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.admin-table th {
  text-align: left;
  color: var(--text2);
  font-weight: 500;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
}

.admin-table td {
  padding: var(--space-2) var(--space-3);
  border-bottom: 1px solid var(--border);
  color: var(--text1);
  vertical-align: middle;
}

.admin-table select.admin-table__role {
  min-height: 36px;
  padding: 0 var(--space-2);
  width: auto;
}

.admin-table__action {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-3);
  color: var(--text2);
  font-size: 13px;
  min-height: 36px;
}

.admin-table__action:hover {
  color: var(--text1);
  border-color: var(--text2);
}

.admin-table__action--danger {
  color: var(--red-text);
  border-color: rgba(255, 75, 85, 0.4);
}

.admin-table__action--danger:hover {
  color: var(--red-text);
  border-color: var(--red-text);
}

.admin-table__action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.admin-table__inline-confirm {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.admin-table__inline-input {
  min-height: 36px;
  width: 140px;
}

/* ============================================================
   Service Admin — Errores / health cards
   ============================================================ */
.health-cards {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.health-card {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface2);
  font-size: 14px;
  color: var(--text2);
}

.health-card strong {
  margin-left: auto;
  color: var(--text1);
}

.health-card__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.health-card--ok .health-card__dot {
  background: var(--green);
}

.health-card--down .health-card__dot {
  background: var(--red);
}

/* ============================================================
   Service Admin — live system node map
   ============================================================ */
.system-map-wrapper {
  position: relative;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
}

.system-map__error-popup {
  position: absolute;
  transform: translate(-50%, -100%);
  max-width: 220px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  background: var(--red);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: var(--z-toast);
  pointer-events: none;
}

.errors-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.system-map {
  width: 100%;
  height: auto;
  max-width: 560px;
}

.system-map__edge {
  stroke: var(--border);
  stroke-width: 2;
  transition: stroke var(--transition), stroke-width var(--transition);
}

.system-map__edge--config {
  stroke-dasharray: 4 4;
}

.system-map__edge--active {
  stroke: var(--accent);
  stroke-width: 3;
}

.system-map__node-circle {
  stroke-width: 2;
  fill: var(--surface2);
}

.system-map__node-circle--live {
  stroke: var(--accent);
}

.system-map__node-circle--configured {
  stroke: var(--green);
}

.system-map__node-circle--unconfigured {
  stroke: var(--text3);
  stroke-dasharray: 3 3;
}

.system-map__node-label {
  fill: var(--text2);
  font-size: 12px;
  font-family: var(--font-sans);
  text-anchor: middle;
}

.system-map__pulse {
  fill: var(--accent);
  filter: drop-shadow(0 0 4px var(--accent));
}

.system-map__pulse--error {
  fill: var(--red);
  filter: drop-shadow(0 0 6px var(--red));
}

/* ============================================================
   Product Tracker grid
   ============================================================ */
.tracker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.tracker-year-tabs {
  display: flex;
  gap: var(--space-1);
}

.tracker-year-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: var(--space-2) var(--space-3);
  color: var(--text2);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  min-height: 40px;
}

.tracker-year-tab:hover {
  color: var(--text1);
}

.tracker-year-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.tracker-year-tab--all {
  margin-left: var(--space-2);
  padding-left: var(--space-3);
  border-left: 1px solid var(--border);
}

.tracker-search {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  padding: 0 var(--space-3);
  min-height: 40px;
  color: var(--text3);
}

.tracker-search input {
  border: none;
  background: none;
  outline: none;
  color: var(--text1);
  font-family: var(--font-mono);
  font-size: 13px;
  width: 200px;
}

.tracker-toolbar {
  display: flex;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.tracker-toolbar .form-field {
  min-width: 220px;
  max-width: 320px;
}

/* Scoped override, not a global .btn-primary change — matches the same
   "shrink it just where it's used" pattern as .popup-card's compact button
   overrides (see docs/work_log.md's "Variant field relabel + popup-wide
   compact typography" entry). The toolbar's other control (the product
   select) is already compact; the default 44px/15px button read oversized
   next to it. */
.tracker-toolbar .btn-primary {
  align-self: flex-end;
  min-height: 32px;
  padding: 0 var(--space-4);
  font-size: 12px;
}

.tracker-table-outer {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Both the overall table width AND --month-col-width are set inline per
   render by frontend/js/tracker.js (see renderTable) as literal pixel
   values, not left to table-layout: fixed's own "width: auto" sizing —
   that's implementation-defined per the CSS2.1 fixed-table-layout algorithm
   and was observed to shrink columns back down to fit the container instead
   of letting the table grow, which defeated "ALL" mode's whole point.
   Computing an explicit total width (label + total + N*month, N possibly
   72+ in "ALL" mode) removes that ambiguity: the table is simply wider than
   its container once N > 12, which is what triggers
   .tracker-table-outer's existing horizontal scroll — a single year (N=12)
   computes to exactly the container's width, so no scroll is needed there. */
.tracker-table {
  border-collapse: collapse;
  table-layout: fixed;
  font-family: var(--font-mono);
}

.tracker-table th {
  background: var(--surface);
  color: var(--text2);
  font-weight: 600;
  text-align: center;
  padding: var(--space-1);
  border-bottom: 2px solid var(--border);
  border-right: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 9px;
  line-height: 1.6;
  white-space: nowrap;
}

.tracker-table th:not(.tracker-th-label):not(.tracker-th-total),
.tracker-cell:not(.tracker-cell--total) {
  width: var(--month-col-width, 90px);
}

.tracker-th-label {
  width: 140px !important;
  position: sticky;
  left: 0;
  z-index: 2;
  border-right: 2px solid var(--text3) !important;
}

.tracker-row {
  border-bottom: 1px solid var(--border);
}

.tracker-row-label {
  width: 140px;
  padding: var(--space-1) var(--space-2);
  background: var(--surface);
  white-space: nowrap;
  border-left: 3px solid var(--border);
  border-right: 2px solid var(--text3);
  border-bottom: 1px solid var(--border);
  position: sticky;
  left: 0;
  z-index: 1;
}

.tracker-row-label__name {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text1);
}

.tracker-row-label__sub {
  font-size: 9px;
  color: var(--text3);
  font-family: var(--font-sans);
  margin-top: 1px;
}

.tracker-row-label--stage-order { border-left-color: var(--blue); }
.tracker-row-label--stage-production { border-left-color: var(--violet); }
.tracker-row-label--stage-shipping { border-left-color: var(--amber-text); }
.tracker-row-label--stage-transit { border-left-color: var(--orange-text); }
.tracker-row-label--stage-arrival { border-left-color: var(--green-text); }
.tracker-row-label--stage-warehouse { border-left-color: var(--teal-text); }
.tracker-row-label--stage-sales { border-left-color: var(--accent); }
.tracker-row-label--stage-forecast { border-left-color: var(--text3); }
.tracker-row-label--stage-stock { border-left-color: var(--accent); }
.tracker-row-label--stage-days { border-left-color: var(--text3); }
.tracker-row-label--stage-diff { border-left-color: var(--text3); }

.tracker-row--stage-order td:not(.tracker-row-label) { background: rgba(59, 130, 246, 0.05); }
.tracker-row--stage-production td:not(.tracker-row-label) { background: rgba(139, 92, 246, 0.05); }
.tracker-row--stage-shipping td:not(.tracker-row-label) { background: rgba(245, 158, 11, 0.05); }
.tracker-row--stage-transit td:not(.tracker-row-label) { background: rgba(249, 115, 22, 0.05); }
.tracker-row--stage-arrival td:not(.tracker-row-label) { background: rgba(34, 197, 94, 0.05); }
.tracker-row--stage-warehouse td:not(.tracker-row-label) { background: rgba(20, 184, 166, 0.05); }
.tracker-row--stage-sales td:not(.tracker-row-label) { background: rgba(0, 212, 200, 0.04); }
.tracker-row--stage-forecast td:not(.tracker-row-label) { background: rgba(255, 255, 255, 0.02); }
.tracker-row--stage-diff td:not(.tracker-row-label) { background: rgba(255, 255, 255, 0.02); }
.tracker-row--stage-stock td:not(.tracker-row-label) { background: rgba(0, 212, 200, 0.06); }
.tracker-row--stage-days td:not(.tracker-row-label) { background: rgba(0, 0, 0, 0.15); }

.tracker-cell {
  position: relative;
  text-align: center;
  vertical-align: middle;
  padding: var(--space-1);
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  color: var(--text3);
  cursor: pointer;
  min-width: 56px;
  height: 36px;
}

.tracker-cell__value {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--text1);
}

.tracker-cell__icon {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}

.tracker-cell__value--warning {
  color: var(--red-text);
}

.tracker-cell--negative {
  background: rgba(255, 77, 109, 0.12);
}

.tracker-cell__icon--alert {
  color: var(--red-text);
  width: 12px;
  height: 12px;
  margin-left: 4px;
  vertical-align: middle;
}

.tracker-cell__value--positive {
  color: var(--green-text);
}

.tracker-cell--data {
  cursor: default;
}

.tracker-grid-input {
  width: 100%;
  min-width: 0;
  height: 24px;
  box-sizing: border-box;
  border: 1px solid transparent;
  background: none;
  color: var(--text1);
  font-family: var(--font-mono);
  font-size: 11px;
  text-align: right;
  border-radius: var(--radius);
  padding: 0 var(--space-1);
}

/* Matches the plain .tracker-cell__value look it replaces — no browser
   spin-button arrows, which would otherwise widen the cell past the
   fixed-size grid every other row already uses. */
.tracker-grid-input::-webkit-outer-spin-button,
.tracker-grid-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tracker-grid-input {
  -moz-appearance: textfield;
}

.tracker-grid-input:hover {
  border-color: var(--border);
}

.tracker-grid-input:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface2);
}

.tracker-cell:hover {
  background: rgba(255, 255, 255, 0.04);
}

.tracker-cell--filled .tracker-cell__value {
  font-weight: 700;
}

.tracker-cell--highlighted {
  background: rgba(0, 212, 200, 0.18) !important;
  box-shadow: inset 0 0 0 1px var(--accent);
}

.tracker-cell--search-match {
  box-shadow: inset 0 0 0 2px var(--amber);
}

.tracker-cell--total {
  width: 64px;
  border-left: 2px solid var(--text3);
  background: rgba(0, 212, 200, 0.05);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
  cursor: default;
}

.tracker-th-total {
  width: 64px !important;
  border-left: 2px solid var(--text3);
  background: rgba(0, 212, 200, 0.08) !important;
  color: var(--accent) !important;
}

.tracker-th-year {
  color: var(--text3);
  font-weight: 400;
}

.tracker-cell__dot {
  position: absolute;
  top: 4px;
  right: 5px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 4px var(--accent);
}

.tracker-cell__dot--multi {
  right: 14px;
  background: var(--red);
  box-shadow: 0 0 4px var(--red);
}

/* C/P badge in the ORDER row's own cells (2026-07-06) — top-left corner,
   same green/amber language as the popup's status badge. */
.tracker-cell__status-letter {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}

.tracker-cell__status-letter--confirmed {
  background: rgba(34, 197, 94, 0.2);
  color: var(--green-text);
}

.tracker-cell__status-letter--projected {
  background: rgba(245, 158, 11, 0.2);
  color: var(--amber-text);
}

/* ============================================================
   Order/Shipment Popup (UJ-08) — modal overlay, multi-popup-stack
   ============================================================ */
/* The backdrop itself no longer scrolls — .popup-stack__row (below) does,
   capped to MAX_VISIBLE_POPUPS (3, see orderPopup.js) cards wide so a 4th+
   popup is never silently squeezed onto a wide screen without the user
   noticing there's more to see. */
.popup-stack {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--space-6) var(--space-4);
  overflow: hidden;
}

/* The [hidden] attribute alone loses to .popup-stack's own `display: flex`
   (equal CSS specificity, later rule wins) — without this, a "closed" stack
   stays a full-viewport flex container and silently blocks every click
   underneath it, even though nothing is visibly there. */
.popup-stack[hidden] {
  display: none;
}

/* Count badge + ‹ › buttons — only shown once there are more popups open
   than fit in .popup-stack__row's capped width, so it never appears for the
   common 1-3-popup case. */
.popup-stack__nav {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
  padding: 4px var(--space-3);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  flex-shrink: 0;
}

.popup-stack__nav[hidden] {
  display: none;
}

.popup-stack__nav-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text2);
  white-space: nowrap;
}

.popup-stack__nav-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  color: var(--text1);
  line-height: 1;
  font-size: 15px;
  flex-shrink: 0;
}

.popup-stack__nav-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.popup-stack__nav-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

.popup-stack__row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  max-width: calc(3 * 380px + 2 * var(--space-4));
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: auto;
  /* Vertical scrolling belongs entirely to each .popup-card__body (a tall
     card's own content scrolls inside itself, capped by the card's own
     max-height) — this row only ever needs to scroll horizontally to move
     between open popups. `overflow-y: auto` here was redundant and, once a
     card's content was tall enough, produced a second, nested vertical
     scrollbar right next to the card's own (found via user screenshot
     2026-07-03, same underlying "always set overflow explicitly, don't
     assume the other axis" lesson as the .popup-card__body horizontal fix
     right above). NOTE: `overflow-y: visible` does NOT work here — per
     CSS2.1 §11.1.1, pairing 'visible' on one axis with a non-'visible'
     value (here overflow-x: auto) forces the 'visible' axis to also
     compute as 'auto', recreating the exact same bug. `clip` sidesteps
     that promotion rule (it isn't 'visible') while still never producing
     a scrollbar — safe here since every card already caps its own height
     and scrolls internally, so nothing should ever actually need clipping. */
  overflow-y: clip;
  scroll-snap-type: x proximity;
  padding-bottom: var(--space-2);
}

.popup-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 380px;
  max-width: calc(100vw - 28px);
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  scroll-snap-align: start;
}

/* Double-clicking another popup's header ("aislar") tries to close every
   other popup — one that has unsaved changes gets this instead of being
   silently discarded. Purely a CSS-class toggle (see orderPopup.js's
   isolatePopup): the banner is a ::before on the body, so no extra markup is
   needed and it disappears the moment the class is removed. */
.popup-card--blocked {
  border-color: var(--amber-text);
  box-shadow: 0 0 0 1px var(--amber);
}

.popup-card--blocked .popup-card__body::before {
  content: "No se cerró: tiene cambios sin guardar. Guárdalos o descártalos y vuelve a intentar.";
  display: block;
  padding: var(--space-2);
  border: 1px solid var(--amber);
  border-radius: var(--radius);
  background: rgba(245, 158, 11, 0.12);
  color: var(--amber-text);
  font-size: 11px;
  font-weight: 600;
}

/* The rest of the app uses larger form controls (.form-input/.form-label/
   .btn-primary/.btn-secondary are shared globals), but inside a popup they
   made the card feel bulky and sparse. Scope them down here to match
   .popup-date-table's 11px — the size already used for each stage's date
   details — so the whole popup reads at one consistent, compact size. */
.popup-card .form-label {
  font-size: 10px;
}

.popup-card .form-input {
  min-height: 32px;
  font-size: 11px;
}

.popup-card .btn-primary,
.popup-card .btn-secondary {
  min-height: 32px;
  padding: 0 var(--space-3);
  font-size: 12px;
}

.popup-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border);
}

.popup-card__stage-title--paid {
  color: var(--green-text);
}

.popup-card__stage-title--pending {
  color: var(--red-text);
}

.popup-card__stage-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--accent);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.popup-card__month {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text2);
}

.popup-card__close {
  background: none;
  border: none;
  color: var(--text2);
  font-size: 18px;
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
}

.popup-card__close:hover {
  background: var(--surface2);
  color: var(--text1);
}

.popup-card__body {
  padding: var(--space-3);
  overflow-y: auto;
  /* Explicit, not left implicit: per CSS2.1 §11.1.1, setting only
     overflow-y to a non-'visible' value makes the browser compute
     overflow-x as 'auto' too (never actually 'visible') — that silently
     gave every popup card its own second, independent horizontal
     scrollbar whenever inner content (e.g. the date table) was a hair
     wider than the card, on top of .popup-stack__row's own intentional
     one for switching between multiple open popups. Found via user
     screenshot 2026-07-03. */
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.popup-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text3);
  margin: 0;
}

.popup-section-header {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-2);
}

.popup-section-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  justify-content: flex-start;
}

.popup-order-summary {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: var(--space-3);
  background: var(--surface);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.popup-order-summary__kvs {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border);
  padding-top: var(--space-2);
  margin-top: var(--space-1);
}

.popup-shipment__configure-btn--danger {
  color: var(--red-text);
  border-color: rgba(255, 75, 85, 0.4);
}

.popup-shipment__configure-btn--danger:hover {
  color: var(--red-text);
  border-color: var(--red-text);
}

.popup-kv {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 2px 0;
  font-size: 11px;
}

.popup-kv__label {
  color: var(--text3);
}

.popup-kv__value {
  color: var(--text1);
  font-weight: 500;
  text-align: right;
}

.popup-kv__value--strong {
  font-weight: 700;
}

.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
}

.status-badge--confirmed {
  background: rgba(34, 197, 94, 0.15);
  color: var(--green-text);
}

.status-badge--projected {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber-text);
}

/* Shipment warehouse/customs status (UJ-11) — Por Arribar stays neutral
   (nothing has happened yet), En Puerto/Almacenera are the two in-progress
   steps, Nacionalizado reuses the same green as a paid/confirmed badge. */
.status-badge--por-arribar {
  background: rgba(107, 122, 143, 0.15);
  color: var(--text3);
}

.status-badge--en-puerto {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber-text);
}

.status-badge--almacenera {
  background: rgba(0, 229, 255, 0.15);
  color: var(--accent);
}

.status-badge--nacionalizado {
  background: rgba(34, 197, 94, 0.15);
  color: var(--green-text);
}

/* ============================================================
   Productos panel — form on the left, product list on the right
   ============================================================ */
.products-page {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 900px) {
  .products-page {
    grid-template-columns: 1fr;
  }
}

.products-page__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  padding: var(--space-4);
}

.products-page__search {
  width: 100%;
}

.products-page__search input {
  width: 100%;
}

.products-page__form-actions {
  display: flex;
  gap: var(--space-3);
}

.branding-color-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.branding-color-row input[type='color'] {
  width: 44px;
  height: 36px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
}

.products-page__list {
  min-width: 0;
}

.products-row {
  cursor: pointer;
}

.products-row:hover {
  background: rgba(255, 255, 255, 0.04);
}

.variant-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.variant-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 70px auto;
  gap: var(--space-2);
}

.variant-row input {
  min-width: 0;
}

.variant-editor__add {
  align-self: flex-start;
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text2);
  padding: var(--space-1) var(--space-3);
  font-size: 11px;
  min-height: 28px;
}

.variant-editor__add:hover {
  color: var(--text1);
  border-color: var(--text2);
}

.popup-shipment {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface2);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.popup-shipment__header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.popup-shipment__label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--accent);
}

.popup-shipment__qty {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text1);
}

.popup-shipment__configure-btn {
  margin-left: auto;
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text2);
  padding: 2px var(--space-2);
  font-size: 11px;
  min-height: 28px;
}

.popup-shipment__configure-btn:hover {
  color: var(--text1);
  border-color: var(--accent);
}

.popup-shipment__delete {
  background: none;
  border: none;
  color: var(--text3);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 var(--space-1);
}

.popup-shipment__delete:hover {
  color: var(--red-text);
}

.popup-shipment__footer {
  display: flex;
  justify-content: flex-end;
}

.popup-shipment__configure {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius);
}

.popup-date-table {
  width: 100%;
  table-layout: fixed;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Fixed column widths (rather than the default content-based sizing) so a
   native <input type="date">'s browser-enforced minimum width can't force
   this table — and with it, the whole popup — wider than the viewport on
   narrow screens. Without table-layout: fixed, that minimum silently grows
   the table past the card's edge and triggers page-level horizontal scroll. */
.popup-date-table th:nth-child(1) {
  width: 20%;
}

.popup-date-table th:nth-child(2) {
  width: 24%;
}

.popup-date-table th:nth-child(3) {
  width: 40%;
}

.popup-date-table th:nth-child(4) {
  width: 16%;
}

.popup-date-table th {
  text-align: left;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border);
}

.popup-date-table td {
  padding: var(--space-1);
  vertical-align: middle;
  overflow: hidden;
}

.popup-date-table__stage {
  font-weight: 700;
  color: var(--text1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.consolidated-carpetas-table tbody tr:nth-child(even) {
  background: var(--surface2);
}

.consolidated-carpetas-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.consolidated-carpetas-table .consolidated-open-btn {
  margin-left: 0;
  min-height: 24px;
  padding: 1px var(--space-2);
}

.popup-date-table__calc {
  color: var(--text3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.popup-date-input {
  width: 100%;
  min-width: 0;
  min-height: 32px;
  font-size: 11px;
  padding: 0 var(--space-1);
}

.popup-delta {
  color: var(--text3);
}

.popup-delta--late {
  color: var(--amber-text);
  font-weight: 700;
}

.popup-delta--early {
  color: var(--green-text);
  font-weight: 700;
}

.popup-shipment__hint {
  font-size: 11px;
  color: var(--text3);
  margin: 0;
}

.split-shipment__toggle {
  align-self: flex-start;
  background: none;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text2);
  padding: var(--space-1) var(--space-2);
  font-size: 11px;
  min-height: 28px;
}

.split-shipment__toggle:hover {
  color: var(--text1);
  border-color: var(--accent);
}

.split-shipment__hint {
  font-size: 11px;
  color: var(--text3);
}

.split-shipment__hint--warn {
  color: var(--amber-text);
}

.split-shipment-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-2);
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.split-shipment-form__hint {
  font-size: 11px;
  color: var(--text3);
}

.split-shipment-form__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.split-variant-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 11px;
}

.split-variant-table th {
  text-align: left;
  color: var(--text3);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.04em;
  padding: var(--space-1) var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border);
}

.split-variant-table td {
  padding: var(--space-1);
  vertical-align: middle;
}

.split-variant-table .split-variant-qty {
  min-height: 32px;
  font-size: 11px;
  padding: 0 var(--space-2);
  width: 100%;
}

.split-variant-row__remain {
  color: var(--text3);
  white-space: nowrap;
}

.split-variant-row__name {
  color: var(--text1);
  font-weight: 700;
}

.split-variant-row__detail {
  color: var(--text3);
  font-size: 10px;
}

.split-total-new {
  font-size: 11px;
  color: var(--text2);
  font-weight: 700;
}

.split-total-new__value {
  color: var(--text1);
}

.popup-balance {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--border);
  font-size: 11px;
}

.popup-balance__label {
  color: var(--text3);
}

.popup-balance__value {
  font-weight: 700;
}

.popup-balance__value--ok {
  color: var(--green-text);
}

.popup-balance__value--bad {
  color: var(--red-text);
}

.popup-card__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.btn-secondary {
  min-height: 40px;
  padding: 0 var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: none;
  color: var(--text2);
  font-weight: 600;
  font-size: 14px;
}

.btn-secondary:hover {
  color: var(--text1);
  border-color: var(--text2);
}

@media (max-width: 480px) {
  .popup-stack {
    padding: var(--space-3) 14px;
  }

  .popup-card {
    width: 100%;
  }

  .popup-date-table {
    font-size: 10px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .system-map__edge--active {
    transition: none;
  }

  .system-map__pulse {
    transition: none;
  }

  .toast {
    transition: none;
  }
}

/* ============================================================
   Toast confirmations (js/toast.js) — brief, non-blocking
   ============================================================ */
.toast-stack {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column-reverse;
  gap: var(--space-2);
  pointer-events: none;
  max-width: calc(100vw - 32px);
}

.toast {
  min-width: 220px;
  max-width: 360px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  color: var(--text1);
  font-size: 13px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition);
}

.toast--visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--success {
  border-left-color: var(--green-text);
}

.toast--error {
  border-left-color: var(--red-text);
}

.toast--info {
  border-left-color: var(--accent);
}

@media (max-width: 480px) {
  .toast-stack {
    left: var(--space-3);
    right: var(--space-3);
  }

  .toast {
    max-width: none;
  }
}

/* ============================================================
   Modal (js/modals.js) — blocking, centered, needs a click to
   dismiss. Same design language as the toast above (surface,
   border, left-accent-per-type, transition timing) — just
   centered with a dimmed backdrop instead of a corner that
   auto-dismisses, since consent-requiring actions (delete an
   order/product, discard unsaved changes) shouldn't be easy to
   miss or misclick. See UJ-15 in implementation/user_journeys.md.
   ============================================================ */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
  padding: var(--space-4);
  opacity: 0;
  transition: opacity var(--transition);
}

.modal-backdrop--visible {
  opacity: 1;
}

.modal-card {
  min-width: 280px;
  max-width: 420px;
  padding: var(--space-4);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  background: var(--surface);
  color: var(--text1);
  font-size: 13px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
  transform: translateY(-8px);
  transition: transform var(--transition);
}

.modal-backdrop--visible .modal-card {
  transform: translateY(0);
}

.modal-card--success {
  border-left-color: var(--green-text);
}

.modal-card--error {
  border-left-color: var(--red-text);
}

.modal-card--warning {
  border-left-color: var(--amber-text);
}

.modal-card--info {
  border-left-color: var(--accent);
}

.modal-card__message {
  margin: 0 0 var(--space-4);
  line-height: 1.5;
  color: var(--text1);
}

.modal-card__actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-3);
}

.modal-card__actions .btn-primary,
.modal-card__actions .btn-secondary {
  min-height: 36px;
  padding: 0 var(--space-4);
  font-size: 13px;
}

@media (prefers-reduced-motion: reduce) {
  .modal-backdrop,
  .modal-card {
    transition: none;
  }
}

/* ============================================================
   Bulk import (UJ-13) — a wider variant of .modal-card for the
   preview/result table, since window.PTModal's own component is
   text-only (see modals.js) and caps at 420px. Result-row/summary-chip
   classes ported from legacy_reference/Index.html's preserved import UI,
   restyled to Iceberg tokens.
   ============================================================ */
.modal-card--wide {
  width: 640px;
  max-width: calc(100vw - 32px);
}

.import-modal__section {
  margin-bottom: var(--space-4);
}

.import-modal__warning {
  color: var(--amber-text);
  font-weight: 600;
  margin: 0 0 var(--space-3);
}

.import-summary-strip {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-3);
}

.import-summary-chip {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
}

.import-summary-chip--ok {
  background: rgba(34, 197, 94, 0.15);
  color: var(--green-text);
}

.import-summary-chip--warn {
  background: rgba(245, 158, 11, 0.15);
  color: var(--amber-text);
}

.import-summary-chip--err {
  background: rgba(255, 77, 109, 0.15);
  color: var(--red-text);
}

.import-result-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.import-result-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: 6px var(--space-3);
  border-bottom: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 11px;
}

.import-result-row:last-child {
  border-bottom: none;
}

.import-result-row--ok {
  color: var(--green-text);
}

.import-result-row--warn {
  color: var(--amber-text);
}

.import-result-row--err {
  color: var(--red-text);
}

.import-modal__loading {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text2);
  font-size: 13px;
}