/* Octopia Fulfillment — mobile first.
   Rules are written for a phone by default; wider screens are handled in the
   media queries at the bottom. */

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --border: #e3e7ec;
  --border-strong: #cfd6de;
  --text: #131a22;
  --muted: #5f6b7a;
  --faint: #8a95a3;

  --accent: #1a56b8;
  --accent-dark: #123f88;
  --accent-soft: #eaf1fd;

  --ok: #0d7a48;
  --ok-soft: #e7f6ee;
  --warn: #9a5b00;
  --warn-soft: #fdf3e2;
  --danger: #b02a1f;
  --danger-soft: #fdecea;

  --radius: 12px;
  --radius-sm: 9px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --tap: 46px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

h1 { font-size: 1.45rem; margin: 0 0 4px; letter-spacing: -.015em; }
h2 { font-size: 1.05rem; margin: 0 0 14px; letter-spacing: -.01em; }
p  { margin: 0 0 12px; }
a  { color: var(--accent); }

/* ---------- Top bar ---------- */
.topbar {
  background: #101828;
  position: sticky; top: 0; z-index: 50;
  padding-top: env(safe-area-inset-top);
}
.topbar-inner {
  max-width: 1080px; margin: 0 auto;
  padding: 12px 16px;
  display: flex; align-items: center; gap: 20px;
}
.brand {
  display: flex; align-items: center; gap: 9px;
  color: #fff; text-decoration: none; font-weight: 650; letter-spacing: -.01em;
}
.brand-mark {
  width: 20px; height: 20px; border-radius: 5px;
  background: linear-gradient(140deg, #4d8df6, #1a56b8);
  display: block; flex: none;
}
.topnav { display: none; }
.topnav a {
  color: #aeb9c9; text-decoration: none; font-size: .92rem; font-weight: 550;
  padding: 7px 11px; border-radius: 7px;
}
.topnav a:hover { color: #fff; background: rgba(255,255,255,.07); }
.topnav a.is-active { color: #fff; background: rgba(255,255,255,.13); }

/* ---------- Page ---------- */
.page {
  max-width: 1080px; margin: 0 auto;
  /* The clearance for the fixed tab bar is written once, here, and everything
     that needs to sit above it refers to this. Two independent copies of the
     same measurement is how they drift apart. */
  --tabbar-h: 56px;
  padding: 18px 16px calc(var(--tabbar-h) + 26px + env(safe-area-inset-bottom));
}

.page-head { margin-bottom: 16px; }
.page-head .sub { color: var(--muted); font-size: .9rem; }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
}
.card > h2:first-child { margin-top: 0; }

/* ---------- Banners ---------- */
.banner {
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: .92rem;
  border: 1px solid transparent;
}
.banner strong { display: block; margin-bottom: 2px; }
.banner-error   { background: var(--danger-soft); border-color: #f3c9c4; color: #7d1d15; }
.banner-warning { background: var(--warn-soft);   border-color: #f0dcb8; color: #6d4100; }
.banner-success { background: var(--ok-soft);     border-color: #bde3ce; color: #0a5432; }
.banner-info    { background: var(--accent-soft); border-color: #c6dbfa; color: #123f88; }

/* ---------- Stats ---------- */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 11px 12px; text-align: center;
}
.stat .value { font-size: 1.3rem; font-weight: 680; letter-spacing: -.02em; display: block; }
.stat .label { font-size: .68rem; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* ---------- Forms ---------- */
label { display: block; font-size: .8rem; font-weight: 600; color: var(--muted); margin-bottom: 5px; }
.field { margin-bottom: 13px; }
.hint { font-size: .78rem; color: var(--faint); margin-top: 4px; }

input[type=text], input[type=email], input[type=tel], input[type=number],
input[type=search], input[type=password], input:not([type]), select {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  font-size: 16px; /* keeps iOS from zooming on focus */
  font-family: inherit;
  color: var(--text);
  background: #fff;
  appearance: none;
}
select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235f6b7a' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
  padding-right: 34px;
}
input:focus, select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(26, 86, 184, .14);
}
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 0 13px; }

.check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: .92rem; color: var(--text); font-weight: 500;
  padding: 11px 0; margin: 0;
}
.check input { width: 19px; height: 19px; min-height: 0; margin: 1px 0 0; flex: none; accent-color: var(--accent); }

.radio-list { display: grid; gap: 8px; }
.radio-option {
  display: flex; align-items: center; gap: 11px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  padding: 12px 13px; cursor: pointer; font-weight: 500; margin: 0;
  color: var(--text); font-size: .95rem;
}
.radio-option:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.radio-option input { width: 19px; height: 19px; min-height: 0; margin: 0; flex: none; accent-color: var(--accent); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: var(--tap); padding: 11px 18px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font-size: .95rem; font-weight: 600; font-family: inherit;
  cursor: pointer; text-decoration: none; text-align: center;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-dark); }
.btn-secondary { background: #fff; color: var(--text); border-color: var(--border-strong); }
.btn-secondary:hover { background: #f7f9fb; }
.btn-success { background: var(--ok); color: #fff; }
.btn-danger  { background: #fff; color: var(--danger); border-color: #eec4bf; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
/* A button that is a sign rather than a door: it says "not now" and leads
   nowhere. Grey, not a faded green — a pale green still reads as "go". */
.btn.is-disabled {
  background: #eef1f4; color: var(--muted);
  border-color: var(--border-strong); cursor: not-allowed;
}
.btn-icon {
  min-height: 38px; padding: 6px 11px; font-size: .84rem;
  background: #fff; border-color: var(--border-strong); color: var(--muted);
}

.actions { display: grid; gap: 9px; margin-top: 16px; }

/* ---------- Search box ---------- */
.search-wrap { position: relative; }
.suggestions {
  display: none; position: absolute; left: 0; right: 0; top: calc(100% + 4px);
  background: #fff; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  z-index: 100; max-height: 290px; overflow-y: auto;
  box-shadow: 0 8px 24px rgba(16,24,40,.13);
}
.suggestion { padding: 11px 13px; cursor: pointer; border-bottom: 1px solid var(--border); }
.suggestion:last-child { border-bottom: 0; }
.suggestion:hover, .suggestion.is-highlighted { background: var(--accent-soft); }
.suggestion .name { font-weight: 600; font-size: .93rem; }
.suggestion .meta { color: var(--muted); font-size: .78rem; margin-top: 2px; }

/* ---------- Product rows ---------- */
.product-row {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 12px; margin-bottom: 10px; background: #fbfcfd;
}
.product-row .row-bottom { display: flex; gap: 9px; align-items: flex-end; margin-top: 10px; }
.product-row .qty { width: 96px; flex: none; }
.product-row .row-bottom .btn { flex: 1; }

/* ---------- Stock list: cards on phones ---------- */
.stock-list { display: grid; gap: 9px; }
.stock-item {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 12px;
}
.stock-item .name { font-weight: 600; font-size: .95rem; margin-bottom: 7px; line-height: 1.35; }
.stock-item .refs { font-size: .76rem; color: var(--faint); margin-bottom: 9px; word-break: break-all; }
.qty-row { display: flex; gap: 7px; }
.qty-chip {
  flex: 1; text-align: center; padding: 6px 4px;
  border-radius: 7px; background: #f4f6f8; border: 1px solid var(--border);
}
.qty-chip .n { display: block; font-weight: 680; font-size: 1rem; }
.qty-chip .k { font-size: .64rem; text-transform: uppercase; letter-spacing: .045em; color: var(--muted); }
.qty-chip.available { background: var(--ok-soft); border-color: #bde3ce; }
.qty-chip.available .n { color: var(--ok); }
.qty-chip.zero .n { color: var(--faint); }

.stock-table { display: none; }

/* ---------- Generic table (desktop) ---------- */
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
  text-align: left; padding: 10px 12px; font-size: .72rem; font-weight: 650;
  text-transform: uppercase; letter-spacing: .045em; color: var(--muted);
  border-bottom: 1px solid var(--border-strong); white-space: nowrap;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
.num { text-align: right; font-variant-numeric: tabular-nums; }
.strong { font-weight: 650; }
.text-ok { color: var(--ok); font-weight: 650; }
.text-faint { color: var(--faint); }

/* ---------- Review ---------- */
.review-row { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: .93rem; }
.review-row:last-child { border-bottom: 0; }
.review-row .k { color: var(--muted); flex: none; }
.review-row .v { text-align: right; font-weight: 550; }
.address { font-style: normal; line-height: 1.65; font-size: .95rem; }
.address .who { font-weight: 650; }

.line-item { display: flex; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.line-item:last-child { border-bottom: 0; }
.line-item .q {
  flex: none; min-width: 38px; height: 38px; border-radius: 8px;
  background: var(--accent-soft); color: var(--accent-dark);
  display: flex; align-items: center; justify-content: center; font-weight: 680;
}
.line-item .d { flex: 1; min-width: 0; }
.line-item .d .n { font-weight: 600; font-size: .93rem; }
.line-item .d .m { font-size: .77rem; color: var(--faint); margin-top: 2px; word-break: break-all; }

/* ---------- Badges ---------- */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: .72rem; font-weight: 650; text-transform: uppercase; letter-spacing: .04em;
}
.badge-draft  { background: #eef1f4; color: var(--muted); }
.badge-erp    { background: #e8eefc; color: #2b4fb3; }
.badge-short  { background: #fde8e8; color: #b42318; margin-right: 6px; }
.ship-row.is-from-erp { border-left: 3px solid #2b4fb3; }
.badge-sent   { background: var(--ok-soft); color: var(--ok); }
.badge-failed { background: var(--danger-soft); color: var(--danger); }
.badge-sending{ background: var(--warn-soft); color: var(--warn); }

/* ---------- Empty state ---------- */
.empty { text-align: center; padding: 38px 18px; color: var(--muted); }
.empty .big { font-size: 1.02rem; font-weight: 600; color: var(--text); margin-bottom: 5px; }

/* ---------- Bottom tab bar (phones only) ---------- */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  /* Columns are NOT counted here on purpose. This said repeat(4, 1fr) while
     the bar had five tabs, so the fifth wrapped onto a second row, the bar
     came out twice as tall as everything below assumed, and the Send button
     ended up hidden underneath it on every phone. Laying the tabs out by flow
     means adding a sixth makes them narrower and never taller. */
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 2px 7px; text-decoration: none; color: var(--muted);
  font-size: .68rem; font-weight: 600;
  min-width: 0;                 /* so a long label shrinks instead of pushing */
}
.tabbar a span {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tabbar a svg {
  width: 21px; height: 21px; fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.tabbar a.is-active { color: var(--accent); }

/* ---------- Sticky submit on phones ---------- */
.sticky-actions {
  position: sticky; z-index: 5;
  bottom: calc(var(--tabbar-h, 56px) + 8px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 62%, rgba(244,246,248,0));
  padding: 14px 0 10px; margin-top: 6px;
}

/* ================= Wider screens ================= */
@media (min-width: 720px) {
  h1 { font-size: 1.7rem; }
  .topnav { display: flex; gap: 3px; margin-left: auto; }
  .tabbar { display: none; }
  .page { padding: 26px 20px 60px; }
  .card { padding: 20px; margin-bottom: 16px; }
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .stats { grid-template-columns: repeat(3, minmax(0, 200px)); }
  .stats-4 { grid-template-columns: repeat(4, minmax(0, 200px)); }
  .stat { text-align: left; padding: 13px 15px; }
  .actions { display: flex; justify-content: flex-end; }
  .actions .btn { min-width: 150px; }
  .btn-block { width: auto; }
  .sticky-actions { position: static; background: none; padding: 0; }

  .stock-list { display: none; }
  .stock-table {
    display: block; background: var(--surface);
    border: 1px solid var(--border); border-radius: var(--radius);
    overflow: hidden; box-shadow: var(--shadow);
  }
  .product-row { display: grid; grid-template-columns: 1fr 110px auto; gap: 11px; align-items: end; }
  .product-row .row-bottom { display: contents; }
  .product-row .qty { width: auto; }
  .product-row .row-bottom .btn { flex: none; }
  .review-row .v { font-weight: 600; }
}

@media (min-width: 980px) {
  .split { display: grid; grid-template-columns: 1fr 340px; gap: 16px; align-items: start; }
  .split > .card { margin-bottom: 0; }
}

/* Linea de producto que pide mas unidades de las que hay */
.product-row.over-stock { border-color: var(--danger); background: var(--danger-soft); }
.product-row .stock-warning { color: var(--danger); font-weight: 600; margin-top: 8px; }

/* Borrar un contacto: visible, pero sin invitar al clic accidental */
.btn-delete { color: var(--danger); border-color: #eec4bf; }
.btn-delete:hover { background: var(--danger-soft); }

/* Variacion del stock respecto al ultimo dia registrado */
.delta-down { color: var(--danger); font-weight: 650; }
.qty-chip .n small { font-size: .68rem; margin-left: 3px; vertical-align: super; }

/* El cuerpo literal de la peticion que se manda a Octopia */
.payload {
  background: #101828; color: #d5dced;
  border-radius: var(--radius-sm); padding: 14px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.5;
  overflow-x: auto; white-space: pre; margin: 0;
}

/* Detalle tecnico plegado: disponible sin estorbar */
details.technical { padding: 0; }
details.technical > summary {
  cursor: pointer; padding: 14px 16px; font-size: .88rem;
  font-weight: 600; color: var(--muted); list-style: none;
}
details.technical > summary::-webkit-details-marker { display: none; }
details.technical > summary::before { content: "▸ "; color: var(--faint); }
details[open].technical > summary::before { content: "▾ "; }
details.technical > summary:hover { color: var(--text); }
details.technical > .hint, details.technical > .payload { margin: 0 16px 16px; }

/* ================= Shipments screen ================= */

/* Barra superior: buscador + boton de sincronizar */
.toolbar { display: grid; gap: 9px; margin-bottom: 16px; }
.toolbar .search-row { margin: 0; }
.toolbar form { margin: 0; }
.toolbar .btn { width: 100%; }

.section-title {
  display: flex; align-items: center; gap: 9px;
  font-size: .8rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .06em; color: var(--muted);
  margin: 0 0 9px;
}
.section-title .count {
  font-size: .72rem; font-weight: 650; letter-spacing: 0;
  background: #e7ebf0; color: var(--muted);
  border-radius: 20px; padding: 1px 8px; min-width: 22px; text-align: center;
}

/* La lista es una sola tarjeta con filas separadas por una linea */
.ship-list { padding: 0; overflow: hidden; }

.ship-row {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 13px 15px;
  border-bottom: 1px solid var(--border);
}
.ship-row:last-child { border-bottom: 0; }
.ship-row:hover { background: #fafbfc; }

.ship-main { flex: 1; min-width: 0; }
.ship-ref {
  font-weight: 650; font-size: .95rem; letter-spacing: -.01em;
  text-decoration: none; color: var(--text);
  display: inline-block; margin-bottom: 2px;
}
.ship-ref:hover { color: var(--accent); text-decoration: underline; }
.ship-who {
  font-size: .87rem; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ship-meta { font-size: .76rem; color: var(--faint); margin-top: 3px; }

.ship-right {
  flex: none; display: flex; flex-direction: column;
  align-items: flex-end; gap: 5px; text-align: right;
}
.ship-age { font-size: .74rem; color: var(--faint); font-variant-numeric: tabular-nums; }

/* Un envio vivo que lleva mucho tiempo sin llegar: se marca, no se grita.
   Una barra lateral basta; teñir la fila entera solo hace ruido. */
.ship-row.is-stale { box-shadow: inset 3px 0 0 var(--warn); }
.ship-row.is-stale .ship-age { color: var(--warn); font-weight: 650; }

.can-cancel { color: var(--warn); }

/* Boton de seguimiento del transportista */
.track-gap { display: none; }
.track {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: .74rem; font-weight: 600; text-decoration: none;
  color: var(--accent); background: var(--accent-soft);
  border-radius: 20px; padding: 4px 10px 4px 8px;
  white-space: nowrap;
}
.track:hover { background: #ddeafd; }
.tracking-card .review-row .v { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-content: flex-end; }
.parcel-contents { display: block; font-size: .78rem; color: var(--faint); margin-top: 2px; }
.parcel-state {
  font-size: .72rem; font-weight: 650; border-radius: 20px; padding: 2px 8px;
  background: #eef1f4; color: var(--muted);
}
.parcel-state.parcel-delivered { background: var(--ok-soft); color: var(--ok); }
.parcel-state.parcel-shipped   { background: #e9e6fb; color: #4b34c4; }
.parcel-state.parcel-cancelled { background: var(--danger-soft); color: var(--danger); }
.partly-line { margin: 0 0 8px; font-size: .9rem; color: var(--warn); }
.partly { color: var(--warn); font-weight: 600; }
.line-delivered.is-done { color: var(--ok); }
.line-delivered.is-pending { color: var(--warn); font-weight: 600; }
.returns-card .review-row .v { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.return-line { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.return-why { flex-basis: 100%; text-align: right; font-size: .78rem; font-weight: 400; color: var(--faint); }
.part-back-hint { margin: 0 0 12px; }
.track svg {
  width: 14px; height: 14px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}

/* Estados que devuelve Octopia */
.badge-created       { background: var(--accent-soft); color: var(--accent-dark); }
.badge-accepted      { background: var(--accent-soft); color: var(--accent-dark); }
.badge-pending       { background: var(--accent-soft); color: var(--accent-dark); }
.badge-inpreparation { background: var(--warn-soft);   color: var(--warn); }
.badge-shipped       { background: #e9e6fb;            color: #4b34c4; }
.badge-delivered     { background: var(--ok-soft);     color: var(--ok); }
.badge-cancelled,
.badge-canceled,
.badge-rejected      { background: var(--danger-soft); color: var(--danger); }

/* Borradores: seleccion multiple */
.select-all {
  padding: 11px 15px; margin: 0;
  border-bottom: 1px solid var(--border);
  background: #fafbfc; font-size: .84rem; color: var(--muted);
}
.draft-tick {
  width: 20px; height: 20px; min-height: 0; margin: 2px 0 0;
  flex: none; accent-color: var(--accent);
}

/* La linea discreta que da acceso a los borradores */
.drafts-line {
  margin-top: 20px; padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: .84rem;
}

@media (min-width: 720px) {
  .toolbar {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
  .toolbar .btn { width: auto; }
  .ship-row { align-items: center; padding: 14px 18px; gap: 14px; }
  .draft-tick { align-self: center; margin-top: 0; }
  .ship-right { flex-direction: row; align-items: center; gap: 12px; min-width: 300px; justify-content: flex-end; }
  .ship-age { min-width: 58px; }
  .ship-right .badge { min-width: 124px; text-align: center; }
  .track { min-width: 78px; justify-content: center; }
  /* Hueco del boton de seguimiento cuando no hay: mantiene las columnas */
  .track-gap { display: block; width: 78px; }
}

/* ---------- Asuntos cerrados a mano ---------- */

/* La nota que dice que la verdad la pusiste tu y no Octopia */
.ship-note {
  font-size: .74rem; color: var(--warn);
  margin-top: 4px;
}

/* El resultado real, cuando lo has puesto tu */
.badge-delivered_by_you,
.badge-delivered  { background: var(--ok-soft);     color: var(--ok); }
.badge-partial,
.badge-part       { background: var(--ok-soft);     color: var(--ok); }
.badge-undelivered { background: var(--danger-soft); color: var(--danger); }
.lost-line        { color: var(--danger); font-weight: 600; }

/* Cerrar a mano linea por linea (v19): cuantas se entregaron.
   Cada producto con su casilla justo debajo, y el hueco ENTRE productos. */
.close-line { border-top: 1px solid var(--border); padding: 14px 0 16px; }
.close-line:first-of-type { border-top: 0; padding-top: 4px; }
.close-what { display: block; font-weight: 650; margin: 0 0 6px; }
.close-count { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--muted); }
.close-count input { width: 64px; flex: none; text-align: center; -moz-appearance: textfield; }
.close-count input::-webkit-outer-spin-button,
.close-count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-btn {
  width: var(--tap); height: var(--tap); flex: none;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.step-btn:active { background: var(--accent-soft); }
.close-count input.is-off { border-color: var(--danger); }
.close-info { margin-top: 6px; font-size: .8rem; color: var(--muted); }
.closed-lines { margin: 6px 0 4px; font-size: .86rem; }
.closed-line.has-lost { color: var(--danger); }
.lost-card .review-row .v { display: flex; flex-direction: column; align-items: flex-end; }
.stats-4 { grid-template-columns: repeat(2, 1fr); }
.badge-returned   { background: var(--accent-soft); color: var(--accent-dark); }
.badge-recovered  { background: var(--warn-soft);   color: var(--warn); }
.badge-lost       { background: var(--danger-soft); color: var(--danger); }

/* Deshacer un cierre: presente, pero sin invitar al clic */
.undo-resolve {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
  justify-content: space-between;
}

/* Unidades en cubos de Octopia que no son los tres de siempre.
   Se ven aparte porque son tuyas, pero no las puedes vender. */
.qty-chip.other { background: var(--warn-soft); border-color: #f0dcb8; }
.qty-chip.other .n { color: var(--warn); }
.other-n { color: var(--warn); font-weight: 650; cursor: help; }
.buckets { font-size: .72rem; color: var(--warn); margin-top: 7px; }

.text-danger { color: var(--danger); }
.audit-line { margin: 0 0 14px; font-size: .84rem; }
.lost-notice {
  display: block; margin: 0 0 10px; padding: 9px 12px;
  border: 1px solid #f3c9c4; border-radius: var(--radius-sm);
  background: var(--danger-soft); color: var(--danger);
  font-size: .86rem; font-weight: 600; text-decoration: none;
}
.badge-received { background: var(--ok-soft); color: var(--ok); }

/* Diagnostico: JSON tal cual lo manda Octopia */
.raw-json {
  background: #0f1115; color: #e6e6e6;
  border-radius: 8px; padding: 14px 16px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .78rem; line-height: 1.5;
  overflow-x: auto; white-space: pre; margin: 0;
  -webkit-overflow-scrolling: touch;
}
/* Un boton que se comporta como enlace dentro de un aviso */
.linkish {
  background: none; border: 0; padding: 0; font: inherit;
  color: inherit; text-decoration: underline; cursor: pointer;
}

/* ---------- Signing in ---------- */
/* The login and setup screens have no navigation, so the page has to hold
   itself together on its own: one card, centred, nothing else competing. */

.signout { margin-left: auto; }
.linkish {
  background: none; border: 0; cursor: pointer;
  color: #aeb9c9; font: inherit; font-size: .88rem; font-weight: 550;
  padding: 7px 11px; border-radius: 7px;
}
.linkish:hover { color: #fff; background: rgba(255,255,255,.07); }

body.is-bare .page {
  padding-top: 0;
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}

.login-wrap {
  min-height: 78vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 0;
}
.login-card {
  width: 100%; max-width: 420px;
  margin: 0;
  padding: 26px 24px 24px;
}
.login-card h1 {
  font-size: 1.3rem; margin: 0 0 4px; letter-spacing: -.015em;
}
.login-card .sub { color: var(--muted); font-size: .92rem; margin: 0 0 18px; }
.login-card p { font-size: .92rem; line-height: 1.55; }
.login-card pre {
  background: var(--ground, #f4f6f8);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 11px 13px;
  font-size: .8rem;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-all;
}
.login-card code { font-size: .86em; }
.login-card .btn { margin-top: 6px; }
/* The app's own forms let the button shrink on a wide screen, which is right
   there and wrong here: on a card with one field, a small button floating at
   the left looks like something failed to load. */
.login-card .btn-block { width: 100%; }

/* Reserved units: ours, not Octopia's, so it reads as a note rather than a
   figure from them. */
.reserved-n {
  color: var(--warn-strong, #92400e);
  font-weight: 600;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

/* The line that marks where the empty references begin.
   Octopia's own panel drops a reference from the inventory the moment it hits
   zero, which is exactly what Dani did not want: he asked for them moved to
   the end, not removed. So this line exists to make the move visible — it says
   how many are below it, so nothing looks lost. */
.stock-divider {
  color: var(--muted);
  font-size: .82rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  background: #f7f9fb;
  border-top: 1px solid var(--border-strong);
  padding: 9px 14px;
}
tr.stock-divider td { color: inherit; font-size: inherit; letter-spacing: inherit; }