/* Laboratorio de bombas de agua */
.bb-lab { display: grid; gap: 16px; }
.bb-lab .btn.chico { min-height: 46px; }
.bb-lab select { min-height: 44px; }
.bb-escena { overflow-x: auto; border-radius: 12px; border: 2px solid var(--lab-borde); background: var(--lab-piso); }
.bb-escena:focus-visible { outline: 3px solid var(--tinta); outline-offset: 2px; }
.bb-escena-svg { display: block; width: 100%; min-width: 660px; height: auto; }
.bb-circuito-svg { display: block; width: 100%; min-width: 640px; height: auto; }
.bb-grupos { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; align-items: start; }
.bb-grupo { padding: 12px 14px; border: 2px solid var(--lab-borde); border-radius: 12px; background: var(--lab-caja); display: grid; gap: 10px; }
.bb-grupo.hecho { border-color: var(--lab-bien); }
.bb-grupo h3 { margin: 0; font-size: 1.05rem; }
.bb-visto { color: var(--lab-bien); font-weight: 700; }
.bb-regla { margin: 0; padding: 12px 14px; border-left: 6px solid var(--lab-mal); border-radius: 8px; background: var(--lab-piso); font-weight: 600; }
.bb-paso, .bb-dato { margin: 0; flex-basis: 100%; }
.bb-dato { font-weight: 700; }
.bb-lista { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; color: var(--lab-bien); font-weight: 600; }
.bb-nada { margin: 0; }
.bb-termicas { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.bb-termicas li { display: grid; gap: 6px; padding-bottom: 8px; border-bottom: 1px solid var(--lab-borde); }
.bb-termicas li:last-child { border-bottom: 0; padding-bottom: 0; }
.bb-detalles { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.bb-fig { margin: 0; flex: 1 1 240px; max-width: 380px; display: grid; gap: 6px; }
.bb-fig figcaption { font-size: .95rem; }
.bb-detalle-svg { width: 100%; height: auto; display: block; border-radius: 12px; }
.bb-tapa { flex: 1 1 240px; margin: 0; padding: 12px 14px; border: 2px dashed var(--lab-borde); border-radius: 12px; display: grid; gap: 8px; align-content: start; }
.bb-tapa p { margin: 0; }
.bb-punto { cursor: pointer; }
.bb-punto:hover .bb-aro, .bb-punto:focus .bb-aro { fill: rgba(242, 182, 50, .5); stroke-dasharray: none; stroke-width: 4; }
.bb-punto:focus { outline: none; }
.bb-marca { cursor: pointer; }
.bb-marca:focus { outline: none; }
.bb-marca:focus circle:nth-child(2), .bb-marca:hover circle:nth-child(2) { stroke: #E8B517; stroke-width: 5; }
.bb-numeros { display: flex; flex-wrap: wrap; gap: 8px; }
.bb-num { min-width: 48px; min-height: 48px; border: 2px solid var(--lab-borde); border-radius: 50%; background: var(--lab-caja); color: var(--tinta); font: inherit; font-weight: 900; font-size: 1.1rem; cursor: pointer; }
.bb-num.activo { background: #E8B517; border-color: var(--tinta); color: #1D2227; box-shadow: 0 0 0 2px var(--tinta); }
.bb-nombres, .bb-opciones, .bb-pruebas { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bb-opciones .btn, .bb-pruebas .btn { text-align: left; }
.bb-sabido summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.bb-sabido dl { margin: 0; display: grid; gap: 4px; }
.bb-sabido dt { font-weight: 700; }
.bb-sabido dd { margin: 0 0 6px; }
.bb-bandeja { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.bb-pieza { display: grid; justify-items: center; align-content: start; gap: 4px; min-height: 96px; padding: 8px 6px; border: 2px solid var(--lab-borde); border-radius: 12px; background: var(--lab-caja); color: var(--tinta); font: inherit; font-size: .92rem; font-weight: 600; text-align: center; cursor: pointer; }
.bb-pieza:hover, .bb-pieza:focus-visible { border-color: var(--tinta); }
.bb-icono { width: 64px; height: 44px; }
.bb-mano { max-width: 260px; }
.bb-mano-svg { width: 100%; max-width: 240px; height: auto; display: block; }
.bb-pres { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-start; }
.bb-preso-svg { width: 100%; max-width: 220px; height: auto; display: block; background: var(--lab-piso); border-radius: 10px; }
.bb-tornillos { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.bb-tornillo { display: grid; gap: 6px; padding: 10px; border: 2px solid var(--lab-borde); border-radius: 10px; }
.bb-tuerca-activa { stroke: #E8B517; stroke-width: 3; }
@media (max-width: 500px) { .bb-bandeja { grid-template-columns: repeat(2, 1fr); } .bb-grupos { grid-template-columns: 1fr; } }
.bb-fig-chica { max-width: 250px; }