.sheet-overlay{position:fixed;inset:0;background:rgba(15,22,35,.45);z-index:100;opacity:0;pointer-events:none;transition:opacity .22s ease;}
.sheet-overlay.open{opacity:1;pointer-events:auto;}
.sheet{position:fixed;left:50%;bottom:0;width:100%;max-width:480px;max-height:92vh;background:var(--paper);border-radius:20px 20px 0 0;transform:translate(-50%,calc(100% + 40px));transition:transform .28s cubic-bezier(.2,.8,.3,1);z-index:101;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -8px 30px rgba(0,0,0,.25);}
.sheet.open{transform:translate(-50%,0);}
@media(min-width:520px){.sheet{border-radius:20px 20px 12px 12px;}}
.sheet-handle{width:38px;height:4px;background:#D8D4C8;border-radius:3px;margin:9px auto 4px;flex-shrink:0;}
.sheet-head{background:var(--navy-2);padding:8px 16px 16px;flex-shrink:0;position:relative;}
.sheet-close{position:absolute;top:8px;right:14px;color:rgba(255,255,255,.7);padding:6px;}
.sheet-photo-row{display:flex;gap:12px;align-items:flex-start;margin-top:6px;}
.photo-box-wrap{position:relative;flex-shrink:0;}
.photo-box{width:78px;height:78px;border-radius:14px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;overflow:hidden;border:1px dashed rgba(255,255,255,.3);color:rgba(255,255,255,.5);position:relative;}
.photo-box img{width:100%;height:100%;object-fit:cover;}
.photo-box .cam-label{font-size:9px;margin-top:3px;letter-spacing:.5px;}
.photo-add-btn{position:absolute;top:-7px;right:-7px;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.10);border:1.5px dashed rgba(255,255,255,.35);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.45);font-size:15px;font-weight:400;line-height:1;cursor:pointer;z-index:5;transition:background .18s,color .18s,border-color .18s;}
.photo-add-btn:hover,.photo-add-btn:active{background:rgba(255,255,255,.22);color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.65);}
.sheet-titles{flex:1;min-width:0;padding-top:2px;}
.sheet-code{font-family:var(--mono);font-size:12px;color:var(--gold);margin-bottom:4px;}
.sheet-desc{font-size:15.5px;font-weight:650;color:#fff;line-height:1.3;}
.sheet-part{font-size:12px;color:rgba(255,255,255,.55);margin-top:5px;}
/* La maquina y el sistema del repuesto. Van sobre la cabecera oscura de la
   ficha, por eso los colores son literales y no tokens: ahi el fondo no
   cambia con el tema. */
.sheet-ruta{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px;}
.sheet-ruta:empty{display:none;}
.ruta-chip{font-size:11.5px;line-height:1;padding:5px 9px;border-radius:20px;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.85);font-family:inherit;cursor:pointer;
  max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ruta-chip:active{background:rgba(255,255,255,.2);}
.ruta-chip-pref{font-family:var(--mono);color:var(--gold);margin-right:5px;}
.photo-thumbs-row{display:flex;gap:7px;margin-top:10px;overflow-x:auto;padding-bottom:2px;-webkit-overflow-scrolling:touch;}
.photo-thumb-item{position:relative;flex-shrink:0;width:46px;height:46px;border-radius:9px;overflow:hidden;border:1.5px solid rgba(255,255,255,.25);cursor:pointer;}
.photo-thumb-item img{width:100%;height:100%;object-fit:cover;}
.photo-thumb-item.active{border-color:var(--gold);}

.sheet-scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px calc(env(safe-area-inset-bottom) + 24px) 16px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin-bottom:10px;}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:10px;}
.field-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;}
.field-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.8px;color:var(--ink-soft);font-weight:700;margin-bottom:5px;}
.field-input{width:100%;border:none;outline:none;font-size:15px;font-weight:700;color:var(--ink);font-family:var(--mono);background:transparent;padding:0;}
.field-card.editable{border-color:var(--gold-dim);}
.save-row{display:flex;gap:10px;margin-top:6px;}
.btn{flex:1;padding:13px;border-radius:12px;text-align:center;font-weight:700;font-size:14.5px;border:none;}
.btn-primary{background:var(--navy);color:#fff;}
.btn-secondary{background:#fff;border:1px solid var(--line);color:var(--ink);}

/* ── Search Meta Editor tabs ─────────────────────────────────────── */
.sm-tab{flex:1;padding:8px 4px;font-size:13px;font-weight:600;border:none;background:none;color:var(--ink-soft);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1.5px;transition:color .15s,border-color .15s;}
.sm-tab-active{color:var(--navy);border-bottom-color:var(--navy);}
.sm-row{display:grid;grid-template-columns:90px 1fr 30px;gap:5px;align-items:center;}
.sm-row-vis{display:grid;grid-template-columns:26px 85px 1fr 30px;gap:5px;align-items:center;}
.sm-row-wide{display:grid;grid-template-columns:120px 1fr 30px;gap:5px;align-items:center;}
.sm-input{border:1px solid var(--line);border-radius:8px;padding:7px 9px;font-size:13px;color:var(--ink);background:var(--paper);width:100%;box-sizing:border-box;outline:none;}
.sm-input:focus{border-color:var(--navy);}
.sm-del-btn{width:28px;height:28px;border-radius:6px;border:none;background:rgba(220,50,50,.08);color:#c0392b;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.sm-del-btn:active{background:rgba(220,50,50,.18);}
.sm-tol-row{display:grid;grid-template-columns:1fr 80px;gap:10px;align-items:center;}
.sm-tol-label{font-size:13px;font-weight:600;color:var(--ink);}
.sm-tol-sub{font-size:11px;color:var(--ink-soft);}

/* ── Movimientos de inventario ───────────────────────────────────── */
/* Una ficha abierta DESDE una lista tiene que pintarse ENCIMA de la lista.
   Todos los sheets comparten z-index 101 y #detailSheet es el PRIMERO del
   DOM: sin esto la ficha se abria por debajo y el tap parecia no hacer nada.
   Por eso recent_arrivals.js cerraba su sheet y esperaba 220ms antes de
   abrir la ficha; con esto ya no hace falta y no se pierde el sitio. */
.sheet-overlay.on-top{z-index:150;}
.sheet.on-top{z-index:151;}

/* Un carrito o un formulario abiertos DESDE el hub de Movimientos (#movSheet)
   necesitan su propio nivel, por debajo de .on-top: la ficha del artículo
   (#detailSheet) se puede abrir DESDE dentro del carrito (tocar una línea), y
   si ambos compartieran el mismo z-index, el carrito -mas tarde en el DOM
   ganaria y la ficha se veria detras de el. Orden de profundidad: hub (101) <
   carrito/formulario (131) < ficha (151). */
.sheet-overlay.on-top-hub{z-index:130;}
.sheet.on-top-hub{z-index:131;}

.mov-tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);flex-shrink:0;}
.mov-tab{flex:1;padding:9px 4px;font-size:13px;font-weight:600;border:none;background:none;color:var(--ink-soft);cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;transition:color .15s,border-color .15s;display:flex;align-items:center;justify-content:center;gap:5px;}
.mov-tab-active{color:var(--navy);border-bottom-color:var(--navy);}
.mov-tab-badge{min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--ink-soft);color:#fff;font-size:10px;font-weight:700;display:none;align-items:center;justify-content:center;line-height:1;box-sizing:border-box;}
.mov-tab-badge.on{display:inline-flex;}
.mov-tab-active .mov-tab-badge{background:var(--navy);}

.mov-panel{flex:1;display:none;flex-direction:column;min-height:0;}
.mov-panel.active{display:flex;}

/* Tarjeta del borrador (carrito) en cabecera de su pestaña */
.mov-borrador{display:flex;align-items:center;gap:10px;padding:10px 12px;margin:10px 0 2px;border:1px solid var(--line);border-radius:12px;background:var(--bg-card);cursor:pointer;flex-shrink:0;text-align:left;width:100%;box-sizing:border-box;font-family:inherit;}
.mov-borrador:active{background:var(--bg-hover);}
.mov-borrador-vacio{color:var(--ink-soft);border-style:dashed;}

/* Cualquier linea que abre la ficha del repuesto */
.mov-linea{cursor:pointer;border-radius:8px;}
.mov-linea:active{background:var(--bg-hover);}

/* ── Importador con mapeo de columnas ────────────────────────────────────
   Clases y no style= inline: la CSP en Report-Only ya arrastra 154 atributos
   de estilo que hay que quitar antes de poder ponerla a bloquear. */
.imp-tipos{display:flex;gap:6px;margin-bottom:14px;}
.imp-tipo{flex:1;padding:9px 4px;font-size:12.5px;font-weight:600;font-family:inherit;
  border:1px solid var(--line);border-radius:10px;background:var(--bg-card);
  color:var(--ink-soft);cursor:pointer;transition:background .15s,color .15s,border-color .15s;}
.imp-tipo-on{background:var(--navy);border-color:var(--navy);color:#fff;}
.imp-manual{display:block;width:100%;margin-top:10px;padding:8px;font-size:12.5px;
  font-family:inherit;color:var(--navy);background:none;border:none;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px;}
.imp-campo{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);}
.imp-campo:last-of-type{border-bottom:none;}
.imp-campo-nombre{flex:0 0 42%;font-size:13px;color:var(--ink);}
.imp-campo-req{color:var(--crit);margin-left:3px;}
.imp-campo select{flex:1;min-width:0;}
.imp-aviso{margin:10px 0;padding:9px 11px;border-radius:9px;font-size:12.5px;line-height:1.45;
  background:var(--bg-hover);color:var(--crit);border:1px solid var(--crit);}
.imp-aviso:empty{display:none;}
.imp-nota{font-size:12px;color:var(--ink-soft);line-height:1.5;margin:2px 0 12px;}
.imp-recordar{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-soft);
  margin:12px 0 4px;cursor:pointer;}
.imp-rechazadas{max-height:150px;overflow-y:auto;margin-top:8px;font-size:12px;
  color:var(--ink-soft);line-height:1.6;}

/* ── Sugerencias de máquina y sección ──────────────────────────────────────
   Van dentro del flujo, justo bajo el campo. Flotantes se salían de sitio en
   cuanto el teclado del teléfono cambiaba el alto de la ventana. */
.sug-lista { display: none; }
.sug-lista.abierta {
  display: flex; flex-direction: column;
  margin-top: 4px; max-height: 190px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card);
}
.sug-opcion {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border: 0; background: none; cursor: pointer;
  font-size: 13px; text-align: left; color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.sug-opcion:last-child { border-bottom: 0; }
.sug-opcion:hover, .sug-opcion:focus { background: var(--bg-hover); }
.sug-veces {
  flex-shrink: 0; font-size: 10.5px; font-weight: 700; color: var(--ink-soft);
  background: var(--bg-hover); border-radius: 999px; padding: 1px 7px;
}

/* ── Repuestos en máquina (el manual de partes) ──────────────────────────
   Clases y no style= inline, como el importador: la CSP sigue en
   Report-Only y lo que la bloquea son justo los atributos de estilo y los
   manejadores en línea que quedan. Un fichero nuevo no puede añadir más.

   Los estilos van al final de sheets.css y no a un css nuevo a propósito:
   un fichero de estilos nuevo hay que engancharlo en DOS sitios —el <link>
   de index.html y el APP_SHELL de sw.js— y olvidar el segundo no falla:
   sw.js:183 devuelve un 204 vacío, así que sin conexión la pantalla se
   vería sin estilos y nada avisaría. */

/* La línea que dice de dónde salió lo que se está viendo. Nunca se calla:
   una lista vacía porque no se pudo leer no puede parecer un manual vacío. */
.rm-aviso {
  font-size: 11.5px; line-height: 1.45; color: var(--ink-soft);
  background: var(--bg-hover); border-radius: 8px;
  padding: 8px 10px; margin: 6px 0 2px; flex-shrink: 0;
}
.rm-aviso-malo { background: #F8E2DE; color: var(--badge-crit-ink); }

.rm-fila { border-bottom: 1px solid var(--border); padding: 9px 2px; }
.rm-cabecera {
  width: 100%; text-align: left; background: none; border: none; padding: 0;
  cursor: pointer; display: flex; gap: 10px; align-items: flex-start;
  font-family: inherit;
}
.rm-cab-txt { flex: 1; min-width: 0; }
.rm-desc {
  font-size: 13.5px; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-sub {
  font-size: 11.5px; color: var(--steel); font-family: var(--mono);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-meta {
  font-size: 11px; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-cab-der { text-align: right; flex-shrink: 0; }
.rm-flecha { font-size: 15px; color: var(--ink-soft); line-height: 1.1; }

/* «x disponibles coincidentes». Cuatro estados y NINGUNO dice cero cuando
   nadie ha mirado: eso sería inventarse un dato. */
.rm-disp {
  font-size: 9.5px; font-weight: 700; letter-spacing: .5px; padding: 3px 7px;
  border-radius: 6px; text-transform: uppercase; display: inline-block;
}
.rm-disp-hay  { background: #E4F3E8; color: var(--badge-ok-ink); }
.rm-disp-cero { background: #F8E2DE; color: var(--badge-crit-ink); }
.rm-disp-sin  { background: #ECECEC; color: var(--badge-sin-ink); }
.rm-disp-nota { font-size: 10.5px; color: var(--ink-soft); margin-top: 3px; }

/* Lo que se despliega al tocar una fila */
.rm-panel { padding: 8px 0 2px; }
.rm-panel-t {
  font-size: 11px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--ink-soft); font-weight: 700; margin: 8px 0 5px;
}
.rm-cand {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 7px 0; border-top: 1px solid var(--border);
}
.rm-cand-txt { flex: 1; min-width: 0; }
.rm-cand-code { font-family: var(--mono); font-size: 11.5px; color: var(--steel); }
.rm-cand-desc {
  font-size: 12.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-cand-acc { display: flex; gap: 6px; flex-shrink: 0; align-items: center; }
.rm-motivo {
  font-size: 9.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  border-radius: 5px; padding: 2px 6px; background: var(--bg-hover); color: var(--ink-soft);
}
.rm-motivo-confirmado { background: #E4F3E8; color: var(--badge-ok-ink); }
.rm-motivo-parte      { background: #FBF0DC; color: var(--badge-bajo-ink); }

.rm-mini {
  min-height: 32px; padding: 5px 10px; border-radius: 8px; cursor: pointer;
  font-size: 12px; font-weight: 600; font-family: inherit;
  border: 1px solid var(--border); background: var(--bg-card); color: var(--ink);
}
.rm-mini-si { border-color: var(--ok); color: var(--badge-ok-ink); }
.rm-mini-no { border-color: var(--border); color: var(--ink-soft); }
.rm-mini-mal { border-color: var(--crit); color: var(--badge-crit-ink); }
.rm-mini:active { background: var(--bg-hover); }

.rm-acciones { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

/* El formulario de una pieza */
.rm-form { padding: 4px 0 2px; }
.rm-form .sm-input { margin-bottom: 8px; }
.rm-form-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.rm-form-et {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--ink-soft); font-weight: 700; margin: 2px 0 4px;
}
.rm-form-nota { font-size: 11px; color: var(--ink-soft); line-height: 1.45; margin: 2px 0 8px; }

/* Lo que falta de la placa. Va DEBAJO de la línea de características y no en
   lugar de ella: son recordatorios, no casillas. Se vacía sola al teclear. */
.rm-falta {
  display: flex; flex-wrap: wrap; gap: 5px; align-items: center;
  margin: -4px 0 10px; padding: 7px 8px;
  background: var(--bg-hover); border-radius: 8px;
  font-size: 11px; line-height: 1.4;
}
.rm-falta-et { color: var(--ink-soft); font-weight: 700; }
.rm-falta-c {
  padding: 3px 7px; border-radius: 999px;
  background: var(--bg-card); border: 1px solid var(--border);
  color: var(--ink); font-weight: 600; white-space: nowrap;
}
/* El ejemplo es lo que hace útil la etiqueta: 'Carcasa' no le dice a nadie que
   lo que hay que copiar de la placa es '184T'. */
.rm-falta-c em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.rm-falta-ok { color: var(--ink-soft); }
.rm-falta-mudo { color: var(--ink-soft); }
.rm-origen { display: flex; gap: 6px; margin-bottom: 10px; }
.rm-origen-op {
  flex: 1; padding: 8px 4px; font-size: 12px; font-weight: 600; font-family: inherit;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card); color: var(--ink-soft); cursor: pointer;
}
.rm-origen-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Vacíos y pie */
.rm-vacio { text-align: center; padding: 30px 14px; }
.rm-vacio-t { font-size: 15px; font-weight: 600; color: var(--ink); }
.rm-vacio-s { font-size: 12px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }
.rm-pie {
  display: flex; gap: 8px; align-items: center;
  padding: 8px 0 calc(env(safe-area-inset-bottom) + 8px); flex-shrink: 0;
  border-top: 1px solid var(--border);
}
.rm-pendientes { font-size: 11px; color: var(--ink-soft); flex: 1; line-height: 1.4; }

/* El armazón de la hoja. Va en clases y no en `style=` en el HTML: los 169
   atributos `style=` que quedan en index.html son justo lo que impide poner la
   CSP en modo bloqueante, y sería absurdo añadir más ahora. */
.rm-sheet { max-height: 98vh; height: 96vh; }

/* ── El árbol de repuestos en máquina ───────────────────────────────────────
   Una rama a la vez. Todo lo de aquí va en clases y no en style= porque la CSP
   está en Report-Only y lo que la bloquea son justo los atributos en línea. */

/* La máquina, con el nombre que le da quien la mantiene. El código de bodega
   ('1-105') no se pinta: es una etiqueta de contabilidad que aquí no dice
   nada y se come el ancho de una pantalla de teléfono. */
.rm-maq {
  display: flex; gap: 8px; align-items: flex-start;
  padding: 9px 10px; margin: 2px 0 8px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius);
}
.rm-maq-txt { flex: 1; min-width: 0; }
.rm-maq-n {
  font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.25;
}
.rm-maq-s { font-size: 11px; color: var(--ink-soft); margin-top: 3px; line-height: 1.4; }
.rm-maq-ed {
  flex-shrink: 0; background: none; border: 1px solid var(--border);
  border-radius: 8px; color: var(--steel); font-size: 13px;
  padding: 4px 9px; cursor: pointer; font-family: inherit; line-height: 1.2;
}
.rm-maq-ed:active { background: var(--bg-hover); }
.rm-maq-edit { display: block; }

/* Los dos órdenes posibles. Los botones dicen qué se verá al pulsarlos
   —«Aplicación», «Sistema»— y no cómo se llama el orden por dentro. */
.rm-orden { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; flex-wrap: wrap; }
.rm-orden-et { font-size: 10.5px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: .04em; }
.rm-orden-op {
  border: 1px solid var(--border); background: var(--bg-card); color: var(--ink-soft);
  border-radius: 999px; padding: 3px 11px; font-size: 11.5px; cursor: pointer;
  font-family: inherit;
}
.rm-orden-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Registrar / Consultar: dos pestañas del mismo manual, mismo patrón visual
   que el orden de arriba pero a todo lo ancho — es la elección más gorda de
   la pantalla, no un matiz de cómo se agrupan las ramas. */
.rm-modo { display: flex; gap: 6px; margin-bottom: 10px; }
.rm-modo-op {
  flex: 1; border: 1px solid var(--border); background: var(--bg-card); color: var(--ink-soft);
  border-radius: var(--radius); padding: 8px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit;
}
.rm-modo-on { background: var(--navy); border-color: var(--navy); color: #fff; }

/* Dónde está uno. Cada miga sube a su nivel, y la última no es un botón:
   es donde estás. */
.rm-migas {
  display: flex; gap: 4px; align-items: center; flex-wrap: wrap;
  margin-bottom: 8px; font-size: 11.5px;
}
.rm-atras {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  color: var(--ink); font-size: 15px; line-height: 1; padding: 3px 9px 5px;
  cursor: pointer; font-family: inherit; margin-right: 2px;
}
.rm-atras:active { background: var(--bg-hover); }
.rm-miga {
  background: none; border: none; padding: 1px 2px; cursor: pointer;
  color: var(--steel); font-size: 11.5px; font-family: inherit;
  max-width: 46vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rm-miga-aqui { color: var(--ink); font-weight: 600; cursor: default; }
.rm-miga-sep { color: var(--ink-soft); font-size: 11px; }

/* El buscador de Consultar. Filtra en memoria: no hay lectura de red que
   esperar, así que no le hace falta un botón de «buscar» aparte. */
.rm-buscar { margin-bottom: 10px; }
.rm-buscar .sm-input { margin-bottom: 0; }

/* Cada resultado lleva su ruta delante: fuera del árbol no hay migas que
   digan dónde está la pieza, y sin eso dos coincidencias de secciones
   distintas se leerían igual. */
.rm-resultado { margin-bottom: 4px; }
.rm-resultado-ruta {
  font-size: 10.5px; color: var(--ink-soft); padding: 7px 2px 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Las ramas del nivel abierto. Se toca una y se entra; las demás desaparecen. */
.rm-ramas { display: flex; flex-direction: column; gap: 6px; }
.rm-rama-fila { display: flex; gap: 6px; align-items: stretch; }
.rm-rama {
  flex: 1; min-width: 0; display: flex; gap: 10px; align-items: center;
  text-align: left; font-family: inherit; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 12px;
}
.rm-rama:active { background: var(--bg-hover); }
/* El hueco —«Sin sistema»— es lo que falta por rellenar, no una rama de
   verdad: se distingue sin gritar. */
.rm-rama-hueco { border-style: dashed; }
.rm-rama-txt { flex: 1; min-width: 0; }
.rm-rama-n {
  font-size: 13.5px; font-weight: 600; color: var(--ink); line-height: 1.3;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rm-rama-c { font-size: 11px; color: var(--steel); margin-top: 2px; }
.rm-rama-c-cero { color: var(--ink-soft); font-style: italic; }
.rm-rama-f { flex-shrink: 0; font-size: 17px; color: var(--ink-soft); line-height: 1; }
.rm-rama-x {
  flex-shrink: 0; background: none; border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--ink-soft); font-size: 12px;
  padding: 0 11px; cursor: pointer; font-family: inherit;
}
.rm-rama-x:active { background: var(--bg-hover); color: var(--badge-crit-ink); }
/* Renombrar. Mismo tamaño de toque que borrar, y al lado: los dos son de la
   rama, no de lo que hay dentro. */
.rm-rama-ed {
  flex-shrink: 0; background: none; border: 1px solid var(--border);
  border-radius: var(--radius); color: var(--steel); font-size: 12px;
  padding: 0 11px; cursor: pointer; font-family: inherit;
}
.rm-rama-ed:active { background: var(--bg-hover); }
/* El formulario del rótulo ocupa el sitio de su fila, no se abre debajo: así
   se ve cuál se está renombrando sin tener que resaltarla aparte. */
.rm-rama-edit {
  display: block; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 11px 12px;
}
.rm-add-rama {
  width: 100%; margin-top: 10px; padding: 10px;
  background: none; border: 1px dashed var(--border); border-radius: var(--radius);
  color: var(--steel); font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.rm-add-rama:active { background: var(--bg-hover); }
/* «+ Añadir pieza aquí» va junto a «+ Nueva <nivel>», no debajo: son las dos
   formas de avanzar desde el mismo hueco, y el margen de arriba de cada botón
   se cancela porque ya lo pone el gap del contenedor. */
.rm-ramas-acciones { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.rm-ramas-acciones .rm-add-rama { margin-top: 0; }
.rm-add-aqui {
  width: 100%; padding: 10px;
  background: none; border: 1px dashed var(--border); border-radius: var(--radius);
  color: var(--steel); font-size: 12.5px; cursor: pointer; font-family: inherit;
}
.rm-add-aqui:active { background: var(--bg-hover); }

/* La casilla del código de bodega: quien tiene la pieza delante se lo sabe. */
.rm-cod-add { display: flex; gap: 6px; margin-top: 8px; }
.rm-cod-add .sm-input { flex: 1; min-width: 0; margin-bottom: 0; }

/* Un código que YA es de esta pieza, con su foto y su existencia: es para lo
   que sirve tenerlo puesto. Se separa de los equivalentes a propósito —una
   decisión de una persona no puede leerse igual que una apuesta. */
.rm-cand-propio { align-items: center; }
.rm-cand-img {
  width: 40px; height: 40px; flex-shrink: 0; object-fit: cover;
  border-radius: 6px; border: 1px solid var(--border); background: var(--bg-hover);
}
.rm-cero { color: var(--badge-crit-ink); }

.rm-menu-list {
  padding: 6px 16px 0; flex: 1; display: flex; flex-direction: column; min-height: 0;
}
.rm-cabeza {
  display: flex; justify-content: space-between; align-items: center; flex-shrink: 0;
}
.rm-titulo { font-size: 17px; font-weight: 700; color: var(--ink); }
.rm-cerrar { padding: 6px; color: var(--ink-soft); cursor: pointer; margin-right: -6px; }
.rm-lista { overflow-y: auto; flex: 1; margin: 0 -16px; padding: 0 16px; }

/* ── Corregir una requisición ─────────────────────────────────────────────
   En clases y no en `style=` por lo mismo que .rm-sheet: los atributos
   `style=` que quedan son justo lo que impide poner la CSP en modo
   bloqueante, y sería absurdo añadir más ahora. */

/* El estado. Una requisición de antes no tiene el campo y sale «Pendiente»:
   ver reqEstado() en js/ui/requisitions.js. */
.req-chip {
  font-size: 9.5px; font-weight: 700; letter-spacing: .5px; padding: 3px 7px;
  border-radius: 6px; text-transform: uppercase; display: inline-block;
}
.req-chip-pendiente { background: #FBF0DC; color: var(--badge-bajo-ink); }
.req-chip-surtida   { background: #E4F3E8; color: var(--badge-ok-ink); }

.req-ed-rastro { font-size: 10.5px; color: var(--ink-soft); margin-top: 6px; }

/* El motivo de por qué no se puede corregir. Se PINTA, no se esconde: un
   botón que desaparece sin explicación manda a buscarlo otra vez. */
.req-ed-no { font-size: 11.5px; color: var(--ink-soft); margin-top: 8px; line-height: 1.45; }

.req-ed-form { padding: 4px 0 2px; }
.req-ed-campo { margin-bottom: 8px; }
.req-ed-et {
  display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink-soft); font-weight: 700; margin-bottom: 3px;
}
.req-ed-in {
  width: 100%; box-sizing: border-box; min-height: 38px; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card);
  color: var(--ink); font-size: 14px; font-family: inherit;
}
/* 16px en el input de cantidad a propósito: por debajo de 16px, Safari de iOS
   hace zoom al enfocarlo y deja la fila fuera de la pantalla. */
.req-ed-qty {
  width: 62px; box-sizing: border-box; min-height: 38px; padding: 6px 8px;
  text-align: center; font-size: 16px; font-family: inherit; font-weight: 700;
  border: 1px solid var(--border); border-radius: 8px;
  background: var(--bg-card); color: var(--ink);
}
.req-ed-linea {
  display: flex; gap: 8px; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--border);
}
.req-ed-linea-txt { flex: 1; min-width: 0; }
.req-ed-linea-desc {
  font-size: 12.5px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.req-ed-linea-code { font-family: var(--mono); font-size: 10.5px; color: var(--steel); }
/* 44px de lado: es el mínimo con el que se acierta con el pulgar, y esto se
   usa de pie en la bodega y a veces con guantes. */
.req-ed-quitar {
  width: 44px; height: 44px; flex-shrink: 0; border: none; background: none;
  color: var(--crit); font-size: 20px; line-height: 1; cursor: pointer; font-family: inherit;
}
.req-ed-aviso { font-size: 11.5px; color: var(--badge-crit-ink); margin-top: 8px; line-height: 1.45; }

/* El historial de requisiciones. Antes iba todo en `style=` dentro del
   innerHTML: lo mismo que impide poner la CSP en bloqueante, sólo que
   generado desde JavaScript en vez de escrito en index.html. */
.req-hist-aviso { text-align: center; padding: 32px 0; color: var(--ink-soft); font-size: 13px; }
.req-hist-vacio { text-align: center; padding: 40px 16px; color: var(--ink-soft); }
.req-hist-vacio-t { font-size: 14px; font-weight: 600; }
.req-hist-vacio-s { font-size: 12px; margin-top: 4px; }

.req-hist-row { border-bottom: 1px solid var(--border); }
.req-hist-header {
  display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; cursor: pointer;
}
.req-hist-izq { flex: 1; min-width: 0; }
.req-hist-dia { font-size: 12px; color: var(--ink-soft); }
.req-hist-quien { font-size: 13.5px; font-weight: 700; color: var(--ink); }
.req-hist-donde { font-size: 11.5px; color: var(--steel); }
.req-hist-der { text-align: right; flex-shrink: 0; }
.req-hist-n { font-size: 13px; font-weight: 700; color: var(--accent); }
.req-hist-qty { font-size: 11px; color: var(--ink-soft); }
.req-hist-flecha { margin-left: 4px; color: var(--ink-soft); font-size: 16px; line-height: 1.4; }

.req-hist-detail { display: none; background: var(--bg-hover); padding: 8px 14px 12px; }
.req-hist-detail.req-abierto { display: block; }

.req-linea {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 6px 4px; font-size: 12.5px; border-bottom: 1px solid var(--border);
}
.req-linea-txt { flex: 1; min-width: 0; }
.req-linea-desc {
  display: block; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.req-linea-code { display: block; font-size: 10.5px; color: var(--steel); }
.req-linea-qty { font-weight: 700; color: var(--accent); flex-shrink: 0; }