:root {
  --ink: #000000;
  --panel: #111111;
  --line: #2a2a2a;
  --paper: #ffffff;
  --muted: #888888;
  --gold: #b89c6e;
  --success: #4ade80;
  --danger: #ef4444;
  --card-hover: #1a1a1a;
}

* { box-sizing: border-box; }
html { font-size: 16px; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

.topbar {
  height: 64px;
  padding: 0 clamp(16px, 4vw, 48px);
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  text-decoration: none;
  color: var(--paper);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}

.topbar nav { display: flex; gap: 8px; }
.nav-link {
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: color 0.15s, background 0.15s;
}
.nav-link.active,
.nav-link:hover { color: var(--paper); background: var(--panel); }

main {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(20px, 3vw, 40px) clamp(16px, 4vw, 48px);
}

.eyebrow {
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 8px;
}

/* Home */
.lots-header {
  margin-bottom: 24px;
}
.lots-header h1 {
  font-size: clamp(22px, 4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  line-height: 1.2;
}
.lots-header p {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 16px;
  max-width: 560px;
  line-height: 1.5;
}

.close-note {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid var(--line);
  padding: 10px 14px;
  font-size: 12px;
}
.close-note strong { color: var(--gold); }

/* Lot grid - exactly 3 columns on desktop */
.lot-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.lot-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.lot-card:hover {
  border-color: var(--gold);
  background: var(--card-hover);
}
.lot-card:active { transform: scale(0.995); }
.lot-card:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.lot-card img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
}

.lot-card-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.lot-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: var(--gold);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.lot-card h2 {
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  line-height: 1.2;
}

.prices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 12px 0;
  margin-bottom: 12px;
}
.prices > div { display: flex; flex-direction: column; gap: 2px; }
.prices small {
  color: var(--muted);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.prices b { font-size: 15px; font-weight: 500; }
.prices b.offer { color: var(--gold); }

.offer-count {
  color: var(--muted);
  font-size: 12px;
  margin: 0 0 12px;
}

.card-cta {
  display: block;
  width: 100%;
  padding: 12px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--paper);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.card-cta:hover { border-color: var(--gold); background: var(--card-hover); }
.card-cta:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  border-color: var(--line);
}

/* Detail view */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  margin-bottom: 12px;
  transition: color 0.15s;
}
.back-link:hover { color: var(--paper); }

/* Mobile-first detail layout */
.detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.detail-media {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  color: var(--muted);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  padding: 8px 0;
  transition: color 0.15s;
}
.back-link:hover { color: var(--paper); }

.main-photo-wrap {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a1a;
}
#main-photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transform-origin: center center;
  transition: transform 0.1s ease-out;
  will-change: transform;
}
.zoom-hint {
  position: absolute;
  bottom: 12px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.6);
  color: var(--muted);
  font-size: 10px;
  padding: 4px 10px;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.8;
  transition: opacity 0.5s ease;
  z-index: 5;
}
@media (max-width: 640px) {
  .zoom-hint {
    bottom: 8px;
    font-size: 9px;
    padding: 3px 8px;
  }
}
.thumbs {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.thumb {
  flex: 0 0 80px;
  height: 60px;
  border: 2px solid transparent;
  border-radius: 6px;
  overflow: hidden;
  background: #1a1a1a;
  cursor: pointer;
  padding: 0;
  transition: border-color 0.15s;
}
.thumb.active,
.thumb:hover { border-color: var(--gold); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Share compact - mobile */
.share-compact {
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}
.share-compact .share-title {
  font-size: 10px;
  margin-bottom: 8px;
}
.share-compact .share-buttons { gap: 6px; }
.share-compact .share-btn {
  padding: 8px 10px;
  font-size: 11px;
}
.share-compact .share-btn span { display: none; }

.detail-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-info .eyebrow { margin-bottom: 4px; }
.detail-info h1 {
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
}
.description {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

/* Bid card - compact on mobile */
.bid-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 16px;
}

.winner-banner {
  background: rgba(74, 222, 128, 0.1);
  border: 1px solid var(--success);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 13px;
  line-height: 1.4;
}
.winner-banner strong { color: var(--success); }
.winner-banner.closed {
  background: rgba(239, 68, 68, 0.1);
  border-color: var(--danger);
}
.winner-banner.closed strong { color: var(--danger); }
.winner-banner.sold {
  background: rgba(74, 222, 128, 0.15);
  border-color: var(--success);
}
.winner-banner.sold strong { color: var(--success); }

.bid-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.bid-header span { display: flex; flex-direction: column; gap: 2px; }
.bid-header small { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; }
.bid-header b { font-size: clamp(22px, 6vw, 28px); font-weight: 600; color: var(--gold); }

.bid-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted);
}
.bid-meta .separator {
  color: var(--line);
}
.bid-meta #countdown {
  color: var(--gold);
  font-weight: 500;
}
.bid-meta #countdown.closed {
  color: var(--danger);
}

.bid-card label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.quick-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}
.quick {
  padding: 10px 8px;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--paper);
  font-size: 11px;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.quick:hover { border-color: var(--gold); background: var(--card-hover); }

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-bottom: 8px;
}
.form-grid label { display: flex; flex-direction: column; gap: 4px; }
.form-grid input {
  width: 100%;
  height: 50px;
  padding: 0 14px;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--paper);
  font-size: 16px;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s;
}
.form-grid input::placeholder { color: var(--muted); }
.form-grid input:focus { border-color: var(--gold); }

#amount {
  text-align: right;
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  padding-right: 16px;
}
#amount::placeholder { text-align: right; opacity: 0.5; }

@media (min-width: 700px) {
  #amount { font-size: 20px; }
}

.warning-text {
  color: var(--muted);
  font-size: 11px;
  margin: -2px 0 8px;
  line-height: 1.4;
}

.field-error {
  display: block;
  font-size: 11px;
  color: var(--muted);
  margin-top: 2px;
  margin-bottom: 4px;
  min-height: 14px;
  transition: color 0.15s, opacity 0.15s;
  opacity: 0;
}
.field-error:not(:empty) { opacity: 1; }

.form-grid input.has-error,
.form-grid textarea.has-error,
.form-grid select.has-error {
  border-color: var(--gold);
  background: rgba(184, 156, 110, 0.04);
}

.form-success {
  font-size: 12px;
  color: var(--gold);
  margin: 2px 0 8px;
  min-height: 16px;
  opacity: 0;
  transition: opacity 0.2s;
}
.form-success:not(:empty) { opacity: 1; }

.bid-submit {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  background: var(--gold);
  border: 0;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.bid-submit:hover:not(:disabled) { background: #d4b58d; }
.bid-submit:active:not(:disabled) { transform: scale(0.99); }
.bid-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--gold);
}

/* History */
.history {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}
.history h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 10px;
}
.history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.history-row:last-child { border-bottom: 0; }
.history-row.current { color: var(--gold); }
.history-row .bidder { font-weight: 500; }
.history-row .bid-amount { font-weight: 600; }

/* Share section */
.share-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.share-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin: 0 0 12px;
}
.share-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--paper);
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 6px;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.share-btn:hover {
  border-color: var(--gold);
  background: var(--card-hover);
}
.share-btn svg {
  flex-shrink: 0;
}
.share-btn span {
  display: none;
}
@media (min-width: 480px) {
  .share-btn span {
    display: inline;
  }
}

/* Toast */
.toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  padding: 12px 20px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
  z-index: 100;
  animation: slideIn 0.2s ease;
}
@keyframes slideIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* Admin Login Page */
.admin-login-page {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 24px;
}
.admin-login-page .eyebrow {
  margin-bottom: 8px;
}
.admin-login-page h1 {
  font-size: clamp(22px, 4vw, 28px);
  font-weight: 500;
  margin: 0 0 8px;
}
.admin-login-page > p {
  color: var(--muted);
  margin: 0 0 32px;
  max-width: 400px;
}
.admin-login-page form {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.admin-login-page label {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
}
.admin-login-page label span:first-child {
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.admin-login-page input {
  width: 100%;
  height: 54px;
  padding: 0 16px;
  background: var(--ink);
  border: 1px solid var(--line);
  color: var(--paper);
  font-size: 16px;
  border-radius: 8px;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.admin-login-page input::placeholder { color: var(--muted); }
.admin-login-page input:focus { border-color: var(--gold); background: var(--panel); }
.admin-login-page .form-error {
  min-height: 18px;
  color: var(--gold);
  font-size: 13px;
  opacity: 0;
  transition: opacity 0.2s;
}
.admin-login-page .form-error:not(:empty) { opacity: 1; }
.admin-login-page .primary.wide {
  height: 50px;
  padding: 0 24px;
  background: var(--gold);
  border: 0;
  color: #000;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  margin-top: 8px;
}
.admin-login-page .primary.wide:hover:not(:disabled) { background: #d4b58d; }
.admin-login-page .primary.wide:active:not(:disabled) { transform: scale(0.99); }
.admin-login-page .primary.wide:disabled { opacity: 0.4; cursor: not-allowed; }

/* Admin */
.admin-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.admin-head h1 {
  font-size: 22px;
  font-weight: 500;
  margin: 4px 0 0;
}
.admin-head p { color: var(--muted); font-size: 14px; margin: 0; }

.ghost {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ghost:hover { border-color: var(--gold); color: var(--paper); background: var(--card-hover); }

.admin-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.admin-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}
.admin-card small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.admin-card h2 { font-size: 15px; font-weight: 500; margin: 0 0 16px; }
.admin-line {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.admin-line:last-of-type { border-bottom: 0; }
.admin-line b { color: var(--gold); font-weight: 600; }

.admin-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: auto;
  padding-top: 16px;
}
.admin-actions .primary { width: 100%; }
.admin-actions .ghost { width: 100%; }

.admin-detail {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 20px;
}
.admin-detail h2 { font-size: 15px; font-weight: 500; margin: 0 0 16px; }
.admin-detail .history { background: transparent; border: 0; padding: 0; }
.admin-detail .history h3 { display: none; }

/* Responsive - Tablet 700px - 1099px */
@media (min-width: 700px) and (max-width: 1099px) {
  .topbar { height: 64px; padding: 0 clamp(16px, 4vw, 48px); }
  .brand { font-size: 18px; }
  .nav-link { font-size: 12px; padding: 8px 12px; }
  main { padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 48px); }

  .lot-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: repeat(2, 1fr); }
  
  .detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    align-items: start;
  }
  
  .detail-media {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .main-photo-wrap { border-radius: 8px; }
  #main-photo { aspect-ratio: 4 / 3; }
  .thumbs { gap: 8px; margin-top: 12px; }
  .thumb { flex: 0 0 calc((100% - 24px) / 4); height: 70px; }
  
  .share-compact { display: none; }
  
  .detail-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .detail-info h1 { font-size: clamp(26px, 4vw, 36px); }
  
  .bid-card { padding: 20px; }
  .bid-header { margin-bottom: 16px; padding-bottom: 16px; }
  .bid-header b { font-size: 28px; }
  
  .form-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
  .form-grid .full { grid-column: 1 / -1; }
  .form-grid input { height: 48px; font-size: 15px; }
  .form-grid label { gap: 4px; }
  .bid-submit { height: 48px; font-size: 12px; }
  
  .history { padding: 16px; }
  
  .share-compact { display: none; }
  .share-section:not(.share-compact) { display: none; }
}

/* Responsive - Desktop >= 1100px */
@media (min-width: 1100px) {
  .topbar { height: 64px; padding: 0 clamp(16px, 4vw, 48px); }
  .brand { font-size: 18px; }
  .nav-link { font-size: 12px; padding: 8px 12px; }
  main { padding: clamp(24px, 4vw, 48px) clamp(16px, 4vw, 48px); }

  .lot-grid { grid-template-columns: repeat(3, 1fr); }
  .admin-grid { grid-template-columns: repeat(3, 1fr); }

  .detail {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
  }
  
  .detail-media {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  .back-link {
    margin-bottom: 8px;
  }
  
  .main-photo-wrap {
    border-radius: 8px;
  }
  
  #main-photo {
    aspect-ratio: 4 / 3;
  }
  
  .thumbs {
    gap: 8px;
    margin-top: 12px;
  }
  .thumb {
    flex: 0 0 calc((100% - 24px) / 4);
    height: 70px;
  }
  
  .share-compact {
    display: block;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--line);
  }
  .share-compact .share-title {
    font-size: 10px;
    margin-bottom: 8px;
  }
  .share-compact .share-buttons { gap: 8px; }
  .share-compact .share-btn {
    padding: 8px 12px;
    font-size: 11px;
  }
  .share-compact .share-btn span { display: inline; }
  
  .detail-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .detail-info .eyebrow { margin-bottom: 4px; }
  .detail-info h1 { font-size: clamp(26px, 3.5vw, 34px); }
  .description { font-size: 14px; line-height: 1.5; }
  
  .bid-card { padding: 20px; }
  .bid-header { margin-bottom: 16px; padding-bottom: 16px; }
  .bid-header b { font-size: clamp(26px, 4vw, 32px); }
  .bid-meta { margin-top: 8px; font-size: 11px; }
  
  .quick-row { gap: 8px; margin-bottom: 12px; }
  .quick { padding: 10px 8px; font-size: 11px; }
  
  .form-grid { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 10px; }
  .form-grid .full { grid-column: 1 / -1; }
  .form-grid input { height: 48px; font-size: 15px; }
  .form-grid label { gap: 4px; }
  .form-grid label > span:first-child { font-size: 10px; }
  
  #amount { font-size: 20px; padding-right: 12px; }
  
  .warning-text { font-size: 10px; margin: -2px 0 8px; }
  .form-success { font-size: 11px; margin: 2px 0 8px; }
  .bid-submit { height: 44px; font-size: 11px; }
  
  .history { padding: 12px; }
  .history h3 { font-size: 10px; margin-bottom: 8px; }
  .history-row { padding: 6px 0; font-size: 12px; }
  
  .share-section:not(.share-compact) { display: none; }
}

/* Mobile <= 640px */
@media (max-width: 640px) {
  .lot-grid { grid-template-columns: 1fr; }
  .admin-grid { grid-template-columns: 1fr; }
  .detail { flex-direction: column; gap: 24px; }
}

/* ─────────────────────────────────────────────────────────────
   Lightbox / Image Viewer (zoom + pan)
   ───────────────────────────────────────────────────────────── */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.98);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.lightbox.hidden { display: none; }

.lightbox-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  z-index: 10;
}
.lightbox-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lightbox-title-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--paper);
}
.lightbox-title-meta {
  font-size: 11px;
  color: var(--muted);
}
.lightbox-close {
  background: none;
  border: 0;
  color: var(--paper);
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  padding: 8px;
  opacity: 0.7;
  transition: opacity 0.15s;
}
.lightbox-close:hover { opacity: 1; }

.lightbox-stage {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
.lightbox-stage:active { cursor: grabbing; }
.lightbox-stage.panning { cursor: grabbing; }

.lightbox-viewport {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 100%;
  min-height: 100%;
  transition: width 0.1s, height 0.1s;
}
.lightbox-image {
  max-width: none;
  max-height: none;
  user-select: none;
  pointer-events: none;
}

.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: 0;
  color: var(--paper);
  font-size: 28px;
  line-height: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.6;
  transition: opacity 0.15s, background 0.15s;
  z-index: 5;
}
.lightbox-nav:hover { opacity: 1; background: rgba(0, 0, 0, 0.8); }
.lightbox-nav:disabled { opacity: 0.2; cursor: not-allowed; }
.lightbox-prev { left: 16px; }
.lightbox-next { right: 16px; }

.lightbox-toolbar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 16px 20px;
  z-index: 10;
  flex-wrap: wrap;
}
.lb-group {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lb-btn {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid var(--line);
  color: var(--paper);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 14px;
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.lb-btn:hover { border-color: var(--gold); background: var(--card-hover); }
.lb-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.lb-btn.lb-fit { background: var(--gold); color: #000; border-color: var(--gold); }
.lb-btn.lb-fit:hover { background: #d4b58d; }
.lb-page-label,
.lb-zoom-label {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  min-width: 48px;
  text-align: center;
}

@media (max-width: 640px) {
  .lightbox-header { padding: 12px 16px; }
  .lightbox-toolbar { padding: 12px 16px; gap: 12px; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 24px; }
  .lightbox-prev { left: 12px; }
  .lightbox-next { right: 12px; }
  .lb-btn { padding: 6px 10px; font-size: 12px; }
}
/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN — v2: resumen tabular + detalle por lote
   Todo el CSS del panel vive bajo .admin-shell para NO tocar la vista pública.
   Paleta: negro/panel, líneas grises, acentos dorado apagado. Sin colores chillones.
   ═══════════════════════════════════════════════════════════════════════════ */

.admin-unit { display: none; }

/* ── Botones base del panel ─────────────────────────────────────────────── */
.admin-shell button.primary,
.admin-shell a.primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: var(--gold);
  color: #12100c;
  border: 1px solid var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s, opacity 0.15s;
}
.admin-shell button.primary:hover:not(:disabled),
.admin-shell a.primary:hover:not(:disabled) { background: #c9ad7d; border-color: #c9ad7d; }
.admin-shell button.primary:disabled,
.admin-shell a.primary:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-shell .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.admin-shell .ghost:hover:not(:disabled) { border-color: var(--gold); color: var(--paper); background: var(--card-hover); }
.admin-shell .ghost:disabled { opacity: 0.4; cursor: not-allowed; }

/* ── Cabecera compacta ──────────────────────────────────────────────────── */
.admin-shell .admin-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.admin-shell .admin-head-main {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.admin-shell .admin-head h1 { font-size: 20px; font-weight: 500; margin: 0; }
.admin-shell .admin-head-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.admin-shell .admin-head-tools .ghost { padding: 7px 12px; }

/* ── Cierre general (compacto, una sola fila) ───────────────────────────── */
.admin-shell .admin-cierre {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 16px;
}
.admin-shell .admin-general-title {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
/* Remate pausado: la bandera acompaña al botón de reanudación */
.admin-shell .admin-paused-flag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  border: 1px solid rgba(232, 182, 97, 0.55);
  border-radius: 999px;
  background: rgba(232, 182, 97, 0.12);
  color: #e8b661;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.admin-shell .cierre-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
.admin-shell .cierre-input {
  background: #000;
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--paper);
  font-size: 12px;
  font-family: inherit;
  padding: 8px 10px;
  min-height: 34px;
  color-scheme: dark;
}
.admin-shell .cierre-input:focus { border-color: var(--gold); outline: none; }
.admin-shell .cierre-error { color: var(--danger); font-size: 12px; }

/* ── Tabla resumen ──────────────────────────────────────────────────────── */
.admin-shell .admin-table-wrap {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--panel);
}
.admin-shell .admin-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}
.admin-shell .admin-table th {
  text-align: left;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
  background: #0b0b0b;
  white-space: nowrap;
}
.admin-shell .admin-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
  vertical-align: middle;
}
.admin-shell .admin-table tbody tr:last-child td { border-bottom: 0; }
.admin-shell .admin-table tbody tr:hover { background: var(--card-hover); }
.admin-shell .admin-table .ta-r { text-align: right; }
.admin-shell .admin-table .ta-num { text-align: right; }
.admin-shell .admin-lot-id {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-shell .admin-lot-name { display: block; color: var(--paper); font-size: 14px; }
.admin-shell .admin-money {
  color: var(--gold);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-shell .admin-count { font-variant-numeric: tabular-nums; color: var(--muted); white-space: nowrap; }
.admin-shell .admin-open { padding: 7px 18px; }
.admin-shell .admin-empty {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 40px 20px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
}

/* ── Badges discretos ───────────────────────────────────────────────────── */
.admin-shell .admin-badge {
  display: inline-block;
  padding: 4px 9px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: #161616;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.admin-shell .admin-badge.abierto {
  color: var(--gold);
  border-color: rgba(184, 156, 110, 0.45);
  background: rgba(184, 156, 110, 0.1);
}
.admin-shell .admin-badge.finalizado { color: #cfcfcf; border-color: #3a3a3a; }
.admin-shell .admin-badge.vendido {
  color: #7fd3a0;
  border-color: rgba(74, 222, 128, 0.32);
  background: rgba(74, 222, 128, 0.08);
}
.admin-shell .admin-badge.sinventa {
  color: #d98d8d;
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.07);
}
.admin-shell .admin-badge.retirado { color: #8a8a8a; border-color: #333333; background: #131313; }
.admin-shell .admin-chip {
  display: inline-block;
  margin-left: 6px;
  padding: 3px 7px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.1em;
  white-space: nowrap;
  border: 1px dashed #3a3a3a;
  color: #8f8f8f;
}
.admin-shell .admin-chip.archived { border-style: solid; border-color: #2e2e2e; color: #767676; }
.admin-shell .admin-chip.published { border-color: rgba(212, 175, 55, 0.35); color: var(--gold); }

/* ── Detalle de un lote ─────────────────────────────────────────────────── */
.admin-shell .admin-back { margin-bottom: 14px; padding: 7px 14px; }
.admin-shell .admin-detail-view { max-width: 720px; }
.admin-shell .admin-detail-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.admin-shell .admin-detail-head h2 { font-size: 20px; font-weight: 500; margin: 4px 0 0; }
.admin-shell .admin-badges { display: flex; align-items: center; gap: 4px; padding-top: 6px; }
.admin-shell .admin-badges .admin-chip { margin-left: 0; }

.admin-shell .admin-block {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  margin-bottom: 14px;
}
.admin-shell .admin-block.primary { border-left: 2px solid var(--gold); }
.admin-shell .admin-block.finalizado { border-left-color: #4a4a4a; }
.admin-shell .admin-block.vendido { border-left-color: rgba(74, 222, 128, 0.45); }
.admin-shell .admin-block.sinventa { border-left-color: rgba(239, 68, 68, 0.4); }
.admin-shell .admin-block.retirado { border-left-color: #3a3a3a; }
.admin-shell .admin-block.abierto { border-left-color: var(--gold); }
.admin-shell .admin-block-title {
  margin: 0 0 14px;
  color: var(--paper);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-shell .admin-note { color: var(--muted); font-size: 13px; margin: 0 0 12px; }

.admin-shell .admin-kpis { display: flex; gap: 32px; margin-bottom: 16px; }
.admin-shell .kpi small {
  display: block;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.admin-shell .kpi b {
  color: var(--gold);
  font-size: 22px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.admin-shell .postor-info { display: flex; flex-direction: column; gap: 0; }
.admin-shell .postor-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.admin-shell .postor-line:last-child { border-bottom: 0; }
.admin-shell .postor-label { color: var(--muted); font-size: 12px; }
.admin-shell .postor-value { color: var(--paper); font-weight: 500; text-align: right; }
.admin-shell .postor-value.whatsapp-link { color: var(--gold); text-decoration: none; }
.admin-shell .postor-value.whatsapp-link:hover { text-decoration: underline; }
.admin-shell .postor-state {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 7px;
}
.admin-shell .postor-state.concreto {
  color: #7fd3a0;
  border-color: rgba(74, 222, 128, 0.32);
  background: rgba(74, 222, 128, 0.08);
}
.admin-shell .postor-state.no_concreto {
  color: #d98d8d;
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.07);
}
.admin-shell .postor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.admin-shell .postor-actions .primary,
.admin-shell .postor-actions .ghost { flex: 1 1 160px; }

/* ── Acciones secundarias ────────────────────────────────────────────────── */
.admin-shell .admin-actions { display: flex; flex-direction: column; gap: 8px; }
.admin-shell .admin-actions.inline { flex-direction: row; flex-wrap: wrap; }
.admin-shell .admin-actions.inline .ghost { flex: 0 1 auto; }
.admin-shell .admin-actions .primary,
.admin-shell .admin-actions .ghost { width: 100%; }
.admin-shell .reopen-confirm {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 14px;
  margin-top: 4px;
  width: 100%;
}
.admin-shell .reopen-confirm p { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.admin-shell .reopen-confirm-actions { display: flex; gap: 8px; }
.admin-shell .reopen-confirm-actions .primary,
.admin-shell .reopen-confirm-actions .ghost { width: auto; flex: 1; }

/* ── Ranking e historial bajo demanda ───────────────────────────────────── */
.admin-shell .admin-subblock {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.admin-shell .admin-subblock-title {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.admin-shell .ranking-compact { display: flex; flex-direction: column; }
.admin-shell .ranking-row {
  display: grid;
  grid-template-columns: 24px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.admin-shell .ranking-row:last-child { border-bottom: 0; }
.admin-shell .ranking-row.active { color: var(--paper); }
.admin-shell .ranking-pos { color: var(--muted); font-size: 11px; }
.admin-shell .ranking-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-shell .ranking-amount {
  color: var(--gold);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.admin-shell .ranking-state {
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 2px 6px;
  white-space: nowrap;
}
.admin-shell .ranking-state.concreto {
  color: #7fd3a0;
  border-color: rgba(74, 222, 128, 0.32);
  background: rgba(74, 222, 128, 0.08);
}
.admin-shell .ranking-state.no_concreto {
  color: #d98d8d;
  border-color: rgba(239, 68, 68, 0.28);
  background: rgba(239, 68, 68, 0.07);
}
.admin-shell .admin-subblock .history {
  background: transparent;
  border: 0;
  padding: 0;
}
.admin-shell .admin-subblock .history h3 { display: none; }
.admin-shell .admin-subblock .history-row { display: flex; justify-content: space-between; gap: 12px; }

/* ── Editor de lote (conserva su layout actual) ────────────────────────── */
.admin-shell .admin-cierre #edit-thumbs img { border-radius: 8px; }

/* ── Móvil: la tabla se vuelve tarjeta compacta, sin scroll horizontal ──── */
@media (max-width: 700px) {
  .admin-shell .admin-head { align-items: flex-start; }
  .admin-shell .admin-head-main { width: 100%; }
  .admin-shell .admin-head h1 { font-size: 18px; }

  .admin-shell .admin-table-wrap { background: transparent; border: 0; overflow: visible; }
  .admin-shell .admin-table thead { display: none; }
  .admin-shell .admin-table,
  .admin-shell .admin-table tbody,
  .admin-shell .admin-table tr,
  .admin-shell .admin-table td { display: block; width: 100%; }
  .admin-shell .admin-table tr {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 10px;
  }
  .admin-shell .admin-table td {
    border-bottom: 0;
    padding: 3px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    text-align: left;
  }
  .admin-shell .admin-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  /* La tarjeta móvil muestra: nombre · estado · oferta · N ofertas · Abrir */
  .admin-shell .admin-table td[data-label="Lote"] { display: block; margin-bottom: 8px; }
  .admin-shell .admin-table td[data-label="Lote"]::before { content: none; }
  .admin-shell .admin-table td[data-label="Cierre"] { display: none; }
  .admin-shell .admin-table td[data-label="Oferta"] { justify-content: flex-start; font-size: 19px; }
  .admin-shell .admin-table td[data-label="Oferta"]::before { content: none; }
  .admin-shell .admin-table td[data-label="Ofertas"] { justify-content: flex-start; }
  .admin-shell .admin-table td[data-label="Ofertas"]::before { content: none; }
  .admin-shell .admin-unit { display: inline; color: var(--muted); font-size: 13px; font-weight: 400; }
  .admin-shell .admin-table td[data-label="Acción"] { margin-top: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
  .admin-shell .admin-table td[data-label="Acción"]::before { content: none; }
  .admin-shell .admin-table td[data-label="Acción"] .admin-open { width: 100%; }

  .admin-shell .admin-detail-head { flex-direction: column; }
  .admin-shell .admin-kpis { gap: 24px; }
  .admin-shell .kpi b { font-size: 18px; }
  .admin-shell .admin-actions.inline .ghost { flex: 1 1 auto; }
  .admin-shell .ranking-row { grid-template-columns: 20px 1fr; grid-auto-rows: auto; row-gap: 4px; }
  .admin-shell .ranking-amount { grid-column: 2; }
  .admin-shell .ranking-state { grid-column: 2; justify-self: start; }
}

/* ═════════════════════════════════════════════════════════════════════════
   DETALLE COMPACTO DEL LOTE (Admin)
   Prioridad = orden del ranking. Estado de contacto = dato separado.
   Objetivo: operar un lote sin scroll en desktop, con filas chicas en móvil.
   ═════════════════════════════════════════════════════════════════════════ */
.admin-shell .admin-detail-view { max-width: 1180px; }

/* ── Botones mini (inline, sin cards gigantes) ─────────────────────────── */
.admin-shell .mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  padding: 0 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #171717;
  color: var(--paper);
  font-family: inherit;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.admin-shell .mini:hover:not(:disabled) { border-color: var(--gold); background: #202020; }
.admin-shell .mini:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-shell .mini.solid { background: var(--gold); border-color: var(--gold); color: #000; }
.admin-shell .mini.solid:hover:not(:disabled) { background: #d3b98a; }
.admin-shell .mini.ghost { background: transparent; color: var(--muted); }
.admin-shell .mini.ghost:hover:not(:disabled) { color: var(--paper); }
.admin-shell .mini.wa { border-color: rgba(74, 222, 128, 0.35); color: #7fd3a0; }
.admin-shell .mini.ok:hover:not(:disabled) { border-color: rgba(74, 222, 128, 0.6); color: #7fd3a0; }
.admin-shell .mini.no:hover:not(:disabled) { border-color: rgba(239, 68, 68, 0.6); color: #e79a9a; }
.admin-shell .mini.danger { color: #e79a9a; border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.06); }
.admin-shell .mini.danger:hover:not(:disabled) { border-color: rgba(239, 68, 68, 0.6); background: rgba(239, 68, 68, 0.12); }
.admin-shell .mini.danger.solid { background: #dc2626; border-color: #dc2626; color: #fff; }
.admin-shell .mini.danger.solid:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; }

/* ── Chips de estado de CONTACTO (no de prioridad) ─────────────────────── */
.admin-shell .cs {
  display: inline-block;
  padding: 1px 5px;
  border: 1px solid var(--line);
  border-radius: 3px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--muted);
  white-space: nowrap;
}
.admin-shell .cs.contactado { color: #d6c48c; border-color: rgba(184, 156, 110, 0.38); }
.admin-shell .cs.esperando { color: #8fb8d8; border-color: rgba(143, 184, 216, 0.35); background: rgba(143, 184, 216, 0.08); }
.admin-shell .cs.no_concreto { color: #d98d8d; border-color: rgba(239, 68, 68, 0.3); background: rgba(239, 68, 68, 0.07); }
.admin-shell .cs.concreto { color: #7fd3a0; border-color: rgba(74, 222, 128, 0.32); background: rgba(74, 222, 128, 0.08); }

/* ── Cabecera: una línea ───────────────────────────────────────────────── */
.admin-shell .dv-top {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  padding: 6px 10px;
  margin-bottom: 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.admin-shell .dv-id { display: flex; align-items: baseline; gap: 7px; min-width: 0; }
.admin-shell .dv-lot {
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-shell .dv-name {
  margin: 0;
  font-size: 16px;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.admin-shell .dv-top .admin-chip { margin-left: 0; }
.admin-shell .dv-kpis { display: flex; gap: 14px; margin-left: auto; }
.admin-shell .dv-kpi { text-align: right; line-height: 1.15; }
.admin-shell .dv-kpi small {
  display: block;
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.admin-shell .dv-kpi b {
  color: var(--gold);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ── Banda de estado: una línea ────────────────────────────────────────── */
.admin-shell .dv-strip {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 5px 10px;
  margin-bottom: 6px;
  background: #0b0b0b;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: 6px;
  font-size: 12px;
}
.admin-shell .dv-strip.sold { border-left-color: rgba(74, 222, 128, 0.55); }
.admin-shell .dv-strip.sinventa { border-left-color: rgba(239, 68, 68, 0.45); }
.admin-shell .dv-strip.retirado { border-left-color: #3a3a3a; }
.admin-shell .dv-strip.archived { border-left-color: #6b6b6b; background: #0d0d0d; }
.admin-shell .dv-strip.archived b { color: #b4b4b4; letter-spacing: 0.1em; font-size: 11px; }
.admin-shell .dv-strip.draft { border-left-color: rgba(234, 179, 8, 0.45); }
.admin-shell .dv-strip.draft b { color: var(--gold); letter-spacing: 0.1em; font-size: 11px; }
.admin-shell .dv-strip b { font-weight: 600; }
.admin-shell .dv-strip .gold { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; }
.admin-shell .dv-strip .muted { color: var(--muted); font-size: 10px; }
.admin-shell .dv-strip .prio,
.admin-shell .dv-table .c-estado .prio {
  color: var(--gold);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border: 1px solid rgba(184, 156, 110, 0.4);
  border-radius: 3px;
  padding: 1px 5px;
  white-space: nowrap;
}
.admin-shell .dv-table .c-estado .prio {
  display: block;
  width: max-content;
  margin-top: 2px;
  border: 0;
  padding: 0;
}
.admin-shell .wlink { color: var(--gold); text-decoration: none; font-variant-numeric: tabular-nums; }
.admin-shell .wlink:hover { text-decoration: underline; }

/* ── Grid de dos columnas ──────────────────────────────────────────────── */
.admin-shell .dv-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  gap: 6px;
  align-items: start;
}
.admin-shell .dv-side { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.admin-shell .dv-card {
  margin: 0;
  padding: 7px 9px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
}
.admin-shell .dv-card-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 5px;
  color: var(--muted);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.admin-shell .dv-count {
  color: var(--paper);
  background: #1c1c1c;
  border: 1px solid var(--line);
  border-radius: 3px;
  padding: 0 5px;
  font-size: 9px;
}
.admin-shell .dv-empty { margin: 1px 0; color: var(--muted); font-size: 11px; }

/* ── Tabla de postores ─────────────────────────────────────────────────── */
.admin-shell .dv-table { width: 100%; border-collapse: collapse; }
.admin-shell .dv-table th {
  text-align: left;
  padding: 3px 6px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 8px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.admin-shell .dv-table td {
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 12px;
  vertical-align: middle;
}
.admin-shell .dv-table tbody tr:last-child td { border-bottom: 0; }
.admin-shell .dv-table tbody tr.is-active { background: rgba(184, 156, 110, 0.07); }
.admin-shell .dv-table tbody tr.is-winner { background: rgba(74, 222, 128, 0.08); }
.admin-shell .dv-table .c-pos { width: 20px; text-align: center; color: var(--muted); font-size: 11px; }
.admin-shell .dv-table .c-pos .star { color: var(--gold); font-size: 12px; }
.admin-shell .dv-table .c-name { min-width: 0; }
.admin-shell .dv-table .c-name b { display: block; color: var(--paper); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 150px; }
.admin-shell .dv-table .c-name small { display: block; color: var(--muted); font-size: 10px; font-variant-numeric: tabular-nums; }
.admin-shell .dv-table .c-amt { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-shell .dv-table .c-estado { white-space: nowrap; }
.admin-shell .dv-table .c-acc { text-align: right; white-space: nowrap; }
.admin-shell .dv-table .c-acc .mini { margin-left: 3px; }

/* ── Postores: la lista scrollea por dentro y el encabezado queda fijo ────
   Con 30-50 postores la tabla no puede hacer crecer la página entera, pero
   tampoco debe aparecer un scroll horizontal: la tabla se adapta al ancho
   disponible con `table-layout: fixed` y las acciones WRAPPEAN antes de
   ensanchar. Solo queda scroll vertical cuando hay muchos postores. */
.admin-shell .dv-bidders-scroll {
  max-height: 470px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}
.admin-shell .dv-bidders-scroll::-webkit-scrollbar { width: 8px; }
.admin-shell .dv-bidders-scroll::-webkit-scrollbar-thumb { background: #2f2f2f; border-radius: 8px; }
.admin-shell .dv-bidders { min-width: 0; }
.admin-shell .dv-bidders .dv-table {
  width: 100%;
  table-layout: fixed;   /* las columnas se reparten el ancho disponible */
  border-collapse: collapse;
}
/* Anchos: # fija, POSTOR flexible (absorbe el resto), OFERTA y CONTACTO
   compactas, ACCIONES con ancho suficiente para dos líneas de botones. */
.admin-shell .dv-bidders .dv-table th.c-pos { width: 26px; }
.admin-shell .dv-bidders .dv-table th.c-amt { width: 84px; text-align: right; }
.admin-shell .dv-bidders .dv-table th.c-estado { width: 74px; }
.admin-shell .dv-bidders .dv-table th.c-acc { width: 236px; }
.admin-shell .dv-bidders .dv-table th.c-name { width: auto; }

/* El encabezado sticky ocupa exactamente el mismo ancho que las filas porque
   ambos están en la misma tabla de ancho 100% con layout fijo. */
.admin-shell .dv-bidders-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--panel);
  box-shadow: inset 0 -1px 0 var(--line);
}

.admin-shell .dv-bidders .dv-table th,
.admin-shell .dv-bidders .dv-table td { padding: 4px; }
/* POSTOR: nombre y WhatsApp en dos líneas, sin ancho fijo enorme */
.admin-shell .dv-bidders .dv-table .c-name b {
  display: block;
  max-width: none;
  white-space: normal;
  overflow-wrap: anywhere;
  line-height: 1.25;
}
.admin-shell .dv-bidders .dv-table .c-name small {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* OFERTA: nunca se parte */
.admin-shell .dv-bidders .dv-table .c-amt { white-space: nowrap; text-align: right; }
/* CONTACTO: badge compacto, no empuja la tabla */
.admin-shell .dv-bidders .dv-table .c-estado { white-space: nowrap; overflow: hidden; }
.admin-shell .dv-bidders .dv-table .c-estado .cs {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 8px;
  padding: 1px 4px;
}
/* ACCIONES: flex-wrap. Los botones ocupan una o dos líneas y jamás estiran la
   tabla; padding y gaps reducidos para que quepan mejor. */
.admin-shell .dv-bidders .dv-table .c-acc { text-align: right; white-space: normal; overflow: hidden; }
.admin-shell .dv-bidders .acc-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
}
.admin-shell .dv-bidders .acc-row .mini,
.admin-shell .dv-bidders .acc-row .mini-lock {
  margin-left: 0;
  min-width: 0;
  height: 19px;
  padding: 0 4px;
  font-size: 9px;
  white-space: nowrap;
}
.admin-shell .dv-bidders .dv-table .c-acc .dv-confirm-box { margin-top: 0; }

/* Acción de resolución apagada durante el remate (el backend la rechaza igual) */
.admin-shell .mini-lock { display: inline-flex; }
.admin-shell .mini.is-off { opacity: 0.32; }
.admin-shell .mini.warn { color: #e8b661; border-color: rgba(232, 182, 97, 0.4); }
.admin-shell .mini.warn:hover:not(:disabled) { border-color: #e8b661; background: rgba(232, 182, 97, 0.12); }

/* Postor bloqueado: sigue visible y con su historial, pero marcado */
.admin-shell .dv-table tbody tr.is-blocked { background: rgba(239, 68, 68, 0.06); }
.admin-shell .dv-table tbody tr.is-blocked .c-name b { text-decoration: line-through; opacity: 0.7; }
.admin-shell .dv-table .c-estado .blocked-flag {
  display: block;
  width: max-content;
  margin-top: 2px;
  color: #e79a9a;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.1em;
}


/* ── Cierre compacto ───────────────────────────────────────────────────── */
.admin-shell .dv-card .admin-cierre.dv-cierre { padding: 0; margin: 0; border: 0; background: transparent; border-radius: 0; }
.admin-shell .dv-cierre-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.admin-shell .dv-cierre-head b { font-size: 12px; font-weight: 600; white-space: nowrap; }
.admin-shell .dv-cierre-head span { color: var(--muted); font-size: 10px; }
.admin-shell .dv-cierre .cierre-actions { gap: 4px; margin-bottom: 4px; }
.admin-shell .dv-cierre .cierre-actions:last-of-type { margin-bottom: 0; }
.admin-shell .dv-cierre .cierre-input { min-height: 24px; padding: 3px 6px; font-size: 11px; }

/* ── Acciones ──────────────────────────────────────────────────────────── */
.admin-shell .dv-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.admin-shell .dv-confirm {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--muted);
  font-size: 10px;
}
.admin-shell .dv-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--line);
}
.admin-shell .dv-sep { width: 1px; height: 15px; margin: 0 3px; background: var(--line); }

/* Confirmaciones inline: nada de window.confirm, todo en la misma vista. */
.admin-shell .dv-confirm-box {
  flex: 1 1 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
  padding: 8px 10px;
  background: #0b0b0b;
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  border-radius: 6px;
  font-size: 11px;
  color: var(--muted);
}
.admin-shell .dv-confirm-box b { color: var(--paper); font-size: 12px; font-weight: 600; }
.admin-shell .dv-confirm-box.danger { border-left-color: var(--danger); }
.admin-shell .dv-confirm-box.danger b { color: #e79a9a; }
.admin-shell .dv-confirm-btns { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.admin-shell .dv-note { flex: 1 1 100%; color: var(--muted); font-size: 10px; line-height: 1.4; }

/* ── Historial bajo demanda ────────────────────────────────────────────── */
.admin-shell .dv-hist { margin-top: 6px; }
.admin-shell .dv-hist-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 0 12px; }
.admin-shell .dv-hist-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 2px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 11px;
}
.admin-shell .dv-hist-row span { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-shell .dv-hist-row b { color: var(--gold); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Tablet / móvil: una columna, filas chicas, sin scroll horizontal ───── */
@media (max-width: 900px) {
  .admin-shell .dv-grid { grid-template-columns: 1fr; }
  .admin-shell .dv-kpis { margin-left: 0; width: 100%; padding-top: 4px; border-top: 1px solid var(--line); }
  .admin-shell .dv-kpi { text-align: left; }
  .admin-shell .dv-table .c-name b { max-width: none; }
}
@media (max-width: 620px) {
  .admin-shell .dv-top { gap: 6px; padding: 6px 8px; }
  .admin-shell .dv-name { font-size: 15px; }
  .admin-shell .dv-strip { gap: 7px; padding: 5px 8px; }
  .admin-shell .dv-strip .muted { width: 100%; }
  .admin-shell .dv-table thead { display: none; }
  .admin-shell .dv-table tbody tr {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto;
    gap: 2px 6px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .admin-shell .dv-table td { display: block; padding: 0; border: 0; }
  .admin-shell .dv-table .c-pos { grid-column: 1; grid-row: 1; }
  .admin-shell .dv-table .c-name { grid-column: 2; grid-row: 1; }
  .admin-shell .dv-table .c-amt { grid-column: 3; grid-row: 1; text-align: right; }
  .admin-shell .dv-table .c-estado { grid-column: 2 / -1; grid-row: 2; display: flex; align-items: center; gap: 6px; }
  .admin-shell .dv-table .c-estado .prio { margin-top: 0; }
  .admin-shell .dv-table .c-acc { grid-column: 2 / -1; grid-row: 3; text-align: left; white-space: normal; }
  .admin-shell .dv-table .c-acc .mini { margin: 2px 3px 0 0; }
.admin-shell .dv-hist-rows { grid-template-columns: 1fr; }
  .admin-shell .dv-sep { display: none; }
  .admin-shell .dv-foot .mini { flex: 1 1 auto; }
/* Filas compactas: los botones de acción wrapean y nunca hay scroll horizontal */
  .admin-shell .dv-bidders-scroll { max-height: 62vh; }
  /* Cada fila pasa a bloque compacto: la tabla horizontal queda descartada */
  .admin-shell .dv-bidders .dv-table { table-layout: auto; display: block; }
  .admin-shell .dv-bidders .dv-table tbody,
  .admin-shell .dv-bidders .dv-table tbody tr { display: block; width: 100%; }
  .admin-shell .dv-bidders .dv-table th.c-pos,
  .admin-shell .dv-bidders .dv-table th.c-amt,
  .admin-shell .dv-bidders .dv-table th.c-estado,
  .admin-shell .dv-bidders .dv-table th.c-acc { width: auto; }
  .admin-shell .dv-bidders .acc-row { justify-content: flex-start; }
  .admin-shell .dv-bidders .acc-row .mini,
  .admin-shell .dv-bidders .acc-row .mini-lock { margin: 2px 3px 0 0; }
  .admin-shell .dv-bidders .dv-table .c-acc { overflow: visible; }
}

/* ── Volver al listado: arriba del detalle, siempre visible ─────────────── */
.admin-shell .back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 28px;
  margin-bottom: 6px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
  color: var(--paper);
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.admin-shell .back-btn:hover { border-color: var(--gold); color: var(--gold); background: var(--card-hover); }

/* ═════════════════════════════════════════════════════════════════════════
   WEB PÚBLICA — una sola página editorial
   Dirección visual: negro, wordmark gigante, sans, títulos enormes, mucho
   aire, líneas finas, precio en dorado apagado. Sin cards de e-commerce.
   Todo lo del Admin vive bajo .admin-shell y no se ve afectado.
   ═════════════════════════════════════════════════════════════════════════ */
body.is-public {
  --pub-fg: #f2f2ef;
  --pub-muted: #8b8b87;
  --pub-line: #242424;
  --pub-accent: #b59a69;
  background: #000;
  color: var(--pub-fg);
  font-family: Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}
body.is-public #app { max-width: none; margin: 0; padding: 0; }

/* ── Remate pausado (aviso público) ───────────────────────────────────────
   Único elemento nuevo del diseño editorial: una banda fina, del mismo
   lenguaje tipográfico (negro, líneas finas, dorado apagado). Los lotes, fotos
   y precios no se tocan. */
body.is-public .pause-banner {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 22px 0 6px;
  padding: 14px 16px;
  border: 1px solid var(--pub-line);
  border-left: 2px solid var(--pub-accent);
  background: rgba(181, 154, 105, 0.06);
}
body.is-public .pause-banner b {
  color: var(--pub-accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
}
body.is-public .pause-banner span {
  color: var(--pub-muted);
  font-size: 13px;
  line-height: 1.5;
}
/* El <main> público vive dentro de .page: NO puede volver a usar el
   max-width:1100px del diseño viejo (era lo que angostaba todo y dejaba
   vacíos negros laterales). La retícula va a sangre del .page. */
body.is-public main,
body.is-public main.products {
  max-width: none;
  width: auto;
  margin: 0;
  padding: 0;
}
body.scroll-locked { position: fixed; width: 100%; overflow: hidden; }

/* ── Page / wordmark ────────────────────────────────────────────────────── */
body.is-public .page { width: min(1500px, 94vw); margin: 0 auto; }

body.is-public .site-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 30px;
  padding: 22px 0 16px;
}
body.is-public .wordmark {
  display: inline-block;
  color: #fff;
  text-decoration: none;
  font-family: "Helvetica Neue", Helvetica, Arial, "Inter", sans-serif;
  font-weight: 200;
  font-size: clamp(52px, 6.4vw, 108px);
  line-height: 0.9;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}
body.is-public .nav {
  display: flex;
  gap: 27px;
  align-items: center;
  padding-top: 7px;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body.is-public .nav a { color: #fff; text-decoration: none; }
body.is-public .nav a:hover { color: var(--pub-accent); }
body.is-public .line { border-top: 1px solid var(--pub-line); }

body.is-public .intro {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 45px;
  padding: 14px 0 48px;
}
body.is-public .kicker {
  color: var(--pub-muted);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.is-public .intro p {
  max-width: 800px;
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: #bdbdb8;
}

/* ── Bloque de lote ─────────────────────────────────────────────────────── */
body.is-public .product {
  border-top: 1px solid var(--pub-line);
  padding: 27px 0 105px;
}
body.is-public .product-head {
  display: grid;
  grid-template-columns: 0.1fr 1fr 0.42fr;
  gap: 28px;
  align-items: start;
  margin-bottom: 27px;
}
body.is-public .product-head .lot {
  color: #777;
  font-size: 12px;
  letter-spacing: 0.14em;
  padding-top: 8px;
}
body.is-public .product-head .type {
  color: #777;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 12px;
}
body.is-public .product-head .title h2 {
  margin: 0;
  font-size: clamp(58px, 7vw, 112px);
  font-weight: 500;
  line-height: 0.82;
  letter-spacing: -0.065em;
  text-transform: uppercase;
  overflow-wrap: anywhere;
}
body.is-public .product-head .title p {
  margin: 18px 0 0;
  max-width: 580px;
  color: #999;
  font-size: 13px;
  line-height: 1.55;
}

body.is-public .bid { border-top: 1px solid #333; padding-top: 11px; }
body.is-public .bid small {
  color: #858585;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
body.is-public .price {
  color: var(--pub-accent);
  font-size: clamp(39px, 4vw, 64px);
  font-weight: 600;
  letter-spacing: -0.045em;
  margin: 8px 0;
  font-variant-numeric: tabular-nums;
}
body.is-public .meta {
  display: flex;
  gap: 8px 15px;
  flex-wrap: wrap;
  color: #7d7d7d;
  font-size: 11px;
  margin-bottom: 13px;
}
body.is-public .meta .state { color: #bea371; font-weight: bold; }
body.is-public .meta .state-dim {
  color: #6f6f6b;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 9px;
}
body.is-public .meta .cd.closed { color: #8a8a86; }
body.is-public .offer {
  width: 100%;
  border: 0;
  background: #eee;
  color: #080808;
  padding: 14px 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  transition: background 0.15s;
}
body.is-public .offer:hover { background: #fff; }

/* PRÓXIMAMENTE: mismo bloque y mismo ritmo que un estado cerrado. Sin botón
   de oferta, con el contador al inicio y la fecha de arranque en Argentina. */
body.is-public .bid.is-upcoming .closed-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid #333;
  margin-top: 4px;
  padding-top: 11px;
  font-size: 11px;
  line-height: 1.5;
  color: #85857f;
}
body.is-public .bid.is-upcoming .closed-note b {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #cfcfcb;
  font-weight: 600;
}
body.is-public .bid.is-upcoming .meta .cd { color: #cfcfcb; }

/* VAS PRIMERO: el botón conserva su lugar y su tamaño (el bloque no salta
   cuando otro postor te supera) pero no es accionable. */
body.is-public .offer.is-leading,
body.is-public .offer.is-leading:hover {
  background: #2a2a28;
  color: #cfcfcb;
  cursor: default;
}
body.is-public .offer:disabled { opacity: 1; }
body.is-public .leading-note {
  margin: 8px 0 0;
  font-size: 11px;
  line-height: 1.5;
  color: #85857f;
}

/* Estado cerrado: mismo lugar, sin botón de oferta. */
body.is-public .bid.is-closed .closed-note {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid #333;
  margin-top: 4px;
  padding-top: 11px;
  font-size: 11px;
  line-height: 1.5;
  color: #85857f;
}
body.is-public .bid.is-closed .closed-note b {
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #cfcfcb;
  font-weight: 600;
}
body.is-public .bid.is-closed.vendido .closed-note b { color: #7fd3a0; }
body.is-public .bid.is-closed.sinventa .closed-note b,
body.is-public .bid.is-closed.retirado .closed-note b { color: #9a9a95; }
body.is-public .no-lots { color: var(--pub-muted); padding: 60px 0 90px; }

/* ── Galería editorial (solo fotos, sin planos) ─────────────────────────── */
body.is-public .gallery { display: grid; gap: 12px; }
body.is-public .photo { position: relative; overflow: hidden; background: #090909; }
body.is-public .photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(0.82) saturate(0.78);
}
body.is-public .cap {
  position: absolute;
  left: 10px;
  bottom: 9px;
  background: rgba(0, 0, 0, 0.67);
  color: #d6d6d2;
  padding: 5px 7px;
  font-size: 8px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* 1 foto */
body.is-public .gallery-solo { grid-template-columns: 1fr; }
body.is-public .gallery-solo .photo { height: clamp(320px, 58vw, 620px); }

/* 2 fotos */
body.is-public .gallery-duo { grid-template-columns: 1fr 1fr; }
body.is-public .gallery-duo .photo { height: clamp(260px, 38vw, 460px); }
body.is-public .gallery-duo .g2 img { object-position: 72% 50%; }

/* 3 fotos: gallery-a */
body.is-public .gallery-a { grid-template-columns: 1.28fr 0.72fr; grid-template-rows: 370px 250px; }
body.is-public .gallery-a .g1 { grid-row: 1 / span 2; }
body.is-public .gallery-a .g2 { grid-column: 2; grid-row: 1; }
body.is-public .gallery-a .g3 { grid-column: 2; grid-row: 2; }
body.is-public .gallery-a .g2 img { object-position: 70% 50%; }
body.is-public .gallery-a .g3 img { object-position: 28% 50%; transform: scale(1.2); }

/* 3 fotos: gallery-b */
body.is-public .gallery-b { grid-template-columns: 0.66fr 1.34fr; grid-template-rows: 300px 320px; }
body.is-public .gallery-b .g1 { grid-column: 1; grid-row: 1; }
body.is-public .gallery-b .g2 { grid-column: 1; grid-row: 2; }
body.is-public .gallery-b .g3 { grid-column: 2; grid-row: 1 / span 2; }
body.is-public .gallery-b .g1 img { object-position: 20% center; transform: scale(1.08); }
body.is-public .gallery-b .g2 img { object-position: 78% center; transform: scale(1.15); }

/* 3 fotos: gallery-c */
body.is-public .gallery-c { grid-template-columns: 1.32fr 0.68fr; grid-template-rows: 315px 305px; }
body.is-public .gallery-c .g1 { grid-column: 1; grid-row: 1; }
body.is-public .gallery-c .g2 { grid-column: 1; grid-row: 2; }
body.is-public .gallery-c .g3 { grid-column: 2; grid-row: 1 / span 2; }
body.is-public .gallery-c .g2 img { object-position: 75% center; transform: scale(1.15); }
body.is-public .gallery-c .g3 img { object-position: 35% center; transform: scale(1.2); }

/* 4 fotos: la retícula del lote + una celda de apoyo, mismo equilibrio */
body.is-public .gallery-a.has4,
body.is-public .gallery-b.has4,
body.is-public .gallery-c.has4 { grid-template-rows: 300px 240px 240px; }
body.is-public .gallery-a.has4 .g1,
body.is-public .gallery-b.has4 .g3,
body.is-public .gallery-c.has4 .g3 { grid-row: 1 / span 3; }
body.is-public .gallery-a.has4 .g4 { grid-column: 2; grid-row: 3; }
body.is-public .gallery-c.has4 .g4 { grid-column: 2; grid-row: 3; }
body.is-public .gallery-b.has4 { grid-template-columns: 1fr 1fr 1fr; }
body.is-public .gallery-b.has4 .g1 { grid-column: 1; grid-row: 1 / span 3; }
body.is-public .gallery-b.has4 .g2 { grid-column: 2; grid-row: 1 / span 3; }
body.is-public .gallery-b.has4 .g3 { grid-column: 3; grid-row: 1 / span 3; }
body.is-public .gallery-b.has4 .g4 { grid-column: 2; grid-row: 3; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
body.is-public footer {
  border-top: 1px solid var(--pub-line);
  padding: 16px 0 30px;
  display: flex;
  justify-content: space-between;
  color: #626262;
  font-size: 9px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* ── Drawer de oferta ───────────────────────────────────────────────────── */
body.is-public .overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 30;
}
body.is-public .overlay.show { opacity: 1; pointer-events: auto; }

body.is-public .drawer {
  position: fixed;
  right: 0;
  top: 0;
  width: min(470px, 100%);
  height: 100vh;
  background: #090909;
  color: #eee;
  z-index: 40;
  transform: translateX(100%);
  transition: transform 0.27s ease;
  border-left: 1px solid #262626;
  padding: 24px;
  overflow: auto;
}
body.is-public .drawer.show { transform: translateX(0); }
body.is-public .drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #292929;
  padding-bottom: 15px;
}
body.is-public .drawer-logo {
  font-family: "Helvetica Neue", Helvetica, Arial, "Inter", sans-serif;
  font-weight: 200;
  font-size: 42px;
  letter-spacing: 0.01em;
  text-transform: lowercase;
}
body.is-public .drawer .close {
  width: 38px;
  height: 38px;
  border: 1px solid #555;
  background: transparent;
  color: #fff;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
body.is-public .drawer .close:hover { border-color: #fff; }
body.is-public .drawer-product {
  color: #aaa;
  margin-top: 20px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.is-public .drawer .current {
  margin: 20px 0 18px;
  padding-bottom: 18px;
  border-bottom: 1px solid #303030;
}
body.is-public .drawer .current small {
  color: #777;
  font-size: 9px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
body.is-public .drawer .current strong {
  display: block;
  color: var(--pub-accent);
  font-size: 51px;
  letter-spacing: -0.05em;
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
}
body.is-public .drawer-status { color: #b59a69; font-size: 11px; margin-top: 7px; }

body.is-public .drawer .quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  margin: 12px 0;
}
body.is-public .drawer .quick button {
  background: #000;
  color: #eee;
  border: 1px solid #303030;
  padding: 10px 6px;
  font-family: inherit;
  font-size: 11px;
  font-weight: bold;
  cursor: pointer;
}
body.is-public .drawer .quick button:hover { border-color: #888; }

body.is-public .drawer label {
  display: block;
  margin: 18px 0 7px;
  color: #777;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
body.is-public .drawer input {
  width: 100%;
  background: #000;
  color: #fff;
  border: 1px solid #333;
  padding: 15px 14px;
  font-family: inherit;
  font-size: 18px;
}
body.is-public .drawer input:focus { outline: none; border-color: #777; }
body.is-public .drawer input.has-error { border-color: #ef4444; }
body.is-public .drawer .field-error {
  display: block;
  margin-top: 5px;
  color: #ef4444;
  font-size: 11px;
  letter-spacing: 0;
  text-transform: none;
}
body.is-public .drawer .two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
body.is-public .drawer .note { color: #777; font-size: 11px; line-height: 1.5; margin: 16px 0; }
body.is-public .drawer .form-success {
  color: #7fd3a0;
  font-size: 12px;
  line-height: 1.5;
  margin: 0 0 12px;
}
body.is-public .drawer .form-success:empty { display: none; }
body.is-public .drawer .confirm {
  width: 100%;
  background: #eee;
  color: #050505;
  border: 0;
  padding: 16px;
  font-family: inherit;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
body.is-public .drawer .confirm:disabled { opacity: 0.55; cursor: progress; }

/* ── Móvil: una columna, fotos apiladas, drawer casi a pantalla completa ── */
@media (max-width: 900px) {
  body.is-public .site-header { flex-direction: column; }
  body.is-public .nav { padding-top: 5px; flex-wrap: wrap; }
  body.is-public .intro { grid-template-columns: 1fr; }
  body.is-public .product { padding: 27px 0 105px; }
  body.is-public .product-head { grid-template-columns: 1fr; gap: 28px; margin-bottom: 27px; }
  body.is-public .product-head .lot { padding-top: 0; }

  body.is-public .gallery-a,
  body.is-public .gallery-b,
  body.is-public .gallery-c,
  body.is-public .gallery-a.has4,
  body.is-public .gallery-b.has4,
  body.is-public .gallery-c.has4 {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
  }
  body.is-public .gallery-a .g1,
  body.is-public .gallery-a .g2,
  body.is-public .gallery-a .g3,
  body.is-public .gallery-b .g1,
  body.is-public .gallery-b .g2,
  body.is-public .gallery-b .g3,
  body.is-public .gallery-c .g1,
  body.is-public .gallery-c .g2,
  body.is-public .gallery-c .g3,
  body.is-public .gallery-a.has4 .g1,
  body.is-public .gallery-a.has4 .g2,
  body.is-public .gallery-a.has4 .g3,
  body.is-public .gallery-b.has4 .g1,
  body.is-public .gallery-b.has4 .g2,
  body.is-public .gallery-b.has4 .g3,
  body.is-public .gallery-c.has4 .g1,
  body.is-public .gallery-c.has4 .g2,
  body.is-public .gallery-c.has4 .g3,
  body.is-public .gallery-a.has4 .g4,
  body.is-public .gallery-b.has4 .g4,
  body.is-public .gallery-c.has4 .g4 {
    grid-column: auto;
    grid-row: auto;
    height: 300px;
  }
  body.is-public .gallery-solo .photo { height: 300px; }
  body.is-public .gallery-duo .photo { height: 300px; }

  body.is-public .drawer { width: 100%; border-left: 0; padding: 20px 18px 30px; }
  body.is-public .drawer-logo { font-size: 40px; }
  body.is-public .drawer .current strong { font-size: 44px; }
}
@media (max-width: 560px) {
  body.is-public .page { width: 92vw; }
  body.is-public .wordmark { font-size: 75px; }
  body.is-public .nav { gap: 14px; font-size: 10px; }
  body.is-public .gallery-solo,
  body.is-public .gallery-duo,
  body.is-public .gallery-a,
  body.is-public .gallery-b,
  body.is-public .gallery-c,
  body.is-public .gallery-a.has4,
  body.is-public .gallery-b.has4,
  body.is-public .gallery-c.has4 { display: block; }
  body.is-public .gallery .photo,
  body.is-public .gallery-solo .photo,
  body.is-public .gallery-duo .photo,
  body.is-public .gallery-a .photo,
  body.is-public .gallery-b .photo,
  body.is-public .gallery-c .photo,
  body.is-public .gallery-a.has4 .photo,
  body.is-public .gallery-b.has4 .photo,
  body.is-public .gallery-c.has4 .photo { height: 300px; margin-bottom: 10px; }
  body.is-public .drawer .two { grid-template-columns: 1fr; }
}