/* Calculadora de costes de Factorio - tema oscuro al estilo del juego. */

:root {
  --bg:        #211f1c;
  --panel:     #313031;
  --panel-2:   #3b3a38;
  --slot:      #4d4b48;
  --slot-hi:   #63605c;
  --line:      #191817;
  --text:      #e3ddd4;
  --text-dim:  #a49c90;
  --accent:    #ff9d21;
  --accent-2:  #5ba8ff;
  --good:      #7bc043;
  --warn:      #e0b23c;
  --radius:    3px;

  /* Colores de los efectos, los mismos que los modulos del juego:
     velocidad azul, productividad roja, eficiencia verde, calidad morada. */
  --fx-speed:  #5ba8ff;
  --fx-prod:   #ff7a6e;
  --fx-cons:   #7bc043;
  --fx-qual:   #c98cff;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 "Segoe UI", Tahoma, sans-serif;
}

/* ------------------------------------------------------------- cabecera */

.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 16px;
  background: var(--panel);
  border-bottom: 2px solid var(--line);
  flex: none;
}

.topbar h1 {
  margin: 0;
  font-size: 17px;
  color: var(--accent);
  letter-spacing: .3px;
}

.meta { color: var(--text-dim); font-size: 12px; margin-right: auto; }

.toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--accent); }

.btn-ghost {
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px 12px;
  cursor: pointer;
  font: inherit;
}
.btn-ghost:hover { background: var(--slot); }

/* ------------------------------------------------------------- columnas */

.columns {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 400px 1fr 1fr;
  gap: 10px;
  padding: 10px;
}

.col {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.col h2 {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 9px 12px;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--accent);
  background: var(--panel-2);
  border-bottom: 1px solid var(--line);
}

.col-body { overflow-y: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }

.hint {
  margin: 0;
  padding: 14px 16px;
  color: var(--text-dim);
  font-size: 13px;
  font-style: italic;
}

/* --------------------------------------------------------------- picker */

.picker-controls { display: flex; gap: 8px; padding: 8px; align-items: flex-end; }

.search {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
}

.qty-label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-dim); }

.qty {
  width: 88px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 6px 8px;
  font: inherit;
}

.search:focus, .qty:focus { outline: 1px solid var(--accent); }

.group-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 8px 8px;
  border-bottom: 1px solid var(--line);
}

.tab {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-bottom-color: transparent;
  border-radius: var(--radius) var(--radius) 0 0;
  padding: 4px 6px;
  cursor: pointer;
  line-height: 0;
}
.tab:hover { background: var(--slot); }
.tab.active { background: var(--slot-hi); border-color: var(--accent); }

.picker-grid { flex: 1; overflow-y: auto; padding: 8px; }

.subgroup {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 3px 0;
  border-bottom: 1px solid var(--panel-2);
}
.subgroup:last-child { border-bottom: none; }

.cell {
  width: 40px;
  height: 40px;
  padding: 2px;
  background: var(--slot);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 0;
}
.cell:hover { background: var(--slot-hi); border-color: var(--accent); }

/* --------------------------------------------------------------- iconos */

.icon { width: 32px; height: 32px; image-rendering: auto; }
.icon-group { width: 28px; height: 28px; }
.icon-small { width: 20px; height: 20px; }

/* ------------------------------------------------ objetos a fabricar */

.card {
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 3px solid var(--slot-hi);
  border-radius: var(--radius);
  padding: 7px 9px;
}
.card-root { border-left-color: var(--accent); }
.card-sub  { border-left-color: var(--accent-2); }

.card-head { display: flex; align-items: center; gap: 8px; }
.card-name { font-weight: 600; flex: 1; min-width: 0; }

.card-qty {
  width: 84px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 4px 6px;
  font: inherit;
  text-align: right;
}
.card-qty:focus { outline: 1px solid var(--accent); }

.card-del {
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.card-del:hover { color: #ff6b5e; }

.card-info { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }

.tag {
  background: var(--slot);
  border-radius: var(--radius);
  padding: 1px 7px;
  font-size: 11.5px;
  color: var(--text-dim);
}
.tag-total { color: var(--text); font-weight: 600; }
.tag-warn { color: var(--warn); }

.card-recipe { display: flex; align-items: center; gap: 8px; margin-top: 6px; }

.recipe-select {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 5px;
  font: inherit;
  font-size: 12px;
}

.recipe-name { flex: 1; min-width: 0; font-size: 12px; color: var(--text-dim); }

.machines { display: flex; gap: 2px; line-height: 0; }

/* ---------------------------------------------------------------- coste */

.row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 5px 9px;
  font: inherit;
  cursor: pointer;
}
.row:hover:not(:disabled) { background: var(--slot); border-color: var(--accent); }

.row-name { flex: 1; min-width: 0; }
.row-amount { font-variant-numeric: tabular-nums; font-weight: 600; }

.row-raw { cursor: default; opacity: .8; border-left: 3px solid var(--good); }
.row-by  { cursor: default; border-left: 3px solid var(--accent-2); }

.sub-title {
  margin: 10px 0 0;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-dim);
}

/* -------------------------------------------------------------- resumen */

.summary {
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  padding: 8px 12px;
  font-size: 12.5px;
}

.summary-line { display: flex; justify-content: space-between; gap: 12px; padding: 2px 0; }
.summary-line strong { color: var(--accent); }
.summary-note { margin: 6px 0 0; color: var(--text-dim); font-size: 11.5px; font-style: italic; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1100px) {
  .columns { grid-template-columns: 1fr; grid-auto-rows: minmax(240px, auto); overflow-y: auto; }
  body { height: auto; min-height: 100vh; }
}

/* Barras de scroll discretas al estilo del juego. */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--slot); border-radius: var(--radius); }
::-webkit-scrollbar-thumb:hover { background: var(--slot-hi); }

/* ------------------------------------------------- identidad de la tarjeta */

.card-ident {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: help;
}

/* ============================================================== tooltip ===
   Ventanita de informacion al estilo de las del juego: cabecera con icono y
   nombre, y debajo secciones separadas por lineas.                        */

.tooltip {
  position: fixed;
  z-index: 100;
  width: max-content;
  max-width: 340px;
  pointer-events: none;
  background: var(--panel);
  border: 1px solid #6b6862;
  border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .65);
  color: var(--text);
  font-size: 13px;
  overflow: hidden;
}

.tt-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: linear-gradient(180deg, #46443f 0%, #383733 100%);
  border-bottom: 1px solid var(--line);
}

.tt-head-text { min-width: 0; }

.tt-title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
}

.tt-subtitle {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  margin-top: 2px;
}

.tt-desc {
  margin: 0;
  padding: 8px 12px;
  color: #cdc6bb;
  font-style: italic;
  line-height: 1.35;
  white-space: pre-line;
  border-bottom: 1px solid var(--line);
}

.tt-section {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 12px 3px;
  border-top: 1px solid var(--line);
}
.tt-head + .tt-section,
.tt-desc + .tt-section { border-top: none; }

.tt-section-title {
  flex: 1;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--accent);
}

.tt-section-right {
  font-variant-numeric: tabular-nums;
  color: var(--text-dim);
  font-size: 12px;
}

.tt-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 2px 12px;
  line-height: 1.3;
}

.tt-icon { width: 24px; height: 24px; flex: none; }
.tt-icon-big { width: 40px; height: 40px; }

.tt-amount {
  min-width: 34px;
  text-align: right;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}

.tt-row-name { flex: 1; min-width: 0; }

.tt-row-right {
  color: var(--text-dim);
  font-variant-numeric: tabular-nums;
  font-size: 12px;
}

.tt-mini-chip {
  background: var(--slot);
  color: var(--good);
  border-radius: 8px;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 600;
}

.tt-empty {
  padding: 2px 12px 4px;
  color: var(--text-dim);
  font-style: italic;
}

.tt-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 8px 12px;
  border-top: 1px solid var(--line);
}

.tt-chip {
  background: var(--slot);
  border-radius: var(--radius);
  padding: 1px 7px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.tt-note {
  margin: 0;
  padding: 6px 12px;
  font-size: 11.5px;
  color: var(--text-dim);
  font-style: italic;
}

.tt-hint {
  margin: 0;
  padding: 7px 12px;
  background: var(--panel-2);
  border-top: 1px solid var(--line);
  font-size: 11.5px;
  color: var(--accent-2);
}

/* Las ultimas filas necesitan aire si no las sigue ninguna seccion. */
.tt-row:last-child, .tt-empty:last-child { margin-bottom: 7px; }

/* ======================================================= pestañas de vista */

.view-tabs { display: flex; gap: 2px; }

.view-tab {
  background: var(--panel-2);
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 6px 14px;
  cursor: pointer;
  font: inherit;
}
.view-tab:hover { background: var(--slot); color: var(--text); }
.view-tab.active {
  background: var(--slot-hi);
  color: var(--accent);
  border-color: var(--accent);
  font-weight: 600;
}

.view[hidden] { display: none; }

/* Herramientas metidas en la cabecera de una columna. */
.h2-tools {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 12px;
  color: var(--text-dim);
}
.h2-tools .btn-ghost { padding: 2px 9px; font-size: 12px; }

/* ============================================ diseñador de equipamiento === */

.columns-design { grid-template-columns: 340px 1fr 380px; }

.field { display: flex; flex-direction: column; gap: 5px; }
.field-row { display: flex; gap: 8px; }
.field-row .field { flex: 1; min-width: 0; }

.field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--accent);
}

.field-note {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-dim);
  font-style: italic;
}

.select {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 5px 6px;
  font: inherit;
  font-size: 12.5px;
  width: 100%;
}
.select:focus { outline: 1px solid var(--accent); }

/* ------------------------------------------------------------- portadores */

.holder-row { display: flex; flex-wrap: wrap; gap: 4px; }

.holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  width: 52px;
  padding: 4px 2px;
  background: var(--slot);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
}
.holder:hover { background: var(--slot-hi); }
.holder.active { border-color: var(--accent); background: var(--slot-hi); color: var(--text); }
.holder-size { font-size: 10px; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------------ palet */

.palette { display: flex; flex-direction: column; gap: 3px; }

.pal-row {
  display: flex;
  align-items: stretch;
  gap: 3px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.pal-row.active { border-color: var(--accent); background: var(--slot); }

.pal-pick {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  background: none;
  border: none;
  color: var(--text);
  padding: 5px 7px;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pal-pick:hover { background: var(--slot); }

.pal-text { min-width: 0; }
.pal-name { font-size: 12.5px; }
.pal-meta { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.pal-add {
  width: 30px;
  background: var(--slot);
  border: none;
  border-left: 1px solid var(--line);
  color: var(--accent);
  font-size: 17px;
  cursor: pointer;
}
.pal-add:hover:not(:disabled) { background: var(--slot-hi); }
.pal-add:disabled { color: var(--slot-hi); cursor: default; }

/* ---------------------------------------------------------------- rejilla */

.grid-body { align-items: flex-start; }
.grid-wrap { overflow: auto; padding: 4px; }
.grid-size { font-variant-numeric: tabular-nums; }

.grid-board {
  --cell: 44px;
  position: relative;
  width: calc(var(--cols) * var(--cell));
  height: calc(var(--rows) * var(--cell));
}

.grid-cells, .grid-pieces {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--cell));
  grid-template-rows: repeat(var(--rows), var(--cell));
}

/* Sin `gap`: las dos capas tienen que medir exactamente cols x cell, o se
   descuadran entre si. La separacion se pinta por dentro del hueco. */
.grid-cell {
  background: var(--slot);
  border-radius: 2px;
  /* 1 px del color del panel hace de separacion y debajo va el borde. */
  box-shadow: inset 0 0 0 1px var(--panel), inset 0 0 0 2px var(--line);
}
.grid-cell.can-drop { background: #3f5a35; cursor: pointer; }
.grid-cell.can-drop:hover { background: #567a46; }
.grid-cell.no-drop { background: #4a3535; }

.grid-pieces { pointer-events: none; }

.grid-piece {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2px;
  overflow: hidden;
  background: var(--panel-2);
  border: 1px solid var(--q, var(--slot-hi));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .5);
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
}
.grid-piece:hover { background: #5a3c38; border-color: #ff6b5e; }

/* El icono llena la pieza: un reactor de 4x4 se ve grande, como en el juego. */
.grid-piece-icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 3px;
}

.q-dot {
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .6);
}

/* ----------------------------------------------------------- estadisticas */

.icon-big { width: 40px; height: 40px; }

.stat-head { display: flex; align-items: center; gap: 10px; }
.stat-head-name { font-weight: 600; }
.stat-head-sub { font-size: 11.5px; color: var(--text-dim); }

.usage-bar {
  height: 6px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.usage-fill { height: 100%; background: var(--accent); }

.stat-title {
  margin: 10px 0 0;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--accent);
}

.stat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  padding: 2px 0;
  font-size: 12.5px;
}
.stat-label { flex: 1; min-width: 0; color: var(--text-dim); }
.stat-value { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat-extra {
  flex-basis: 100%;
  font-size: 11px;
  line-height: 1.25;
  color: var(--text-dim);
  font-style: italic;
}
.stat.ok .stat-value { color: var(--good); }
.stat.bad .stat-value { color: #ff6b5e; }

.stat-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  font-size: 12.5px;
  cursor: help;
}
.stat-count {
  min-width: 28px;
  text-align: right;
  font-weight: 600;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.stat-item-name { flex: 1; min-width: 0; }
.stat-quality { font-size: 11px; }

@media (max-width: 1400px) {
  .columns-design { grid-template-columns: 300px 1fr 340px; }
  .grid-board { --cell: 36px; }
}

.stat-note {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--text-dim);
  font-style: italic;
}

.research-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 3px;
}
.research-row .select { flex: 1; min-width: 0; }

/* ================================================ calculadora de produccion */

.columns-prod { grid-template-columns: 380px 1fr 400px; }

.qty-small { width: 62px; padding: 3px 5px; }

.default-setup {
  border-top: 1px solid var(--line);
  background: var(--panel-2);
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.setup {
  margin-top: 7px;
  padding-top: 7px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.setup-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
}
.setup-row .select { width: auto; flex: 0 1 auto; }

.setup-label {
  font-size: 11px;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: .5px;
  min-width: 54px;
}


.setup-note {
  margin: 2px 0 0;
  font-size: 11.5px;
  color: var(--text-dim);
  font-style: italic;
}
.setup-note-inline { font-size: 11px; color: var(--text-dim); font-style: italic; }

.card-rate {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  white-space: nowrap;
}

.card-detail {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 5px;
  font-size: 11.5px;
  color: var(--text-dim);
}

.tag-good { color: var(--good); }

.belt-line {
  display: flex;
  gap: 8px;
  padding: 1px 0 4px 34px;
  font-size: 11px;
  color: var(--text-dim);
}
.belt-chip { display: flex; align-items: center; gap: 3px; }

@media (max-width: 1500px) {
  .columns-prod { grid-template-columns: 320px 1fr 340px; }
}

/* ------------------------------------------- colores de efecto y ranuras */

.tag-speed { color: var(--fx-speed); }
.tag-prod  { color: var(--fx-prod); }
.tag-cons  { color: var(--fx-cons); }
.tag-qual  { color: var(--fx-qual); }
.tag-capped { box-shadow: inset 0 0 0 1px var(--warn); font-weight: 600; }

.btn-mini {
  background: var(--slot);
  color: var(--text-dim);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 3px 8px;
  font: inherit;
  font-size: 11px;
  cursor: pointer;
}
.btn-mini:hover { background: var(--slot-hi); color: var(--text); }

.slot-row { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }

/* Una ranura de modulo: icono grande y el sello de calidad en la esquina. */
.mod-slot {
  position: relative;
  width: 38px;
  height: 38px;
  padding: 2px;
  background: var(--slot);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 0;
}
.mod-slot:hover { background: var(--slot-hi); }
.mod-slot .icon { width: 32px; height: 32px; }

.mod-slot-empty {
  background: var(--bg);
  border-style: dashed;
  border-color: var(--slot-hi);
}

.mod-q {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
}

/* Borde del color del efecto principal del modulo. */
.mp-speed        { border-color: var(--fx-speed); }
.mp-productivity { border-color: var(--fx-prod); }
.mp-efficiency   { border-color: var(--fx-cons); }
.mp-quality      { border-color: var(--fx-qual); }

/* ------------------------------------------ desplegable de modulos */

.mp-panel {
  position: fixed;
  z-index: 120;
  background: var(--panel);
  border: 1px solid #6b6862;
  border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .65);
  padding: 8px;
  width: max-content;
  max-width: 320px;
}

.mp-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--accent);
  margin-bottom: 4px;
}
.mp-title + * { margin-bottom: 8px; }

.mp-qualities { display: flex; flex-direction: column; gap: 2px; }

.mp-q {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  padding: 2px 8px 2px 4px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
}
.mp-q:hover { background: var(--slot); color: var(--text); }
.mp-q.active { background: var(--slot-hi); color: var(--text); border-color: var(--accent); }

.mp-grid { display: grid; grid-template-columns: repeat(var(--cols, 4), 42px); gap: 3px; }

.mp-mod {
  width: 42px;
  height: 42px;
  padding: 3px;
  background: var(--slot);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  line-height: 0;
}
.mp-mod:hover { background: var(--slot-hi); }
.mp-mod.active { box-shadow: inset 0 0 0 2px var(--accent); }
.mp-mod .icon { width: 34px; height: 34px; }

.mp-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-style: dashed;
  border-color: var(--slot-hi);
}
.mp-x { color: var(--text-dim); font-size: 20px; line-height: 1; }

/* ------------------------------------------------- ratios por maquina */

.per-machine {
  margin-top: 7px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.pm-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 5px;
}

.pm-title {
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--accent);
}
.pm-sub { font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.pm-flow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.pm-side { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pm-side-title {
  font-size: 10.5px;
  text-transform: uppercase;
  color: var(--text-dim);
  letter-spacing: .5px;
}

.pm-item { display: flex; align-items: center; gap: 4px; cursor: help; }
.pm-rate { font-size: 12px; font-variant-numeric: tabular-nums; }
.pm-out .pm-rate { color: var(--accent); font-weight: 600; }

.pm-arrow { color: var(--text-dim); font-size: 15px; }

/* ------------------------------------------- selectores con icono */

.pick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 3px 6px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.pick-btn:hover { background: var(--slot); border-color: var(--accent); }
.pick-btn .icon { width: 24px; height: 24px; flex: none; }
.pick-btn .icon-small { width: 20px; height: 20px; }

.pick-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pick-caret { color: var(--text-dim); font-size: 10px; flex: none; }

.pick-machine { flex: 1 1 190px; min-width: 0; }
.pick-wide { flex: 1 1 100%; min-width: 0; }
.pick-quality { flex: 0 0 auto; }

/* lista de opciones con icono, nombre y una nota */
.mp-list { display: flex; flex-direction: column; gap: 2px; min-width: 190px; }

.mp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 3px 8px 3px 5px;
  font: inherit;
  font-size: 12.5px;
  cursor: pointer;
  text-align: left;
}
.mp-item:hover { background: var(--slot); }
.mp-item.active { background: var(--slot-hi); border-color: var(--accent); }
.mp-item .icon { width: 26px; height: 26px; flex: none; }

.mp-item-text { display: flex; flex-direction: column; min-width: 0; }
.mp-item-name { white-space: nowrap; }
.mp-item-note { font-size: 10.5px; color: var(--text-dim); white-space: nowrap; }

/* ------------------------------------------- conmutador de unidad */

.seg {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}

.seg-btn {
  background: var(--bg);
  color: var(--text-dim);
  border: none;
  border-right: 1px solid var(--line);
  padding: 6px 9px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.seg-btn:last-child { border-right: none; }
.seg-btn:hover { background: var(--slot); color: var(--text); }
.seg-btn.active { background: var(--slot-hi); color: var(--accent); font-weight: 600; }

/* ============================================================ planos === */

.columns-bp { grid-template-columns: 1fr 340px 320px; }

.bp-input-row { display: flex; gap: 8px; padding: 8px; align-items: stretch; }

.bp-input {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 6px 8px;
  font: 12px/1.3 Consolas, monospace;
  resize: vertical;
}
.bp-input:focus { outline: 1px solid var(--accent); }

.bp-zoom { width: 110px; accent-color: var(--accent); }

.bp-msg {
  margin: 0;
  padding: 0 12px 6px;
  font-size: 12px;
  color: var(--text-dim);
  min-height: 18px;
}
.bp-msg.ok { color: var(--good); }
.bp-msg.error { color: #ff6b5e; }

.bp-canvas { flex: 1; overflow: auto; padding: 10px; align-items: flex-start; }

.bp-board {
  position: relative;
  background: #2b2a27;
  border: 1px solid var(--line);
  flex: none;
}
.bp-grid {
  background-image:
    linear-gradient(to right, rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
}

.bp-tile { position: absolute; background: rgba(120, 140, 170, .25); }

.bp-ent {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(70, 68, 63, .85);
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: 2px;
  cursor: help;
  overflow: hidden;
}
.bp-ent:hover { background: var(--slot-hi); border-color: var(--accent); z-index: 2; }

.bp-icon { width: 82%; height: 82%; object-fit: contain; }

.bp-dir {
  position: absolute;
  top: 0;
  left: 1px;
  font-size: 10px;
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 2px #000;
}

.bp-q { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; }

/* Un toque de color por familia, para leer el plano de un vistazo. */
.bp-type-transport-belt, .bp-type-underground-belt, .bp-type-splitter,
.bp-type-lane-splitter, .bp-type-loader { background: rgba(180, 140, 60, .35); }
.bp-type-inserter { background: rgba(70, 130, 180, .35); }
.bp-type-pipe, .bp-type-pipe-to-ground, .bp-type-storage-tank,
.bp-type-pump { background: rgba(90, 160, 160, .35); }
.bp-type-electric-pole, .bp-type-substation { background: rgba(200, 180, 90, .3); }
.bp-type-assembling-machine, .bp-type-furnace, .bp-type-rocket-silo,
.bp-type-mining-drill { background: rgba(120, 100, 150, .35); }
.bp-type-beacon { background: rgba(90, 190, 120, .35); }

.bp-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 2px 0;
  font-size: 12.5px;
  cursor: help;
}

@media (max-width: 1500px) {
  .columns-bp { grid-template-columns: 1fr 300px 280px; }
}

/* ==================================================== guardados ======== */

.saves-host { display: inline-flex; }
.sv-btn { padding: 2px 9px; font-size: 12px; }

.sv-panel {
  position: fixed;
  z-index: 130;
  width: 340px;
  max-height: 78vh;
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid #6b6862;
  border-radius: var(--radius);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .65);
  padding: 8px;
}

.sv-row { display: flex; gap: 5px; align-items: center; margin-bottom: 8px; }

.sv-name {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 4px 6px;
  font: inherit;
  font-size: 12.5px;
}
.sv-name:focus { outline: 1px solid var(--accent); }

.sv-item {
  display: flex;
  align-items: stretch;
  gap: 2px;
  margin-bottom: 3px;
}

.sv-load {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text);
  padding: 3px 8px;
  font: inherit;
  cursor: pointer;
  text-align: left;
}
.sv-load:hover { background: var(--slot); border-color: var(--accent); }

.sv-item-name { font-size: 12.5px; }
.sv-item-note { font-size: 10.5px; color: var(--text-dim); }

.sv-mini {
  width: 24px;
  background: var(--slot);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}
.sv-mini:hover { background: var(--slot-hi); color: var(--text); }
.sv-del:hover { color: #ff6b5e; }

.sv-code {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--text-dim);
  padding: 4px 6px;
  font: 11px/1.3 Consolas, monospace;
  resize: vertical;
  margin-bottom: 6px;
}
.sv-code:focus { outline: 1px solid var(--accent); color: var(--text); }

.sv-msg {
  margin: 4px 0 0;
  font-size: 11.5px;
  color: var(--good);
}
.sv-msg.error { color: #ff6b5e; }

/* Hueco donde se monta un selector con icono desde JavaScript. */
.picker-host { display: flex; }
.picker-host .pick-btn { flex: 1; min-width: 0; }

/* Aviso de que la web no es oficial, discreto en la cabecera. */
.disclaimer {
  margin: 0;
  font-size: 11px;
  line-height: 1.25;
  color: var(--text-dim);
  text-align: right;
  max-width: 200px;
  cursor: help;
}

@media (max-width: 1200px) {
  .disclaimer { display: none; }
}