:root {
  --bg: #0e0f12;
  --bg-panel: #16181d;
  --bg-elevated: #1d2026;
  --bg-sunken: #101216;
  --border: #2a2d34;
  --border-soft: #22242a;
  --text: #e4e6eb;
  --text-muted: #8b8f99;
  --accent: #6b8aff;
  --accent-hover: #8aa2ff;
  --accent-soft: rgba(107, 138, 255, 0.1);
  --danger: #e5686a;
  --success: #4fb87c;
  --warning: #d6a34c;

  /* Escala de espaciado: todo el layout usa estos pasos en vez de numeros
     sueltos, para que el ritmo vertical/horizontal sea consistente. */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 28px;
  --sp-7: 40px;

  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.2), 0 8px 24px -12px rgba(0, 0, 0, 0.4);
  --font: "Segoe UI", -apple-system, "Inter", Roboto, sans-serif;
}

* { box-sizing: border-box; }

#mobile-warning { display: none; }

::selection { background: rgba(107, 138, 255, 0.3); color: #fff; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-panel); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #3a3e47; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background: var(--bg);
}

/* --- Topbar / brand --- */

.topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-6);
  background: var(--bg-panel);
  border-bottom: 1px solid var(--border-soft);
  position: sticky;
  top: 0;
  z-index: 10;
}

.brand { display: flex; align-items: center; gap: 12px; }

.brand-mark {
  width: 22px;
  height: 22px;
  fill: var(--accent);
  flex: none;
}

.brand-text h1 {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 0;
  line-height: 1.2;
  color: var(--text);
}

.tagline {
  margin: 1px 0 0;
  font-size: 12px;
  color: var(--text-muted);
}

main { padding: var(--sp-6) var(--sp-6) 72px; max-width: 1180px; margin: 0 auto; }

.columns { display: flex; gap: var(--sp-5); align-items: stretch; }
.column { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-5); }

/* --- Cards --- */

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}

.card.grow { flex: 1; display: flex; flex-direction: column; }
.card.grow .result-list { flex: 1; }

.card h2 {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin: 0 0 var(--sp-4);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-bottom: var(--sp-3);
  border-bottom: 1px solid var(--border-soft);
}

.badge {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 999px;
}

.input-row, .actions-row {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}

.input-row:last-child, .actions-row:last-child { margin-bottom: 0; }

.actions-split {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--sp-3);
}

.actions-secondary {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
}

.save-order-group {
  display: inline-flex;
  gap: 6px;
}

details { margin-bottom: 0; }
details > summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: "▸";
  color: var(--text-muted);
  font-size: 10px;
  transition: transform 0.15s ease;
}
details[open] > summary::before { transform: rotate(90deg); }
details .input-row { margin-top: var(--sp-3); }
details > p.muted { margin: var(--sp-3) 0 0; }

/* Panel de filtro mas ligero que una .card (mismo sitio que ocuparia una,
   pero con menos peso visual: es un ajuste opcional, no contenido principal). */
.filter-panel {
  background: var(--bg-panel);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-5);
}
.filter-panel[open] { border-style: solid; }
.filter-panel .checkbox-grid { margin-top: var(--sp-3); }

input[type="text"], textarea, select {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 9px 12px;
  font-size: 13.5px;
  font-family: inherit;
  transition: border-color 0.12s;
}

.input-row input[type="text"] { flex: 1; }

textarea {
  width: 100%;
  min-height: 120px;
  resize: vertical;
  margin-bottom: var(--sp-3);
}

input[type="text"]:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--accent);
}

select {
  cursor: pointer;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: right 13px center, right 8px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 28px;
}

/* --- Buttons --- */

.btn {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 12.5px;
  font-family: inherit;
  font-weight: 500;
  line-height: 1.3;
  transition: background 0.12s, border-color 0.12s, transform 0.08s;
}

.btn:hover { background: #23262d; border-color: #3a3e47; }
.btn:active { background: #1a1c21; transform: translateY(1px); }
.btn:disabled { opacity: 0.4; cursor: not-allowed; transform: none; }

.btn-primary {
  background: var(--accent);
  border-color: var(--accent);
  color: #0b0d10;
  font-weight: 600;
  padding: 10px 18px;
  font-size: 13px;
  box-shadow: 0 4px 14px -4px rgba(107, 138, 255, 0.5);
}

.btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn-primary:disabled { background: var(--bg-elevated); border-color: var(--border); color: var(--text-muted); box-shadow: none; }

/* Botones secundarios/utilitarios (copiar, guardar...): mismo tamaño que .btn
   pero sin chroma propio, para que no compitan visualmente con .btn-primary. */
.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}
.btn-ghost:hover { background: var(--bg-elevated); border-color: var(--border-soft); color: var(--text); }

.btn-danger { color: var(--danger); border-color: var(--border); }
.btn-danger:hover { background: rgba(229, 104, 106, 0.1); border-color: var(--danger); }

/* --- Lists --- */

.result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.result-list li {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.result-list li:last-child { border-bottom: none; }
.result-list li:hover { background: var(--bg-elevated); }
.result-list .muted { color: var(--text-muted); padding: 16px; text-align: center; }

.result-list .row-title {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.row-subtle { color: var(--text-muted); }
.row-faint { color: var(--text-muted); opacity: 0.8; font-size: 0.92em; }

.qty-pill {
  flex: none;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}

.result-list .remove-btn {
  flex: none;
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 4px;
  border-radius: 50%;
  transition: color 0.12s, background 0.12s;
}
.result-list .remove-btn:hover { color: var(--danger); background: rgba(229, 104, 106, 0.1); }

.btn-add {
  flex: none;
  padding: 5px 11px;
  font-size: 14px;
  line-height: 1;
}

/* --- Miniaturas de carta + preview flotante al pasar el raton --- */

.card-thumb {
  flex: none;
  display: block;
  object-fit: cover;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  cursor: zoom-in;
}

.card-thumb-sm { width: 28px; height: 39px; }
.card-thumb-md { width: 34px; height: 47px; }

.card-thumb-empty {
  background: var(--bg-elevated);
  cursor: default;
}

.card-thumb-wrap {
  position: relative;
  display: inline-flex;
  flex: none;
  line-height: 0;
}

/* Icono de expansión superpuesto en la esquina de la miniatura; se agranda al
   pasar el ratón por encima para poder verlo bien (los símbolos de edición
   son diminutos). Fondo blanco fijo porque los SVG de Scryfall vienen en
   negro y si no desaparecerían sobre el tema oscuro. */
.card-set-icon {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 15px;
  height: 15px;
  padding: 2px;
  box-sizing: content-box;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
  transform-origin: bottom right;
  transition: transform 0.15s ease;
  cursor: zoom-in;
  z-index: 2;
}

.card-set-icon:hover { transform: scale(2.6); }

.card-preview-float {
  position: fixed;
  z-index: 999;
  width: 260px;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  pointer-events: none;
}

/* --- Tables --- */

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th, td {
  text-align: left;
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-soft);
}

th {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

tbody tr:hover { background: var(--bg-sunken); }

/* Los usos actuales de .table-scroll van siempre dentro de un panel
   (.seller-group / .offer-block) que ya pone su propio borde, así que aquí
   solo se encarga del scroll horizontal (evita el "caja dentro de caja"). */
.table-scroll { overflow-x: auto; }
.table-scroll table { border: none; }
.table-scroll thead th:first-child, .table-scroll tbody td:first-child { padding-left: 0; }
.table-scroll thead th:last-child, .table-scroll tbody td:last-child { padding-right: 0; }

.cell-num { text-align: right; white-space: nowrap; }

.cell-card {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 190px;
}

.cell-strong { color: var(--text); font-weight: 600; }

.seller-pill {
  display: inline-block;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}

.seller-pill-lg { font-size: 13px; padding: 3px 11px; }

.condition-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  white-space: nowrap;
}

.cond-mint, .cond-near-mint { color: var(--success); border-color: rgba(79, 184, 124, 0.35); background: rgba(79, 184, 124, 0.08); }
.cond-excellent { color: var(--accent); border-color: rgba(107, 138, 255, 0.35); background: rgba(107, 138, 255, 0.08); }
.cond-good, .cond-light-played { color: var(--warning); border-color: rgba(214, 163, 76, 0.35); background: rgba(214, 163, 76, 0.08); }
.cond-played, .cond-poor { color: var(--danger); border-color: rgba(229, 104, 106, 0.35); background: rgba(229, 104, 106, 0.08); }

.best-price-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  color: var(--success);
  background: rgba(79, 184, 124, 0.1);
  border: 1px solid rgba(79, 184, 124, 0.35);
  padding: 3px 9px;
  border-radius: 999px;
}

#log-view {
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  max-height: 200px;
  overflow-y: auto;
  font-size: 12px;
  font-family: "Cascadia Code", Consolas, monospace;
  color: var(--text-muted);
  white-space: pre-wrap;
  margin: 0;
}

/* --- Wizard: step indicator --- */

.step-indicator {
  display: flex;
  align-items: flex-start;
  margin-bottom: var(--sp-6);
  padding: 0 4px;
}

.step-dot {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--text-muted);
}

.step-dot:not(:first-child)::before {
  content: "";
  position: absolute;
  top: 15px;
  right: 50%;
  width: 100%;
  height: 1px;
  background: var(--border);
  z-index: 0;
}

.step-dot.done:not(:first-child)::before,
.step-dot.active:not(:first-child)::before {
  background: var(--accent);
}

.step-num {
  position: relative;
  z-index: 1;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.step-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
}

.step-dot.active .step-num { background: var(--accent); border-color: var(--accent); color: #0b0d10; }
.step-dot.active .step-label { color: var(--text); }

.step-dot.done .step-num { border-color: var(--accent); color: var(--accent); background: var(--bg-elevated); }
.step-dot.done .step-label { color: var(--text-muted); }

.wizard-step { display: none; }
.wizard-step.active { display: block; }

.wizard-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border-soft);
}

.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--sp-2) var(--sp-3);
  max-height: 260px;
  overflow-y: auto;
  padding: var(--sp-1) 2px;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  font-size: 13px;
  cursor: pointer;
}

/* --- Pestañas de vista (Ofertas por carta / Optimizar pedido) --- */

.view-toggle {
  display: flex;
  gap: var(--sp-5);
  margin-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border-soft);
}

.view-toggle .btn {
  background: none;
  border: none;
  border-radius: 0;
  padding: var(--sp-2) 2px var(--sp-3);
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 600;
  position: relative;
}

.view-toggle .btn:hover { background: none; color: var(--text); }

.view-toggle .btn.active {
  color: var(--text);
}

.view-toggle .btn.active::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  border-radius: 2px 2px 0 0;
  background: var(--accent);
}

/* Control segmentado: estrategia de optimización dentro de "Optimizar
   pedido" (menor precio vs. menos envíos). Grupo de botones pegados, para
   distinguirlo visualmente de las pestañas de vista de más arriba. */
.segmented {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.segmented .btn {
  border: none;
  border-radius: 0;
  background: var(--bg-elevated);
}

.segmented .btn + .btn { border-left: 1px solid var(--border); }

.segmented .btn.active {
  background: var(--accent);
  color: #0b0d10;
  font-weight: 600;
}

/* Paneles de resultado: cada carta (vista "Ofertas por carta") o cada
   vendedor (vista "Optimizar pedido") es una tarjeta con fondo propio, en vez
   de filas separadas solo por una línea, para que el agrupado se vea de un
   vistazo y no como una tabla continua. */
.offer-block, .seller-group {
  background: var(--bg-elevated);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-3);
}
.offer-block:last-child, .seller-group:last-child { margin-bottom: 0; }

.offer-block-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin-bottom: var(--sp-3);
}

.offer-block-head .row-title { flex: 1; min-width: 0; font-weight: 600; font-size: 13.5px; }

.offer-block-status { margin: 0; padding-left: 44px; }

.toggle-offers-btn {
  margin-top: var(--sp-3);
  padding: 5px 11px;
  font-size: 11.5px;
}

.plan-seller-select {
  width: 100%;
  max-width: 280px;
  padding: 5px 26px 5px 8px;
  font-size: 12.5px;
}

.seller-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  margin: 0 0 var(--sp-3);
}

/* "2,86 EUR + 1,45 EUR envío = 4,31 EUR" con el total resaltado, en vez de
   texto corrido sin jerarquía. */
.seller-stats {
  font-size: 12.5px;
  color: var(--text-muted);
  white-space: nowrap;
}
.seller-stats .stats-total { color: var(--text); font-weight: 700; margin-left: 4px; }

/* Barra de totales del pedido completo: cada dato en su propio bloque
   (etiqueta arriba, valor abajo) en vez de una frase larga con todo junto. */
.totals-bar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-5);
  padding: var(--sp-4) var(--sp-5);
  margin-bottom: var(--sp-2);
  background: var(--bg-sunken);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
}

.totals-bar-item { display: flex; flex-direction: column; gap: 2px; }

.totals-label {
  font-size: 10.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.totals-value { font-size: 16px; font-weight: 600; color: var(--text); }

.totals-bar-total { margin-left: auto; }
.totals-bar-total .totals-value { font-size: 20px; color: var(--accent-hover); }

.totals-hint {
  margin: 0 0 var(--sp-4);
  font-size: 12px;
}

/* Manastorm depende de una extensión de navegador (Chrome/Brave de escritorio),
   así que en pantallas de móvil se sustituye toda la web por un aviso en vez de
   dejar usar un wizard que no puede funcionar ahí. Va al final del archivo para
   ganar por orden de aparición sobre .topbar/main con la misma especificidad. */
@media (max-width: 700px) {
  #mobile-warning {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
    min-height: 100vh;
    padding: 48px 28px;
    color: var(--text);
  }
  #mobile-warning .brand-mark { width: 40px; height: 40px; fill: var(--accent); }
  #mobile-warning h1 { font-size: 20px; margin: 0; }
  #mobile-warning p { font-size: 14px; line-height: 1.5; max-width: 380px; margin: 0; }

  .topbar, main { display: none; }
}