/* Series, lotes y fabricación (2-nov-2026): ventana de series, fechas del lote, componentes de una fabricación y desglose del costo.
   Todo con rejillas auto-fit y los colores del tema (claro y oscuro); lo tocable mide 44 px o más. */

/* ---------- ventana de números de serie y sus herramientas ---------- */
.sv-forma { text-align: left; }
.sv-producto { margin: -4px 0 8px; color: var(--tinta-suave); font-weight: 600; overflow-wrap: anywhere; }
.sv-cuenta { margin: 0 0 6px; font-size: 1.05rem; }
.sv-cuenta.sv-excede strong:first-child { color: var(--jitomate); }
.sv-forma textarea, #form-se textarea { width: 100%; min-height: 120px; font-family: var(--f-cifra); font-variant-numeric: tabular-nums; resize: vertical; }
.sv-herramientas { margin: 8px 0 4px; }
.sv-botones { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.sv-botones .btn { flex: 1 1 96px; }
.sv-esc { margin: 0; }
.sv-esc input { width: 100%; min-height: 44px; }
.sv-nota-mala { color: var(--jitomate); font-weight: 600; }

/* ---------- fechas del lote, extras del costo (mano de obra, indirectos, desperdicio) ---------- */
.alm81-fechas, .alm81-extras { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: 12px; }
.alm81-fechas, .alm81-extras { margin: 10px 0; }
.alm81-fechas .campo, .alm81-extras .campo { min-width: 0; }
.alm81-fechas input, .alm81-extras input { width: 100%; min-height: 44px; }
.alm81-desglose { width: 100%; margin: 8px 0; }
.alm81-desglose td { padding: 6px 8px; }
.alm81-desglose .alm81-total td { font-weight: 700; border-top: 1px solid var(--regla); }
#re-calc .alm81-desglose { grid-column: 1 / -1; padding: 8px 12px; border-right: 0; }

/* ---------- fabricación: una tarjeta por producto, con sus componentes ---------- */
.fb-linea { border: 1px solid var(--regla); border-radius: var(--radio); background: var(--blanco); padding: 12px 14px; margin: 12px 0 14px; min-width: 0; }
.fb-linea > header { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.fb-linea > header h3 { font-size: 1.1rem; min-width: 0; overflow-wrap: anywhere; }
.fb-linea > header .btn { flex: none; }
.fb-linea .nota { margin: 6px 0; }
.fb-comp { margin-top: 10px; }
.fb-comp > summary { cursor: pointer; font-weight: 650; min-height: 44px; display: flex; align-items: center; }
.fb-comp .tabla input[type=text] { width: 100%; min-width: 90px; min-height: 40px; }
.fb-comp .tabla input[type=number] { width: 96px; min-height: 40px; }
.fb-comp .tabla small { display: block; }
.fb-comp .btn.chico { margin-top: 8px; }
.fb-lectura h3 { font-size: 1.05rem; }
.fb-botones { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.fb-botones .btn { flex: 1 1 160px; }

/* ---------- editor de compras: lote, fabricación, caducidad y series en una celda ---------- */
.celda-lote { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-end; min-width: 220px; }
.celda-fecha { display: flex; flex-direction: column; font-size: .8rem; color: var(--tinta-suave); }
.celda-fecha small { font-size: .75rem; }

/* ---------- ventanas centradas altas (series, corregir lote): se desplazan por dentro y nunca se salen de la pantalla ---------- */
.modal-confirma .modal-salida-caja { max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; }
.sv-forma .modal-salida-botones, #lc-f .modal-salida-botones { margin-top: 12px; }
#lc-f input[type=date], #lc-f input[type=text] { width: 100%; min-height: 44px; }

/* ---------- celular y reloj ---------- */
@media (max-width: 760px) {
  #vista .btn.chico, #panel .btn.chico, .modal-confirma .btn.chico { min-height: 44px; }
}
@media (max-width: 480px) {
  .fb-linea { padding: 10px; }
  .fb-linea > header { flex-wrap: wrap; }
  .fb-botones .btn, .sv-botones .btn { flex: 1 1 100%; }
  .fb-comp .tabla input[type=number] { width: 80px; }
}