/* =====================================================================
   Panel de una operación (solo op.html). Fondo y tarjetas de operaciones.css + panel.css.
   ===================================================================== */

.op-back { display: inline-block; margin-bottom: 14px; }

/* Cabecera */
.op-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; background: rgba(28, 28, 28, 0.9); margin-bottom: 12px; }
.op-h-title:focus { outline: none; }
/* Cabecera: icono del tipo a la izquierda del nombre */
.op-header-id { display: flex; align-items: center; gap: 18px; min-width: 0; }
.op-h-icon { width: auto; height: 92px; max-width: 110px; object-fit: contain; flex: none; filter: drop-shadow(0 0 12px rgba(201, 162, 39, 0.25)); }
.op-h-icon[hidden] { display: none; }
.op-header-id .op-header-main { min-width: 0; }
/* Resumen dentro de la cabecera: ocupa todo el ancho, debajo del título */
.op-summary { flex-basis: 100%; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 20px; padding-top: 18px; border-top: 1px solid var(--gray-800); }
/* Bodegas de un vistazo (resumen) */
.op-sum-left { display: grid; gap: 16px; align-content: start; min-width: 0; }
.op-sum-holds .op-next-title { margin-bottom: 6px; }
.op-sum-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.op-sum-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 5px 8px;
  border: none;
  border-radius: 4px;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.op-sum-row:hover { background: rgba(255, 255, 255, 0.04); }
.op-sum-row:focus-visible { outline: 2px solid var(--gray-100); outline-offset: 1px; }
.op-sum-name { color: var(--gray-100); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-sum-cells { display: grid; grid-template-columns: repeat(20, 12px); gap: 3px; }
.op-sum-cell { width: 12px; height: 12px; border-radius: 2px; border: 1px solid var(--gray-700); }
.op-sum-cell.is-full { border-color: transparent; background: var(--gold); }
.op-sum-cell.is-new { animation: op-cell-in 0.35s ease both; }
.op-sum-text { color: var(--gray-500); font-size: 0.82rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-next-title { margin: 0 0 8px; color: var(--gray-300); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; font-size: 1rem; }
.op-next-go { color: var(--gold); white-space: nowrap; }
.op-next-more { margin-top: 8px; }
.op-h-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 700; color: var(--gray-100); line-height: 1.1; }
.op-h-meta { margin: 6px 0 0; color: var(--gray-500); }
.op-header-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.op-h-tags { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.op-h-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 14px; }
.op-h-acts:empty { display: none; }
.op-summary-text { width: 100%; padding: 10px; border: 1px solid var(--gray-700); border-radius: 4px; background: var(--black); color: var(--gray-100); font: 0.85rem/1.45 ui-monospace, Consolas, monospace; resize: vertical; }
.op-h-clock { margin: 0; color: var(--gold-light); font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.op-readonly { margin: 0 0 12px; padding: 10px 14px; border: 1px solid var(--gray-700); border-left: 3px solid var(--gold); border-radius: 6px; background: rgba(20, 20, 20, 0.9); color: var(--gray-100); }
.op-readonly[hidden] { display: none; }
/* Aviso de muestreo (operaciones de minería) */
.op-sample-note { margin: 0 0 12px; padding: 12px 16px; border: 1px solid var(--gray-700); border-left: 3px solid var(--gold); border-radius: 6px; background: rgba(20, 20, 20, 0.9); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; }
.op-sample-note[hidden] { display: none; }
.op-sample-text { margin: 0; flex: 1 1 420px; color: var(--gray-300); font-size: 0.92rem; }
.op-sample-text strong { color: var(--gold-light); }
.op-sample-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
.op-sample-go { text-decoration: none; padding: 7px 14px; font-size: 0.8rem; }
.op-sample-count { color: var(--gray-500); font-size: 0.85rem; }
.op-sample-hide { font-size: 0.82rem; }

/* Pasos (pestañas) */
.op-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-bottom: 12px; }
.op-steps [role="tab"] {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 8px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--gray-700);
  border-radius: 6px;
  background: rgba(20, 20, 20, 0.88);
  color: var(--gray-300);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.op-steps [role="tab"]:hover { border-color: var(--gold); }
.op-steps [role="tab"][aria-selected="true"] { border-color: var(--gold); background: rgba(201, 162, 39, 0.16); color: var(--gray-100); }
.op-steps [role="tab"]:focus-visible { outline: 2px solid var(--gray-100); outline-offset: 2px; }
.step-num {
  grid-row: span 2;
  display: grid; place-items: center;
  width: 26px; height: 26px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  color: var(--gold-light);
  font-family: var(--font-display); font-weight: 700; font-size: 0.85rem;
}
.step-name { font-family: var(--font-display); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-info { color: var(--gray-500); font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-steps .needs-action { border-color: #2f9e57; }
.op-steps .needs-action .step-info { color: #5fd38a; }

.op-panel { background: rgba(28, 28, 28, 0.9); }
.op-panel[hidden] { display: none; }
.op-panel .card-title:focus { outline: none; }
.op-status { min-height: 1.4em; margin: 10px 0 0; color: #5fd38a; font-size: 0.9rem; }
.op-sub { margin: 0 0 10px; color: var(--gray-300); font-family: var(--font-display); font-weight: 700; letter-spacing: 0.04em; font-size: 1.05rem; }
.op-note { margin: 0; color: var(--gray-500); font-size: 0.88rem; }
.op-warn { margin: 8px 0 0; color: #e07a5f; font-size: 0.88rem; }
.op-ok { color: #5fd38a; font-size: 0.88rem; }
.op-warn-inline { color: #e07a5f; font-size: 0.88rem; }
.op-remove { color: var(--gray-500); }
.op-remove[data-confirm] { color: #e05a5a; }
.op-x { width: 28px; height: 28px; border: none; border-radius: 4px; background: none; color: var(--gray-500); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.op-x:hover { color: #e05a5a; background: rgba(224, 90, 90, 0.1); }
.op-x:focus-visible { outline: 2px solid var(--gray-100); }
.op-panel input, .op-panel select, .op-dialog select {
  padding: 8px 10px;
  border: 1px solid var(--gray-700);
  border-radius: 4px;
  background: var(--black);
  color: var(--gray-100);
  font: inherit;
  font-size: 0.92rem;
  min-width: 0;
}
.op-panel input:focus, .op-panel select:focus, .op-dialog select:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25); }

/* Resumen */
.op-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; align-content: start; }
.op-kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.02);
  color: inherit; font: inherit; text-align: left; cursor: pointer;
  min-width: 0;
}
.op-kpi .kpi-label { font-size: 0.78rem; }
.op-kpi .kpi-sub { color: var(--gray-500); font-size: 0.75rem; overflow-wrap: anywhere; }   /* en dos líneas si no cabe, sin cortar */
.op-kpi:hover { border-color: var(--gold); }
.op-kpi:focus-visible { outline: 2px solid var(--gray-100); outline-offset: 2px; }
.op-kpi .kpi-value { font-family: var(--font-display); font-size: 1.3rem; font-weight: 700; color: var(--gray-100); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-next-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.op-next-list li { display: flex; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 8px 12px; border-left: 3px solid var(--gold); background: rgba(201, 162, 39, 0.06); border-radius: 0 6px 6px 0; color: var(--gray-100); font-size: 0.92rem; flex-wrap: wrap; }
.op-next-list li[hidden] { display: none; }
.op-glance-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.op-glance-list li { display: flex; gap: 12px; flex-wrap: wrap; color: var(--gray-300); font-size: 0.92rem; }
.op-glance-list strong { color: var(--gray-100); min-width: 160px; }

/* Tripulación */
.op-inline-field { display: inline-flex; align-items: center; gap: 10px; margin: -4px 0 16px; color: var(--gray-300); font-size: 0.9rem; }
.op-inline-field input { width: 80px; }
.op-crew-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.op-member {
  display: grid;
  grid-template-columns: 36px minmax(110px, 1fr) minmax(160px, 1.2fr) minmax(200px, 1.6fr) 150px;
  align-items: end;
  gap: 14px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.op-member.is-me { border-color: rgba(201, 162, 39, 0.5); }
.op-member .crew-initial { align-self: center; }
.op-member-name { align-self: center; display: flex; flex-direction: column; }
.op-member-name strong { color: var(--gray-100); }
.op-member-tag { color: var(--gold); font-size: 0.78rem; font-family: var(--font-display); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.op-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.op-field-label { color: var(--gray-500); font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.op-field-value { color: var(--gray-100); padding: 8px 0; }
.op-member-actions { display: flex; gap: 14px; align-items: center; align-self: center; }

/* Naves */
.opd-ships { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.op-ship { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.015); }
.op-ship-img { display: grid; place-items: center; height: 120px; }
.op-ship-img .ship-hex { --hex-w: 138px; }   /* hexágono dorado: styles.css */
.op-ship-name { margin: 0; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; color: var(--gray-100); }
.op-ship-model { margin: 0; color: var(--gray-500); font-size: 0.85rem; }
.op-seats { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 6px; }
.op-seat { display: grid; grid-template-columns: minmax(120px, 45%) minmax(0, 1fr); align-items: center; gap: 10px; }
.op-seat-name { display: flex; align-items: center; gap: 6px; color: var(--gray-300); font-size: 0.88rem; min-width: 0; }
.op-seat.is-free .op-seat-name .seat-ico { opacity: 0.45; }
/* Tripulación: nombre con el sello de verificada al lado · icono del puesto junto a su desplegable */
.op-member-top { display: inline-flex; align-items: center; gap: 6px; }
.op-member-top .msg-verified { width: auto; height: 16px; }
.op-field.has-ico { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 8px; row-gap: 4px; }
.op-field.has-ico > .op-field-label { grid-column: 1 / -1; }
.op-seat.is-free .op-seat-name::after { content: " ·"; color: #e07a5f; }
.op-seat-who { color: var(--gray-100); }
.op-seat.is-free .op-seat-who { color: var(--gray-500); }
.op-ship .op-remove { align-self: flex-start; margin-top: 4px; }

/* Bodegas */
.op-holds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.op-hold { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.015); }
.op-hold-cap { margin: 0; color: var(--gray-300); font-size: 0.88rem; }
.op-hold-items { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.op-hold-items li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 10px; color: var(--gray-300); font-size: 0.92rem; }
.op-hold-res { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.op-swatch { width: 12px; height: 12px; border-radius: 2px; background: var(--c); flex-shrink: 0; }

/* Bodega en cuadraditos */
.op-hold-grid { display: grid; grid-template-columns: repeat(auto-fill, 14px); gap: 3px; }
.op-cell { width: 14px; height: 14px; border-radius: 2px; border: 1px solid #3a3a3a; background: rgba(255, 255, 255, 0.02); }
.op-cell.is-full { border-color: transparent; background: var(--c); }
.op-cell.is-new { animation: op-cell-in 0.35s ease both; }
@keyframes op-cell-in { from { transform: scale(0.2); opacity: 0; } to { transform: none; opacity: 1; } }
.op-hold-unit { margin: 6px 0 0; color: var(--gray-500); font-size: 0.75rem; }
.op-hold-items strong { color: var(--gray-100); font-variant-numeric: tabular-nums; }
/* Cargar: el recurso en su línea; debajo SCU, calidad y el botón (las tarjetas son estrechas) */
.op-hold-add { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; margin-top: 4px; }
.op-hold-add input[list] { grid-column: 1 / -1; }

/* Refinería: cada orden es una tubería (entra → tubo con la cuenta atrás → sale); con 2+ sin recoger, cronograma encima */
.op-orders { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.op-order { display: grid; gap: 10px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.015);
  transition: border-color 0.4s, background-color 0.4s, box-shadow 0.6s; scroll-margin: 90px; }
.op-order.is-ready { border-color: #2f9e57; background: rgba(47, 158, 87, 0.06); }
.op-order.is-collected { opacity: 0.75; }
.op-order.is-flash { animation: op-ref-flash 1.4s ease; }
@keyframes op-ref-flash { 0%, 40% { box-shadow: 0 0 0 2px var(--gold-light); } 100% { box-shadow: 0 0 0 2px transparent; } }
.op-order-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.op-order-name { margin: 0; font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; color: var(--gray-100); overflow-wrap: anywhere; }
.op-order-name small { font-size: 1rem; font-weight: 500; color: var(--gray-300); }
.op-order-by { color: var(--gray-300); font-size: 0.875rem; white-space: nowrap; }
.op-order-by.is-me { color: var(--gold-light); }
.op-pipe, .op-pipe-meta { display: grid; grid-template-columns: 300px minmax(0, 1fr) 300px; gap: 16px; }
.op-pipe { align-items: center; }
.op-pipe-side { display: flex; flex-wrap: wrap; align-content: center; gap: 6px; min-width: 0; }
.op-pipe-side.is-out { justify-content: flex-end; }
.op-pipe-label { width: 100%; font-family: var(--font-display); font-weight: 700; font-size: 0.65rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gray-500); }
.op-pipe-side.is-out .op-pipe-label { text-align: right; }
.op-rchip { display: inline-flex; align-items: baseline; gap: 6px; padding: 3px 10px; border: 1px solid transparent; border-radius: 4px; background: rgba(255, 255, 255, 0.06); color: var(--gray-100); font-size: 0.875rem; white-space: nowrap; }
.op-rchip q { quotes: none; color: var(--gray-500); font-size: 0.75rem; }
.op-rchip b { font-weight: 400; color: var(--gray-300); }
.op-rchip.is-est { background: transparent; border: 1px dashed #5a5a5a; color: var(--gray-300); }
.op-rchip.is-unk { background: transparent; border: 1px dashed #5a5a5a; color: var(--gray-500); font-size: 0.8rem; }
.op-rchip.is-got { background: rgba(224, 192, 104, 0.14); color: var(--gold-light); }
.op-rchip.is-got b { color: var(--gold-light); }
.op-tube { position: relative; height: 30px; min-width: 120px; border-radius: 15px; background: #232326; box-shadow: inset 0 0 0 1px #3c3c40; overflow: hidden; }
.op-tube-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; min-width: 30px; border-radius: 15px;
  background: linear-gradient(90deg, #6e5714, var(--gold) 75%, var(--gold-light)); transition: width 0.6s linear; }
.op-tube-fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.1) 0 10px, transparent 10px 20px); background-size: 28.28px 28.28px; animation: op-tube-flow 1.6s linear infinite; }
@keyframes op-tube-flow { to { background-position: 28.28px 0; } }
.op-order.is-ready .op-tube-fill { background: linear-gradient(90deg, #1d6a3a, #2f9e57); }
.op-order.is-collected .op-tube-fill { width: 100%; background: #4a4a4e; }
.op-order.is-ready .op-tube-fill::after, .op-order.is-collected .op-tube-fill::after { animation: none; background: none; }
@media (prefers-reduced-motion: reduce) { .op-tube-fill::after { animation: none; } }
.op-tube-text { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.06em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); white-space: nowrap; }
.op-order.is-ready .op-tube-text { text-transform: uppercase; }
.op-pipe-meta { margin-top: -4px; color: var(--gray-500); font-size: 0.8rem; }
.op-pipe-mid { display: flex; justify-content: space-between; gap: 10px; }
.op-pipe-meta b { color: var(--gray-300); font-weight: 600; }
.op-order.is-ready .op-pipe-end b { color: #5fd38a; }
.op-pipe-cost { text-align: right; }
.op-order-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.op-order.is-ready .op-collect { background: #2f9e57; border-color: #2f9e57; color: #fff; }

.op-rtl { margin: 0 0 14px; padding: 12px 16px 10px; border: 1px solid var(--line); border-radius: 6px; }
.op-rtl[hidden] { display: none; }
.op-rtl-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-bottom: 6px; color: var(--gray-500); font-size: 0.8rem; }
.op-rtl-head b { color: var(--gray-300); font-weight: 600; }
.op-rtl-head .is-ready { color: #5fd38a; font-weight: 600; }
.op-rtl-grid { --lb: 150px; display: grid; grid-template-columns: var(--lb) minmax(0, 1fr); }
.op-rtl-axis { position: relative; height: 18px; color: var(--gray-500); font-size: 0.7rem; }
.op-rtl-axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.op-rtl-axis span.is-first { transform: none; }
.op-rtl-axis span.is-last { transform: translateX(-100%); }
.op-rtl-body { grid-column: 1 / -1; position: relative; display: grid; grid-template-columns: var(--lb) minmax(0, 1fr); padding-bottom: 16px; }
.op-rtl-lb { height: 34px; display: flex; flex-direction: column; justify-content: center; padding-right: 10px; min-width: 0; cursor: pointer; }
.op-rtl-lb b { font-family: var(--font-display); font-size: 0.95rem; line-height: 1.1; color: var(--gray-100); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-rtl-lb small { color: var(--gray-500); font-size: 0.7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.op-rtl-tr { position: relative; height: 34px; cursor: pointer; }
.op-rtl-gl { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.06); }
.op-rtl-seg { position: absolute; top: 9px; height: 16px; border: 1px solid rgba(201, 162, 39, 0.55); border-radius: 4px; background: rgba(201, 162, 39, 0.18); }
.op-rtl-seg > i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px 0 0 3px; background: var(--gold); }
.op-rtl-seg.is-ready { border-color: #2f9e57; background: rgba(47, 158, 87, 0.3); }
.op-rtl-seg.is-ready > i { border-radius: 3px; background: #2f9e57; }
.op-rtl-seg > em { position: absolute; left: calc(100% + 6px); top: -1px; font-family: var(--font-display); font-weight: 700; font-size: 0.8rem; font-style: normal; color: var(--gray-300); white-space: nowrap; }
.op-rtl-seg.is-flip > em { left: auto; right: 8px; color: var(--gray-100); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8); }
.op-rtl-seg.is-ready > em { color: #5fd38a; }
.op-rtl-lb:hover + .op-rtl-tr .op-rtl-seg, .op-rtl-tr:hover .op-rtl-seg { box-shadow: 0 0 0 1px var(--gold-light); }
.op-rtl-now { position: absolute; top: -20px; bottom: 0; width: 2px; margin-left: -1px; background: #e05a5a; pointer-events: none;
  left: calc(var(--lb) + (100% - var(--lb)) * var(--f, 0)); }
.op-rtl-now::before { content: "AHORA"; position: absolute; bottom: 0; left: 5px; font-family: var(--font-display); font-weight: 700; font-size: 0.62rem; letter-spacing: 0.12em; color: #e05a5a; }
.op-rtl-now.is-flip::before { left: auto; right: 5px; }

@media (max-width: 1199px) {
  .op-pipe, .op-pipe-meta { grid-template-columns: 220px minmax(0, 1fr) 220px; }
}
@media (max-width: 760px) {
  .op-order { padding: 12px 14px; }
  .op-order-top { flex-wrap: wrap; }
  .op-pipe, .op-pipe-meta { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .op-pipe-side.is-out { justify-content: flex-start; }
  .op-pipe-side.is-out .op-pipe-label, .op-pipe-cost { text-align: left; }
  .op-pipe-gap { display: none; }
  .op-rtl { padding: 10px 12px 8px; }
  .op-rtl-grid { --lb: 84px; }
}

/* Ventas y pagos */
.op-money { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.op-money-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.op-money-head .op-sub { margin: 0; }
.op-money-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.op-money-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto 32px; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--gray-800); color: var(--gray-300); }
.op-money-list li.empty { display: block; border: none; }
.op-money-list strong { color: var(--gray-100); font-variant-numeric: tabular-nums; }
.op-auto { color: var(--gray-500); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; text-align: center; }
.op-net { margin: 18px 0 22px; padding: 12px 16px; border: 1px solid var(--gray-700); border-radius: 6px; color: var(--gray-300); }
.op-net strong { color: var(--gray-100); font-variant-numeric: tabular-nums; }
.op-net .op-net-value { color: var(--gold-light); font-family: var(--font-display); font-size: 1.25rem; }
.op-split { margin-bottom: 18px; }
.op-split-table td, .op-split-table th { vertical-align: middle; }
.op-pct { width: 80px; text-align: right; }
.op-finish { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 16px; border-top: 1px solid var(--gray-800); }
.op-finish .op-note { max-width: 70ch; }

/* Ventana */
.op-dialog-body { display: grid; gap: 12px; }
.op-check-list { margin: 0; padding: 0; border: none; display: grid; gap: 8px; }
.op-check-list legend { padding: 0; margin-bottom: 6px; }
.op-check-list .check, .op-check-list .radio { color: var(--gray-100); }
.radio { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.radio input { width: 18px; height: 18px; accent-color: var(--gold); margin: 0; }
.op-src { display: grid; gap: 12px; }
.op-src[hidden] { display: none; }
.op-dialog .field select { width: 100%; max-width: none; }
.op-estimate { margin: 0; color: var(--gold-light); font-size: 0.88rem; }
.op-dialog-error:empty { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .op-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-summary { grid-template-columns: 1fr; }
  .op-member { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  .op-member .op-field { grid-column: span 1; }
  .op-member > .op-field:nth-of-type(1) { grid-column: 2; }
  .op-member > .op-field:nth-of-type(2) { grid-column: 3; }
  .op-member-actions { grid-column: 2 / -1; }
}
@media (max-width: 760px) {
  .op-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .op-steps [role="tab"]:last-child { grid-column: 1 / -1; }
  .op-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .op-kpi .kpi-sub { display: none; }
  .op-kpi .kpi-value { font-size: 1.1rem; }
  /* Bodegas: nombre y cifra arriba, cuadros debajo */
  .op-sum-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 6px; }
  .op-sum-cells { grid-column: 1 / -1; grid-row: 2; grid-template-columns: repeat(20, minmax(0, 1fr)); width: 100%; }
  .op-sum-cell { width: auto; aspect-ratio: 1; height: auto; }
  .step-long { display: none; }   /* "Ventas y pagos" → "Ventas" para que quepa */
  .op-h-icon { height: 60px; max-width: 72px; }
  .op-header-id { gap: 12px; }
  .op-header-side { align-items: flex-start; }
  .op-h-acts { justify-content: flex-start; }
  .op-member { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
  .op-member > .op-field:nth-of-type(1), .op-member > .op-field:nth-of-type(2), .op-member-actions { grid-column: 1 / -1; }
  .op-money { grid-template-columns: 1fr; }
  .op-split-table { font-size: 0.85rem; }
  .op-split-table .btn-sm { padding: 5px 8px; font-size: 0.72rem; }
}

/* ---------- Carga: bodegas, almacenes, registro ---------- */
.op-cargo-help { margin: -6px 0 16px; }
.op-cargo-title { margin: 18px 0 10px; }
.op-hold-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.op-hold-top .op-ship-name { font-size: 1.1rem; }
.op-perm { color: var(--gray-500); font-size: 0.78rem; }
.op-hold.is-mine { border-color: rgba(201, 162, 39, 0.55); }
.op-hold.is-mine .op-perm { color: var(--gold-light); }
.op-move { align-self: flex-start; }
.op-stores { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.op-stores .empty { grid-column: 1 / -1; }
.op-store { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border: 1px dashed #555; border-radius: 6px; }
.op-log { margin-top: 20px; }
.op-log summary { color: var(--gray-300); cursor: pointer; font-size: 0.92rem; }
.op-log summary:hover { color: var(--gold-light); }
.op-log-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; max-height: 320px; overflow-y: auto; }
.op-log-list li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; color: var(--gray-300); font-size: 0.88rem; }
.op-log-time { color: var(--gray-500); font-variant-numeric: tabular-nums; }
.op-pilot-perm { margin-top: 4px; font-size: 0.88rem; }
.op-sum-store { margin-top: 6px; font-size: 0.85rem; }

/* Ventana "Mover carga" */
.op-move-row { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 10px; }
.op-move-row input[type="number"] { width: 90px; }
.op-move-max { color: var(--gray-500); font-size: 0.8rem; white-space: nowrap; }
.op-move-dest { grid-template-columns: 1fr 1fr; }
.op-move-dest legend { grid-column: 1 / -1; }
.op-dest { align-items: flex-start; padding: 10px 12px; border: 1px solid var(--gray-700); border-radius: 6px; }
.op-dest:has(input:checked) { border-color: var(--gold); background: rgba(201, 162, 39, 0.08); }
.op-dest input { margin-top: 3px; }
.op-dest span { display: flex; flex-direction: column; }
.op-dest strong { color: var(--gray-100); font-weight: 600; }
.op-dest small { color: var(--gray-500); font-size: 0.78rem; }
.op-dialog .op-move-row input, .op-dialog .field input { padding: 8px 10px; border: 1px solid var(--gray-700); border-radius: 4px; background: var(--black); color: var(--gray-100); font: inherit; }
@media (max-width: 760px) {
  .op-move-dest { grid-template-columns: 1fr; }
  .op-log-list li { grid-template-columns: 1fr; gap: 0; }
}

/* Operaciones de verdad (fase 1): borrar / salir y aviso de lo que llega después */
.op-danger { margin-top: 20px; padding-top: 14px; border-top: 1px dashed var(--gray-700); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.op-danger .op-note { margin: 0; flex: 1 1 260px; }
.op-soon { margin: 12px 0 0; }

/* Tripulante externo (EXT): sin cuenta en Dear Citizen */
.op-member-tag--ext { border-color: var(--gray-500); color: var(--gray-300); }
.op-member-handle { display: block; font-size: 0.8rem; color: var(--gray-500); }
.op-crew-ext { margin-left: 4px; font-size: 0.7rem; letter-spacing: 0.06em; color: var(--gray-500); border: 1px solid var(--gray-700); border-radius: 3px; padding: 0 4px; }

/* Añadir nave (operaciones de verdad) */
.op-add-ship-custom { display: grid; gap: 12px; }
.op-add-ship-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.op-dialog select { width: 100%; }
.op-ships-help { margin: -4px 0 14px; }

/* Puestos configurables (operaciones de verdad): nombres largos ("Operador de cabezal láser 2"), botón × y "+ Puesto" */
.op-seat { grid-template-columns: minmax(90px, 0.9fr) minmax(0, 1.1fr) 28px; }
.op-seat-name { line-height: 1.25; }
.op-seat-del { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 4px; background: none; color: var(--gray-500); cursor: pointer; font-size: 1rem; line-height: 1; }
.op-seat-del:hover, .op-seat-del:focus-visible { color: #e07a5f; border-color: #e07a5f; }
.op-seat-add { display: flex; gap: 8px; margin-top: 10px; }
.op-seat-add select { flex: 1 1 auto; min-width: 0; }
.op-seat-add .btn-sm { white-space: nowrap; flex: none; }

/* ---------- Simulador de bodega (js/bodega.js) ---------- */
.op-hold-sim { justify-self: start; margin: 2px 0 6px; }
.hold-dialog { width: min(1180px, calc(100vw - 24px)); max-width: none; max-height: calc(100vh - 24px); padding: 22px 24px; overflow: auto; }
.hold-head { margin-bottom: 12px; padding-right: 36px; }
.hold-head .login-title { margin: 2px 0 4px; }
.hold-sub { margin: 0; color: var(--gray-500); font-size: 0.88rem; }
.hold-body { display: grid; grid-template-columns: minmax(0, 1fr) 270px; gap: 16px; }
.hold-stage { position: relative; min-height: 420px; height: min(68vh, 640px); border: 1px solid var(--gray-800); border-radius: 6px;
  background: radial-gradient(ellipse at center, rgba(201, 162, 39, 0.06), rgba(0, 0, 0, 0.35)); overflow: hidden; }
.hold-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: grab; }
.hold-canvas.is-grabbing { cursor: grabbing; }
.hold-canvas:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.hold-hud { position: absolute; top: 10px; left: 10px; margin: 0; padding: 4px 10px; border: 1px solid rgba(201, 162, 39, 0.3); border-radius: 4px;
  background: rgba(0, 0, 0, 0.7); color: var(--gray-100); font-size: 0.85rem; pointer-events: none; }
.hold-zoom { position: absolute; top: 10px; right: 10px; display: flex; align-items: center; gap: 4px; padding: 4px; border: 1px solid rgba(201, 162, 39, 0.3);
  border-radius: 4px; background: rgba(0, 0, 0, 0.7); }
.hold-zoom button { min-width: 30px; height: 30px; padding: 0 8px; border: 1px solid var(--gray-700); border-radius: 4px; background: none; color: var(--gold); cursor: pointer; font: inherit; }
.hold-zoom button:hover, .hold-zoom button:focus-visible { border-color: var(--gold); }
.hold-zoom-val { min-width: 46px; text-align: center; color: var(--gray-300); font-size: 0.8rem; }
.hold-sel { position: absolute; left: 10px; right: 10px; bottom: 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; border: 1px solid var(--gold); border-radius: 4px; background: rgba(0, 0, 0, 0.8); }
.hold-sel[hidden] { display: none; }
.hold-sel-text { margin: 0; color: var(--gray-100); font-size: 0.88rem; }
.hold-side { display: grid; align-content: start; gap: 10px; min-width: 0; }
.hold-side .op-next-title { margin: 0; }
.hold-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: 260px; overflow-y: auto; }
.hold-legend li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 4px; }
.hold-legend li.empty { display: block; color: var(--gray-500); }
.hold-legend-res { display: flex; align-items: center; gap: 8px; color: var(--gray-100); min-width: 0; overflow-wrap: anywhere; }
.hold-legend strong { color: var(--gray-100); }
.hold-legend small { grid-column: 1 / -1; color: var(--gray-500); }
.hold-warn { margin: 0; color: #e07a5f; font-size: 0.88rem; }
.hold-warn[hidden] { display: none; }
.hold-repack { justify-self: start; }
.hold-help, .hold-note { margin: 0; color: var(--gray-500); font-size: 0.8rem; line-height: 1.45; }
@media (max-width: 860px) {
  .hold-dialog { padding: 18px 14px; }
  .hold-body { grid-template-columns: 1fr; }
  .hold-stage { height: 56vh; min-height: 300px; }
  .hold-hud { top: auto; bottom: 10px; }                 /* arriba no cabe junto al zoom */
  .hold-sel { bottom: 46px; }
  .hold-sel { flex-wrap: wrap; }
}
/* Simulador: cajas de cada recurso (mezcla de tamaños) y plan compartido */
.hold-hand { grid-column: 1 / -1; display: grid; gap: 6px; margin-top: 4px; }
.hold-hand summary { cursor: pointer; color: var(--gold); font-size: 0.82rem; width: max-content; }
.hold-hand[open] summary { margin-bottom: 4px; }
.hold-hand-row { display: flex; flex-wrap: wrap; gap: 6px; }
.hold-hand-row label { display: grid; gap: 2px; font-size: 0.72rem; color: var(--gray-500); text-align: center; }
.hold-hand-row input { width: 54px; padding: 4px; border: 1px solid var(--gray-700); border-radius: 4px; background: var(--black); color: var(--gray-100); font: inherit; text-align: center; }
.hold-hand-info { margin: 4px 0 0; font-size: 0.78rem; color: var(--gray-300); }
.hold-hand-acts { display: flex; align-items: center; gap: 12px; }
.hold-legend { max-height: none; overflow: visible; }   /* el diálogo ya tiene scroll */
.hold-plan { margin: 0; padding: 8px 10px; border: 1px solid rgba(201, 162, 39, 0.3); border-radius: 4px; color: var(--gray-100); font-size: 0.82rem; line-height: 1.45; }
.hold-plan:empty { display: none; }
.hold-dialog.is-readonly .hold-canvas { cursor: default; }


/* Sacos de mineral (MOLE, Prospector, Golem) */
.op-sack-content { grid-column: 1 / -1; margin: -2px 0 2px 20px; color: var(--gray-500); font-size: 0.8rem; }
.op-swatch--sack { border-radius: 50%; }
.op-sack-size { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 0.85rem; color: var(--gray-500); }
.op-sack-size select { padding: 4px 6px; border: 1px solid var(--gray-700); border-radius: 4px; background: var(--black); color: var(--gray-100); font: inherit; }

/* Refinería (fase 4): orden con lo que dice la terminal, recoger y ¿dónde refinar? */
.op-ref-nums { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.op-ref-out-rows, .op-sell-row-list { display: grid; gap: 8px; }
.op-ref-out, .op-sell-row { display: grid; grid-template-columns: minmax(0, 1fr) 110px minmax(0, auto); align-items: center; gap: 10px; color: var(--gray-100); }
.op-ref-out input, .op-sell-row input { width: 110px; padding: 8px 10px; border: 1px solid var(--gray-700); border-radius: 4px; background: var(--black); color: var(--gray-100); font: inherit; }
.op-ref-in, .op-sell-unit { color: var(--gray-500); font-size: 0.8rem; white-space: nowrap; font-variant-numeric: tabular-nums; }
.op-ref-bonus { color: var(--gray-300); }
.op-where { margin-top: 18px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 6px; }
.op-where summary { cursor: pointer; color: var(--gray-100); font-weight: 600; }
.op-where[open] summary { margin-bottom: 10px; }
.op-where-best { margin: 0 0 10px; color: var(--gold-light); }
.op-table-wrap { overflow-x: auto; }
.op-where-table .num { text-align: right; font-variant-numeric: tabular-nums; }
/* Ventas y gastos: debajo del concepto, dónde, quién y el precio por SCU */
.op-money-what { display: flex; flex-direction: column; min-width: 0; }
.op-money-what small { color: var(--gray-500); font-size: 0.78rem; }
@media (max-width: 600px) {
  .op-ref-nums { grid-template-columns: 1fr 1fr; }
  .op-ref-nums .field:first-child { grid-column: 1 / -1; }
  .op-ref-out, .op-sell-row { grid-template-columns: minmax(0, 1fr) 96px; }
  .op-ref-out input, .op-sell-row input { width: 96px; }
  .op-ref-in, .op-sell-unit { grid-column: 1 / -1; margin-top: -4px; }
}

/* Reparto (fase 5): tabla, pagos entre la tripulación y comisión */
.op-split-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.op-split-table .op-share { color: var(--gold-light); font-weight: 600; }
.op-split-table .op-pct { padding: 6px 8px; border: 1px solid var(--gray-700); border-radius: 4px; background: var(--black); color: var(--gray-100); font: inherit; }
.op-transfers-title { margin: 18px 0 8px; font-size: 1rem; }
.op-transfers { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 6px; }
.op-transfer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, auto); align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; }
.op-transfer.is-paid { opacity: 0.75; }
.op-transfer-what { display: flex; flex-direction: column; min-width: 0; color: var(--gray-100); }
.op-transfer-what small { color: var(--gray-500); font-size: 0.78rem; }
.op-transfer-amount { color: var(--gray-100); font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-transfer-state { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }
.op-transfers li.empty { color: var(--gray-500); }
.op-fee { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 16px; color: var(--gray-300); font-size: 0.88rem; }
.op-fee input { width: 90px; padding: 6px 8px; border: 1px solid var(--gray-700); border-radius: 4px; background: var(--black); color: var(--gray-100); font: inherit; }
@media (max-width: 600px) {
  .op-transfer { grid-template-columns: minmax(0, 1fr) auto; }
  .op-transfer-state { grid-column: 1 / -1; justify-content: flex-start; }
}

/* Refinería: comparativa de métodos, etiqueta "Refinado" y órdenes sin recoger en Carga */
.op-ref-methods { display: grid; gap: 8px; }
.op-ref-methods:empty { display: none; }
.op-ref-table { font-size: 0.85rem; }
.op-ref-table caption { font-size: 0.85rem; }
.op-ref-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-ref-table tr.is-on td { background: rgba(201, 162, 39, 0.08); color: var(--gray-100); }
.op-ref-table td small.op-ref-tag { display: block; color: var(--gold-light); font-size: 0.72rem; }
.op-ref-methods > .btn-ghost { justify-self: start; }
.op-tag-ref { margin-left: 8px; padding: 1px 6px; border: 1px solid var(--gold); border-radius: 3px; color: var(--gold-light); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; vertical-align: middle; }
.op-store--refine { border-style: dashed; }
.op-store--refine.is-ready { border-color: #2f9e57; border-style: solid; }
.op-store--refine.is-ready .op-perm { color: #5fd38a; }
.op-ref-table .op-ref-profit { color: var(--gold-light); font-weight: 600; }
/* Comparativa en el móvil: sin valor ni coste (el beneficio ya los resume) */
@media (max-width: 600px) {
  .op-ref-table .op-col-extra { display: none; }
  .op-ref-table td, .op-ref-table th { padding: 6px 4px; }
}
.op-ref-name { overflow-wrap: anywhere; }
.op-ref-pick { padding: 0; text-align: left; }
.op-ref-pick[aria-pressed="true"] { color: var(--gray-100); font-weight: 700; text-decoration: none; }
.op-ref-pick[aria-pressed="true"]::after { content: " ✓"; color: var(--gold-light); }
/* Comparativa plegada y "lo que sale" como estimación */
.op-ref-compare { border: 1px solid var(--gray-800); border-radius: 6px; padding: 8px 12px; }
.op-ref-compare summary { cursor: pointer; color: var(--gray-100); font-size: 0.9rem; }
.op-ref-compare[open] summary { margin-bottom: 8px; }
.op-ref-outs { display: grid; gap: 6px; justify-items: start; }
.op-ref-out-sum { margin: 0; color: var(--gold-light); font-size: 0.9rem; }
.op-ref-out-rows { display: grid; gap: 8px; width: 100%; }
.op-ref-out-rows[hidden] { display: none; }
.op-ref-nums-note { margin: -4px 0 0; font-size: 0.8rem; }
/* Venta: dónde se paga mejor (UEX) */
.op-sell-where { border: 1px solid var(--gray-800); border-radius: 6px; padding: 8px 12px; }
.op-sell-where summary { cursor: pointer; color: var(--gray-100); font-size: 0.9rem; }
.op-sell-where[open] summary { margin-bottom: 8px; }
.op-sell-table { font-size: 0.85rem; }
.op-sell-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.op-sell-best { margin: 0 0 8px; padding-left: 18px; color: var(--gray-300); font-size: 0.85rem; }
@media (max-width: 600px) { .op-sell-table .op-col-extra { display: none; } .op-sell-table td, .op-sell-table th { padding: 6px 4px; } }
.op-sell-table td small.op-ref-tag { display: block; font-size: 0.72rem; }

/* ---------- Incursión: escuadras, combate e informe ---------- */
.op-crew-list--raid .op-member { grid-template-columns: 36px minmax(110px, 1fr) minmax(130px, 1fr) minmax(180px, 1.4fr) minmax(130px, 1fr) 150px; }
.op-squads { margin: 0 0 18px; padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.op-squad-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.op-squad { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: 6px; background: rgba(255, 255, 255, 0.015); }
.op-squad-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-squad-title { font-family: var(--font-display); font-size: 1.15rem; color: var(--gray-100); }
.op-squad-name { flex: 1 1 auto; min-width: 0; padding: 6px 8px; border: 1px solid var(--gray-700); border-radius: 4px; background: var(--black); color: var(--gray-100); font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; }
.op-squad-name:focus { outline: none; border-color: var(--gold); }
.op-squad-count { color: var(--gray-500); font-size: 0.8rem; white-space: nowrap; }
.op-squad-people { margin: 0; color: var(--gray-300); font-size: 0.85rem; }
.op-squad .op-remove { align-self: flex-start; }

/* Estado: chip de color (persona o nave) */
.op-state { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border: 1px solid currentColor; border-radius: 999px; font-family: var(--font-display); font-weight: 700; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; }
.op-state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.op-state--activo, .op-state--lista { color: #5fd38a; }
.op-state--combate { color: var(--gold-light); }
.op-state--abatido, .op-state--destruida { color: #e07a5f; }
.op-state--reapareciendo, .op-state--rearmando { color: #e0b05f; }
.op-state--fuera { color: var(--gray-500); }
.op-steps .needs-alert { border-color: #e07a5f; }
.op-steps .needs-alert .step-info { color: #e07a5f; }

/* Botones de estado: el pulsado, con el color de su estado */
.op-state-seg { display: flex; flex-wrap: wrap; gap: 6px; }
.op-state-seg .op-state-btn { flex: 1 1 0; min-width: 0; padding: 10px 8px; font-size: 0.8rem; }
.op-state-seg .op-state-btn[aria-pressed="true"] { color: var(--gray-800); }
.op-state-seg .op-state-btn--activo[aria-pressed="true"], .op-state-seg .op-state-btn--lista[aria-pressed="true"] { background: #2f9e57; border-color: #2f9e57; }
.op-state-seg .op-state-btn--abatido[aria-pressed="true"], .op-state-seg .op-state-btn--destruida[aria-pressed="true"] { background: #c8553d; border-color: #c8553d; }
.op-state-seg .op-state-btn--reapareciendo[aria-pressed="true"], .op-state-seg .op-state-btn--rearmando[aria-pressed="true"] { background: #d19a3b; border-color: #d19a3b; }
.op-state-seg .op-state-btn--fuera[aria-pressed="true"] { background: var(--gray-500); border-color: var(--gray-500); }

.op-state-seg .op-state-btn--combate[aria-pressed="true"] { background: var(--gold); border-color: var(--gold); }
/* En la tarjeta de una nave, los cuatro botones en 2 × 2 (si no, no caben) */
.op-raid-ship .op-state-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.op-me-state { margin: 0 0 8px; padding: 14px 16px; border: 1px solid rgba(201, 162, 39, 0.5); border-radius: 6px; background: rgba(201, 162, 39, 0.05); }
.op-me-state .op-state-btn { padding: 14px 8px; font-size: 0.9rem; }
.op-me-state .op-note { margin: 8px 0 0; }

.op-raid-ships { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.op-raid-ship { display: flex; flex-direction: column; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-left: 3px solid #5fd38a; border-radius: 6px; background: rgba(255, 255, 255, 0.015); }
.op-raid-ship.is-combate { border-left-color: var(--gold); }
.op-raid-ship.is-rearmando { border-left-color: #e0b05f; }
.op-raid-ship.is-destruida { border-left-color: #e07a5f; }
.op-raid-ship.is-destruida .ship-hex { filter: grayscale(1) brightness(0.7); }
.op-raid-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.op-raid-text { display: flex; flex-direction: column; min-width: 0; }
.op-raid-text strong { color: var(--gray-100); font-family: var(--font-display); font-size: 1.05rem; }
.op-raid-text small { color: var(--gray-500); font-size: 0.8rem; }
.op-raid-info { margin: 0; font-size: 0.85rem; }
.op-back { color: #e0b05f; font-variant-numeric: tabular-nums; }

.op-raid-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.op-raid-group { padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; }
.op-raid-group-title { margin: 0 0 8px; color: var(--gold-light); font-family: var(--font-display); font-size: 1.05rem; letter-spacing: 0.04em; }
.op-raid-group-title small { color: var(--gray-500); font-family: inherit; font-size: 0.85rem; font-weight: 400; letter-spacing: 0; }
.op-raid-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.op-raid-person { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 8px 10px; border-left: 3px solid #5fd38a; background: rgba(255, 255, 255, 0.02); border-radius: 0 4px 4px 0; }
.op-raid-person.is-abatido { border-left-color: #e07a5f; background: rgba(224, 122, 95, 0.07); }
.op-raid-person.is-reapareciendo { border-left-color: #e0b05f; }
.op-raid-person.is-fuera { border-left-color: var(--gray-700); opacity: 0.7; }
.op-raid-who { display: flex; flex-direction: column; min-width: 0; }
.op-raid-who strong { color: var(--gray-100); }
.op-raid-who small { color: var(--gray-500); font-size: 0.8rem; overflow-wrap: anywhere; }
.op-raid-state { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; text-align: right; }
.op-raid-place { color: #e0b05f; font-size: 0.8rem; }
.op-raid-state .op-note { margin: 0; font-size: 0.75rem; }
.op-raid-select { grid-column: 1 / -1; width: 100%; padding: 6px 8px; border: 1px solid var(--gray-700); border-radius: 4px; background: var(--black); color: var(--gray-100); font: inherit; font-size: 0.85rem; }

.op-report { margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 6px; }
details.op-report > summary { cursor: pointer; margin: 0; }
details.op-report[open] > summary { margin-bottom: 10px; }
.op-report-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px 18px; margin: 0; }
.op-report-facts dt { color: var(--gray-500); font-family: var(--font-display); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.op-report-facts dd { margin: 2px 0 0; color: var(--gray-100); }
.op-cat-line { margin: 8px 0 0; }

@media (max-width: 1199px) {
  .op-crew-list--raid .op-member { grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); }
  .op-crew-list--raid .op-member > .op-field:nth-of-type(3) { grid-column: 2; }
}
@media (max-width: 760px) {
  .op-crew-list--raid .op-member { grid-template-columns: auto minmax(0, 1fr); }
  .op-crew-list--raid .op-member > .op-field:nth-of-type(3) { grid-column: 1 / -1; }
  .op-state-seg .op-state-btn { flex-basis: calc(50% - 3px); }
}

/* ---------- Operación programada (aún no ha empezado) ---------- */
.op-plan { margin-top: 16px; border-left: 3px solid rgba(96, 165, 250, 0.55); }
.op-plan[hidden] { display: none; }
.op-plan:focus { outline: none; }
.op-plan:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.op-plan-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 14px 24px; }
.op-plan-when { margin: 2px 0 4px; font-family: var(--font-display); font-size: 1.5rem; color: var(--gray-100); }
.op-plan-when::first-letter { text-transform: uppercase; }
.op-plan-left-line { margin: 0; color: var(--gray-500); font-size: 0.9rem; }
.op-plan-left { color: #8cc0ff; font-weight: 600; font-variant-numeric: tabular-nums; }
.op-plan.is-overdue { border-left-color: rgba(217, 162, 95, 0.6); }
.op-plan.is-overdue .card-kicker, .op-plan-ago { color: #d9a25f; font-weight: 600; }
.op-plan-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.op-plan-actions .is-due { box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.35); }
.op-plan-asks { margin-top: 16px; }
.op-plan-ask-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.op-plan-ask-list li { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 6px; }
.op-plan-ask-list strong { flex: 1 1 140px; color: var(--gray-100); }
.op-plan-line { margin: 12px 0 0; color: var(--gray-300); font-size: 0.92rem; }
.op-plan-visible { margin-top: 14px; }
@media (max-width: 520px) {
  .op-plan-actions { width: 100%; }
  .op-plan-actions > * { flex: 1 1 auto; }
}

/* ---------- Contratos de transporte (logística) ---------- */
.op-contracts-box { display: grid; gap: 10px; margin-bottom: 8px; }
.op-contracts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }
/* Cada contrato lleva su color a la izquierda: el mismo de sus cajas en la bodega y en el simulador */
.op-contract { position: relative; display: grid; gap: 8px; padding: 12px 14px 12px 18px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255, 255, 255, 0.015); overflow: hidden; }
.op-contract::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--k); }
.op-contract.is-delivered, .op-contract.is-failed { opacity: 0.7; }
.op-contract.is-delivered::before, .op-contract.is-failed::before { opacity: 0.5; }
.op-contract-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.op-contract-name { margin: 0; min-width: 0; color: var(--gray-100); font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; overflow-wrap: anywhere; }
.op-k-tag { display: inline-block; padding: 0 6px; border-radius: 3px; background: var(--k, var(--c)); color: #0d0d0d; font-family: var(--font-display); font-size: 0.75rem; font-weight: 700; line-height: 1.5; vertical-align: 1px; }
.op-contract-state { flex: none; color: var(--gray-500); font-size: 0.78rem; white-space: nowrap; }
.op-contract-state.is-loaded { color: var(--gold-light); }
.op-contract-state.is-delivered { color: #5fd38a; }
.op-contract-state.is-failed { color: #e05a5a; }
.op-contract-route { margin: 0; color: var(--gray-300); font-size: 0.9rem; }
.op-contract-to { color: var(--gray-100); font-weight: 600; }
.op-contract-route small { color: var(--gray-500); font-size: 0.78rem; font-weight: 400; }
.op-contract-arrow { color: var(--gray-500); }
.op-contract-boxes { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.op-contract-boxes li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 10px; align-items: baseline; color: var(--gray-300); font-size: 0.86rem; }
.op-contract-mix { color: var(--gray-500); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.op-contract-boxes strong { color: var(--gray-100); font-variant-numeric: tabular-nums; }
/* Dónde va cada caja (repartido o entregado en parte) */
.op-contract-where { list-style: none; margin: 0; padding: 6px 0 0; display: grid; gap: 3px; border-top: 1px dashed var(--gray-800); }
.op-contract-where li { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr) auto; gap: 10px; align-items: baseline; font-size: 0.82rem; color: var(--gray-300); }
.op-contract-where-at { min-width: 0; overflow-wrap: anywhere; }
.op-contract-where li.is-ship .op-contract-where-at::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 2px; background: var(--k); vertical-align: 1px; }
.op-contract-where li.is-pending { color: var(--gray-500); }
.op-contract-where li.is-done { color: #5fd38a; }
.op-contract-where strong { color: var(--gray-100); font-variant-numeric: tabular-nums; }
.op-contract-where li.is-done strong { color: #5fd38a; }
.op-contract-progress { margin: 0; color: var(--gray-500); font-size: 0.8rem; }
.op-contract-pay { margin: 0; color: var(--gold-light); font-family: var(--font-display); font-weight: 700; font-variant-numeric: tabular-nums; }
.op-contract-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding-top: 4px; border-top: 1px solid var(--gray-800); }
.op-contract-del { color: var(--gray-500); }
.op-contract-add { justify-self: start; }
/* En la bodega: la carga de un contrato, con su número y adónde va */
.op-hold-items li.is-contract .op-k-tag { margin-right: 2px; }
.op-hold-items .op-k-dest { grid-column: 1 / -1; padding-left: 20px; color: var(--gray-500); font-size: 0.78rem; }
.hold-legend-info { color: var(--gray-300) !important; }
/* Ventana del contrato: cajas por mercancía y tamaño */
.op-k-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* De dónde a dónde (placePicker de layout.js): sistema · astro · zona */
.place-picker { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 4px; }
.place-picker legend { padding: 0; margin-bottom: 4px; }
.place-picker-row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr) minmax(0, 1.3fr); gap: 10px; }
.place-picker select, .place-picker input { width: 100%; max-width: none; }
.place-picker-row .field-label { color: var(--gray-500); font-size: 0.68rem; }
.place-picker + .place-picker { margin-top: 4px; }
.op-k-boxes { margin: 0; padding: 0; border: 0; min-width: 0; display: grid; gap: 6px; }
.op-k-boxes legend { padding: 0; margin-bottom: 6px; }
.op-k-box-rows { display: grid; gap: 6px; }
.op-k-box-row { display: grid; grid-template-columns: minmax(110px, 1.6fr) repeat(7, minmax(38px, 1fr)) 52px; gap: 4px; align-items: end; }
.op-k-size { display: grid; gap: 2px; }
.op-k-size span { color: var(--gray-500); font-size: 0.7rem; text-align: center; font-variant-numeric: tabular-nums; }
.op-k-box-row input { width: 100%; min-width: 0; padding: 7px 4px; border: 1px solid var(--gray-700); border-radius: 4px; background: var(--black); color: var(--gray-100); font: inherit; text-align: center; font-variant-numeric: tabular-nums; }
.op-k-box-row input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25); }
.op-k-box-row input::placeholder { color: var(--gray-700); }
.op-k-box-row input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.op-k-box-row input[type="number"]::-webkit-inner-spin-button, .op-k-box-row input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.op-k-box-row input.op-k-res { text-align: left; padding: 7px 8px; }
.op-k-row-scu { padding-bottom: 8px; color: var(--gray-300); font-size: 0.85rem; text-align: right; font-variant-numeric: tabular-nums; }
.op-k-help { margin-top: -4px; }
.op-k-more { justify-self: start; }
/* Elegir cajas (cargar, mover, entregar por partes) */
.op-k-pick { display: grid; gap: 6px; }
.op-k-pick-row { display: grid; grid-template-columns: minmax(90px, 0.8fr) minmax(0, 2fr); gap: 10px; align-items: center; padding: 6px 8px; border: 1px solid var(--gray-800); border-radius: 6px; }
.op-k-pick-res { color: var(--gray-100); font-weight: 600; overflow-wrap: anywhere; }
.op-k-pick-sizes { display: flex; flex-wrap: wrap; gap: 6px 12px; }
.op-k-pick-size { display: inline-flex; align-items: center; gap: 6px; color: var(--gray-500); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.op-k-pick-size input { width: 52px; padding: 6px 4px; border: 1px solid var(--gray-700); border-radius: 4px; background: var(--black); color: var(--gray-100); font: inherit; text-align: center; font-variant-numeric: tabular-nums; }
.op-k-pick-size input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 2px rgba(201, 162, 39, 0.25); }
.op-k-pick-size input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
.op-k-pick-size input[type="number"]::-webkit-inner-spin-button, .op-k-pick-size input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.op-k-pick-label { margin: 4px 0 -6px; }
@media (max-width: 560px) { .op-k-pick-row { grid-template-columns: 1fr; } }
@media (max-width: 600px) {
  .op-k-row { grid-template-columns: 1fr; }
  .place-picker-row { grid-template-columns: 1fr 1fr; }
  .place-picker-row .field:last-child { grid-column: 1 / -1; }
  /* Móvil: la mercancía arriba; debajo, los tamaños (con su número encima) */
  .op-k-box-row { grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 8px; border: 1px solid var(--gray-800); border-radius: 6px; }
  .op-k-box-row input.op-k-res { grid-column: 1 / -1; }
  .op-k-row-scu { grid-column: 1 / -1; padding: 0; text-align: left; }
}

/* Ventana de finalizar con algo pendiente */
.op-finish-pend { margin: 8px 0 12px; padding-left: 20px; color: var(--gray-100); display: grid; gap: 4px; }

/* Pestaña Carga: bloques plegables con su resumen */
.op-cargo-sec { border-top: 1px solid var(--gray-800); }
.op-cargo-sec:last-of-type { border-bottom: 1px solid var(--gray-800); }
.op-cargo-sec-head { display: flex; align-items: baseline; gap: 6px 14px; flex-wrap: wrap; padding: 14px 4px; cursor: pointer; list-style: none; }
.op-cargo-sec-head::-webkit-details-marker { display: none; }
.op-cargo-sec-head::before { content: ""; flex: none; align-self: center; width: 7px; height: 7px; border-right: 2px solid var(--gold); border-bottom: 2px solid var(--gold); transform: rotate(-45deg); transition: transform 0.2s ease; }
.op-cargo-sec[open] > .op-cargo-sec-head::before { transform: rotate(45deg); }
.op-cargo-sec-head .op-sub { margin: 0; }
.op-cargo-sec-sum { color: var(--gray-500); font-size: 0.86rem; font-variant-numeric: tabular-nums; }
.op-cargo-sec-head:hover .op-sub { color: var(--gold-light); }
.op-cargo-sec-head:focus-visible { outline: 2px solid var(--gold-light); outline-offset: -2px; border-radius: 4px; }
.op-cargo-sec-body { padding: 0 0 18px; }
@media (prefers-reduced-motion: reduce) { .op-cargo-sec-head::before { transition: none; } }

/* Aviso: la operación sale en el directo de alguien (modo directo) */
.op-h-live { margin: 8px 0 0; color: var(--gray-300); font-size: 0.85rem; }
.op-h-live strong { color: #f08a8a; letter-spacing: .04em; }
.op-h-live a { color: var(--gold-light); }
.op-live-dot { display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%; background: #e05a5a; box-shadow: 0 0 6px #e05a5a; vertical-align: 1px; }