/* Modo construcción · prefijo .bp- · v6.9.0.0
   Sin !important: este archivo se encola DESPUÉS de layer-controls.css,
   y .bp-btn.active / .bp-btn .icon ganan por orden con la misma especificidad. */

.bar-btn.bp-btn .icon { font-size: 20px; color: #dc2626; transition: color .15s; }
.bar-btn.bp-btn.active .icon { color: #16a34a; font-size: 24px; }

.bar-btn.bp-btn.active {
    background: linear-gradient(to bottom, #bbf7d0 0%, #86efac 100%);
    border-color: #16a34a;
}

.bp-progress {
    font-size: 12px;
    font-weight: 800;
    color: #16a34a;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    align-self: center;
    padding: 0 2px;
}
.bp-progress.bp-complete {
    color: #b45309;
}

#layer-number.bp-done {
    color: #16a34a;
}

/* Móvil: el contador "✓ N/M" se coloca ENCIMA del botón de validar, fuera del
   flujo de la barra, para que no robe ancho y los botones no se corten por los
   bordes. En PC se queda en línea (arriba está bien). */
@media (max-width: 768px) {
    #zone-bottom { position: relative; }
    .bp-progress {
        position: absolute;
        bottom: calc(100% + 4px);
        right: 0;
        padding: 0;
        align-self: auto;
        pointer-events: none;
    }
}