/* =====================================================================
   vistas.css — Estilos propios de cada pantalla y de la vista 3D
   ===================================================================== */
.rejilla-2 { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.nota { font-size: .8rem; }
.bloque { display: block; }
.punto { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.punto.verde { background: var(--verde); box-shadow: 0 0 8px var(--verde); }
.punto.gris { background: var(--texto-3); }
.ico.rojo { color: var(--rojo); }

/* ---------- Estado grande (inicio / configuración) ---------- */
.estado-sistema, .estado-conexion { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.estado-grande { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border-radius: 10px; border: 1px solid currentColor; background: rgba(0, 0, 0, .2); font-size: 1rem; }
.estado-grande i { width: 11px; height: 11px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; }
.estado-grande strong { color: inherit; }
.estado-detalle { display: grid; gap: 2px; font-size: .88rem; color: var(--texto-2); }
.estado-detalle strong { color: var(--texto); }

/* ---------- Inicio ---------- */
.inicio-hero { display: grid; gap: 18px; padding: 22px; border-radius: 18px; border: 1px solid var(--borde); background: radial-gradient(700px 260px at 0% 0%, rgba(13, 110, 253, .18), transparent 70%), linear-gradient(180deg, rgba(21, 33, 58, .92), rgba(14, 22, 40, .96)); }
.hero-txt h1 { font-size: 1.75rem; }
.hero-txt p { color: var(--texto-2); font-size: 1.05rem; }
.accesos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.acceso { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px; min-height: 104px; border-radius: 14px; border: 1px solid var(--borde-2); background: rgba(7, 13, 26, .45); text-decoration: none; transition: border-color .15s, transform .15s, box-shadow .15s; }
.acceso:hover { border-color: var(--azul-claro); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, .35); }
.acceso.destacado { border-color: var(--azul); background: linear-gradient(135deg, rgba(13, 110, 253, .28), rgba(13, 110, 253, .06)); box-shadow: 0 0 0 1px rgba(13, 110, 253, .4), 0 10px 30px rgba(13, 110, 253, .18); }
.acceso-ico { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--azul-bg); color: var(--azul-claro); }
.acceso.destacado .acceso-ico { background: var(--azul); color: #fff; }
.acceso-ico .ico { width: 26px; height: 26px; }
.acceso-txt { display: grid; gap: 4px; min-width: 0; padding-right: 18px; }
.acceso-txt strong { font-family: var(--f-titulo); font-size: 1.05rem; font-weight: 600; }
.acceso-txt small { color: var(--texto-2); font-size: .82rem; line-height: 1.35; }
.acceso-flecha { position: absolute; right: 14px; color: var(--texto-2); }
.lista-alertas { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lista-alertas li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; background: rgba(7, 13, 26, .4); }
.la-txt { display: grid; min-width: 0; }
.la-txt span { font-size: .8rem; }
.la-stock { font-weight: 600; }

/* ---------- Dispensar ---------- */
.dispensar-sup { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: stretch; }
.rejilla-productos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); align-content: start; }
.tarjeta-prod { display: grid; gap: 10px; align-content: start; padding: 12px; border-radius: 13px; border: 1px solid var(--borde-2); background: rgba(7, 13, 26, .45); cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.tarjeta-prod:hover { border-color: var(--azul-claro); }
.tarjeta-prod.sel { border-color: var(--azul); box-shadow: 0 0 0 1px var(--azul), 0 0 22px rgba(13, 110, 253, .35); background: linear-gradient(180deg, rgba(13, 110, 253, .14), rgba(7, 13, 26, .45)); }
.tarjeta-prod.agotado { cursor: default; }
.tarjeta-prod.agotado .img-prod { filter: grayscale(.8) brightness(.7); }
.tarjeta-prod .img-prod { aspect-ratio: 4 / 3; }
.tp-cuerpo { display: grid; gap: 6px; }
.tp-cuerpo h3 { font-size: 1rem; line-height: 1.25; }
.tp-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: .74rem; }
.tp-stock { color: var(--texto-2); }
.tp-stock strong { font-size: 1.05rem; }
.tp-stock.verde strong { color: var(--verde); } .tp-stock.amarillo strong { color: var(--amarillo); } .tp-stock.rojo strong { color: var(--rojo); }

.vista-sistema { display: grid; gap: 10px; }
.lienzo-3d { border-radius: 12px; border: 1px solid var(--borde); background: radial-gradient(circle at 50% 35%, #12233F, #070E1C 75%); overflow: hidden; display: grid; place-items: center; }
.lienzo-3d.compacto { max-height: 300px; }
.vista3d { width: 100%; height: auto; display: block; }
.leyenda-ejes { list-style: none; margin: 0; padding: 10px; display: grid; gap: 10px; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; border: 1px solid var(--borde); border-radius: 12px; background: rgba(7, 13, 26, .4); font-size: .8rem; color: var(--texto-2); }
.leyenda-ejes li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; }
.leyenda-ejes b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 7px; font-family: var(--f-mono); font-size: .9rem; }
.leyenda-ejes b .ico { width: 16px; height: 16px; }
.lx { background: rgba(110, 168, 255, .16); color: #6EA8FF; }
.ly { background: rgba(94, 234, 212, .14); color: #5EEAD4; }
.lz { background: rgba(196, 181, 253, .15); color: #C4B5FD; }
.li { background: rgba(252, 211, 77, .14); color: #FCD34D; }

.barra-despacho { grid-template-columns: auto auto auto minmax(200px, 1fr) auto; align-items: center; gap: 14px 20px; }
.barra-despacho .tarjeta-titulo { white-space: nowrap; }
.stock-disp { color: var(--texto-2); white-space: nowrap; }
.stock-disp .mono { font-size: 1.15rem; font-weight: 600; }
.stock-disp .verde { color: var(--verde); } .stock-disp .amarillo { color: var(--amarillo); } .stock-disp .rojo { color: var(--rojo); }
.motivo { grid-column: 1 / -1; font-size: .84rem; color: var(--amarillo); margin-top: -4px; }
.motivo.ok { color: var(--texto-2); }
.motivo:empty { display: none; }

.dispensar-inf { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
.info-producto { display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 16px; align-items: start; }
.info-producto > .vacio-bloque { grid-column: 1 / -1; }
.info-img { border: 1px solid var(--borde); }
.info-datos { margin: 0; display: grid; gap: 6px; }
.info-nombre strong { font-family: var(--f-titulo); font-size: 1.15rem; font-weight: 600; }
.info-fila { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; font-size: .9rem; }
.info-fila dt { color: var(--texto-2); }
.info-fila dd { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.coords { font-size: .82rem; color: #BBD3FF; }
.progreso-txt { color: var(--texto-2); font-size: .88rem; }

/* ---------- Vista 3D (SVG) ---------- */
.vista3d .v3-base { fill: #0B1529; stroke: #1E2F50; }
.vista3d .v3-panel { fill: url(#v3-fondo); stroke: #1E2F50; }
.vista3d .v3-panel-lat { fill: #0D1A31; stroke: #1E2F50; }
.vista3d .v3-poste { stroke: #5A6B86; stroke-width: 5; stroke-linecap: round; }
.vista3d .v3-riel { stroke: #8494AE; stroke-width: 4; stroke-linecap: round; }
.vista3d .v3-celda .fondo { fill: #13233F; stroke: #22385E; }
.vista3d .v3-celda .piso { fill: #1A2D4D; stroke: #22385E; }
.vista3d .v3-celda .pared { fill: #0F1D36; stroke: #22385E; }
.vista3d .v3-celda .frente { fill: none; stroke: #3C5480; stroke-width: 2.5; }
.vista3d .v3-celda .prod.cara-fre { fill: #1E5BB8; stroke: #5C9BFF; stroke-width: .8; }
.vista3d .v3-celda .prod.cara-sup { fill: #3E7BDB; stroke: #5C9BFF; stroke-width: .8; }
.vista3d .v3-celda .prod.cara-lat { fill: #163F80; stroke: #5C9BFF; stroke-width: .8; }
.vista3d .num-fondo { fill: #0D6EFD; stroke: #7FB0FF; stroke-width: 1; }
.vista3d .num-txt { fill: #fff; font: 600 14px var(--f-mono); }
.vista3d .nombre { fill: #AFC2DD; font: 500 11px var(--f-texto); }
.vista3d .v3-celda.libre .num-fondo { fill: #24324B; stroke: #3C5480; }
.vista3d .v3-celda.sel .frente { stroke: #3B8BFF; stroke-width: 4; filter: url(#v3-brillo); }
.vista3d .v3-celda.sel .piso { fill: #1D3A6B; }
.vista3d .v3-celda.activa .frente { stroke: #FACC15; stroke-width: 4; animation: v3pulso 1s ease-in-out infinite; }
.vista3d .v3-bandeja.cara-fre { fill: #1C2B44; stroke: #3C5480; }
.vista3d .v3-bandeja.cara-sup { fill: #233756; stroke: #3C5480; }
.vista3d .v3-bandeja.cara-lat { fill: #15233B; stroke: #3C5480; }
.vista3d .v3-bandeja-borde { fill: rgba(34, 197, 94, .08); stroke: #22C55E; stroke-width: 1.5; stroke-dasharray: 5 4; }
.vista3d .v3-txt-bandeja { fill: #6EE7A0; font: 600 10px var(--f-mono); letter-spacing: .12em; }
.vista3d .v3-columna.cara-fre { fill: #6B7D99; } .vista3d .v3-columna.cara-sup { fill: #8899B3; } .vista3d .v3-columna.cara-lat { fill: #4F5F78; }
.vista3d .v3-carro.cara-fre { fill: #0D6EFD; stroke: #8DB8FF; stroke-width: .8; }
.vista3d .v3-carro.cara-sup { fill: #4D94FF; stroke: #8DB8FF; stroke-width: .8; }
.vista3d .v3-carro.cara-lat { fill: #0A50BA; stroke: #8DB8FF; stroke-width: .8; }
.vista3d .v3-pala { fill: rgba(250, 204, 21, .85); stroke: #FDE68A; stroke-width: 1; }
.vista3d .v3-pala-tope { fill: #D9A90E; stroke: #FDE68A; stroke-width: 1; }
.vista3d .v3-punto { fill: #fff; stroke: #0D6EFD; stroke-width: 2; }
.vista3d .v3-flecha { stroke: #3B8BFF; stroke-width: 3; fill: none; }
.vista3d .v3-eje-txt { fill: #6EA8FF; font: 700 19px var(--f-titulo); }
@keyframes v3pulso { 50% { stroke-opacity: .35; } }

/* ---------- Inventario ---------- */
.inventario-cuerpo { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.filtros-3 { grid-template-columns: minmax(0, 1fr) minmax(150px, 200px) minmax(140px, 180px); }
.mapa-andamio { display: grid; gap: 8px; padding: 10px; border: 2px solid var(--borde-2); border-radius: 12px; background: rgba(7, 13, 26, .5); }
.mapa-celda { position: relative; display: grid; gap: 2px; align-content: start; min-height: 96px; padding: 8px; padding-top: 30px; border-radius: 9px; border: 1px solid var(--borde-2); border-bottom: 3px solid; background: var(--panel-2); text-decoration: none; font-size: .78rem; transition: border-color .15s; }
.mapa-celda:hover { border-color: var(--azul-claro); }
.mapa-celda strong { font-size: .82rem; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.mapa-num { position: absolute; top: 7px; left: 8px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 5px; background: var(--azul); color: #fff; font: 600 .74rem var(--f-mono); }
.mapa-etq { position: absolute; top: 8px; right: 8px; font-size: .7rem; }
.mapa-celda.estado-disponible { border-bottom-color: var(--verde); }
.mapa-celda.estado-bajo { border-bottom-color: var(--amarillo); }
.mapa-celda.estado-sin { border-bottom-color: var(--rojo); }
.mapa-celda.libre { border-style: dashed; border-bottom-style: dashed; border-bottom-color: var(--borde-2); background: transparent; }
.mapa-celda.libre .mapa-num { background: var(--panel-3); color: var(--texto-2); }

/* ---------- Gestionar ---------- */
.gestionar { display: grid; gap: 20px; grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
.lista-productos { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista-productos a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; }
.lista-productos a:hover { background: var(--panel-2); }
.lista-productos a.activo { border-color: var(--azul); background: var(--azul-bg); }
.lp-txt { display: grid; min-width: 0; }
.lp-txt strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-txt small { font-size: .74rem; }
.lp-stock { font-family: var(--f-mono); font-size: .8rem; font-weight: 600; white-space: nowrap; }
.lp-stock.verde { color: var(--verde); } .lp-stock.amarillo { color: var(--amarillo); } .lp-stock.rojo { color: var(--rojo); }
.form-columnas { display: grid; gap: 20px; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: start; }
.grupo { border: 1px solid var(--borde); border-radius: 12px; padding: 14px; margin: 0; min-width: 0; background: rgba(7, 13, 26, .3); }
.grupo-cuerpo { display: grid; gap: 14px; min-width: 0; }
.grupo legend { padding: 0 6px; }
.grupo .rejilla-campos { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.grupo .ancho-2 { grid-column: span 2; }
.rejilla-pos { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.botones-pos { display: flex; flex-wrap: wrap; gap: 8px; }
.imagen-editor { display: grid; grid-template-columns: minmax(0, 1fr) 120px; gap: 12px; }
.zona-imagen { display: grid; place-items: center; align-content: center; gap: 6px; min-height: 120px; padding: 12px; text-align: center; border: 1.5px dashed var(--borde-2); border-radius: 12px; color: var(--texto-2); cursor: pointer; font-size: .86rem; transition: border-color .15s, background .15s; }
.zona-imagen .ico { width: 28px; height: 28px; }
.zona-imagen small { color: var(--texto-3); }
.zona-imagen:hover, .zona-imagen.sobre { border-color: var(--azul-claro); background: var(--azul-bg); color: var(--texto); }
.imagen-editor input:focus-visible + .zona-imagen { outline: 2px solid var(--azul-claro); outline-offset: 2px; }
.img-vista .img-prod { width: 120px; height: 120px; border: 1px solid var(--borde); }
.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.preset { padding: 2px; border-radius: 10px; border: 1.5px solid transparent; background: transparent; }
.preset[aria-pressed="true"] { border-color: var(--azul); }
.preset:hover { border-color: var(--azul-claro); }
.form-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding-top: 4px; border-top: 1px solid var(--borde); padding-top: 14px; }
.form-acciones .btn-borrar { margin-right: auto; }

/* ---------- Operación manual ---------- */
.manual { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); align-items: start; }
.manual-ejes { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.manual-lado { display: grid; gap: 16px; }
.eje-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.eje-cab p { font-size: .82rem; margin-top: 2px; }
.eje-valor { font-size: 1.45rem; font-weight: 500; white-space: nowrap; }
.eje-x .eje-valor { color: #6EA8FF; } .eje-y .eje-valor { color: #5EEAD4; } .eje-z .eje-valor { color: #C4B5FD; } .eje-i .eje-valor { color: #FCD34D; }
.eje-barra { height: 8px; border-radius: 6px; background: var(--fondo); border: 1px solid var(--borde); overflow: hidden; }
.eje-barra-relleno { height: 100%; width: 0; background: linear-gradient(90deg, var(--azul), var(--azul-claro)); transition: width .1s linear; }
.eje-y .eje-barra-relleno { background: linear-gradient(90deg, #0E9488, #5EEAD4); }
.eje-z .eje-barra-relleno { background: linear-gradient(90deg, #7C3AED, #C4B5FD); }
.eje-botones { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; }
.eje-botones .btn { padding-inline: 10px; }
.eje-i .eje-botones { grid-template-columns: repeat(3, 1fr); }
.btn-detener { border-color: rgba(239, 68, 68, .5); color: #FF9C9C; }
.btn-detener:hover:not(:disabled) { background: var(--rojo-bg); color: #fff; border-color: var(--rojo); }
.acciones-manual { display: grid; gap: 10px; }
.ir-celda { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.btn-paro {
  display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px 18px; text-align: left;
  border-radius: 16px; border: 2px solid #FF8A8A;
  background: radial-gradient(circle at 20% 30%, #FF5A5A, #B91C1C 70%); color: #fff;
  box-shadow: 0 0 0 4px rgba(250, 204, 21, .9), 0 0 0 7px #1A1A1A, 0 12px 30px rgba(239, 68, 68, .35);
  margin: 7px;  width: calc(100% - 14px);
}
.btn-paro:hover:not(:disabled) { filter: brightness(1.08); }
.btn-paro:active:not(:disabled) { transform: translateY(1px); }
.btn-paro:disabled { filter: grayscale(.7) brightness(.6); }
.paro-anillo { width: 54px; height: 54px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(0, 0, 0, .22); border: 2px solid rgba(255, 255, 255, .5); }
.paro-anillo .ico { width: 28px; height: 28px; }
.btn-paro strong { display: block; font-family: var(--f-titulo); font-size: 1.1rem; letter-spacing: .04em; }
.btn-paro small { opacity: .9; }
.monitor { height: 220px; overflow-y: auto; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--borde); background: #050A14; font: .8rem/1.6 var(--f-mono); }
.ml { display: grid; grid-template-columns: auto 16px minmax(0, 1fr); gap: 8px; }
.ml-t { color: var(--texto-3); }
.ml-tx { color: #FCD34D; } .ml-rx { color: #86EFAC; } .ml-sis { color: #93C5FD; } .ml-pos { color: var(--texto-3); }
.monitor-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }

/* ---------- Configuración ---------- */
.config { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.config .t-conexion { grid-column: 1 / -1; }
.tipos-conexion { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.tipo-con { display: grid; gap: 4px; justify-items: start; text-align: left; padding: 14px; border-radius: 12px; border: 1px solid var(--borde-2); background: rgba(7, 13, 26, .45); }
.tipo-con .ico { width: 24px; height: 24px; color: var(--azul-claro); margin-bottom: 4px; }
.tipo-con small { color: var(--texto-2); font-size: .78rem; line-height: 1.35; }
.tipo-con:hover { border-color: var(--azul-claro); }
.tipo-con.sel { border-color: var(--azul); background: var(--azul-bg); box-shadow: 0 0 0 1px var(--azul); }
.t-conexion > div:last-child { display: grid; gap: 14px; }
.botones-datos { display: flex; flex-wrap: wrap; gap: 10px; }
.barra-guardar { position: sticky; top: 72px; z-index: 15; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--azul); background: rgba(13, 30, 62, .95); box-shadow: var(--sombra); }
.barra-guardar > span { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; color: #CFE0FF; }

/* ---------- Historial ---------- */
.filtros-historial { display: grid; gap: 12px; grid-template-columns: minmax(260px, 1.3fr) repeat(2, minmax(150px, 1fr)) minmax(200px, 1.4fr); align-items: end; }
.rango-fechas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.filtros-rapidos { grid-column: 1 / -1; display: flex; gap: 8px; }
.tabla td.detalle { max-width: 280px; font-size: .82rem; }
.paginacion { display: flex; justify-content: center; align-items: center; gap: 14px; }
.paginacion:empty { display: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1400px) {
  .barra-despacho { grid-template-columns: auto auto 1fr; }
  .barra-despacho .btn-exito { grid-column: 1 / 3; }
  .barra-despacho .tarjeta-titulo { grid-column: 1 / -1; }
}
@media (max-width: 1280px) {
  .dispensar-sup, .dispensar-inf, .manual { grid-template-columns: minmax(0, 1fr); }
  .manual-lado { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manual-lado .btn-paro { grid-column: 1 / -1; }
  .inventario-cuerpo, .gestionar { grid-template-columns: minmax(0, 1fr); }
  .t-lista .lista-productos { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .form-columnas { grid-template-columns: minmax(0, 1fr); }
  .filtros-historial { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .t-mapa { max-width: 560px; }
}
@media (max-width: 900px) {
  .rejilla-2, .config, .manual-ejes, .manual-lado { grid-template-columns: minmax(0, 1fr); }
  .filtros-3 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .vista-sistema { grid-template-columns: minmax(0, 1fr); }
  .leyenda-ejes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .barra-despacho { grid-template-columns: minmax(0, 1fr) auto; }
  .barra-despacho .btn-exito, .barra-despacho .btn-secundario { grid-column: 1 / -1; }
  .rejilla-productos { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .tarjeta-prod { padding: 10px; }
  .info-producto { grid-template-columns: 88px minmax(0, 1fr); }
  .info-fila { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .filtros-historial, .rango-fechas { grid-template-columns: minmax(0, 1fr); }
  .imagen-editor { grid-template-columns: minmax(0, 1fr) 96px; }
  .img-vista .img-prod { width: 96px; height: 96px; }
  .grupo .ancho-2 { grid-column: auto; }
  .hero-txt h1 { font-size: 1.35rem; }
  .lista-alertas li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .lista-alertas li .badge { display: none; }
  .eje-botones .btn span { font-size: .85rem; }
}

/* Ajustes de prioridad */
.topbar .menu-btn { display: none; }
@media (max-width: 760px) { .topbar .menu-btn { display: inline-flex; } }
.manual-lado .pos-ejes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Los elementos de una cuadrícula pueden encogerse (las tablas hacen scroll dentro de su caja) */
.tarjeta > *, .manual > *, .manual-ejes > *, .manual-lado > *, .rejilla-2 > *, .dispensar-sup > *,
.dispensar-inf > *, .inventario-cuerpo > *, .gestionar > *, .config > *, .vista > * { min-width: 0; }
@media (max-width: 640px) {
  .eje-botones { gap: 6px; }
  .eje-botones .btn { padding: 10px 6px; gap: 4px; min-width: 0; font-size: .85rem; }
  .eje-botones .btn .ico { display: none; }
}